Commit 466856cd authored by Ylg's avatar Ylg

refactor edit modal

parent 2b2cf8ab
import { Form, Modal, Select } from 'antd';
import { Button, Col, Divider, Form, Modal, Row, Select } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import { useEffect, useState } from 'react';
import { useEffect } from 'react';
import styles from './index.less';
import type { IFormValue } from '@/pages/PromptWord';
......@@ -16,34 +16,35 @@ interface IEditPromptModalProps {
}
const EditPromptModal = (props: IEditPromptModalProps) => {
const { open, setOpen, types, modalType, handleEditPrompt, loading, oldRow, handleCreatePrompt } =
props;
const [currentSelectValue, setCurrentSelectValue] = useState<string | null>('请选择');
const [textAreaValue, setTextAreaValue] = useState('');
const { open, setOpen, types, modalType, handleEditPrompt, loading, oldRow, handleCreatePrompt } = props;
const [form] = Form.useForm();
useEffect(() => {
if (modalType === 'create') {
setTextAreaValue('');
setCurrentSelectValue('');
} else {
setTextAreaValue(oldRow.content);
setCurrentSelectValue(oldRow.type || '请选择');
form.resetFields()
}
if (modalType === 'edit') {
form.setFieldsValue({
type: oldRow.type,
content: oldRow.content,
})
}
}, [open]);
const handleSavePrompt = async () => {
const { type, content } = form.getFieldsValue();
if (modalType === 'create') {
await handleCreatePrompt({
type: currentSelectValue,
content: textAreaValue,
type,
content
});
}
if (modalType === 'edit') {
await handleEditPrompt({
type: currentSelectValue,
content: textAreaValue,
type,
content,
});
}
......@@ -51,7 +52,8 @@ const EditPromptModal = (props: IEditPromptModalProps) => {
};
const layout = {
labelCol: { span: 3 },
labelCol: { span: 4 },
wrapperCol: { span: 18 },
};
return (
......@@ -62,23 +64,30 @@ const EditPromptModal = (props: IEditPromptModalProps) => {
wrapClassName={styles.modal}
title={modalType === 'create' ? '新增提示用语' : '编辑提示用语'}
okText="保存"
onOk={handleSavePrompt}
onOk={() => {
setOpen(false);
}}
onCancel={() => {
setCurrentSelectValue('请选择');
setOpen(false);
}}
width={574}
bodyStyle={{
padding: '20px',
}}
footer={null}
>
<Form labelAlign="right" {...layout}>
<Form.Item label="类型:">
<Form
form={form}
name="editAndCrateForm"
{...layout}
onFinish={handleSavePrompt}
>
<Form.Item
label="类型"
name={"type"}
rules={[
{ required: true, message: '请选择类型!' },
]}
>
<Select
onChange={(value: string) => {
setCurrentSelectValue(value);
}}
value={currentSelectValue}
placeholder='请选择'
>
{types.map((item) => (
<Select.Option value={item} key={item}>
......@@ -87,17 +96,38 @@ const EditPromptModal = (props: IEditPromptModalProps) => {
))}
</Select>
</Form.Item>
<Form.Item label="提示词语">
<Form.Item
label="提示词语"
name={"content"}
rules={[
{ required: true, message: '请输入提示用语!' },
]}
>
<TextArea
style={{
height: '200px',
}}
value={textAreaValue}
onChange={(e) => {
setTextAreaValue(e.target.value);
}}
/>
</Form.Item>
<Divider />
<Row justify={'end'} gutter={8}>
<Col>
<Form.Item key={'cancelButton'} noStyle={true}>
<Button key="back" onClick={() => {
setOpen(false);
}}>
取消
</Button>
</Form.Item>
</Col>
<Col>
<Form.Item key={'saveButton'} noStyle={true}>
<Button key="submit" type="primary" loading={loading} htmlType="submit">
保存
</Button>
</Form.Item>
</Col>
</Row>
</Form>
</Modal>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment