部门筛选调整

web/src/views/gas/personnel/PersonnelForm.vue

@@ -14,9 +14,19 @@
         <el-input v-model="formData.employeeId" placeholder="请输入工号" />
       </el-form-item>
       <el-form-item label="部门" prop="deptId">
-        <el-select v-model="formData.deptId" clearable filterable placeholder="请选择部门">
-          <el-option v-for="user in deptList" :key="user.id" :label="user.name" :value="user.id" />
-        </el-select>
+        <el-cascader
+          class="w-100"
+          v-model="formData.deptId"
+          :options="deptList"
+          :props="{
+            checkStrictly: true,
+            label: 'name',
+            value: 'id',
+            children: 'children',
+            emitPath: false
+          }"
+          clearable
+        />
       </el-form-item>
       <el-form-item label="系统用户" prop="userId">
         <el-select
@@ -62,7 +72,7 @@ import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { PersonnelApi, Personnel } from '@/api/gas/personnel'
 import { UserVO, getSimpleUserList } from '@/api/system/user'
 import * as DeptApi from '@/api/system/dept'
-
+import { handleTree } from '@/utils/tree'
 /** 人员信息 表单 */
 defineOptions({ name: 'PersonnelForm' })
 
@@ -89,11 +99,11 @@ const formRules = reactive({
 })
 const formRef = ref() // 表单 Ref
 const userList = ref<UserVO[]>([]) // 系统用户列表
-const deptList = ref<DeptApi.DeptVO[]>([]) // 部门列表
+const deptList = ref<any[]>([]) // 部门列表
 
 function getDeptList() {
   DeptApi.getSimpleDeptList().then((res) => {
-    deptList.value = res || []
+    deptList.value = handleTree(res || [])
   })
 }
 

web/src/views/gas/personnel/index.vue

@@ -27,7 +27,20 @@
         />
       </el-form-item>
       <el-form-item label="部门" prop="deptId">
-        <el-select
+        <el-cascader
+          class="!w-240px"
+          v-model="queryParams.deptId"
+          :options="deptList"
+          :props="{
+            checkStrictly: true,
+            label: 'name',
+            value: 'id',
+            children: 'children',
+            emitPath: false
+          }"
+          clearable
+        />
+        <!-- <el-select
           v-model="queryParams.deptId"
           placeholder="请选择部门"
           clearable
@@ -35,7 +48,7 @@
           class="!w-240px"
         >
           <el-option v-for="dept in deptList" :key="dept.id" :label="dept.name" :value="dept.id" />
-        </el-select>
+        </el-select> -->
       </el-form-item>
       <el-form-item label="系统用户" prop="userId">
         <el-select
@@ -213,7 +226,7 @@ import { PersonnelApi, Personnel } from '@/api/gas/personnel'
 import PersonnelForm from './PersonnelForm.vue'
 import { UserVO, getSimpleUserList } from '@/api/system/user'
 import { DeptVO, getSimpleDeptList } from '@/api/system/dept'
-
+import { handleTree } from '@/utils/tree'
 /** 人员信息 列表 */
 defineOptions({ name: 'Personnel' })
 
@@ -242,7 +255,7 @@ const userList = ref<UserVO[]>([]) // 系统用户列表
 const deptList = ref<DeptVO[]>([]) // 部门列表
 function getDeptList() {
   getSimpleDeptList().then((res) => {
-    deptList.value = res || []
+    deptList.value = handleTree(res || [])
   })
 }
 function getUserList() {