页面搜索修改

ruoyi-ui/src/views/pay/attendance/index.vue

@@ -18,21 +18,18 @@
     <div :class="$store.state.user.tenantId?'content-all':'content'">
 
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
-        <el-form-item label="员工姓名" prop="empName">
+        <el-form-item label="员工姓名" prop="employeeId">
-          <el-input
+          <el-select v-model="queryParams.employeeId" filterable clearable placeholder="请选择员工姓名">
-            v-model="queryParams.empName"
+            <el-option
-            placeholder="请输入员工姓名"
+              v-for="item in employeeList"
-            clearable
+              :key="item.id"
-            @keyup.enter.native="handleQuery"
+              :label="item.name"
-          />
+              :value="item.id">
+            </el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="部门名称" prop="deptName">
+        <el-form-item label="部门名称" prop="deptId">
-          <el-input
+          <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="请选择部门名称" style="width: 220px"/>
-            v-model="queryParams.deptName"
-            placeholder="请输入部门名称"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
         </el-form-item>
         <el-form-item label="考勤日期" prop="kaoqinDate">
           <el-date-picker clearable
@@ -46,7 +43,6 @@
           <el-date-picker
             v-model="queryParams.kaoqinYearMonth"
             type="month"
-            size="mini"
             placeholder="请输入考勤年份月份"
             value-format="yyyy-MM">
           </el-date-picker>
@@ -336,10 +332,14 @@ import { listAttendance, getAttendance, delAttendance, addAttendance, updateAtte
 import { listEmployeeInfo } from "@/api/pay/employeeInfo";
 import { listTenant } from "@/api/pay/tenant";
 import { getToken } from "@/utils/auth";
+import { deptTreeSelect } from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Attendance",
   dicts: ['sys_user_sex', 'pay_del_status'],
+  components: { Treeselect },
   data() {
     return {
       // 公司信息
@@ -370,6 +370,8 @@ export default {
       open: false,
       // 员工列表
       employeeList: [],
+      // 部门树选项
+      deptOptions: undefined,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -456,7 +458,9 @@ export default {
       this.getGsInfoList()
     }else {
       this.gsInfo.active_id = this.$store.state.user.tenantId
-      this.getList()
+      this.getList();
+      this.getDeptTree();
+      this.getlistEmployee();
     }
   },
   methods: {
@@ -466,7 +470,9 @@ export default {
         if(response.rows.length>0){
           this.gsInfo.list = response.rows;
           this.gsInfo.active_id = this.gsInfo.list[0].id
-          this.getList()
+          this.getList();
+          this.getDeptTree();
+          this.getlistEmployee();
         }else{
           this.$alert(`没有查到相关公司，暂无数据！`, `提示`, {
             type: 'warning'
@@ -477,7 +483,21 @@ export default {
     // 选择公司
     changCompany(id){
       this.gsInfo.active_id = id
-      this.getList()
+      this.getList();
+      this.getDeptTree();
+      this.getlistEmployee();
+    },
+    /** 查询时员工 */
+    getlistEmployee() {
+      listEmployeeInfo({ pageSize: 1000000000, tenantId: this.gsInfo.active_id }).then(response => {
+        this.employeeList = response.rows
+      });
+    },
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect({tenantId: this.gsInfo.active_id}).then(response => {
+        this.deptOptions = response.data;
+      });
     },
     /** 查询考勤列表 */
     getList() {