sso-ssr/pages/cloudcenter/enterprise/index.vue

<template>
  <div class="manager">
    <template v-if="!centerDialogVisible">
      <!--企业管理成员列表部分-->
      <div class="us-member w-over-box" v-if="toggle">
        <div class="container">
          <div class="table-list">
            <div class="table-top">
              <h3>成员列表</h3>
              <a class="btn-us-apply" @click="toggle = !toggle">申请列表</a>
            </div>
            <table class="table table-striped" v-if="member.content.length !== 0">
              <thead>
              <tr>
                <th>角色</th>
                <th>用户名称</th>
                <th>个人UU</th>
                <th>手机号</th>
                <th>邮箱</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in member.content">
                <td >管理员</td>
                <td v-text="item.vipName ? item.vipName : ''">李事业</td>
                <td v-text="item.userUU ? item.userUU : ''">U456</td>
                <td v-text="item.mobile ? item.mobile : ''">123456799+66</td>
                <td v-text="item.email ? item.email : ''">112456112@qq.com</td>
              </tr>
              </tbody>
            </table>
            <div style="text-align: center;color:#333;height:100px;line-height: 100px;" v-if="member.content.length === 0">现在没有可以申请的列表哦！</div>
            <page :total="member.totalElements" :page-size="count"
                  :current="page" @childEvent="handleApplyChange">
            </page>
          </div>
        </div>
      </div>
      <!--企业管理申请列表部分-->
      <div class="us-apply w-over-box" v-else>
        <div class="container">
          <div class="table-list">
            <div class="table-top">
              <h3>申请列表</h3>
              <a class="btn-us-member" @click="toggle = !toggle">成员列表</a>
            </div>
            <table class="table table-striped" v-if="apple.content.length !== 0">
              <thead>
              <tr>
                <th>操作</th>
                <th>用户名称</th>
                <th>个人UU</th>
                <th>手机号</th>
                <th>邮箱</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in apple.content">
                <td v-if="item.status === 311">
                  <button class="btn btn-apply" @click="handleClick(true, item)">同意</button>
                  <button class="btn btn-apply" @click="handleClick(false, item)">拒绝</button>
                </td>
                <td v-if="item.status === 316">
                  已同意
                </td>
                <td v-if="item.status === 317">
                  已拒绝
                </td>
                <td v-text="item.user.vipName ? item.user.vipName : ''">李事业</td>
                <td v-text="item.user.userUU ? item.user.userUU : ''">U456</td>
                <td v-text="item.user.mobile ? item.user.mobile : ''">123456799+66</td>
                <td v-text="item.user.email ? item.user.email : ''">112456112@qq.com</td>
              </tr>
              </tbody>
            </table>
            <div style="text-align: center; color:#333;height:100px;line-height: 100px;" v-if="apple.content.length === 0">现在没有可以申请的列表哦！</div>
            <page :total="apple.totalElements" :page-size="count"
                  :current="page" @childEvent="handleMemberChange">
            </page>
          </div>
        </div>
      </div>
    </template>
    <el-dialog
      title="温馨提示"
      :visible.sync="centerDialogVisible"
      width="30%">
      <span style="font-size: 14px;">您目前是个人账户登录，请 <strong>绑定企业</strong> </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">立即绑定</el-button>
        <el-button @click="centerDialogVisible = false">暂不绑定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Page from '~components/common/page/pageComponent.vue'
  export default {
    name: 'manager',
    layout: 'cloud',
    fetch ({store}) {
      return Promise.all([
        store.dispatch('loadApplyList', {page: 1, size: 20}),
        store.dispatch('loadMemberList', {page: 1, size: 20})
      ])
    },
    components: {
      Page
    },
    data () {
      return {
        centerDialogVisible: true,
        toggle: false,
        page: 1,
        count: 20
      }
    },
    created: function () {
      this.user.userspace ? this.centerDialogVisible = false : this.centerDialogVisible = true
    },
    computed: {
      user () {
        return this.$store.state.option.userInfo.data.content
      },
      apple () {
        return this.$store.state.cloudCenter.apple.data.content
      },
      member () {
        return this.$store.state.cloudCenter.member.data.content
      }
    },
    methods: {
      handleApplyChange: function (page) {
        this.$store.dispatch('loadApplyList', {page: page, size: 20})
      },
      handleMemberChange: function (page) {
        this.$store.dispatch('loadMemberList', {page: page, size: 20})
      },
      handleClick: function (type, item) {
        let param = new FormData()
        param.append('userUU', item.user.userUU)
        param.append('id', item.id)
        let config = {
          headers: {'Context-Type': 'multipart/form-data'}
        }
        if (type) {
          this.$http.post('/sso/center/agree/apply', param, config)
            .then(res => {
              if (res.data.success) {
                this.handleApplyChange()
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
              }
              if (res.data.error) {
                this.$message.error(res.data.errMsg)
              }
            })
        } else {
          this.$http.post('/sso/center/disagree/apply', param, config)
            .then(res => {
              if (res.data.success) {
                this.handleApplyChange()
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
              }
              if (res.data.error) {
                this.$message.error(res.data.mrrMsg)
              }
            })
        }
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .el-dialog__wrapper{
    z-index:10000;
  }
  .el-dialog__body{
    text-align: center;
  }
  .el-dialog__footer{
    text-align: center;
  }
  .manager{
    background: #eee;
    padding:50px 0 112px 30px;
  }

  .w-over-box .table-list{
    position:relative;
    padding:20px 30px;
    margin-bottom:10px;
    background: #fff;
  }
  .w-over-box .table-list .table-top{
    position:relative;
  }
  .w-over-box .table-list .table-top h3{
    font-size: 18px;
    color:#000;
    font-weight: bold;
  }
  .w-over-box .table-list .table-top a{
    display:inline-block;
    position:absolute;
    right:10px;
    top:0;
    width:88px;
    height:28px;
    line-height: 26px;
    text-align: center;
    color:#0076ad;
    border:1px solid #bfbfbf;
    border-radius:3px;
  }
  .w-over-box .table-list .table-top a:hover{
    cursor:pointer;
  }
  .w-over-box .table-list table thead tr th{
    font-size: 14px;
    color:#333;
    border-top:2px solid #ddd!important;
    line-height: 25px!important;
  }
  .w-over-box table tbody tr td{
    font-size: 14px;
    color:#999;
    border:none;
    line-height: 25px!important;
  }
  .w-over-box table tbody tr:hover{
    background: #d0e5f5;
  }
  .w-over-box table tbody tr td button.btn-apply{
    border:1px solid #0076ad;
    width:40px;
    height:22px;
    line-height: 20px;
    font-size: 12px;
    border-radius:0;
    color:#0076ad;
    background: #fff;
    padding:0;
    margin:0 5px;
  }
  .w-over-box table tbody tr td button.btn-apply:hover{
    background: #0076ad;
    color:#fff;
  }
  .w-over-box table tbody tr td span{
    color: #505050;
    font-size: 14px;
  }
</style>