修改提示词类型和提示词预设
This commit is contained in:
@@ -99,7 +99,7 @@ const ModifyMachine: React.FC<ModifyMachineProps> = ({ id, setFormRef, open }) =
|
||||
label="机器码"
|
||||
name="machineId"
|
||||
>
|
||||
<Input disabled={initialState?.currentUser?.roleNames?.includes("Admin") || initialState?.currentUser?.roleNames.includes("Super Admin")} />
|
||||
<Input disabled={!(initialState?.currentUser?.roleNames?.includes("Admin") || initialState?.currentUser?.roleNames.includes("Super Admin"))} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
import { GetOptions, getOptionsStringValue, SaveOptions } from '@/services/services/options/optionsTool';
|
||||
import { useOptionsStore } from '@/store/options';
|
||||
import { useSoftStore } from '@/store/software';
|
||||
import { Button, Card, Form, Input } from 'antd';
|
||||
import TextArea from 'antd/es/input/TextArea';
|
||||
import { message } from 'antd/lib';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
const SimpleOptions: React.FC = () => {
|
||||
|
||||
const { setTopSpinning, setTopSpinTip } = useSoftStore();
|
||||
const [messageApi, messageHolder] = message.useMessage();
|
||||
const { laitoolOptions, setLaitoolOptions } = useOptionsStore();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setTopSpinning(true);
|
||||
setTopSpinTip("加载信息中");
|
||||
// 这边加载所有的配音数据
|
||||
GetOptions("software").then((res) => {
|
||||
setLaitoolOptions(res);
|
||||
form.setFieldsValue({
|
||||
LaitoolHomePage: getOptionsStringValue(res, 'LaitoolHomePage', ""),
|
||||
LaitoolUpdateContent: getOptionsStringValue(res, 'LaitoolUpdateContent', ""),
|
||||
LaitoolNotice: getOptionsStringValue(res, 'LaitoolNotice', ""),
|
||||
LaitoolVersion: getOptionsStringValue(res, 'LaitoolVersion', ""),
|
||||
});
|
||||
}
|
||||
).catch((err: any) => {
|
||||
messageApi.error(err.message);
|
||||
}).finally(() => {
|
||||
setTopSpinning(false);
|
||||
});
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
async function onFinish(values: any): Promise<void> {
|
||||
setTopSpinning(true);
|
||||
setTopSpinTip("正在保存通用设置");
|
||||
try {
|
||||
// 这边保存所有的配音数据
|
||||
await SaveOptions(values);
|
||||
// 判断Option中的key是不是在属性上
|
||||
for (let key in values) {
|
||||
setLaitoolOptions(laitoolOptions.map((item: OptionModel.Option) => {
|
||||
if (item.key === key) {
|
||||
item.value = values[key]
|
||||
}
|
||||
return item
|
||||
}));
|
||||
}
|
||||
messageApi.success('设置成功');
|
||||
} catch (error: any) {
|
||||
messageApi.error(error.message);
|
||||
} finally {
|
||||
setTopSpinning(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form name="trigger" form={form} layout="vertical" autoComplete="off" onFinish={onFinish}>
|
||||
<Form.Item
|
||||
label="软件版本号"
|
||||
name="LaitoolVersion"
|
||||
>
|
||||
<Input placeholder='请输入版本号' />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="首页内容"
|
||||
name="LaitoolHomePage"
|
||||
>
|
||||
<TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="支持HTML和网址，网址用iframe，可以内嵌所有的网页" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="更新内容"
|
||||
name="LaitoolUpdateContent"
|
||||
>
|
||||
<TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="支持HTML和网址，网址用iframe" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="通知"
|
||||
name="LaitoolNotice"
|
||||
>
|
||||
<TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="支持HTML和网址，网址用iframe" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button color="primary" variant="filled" htmlType="submit">设置通用设置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
{messageHolder}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SimpleOptions;
|
||||
@@ -0,0 +1,78 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { GetOptions, getOptionsStringValue, SaveOptions } from '@/services/services/options/optionsTool';
|
||||
import { Button, Col, Form, Input, InputNumber, message, Row, Space } from 'antd';
|
||||
import { useSoftStore } from '@/store/software';
|
||||
|
||||
type TrailOptionsProps = {
|
||||
LaiToolTrialDays: number;
|
||||
}
|
||||
|
||||
const TrailOptions: React.FC = () => {
|
||||
|
||||
const [form] = Form.useForm();
|
||||
const { setTopSpinning, setTopSpinTip } = useSoftStore();
|
||||
const [messageApi, messageHolder] = message.useMessage();
|
||||
|
||||
useEffect(() => {
|
||||
setTopSpinning(true);
|
||||
setTopSpinTip("加载信息中");
|
||||
GetOptions("trial").then((res) => {
|
||||
form.setFieldsValue({
|
||||
LaiToolTrialDays: getOptionsStringValue(res, 'LaiToolTrialDays', ""),
|
||||
});
|
||||
}).catch((err: any) => {
|
||||
messageApi.error(err.message);
|
||||
}).finally(() => {
|
||||
setTopSpinning(false);
|
||||
});
|
||||
|
||||
}, []);
|
||||
|
||||
const formStyle: React.CSSProperties = {
|
||||
maxWidth: 'none',
|
||||
padding: 24,
|
||||
};
|
||||
|
||||
const onFinish = async (values: TrailOptionsProps) => {
|
||||
setTopSpinning(true);
|
||||
setTopSpinTip("正在保存试用设置");
|
||||
try {
|
||||
await SaveOptions(values);
|
||||
messageApi.success('保存软件试用设置成功');
|
||||
} catch (error: any) {
|
||||
messageApi.error(error.message);
|
||||
} finally {
|
||||
setTopSpinning(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form form={form} layout="vertical" name="advanced_search" style={formStyle} onFinish={onFinish}>
|
||||
<Row gutter={24} >
|
||||
<Col span={8} >
|
||||
<Form.Item
|
||||
label="软件最大试用天数"
|
||||
name="LaiToolTrialDays"
|
||||
rules={[{ required: true, message: '请输入软件最大试用天数' }]}
|
||||
>
|
||||
<InputNumber min={1} max={10} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8} >
|
||||
|
||||
</Col>
|
||||
<Col span={8} >
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item>
|
||||
<Button color="primary" variant="filled" htmlType="submit">保存试用设置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
{messageHolder}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrailOptions;
|
||||
@@ -1,101 +1,30 @@
|
||||
import { GetOptions, getOptionsStringValue, SaveOptions } from '@/services/services/options/optionsTool';
|
||||
import { useOptionsStore } from '@/store/options';
|
||||
import { useSoftStore } from '@/store/software';
|
||||
import { Button, Card, Form, Input } from 'antd';
|
||||
import TextArea from 'antd/es/input/TextArea';
|
||||
import { message } from 'antd/lib';
|
||||
import { Card, Collapse, CollapseProps, Form } from 'antd';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
const BasicOptions: React.FC = () => {
|
||||
|
||||
const { setTopSpinning, setTopSpinTip } = useSoftStore();
|
||||
const [messageApi, messageHolder] = message.useMessage();
|
||||
const { laitoolOptions, setLaitoolOptions } = useOptionsStore();
|
||||
const [form] = Form.useForm();
|
||||
import SimpleOptions from './SimpleOptions';
|
||||
import TrailOptions from './TrialOptions';
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setTopSpinning(true);
|
||||
setTopSpinTip("加载信息中");
|
||||
// 这边加载所有的配音数据
|
||||
GetOptions("software").then((res) => {
|
||||
setLaitoolOptions(res);
|
||||
form.setFieldsValue({
|
||||
LaitoolHomePage: getOptionsStringValue(res, 'LaitoolHomePage', ""),
|
||||
LaitoolUpdateContent: getOptionsStringValue(res, 'LaitoolUpdateContent', ""),
|
||||
LaitoolNotice: getOptionsStringValue(res, 'LaitoolNotice', ""),
|
||||
LaitoolVersion: getOptionsStringValue(res, 'LaitoolVersion', ""),
|
||||
});
|
||||
const DubSetting: React.FC = () => {
|
||||
|
||||
const onChange = (key: string | string[]) => {
|
||||
console.log(key);
|
||||
};
|
||||
|
||||
const items: CollapseProps['items'] = [
|
||||
{
|
||||
key: 'simpleOptions',
|
||||
label: '通用配置',
|
||||
children: <SimpleOptions></SimpleOptions>,
|
||||
}, {
|
||||
key: 'trailOptions',
|
||||
label: '试用设置',
|
||||
children: <TrailOptions />,
|
||||
}
|
||||
).catch((err: any) => {
|
||||
messageApi.error(err.message);
|
||||
}).finally(() => {
|
||||
console.log('finally');
|
||||
setTopSpinning(false);
|
||||
});
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
async function onFinish(values: any): Promise<void> {
|
||||
setTopSpinning(true);
|
||||
setTopSpinTip("正在保存通用设置");
|
||||
try {
|
||||
// 这边保存所有的配音数据
|
||||
await SaveOptions(values);
|
||||
// 判断Option中的key是不是在属性上
|
||||
for (let key in values) {
|
||||
setLaitoolOptions(laitoolOptions.map((item: OptionModel.Option) => {
|
||||
if (item.key === key) {
|
||||
item.value = values[key]
|
||||
}
|
||||
return item
|
||||
}));
|
||||
}
|
||||
messageApi.success('设置成功');
|
||||
} catch (error: any) {
|
||||
messageApi.error(error.message);
|
||||
} finally {
|
||||
setTopSpinning(false);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card title="通用设置" bordered={false}>
|
||||
<Form name="trigger" form={form} layout="vertical" autoComplete="off" onFinish={onFinish}>
|
||||
<Form.Item
|
||||
label="软件版本号"
|
||||
name="LaitoolVersion"
|
||||
>
|
||||
<Input placeholder='请输入版本号' />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="首页内容"
|
||||
name="LaitoolHomePage"
|
||||
>
|
||||
<TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="支持HTML和网址，网址用iframe，可以内嵌所有的网页" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="更新内容"
|
||||
name="LaitoolUpdateContent"
|
||||
>
|
||||
<TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="支持HTML和网址，网址用iframe" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="通知"
|
||||
name="LaitoolNotice"
|
||||
>
|
||||
<TextArea autoSize={{ minRows: 3, maxRows: 6 }} placeholder="支持HTML和网址，网址用iframe" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button color="primary" variant="filled" htmlType="submit">设置通用设置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
{messageHolder}
|
||||
</div>
|
||||
<Collapse items={items} bordered={false} ghost onChange={onChange} />
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicOptions;
|
||||
export default DubSetting;
|
||||
@@ -1,153 +0,0 @@
|
||||
|
||||
import { addPrompt, getPromptDetail, modifyPrompt } from '@/services/services/prompt';
|
||||
import { Button, Col, Form, FormProps, Input, InputNumber, message, Row, Select, Space, Switch } from 'antd';
|
||||
import React from 'react';
|
||||
import react, { useEffect, useState } from 'react';
|
||||
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 14 },
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
interface PromptManagementProps {
|
||||
type: string; // 接收的类型
|
||||
promptType: Prompt.PromptTypeListItem[] | undefined; // 提示词类型
|
||||
id: string | undefined; // 提示词id
|
||||
}
|
||||
|
||||
const PromptManagement: React.FC<PromptManagementProps> = ({ type, promptType, id }) => {
|
||||
|
||||
const [form] = Form.useForm();
|
||||
const [promptTypeOptions, setPromptTypeOptions] = useState<{ label: string, value: string }[]>([]);
|
||||
const [data, setData] = useState<Prompt.AddPrompt>();
|
||||
|
||||
// 使用 useEffect 设置表单初始值
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
if (type == 'edit') {
|
||||
// 在编辑的时候，初始化数据
|
||||
getPromptDetail(id ?? "").then((res: API.SuccessItem | API.ErrorItem) => {
|
||||
if (res.code === 1) {
|
||||
const fetchedData = res.data;
|
||||
setData(fetchedData);
|
||||
form.setFieldsValue({
|
||||
...fetchedData,
|
||||
status: fetchedData.status === 'enable',
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
|
||||
let ops: react.SetStateAction<{ label: string; value: string; }[]> = []
|
||||
promptType?.forEach(item => {
|
||||
ops.push({ label: item.name, value: item.id })
|
||||
})
|
||||
setPromptTypeOptions(ops)
|
||||
|
||||
}, [type, id, form, promptType]);
|
||||
|
||||
const modifyCode = (value: string) => {
|
||||
let code = promptType?.find(item => item.id == value)?.code
|
||||
form.setFieldsValue({ promptTypeCode: code })
|
||||
}
|
||||
|
||||
|
||||
const onFinish: FormProps<Prompt.AddPrompt>['onFinish'] = async (values) => {
|
||||
values.status = values.status ? "enable" : "disable";
|
||||
if (type == "add") {
|
||||
// 添加
|
||||
let addRes = await addPrompt(values)
|
||||
if (addRes.code != 1) {
|
||||
message.error("添加失败，" + addRes.message);
|
||||
return
|
||||
}
|
||||
message.success("添加成功");
|
||||
} else {
|
||||
// 修改
|
||||
let editRes = await modifyPrompt({ ...values, id: data?.id });
|
||||
if (editRes.code != 1) {
|
||||
message.error("修改失败，" + editRes.message);
|
||||
return
|
||||
}
|
||||
message.success("修改成功");
|
||||
}
|
||||
};
|
||||
|
||||
const onFinishFailed: FormProps<Prompt.AddPrompt>['onFinishFailed'] = (errorInfo) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
|
||||
return (<>
|
||||
<Form
|
||||
form={form}
|
||||
preserve={false}
|
||||
{...formItemLayout}
|
||||
labelAlign="right"
|
||||
variant="filled"
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
initialValues={data}>
|
||||
<Row>
|
||||
<Col flex="auto">
|
||||
<Form.Item<Prompt.AddPrompt> label="名称" name="name" rules={[{ required: true },]}>
|
||||
<Input placeholder="请输入提示词名称" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPrompt> label="类型" name="promptTypeId" rules={[{ required: true }]} >
|
||||
<Select options={promptTypeOptions} allowClear onChange={modifyCode} >
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPrompt> label="备注" name="remark">
|
||||
<Input placeholder="请输入提示词备注" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPrompt> label="编码" name="promptTypeCode">
|
||||
<Input placeholder="请输入提示词类型编码" disabled={true} />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPrompt> label="创建者" >
|
||||
<Input placeholder="请输入提示词创建者" disabled={true} value={data?.createUser?.nickname} />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPrompt> label="修改者">
|
||||
<Input placeholder="请输入提示词修改者" disabled={true} value={data?.updateUser?.nickname} />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPrompt> label="修改时间" name="updateTime">
|
||||
<Input placeholder="请输入提示词修改时间" disabled={true} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col flex="auto" style={{ marginLeft: "20px" }}>
|
||||
<Form.Item<Prompt.AddPrompt> label="描述" name="description">
|
||||
<Input placeholder="请输入提示词描述" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPrompt> label="版本" name="version">
|
||||
<InputNumber style={{ width: "100%" }} placeholder="请输入提示词版本" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPrompt> label="状态" name="status">
|
||||
<Switch checkedChildren="启用" unCheckedChildren="停用" defaultChecked />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPrompt> label="提示词设定" name="promptString" rules={[{ required: true }]}>
|
||||
<Input.TextArea autoSize={
|
||||
{ minRows: 6, maxRows: 6 }
|
||||
} placeholder="请输入提示词设定" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-end" }} >
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form >
|
||||
</>)
|
||||
|
||||
}
|
||||
|
||||
export default PromptManagement;
|
||||
@@ -1,112 +0,0 @@
|
||||
|
||||
import { addPromptType, editPromptType } from '@/services/services/prompt';
|
||||
import { Button, Col, Form, FormProps, Input, InputNumber, message, Row, Select, Space, Switch } from 'antd';
|
||||
import React from 'react';
|
||||
import react, { useEffect, useState } from 'react';
|
||||
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 14 },
|
||||
},
|
||||
};
|
||||
|
||||
interface PromptManagementProps {
|
||||
type: string; // Replace 'string' with the actual type of the 'type' prop
|
||||
data?: Prompt.AddPromptType; // 初始化的提示词数据
|
||||
}
|
||||
|
||||
|
||||
const PromptManagement: React.FC<PromptManagementProps> = ({ type, data }) => {
|
||||
const [form] = Form.useForm();
|
||||
// 使用 useEffect 设置表单初始值
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
if (type === 'edit' && data) {
|
||||
form.setFieldsValue(data);
|
||||
} else {
|
||||
}
|
||||
|
||||
data?.status == "enable" ? form.setFieldsValue({ status: true }) : form.setFieldsValue({ status: false });
|
||||
}, [type, data, form]);
|
||||
|
||||
const onFinish: FormProps<Prompt.AddPromptType>['onFinish'] = async (values) => {
|
||||
// 处理values
|
||||
values.status = values.status ? "enable" : "disable";
|
||||
if (type == "add") {
|
||||
let addRes = await addPromptType(values);
|
||||
if (addRes.code != 1) {
|
||||
message.error("添加失败，" + addRes.message);
|
||||
return
|
||||
}
|
||||
message.success("添加成功");
|
||||
} else {
|
||||
let editRes = await editPromptType({ ...values, id: data?.id });
|
||||
if (editRes.code != 1) {
|
||||
message.error("修改失败，" + editRes.message);
|
||||
return
|
||||
}
|
||||
message.success("修改成功");
|
||||
}
|
||||
};
|
||||
|
||||
const onFinishFailed: FormProps<Prompt.AddPromptType>['onFinishFailed'] = (errorInfo) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
return (<>
|
||||
<Form
|
||||
preserve={false}
|
||||
form={form}
|
||||
{...formItemLayout}
|
||||
labelAlign="right"
|
||||
variant="filled"
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
clearOnDestroy={true}
|
||||
initialValues={data}>
|
||||
<Row>
|
||||
<Col flex="auto">
|
||||
<Form.Item<Prompt.AddPromptType> label="名称" name="name" rules={[{ required: true }]}>
|
||||
<Input placeholder="请输入提示词类型名称" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPromptType> label="编码" name="code" rules={[{ required: true }]}>
|
||||
<Input placeholder="请输入提示词描述" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPromptType> label="创建者" >
|
||||
<Input disabled={true} placeholder="请输入提示词创建者" value={data?.createUser?.nickname} />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPromptType> label="修改者" >
|
||||
<Input disabled={true} placeholder="请输入提示词修改者" value={data?.updateUser?.nickname} />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPromptType> label="修改时间" name="updateTime">
|
||||
<Input disabled={true} placeholder="请输入提示词修改时间" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col flex="auto" style={{ marginLeft: "20px" }}>
|
||||
<Form.Item<Prompt.AddPromptType> label="状态" name="status">
|
||||
<Switch disabled={type === "add"} checkedChildren="启用" unCheckedChildren="停用" defaultChecked />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPromptType> label="提示词设定" name="remark">
|
||||
<Input.TextArea autoSize={
|
||||
{ minRows: 6, maxRows: 6 }
|
||||
} placeholder="请输入提示词设定" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-end" }} >
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form >
|
||||
</>)
|
||||
|
||||
}
|
||||
|
||||
export default PromptManagement;
|
||||
@@ -0,0 +1,162 @@
|
||||
|
||||
import { AddPrompt, GetPromptInfo, ModifyPrompt } from '@/services/services/prompt';
|
||||
import { Button, Col, Form, FormInstance, FormProps, Input, InputNumber, message, Row, Select, Space, Spin, Switch } from 'antd';
|
||||
import React, { version } from 'react';
|
||||
import react, { useEffect, useState } from 'react';
|
||||
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 14 },
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
interface PromptManagementProps {
|
||||
type: string; // 接收的类型
|
||||
promptTypeOptions: Prompt.PromptTypeOptions[] | undefined; // 提示词类型
|
||||
setFormRef: (form: FormInstance) => void;
|
||||
id: string | undefined; // 提示词id
|
||||
open: boolean; // 是否打开
|
||||
}
|
||||
|
||||
const PromptManagement: React.FC<PromptManagementProps> = ({ type, promptTypeOptions, setFormRef, id, open }) => {
|
||||
|
||||
const [form] = Form.useForm();
|
||||
const [data, setData] = useState<Prompt.PromptItem>();
|
||||
const [spinning, setSpinning] = useState<boolean>(true);
|
||||
const [spinTip, setSpinTip] = useState<string>('加载中数据中。。。');
|
||||
const [messageApi, messageHolder] = message.useMessage();
|
||||
|
||||
useEffect(() => {
|
||||
setFormRef(form);
|
||||
setData(undefined);
|
||||
}, [form, setFormRef]);
|
||||
|
||||
|
||||
// 使用 useEffect 设置表单初始值
|
||||
useEffect(() => {
|
||||
setSpinning(true);
|
||||
setSpinTip('加载中数据中。。。');
|
||||
if (type == 'edit') {
|
||||
// 在编辑的时候，初始化数据
|
||||
if (id !== undefined && open) {
|
||||
GetPromptInfo(id).then((res: Prompt.PromptItem) => {
|
||||
setData(res);
|
||||
form.setFieldsValue(res);
|
||||
setSpinning(false)
|
||||
}).catch((error: any) => {
|
||||
messageApi.error(error.message);
|
||||
}).finally(() => {
|
||||
setSpinning(false);
|
||||
});
|
||||
}
|
||||
data?.status == "enable" ? form.setFieldsValue({ status: true }) : form.setFieldsValue({ status: false });
|
||||
} else {
|
||||
setSpinning(false);
|
||||
form.resetFields();
|
||||
form.setFieldsValue({ status: true, version: 1 });
|
||||
}
|
||||
}, [type, id, form, promptTypeOptions, open]);
|
||||
|
||||
|
||||
const onFinish: FormProps<Prompt.PromptItem>['onFinish'] = async (values) => {
|
||||
setSpinning(true);
|
||||
setSpinTip("正在修改数据。。。");
|
||||
try {
|
||||
values.status = values.status ? "enable" : "disable";
|
||||
if (type == "add") {
|
||||
// 添加
|
||||
let promptId = await AddPrompt(values)
|
||||
setData({ ...values, id: promptId });
|
||||
messageApi.success("添加提示词成功");
|
||||
} else {
|
||||
// 修改
|
||||
if (id == undefined) {
|
||||
messageApi.error("未知提示词ID");
|
||||
} else {
|
||||
await ModifyPrompt(id, values);
|
||||
messageApi.success("修改提示词数据成功");
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
messageApi.error(error.message);
|
||||
} finally {
|
||||
setSpinning(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (<>
|
||||
<Spin spinning={spinning} tip={spinTip}>
|
||||
{messageHolder}
|
||||
<Form
|
||||
form={form}
|
||||
preserve={false}
|
||||
{...formItemLayout}
|
||||
labelAlign="right"
|
||||
variant="filled"
|
||||
onFinish={onFinish}
|
||||
initialValues={data}>
|
||||
<Row>
|
||||
<Col flex="auto">
|
||||
<Form.Item<Prompt.PromptItem> label="名称" name="name" rules={[{ required: true },]}>
|
||||
<Input placeholder="请输入提示词名称" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.PromptItem> label="类型" name="promptTypeId" rules={[{ required: true }]} >
|
||||
<Select options={promptTypeOptions?.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}
|
||||
})} allowClear >
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.PromptItem> label="备注" name="remark">
|
||||
<Input placeholder="请输入提示词备注" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.PromptItem> label="创建者" >
|
||||
<Input placeholder="请输入提示词创建者" disabled={true} value={data?.createdUser?.nickName} />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.PromptItem> label="修改者" >
|
||||
<Input placeholder="请输入提示词修改者" disabled={true} value={data?.updatedUser?.nickName} />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.PromptItem> label="修改时间" name="updateTime">
|
||||
<Input placeholder="请输入提示词修改时间" disabled={true} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col flex="auto" style={{ marginLeft: "20px" }}>
|
||||
<Form.Item<Prompt.PromptItem> label="描述" name="description">
|
||||
<Input placeholder="请输入提示词描述" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.PromptItem> label="版本" name="version">
|
||||
<InputNumber style={{ width: "100%" }} placeholder="请输入提示词版本" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.PromptItem> label="状态" name="status">
|
||||
<Switch checkedChildren="启用" unCheckedChildren="停用" defaultChecked />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.PromptItem> label="提示词设定" name="promptString" rules={[{ required: true }]}>
|
||||
<Input.TextArea autoSize={
|
||||
{ minRows: 6, maxRows: 6 }
|
||||
} placeholder="请输入提示词设定" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-end" }} >
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form >
|
||||
</Spin>
|
||||
</>)
|
||||
|
||||
}
|
||||
|
||||
export default PromptManagement;
|
||||
@@ -1,157 +1,200 @@
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useModel } from '@umijs/max';
|
||||
import { Card, Form, GetProp, Input, message, Modal, Table, TablePaginationConfig, TableProps, theme } from 'antd';
|
||||
import { Card, Form, GetProp, Input, message, Modal, Select, Table, TablePaginationConfig, TableProps, theme, Tooltip } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { ProTable, TableDropdown } from '@ant-design/pro-components';
|
||||
import { Button, Dropdown, Space, Tag } from 'antd';
|
||||
import { useRef } from 'react';
|
||||
import { ColumnsType, SorterResult } from 'antd/es/table/interface';
|
||||
import qs from 'qs';
|
||||
import { getPromptSample, getPrompyType } from '@/services/services/prompt';
|
||||
import ManagePrompt from '../ManagePrompt/index';
|
||||
export const waitTimePromise = async (time: number = 100) => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(true);
|
||||
}, time);
|
||||
});
|
||||
};
|
||||
|
||||
export const waitTime = async (time: number = 100) => {
|
||||
await waitTimePromise(time);
|
||||
};
|
||||
|
||||
|
||||
interface TableParams {
|
||||
pagination?: TablePaginationConfig;
|
||||
sortField?: SorterResult<any>['field'];
|
||||
sortOrder?: SorterResult<any>['order'];
|
||||
filters?: Parameters<GetProp<TableProps, 'onChange'>>[1];
|
||||
}
|
||||
|
||||
interface TableParams {
|
||||
pagination?: TablePaginationConfig;
|
||||
sortField?: SorterResult<any>['field'];
|
||||
sortOrder?: SorterResult<any>['order'];
|
||||
filters?: Parameters<GetProp<TableProps, 'onChange'>>[1];
|
||||
}
|
||||
|
||||
const getRandomuserParams = (params: TableParams) => ({
|
||||
results: params.pagination?.pageSize,
|
||||
page: params.pagination?.current,
|
||||
...params,
|
||||
});
|
||||
import { DeletePrompt, GetPromptTypeOptions, QueryPromptCollection, QueryPromptypeCollection } from '@/services/services/prompt';
|
||||
import ManagePrompt from './ManagePrompt/index';
|
||||
import { useFormReset } from '@/hooks/useFormReset';
|
||||
import TextArea from 'antd/es/input/TextArea';
|
||||
import { useSoftStore } from '@/store/software';
|
||||
import TemplateContainer from '@/pages/TemplateContainer';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
const PromptManagement: React.FC = () => {
|
||||
const { token } = theme.useToken();
|
||||
const { initialState } = useModel('@@initialState');
|
||||
|
||||
const [data, setData] = useState<[Prompt.PromptListItem][]>();
|
||||
const [data, setData] = useState<Prompt.PromptItem[]>();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const [open, setOpen] = React.useState<boolean>(false);
|
||||
|
||||
const [type, setType] = useState<string>("add");
|
||||
const [editData, setEditData] = useState<Prompt.AddPrompt>();
|
||||
const [promptType, setPromptType] = useState<Prompt.PromptTypeListItem[]>();
|
||||
const [formKey, setFormKey] = useState(Date.now().toString());
|
||||
const [promptId, setPromptId] = useState<string>();
|
||||
const [promptTypeOptions, setPromptTypeOptions] = useState<Prompt.PromptTypeOptions[]>();
|
||||
const [messageApi, messageHolder] = message.useMessage();
|
||||
const { setFormRef, resetForm } = useFormReset();
|
||||
const [modal, modalHolder] = Modal.useModal();
|
||||
const { setTopSpinTip, setTopSpinning } = useSoftStore();
|
||||
|
||||
const [tableParams, setTableParams] = useState<TableParams>({
|
||||
const [tableParams, setTableParams] = useState<TableModel.TableParams>({
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
showQuickJumper: true,
|
||||
totalBoundaryShowSizeChanger: true,
|
||||
},
|
||||
});
|
||||
|
||||
const columns: ColumnsType<Prompt.PromptListItem> = [
|
||||
const columns: ColumnsType<Prompt.PromptItem> = [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
width: '120px',
|
||||
width: '220px',
|
||||
},
|
||||
{
|
||||
title: 'Gender',
|
||||
dataIndex: 'gender',
|
||||
filters: [
|
||||
{ text: 'Male', value: 'male' },
|
||||
{ text: 'Female', value: 'female' },
|
||||
],
|
||||
width: '200',
|
||||
title: '提示词类型',
|
||||
dataIndex: 'promptType',
|
||||
width: '200px',
|
||||
render: (_, record) => {
|
||||
return record.promptType?.name;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Email',
|
||||
dataIndex: 'email',
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: '70px',
|
||||
render: (dom, en) => <>
|
||||
<Tag color={en.status == "enable" ? "green" : "red"}> {en.status == "enable" ? '启用' : "停用"} </Tag>
|
||||
</>
|
||||
},
|
||||
{
|
||||
title: '提示词设定',
|
||||
dataIndex: 'promptString',
|
||||
ellipsis: {
|
||||
showTitle: false,
|
||||
},
|
||||
render: (promptString) => (
|
||||
<span style={{ cursor: "pointer" }} onClick={() => showPrompt(promptString)}>
|
||||
{promptString}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
width: '200px',
|
||||
ellipsis: {
|
||||
showTitle: false,
|
||||
},
|
||||
render: (remark) => (
|
||||
<Tooltip placement="topLeft" title={remark}>
|
||||
{remark}
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
width: '200px',
|
||||
ellipsis: {
|
||||
showTitle: false,
|
||||
},
|
||||
render: (remark) => (
|
||||
<Tooltip placement="topLeft" title={remark}>
|
||||
{remark}
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: 'option',
|
||||
width: '200px',
|
||||
render: (_, record) => <>
|
||||
<Button size='middle' style={{ marginRight: "5px" }} type="primary" onClick={() => {
|
||||
debugger
|
||||
setEditData(record)
|
||||
setType("edit")
|
||||
setOpen(true)
|
||||
}}>编辑</Button>,
|
||||
<Button size='middle' type="primary" danger>删除</Button>,
|
||||
setPromptId(record.id)
|
||||
}}>编辑</Button>
|
||||
<Button size='middle' type="primary" danger onClick={async () => await DeletePromptHandle(record.id)}>删除</Button>
|
||||
</>
|
||||
}
|
||||
];
|
||||
|
||||
async function DeletePromptHandle(id: string) {
|
||||
try {
|
||||
if (id == null) {
|
||||
messageApi.error("未知提示词ID");
|
||||
}
|
||||
let confirmed = await modal.confirm({
|
||||
title: "删除提示词",
|
||||
content: "确定删除提示词吗？",
|
||||
okText: "确认",
|
||||
cancelText: "取消"
|
||||
});
|
||||
console.log(confirmed)
|
||||
if (confirmed) {
|
||||
setTopSpinning(true);
|
||||
setTopSpinTip("正在删除数据。。。")
|
||||
await DeletePrompt(id);
|
||||
messageApi.success("删除提示词成功");
|
||||
setTopSpinning(false);
|
||||
await fetchData();
|
||||
} else {
|
||||
messageApi.info("取消删除操作");
|
||||
}
|
||||
} catch (error: any) {
|
||||
messageApi.error(error.message);
|
||||
} finally {
|
||||
setTopSpinning(false);
|
||||
}
|
||||
}
|
||||
|
||||
function showPrompt(content: string) {
|
||||
modal.info({
|
||||
width: 800,
|
||||
title: '',
|
||||
footer: null,
|
||||
icon: null,
|
||||
closable: true,
|
||||
closeIcon: true,
|
||||
content: (
|
||||
<TextArea style={{ marginTop: "10px" }} defaultValue={content} autoSize>
|
||||
</TextArea >)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const fetchData = async () => {
|
||||
debugger
|
||||
setLoading(true);
|
||||
try {
|
||||
let param: Prompt.PromptQueryCondition = {
|
||||
...form.getFieldsValue(),
|
||||
page: tableParams.pagination?.current,
|
||||
pageSize: tableParams.pagination?.pageSize
|
||||
}
|
||||
let promptRes = await QueryPromptCollection(param);
|
||||
|
||||
let promptRes = await getPromptSample("all", tableParams.pagination?.pageSize, tableParams.pagination?.current)
|
||||
|
||||
if (promptRes.code == 1) {
|
||||
message.success("获取提示词设置成功")
|
||||
setData(promptRes.data)
|
||||
setLoading(false);
|
||||
setData(promptRes.collection);
|
||||
setTableParams({
|
||||
...tableParams,
|
||||
pagination: {
|
||||
...tableParams.pagination,
|
||||
total: promptRes.data.count,
|
||||
// 200 is mock data, you should read it from server
|
||||
// total: data.totalCount,
|
||||
total: promptRes.total,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
message.success("获取提示词成功")
|
||||
} catch (error: any) {
|
||||
messageApi.error(error.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
message.error("获取提示词设置失败")
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
// 加载提示词类型
|
||||
getPrompyType(100, 1).then(res => {
|
||||
if (res.code == 1) {
|
||||
setPromptType(res.data)
|
||||
} else {
|
||||
message.error("获取提示词类型失败")
|
||||
}
|
||||
GetPromptTypeOptions().then((res: Prompt.PromptTypeOptions[]) => {
|
||||
setPromptTypeOptions(res);
|
||||
}).catch((error: any) => {
|
||||
messageApi.error(error.message);
|
||||
});
|
||||
}, [
|
||||
tableParams.pagination?.current,
|
||||
tableParams.pagination?.pageSize,
|
||||
tableParams?.sortOrder,
|
||||
tableParams?.sortField,
|
||||
JSON.stringify(tableParams.filters),
|
||||
]);
|
||||
}, [tableParams.pagination?.current,
|
||||
tableParams.pagination?.pageSize]);
|
||||
|
||||
const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter) => {
|
||||
const handleTableChange = (pagination: any) => {
|
||||
setTableParams({
|
||||
pagination,
|
||||
filters,
|
||||
sortOrder: Array.isArray(sorter) ? undefined : sorter.order,
|
||||
sortField: Array.isArray(sorter) ? undefined : sorter.field,
|
||||
});
|
||||
|
||||
// `dataSource` is useless since `pageSize` changed
|
||||
@@ -161,7 +204,7 @@ const PromptManagement: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<TemplateContainer navTheme={initialState?.settings?.navTheme ?? "realDark"}>
|
||||
<Card
|
||||
style={{
|
||||
borderRadius: 8,
|
||||
@@ -180,32 +223,50 @@ const PromptManagement: React.FC = () => {
|
||||
<Form
|
||||
layout='inline'
|
||||
form={form}
|
||||
onFinish={fetchData}
|
||||
>
|
||||
<Form.Item label="名称">
|
||||
<Form.Item label="名称" name="name">
|
||||
<Input placeholder="请输入查询提示词的名称" />
|
||||
</Form.Item>
|
||||
<Form.Item label="提示词类型" name="promptTypeId">
|
||||
<Select allowClear style={{ width: 200 }} options={promptTypeOptions?.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}
|
||||
})} placeholder="请选择提示词类型" />
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status" >
|
||||
<Select style={{ width: 200 }} placeholder="请选择提示词状态" allowClear >
|
||||
<Select.Option value="enable">启用</Select.Option>
|
||||
<Select.Option value="disable">停用</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item label="备注" name="remark">
|
||||
<Input placeholder="请输入提示词备注" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item >
|
||||
<Button type="primary">查询</Button>
|
||||
<Button type="default" onClick={async () => {
|
||||
form.resetFields();
|
||||
await fetchData();
|
||||
}}>重置</Button>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item >
|
||||
<Button type="default">重置</Button>
|
||||
<Button type="primary" htmlType='submit'>查询</Button>
|
||||
</Form.Item>
|
||||
<Form.Item style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-end" }}>
|
||||
<div >
|
||||
<Button type="primary" style={{ marginBottom: 10 }} onClick={() => {
|
||||
<Button icon={<PlusOutlined />} type="primary" style={{ marginBottom: 10 }} onClick={() => {
|
||||
setOpen(true)
|
||||
setType("add")
|
||||
setFormKey(Date.now().toString()); // 每次打开 Modal 时更新 formKey，强制子组件重新渲染
|
||||
}}>
|
||||
新建数据
|
||||
</Button>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<Table
|
||||
columns={columns}
|
||||
@@ -223,7 +284,7 @@ const PromptManagement: React.FC = () => {
|
||||
onCancel={async () => {
|
||||
setOpen(false)
|
||||
await fetchData()
|
||||
setFormKey(Date.now().toString()); // 每次打开 Modal 时更新 formKey，强制子组件重新渲染
|
||||
resetForm(); // 每次打开 Modal 时更新 formKey，强制子组件重新渲染
|
||||
}}
|
||||
width={800}
|
||||
footer={null}
|
||||
@@ -231,9 +292,11 @@ const PromptManagement: React.FC = () => {
|
||||
forceRender={true}
|
||||
destroyOnClose={true}
|
||||
>
|
||||
<ManagePrompt key={formKey} type={type} id={editData?.id} promptType={promptType} />
|
||||
<ManagePrompt setFormRef={setFormRef} type={type} id={promptId} promptTypeOptions={promptTypeOptions} open={open} />
|
||||
</Modal>
|
||||
</PageContainer>
|
||||
{messageHolder}
|
||||
{modalHolder}
|
||||
</TemplateContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
|
||||
|
||||
import { AddPromptType, EditPromptType, GetPromptTypeInfo } from '@/services/services/prompt';
|
||||
import createSoftStore, { useSoftStore } from '@/store/software';
|
||||
import { Button, Col, Form, FormInstance, FormProps, Input, InputNumber, message, Row, Select, Space, Spin, Switch } from 'antd';
|
||||
import React from 'react';
|
||||
import react, { useEffect, useState } from 'react';
|
||||
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 14 },
|
||||
},
|
||||
};
|
||||
|
||||
interface PromptManagementProps {
|
||||
type: string; // Replace 'string' with the actual type of the 'type' prop
|
||||
setFormRef: (form: FormInstance) => void;
|
||||
id: string | undefined;
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
const PromptManagement: React.FC<PromptManagementProps> = ({ type, setFormRef, id, open }) => {
|
||||
const [form] = Form.useForm();
|
||||
const [data, setData] = useState<Prompt.PromptTypeItem>();
|
||||
const [messageApi, messageHolder] = message.useMessage();
|
||||
const [spinning, setSpinning] = useState<boolean>(true);
|
||||
const [spinTip, setSpinTip] = useState<string>('加载中数据中。。。');
|
||||
|
||||
useEffect(() => {
|
||||
setFormRef(form);
|
||||
setData(undefined);
|
||||
}, [form, setFormRef]);
|
||||
|
||||
// 使用 useEffect 设置表单初始值
|
||||
useEffect(() => {
|
||||
if (type === 'edit') {
|
||||
setSpinning(true);
|
||||
// 远程加载数据
|
||||
if (id !== undefined && open) {
|
||||
GetPromptTypeInfo(id).then((res) => {
|
||||
setData(res);
|
||||
form.setFieldsValue(res);
|
||||
messageApi.success('数据加载成功');
|
||||
}).catch((error: any) => {
|
||||
messageApi.error(error.message);
|
||||
}).finally(() => {
|
||||
setSpinning(false);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
setSpinning(false);
|
||||
}
|
||||
data?.status == "enable" ? form.setFieldsValue({ status: true }) : form.setFieldsValue({ status: false });
|
||||
}, [type, form, open, setFormRef, id]);
|
||||
|
||||
const onFinish: FormProps<Prompt.AddPromptType>['onFinish'] = async (values) => {
|
||||
try {
|
||||
setSpinning(true);
|
||||
setSpinTip("正在修改数据。。。");
|
||||
// 处理values
|
||||
values.status = values.status ? "enable" : "disable";
|
||||
if (type == "add") {
|
||||
let addRes = await AddPromptType(values);
|
||||
messageApi.success(addRes);
|
||||
} else if (type == "edit") {
|
||||
let res = await EditPromptType({ ...values, id: data?.id });
|
||||
messageApi.success(res);
|
||||
} else {
|
||||
messageApi.error("未知操作类型");
|
||||
}
|
||||
} catch (error: any) {
|
||||
messageApi.error(error.message);
|
||||
} finally {
|
||||
setSpinning(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onFinishFailed: FormProps<Prompt.AddPromptType>['onFinishFailed'] = (errorInfo) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
return (<>
|
||||
{messageHolder}
|
||||
|
||||
<Spin spinning={spinning} tip={spinTip}>
|
||||
<Form
|
||||
preserve={false}
|
||||
form={form}
|
||||
{...formItemLayout}
|
||||
labelAlign="right"
|
||||
variant="filled"
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
clearOnDestroy={true}
|
||||
initialValues={data}>
|
||||
<Row>
|
||||
<Col flex="auto">
|
||||
<Form.Item<Prompt.AddPromptType> label="名称" name="name" rules={[{ required: true }]}>
|
||||
<Input placeholder="请输入提示词类型名称" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPromptType> label="编码" name="code" rules={[{ required: true }]}>
|
||||
<Input placeholder="请输入提示词描述" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPromptType> label="创建者" >
|
||||
<Input disabled={true} placeholder="请输入提示词创建者" value={data?.createdUser?.nickName} />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPromptType> label="修改者" >
|
||||
<Input disabled={true} placeholder="请输入提示词修改者" value={data?.updatedUser?.nickName} />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPromptType> label="修改时间" name="updateTime">
|
||||
<Input disabled={true} placeholder="请输入提示词修改时间" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col flex="auto" style={{ marginLeft: "20px" }}>
|
||||
<Form.Item<Prompt.AddPromptType> label="状态" name="status">
|
||||
<Switch checkedChildren="启用" unCheckedChildren="停用" defaultChecked />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.AddPromptType> label="备注" name="remark">
|
||||
<Input.TextArea autoSize={
|
||||
{ minRows: 6, maxRows: 6 }
|
||||
} placeholder="请输入备注" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-end" }} >
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form >
|
||||
</Spin>
|
||||
</>)
|
||||
|
||||
}
|
||||
|
||||
export default PromptManagement;
|
||||
@@ -1,17 +1,14 @@
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useModel } from '@umijs/max';
|
||||
import { Card, Form, GetProp, Input, message, Modal, Table, TablePaginationConfig, TableProps, theme } from 'antd';
|
||||
import { Card, Form, GetProp, Input, message, Modal, Select, Table, TablePaginationConfig, TableProps, theme } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { ProTable, TableDropdown } from '@ant-design/pro-components';
|
||||
import { Button, Dropdown, Space, Tag } from 'antd';
|
||||
import { useRef } from 'react';
|
||||
import { ColumnsType, SorterResult } from 'antd/es/table/interface';
|
||||
import qs from 'qs';
|
||||
import { getPromptSample, getPrompyType } from '@/services/services/prompt';
|
||||
import ManagePromptType from '../ManagePromptType';
|
||||
import { set } from 'lodash';
|
||||
import { Button, Tag } from 'antd';
|
||||
import { ColumnsType } from 'antd/es/table/interface';
|
||||
import ManagePromptType from './ManagePromptType';
|
||||
import TemplateContainer from '@/pages/TemplateContainer';
|
||||
import { DeletePromptType, QueryPromptypeCollection } from '@/services/services/prompt';
|
||||
import { useFormReset } from '@/hooks/useFormReset';
|
||||
import { useSoftStore } from '@/store/software';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
export const waitTimePromise = async (time: number = 100) => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
@@ -25,67 +22,57 @@ export const waitTime = async (time: number = 100) => {
|
||||
};
|
||||
|
||||
|
||||
interface TableParams {
|
||||
pagination?: TablePaginationConfig;
|
||||
sortField?: SorterResult<any>['field'];
|
||||
sortOrder?: SorterResult<any>['order'];
|
||||
filters?: Parameters<GetProp<TableProps, 'onChange'>>[1];
|
||||
}
|
||||
|
||||
interface TableParams {
|
||||
pagination?: TablePaginationConfig;
|
||||
sortField?: SorterResult<any>['field'];
|
||||
sortOrder?: SorterResult<any>['order'];
|
||||
filters?: Parameters<GetProp<TableProps, 'onChange'>>[1];
|
||||
}
|
||||
|
||||
const getRandomuserParams = (params: TableParams) => ({
|
||||
results: params.pagination?.pageSize,
|
||||
page: params.pagination?.current,
|
||||
...params,
|
||||
});
|
||||
|
||||
|
||||
const PromptManagement: React.FC = () => {
|
||||
const { token } = theme.useToken();
|
||||
const { initialState } = useModel('@@initialState');
|
||||
|
||||
const [data, setData] = useState<[Prompt.PromptTypeListItem][]>();
|
||||
const [data, setData] = useState<Prompt.PromptTypeItem[]>();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const [open, setOpen] = React.useState<boolean>(false);
|
||||
|
||||
const [type, setType] = useState<string>("add");
|
||||
const [editData, setEditData] = useState<Prompt.AddPromptType>();
|
||||
|
||||
const [tableParams, setTableParams] = useState<TableParams>({
|
||||
const [promptTypeId, setPromptTypeId] = useState<string>();
|
||||
const [messageApi, messageHolder] = message.useMessage();
|
||||
const [modal, modalHolder] = Modal.useModal();
|
||||
const { setFormRef, resetForm } = useFormReset();
|
||||
const { setTopSpinning, setTopSpinTip } = useSoftStore();
|
||||
const [tableParams, setTableParams] = useState<TableModel.TableParams>({
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
showQuickJumper: true,
|
||||
totalBoundaryShowSizeChanger: true,
|
||||
},
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
let promptRes = await getPrompyType(tableParams.pagination?.pageSize, tableParams.pagination?.current)
|
||||
if (promptRes.code == 1) {
|
||||
message.success("获取提示词类型成功")
|
||||
setData(promptRes.data)
|
||||
setLoading(false);
|
||||
try {
|
||||
let params = {
|
||||
...form.getFieldsValue(),
|
||||
pageSize: tableParams.pagination?.pageSize ?? 10,
|
||||
page: tableParams.pagination?.current ?? 1,
|
||||
} as Prompt.PromptTypeQueryCondition;
|
||||
|
||||
console.log("fetchData", params)
|
||||
let promptRes = await QueryPromptypeCollection(params)
|
||||
setData(promptRes.collection);
|
||||
setTableParams({
|
||||
...tableParams,
|
||||
pagination: {
|
||||
...tableParams.pagination,
|
||||
total: promptRes.data.count,
|
||||
total: promptRes.total,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
|
||||
message.success("获取提示词类型成功")
|
||||
} catch (error: any) {
|
||||
messageApi.error(error.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
message.error("获取提示词类型失败")
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const columns: ColumnsType<Prompt.PromptTypeListItem> = [
|
||||
const columns: ColumnsType<Prompt.PromptTypeItem> = [
|
||||
{
|
||||
title: '编码',
|
||||
dataIndex: 'code',
|
||||
@@ -102,7 +89,7 @@ const PromptManagement: React.FC = () => {
|
||||
dataIndex: 'status',
|
||||
width: '100px',
|
||||
render: (dom, en) => <>
|
||||
<Tag color={en.status == "enable" ? "green" : "red"}>启用</Tag>
|
||||
<Tag color={en.status == "enable" ? "green" : "red"}> {en.status == "enable" ? '启用' : "停用"} </Tag>
|
||||
</>
|
||||
},
|
||||
{
|
||||
@@ -115,16 +102,61 @@ const PromptManagement: React.FC = () => {
|
||||
width: 220,
|
||||
render: (dom, ent) => <>
|
||||
<Button size='middle' style={{ marginRight: "5px" }} type="primary" onClick={() => {
|
||||
|
||||
setEditData(ent)
|
||||
setType("edit")
|
||||
setPromptTypeId(ent.id)
|
||||
setOpen(true)
|
||||
}}>编辑</Button>,
|
||||
<Button size='middle' type="primary" danger>删除</Button>,
|
||||
}}>编辑</Button>
|
||||
<Button size='middle' type="primary" danger onClick={async () => await DeletePromptTypeHandle(ent.id)}>删除</Button>
|
||||
</>
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
async function DeletePromptTypeHandle(id: string) {
|
||||
setTopSpinning(true);
|
||||
setTopSpinTip("正在删除数据。。。")
|
||||
try {
|
||||
// 调用删除的方法
|
||||
let res = await DeletePromptType(id, false);
|
||||
if (res.code == 6001) {
|
||||
// 提示词，删除失败是不是删除对应的关联的提示词数据
|
||||
const confirmed = await modal.confirm({
|
||||
title: "删除提示词类型提醒",
|
||||
content: (
|
||||
<div>
|
||||
<span>正在删除的提示词类型有关联提示词预设数据，是不是同步删除对应的关联数据！</span>
|
||||
<br />
|
||||
<span>点击确认，删除相关数据！！！</span>
|
||||
</div>
|
||||
),
|
||||
okText: "确认",
|
||||
cancelText: "取消"
|
||||
})
|
||||
if (confirmed) {
|
||||
// 开始删除
|
||||
let confirmDelete = await DeletePromptType(id, true);
|
||||
if (confirmDelete.code != 1) {
|
||||
throw new Error(confirmDelete.message);
|
||||
}
|
||||
}
|
||||
else {
|
||||
messageApi.error("取消删除");
|
||||
return;
|
||||
}
|
||||
} else if (res.code == 1) {
|
||||
// 删除成功
|
||||
} else {
|
||||
throw new Error(res.message)
|
||||
}
|
||||
message.success("删除成功")
|
||||
setTopSpinning(false);
|
||||
await fetchData()
|
||||
} catch (error: any) {
|
||||
message.error(error.message)
|
||||
} finally {
|
||||
setTopSpinning(false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
@@ -136,12 +168,10 @@ const PromptManagement: React.FC = () => {
|
||||
JSON.stringify(tableParams.filters),
|
||||
]);
|
||||
|
||||
const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter) => {
|
||||
|
||||
const handleTableChange = (pagination: TablePaginationConfig) => {
|
||||
setTableParams({
|
||||
pagination,
|
||||
filters,
|
||||
sortOrder: Array.isArray(sorter) ? undefined : sorter.order,
|
||||
sortField: Array.isArray(sorter) ? undefined : sorter.field,
|
||||
});
|
||||
|
||||
// `dataSource` is useless since `pageSize` changed
|
||||
@@ -151,7 +181,7 @@ const PromptManagement: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<TemplateContainer navTheme={initialState?.settings?.navTheme ?? "realDark"}>
|
||||
<Card
|
||||
style={{
|
||||
borderRadius: 8,
|
||||
@@ -170,32 +200,42 @@ const PromptManagement: React.FC = () => {
|
||||
<Form
|
||||
layout='inline'
|
||||
form={form}
|
||||
onFinish={fetchData}
|
||||
>
|
||||
<Form.Item label="名称">
|
||||
<Input placeholder="请输入查询提示词的名称" />
|
||||
<Form.Item<Prompt.PromptTypeQueryCondition> label="名称" name="name">
|
||||
<Input placeholder="请输入查询提示词类型的名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item >
|
||||
<Button type="primary">查询</Button>
|
||||
<Form.Item<Prompt.PromptTypeQueryCondition> label="编码" name="code">
|
||||
<Input placeholder="请输入查询提示词类型的编码" />
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.PromptTypeQueryCondition> label="状态" name="status">
|
||||
<Select placeholder="请选择查询提示词类型的状态" style={{ width: 200 }}>
|
||||
<Select.Option value="enable">启用</Select.Option>
|
||||
<Select.Option value="disable">停用</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item<Prompt.PromptTypeQueryCondition> label="备注" name="remark">
|
||||
<Input placeholder="请输入查询提示词类型的备注" />
|
||||
</Form.Item>
|
||||
<Form.Item >
|
||||
<Button type="default">重置</Button>
|
||||
</Form.Item>
|
||||
<Form.Item >
|
||||
<Button type="primary" htmlType='submit' >查询</Button>
|
||||
</Form.Item>
|
||||
<Form.Item style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-end" }}>
|
||||
<div >
|
||||
<Button type="primary" style={{ marginBottom: 10 }} onClick={() => {
|
||||
<Button type="primary" icon={<PlusOutlined />} style={{ marginBottom: 10 }} onClick={() => {
|
||||
setOpen(true)
|
||||
setType("add")
|
||||
}}>
|
||||
新建数据
|
||||
新建提示词类型
|
||||
</Button>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
rowKey={(record) => record.id}
|
||||
@@ -212,7 +252,8 @@ const PromptManagement: React.FC = () => {
|
||||
onCancel={async () => {
|
||||
setOpen(false)
|
||||
await fetchData()
|
||||
setEditData(undefined)
|
||||
setPromptTypeId(undefined)
|
||||
resetForm();
|
||||
}}
|
||||
width={800}
|
||||
footer={null}
|
||||
@@ -220,9 +261,11 @@ const PromptManagement: React.FC = () => {
|
||||
forceRender={true}
|
||||
destroyOnClose
|
||||
>
|
||||
<ManagePromptType type={type} data={editData} />
|
||||
<ManagePromptType type={type} setFormRef={setFormRef} id={promptTypeId} open={open} />
|
||||
</Modal>
|
||||
</PageContainer>
|
||||
{messageHolder}
|
||||
{modalHolder}
|
||||
</TemplateContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user