dating-agency
/
dating-operation-opr
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

no message

master
xpz2018 9 months ago
parent
330276dba4
commit
68e63b423b
11 changed files with 2363 additions and 7 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/locales/lang/zh-CN/routes/invite.ts
  2. 38
      src/router/menu.ts
  3. 20
      src/router/menus/modules/invite.ts
  4. 6
      src/router/routes/modules/clue.ts
  5. 37
      src/router/routes/modules/invite.ts
  6. 693
      src/views/invite/index/data.ts
  7. 228
      src/views/invite/index/index.vue
  8. 211
      src/views/invite/index/modal.vue
  9. 693
      src/views/invite/list/data.ts
  10. 228
      src/views/invite/list/index.vue
  11. 211
      src/views/invite/list/modal.vue

5
src/locales/lang/zh-CN/routes/invite.ts
View File

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

38
src/router/menu.ts
View File

@ -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

20
src/router/menus/modules/invite.ts
View File

@ -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

6
src/router/routes/modules/clue.ts
View File

@ -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

37
src/router/routes/modules/invite.ts
View File

@ -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

693
src/views/invite/index/data.ts
View File

@ -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
},
},
},
]

228
src/views/invite/index/index.vue
View File

@ -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>

211
src/views/invite/index/modal.vue
View File

@ -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>

693
src/views/invite/list/data.ts
View File

@ -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
},
},
},
]

228
src/views/invite/list/index.vue
View File

@ -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>

211
src/views/invite/list/modal.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save