sso-parent/sso-manage-console-web/src/components/accounts/enterprises/EnterpriseAdmin.vue

<template>
  <div>
    <message-list :messages="messages">
      <button class="btn btn-default btn-change" slot="action" @click="changeAdmin">更换管理员</button>
      <button class="btn btn-default" slot="action" @click="showRecords">更换记录</button>
    </message-list>

    <!-- 更换管理员对话框 -->
    <el-dialog
      title="更换管理员"
      :visible.sync="changeAdminVisible"
      width="450px"
      :show-close="true"
      :append-to-body="true">
      <!-- 对话框内容 -->
      <el-row type="flex" class="row-bg">
        <el-select v-model="key" placeholder="请选择">
          <el-option
            v-for="item in items"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div class="input-group search-group" style="width: 242px;margin-left: 5px;">
          <el-input placeholder="请输入内容" v-model="keyword"></el-input>
          <!--<el-autocomplete
            v-model="keyword"
            placeholder="请输入内容">
          </el-autocomplete>-->
          <span class="input-group-btn">
            <button class="btn btn-default btn-search" type="button" @click="searchAndSelectAdmin">搜索</button>
          </span>
        </div>
      </el-row>
      <!-- 用户信息展示 -->
      <div class="selected-user-info">
        <div class="row">
          <div class="message-label">UU号</div>
          <div class="message-value" v-text="adminUser.userUU">U0516</div>
        </div>
        <div class="row">
          <div class="message-label">姓名</div>
          <div class="message-value" v-text="adminUser.realName || adminUser.vipName">陈正亮</div>
        </div>
        <div class="row">
          <div class="message-label">手机号</div>
          <div class="message-value" v-text="adminUser.mobile">13600001122</div>
        </div>
        <div class="row">
          <div class="message-label">邮箱</div>
          <div class="message-value" v-text="adminUser.email">1891141208@qq.com</div>
        </div>
      </div>
      <!-- 对话框尾部 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitToBeChangedUser">确 定</el-button>
        <el-button @click="changeAdminVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from '@/assets/js/axios'
  import MessageList from './common/MessageList'
  import * as types from '@/store/mutation-types'

  const keys = [
    {
      label: 'UU号',
      value: 'userUU'
    },
    {
      label: '手机号',
      value: 'mobile'
    },
    {
      label: '邮箱',
      value: 'email'
    }
  ]

  export default {
    name: 'enterprise-admin',
    components: {
      MessageList
    },
    data () {
      return {
        changeAdminVisible: false,
        items: keys,
        key: 'userUU',
        keyword: '',
        adminUser: {}
      }
    },
    computed: {
      messages () {
        const adminInfo = this.$store.getters.enAdmin
        const enterprise = this.enterprise

        for (let info of adminInfo) {
          if (info.label === '管理员名称' && info.value) {
            info.suffixClass = 'admin-message'
            info.action = () => {
              const routeLocation = {name: 'UserBasicInfo', params: enterprise.admin, replace: true}
              this.$router.push(routeLocation)
            }
          } else if (info.label === '申诉状态' && info.value) {
            info.suffixClass = 'admin-message'
            info.action = () => {
              const routeLocation = {name: 'AppealHome', replace: true}
              this.$router.push(routeLocation)
            }
          }
        }
        return adminInfo
      },
      enterprise () {
        const enterprise = this.$store.state.enterprises.savedEnterprise
        if (enterprise) {
          this.adminUser = enterprise.admin
        }

        return enterprise
      }
    },
    methods: {
      changeAdmin () {
        // 初始化对话框信息
        this.key = 'userUU'
        this.keyword = ''
        this.adminUser = this.enterprise.admin || {}

        this.changeAdminVisible = true
      },
      showRecords () {
        // TODO 查看更换记录
        this.$message.info('此功能暂未实现')
      },
      searchAndSelectAdmin () {
        const params = { spaceUU: this.enterprise.spaceUU, key: this.key, keyword: this.keyword }

        const error = error => {
          console.log(error)
        }

        axios.get('/api/user//searchUserByKeyword', { params })
          .then(userList => {
            // 展示查询到的用户信息
            if (userList && userList.length > 0) {
              this.adminUser = userList[0]
            } else {
              this.$message.info('没有找到对应的用户信息！')
            }
          })
          .catch(error)
      },
      submitToBeChangedUser () {
        const spaceUU = this.enterprise.spaceUU

        const params = {}
        if (this.adminUser && this.adminUser.userUU) {
          params.userUU = this.adminUser.userUU
        }

        const success = userSpace => {
          this.$store.commit(types.CHOOSE_ENTERPRISE, userSpace)

          this.$message.success('保存成功')
        }
        const error = response => {
          this.$message.error(response)
        }
        axios.put(`/api/user/space/${spaceUU}/changeAdmin`, {}, { params })
          .then(success)
          .catch(error)
      }
    }
  }
</script>

<style scoped>
  .message-panel .message-action button.btn-change {
    border-color: #4E8EFC;
    background-color: #4E8EFC;

    color: #FFFFFF;
  }
  .selected-user-info {
    margin-top: 20px;
    margin-bottom: 50px;
  }
  .selected-user-info .row {
    margin: 15px 0;
    height: 34px;
  }
  .selected-user-info .row div {
    display: inline-block;
  }
  .selected-user-info .row .message-label {
    padding: 10px;
    width: 90px;
    height: 34px;
    line-height: 14px;

    color: #000000;
    font-size: 14px;
    font-weight: normal;
    font-family: "SimHei", sans-serif;
  }
  .selected-user-info .row .message-value {
    padding: 10px;
    width: 280px;
    height: 34px;
    line-height: 14px;
    background-color: #F1F1F1;

    color: #646464;
    font-size: 14px;
    font-weight: normal;
    font-family: "Microsoft YaHei", sans-serif;
  }
  .input-group {
    border: 1px solid #D2D2D2;
  }
  .input-group-btn::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 1px;
    height: 13px;
    background: #D2D2D2;
    z-index: 5;
  }
  .btn-search {
    width: 58px;
    height: 30px;
    border-radius: 0;
    outline: none;
    border: none;

    color: #2190E1;
  }
  .btn-search:active,
  .btn-search:hover,
  .btn-search:visited,
  .btn-search:focus {
    outline: none;
    background: none;
    box-shadow: none;

    color: #4A7DE1;
  }
</style>

<style>
  .admin-message span:first-child {
    text-decoration: underline;

    color: #006ACD;
    cursor: pointer;
  }
  .admin-message span:last-child::after {
    content: '>';
    color: #646464;
  }
  .el-dialog {
    border-radius: 5px;
  }
  .el-dialog__header {
    padding: 14px 20px;
    height: 44px;
    line-height: 16px;
    border: 1px none #D2D2D2;
    border-bottom-style: solid;
  }
  .el-dialog__header .el-dialog__title {
    color: #000000;
    font-size: 16px;
    font-weight: normal;
    font-family: "SimHei", sans-serif;
  }
  .el-dialog__body {
    padding: 22px 0 22px 40px;
  }
  .el-select .el-input__inner {
    border-radius: 0;
    width: 128px;
    height: 32px;
  }
  .search-group .el-input__inner {
    width: 186px;
    height: 30px;
    border-radius: 0;
    border: none;
  }
  .el-dialog__footer {
    text-align: center;
  }
  .el-dialog__footer .el-button {
    width: 180px;
    height: 30px;
    border-radius: 15px;
    line-height: 14px;
    padding: 8px 0;

    background: none;

    color: #656565;
  }
  .el-dialog__footer .el-button--primary {
    background-color: #4E8EFC;
    color: #FFFFFF;
  }
</style>