flat: 暂存
This commit is contained in:
史典卓
@@ -1,140 +1,143 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
ModalForm,
|
||||
ProForm,
|
||||
ProFormDigit,
|
||||
ProFormRadio,
|
||||
ProFormSelect,
|
||||
ProFormText,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Form,Input } from 'antd';
|
||||
import { DictValueEnumObj } from '@/components/DictTag';
|
||||
|
||||
export type ListFormProps = {
|
||||
onCancel: (flag?: boolean, formVals?: unknown) => void;
|
||||
onSubmit: (values: API.ApplicationProducts.Product) => Promise<void>;
|
||||
open: boolean;
|
||||
values?: Partial<API.ApplicationProducts.Product>;
|
||||
// jobGroupOptions: DictOptionType[];
|
||||
companyLabelEnum?: DictValueEnumObj;
|
||||
companyNatureEnum?: DictValueEnumObj;
|
||||
enableStatusEnum?: DictValueEnumObj;
|
||||
};
|
||||
|
||||
const waitTime = (time: number = 100) => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(true);
|
||||
}, time);
|
||||
});
|
||||
};
|
||||
|
||||
const listEdit: React.FC<ListFormProps> = (props) => {
|
||||
const [form] = Form.useForm();
|
||||
const [colorHex, setColorHex] = useState('#3b82f6');
|
||||
const { companyNatureEnum, companyLabelEnum, enableStatusEnum } = props;
|
||||
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
if (props.values) {
|
||||
form.setFieldsValue({
|
||||
...props.values,
|
||||
status: String(props.values.status),
|
||||
});
|
||||
setColorHex(props.values.backgroudColor);
|
||||
}
|
||||
}, [form, props]);
|
||||
|
||||
const handleCancel = () => {
|
||||
props.onCancel();
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
const handleFinish = async (values: Record<string, any>) => {
|
||||
// console.log(colorHex, values.backgroudColor);
|
||||
if (typeof colorHex === 'string') {
|
||||
values.backgroudColor = colorHex;
|
||||
} else {
|
||||
values.backgroudColor = values.backgroudColor.toHexString();
|
||||
}
|
||||
props.onSubmit(values as API.ApplicationProducts.Product);
|
||||
};
|
||||
return (
|
||||
<ModalForm<{
|
||||
name: string;
|
||||
company: string;
|
||||
}>
|
||||
title={`${props.values ? '编辑' : '新增'}企业`}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
open={props.open}
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => handleCancel(),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={handleFinish}
|
||||
initialValues={{
|
||||
cardOrder: 0,
|
||||
status: '0',
|
||||
}}
|
||||
>
|
||||
<ProFormDigit label="InputNumber" name="companyCardId" disabled hidden={true} />
|
||||
<ProForm.Group>
|
||||
<ProFormText width="md" name="name" label="卡片名称" placeholder="请输入卡片名称" />
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="backgroudColor"
|
||||
label="卡片背景色"
|
||||
valueType="color"
|
||||
disabledAlpha
|
||||
placeholder="请选择单位规模"
|
||||
fieldProps={{
|
||||
value: colorHex,
|
||||
onChange: (e) => setColorHex(e),
|
||||
}}
|
||||
/>
|
||||
{/*<span>HEX: {colorHex.}</span>*/}
|
||||
</ProForm.Group>
|
||||
<ProForm.Group>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="companyNature"
|
||||
label="企业性质"
|
||||
valueEnum={companyNatureEnum}
|
||||
placeholder="请选择企业性质"
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="targ"
|
||||
label="企业标签"
|
||||
valueEnum={companyLabelEnum}
|
||||
placeholder="请选择企业标签"
|
||||
/>
|
||||
</ProForm.Group>
|
||||
<ProForm.Group>
|
||||
<ProFormDigit width="md" label="排序" name="cardOrder" min={0} />
|
||||
<ProFormRadio.Group
|
||||
valueEnum={enableStatusEnum}
|
||||
name="status"
|
||||
label="启用状态"
|
||||
width="md"
|
||||
/>
|
||||
</ProForm.Group>
|
||||
<ProForm.Item
|
||||
name="description"
|
||||
label="精选描述"
|
||||
>
|
||||
<Input.TextArea
|
||||
placeholder="请输入卡片精选描述（最多200字）"
|
||||
maxLength={200}
|
||||
showCount
|
||||
rows={4}
|
||||
style={{ resize: 'none' }}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
|
||||
export default listEdit;
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
ModalForm,
|
||||
ProForm,
|
||||
ProFormDigit,
|
||||
ProFormRadio,
|
||||
ProFormSelect,
|
||||
ProFormText,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Form, Input } from 'antd';
|
||||
import { DictValueEnumObj } from '@/components/DictTag';
|
||||
|
||||
export type ListFormProps = {
|
||||
onCancel: (flag?: boolean, formVals?: unknown) => void;
|
||||
onSubmit: (values: API.ApplicationProducts.Product) => Promise<void>;
|
||||
open: boolean;
|
||||
values?: Partial<API.ApplicationProducts.Product>;
|
||||
// jobGroupOptions: DictOptionType[];
|
||||
companyLabelEnum?: DictValueEnumObj;
|
||||
companyNatureEnum?: DictValueEnumObj;
|
||||
enableStatusEnum?: DictValueEnumObj;
|
||||
};
|
||||
|
||||
const waitTime = (time: number = 100) => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(true);
|
||||
}, time);
|
||||
});
|
||||
};
|
||||
|
||||
const listEdit: React.FC<ListFormProps> = (props) => {
|
||||
const [form] = Form.useForm();
|
||||
const [colorHex, setColorHex] = useState('#3b82f6');
|
||||
const { companyNatureEnum, companyLabelEnum, enableStatusEnum } = props;
|
||||
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
if (props.values) {
|
||||
form.setFieldsValue({
|
||||
...props.values,
|
||||
status: String(props.values.status),
|
||||
});
|
||||
setColorHex(props.values.backgroudColor);
|
||||
}
|
||||
}, [form, props]);
|
||||
|
||||
const handleCancel = () => {
|
||||
props.onCancel();
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
const handleFinish = async (values: Record<string, any>) => {
|
||||
console.log(colorHex, values);
|
||||
if (typeof colorHex === 'string') {
|
||||
values.backgroudColor = colorHex;
|
||||
} else {
|
||||
values.backgroudColor = values.backgroudColor.toHexString();
|
||||
}
|
||||
if (!values.companyNature) {
|
||||
values['companyNature'] = '';
|
||||
}
|
||||
if (!values.targ) {
|
||||
values['targ'] = '';
|
||||
}
|
||||
props.onSubmit(values as API.ApplicationProducts.Product);
|
||||
};
|
||||
return (
|
||||
<ModalForm<{
|
||||
name: string;
|
||||
company: string;
|
||||
}>
|
||||
title={`${props.values ? '编辑' : '新增'}企业`}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
open={props.open}
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => handleCancel(),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={handleFinish}
|
||||
initialValues={{
|
||||
cardOrder: 0,
|
||||
status: '0',
|
||||
}}
|
||||
>
|
||||
<ProFormDigit label="InputNumber" name="companyCardId" disabled hidden={true} />
|
||||
<ProForm.Group>
|
||||
<ProFormText width="md" name="name" label="卡片名称" placeholder="请输入卡片名称" />
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="backgroudColor"
|
||||
label="卡片背景色"
|
||||
valueType="color"
|
||||
disabledAlpha
|
||||
placeholder="请选择单位规模"
|
||||
fieldProps={{
|
||||
value: colorHex,
|
||||
onChange: (e) => setColorHex(e),
|
||||
}}
|
||||
/>
|
||||
{/*<span>HEX: {colorHex.}</span>*/}
|
||||
</ProForm.Group>
|
||||
<ProForm.Group>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="companyNature"
|
||||
label="企业性质"
|
||||
valueEnum={companyNatureEnum}
|
||||
placeholder="请选择企业性质"
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="targ"
|
||||
label="企业标签"
|
||||
valueEnum={companyLabelEnum}
|
||||
placeholder="请选择企业标签"
|
||||
/>
|
||||
</ProForm.Group>
|
||||
<ProForm.Group>
|
||||
<ProFormDigit width="md" label="排序" name="cardOrder" min={0} />
|
||||
<ProFormRadio.Group
|
||||
valueEnum={enableStatusEnum}
|
||||
name="status"
|
||||
label="启用状态"
|
||||
width="md"
|
||||
/>
|
||||
</ProForm.Group>
|
||||
<ProForm.Item name="description" label="精选描述">
|
||||
<Input.TextArea
|
||||
placeholder="请输入卡片精选描述（最多200字）"
|
||||
maxLength={200}
|
||||
showCount
|
||||
rows={4}
|
||||
style={{ resize: 'none' }}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
|
||||
export default listEdit;
|
||||
|
||||
Reference in New Issue
Block a user