257 lines
8.6 KiB
JavaScript
257 lines
8.6 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { Button, Descriptions, Form, Input, message, Modal, Select, Table } from "antd";
|
|
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
|
|
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
|
|
import SearchForm from "@cqsjjb/jjb-react-admin-component/SearchForm";
|
|
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
|
|
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
|
|
import { tools } from "@cqsjjb/jjb-common-lib";
|
|
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
|
import { NS_QUAL_EXPERT } from "~/enumerate/namespace";
|
|
import { GENDER_OPTIONS, GENDER_MAP } from "~/enumerate/constant";
|
|
|
|
const { router } = tools;
|
|
|
|
const ExperManage = (props) => {
|
|
const [searchForm] = Form.useForm();
|
|
const [editForm] = Form.useForm();
|
|
const [detailVisible, setDetailVisible] = useState(false);
|
|
const [editVisible, setEditVisible] = useState(false);
|
|
const [editingId, setEditingId] = useState(null);
|
|
const [submiting, setSubmiting] = useState(false);
|
|
|
|
const { qualExpert, queryExpertPage, getExpertDetail, saveExpert, modifyExpert, deleteExpert } = props;
|
|
const { qualExpertList, qualExpertTotal, qualExpertLoading, qualExpertDetail, qualExpertDetailLoading } = qualExpert || {};
|
|
|
|
const getData = () => {
|
|
queryExpertPage({
|
|
...router.query,
|
|
current: router.query.current || 1,
|
|
size: router.query.size || 10,
|
|
});
|
|
};
|
|
|
|
const handleReset = (values) => {
|
|
router.query = {
|
|
...router.query,
|
|
...values,
|
|
current: 1,
|
|
size: 10,
|
|
};
|
|
getData();
|
|
};
|
|
|
|
useEffect(() => {
|
|
searchForm.setFieldsValue(router.query);
|
|
getData();
|
|
}, []);
|
|
|
|
// ─── 查看详情 ───
|
|
|
|
const openDetail = async (id) => {
|
|
setDetailVisible(true);
|
|
await getExpertDetail({ id });
|
|
};
|
|
|
|
// ─── 新增 / 编辑 ───
|
|
|
|
const openAdd = () => {
|
|
editForm.resetFields();
|
|
setEditingId(null);
|
|
setEditVisible(true);
|
|
};
|
|
|
|
const openEdit = async (id) => {
|
|
setEditingId(id);
|
|
setEditVisible(true);
|
|
const res = await getExpertDetail({ id });
|
|
if (res?.success !== false) {
|
|
editForm.setFieldsValue(res.data || qualExpertDetail);
|
|
}
|
|
};
|
|
|
|
const handleEditSubmit = async () => {
|
|
const values = await editForm.validateFields();
|
|
setSubmiting(true);
|
|
const action = editingId ? modifyExpert : saveExpert;
|
|
const params = editingId ? { ...values, id: editingId } : values;
|
|
const res = await action(params);
|
|
setSubmiting(false);
|
|
if (res?.success !== false) {
|
|
message.success(editingId ? "修改成功" : "新增成功");
|
|
setEditVisible(false);
|
|
getData();
|
|
}
|
|
};
|
|
|
|
// ─── 删除 ───
|
|
|
|
const handleDelete = (record) => {
|
|
Modal.confirm({
|
|
title: "确认删除",
|
|
content: `确认删除专家「${record.userName}」？此操作不可恢复。`,
|
|
okText: "确认删除",
|
|
okButtonProps: { danger: true },
|
|
cancelText: "取消",
|
|
onOk: async () => {
|
|
const res = await deleteExpert({ id: record.id });
|
|
if (res?.success !== false) {
|
|
message.success("删除成功");
|
|
getData();
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
// ─── 表格列 ───
|
|
|
|
const columns = [
|
|
{
|
|
title: "序号",
|
|
width: 60,
|
|
fixed: "left",
|
|
render: (_, __, index) => index + 1,
|
|
},
|
|
{ title: "姓名", dataIndex: "userName", width: 100 },
|
|
{ title: "账号", dataIndex: "account", width: 140 },
|
|
{
|
|
title: "性别",
|
|
dataIndex: "genderCode",
|
|
width: 70,
|
|
render: (code) => GENDER_MAP[code] || "--",
|
|
},
|
|
{ title: "身份证号", dataIndex: "idCardNo", width: 180 },
|
|
{ title: "证书", dataIndex: "certificate", width: 120, ellipsis: true },
|
|
{
|
|
title: "操作",
|
|
width: 180,
|
|
fixed: "right",
|
|
render: (_, record) => (
|
|
<TableAction>
|
|
<Button type="link" size="small" onClick={() => openDetail(record.id)}>查看</Button>
|
|
<Button type="link" size="small" onClick={() => openEdit(record.id)}>编辑</Button>
|
|
<Button type="link" size="small" danger onClick={() => handleDelete(record)}>删除</Button>
|
|
</TableAction>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<PageLayout
|
|
title="专家管理"
|
|
extra={
|
|
<Button type="primary" onClick={openAdd}>新增专家</Button>
|
|
}
|
|
>
|
|
<SearchForm
|
|
style={{ marginBottom: 24 }}
|
|
form={searchForm}
|
|
loading={qualExpertLoading}
|
|
formLine={[
|
|
<Form.Item key="userName" name="userName">
|
|
<ControlWrapper.Input label="姓名" placeholder="请输入" allowClear />
|
|
</Form.Item>,
|
|
<Form.Item key="account" name="account">
|
|
<ControlWrapper.Input label="账号" placeholder="请输入" allowClear />
|
|
</Form.Item>,
|
|
<Form.Item key="genderCode" name="genderCode">
|
|
<ControlWrapper.Select
|
|
label="性别"
|
|
placeholder="请选择"
|
|
allowClear
|
|
style={{ width: "100%" }}
|
|
>
|
|
{GENDER_OPTIONS.map((item) => (
|
|
<Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
|
|
))}
|
|
</ControlWrapper.Select>
|
|
</Form.Item>,
|
|
<Form.Item key="idCardNo" name="idCardNo">
|
|
<ControlWrapper.Input label="身份证号" placeholder="请输入" allowClear />
|
|
</Form.Item>,
|
|
]}
|
|
onReset={handleReset}
|
|
onFinish={(values) => {
|
|
router.query = {
|
|
...router.query,
|
|
...values,
|
|
current: 1,
|
|
size: 10,
|
|
};
|
|
getData();
|
|
}}
|
|
/>
|
|
|
|
<Table
|
|
rowKey="id"
|
|
columns={columns}
|
|
dataSource={qualExpertList}
|
|
scroll={{ y: props.scrollY }}
|
|
loading={qualExpertLoading}
|
|
pagination={{
|
|
total: qualExpertTotal,
|
|
showSizeChanger: true,
|
|
showQuickJumper: true,
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
current: router.query.current || 1,
|
|
pageSize: router.query.size || 10,
|
|
onChange: (page, pageSize) => {
|
|
router.query = { ...router.query, current: page, size: pageSize };
|
|
getData();
|
|
},
|
|
}}
|
|
/>
|
|
|
|
{/* 查看详情弹窗 */}
|
|
<Modal
|
|
title="专家详情"
|
|
open={detailVisible}
|
|
onCancel={() => setDetailVisible(false)}
|
|
footer={<Button onClick={() => setDetailVisible(false)}>关闭</Button>}
|
|
width={560}
|
|
>
|
|
<Descriptions column={2} bordered size="small" loading={qualExpertDetailLoading}>
|
|
<Descriptions.Item label="姓名">{qualExpertDetail?.userName || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="账号">{qualExpertDetail?.account || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="性别">{GENDER_MAP[qualExpertDetail?.genderCode] || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="身份证号">{qualExpertDetail?.idCardNo || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="证书" span={2}>{qualExpertDetail?.certificate || "--"}</Descriptions.Item>
|
|
</Descriptions>
|
|
</Modal>
|
|
|
|
{/* 新增/编辑弹窗 */}
|
|
<Modal
|
|
title={editingId ? "编辑专家" : "新增专家"}
|
|
open={editVisible}
|
|
onCancel={() => setEditVisible(false)}
|
|
onOk={handleEditSubmit}
|
|
confirmLoading={submiting}
|
|
width={520}
|
|
>
|
|
<Form form={editForm} layout="vertical">
|
|
<Form.Item name="userName" label="姓名" rules={[{ required: true, message: "请输入姓名" }]}>
|
|
<Input placeholder="请输入" allowClear />
|
|
</Form.Item>
|
|
<Form.Item name="account" label="账号" rules={[{ required: true, message: "请输入账号" }]}>
|
|
<Input placeholder="请输入" allowClear />
|
|
</Form.Item>
|
|
<Form.Item name="genderCode" label="性别">
|
|
<Select placeholder="请选择" allowClear style={{ width: "100%" }}>
|
|
{GENDER_OPTIONS.map((item) => (
|
|
<Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="idCardNo" label="身份证号">
|
|
<Input placeholder="请输入" allowClear />
|
|
</Form.Item>
|
|
<Form.Item name="certificate" label="证书">
|
|
<Input placeholder="请输入" allowClear />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</PageLayout>
|
|
);
|
|
};
|
|
|
|
export default Connect([NS_QUAL_EXPERT], true)(AntdTableFuncControl(ExperManage)); |