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

<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 === 'apps'}"><a aria-controls="userDetailModal_apps" role="tab" data-toggle="tab" @click="showBindApps()">绑定企业、应用</a></li>
          <li :class="{active: showTab === 'default'}"><a 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> {{user.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="user.realName || '姓名'"></dd>
              <dt>性别</dt>
              <dd>男</dd>
              <dt>身份证号</dt>
              <dd v-text="user.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>{{user.mobile}}&nbsp;<a class="x-btn-text" href="javascript:void(0)">更换</a></dd>
              <dt>绑定邮箱</dt>
              <dd v-if="!user.email">&nbsp;<a class="x-btn-text" href="javascript:void(0)">绑定</a></dd>
              <dd v-if="user.email">{{user.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 class="x-item" v-for="space in spaces">
                    <div class="x-icon"><i class="fa fa-file-o"></i></div>
                    <p>
                      <span class="x-title text-info">{{space.spaceName}}</span><!--<span
                      class="pull-right x-text-muted">b2b</span>-->
                    </p>
                    <div class="x-text-muted">管理员<span class="pull-right">{{space.spaceUU}}</span></div>
                    <div class="x-title pull-right"><a type="button"
                                                       class="btn btn-blank btn-synchrodata"
                                                       onclick="app.synchrodata(170828)">同步数据</a><a
                      type="button" class="btn btn-blank btn-userpwd" onclick="app.userpwd(170828)">查询密码</a>
                    </div>
                  </div>
                </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>
    </div>
  </div>
</template>

<script>
  import axios from '@/assets/js/axios'

  export default {
    name: 'UserEditModal',
    props: {
      visible: Boolean,
      user: Object
    },
    data () {
      return {
        isVisible: false,
        showTab: 'default',
        spaces: []
      }
    },
    watch: {
      visible: function (value) {
        this.isVisible = value
      },
      isVisible: function (value) {
        this.$emit('update:visible', value)
      }
    },
    methods: {
      showBindApps () {
        const success = spaces => {
          this.showTab = 'apps'
          this.spaces = spaces
          console.log(spaces)
        }
        const error = response => { console.log('error', response) }

        axios.get(`/api/user/${this.user.userUU}/findSpacesByUser`).then(success).catch(error)
      }
    }
  }
</script>

<style scoped>

</style>