156 lines
4.1 KiB
TypeScript
156 lines
4.1 KiB
TypeScript
// const TrainingCat = () => {
|
|
// return (
|
|
// <>
|
|
// <p>训练分类管理</p>
|
|
// </>
|
|
// );
|
|
// };
|
|
// export default TrainingCat;
|
|
|
|
import { Button, Space, Modal, FormInstance } from "antd";
|
|
import { inject, observer } from "mobx-react";
|
|
import type { ColumnsType } from "antd/es/table";
|
|
import BTable from "@/components/b_table";
|
|
import { useEffect, useState } from "react";
|
|
import { UserDataType } from "@/model/userModel";
|
|
import { Store } from "antd/lib/form/interface";
|
|
import SimpleForm from "@/components/form/simple_form";
|
|
import React from "react";
|
|
import { FormType } from "@/components/form/interface";
|
|
|
|
const TrainingCat = (props: Store) => {
|
|
const { trainingCatStore } = props;
|
|
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
|
const [projectConfig, setProjectConfig] = useState<any>([]);
|
|
const formRef = React.useRef<FormInstance>(null);
|
|
const [record, setRecord] = useState<any>(null);
|
|
const [tagId, setId] = useState<Number | null>(null);
|
|
const columns: ColumnsType<UserDataType> = [
|
|
{ title: "名称", dataIndex: "name" },
|
|
{ title: "任务描述", dataIndex: "desc" },
|
|
{
|
|
title: "操作",
|
|
dataIndex: "id",
|
|
render: (any, record) => (
|
|
<Space wrap>
|
|
<Button
|
|
type="dashed"
|
|
size="small"
|
|
onClick={() => {
|
|
edit(record);
|
|
}}
|
|
>
|
|
编辑
|
|
</Button>
|
|
<Button
|
|
type="dashed"
|
|
danger
|
|
size="small"
|
|
onClick={() => {
|
|
dele(record);
|
|
}}
|
|
>
|
|
删除
|
|
</Button>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
const dele = (record) => {
|
|
trainingCatStore.deleteItem(record.identity);
|
|
};
|
|
const edit = (record) => {
|
|
setProjectConfig(defaultConfig);
|
|
|
|
setIsModalOpen(true);
|
|
formRef.current?.setFieldsValue(record);
|
|
setRecord(record);
|
|
setId(record.id);
|
|
};
|
|
const onFinish = (values: any) => {
|
|
let data = {
|
|
...values,
|
|
};
|
|
if (!tagId) {
|
|
trainingCatStore.add(data);
|
|
} else {
|
|
trainingCatStore.putItem(tagId, data);
|
|
}
|
|
setIsModalOpen(false);
|
|
};
|
|
useEffect(() => {
|
|
trainingCatStore.getlist();
|
|
}, [trainingCatStore]);
|
|
const defaultConfig = [
|
|
{
|
|
type: FormType.input,
|
|
label: "分类名称",
|
|
name: "name",
|
|
value: "",
|
|
rules: [{ required: true, message: "请输入名称!" }],
|
|
},
|
|
{
|
|
type: FormType.input,
|
|
label: "描述",
|
|
name: "desc",
|
|
value: "",
|
|
rules: [{ required: true, message: "请输入描述!" }],
|
|
},
|
|
];
|
|
const onFinishFailed = () => {};
|
|
// 用户选择回调
|
|
return (
|
|
<div className="contentBox">
|
|
<Space direction="vertical" size="middle" style={{ display: "flex" }}>
|
|
<Space direction="horizontal" size={"middle"}>
|
|
<Button
|
|
type="default"
|
|
onClick={() => {
|
|
setProjectConfig(defaultConfig);
|
|
setId(null);
|
|
setIsModalOpen(true);
|
|
}}
|
|
>
|
|
添加分类
|
|
</Button>
|
|
</Space>
|
|
|
|
<BTable
|
|
store={trainingCatStore}
|
|
columns={columns}
|
|
dataSource={trainingCatStore.list}
|
|
/>
|
|
<Modal
|
|
title={!tagId ? "添加分类" : "分类编辑"}
|
|
width={600}
|
|
open={isModalOpen}
|
|
afterClose={() => formRef.current?.resetFields()}
|
|
onOk={() => formRef.current?.submit()}
|
|
okText="确定"
|
|
cancelText="取消"
|
|
onCancel={() => {
|
|
setId(null);
|
|
setIsModalOpen(false);
|
|
}}
|
|
>
|
|
<SimpleForm
|
|
formRef={formRef}
|
|
createCallback={() => {
|
|
formRef.current?.setFieldsValue(record);
|
|
}}
|
|
formName="card_basic"
|
|
colProps={12}
|
|
subBtnName="提交"
|
|
formDatas={projectConfig}
|
|
onFinish={onFinish}
|
|
initialValues={true}
|
|
onFinishFailed={onFinishFailed}
|
|
/>
|
|
</Modal>
|
|
</Space>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default inject("trainingCatStore")(observer(TrainingCat));
|