xpz2018
8 months ago
11 changed files with 1008 additions and 13 deletions
Split View
Diff Options
-
10src/router/menu.ts
-
10src/router/routes/modules/invite.ts
-
2src/views/components/Profile.vue
-
2src/views/invite/index/index.vue
-
443src/views/invite/inviteInfo/data.ts
-
468src/views/invite/inviteInfo/index.vue
-
64src/views/invite/inviteInfo/modal.vue
-
2src/views/invite/list/index.vue
-
2src/views/invite/myList/index.vue
-
2src/views/invite/seasList/index.vue
-
16src/views/market/appointment/index.vue
@ -0,0 +1,443 @@ |
|||
import { useAddressData } from '/@/hooks/common' |
|||
import { ref } from 'vue' |
|||
import dayjs, { Dayjs } from 'dayjs' |
|||
import { FormSchema } from '/@/components/Form' |
|||
import { genderList, channelList, followStageList, paymentList, marriageList, storeAppointmentStatus } from '/@/enums/customerEnum' |
|||
import { |
|||
getIncomeList, |
|||
getNationList, |
|||
getEducationList, |
|||
getFamilyTiesList, |
|||
getOccupationList, |
|||
getBodilyFormList, |
|||
getPropertyPermits, |
|||
getAccountTypeList, |
|||
getIdentityTypeList, |
|||
getMaritalStatusList, |
|||
getConstellationList, |
|||
getCarPurchaseSituation, |
|||
} from '/@/api/essentialData' |
|||
|
|||
import { incomeList } from '/@/enums/customerEnum' |
|||
|
|||
import { getStoreTeam } from '/@/api/clue' |
|||
|
|||
// 基础信息的额外数据
|
|||
export const basicInfoMoreData = 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 basicSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'genderCode', |
|||
label: '性别', |
|||
component: 'Select', |
|||
colProps: { span: 8 }, |
|||
componentProps: ({ formModel }) => { |
|||
return { |
|||
options: genderList, |
|||
disabled: !!formModel.name && formModel.name !== -1, |
|||
onChange: (_: any, v: any) => { |
|||
basicInfoMoreData.value.genderValue = v?.label |
|||
}, |
|||
} |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'channelType', |
|||
label: '渠道来源', |
|||
defaultValue: 1, |
|||
colProps: { span: 8 }, |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: channelList, |
|||
}, |
|||
}, |
|||
{ field: 'age', label: '年龄', component: 'InputNumber', colProps: { span: 8 }, }, |
|||
{ field: 'height', label: '身高(cm)', component: 'InputNumber', colProps: { span: 8 }, }, |
|||
{ field: 'weight', label: '体重(kg)', component: 'InputNumber', colProps: { span: 8 }, }, |
|||
{ |
|||
field: 'educationCode', |
|||
label: '学历', |
|||
component: 'ApiSelect', |
|||
colProps: { span: 8 }, |
|||
componentProps: { |
|||
labelField: 'desc', |
|||
api: getEducationList, |
|||
getPopupContainer: () => document.body, |
|||
onChange: (_: any, v: any) => { |
|||
basicInfoMoreData.value.education = v?.label |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'incomeCode', |
|||
label: '月收入', |
|||
component: 'ApiSelect', |
|||
colProps: { span: 8 }, |
|||
componentProps: { |
|||
labelField: 'desc', |
|||
api: getIncomeList, |
|||
getPopupContainer: () => document.body, |
|||
onChange: (_: any, v: any) => { |
|||
basicInfoMoreData.value.income = v?.label |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'maritalStatusCode', |
|||
label: '婚姻状况', |
|||
component: 'ApiSelect', |
|||
colProps: { span: 8 }, |
|||
componentProps: { |
|||
labelField: 'desc', |
|||
api: getMaritalStatusList, |
|||
getPopupContainer: () => document.body, |
|||
onChange: (_: any, v: any) => { |
|||
basicInfoMoreData.value.maritalStatusName = v?.label |
|||
}, |
|||
}, |
|||
}, |
|||
// { field: 'name', label: '姓名', component: 'Input', componentProps: { disabled: true }, colProps: { span: 8 }, },
|
|||
{ |
|||
field: 'constellationCode', |
|||
label: '星座', |
|||
component: 'ApiSelect', |
|||
colProps: { span: 8 }, |
|||
componentProps: { |
|||
labelField: 'desc', |
|||
api: getConstellationList, |
|||
getPopupContainer: () => document.body, |
|||
onChange: (_: any, v: any) => { |
|||
basicInfoMoreData.value.constellation = v?.label |
|||
}, |
|||
}, |
|||
}, |
|||
{ field: 'childrenNum', label: '孩子数量', component: 'InputNumber', colProps: { span: 8 }, }, |
|||
{ |
|||
field: 'address', |
|||
label: '居住地', |
|||
component: 'Cascader', |
|||
colProps: { span: 8 }, |
|||
componentProps: { |
|||
options: addressList, |
|||
onChange: (_: any, v: any) => { |
|||
basicInfoMoreData.value.provinceName = v?.[0]?.label |
|||
basicInfoMoreData.value.cityName = v?.[1]?.label |
|||
basicInfoMoreData.value.districtName = v?.[2]?.label |
|||
}, |
|||
}, |
|||
}, |
|||
// {
|
|||
// field: 'domicilePlace',
|
|||
// label: '户口所在地',
|
|||
// component: 'Cascader',
|
|||
// colProps: { span: 8 },
|
|||
// componentProps: () => {
|
|||
// return {
|
|||
// options: domicilePlaceList.value,
|
|||
// onChange: (_: any, v: any) => {
|
|||
// basicInfoMoreData.value.domicilePlaceProvinceName = v?.[0]?.label
|
|||
// basicInfoMoreData.value.domicilePlaceCityName = v?.[1]?.label
|
|||
// },
|
|||
// }
|
|||
// },
|
|||
// },
|
|||
{ |
|||
field: 'hometown', |
|||
label: '家乡', |
|||
component: 'Cascader', |
|||
colProps: { span: 8 }, |
|||
componentProps: () => { |
|||
return { |
|||
options: domicilePlaceList.value, |
|||
onChange: (_: any, v: any) => { |
|||
basicInfoMoreData.value.hometownProvinceName = v?.[0]?.label |
|||
basicInfoMoreData.value.hometownCityName = v?.[1]?.label |
|||
}, |
|||
} |
|||
}, |
|||
}, |
|||
// {
|
|||
// field: 'identityType',
|
|||
// label: '身份',
|
|||
// component: 'ApiSelect',
|
|||
// colProps: { span: 8 },
|
|||
// componentProps: {
|
|||
// labelField: 'desc',
|
|||
// api: getIdentityTypeList,
|
|||
// getPopupContainer: () => document.body,
|
|||
// onChange: (_: any, v: any) => {
|
|||
// basicInfoMoreData.value.identityTypeName = v?.label
|
|||
// },
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// field: 'nationCode',
|
|||
// label: '民族',
|
|||
// component: 'ApiSelect',
|
|||
// colProps: { span: 8 },
|
|||
// componentProps: {
|
|||
// labelField: 'cn',
|
|||
// valueField: 'id',
|
|||
// api: getNationList,
|
|||
// getPopupContainer: () => document.body,
|
|||
// onChange: (_: any, v: any) => {
|
|||
// basicInfoMoreData.value.nation = v?.label
|
|||
// },
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// field: 'bodilyFormCode',
|
|||
// label: '体型',
|
|||
// component: 'ApiSelect',
|
|||
// colProps: { span: 8 },
|
|||
// componentProps: {
|
|||
// labelField: 'desc',
|
|||
// api: getBodilyFormList,
|
|||
// getPopupContainer: () => document.body,
|
|||
// onChange: (_: any, v: any) => {
|
|||
// basicInfoMoreData.value.bodilyForm = v?.label
|
|||
// },
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// field: 'accountTypeCode',
|
|||
// label: '户口',
|
|||
// component: 'ApiSelect',
|
|||
// colProps: { span: 8 },
|
|||
// componentProps: {
|
|||
// labelField: 'desc',
|
|||
// api: getAccountTypeList,
|
|||
// getPopupContainer: () => document.body,
|
|||
// onChange: (_: any, v: any) => {
|
|||
// basicInfoMoreData.value.accountTypeName = v?.label
|
|||
// },
|
|||
// },
|
|||
// },
|
|||
{ |
|||
field: 'nativePlaceCode', |
|||
label: '籍贯', |
|||
component: 'Select', |
|||
colProps: { span: 8 }, |
|||
componentProps: { |
|||
options: domicilePlaceList, |
|||
getPopupContainer: () => document.body, |
|||
onChange: (_: any, v: any) => { |
|||
basicInfoMoreData.value.nativePlaceName = v?.label |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
label: '职业', |
|||
field: 'occupationList', |
|||
component: 'Cascader', |
|||
colProps: { span: 8 }, |
|||
componentProps: { |
|||
options: occupationList, |
|||
getPopupContainer: () => document.body, |
|||
onChange: (_: any, v: any) => { |
|||
const industry = v?.[0] || {} |
|||
const occupation = v?.[1] || {} |
|||
basicInfoMoreData.value.industry = industry.label |
|||
basicInfoMoreData.value.industryCode = industry.value |
|||
basicInfoMoreData.value.occupation = occupation.label |
|||
basicInfoMoreData.value.occupationCode = occupation.value |
|||
}, |
|||
}, |
|||
}, |
|||
// {
|
|||
// field: 'onlyChild',
|
|||
// label: '是否独生子女',
|
|||
// component: 'Select',
|
|||
// colProps: { span: 8 },
|
|||
// componentProps: {
|
|||
// options: [
|
|||
// { label: '是', value: 1 },
|
|||
// { label: '否', value: 0 },
|
|||
// ],
|
|||
// },
|
|||
// },
|
|||
{ |
|||
field: 'housePurchase', |
|||
label: '购房情况', |
|||
component: 'Select', |
|||
colProps: { span: 8 }, |
|||
componentProps: { |
|||
options: [ |
|||
{ label: '已购房', value: 1 }, |
|||
{ label: '未购房', value: 0 }, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'carPurchase', |
|||
label: '购车情况', |
|||
component: 'Select', |
|||
colProps: { span: 8 }, |
|||
componentProps: { |
|||
options: [ |
|||
{ label: '已购车', value: 1 }, |
|||
{ label: '未购车', value: 0 }, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'paymentIntention', |
|||
label: '付费意愿', |
|||
colProps: { span: 8 }, |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: paymentList |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'marriageIntention', |
|||
label: '结婚意愿', |
|||
colProps: { span: 8 }, |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: marriageList |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'remark', |
|||
label: '个人描述', |
|||
component: 'InputTextArea', |
|||
colProps: { span: 24 }, |
|||
componentProps: ({ formModel }) => { |
|||
return { |
|||
autoSize: { |
|||
minRows: 4, |
|||
}, |
|||
disabled: formModel?.describeAudit, |
|||
} |
|||
}, |
|||
}, |
|||
{ field: 'empty1', label: '', slot: 'empty1', component: 'Input' }, |
|||
] |
|||
|
|||
export const modalFormSchema: FormSchema[] = [ |
|||
// {
|
|||
// field: 'datingClueFollowType',
|
|||
// label: '线索跟进方式',
|
|||
// component: 'Select',
|
|||
// required: true,
|
|||
// componentProps: {
|
|||
// options: followTypeList,
|
|||
// },
|
|||
// },
|
|||
{ |
|||
field: 'datingClueFollowStage', |
|||
label: '线索跟进阶段', |
|||
required: true, |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: followStageList, |
|||
}, |
|||
}, |
|||
// {
|
|||
// label: '下次跟进时间',
|
|||
// component: 'DatePicker',
|
|||
// field: 'nextFollowTime',
|
|||
// componentProps: {
|
|||
// ...dateComProps,
|
|||
// },
|
|||
// },
|
|||
{ |
|||
field: 'remark', |
|||
label: '备注', |
|||
required: false, |
|||
component: 'InputTextArea', |
|||
componentProps: { |
|||
autosize: { |
|||
minRows: 4, |
|||
}, |
|||
}, |
|||
}, |
|||
] |
|||
|
|||
export const appointmentFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'datingStoreOrgId', |
|||
label: '预约门店', |
|||
component: 'ApiSelect', |
|||
required: true, |
|||
componentProps: { |
|||
valueField: 'orgId', |
|||
labelField: 'orgName', |
|||
api: getStoreTeam, |
|||
}, |
|||
}, |
|||
{ |
|||
label: '预约到店时间', |
|||
component: 'DatePicker', |
|||
field: 'appointmentTime', |
|||
required: true, |
|||
componentProps: { |
|||
showTime: true, |
|||
style: { width: '100%' }, |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'remark', |
|||
label: '备注', |
|||
required: false, |
|||
component: 'InputTextArea', |
|||
componentProps: { |
|||
autosize: { |
|||
minRows: 4, |
|||
}, |
|||
}, |
|||
}, |
|||
] |
|||
|
|||
import { BasicColumn } from '/@/components/Table' |
|||
export const tableColumns: BasicColumn[] = [ |
|||
// { width: 70, title: '性别', dataIndex: 'genderCode', customRender: ({ text }) => { return genderList.find((find) => find.value === text)?.label} },
|
|||
{ title: '门店', dataIndex: 'datingStoreOrgName' }, |
|||
// { width: 100, title: '渠道来源', dataIndex: 'channelType',
|
|||
// customRender: ({ text }) => {
|
|||
// return channelList.find((find) => find.value === text)?.label
|
|||
// },
|
|||
// },
|
|||
{ title: '预约到店时间', dataIndex: 'appointmentTime' }, |
|||
{ title: '到店状态', dataIndex: 'datingStoreAppointmentStatus', |
|||
customRender: ({ text }) => { |
|||
return storeAppointmentStatus.find((find) => find.value === text)?.label |
|||
}, |
|||
}, |
|||
{ title: '销售', dataIndex: 'salesConsultantName' }, |
|||
{ title: '电邀人', dataIndex: 'telemarketerName' }, |
|||
// { width: 100, title: '跟进状态', dataIndex: 'followStatus',
|
|||
// customRender: ({ text }) => {
|
|||
// return followStatusList.find((find) => find.value === text)?.label
|
|||
// },
|
|||
// },
|
|||
{ title: '电邀团队', dataIndex: 'teleInvitationOrgName' }, |
|||
// { width: 100, title: '跟进结果', dataIndex: 'validStatus',
|
|||
// customRender: ({ text }) => {
|
|||
// return validStatusList.find((find) => find.value === text)?.label
|
|||
// },
|
|||
// },
|
|||
// { width: 160, title: '录入时间', dataIndex: 'creatTime' },
|
|||
] |
|||
@ -0,0 +1,468 @@ |
|||
<template> |
|||
<div class="flex-col" style="height:100%;padding: 16px;" v-if="details"> |
|||
<div class="flex-row" style="background: white;width: 100%;padding: 10px;"> |
|||
<CropperAvatar :value="avatar" width="90px" @change="uploadAvatarAfter"/> |
|||
<div class="flex-col" style="flex: 1;margin-left: 10px;"> |
|||
<div class="flex-row-center-start"> |
|||
<span style="font-size: 18px;font-weight: bold;">{{details.nickName}}</span> |
|||
<!-- <Icon icon="ant-design:edit-twotone" size="18px" style="margin-left: 12px;color:#0960bd;"/> --> |
|||
<Popconfirm placement="bottom" icon="修改昵称" @confirm="handleNickname"> |
|||
<template #title> |
|||
<Input placeholder="请输入昵称" v-model:value="nickName" style="margin-top: 12px;"/> |
|||
</template> |
|||
<Button type="link"><template #icon><Icon icon="ant-design:edit-twotone" size="16px" style="margin-left: 12px;color:#0960bd;"/></template></Button> |
|||
</Popconfirm> |
|||
|
|||
<span style="color: #666;margin: 0 12px;">(ID：{{details.id}} | 渠道来源：{{channelList.find((find) => find.value === details.channelType)?.label}})</span> |
|||
<Tag color="pink">#{{followStageList.find((find) => find.value === details.followStatus)?.label}}</Tag> |
|||
</div> |
|||
<div class="flex-row-center-start" style="margin-top: 5px;"> |
|||
<div class="flex-row-center-start" style="width: 240px;"> |
|||
<span style="color: #666;">电话：</span> |
|||
<span style="color: #333;font-weight: bold;">{{details.phone}}</span> |
|||
</div> |
|||
<div class="flex-row-center-start" style="width: 240px;"> |
|||
<span style="color: #666;">微信：</span> |
|||
<span style="color: #333;font-weight: bold;">{{details.weChatId || '--'}}</span> |
|||
</div> |
|||
<!-- <div class="flex-row-center-start" style="width: 240px;"> |
|||
<span style="color: #666;">客户标签：</span> |
|||
<Tag color="#f50" closable @close="onLabelClose">无效</Tag> |
|||
<Popconfirm placement="bottom" icon="添加标签" @confirm="handleLabel"> |
|||
<template #title> |
|||
<Input placeholder="请输入标签" v-model:value="labelName" style="margin-top: 12px;"/> |
|||
</template> |
|||
<Button style="height: 22px;line-height: 22px;width: 24px;border: 1px solid #0960bd;"> |
|||
<template #icon><Icon icon="ant-design:plus-outlined" size="14px" style="color:#0960bd;display: block;"/></template> |
|||
</Button> |
|||
</Popconfirm> |
|||
</div> --> |
|||
</div> |
|||
<div class="flex-row-center-start" style="margin-top: 5px;"> |
|||
<div class="flex-row-center-start" style="width: 240px;"> |
|||
<span style="color: #666;">下次跟进时间：</span> |
|||
<span style="color: #333;">{{details.nextFollowTime || '--'}}</span> |
|||
</div> |
|||
<!-- <div class="flex-row-center-start" style="width: 240px;"> |
|||
<span style="color: #666;">创建人：</span> |
|||
<span style="color: #333;">{{details.creatorName || '--'}}</span> |
|||
</div> --> |
|||
<div class="flex-row-center-start" style="width: 240px;"> |
|||
<span style="color: #666;">跟进人：</span> |
|||
<span style="color: #333;">{{details.followName || '--'}}</span> |
|||
</div> |
|||
<div class="flex-row-center-end" style="flex:1;padding-right: 32px;"> |
|||
<Button size="small" type="primary">查看下一个客户</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex-col" style="background: white;width: 100%;margin-top: 16px;padding: 10px 40px;"> |
|||
<div class="flex-row-center-space"> |
|||
<div class="flex-row-center-start" style="flex: 1;"> |
|||
<span style="color: #666;">签约销售：</span> |
|||
<span style="color: #333;font-weight: bold;">--</span> |
|||
</div> |
|||
<div class="flex-row-center-start" style="flex: 1;"> |
|||
<span style="color: #666;">服务红娘：</span> |
|||
<span style="color: #333;font-weight: bold;">--</span> |
|||
</div> |
|||
<div class="flex-row-center-start" style="flex: 1;"> |
|||
<span style="color: #666;">约见红娘：</span> |
|||
<span style="color: #333;font-weight: bold;">--</span> |
|||
</div> |
|||
<div class="flex-row-center-start" style="flex: 1;"> |
|||
<span style="color: #666;">店邀人：</span> |
|||
<span style="color: #333;font-weight: bold;">--</span> |
|||
</div> |
|||
<div class="flex-row-center-start" style="flex: 1;"> |
|||
<span style="color: #666;">核验人：</span> |
|||
<span style="color: #333;font-weight: bold;">{{details.verifierName || '--'}}</span> |
|||
</div> |
|||
<div class="flex-row-center-start" style="flex: 1;"> |
|||
<span style="color: #666;">录入人：</span> |
|||
<span style="color: #333;font-weight: bold;">{{details.creatorName || '--'}}</span> |
|||
</div> |
|||
</div> |
|||
<div class="flex-row-center-space" style="margin-top: 4px;"> |
|||
<div class="flex-row-center-start" style="flex: 1;"> |
|||
<span style="color: #666;">签约时间：</span> |
|||
<span style="color: #333;font-weight: bold;">--</span> |
|||
</div> |
|||
<div class="flex-row-center-start" style="flex: 1;"> |
|||
<span style="color: #666;">服务次数：</span> |
|||
<span style="color: #333;font-weight: bold;">--</span> |
|||
</div> |
|||
<div class="flex-row-center-start" style="flex: 1;"> |
|||
<span style="color: #666;">约见次数：</span> |
|||
<span style="color: #333;font-weight: bold;">--</span> |
|||
</div> |
|||
<div class="flex-row-center-start" style="flex: 1;"> |
|||
<span style="color: #666;">店邀时间：</span> |
|||
<span style="color: #333;font-weight: bold;">--</span> |
|||
</div> |
|||
<div class="flex-row-center-start" style="flex: 1;"> |
|||
<span style="color: #666;">核验时间：</span> |
|||
<span style="color: #333;font-weight: bold;">--</span> |
|||
</div> |
|||
<div class="flex-row-center-start" style="flex: 1;"> |
|||
<span style="color: #666;">录入时间：</span> |
|||
<span style="color: #333;font-weight: bold;">{{details.createTime || '--'}}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex-row" style="width: 100%;flex: 1;margin-top: 16px;"> |
|||
<div style="flex: 1;background: white;padding: 0px 10px 10px 10px;"> |
|||
<Tabs v-model:activeKey="activeKey" :animated="false" @change="onTabChange"> |
|||
<TabPane key="1" tab="客户资料"> |
|||
<div class="flex-col" style="flex:1;padding-top: 16px;"> |
|||
<Tabs tab-position="left" v-model:activeKey="activeKey3" :animated="false" @change="onInfoChange"> |
|||
<TabPane key="1" tab="个人资料"> |
|||
<BasicForm @register="registerForm1" style="padding-right: 48px;"></BasicForm> |
|||
</TabPane> |
|||
<TabPane key="2" tab="择偶要求"> |
|||
<BasicForm @register="registerForm3" style="padding-right: 48px;"> |
|||
<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> |
|||
<TabPane key="3" tab="线索影像"> |
|||
<div style="padding: 16px;"> |
|||
<OssUpload v-model="uploadList" @remove="onUploadRemove" :multiple="true" :if-custom-render="true" /> |
|||
</div> |
|||
</TabPane> |
|||
</Tabs> |
|||
</div> |
|||
</TabPane> |
|||
<TabPane key="2" tab="邀约进店"> |
|||
<div style="height: 100%;width: 100%;position: relative;"> |
|||
<!-- <Button shape="circle" type="primary" ghost style="position: absolute;right: 24rpx;bottom: 24rpx;"> |
|||
<template #icon><Icon icon="ant-design:plus-outlined" size="16px" style="color: #0960bd;"/></template> |
|||
</Button> --> |
|||
<!-- <Table bordered :pagination="false" :columns="tableColumns" :dataSource="appointmentList"> |
|||
|
|||
</Table> --> |
|||
<BasicTable @register="registerTable"> |
|||
<template #action="{ record }"> |
|||
<TableAction |
|||
:actions="[ |
|||
{ |
|||
label: '取消', |
|||
color: 'error', |
|||
// onClick: handleCancel.bind(null, record['id']), |
|||
}, |
|||
{ |
|||
label: '编辑', |
|||
onClick: handleAppointment.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '结算', |
|||
color: 'error', |
|||
ifShow: record['status'] === 5, |
|||
// onClick: handleSettle.bind(null, record['id']), |
|||
} |
|||
]" |
|||
/> |
|||
</template> |
|||
</BasicTable> |
|||
<!-- <Result subTitle="暂无数据"></Result> --> |
|||
</div> |
|||
</TabPane> |
|||
<TabPane key="3" tab="合同"> |
|||
<Result subTitle="暂无数据"></Result> |
|||
</TabPane> |
|||
<TabPane key="4" tab="约见记录"> |
|||
<Result subTitle="暂无数据"></Result> |
|||
</TabPane> |
|||
<template #tabBarExtraContent> |
|||
<Button type="link" @click="handleSubmit" v-if="activeKey == '1'"> |
|||
<template #icon><Icon icon="ant-design:edit-twotone" size="16px" style="margin-right: -4px;"/></template>保存资料 |
|||
</Button> |
|||
<Button type="link" @click="handleAppointment({datingClueId: details.id})" v-else-if="activeKey == '2'"> |
|||
<template #icon> |
|||
<div style="display: inline;"><Icon icon="ant-design:plus-outlined" size="16px" style="margin-right: 2px;"/></div> |
|||
</template> |
|||
<span>邀约进店</span> |
|||
</Button> |
|||
</template> |
|||
</Tabs> |
|||
</div> |
|||
<div style="width: 400px;background: white;margin-left: 16px;padding: 0px 10px 10px 10px;" v-if="details.allocationStatus !== 1"> |
|||
<Tabs v-model:activeKey="activeKey2" :animated="false" @change="onReportChange"> |
|||
<TabPane key="1" tab="跟进小计"> |
|||
<div class="flex-col-center-start" style="flex:1;padding-top: 16px;"> |
|||
<BasicForm @register="registerForm"></BasicForm> |
|||
<div class="flex-row-center-end" style="width: 100%;padding-right: 40px;"> |
|||
<Button type="primary" style="width: 120px;margin-top: 36px;" @click="handleReport">保存</Button> |
|||
</div> |
|||
</div> |
|||
</TabPane> |
|||
<TabPane key="2" tab="跟进记录" style="flex:1;padding: 16px 16px 0px 16px;"> |
|||
<Spin :spinning="spinning"> |
|||
<Timeline v-if="reportList.length"> |
|||
<TimelineItem :color="followStageList.find((find) => find.value === item.datingClueFollowStage)?.color" v-for="(item, index) in reportList" :key="index"> |
|||
<div class="flex-row-center-space"> |
|||
<div class="flex-row-center-start"> |
|||
<span style="color: #333;">{{item.operatorName || item.operator}}</span> |
|||
<span style="color: #999;margin-left: 8px;">{{item.createTime}}</span> |
|||
</div> |
|||
<span style="color: #333;">[{{followStageList.find((find) => find.value === item.datingClueFollowStage)?.label}}]</span> |
|||
</div> |
|||
<div class="flex-row-center-start" v-if="item.nextFollowTime"> |
|||
<span style="color: #0960bd;">下次跟进时间：{{item.nextFollowTime}}</span> |
|||
</div> |
|||
<div class="flex-row-center-start" v-if="item.remark"> |
|||
<span style="color: #333;">备注：{{item.remark || "--"}}</span> |
|||
</div> |
|||
</TimelineItem> |
|||
</Timeline> |
|||
<Result subTitle="暂无数据" v-else></Result> |
|||
</Spin> |
|||
</TabPane> |
|||
</Tabs> |
|||
</div> |
|||
</div> |
|||
<AppointmentModal @register="registerModal" @success="handleSuccess" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { useRoute } from 'vue-router' |
|||
import { onMounted, ref, nextTick } from 'vue' |
|||
import { Tabs, Input, Popconfirm, Button, TabPane, Tag, Timeline, TimelineItem, Result, Spin, InputNumber, Table } from 'ant-design-vue' |
|||
import { Icon } from '/@/components/Icon' |
|||
import { useMessage } from '/@/hooks/web/useMessage' |
|||
import { CropperAvatar } from '/@/components/Cropper'; |
|||
import { OssUpload } from '/@/components/OssUpload' |
|||
import BasicForm from '/@/components/Form/src/BasicForm.vue' |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table' |
|||
import { useForm } from '/@/components/Form' |
|||
import { formatToDateTime } from '/@/utils/dateUtil' |
|||
import { basicSchema, modalFormSchema, tableColumns } from './data' |
|||
import { useModal } from '/@/components/Modal' |
|||
import AppointmentModal from './modal.vue' |
|||
import { demandMarriageMoreData, demandMarriageSchema } from '/@/views/clue/components/data' |
|||
import { getClueInfo, editClueRecord, recordClueing, getClueRecord, getAppointmentList } from '/@/api/clue' |
|||
import { genderList, channelList, clueStatusList, followTypeList, followStageList } from '/@/enums/customerEnum' |
|||
|
|||
const details = ref<any>() |
|||
const uploadList = ref<any>([]) |
|||
onMounted(() => { |
|||
initFetch() |
|||
}) |
|||
|
|||
async function initFetch() { |
|||
demandMarriageMoreData.value = {} |
|||
const { query } = useRoute() |
|||
const { id } = query || {} |
|||
if (!id) return |
|||
details.value = await getClueInfo(`${id}`) |
|||
|
|||
const { domicilePlaceProvinceCode, domicilePlaceCityCode } = details.value || {} |
|||
const domicilePlace = domicilePlaceCityCode && domicilePlaceProvinceCode ? [domicilePlaceProvinceCode, domicilePlaceCityCode] : [] |
|||
const { provinceCode, cityCode, districtCode } = details.value || {} |
|||
const address = provinceCode && cityCode && districtCode ? [provinceCode, cityCode, districtCode] : [] |
|||
avatar.value = details.value.profilePhoto |
|||
await nextTick() |
|||
await resetFields1() |
|||
await setFieldsValue1({ ...details.value, domicilePlace, address }) |
|||
|
|||
if(details.value.datingClueImageList && details.value.datingClueImageList.length){ |
|||
uploadList.value = details.value.datingClueImageList.map((item: string) => { |
|||
return {url: item} |
|||
}) |
|||
} |
|||
activeKey.value = '1' |
|||
} |
|||
|
|||
async function onInfoChange(){ |
|||
if(activeKey3.value == '2' && details.value.datingClueDemand){ |
|||
await nextTick() |
|||
const { domicilePlaceProvinceCode, domicilePlaceCityCode } = details.value.datingClueDemand || {} |
|||
const domicilePlace = domicilePlaceCityCode && domicilePlaceProvinceCode ? [domicilePlaceProvinceCode, domicilePlaceCityCode] : [] |
|||
const { provinceCode, cityCode, districtCode } = details.value.datingClueDemand || {} |
|||
const address = provinceCode && cityCode && districtCode ? [provinceCode, cityCode, districtCode] : [] |
|||
await setFieldsValue3({ ...details.value.datingClueDemand, domicilePlace, address }) |
|||
} |
|||
} |
|||
|
|||
function onTabChange(){ |
|||
if(activeKey.value == '2'){ |
|||
reloadTable() |
|||
} |
|||
} |
|||
|
|||
async function reloadTable(){ |
|||
const dataSource= await getAppointmentList({datingClueId: details.value.id}) |
|||
setTableData(dataSource) |
|||
} |
|||
|
|||
const activeKey = ref<string>('1') |
|||
const activeKey2 = ref<string>('1') |
|||
const activeKey3 = ref<string>('1') |
|||
const avatar = ref<string>('') |
|||
const nickName = ref<string>('') |
|||
const labelName = ref<string>('') |
|||
async function handleNickname(){ |
|||
if(!nickName.value){ |
|||
createMessage.warning('请输入昵称') |
|||
return |
|||
} |
|||
await editClueRecord({id: details.value.id, nickName: nickName.value, phone: details.value.phone, weChatId: details.value.weChatId}) |
|||
createMessage.success('修改昵称成功') |
|||
details.value.nickName = nickName.value |
|||
nickName.value = '' |
|||
} |
|||
async function onLabelClose(id){ |
|||
|
|||
} |
|||
async function handleLabel(){ |
|||
if(!labelName.value){ |
|||
createMessage.warning('请输入标签') |
|||
return |
|||
} |
|||
// await editClueRecord({id: details.value.id, nickName: nickName.value}) |
|||
// createMessage.success('修改昵称成功') |
|||
// details.value.nickName = nickName.value |
|||
labelName.value = '' |
|||
} |
|||
// 基础信息表单配置 |
|||
const [registerForm1, { validate: validate1, resetFields: resetFields1, getFieldsValue: getFieldsValue1, setFieldsValue: setFieldsValue1 }] = useForm({ |
|||
labelWidth: 120, |
|||
schemas: basicSchema, |
|||
baseColProps: { span: 22 }, |
|||
showActionButtonGroup: false, |
|||
}) |
|||
//这里是上传头像成功后的回调 |
|||
async function uploadAvatarAfter(value) { |
|||
await editClueRecord({id: details.value.id, profilePhoto: value, phone: details.value.phone, weChatId: details.value.weChatId}) |
|||
details.value.profilePhoto = value |
|||
} |
|||
|
|||
function onUploadRemove({file, index}){ |
|||
uploadList.value.splice(index, 1) |
|||
} |
|||
// 择偶标准表单配置 |
|||
const [registerForm3, { getFieldsValue: getFieldsValue3, setFieldsValue: setFieldsValue3 }] = |
|||
useForm({ |
|||
labelWidth: 120, |
|||
schemas: demandMarriageSchema, |
|||
baseColProps: { span: 22 }, |
|||
showActionButtonGroup: false, |
|||
}) |
|||
|
|||
async function handleSubmit() { |
|||
await validate1() |
|||
const baseInfo: any = getFieldsValue1() |
|||
const address1 = baseInfo.address |
|||
baseInfo.provinceCode = address1?.[0] |
|||
baseInfo.cityCode = address1?.[1] |
|||
baseInfo.districtCode = address1?.[2] |
|||
const domicilePlace1 = baseInfo.domicilePlace |
|||
baseInfo.domicilePlaceProvinceCode = domicilePlace1?.[0] |
|||
baseInfo.phone = details.value.phone || '' |
|||
baseInfo.weChatId = details.value.weChatId || '' |
|||
|
|||
const demandInfo: any = getFieldsValue3() |
|||
const { domicilePlace, address } = demandInfo || {} |
|||
baseInfo.datingClueDemand = { |
|||
...demandInfo, |
|||
...demandMarriageMoreData.value, |
|||
cityCode: address?.[1], |
|||
provinceCode: address?.[0], |
|||
districtCode: address?.[2], |
|||
domicilePlaceCityCode: domicilePlace?.[1], |
|||
domicilePlaceProvinceCode: domicilePlace?.[0] |
|||
} |
|||
const datingClueImageList = uploadList.value.map((item: any) => { |
|||
if(item.response && item.response.url){ |
|||
return item.response.url |
|||
} |
|||
return item.url |
|||
}) |
|||
await editClueRecord({id: details.value.id, ...baseInfo, datingClueImageList}) |
|||
createMessage.success('保存成功') |
|||
} |
|||
const { createMessage } = useMessage() |
|||
const [registerForm, { resetFields, validate, getFieldsValue }] = |
|||
useForm({ |
|||
labelWidth: 120, |
|||
schemas: modalFormSchema, |
|||
baseColProps: { span: 22 }, |
|||
showActionButtonGroup: false, |
|||
}) |
|||
async function handleReport() { |
|||
await validate() |
|||
const values: any = getFieldsValue() |
|||
const { nextFollowTime } = values |
|||
values.nextFollowTime = formatToDateTime(nextFollowTime) |
|||
values.datingClueId = details.value.id |
|||
await recordClueing(values) |
|||
createMessage.success('提交成功') |
|||
resetFields() |
|||
} |
|||
const spinning = ref<boolean>(false) |
|||
const reportList = ref<any[]>([]); |
|||
async function onReportChange(){ |
|||
if(activeKey2.value == '2'){ |
|||
spinning.value = true |
|||
reportList.value = await getClueRecord(details.value.id) |
|||
spinning.value = false |
|||
} |
|||
} |
|||
|
|||
// const appointmentList = ref<any[]>([]); |
|||
const [registerTable, { setTableData }] = useTable({ |
|||
bordered: true, |
|||
immediate: false, |
|||
canResize: false, |
|||
pagination: false, |
|||
useSearchForm: false, |
|||
showIndexColumn: false, |
|||
showTableSetting: false, |
|||
columns: tableColumns, |
|||
actionColumn: { |
|||
width: 120, |
|||
title: '操作', |
|||
fixed: 'right', |
|||
dataIndex: 'action', |
|||
slots: { customRender: 'action' }, |
|||
}, |
|||
}) |
|||
const [registerModal, { openModal, closeModal }] = useModal() |
|||
function handleAppointment(record) { |
|||
openModal(true, {record}) |
|||
} |
|||
// 操作成功 |
|||
function handleSuccess() { |
|||
closeModal() |
|||
reloadTable() |
|||
initFetch() |
|||
} |
|||
</script> |
|||
<style scoped lang="less"> |
|||
::v-deep .ant-input-number { |
|||
min-width: 90px; |
|||
width: 100% !important; |
|||
max-width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,64 @@ |
|||
<template> |
|||
<BasicModal v-bind="$attrs" @ok="handleOk" @register="registerModal"> |
|||
<BasicForm @register="registerForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue' |
|||
import { appointmentFormSchema } from './data' |
|||
import { useMessage } from '/@/hooks/web/useMessage' |
|||
import { BasicForm, useForm } from '/@/components/Form' |
|||
import { BasicModal, useModalInner } from '/@/components/Modal' |
|||
import { createAppointment, editAppointment } from '/@/api/clue' |
|||
import { formatToDateTime } from '/@/utils/dateUtil' |
|||
|
|||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ |
|||
labelWidth: 100, |
|||
schemas: appointmentFormSchema, |
|||
baseColProps: { span: 22 }, |
|||
showActionButtonGroup: false, |
|||
}) |
|||
|
|||
const id = ref<string>('') |
|||
const datingClueId = ref<string>('') |
|||
const ifUpdate = ref<boolean>(false) |
|||
const [registerModal, { setModalProps }] = useModalInner(async (data) => { |
|||
const { record } = data |
|||
await resetFields() |
|||
id.value = record?.id |
|||
datingClueId.value = record?.datingClueId |
|||
ifUpdate.value = !!id.value |
|||
setModalProps({ |
|||
minHeight: 50, |
|||
title: `预约到店`, |
|||
confirmLoading: false, |
|||
}) |
|||
if (!!ifUpdate.value) { |
|||
await setFieldsValue({ ...record }) |
|||
} |
|||
}) |
|||
|
|||
const { createMessage } = useMessage() |
|||
const emits = defineEmits(['success']) |
|||
async function handleOk() { |
|||
try { |
|||
const values = await validate() |
|||
setModalProps({ confirmLoading: true }) |
|||
const { appointmentTime } = values |
|||
values.appointmentTime = formatToDateTime(appointmentTime) |
|||
if(id.value){ |
|||
values.id = id.value |
|||
await editAppointment(values) |
|||
createMessage.success(`编辑成功！`) |
|||
} else { |
|||
values.datingClueId = datingClueId.value |
|||
await createAppointment(values) |
|||
createMessage.success(`邀约成功！`) |
|||
} |
|||
emits('success') |
|||
} finally { |
|||
setModalProps({ confirmLoading: false }) |
|||
} |
|||
} |
|||
</script> |
|||
Write
Preview
Loading…
Cancel
Save