---初始化后台管理web页面项目
This commit is contained in:
157
src/views/erp/customer/components/FollowModal.vue
Normal file
157
src/views/erp/customer/components/FollowModal.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:width="800"
|
||||
title="客户跟进"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<div class="sub-title">基本信息</div>
|
||||
<a-card :bordered="false">
|
||||
<div class="title-info">
|
||||
<span>客户名称:{{ baseInfo?.name }}</span>
|
||||
<span>客户类型:{{ baseInfo?.typeName }}</span>
|
||||
<span>所在行业:{{ baseInfo?.industry }}</span>
|
||||
<span>来源:{{ baseInfo?.sourceName }}</span>
|
||||
</div>
|
||||
</a-card>
|
||||
<div class="sub-title">客户跟进</div>
|
||||
<BasicForm @register="registerForm">
|
||||
<template #imgUpload="{ model }">
|
||||
<Upload v-model:value="model.filePath" listType="picture" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { FormSchema } from '/@/components/Table';
|
||||
import Upload from '/@/components/Form/src/components/Upload.vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { addFollowCustomer, updateFollowCustomer, getFollowInfo } from '/@/api/erp/customer/list';
|
||||
const { t } = useI18n();
|
||||
|
||||
const FormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'followTypeId',
|
||||
label: '跟进方式',
|
||||
component: 'DicSelect',
|
||||
required: true,
|
||||
colProps: { span: 12 },
|
||||
componentProps: {
|
||||
placeholder: '请选择跟进方式',
|
||||
itemId: '1679011374365560833',
|
||||
isShowAdd: false,
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'followTime',
|
||||
label: '跟进时间',
|
||||
component: 'DatePicker',
|
||||
required: true,
|
||||
colProps: { span: 12 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: '请选择跟进时间',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'nextFollowTime',
|
||||
label: '下次跟进',
|
||||
component: 'DatePicker',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: '请选择下次跟进时间',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'content',
|
||||
label: '说明',
|
||||
component: 'Input',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
placeholder: '请输入说明',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'filePath',
|
||||
label: '图片上传',
|
||||
component: 'Upload',
|
||||
slot: 'imgUpload',
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
];
|
||||
|
||||
const { notification } = useMessage();
|
||||
const baseInfo = ref();
|
||||
const isUpdate = ref(false);
|
||||
const rowId = ref('');
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const [registerForm, { validate, setFieldsValue }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: FormSchema,
|
||||
showActionButtonGroup: false,
|
||||
actionColOptions: {
|
||||
span: 23,
|
||||
},
|
||||
});
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false, destroyOnClose: true });
|
||||
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
baseInfo.value = data.record;
|
||||
|
||||
if (unref(isUpdate)) {
|
||||
rowId.value = data.id;
|
||||
const record = await getFollowInfo(data.id);
|
||||
setFieldsValue({ ...record });
|
||||
}
|
||||
});
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
values.customerId = baseInfo.value.id;
|
||||
setModalProps({ confirmLoading: true });
|
||||
if (!unref(isUpdate)) {
|
||||
await addFollowCustomer(values);
|
||||
notification.success({
|
||||
message: '新增跟进客户',
|
||||
description: t('成功'),
|
||||
});
|
||||
} else {
|
||||
values.id = rowId.value;
|
||||
await updateFollowCustomer(values);
|
||||
notification.success({
|
||||
message: '编辑跟进客户',
|
||||
description: t('成功'),
|
||||
});
|
||||
}
|
||||
|
||||
closeModal();
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.sub-title {
|
||||
font-weight: 700;
|
||||
margin: 0 18px 18px;
|
||||
}
|
||||
|
||||
.title-info span {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user