Quellcode durchsuchen

feat(risk): 人员信息页工作门店改 el-select 拉门店

- 筛选 + 新增弹窗: 工作门店从 el-input 改为 el-select(filterable)
  * 新增 storeOptions + loadStores() 从 sys_dept(dept_category='门店') 拉
  * handleStoreChange 自动回填 storeName
  * queryParams 字段 storeName 改 storeId
  * rules 校验从 blur 改 change
- 修 <style scoped> 缺点的 bug(.personnel-page)
- 删 getJobTypeTag 重复定义
yangjingjing vor 3 Tagen
Ursprung
Commit
f9ee41b550
1 geänderte Dateien mit 59 neuen und 14 gelöschten Zeilen
  1. 59 14
      src/views/risk/personnel/index.vue

+ 59 - 14
src/views/risk/personnel/index.vue

@@ -29,14 +29,22 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="工作门店" prop="storeName">
-          <el-input
-            v-model="queryParams.storeName"
-            placeholder="请输入门店名称"
-            style="width: 220px"
+        <el-form-item label="工作门店" prop="storeId">
+          <el-select
+            v-model="queryParams.storeId"
+            placeholder="请选择工作门店"
             clearable
-            @keyup.enter="handleQuery"
-          />
+            filterable
+            style="width: 220px"
+            @change="handleQuery"
+          >
+            <el-option
+              v-for="d in storeOptions"
+              :key="d.value"
+              :label="d.label"
+              :value="d.value"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleQuery">搜索</el-button>
@@ -163,8 +171,21 @@
 
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item label="工作门店" prop="storeName">
-              <el-input v-model="form.storeName" placeholder="请输入工作门店" maxlength="100" />
+            <el-form-item label="工作门店" prop="storeId">
+              <el-select
+                v-model="form.storeId"
+                placeholder="请选择工作门店"
+                filterable
+                style="width: 100%"
+                @change="handleStoreChange"
+              >
+                <el-option
+                  v-for="d in storeOptions"
+                  :key="d.value"
+                  :label="d.label"
+                  :value="d.value"
+                />
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -304,6 +325,7 @@ import {
 import { listPersonnelCertByPersonnel } from '@/api/risk/personnelCert';
 import { uploadFile } from '@/api/risk/file';
 import { getDicts } from '@/api/system/dict/data';
+import { listDept } from '@/api/system/dept';
 import type { DictDataVO } from '@/api/system/dict/data/types';
 import type { RiskPersonnelBo, RiskPersonnelVo, RiskPersonnelCertVo } from '@/api/risk/types';
 import { Plus, Document } from '@element-plus/icons-vue';
@@ -332,6 +354,9 @@ const personTypeOptions = ref<Array<{ label: string; value: string }>>([]);
 const certTypeOptions = ref<Array<{ label: string; value: string }>>([]);
 const insuranceStatusOptions = ref<Array<{ label: string; value: string }>>([]);
 
+// 门店列表(从 sys_dept 拉 dept_category='门店' 的)
+const storeOptions = ref<Array<{ label: string; value: number }>>([]);
+
 const queryFormRef = ref<FormInstance>();
 const formRef = ref<FormInstance>();
 
@@ -364,6 +389,20 @@ const mapDictData = (resOrList: any) => {
     .map((d) => ({ label: d.dictLabel, value: d.dictValue }));
 };
 
+/** 加载门店列表(从 sys_dept 过滤 dept_category='门店') */
+const loadStores = async () => {
+  try {
+    const res: any = await listDept({});
+    const list: any[] = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : [];
+    storeOptions.value = list
+      .filter((d: any) => d.deptCategory === '门店' && (d.status === '0' || d.status === undefined))
+      .map((d: any) => ({ label: d.deptName, value: d.deptId }));
+  } catch (e) {
+    console.error('加载门店列表失败', e);
+    storeOptions.value = [];
+  }
+};
+
 const validateIdCard = (_rule: any, value: any, callback: any) => {
   if (!value) {
     callback(new Error('请输入身份证号'));
@@ -409,13 +448,13 @@ const data = reactive<any>({
     pageSize: 10,
     personnelName: '',
     jobType: '',
-    storeName: ''
+    storeId: undefined
   },
   rules: {
     jobType: [{ required: true, message: '请选择人员类型', trigger: 'change' }],
     personnelName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
     idCard: [{ required: true, validator: validateIdCard, trigger: 'blur' }],
-    storeName: [{ required: true, message: '请输入工作门店', trigger: 'blur' }],
+    storeId: [{ required: true, message: '请选择工作门店', trigger: 'change' }],
     insuranceStatus: [{ required: true, message: '请选择保险状态', trigger: 'change' }],
     insuranceStartDate: [
       {
@@ -492,6 +531,12 @@ const handleInsuranceStatusChange = (val: string) => {
   }
 };
 
+/** 工作门店选择变化:自动回填 storeName */
+const handleStoreChange = (deptId: number | string) => {
+  const found = storeOptions.value.find((s) => s.value === deptId);
+  form.value.storeName = found?.label || '';
+};
+
 /** 列表中保险状态标签 */
 const getInsuranceLabel = (row: any) => {
   if (row.insuranceStatus === '未投保') return '未投保';
@@ -517,7 +562,6 @@ const getInsuranceTag = (row: any) => {
   return map[label] || 'info';
 };
 
-// 人员类型 tag 颜色(按字典 value 映射,与设计稿一致)
 // 人员类型 tag 颜色(按字典 value 映射,与设计稿一致)
 const getJobTypeTag = (type: string) => {
   const map: Record<string, string> = {
@@ -580,7 +624,7 @@ const resetQuery = () => {
   queryParams.value.pageNum = 1;
   queryParams.value.personnelName = '';
   queryParams.value.jobType = '';
-  queryParams.value.storeName = '';
+  queryParams.value.storeId = undefined;
   handleQuery();
 };
 
@@ -776,12 +820,13 @@ const closeDialog = () => {
 
 onMounted(async () => {
   await loadDicts();
+  await loadStores();
   await getList();
 });
 </script>
 
 <style scoped>
-  personnel-page {
+.personnel-page {
   padding: 16px;
   height: 100%;
   overflow-y: auto;