页面搜索修改

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

@@ -22,7 +22,6 @@
           <el-date-picker
             v-model="queryParams.year"
             type="year"
-            size="mini"
             placeholder="选择年"
             value-format="yyyy">
           </el-date-picker>
@@ -31,27 +30,23 @@
           <el-date-picker
             v-model="queryParams.month"
             type="month"
-            size="mini"
             placeholder="选择月"
             format="MM"
             value-format="MM">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="部门名称" prop="deptName">
-          <el-input
-            v-model="queryParams.deptName"
-            placeholder="请输入部门名称"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
+        <el-form-item label="部门名称" prop="deptId">
+          <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="请选择部门名称" style="width: 220px"/>
         </el-form-item>
-        <el-form-item label="员工姓名" prop="employeeName">
-          <el-input
-            v-model="queryParams.employeeName"
-            placeholder="请输入员工姓名"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
+        <el-form-item label="员工姓名" prop="employeeId">
+          <el-select v-model="queryParams.employeeId" filterable clearable placeholder="请选择员工姓名">
+            <el-option
+              v-for="item in employeeList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -229,9 +224,14 @@
 <script>
 import { listSalaryReport, editQuerysal, generate, updateSalaryReport } from "@/api/pay/salaryReport";
 import { listTenant } from "@/api/pay/tenant";
+import { listEmployeeInfo } from "@/api/pay/employeeInfo";
+import { deptTreeSelect } from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "SalaryReport",
+  components: { Treeselect },
   data() {
     return {
       // 公司信息
@@ -260,6 +260,10 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      // 员工列表
+      employeeList: [],
+      // 部门树选项
+      deptOptions: undefined,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -428,6 +432,8 @@ export default {
     }else {
       this.gsInfo.active_id = this.$store.state.user.tenantId
       this.getList();
+      this.getDeptTree();
+      this.getlistEmployee();
     }
   },
   methods: {
@@ -437,7 +443,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'
@@ -448,7 +456,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() {