实现后台企业管理首页数据获取和交互操作

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

@@ -1,10 +1,19 @@
 <template>
-  <common-home>
+  <common-home
+    :pageSize="pageParams.size"
+    :total="total"
+    :searchKeys="searchKeys"
+    :searchKey="pageParams.key"
+    :searchKeyword="pageParams.keyword"
+    @current-change="handleCurrentChange"
+    @refresh-data="handleRefreshData"
+    @search="handleSearchAction">
     <div slot="screen-type">
+      <!-- 认证状态 -->
       <label>认证状态</label>
-      <el-select v-model="value" placeholder="不限">
+      <el-select v-model="pageParams.validCode" clearable placeholder="不限" @change="handleRefreshData">
         <el-option
-          v-for="item in options"
+          v-for="item in validCodeOptions"
           :key="item.value"
           :label="item.label"
           :value="item.value">
@@ -13,9 +22,9 @@
 
       <!-- 注册来源 -->
       <label>注册来源</label>
-      <el-select v-model="value" placeholder="不限">
+      <el-select v-model="pageParams.fromApp" clearable placeholder="不限" @change="handleRefreshData">
         <el-option
-          v-for="item in options"
+          v-for="item in fromAppOptions"
           :key="item.value"
           :label="item.label"
           :value="item.value">
@@ -29,28 +38,68 @@
       style="width: 100%">
       <el-table-column
         label="操作"
-        width="130"
-        align="center">
+        width="120">
         <template slot-scope="scope">
           <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
         </template>
       </el-table-column>
       <el-table-column
-        prop="name"
-        label="姓名"
-        width="180">
+        prop="spaceName"
+        label="公司名称"
+        width="200">
       </el-table-column>
       <el-table-column
-        prop="address"
-        label="地址">
+        prop="validCode"
+        label="认证状态"
+        width="100">
+        <template slot-scope="scope">
+          <span v-if="scope.row.validCode === 0" style="padding-left: 8px;">未申请</span>
+          <span v-if="scope.row.validCode === 1" style="padding-left: 8px;">待认证</span>
+          <span v-if="scope.row.validCode === 2" style="padding-left: 8px;">已认证</span>
+          <span v-if="scope.row.validCode === 3" style="padding-left: 8px;">未通过</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="admin"
+        label="管理员"
+        width="100">
+        <template slot-scope="scope" v-if="scope.row.admin && scope.row.admin.userUU">
+          <span v-text="scope.row.admin.vipName" style="padding-left: 8px;"></span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="registerDate"
+        label="注册时间">
       </el-table-column>
     </el-table>
   </common-home>
 </template>
 
 <script>
+  import _ from 'lodash'
+  import axios from '@/assets/js/axios'
+  import {ValidCode} from '@/Constant'
   import CommonHome from '../common/CommonHome'
 
+  const fromApps = [
+    {
+      label: 'B2B',
+      value: 'b2b'
+    }, {
+      label: 'UAS',
+      value: 'uas'
+    }, {
+      label: '优软商城',
+      value: 'mall'
+    }
+  ]
+  const searchKeys = [
+    {
+      label: '企业名称',
+      value: 'spaceName'
+    }
+  ]
+
   export default {
     name: 'enterprise-home',
     components: {
@@ -58,40 +107,66 @@
     },
     data () {
       return {
-        tableData: [{
-          date: '查看',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '查看',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          date: '查看',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        }, {
-          date: '查看',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }],
-        options: [{
-          value: '选项1',
-          label: '黄金糕'
-        }, {
-          value: '选项2',
-          label: '双皮奶'
-        }, {
-          value: '选项3',
-          label: '蚵仔煎'
-        }, {
-          value: '选项4',
-          label: '龙须面'
-        }, {
-          value: '选项5',
-          label: '北京烤鸭'
-        }],
-        value: ''
+        pageParams: {
+          page: 1,
+          size: 8,
+          validCode: null,
+          fromApp: null,
+          key: 'spaceName',
+          keyword: null
+        },
+        pageContent: [],
+        total: 0,
+        fromAppOptions: fromApps,
+        validCodeOptions: ValidCode,
+        searchKeys: searchKeys
+      }
+    },
+    created () {
+      this.fetchData()
+    },
+    computed: {
+      tableData () {
+        return this.pageContent
+      }
+    },
+    watch: {
+      '$route': 'fetchData'
+    },
+    methods: {
+      fetchData () {
+        const params = _.defaultsDeep({}, this.pageParams)
+        params.page = params.page - 1
+
+        const success = page => {
+          this.pageContent = page.content || []
+          this.total = page.totalElements
+        }
+        const error = response => {
+          this.$message.error(response)
+        }
+
+        axios.get('/api/user/space//showSpaceByPagination', { params }).then(success).catch(
+          error)
+      },
+      handleCurrentChange (currentPage) {
+        this.pageParams.page = currentPage
+        this.fetchData()
+      },
+      handleRefreshData () {
+        console.log(this.pageParams)
+        this.fetchData()
+      },
+      handleSearchAction (key, keyword) {
+        console.log(key, keyword)
+        this.pageParams.key = key
+        this.pageParams.keyword = keyword
+
+        this.fetchData()
+      },
+      handleClick (row) {
+        const routeLocation = {name: 'UserBasicInfo', params: row}
+        this.$router.push(routeLocation)
       }
     }
   }

sso-manage-console-web/src/components/accounts/users/UserBasicInfo.vue

@@ -9,7 +9,7 @@
       </ul>
     </div>
     <div class="basic-user-info" style="padding: 30px 0 0;width: 490px;">
-      <el-form ref="form" :model="form" label-width="150px">
+      <el-form ref="form" :model="userInfo" label-width="150px">
         <el-form-item label="个人UU">
           <div>{{ userInfo.userUU }}</div>
         </el-form-item>
@@ -89,16 +89,6 @@
     name: 'user-basic-info',
     data () {
       return {
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
         userInfo: {},
         isChange: false
       }
@@ -142,7 +132,6 @@
         handler (newValue, oldValue) {
           if (oldValue.userUU) {
             this.isChange = !_.isEqual(newValue, this.$route.params)
-            console.log(this.isChange)
           }
         },
         deep: true

sso-manage-console-web/src/components/accounts/users/UserHome.vue

@@ -72,7 +72,9 @@
       </el-table-column>
       <el-table-column
         prop="registerDate"
-        label="注册时间">
+        label="注册时间"
+        :formatter="formatDate"
+        width="160">
       </el-table-column>
       <el-table-column
         prop="lastLogin"
@@ -178,6 +180,36 @@
       handleClick (row) {
         const routeLocation = {name: 'UserBasicInfo', params: row}
         this.$router.push(routeLocation)
+      },
+      formatDate (row, column, value) {
+        if (!value) {
+          return ''
+        }
+
+        const date = new Date(value)
+        let str = ''
+        str += date.getFullYear() + '-'
+        if (date.getMonth() + 1 < 10) {
+          str += '0'
+        }
+        str += (date.getMonth() + 1) + '-'
+        if (date.getDate() < 10) {
+          str += '0'
+        }
+        str += date.getDate() + ' '
+        if (date.getHours() < 10) {
+          str += '0'
+        }
+        str += date.getHours() + ':'
+        if (date.getMinutes() < 10) {
+          str += '0'
+        }
+        str += date.getMinutes() + ':'
+        if (date.getSeconds() < 10) {
+          str += '0'
+        }
+        str += date.getSeconds()
+        return str
       }
     }
   }

sso-manage-console/src/main/java/com/uas/sso/sso/backend/api/UserSpaceManageController.java

@@ -30,6 +30,18 @@ public class UserSpaceManageController {
 
     @RequestMapping(method = RequestMethod.GET, path = "//showSpaceByPagination",
             produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
+    public ResultBean<org.springframework.data.domain.Page<Userspace>> showSpaceByPagination(Pageable page,
+            @RequestParam(required = false) Short validCode,
+            @RequestParam(required = false) String fromApp,
+            @RequestParam(required = false) String key,
+            @RequestParam(required = false) String keyword) {
+
+        return new ResultBean<>(spaceService.showSpaceByPagination(page, validCode, fromApp, key, keyword));
+    }
+
+    @Deprecated
+    @RequestMapping(method = RequestMethod.GET, path = "//showSpaceByPaginationOld",
+            produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
     public ResultBean<org.springframework.data.domain.Page<Userspace>> showUserByPagination(Pageable page,
             Short validCode,
             @RequestParam(required = false) String spaceName,

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

@@ -11,6 +11,9 @@ import org.springframework.data.domain.Pageable;
  */
 public interface UserSpaceService {
 
+    Page<Userspace> showSpaceByPagination(Pageable page, Short validCode, String fromApp, String key,
+            String keyword);
+
     Page<Userspace> showSpaceByPagination(Pageable page, String spaceName, String businessCode, Short validCode);
 
     void addUserToSpace(Long spaceUu, Long userUu);

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

@@ -41,6 +41,39 @@ public class UserSpaceServiceImpl implements UserSpaceService {
         this.appDao = appDao;
     }
 
+    @Override
+    public Page<Userspace> showSpaceByPagination(Pageable page, Short validCode, String fromApp,
+            String key, String keyword) {
+
+        return userspaceDao.findAll((root, query, builder) -> {
+            List<Predicate> predicates = new ArrayList<>();
+
+            if (!StringUtils.isEmpty(validCode)) {
+                Predicate predicate = builder.equal(root.get("validCode"), validCode);
+                predicates.add(predicate);
+            }
+
+            if (!StringUtils.isEmpty(fromApp)) {
+                Predicate predicate = builder.equal(root.get("fromApp"), fromApp);
+                predicates.add(predicate);
+            }
+
+            // 搜索关键字过滤
+            if (!StringUtils.isEmpty(key) && !StringUtils.isEmpty(keyword)) {
+                Predicate predicate = builder.like(root.get(key), "%" + keyword + "%");
+                predicates.add(predicate);
+            }
+
+            predicates.removeAll(Collections.singletonList(null));
+
+            Predicate[] array = new Predicate[predicates.size()];
+            predicates.toArray(array);
+            Predicate predicate = builder.and(array);
+            query.where(predicate);
+            return null;
+        }, page);
+    }
+
     @Override
     public Page<Userspace> showSpaceByPagination(Pageable page, String spaceName, String businessCode,
             Short validCode) {