You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
4.4 KiB
100 lines
4.4 KiB
import React, { useEffect, useState } from 'react';
|
|
import { Modal, Input, Form, message, Select } from 'antd';
|
|
const { TextArea } = Input;
|
|
const ResourceCatalogModal = (props) => {
|
|
const { resourceCatalog, onConfirm, onCancel, editData, organization } = props;
|
|
const [form] = Form.useForm();
|
|
useEffect(() => {
|
|
}, []);
|
|
const handleOk = () => {
|
|
form.validateFields().then(values => {
|
|
if (onConfirm) {
|
|
if (editData.add) {
|
|
//新建
|
|
let exist = resourceCatalog.find(rc => rc.name === values.name);
|
|
if (exist) {
|
|
message.error('该资源目录名称已存在');
|
|
return false;
|
|
}
|
|
exist = resourceCatalog.find(rc => rc.code === values.code);
|
|
if (exist) {
|
|
message.error('该资源目录代码已存在');
|
|
return false;
|
|
}
|
|
} else {//修改
|
|
let exist = resourceCatalog.find(rc => rc.name === values.name && rc.id != editData.record.id);
|
|
if (exist) {
|
|
message.error('该资源目录名称已存在');
|
|
return false;
|
|
}
|
|
exist = resourceCatalog.find(rc => rc.code === values.code && rc.id != editData.record.id);
|
|
if (exist) {
|
|
message.error('该资源目录代码已存在');
|
|
return false;
|
|
}
|
|
}
|
|
onConfirm(values)
|
|
}
|
|
})
|
|
}
|
|
const validatorNull = (rule, value, getFieldValue, validateFields) => {
|
|
if (!value || !value.trim().length) {
|
|
return Promise.reject(new Error(`${rule.field === 'name' ? '名称' : '代码'}不可空字符串`));
|
|
}
|
|
return Promise.resolve();
|
|
}
|
|
return (
|
|
<Modal title={editData.title} open={true} destroyOnClose
|
|
okText='确定' width={800}
|
|
onOk={() => handleOk(null)}
|
|
onCancel={onCancel}>
|
|
<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} initialValues={editData.record || {}}>
|
|
{editData.child ? <Form.Item
|
|
label='上级目录'
|
|
name='parentName'
|
|
>
|
|
<Input disabled style={{ width: '90%' }} />
|
|
</Form.Item> : null}
|
|
<Form.Item
|
|
label='名称'
|
|
name='name'
|
|
rules={[{ required: true, message: '' }, { max: 50, message: `名称不超过50个字符` },
|
|
({ getFieldValue, validateFields }) => ({
|
|
validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields) }
|
|
})]}>
|
|
<Input style={{ width: '90%' }} placeholder={`请输入名称`} />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label='代码'
|
|
name='code'
|
|
rules={[{ required: true, message: '' }, { max: 50, message: `代码不超过50个字符` },
|
|
({ getFieldValue, validateFields }) => ({
|
|
validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields) }
|
|
})]}>
|
|
<Input style={{ width: '90%' }} placeholder={`请输入代码`} />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label='机构'
|
|
name='orgId'
|
|
disabled={editData?.orgId}
|
|
rules={[{ required: true, message: '' }]}
|
|
>
|
|
<Select style={{ width: '90%' }} placeholder={`请输入代码`} >
|
|
{
|
|
organization?.map(s => (<Select.Option value={s.id}>{s.name}</Select.Option>))
|
|
}
|
|
</Select>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label='描述'
|
|
name='description'
|
|
rules={[{ max: 255, message: `描述不超过255个字符` }]}>
|
|
<TextArea rows={4} style={{ width: '90%' }} placeholder={`请输入描述`} />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
)
|
|
}
|
|
export default ResourceCatalogModal;
|