#13565 Add filter on group at user management

Strides-Admin/src/views/user/index.vue

@@ -6,7 +6,7 @@
           class="filter-select"
           v-model="filters.pageVo.userType"
           placeholder="All User Type"
-          @change="onClickSearch"
+          @change="changeUserType"
           clearable>
           <el-option
             v-for="item in userTypes"
@@ -14,6 +14,19 @@
             :label="item"
             :value="item" />
         </el-select>
+        <el-select
+          class="filter-select"
+          :class="{hide: groupList.length == 0}"
+          v-model="filters.pageVo.groupPk"
+          placeholder="Group Name"
+          @change="onClickSearch"
+          clearable>
+          <el-option
+            v-for="(item,index) in groupList"
+            :key="index"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
         <el-select
           class="filter-select"
           v-model="filters.pageVo.accountStatus"
@@ -34,7 +47,7 @@
           placeholder="Email, Name, License Plate"
           @change="onClickSearch"
           clearable/>
-        <div>
+        <div v-if="false">
           <el-button
             @click="onClickSearch"
             icon="el-icon-search"
@@ -228,6 +241,7 @@ export default {
         pageNo: 1,
         pageSize: 10,
         pageVo: {
+          groupPk: "",
           criteria: "",
           userType: "",
           accountStatus: ""
@@ -244,6 +258,7 @@ export default {
       },
       fileList: [],
       userTypes: [],
+      groupList: [],
       actionTopup: {
         row: {},
         visible: false
@@ -287,6 +302,31 @@ export default {
         })
       })
     },
+    changeUserType() {
+      this.filters.pageVo.groupPk = "";
+      this.getGroupOptions();
+    },
+    getGroupOptions() {
+      if (this.filters.pageVo.userType == "") {
+        this.groupList = [];
+        return;
+      }
+      this.loading.table = true;
+      api.getGroupByType(this.filters.pageVo.userType).then(res => {
+        if (res.data) {
+          this.groupList = res.data
+        }
+      }).catch(err => {
+        this.$message({
+          message: err,
+          type: 'error'
+        })
+      }).finally(() => {
+        setTimeout(() => {
+          this.onClickSearch();
+        }, 100)
+      })
+    },
     getTableData() {
       this.loading.table = true;
       api.pageAppUsers(this.filters).then(res => {
@@ -426,6 +466,13 @@ export default {
   .filter-select {
     min-width: 100px;
     max-width: 180px;
+    overflow: hidden;
+    transition: all .3s;
+  }
+  .filter-select.hide {
+    margin: 0;
+    min-width: 0;
+    max-width: 0;
   }
   .status-Pending {
     color: $yellow;