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

<template>
  <div>
    <el-container>
      <el-main>
        <el-table
          :data="userList"
          stripe
          style="width: 100%">
          <el-table-column
            label="操作"
            width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.userUU === enterprise.adminUU" >管理员</span>
              <el-button type="text" size="small" v-if="scope.row.userUU !== enterprise.adminUU"
                         @click="handleClick(scope.row)">解除绑定
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="vipName"
            label="用户名称"
            width="110">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="routeToUserDetail(scope.row)">
                {{ scope.row.vipName }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="userUU"
            label="个人UU"
            width="130">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号"
            width="140">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱">
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <el-row type="flex" class="row-bg">
          <button
            type="button"
            class="btn btn-default btn-refresh"
            @click="fetchData">
            刷新
          </button>

          <button
            type="button"
            class="btn btn-default btn-refresh btn-bind"
            @click="showBindDialog">
            添加成员
          </button>

          <div class="pagination-area">
            <el-pagination
              background
              layout="prev, pager, next"
              prev-text="< 上一页"
              next-text="下一页 >"
              :page-size="pageParams.size"
              :total="total"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </el-row>
      </el-footer>
    </el-container>

    <!-- 添加成员对话框 -->
    <el-dialog
      title="添加成员"
      :visible.sync="isBindUser"
      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="bindUserInfo.userUU">U0516</div>
        </div>
        <div class="row">
          <div class="message-label">姓名</div>
          <div class="message-value" v-text="bindUserInfo.realName || bindUserInfo.vipName">陈正亮</div>
        </div>
        <div class="row">
          <div class="message-label">手机号</div>
          <div class="message-value" v-text="bindUserInfo.mobile">13600001122</div>
        </div>
        <div class="row">
          <div class="message-label">邮箱</div>
          <div class="message-value" v-text="bindUserInfo.email">1891141208@qq.com</div>
        </div>
      </div>
      <!-- 对话框尾部 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bindUserToCurrentEnterprise">确 定</el-button>
        <el-button @click="isBindUser = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import _ from 'lodash'
  import axios from '@/assets/js/axios'
  import * as types from '@/store/mutation-types'

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

  function bindUserToEnterprise (spaceUU, userUu) {
    const params = { userUu }
    return axios.put(`/api/user/space/${spaceUU}/addUserToSpace`, {}, { params })
  }

  export default {
    name: 'enterprise-members',
    data () {
      return {
        pageParams: {
          page: 1,
          size: 10,
          spaceUU: null
        },
        total: 0,
        userList: [],
        isBindUser: false,
        items: keys,
        key: 'userUU',
        keyword: '',
        bindUserInfo: {}
      }
    },
    computed: {
      enterprise () {
        return this.$store.state.enterprises.savedEnterprise
      }
    },
    methods: {
      fetchData () {
        const params = _.defaultsDeep({}, this.pageParams)
        params.page = params.page - 1
        params.spaceUU = this.enterprise.spaceUU

        const success = page => {
          this.userList = page.content || []
          this.total = page.totalElements
        }
        const error = error => {
          this.$message.error(error)
        }
        axios.get('/api/user//showEnUserByPagination', { params }).then(success).catch(error)
      },
      handleCurrentChange (currentPage) {
        this.pageParams.page = currentPage
        this.fetchData()
      },
      handleClick (user) {
        this.$confirm(`此操作将解绑用户${user.vipName}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.unbindUser(user)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      unbindUser (user) {
        const params = { userUU: user.userUU }

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

          this.$message.success('保存成功')
        }
        const error = error => {
          this.$message.error(error)
        }

        axios.put(`/api/user/space/${this.enterprise.spaceUU}/unbindUser`, {}, {params}).then(
          success).catch(error)
      },
      showBindDialog () {
        this.isBindUser = true
        this.key = 'userUU'
        this.keyword = ''
        this.bindUserInfo = {}
      },
      searchAndSelectAdmin () {
        const params = { spaceUU: this.enterprise.spaceUU, key: this.key, keyword: this.keyword }

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

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

        const success = result => {
          if (result) {
            this.fetchData()
            this.isBindUser = false
            this.$message.success('绑定成功')
          }
        }
        const error = response => {
          this.$message.error(response)
        }

        bindUserToEnterprise(spaceUU, userUU)
          .then(success)
          .catch(error)
      },
      routeToUserDetail (user) {
        const routeLocation = {name: 'UserBasicInfo', params: user, replace: true}
        this.$router.push(routeLocation)
      }
    },
    watch: {
      '$route': 'fetchData'
    },
    created () {
      this.fetchData()
    }
  }
</script>

<style scoped>
  .el-main {
    height: 463px;
    padding: 0;
    -ms-flex-preferred-size: 463px;
  }
  .el-footer {
    height: 64px;
    background-color: #E8EDF1;
  }
  .btn-refresh {
    margin: 17px 0;
    width: 50px;
    height: 28px;
    border-radius: 0;

    color: #000000;
    font-size: 13px;
    font-family: "Microsoft YaHei", sans-serif;
  }
  .btn-bind {
    width: 80px;
    margin-left: 15px;
  }
  .pagination-area {
    padding: 17px 0 17px 150px;
  }
  .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>
  .el-pagination button, .el-pagination span:not([class*=suffix]) {
    color: #000000;
    font-weight: normal;
  }
  .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
    font-weight: normal;
  }
  .el-pagination.is-background .el-pager li.active {
    background-color: #303743;
    color: #fff;
  }
  .el-table th.is-leaf:first-child {
    padding-left: 40px;
  }
  .el-table--enable-row-transition .el-table__body td:first-child {
    padding-left: 40px;
  }
  .el-table th>.cell {
    color: #000000;
    font-size: 13px;
    font-weight: normal;
    font-family: "Microsoft YaHei", sans-serif;
  }
  .el-table th {
    padding: 9px 0 8px;
  }
  .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 */
  .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;
  }
  .el-table td {
    padding: 4px 0;

    font-size: 13px;
    font-family: "Microsoft YaHei", sans-serif;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F4F4F4;
  }
  .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>