feat：【antd】【crm】contact form 的优化

2025-09-26 08:38:57 +08:00
parent 3c0723d82f
commit 0d018c37c5
3 changed files with 109 additions and 3 deletions
--- a/apps/web-antd/src/views/crm/clue/data.ts
+++ b/apps/web-antd/src/views/crm/clue/data.ts
@@ -26,6 +26,9 @@ export function useFormSchema(): VbenFormSchema[] {
      label: '线索名称',
      component: 'Input',
      rules: 'required',
+      componentProps: {
+        placeholder: '请输入线索名称',
+      },
    },
    {
      fieldName: 'source',
@@ -33,6 +36,7 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'Select',
      componentProps: {
        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
+        placeholder: '请选择客户来源',
      },
      rules: 'required',
    },
@@ -40,6 +44,9 @@ export function useFormSchema(): VbenFormSchema[] {
      fieldName: 'mobile',
      label: '手机',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+      },
    },
    {
      fieldName: 'ownerUserId',
@@ -50,6 +57,7 @@ export function useFormSchema(): VbenFormSchema[] {
        labelField: 'nickname',
        valueField: 'id',
        allowClear: true,
+        placeholder: '请选择负责人',
      },
      defaultValue: userStore.userInfo?.id,
      rules: 'required',
@@ -58,21 +66,33 @@ export function useFormSchema(): VbenFormSchema[] {
      fieldName: 'telephone',
      label: '电话',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+      },
    },
    {
      fieldName: 'email',
      label: '邮箱',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
    },
    {
      fieldName: 'wechat',
      label: '微信',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入微信',
+      },
    },
    {
      fieldName: 'qq',
      label: 'QQ',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 QQ',
+      },
    },
    {
      fieldName: 'industryId',
@@ -80,6 +100,7 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'Select',
      componentProps: {
        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, 'number'),
+        placeholder: '请选择客户行业',
      },
    },
    {
@@ -88,6 +109,7 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'Select',
      componentProps: {
        options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL, 'number'),
+        placeholder: '请选择客户级别',
      },
    },
    {
@@ -97,12 +119,16 @@ export function useFormSchema(): VbenFormSchema[] {
      componentProps: {
        api: () => getAreaTree(),
        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择地址',
      },
    },
    {
      fieldName: 'detailAddress',
      label: '详细地址',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入详细地址',
+      },
    },
    {
      fieldName: 'contactNextTime',
@@ -112,12 +138,16 @@ export function useFormSchema(): VbenFormSchema[] {
        showTime: true,
        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'x',
+        placeholder: '请选择下次联系时间',
      },
    },
    {
      fieldName: 'remark',
      label: '备注',
      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
    },
  ];
 }
@@ -129,6 +159,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
      fieldName: 'name',
      label: '线索名称',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入线索名称',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'transformStatus',
@@ -139,6 +173,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
          { label: '未转化', value: false },
          { label: '已转化', value: true },
        ],
+        placeholder: '请选择转化状态',
+        allowClear: true,
      },
      defaultValue: false,
    },
@@ -146,11 +182,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
      fieldName: 'mobile',
      label: '手机号',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'telephone',
      label: '电话',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'createTime',
@@ -159,6 +203,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      componentProps: {
        ...getRangePickerDefaultProps(),
        allowClear: true,
+        placeholder: ['开始日期', '结束日期'],
      },
    },
  ];
--- a/apps/web-antd/src/views/crm/contact/data.ts
+++ b/apps/web-antd/src/views/crm/contact/data.ts
@@ -27,17 +27,22 @@ export function useFormSchema(): VbenFormSchema[] {
      label: '联系人姓名',
      component: 'Input',
      rules: 'required',
+      componentProps: {
+        placeholder: '请输入联系人姓名',
+      },
    },
    {
      fieldName: 'ownerUserId',
      label: '负责人',
      component: 'ApiSelect',
+      rules: 'required',
      componentProps: {
        api: () => getSimpleUserList(),
        fieldNames: {
          label: 'nickname',
          value: 'id',
        },
+        placeholder: '请选择负责人',
      },
      defaultValue: userStore.userInfo?.id,
    },
@@ -45,51 +50,75 @@ export function useFormSchema(): VbenFormSchema[] {
      fieldName: 'customerId',
      label: '客户名称',
      component: 'ApiSelect',
+      rules: 'required',
      componentProps: {
        api: () => getCustomerSimpleList(),
        fieldNames: {
          label: 'name',
          value: 'id',
        },
+        placeholder: '请选择客户',
      },
    },
    {
      fieldName: 'mobile',
      label: '手机',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+      },
    },
    {
      fieldName: 'telephone',
      label: '电话',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+      },
    },
    {
      fieldName: 'email',
      label: '邮箱',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
    },
    {
      fieldName: 'wechat',
      label: '微信',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入微信',
+      },
    },
    {
      fieldName: 'qq',
      label: 'QQ',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入QQ',
+      },
    },
    {
      fieldName: 'post',
      label: '职位',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入职位',
+      },
    },
    {
      fieldName: 'master',
      label: '关键决策人',
-      component: 'Select',
+      component: 'RadioGroup',
      componentProps: {
        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        placeholder: '请选择是否关键决策人',
+        buttonStyle: 'solid',
+        optionType: 'button',
      },
+      defaultValue: false,
    },
    {
      fieldName: 'sex',
@@ -97,6 +126,7 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'Select',
      componentProps: {
        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        placeholder: '请选择性别',
      },
    },
    {
@@ -109,6 +139,7 @@ export function useFormSchema(): VbenFormSchema[] {
          label: 'name',
          value: 'id',
        },
+        placeholder: '请选择直属上级',
      },
    },
    {
@@ -118,12 +149,16 @@ export function useFormSchema(): VbenFormSchema[] {
      componentProps: {
        api: () => getAreaTree(),
        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择地址',
      },
    },
    {
      fieldName: 'detailAddress',
      label: '详细地址',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入详细地址',
+      },
    },
    {
      fieldName: 'contactNextTime',
@@ -133,12 +168,16 @@ export function useFormSchema(): VbenFormSchema[] {
        showTime: true,
        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'x',
+        placeholder: '请选择下次联系时间',
      },
    },
    {
      fieldName: 'remark',
      label: '备注',
      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
    },
  ];
 }
@@ -147,7 +186,7 @@ export function useFormSchema(): VbenFormSchema[] {
 export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
-      fieldName: 'name',
+      fieldName: 'customerId',
      label: '客户',
      component: 'ApiSelect',
      componentProps: {
@@ -156,32 +195,54 @@ export function useGridFormSchema(): VbenFormSchema[] {
          label: 'name',
          value: 'id',
        },
+        placeholder: '请选择客户',
+        allowClear: true,
      },
    },
    {
      fieldName: 'name',
      label: '姓名',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人姓名',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'mobile',
      label: '手机号',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'telephone',
      label: '电话',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'wechat',
      label: '微信',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入微信',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'email',
      label: '电子邮箱',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入电子邮箱',
+        allowClear: true,
+      },
    },
  ];
 }
--- a/apps/web-antd/src/views/crm/contact/detail/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/contact/detail/modules/detail-list.vue
@@ -19,9 +19,9 @@ import {
 import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';

-import { useDetailListColumns } from '../data';
 import ListModal from '../../modules/detail-list-modal.vue';
 import Form from '../../modules/form.vue';
+import { useDetailListColumns } from '../data';

 const props = defineProps<{
  bizId: number; // 业务编号