Merge branch 'master' of https://gitlab.jlcucc.com:52302/coscoshipping/fe_service_ebtp_frontend
This commit is contained in:
jlzhangyx5
@ -42,6 +42,10 @@ export default {
|
||||
target: 'http://localhost:18014',
|
||||
changeOrigin: true,
|
||||
pathRewrite: { '/api/biz-service-ebtp-rsms': '' },
|
||||
'/api/biz-service-ebtp-agency': {
|
||||
target: 'http://localhost:18099',
|
||||
changeOrigin: true,
|
||||
pathRewrite: { '/api/biz-service-ebtp-agency': '' },
|
||||
},
|
||||
// '/api/wfap/v1/audit/bill/find/by/procid': {
|
||||
// target: 'http://10.242.31.158:8891/',//审批单 uat环境自动审批，暂时用不到
|
||||
|
||||
@ -105,7 +105,10 @@ export default [
|
||||
path: '/PublicPlatform',
|
||||
component: './Bid/BiddingAnnouncement/components/PublicPlatform',
|
||||
},
|
||||
|
||||
{
|
||||
path: '/ToAgencyManager',
|
||||
component: './Agency/AgencyManager',
|
||||
},
|
||||
//==============================================================引入的业务路由
|
||||
...approvalForm,//审批单
|
||||
...juryRoom,//评标室内所有路由
|
||||
|
||||
133
src/pages/Agency/AgencyManager/components/SelectProvider.tsx
Normal file
133
src/pages/Agency/AgencyManager/components/SelectProvider.tsx
Normal file
@ -0,0 +1,133 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { message, Modal, Input, Form, PageHeader, Button, Spin, Select, Tree } from 'antd';
|
||||
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
|
||||
import { getPage, getDataById, deleteAgency, addAgency, updateAgency,disableAgency } from './service';
|
||||
// import './styles.less';
|
||||
import { getDicData } from '@/utils/session';
|
||||
import TextArea from 'antd/lib/input/TextArea';
|
||||
|
||||
const selectProvider: React.FC<{}> = () => {
|
||||
//获取字典
|
||||
const getDict: any = getDicData();
|
||||
const [form] = Form.useForm();
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
|
||||
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
|
||||
const [currentRoleId, setCurrentRoleId] = useState<number | null>(null);
|
||||
const dictData = JSON.parse(getDict);
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [spin, spinSet] = useState<boolean>(false);
|
||||
//查询分页数据
|
||||
const [pageData, pageDataSet] = useState<any>({
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const layout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 13 },
|
||||
};
|
||||
interface DictType {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
const sys_normal_scope: DictType[] = [
|
||||
{ value: 'EBTP', label: '招标采购中心' },
|
||||
];
|
||||
|
||||
//委托列表
|
||||
const columns: ProColumns<any>[] = [
|
||||
{ title: '序号', valueType: 'index', width: 50, search: false, },
|
||||
{ title: '供应商名称', dataIndex: 'providerName', },//, ellipsis: true
|
||||
{ title: '供应商分类', dataIndex: 'roleName',
|
||||
valueEnum: { 'EBTP': { text: '招标采购中心', status: 'EBTP' }, },
|
||||
|
||||
},//, ellipsis: true//, ellipsis: true
|
||||
{ title: '品类', dataIndex: 'roleName', },
|
||||
{ title: '准入时间', dataIndex: 'roleName', },//, ellipsis: true
|
||||
{ title: '准入人', dataIndex: 'roleName', search: false, hideInTable:true,},//, ellipsis: true
|
||||
{ title: '失效时间', dataIndex: 'roleName', search: false,},//, ellipsis: true
|
||||
{ title: '状态', dataIndex: 'status', },//, ellipsis: true
|
||||
{ title: 'id', dataIndex: 'id', search: false,hideInTable:true,},//, ellipsis: true
|
||||
{ title: 'providerId', dataIndex: 'providerId', search: false,hideInTable:true,},
|
||||
// { title: '创建时间', dataIndex: 'createDate', width: '10%', valueType: 'dateTime', search: false },
|
||||
|
||||
{
|
||||
title: '操作', width: '9%',
|
||||
valueType: 'option',
|
||||
render: (_, record) => [
|
||||
|
||||
<Button type='text' onClick={() => { handleSelect(record) }}>选择</Button>
|
||||
|
||||
]
|
||||
},
|
||||
];
|
||||
// 删除操作
|
||||
const handleSelect = (id: string) => {
|
||||
Modal.confirm({
|
||||
title: '确认选择该供应商？',
|
||||
onOk: async () => {
|
||||
await deleteAgency(id).then((r: any) => {
|
||||
if (r?.code == 200) {
|
||||
message.success('删除成功');
|
||||
} else {
|
||||
message.error('删除失败');
|
||||
}
|
||||
})
|
||||
.finally(() => actionRef.current?.reload());
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const [menuOptions, setMenuOptions] = useState<any[]>([]);
|
||||
|
||||
|
||||
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 }) }}
|
||||
/>
|
||||
|
||||
</div>
|
||||
{/* 查看 */}
|
||||
</Spin >
|
||||
)
|
||||
};
|
||||
export default selectProvider;
|
||||
272
src/pages/Agency/AgencyManager/index.tsx
Normal file
272
src/pages/Agency/AgencyManager/index.tsx
Normal file
@ -0,0 +1,272 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { message, Modal, Input, Form, PageHeader, Button, Spin, Select, Tree } from 'antd';
|
||||
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
|
||||
import { getPage, getDataById, deleteAgency, addAgency, updateAgency,disableAgency } from './service';
|
||||
// import './styles.less';
|
||||
import { getDicData } from '@/utils/session';
|
||||
import TextArea from 'antd/lib/input/TextArea';
|
||||
|
||||
const agency: React.FC<{}> = () => {
|
||||
//获取字典
|
||||
const getDict: any = getDicData();
|
||||
const [form] = Form.useForm();
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
|
||||
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
|
||||
const [currentRoleId, setCurrentRoleId] = useState<number | null>(null);
|
||||
const dictData = JSON.parse(getDict);
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [spin, spinSet] = useState<boolean>(false);
|
||||
//查询分页数据
|
||||
const [pageData, pageDataSet] = useState<any>({
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const layout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 13 },
|
||||
};
|
||||
interface DictType {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
const sys_normal_scope: DictType[] = [
|
||||
{ value: 'EBTP', label: '招标采购中心' },
|
||||
];
|
||||
|
||||
//委托列表
|
||||
const columns: ProColumns<any>[] = [
|
||||
{ title: '序号', valueType: 'index', width: 50, search: false, },
|
||||
{ title: '代理机构名称', dataIndex: 'providerName', },//, ellipsis: true
|
||||
{ title: '申请人', dataIndex: 'roleName', search: false, },//, ellipsis: true//, ellipsis: true
|
||||
{ title: '准入时间', dataIndex: 'roleName', search: false, },//, ellipsis: true
|
||||
{ title: '准入人', dataIndex: 'roleName', search: false, },//, ellipsis: true
|
||||
{ title: '失效时间', dataIndex: 'roleName', search: false,},//, ellipsis: true
|
||||
{ title: '状态', dataIndex: 'status', valueType: 'select',
|
||||
valueEnum: { '1': { text: '有效', status: '1' },'0': { text: '无效', status: '0' }, },
|
||||
},//, ellipsis: true
|
||||
{ title: 'id', dataIndex: 'id', search: false,hideInTable:true,},//, ellipsis: true
|
||||
// { title: '创建时间', dataIndex: 'createDate', width: '10%', valueType: 'dateTime', search: false },
|
||||
{ title: 'providerId', dataIndex: 'providerId', search: false,hideInTable:true,},
|
||||
{
|
||||
title: '操作', width: '9%',
|
||||
valueType: 'option',
|
||||
render: (_, record) => [
|
||||
<Button type='text' onClick={() => { handleUpdate(record.providerId) }}>委托项目信息</Button>,
|
||||
<Button type='text' onClick={() => { handleDelete(record.id) }}>查看</Button>,
|
||||
<Button type='text' onClick={() => { handleUpdate(record.id) }}>失效</Button>,
|
||||
<Button type='text' onClick={() => { handleDelete(record) }}>选择</Button>
|
||||
|
||||
]
|
||||
},
|
||||
];
|
||||
// 删除操作
|
||||
const handleDelete = (id: string) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除该角色？',
|
||||
onOk: async () => {
|
||||
await deleteAgency(id).then((r: any) => {
|
||||
if (r?.code == 200) {
|
||||
message.success('删除成功');
|
||||
} else {
|
||||
message.error('删除失败');
|
||||
}
|
||||
})
|
||||
.finally(() => actionRef.current?.reload());
|
||||
},
|
||||
});
|
||||
};
|
||||
const handleAdd = async () => {
|
||||
form.resetFields();
|
||||
// const menus = await menuTreeselect();
|
||||
// setMenuOptions(menus.data || []);
|
||||
// setMenuOptions(menu || []);
|
||||
|
||||
// 使用时转换
|
||||
setMenuOptions(formatMenuOptions(menu) || []);
|
||||
setOpen(true);
|
||||
setTitle('添加角色');
|
||||
};
|
||||
|
||||
const [menuOptions, setMenuOptions] = useState<any[]>([]);
|
||||
let menu = [{
|
||||
"id": '1', "parentId": '0', "label": "系统管理", "weight": 1,
|
||||
"children": [{
|
||||
"id": '101', "parentId": '1', "label": "角色管理", "weight": 2,
|
||||
"children": [{ "id": '1008', "parentId": '101', "label": "角色查询", "weight": 1 },
|
||||
{ "id": '1009', "parentId": '101', "label": "角色新增", "weight": 2 },
|
||||
{ "id": '1010', "parentId": '101', "label": "角色修改", "weight": 3 },
|
||||
{ "id": '1011', "parentId": '101', "label": "角色删除", "weight": 4 },
|
||||
{ "id": '1012', "parentId": '101', "label": "角色导出", "weight": 5 }]
|
||||
},
|
||||
{
|
||||
"id": '105', "parentId": '1', "label": "字典管理", "weight": 6,
|
||||
"children": [{ "id": '1026', "parentId": '105', "label": "字典查询", "weight": 1 },
|
||||
{ "id": '1027', "parentId": '105', "label": "字典新增", "weight": 2 },
|
||||
{ "id": '1028', "parentId": '105', "label": "字典修改", "weight": 3 },
|
||||
{ "id": '1029', "parentId": '105', "label": "字典删除", "weight": 4 },
|
||||
{ "id": '1030', "parentId": '105', "label": "字典导出", "weight": 5 }]
|
||||
}]
|
||||
},
|
||||
{ "id": '4', "parentId": '0', "label": "PLUS官网", "weight": 4 },
|
||||
{
|
||||
"id": "1494925781048545281", "parentId": '0', "label": "个人待办", "weight": 18,
|
||||
"children": [{ "id": "1494926258733633538", "parentId": "1494925781048545281", "label": "待办任务", "weight": 1 },
|
||||
{ "id": "1494926586677874690", "parentId": "1494925781048545281", "label": "已办任务", "weight": 2 }]
|
||||
}];
|
||||
const formatMenuOptions = (data: any[]) => {
|
||||
return data.map(item => ({
|
||||
title: item.label,
|
||||
key: item.id,
|
||||
children: item.children ? formatMenuOptions(item.children) : undefined,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleUpdate = async (record: any) => {
|
||||
form.resetFields();
|
||||
const role = await getDataById(record.roleId);
|
||||
// const menus = await roleMenuTreeselect(record.roleId);
|
||||
// setMenuOptions(menus.data.menus || []);
|
||||
setMenuOptions(formatMenuOptions(menu) || []);
|
||||
setCheckedKeys(role.data.menuIds || []);
|
||||
form.setFieldsValue({
|
||||
...role.data,
|
||||
menuIds: role.data.menuIds || [],
|
||||
});
|
||||
// form.setFieldsValue(role.data);
|
||||
setCurrentRoleId(record.roleId);
|
||||
setOpen(true);
|
||||
setTitle('修改角色');
|
||||
};
|
||||
|
||||
const closeModal = async () => {
|
||||
actionRef.current?.reload();
|
||||
form.resetFields();
|
||||
setCheckedKeys([]);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
if (values.roleId) {
|
||||
await updateAgency(values).then((r: any) => {
|
||||
if (r?.code == 200) {
|
||||
message.success('修改成功');
|
||||
} else {
|
||||
message.error('修改失败');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
await addAgency(values).then((r: any) => {
|
||||
console.log("r?.code", r?.code)
|
||||
if (r?.code == 200) {
|
||||
message.success('新增成功');
|
||||
} else {
|
||||
message.error('新增失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
closeModal();
|
||||
} catch (error) {
|
||||
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="roleId" hidden>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="角色名称" name="roleName" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="角色编码" name="roleCode" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="角色范围" name="roleScope" rules={[{ required: true }]}>
|
||||
<Select>
|
||||
{sys_normal_scope.map((item) => (
|
||||
<Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item label="角色描述" name="roleDesc" rules={[{ required: true }]}>
|
||||
<TextArea />
|
||||
</Form.Item>
|
||||
<Form.Item label="菜单权限" name="menuIds" >
|
||||
<Tree
|
||||
defaultExpandAll
|
||||
checkable
|
||||
checkedKeys={checkedKeys}
|
||||
onCheck={(checkedKeys) => {
|
||||
setCheckedKeys(checkedKeys as React.Key[]);
|
||||
form.setFieldsValue({ menuIds: checkedKeys });
|
||||
}}
|
||||
treeData={menuOptions}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
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 agency;
|
||||
37
src/pages/Agency/AgencyManager/service.ts
Normal file
37
src/pages/Agency/AgencyManager/service.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 分页查询角色
|
||||
export async function getPage(params: any) {
|
||||
return request('/api/biz-service-ebtp-agency/api/agencies/find/myorgs', {
|
||||
method: 'post',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
export async function getDataById(id: any) {
|
||||
return request(`/api/biz-service-ebtp-agency/api/agencies/${id}`, {
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
export async function deleteAgency(id: any) {
|
||||
return request(`/api/biz-service-ebtp-agency/api/agencies/delete/${id}`, {
|
||||
method: 'post',
|
||||
});
|
||||
}
|
||||
export async function addAgency(params: any) {
|
||||
return request('/api/biz-service-ebtp-agency/api/agencies/create', {
|
||||
method: 'post',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
export async function updateAgency(params: any) {
|
||||
return request('/api/biz-service-ebtp-agency/api/agencies/update', {
|
||||
method: 'post',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
||||
export async function disableAgency(id: any) {
|
||||
return request(`/api/biz-service-ebtp-agency/api/agencies/disable/${id}`, {
|
||||
method: 'post',
|
||||
});
|
||||
}
|
||||
51
src/pages/Dict/DictService.ts
Normal file
51
src/pages/Dict/DictService.ts
Normal file
@ -0,0 +1,51 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 字典项类型定义
|
||||
export interface DictionaryItem {
|
||||
id: string;
|
||||
code: string;
|
||||
dicName: string;
|
||||
dictTypeCode: string,
|
||||
dictTypeName: string,
|
||||
parentCode: string,
|
||||
parentType: string,
|
||||
orderFlag: number;
|
||||
description: string;
|
||||
createTime: string;
|
||||
updateTime: string;
|
||||
}
|
||||
|
||||
// 获取字典列表
|
||||
// export const fetchDictionaries = async (): Promise<DictionaryItem[]> => {
|
||||
// const response = await axios.get('/api/sys-manager-ebtp-project/v1/dictProject/getDictList?parentCode=procurement_type&toParentCode=entrust');
|
||||
// return response.data.data;
|
||||
// };
|
||||
|
||||
const prefix = '/api/sys-manager-ebtp-project/';
|
||||
|
||||
export async function fetchDictionaries(params: any) {
|
||||
return request(prefix + 'v1/dictProject/selectDictList', {
|
||||
params: params,
|
||||
method: 'GET'
|
||||
});
|
||||
}
|
||||
|
||||
export async function createDictionary(params: any) {
|
||||
return request(prefix + 'v1/dictProject', {
|
||||
data: params,
|
||||
method: 'POST'
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateDictionary(params: any) {
|
||||
return request(prefix + 'v1/dictProject', {
|
||||
data: params,
|
||||
method: 'POST'
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteDictionary(param: any) {
|
||||
return request(prefix + 'v1/dictProject/delete/' + param, {
|
||||
method: 'POST',
|
||||
});
|
||||
}
|
||||
386
src/pages/Dict/DictionaryList.tsx
Normal file
386
src/pages/Dict/DictionaryList.tsx
Normal file
@ -0,0 +1,386 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Table, Space, Button, Modal, Form, Input, Popconfirm, message, Tag } from 'antd';
|
||||
import { DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined, CheckCircleOutlined, CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons';
|
||||
import {DictionaryItem, createDictionary, updateDictionary, deleteDictionary, fetchDictionaries} from './DictService';
|
||||
|
||||
interface DictionaryListProps {}
|
||||
|
||||
const DictionaryList: React.FC<DictionaryListProps> = () => {
|
||||
const [dataSource, setDataSource] = useState<DictionaryItem[]>([]);
|
||||
const [form] = Form.useForm();
|
||||
const [searchForm] = Form.useForm();
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [modalTitle, setModalTitle] = useState('');
|
||||
const [currentId, setCurrentId] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchParams, setSearchParams] = useState({
|
||||
parentCode: '',
|
||||
parentType: ''
|
||||
});
|
||||
// 选中的行ID
|
||||
const [selectedRowId, setSelectedRowId] = useState<string | null>(null);
|
||||
// 选中的行数据
|
||||
const [selectedRow, setSelectedRow] = useState<DictionaryItem | null>(null);
|
||||
// 展开的行ID
|
||||
const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
|
||||
// 是否为新增子节点模式
|
||||
const [isChildAddMode, setIsChildAddMode] = useState(false);
|
||||
|
||||
// const tableData: DictionaryItem[] = [
|
||||
// {
|
||||
// "id": '1164',
|
||||
// "code": "code",
|
||||
// "dicName": "行政区划",
|
||||
// "parentCode": '',
|
||||
// "parentType": "",
|
||||
// "orderFlag": 0,
|
||||
// "description": '',
|
||||
// "children": [
|
||||
// {
|
||||
// "id": 1163,
|
||||
// "code": "province",
|
||||
// "dicName": "省份",
|
||||
// "parentCode": "code",
|
||||
// "parentType": "行政区划",
|
||||
// "orderFlag": 1,
|
||||
// "description": ''
|
||||
// },
|
||||
// {
|
||||
// "id": 1162,
|
||||
// "code": "city",
|
||||
// "dicName": "地市",
|
||||
// "parentCode": "code",
|
||||
// "parentType": "行政区域",
|
||||
// "orderFlag": 3,
|
||||
// "description": ''
|
||||
// },
|
||||
// {
|
||||
// "id": 1161,
|
||||
// "code": "distict",
|
||||
// "dicName": "区县",
|
||||
// "parentCode": "code",
|
||||
// "parentType": "行政区域",
|
||||
// "orderFlag": 4,
|
||||
// "description": "区县级"
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ];
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await fetchDictionaries(searchParams); // 传递搜索参数
|
||||
setDataSource(result.data);
|
||||
} catch (error) {
|
||||
message.error('获取字典列表失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [searchParams]);
|
||||
|
||||
const handleAdd = () => {
|
||||
form.resetFields();
|
||||
setModalTitle('新增字典');
|
||||
setIsModalVisible(true);
|
||||
setCurrentId(null);
|
||||
setIsChildAddMode(false);
|
||||
};
|
||||
|
||||
const handleChildAdd = (record: DictionaryItem) =>{
|
||||
// 先清空表单
|
||||
form.resetFields();
|
||||
// 使用 setTimeout 确保表单重置完成后再设置值
|
||||
setTimeout(() => {
|
||||
form.setFieldsValue({
|
||||
code: '',
|
||||
dicName: '',
|
||||
parentCode: record.code,
|
||||
parentType: record.dicName,
|
||||
orderFlag: '',
|
||||
description: '',
|
||||
});
|
||||
}, 0);
|
||||
|
||||
setModalTitle(`新增${record.dicName}的子字典`);
|
||||
setIsModalVisible(true);
|
||||
setCurrentId(null);
|
||||
setIsChildAddMode(true);
|
||||
}
|
||||
|
||||
const handleEdit = (record: DictionaryItem) => {
|
||||
form.resetFields();
|
||||
|
||||
setTimeout(() => {
|
||||
form.setFieldsValue({
|
||||
code: record.code,
|
||||
dicName: record.dicName,
|
||||
parentCode: record.parentCode,
|
||||
parentType: record.parentType,
|
||||
orderFlag: record.orderFlag,
|
||||
description: record.description,
|
||||
});
|
||||
}, 0);
|
||||
|
||||
setModalTitle('编辑字典');
|
||||
setIsModalVisible(true);
|
||||
setCurrentId(record.id);
|
||||
setIsChildAddMode(false);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
try {
|
||||
await deleteDictionary(id);
|
||||
message.success('删除成功');
|
||||
setSelectedRowId(null);
|
||||
setSelectedRow(null);
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRowClick = (record: DictionaryItem) => {
|
||||
if (selectedRowId === record.id) {
|
||||
setSelectedRowId(null);
|
||||
setSelectedRow(null);
|
||||
} else {
|
||||
setSelectedRowId(record.id);
|
||||
setSelectedRow(record);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExpand = (expanded: boolean, record: DictionaryItem) => {
|
||||
if (expanded) {
|
||||
setExpandedRowKeys([...expandedRowKeys, record.id]);
|
||||
} else {
|
||||
setExpandedRowKeys(expandedRowKeys.filter(key => key !== record.id));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
if (currentId) {
|
||||
values.id = currentId;
|
||||
await updateDictionary(values);
|
||||
message.success('更新成功');
|
||||
} else {
|
||||
await createDictionary(values);
|
||||
message.success('创建成功');
|
||||
}
|
||||
setIsModalVisible(false);
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
message.error(error.message || '操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = (values: any) => {
|
||||
setSearchParams({
|
||||
parentCode: values.parentCode || '',
|
||||
parentType: values.parentType || ''
|
||||
});
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
searchForm.resetFields();
|
||||
setSearchParams({
|
||||
parentCode: '',
|
||||
parentType: ''
|
||||
});
|
||||
};
|
||||
|
||||
const expandIcon = ({ expanded, onExpand, record }: any) => {
|
||||
if (record.children && record.children.length > 0) {
|
||||
return (
|
||||
<span onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onExpand(record);
|
||||
}}>
|
||||
{expanded ? <CaretDownOutlined /> : <CaretRightOutlined />}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '字典编号',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
},
|
||||
{
|
||||
title: '字典名称',
|
||||
dataIndex: 'dicName',
|
||||
key: 'dicName',
|
||||
},
|
||||
{
|
||||
title: '分组编码',
|
||||
dataIndex: 'parentCode',
|
||||
key: 'parentCode',
|
||||
},
|
||||
{
|
||||
title: '分组名称',
|
||||
dataIndex: 'parentType',
|
||||
key: 'parentType',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'orderFlag',
|
||||
key: 'orderFlag',
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_: any, record: DictionaryItem) => (
|
||||
<Space size="middle">
|
||||
<Button icon={<PlusOutlined />} onClick={() => handleChildAdd(record)}>
|
||||
新增
|
||||
</Button>
|
||||
<Button icon={<EditOutlined />} onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确定要删除吗?"
|
||||
onConfirm={() => handleDelete(record.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button icon={<DeleteOutlined />} danger>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form
|
||||
form={searchForm}
|
||||
layout="inline"
|
||||
onFinish={handleSearch}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Form.Item name="parentCode" label="分组编码">
|
||||
<Input placeholder="请输入分组编码" />
|
||||
</Form.Item>
|
||||
<Form.Item name="parentType" label="分组名称">
|
||||
<Input placeholder="请输入分组名称" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
|
||||
搜索
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div style={{ marginBottom: 16, display: 'flex', alignItems: 'center' }}>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd} style={{ marginRight: 8 }}>
|
||||
新增字典
|
||||
</Button>
|
||||
|
||||
|
||||
{selectedRow && (
|
||||
<Tag color="blue" style={{ marginLeft: 'auto' }}>
|
||||
已选择: {selectedRow.dicName} <CheckCircleOutlined />
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Table
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
}}
|
||||
onRow={(record) => ({
|
||||
onClick: () => handleRowClick(record),
|
||||
style: {
|
||||
cursor: 'pointer',
|
||||
backgroundColor: selectedRowId === record.id ? '#e6f7ff' : 'transparent',
|
||||
},
|
||||
})}
|
||||
expandable={{
|
||||
expandedRowKeys,
|
||||
onExpand: handleExpand,
|
||||
expandIcon,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title={modalTitle}
|
||||
visible={isModalVisible}
|
||||
onCancel={() => setIsModalVisible(false)}
|
||||
onOk={handleSubmit}
|
||||
okText="保存"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
name="dictionaryForm"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
initialValues={{ remember: true }}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label="分组名称"
|
||||
name="parentType"
|
||||
>
|
||||
{/* 使用 readOnly 替代 disabled，并添加灰色背景 */}
|
||||
<Input
|
||||
readOnly={isChildAddMode}
|
||||
style={isChildAddMode ? { backgroundColor: '#f5f5f5' } : {}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="分组编码" name="parentCode">
|
||||
<Input
|
||||
readOnly={isChildAddMode}
|
||||
style={isChildAddMode ? { backgroundColor: '#f5f5f5' } : {}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="字典名称"
|
||||
name="dicName"
|
||||
rules={[{ required: true, message: '请输入字典名称' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="字典编号"
|
||||
name="code"
|
||||
rules={[{ required: true, message: '请输入字典编号' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="排序" name="orderFlag">
|
||||
<Input type="number" />
|
||||
</Form.Item>
|
||||
<Form.Item label="描述" name="description">
|
||||
<Input.TextArea />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DictionaryList;
|
||||
28
src/pages/Dict/DictionaryPage.tsx
Normal file
28
src/pages/Dict/DictionaryPage.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import { Layout, Breadcrumb } from 'antd';
|
||||
import DictionaryList from './DictionaryList';
|
||||
|
||||
const { Content } = Layout;
|
||||
|
||||
const DictionaryPage: React.FC = () => {
|
||||
return (
|
||||
<Layout style={{ padding: '0 24px 24px' }}>
|
||||
<Breadcrumb style={{ margin: '16px 0' }}>
|
||||
<Breadcrumb.Item>系统管理</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>字典管理</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<Content
|
||||
style={{
|
||||
background: '#fff',
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
}}
|
||||
>
|
||||
<DictionaryList />
|
||||
</Content>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default DictionaryPage;
|
||||
Reference in New Issue
Block a user