155 lines
5.2 KiB
TypeScript
155 lines
5.2 KiB
TypeScript
import {
|
||
MyBetaModalFormProps,
|
||
MyButtons,
|
||
MyModalFormProps,
|
||
rulesHelper,
|
||
} from '@/common';
|
||
import { Selects } from '@/components/Select';
|
||
import { Apis } from '@/gen/Apis';
|
||
import { BetaSchemaForm, ProCard } from '@ant-design/pro-components';
|
||
import { Form, message } from 'antd';
|
||
|
||
export default function Create(props: MyBetaModalFormProps) {
|
||
const [form] = Form.useForm();
|
||
console.log(props?.item, 'item');
|
||
return (
|
||
<BetaSchemaForm<ApiTypes.Grid.Grids.Store>
|
||
{...MyModalFormProps.props}
|
||
title={`划分范围`}
|
||
// 基本表单
|
||
width="700px"
|
||
layout="horizontal"
|
||
labelCol={{ span: 4 }}
|
||
wrapperCol={{ span: 24 }}
|
||
labelAlign="right"
|
||
trigger={<MyButtons.Create title={`划分范围`} />}
|
||
form={form}
|
||
key={new Date().getTime()}
|
||
onOpenChange={(open: any) => {
|
||
if (open) {
|
||
form.resetFields(); // 清空表单数据
|
||
}
|
||
}}
|
||
onFinish={async (values: any) => {
|
||
values?.grid_ranges?.forEach((res: { asset_projects_id: string }) => {
|
||
res.asset_projects_id = props?.item?.id;
|
||
});
|
||
return Apis.Grid.Grids.Store({
|
||
...values,
|
||
asset_projects_id: props?.item?.id,
|
||
})
|
||
.then(() => {
|
||
props.reload?.();
|
||
message.success('范围划分成功');
|
||
return true;
|
||
})
|
||
.catch(() => false);
|
||
}}
|
||
columns={[
|
||
Selects?.GetGridMark({
|
||
key: 'grid_mark',
|
||
title: '范围标识',
|
||
params: {
|
||
asset_projects_id: props?.item?.id,
|
||
},
|
||
colProps: { span: 24 },
|
||
formItemProps: { ...rulesHelper.text },
|
||
}),
|
||
{
|
||
valueType: 'formList',
|
||
dataIndex: 'grid_ranges',
|
||
colProps: { span: 24 },
|
||
initialValue: [''],
|
||
formItemProps: { ...rulesHelper.array },
|
||
fieldProps: {
|
||
copyIconProps: false,
|
||
creatorButtonProps: {
|
||
creatorButtonText: '添加楼栋单元',
|
||
},
|
||
itemRender: (
|
||
{ listDom, action }: any,
|
||
{ index }: { index: number },
|
||
) => {
|
||
return (
|
||
<ProCard
|
||
bordered
|
||
style={{ marginBlockEnd: 5 }}
|
||
title={`选择范围${index + 1}`}
|
||
extra={action}
|
||
bodyStyle={{ paddingBlockEnd: 0 }}
|
||
>
|
||
{listDom}
|
||
</ProCard>
|
||
);
|
||
},
|
||
},
|
||
columns: [
|
||
{
|
||
valueType: 'dependency',
|
||
name: ['asset_buildings_id', 'asset_units_id'],
|
||
columns: ({ asset_buildings_id }) => {
|
||
return [
|
||
{
|
||
valueType: 'group',
|
||
columns: [
|
||
Selects?.AssetBuildings({
|
||
key: 'asset_buildings_id',
|
||
title: '选择楼栋',
|
||
params: {
|
||
asset_projects_id: props?.item?.id,
|
||
},
|
||
colProps: { span: 12 },
|
||
formItemProps: { ...rulesHelper.number },
|
||
fieldProps: {
|
||
showSearch: true,
|
||
onChange: (value: any) => {
|
||
// 获取当前表单的所有值
|
||
const formValues = form.getFieldsValue();
|
||
const gridRanges = formValues.grid_ranges || [];
|
||
|
||
// 清空所有行的asset_units_id，因为楼栋变化会影响所有单元选择
|
||
const updatedGridRanges = gridRanges.map(
|
||
(item: any, index: number) => {
|
||
if (item.asset_buildings_id === value) {
|
||
return { ...item, asset_units_id: undefined };
|
||
}
|
||
return item;
|
||
},
|
||
);
|
||
|
||
// 更新表单值
|
||
form.setFieldsValue({
|
||
grid_ranges: updatedGridRanges,
|
||
});
|
||
},
|
||
},
|
||
}),
|
||
...(asset_buildings_id
|
||
? [
|
||
Selects?.GridUnits({
|
||
key: 'asset_units_id',
|
||
title: '选择单元',
|
||
params: {
|
||
asset_projects_id: props?.item?.id,
|
||
asset_buildings_id: asset_buildings_id,
|
||
},
|
||
colProps: { span: 12 },
|
||
formItemProps: { ...rulesHelper.text },
|
||
fieldProps: {
|
||
showSearch: true,
|
||
},
|
||
}),
|
||
]
|
||
: []),
|
||
],
|
||
},
|
||
];
|
||
},
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
);
|
||
}
|