import React, { useEffect, useRef, useState } from 'react';
import { Button, message, Modal, Form, Row, Col, Input, Select } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { getDynLookupList, deleteDynLookup, recoverDynLookup } from '@api/dictionary';
import { getMetaTableList } from '@api/systemConfig';
import useApiRequest from '@hooks/useApiRequest';
import CustomProTable from '@components/CustomProTable';
import PermissionWrapper from '@components/PermissionWrapper';
import AddOrEditDynDictionaryMoadl from '../AddOrEditDynDictionaryMoadl';
import st from './index.module.scss';
const isDeletedOptions = [
{
label: '有效',
value: 0,
},
{
label: '无效',
value: 1,
},
];
export default function DynamicDictionaryList() {
const [form] = Form.useForm();
const [selectedData, setSelectedData] = useState(false);
const [addOrEditModalVisible, setAddOrEditModalVisible] = useState(false);
const pageInfoCurrent = useRef({ pageNum: 1, pageSize: 10 });
const { requesting, launchRequest, res } = useApiRequest(getDynLookupList);
const { list, total } = res || {};
const { requesting: delRequesting, launchRequest: delRequest } = useApiRequest(deleteDynLookup);
const { requesting: recoverRequesting, launchRequest: recoverRequest } = useApiRequest(recoverDynLookup);
const {
requesting: tablesRequesting,
launchRequest: getTablesRequest,
res: tableList,
} = useApiRequest(getMetaTableList);
const tableOptions = tableList?.map((item) => ({
label: `${item.displayName}( ${item.tableName})`,
value: item.tableName,
}));
useEffect(() => {
getList();
getTablesRequest({ tableType: 2 }).catch((error) => {
message.error(error.msg || error.message || error.error || '查询失败');
});
}, []);
const getList = async () => {
const values = form.getFieldsValue();
const params = {
...values,
...pageInfoCurrent.current,
};
launchRequest(params).catch((error) => {
message.error(error.msg || error.message || error.error || '查询失败');
});
};
const handleEdit = (record) => {
setSelectedData(record);
setAddOrEditModalVisible(true);
};
const handleRemove = ({ id }) => {
Modal.confirm({
title: '提示',
content: '确定禁用该字典吗?',
onOk: async () => {
await delRequest(id)
.then(() => {
message.success('操作成功');
getList();
})
.catch((error) => {
message.error(error.msg || error.message || error.error || '操作失败');
});
},
confirmLoading: delRequesting,
});
};
const handleRecover = ({ id }) => {
Modal.confirm({
title: '提示',
content: '确定启用该字典吗?',
onOk: async () => {
await recoverRequest(id)
.then(() => {
message.success('操作成功');
getList();
})
.catch((error) => {
message.error(error.msg || error.message || error.error || '操作失败');
});
},
confirmLoading: recoverRequesting,
});
};
const columns = [
{
key: 'displayName',
title: '动态字典名称',
dataIndex: 'displayName',
width: '10rem',
},
{
key: 'tableName',
title: '表名',
dataIndex: 'table',
render: (table) => (
<>
{table.displayName}({table.tableName})
</>
),
width: '14rem',
},
{
key: 'targetFieldName',
title: '目标字段',
dataIndex: 'targetField',
render: (targetField) => (
<>
{targetField.displayName || targetField.description}({targetField.fieldName})
</>
),
width: '12rem',
},
{
key: 'primarySearchFieldInfo',
title: '首选查询字段',
dataIndex: 'primarySearchFieldInfo',
render: (primarySearchFieldInfo) => (
<>
{primarySearchFieldInfo.displayName || primarySearchFieldInfo.description}({primarySearchFieldInfo.fieldName}
)
</>
),
width: '12rem',
},
{
key: 'secondarySearchFieldInfos',
title: '辅助查询字段',
dataIndex: 'secondarySearchFieldInfos',
render: (secondarySearchFieldInfos) => (
<>
{secondarySearchFieldInfos
.map((item) => `${item.displayName || item.description}(${item.fieldName})`)
.join('、')}
</>
),
width: '12rem',
},
{
key: 'displayFieldInfos',
title: '显示字段',
dataIndex: 'displayFieldInfos',
render: (displayFieldInfos) => (
<>
{displayFieldInfos?.map((item) => `${item.displayName || item.description}(${item.fieldName})`).join('、')}
</>
),
width: '12rem',
},
{
key: 'isDeleted',
title: '状态',
dataIndex: 'isDeleted',
render: (isDeleted) => isDeletedOptions.find((item) => item.value === isDeleted)?.label,
width: '6rem',
},
{
key: 'createTime',
title: '创建时间',
dataIndex: 'createTime',
width: '12rem',
},
{
key: 'createdBy',
title: '创建人',
dataIndex: 'createdBy',
width: '6rem',
},
{
key: 'updateTime',
title: '更新时间',
dataIndex: 'updateTime',
width: '12rem',
},
{
key: 'updatedBy',
title: '更新人',
dataIndex: 'updatedBy',
width: '6rem',
},
{
title: '操作',
dataIndex: 'operation',
fixed: 'right',
render: (_, record) => {
const btns = [];
if (record.isDeleted === 0) {
btns.push(
<PermissionWrapper code='udop:metadata:data_dictionary:edit_dynamic'>
<Button type='link' size='small' onClick={() => handleEdit(record)} key='edit' style={{ paddingLeft: 0 }}>
编辑
</Button>
</PermissionWrapper>,
<PermissionWrapper code='udop:metadata:data_dictionary:disable_dynamic'>
<Button type='link' size='small' onClick={() => handleRemove(record)} key='remove'>
禁用
</Button>
</PermissionWrapper>
);
} else {
btns.push(
<PermissionWrapper code='udop:metadata:data_dictionary:enable_dynamic'>
<Button
type='link'
size='small'
onClick={() => handleRecover(record)}
key='recover'
style={{ paddingLeft: 0 }}
>
启用
</Button>
</PermissionWrapper>
);
}
return btns.filter(Boolean);
},
},
];
const changePage = function (page, size) {
const { pageSize } = pageInfoCurrent.current;
let pageNum = page;
if (size !== pageSize) pageNum = 1;
pageInfoCurrent.current = { pageNum, pageSize: size };
getList();
};
const onSearch = () => {
pageInfoCurrent.current = { ...pageInfoCurrent.current, pageNum: 1 };
getList();
};
const onReset = () => {
form.resetFields();
onSearch();
};
const { pageNum, pageSize } = pageInfoCurrent.current;
return (
<>
<Form form={form} labelWrap labelAlign='left' className={st.form}>
<Row gutter={24}>
<Col span={8}>
<Form.Item label='动态字典名称' name='displayName'>
<Input allowClear placeholder='请输入' />
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label='表名' name='tableName'>
<Select
allowClear
placeholder='请选择'
loading={tablesRequesting}
options={tableOptions}
filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
showSearch
/>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label='状态' name='deletedStatus'>
<Select allowClear placeholder='请选择' options={isDeletedOptions} />
</Form.Item>
</Col>
<Col span={24} className={st.operations}>
<Button onClick={onReset}>重置</Button>
<Button type='primary' onClick={onSearch}>
查询
</Button>
</Col>
</Row>
</Form>
<CustomProTable
rowKey='id'
loading={requesting}
dataSource={list}
columns={columns}
pagination={{
showSizeChanger: true,
pageSize,
total,
showTotal: (total) => `共${total}条`,
position: ['bottomCenter'],
size: 'default',
current: pageNum,
onChange: changePage,
showQuickJumper: true,
}}
options={{
fullScreen: false,
reload: false,
density: false,
}}
columnsState={{
persistenceKey: 'pro-table-dictionary-list',
persistenceType: 'localStorage',
}}
toolBarRender={() => (
<PermissionWrapper code='udop:metadata:data_dictionary:add_dynamic'>
<Button type='primary' icon={<PlusOutlined />} onClick={() => setAddOrEditModalVisible(true)}>
新增
</Button>
</PermissionWrapper>
)}
size='large'
scroll={{ x: 'max-content', y: 'calc(100vh - 34.5rem)' }}
rowClassName={(record) => record.isDeleted === 1 && st.deletedRow}
className={st.table}
/>
{addOrEditModalVisible && (
<AddOrEditDynDictionaryMoadl
visible={addOrEditModalVisible}
afterClose={() => {
setSelectedData(null);
setAddOrEditModalVisible(false);
}}
selectedData={selectedData}
submitCb={() => {
setSelectedData(null);
setAddOrEditModalVisible(false);
getList();
}}
tableList={tableList}
/>
)}
</>
);
}
你需要把里面的中文都提取出来(注释内的不需要),每一个都作为object的key,对应的value是一个数组,数组第一个元素和key相同,第二个元素是key翻译出来的英文,直接给结果 ,再给这个文件加上import { useTranslation } from 'react-i18next’;(加在文件顶部)
const {
t,
i18n: { language },
} = useTranslation();(要加在组件内)不要增减注释,每个中文要用t('')包裹起来,中文中间有变量的,要把变量前后的中文分别用t('')包裹起来,直接给结果,我需要的两种结果分开给我
最新发布