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 },
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
}
|