|
|
@ -113,7 +113,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-row" style="width: 100%;flex: 1;margin-top: 16px;"> |
|
|
<div class="flex-row" style="width: 100%;flex: 1;margin-top: 16px;"> |
|
|
<div style="flex: 1;background: white;padding: 0px 10px 10px 10px;"> |
|
|
<div style="flex: 1;background: white;padding: 0px 10px 10px 10px;"> |
|
|
<Tabs v-model:activeKey="activeKey" :animated="false"> |
|
|
|
|
|
|
|
|
<Tabs v-model:activeKey="activeKey" :animated="false" @change="onTabChange"> |
|
|
<TabPane key="1" tab="客户资料"> |
|
|
<TabPane key="1" tab="客户资料"> |
|
|
<div class="flex-col" style="flex:1;padding-top: 16px;"> |
|
|
<div class="flex-col" style="flex:1;padding-top: 16px;"> |
|
|
<Tabs tab-position="left" v-model:activeKey="activeKey3" :animated="false" @change="onInfoChange"> |
|
|
<Tabs tab-position="left" v-model:activeKey="activeKey3" :animated="false" @change="onInfoChange"> |
|
|
@ -149,7 +149,38 @@ |
|
|
</div> |
|
|
</div> |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
<TabPane key="2" tab="邀约进店"> |
|
|
<TabPane key="2" tab="邀约进店"> |
|
|
<Result subTitle="暂无数据"></Result> |
|
|
|
|
|
|
|
|
<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> |
|
|
<TabPane key="3" tab="合同"> |
|
|
<TabPane key="3" tab="合同"> |
|
|
<Result subTitle="暂无数据"></Result> |
|
|
<Result subTitle="暂无数据"></Result> |
|
|
@ -157,12 +188,20 @@ |
|
|
<TabPane key="4" tab="约见记录"> |
|
|
<TabPane key="4" tab="约见记录"> |
|
|
<Result subTitle="暂无数据"></Result> |
|
|
<Result subTitle="暂无数据"></Result> |
|
|
</TabPane> |
|
|
</TabPane> |
|
|
<template v-if="activeKey == '1'" #tabBarExtraContent> |
|
|
|
|
|
<Button type="link" @click="handleSubmit"><template #icon><Icon icon="ant-design:edit-twotone" size="16px" style="margin-right: -4px;"/></template>保存资料</Button> |
|
|
|
|
|
|
|
|
<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> |
|
|
</template> |
|
|
</Tabs> |
|
|
</Tabs> |
|
|
</div> |
|
|
</div> |
|
|
<div style="width: 480px;background: white;margin-left: 16px;padding: 0px 10px 10px 10px;" v-if="details.allocationStatus !== 1"> |
|
|
|
|
|
|
|
|
<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"> |
|
|
<Tabs v-model:activeKey="activeKey2" :animated="false" @change="onReportChange"> |
|
|
<TabPane key="1" tab="跟进小计"> |
|
|
<TabPane key="1" tab="跟进小计"> |
|
|
<div class="flex-col-center-start" style="flex:1;padding-top: 16px;"> |
|
|
<div class="flex-col-center-start" style="flex:1;padding-top: 16px;"> |
|
|
@ -197,22 +236,26 @@ |
|
|
</Tabs> |
|
|
</Tabs> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<AppointmentModal @register="registerModal" @success="handleSuccess" /> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import { useRoute } from 'vue-router' |
|
|
import { useRoute } from 'vue-router' |
|
|
import { onMounted, ref, nextTick } from 'vue' |
|
|
import { onMounted, ref, nextTick } from 'vue' |
|
|
import { Tabs, Input, Popconfirm, Button, TabPane, Tag, Timeline, TimelineItem, Result, Spin, InputNumber } from 'ant-design-vue' |
|
|
|
|
|
|
|
|
import { Tabs, Input, Popconfirm, Button, TabPane, Tag, Timeline, TimelineItem, Result, Spin, InputNumber, Table } from 'ant-design-vue' |
|
|
import { Icon } from '/@/components/Icon' |
|
|
import { Icon } from '/@/components/Icon' |
|
|
import { useMessage } from '/@/hooks/web/useMessage' |
|
|
import { useMessage } from '/@/hooks/web/useMessage' |
|
|
import { CropperAvatar } from '/@/components/Cropper'; |
|
|
import { CropperAvatar } from '/@/components/Cropper'; |
|
|
import BasicForm from '/@/components/Form/src/BasicForm.vue' |
|
|
import BasicForm from '/@/components/Form/src/BasicForm.vue' |
|
|
|
|
|
import { BasicTable, useTable, TableAction } from '/@/components/Table' |
|
|
import { useForm } from '/@/components/Form' |
|
|
import { useForm } from '/@/components/Form' |
|
|
import { formatToDateTime } from '/@/utils/dateUtil' |
|
|
import { formatToDateTime } from '/@/utils/dateUtil' |
|
|
import { basicSchema, modalFormSchema } from './data' |
|
|
|
|
|
|
|
|
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 { demandMarriageMoreData, demandMarriageSchema } from '/@/views/clue/components/data' |
|
|
import { getClueInfo, editClueRecord, recordClueing, getClueRecord } from '/@/api/clue' |
|
|
|
|
|
|
|
|
import { getClueInfo, editClueRecord, recordClueing, getClueRecord, getAppointmentList } from '/@/api/clue' |
|
|
import { genderList, channelList, clueStatusList, followTypeList, followStageList } from '/@/enums/customerEnum' |
|
|
import { genderList, channelList, clueStatusList, followTypeList, followStageList } from '/@/enums/customerEnum' |
|
|
|
|
|
|
|
|
const details = ref<any>() |
|
|
const details = ref<any>() |
|
|
@ -248,6 +291,17 @@ |
|
|
await setFieldsValue3({ ...details.value.datingClueDemand, domicilePlace, address }) |
|
|
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 activeKey = ref<string>('1') |
|
|
const activeKey2 = ref<string>('1') |
|
|
const activeKey2 = ref<string>('1') |
|
|
@ -298,6 +352,7 @@ |
|
|
baseColProps: { span: 22 }, |
|
|
baseColProps: { span: 22 }, |
|
|
showActionButtonGroup: false, |
|
|
showActionButtonGroup: false, |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
async function handleSubmit() { |
|
|
async function handleSubmit() { |
|
|
await validate1() |
|
|
await validate1() |
|
|
const baseInfo: any = getFieldsValue1() |
|
|
const baseInfo: any = getFieldsValue1() |
|
|
@ -351,6 +406,35 @@ |
|
|
spinning.value = false |
|
|
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> |
|
|
</script> |
|
|
<style scoped lang="less"> |
|
|
<style scoped lang="less"> |
|
|
::v-deep .ant-input-number { |
|
|
::v-deep .ant-input-number { |
|
|
|
xpz2018
8 months ago