部分页面添加筛选功能

src/api/userWithGroup.js

@@ -1,49 +1,57 @@
 import request from '@/utils/request'
 
 export function fetchUserList(query) {
-    return request({
-        url: '/ncjtEntranceGuard/getUserPageList',
-        method: 'get',
-        params: query
-    })
+  return request({
+    url: '/ncjtEntranceGuard/getUserPageList',
+    method: 'get',
+    params: query
+  })
 }
 
 export function fetchGroupList(query) {
-    return request({
-        url: '/ncjtEntranceGuard/getGroupPageList',
-        method: 'get',
-        params: query
-    })
+  return request({
+    url: '/ncjtEntranceGuard/getGroupPageList',
+    method: 'get',
+    params: query
+  })
 }
 
 export function checkGroups(query) {
-    return request({
-        url: '/ncjtEntranceGuard/getUserGroupById',
-        method: 'post',
-        params: query
-    })
+  return request({
+    url: '/ncjtEntranceGuard/getUserGroupById',
+    method: 'post',
+    params: query
+  })
 }
 
 export function bindGroups(data) {
-    return request({
-        url: '/ncjtEntranceGuard/bindUserWithGroupIds',
-        method: 'post',
-        data
-    })
+  return request({
+    url: '/ncjtEntranceGuard/bindUserWithGroupIds',
+    method: 'post',
+    data
+  })
 }
 
 export function deleteGroups(data) {
-    return request({
-        url: '/ncjtEntranceGuard/unbindUserWithGroupIds',
-        method: 'post',
-        data
-    })
+  return request({
+    url: '/ncjtEntranceGuard/unbindUserWithGroupIds',
+    method: 'post',
+    data
+  })
 }
 
 export function searchList(query) {
-    return request({
-        url: '/ncjtEntranceGuard/getUserPageListByParams',
-        method: 'post',
-        params: query
-    })
+  return request({
+    url: '/ncjtEntranceGuard/getUserPageListByParams',
+    method: 'post',
+    params: query
+  })
+}
+
+export function getList(query) {
+  return request({
+    url: '/ncjtEntranceGuard/getUserGPageList',
+    method: 'post',
+    params: query
+  })
 }

src/api/usermanagement.js

@@ -1,9 +1,17 @@
 import request from '@/utils/request'
 
+// export function fetchList(query) {
+//   return request({
+//     url: '/ncjtEntranceGuard/getUserPageList',
+//     method: 'get',
+//     params: query
+//   })
+// }
+
 export function fetchList(query) {
   return request({
     url: '/ncjtEntranceGuard/getUserPageList',
-    method: 'get',
+    method: 'post',
     params: query
   })
 }
@@ -31,3 +39,11 @@ export function updateUser(data) {
     data
   })
 }
+
+export function getChooseList(params) {
+  return request({
+    url: '/ncjtEntranceGuard/getChooseList',
+    method: 'post',
+    params
+  })
+}

src/views/accessRecords/index.vue

@@ -2,68 +2,76 @@
   <div>
     <!-- 条件搜索区域 -->
     <div class="form-head">
-      <span>设备：</span>
-      <span class="input-select">
-        <el-select
-          v-model="listQuery.deviceName"
-          size="mini"
-          clearable
-          placeholder="请选择设备名称"
-        >
-          <el-option
-            v-for="item in groupList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.name"
-          />
-        </el-select>
-      </span>
-
-      <span>卡号：</span>
-      <span class="input">
+      <span>
         <el-input
-          v-model="listQuery.cardNumber"
+          v-model="listQuery.key"
           size="mini"
-          placeholder="请输入卡号"
+          placeholder="设备名称,姓名或手机号"
           clearable
-          @keyup.enter.native="handleFilter"
         />
       </span>
 
-      <span>姓名：</span>
-      <span class="input">
-        <el-input
-          v-model="listQuery.userName"
-          size="mini"
-          placeholder="请输入姓名"
-          clearable
-          @keyup.enter.native="handleFilter"
+      <span style="margin-left: 15px">学院：</span>
+      <el-select
+        v-model="listQuery.college"
+        clearable
+        size="mini"
+        placeholder="请选择学院"
+      >
+        <el-option
+          v-for="(item, index) in collegeList"
+          :key="index"
+          :label="item.name"
+          :value="item.name"
         />
-      </span>
+      </el-select>
 
-      <span>学院：</span>
-      <span class="input">
-        <el-input
-          v-model="listQuery.college"
-          size="mini"
-          placeholder="请输入学院"
-          clearable
-          @keyup.enter.native="handleFilter"
+      <span style="margin-left: 15px">专业：</span>
+      <el-select
+        v-model="listQuery.professor"
+        clearable
+        size="mini"
+        placeholder="请选择专业"
+      >
+        <el-option
+          v-for="(item, index) in professorList"
+          :key="index"
+          :label="item.name"
+          :value="item.name"
         />
-      </span>
+      </el-select>
 
-      <span>专业：</span>
-      <span class="input">
-        <el-input
-          v-model="listQuery.major"
-          size="mini"
-          placeholder="请输入专业"
-          clearable
-          @keyup.enter.native="handleFilter"
+      <span style="margin-left: 15px">年级：</span>
+      <el-select
+        v-model="listQuery.nj"
+        clearable
+        size="mini"
+        placeholder="请选择年级"
+      >
+        <el-option
+          v-for="(item, index) in njList"
+          :key="index"
+          :label="item.name"
+          :value="item.name"
         />
-      </span>
+      </el-select>
 
-      <span>通行时间：</span>
+      <span style="margin-left: 15px">班级：</span>
+      <el-select
+        v-model="listQuery.className"
+        clearable
+        size="mini"
+        placeholder="请选择班级"
+      >
+        <el-option
+          v-for="(item, index) in classNameList"
+          :key="index"
+          :label="item.name"
+          :value="item.name"
+        />
+      </el-select>
+
+      <span style="margin-left: 15px">通行时间：</span>
       <el-date-picker
         v-model="listQuery.time"
         size="mini"
@@ -74,6 +82,7 @@
       />
 
       <el-button
+        style="margin-left: 20px"
         type="primary"
         size="mini"
         class="button"
@@ -110,59 +119,71 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="卡号" width="250px" align="center">
+        <el-table-column label="姓名" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.userName }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="手机号" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.mobile ? row.mobile : "未知" }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="卡号" align="center" show-overflow-tooltip>
           <template slot-scope="{ row }">
             <span>{{ row.cardNumber }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column label="姓名" align="center">
+        <el-table-column label="身份类型" align="center">
           <template slot-scope="{ row }">
-            <span>{{ row.userName }}</span>
+            <span>{{ row.identityName }}</span>
           </template>
         </el-table-column>
 
         <el-table-column label="学院" align="center">
           <template slot-scope="{ row }">
-            <span>{{ row.groupName }}</span>
+            <span>{{ row.groupName ? row.groupName : "未知" }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column label="专业" align="center">
+        <el-table-column label="专业" align="center" show-overflow-tooltip>
           <template slot-scope="{ row }">
-            <span>{{ row.profession }}</span>
+            <span>{{ row.profession ? row.profession : "未知" }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column label="班级" align="center">
+        <el-table-column label="年级" align="center">
           <template slot-scope="{ row }">
-            <span>{{ row.classname }}</span>
+            <span>{{ row.nj ? row.nj : "未知" }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column label="身份类型" align="center">
+        <el-table-column label="班级" align="center">
           <template slot-scope="{ row }">
-            <span>{{ row.identityName }}</span>
+            <span>{{ row.classname ? row.classname : "未知" }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column label="设备名称" width="250px" align="center">
+        <el-table-column label="设备名称" align="center" show-overflow-tooltip>
           <template slot-scope="{ row }">
             <span>{{ row.deviceName }}</span>
           </template>
         </el-table-column>
 
-        <!-- <el-table-column label="分组名称" align="center">
+        <el-table-column label="分组名称" align="center">
           <template slot-scope="{ row }">
-            <span>{{ row.groupName }}</span>
+            <span>{{ row.zu ? row.zu : "未知" }}</span>
           </template>
-        </el-table-column> -->
+        </el-table-column>
 
-        <el-table-column label="信息" align="center" width="300px">
+        <!-- <el-table-column label="信息" align="center" width="300px">
           <template slot-scope="{ row }">
             <span>{{ row.message }}</span>
           </template>
-        </el-table-column>
+        </el-table-column> -->
 
         <el-table-column label="通行时间" width="200px" align="center">
           <template slot-scope="{ row }">
@@ -189,13 +210,18 @@
 
 <script>
 import Pagination from '@/components/Pagination'
-import { searchList, fetchGroupList, exportExcel } from '@/api/accessrecords'
+import { searchList, exportExcel } from '@/api/accessrecords'
+import { getChooseList } from '@/api/usermanagement'
 export default {
   components: {
     Pagination
   },
   data() {
     return {
+      collegeList: [],
+      njList: [],
+      professorList: [],
+      classNameList: [],
       // 表格数据
       list: [],
       // 设备数组
@@ -209,24 +235,27 @@ export default {
         page: 1,
         // 每页多少条
         limit: 8,
-        // 卡号输入框绑定数据
-        cardNumber: '',
-        // 设备筛选框绑定数据
-        deviceName: '',
         //  通行时间选择框绑定数据
         time: '',
-        // 姓名输入框绑定数据
-        userName: '',
-        // 学院输入框绑定数据
-        college: '',
-        // 专业输入框绑定数据
-        major: ''
+        key: '', // 关键字 设备名称 手机号 卡号
+        college: '', // 学院
+        nj: '', // 年级
+        professor: '', // 专业
+        className: '' // 班级
       }
     }
   },
   created() {
     this.getList()
-    this.getgroupList()
+    // this.getgroupList();
+    // 获取学院
+    this.getCollege(1)
+    // 获取专业
+    this.getProfessor(3)
+    // 获取年级
+    this.getNj(2)
+    // 获取班级
+    this.getClassName(4)
   },
   methods: {
     // 获取表格数据
@@ -235,28 +264,55 @@ export default {
       searchList({
         page: this.listQuery.page,
         limit: this.listQuery.limit,
-        cardNumber: this.listQuery.cardNumber,
-        deviceName: this.listQuery.deviceName,
+        key: this.listQuery.key,
+        groupName: this.listQuery.groupName,
+        nj: this.listQuery.nj,
+        profession: this.listQuery.profession,
+        className: this.listQuery.className,
         time1: this.listQuery.time === null ? null : this.listQuery.time[0],
-        time2: this.listQuery.time === null ? null : this.listQuery.time[1],
-        userName: this.listQuery.userName,
-        groupName: this.listQuery.college,
-        profession: this.listQuery.major
+        time2: this.listQuery.time === null ? null : this.listQuery.time[1]
       }).then((response) => {
+        // console.log(response);
+
         this.list = response.data
         this.total = response.total
         this.loading = false
       })
     },
     // 获取设备数组
-    getgroupList() {
-      fetchGroupList({ page: 1, limit: 999 }).then((response) => {
-        this.groupList = response.data
+    // getgroupList() {
+    //   fetchGroupList({ page: 1, limit: 999 }).then((response) => {
+    //     this.groupList = response.data;
+    //   });
+    // },
+    getCollege(name) {
+      getChooseList({ name }).then((response) => {
+        // console.log(response);
+        this.collegeList = response.data
+      })
+    },
+    getProfessor(name) {
+      getChooseList({ name }).then((response) => {
+        // console.log(response);
+        this.professorList = response.data
+      })
+    },
+    getNj(name) {
+      getChooseList({ name }).then((response) => {
+        // console.log(response);
+        this.njList = response.data
+      })
+    },
+    getClassName(name) {
+      getChooseList({ name }).then((response) => {
+        // console.log(response);
+        this.classNameList = response.data
       })
     },
     // 查询按钮回调
     handleFilter() {
       this.list = []
+      this.total = 0
       this.listQuery.page = 1
       this.getList()
     },
@@ -324,25 +380,11 @@ export default {
 
 <style lang="scss" scoped>
 .form-head {
+  display: flex;
+  align-items: center;
   margin: 0 40px;
   line-height: 118px;
   font-size: 9px;
-
-  .input {
-    display: inline-block;
-    margin-right: 10px;
-    // width: 210px;
-  }
-
-  .input-select {
-    display: inline-block;
-    margin-right: 10px;
-    width: 148px;
-  }
-
-  .button {
-    margin-left: 30px;
-  }
 }
 
 .button_down {

src/views/userManagement/index.vue

@@ -3,21 +3,100 @@
     <!-- 头部区域 -->
     <div class="head">
       <div class="head-img">
-        <img src="../../../public/images/img-1.png" />
+        <img src="../../../public/images/img-1.png">
       </div>
       <div class="head-info">用户管理</div>
     </div>
 
     <!-- 添加按钮 -->
     <div class="switch">
-      所有用户
+      <!-- 所有用户
       <div class="switch-button">
         <el-row>
           <el-button type="primary" size="small" @click="handleCreate"
             ><img src="../../../public/images/img-3.png" />添加用户
           </el-button>
         </el-row>
-      </div>
+      </div> -->
+
+      <span>
+        <el-input
+          v-model="listQuery.key"
+          size="mini"
+          placeholder="请输入姓名,手机号或卡号"
+          clearable
+        />
+      </span>
+
+      <span style="margin-left: 15px">学院：</span>
+      <el-select
+        v-model="listQuery.college"
+        clearable
+        size="mini"
+        placeholder="请选择学院"
+      >
+        <el-option
+          v-for="(item, index) in collegeList"
+          :key="index"
+          :label="item.name"
+          :value="item.name"
+        />
+      </el-select>
+
+      <span style="margin-left: 15px">专业：</span>
+      <el-select
+        v-model="listQuery.professor"
+        clearable
+        size="mini"
+        placeholder="请选择专业"
+      >
+        <el-option
+          v-for="(item, index) in professorList"
+          :key="index"
+          :label="item.name"
+          :value="item.name"
+        />
+      </el-select>
+
+      <span style="margin-left: 15px">年级：</span>
+      <el-select
+        v-model="listQuery.nj"
+        clearable
+        size="mini"
+        placeholder="请选择年级"
+      >
+        <el-option
+          v-for="(item, index) in njList"
+          :key="index"
+          :label="item.name"
+          :value="item.name"
+        />
+      </el-select>
+
+      <span style="margin-left: 15px">班级：</span>
+      <el-select
+        v-model="listQuery.className"
+        clearable
+        size="mini"
+        placeholder="请选择班级"
+      >
+        <el-option
+          v-for="(item, index) in classNameList"
+          :key="index"
+          :label="item.name"
+          :value="item.name"
+        />
+      </el-select>
+
+      <el-button
+        style="margin-left: 20px"
+        type="primary"
+        size="mini"
+        class="button"
+        @click="handleFilter"
+      >
+        查询
+      </el-button>
     </div>
 
     <!-- 表格区域 -->
@@ -29,13 +108,19 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="卡号" width="300px" align="center">
+        <el-table-column label="手机号" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.mobile }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="卡号" align="center">
           <template slot-scope="{ row }">
             <span>{{ row.cardNumber }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column label="学校" align="center">
+        <el-table-column label="学院" align="center">
           <template slot-scope="{ row }">
             <span>{{ row.college }}</span>
           </template>
@@ -47,21 +132,25 @@
           </template>
         </el-table-column>
 
-        <!-- <el-table-column label="开关" align="center">
-          <template slot-scope="scope">
-            <el-switch
-              v-model="scope.row.status"
-              active-color="#3BAAFD"
-              inactive-color="#CCCCCC"
-              :active-value="1"
-              :inactive-value="0"
-              @change="changeSwitch(scope.row.status)"
-            >
-            </el-switch>
+        <el-table-column label="年级" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.nj }}</span>
           </template>
-        </el-table-column> -->
+        </el-table-column>
 
-        <el-table-column label="操作" width="180px" align="center">
+        <el-table-column label="班级" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.classname }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="创建时间" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.stampCreate }}</span>
+          </template>
+        </el-table-column>
+
+        <!-- <el-table-column label="操作" width="180px" align="center">
           <template slot-scope="{ row, $index }">
             <el-button type="text" size="small" @click="handleUpdate(row)"
               >编辑</el-button
@@ -75,7 +164,7 @@
               ><img src="../../../public/images/img-2.png" />删除</el-button
             >
           </template>
-        </el-table-column>
+        </el-table-column> -->
       </el-table>
 
       <!-- 底部分页区 -->
@@ -110,7 +199,7 @@
               v-model="temp.name"
               autocomplete="off"
               placeholder="请输入姓名"
-            ></el-input>
+            />
           </el-col>
         </el-form-item>
 
@@ -125,7 +214,7 @@
               v-model="temp.cardNumber"
               autocomplete="off"
               placeholder="请输入卡号"
-            ></el-input>
+            />
           </el-col>
         </el-form-item>
 
@@ -164,7 +253,7 @@
               v-model="temp.college"
               autocomplete="off"
               placeholder="请输入学校"
-            ></el-input>
+            />
           </el-col>
         </el-form-item>
 
@@ -179,7 +268,7 @@
               v-model="temp.professor"
               autocomplete="off"
               placeholder="请输入专业"
-            ></el-input>
+            />
           </el-col>
         </el-form-item>
       </el-form>
@@ -188,8 +277,7 @@
         <el-button
           type="primary"
           @click="dialogStatus === 'create' ? createData() : updateData()"
-          >确 定</el-button
-        >
+        >确 定</el-button>
         <el-button @click="dialogVisible = false">取 消</el-button>
       </span>
     </el-dialog>
@@ -197,175 +285,225 @@
 </template>
 
 <script>
-import Pagination from "@/components/Pagination";
+import Pagination from '@/components/Pagination'
 import {
   fetchList,
   createUser,
   updateUser,
   deletUser,
-} from "@/api/usermanagement";
+  getChooseList
+} from '@/api/usermanagement'
 export default {
   components: {
-    Pagination,
+    Pagination
   },
   data() {
     return {
+      collegeList: [],
+      njList: [],
+      professorList: [],
+      classNameList: [],
       list: [],
-      total: 0, //数据的总数//
+      total: 0, // 数据的总数
       listQuery: {
-        page: 1, //当前在第几页//
-        limit: 8, //一页几条//
+        page: 1, // 当前在第几页
+        limit: 8, // 一页几条
+        key: '', // 关键字 姓名 手机号 卡号
+        college: '', // 学院
+        nj: '', // 年级
+        professor: '', // 专业
+        className: '' // 班级
       },
       sexs: [
         {
-          value: "1",
-          label: "男",
+          value: '1',
+          label: '男'
         },
         {
-          value: "2",
-          label: "女",
-        },
+          value: '2',
+          label: '女'
+        }
       ],
       types: [
-        { id: "1", value: "0-禁用", label: "0-禁用" },
-        { id: "2", value: "1-学生宿舍", label: "1-学生宿舍" },
-        { id: "3", value: "2-教师宿舍", label: "2-教师宿舍" },
-        { id: "4", value: "3-教学楼", label: "3-教学楼" },
-        { id: "5", value: "4-大门", label: "4-大门" },
-        { id: "6", value: "5-行政楼", label: "5-行政楼" },
+        { id: '1', value: '0-禁用', label: '0-禁用' },
+        { id: '2', value: '1-学生宿舍', label: '1-学生宿舍' },
+        { id: '3', value: '2-教师宿舍', label: '2-教师宿舍' },
+        { id: '4', value: '3-教学楼', label: '3-教学楼' },
+        { id: '5', value: '4-大门', label: '4-大门' },
+        { id: '6', value: '5-行政楼', label: '5-行政楼' }
       ],
-      value: "1",
+      value: '1',
       dialogVisible: false,
-      dialogStatus: "",
+      dialogStatus: '',
       textMap: {
-        update: "编辑用户",
-        create: "添加用户",
+        update: '编辑用户',
+        create: '添加用户'
       },
       temp: {
-        id: "",
-        name: "",
-        cardNumber: "",
-        classname: "",
-        college: "",
-        type: "",
-        professor: "",
+        id: '',
+        name: '',
+        cardNumber: '',
+        classname: '',
+        college: '',
+        type: '',
+        professor: ''
       },
       rules: {
         cardNumber: [
           {
             required: true,
-            message: "请输入卡号",
-            trigger: "change",
-          },
+            message: '请输入卡号',
+            trigger: 'change'
+          }
         ],
         name: [
           {
             required: true,
-            message: "请输入姓名",
-            trigger: "change",
-          },
+            message: '请输入姓名',
+            trigger: 'change'
+          }
         ],
         college: [
           {
             required: true,
-            message: "请输入学校",
-            trigger: "change",
-          },
+            message: '请输入学校',
+            trigger: 'change'
+          }
         ],
         professor: [
           {
             required: true,
-            message: "请输入专业",
-            trigger: "change",
-          },
-        ],
-      },
-    };
+            message: '请输入专业',
+            trigger: 'change'
+          }
+        ]
+      }
+    }
   },
   created() {
-    this.getList();
+    this.getList()
+    // 获取学院
+    this.getCollege(1)
+    // 获取专业
+    this.getProfessor(3)
+    // 获取年级
+    this.getNj(2)
+    // 获取班级
+    this.getClassName(4)
   },
   methods: {
     getList() {
       fetchList(this.listQuery).then((response) => {
-        this.list = response.data;
-        this.total = response.total;
-      });
+        // console.log(response);
+
+        this.list = response.data
+        this.total = response.total
+      })
+    },
+    getCollege(name) {
+      getChooseList({ name }).then((response) => {
+        // console.log(response);
+        this.collegeList = response.data
+      })
+    },
+    getProfessor(name) {
+      getChooseList({ name }).then((response) => {
+        // console.log(response);
+        this.professorList = response.data
+      })
+    },
+    getNj(name) {
+      getChooseList({ name }).then((response) => {
+        // console.log(response);
+        this.njList = response.data
+      })
+    },
+    getClassName(name) {
+      getChooseList({ name }).then((response) => {
+        // console.log(response);
+        this.classNameList = response.data
+      })
     },
     handleDelete(row, index) {
-      if (confirm("是否删除？")) {
+      if (confirm('是否删除？')) {
         deletUser({ id: row.id }).then(() => {
           this.$notify({
-            title: "删除成功",
-            type: "success",
-            duration: 1500,
-          });
-          this.list.splice(index, 1);
-        });
+            title: '删除成功',
+            type: 'success',
+            duration: 1500
+          })
+          this.list.splice(index, 1)
+        })
       }
     },
     resetTemp() {
       this.temp = {
-        id: "",
-        name: "",
-        cardNumber: "",
-        classname: "",
-        college: "",
-        type: "",
-        professor: "",
-      };
+        id: '',
+        name: '',
+        cardNumber: '',
+        classname: '',
+        college: '',
+        type: '',
+        professor: ''
+      }
     },
     handleCreate() {
-      this.resetTemp();
-      this.dialogStatus = "create";
-      this.dialogVisible = true;
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogVisible = true
       this.$nextTick(() => {
-        this.$refs["dataForm"].clearValidate();
-      });
+        this.$refs['dataForm'].clearValidate()
+      })
     },
     handleUpdate(row) {
-      this.temp = Object.assign({}, row);
-      this.dialogStatus = "update";
-      this.dialogVisible = true;
+      this.temp = Object.assign({}, row)
+      this.dialogStatus = 'update'
+      this.dialogVisible = true
       this.$nextTick(() => {
-        this.$refs["dataForm"].clearValidate();
-      });
+        this.$refs['dataForm'].clearValidate()
+      })
     },
     createData() {
-      this.$refs["dataForm"].validate((valid) => {
+      this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           createUser(this.temp).then(() => {
-            this.list.push(this.temp);
-            this.dialogVisible = false;
+            this.list.push(this.temp)
+            this.dialogVisible = false
             this.$notify({
-              title: "添加成功",
-              type: "success",
-              duration: 1500,
-            });
-          });
+              title: '添加成功',
+              type: 'success',
+              duration: 1500
+            })
+          })
         }
-      });
-      this.getList();
+      })
+      this.getList()
     },
     updateData() {
-      this.$refs["dataForm"].validate((valid) => {
+      this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          const tempData = Object.assign({}, this.temp);
+          const tempData = Object.assign({}, this.temp)
           updateUser(tempData).then(() => {
-            const index = this.list.findIndex((v) => v.id === this.temp.id);
-            this.list.splice(index, 1, this.temp);
-            this.dialogVisible = false;
+            const index = this.list.findIndex((v) => v.id === this.temp.id)
+            this.list.splice(index, 1, this.temp)
+            this.dialogVisible = false
             this.$notify({
-              title: "编辑成功",
-              type: "success",
-              duration: 1500,
-            });
-          });
+              title: '编辑成功',
+              type: 'success',
+              duration: 1500
+            })
+          })
         }
-      });
+      })
     },
-  },
-};
+    handleFilter() {
+      this.list = []
+      this.total = 0
+      this.listQuery.page = 1
+      this.getList()
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -399,6 +537,7 @@ export default {
 
   .switch {
     display: flex;
+    align-items: center;
     width: 1380px;
     line-height: 58px;
     margin-left: 40px;

src/views/userWithGroup/index.vue

@@ -4,68 +4,170 @@
 
     <div class="head">
       <div class="head-img">
-        <img src="../../../public/images/img-1.png" />
+        <img src="../../../public/images/img-1.png">
       </div>
       <div class="head-info">用户与组绑定</div>
     </div>
 
     <!-- 搜索区域 -->
     <div class="form-head">
-      <span>姓名：</span>
-      <span class="input">
+      <span>
         <el-input
-          v-model="listQuery.name"
-          placeholder="请输入姓名"
+          v-model="listQuery.key"
+          size="mini"
+          placeholder="请输入姓名,手机号或卡号"
           clearable
-          @clear="handleChangeFilter"
-          @keyup.enter.native="handleFilter"
-        >
-        </el-input>
+        />
       </span>
 
-      <span>卡号：</span>
-      <span class="input">
-        <el-input
-          v-model="listQuery.cardNumber"
-          placeholder="请输入卡号"
-          clearable
-          @clear="handleChangeFilter"
-          @keyup.enter.native="handleFilter"
-        >
-        </el-input>
-      </span>
+      <span style="margin-left: 15px">学院：</span>
+      <el-select
+        v-model="listQuery.college"
+        clearable
+        size="mini"
+        placeholder="请选择学院"
+      >
+        <el-option
+          v-for="(item, index) in collegeList"
+          :key="index"
+          :label="item.name"
+          :value="item.name"
+        />
+      </el-select>
+
+      <span style="margin-left: 15px">专业：</span>
+      <el-select
+        v-model="listQuery.professor"
+        clearable
+        size="mini"
+        placeholder="请选择专业"
+      >
+        <el-option
+          v-for="(item, index) in professorList"
+          :key="index"
+          :label="item.name"
+          :value="item.name"
+        />
+      </el-select>
+
+      <span style="margin-left: 15px">年级：</span>
+      <el-select
+        v-model="listQuery.nj"
+        clearable
+        size="mini"
+        placeholder="请选择年级"
+      >
+        <el-option
+          v-for="(item, index) in njList"
+          :key="index"
+          :label="item.name"
+          :value="item.name"
+        />
+      </el-select>
 
-      <el-button type="primary" size="mini" class="button" @click="handleFilter"
-        >查询</el-button
+      <span style="margin-left: 15px">班级：</span>
+      <el-select
+        v-model="listQuery.className"
+        clearable
+        size="mini"
+        placeholder="请选择班级"
       >
+        <el-option
+          v-for="(item, index) in classNameList"
+          :key="index"
+          :label="item.name"
+          :value="item.name"
+        />
+      </el-select>
+
+      <el-button
+        style="margin-left: 20px"
+        type="primary"
+        size="mini"
+        class="button"
+        @click="handleFilter"
+      >
+        查询
+      </el-button>
+
+      <!-- <el-button
+        style="margin-left: 20px"
+        type="primary"
+        size="mini"
+        class="button"
+      >
+        导出
+      </el-button> -->
     </div>
 
     <!-- 表格区域 -->
     <div class="form">
       <el-table :data="list">
-        <el-table-column label="姓名" align="center" width="440px">
+        <el-table-column label="姓名" align="center">
           <template slot-scope="{ row }">
             <span>{{ row.name }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column label="卡号" align="center" width="440px">
+        <el-table-column label="手机号" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.mobile }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="卡号" align="center" show-overflow-tooltip>
           <template slot-scope="{ row }">
             <span>{{ row.cardNumber }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column label="操作" width="440px" align="center">
+        <el-table-column label="学院" align="center">
           <template slot-scope="{ row }">
-            <el-button type="text" size="small" @click="checkGroup(row)"
-              >查看当前分组</el-button
-            >
-            <el-button type="text" size="small" @click="bindGroup(row)"
-              >绑定分组</el-button
-            >
-            <el-button type="text" size="small" @click="unbindGroup(row)"
-              >解绑分组</el-button
-            >
+            <span>{{ row.college }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="专业" align="center" show-overflow-tooltip>
+          <template slot-scope="{ row }">
+            <span>{{ row.professor }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="年级" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.nj }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="班级" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.classname }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="当前分组" align="center">
+          <template slot-scope="{ row }">
+            <span style="color: #1890ff">{{ row.group }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="300px" align="center">
+          <template slot-scope="{ row }">
+            <el-button
+              type="text"
+              size="small"
+              @click="checkGroup(row)"
+            >查看当前分组</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="bindGroup(row)"
+            >绑定分组</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="unbindGroup(row)"
+            >解绑分组</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -95,9 +197,9 @@
         <el-form-item label="已绑定分组：" class="switch-button-item">
           <span>
             <el-tag
-              class="groupclass"
               v-for="item in groupWithDeviceList"
               :key="item.idGroup"
+              class="groupclass"
             >
               {{ item.groupName }}
             </el-tag>
@@ -134,8 +236,7 @@
                 :key="item.id"
                 :label="item.name"
                 :value="item.id"
-              >
-              </el-option>
+              />
             </el-select>
           </el-col>
         </el-form-item>
@@ -167,8 +268,7 @@
               type="text"
               size="small"
               @click="deleteGroup(row, $index)"
-              >解绑</el-button
-            >
+            >解绑</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -177,37 +277,43 @@
 </template>
 
 <script>
-import Pagination from "@/components/Pagination";
+import Pagination from '@/components/Pagination'
 import {
-  fetchUserList,
   fetchGroupList,
-  editGroup,
   searchList,
-  fetchList,
   bindGroups,
   deleteGroups,
   checkGroups,
-} from "@/api/userWithGroup";
+  getList
+} from '@/api/userWithGroup'
+import { getChooseList } from '@/api/usermanagement'
 export default {
   components: {
-    Pagination,
+    Pagination
   },
   data() {
     return {
+      collegeList: [],
+      njList: [],
+      professorList: [],
+      classNameList: [],
       list: [],
       groupList: [],
       groupWithDeviceList: [],
       temp: {
-        userName: "",
-        cardNumber: "",
-        groupsId: [],
+        userName: '',
+        cardNumber: '',
+        groupsId: []
       },
-      total: 0, //数据的总数//
+      total: 0, // 数据的总数//
       listQuery: {
-        page: 1, //当前在第几页//
-        limit: 8, //一页几条//
-        name: "",
-        cardNumber: "",
+        page: 1, // 当前在第几页//
+        limit: 8, // 一页几条//
+        key: '', // 关键字 姓名 手机号 卡号
+        college: '', // 学院
+        nj: '', // 年级
+        professor: '', // 专业
+        className: '' // 班级
       },
       dialogCheckGroups: false,
       dialogBindGroup: false,
@@ -216,121 +322,138 @@ export default {
         groupsId: [
           {
             required: true,
-            message: "请选择分组",
-            trigger: "change",
-          },
-        ],
-      },
-    };
+            message: '请选择分组',
+            trigger: 'change'
+          }
+        ]
+      }
+    }
   },
   created() {
-    this.getUserList();
-    this.getgroupList();
+    this.getUserList()
+    this.getgroupList()
+    // 获取学院
+    this.getCollege(1)
+    // 获取专业
+    this.getProfessor(3)
+    // 获取年级
+    this.getNj(2)
+    // 获取班级
+    this.getClassName(4)
   },
   methods: {
     getUserList() {
-      if (this.listQuery.name || this.listQuery.cardNumber) {
-        searchList(this.listQuery).then((response) => {
-          this.list = response.data;
-          this.total = response.total;
-        });
-      } else {
-        fetchUserList({
-          page: this.listQuery.page,
-          limit: this.listQuery.limit,
-        }).then((response) => {
-          this.list = response.data;
-          this.total = response.total;
-        });
-      }
+      getList(this.listQuery).then((response) => {
+        console.log(response)
+
+        this.list = response.data
+        this.total = response.total
+      })
     },
     getgroupList() {
-      fetchGroupList({ page: this.listQuery.page, limit: "999" }).then(
+      fetchGroupList({ page: this.listQuery.page, limit: '999' }).then(
         (response) => {
-          this.groupList = response.data;
+          this.groupList = response.data
         }
-      );
+      )
+    },
+    getCollege(name) {
+      getChooseList({ name }).then((response) => {
+        // console.log(response);
+        this.collegeList = response.data
+      })
+    },
+    getProfessor(name) {
+      getChooseList({ name }).then((response) => {
+        // console.log(response);
+        this.professorList = response.data
+      })
+    },
+    getNj(name) {
+      getChooseList({ name }).then((response) => {
+        // console.log(response);
+        this.njList = response.data
+      })
+    },
+    getClassName(name) {
+      getChooseList({ name }).then((response) => {
+        // console.log(response);
+        this.classNameList = response.data
+      })
     },
     checkGroup(row) {
-      this.temp = Object.assign({}, row);
+      this.temp = Object.assign({}, row)
       checkGroups({ userId: row.id }).then((response) => {
-        this.groupWithDeviceList = response.data;
-      });
-      this.dialogCheckGroups = true;
+        this.groupWithDeviceList = response.data
+      })
+      this.dialogCheckGroups = true
     },
     bindGroup(row) {
-      this.temp = Object.assign({}, row);
-      this.dialogBindGroup = true;
+      this.temp = Object.assign({}, row)
+      this.dialogBindGroup = true
       this.$nextTick(() => {
-        this.$refs["dataForm"].clearValidate();
-      });
+        this.$refs['dataForm'].clearValidate()
+      })
     },
     updateData() {
-      this.$refs["dataForm"].validate((valid) => {
+      this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          const tempData = Object.assign({}, this.temp);
+          const tempData = Object.assign({}, this.temp)
           bindGroups({
             id: tempData.id,
-            groups: tempData.groupsId,
+            groups: tempData.groupsId
           }).then(() => {
-            this.dialogBindGroup = false;
+            this.dialogBindGroup = false
             this.$notify({
-              title: "绑定分组成功",
-              type: "success",
-              duration: 1500,
-            });
-          });
+              title: '绑定分组成功',
+              type: 'success',
+              duration: 1500
+            })
+          })
         }
-      });
+      })
     },
     unbindGroup(row) {
-      this.temp = Object.assign({}, row);
+      this.temp = Object.assign({}, row)
       checkGroups({ userId: row.id }).then((response) => {
-        this.groupWithDeviceList = response.data;
-      });
-      this.dialogUnbindGroup = true;
+        this.groupWithDeviceList = response.data
+      })
+      this.dialogUnbindGroup = true
     },
     deleteGroup(row, index) {
-      console.log(row, index);
-      if (confirm("确定解绑吗？")) {
+      console.log(row, index)
+      if (confirm('确定解绑吗？')) {
         deleteGroups({
           id: this.temp.id,
-          groups: [row.idGroup],
+          groups: [row.idGroup]
         }).then(() => {
           this.$notify({
-            title: "解绑成功",
-            type: "success",
-            duration: 1500,
-          });
-          this.groupWithDeviceList.splice(index, 1);
-        });
+            title: '解绑成功',
+            type: 'success',
+            duration: 1500
+          })
+          this.groupWithDeviceList.splice(index, 1)
+        })
       }
     },
     handleChangeFilter() {
       if (!this.listQuery.name && !this.listQuery.cardNumber) {
-        this.getUserList();
+        this.getUserList()
       } else {
         searchList(this.listQuery).then((response) => {
-          this.list = response.data;
-          this.total = response.total;
-        });
+          this.list = response.data
+          this.total = response.total
+        })
       }
     },
     handleFilter() {
-      if (!this.listQuery.name && !this.listQuery.cardNumber) {
-        alert("请输入搜索条件");
-      } else {
-        let temp = Object.assign({}, this.listQuery);
-        temp.page = 1;
-        searchList(temp).then((response) => {
-          this.list = response.data;
-          this.total = response.total;
-        });
-        this.listQuery.page = 1;
-      }
-    },
-  },
-};
+      this.list = []
+      this.total = 0
+      this.listQuery.page = 1
+      this.getUserList()
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -370,20 +493,11 @@ export default {
   }
 
   .form-head {
-    margin: 0 40px;
+    display: flex;
+    align-items: center;
+    margin: 20px 40px;
     width: 1504px;
-    line-height: 118px;
     font-size: 9px;
-
-    .input {
-      display: inline-block;
-      margin-right: 30px;
-      width: 210px;
-    }
-
-    .button {
-      margin-left: 41px;
-    }
   }
 
   .form {