实现企业成员管理的解绑和数据获取操作

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

@@ -1,165 +1,223 @@
 <template>
-  <div class="basic-enterprise-info" style="padding: 30px 0 0;width: 490px;">
-    <el-form ref="form" :model="enterpriseInfo" label-width="150px">
-      <el-form-item label="企业UU">
-        <div>{{ enterpriseInfo.spaceUU }}</div>
-      </el-form-item>
-      <el-form-item label="企业名称">
-        <el-input v-model="enterpriseInfo.spaceName"></el-input>
-      </el-form-item>
-      <el-form-item label="法定代表人">
-        <el-input v-model="enterpriseInfo.corporation">
-          <div slot="append" v-if="enterpriseInfo.corporation">
-            <img src="/static/images/status/right.png" alt="Status">
-          </div>
-          <div slot="append" v-if="!enterpriseInfo.corporation">
-            <img src="/static/images/status/wrong.png" alt="Status">
-          </div>
-        </el-input>
+  <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">
+          </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>
 
-      </el-form-item>
-      <el-form-item label="营业执照号">
-        <el-input v-model="enterpriseInfo.businessCode"></el-input>
-      </el-form-item>
-      <el-form-item label="营业执照附件">
-        <el-input v-model="enterpriseInfo.businessCodeImage">
-          <i class="el-input__icon" slot="prefix" style="line-height: 14px;margin-left: 10px;">
-            <img src="/static/images/pic.png" alt="Picture">
-          </i>
-          <i class="el-input__icon" slot="suffix" style="line-height: 12px;">
-            <img src="/static/images/look.png" alt="Look">
-          </i>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="企业地址">
-        <el-input v-model="enterpriseInfo.companyAddress" :readonly="true">
-          <i class="el-input__icon" slot="prefix" style="line-height: 16px;margin-left: 10px;">
-            <img src="/static/images/loc.png" alt="Location">
-          </i>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="认证状态" width="400">
-        <el-select v-model="enterpriseInfo.validCode" placeholder="请选择认证状态">
-          <el-option label="未认证" :value="0"></el-option>
-          <el-option label="申诉中" :value="1"></el-option>
-          <el-option label="已认证" :value="2"></el-option>
-          <el-option label="未通过" :value="3"></el-option>
-        </el-select>
-        <span style="padding-left: 8px;">
-            <img src="/static/images/status/right.png" alt="Status" v-if="enterpriseInfo.validCode === 2">
-            <img src="/static/images/status/wrong.png" alt="Status" v-if="enterpriseInfo.validCode !== 2">
-          </span>
-      </el-form-item>
-      <el-form-item label="注册时间">
-        <!-- TODO 注册时间 -->
-        <div v-text="enterpriseInfo.registerDate">2017-06-11 12:51:44</div>
-      </el-form-item>
-      <el-form-item>
-        <div class="action-form-item">
-          <el-button type="primary" @click="onSubmit">保存修改</el-button>
-        </div>
-      </el-form-item>
-    </el-form>
+          <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>
   </div>
 </template>
 
 <script>
   import _ from 'lodash'
   import axios from '@/assets/js/axios'
+  import * as types from '@/store/mutation-types'
 
   export default {
-    name: 'enterprise-basic-info',
+    name: 'enterprise-members',
     data () {
       return {
-        enterpriseInfo: {}
+        pageParams: {
+          page: 1,
+          size: 10,
+          spaceUU: null
+        },
+        total: 0,
+        userList: []
+      }
+    },
+    computed: {
+      enterprise () {
+        return this.$store.state.enterprises.savedEnterprise
       }
     },
     methods: {
-      onSubmit () {
-        const data = _.pick(this.enterpriseInfo,
-          [
-            'spaceUU',
-            'spaceName',
-            'corporation',
-            'businessCode',
-            'businessCodeImage',
-            'companyAddress',
-            'validCode'
-          ]
-        )
+      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()
 
-        const success = () => {
-          this.isChange = false
           this.$message.success('保存成功')
-          this.$route.go(-1)
         }
         const error = error => {
           this.$message.error(error)
         }
 
-        axios.put('/api/user/space//modifySpaceInfo', data).then(success).catch(error)
+        axios.put(`/api/user/space/${this.enterprise.spaceUU}/unbindUser`, {}, {params}).then(
+          success).catch(error)
       }
     },
-    mounted () {
-      this.enterpriseInfo = Object.assign({}, this.enterpriseInfo, this.$route.params)
+    watch: {
+      '$route': 'fetchData'
+    },
+    created () {
+      this.fetchData()
     }
   }
 </script>
 
 <style scoped>
-  .action-form-item {
-    margin-left: -128px;
-    margin-top: 70px;
+  .el-main {
+    height: 463px;
+    padding: 0;
   }
-  .action-form-item .el-button {
-    border-radius: 0;
-    padding: 10px 20px;
-  }
-  .el-button {
-    width: 120px;
-    height: 34px;
+  .el-footer {
+    height: 64px;
+    background-color: #E8EDF1;
   }
-  .el-button--primary {
-    background-color: #4E8EFC;
-    border-color: #4E8EFC;
+  .btn-refresh {
+    margin: 17px 0;
+    width: 50px;
+    height: 28px;
+    border-radius: 0;
+
+    color: #000000;
+    font-size: 13px;
+    font-family: "Microsoft YaHei", sans-serif;
   }
-  .el-button--primary.is-disabled {
-    background-color: #D2D2D2;
-    border-color: #D2D2D2;
+  .pagination-area {
+    padding: 17px 0 17px 150px;
   }
 </style>
 
 <style>
-  .basic-enterprise-info .el-input__inner {
-    height: 34px;
-    width: 340px;
-    border-radius: 0;
+  .el-pagination button, .el-pagination span:not([class*=suffix]) {
+    color: #000000;
+    font-weight: normal;
   }
-  .basic-enterprise-info .el-form-item {
-    margin-bottom: 12px;
+  .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
+    font-weight: normal;
   }
-  .basic-enterprise-info .el-form-item__label {
-    margin: 0;
-    height: 34px;
-    padding-left: 26px;
-    text-align: left;
-    line-height: 34px;
-
+  .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: 14px;
+    font-size: 13px;
     font-weight: normal;
-    font-family: "SimHei", sans-serif;
+    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;
   }
-  .basic-enterprise-info .el-form-item__content {
-    height: 34px;
-    line-height: 34px;
+  /* 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;
   }
-  .basic-enterprise-info div.el-form-item:nth-last-child(3) .el-form-item__content {
-    width: 400px;
+  .el-table td {
+    padding: 4px 0;
+
+    font-size: 13px;
+    font-family: "Microsoft YaHei", sans-serif;
   }
-  .basic-enterprise-info .el-input-group__append {
-    background: none;
-    border: none;
-    padding-left: 12px;
+  .el-table--striped .el-table__body tr.el-table__row--striped td {
+    background: #F4F4F4;
   }
 </style>

sso-manage-console/src/main/java/com/uas/sso/sso/backend/service/impl/UserSpaceServiceImpl.java

@@ -109,6 +109,10 @@ public class UserSpaceServiceImpl implements UserSpaceService {
         User user = assertUserExist(userUu);
         Userspace space = assertSpaceExist(spaceUu);
 
+        if (user.getUserUU().equals(space.getAdminUU())) {
+            throw new ValidationFailedException("企业管理员不能直接解绑");
+        }
+
         if (!CollectionUtils.isEmpty(space.getUsers())) {
             space.getUsers().remove(user);
         }