修改录入员和业务员
parent
d6d30d17c2
commit
c9fdc712aa
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<!-- 头部 -->
|
||||
<a-card :bordered="false" :body-style="{ paddingBottom: 0 }">
|
||||
<div class="resourceList-title">资源列表</div>
|
||||
<!-- <a-row>
|
||||
<a-col
|
||||
:span="8"
|
||||
:offset="8"
|
||||
style="margin-top: 24px; margin-bottom: 24px; width: 50%; border: 1px solid #dcdfe6"
|
||||
>
|
||||
<div style="display: flex; justify-content: center">
|
||||
<a-statistic title="Active Users" :value="112893" style="margin-right: 50px" />
|
||||
<a-statistic title="Account Balance (CNY)" :precision="2" :value="112893" />
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row> -->
|
||||
</a-card>
|
||||
<!-- 工具栏 -->
|
||||
<clue-details-search :loading="tableRef?.loading" @search="searchTable" />
|
||||
<!-- 批量操作、更多操作 -->
|
||||
<a-card :bordered="false" :body-style="{ paddingBottom: 0 }">
|
||||
<div class="operationButtonArea">
|
||||
<a-button type="primary" @click="singleImport">单个导入</a-button>
|
||||
<a-button type="primary" @click="batchImport">批量导入</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- 底部表格 -->
|
||||
<pro-table
|
||||
ref="tableRef"
|
||||
row-key="customId"
|
||||
:request="tableRequest"
|
||||
:columns="columns"
|
||||
:scroll="{ x: 1100 }"
|
||||
:tool-bar-render="false"
|
||||
class="protable"
|
||||
:pagination="{ showQuickJumper: true }"
|
||||
>
|
||||
<!-- <template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'operate'">
|
||||
<operation-group>
|
||||
<a @click="handleView(record)">查看</a>
|
||||
<a v-if="record.enrollStatus === 0" @click="handleEdit(record)">编辑</a>
|
||||
</operation-group>
|
||||
</template>
|
||||
</template> -->
|
||||
</pro-table>
|
||||
<!-- 单个导入新建弹窗 -->
|
||||
<clue-details-single-modal ref="clueDetailsSingleModalRef" @submit-success="reloadTable" />
|
||||
<!-- 批量导入新建弹窗 -->
|
||||
<clue-details-batch-modal ref="clueDetailsBatchModalRef" @submit-success="reloadTable" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
//底部表格
|
||||
import ProTable from '#/table'
|
||||
import type { ProTableInstanceExpose, TableRequest, ProColumns } from '#/table'
|
||||
import { mergePageParam } from '@/utils/page-utils'
|
||||
import { FormAction } from '@/hooks/form'
|
||||
import ClueDetailsSingleModal from '@/views/clueDetails/clueDetailsSingleModal.vue'
|
||||
import ClueDetailsBatchModal from '@/views/clueDetails/clueDetailsBatchModal.vue'
|
||||
import ClueDetailsSearch from '@/views/clueDetails/clueDetailsSearch.vue'
|
||||
import { pageAccessLogs } from '@/api/geopoliticalCustomers'
|
||||
import type {
|
||||
GeopoliticalCustomersRecord,
|
||||
GeopoliticalCustomersPageParam
|
||||
} from '@/api/geopoliticalCustomers/types'
|
||||
|
||||
defineOptions({ name: 'ResourceList' })
|
||||
|
||||
//获取当前账号角色
|
||||
import { useUserStore } from '@/stores/user-store'
|
||||
const { userInfo } = useUserStore()
|
||||
const salesmanType = ref<number | undefined>()
|
||||
onMounted(() => {
|
||||
salesmanType.value = userInfo?.salesmanType
|
||||
})
|
||||
|
||||
//底部表格
|
||||
// 表格组件引用
|
||||
const tableRef = ref<ProTableInstanceExpose>()
|
||||
//单个导入ref
|
||||
const clueDetailsSingleModalRef = ref<InstanceType<typeof ClueDetailsSingleModal>>()
|
||||
//批量导入ref
|
||||
const clueDetailsBatchModalRef = ref<InstanceType<typeof ClueDetailsBatchModal>>()
|
||||
// 查询参数
|
||||
let searchParams: GeopoliticalCustomersPageParam = {}
|
||||
|
||||
//远程加载表格数据
|
||||
const tableRequest: TableRequest = (params, sorter, filter) => {
|
||||
const pageParam = mergePageParam(params, sorter, filter, salesmanType.value)
|
||||
return pageAccessLogs({ ...pageParam, ...searchParams })
|
||||
}
|
||||
|
||||
//刷新表格
|
||||
const reloadTable = (resetPageIndex?: boolean) => {
|
||||
tableRef.value?.actionRef?.reload(resetPageIndex)
|
||||
}
|
||||
|
||||
//查询表格
|
||||
const searchTable = (params: GeopoliticalCustomersPageParam) => {
|
||||
searchParams = params
|
||||
reloadTable(true) // 会调用 tableRequest
|
||||
}
|
||||
//单个导入
|
||||
const singleImport = () => {
|
||||
clueDetailsSingleModalRef.value?.open({
|
||||
newFormAction: FormAction.CREATE
|
||||
})
|
||||
}
|
||||
//批量导入
|
||||
const batchImport = () => {
|
||||
clueDetailsBatchModalRef.value?.open({
|
||||
newFormAction: FormAction.CREATE
|
||||
})
|
||||
}
|
||||
//查看
|
||||
// const handleView = (record: GeopoliticalCustomersRecord) => {
|
||||
// geopoliticalCustomersModalRef.value?.open({
|
||||
// newFormAction: FormAction.UPDATE,
|
||||
// type: 'view',
|
||||
// record: record
|
||||
// })
|
||||
// }
|
||||
|
||||
//编辑预约
|
||||
// const handleEdit = (record: GeopoliticalCustomersRecord) => {
|
||||
// geopoliticalCustomersModalRef.value?.open({
|
||||
// newFormAction: FormAction.UPDATE,
|
||||
// type: 'edit',
|
||||
// record: record
|
||||
// })
|
||||
// }
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
title: '订单编号',
|
||||
width: 160,
|
||||
dataIndex: 'batchNo'
|
||||
},
|
||||
{
|
||||
title: '客户类型',
|
||||
dataIndex: 'channelType',
|
||||
customRender: function ({ record }: any) {
|
||||
if (record.channelType === 1) {
|
||||
return h('div', '手动创建')
|
||||
} else if (record.channelType === 2) {
|
||||
return h('div', '文件上传')
|
||||
} else if (record.channelType === 3) {
|
||||
return h('div', '飞鱼回传')
|
||||
} else if (record.channelType === 4) {
|
||||
return h('div', '话单回传')
|
||||
} else if (record.channelType === 5) {
|
||||
return h('div', 'api回传')
|
||||
} else {
|
||||
return h('div', '-')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '联系方式',
|
||||
dataIndex: 'customNid'
|
||||
},
|
||||
{
|
||||
title: '报名状态',
|
||||
dataIndex: 'enrollStatus',
|
||||
customRender: function ({ record }: any) {
|
||||
if (record.enrollStatus === 0) {
|
||||
return h('div', '待提交')
|
||||
} else if (record.enrollStatus === 1) {
|
||||
return h('div', '已报名')
|
||||
} else if (record.enrollStatus === 2) {
|
||||
return h('div', '审核通过')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark'
|
||||
},
|
||||
{
|
||||
title: '录入日期',
|
||||
dataIndex: 'createTime',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
customRender: function ({ record }: any) {
|
||||
if (record.createTime) {
|
||||
return record.createTime
|
||||
} else if (record.createTime === null) {
|
||||
return '--'
|
||||
}
|
||||
}
|
||||
}
|
||||
// {
|
||||
// key: 'operate',
|
||||
// title: '操作',
|
||||
// align: 'center',
|
||||
// width: 100,
|
||||
// fixed: 'right'
|
||||
// }
|
||||
]
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.resourceList-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
//批量操作、更多操作
|
||||
.operationButtonArea {
|
||||
padding-bottom: 20px;
|
||||
::v-deep .ant-btn-primary {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.editable-row-operations a {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,92 @@
|
||||
<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.batchNo" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="8" :md="12" :sm="24">
|
||||
<a-form-item label="报名状态">
|
||||
<dict-select
|
||||
v-model:value="formModel.enrollStatus"
|
||||
dict-code="registration_status"
|
||||
allow-clear
|
||||
placeholder="请选择"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="8" :md="12" :sm="24">
|
||||
<a-form-item label="填写时间">
|
||||
<a-range-picker
|
||||
v-model:value="searchTimeValue"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width: 100%"
|
||||
:ranges="{
|
||||
Today: [dayjs().startOf('date'), dayjs()]
|
||||
}"
|
||||
/>
|
||||
</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 { clueDetailsSearch } from '@/api/clueaccess/clueImport/types'
|
||||
import dayjs from 'dayjs'
|
||||
import type { Dayjs } from 'dayjs'
|
||||
|
||||
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 searchTimeValue = ref<[Dayjs, Dayjs]>()
|
||||
const formModel = reactive<clueDetailsSearch>({
|
||||
batchNo: '',
|
||||
enrollStatus: undefined,
|
||||
//标签,为了去除单个尖括号的样式错误
|
||||
httpStatus: undefined
|
||||
})
|
||||
|
||||
const { resetFields } = useForm(formModel)
|
||||
|
||||
const search = () => {
|
||||
const param = toRaw(formModel)
|
||||
if (searchTimeValue.value && searchTimeValue.value.length == 2) {
|
||||
param.startTime = searchTimeValue.value[0].format('YYYY-MM-DD HH:mm:ss')
|
||||
param.endTime = searchTimeValue.value[1].format('YYYY-MM-DD HH:mm:ss')
|
||||
} else {
|
||||
param.startTime = ''
|
||||
param.endTime = ''
|
||||
}
|
||||
emits('search', param)
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
// 清空表单其他元素
|
||||
resetFields()
|
||||
// 清空时间
|
||||
searchTimeValue.value = undefined
|
||||
search()
|
||||
}
|
||||
</script>
|
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:visible="visible"
|
||||
:mask-closable="false"
|
||||
:centered="true"
|
||||
:body-style="{ padding: '24px 40px 8px 40px' }"
|
||||
:confirm-loading="submitLoading"
|
||||
:width="500"
|
||||
@cancel="handleClose"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formModel"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
class="interfaceDocking"
|
||||
>
|
||||
<a-form-item
|
||||
ref="customNid"
|
||||
label="手机号:"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 14 }"
|
||||
name="customNid"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入手机号' },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: '请输入正确的手机号',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
]"
|
||||
>
|
||||
<a-input v-model:value="formModel.customNid" title="点击一键复制" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
ref="remark"
|
||||
label="备注:"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 14 }"
|
||||
name="remark"
|
||||
:rules="[{ required: true, message: '请输入备注', trigger: ['blur', 'change'] }]"
|
||||
>
|
||||
<a-textarea v-model:value="formModel.remark" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleClose()">取消</a-button>
|
||||
<a-button type="primary" style="margin-left: 10px" @click="onSubmit()">确定</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useModal } from '@/hooks/modal'
|
||||
import { useFormAction, FormAction } from '@/hooks/form'
|
||||
import type { ColProps } from 'ant-design-vue'
|
||||
import type { CustomerListRecord } from '@/api/customermanagement/customerList/types'
|
||||
import { doRequest } from '@/utils/axios/request'
|
||||
import { singleImport } from '@/api/clueaccess/clueImport'
|
||||
import { message } from 'ant-design-vue'
|
||||
import type { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
|
||||
|
||||
const labelCol: ColProps = { sm: { span: 24 }, md: { span: 4 } }
|
||||
const wrapperCol: ColProps = { sm: { span: 24 }, md: { span: 20 } }
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'submit-success', resetPageIndex?: boolean): void
|
||||
}>()
|
||||
const { title, visible, openModal, closeModal } = useModal()
|
||||
|
||||
const { formAction } = useFormAction()
|
||||
|
||||
//表单提交状态
|
||||
const submitLoading = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
interface FormState {
|
||||
customNid: string
|
||||
remark: string
|
||||
}
|
||||
// 表单模型
|
||||
const formModel = reactive<FormState>({
|
||||
customNid: '',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
//表单提交
|
||||
const onSubmit = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
doRequest(singleImport(formModel), {
|
||||
onSuccess: (res: any) => {
|
||||
if (res.code === 200) {
|
||||
message.success('导入成功')
|
||||
handleClose()
|
||||
emits('submit-success')
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch((error: ValidateErrorEntity<FormState>) => {
|
||||
console.log('error', error)
|
||||
})
|
||||
}
|
||||
const resetForm = () => {
|
||||
formRef.value.resetFields()
|
||||
}
|
||||
//弹窗关闭方法
|
||||
const handleClose = () => {
|
||||
resetForm()
|
||||
closeModal()
|
||||
submitLoading.value = false
|
||||
}
|
||||
|
||||
interface openObj {
|
||||
newFormAction: FormAction
|
||||
type?: number | undefined
|
||||
record?: CustomerListRecord
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(opendata: openObj) {
|
||||
openModal()
|
||||
title.value = '单个导入'
|
||||
formAction.value = opendata.newFormAction
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:visible="visible"
|
||||
:mask-closable="false"
|
||||
:centered="true"
|
||||
:body-style="{ padding: '24px 40px 8px 40px' }"
|
||||
:confirm-loading="submitLoading"
|
||||
:width="650"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleClose"
|
||||
>
|
||||
<a-form
|
||||
ref="otherFormRef"
|
||||
:model="otherFormState"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-item
|
||||
v-if="formAction === FormAction.UPDATE"
|
||||
ref="status"
|
||||
label="使用状态:"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 14 }"
|
||||
name="status"
|
||||
>
|
||||
<a-switch v-model:checked="checked" @change="handleSwitchChange" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="formAction === FormAction.CREATE"
|
||||
ref="name"
|
||||
label="渠道名:"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 14 }"
|
||||
name="name"
|
||||
v-bind="validateInfos.name"
|
||||
>
|
||||
<a-input v-model:value="otherFormState.name" style="width: 70%" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-if="type === 0 || type === 1"
|
||||
ref="channelIdentifyingList"
|
||||
label="渠道标识:"
|
||||
:label-col="{ span: 4 }"
|
||||
name="channelIdentifyingList"
|
||||
v-bind="validateInfos.channelIdentifyingList"
|
||||
>
|
||||
<a-checkbox-group v-model:value="otherFormState.channelIdentifyingList" style="width: 100%">
|
||||
<a-checkbox v-for="item in channelId" :key="item.id" :value="item.routeName">{{
|
||||
item.routeName
|
||||
}}</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="type === 0 && formAction === FormAction.CREATE"
|
||||
ref="authType"
|
||||
label="平台授权:"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 14 }"
|
||||
name="authType"
|
||||
>
|
||||
<a-radio-group v-model:value="otherFormState.authType">
|
||||
<a-radio :value="0"> 巨量授权 </a-radio>
|
||||
<a-radio :value="1"> 百度授权 </a-radio>
|
||||
<a-radio :value="2"> 广点通授权 </a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<span v-if="type === 2" type="primary" style="margin: 0 20px" @click.stop="downloadTemplate"
|
||||
>接口文档下载</span
|
||||
>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleClose()">取消</a-button>
|
||||
<a-button type="primary" @click="handleSubmit()">确认</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useModal } from '@/hooks/modal'
|
||||
import { FormAction, useAdminForm, useFormAction } from '@/hooks/form'
|
||||
import type { FormRequestMapping } from '@/hooks/form'
|
||||
import { reactive, ref } from 'vue'
|
||||
import type { ColProps } from 'ant-design-vue'
|
||||
import { doRequest } from '@/utils/axios/request'
|
||||
import { message } from 'ant-design-vue'
|
||||
import type { UnwrapRef } from 'vue'
|
||||
import { otherImport, updateOtherImport, channelIdList } from '@/api/clueaccess/clueImport'
|
||||
import type { ConfigurationListRecord } from '@/api/clueaccess/clueImport/types'
|
||||
|
||||
const labelCol: ColProps = { sm: { span: 24 }, md: { span: 4 } }
|
||||
const wrapperCol: ColProps = { sm: { span: 24 }, md: { span: 20 } }
|
||||
|
||||
//使用状态
|
||||
const checked = ref<boolean>(false)
|
||||
const handleSwitchChange = (checked: any) => {
|
||||
console.log('Switch changed:', checked)
|
||||
// 在这里处理状态变化后的逻辑
|
||||
if (checked === true) {
|
||||
otherFormState.status = 1
|
||||
} else {
|
||||
otherFormState.status = 0
|
||||
}
|
||||
}
|
||||
|
||||
interface MonitoringModeTwoList {
|
||||
routeName: string
|
||||
id: number
|
||||
}
|
||||
//渠道标识checkbox数组
|
||||
const channelId = ref<MonitoringModeTwoList[]>([])
|
||||
|
||||
//是广告平台接入、外呼接入、还是第三方接入
|
||||
const type = ref<number | undefined>(undefined)
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'submit-success', resetPageIndex?: boolean): void
|
||||
}>()
|
||||
const { title, visible, openModal, closeModal } = useModal()
|
||||
const { formAction } = useFormAction()
|
||||
|
||||
const otherFormRef = ref()
|
||||
|
||||
// 其他接入表单
|
||||
interface OtherFormState {
|
||||
id?: number | undefined
|
||||
userId?: number | undefined
|
||||
createBy?: number | undefined
|
||||
status: any
|
||||
channelType: number | undefined
|
||||
name: string | undefined
|
||||
channelIdentifyingList?: string[]
|
||||
authType: number | undefined
|
||||
}
|
||||
|
||||
const otherFormState: UnwrapRef<OtherFormState> = reactive({
|
||||
status: true,
|
||||
channelType: undefined,
|
||||
name: '',
|
||||
channelIdentifyingList: [],
|
||||
authType: 0
|
||||
})
|
||||
// 表单的校验规则
|
||||
const otherFormRule = reactive<any>({
|
||||
name: [{ required: true, message: '请输入渠道名', trigger: ['blur', 'change'] }],
|
||||
channelIdentifyingList: [
|
||||
{ type: 'array', required: true, message: '请选择渠道标识', trigger: ['blur', 'change'] }
|
||||
]
|
||||
})
|
||||
|
||||
// 表单的提交请求
|
||||
const formRequestMapping: FormRequestMapping<OtherFormState> = {
|
||||
[FormAction.CREATE]: otherImport,
|
||||
[FormAction.UPDATE]: updateOtherImport
|
||||
}
|
||||
|
||||
const { submitLoading, validateAndSubmit, validateInfos, resetFields } = useAdminForm(
|
||||
formAction,
|
||||
formRequestMapping,
|
||||
otherFormState,
|
||||
otherFormRule
|
||||
)
|
||||
|
||||
/* 表单提交处理 */
|
||||
const handleSubmit = () => {
|
||||
if (checked.value === true) {
|
||||
otherFormState.status = 1
|
||||
} else {
|
||||
otherFormState.status = 0
|
||||
}
|
||||
if (type.value === 0) {
|
||||
otherFormState.channelType = 0
|
||||
if (otherFormState.authType === 1 || otherFormState.authType === 2) {
|
||||
message.info('正在开发中')
|
||||
return false
|
||||
}
|
||||
} else if (type.value === 1) {
|
||||
otherFormState.channelType = 1
|
||||
} else if (type.value === 2) {
|
||||
otherFormState.channelType = 2
|
||||
otherFormRule.channelIdentifyingList = undefined
|
||||
}
|
||||
validateAndSubmit(
|
||||
{ ...otherFormState },
|
||||
{
|
||||
onSuccess: (res: any) => {
|
||||
if (res.code === 200) {
|
||||
if (
|
||||
type.value === 0 &&
|
||||
otherFormState.authType === 0 &&
|
||||
formAction.value === FormAction.CREATE
|
||||
) {
|
||||
window.location.href = res.data
|
||||
}
|
||||
message.success('导入成功')
|
||||
closeModal()
|
||||
submitLoading.value = false
|
||||
emits('submit-success')
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
/* 弹窗关闭方法 */
|
||||
const handleClose = () => {
|
||||
closeModal()
|
||||
submitLoading.value = false
|
||||
}
|
||||
function downloadTemplate() {
|
||||
message.info('暂无文档,正在开发中')
|
||||
// downloadI18nDataExcelTemplate().then(response => {
|
||||
// remoteFileDownload(response)
|
||||
// // downloadFile(response, '表单数据', 'xlsx')
|
||||
// })
|
||||
}
|
||||
interface openObj {
|
||||
newFormAction: FormAction
|
||||
type?: number | undefined
|
||||
record?: ConfigurationListRecord
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(opendata: openObj) {
|
||||
doRequest(channelIdList({ routeStatus: 1 }), {
|
||||
onSuccess: (res: any) => {
|
||||
if (res.code === 200) {
|
||||
channelId.value = res.data
|
||||
}
|
||||
}
|
||||
})
|
||||
openModal()
|
||||
|
||||
resetFields()
|
||||
if (opendata.newFormAction === FormAction.CREATE) {
|
||||
type.value = opendata.type
|
||||
} else {
|
||||
otherFormState.id = opendata.record?.id
|
||||
otherFormState.userId = opendata.record?.userId
|
||||
otherFormState.createBy = opendata.record?.createBy
|
||||
type.value = opendata.record?.channelType
|
||||
otherFormState.name = opendata.record?.name
|
||||
if (opendata.record?.status === 0) {
|
||||
checked.value = false
|
||||
} else {
|
||||
checked.value = true
|
||||
}
|
||||
|
||||
if (opendata.record) {
|
||||
otherFormState.channelIdentifyingList?.push(...opendata.record.channelIdentifying)
|
||||
}
|
||||
}
|
||||
if (type.value === 0) {
|
||||
title.value = '广告平台接入'
|
||||
} else if (type.value === 1) {
|
||||
title.value = '外呼接入'
|
||||
} else if (type.value === 2) {
|
||||
title.value = '第三方接入'
|
||||
}
|
||||
formAction.value = opendata.newFormAction
|
||||
}
|
||||
})
|
||||
</script>
|
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<!-- 头部 -->
|
||||
<a-card :bordered="false" :body-style="{ paddingBottom: 0 }">
|
||||
<div class="geopoliticalCustomers-title">配置列表</div>
|
||||
<!-- <a-row>
|
||||
<a-col
|
||||
:span="8"
|
||||
:offset="8"
|
||||
style="margin-top: 24px; margin-bottom: 24px; width: 50%; border: 1px solid #dcdfe6"
|
||||
>
|
||||
<div style="display: flex; justify-content: center">
|
||||
<a-statistic title="Active Users" :value="112893" style="margin-right: 50px" />
|
||||
<a-statistic title="Account Balance (CNY)" :precision="2" :value="112893" />
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row> -->
|
||||
</a-card>
|
||||
<!-- 工具栏 -->
|
||||
<configuration-list-search :loading="tableRef?.loading" @search="searchTable" />
|
||||
<!-- 批量操作、更多操作 -->
|
||||
<a-card :bordered="false" :body-style="{ paddingBottom: 0 }">
|
||||
<div class="operationButtonArea">
|
||||
<a-button type="primary" @click="adPlatformAccess">广告平台接入</a-button>
|
||||
<a-button type="primary" @click="outboundCallAccess">外呼接入</a-button>
|
||||
<a-button type="primary" @click="thirdPartyAccess">第三方接入</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- 底部表格 -->
|
||||
<pro-table
|
||||
ref="tableRef"
|
||||
row-key="customId"
|
||||
:request="tableRequest"
|
||||
:columns="columns"
|
||||
:scroll="{ x: 1100 }"
|
||||
:tool-bar-render="false"
|
||||
class="protable"
|
||||
:pagination="{ showQuickJumper: true }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'operate'">
|
||||
<operation-group>
|
||||
<a @click="handleView(record)">详情</a>
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
</operation-group>
|
||||
</template>
|
||||
</template>
|
||||
</pro-table>
|
||||
<!-- 详情弹窗 -->
|
||||
<configuration-list-view-modal
|
||||
ref="configurationListViewModalRef"
|
||||
@submit-success="reloadTable"
|
||||
/>
|
||||
<!-- 其他接入新建/编辑弹窗 -->
|
||||
<configuration-list-modal ref="configurationListModalRef" @submit-success="reloadTable" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
//底部表格
|
||||
import ProTable from '#/table'
|
||||
import type { ProTableInstanceExpose, TableRequest, ProColumns } from '#/table'
|
||||
import { mergePageParam } from '@/utils/page-utils'
|
||||
import { FormAction } from '@/hooks/form'
|
||||
import GeopoliticalCustomersModal from '@/views/geopoliticalCustomers/geopoliticalCustomersModal.vue'
|
||||
import ConfigurationListModal from '@/views/configurationList/configurationListModal.vue'
|
||||
import ConfigurationListViewModal from '@/views/configurationList/configurationListViewModal.vue'
|
||||
import ConfigurationListSearch from '@/views/configurationList/configurationListSearch.vue'
|
||||
import { pageAccessLogs } from '@/api/clueaccess/clueImport'
|
||||
import type { GeopoliticalCustomersPageParam } from '@/api/geopoliticalCustomers/types'
|
||||
import type { ConfigurationListRecord } from '@/api/clueaccess/clueImport/types'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
defineOptions({ name: 'ConfigurationList' })
|
||||
|
||||
//底部表格
|
||||
// 表格组件引用
|
||||
const tableRef = ref<ProTableInstanceExpose>()
|
||||
//其他接入ref
|
||||
const configurationListModalRef = ref<InstanceType<typeof ConfigurationListModal>>()
|
||||
//详情ref
|
||||
const configurationListViewModalRef = ref<InstanceType<typeof ConfigurationListViewModal>>()
|
||||
|
||||
// 查询参数
|
||||
let searchParams: GeopoliticalCustomersPageParam = {}
|
||||
|
||||
//远程加载表格数据
|
||||
const tableRequest: TableRequest = (params, sorter, filter) => {
|
||||
const pageParam = mergePageParam(params, sorter, filter)
|
||||
return pageAccessLogs({ ...pageParam, ...searchParams })
|
||||
}
|
||||
|
||||
//刷新表格
|
||||
const reloadTable = (resetPageIndex?: boolean) => {
|
||||
tableRef.value?.actionRef?.reload(resetPageIndex)
|
||||
}
|
||||
|
||||
//查询表格
|
||||
const searchTable = (params: GeopoliticalCustomersPageParam) => {
|
||||
searchParams = params
|
||||
reloadTable(true) // 会调用 tableRequest
|
||||
}
|
||||
//广告平台接入
|
||||
const adPlatformAccess = () => {
|
||||
configurationListModalRef.value?.open({
|
||||
newFormAction: FormAction.CREATE,
|
||||
type: 0
|
||||
})
|
||||
}
|
||||
//外呼接入
|
||||
const outboundCallAccess = () => {
|
||||
configurationListModalRef.value?.open({
|
||||
newFormAction: FormAction.CREATE,
|
||||
type: 1
|
||||
})
|
||||
}
|
||||
//第三方接入
|
||||
const thirdPartyAccess = () => {
|
||||
message.info('正在开发中')
|
||||
// configurationListModalRef.value?.open({
|
||||
// newFormAction: FormAction.CREATE,
|
||||
// type: 2
|
||||
// })
|
||||
}
|
||||
//详情
|
||||
const handleView = (record: ConfigurationListRecord) => {
|
||||
configurationListViewModalRef.value?.open({
|
||||
newFormAction: FormAction.UPDATE,
|
||||
type: 'view',
|
||||
record: record
|
||||
})
|
||||
}
|
||||
|
||||
//编辑
|
||||
const handleEdit = (record: ConfigurationListRecord) => {
|
||||
configurationListModalRef.value?.open({
|
||||
newFormAction: FormAction.UPDATE,
|
||||
record: record
|
||||
})
|
||||
}
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
title: '编号',
|
||||
width: 80,
|
||||
dataIndex: 'id'
|
||||
},
|
||||
{
|
||||
title: '渠道名称',
|
||||
dataIndex: 'name',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '接入类型',
|
||||
dataIndex: 'channelType',
|
||||
width: 120,
|
||||
customRender: function ({ record }: any) {
|
||||
if (record.channelType === 0) {
|
||||
return h('div', '广告平台接入')
|
||||
} else if (record.channelType === 1) {
|
||||
return h('div', '外呼接入')
|
||||
} else if (record.channelType === 2) {
|
||||
return h('div', '第三方接入')
|
||||
} else {
|
||||
return h('div', '-')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '录入日期',
|
||||
dataIndex: 'createTime',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
customRender: function ({ record }: any) {
|
||||
if (record.createTime) {
|
||||
return record.createTime
|
||||
} else if (record.createTime === null) {
|
||||
return '--'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'operate',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
fixed: 'right'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.geopoliticalCustomers-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
//批量操作、更多操作
|
||||
.operationButtonArea {
|
||||
padding-bottom: 20px;
|
||||
::v-deep .ant-btn-primary {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.editable-row-operations a {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</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.name" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<dict-select
|
||||
v-model:value="formModel.httpStatus"
|
||||
style="display: none"
|
||||
dict-code="user_status"
|
||||
allow-clear
|
||||
placeholder="请选择"
|
||||
/>
|
||||
<a-col :xl="8" :md="12" :sm="24">
|
||||
<a-form-item label="接入类型">
|
||||
<dict-select
|
||||
v-model:value="formModel.channelType"
|
||||
dict-code="channel_type"
|
||||
allow-clear
|
||||
placeholder="请选择"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="8" :md="12" :sm="24">
|
||||
<a-form-item label="创建时间">
|
||||
<a-range-picker
|
||||
v-model:value="searchTimeValue"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width: 100%"
|
||||
:ranges="{
|
||||
Today: [dayjs().startOf('date'), dayjs()]
|
||||
}"
|
||||
/>
|
||||
</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 dayjs from 'dayjs'
|
||||
import type { Dayjs } from 'dayjs'
|
||||
import type { configurationListSearch } from '@/api/clueaccess/clueImport/types'
|
||||
|
||||
const useForm = Form.useForm
|
||||
|
||||
// 表单 label 全局配置
|
||||
const labelCol = { md: { span: 8 } }
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
loading?: boolean
|
||||
}>(),
|
||||
{ loading: false }
|
||||
)
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'search', params: Record<string, any>): void
|
||||
}>()
|
||||
|
||||
const searchTimeValue = ref<[Dayjs, Dayjs]>()
|
||||
const formModel = reactive<configurationListSearch>({
|
||||
//渠道名称
|
||||
name: '',
|
||||
//接入类型
|
||||
channelType: '',
|
||||
//标签,为了去除单个尖括号的样式错误
|
||||
httpStatus: undefined
|
||||
})
|
||||
|
||||
const { resetFields } = useForm(formModel)
|
||||
|
||||
const search = () => {
|
||||
const param = toRaw(formModel)
|
||||
if (searchTimeValue.value && searchTimeValue.value.length == 2) {
|
||||
param.startTime = searchTimeValue.value[0].format('YYYY-MM-DD HH:mm:ss')
|
||||
param.endTime = searchTimeValue.value[1].format('YYYY-MM-DD HH:mm:ss')
|
||||
} else {
|
||||
param.startTime = ''
|
||||
param.endTime = ''
|
||||
}
|
||||
emits('search', param)
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
// 清空表单其他元素
|
||||
resetFields()
|
||||
// 清空时间
|
||||
searchTimeValue.value = undefined
|
||||
search()
|
||||
}
|
||||
</script>
|
Loading…
Reference in New Issue