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 TextArea from 'antd/lib/input/TextArea';
import { useEffect, useState } from 'react'; import { useEffect } from 'react';
import styles from './index.less'; import styles from './index.less';
import type { IFormValue } from '@/pages/PromptWord'; import type { IFormValue } from '@/pages/PromptWord';
...@@ -16,34 +16,35 @@ interface IEditPromptModalProps { ...@@ -16,34 +16,35 @@ interface IEditPromptModalProps {
} }
const EditPromptModal = (props: IEditPromptModalProps) => { const EditPromptModal = (props: IEditPromptModalProps) => {
const { open, setOpen, types, modalType, handleEditPrompt, loading, oldRow, handleCreatePrompt } = const { open, setOpen, types, modalType, handleEditPrompt, loading, oldRow, handleCreatePrompt } = props;
props; const [form] = Form.useForm();
const [currentSelectValue, setCurrentSelectValue] = useState<string | null>('请选择');
const [textAreaValue, setTextAreaValue] = useState('');
useEffect(() => { useEffect(() => {
if (modalType === 'create') { if (modalType === 'create') {
setTextAreaValue(''); form.resetFields()
setCurrentSelectValue(''); }
} else {
setTextAreaValue(oldRow.content); if (modalType === 'edit') {
setCurrentSelectValue(oldRow.type || '请选择'); form.setFieldsValue({
type: oldRow.type,
content: oldRow.content,
})
} }
}, [open]); }, [open]);
const handleSavePrompt = async () => { const handleSavePrompt = async () => {
const { type, content } = form.getFieldsValue();
if (modalType === 'create') { if (modalType === 'create') {
await handleCreatePrompt({ await handleCreatePrompt({
type: currentSelectValue, type,
content: textAreaValue, content
}); });
} }
if (modalType === 'edit') { if (modalType === 'edit') {
await handleEditPrompt({ await handleEditPrompt({
type: currentSelectValue, type,
content: textAreaValue, content,
}); });
} }
...@@ -51,7 +52,8 @@ const EditPromptModal = (props: IEditPromptModalProps) => { ...@@ -51,7 +52,8 @@ const EditPromptModal = (props: IEditPromptModalProps) => {
}; };
const layout = { const layout = {
labelCol: { span: 3 }, labelCol: { span: 4 },
wrapperCol: { span: 18 },
}; };
return ( return (
...@@ -62,23 +64,30 @@ const EditPromptModal = (props: IEditPromptModalProps) => { ...@@ -62,23 +64,30 @@ const EditPromptModal = (props: IEditPromptModalProps) => {
wrapClassName={styles.modal} wrapClassName={styles.modal}
title={modalType === 'create' ? '新增提示用语' : '编辑提示用语'} title={modalType === 'create' ? '新增提示用语' : '编辑提示用语'}
okText="保存" okText="保存"
onOk={handleSavePrompt} onOk={() => {
setOpen(false);
}}
onCancel={() => { onCancel={() => {
setCurrentSelectValue('请选择');
setOpen(false); setOpen(false);
}} }}
width={574} width={574}
bodyStyle={{ footer={null}
padding: '20px',
}}
> >
<Form labelAlign="right" {...layout}> <Form
<Form.Item label="类型:"> form={form}
name="editAndCrateForm"
{...layout}
onFinish={handleSavePrompt}
>
<Form.Item
label="类型"
name={"type"}
rules={[
{ required: true, message: '请选择类型!' },
]}
>
<Select <Select
onChange={(value: string) => { placeholder='请选择'
setCurrentSelectValue(value);
}}
value={currentSelectValue}
> >
{types.map((item) => ( {types.map((item) => (
<Select.Option value={item} key={item}> <Select.Option value={item} key={item}>
...@@ -87,17 +96,38 @@ const EditPromptModal = (props: IEditPromptModalProps) => { ...@@ -87,17 +96,38 @@ const EditPromptModal = (props: IEditPromptModalProps) => {
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="提示词语"> <Form.Item
label="提示词语"
name={"content"}
rules={[
{ required: true, message: '请输入提示用语!' },
]}
>
<TextArea <TextArea
style={{ style={{
height: '200px', height: '200px',
}} }}
value={textAreaValue}
onChange={(e) => {
setTextAreaValue(e.target.value);
}}
/> />
</Form.Item> </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> </Form>
</Modal> </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