zsqtony
70dda373a1
All checks were successful
Build and Push Docker Image / build (push) Successful in 3m46s
387 lines
13 KiB
TypeScript
387 lines
13 KiB
TypeScript
import {
|
||
MyBetaModalFormProps,
|
||
MyButtons,
|
||
MyFormItems,
|
||
MyModalFormProps,
|
||
rulesHelper,
|
||
} from '@/common';
|
||
import { MomentSelect } from '@/components/MomentCategories';
|
||
import { MyModal } from '@/components/MyModal';
|
||
import { Selects } from '@/components/Select';
|
||
import MyTransferProject from '@/components/TransferProject';
|
||
import { Apis } from '@/gen/Apis';
|
||
import {
|
||
CustomerMomentsChannelEnum,
|
||
CustomerMomentsContentTypeEnum,
|
||
CustomerMomentsPushTypeEnum,
|
||
CustomerMomentsRangeTypeEnum,
|
||
CustomerMomentsTaskEndTypeEnum,
|
||
} from '@/gen/Enums';
|
||
import { BetaSchemaForm } from '@ant-design/pro-components';
|
||
import { Button, Form, message, Space, Steps } from 'antd';
|
||
import { useRef, useState } from 'react';
|
||
import MyinfoPreview from '../components/infoPreview';
|
||
|
||
export default function Create(props: MyBetaModalFormProps) {
|
||
const [current, setCurrent] = useState(0);
|
||
const [getContentType, setContentType] = useState('');
|
||
const [formData, setFormData] = useState<any>({});
|
||
const [form] = Form.useForm();
|
||
const modalRef: any = useRef(null);
|
||
const steps = [
|
||
{
|
||
title: '创建任务',
|
||
columns: [
|
||
MyFormItems.EnumRadio({
|
||
key: 'channel',
|
||
title: '发送渠道',
|
||
valueEnum: CustomerMomentsChannelEnum,
|
||
required: true,
|
||
}),
|
||
Selects?.Companies({
|
||
key: 'companies_id',
|
||
title: '选择机构',
|
||
colProps: { span: 24 },
|
||
required: true,
|
||
}),
|
||
MomentSelect.MomentCategoriesSelect({
|
||
title: '内容分类',
|
||
formItemProps: { ...rulesHelper.array },
|
||
}),
|
||
{
|
||
valueType: 'group',
|
||
colProps: { span: 24 },
|
||
columns: [
|
||
MyFormItems.EnumRadio({
|
||
key: 'push_type',
|
||
title: '任务推送方式',
|
||
tooltip: '内容穿创建后，推送任务给员工的方式',
|
||
valueEnum: CustomerMomentsPushTypeEnum,
|
||
required: true,
|
||
colProps: { span: 12 },
|
||
}),
|
||
{
|
||
name: ['push_type'],
|
||
valueType: 'dependency',
|
||
columns: ({ push_type }: any) => {
|
||
return push_type === 'ScheduledPush'
|
||
? [
|
||
{
|
||
key: 'scheduled_time',
|
||
title: '定时推送时间',
|
||
valueType: 'dateTime',
|
||
colProps: { span: 12 },
|
||
},
|
||
]
|
||
: [];
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
valueType: 'group',
|
||
colProps: { span: 24 },
|
||
columns: [
|
||
MyFormItems.EnumRadio({
|
||
key: 'task_end_type',
|
||
title: '任务结束类型',
|
||
valueEnum: CustomerMomentsTaskEndTypeEnum,
|
||
required: true,
|
||
colProps: { span: 12 },
|
||
}),
|
||
{
|
||
name: ['task_end_type'],
|
||
valueType: 'dependency',
|
||
columns: ({ task_end_type }: any) => {
|
||
return task_end_type === 'AfterNDays'
|
||
? [
|
||
{
|
||
key: 'task_days',
|
||
title: ' ',
|
||
colProps: { span: 10 },
|
||
valueType: 'digit',
|
||
formItemProps: { ...rulesHelper.number },
|
||
fieldProps: {
|
||
suffix: '天结束',
|
||
style: { width: '200px' },
|
||
},
|
||
},
|
||
]
|
||
: task_end_type === 'ScheduledEnd'
|
||
? [
|
||
{
|
||
key: 'task_end_time',
|
||
title: '定时结束',
|
||
valueType: 'dateTime',
|
||
formItemProps: { ...rulesHelper.text },
|
||
colProps: { span: 10 },
|
||
},
|
||
]
|
||
: [];
|
||
},
|
||
},
|
||
],
|
||
},
|
||
MyFormItems.EnumSelect({
|
||
key: 'range_type',
|
||
title: '推送范围',
|
||
valueEnum: CustomerMomentsRangeTypeEnum,
|
||
required: true,
|
||
}),
|
||
|
||
{
|
||
name: ['range_type'],
|
||
valueType: 'dependency',
|
||
columns: ({ range_type }: any) => {
|
||
return range_type === 'Project'
|
||
? [
|
||
{
|
||
key: 'range_data',
|
||
title: '选择范围',
|
||
colProps: { span: 24 },
|
||
formItemProps: { ...rulesHelper.array },
|
||
renderFormItem: () => <MyTransferProject />,
|
||
},
|
||
]
|
||
: [];
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: '创建内容',
|
||
columns: [
|
||
{
|
||
key: 'title',
|
||
title: '标题',
|
||
formItemProps: { ...rulesHelper.text },
|
||
colProps: { span: 24 },
|
||
},
|
||
MyFormItems.EnumRadio({
|
||
key: 'content_type',
|
||
title: '内容类型',
|
||
valueEnum: CustomerMomentsContentTypeEnum,
|
||
required: true,
|
||
colProps: { span: 24 },
|
||
fieldProps: {
|
||
onChange: (e: any) => {
|
||
setContentType(e?.target?.value);
|
||
},
|
||
},
|
||
}),
|
||
{
|
||
name: ['content_type'],
|
||
valueType: 'dependency',
|
||
columns: ({ content_type }: any) => {
|
||
return content_type === CustomerMomentsContentTypeEnum.Image.value
|
||
? [
|
||
{
|
||
key: 'content',
|
||
title: '发送文案',
|
||
valueType: 'textarea',
|
||
colProps: { span: 24 },
|
||
formItemProps: { ...rulesHelper.text },
|
||
},
|
||
MyFormItems.UploadImages({
|
||
key: 'attachments',
|
||
title: '上传图片',
|
||
// uploadType: 'file',
|
||
required: true,
|
||
tooltip: '限9张图片10M以内',
|
||
max: 9,
|
||
colProps: { span: 24 },
|
||
}),
|
||
]
|
||
: content_type === CustomerMomentsContentTypeEnum.Video.value
|
||
? [
|
||
{
|
||
key: 'content',
|
||
title: '发送文案',
|
||
valueType: 'textarea',
|
||
colProps: { span: 24 },
|
||
formItemProps: { ...rulesHelper.text },
|
||
},
|
||
MyFormItems.UploadImages({
|
||
key: 'attachments',
|
||
title: '上传视频',
|
||
required: true,
|
||
tooltip: '限1个视频10M以内，格式要求：mp4',
|
||
uploadType: 'video',
|
||
max: 1,
|
||
colProps: { span: 24 },
|
||
}),
|
||
]
|
||
: content_type === CustomerMomentsContentTypeEnum.Link.value ||
|
||
content_type ===
|
||
CustomerMomentsContentTypeEnum.MiniProgram.value
|
||
? [
|
||
{
|
||
key: 'content',
|
||
title: '发送文案',
|
||
valueType: 'textarea',
|
||
colProps: { span: 24 },
|
||
formItemProps: { ...rulesHelper.text },
|
||
},
|
||
{
|
||
name: ['content_type'],
|
||
valueType: 'dependency',
|
||
columns: ({ content_type }: any) => {
|
||
return content_type === 'MiniProgram'
|
||
? [
|
||
{
|
||
key: 'mini_program_app_id',
|
||
title: '小程序APPID',
|
||
formItemProps: { ...rulesHelper.text },
|
||
colProps: { span: 12 },
|
||
},
|
||
{
|
||
key: 'skip_url',
|
||
title: '链接地址',
|
||
formItemProps: { ...rulesHelper.text },
|
||
colProps: { span: 12 },
|
||
},
|
||
]
|
||
: [
|
||
{
|
||
key: 'skip_url',
|
||
title: '链接地址',
|
||
formItemProps: { ...rulesHelper.text },
|
||
colProps: { span: 24 },
|
||
},
|
||
];
|
||
},
|
||
},
|
||
|
||
{
|
||
key: 'desc',
|
||
title: '链接标题',
|
||
colProps: { span: 24 },
|
||
formItemProps: { ...rulesHelper.text },
|
||
},
|
||
MyFormItems.UploadImages({
|
||
key: 'cover_image',
|
||
tooltip: '限1张图片10M以内',
|
||
title: '设置封面',
|
||
required: true,
|
||
max: 1,
|
||
}),
|
||
]
|
||
: content_type === CustomerMomentsContentTypeEnum.Link.value ||
|
||
content_type ===
|
||
CustomerMomentsContentTypeEnum.MiniProgram.value
|
||
? [
|
||
{
|
||
key: 'skip_url',
|
||
title: '链接',
|
||
formItemProps: { ...rulesHelper.text },
|
||
colProps: { span: 24 },
|
||
},
|
||
]
|
||
: [];
|
||
},
|
||
},
|
||
],
|
||
},
|
||
];
|
||
|
||
const handleNext = async () => {
|
||
// 这里可以添加表单验证逻辑
|
||
setCurrent(1);
|
||
console.log('next', current);
|
||
};
|
||
|
||
// 处理上一步
|
||
const handlePrev = () => {
|
||
setCurrent(0);
|
||
console.log('Prev', current);
|
||
};
|
||
|
||
return (
|
||
<MyModal
|
||
title={`创建${props.title}`}
|
||
type="primary"
|
||
size={'middle'}
|
||
myRef={modalRef}
|
||
width="580px"
|
||
node={
|
||
<Space direction="vertical">
|
||
<div style={{ width: '666px' }}>
|
||
<Steps
|
||
style={{ padding: '20px 200px 20px 20px' }}
|
||
current={current}
|
||
items={steps}
|
||
/>
|
||
</div>
|
||
<Space align="start">
|
||
<div style={{ width: '500px' }}>
|
||
<BetaSchemaForm<ApiTypes.Customer.CustomerMomentCategories.Store>
|
||
{...MyModalFormProps.props}
|
||
title={`添加${props.title}`}
|
||
wrapperCol={{ span: 24 }}
|
||
// width="1200px"
|
||
form={form}
|
||
layoutType="Form"
|
||
trigger={<MyButtons.Create title={`添加${props.title}`} />}
|
||
onFinish={async (values) => {
|
||
setFormData(values);
|
||
if (current < steps.length - 1) {
|
||
handleNext();
|
||
} else {
|
||
let data = { ...formData, ...values };
|
||
Apis.Customer.CustomerMoments.Store({
|
||
...data,
|
||
one_moment_categories_id:
|
||
formData?.moment_categories_ids[0],
|
||
two_moment_categories_id:
|
||
formData?.moment_categories_ids[1],
|
||
})
|
||
.then(() => {
|
||
props.reload?.();
|
||
message.success('提交成功！');
|
||
form.setFieldsValue({});
|
||
modalRef.current?.close();
|
||
setCurrent(0);
|
||
return true;
|
||
})
|
||
.catch(() => false);
|
||
}
|
||
}}
|
||
columns={steps[current].columns}
|
||
submitter={{
|
||
render: (props) => {
|
||
return (
|
||
<Space
|
||
style={{ display: 'flex', justifyContent: 'flex-end' }}
|
||
>
|
||
{current > 0 && (
|
||
<Button onClick={handlePrev}>上一步</Button>
|
||
)}
|
||
{current < steps.length - 1 ? (
|
||
<Button
|
||
type="primary"
|
||
onClick={() => props.form?.submit?.()}
|
||
>
|
||
下一步
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
type="primary"
|
||
onClick={() => props.form?.submit?.()}
|
||
>
|
||
提交
|
||
</Button>
|
||
)}
|
||
</Space>
|
||
);
|
||
},
|
||
}}
|
||
/>
|
||
</div>
|
||
<MyinfoPreview item={{ type: getContentType }} />
|
||
</Space>
|
||
</Space>
|
||
}
|
||
/>
|
||
);
|
||
}
|