130 lines
2.8 KiB
TypeScript
130 lines
2.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
ProForm,
|
|
ProFormDigit,
|
|
ProFormText,
|
|
ProFormSwitch,
|
|
ProFormRadio
|
|
} from '@ant-design/pro-components';
|
|
import { Form, Modal, InputNumber } from 'antd';
|
|
import { useIntl } from '@umijs/max';
|
|
import FilesManager from '@/components/FilesManage/index';
|
|
const RoleForm: React.FC = (props: any) => {
|
|
|
|
const [form] = Form.useForm();
|
|
|
|
const { values } = props;
|
|
|
|
useEffect(() => {
|
|
console.log(values,'values');
|
|
|
|
form.resetFields();
|
|
form.setFieldsValue(values);
|
|
}, [form, props]);
|
|
|
|
const intl = useIntl();
|
|
const handleOk = () => {
|
|
form.submit();
|
|
};
|
|
const handleCancel = () => {
|
|
props.onCancel();
|
|
};
|
|
const handleFinish = async (values: any) => {
|
|
props.onSubmit(values);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
width={640}
|
|
title={'轮播图'}
|
|
open={props.open}
|
|
forceRender
|
|
destroyOnClose
|
|
onOk={handleOk}
|
|
onCancel={handleCancel}
|
|
>
|
|
<ProForm
|
|
form={form}
|
|
submitter={false}
|
|
layout="horizontal"
|
|
onFinish={handleFinish}>
|
|
<ProFormDigit
|
|
name="id"
|
|
label={'ID'}
|
|
disabled
|
|
hidden={true}
|
|
/>
|
|
|
|
<ProForm.Group>
|
|
<ProFormText
|
|
name="title"
|
|
label={'标题'}
|
|
placeholder="请输入标题"
|
|
/>
|
|
</ProForm.Group>
|
|
<ProForm.Group>
|
|
<ProForm.Item
|
|
label="排序"
|
|
name={'sortOrder'}
|
|
>
|
|
<InputNumber style={{ width: 200 }} />
|
|
</ProForm.Item>
|
|
|
|
|
|
<ProFormText
|
|
name="jumpUrl"
|
|
label={'跳转地址'}
|
|
placeholder="请输入跳转地址"
|
|
/>
|
|
|
|
<ProFormSwitch
|
|
checkedChildren="启用"
|
|
unCheckedChildren="禁用"
|
|
name="status"
|
|
label="是否启用"
|
|
fieldProps={
|
|
{
|
|
defaultChecked: true
|
|
}
|
|
}
|
|
/>
|
|
|
|
</ProForm.Group>
|
|
|
|
<ProFormRadio.Group
|
|
rules={[{ required: true, message: '请选择' }]}
|
|
name="type"
|
|
radioType="button"
|
|
label="位置"
|
|
options={[
|
|
{
|
|
label: '首页Banner',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '首页下方活动',
|
|
value: 2,
|
|
},
|
|
{
|
|
label: '新能源汽车下乡',
|
|
value: 3,
|
|
}
|
|
]}
|
|
/>
|
|
<ProForm.Group>
|
|
<ProForm.Item label="图片" name="imageUrl">
|
|
<FilesManager
|
|
fileType="image"
|
|
defaultValue={values?.imageUrl}
|
|
count={1}
|
|
mode=""
|
|
/>
|
|
</ProForm.Item>
|
|
</ProForm.Group>
|
|
</ProForm>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default RoleForm;
|