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>
          <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>

    <!-- 更换记录查看对话框 -->
    <el-dialog
      title="更换记录"
      :visible.sync="changeRecordVisible"
      width="1070px"
      :show-close="true"
      :append-to-body="true">
      <!-- 更换记录列表 -->
      <div class="change-records-list">
        <el-table
          :data="recordsData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="oldAdminName"
            label="原管理员"
            width="110">
          </el-table-column>
          <el-table-column
            prop="oldAdminTel"
            label="原手机号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="newAdminName"
            label="新管理员"
            width="110">
          </el-table-column>
          <el-table-column
            prop="newAdminTel"
            label="新手机号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="sponsorName"
            label="申请人"
            width="110">
          </el-table-column>
          <el-table-column
            prop="sponsorTel"
            label="申请人手机号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="changeType"
            label="更换方式"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.changeType === 'ADMIN_OPERATION'">管理员操作</span>
              <span v-if="scope.row.changeType === 'USER_APPEAL'">人工申诉</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="launchTime"
            label="时间"
            :formatter="formatDate">
          </el-table-column>
        </el-table>
      </div>

      <!-- 对话框尾部 -->
      <span slot="footer" class="dialog-footer">
        <el-pagination
          background
          layout="prev, pager, next"
          prev-text="< 上一页"
          next-text="下一页 >"
          :page-size="recordsPageParams.size"
          :total="total"
          @current-change="handleCurrentPage">
            </el-pagination>
      </span>
    </el-dialog>
  </div>
</template>

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

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

  function showRecordsByPagination (params) {
    return axios.get('/api/user/space/admin//showRecordsByPagination', { params })
  }

  export default {
    name: 'enterprise-admin',
    components: {
      MessageList
    },
    data () {
      return {
        changeAdminVisible: false,
        items: keys,
        key: 'userUU',
        keyword: '',
        adminUser: {},
        changeRecordVisible: false,
        recordsPageParams: {
          page: 1,
          size: 9,
          spaceUU: ''
        },
        recordsData: [],
        total: 0
      }
    },
    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.value === '申诉中') {
            info.suffixClass = 'admin-message'
            info.action = () => {
              const routeLocation = {name: 'AppealHome', replace: true}
              this.$router.push(routeLocation)
            }
          }
        }
        return adminInfo
      },
      enterprise () {
        return this.$store.state.enterprises.savedEnterprise
      }
    },
    methods: {
      formatDate: formatDate,
      changeAdmin () {
        // 初始化对话框信息
        this.key = 'userUU'
        this.keyword = ''
        this.adminUser = this.enterprise.admin || {}

        this.changeAdminVisible = true
      },
      showRecords () {
        this.changeRecordVisible = true
        this.recordsPageParams = {
          page: 1,
          size: 9,
          spaceUU: this.enterprise.spaceUU
        }
        this.fetchRecordData()
        /*const routeLocation = {name: 'AppealHome', replace: true}
        this.$router.push(routeLocation)*/
      },
      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('保存成功')
          this.changeAdminVisible = false
        }
        const error = response => {
          this.$message.error(response)
        }
        axios.put(`/api/user/space/${spaceUU}/changeAdmin`, {}, { params })
          .then(success)
          .catch(error)
      },
      fetchRecordData () {
        const params = _.defaultsDeep({}, this.recordsPageParams)
        params.page = params.page - 1

        const success = pageInfo => {
          this.recordsData = pageInfo.content
          this.total = pageInfo.totalElements
          console.log(pageInfo)
        }
        const error = error => {
          console.log(error)
        }
        showRecordsByPagination(params).then(success).catch(error)
      },
      handleCurrentPage (currentPage) {
        this.recordsPageParams.page = currentPage
        this.fetchRecordData()
      }
    }
  }
</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;
  }
  .change-records-list {
    margin: -22px 0 0 -40px;
    min-height: 440px;
  }
</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;
  }
  /* List */
  .change-records-list .el-table th.is-leaf:first-child {
    padding-left: 35px;
  }
  .change-records-list .el-table--enable-row-transition .el-table__body td:first-child {
    padding-left: 35px;
  }
  .change-records-list .el-table th>.cell {
    color: #000000;
    font-size: 13px;
    font-weight: normal;
    font-family: "Microsoft YaHei", sans-serif;
  }
  .change-records-list .el-table th {
    padding: 9px 0 8px;
  }
  .change-records-list .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #D0E5F5;

    color: #000000;
    font-size: 13px;
    font-family: "Microsoft YaHei", sans-serif;
  }
  /* striped row */
  .change-records-list .el-table--enable-row-hover .el-table__body tr.el-table__row--striped:hover>td {
    background-color: #D0E5F5;

    color: #000000;
    font-size: 13px;
    font-family: "Microsoft YaHei", sans-serif;
  }
  .change-records-list .el-table td {
    padding: 10px 0;

    font-size: 13px;
    font-family: "Microsoft YaHei", sans-serif;
  }
  .change-records-list .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F4F4F4;
  }
  .dialog-footer .el-pagination button,
  .dialog-footer .el-pagination span:not([class*=suffix]) {
    color: #000000;
    font-weight: normal;
  }
  .dialog-footer .el-pagination button span {
    height: 26px;
    background-color: #FFFFFF;
    border: none;
    border-radius: 0;
  }
  .dialog-footer .el-pagination.is-background .btn-next,
  .dialog-footer .el-pagination.is-background .btn-prev,
  .dialog-footer .el-pagination.is-background .el-pager li {
    font-weight: normal;
  }
  .dialog-footer .el-pagination.is-background .btn-next,
  .dialog-footer .el-pagination.is-background .btn-prev {
    padding-right: 5px;
    padding-left: 5px;

    background-color: #FFFFFF;
    border: 1px solid #CFCFCF;
    border-radius: 0;
  }
  .dialog-footer .el-pagination.is-background .el-pager li {
    background-color: #FFFFFF;
    border: 1px solid #CFCFCF;
    border-radius: 0;
  }
  .dialog-footer .el-pagination.is-background .el-pager li.active {
    background-color: #303743;
    border-color: #303743;
    color: #fff;
  }
</style>