新增直达信息管理-初始版
parent
e9a1c85e7a
commit
f5e952279b
@ -0,0 +1,17 @@
|
|||||||
|
import httpClient from '@/utils/axios'
|
||||||
|
import type { ApiResult } from '@/api/types'
|
||||||
|
import type { directPageParam, distributeData } from './types'
|
||||||
|
|
||||||
|
export function pageQueryPage(pageParams: directPageParam) {
|
||||||
|
return httpClient.get<ApiResult>('/directClue/page', {
|
||||||
|
params: pageParams
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function upDistribute(data: distributeData[]) {
|
||||||
|
return httpClient.post<ApiResult>('/directClue/distribute', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getfFindDirectSalesman() {
|
||||||
|
return httpClient.get<ApiResult>('/system/user/findDirectSalesman', {})
|
||||||
|
}
|
@ -0,0 +1,32 @@
|
|||||||
|
import type { PageParam } from '@/api/types'
|
||||||
|
import type { Dayjs } from 'dayjs'
|
||||||
|
export type directParam = {
|
||||||
|
customName?: string
|
||||||
|
originType?: number | null
|
||||||
|
attribute?: string
|
||||||
|
distributeDate?: [Dayjs, Dayjs]
|
||||||
|
}
|
||||||
|
interface otherObj {
|
||||||
|
[name: string]: any
|
||||||
|
}
|
||||||
|
export type directDTO = {
|
||||||
|
directClueId?: number
|
||||||
|
batchNo?: string
|
||||||
|
nid?: string | undefined
|
||||||
|
customName?: string
|
||||||
|
originType: number
|
||||||
|
effectiveStatus: number
|
||||||
|
otherClueObj: otherObj
|
||||||
|
clueLabelName?: string
|
||||||
|
distributeType: number
|
||||||
|
distributeDate?: Dayjs | null
|
||||||
|
distributeUserId?: number | null
|
||||||
|
userId?: number[]
|
||||||
|
}
|
||||||
|
export type directPageParam = directParam & PageParam
|
||||||
|
|
||||||
|
export type distributeData = {
|
||||||
|
clueId: number
|
||||||
|
userId: number
|
||||||
|
userName: string
|
||||||
|
}
|
@ -0,0 +1,168 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 头部 -->
|
||||||
|
<a-card :bordered="false" :body-style="{ paddingBottom: 0 }">
|
||||||
|
<div class="geopoliticalCustomers-title">线索看板</div>
|
||||||
|
</a-card>
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<clue-search :loading="tableRef?.loading" @search="searchTable" />
|
||||||
|
<!-- 工具栏 -->
|
||||||
|
<!-- <a-card :bordered="false" :body-style="{ paddingBottom: 0 }">
|
||||||
|
<div class="operationButtonArea">
|
||||||
|
<a-button type="primary" @click="addShop">新建店铺</a-button>
|
||||||
|
</div>
|
||||||
|
</a-card> -->
|
||||||
|
<!-- 底部表格 -->
|
||||||
|
<pro-table
|
||||||
|
ref="tableRef"
|
||||||
|
row-key="customId"
|
||||||
|
:request="tableRequest"
|
||||||
|
:columns="columns"
|
||||||
|
:scroll="{ x: 1100 }"
|
||||||
|
:options="{ density: false }"
|
||||||
|
class="protable"
|
||||||
|
:pagination="{ showQuickJumper: true }"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'batchNo'">
|
||||||
|
<a>{{ record.id }}</a>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'operate'">
|
||||||
|
<operation-group>
|
||||||
|
<a @click="selectReservation(record)">查看</a>
|
||||||
|
</operation-group>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</pro-table>
|
||||||
|
<!-- 预约详情 -->
|
||||||
|
<clue-modal ref="clueModalRef" @submit-success="reloadTable" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
// import { message } from 'ant-design-vue'
|
||||||
|
import { doRequest } from '@/utils/axios/request'
|
||||||
|
//底部表格
|
||||||
|
import ProTable from '#/table'
|
||||||
|
import type { ProTableInstanceExpose, TableRequest, ProColumns } from '#/table'
|
||||||
|
import { mergePageParam } from '@/utils/page-utils'
|
||||||
|
import { FormAction } from '@/hooks/form'
|
||||||
|
import clueModal from './clueModal.vue'
|
||||||
|
import clueSearch from './clueSearch.vue'
|
||||||
|
import { pageQueryPage } from '@/api/directResources'
|
||||||
|
import type { directDTO, directPageParam } from '@/api/directResources/types'
|
||||||
|
defineOptions({ name: 'ClueIndex' })
|
||||||
|
|
||||||
|
//底部表格
|
||||||
|
// 表格组件引用
|
||||||
|
const tableRef = ref<ProTableInstanceExpose>()
|
||||||
|
// add ref
|
||||||
|
const clueModalRef = ref<InstanceType<typeof clueModal>>()
|
||||||
|
// const reservationModalRef = ref<InstanceType<typeof reservationModal>>()
|
||||||
|
// 查询参数
|
||||||
|
let searchParams: directPageParam = {}
|
||||||
|
const columns = ref<any[]>([
|
||||||
|
{
|
||||||
|
title: '编号',
|
||||||
|
width: 80,
|
||||||
|
dataIndex: 'batchNo'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '客户名称',
|
||||||
|
dataIndex: 'customName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '手机号码',
|
||||||
|
dataIndex: 'nid'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '分发日期',
|
||||||
|
dataIndex: 'distributeDate',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
customRender: function ({ record }: any) {
|
||||||
|
if (record.distributeDate) {
|
||||||
|
return record.distributeDate
|
||||||
|
} else if (record.distributeDate == null) {
|
||||||
|
return '--'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '跟进员',
|
||||||
|
dataIndex: 'userNameList',
|
||||||
|
customRender: ({ record }: any) => {
|
||||||
|
if (record.userNameList.length > 0) {
|
||||||
|
return h('div', record.userNameList.join(','))
|
||||||
|
} else {
|
||||||
|
return h('div', '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '来源',
|
||||||
|
dataIndex: 'originType',
|
||||||
|
customRender: ({ record }: any) => {
|
||||||
|
if (record.originType === 0) {
|
||||||
|
return h('div', '巨量')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '地址',
|
||||||
|
dataIndex: 'address',
|
||||||
|
customRender: function ({ record }: any) {
|
||||||
|
return h('div', record.otherClueObj.address)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '微信',
|
||||||
|
dataIndex: 'wx',
|
||||||
|
customRender: function ({ record }: any) {
|
||||||
|
return h('div', record.otherClueObj.wx)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'operate',
|
||||||
|
title: '操作',
|
||||||
|
align: 'center',
|
||||||
|
width: 70,
|
||||||
|
fixed: 'right'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
//远程加载表格数据
|
||||||
|
const tableRequest: TableRequest = (params, sorter, filter) => {
|
||||||
|
const pageParam = mergePageParam(params, sorter, filter)
|
||||||
|
return pageQueryPage({ ...pageParam, ...searchParams }).then(result => {
|
||||||
|
return Promise.resolve(result)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//刷新表格
|
||||||
|
const reloadTable = (resetPageIndex?: boolean) => {
|
||||||
|
tableRef.value?.actionRef?.reload(resetPageIndex)
|
||||||
|
}
|
||||||
|
|
||||||
|
//查询表格
|
||||||
|
const searchTable = (params: directPageParam) => {
|
||||||
|
searchParams = params
|
||||||
|
reloadTable(true) // 会调用 tableRequest
|
||||||
|
}
|
||||||
|
const selectReservation = (record: directDTO) => {
|
||||||
|
clueModalRef.value?.open(FormAction.OTHER, record)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.geopoliticalCustomers-title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
//批量操作、更多操作
|
||||||
|
.operationButtonArea {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
.editable-row-operations a {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,172 @@
|
|||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
:title="title"
|
||||||
|
:visible="visible"
|
||||||
|
:mask-closable="false"
|
||||||
|
:centered="true"
|
||||||
|
:body-style="{ paddingBottom: '8px' }"
|
||||||
|
:confirm-loading="submitLoading"
|
||||||
|
:width="700"
|
||||||
|
@cancel="handleClose"
|
||||||
|
>
|
||||||
|
<div class="model-body sim-cont">
|
||||||
|
<a-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formModel"
|
||||||
|
:label-col="{ sm: { span: 24 }, md: { span: 8 } }"
|
||||||
|
:wrapper-col="wrapperCol"
|
||||||
|
>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="客户名称" name="customName">
|
||||||
|
<a-input v-model:value="formModel.customName" readonly placeholder="请输入" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="手机号码" name="nid">
|
||||||
|
<a-input v-model:value="formModel.nid" readonly placeholder="请输入" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="分发日期" name="distributeDate">
|
||||||
|
<a-time-picker
|
||||||
|
v-model:value="formModel.distributeDate"
|
||||||
|
disabled
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
show-time
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="来源" name="originType">
|
||||||
|
<a-select v-model:value="formModel.originType" disabled placeholder="请选择来源">
|
||||||
|
<a-select-option :value="0">巨量</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="地址" name="address">
|
||||||
|
<a-input
|
||||||
|
v-model:value="formModel.otherClueObj.address"
|
||||||
|
readonly
|
||||||
|
placeholder="请输入"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="微信" name="wx">
|
||||||
|
<a-input v-model:value="formModel.otherClueObj.wx" readonly />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item
|
||||||
|
label="留资"
|
||||||
|
:label-col="{ sm: { span: 24 }, md: { span: 4 } }"
|
||||||
|
:wrapper-col="{ sm: { span: 24 }, md: { span: 20 } }"
|
||||||
|
>
|
||||||
|
<a-list item-layout="horizontal" :data-source="formModel.otherClueObj.remarkArr">
|
||||||
|
<template #renderItem="{ item }">
|
||||||
|
<a-list-item>
|
||||||
|
<a-list-item-meta :description="item[0]">
|
||||||
|
<template #title>
|
||||||
|
<a href="#">{{ item[1] }}</a>
|
||||||
|
</template>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
</template>
|
||||||
|
</a-list>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<a-button key="back" @click="handleClose">关闭</a-button>
|
||||||
|
</template>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, onMounted, toRefs } from 'vue'
|
||||||
|
import { useModal } from '@/hooks/modal'
|
||||||
|
import { overrideProperties } from '@/utils/bean-utils'
|
||||||
|
import type { FormRequestMapping } from '@/hooks/form'
|
||||||
|
// import type { shopDTO } from '@/api/geopoliticalCustomers/types'
|
||||||
|
import { useAdminForm, useFormAction, FormAction, wrapperCol } from '@/hooks/form'
|
||||||
|
import type { directDTO } from '@/api/directResources/types'
|
||||||
|
import type { FormInstance } from 'ant-design-vue/es/form/Form'
|
||||||
|
//预约时间
|
||||||
|
import 'dayjs/locale/zh-cn'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
const emits = defineEmits<{
|
||||||
|
(e: 'submit-success'): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const formModel = reactive<directDTO>({
|
||||||
|
directClueId: undefined,
|
||||||
|
batchNo: '',
|
||||||
|
nid: '',
|
||||||
|
customName: '',
|
||||||
|
originType: 0,
|
||||||
|
effectiveStatus: 0,
|
||||||
|
distributeType: 0,
|
||||||
|
otherClueObj: {},
|
||||||
|
distributeDate: null,
|
||||||
|
distributeUserId: undefined
|
||||||
|
})
|
||||||
|
const formRef = ref<FormInstance>()
|
||||||
|
|
||||||
|
// 表单校验规则
|
||||||
|
const formRule = ref({})
|
||||||
|
|
||||||
|
const { title, visible, openModal, closeModal } = useModal()
|
||||||
|
|
||||||
|
const { formAction } = useFormAction()
|
||||||
|
|
||||||
|
// 表单的提交请求
|
||||||
|
const formRequestMapping: FormRequestMapping<directDTO> = {}
|
||||||
|
|
||||||
|
const { submitLoading, resetFields } = useAdminForm(
|
||||||
|
formAction,
|
||||||
|
formRequestMapping,
|
||||||
|
formModel,
|
||||||
|
formRule
|
||||||
|
)
|
||||||
|
onMounted(() => {})
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
closeModal()
|
||||||
|
submitLoading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
async open(newFormAction: FormAction, record: directDTO) {
|
||||||
|
openModal()
|
||||||
|
resetFields()
|
||||||
|
if (newFormAction === FormAction.OTHER) {
|
||||||
|
title.value = '详情'
|
||||||
|
record.distributeDate = dayjs(record?.distributeDate, 'YYYY-MM-DD HH:mm:ss')
|
||||||
|
record.otherClueObj.remarkArr = Object.entries(JSON.parse(record.otherClueObj.remarkDict))
|
||||||
|
overrideProperties(formModel, record)
|
||||||
|
}
|
||||||
|
formAction.value = newFormAction
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
//权重配置两列
|
||||||
|
|
||||||
|
::v-deep .ant-picker {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.model-body {
|
||||||
|
max-height: 70vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,137 @@
|
|||||||
|
<template>
|
||||||
|
<a-card :bordered="false" style="margin-bottom: 16px" :body-style="{ paddingBottom: 0 }">
|
||||||
|
<a-form :model="formModel" :label-col="labelCol">
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<!-- v-if="userInfoCurrent === 'ROLE_ADMIN'" -->
|
||||||
|
<div class="top-panel u-flex flex-between">
|
||||||
|
<a-row>
|
||||||
|
<a-col :xl="8" :md="12" :sm="24">
|
||||||
|
<a-form-item label="客户名称">
|
||||||
|
<a-input v-model:value="formModel.customName" placeholder="请输入" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="8" :md="12" :sm="24">
|
||||||
|
<a-form-item label="分发日期">
|
||||||
|
<a-range-picker
|
||||||
|
v-model:value="formModel.distributeDate"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="8" :md="12" :sm="24">
|
||||||
|
<a-form-item label="来源">
|
||||||
|
<a-select v-model:value="formModel.originType">
|
||||||
|
<a-select-option :value="0">巨量</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<!-- <a-col :xl="8" :md="12" :sm="24">
|
||||||
|
<a-form-item label="是否有效">
|
||||||
|
<a-select v-model:value="formModel.effectiveStatus">
|
||||||
|
<a-select-option :value="0">无效</a-select-option>
|
||||||
|
<a-select-option :value="1">有效</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col> -->
|
||||||
|
<a-col :xl="24" :md="24" :sm="24">
|
||||||
|
<search-actions :loading="props.loading" @search="search" @reset="reset" />
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<div class="bulletin">
|
||||||
|
<p class="title text-center">分发统计</p>
|
||||||
|
<div>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-statistic title="总成交数" :value="112893" style="margin-right: 50px" />
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-statistic title="总分发数" :precision="2" :value="112893" />
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
<div class="text-center c-red">转化成交比例 80%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Form } from 'ant-design-vue'
|
||||||
|
import type { directPageParam } from '@/api/directResources/types'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import type { Dayjs } from 'dayjs'
|
||||||
|
//获取当前账号角色
|
||||||
|
import { useUserStore } from '@/stores/user-store'
|
||||||
|
const { userInfo } = useUserStore()
|
||||||
|
|
||||||
|
const userInfoCurrent = ref<string | undefined>('')
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
const useForm = Form.useForm
|
||||||
|
// 表单 label 全局配置
|
||||||
|
const labelCol = { md: { span: 6 } }
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
loading?: boolean
|
||||||
|
}>(),
|
||||||
|
{ loading: false }
|
||||||
|
)
|
||||||
|
|
||||||
|
const emits = defineEmits<{
|
||||||
|
(e: 'search', params: Record<string, any>): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const formModel = reactive<directPageParam>({
|
||||||
|
customName: '',
|
||||||
|
distributeDate: undefined,
|
||||||
|
originType: null,
|
||||||
|
effectiveStatus: null
|
||||||
|
})
|
||||||
|
watch(
|
||||||
|
() => formModel.distributeDate,
|
||||||
|
nval => {
|
||||||
|
if (nval && nval.length == 2) {
|
||||||
|
formModel.startTime = dayjs(nval[0]).format('YYYY-MM-DD')
|
||||||
|
formModel.endTime = dayjs(nval[1]).format('YYYY-MM-DD')
|
||||||
|
} else {
|
||||||
|
formModel.distributeDate = undefined
|
||||||
|
formModel.startTime = undefined
|
||||||
|
formModel.endTime = undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
const { resetFields } = useForm(formModel)
|
||||||
|
|
||||||
|
const search = () => {
|
||||||
|
const param = toRaw(formModel)
|
||||||
|
if (param.distributeDate && param.distributeDate.length == 2) {
|
||||||
|
delete param.distributeDate
|
||||||
|
}
|
||||||
|
emits('search', param)
|
||||||
|
}
|
||||||
|
|
||||||
|
const reset = () => {
|
||||||
|
// 清空表单其他元素
|
||||||
|
resetFields()
|
||||||
|
search()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.bulletin {
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 0 0 24px 10px;
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top-panel {
|
||||||
|
width: 100%;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,172 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 头部 -->
|
||||||
|
<a-card :bordered="false" :body-style="{ paddingBottom: 0 }">
|
||||||
|
<div class="geopoliticalCustomers-title">客户看板</div>
|
||||||
|
</a-card>
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<customer-search :loading="tableRef?.loading" @search="searchTable" />
|
||||||
|
<!-- 工具栏 -->
|
||||||
|
<!-- <a-card :bordered="false" :body-style="{ paddingBottom: 0 }">
|
||||||
|
<div class="operationButtonArea">
|
||||||
|
<a-button type="primary" @click="addShop">新建店铺</a-button>
|
||||||
|
</div>
|
||||||
|
</a-card> -->
|
||||||
|
<!-- 底部表格 -->
|
||||||
|
<pro-table
|
||||||
|
ref="tableRef"
|
||||||
|
row-key="customId"
|
||||||
|
:request="tableRequest"
|
||||||
|
:columns="columns"
|
||||||
|
:scroll="{ x: 1100 }"
|
||||||
|
:options="{ density: false }"
|
||||||
|
class="protable"
|
||||||
|
:pagination="{ showQuickJumper: true }"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'batchNo'">
|
||||||
|
<a>{{ record.id }}</a>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'operate'">
|
||||||
|
<operation-group>
|
||||||
|
<a @click="selectReservation(record)">查看</a>
|
||||||
|
</operation-group>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</pro-table>
|
||||||
|
<!-- 预约详情 -->
|
||||||
|
<customer-modal ref="customerModalRef" @submit-success="reloadTable" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
// import { message } from 'ant-design-vue'
|
||||||
|
import { doRequest } from '@/utils/axios/request'
|
||||||
|
//底部表格
|
||||||
|
import ProTable from '#/table'
|
||||||
|
import type { ProTableInstanceExpose, TableRequest, ProColumns } from '#/table'
|
||||||
|
import { mergePageParam } from '@/utils/page-utils'
|
||||||
|
import { FormAction } from '@/hooks/form'
|
||||||
|
import customerModal from './customerModal.vue'
|
||||||
|
import customerSearch from './customerSearch.vue'
|
||||||
|
import { pageQueryPage } from '@/api/directResources'
|
||||||
|
import type { directDTO, directPageParam } from '@/api/directResources/types'
|
||||||
|
import { useUserStore } from '@/stores/user-store'
|
||||||
|
defineOptions({ name: 'ClueIndex' })
|
||||||
|
|
||||||
|
const { userInfo } = useUserStore()
|
||||||
|
//底部表格
|
||||||
|
// 表格组件引用
|
||||||
|
const tableRef = ref<ProTableInstanceExpose>()
|
||||||
|
// add ref
|
||||||
|
const customerModalRef = ref<InstanceType<typeof customerModal>>()
|
||||||
|
// const reservationModalRef = ref<InstanceType<typeof reservationModal>>()
|
||||||
|
// 查询参数
|
||||||
|
let searchParams: directPageParam = {
|
||||||
|
salesmanUserId: userInfo && userInfo.userId
|
||||||
|
}
|
||||||
|
const columns = ref<any[]>([
|
||||||
|
{
|
||||||
|
title: '编号',
|
||||||
|
width: 80,
|
||||||
|
dataIndex: 'batchNo'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '客户名称',
|
||||||
|
dataIndex: 'customName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '手机号码',
|
||||||
|
dataIndex: 'nid'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '跟进员',
|
||||||
|
dataIndex: 'userNameList',
|
||||||
|
customRender: ({ record }: any) => {
|
||||||
|
if (record.userNameList.length > 0) {
|
||||||
|
return h('div', record.userNameList.join(','))
|
||||||
|
} else {
|
||||||
|
return h('div', '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '来源',
|
||||||
|
dataIndex: 'originType',
|
||||||
|
customRender: ({ record }: any) => {
|
||||||
|
if (record.originType === 0) {
|
||||||
|
return h('div', '巨量')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '地址',
|
||||||
|
dataIndex: 'address',
|
||||||
|
customRender: function ({ record }: any) {
|
||||||
|
return h('div', record.otherClueObj.address)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '微信',
|
||||||
|
dataIndex: 'wx',
|
||||||
|
customRender: function ({ record }: any) {
|
||||||
|
return h('div', record.otherClueObj.wx)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建日期',
|
||||||
|
dataIndex: 'distributeDate',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
customRender: function ({ record }: any) {
|
||||||
|
if (record.distributeDate) {
|
||||||
|
return record.distributeDate
|
||||||
|
} else if (record.distributeDate == null) {
|
||||||
|
return '--'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'operate',
|
||||||
|
title: '操作',
|
||||||
|
align: 'center',
|
||||||
|
width: 70,
|
||||||
|
fixed: 'right'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
//远程加载表格数据
|
||||||
|
const tableRequest: TableRequest = (params, sorter, filter) => {
|
||||||
|
const pageParam = mergePageParam(params, sorter, filter)
|
||||||
|
return pageQueryPage({ ...pageParam, ...searchParams }).then(result => {
|
||||||
|
return Promise.resolve(result)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//刷新表格
|
||||||
|
const reloadTable = (resetPageIndex?: boolean) => {
|
||||||
|
tableRef.value?.actionRef?.reload(resetPageIndex)
|
||||||
|
}
|
||||||
|
|
||||||
|
//查询表格
|
||||||
|
const searchTable = (params: directPageParam) => {
|
||||||
|
searchParams = params
|
||||||
|
reloadTable(true) // 会调用 tableRequest
|
||||||
|
}
|
||||||
|
const selectReservation = (record: directDTO) => {
|
||||||
|
customerModalRef.value?.open(FormAction.OTHER, record)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.geopoliticalCustomers-title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
//批量操作、更多操作
|
||||||
|
.operationButtonArea {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
.editable-row-operations a {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
:title="title"
|
||||||
|
:visible="visible"
|
||||||
|
:mask-closable="false"
|
||||||
|
:centered="true"
|
||||||
|
:body-style="{ paddingBottom: '8px' }"
|
||||||
|
:confirm-loading="submitLoading"
|
||||||
|
:width="700"
|
||||||
|
@cancel="handleClose"
|
||||||
|
>
|
||||||
|
<div class="model-body sim-cont">
|
||||||
|
<a-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formModel"
|
||||||
|
:label-col="{ sm: { span: 24 }, md: { span: 8 } }"
|
||||||
|
:wrapper-col="wrapperCol"
|
||||||
|
>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="客户名称" name="customName">
|
||||||
|
<a-input v-model:value="formModel.customName" readonly placeholder="请输入" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="手机号码" name="nid">
|
||||||
|
<a-input v-model:value="formModel.nid" readonly placeholder="请输入" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="分发日期" name="distributeDate">
|
||||||
|
<a-time-picker
|
||||||
|
v-model:value="formModel.distributeDate"
|
||||||
|
disabled
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
show-time
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="来源" name="originType">
|
||||||
|
<a-select v-model:value="formModel.originType" disabled placeholder="请选择来源">
|
||||||
|
<a-select-option :value="0">巨量</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="地址" name="address">
|
||||||
|
<a-input
|
||||||
|
v-model:value="formModel.otherClueObj.address"
|
||||||
|
readonly
|
||||||
|
placeholder="请输入"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="微信" name="wx">
|
||||||
|
<a-input v-model:value="formModel.otherClueObj.wx" readonly />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item
|
||||||
|
label="留资"
|
||||||
|
:label-col="{ sm: { span: 24 }, md: { span: 4 } }"
|
||||||
|
:wrapper-col="{ sm: { span: 24 }, md: { span: 20 } }"
|
||||||
|
>
|
||||||
|
<a-list item-layout="horizontal" :data-source="formModel.otherClueObj.remarkArr">
|
||||||
|
<template #renderItem="{ item }">
|
||||||
|
<a-list-item>
|
||||||
|
<a-list-item-meta :description="item[0]">
|
||||||
|
<template #title>
|
||||||
|
<a href="#">{{ item[1] }}</a>
|
||||||
|
</template>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
</template>
|
||||||
|
</a-list>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<a-button key="back" @click="handleClose">关闭</a-button>
|
||||||
|
</template>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, onMounted, toRefs } from 'vue'
|
||||||
|
import { useModal } from '@/hooks/modal'
|
||||||
|
import { overrideProperties } from '@/utils/bean-utils'
|
||||||
|
import type { FormRequestMapping } from '@/hooks/form'
|
||||||
|
// import type { shopDTO } from '@/api/geopoliticalCustomers/types'
|
||||||
|
import { useAdminForm, useFormAction, FormAction, wrapperCol } from '@/hooks/form'
|
||||||
|
import type { directDTO } from '@/api/directResources/types'
|
||||||
|
import type { FormInstance } from 'ant-design-vue/es/form/Form'
|
||||||
|
//预约时间
|
||||||
|
import 'dayjs/locale/zh-cn'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
const emits = defineEmits<{
|
||||||
|
(e: 'submit-success'): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const formModel = reactive<directDTO>({
|
||||||
|
batchNo: '',
|
||||||
|
nid: '',
|
||||||
|
customName: '',
|
||||||
|
originType: 0,
|
||||||
|
effectiveStatus: 0,
|
||||||
|
distributeType: 0,
|
||||||
|
otherClueObj: {},
|
||||||
|
distributeDate: null,
|
||||||
|
distributeUserId: undefined
|
||||||
|
})
|
||||||
|
const formRef = ref<FormInstance>()
|
||||||
|
|
||||||
|
// 表单校验规则
|
||||||
|
const formRule = ref({})
|
||||||
|
|
||||||
|
const { title, visible, openModal, closeModal } = useModal()
|
||||||
|
|
||||||
|
const { formAction } = useFormAction()
|
||||||
|
|
||||||
|
// 表单的提交请求
|
||||||
|
const formRequestMapping: FormRequestMapping<directDTO> = {}
|
||||||
|
|
||||||
|
const { submitLoading, resetFields } = useAdminForm(
|
||||||
|
formAction,
|
||||||
|
formRequestMapping,
|
||||||
|
formModel,
|
||||||
|
formRule
|
||||||
|
)
|
||||||
|
onMounted(() => {})
|
||||||
|
const handleClose = () => {
|
||||||
|
closeModal()
|
||||||
|
submitLoading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
async open(newFormAction: FormAction, record: directDTO) {
|
||||||
|
openModal()
|
||||||
|
resetFields()
|
||||||
|
if (newFormAction === FormAction.OTHER) {
|
||||||
|
title.value = '详情'
|
||||||
|
record.distributeDate = dayjs(record?.distributeDate, 'YYYY-MM-DD HH:mm:ss')
|
||||||
|
// JSON.parse(record.otherClueObj.remarkDict)
|
||||||
|
record.otherClueObj.remarkArr = Object.entries(JSON.parse(record.otherClueObj.remarkDict))
|
||||||
|
overrideProperties(formModel, record)
|
||||||
|
}
|
||||||
|
formAction.value = newFormAction
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
//权重配置两列
|
||||||
|
|
||||||
|
::v-deep .ant-picker {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.model-body {
|
||||||
|
max-height: 70vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,92 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
|
||||||
|
* @Date: 2023-11-01 10:36:18
|
||||||
|
* @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
|
||||||
|
* @LastEditTime: 2023-11-06 15:06:05
|
||||||
|
* @FilePath: \byhl-zt\src\views\directResources\customerPanel\customerSearch.vue
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<a-card :bordered="false" style="margin-bottom: 16px" :body-style="{ paddingBottom: 0 }">
|
||||||
|
<a-form :model="formModel" :label-col="labelCol">
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :xl="8" :md="12" :sm="24">
|
||||||
|
<a-form-item label="客户名称">
|
||||||
|
<a-input v-model:value="formModel.customName" placeholder="请输入" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="8" :md="12" :sm="24">
|
||||||
|
<a-form-item label="来源">
|
||||||
|
<a-select v-model:value="formModel.originType">
|
||||||
|
<a-select-option :value="0">巨量</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="24" :md="24" :sm="24">
|
||||||
|
<search-actions :loading="props.loading" @search="search" @reset="reset" />
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Form } from 'ant-design-vue'
|
||||||
|
import type { directPageParam } from '@/api/directResources/types'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { useUserStore } from '@/stores/user-store'
|
||||||
|
//获取当前账号角色
|
||||||
|
onMounted(() => {
|
||||||
|
})
|
||||||
|
const { userInfo } = useUserStore()
|
||||||
|
const useForm = Form.useForm
|
||||||
|
// 表单 label 全局配置
|
||||||
|
const labelCol = { md: { span: 6 } }
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
loading?: boolean
|
||||||
|
}>(),
|
||||||
|
{ loading: false }
|
||||||
|
)
|
||||||
|
|
||||||
|
const emits = defineEmits<{
|
||||||
|
(e: 'search', params: Record<string, any>): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const formModel = reactive<directPageParam>({
|
||||||
|
customName: '',
|
||||||
|
distributeDate: undefined,
|
||||||
|
distributeType: null,
|
||||||
|
originType: null,
|
||||||
|
effectiveStatus: null
|
||||||
|
})
|
||||||
|
watch(
|
||||||
|
() => formModel.distributeDate,
|
||||||
|
nval => {
|
||||||
|
if (nval && nval.length == 2) {
|
||||||
|
formModel.startTime = dayjs(nval[0]).format('YYYY-MM-DD')
|
||||||
|
formModel.endTime = dayjs(nval[1]).format('YYYY-MM-DD')
|
||||||
|
} else {
|
||||||
|
formModel.distributeDate = undefined
|
||||||
|
formModel.startTime = undefined
|
||||||
|
formModel.endTime = undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
const { resetFields } = useForm(formModel)
|
||||||
|
|
||||||
|
const search = () => {
|
||||||
|
const param = toRaw(formModel)
|
||||||
|
if (param.distributeDate && param.distributeDate.length == 2) {
|
||||||
|
delete param.distributeDate
|
||||||
|
}
|
||||||
|
param.salesmanUserId = userInfo && userInfo.userId
|
||||||
|
emits('search', param)
|
||||||
|
}
|
||||||
|
|
||||||
|
const reset = () => {
|
||||||
|
// 清空表单其他元素
|
||||||
|
resetFields()
|
||||||
|
search()
|
||||||
|
}
|
||||||
|
</script>
|
@ -0,0 +1,188 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 头部 -->
|
||||||
|
<a-card :bordered="false" :body-style="{ paddingBottom: 0 }">
|
||||||
|
<div class="geopoliticalCustomers-title">检后分发</div>
|
||||||
|
</a-card>
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<distribute-search :loading="tableRef?.loading" @search="searchTable" />
|
||||||
|
<!-- 工具栏 -->
|
||||||
|
<!-- <a-card :bordered="false" :body-style="{ paddingBottom: 0 }">
|
||||||
|
<div class="operationButtonArea">
|
||||||
|
<a-button type="primary" @click="addShop">新建店铺</a-button>
|
||||||
|
</div>
|
||||||
|
</a-card> -->
|
||||||
|
<!-- 底部表格 -->
|
||||||
|
<!-- <resize-observer></resize-observer> -->
|
||||||
|
<pro-table
|
||||||
|
ref="tableRef"
|
||||||
|
row-key="customId"
|
||||||
|
header-title="分发线索"
|
||||||
|
:request="tableRequest"
|
||||||
|
:columns="columns"
|
||||||
|
:scroll="{ x: 1100 }"
|
||||||
|
class="protable"
|
||||||
|
:options="{ density: false }"
|
||||||
|
:pagination="{ showQuickJumper: true }"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'id'">
|
||||||
|
<a>{{ record.id }}</a>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'operate'">
|
||||||
|
<operation-group>
|
||||||
|
<a :class="{ 'forbid-click': record.distributeType == 1 }" @click="editShop(record)"
|
||||||
|
>分发</a
|
||||||
|
>
|
||||||
|
</operation-group>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</pro-table>
|
||||||
|
<!-- 新建/编辑弹窗 -->
|
||||||
|
<distribute-modal ref="distributeModalRef" @submit-success="reloadTable" />
|
||||||
|
<!-- 预约详情 -->
|
||||||
|
<!-- <reservation-modal ref="reservationModalRef"></reservation-modal> -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
// import { message } from 'ant-design-vue'
|
||||||
|
import { doRequest } from '@/utils/axios/request'
|
||||||
|
//底部表格
|
||||||
|
import ProTable from '#/table'
|
||||||
|
import type { ProTableInstanceExpose, TableRequest, ProColumns } from '#/table'
|
||||||
|
import { mergePageParam } from '@/utils/page-utils'
|
||||||
|
import { FormAction } from '@/hooks/form'
|
||||||
|
import distributeModal from './distributeModal.vue'
|
||||||
|
import distributeSearch from './distributeSearch.vue'
|
||||||
|
import { pageQueryPage } from '@/api/directResources'
|
||||||
|
import type { directDTO, directPageParam } from '@/api/directResources/types'
|
||||||
|
import { useUserStore } from '@/stores/user-store'
|
||||||
|
import ResizeObserver from 'ant-design-vue/es/vc-resize-observer'
|
||||||
|
defineOptions({ name: 'DistributeIndex' })
|
||||||
|
|
||||||
|
const { userInfo } = useUserStore()
|
||||||
|
//底部表格
|
||||||
|
// 表格组件引用
|
||||||
|
const tableRef = ref<ProTableInstanceExpose>()
|
||||||
|
// add ref
|
||||||
|
const distributeModalRef = ref<InstanceType<typeof distributeModal>>()
|
||||||
|
// 查询参数
|
||||||
|
let searchParams: directPageParam = {
|
||||||
|
distributeUserId: userInfo && userInfo.userId
|
||||||
|
}
|
||||||
|
const columns = ref<any[]>([
|
||||||
|
{
|
||||||
|
title: '编号',
|
||||||
|
width: 80,
|
||||||
|
dataIndex: 'batchNo'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '客户名称',
|
||||||
|
dataIndex: 'customName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '手机号码',
|
||||||
|
dataIndex: 'nid'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '分发日期',
|
||||||
|
dataIndex: 'distributeDate',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
customRender: function ({ record }: any) {
|
||||||
|
if (record.distributeDate) {
|
||||||
|
return record.distributeDate
|
||||||
|
} else if (record.distributeDate == null) {
|
||||||
|
return '--'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '跟进员',
|
||||||
|
dataIndex: 'userNameList',
|
||||||
|
customRender: ({ record }: any) => {
|
||||||
|
if (record.userNameList.length > 0) {
|
||||||
|
return h('div', record.userNameList.join(','))
|
||||||
|
} else {
|
||||||
|
return h('div', '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '来源',
|
||||||
|
dataIndex: 'originType',
|
||||||
|
customRender: ({ record }: any) => {
|
||||||
|
if (record.originType === 0) {
|
||||||
|
return h('div', '巨量')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '地址',
|
||||||
|
dataIndex: 'address',
|
||||||
|
customRender: function ({ record }: any) {
|
||||||
|
return h('div', record.otherClueObj.address)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '微信',
|
||||||
|
dataIndex: 'wx',
|
||||||
|
customRender: function ({ record }: any) {
|
||||||
|
return h('div', record.otherClueObj.wx)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'operate',
|
||||||
|
title: '操作',
|
||||||
|
align: 'center',
|
||||||
|
width: 70,
|
||||||
|
fixed: 'right'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
//远程加载表格数据
|
||||||
|
const tableRequest: TableRequest = (params, sorter, filter) => {
|
||||||
|
const pageParam = mergePageParam(params, sorter, filter)
|
||||||
|
return pageQueryPage({ ...pageParam, ...searchParams }).then(result => {
|
||||||
|
return Promise.resolve(result)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//刷新表格
|
||||||
|
const reloadTable = (resetPageIndex?: boolean) => {
|
||||||
|
tableRef.value?.actionRef?.reload(resetPageIndex)
|
||||||
|
}
|
||||||
|
|
||||||
|
//查询表格
|
||||||
|
const searchTable = (params: directPageParam) => {
|
||||||
|
searchParams = params
|
||||||
|
reloadTable(true) // 会调用 tableRequest
|
||||||
|
}
|
||||||
|
const editShop = (record: directDTO) => {
|
||||||
|
if (record.distributeType == 1) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
distributeModalRef.value?.open(FormAction.UPDATE, record)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.geopoliticalCustomers-title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
//批量操作、更多操作
|
||||||
|
.operationButtonArea {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
.editable-row-operations a {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.forbid-click {
|
||||||
|
pointer-events: none;
|
||||||
|
// filter: alpha(opacity=50);
|
||||||
|
// -moz-opacity: 0.5;
|
||||||
|
// opacity: 0.5;
|
||||||
|
color: rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,216 @@
|
|||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
:title="title"
|
||||||
|
:visible="visible"
|
||||||
|
:mask-closable="false"
|
||||||
|
:centered="true"
|
||||||
|
:body-style="{ paddingBottom: '8px' }"
|
||||||
|
:confirm-loading="submitLoading"
|
||||||
|
ok-text="分发"
|
||||||
|
:width="700"
|
||||||
|
@ok="handleSubmit"
|
||||||
|
@cancel="handleClose"
|
||||||
|
>
|
||||||
|
<div class="model-body sim-cont">
|
||||||
|
<a-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formModel"
|
||||||
|
:label-col="{ sm: { span: 24 }, md: { span: 8 } }"
|
||||||
|
:wrapper-col="wrapperCol"
|
||||||
|
>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="客户名称" name="customName">
|
||||||
|
<a-input v-model:value="formModel.customName" readonly placeholder="请输入" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="手机号码" name="nid">
|
||||||
|
<a-input v-model:value="formModel.nid" readonly placeholder="请输入" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="分发日期" name="distributeDate">
|
||||||
|
<a-time-picker
|
||||||
|
v-model:value="formModel.distributeDate"
|
||||||
|
disabled
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
show-time
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="来源" name="originType">
|
||||||
|
<a-select v-model:value="formModel.originType" disabled placeholder="请选择来源">
|
||||||
|
<a-select-option :value="0">巨量</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="地址" name="address">
|
||||||
|
<a-input
|
||||||
|
v-model:value="formModel.otherClueObj.address"
|
||||||
|
readonly
|
||||||
|
placeholder="请输入"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="微信" name="wx">
|
||||||
|
<a-input v-model:value="formModel.otherClueObj.wx" readonly />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item
|
||||||
|
label="业务员"
|
||||||
|
name="userId"
|
||||||
|
:rules="[{ required: true, message: '请选择业务员' }]"
|
||||||
|
>
|
||||||
|
<a-select v-model:value="formModel.userId" mode="multiple" placeholder="请选择业务员">
|
||||||
|
<a-select-option v-for="item in userList" :key="item.userId" :value="item.userId">{{
|
||||||
|
item.userName
|
||||||
|
}}</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row justify="start">
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item
|
||||||
|
label="留资"
|
||||||
|
:label-col="{ sm: { span: 24 }, md: { span: 4 } }"
|
||||||
|
:wrapper-col="{ sm: { span: 24 }, md: { span: 20 } }"
|
||||||
|
>
|
||||||
|
<a-list item-layout="horizontal" :data-source="formModel.otherClueObj.remarkArr">
|
||||||
|
<template #renderItem="{ item }">
|
||||||
|
<a-list-item>
|
||||||
|
<a-list-item-meta :description="item[0]">
|
||||||
|
<template #title>
|
||||||
|
<a href="#">{{ item[1] }}</a>
|
||||||
|
</template>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
</template>
|
||||||
|
</a-list>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, onMounted, toRefs } from 'vue'
|
||||||
|
import { useModal } from '@/hooks/modal'
|
||||||
|
import { overrideProperties } from '@/utils/bean-utils'
|
||||||
|
import type { FormRequestMapping } from '@/hooks/form'
|
||||||
|
import { doRequest } from '@/utils/axios/request'
|
||||||
|
import { useAdminForm, useFormAction, FormAction, wrapperCol } from '@/hooks/form'
|
||||||
|
import type { directDTO, distributeData } from '@/api/directResources/types'
|
||||||
|
import { upDistribute, getfFindDirectSalesman } from '@/api/directResources/index'
|
||||||
|
import type { FormInstance } from 'ant-design-vue/es/form/Form'
|
||||||
|
//预约时间
|
||||||
|
import 'dayjs/locale/zh-cn'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
const emits = defineEmits<{
|
||||||
|
(e: 'submit-success'): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const formModel = reactive<directDTO>({
|
||||||
|
directClueId: undefined,
|
||||||
|
batchNo: '',
|
||||||
|
nid: '',
|
||||||
|
customName: '',
|
||||||
|
originType: 0,
|
||||||
|
effectiveStatus: 0,
|
||||||
|
distributeType: 0,
|
||||||
|
otherClueObj: {},
|
||||||
|
distributeDate: null,
|
||||||
|
distributeUserId: undefined
|
||||||
|
})
|
||||||
|
const formRef = ref<FormInstance>()
|
||||||
|
let userList: any = []
|
||||||
|
// 表单校验规则
|
||||||
|
const formRule = ref({})
|
||||||
|
|
||||||
|
const { title, visible, openModal, closeModal } = useModal()
|
||||||
|
|
||||||
|
const { formAction } = useFormAction()
|
||||||
|
|
||||||
|
// 表单的提交请求
|
||||||
|
const formRequestMapping: FormRequestMapping<directDTO> = {}
|
||||||
|
|
||||||
|
const { submitLoading, resetFields } = useAdminForm(
|
||||||
|
formAction,
|
||||||
|
formRequestMapping,
|
||||||
|
formModel,
|
||||||
|
formRule
|
||||||
|
)
|
||||||
|
onMounted(() => {
|
||||||
|
initUserList()
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
closeModal()
|
||||||
|
submitLoading.value = false
|
||||||
|
}
|
||||||
|
const initUserList = () => {
|
||||||
|
doRequest(getfFindDirectSalesman(), {
|
||||||
|
onSuccess: (res: any) => {
|
||||||
|
userList = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/* 表单提交处理 */
|
||||||
|
const handleSubmit = () => {
|
||||||
|
formRef.value?.validate().then(() => {
|
||||||
|
const data: distributeData[] = []
|
||||||
|
formModel.userId?.forEach((item: number) => {
|
||||||
|
data.push({
|
||||||
|
clueId: formModel.directClueId as number,
|
||||||
|
userId: item,
|
||||||
|
userName: userList.filter((it: any) => it.userId == item)[0].userName
|
||||||
|
})
|
||||||
|
})
|
||||||
|
console.log('data===', data)
|
||||||
|
doRequest(upDistribute(data), {
|
||||||
|
successMessage: '分发成功',
|
||||||
|
onSuccess: () => {
|
||||||
|
closeModal()
|
||||||
|
emits('submit-success')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
defineExpose({
|
||||||
|
async open(newFormAction: FormAction, record: directDTO) {
|
||||||
|
openModal()
|
||||||
|
resetFields()
|
||||||
|
if (newFormAction === FormAction.UPDATE) {
|
||||||
|
title.value = '分发'
|
||||||
|
record.distributeDate = dayjs(record?.distributeDate, 'YYYY-MM-DD HH:mm:ss')
|
||||||
|
record.otherClueObj.remarkArr = Object.entries(JSON.parse(record.otherClueObj.remarkDict))
|
||||||
|
overrideProperties(formModel, record)
|
||||||
|
}
|
||||||
|
formAction.value = newFormAction
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
//权重配置两列
|
||||||
|
|
||||||
|
::v-deep .ant-picker {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.model-body {
|
||||||
|
max-height: 70vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<a-card :bordered="false" style="margin-bottom: 16px" :body-style="{ paddingBottom: 0 }">
|
||||||
|
<a-form :model="formModel" :label-col="labelCol">
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :xl="8" :md="12" :sm="24">
|
||||||
|
<a-form-item label="客户名称">
|
||||||
|
<a-input v-model:value="formModel.customName" placeholder="请输入" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="8" :md="12" :sm="24">
|
||||||
|
<a-form-item label="分发日期">
|
||||||
|
<a-range-picker
|
||||||
|
v-model:value="formModel.distributeDate"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="8" :md="12" :sm="24">
|
||||||
|
<a-form-item label="分发状态">
|
||||||
|
<a-select v-model:value="formModel.distributeType">
|
||||||
|
<a-select-option :value="0">未分发</a-select-option>
|
||||||
|
<a-select-option :value="1">已分发</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="8" :md="12" :sm="24">
|
||||||
|
<a-form-item label="来源">
|
||||||
|
<a-select v-model:value="formModel.originType">
|
||||||
|
<a-select-option :value="0">巨量</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="24" :md="24" :sm="24">
|
||||||
|
<search-actions :loading="props.loading" @search="search" @reset="reset" />
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Form } from 'ant-design-vue'
|
||||||
|
import type { directPageParam } from '@/api/directResources/types'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { useUserStore } from '@/stores/user-store'
|
||||||
|
//获取当前账号角色
|
||||||
|
onMounted(() => {
|
||||||
|
})
|
||||||
|
const { userInfo } = useUserStore()
|
||||||
|
const useForm = Form.useForm
|
||||||
|
// 表单 label 全局配置
|
||||||
|
const labelCol = { md: { span: 6 } }
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
loading?: boolean
|
||||||
|
}>(),
|
||||||
|
{ loading: false }
|
||||||
|
)
|
||||||
|
|
||||||
|
const emits = defineEmits<{
|
||||||
|
(e: 'search', params: Record<string, any>): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const formModel = reactive<directPageParam>({
|
||||||
|
customName: '',
|
||||||
|
distributeDate: undefined,
|
||||||
|
originType: null,
|
||||||
|
distributeType: null,
|
||||||
|
effectiveStatus: null
|
||||||
|
})
|
||||||
|
watch(
|
||||||
|
() => formModel.distributeDate,
|
||||||
|
nval => {
|
||||||
|
if (nval && nval.length == 2) {
|
||||||
|
formModel.startTime = dayjs(nval[0]).format('YYYY-MM-DD')
|
||||||
|
formModel.endTime = dayjs(nval[1]).format('YYYY-MM-DD')
|
||||||
|
} else {
|
||||||
|
formModel.distributeDate = undefined
|
||||||
|
formModel.startTime = undefined
|
||||||
|
formModel.endTime = undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
const { resetFields } = useForm(formModel)
|
||||||
|
|
||||||
|
const search = () => {
|
||||||
|
const param = toRaw(formModel)
|
||||||
|
if (param.distributeDate && param.distributeDate.length == 2) {
|
||||||
|
delete param.distributeDate
|
||||||
|
}
|
||||||
|
param.distributeUserId = userInfo && userInfo.userId
|
||||||
|
emits('search', param)
|
||||||
|
}
|
||||||
|
|
||||||
|
const reset = () => {
|
||||||
|
// 清空表单其他元素
|
||||||
|
resetFields()
|
||||||
|
search()
|
||||||
|
}
|
||||||
|
</script>
|
Loading…
Reference in New Issue