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="toggleClick(true)">申请列表</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 v-text="item.userUU === user.userspace.admin.userUU ? '管理员' : '成员'"></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>
          </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="toggleClick(false)">成员列表</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>
                  <template 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>
                  </template>
                  <template v-if="item.status === 316">
                    已同意
                  </template>
                  <template v-if="item.status === 317">
                    已拒绝
                  </template>
                </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>
          </div>
        </div>
      </div>
      <page :total="totalElement" :page-size="count"
            :current="page" @childEvent="handleChange">
      </page>
    </template>
    <template>
      <el-dialog class="center"
        title="温馨提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        @close="noBingClick">
        <span style="font-size: 14px;">您目前是个人账户登录，请 <strong>绑定企业</strong>。 </span>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bingEnterpriseClick">立即绑定</el-button>
        <el-button @click="noBingClick">暂不绑定</el-button>
      </span>
      </el-dialog>
    </template>
    <template>
      <el-dialog class="center"
                 title="温馨提示"
                 :visible.sync="isToggleDialogVisible"
                 width="30%">
        <span style="font-size: 14px;">您不是管理员，无审批申请权限。</span>
      </el-dialog>
    </template>
  </div>
</template>

<script>
  import Page from '~components/common/page/pageComponent.vue'
  export default {
    name: 'manager',
    layout: 'cloud',
    middleware: 'authenticated',
    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,
        isToggleDialogVisible: false,
        toggle: true,
        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
      },
      totalElement () {
        return !this.toggle ? this.apple.totalElements : this.member.totalElements
      }
    },
    methods: {
      toggleClick (type) {
        this.page = 1
        if(type) {
          if(this.user.userspace.admin.userUU === this.user.user.userUU) {
            this.toggle = !this.toggle
            this.handleApplyChange(this.page)
          } else {
            this.isToggleDialogVisible = true
          }
        } else {
          this.toggle = !this.toggle

          this.handleMemberChange(this.page)
        }
      },
      bingEnterpriseClick: function () {
        window.location.href = '/bindEnterPrise/' + this.user.user.userUU
      },
      noBingClick: function () {
        window.location.href = '/cloudcenter'
        this.centerDialogVisible = false
      },
      handleApplyChange: function (page) {
        this.$store.dispatch('loadApplyList', {page: page, size: this.count})
      },
      handleChange (page) {
        this.page = page
        if(!this.toggle) {
          this.handleApplyChange(page)
        } else {
          this.handleMemberChange(page)
        }
      },
      handleMemberChange: function (page) {
        this.$store.dispatch('loadMemberList', {page: page, size: this.count})
      },
      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.page = 1
                this.handleApplyChange(this.page)
                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.page = 1
                this.handleApplyChange(this.page)
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
              }
              if (res.data.error) {
                this.$message.error(res.data.mrrMsg)
              }
            })
        }
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .w-over-box table tbody tr:hover {
    background: #d0e5f5!important;
  }
  .table-striped>tbody>tr:nth-of-type(even){
    background: #f4f4f4!important;
  }
  .table-striped>tbody>tr:nth-of-type(odd){
    background: #fff!important;
  }
  .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>