品类管理查询
This commit is contained in:
sunyu
@ -1,4 +1,4 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import React, { useState, useRef } from 'react';
|
||||
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
|
||||
import { Button, Select, Modal, Form, Input, message, Spin, TreeSelect } from 'antd';
|
||||
import { getTreeList, addCategory, updateCategory, deleteCategory } from '../service';
|
||||
@ -9,53 +9,37 @@ const CategoryList: React.FC = () => {
|
||||
const [searchForm] = Form.useForm();
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
const [currentRecord, setCurrentRecord] = useState<any>(null);
|
||||
const [treeData, setTreeData] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [treeData, setTreeData] = useState<any[]>([]); // 保存树形数据
|
||||
const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
|
||||
const actionRef = useRef<ActionType>();
|
||||
const location = useLocation();
|
||||
const params = new URLSearchParams(location.search);
|
||||
const versionId = params.get('versionId');
|
||||
console.log(location,location.state)
|
||||
console.log(versionId,'versionId')
|
||||
interface DictType {
|
||||
value: number;
|
||||
label: string;
|
||||
}
|
||||
const version_status: DictType[] = [
|
||||
const [searchParams, setSearchParams] = useState<{ categoryName?: string; code?: string }>({});
|
||||
|
||||
// 状态选项（启用/停用）
|
||||
const version_status = [
|
||||
{ value: 1, label: '启用' },
|
||||
{ value: 0, label: '停用' },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await getTreeList({ versionId });
|
||||
setTreeData(response.data || []);
|
||||
} catch (error) {
|
||||
message.error('数据加载失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 点击“查询”：更新搜索参数并刷新表格
|
||||
const handleSearch = () => {
|
||||
const values = searchForm.getFieldsValue();
|
||||
// 实际应传递查询参数，此处简化
|
||||
fetchData();
|
||||
setSearchParams(values);
|
||||
actionRef.current?.reload(); // 触发 ProTable 重新请求数据
|
||||
};
|
||||
|
||||
// 点击“重置”：清空搜索参数并刷新表格
|
||||
const handleReset = () => {
|
||||
searchForm.resetFields();
|
||||
fetchData();
|
||||
setSearchParams({});
|
||||
actionRef.current?.reload();
|
||||
};
|
||||
|
||||
// 渲染操作列（仅非一级节点显示编辑/删除）
|
||||
const renderOperation = (_: any, record: any) => {
|
||||
if (record.level === 1) return null; // 一级节点无操作
|
||||
if (record.level === 1) return null;
|
||||
return (
|
||||
<>
|
||||
<Button type="text" onClick={() => handleEdit(record)}>编辑</Button>
|
||||
@ -64,6 +48,7 @@ console.log(location,location.state)
|
||||
);
|
||||
};
|
||||
|
||||
// 编辑品类：回显数据到表单
|
||||
const handleEdit = (record: any) => {
|
||||
form.setFieldsValue({
|
||||
id: record.id,
|
||||
@ -76,52 +61,49 @@ console.log(location,location.state)
|
||||
setOpenModal(true);
|
||||
};
|
||||
|
||||
// 新增品类：清空表单
|
||||
const handleAdd = () => {
|
||||
form.resetFields();
|
||||
setCurrentRecord(null);
|
||||
setOpenModal(true);
|
||||
};
|
||||
|
||||
// 删除品类：弹框确认后调用接口
|
||||
const handleDelete = async (id: string) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除？',
|
||||
onOk: async () => {
|
||||
await deleteCategory(id).then((r: any) => {
|
||||
if (r?.code == 200) {
|
||||
const res = await deleteCategory(id);
|
||||
if (res?.code === 200) {
|
||||
message.success('删除成功');
|
||||
fetchData();
|
||||
actionRef.current?.reload(); // 删除后刷新表格
|
||||
} else {
|
||||
message.error('删除失败');
|
||||
}
|
||||
})
|
||||
.finally(() => actionRef.current?.reload());
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 提交表单（新增/编辑）
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
console.log("--------------");
|
||||
console.log(versionId);
|
||||
const values = await form.validateFields();
|
||||
values.versionId = versionId;
|
||||
console.log(values,"")
|
||||
values.versionId = versionId; // 携带版本ID
|
||||
const isEdit = !!values.id;
|
||||
const result = isEdit
|
||||
const res = isEdit
|
||||
? await updateCategory(values)
|
||||
: await addCategory({ ...values });
|
||||
if (result.code === 200) {
|
||||
: await addCategory(values);
|
||||
if (res.code === 200) {
|
||||
message.success(isEdit ? '编辑成功' : '新增成功');
|
||||
setOpenModal(false);
|
||||
fetchData();
|
||||
actionRef.current?.reload(); // 操作后刷新表格
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
message.error('操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 构建父节点树形数据（递归生成）
|
||||
// 构建树形选择器的数据源（递归处理子节点）
|
||||
const buildParentTree = (data: any[]): any[] => {
|
||||
return data.map(node => ({
|
||||
value: node.id,
|
||||
@ -131,26 +113,53 @@ console.log(location,location.state)
|
||||
};
|
||||
|
||||
return (
|
||||
<Spin spinning={loading}>
|
||||
<Spin spinning={false}>
|
||||
{/* 搜索表单：品类名称 + 品类编码 + 查询/重置按钮 */}
|
||||
<Form
|
||||
form={searchForm}
|
||||
layout="inline"
|
||||
onFinish={handleSearch}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Form.Item name="categoryName" label="品类名称">
|
||||
<Input placeholder="请输入" />
|
||||
</Form.Item>
|
||||
<Form.Item name="code" label="品类编码">
|
||||
<Input placeholder="请输入" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">查询</Button>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{/* 品类列表：ProTable 动态加载数据（关闭内置搜索栏） */}
|
||||
<ProTable
|
||||
actionRef={actionRef}
|
||||
columns={[
|
||||
{ title: '品类名称', dataIndex: 'categoryName' },
|
||||
{ title: '品类编码', dataIndex: 'code' },
|
||||
{ title: '状态', dataIndex: 'status',
|
||||
valueEnum: { '1': { text: '启用', status: '1' }, },
|
||||
render: (_, record) => {
|
||||
if (record.status === 1) {
|
||||
return (<>启用</>)
|
||||
} else {
|
||||
return (<>停用</>)
|
||||
}
|
||||
}
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
render: (_, record) => record.status === 1 ? '启用' : '停用'
|
||||
},
|
||||
{ title: '更新时间', dataIndex: 'updateDate', valueType: 'dateTime' },
|
||||
{ title: '操作', valueType: 'option', render: renderOperation }
|
||||
{
|
||||
title: '操作',
|
||||
valueType: 'option',
|
||||
render: renderOperation
|
||||
}
|
||||
]}
|
||||
dataSource={treeData}
|
||||
// 动态请求数据：结合搜索参数和 versionId
|
||||
request={async () => {
|
||||
const queryParams = { ...searchParams, versionId };
|
||||
const res = await getTreeList(queryParams);
|
||||
setTreeData(res.data || []); // 保存树形数据（用于新增时的上级选择）
|
||||
return { data: res.data || [], success: true };
|
||||
}}
|
||||
rowKey="id"
|
||||
expandedRowKeys={expandedKeys}
|
||||
onExpand={(expanded, record) => {
|
||||
@ -162,28 +171,26 @@ console.log(location,location.state)
|
||||
<Button type="primary" onClick={handleAdd}>新增品类</Button>
|
||||
]}
|
||||
pagination={false}
|
||||
search={false} // 👈 关键修改：关闭 ProTable 内置搜索栏
|
||||
/>
|
||||
|
||||
{/* 新增/编辑模态框 */}
|
||||
<Modal
|
||||
title={currentRecord ? '编辑品类' : '新增品类'}
|
||||
// open={openModal}
|
||||
visible={openModal}
|
||||
onOk={handleSubmit}
|
||||
onCancel={() => setOpenModal(false)}
|
||||
width={600}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
{/* 新增时显示父节点树形选择（支持搜索） */}
|
||||
<Form.Item name="id" hidden>
|
||||
</Form.Item>
|
||||
<Form.Item name="parentId" hidden>
|
||||
</Form.Item>
|
||||
<Form.Item name="id" hidden />
|
||||
<Form.Item name="parentId" hidden />
|
||||
{/* 新增时显示上级树形选择（支持搜索） */}
|
||||
{!currentRecord && (
|
||||
<Form.Item label="请选择上级" name="parentId" rules={[{ required: true }]}>
|
||||
<TreeSelect
|
||||
placeholder="请选择上级（支持搜索）"
|
||||
treeData={buildParentTree(treeData)}
|
||||
treeData={buildParentTree(treeData)} // 使用最新树形数据
|
||||
showSearch
|
||||
treeDefaultExpandAll
|
||||
style={{ width: '100%' }}
|
||||
@ -198,7 +205,7 @@ console.log(location,location.state)
|
||||
</Form.Item>
|
||||
<Form.Item label="品类状态" name="status" rules={[{ required: true }]}>
|
||||
<Select>
|
||||
{version_status.map((item) => (
|
||||
{version_status.map(item => (
|
||||
<Select.Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Select.Option>
|
||||
|
||||
@ -40,10 +40,10 @@ const NoticeList: React.FC<{}> = () => {
|
||||
{ title: '名称', dataIndex: 'name',width: '10%' },//, ellipsis: true
|
||||
{ title: '版本', dataIndex: 'version', width: '10%' },
|
||||
{ title: '创建时间', dataIndex: 'createDate', width: '10%', valueType: 'dateTime', search: false },
|
||||
{ title: '创建人', dataIndex: 'createBy', width: '10%' },
|
||||
{ title: '创建人', dataIndex: 'createBy', width: '10%', search: false },
|
||||
{ title: '最后修改时间', dataIndex: 'updateDate', width: '10%', valueType: 'dateTime', search: false },
|
||||
{ title: '修改人', dataIndex: 'updateBy', width: '10%'},
|
||||
{ title: '状态', dataIndex: 'status', width: '10%',
|
||||
{ title: '修改人', dataIndex: 'updateBy', width: '10%', search: false},
|
||||
{ title: '状态', dataIndex: 'status', width: '10%', search: false,
|
||||
valueEnum: { '1': { text: '启用', status: '1' }, },
|
||||
render: (_, record) => {
|
||||
if (record.status === 1) {
|
||||
|
||||
Reference in New Issue
Block a user