feat: 客户管理添加地区级联选择

.vscode/settings.json

@@ -227,5 +227,6 @@
   "commentTranslate.multiLineMerge": true,
   "vue.server.hybridMode": true,
   "typescript.tsdk": "node_modules/typescript/lib",
-  "oxc.enable": false
+  "oxc.enable": false,
+  "cSpell.words": ["Cascader"]
 }

apps/web-antd/src/views/license/customer/data.ts

@@ -4,6 +4,7 @@ import type { CustomerApi } from '#/api/license/customer';
 
 import { useAccess } from '@vben/access';
 
+import { getAreaTree } from '#/api/system/area';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
 const { hasAccessByCodes } = useAccess();
@@ -47,15 +48,6 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请选择客户类型',
       },
     },
-    {
-      fieldName: 'areaId',
-      label: '地区',
-      rules: 'required',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入地区',
-      },
-    },
     {
       fieldName: 'contacts',
       label: '联系人',
@@ -65,6 +57,24 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入联系人',
       },
     },
+    {
+      fieldName: 'areaIds',
+      label: '地区',
+      rules: 'required',
+      component: 'ApiCascader',
+      componentProps: {
+        api: getAreaTree,
+        expandTrigger: 'hover',
+        changeOnSelect: true,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+          children: 'children',
+        },
+        showSearch: true,
+        placeholder: '请输入地区',
+      },
+    },
     {
       fieldName: 'role',
       label: '角色',
@@ -131,15 +141,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         placeholder: '请选择客户类型',
       },
     },
-    {
-      fieldName: 'areaId',
-      label: '地区',
-      component: 'Input',
-      componentProps: {
-        allowClear: true,
-        placeholder: '请输入地区',
-      },
-    },
     {
       fieldName: 'contacts',
       label: '联系人',
@@ -186,13 +187,13 @@ export function useGridColumns(
       },
     },
     {
-      field: 'areaId',
+      field: 'contacts',
-      title: '地区',
+      title: '联系人',
       minWidth: 120,
     },
     {
-      field: 'contacts',
+      field: 'areaNames',
-      title: '联系人',
+      title: '地区',
       minWidth: 120,
     },
     {

apps/web-antd/src/views/license/customer/modules/form.vue

@@ -46,7 +46,11 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as CustomerApi.Customer;
+    const values = await formApi.getValues();
+    const data = {
+      ...values,
+      areaId: values?.areaIds[values?.areaIds.length - 1],
+    } as CustomerApi.Customer;
     try {
       await (formData.value?.id ? updateCustomer(data) : createCustomer(data));
       // 关闭并提示