绘制后台管理用户编辑模态框

sso-manage-console-web/src/components/user/UserHome.vue

@@ -47,7 +47,7 @@
                     <div class="x-item" v-for="user in userList">
                       <div class="x-icon"><i class="fa fa-user"></i></div>
                       <p>
-                        <a class="x-title x-editor-trigger" href="javascript:void(0)"
+                        <a class="x-title x-editor-trigger" href="javascript:void(0)" @click="showEditDialog(user)"
                            data-mobile="  0756-3610188  " data-email="headcon001@headcon.cn"
                            v-text="user.realName || '姓名'">姓名</a>
                       </p>
@@ -168,15 +168,23 @@
         </div>
       </div>
     </div>
+    <div>
+      <!-- modal -->
+      <user-edit-modal :visible.sync="showModal" :data="selectedUser"/>
+    </div>
   </div>
 </template>
 
 <script>
 import _ from 'lodash'
 import axios from '@/assets/js/axios'
+import UserEditModal from './modal/UserEditModal'
 
 export default {
   name: 'AppHome',
+  components: {
+    UserEditModal
+  },
   data () {
     return {
       pageParams: {
@@ -188,7 +196,8 @@ export default {
       showSearch: false,
       userList: [],
       totalPages: 1,
-      numberPage: 1
+      showModal: false,
+      selectedUser: {}
     }
   },
   computed: {
@@ -276,6 +285,10 @@ export default {
       }
 
       this.loadUserList()
+    },
+    showEditDialog (user) {
+      this.selectedUser = user || {}
+      this.showModal = true
     }
   }
 }

sso-manage-console-web/src/components/user/modal/UserEditModal.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="modal fade in" role="dialog" aria-hidden="false" style="display: block;" v-if="isVisible">
+    <div class="modal-dialog x-modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+        <!-- tab切换 start-->
+        <ul class="nav nav-tabs x-nav-tabs x-navbar-right hidden-xs modal-header" role="tablist">
+          <li :class="{active: showTab === 'logs'}"><a href="#userDetailModal_log" aria-controls="userDetailModal_log" role="tab" data-toggle="tab" @click="showTab = 'logs'">操作日志</a></li>
+          <li :class="{active: showTab === 'apps'}"><a href="#userDetailModal_apps" aria-controls="userDetailModal_apps" role="tab" data-toggle="tab" @click="showTab = 'apps'">绑定企业、应用</a></li>
+          <li :class="{active: showTab === 'default'}"><a href="#userDetailModal_info" aria-controls="userDetailModal_info" role="tab" data-toggle="tab" @click="showTab = 'default'">详细资料</a></li>
+          <h2 class="hidden-xs">
+            <i class="fa fa-file-text-o"></i> {{data.realName || '姓名'}}
+          </h2>
+        </ul>
+        <!-- tab切换 end-->
+        <div role="tabpanel" id="userDetailModal_info" class="x-tab-pane" :class="{active: showTab === 'default'}">
+          <div class="modal-body">
+            <div class="x-group-header">
+              <h4>个人信息</h4>
+            </div>
+            <dl class="dl-horizontal x-dl-horizontal">
+              <dt>姓名</dt>
+              <dd v-text="data.realName || '姓名'"></dd>
+              <dt>性别</dt>
+              <dd>男</dd>
+              <dt>身份证号</dt>
+              <dd v-text="data.idCard"></dd>
+              <dt>出生日期</dt>
+              <dd></dd>
+            </dl>
+            <div class="x-group-header">
+              <h4>账户安全</h4>
+            </div>
+            <dl class="dl-horizontal x-dl-horizontal">
+              <dt>绑定手机</dt>
+              <dd>{{data.mobile}}&nbsp;<a class="x-btn-text" href="javascript:void(0)">更换</a></dd>
+              <dt>绑定邮箱</dt>
+              <dd v-if="!data.email">&nbsp;<a class="x-btn-text" href="javascript:void(0)">绑定</a></dd>
+              <dd v-if="data.email">{{data.email}}&nbsp;<a class="x-btn-text" href="javascript:void(0)">更换</a></dd>
+            </dl>
+            <div class="x-group-header">
+              <h4>组织架构</h4>
+            </div>
+            <dl class="dl-horizontal x-dl-horizontal">
+              <dt>部门</dt>
+              <dd></dd>
+              <dt>职称</dt>
+              <dd>管理员</dd>
+            </dl>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-blank x-btn-reset">重置密码</button>
+            <button type="button" class="btn btn-blank" data-dismiss="modal" @click="isVisible = false">关闭</button>
+          </div>
+        </div>
+        <div role="tabpanel" id="userDetailModal_apps" class="x-tab-pane" :class="{active: showTab === 'apps'}">
+          <div class="modal-body">
+            <div class="x-mod x-list x-list-2x" style="margin: -15px">
+              <div class="x-mod-body">
+                <div class="x-common-list" id="apps">
+                  <!-- users -->
+                </div>
+                <div class="x-empty">
+                  <i class="fa fa-coffee"></i>
+                  <p>还没有绑定任何企业或应用</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-blank">添加到企业</button>
+            <button type="button" class="btn btn-blank">设置为管理员</button>
+            <button type="button" class="btn btn-blank" data-dismiss="modal" @click="isVisible = false">关闭</button>
+          </div>
+        </div>
+        <div role="tabpanel" id="userDetailModal_log" class="x-tab-pane" :class="{active: showTab === 'logs'}">
+          <div class="modal-body">
+            <!-- 日志列表 start -->
+            <div class="x-mod x-list x-log-list" style="margin: -15px">
+              <div class="x-mod-body">
+                <div class="x-common-list">
+                  <!-- log item -->
+                </div>
+                <div class="x-empty" style="display: none">
+                  <i class="fa fa-coffee"></i>
+                  <p>还没有留下任何足迹！</p>
+                </div>
+              </div>
+            </div>
+            <!-- 日志列表 end -->
+          </div>
+          <div class="modal-footer">
+            <ul class="pagination pull-left" style="margin: 0"></ul>
+            <button type="button" class="btn btn-blank" data-dismiss="modal" @click="isVisible = false">关闭</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'UserEditModal',
+    props: {
+      visible: Boolean,
+      data: Object
+    },
+    data () {
+      return {
+        isVisible: false,
+        showTab: 'default'
+      }
+    },
+    watch: {
+      visible: function (value) {
+        this.isVisible = value
+      },
+      isVisible: function (value) {
+        this.$emit('update:visible', value)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>