no message

src/locales/lang/zh-CN/routes/invite.ts

@@ -0,0 +1,5 @@
+export default {
+  invite: '电邀管理',
+  index: '线索分配',
+  list: '我的线索'
+}

src/router/menu.ts

@@ -4,9 +4,9 @@ const clueMenu: Menu = {
   path: '/clue',
   name: 'clue',
   component: 'LAYOUT',
-  redirect: '/clue/messageList',
+  redirect: '/clue/cluePool',
   meta: {
-    orderNo: 90013,
+    orderNo: 90003,
     hideChildrenInMenu: false,
     icon: 'ant-design:dribbble-circle-filled',
     title: 'routes.clue.clue',
@@ -40,13 +40,44 @@ const clueMenu: Menu = {
   ],
 }
 
+const inviteMenu: Menu = {
+  path: '/invite',
+  name: 'Invite',
+  component: 'LAYOUT',
+  redirect: '/invite/index',
+  meta: {
+    orderNo: 90004,
+    hideChildrenInMenu: false,
+    icon: 'ant-design:whats-app-outlined',
+    title: 'routes.invite.invite',
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'Index',
+      component: '/invite/index/index.vue',
+      meta: {
+        title: 'routes.invite.index',
+      },
+    },
+    {
+      path: 'list',
+      name: 'List',
+      component: '/invite/list/index.vue',
+      meta: {
+        title: 'routes.invite.list',
+      },
+    },
+  ],
+}
+
 const systemMenu: Menu = {
   path: '/system',
   name: 'System',
   component: 'LAYOUT',
   redirect: '/system/role',
   meta: {
-    orderNo: 90014,
+    orderNo: 91014,
     hideChildrenInMenu: false,
     icon: 'ion:settings-outline',
     title: 'routes.system.system',
@@ -81,6 +112,7 @@ const systemMenu: Menu = {
 
 const appMenuList: Menu[] = [
   clueMenu,
+  inviteMenu,
   systemMenu,
 ]
 // 测试账号：15014242835

src/router/menus/modules/invite.ts

@@ -0,0 +1,20 @@
+import type { MenuModule } from '/@/router/types'
+import { t } from '/@/hooks/web/useI18n'
+const inviteMenu: MenuModule = {
+  orderNo: 90004,
+  menu: {
+    path: '/invite',
+    name: t('routes.invite.invite'),
+    children: [
+      {
+        path: 'index',
+        name: t('routes.invite.index'),
+      },
+      {
+        path: 'list',
+        name: t('routes.invite.list'),
+      },
+    ],
+  },
+}
+export default inviteMenu

src/router/routes/modules/clue.ts

@@ -3,7 +3,7 @@ import type { AppRouteModule } from '/@/router/types'
 import { LAYOUT } from '/@/router/constant'
 import { t } from '/@/hooks/web/useI18n'
 
-const messageRoute: AppRouteModule = {
+const clueRoute: AppRouteModule = {
   path: '/clue',
   name: 'Clue',
   component: LAYOUT,
@@ -20,7 +20,6 @@ const messageRoute: AppRouteModule = {
       name: 'CluePool',
       component: () => import('/src/views/clue/cluePool/index.vue'),
       meta: {
-        // roles: ['/staff/staff'],
         title: t('routes.clue.cluePool'),
       },
     },
@@ -29,7 +28,6 @@ const messageRoute: AppRouteModule = {
       name: 'ClueList',
       component: () => import('/src/views/clue/clueList/index.vue'),
       meta: {
-        // roles: ['/staff/staff'],
         title: t('routes.clue.clueList'),
       },
     },
@@ -46,4 +44,4 @@ const messageRoute: AppRouteModule = {
   ],
 }
 
-export default messageRoute
+export default clueRoute

src/router/routes/modules/invite.ts

@@ -0,0 +1,37 @@
+import type { AppRouteModule } from '/@/router/types'
+
+import { LAYOUT } from '/@/router/constant'
+import { t } from '/@/hooks/web/useI18n'
+
+const inviteRoute: AppRouteModule = {
+  path: '/invite',
+  name: 'Invite',
+  component: LAYOUT,
+  redirect: '/invite/index',
+  meta: {
+    orderNo: 90014,
+    hideChildrenInMenu: false,
+    icon: 'ant-design:whats-app-outlined',
+    title: t('routes.invite.invite'),
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'Index',
+      component: () => import('/src/views/invite/index/index.vue'),
+      meta: {
+        title: t('routes.invite.index'),
+      },
+    },
+    {
+      path: 'list',
+      name: 'List',
+      component: () => import('/src/views/invite/list/index.vue'),
+      meta: {
+        title: t('routes.invite.list'),
+      },
+    },
+  ],
+}
+
+export default inviteRoute

src/views/invite/index/data.ts

@@ -0,0 +1,693 @@
+import { BasicColumn, FormSchema } from '/@/components/Table'
+import moment from 'moment';
+
+export const tableColumns: BasicColumn[] = [
+  { title: '用户信息', dataIndex: 'userinfo', slots: { customRender: 'userinfo' } },
+  { width: 60, title: '性别', dataIndex: 'genderCode', customRender: ({ text }) => { return genderList.find((find) => find.value === text)?.label} },
+  { width: 120, title: '手机号码', dataIndex: 'phone' },
+  { width: 90, title: '渠道来源', dataIndex: 'channelType',
+    customRender: ({ text }) => {
+      return channelList.find((find) => find.value === text)?.label
+    },
+  },
+  { width: 80, title: '状态', dataIndex: 'allocationStatus',
+    customRender: ({ text }) => {
+      return clueStatusList.find((find) => find.value === text)?.label
+    }, 
+  },
+  { width: 100, title: '创建人', dataIndex: 'creatorName' },
+  { width: 100, title: '核验人', dataIndex: 'verifierName' },
+  { width: 90, title: '跟进状态', dataIndex: 'followStatus',
+    customRender: ({ text }) => {
+      return followStatusList.find((find) => find.value === text)?.label
+    },
+  },
+  { width: 150, title: '最后跟进时间', dataIndex: 'finalFollowTime' },
+  { width: 90, title: '跟进结果', dataIndex: 'validStatus',
+    customRender: ({ text }) => {
+      return validStatusList.find((find) => find.value === text)?.label
+    },
+  },
+  { width: 150, title: '录入时间', dataIndex: 'createTime' },
+]
+
+export const tableFormSchema: FormSchema[] = [
+  {
+    field: 'genderCode',
+    label: '用户性别',
+    colProps: { span: 6 },
+    component: 'Select',
+    componentProps: {
+      options: genderList,
+    },
+  },
+  {
+    field: 'channelType',
+    label: '渠道来源',
+    colProps: { span: 6 },
+    component: 'Select',
+    componentProps: {
+      options: channelList,
+    },
+  },
+  // {
+  //   field: 'status',
+  //   label: '状态',
+  //   component: 'Input',
+  //   colProps: { span: 6 },
+  // },
+  {
+    field: 'nickName',
+    label: '用户昵称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'phone',
+    label: '电话号码',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'maritalStatusCode',
+    label: '婚姻状况',
+    colProps: { span: 6 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getMaritalStatusList,
+    },
+  },
+  {
+    field: 'age',
+    label: '年龄',
+    slot: 'age',
+    component: 'InputNumber',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'educationCode',
+    label: '学历',
+    colProps: { span: 6 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getEducationList,
+    },
+  },
+  {
+    field: 'createTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'creatorName',
+    label: '创建人名称',
+    component: 'Input',
+    colProps: { span: 6},
+  },
+  {
+    field: 'followTime',
+    label: '最后跟进时间',
+    component: 'RangePicker',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'verifierName',
+    label: '核验人名称',
+    component: 'Input',
+    colProps: { span: 6},
+  },
+]
+
+import { ref } from 'vue'
+import dayjs, { Dayjs } from 'dayjs'
+import { genderList, channelList, clueStatusList, followStatusList, validStatusList } from '/@/enums/customerEnum'
+import { useAddressData } from '/@/hooks/common'
+import {
+  getIncomeList,
+  getNationList,
+  getEducationList,
+  getFamilyTiesList,
+  getOccupationList,
+  getBodilyFormList,
+  getPropertyPermits,
+  getAccountTypeList,
+  getIdentityTypeList,
+  getMaritalStatusList,
+  getConstellationList,
+  getCarPurchaseSituation,
+} from '/@/api/essentialData'
+
+// 基础信息的额外数据
+export const basicInfoData = ref<any>({})
+// 获取地区数据
+const { addressList, domicilePlaceList } = useAddressData()
+
+// 获取职业列表
+export const occupationList = ref<any>([])
+getOccupationList().then((res) => {
+  handleOccupationList(res)
+  occupationList.value = res || []
+})
+function handleOccupationList(data: any, ifFirst = true) {
+  data?.forEach?.((item: any) => {
+    const { industry, industryCode, occupation, occupationCode, occupationList } = item
+    item.label = ifFirst ? industry : occupation
+    item.value = ifFirst ? industryCode : occupationCode
+    if (occupationList?.length) {
+      item.children = occupationList
+      handleOccupationList(occupationList, false)
+    }
+  })
+}
+
+export const addressName = ref<string[]>([])
+// 基本信息
+export const modalFormSchema: FormSchema[] = [
+  {
+    field: 'genderCode',
+    label: '性别',
+    colProps: { span: 8 },
+    component: 'Select',
+    required: true,
+    componentProps: ({ formModel }) => {
+      return {
+        options: genderList,
+        disabled: !!formModel.name && formModel.name !== -1,
+        onChange: (_: any, v: any) => {
+          basicInfoData.value.genderValue = v?.label
+        },
+      }
+    },
+  },
+  { field: 'age', label: '年龄', component: 'InputNumber', colProps: { span: 8 },},
+  { field: 'nickName', label: '昵称', component: 'Input', colProps: { span: 8 },},
+  { field: 'phone', label: '电话号码', component: 'Input', colProps: { span: 8 },},
+  { field: 'weChatId', label: '微信号', component: 'Input', colProps: { span: 8 }, },
+  { field: 'height', label: '身高(cm)', component: 'InputNumber', colProps: { span: 8 }, },
+  { field: 'weight', label: '体重(kg)', component: 'InputNumber', colProps: { span: 8 }, },
+  // {
+  //   field: 'birthDate',
+  //   label: '出生日期',
+  //   colProps: { span: 8 },
+  //   component: 'DatePicker',
+  //   defaultValue: moment('2001-06-05').format('YYYY-MM-DD 00:00:00'),
+  //   componentProps: ({ formModel }) => {
+  //     return {
+  //       style: { width: '100%' },
+  //       disabled: !!formModel.name && formModel.name !== -1,
+  //       disabledDate: (current: Dayjs) => {
+  //         const date: Dayjs = dayjs().subtract(18, 'year')
+  //         return current && current > date.endOf('year')
+  //       },
+  //     }
+  //   },
+  // },
+  
+  {
+    field: 'educationCode',
+    label: '学历',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getEducationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.education = v?.label
+      },
+    },
+  },
+  {
+    field: 'incomeCode',
+    label: '月收入',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getIncomeList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.income = v?.label
+      },
+    },
+  },
+  {
+    field: 'maritalStatusCode',
+    label: '婚姻状况',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getMaritalStatusList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.maritalStatusName = v?.label
+      },
+    },
+  },
+  {
+    field: 'address',
+    label: '现居住地',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: {
+      options: addressList,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.provinceName = v?.[0]?.label
+        basicInfoData.value.cityName = v?.[1]?.label
+        basicInfoData.value.districtName = v?.[2]?.label
+      },
+    },
+  },
+  {
+    field: 'domicilePlace',
+    label: '户口所在地',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: () => {
+      return {
+        options: domicilePlaceList.value,
+        onChange: (_: any, v: any) => {
+          basicInfoData.value.domicilePlaceProvinceName = v?.[0]?.label
+          basicInfoData.value.domicilePlaceCityName = v?.[1]?.label
+        },
+      }
+    },
+  },
+  {
+    field: 'hometown',
+    label: '家乡',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: () => {
+      return {
+        options: domicilePlaceList.value,
+        onChange: (_: any, v: any) => {
+          basicInfoData.value.hometownProvinceName = v?.[0]?.label
+          basicInfoData.value.hometownCityName = v?.[1]?.label
+        },
+      }
+    },
+  },
+  { field: 'childrenNum', label: '孩子数量', component: 'InputNumber', colProps: { span: 8 }, },
+  {
+    field: 'nationCode',
+    label: '民族',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'cn',
+      valueField: 'id',
+      api: getNationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.nation = v?.label
+      },
+    },
+  },
+  {
+    field: 'bodilyFormCode',
+    label: '体型',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getBodilyFormList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.bodilyForm = v?.label
+      },
+    },
+  },
+  // {
+  //   field: 'accountTypeCode',
+  //   label: '户口',
+  //   colProps: { span: 8 },
+  //   component: 'ApiSelect',
+  //   componentProps: {
+  //     labelField: 'desc',
+  //     api: getAccountTypeList,
+  //     getPopupContainer: () => document.body,
+  //     onChange: (_: any, v: any) => {
+  //       basicInfoData.value.accountTypeName = v?.label
+  //     },
+  //   },
+  // },
+  // {
+  //   field: 'nativePlaceCode',
+  //   label: '籍贯',
+  //   colProps: { span: 8 },
+  //   component: 'Select',
+  //   componentProps: {
+  //     options: domicilePlaceList,
+  //     getPopupContainer: () => document.body,
+  //     onChange: (_: any, v: any) => {
+  //       basicInfoData.value.nativePlaceName = v?.label
+  //     },
+  //   },
+  // },
+  {
+    label: '职业',
+    field: 'occupationList',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: {
+      options: occupationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        const industry = v?.[0] || {}
+        const occupation = v?.[1] || {}
+        basicInfoData.value.industry = industry.label
+        basicInfoData.value.industryCode = industry.value
+        basicInfoData.value.occupation = occupation.label
+        basicInfoData.value.occupationCode = occupation.value
+      },
+    },
+  },
+  {
+    field: 'onlyChild',
+    label: '是否独生子女',
+    colProps: { span: 8 },
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '是', value: 1 },
+        { label: '否', value: 0 },
+      ],
+    },
+  },
+  {
+    field: 'propertyPermitsCode',
+    label: '购房情况',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getPropertyPermits,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.propertyPermits = v?.label
+      },
+    },
+  },
+  {
+    field: 'carPurchaseSituationCode',
+    label: '购车情况',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getCarPurchaseSituation,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.carPurchaseSituation = v?.label
+      },
+    },
+  },
+  {
+    field: 'constellationCode',
+    label: '星座',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getConstellationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.constellation = v?.label
+      },
+    },
+  },
+  {
+    field: 'profilePhoto',
+    component: 'Upload',
+    label: '资料头像',
+    colProps: { span: 8 },
+    slot: 'profilePhoto',
+  },
+  {
+    field: 'describeInfo',
+    label: '个人描述',
+    component: 'InputTextArea',
+    colProps: { span: 16 },
+    componentProps: ({ formModel }) => {
+      return {
+        autoSize: {
+          minRows: 4,
+        },
+        disabled: formModel?.describeAudit,
+      }
+    },
+  },
+]
+
+// 择偶标准的额外数据
+export const demandMarriageMoreData = ref<any>({})
+// 择偶标准
+export const demandMarriageSchema: FormSchema[] = [
+  {
+    field: 'maritalStatusCode',
+    label: '婚姻状况',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getMaritalStatusList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.maritalStatusName = v?.label
+      },
+    },
+  },
+  {
+    field: 'minAge',
+    label: '年龄',
+    colProps: { span: 8 },
+    component: 'InputNumber',
+    slot: 'age',
+  },
+  {
+    field: 'maxAge',
+    label: '年龄',
+    colProps: { span: 8 },
+    component: 'InputNumber',
+    ifShow: false,
+  },
+  {
+    field: 'minHeight',
+    label: '身高',
+    colProps: { span: 8 },
+    component: 'InputNumber',
+    slot: 'height',
+  },
+  {
+    field: 'maxHeight',
+    label: '身高',
+    colProps: { span: 8 },
+    component: 'InputNumber',
+    ifShow: false,
+  },
+  {
+    field: 'educationCode',
+    label: '学历',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getEducationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.education = v?.label
+      },
+    },
+  },
+  {
+    field: 'minimumIncome',
+    label: '月收入',
+    colProps: { span: 8 },
+    component: 'InputNumber',
+    slot: 'income',
+  },
+  {
+    field: 'maximumIncome',
+    label: '月收入',
+    colProps: { span: 8 },
+    component: 'InputNumber',
+    ifShow: false,
+  },
+  { field: 'childrenNum', label: '孩子数量', component: 'InputNumber', colProps: { span: 8 }, },
+  {
+    field: 'address',
+    label: '现居住地',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: {
+      options: addressList,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.provinceName = v?.[0]?.label
+        demandMarriageMoreData.value.cityName = v?.[1]?.label
+        demandMarriageMoreData.value.districtName = v?.[2]?.label
+      },
+    },
+  },
+  {
+    field: 'domicilePlace',
+    label: '户口所在地',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: {
+      options: domicilePlaceList,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.domicilePlaceProvinceName = v?.[0]?.label
+        demandMarriageMoreData.value.domicilePlaceCityName = v?.[1]?.label
+      },
+    },
+  },
+  {
+    field: 'hometown',
+    label: '家乡',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: () => {
+      return {
+        options: domicilePlaceList.value,
+        onChange: (_: any, v: any) => {
+          demandMarriageMoreData.value.hometownProvinceName = v?.[0]?.label
+          demandMarriageMoreData.value.hometownCityName = v?.[1]?.label
+        },
+      }
+    },
+  },
+  {
+    field: 'nationCode',
+    label: '民族',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'cn',
+      valueField: 'id',
+      api: getNationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.nation = v?.label
+      },
+    },
+  },
+  // {
+  //   field: 'bodilyFormCode',
+  //   label: '体型',
+  //   colProps: { span: 8 },
+  //   component: 'ApiSelect',
+  //   componentProps: {
+  //     labelField: 'desc',
+  //     api: getBodilyFormList,
+  //     getPopupContainer: () => document.body,
+  //     onChange: (_: any, v: any) => {
+  //       demandMarriageMoreData.value.bodilyForm = v?.label
+  //     },
+  //   },
+  // },
+  // {
+  //   field: 'accountTypeCode',
+  //   label: '户口',
+  //   colProps: { span: 8 },
+  //   component: 'ApiSelect',
+  //   componentProps: {
+  //     labelField: 'desc',
+  //     api: getAccountTypeList,
+  //     getPopupContainer: () => document.body,
+  //     onChange: (_: any, v: any) => {
+  //       demandMarriageMoreData.value.accountTypeName = v?.label
+  //     },
+  //   },
+  // },
+  {
+    field: 'nativePlaceCode',
+    label: '籍贯',
+    colProps: { span: 8 },
+    component: 'Select',
+    componentProps: {
+      options: domicilePlaceList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.nativePlaceName = v?.label
+      },
+    },
+  },
+  {
+    label: '职业',
+    field: 'occupationList',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: {
+      options: occupationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        const industry = v?.[0] || {}
+        const occupation = v?.[1] || {}
+        demandMarriageMoreData.value.industry = industry.label
+        demandMarriageMoreData.value.industryCode = industry.value
+        demandMarriageMoreData.value.occupation = occupation.label
+        demandMarriageMoreData.value.occupationCode = occupation.value
+      },
+    },
+  },
+  {
+    field: 'onlyChild',
+    label: '是否独生子女',
+    colProps: { span: 8 },
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '是', value: 1 },
+        { label: '否', value: 0 },
+      ],
+    },
+  },
+  {
+    field: 'propertyPermitsCode',
+    label: '购房情况',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getPropertyPermits,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.propertyPermits = v?.label
+      },
+    },
+  },
+  {
+    field: 'carPurchaseSituationCode',
+    label: '购车情况',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getCarPurchaseSituation,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.carPurchaseSituation = v?.label
+      },
+    },
+  },
+  
+  {
+    field: 'constellationCode',
+    label: '星座',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getConstellationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.constellation = v?.label
+      },
+    },
+  },
+]

src/views/invite/index/index.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="order-list">
+    <BasicTable @register="registerTable">
+      <template #form-age>
+        <div class="flex-row">
+          <InputNumber placeholder="请输入" style="width: 46%" v-model:value="ageModel.minAge" />
+          <div style="width: 8%" class="flex-row-center-center">-</div>
+          <InputNumber placeholder="请输入" style="width: 46%" v-model:value="ageModel.maxAge" />
+        </div>
+      </template>
+      <template #toolbar>
+        <div style="width: 100%; padding: 2px" class="flex-row-center-space">
+          <RadioGroup button-style="solid" v-model:value="radioVal" @change="handleRadioChange">
+            <RadioButton v-for="item in clueStatusList" :key="item.value" :value="item.value">{{item.label}}</RadioButton>
+          </RadioGroup>
+          <div class="flex-row-center-start">
+            <Popconfirm placement="bottom" icon="分配线索" :disabled="datingClueIdList.length == 0" @confirm="allocateList(null)">
+              <template #title>
+                <div class="flex-row-center-start" style="padding: 8px 8px 8px 0px;border-bottom: 1px solid #ddd;" v-for="item in memberList" :key="item.userId">
+                  <Checkbox :checked="verifier == item.userId" @change="e => onCheckChange(e, item)">
+                    <span style="color: #333;font-weight: bold;margin-left: 4px;">{{item.realName}}</span>
+                    <span style="color: #666;margin-left: 4px;">({{item.phone}})</span>
+                  </Checkbox>
+                </div>
+              </template>
+              <Button type="primary" danger :disabled="datingClueIdList.length == 0">分配</Button>
+            </Popconfirm>
+            <Button style="margin-left: 16px;" @click="handleAdd(true)">批量导入</Button>
+            <Button :type="'primary'" style="margin-left: 16px;" @click="handleAdd(false)">新增</Button>
+          </div>
+        </div>
+      </template>
+      <template #userinfo="{ text, record }">
+        <div class="flex-row">
+          <Image style="width: 40px;height: 40px;" :src="record.profilePhoto || 'https://dating-agency-prod.oss-cn-shenzhen.aliyuncs.com/827036501B11.png'" />
+          <div class="flex-col" style="margin-left: 8px;">
+            <div class="flex-row">
+              <span class="single-line" style="font-size: 14px;color: #333;font-weight: bold;max-width: 160px;">{{record.nickName}}</span>
+              <!-- <span class="single-line" style="font-size: 13px;color: #666;margin: 0 12px;">(ID：{{record.id}})</span> -->
+            </div>
+            <div class="flex-row">
+              <span style="font-size: 13px;color: #666;" v-if="record.age">{{record.age}}岁</span>
+              <span style="font-size: 13px;color: #666;margin-left: 12px;">{{educationList.find((find) => find.value === record.educationCode)?.label}}</span>
+              <span style="font-size: 13px;color: #666;margin-left: 12px;">{{maritalList.find((find) => find.value === record.maritalStatusCode)?.label}}</span>
+              <span style="font-size: 13px;color: #666;margin-left: 12px;" v-if="record.occupation">{{record.occupation}}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #action="{ record }">
+        <!-- <TableAction
+          :actions="[
+            {
+              label: '详情',
+              onClick: toDetail.bind(null, record),
+            },
+          ]"
+        /> -->
+        <div class="flex-row-center-start">
+          <Button type="link" @click="toDetail(record)">详情</Button>
+          <span style="color: #999;">|</span>
+          <Popconfirm placement="topRight" :icon="record.allocationStatus == 1 ? '分配' : '重新分配'" @confirm="allocateList(record.id)">
+            <template #title>
+              <div class="flex-row-center-start" style="padding: 8px 8px 8px 0px;border-bottom: 1px solid #ddd;" v-for="item in memberList" :key="item.userId">
+                <Checkbox :checked="verifier == item.userId" @change="e => onCheckChange(e, item)">
+                  <span style="color: #333;font-weight: bold;margin-left: 4px;">{{item.realName}}</span>
+                  <span style="color: #666;margin-left: 4px;">({{item.phone}})</span>
+                </Checkbox>
+              </div>
+            </template>
+            <Button type="link" danger >{{record.allocationStatus == 1 ? '分配' : '重新分配'}}</Button>
+          </Popconfirm>
+        </div>
+      </template>
+    </BasicTable>
+    <ClueModal @register="registerModal" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { Radio } from 'ant-design-vue'
+
+  export default {
+    name: 'CluePool',
+    components: { RadioGroup: Radio.Group, RadioButton: Radio.Button },
+  }
+</script>
+<script setup lang="ts">
+  import moment from 'moment/moment'
+  import { onMounted, reactive, ref } from 'vue'
+  import { Card, Image, Button, InputNumber, Popconfirm, Checkbox } from 'ant-design-vue'
+  import { useRouter } from 'vue-router'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { tableColumns, tableFormSchema } from './data'
+  import { useModal } from '/@/components/Modal'
+  import { BasicTable, useTable, TableAction } from '/@/components/Table'
+  import ClueModal from './modal.vue'
+  import { getCluePage, allocateCluing } from '/@/api/clue'
+  import { pageOrganizationMember } from '/@/api/staff/staff'
+  import { educationList, maritalList } from '/@/enums/customerEnum'
+
+  const radioVal = ref<any>('')
+  const verifier = ref<any>('')
+
+  const clueStatusList = [
+    { label: '待分配', value: 1 },
+    { label: '跟进中', value: 2 },
+    { label: '公海线索', value: 3 },
+    { label: '全部', value: '' },
+  ]
+
+  const ageModel = reactive({
+    minAge: '',
+    maxAge: '',
+  })
+
+  const memberList = ref<any[]>([]);
+
+  onMounted(async () => {
+    const result = await pageOrganizationMember({})
+    memberList.value = result.items
+  })
+
+  const [registerTable, { reload, setPagination, getSelectRowKeys, clearSelectedRowKeys }] = useTable({
+    bordered: true,
+    useSearchForm: true,
+    columns: tableColumns,
+    showIndexColumn: true,
+    showTableSetting: false,
+    api: getCluePage,
+    rowKey: 'id',
+    rowSelection: {
+      type: 'checkbox',
+      onChange,
+      getCheckboxProps(record: Recordable) {
+        // Demo: 第一行（id为0）的选择框禁用
+        return { disabled: record.allocationStatus !== 1 };
+      },
+    },
+    formConfig: {
+      labelWidth: 120,
+      schemas: tableFormSchema,
+    },
+    beforeFetch: (arg) => {
+      const { createTime, followTime } = arg
+      if (createTime) {
+        arg.creatTimeFrom = moment(createTime[0]).format('YYYY-MM-DD 00:00:00')
+        arg.creatTimeTo = moment(createTime[1]).format('YYYY-MM-DD 23:59:59')
+        delete arg.createTime
+      }
+      if (followTime) {
+        arg.finalFollowTimeFrom = moment(followTime[0]).format('YYYY-MM-DD 00:00:00')
+        arg.finalFollowTimeTo = moment(followTime[1]).format('YYYY-MM-DD 23:59:59')
+        delete arg.followTime
+      }
+      arg.minimumAge = ageModel.minAge
+      arg.maximumAge = ageModel.maxAge
+      arg.allocationStatus = radioVal.value
+    },
+    actionColumn: {
+      width: 160,
+      title: '操作',
+      fixed: 'right',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  })
+
+  function handleRadioChange() {
+    setPagination({ current: 1 })
+    datingClueIdList.value = []
+    reload()
+  }
+
+  const [registerModal, { openModal, closeModal }] = useModal()
+  function handleAdd(excel) {
+    openModal(true, {ifUpdate: excel,})
+  }
+  // 操作成功
+  function handleSuccess() {
+    closeModal()
+    reload()
+  }
+  const { createMessage } = useMessage()
+  const router = useRouter()
+  function toDetail(record: any) {
+    const { id } = record
+    router.push({
+      query: { id },
+      path: '/clue/customer',
+    })
+  }
+  const datingClueIdList = ref<string[]>([]);
+  function onChange(selectedRowKeys) {
+    datingClueIdList.value = selectedRowKeys
+  }
+  function onCheckChange(e, item){
+    if(e.target.checked){
+      verifier.value = item.userId
+    }
+  }
+  async function allocateList(id = null){
+    if(!verifier.value){
+      createMessage.warning('请选择分配人')
+      return
+    }
+    var datingClueIdList: string[] = []
+    if(id){
+      datingClueIdList = [id]
+    } else {
+      datingClueIdList = getSelectRowKeys()
+    }
+    try {
+      await allocateCluing({verifier: verifier.value, datingClueIdList})
+      createMessage.success(`分配成功`)
+      clearSelectedRowKeys()
+    } finally {
+      reload()
+    }
+  }
+</script>
+<style scoped lang="less">
+.single-line {
+  overflow: hidden; /* 超出部分隐藏 */
+  white-space: nowrap; /* 文本不换行 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
+</style>

src/views/invite/index/modal.vue

@@ -0,0 +1,211 @@
+<template>
+  <BasicModal v-bind="$attrs" :width="960" @ok="handleOk" @register="registerModal">
+
+    <template v-if="!ifUpdate" #title>
+      <span>新增线索</span>
+    </template>
+
+    <div v-if="ifUpdate">
+      <Result title="请将模板Excel文件导入" v-if="tableListRef.length == 0">
+        <template #icon>
+          <Icon icon="ant-design:cloud-upload-outlined" size="150px" color="#d6d6d6"/>
+        </template>
+        <template #extra>
+          <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
+            <Button>导入Excel</Button>
+          </ImpExcel>
+        </template>
+      </Result>
+      <BasicTable v-for="(table, index) in tableListRef"
+        :key="index"
+        :columns="table.columns"
+        :canResize="false"
+        :dataSource="table.dataSource"
+        :pagination="{ pageSize: 10 }"
+      />
+    </div>
+
+    <div class="flex-col" v-else>
+      <Tabs tab-position="left" v-model:activeKey="activeKey2" :animated="false">
+        <TabPane key="1" tab="个人资料">
+          <BasicForm @register="registerForm" style="padding: 16px 48px 0px 0px;" >
+            <template #profilePhoto="{ model, field }">
+              <CropperAvatar :value="model[field]" @change="uploadAvatarAfter"/>
+            </template>
+          </BasicForm>
+        </TabPane>
+        <TabPane key="2" tab="择偶要求">
+          <BasicForm @register="registerForm3" style="padding: 16px 48px 0px 0px;">
+            <template #age="{ model }">
+              <div class="flex-row-center-start">
+                <InputNumber placeholder="请输入" :min="0" v-model:value="model['minAge']" />
+                <span style="margin: 0 5px">-</span>
+                <InputNumber placeholder="请输入" :min="0" v-model:value="model['maxAge']" />
+              </div>
+            </template>
+            <template #height="{ model }">
+              <div class="flex-row-center-start">
+                <InputNumber placeholder="请输入" :min="0" v-model:value="model['minHeight']" />
+                <span style="margin: 0 5px">-</span>
+                <InputNumber placeholder="请输入" :min="0" v-model:value="model['maxHeight']" />
+              </div>
+            </template>
+            <template #income="{ model }">
+              <div class="flex-row-center-start">
+                <InputNumber placeholder="请输入" :min="0" v-model:value="model['minimumIncome']" />
+                <span style="margin: 0 5px">-</span>
+                <InputNumber placeholder="请输入" :min="0" v-model:value="model['maximumIncome']" />
+              </div>
+            </template>
+          </BasicForm>
+        </TabPane>
+      </Tabs>
+    </div>
+
+    <template v-if="ifUpdate" #footer>
+      <div class="flex-row-center-space">
+        <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
+          <Button type="primary">导入Excel</Button>
+        </ImpExcel>
+        <div class="flex-row-center-start">
+          <Button @click="close">取消</Button>
+          <Button type="primary" @click="handleOk">确定</Button>
+        </div>
+      </div>
+    </template>
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+  import { ref, unref } from 'vue'
+  import { Tabs, TabPane, Button, Result, InputNumber } from 'ant-design-vue'
+  import Icon from '/@/components/Icon'
+  import { modalFormSchema, basicInfoData, demandMarriageSchema, demandMarriageMoreData } from './data'
+  import { ImpExcel, ExcelData } from '/@/components/Excel';
+  import { BasicTable, BasicColumn } from '/@/components/Table'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { BasicForm, useForm } from '/@/components/Form'
+  import { BasicModal, useModalInner } from '/@/components/Modal'
+  import { CropperAvatar } from '/@/components/Cropper';
+  import { createClueRecord, importClueRecord } from '/@/api/clue'
+
+  const activeKey2 = ref<string>('1')
+
+  const [registerForm, { setFieldsValue, resetFields, validate, getFieldsValue }] =
+    useForm({
+      labelWidth: 108,
+      schemas: modalFormSchema,
+      baseColProps: { span: 22 },
+      showActionButtonGroup: false,
+    })
+
+  const ifUpdate = ref<boolean>(false)
+  const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+    ifUpdate.value = !!data.ifUpdate
+    if(ifUpdate.value){
+      tableListRef.value = [];
+    } else {
+      demandMarriageMoreData.value = {}
+      basicInfoData.value = {}
+      activeKey2.value = '1'
+      await resetFields()
+      await resetFields3()
+    }
+    setModalProps({
+      minHeight: 50,
+      confirmLoading: false,
+      title: ifUpdate.value ? '导入线索' : '新增线索',
+    })
+  })
+
+  // 择偶标准表单配置
+  const [registerForm3, { getFieldsValue: getFieldsValue3, resetFields: resetFields3 }] =
+    useForm({
+      labelWidth: 100,
+      schemas: demandMarriageSchema,
+      baseColProps: { span: 22 },
+      showActionButtonGroup: false,
+    })
+
+  function close(){
+    closeModal()
+  }
+
+  function uploadAvatarAfter(value) {
+    //修改表单的值
+    setFieldsValue({
+      profilePhoto: value,
+    });
+  }
+
+  const { createMessage } = useMessage()
+  const emits = defineEmits(['success'])
+  async function handleOk() {
+    try {
+      if(ifUpdate.value){
+        await importClueRecord({keyList: tableListRef.value[0].header, dataList: tableListRef.value[0].dataSource})
+        createMessage.success(`导入成功！`)
+        emits('success')
+        return
+      }
+      await validate()
+      const values: any = getFieldsValue()
+      // console.log({...values, ...basicInfoData.value})
+      
+      setModalProps({ confirmLoading: true })
+      const { domicilePlace, address } = values || {}
+
+      const demandInfo: any = getFieldsValue3()
+      if(demandInfo){
+        const address1 = demandInfo.address
+        demandInfo.cityCode =  address1?.[1]
+        demandInfo.provinceCode =  address1?.[0]
+        demandInfo.districtCode =  address1?.[2]
+        const domicilePlace1 = demandInfo.domicilePlace
+        demandInfo.domicilePlaceCityCode =  domicilePlace1?.[1]
+        demandInfo.domicilePlaceProvinceCode =  domicilePlace1?.[0]
+      }
+      
+      const datingClueDemand = { ...demandInfo, ...demandMarriageMoreData.value }
+
+      const param = {
+        ...values, 
+        channelType: 1,
+        datingClueDemand,
+        cityCode: address?.[1],
+        provinceCode: address?.[0],
+        districtCode: address?.[2],
+        domicilePlaceCityCode: domicilePlace?.[1],
+        domicilePlaceProvinceCode: domicilePlace?.[0]
+      }
+      await createClueRecord(param)
+      createMessage.success(`新增成功！`)
+      emits('success')
+    } finally {
+      setModalProps({ confirmLoading: false })
+    }
+  }
+
+  const tableListRef = ref<{ title: string; columns?: any[]; dataSource?: any[]; header:any[];}[]>([]);
+
+  function loadDataSuccess(excelDataList: ExcelData[]) {
+    tableListRef.value = [];
+    console.log(excelDataList);
+    for (const excelData of excelDataList) {
+      const { header, results, meta: { sheetName }, } = excelData;
+      const columns: BasicColumn[] = [];
+      for (const title of header) {
+        columns.push({ title, dataIndex: title });
+      }
+      tableListRef.value.push({ title: sheetName, dataSource: results, columns, header });
+    }
+  }
+</script>
+
+<style scoped lang="less">
+::v-deep .ant-input-number {
+    min-width: 60px;
+    width: 100% !important;
+    max-width: 100%;
+}
+</style>

src/views/invite/list/data.ts

@@ -0,0 +1,693 @@
+import { BasicColumn, FormSchema } from '/@/components/Table'
+import moment from 'moment';
+
+export const tableColumns: BasicColumn[] = [
+  { title: '用户信息', dataIndex: 'userinfo', slots: { customRender: 'userinfo' } },
+  { width: 60, title: '性别', dataIndex: 'genderCode', customRender: ({ text }) => { return genderList.find((find) => find.value === text)?.label} },
+  { width: 120, title: '手机号码', dataIndex: 'phone' },
+  { width: 90, title: '渠道来源', dataIndex: 'channelType',
+    customRender: ({ text }) => {
+      return channelList.find((find) => find.value === text)?.label
+    },
+  },
+  { width: 80, title: '状态', dataIndex: 'allocationStatus',
+    customRender: ({ text }) => {
+      return clueStatusList.find((find) => find.value === text)?.label
+    }, 
+  },
+  { width: 100, title: '创建人', dataIndex: 'creatorName' },
+  { width: 100, title: '核验人', dataIndex: 'verifierName' },
+  { width: 90, title: '跟进状态', dataIndex: 'followStatus',
+    customRender: ({ text }) => {
+      return followStatusList.find((find) => find.value === text)?.label
+    },
+  },
+  { width: 150, title: '最后跟进时间', dataIndex: 'finalFollowTime' },
+  { width: 90, title: '跟进结果', dataIndex: 'validStatus',
+    customRender: ({ text }) => {
+      return validStatusList.find((find) => find.value === text)?.label
+    },
+  },
+  { width: 150, title: '录入时间', dataIndex: 'createTime' },
+]
+
+export const tableFormSchema: FormSchema[] = [
+  {
+    field: 'genderCode',
+    label: '用户性别',
+    colProps: { span: 6 },
+    component: 'Select',
+    componentProps: {
+      options: genderList,
+    },
+  },
+  {
+    field: 'channelType',
+    label: '渠道来源',
+    colProps: { span: 6 },
+    component: 'Select',
+    componentProps: {
+      options: channelList,
+    },
+  },
+  // {
+  //   field: 'status',
+  //   label: '状态',
+  //   component: 'Input',
+  //   colProps: { span: 6 },
+  // },
+  {
+    field: 'nickName',
+    label: '用户昵称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'phone',
+    label: '电话号码',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'maritalStatusCode',
+    label: '婚姻状况',
+    colProps: { span: 6 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getMaritalStatusList,
+    },
+  },
+  {
+    field: 'age',
+    label: '年龄',
+    slot: 'age',
+    component: 'InputNumber',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'educationCode',
+    label: '学历',
+    colProps: { span: 6 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getEducationList,
+    },
+  },
+  {
+    field: 'createTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'creatorName',
+    label: '创建人名称',
+    component: 'Input',
+    colProps: { span: 6},
+  },
+  {
+    field: 'followTime',
+    label: '最后跟进时间',
+    component: 'RangePicker',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'verifierName',
+    label: '核验人名称',
+    component: 'Input',
+    colProps: { span: 6},
+  },
+]
+
+import { ref } from 'vue'
+import dayjs, { Dayjs } from 'dayjs'
+import { genderList, channelList, clueStatusList, followStatusList, validStatusList } from '/@/enums/customerEnum'
+import { useAddressData } from '/@/hooks/common'
+import {
+  getIncomeList,
+  getNationList,
+  getEducationList,
+  getFamilyTiesList,
+  getOccupationList,
+  getBodilyFormList,
+  getPropertyPermits,
+  getAccountTypeList,
+  getIdentityTypeList,
+  getMaritalStatusList,
+  getConstellationList,
+  getCarPurchaseSituation,
+} from '/@/api/essentialData'
+
+// 基础信息的额外数据
+export const basicInfoData = ref<any>({})
+// 获取地区数据
+const { addressList, domicilePlaceList } = useAddressData()
+
+// 获取职业列表
+export const occupationList = ref<any>([])
+getOccupationList().then((res) => {
+  handleOccupationList(res)
+  occupationList.value = res || []
+})
+function handleOccupationList(data: any, ifFirst = true) {
+  data?.forEach?.((item: any) => {
+    const { industry, industryCode, occupation, occupationCode, occupationList } = item
+    item.label = ifFirst ? industry : occupation
+    item.value = ifFirst ? industryCode : occupationCode
+    if (occupationList?.length) {
+      item.children = occupationList
+      handleOccupationList(occupationList, false)
+    }
+  })
+}
+
+export const addressName = ref<string[]>([])
+// 基本信息
+export const modalFormSchema: FormSchema[] = [
+  {
+    field: 'genderCode',
+    label: '性别',
+    colProps: { span: 8 },
+    component: 'Select',
+    required: true,
+    componentProps: ({ formModel }) => {
+      return {
+        options: genderList,
+        disabled: !!formModel.name && formModel.name !== -1,
+        onChange: (_: any, v: any) => {
+          basicInfoData.value.genderValue = v?.label
+        },
+      }
+    },
+  },
+  { field: 'age', label: '年龄', component: 'InputNumber', colProps: { span: 8 },},
+  { field: 'nickName', label: '昵称', component: 'Input', colProps: { span: 8 },},
+  { field: 'phone', label: '电话号码', component: 'Input', colProps: { span: 8 },},
+  { field: 'weChatId', label: '微信号', component: 'Input', colProps: { span: 8 }, },
+  { field: 'height', label: '身高(cm)', component: 'InputNumber', colProps: { span: 8 }, },
+  { field: 'weight', label: '体重(kg)', component: 'InputNumber', colProps: { span: 8 }, },
+  // {
+  //   field: 'birthDate',
+  //   label: '出生日期',
+  //   colProps: { span: 8 },
+  //   component: 'DatePicker',
+  //   defaultValue: moment('2001-06-05').format('YYYY-MM-DD 00:00:00'),
+  //   componentProps: ({ formModel }) => {
+  //     return {
+  //       style: { width: '100%' },
+  //       disabled: !!formModel.name && formModel.name !== -1,
+  //       disabledDate: (current: Dayjs) => {
+  //         const date: Dayjs = dayjs().subtract(18, 'year')
+  //         return current && current > date.endOf('year')
+  //       },
+  //     }
+  //   },
+  // },
+  
+  {
+    field: 'educationCode',
+    label: '学历',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getEducationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.education = v?.label
+      },
+    },
+  },
+  {
+    field: 'incomeCode',
+    label: '月收入',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getIncomeList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.income = v?.label
+      },
+    },
+  },
+  {
+    field: 'maritalStatusCode',
+    label: '婚姻状况',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getMaritalStatusList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.maritalStatusName = v?.label
+      },
+    },
+  },
+  {
+    field: 'address',
+    label: '现居住地',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: {
+      options: addressList,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.provinceName = v?.[0]?.label
+        basicInfoData.value.cityName = v?.[1]?.label
+        basicInfoData.value.districtName = v?.[2]?.label
+      },
+    },
+  },
+  {
+    field: 'domicilePlace',
+    label: '户口所在地',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: () => {
+      return {
+        options: domicilePlaceList.value,
+        onChange: (_: any, v: any) => {
+          basicInfoData.value.domicilePlaceProvinceName = v?.[0]?.label
+          basicInfoData.value.domicilePlaceCityName = v?.[1]?.label
+        },
+      }
+    },
+  },
+  {
+    field: 'hometown',
+    label: '家乡',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: () => {
+      return {
+        options: domicilePlaceList.value,
+        onChange: (_: any, v: any) => {
+          basicInfoData.value.hometownProvinceName = v?.[0]?.label
+          basicInfoData.value.hometownCityName = v?.[1]?.label
+        },
+      }
+    },
+  },
+  { field: 'childrenNum', label: '孩子数量', component: 'InputNumber', colProps: { span: 8 }, },
+  {
+    field: 'nationCode',
+    label: '民族',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'cn',
+      valueField: 'id',
+      api: getNationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.nation = v?.label
+      },
+    },
+  },
+  {
+    field: 'bodilyFormCode',
+    label: '体型',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getBodilyFormList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.bodilyForm = v?.label
+      },
+    },
+  },
+  // {
+  //   field: 'accountTypeCode',
+  //   label: '户口',
+  //   colProps: { span: 8 },
+  //   component: 'ApiSelect',
+  //   componentProps: {
+  //     labelField: 'desc',
+  //     api: getAccountTypeList,
+  //     getPopupContainer: () => document.body,
+  //     onChange: (_: any, v: any) => {
+  //       basicInfoData.value.accountTypeName = v?.label
+  //     },
+  //   },
+  // },
+  // {
+  //   field: 'nativePlaceCode',
+  //   label: '籍贯',
+  //   colProps: { span: 8 },
+  //   component: 'Select',
+  //   componentProps: {
+  //     options: domicilePlaceList,
+  //     getPopupContainer: () => document.body,
+  //     onChange: (_: any, v: any) => {
+  //       basicInfoData.value.nativePlaceName = v?.label
+  //     },
+  //   },
+  // },
+  {
+    label: '职业',
+    field: 'occupationList',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: {
+      options: occupationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        const industry = v?.[0] || {}
+        const occupation = v?.[1] || {}
+        basicInfoData.value.industry = industry.label
+        basicInfoData.value.industryCode = industry.value
+        basicInfoData.value.occupation = occupation.label
+        basicInfoData.value.occupationCode = occupation.value
+      },
+    },
+  },
+  {
+    field: 'onlyChild',
+    label: '是否独生子女',
+    colProps: { span: 8 },
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '是', value: 1 },
+        { label: '否', value: 0 },
+      ],
+    },
+  },
+  {
+    field: 'propertyPermitsCode',
+    label: '购房情况',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getPropertyPermits,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.propertyPermits = v?.label
+      },
+    },
+  },
+  {
+    field: 'carPurchaseSituationCode',
+    label: '购车情况',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getCarPurchaseSituation,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.carPurchaseSituation = v?.label
+      },
+    },
+  },
+  {
+    field: 'constellationCode',
+    label: '星座',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getConstellationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        basicInfoData.value.constellation = v?.label
+      },
+    },
+  },
+  {
+    field: 'profilePhoto',
+    component: 'Upload',
+    label: '资料头像',
+    colProps: { span: 8 },
+    slot: 'profilePhoto',
+  },
+  {
+    field: 'describeInfo',
+    label: '个人描述',
+    component: 'InputTextArea',
+    colProps: { span: 16 },
+    componentProps: ({ formModel }) => {
+      return {
+        autoSize: {
+          minRows: 4,
+        },
+        disabled: formModel?.describeAudit,
+      }
+    },
+  },
+]
+
+// 择偶标准的额外数据
+export const demandMarriageMoreData = ref<any>({})
+// 择偶标准
+export const demandMarriageSchema: FormSchema[] = [
+  {
+    field: 'maritalStatusCode',
+    label: '婚姻状况',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getMaritalStatusList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.maritalStatusName = v?.label
+      },
+    },
+  },
+  {
+    field: 'minAge',
+    label: '年龄',
+    colProps: { span: 8 },
+    component: 'InputNumber',
+    slot: 'age',
+  },
+  {
+    field: 'maxAge',
+    label: '年龄',
+    colProps: { span: 8 },
+    component: 'InputNumber',
+    ifShow: false,
+  },
+  {
+    field: 'minHeight',
+    label: '身高',
+    colProps: { span: 8 },
+    component: 'InputNumber',
+    slot: 'height',
+  },
+  {
+    field: 'maxHeight',
+    label: '身高',
+    colProps: { span: 8 },
+    component: 'InputNumber',
+    ifShow: false,
+  },
+  {
+    field: 'educationCode',
+    label: '学历',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getEducationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.education = v?.label
+      },
+    },
+  },
+  {
+    field: 'minimumIncome',
+    label: '月收入',
+    colProps: { span: 8 },
+    component: 'InputNumber',
+    slot: 'income',
+  },
+  {
+    field: 'maximumIncome',
+    label: '月收入',
+    colProps: { span: 8 },
+    component: 'InputNumber',
+    ifShow: false,
+  },
+  { field: 'childrenNum', label: '孩子数量', component: 'InputNumber', colProps: { span: 8 }, },
+  {
+    field: 'address',
+    label: '现居住地',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: {
+      options: addressList,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.provinceName = v?.[0]?.label
+        demandMarriageMoreData.value.cityName = v?.[1]?.label
+        demandMarriageMoreData.value.districtName = v?.[2]?.label
+      },
+    },
+  },
+  {
+    field: 'domicilePlace',
+    label: '户口所在地',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: {
+      options: domicilePlaceList,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.domicilePlaceProvinceName = v?.[0]?.label
+        demandMarriageMoreData.value.domicilePlaceCityName = v?.[1]?.label
+      },
+    },
+  },
+  {
+    field: 'hometown',
+    label: '家乡',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: () => {
+      return {
+        options: domicilePlaceList.value,
+        onChange: (_: any, v: any) => {
+          demandMarriageMoreData.value.hometownProvinceName = v?.[0]?.label
+          demandMarriageMoreData.value.hometownCityName = v?.[1]?.label
+        },
+      }
+    },
+  },
+  {
+    field: 'nationCode',
+    label: '民族',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'cn',
+      valueField: 'id',
+      api: getNationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.nation = v?.label
+      },
+    },
+  },
+  // {
+  //   field: 'bodilyFormCode',
+  //   label: '体型',
+  //   colProps: { span: 8 },
+  //   component: 'ApiSelect',
+  //   componentProps: {
+  //     labelField: 'desc',
+  //     api: getBodilyFormList,
+  //     getPopupContainer: () => document.body,
+  //     onChange: (_: any, v: any) => {
+  //       demandMarriageMoreData.value.bodilyForm = v?.label
+  //     },
+  //   },
+  // },
+  // {
+  //   field: 'accountTypeCode',
+  //   label: '户口',
+  //   colProps: { span: 8 },
+  //   component: 'ApiSelect',
+  //   componentProps: {
+  //     labelField: 'desc',
+  //     api: getAccountTypeList,
+  //     getPopupContainer: () => document.body,
+  //     onChange: (_: any, v: any) => {
+  //       demandMarriageMoreData.value.accountTypeName = v?.label
+  //     },
+  //   },
+  // },
+  {
+    field: 'nativePlaceCode',
+    label: '籍贯',
+    colProps: { span: 8 },
+    component: 'Select',
+    componentProps: {
+      options: domicilePlaceList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.nativePlaceName = v?.label
+      },
+    },
+  },
+  {
+    label: '职业',
+    field: 'occupationList',
+    colProps: { span: 8 },
+    component: 'Cascader',
+    componentProps: {
+      options: occupationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        const industry = v?.[0] || {}
+        const occupation = v?.[1] || {}
+        demandMarriageMoreData.value.industry = industry.label
+        demandMarriageMoreData.value.industryCode = industry.value
+        demandMarriageMoreData.value.occupation = occupation.label
+        demandMarriageMoreData.value.occupationCode = occupation.value
+      },
+    },
+  },
+  {
+    field: 'onlyChild',
+    label: '是否独生子女',
+    colProps: { span: 8 },
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '是', value: 1 },
+        { label: '否', value: 0 },
+      ],
+    },
+  },
+  {
+    field: 'propertyPermitsCode',
+    label: '购房情况',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getPropertyPermits,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.propertyPermits = v?.label
+      },
+    },
+  },
+  {
+    field: 'carPurchaseSituationCode',
+    label: '购车情况',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getCarPurchaseSituation,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.carPurchaseSituation = v?.label
+      },
+    },
+  },
+  
+  {
+    field: 'constellationCode',
+    label: '星座',
+    colProps: { span: 8 },
+    component: 'ApiSelect',
+    componentProps: {
+      labelField: 'desc',
+      api: getConstellationList,
+      getPopupContainer: () => document.body,
+      onChange: (_: any, v: any) => {
+        demandMarriageMoreData.value.constellation = v?.label
+      },
+    },
+  },
+]

src/views/invite/list/index.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="order-list">
+    <BasicTable @register="registerTable">
+      <template #form-age>
+        <div class="flex-row">
+          <InputNumber placeholder="请输入" style="width: 46%" v-model:value="ageModel.minAge" />
+          <div style="width: 8%" class="flex-row-center-center">-</div>
+          <InputNumber placeholder="请输入" style="width: 46%" v-model:value="ageModel.maxAge" />
+        </div>
+      </template>
+      <template #toolbar>
+        <div style="width: 100%; padding: 2px" class="flex-row-center-space">
+          <RadioGroup button-style="solid" v-model:value="radioVal" @change="handleRadioChange">
+            <RadioButton v-for="item in clueStatusList" :key="item.value" :value="item.value">{{item.label}}</RadioButton>
+          </RadioGroup>
+          <div class="flex-row-center-start">
+            <Popconfirm placement="bottom" icon="分配线索" :disabled="datingClueIdList.length == 0" @confirm="allocateList(null)">
+              <template #title>
+                <div class="flex-row-center-start" style="padding: 8px 8px 8px 0px;border-bottom: 1px solid #ddd;" v-for="item in memberList" :key="item.userId">
+                  <Checkbox :checked="verifier == item.userId" @change="e => onCheckChange(e, item)">
+                    <span style="color: #333;font-weight: bold;margin-left: 4px;">{{item.realName}}</span>
+                    <span style="color: #666;margin-left: 4px;">({{item.phone}})</span>
+                  </Checkbox>
+                </div>
+              </template>
+              <Button type="primary" danger :disabled="datingClueIdList.length == 0">分配</Button>
+            </Popconfirm>
+            <Button style="margin-left: 16px;" @click="handleAdd(true)">批量导入</Button>
+            <Button :type="'primary'" style="margin-left: 16px;" @click="handleAdd(false)">新增</Button>
+          </div>
+        </div>
+      </template>
+      <template #userinfo="{ text, record }">
+        <div class="flex-row">
+          <Image style="width: 40px;height: 40px;" :src="record.profilePhoto || 'https://dating-agency-prod.oss-cn-shenzhen.aliyuncs.com/827036501B11.png'" />
+          <div class="flex-col" style="margin-left: 8px;">
+            <div class="flex-row">
+              <span class="single-line" style="font-size: 14px;color: #333;font-weight: bold;max-width: 160px;">{{record.nickName}}</span>
+              <!-- <span class="single-line" style="font-size: 13px;color: #666;margin: 0 12px;">(ID：{{record.id}})</span> -->
+            </div>
+            <div class="flex-row">
+              <span style="font-size: 13px;color: #666;" v-if="record.age">{{record.age}}岁</span>
+              <span style="font-size: 13px;color: #666;margin-left: 12px;">{{educationList.find((find) => find.value === record.educationCode)?.label}}</span>
+              <span style="font-size: 13px;color: #666;margin-left: 12px;">{{maritalList.find((find) => find.value === record.maritalStatusCode)?.label}}</span>
+              <span style="font-size: 13px;color: #666;margin-left: 12px;" v-if="record.occupation">{{record.occupation}}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #action="{ record }">
+        <!-- <TableAction
+          :actions="[
+            {
+              label: '详情',
+              onClick: toDetail.bind(null, record),
+            },
+          ]"
+        /> -->
+        <div class="flex-row-center-start">
+          <Button type="link" @click="toDetail(record)">详情</Button>
+          <span style="color: #999;">|</span>
+          <Popconfirm placement="topRight" :icon="record.allocationStatus == 1 ? '分配' : '重新分配'" @confirm="allocateList(record.id)">
+            <template #title>
+              <div class="flex-row-center-start" style="padding: 8px 8px 8px 0px;border-bottom: 1px solid #ddd;" v-for="item in memberList" :key="item.userId">
+                <Checkbox :checked="verifier == item.userId" @change="e => onCheckChange(e, item)">
+                  <span style="color: #333;font-weight: bold;margin-left: 4px;">{{item.realName}}</span>
+                  <span style="color: #666;margin-left: 4px;">({{item.phone}})</span>
+                </Checkbox>
+              </div>
+            </template>
+            <Button type="link" danger >{{record.allocationStatus == 1 ? '分配' : '重新分配'}}</Button>
+          </Popconfirm>
+        </div>
+      </template>
+    </BasicTable>
+    <ClueModal @register="registerModal" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { Radio } from 'ant-design-vue'
+
+  export default {
+    name: 'CluePool',
+    components: { RadioGroup: Radio.Group, RadioButton: Radio.Button },
+  }
+</script>
+<script setup lang="ts">
+  import moment from 'moment/moment'
+  import { onMounted, reactive, ref } from 'vue'
+  import { Card, Image, Button, InputNumber, Popconfirm, Checkbox } from 'ant-design-vue'
+  import { useRouter } from 'vue-router'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { tableColumns, tableFormSchema } from './data'
+  import { useModal } from '/@/components/Modal'
+  import { BasicTable, useTable, TableAction } from '/@/components/Table'
+  import ClueModal from './modal.vue'
+  import { getCluePage, allocateCluing } from '/@/api/clue'
+  import { pageOrganizationMember } from '/@/api/staff/staff'
+  import { educationList, maritalList } from '/@/enums/customerEnum'
+
+  const radioVal = ref<any>('')
+  const verifier = ref<any>('')
+
+  const clueStatusList = [
+    { label: '待分配', value: 1 },
+    { label: '跟进中', value: 2 },
+    { label: '公海线索', value: 3 },
+    { label: '全部', value: '' },
+  ]
+
+  const ageModel = reactive({
+    minAge: '',
+    maxAge: '',
+  })
+
+  const memberList = ref<any[]>([]);
+
+  onMounted(async () => {
+    const result = await pageOrganizationMember({})
+    memberList.value = result.items
+  })
+
+  const [registerTable, { reload, setPagination, getSelectRowKeys, clearSelectedRowKeys }] = useTable({
+    bordered: true,
+    useSearchForm: true,
+    columns: tableColumns,
+    showIndexColumn: true,
+    showTableSetting: false,
+    api: getCluePage,
+    rowKey: 'id',
+    rowSelection: {
+      type: 'checkbox',
+      onChange,
+      getCheckboxProps(record: Recordable) {
+        // Demo: 第一行（id为0）的选择框禁用
+        return { disabled: record.allocationStatus !== 1 };
+      },
+    },
+    formConfig: {
+      labelWidth: 120,
+      schemas: tableFormSchema,
+    },
+    beforeFetch: (arg) => {
+      const { createTime, followTime } = arg
+      if (createTime) {
+        arg.creatTimeFrom = moment(createTime[0]).format('YYYY-MM-DD 00:00:00')
+        arg.creatTimeTo = moment(createTime[1]).format('YYYY-MM-DD 23:59:59')
+        delete arg.createTime
+      }
+      if (followTime) {
+        arg.finalFollowTimeFrom = moment(followTime[0]).format('YYYY-MM-DD 00:00:00')
+        arg.finalFollowTimeTo = moment(followTime[1]).format('YYYY-MM-DD 23:59:59')
+        delete arg.followTime
+      }
+      arg.minimumAge = ageModel.minAge
+      arg.maximumAge = ageModel.maxAge
+      arg.allocationStatus = radioVal.value
+    },
+    actionColumn: {
+      width: 160,
+      title: '操作',
+      fixed: 'right',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+  })
+
+  function handleRadioChange() {
+    setPagination({ current: 1 })
+    datingClueIdList.value = []
+    reload()
+  }
+
+  const [registerModal, { openModal, closeModal }] = useModal()
+  function handleAdd(excel) {
+    openModal(true, {ifUpdate: excel,})
+  }
+  // 操作成功
+  function handleSuccess() {
+    closeModal()
+    reload()
+  }
+  const { createMessage } = useMessage()
+  const router = useRouter()
+  function toDetail(record: any) {
+    const { id } = record
+    router.push({
+      query: { id },
+      path: '/clue/customer',
+    })
+  }
+  const datingClueIdList = ref<string[]>([]);
+  function onChange(selectedRowKeys) {
+    datingClueIdList.value = selectedRowKeys
+  }
+  function onCheckChange(e, item){
+    if(e.target.checked){
+      verifier.value = item.userId
+    }
+  }
+  async function allocateList(id = null){
+    if(!verifier.value){
+      createMessage.warning('请选择分配人')
+      return
+    }
+    var datingClueIdList: string[] = []
+    if(id){
+      datingClueIdList = [id]
+    } else {
+      datingClueIdList = getSelectRowKeys()
+    }
+    try {
+      await allocateCluing({verifier: verifier.value, datingClueIdList})
+      createMessage.success(`分配成功`)
+      clearSelectedRowKeys()
+    } finally {
+      reload()
+    }
+  }
+</script>
+<style scoped lang="less">
+.single-line {
+  overflow: hidden; /* 超出部分隐藏 */
+  white-space: nowrap; /* 文本不换行 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
+</style>

src/views/invite/list/modal.vue

@@ -0,0 +1,211 @@
+<template>
+  <BasicModal v-bind="$attrs" :width="960" @ok="handleOk" @register="registerModal">
+
+    <template v-if="!ifUpdate" #title>
+      <span>新增线索</span>
+    </template>
+
+    <div v-if="ifUpdate">
+      <Result title="请将模板Excel文件导入" v-if="tableListRef.length == 0">
+        <template #icon>
+          <Icon icon="ant-design:cloud-upload-outlined" size="150px" color="#d6d6d6"/>
+        </template>
+        <template #extra>
+          <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
+            <Button>导入Excel</Button>
+          </ImpExcel>
+        </template>
+      </Result>
+      <BasicTable v-for="(table, index) in tableListRef"
+        :key="index"
+        :columns="table.columns"
+        :canResize="false"
+        :dataSource="table.dataSource"
+        :pagination="{ pageSize: 10 }"
+      />
+    </div>
+
+    <div class="flex-col" v-else>
+      <Tabs tab-position="left" v-model:activeKey="activeKey2" :animated="false">
+        <TabPane key="1" tab="个人资料">
+          <BasicForm @register="registerForm" style="padding: 16px 48px 0px 0px;" >
+            <template #profilePhoto="{ model, field }">
+              <CropperAvatar :value="model[field]" @change="uploadAvatarAfter"/>
+            </template>
+          </BasicForm>
+        </TabPane>
+        <TabPane key="2" tab="择偶要求">
+          <BasicForm @register="registerForm3" style="padding: 16px 48px 0px 0px;">
+            <template #age="{ model }">
+              <div class="flex-row-center-start">
+                <InputNumber placeholder="请输入" :min="0" v-model:value="model['minAge']" />
+                <span style="margin: 0 5px">-</span>
+                <InputNumber placeholder="请输入" :min="0" v-model:value="model['maxAge']" />
+              </div>
+            </template>
+            <template #height="{ model }">
+              <div class="flex-row-center-start">
+                <InputNumber placeholder="请输入" :min="0" v-model:value="model['minHeight']" />
+                <span style="margin: 0 5px">-</span>
+                <InputNumber placeholder="请输入" :min="0" v-model:value="model['maxHeight']" />
+              </div>
+            </template>
+            <template #income="{ model }">
+              <div class="flex-row-center-start">
+                <InputNumber placeholder="请输入" :min="0" v-model:value="model['minimumIncome']" />
+                <span style="margin: 0 5px">-</span>
+                <InputNumber placeholder="请输入" :min="0" v-model:value="model['maximumIncome']" />
+              </div>
+            </template>
+          </BasicForm>
+        </TabPane>
+      </Tabs>
+    </div>
+
+    <template v-if="ifUpdate" #footer>
+      <div class="flex-row-center-space">
+        <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
+          <Button type="primary">导入Excel</Button>
+        </ImpExcel>
+        <div class="flex-row-center-start">
+          <Button @click="close">取消</Button>
+          <Button type="primary" @click="handleOk">确定</Button>
+        </div>
+      </div>
+    </template>
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+  import { ref, unref } from 'vue'
+  import { Tabs, TabPane, Button, Result, InputNumber } from 'ant-design-vue'
+  import Icon from '/@/components/Icon'
+  import { modalFormSchema, basicInfoData, demandMarriageSchema, demandMarriageMoreData } from './data'
+  import { ImpExcel, ExcelData } from '/@/components/Excel';
+  import { BasicTable, BasicColumn } from '/@/components/Table'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { BasicForm, useForm } from '/@/components/Form'
+  import { BasicModal, useModalInner } from '/@/components/Modal'
+  import { CropperAvatar } from '/@/components/Cropper';
+  import { createClueRecord, importClueRecord } from '/@/api/clue'
+
+  const activeKey2 = ref<string>('1')
+
+  const [registerForm, { setFieldsValue, resetFields, validate, getFieldsValue }] =
+    useForm({
+      labelWidth: 108,
+      schemas: modalFormSchema,
+      baseColProps: { span: 22 },
+      showActionButtonGroup: false,
+    })
+
+  const ifUpdate = ref<boolean>(false)
+  const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
+    ifUpdate.value = !!data.ifUpdate
+    if(ifUpdate.value){
+      tableListRef.value = [];
+    } else {
+      demandMarriageMoreData.value = {}
+      basicInfoData.value = {}
+      activeKey2.value = '1'
+      await resetFields()
+      await resetFields3()
+    }
+    setModalProps({
+      minHeight: 50,
+      confirmLoading: false,
+      title: ifUpdate.value ? '导入线索' : '新增线索',
+    })
+  })
+
+  // 择偶标准表单配置
+  const [registerForm3, { getFieldsValue: getFieldsValue3, resetFields: resetFields3 }] =
+    useForm({
+      labelWidth: 100,
+      schemas: demandMarriageSchema,
+      baseColProps: { span: 22 },
+      showActionButtonGroup: false,
+    })
+
+  function close(){
+    closeModal()
+  }
+
+  function uploadAvatarAfter(value) {
+    //修改表单的值
+    setFieldsValue({
+      profilePhoto: value,
+    });
+  }
+
+  const { createMessage } = useMessage()
+  const emits = defineEmits(['success'])
+  async function handleOk() {
+    try {
+      if(ifUpdate.value){
+        await importClueRecord({keyList: tableListRef.value[0].header, dataList: tableListRef.value[0].dataSource})
+        createMessage.success(`导入成功！`)
+        emits('success')
+        return
+      }
+      await validate()
+      const values: any = getFieldsValue()
+      // console.log({...values, ...basicInfoData.value})
+      
+      setModalProps({ confirmLoading: true })
+      const { domicilePlace, address } = values || {}
+
+      const demandInfo: any = getFieldsValue3()
+      if(demandInfo){
+        const address1 = demandInfo.address
+        demandInfo.cityCode =  address1?.[1]
+        demandInfo.provinceCode =  address1?.[0]
+        demandInfo.districtCode =  address1?.[2]
+        const domicilePlace1 = demandInfo.domicilePlace
+        demandInfo.domicilePlaceCityCode =  domicilePlace1?.[1]
+        demandInfo.domicilePlaceProvinceCode =  domicilePlace1?.[0]
+      }
+      
+      const datingClueDemand = { ...demandInfo, ...demandMarriageMoreData.value }
+
+      const param = {
+        ...values, 
+        channelType: 1,
+        datingClueDemand,
+        cityCode: address?.[1],
+        provinceCode: address?.[0],
+        districtCode: address?.[2],
+        domicilePlaceCityCode: domicilePlace?.[1],
+        domicilePlaceProvinceCode: domicilePlace?.[0]
+      }
+      await createClueRecord(param)
+      createMessage.success(`新增成功！`)
+      emits('success')
+    } finally {
+      setModalProps({ confirmLoading: false })
+    }
+  }
+
+  const tableListRef = ref<{ title: string; columns?: any[]; dataSource?: any[]; header:any[];}[]>([]);
+
+  function loadDataSuccess(excelDataList: ExcelData[]) {
+    tableListRef.value = [];
+    console.log(excelDataList);
+    for (const excelData of excelDataList) {
+      const { header, results, meta: { sheetName }, } = excelData;
+      const columns: BasicColumn[] = [];
+      for (const title of header) {
+        columns.push({ title, dataIndex: title });
+      }
+      tableListRef.value.push({ title: sheetName, dataSource: results, columns, header });
+    }
+  }
+</script>
+
+<style scoped lang="less">
+::v-deep .ant-input-number {
+    min-width: 60px;
+    width: 100% !important;
+    max-width: 100%;
+}
+</style>