品类管理
This commit is contained in:
sunyu
233
src/pages/CategoryManagement/components/CategoryMaintenance.tsx
Normal file
233
src/pages/CategoryManagement/components/CategoryMaintenance.tsx
Normal file
@ -0,0 +1,233 @@
|
||||
import React, { useState, useRef, useEffect } 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';
|
||||
import { useLocation } from 'umi';
|
||||
|
||||
const CategoryList: React.FC = () => {
|
||||
const [form] = Form.useForm();
|
||||
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 [expandedKeys, setExpandedKeys] = useState<string[]>([]);
|
||||
const actionRef = useRef<ActionType>();
|
||||
const location = useLocation();
|
||||
const versionId = location.state?.versionId;
|
||||
|
||||
interface DictType {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
const version_status: DictType[] = [
|
||||
{ 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();
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
searchForm.resetFields();
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const renderOperation = (_, record) => {
|
||||
if (record.level === 1) return null; // 一级节点无操作
|
||||
return (
|
||||
<>
|
||||
<Button type="text" onClick={() => handleEdit(record)}>编辑</Button>
|
||||
<Button type="text" onClick={() => handleDelete(record.id)}>删除</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const handleEdit = (record: any) => {
|
||||
form.setFieldsValue({
|
||||
id: record.id,
|
||||
parentId: record.parentId,
|
||||
categoryName: record.categoryName,
|
||||
status: record.status,
|
||||
code: record.code,
|
||||
});
|
||||
setCurrentRecord(record);
|
||||
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) {
|
||||
message.success('删除成功');
|
||||
fetchData();
|
||||
} 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,"")
|
||||
const isEdit = !!values.id;
|
||||
const result = isEdit
|
||||
? await updateCategory(values)
|
||||
: await addCategory({ ...values });
|
||||
if (result.code === 200) {
|
||||
message.success(isEdit ? '编辑成功' : '新增成功');
|
||||
setOpenModal(false);
|
||||
fetchData();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
message.error('操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 构建父节点树形数据（递归生成）
|
||||
const buildParentTree = (data: any[]): any[] => {
|
||||
return data.map(node => ({
|
||||
value: node.id,
|
||||
title: node.categoryName,
|
||||
children: node.children && buildParentTree(node.children),
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<Spin spinning={loading}>
|
||||
{/* 查询区域：条件靠左，按钮靠右 */}
|
||||
<div style={{ margin: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Form form={searchForm} layout="inline">
|
||||
<Form.Item name="categoryName" label="品类名称">
|
||||
<Input placeholder="请输入品类名称" />
|
||||
</Form.Item>
|
||||
<Form.Item name="status" label="状态">
|
||||
<Select placeholder="请选择状态">
|
||||
<Option value="启用">启用</Option>
|
||||
<Option value="停用">停用</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div>
|
||||
<Button type="primary" onClick={handleSearch}>查询</Button>
|
||||
<Button onClick={handleReset} style={{ marginLeft: 8 }}>重置</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 树表格 */}
|
||||
<ProTable
|
||||
actionRef={actionRef}
|
||||
columns={[
|
||||
{ title: '品类名称', dataIndex: 'categoryName', treeData: true },
|
||||
{ title: '品类编码', dataIndex: 'code' },
|
||||
{ title: '状态', dataIndex: 'status',
|
||||
valueEnum: { '1': { text: '启用', status: '1' }, },
|
||||
render: (_, record) => {
|
||||
if (record.status === 1) {
|
||||
return (<>启用</>)
|
||||
} else {
|
||||
return (<>停用</>)
|
||||
}
|
||||
}
|
||||
},
|
||||
{ title: '更新时间', dataIndex: 'updateDate', valueType: 'dateTime' },
|
||||
{ title: '操作', valueType: 'option', render: renderOperation }
|
||||
]}
|
||||
treeData={true}
|
||||
dataSource={treeData}
|
||||
rowKey="id"
|
||||
expandedRowKeys={expandedKeys}
|
||||
onExpand={(expanded, record) => {
|
||||
setExpandedKeys(prev =>
|
||||
expanded ? [...prev, record.id] : prev.filter(key => key !== record.id)
|
||||
);
|
||||
}}
|
||||
toolBarRender={() => (
|
||||
<Button type="primary" onClick={handleAdd}>新增品类</Button>
|
||||
)}
|
||||
pagination={false}
|
||||
/>
|
||||
|
||||
{/* 新增/编辑模态框 */}
|
||||
<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>
|
||||
{!currentRecord && (
|
||||
<Form.Item label="请选择上级" name="parentId" rules={[{ required: true }]}>
|
||||
<TreeSelect
|
||||
placeholder="请选择上级（支持搜索）"
|
||||
treeData={buildParentTree(treeData)}
|
||||
showSearch
|
||||
treeDefaultExpandAll
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
<Form.Item label="品类名称" name="categoryName" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="品类编码" name="code" rules={[{ required: true }]}>
|
||||
<Input placeholder="请输入编码" />
|
||||
</Form.Item>
|
||||
<Form.Item label="品类状态" name="status" rules={[{ required: true }]}>
|
||||
<Select>
|
||||
{version_status.map((item) => (
|
||||
<Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</Spin>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoryList;
|
||||
238
src/pages/CategoryManagement/index.tsx
Normal file
238
src/pages/CategoryManagement/index.tsx
Normal file
@ -0,0 +1,238 @@
|
||||
import React, {useRef, useState} from 'react';
|
||||
import ProTable, {ActionType, ProColumns} from '@ant-design/pro-table';
|
||||
import { getPage,getDataById,deleteVersion,addVersion,updateVersion } from './service';
|
||||
import {Button, Form, Input, message, Modal, PageHeader, Select, Spin} from 'antd';
|
||||
import { history } from 'umi';
|
||||
import TextArea from "antd/lib/input/TextArea";
|
||||
import {getDicData} from "@/utils/session";
|
||||
|
||||
const NoticeList: React.FC<{}> = () => {
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
|
||||
const [spin, spinSet] = useState<boolean>(false);
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [form] = Form.useForm();
|
||||
//获取字典
|
||||
const getDict: any = getDicData();
|
||||
//查询分页数据
|
||||
const [pageData, pageDataSet] = useState<any>({
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const layout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 13 },
|
||||
};
|
||||
const dictData = JSON.parse(getDict);
|
||||
interface DictType {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
const version_status: DictType[] = [
|
||||
{ value: 1, label: '启用' },
|
||||
{ value: 0, label: '停用' },
|
||||
];
|
||||
|
||||
//委托列表
|
||||
const columns: ProColumns<any>[] = [
|
||||
{ title: '序号', valueType: 'index', width: 50, },
|
||||
{ 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: 'updateDate', width: '10%', valueType: 'dateTime', search: false },
|
||||
{ title: '修改人', dataIndex: 'updateBy', width: '10%'},
|
||||
{ title: '状态', dataIndex: 'status', width: '10%',
|
||||
valueEnum: { '1': { text: '启用', status: '1' }, },
|
||||
render: (_, record) => {
|
||||
if (record.status === 1) {
|
||||
return (<>启用</>)
|
||||
} else {
|
||||
return (<>停用</>)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作', width: '9%',
|
||||
valueType: 'option',
|
||||
render: (_, record) => [
|
||||
<Button type='text' onClick={() => { handleUpdate(record) }}>修改</Button>,
|
||||
<Button type='text' onClick={() => { maintainCategory(record) }}>维护品类</Button>,
|
||||
<Button type='text' onClick={() => { handleDelete(record.id) }}>删除</Button>
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
const handleSubmit = async () => {
|
||||
console.log("提交按钮触发")
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
if (values.id) {
|
||||
await updateVersion(values).then((r: any) => {
|
||||
if (r?.code == 200) {
|
||||
message.success('修改成功');
|
||||
} else {
|
||||
message.error('修改失败');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
||||
await addVersion(values).then((r: any) => {
|
||||
if (r?.code == 200) {
|
||||
message.success('新增成功');
|
||||
} else {
|
||||
message.error('新增失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
closeModal();
|
||||
} catch (error) {
|
||||
console.log("错误失败！")
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const checkSupModal = (
|
||||
<Modal
|
||||
title={title}
|
||||
visible={open}
|
||||
width="70%"
|
||||
centered
|
||||
destroyOnClose={true}
|
||||
bodyStyle={{ maxHeight: window.innerHeight * 0.96 - 108, overflowY: 'auto', paddingTop: 0 }}
|
||||
// footer={<Button onClick={() => setOpen(false)}>关闭</Button>}
|
||||
onOk={handleSubmit}
|
||||
onCancel={() => closeModal()}
|
||||
>
|
||||
<Form form={form} {...layout}>
|
||||
<Form.Item label="主键id" name="id" hidden>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="名称" name="name" rules={[{ required: true }]} >
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="版本" name="version" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status" rules={[{ required: true }]}>
|
||||
<Select>
|
||||
{version_status.map((item) => (
|
||||
<Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item label="备注" name="label" >
|
||||
<TextArea />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
const handleUpdate = async (record: any) => {
|
||||
form.resetFields();
|
||||
const version = await getDataById(record.id);
|
||||
console.log("version---------"+version)
|
||||
form.setFieldsValue({
|
||||
...version.data,
|
||||
});
|
||||
// console.log("version---------"+version)
|
||||
setOpen(true);
|
||||
setTitle('修改品类版本');
|
||||
};
|
||||
|
||||
const maintainCategory = async (record: any) => {
|
||||
const versionId = record.id;
|
||||
// console.log(versionId,'versionId')
|
||||
// 使用history.push跳转到新页面，并传递id参数
|
||||
|
||||
history.push({
|
||||
pathname: '/categoryMaintenance',
|
||||
state: { versionId: versionId }
|
||||
});
|
||||
};
|
||||
|
||||
// 删除操作
|
||||
const handleDelete = (id: string) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除该品类版本？',
|
||||
onOk: async () => {
|
||||
await deleteVersion(id).then((r: any) => {
|
||||
if (r?.code == 200) {
|
||||
message.success('删除成功');
|
||||
} else {
|
||||
message.error('删除失败');
|
||||
}
|
||||
})
|
||||
.finally(() => actionRef.current?.reload());
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleAdd = async () => {
|
||||
form.resetFields();
|
||||
setOpen(true);
|
||||
setTitle('创建品类版本');
|
||||
};
|
||||
|
||||
const closeModal = async () => {
|
||||
actionRef.current?.reload();
|
||||
form.resetFields();
|
||||
// setCheckedKeys([]);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Spin spinning={spin}>
|
||||
<PageHeader title="创建品类版本" />
|
||||
<div style={{ maxHeight: innerHeight - 130, height: innerHeight - 130 }} className='xsy-entrust bgCWhite'>
|
||||
<ProTable<any>
|
||||
actionRef={actionRef}//action触发后更新表格
|
||||
columns={columns}//表格
|
||||
options={false}
|
||||
bordered={false}
|
||||
className='tableSearch'
|
||||
size='small'
|
||||
search={{ labelWidth: 'auto', span: 6 }}
|
||||
request={(params) =>
|
||||
getPage({
|
||||
...params,
|
||||
basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
|
||||
}).then((res) => {
|
||||
const result = {
|
||||
data: res.data.records,
|
||||
total: res.data.total,
|
||||
success: res.success,
|
||||
pageSize: res.data.size,
|
||||
current: res.data.current
|
||||
}
|
||||
return result;
|
||||
})
|
||||
}
|
||||
toolBarRender={() => [
|
||||
<Button onClick={() => { handleAdd() }} type="primary">
|
||||
新增
|
||||
</Button>,
|
||||
]
|
||||
}
|
||||
pagination={{
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: false,
|
||||
onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
|
||||
onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
|
||||
}}
|
||||
onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
|
||||
/>
|
||||
{checkSupModal}
|
||||
</div>
|
||||
{/* 查看 */}
|
||||
</Spin >
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
export default NoticeList;
|
||||
99
src/pages/CategoryManagement/service.ts
Normal file
99
src/pages/CategoryManagement/service.ts
Normal file
@ -0,0 +1,99 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
/**
|
||||
* 查询数据并分页
|
||||
* @param params
|
||||
*/
|
||||
export async function getPage(params: any) {
|
||||
return request('/api/sys-manager-ebtp-project/v1/coscocategoryversion/getPage', {
|
||||
method: 'post',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增品类版本
|
||||
* @param params
|
||||
*/
|
||||
export async function addVersion(params: any) {
|
||||
return request('/api/sys-manager-ebtp-project/v1/coscocategoryversion', {
|
||||
method: 'post',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改品类版本
|
||||
* @param params
|
||||
*/
|
||||
export async function updateVersion(params: any) {
|
||||
return request('/api/sys-manager-ebtp-project/v1/coscocategoryversion/update', {
|
||||
method: 'post',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据id查询品类版本详情
|
||||
* @param params
|
||||
*/
|
||||
export async function getDataById(id: any) {
|
||||
return request(`/api/sys-manager-ebtp-project/v1/coscocategoryversion/${id}`, {
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据id删除品类版本详情
|
||||
* @param params
|
||||
*/
|
||||
export async function deleteVersion(id: any) {
|
||||
return request(`/api/sys-manager-ebtp-project/v1/coscocategoryversion/delete/${id}`, {
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 查询品类维护页面列表数据 树结构
|
||||
* @param params
|
||||
*/
|
||||
export async function getTreeList(params: any) {
|
||||
return request('/api/sys-manager-ebtp-project/v1/coscocategorymaintenance/getTreeList', {
|
||||
method: 'post',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除品类维护
|
||||
* @param params
|
||||
*/
|
||||
export async function deleteCategory(id: any) {
|
||||
return request(`/api/sys-manager-ebtp-project/v1/coscocategorymaintenance/delete/${id}`, {
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 新增品类维护
|
||||
* @param params
|
||||
*/
|
||||
export async function addCategory(params: any) {
|
||||
return request('/api/sys-manager-ebtp-project/v1/coscocategorymaintenance', {
|
||||
method: 'post',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改品类维护
|
||||
* @param params
|
||||
*/
|
||||
export async function updateCategory(params: any) {
|
||||
return request('/api/sys-manager-ebtp-project/v1/coscocategorymaintenance/update', {
|
||||
method: 'post',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user