339 lines
11 KiB
TypeScript
339 lines
11 KiB
TypeScript
import {
|
||
MyBetaModalFormProps,
|
||
MyButtons,
|
||
MyFormItems,
|
||
MyModalFormProps,
|
||
rulesHelper,
|
||
} from '@/common';
|
||
import { Selects } from '@/components/Select';
|
||
import { Apis } from '@/gen/Apis';
|
||
import { PatrolRoutesGenerationMethodEnum } from '@/gen/Enums';
|
||
import { BetaSchemaForm } from '@ant-design/pro-components';
|
||
import { Form, message } from 'antd';
|
||
import { useEffect, useRef } from 'react';
|
||
|
||
export default function Update(props: MyBetaModalFormProps) {
|
||
const [form] = Form.useForm();
|
||
const actionRef = useRef<any>();
|
||
|
||
const loadShow = () => {
|
||
Apis.Patrol.PatrolRoutes.Show({ id: props.item?.id ?? 0 }).then((res) => {
|
||
form.setFieldsValue({
|
||
...res?.data,
|
||
patrol_location: res?.data?.patrol_route_locations?.map(
|
||
(item: any) => ({
|
||
location_id: item.patrol_locations_id,
|
||
}),
|
||
),
|
||
});
|
||
});
|
||
};
|
||
|
||
// 使用useEffect添加样式，确保组件挂载时样式正确应用
|
||
useEffect(() => {
|
||
const styleId = 'custom-checkbox-styles';
|
||
let styleElement = document.getElementById(styleId) as HTMLStyleElement;
|
||
|
||
if (!styleElement) {
|
||
styleElement = document.createElement('style');
|
||
styleElement.id = styleId;
|
||
document.head.appendChild(styleElement);
|
||
}
|
||
|
||
// 添加checkbox样式，确保每个选项宽度一致且label和checkbox在同一行，一行显示7个
|
||
styleElement.textContent = `
|
||
/* 为checkbox组的容器设置样式 */
|
||
.custom-checkbox-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 为每个checkbox选项设置固定宽度，使一行能显示7个，并确保在同一行 */
|
||
.custom-checkbox-group .ant-checkbox-wrapper {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: calc(14.2857% - 4px); /* 一行7个，减去间距 */
|
||
min-width: 60px;
|
||
text-align: center;
|
||
margin-right: 0;
|
||
margin-bottom: 0;
|
||
white-space: nowrap;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 确保label和checkbox在同一行 */
|
||
.custom-checkbox-group .ant-checkbox + span {
|
||
display: inline;
|
||
width: auto;
|
||
margin-left: 4px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 确保整个选项作为一个整体居中 */
|
||
.custom-checkbox-group .ant-checkbox-wrapper-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 调整checkbox本身的大小 */
|
||
.custom-checkbox-group .ant-checkbox {
|
||
transform: scale(0.9);
|
||
}
|
||
`;
|
||
|
||
// 清理函数
|
||
return () => {
|
||
if (styleElement && styleElement.parentNode) {
|
||
styleElement.parentNode.removeChild(styleElement);
|
||
}
|
||
};
|
||
}, [props.item?.id]);
|
||
|
||
return (
|
||
<BetaSchemaForm<ApiTypes.Patrol.PatrolLocations.Update>
|
||
{...MyModalFormProps.props}
|
||
title={`编辑${props.title}`}
|
||
trigger={<MyButtons.Edit />}
|
||
key={new Date().getTime()}
|
||
layout="horizontal"
|
||
labelCol={{ span: 4 }}
|
||
wrapperCol={{ span: 20 }}
|
||
labelAlign="left"
|
||
width="720px"
|
||
form={form}
|
||
onOpenChange={(open: any) => {
|
||
if (open && props.item) {
|
||
props.item?.id ? loadShow() : null;
|
||
}
|
||
}}
|
||
onFinish={async (values: any) =>
|
||
Apis.Patrol.PatrolRoutes.Update({
|
||
...values,
|
||
patrol_location: values.patrol_location?.map(
|
||
(item: any) => item.location_id,
|
||
),
|
||
is_enabled: values.is_enabled ? 1 : 0,
|
||
id: props.item?.id ?? 0,
|
||
clock_start_time: values.task_start_time,
|
||
clock_end_time: values.task_end_time,
|
||
})
|
||
.then(() => {
|
||
props.reload?.();
|
||
message.success(props.title + '编辑成功');
|
||
return true;
|
||
})
|
||
.catch(() => false)
|
||
}
|
||
columns={[
|
||
{
|
||
title: '路线名称',
|
||
key: 'name',
|
||
colProps: { span: 24 },
|
||
formItemProps: { ...rulesHelper.text },
|
||
},
|
||
Selects?.AssetProjects({
|
||
title: '选择项目',
|
||
key: 'asset_projects_id',
|
||
colProps: { span: 24 },
|
||
formItemProps: { ...rulesHelper.text },
|
||
}),
|
||
{
|
||
valueType: 'dependency',
|
||
name: ['asset_projects_id'],
|
||
columns: ({ asset_projects_id }) => {
|
||
return asset_projects_id
|
||
? [
|
||
{
|
||
valueType: 'formList',
|
||
dataIndex: 'patrol_location',
|
||
title: '选择点位',
|
||
formItemProps: { ...rulesHelper.array },
|
||
fieldProps: {
|
||
actionRef: actionRef,
|
||
copyIconProps: false,
|
||
addButtonProps: {
|
||
children: '添加点位',
|
||
},
|
||
},
|
||
columns: [
|
||
{
|
||
valueType: 'group',
|
||
colProps: { span: 24 },
|
||
columns: [
|
||
Selects?.PatrolLocationsSelect({
|
||
title: '',
|
||
key: 'location_id',
|
||
colProps: { span: 24 },
|
||
tooltip: '点位的巡更顺序未为【自上而下】',
|
||
formItemProps: { ...rulesHelper.text },
|
||
params: {
|
||
asset_projects_id: asset_projects_id,
|
||
},
|
||
fieldProps: {
|
||
mode: 'single',
|
||
placeholder:
|
||
'请选择巡逻点位（如空白，请在“点位配置”中添加）',
|
||
},
|
||
}),
|
||
],
|
||
},
|
||
],
|
||
},
|
||
]
|
||
: [];
|
||
},
|
||
},
|
||
{
|
||
key: 'task_start_time',
|
||
title: '任务时段',
|
||
colProps: { span: 12 },
|
||
valueType: 'time',
|
||
required: true,
|
||
formItemProps: {
|
||
labelCol: { span: 8 },
|
||
wrapperCol: { span: 16 },
|
||
...rulesHelper.text,
|
||
},
|
||
fieldProps: {
|
||
placeholder: '请设置任务开始时间',
|
||
format: 'HH:mm',
|
||
style: { width: '100%' },
|
||
},
|
||
},
|
||
{
|
||
key: 'task_end_time',
|
||
valueType: 'time',
|
||
colProps: { span: 12 },
|
||
formItemProps: {
|
||
labelCol: { span: 8 },
|
||
wrapperCol: { span: 16 },
|
||
...rulesHelper.text,
|
||
},
|
||
fieldProps: {
|
||
placeholder: '请设置任务结束时间',
|
||
format: 'HH:mm',
|
||
style: { width: '100%' },
|
||
},
|
||
},
|
||
// {
|
||
// title: '执行时段',
|
||
// tooltip:
|
||
// '任务的具体执行中，不能早于可执行开始时间，不能晚于可执行结束时间',
|
||
// key: 'clock_start_time',
|
||
// colProps: { span: 12 },
|
||
// valueType: 'time',
|
||
// required: true,
|
||
// formItemProps: {
|
||
// labelCol: { span: 8 },
|
||
// wrapperCol: { span: 16 },
|
||
// ...rulesHelper.text,
|
||
// },
|
||
// fieldProps: {
|
||
// placeholder: '请设置任务可执行开始时间',
|
||
// format: 'HH:mm',
|
||
// style: { width: '100%' },
|
||
// },
|
||
// },
|
||
// {
|
||
// key: 'clock_end_time',
|
||
// valueType: 'time',
|
||
// colProps: { span: 12 },
|
||
// formItemProps: {
|
||
// labelCol: { span: 8 },
|
||
// wrapperCol: { span: 16 },
|
||
// ...rulesHelper.text,
|
||
// },
|
||
// fieldProps: {
|
||
// placeholder: '请设置任务可执行结束时间',
|
||
// format: 'HH:mm',
|
||
// style: { width: '100%' },
|
||
// },
|
||
// },
|
||
MyFormItems.EnumRadio({
|
||
key: 'generation_method',
|
||
title: '巡更周期',
|
||
tooltip: '每天巡更一次/每周x巡更一次/每月x号巡更一次',
|
||
valueEnum: PatrolRoutesGenerationMethodEnum,
|
||
colProps: { span: 24 },
|
||
formItemProps: { ...rulesHelper.text },
|
||
fieldProps: {
|
||
onChange: () => {
|
||
form.setFieldValue('date', undefined);
|
||
},
|
||
},
|
||
}),
|
||
{
|
||
valueType: 'dependency',
|
||
name: ['generation_method'],
|
||
columns: ({ generation_method }) => {
|
||
return generation_method === 'Weekly' ||
|
||
generation_method === 'Monthly'
|
||
? [
|
||
{
|
||
title: '生成时段',
|
||
key: 'date',
|
||
valueType: 'checkbox',
|
||
formItemProps: { ...rulesHelper.array },
|
||
colProps: { span: 24 },
|
||
fieldProps: {
|
||
style: { width: '100%' },
|
||
// 使用CSS方式设置每个checkbox选项的宽度
|
||
className: 'custom-checkbox-group',
|
||
},
|
||
valueEnum: () => {
|
||
if (generation_method === 'Weekly') {
|
||
const weekDays = [
|
||
{ label: '周一', value: 1 },
|
||
{ label: '周二', value: 2 },
|
||
{ label: '周三', value: 3 },
|
||
{ label: '周四', value: 4 },
|
||
{ label: '周五', value: 5 },
|
||
{ label: '周六', value: 6 },
|
||
{ label: '周日', value: 7 },
|
||
];
|
||
return weekDays.reduce((acc: any, day) => {
|
||
acc[day.value] = { text: day.label };
|
||
return acc;
|
||
}, {});
|
||
}
|
||
if (generation_method === 'Monthly') {
|
||
const monthDays = Array.from(
|
||
{ length: 31 },
|
||
(_, index) => {
|
||
const day = index + 1;
|
||
return {
|
||
label: `${day < 10 ? `0${day}` : day}号`,
|
||
value: day,
|
||
};
|
||
},
|
||
);
|
||
|
||
return monthDays.reduce((acc: any, day) => {
|
||
acc[day.value] = { text: day.label };
|
||
return acc;
|
||
}, {});
|
||
}
|
||
},
|
||
},
|
||
]
|
||
: [];
|
||
},
|
||
},
|
||
|
||
{
|
||
title: '备注',
|
||
key: 'remark',
|
||
valueType: 'textarea',
|
||
colProps: { span: 24 },
|
||
},
|
||
]}
|
||
/>
|
||
);
|
||
}
|