|
|
@@ -0,0 +1,227 @@ |
|
|
|
import React, { useState, useEffect, useMemo } from 'react'; |
|
|
|
import { Space, Table, Button, Tag, Divider, Input, Card } from 'antd'; |
|
|
|
import { useSetState } from 'ahooks'; |
|
|
|
import type { TableProps, ColumnsType, ColumnType } from 'antd/es/table'; |
|
|
|
import { t } from '@/utils/i18n'; |
|
|
|
import { PlusOutlined, ExclamationCircleFilled, SearchOutlined } from '@ant-design/icons'; |
|
|
|
import { antdUtils } from '@/utils/antd'; |
|
|
|
import { useRequest } from '@/hooks/use-request'; |
|
|
|
import type { ErrorCodeVO, ErrorCodePageReqVO } from '@/models' |
|
|
|
import errorCodeService from '@/request/service/error-code'; |
|
|
|
import ErrorCodeEditor from './error-code-editor'; |
|
|
|
|
|
|
|
type DataIndex = keyof ErrorCodeVO; |
|
|
|
|
|
|
|
|
|
|
|
export default () => { |
|
|
|
const showDeleteConfirm = (item: ErrorCodeVO) => { |
|
|
|
antdUtils.modal?.confirm({ |
|
|
|
title: `确认删除编号为 ${item.id} 的错误码吗?`, |
|
|
|
icon: <ExclamationCircleFilled />, |
|
|
|
content: '请注意删除以后不可恢复!', |
|
|
|
okText: '删除', |
|
|
|
okType: 'danger', |
|
|
|
cancelText: '取消', |
|
|
|
onOk() { |
|
|
|
return new Promise(async (resolve, reject) => { |
|
|
|
const [error, { code, msg }] = await deleteApi(item.id); |
|
|
|
if (error || code !== 0) { |
|
|
|
antdUtils.message?.open({ type: 'error', content: msg ?? '操作失败' }) |
|
|
|
} else { |
|
|
|
antdUtils.message?.open({ type: 'success', content: '删除成功' }) |
|
|
|
} |
|
|
|
await load(); |
|
|
|
resolve(''); |
|
|
|
}).catch(() => antdUtils.message?.open({ |
|
|
|
type: 'error', |
|
|
|
content: '操作失败', |
|
|
|
})); |
|
|
|
}, |
|
|
|
onCancel() { |
|
|
|
}, |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const [editorVisable, seEditorVisable] = useState<boolean>(false); |
|
|
|
const [editData, seEditData] = useState<ErrorCodeVO>(); |
|
|
|
const [dataSource, setDataSource] = useState<ErrorCodeVO[]>([]); |
|
|
|
const [total, setTotal] = useState(0); |
|
|
|
const [searchState, setSearchState] = useSetState<ErrorCodePageReqVO>({}); |
|
|
|
const [onSearching, setOnSearching] = useState(false); |
|
|
|
|
|
|
|
const { runAsync: getPageApi } = useRequest(errorCodeService.getErrorCodePageApi, { manual: true }); |
|
|
|
const { runAsync: deleteApi } = useRequest(errorCodeService.deleteErrorCodeApi, { manual: true }); |
|
|
|
|
|
|
|
const showEditor = (record: ErrorCodeVO | undefined) => { |
|
|
|
seEditData(record); |
|
|
|
seEditorVisable(true); |
|
|
|
} |
|
|
|
|
|
|
|
const load = async () => { |
|
|
|
const [error, { data, code, msg }] = await getPageApi(searchState); |
|
|
|
setOnSearching(false); |
|
|
|
if (!error) { |
|
|
|
setDataSource(data.list); |
|
|
|
setTotal(data.total); |
|
|
|
} else { |
|
|
|
if (error || code !== 0) { |
|
|
|
antdUtils.message?.open({ type: 'error', content: msg ?? '操作失败' }); |
|
|
|
return |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const getColumnSearchProps = (dataIndex: DataIndex): ColumnType<ErrorCodeVO> => ({ |
|
|
|
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => ( |
|
|
|
<div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}> |
|
|
|
<Input.Search |
|
|
|
placeholder={dataIndex === 'type' ? '输入要搜索的字典名称' : '输入要搜索的字典类型'} |
|
|
|
value={selectedKeys[0]} |
|
|
|
onChange={(e) => { |
|
|
|
setSelectedKeys(e.target.value && e.target.value !== '' ? [e.target.value] : []) |
|
|
|
}} |
|
|
|
onSearch={(value) => { |
|
|
|
if (value === '' && clearFilters) { |
|
|
|
clearFilters!!() |
|
|
|
} |
|
|
|
confirm(); |
|
|
|
}} |
|
|
|
onPressEnter={() => confirm()} |
|
|
|
allowClear |
|
|
|
style={{ marginBottom: 8, display: 'block' }} |
|
|
|
enterButton="搜索" |
|
|
|
size="middle" |
|
|
|
loading={onSearching} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
), |
|
|
|
filterIcon: (filtered: boolean) => ( |
|
|
|
<SearchOutlined style={{ color: filtered ? 'primaryColor' : undefined }} /> |
|
|
|
), |
|
|
|
}); |
|
|
|
|
|
|
|
const columns: ColumnsType<ErrorCodeVO> = [ |
|
|
|
{ |
|
|
|
title: '编号', |
|
|
|
dataIndex: 'id', |
|
|
|
key: 'id', |
|
|
|
align: 'center', |
|
|
|
width: 100, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '错误码类型', |
|
|
|
dataIndex: 'type', |
|
|
|
key: 'type', |
|
|
|
align: 'center', |
|
|
|
width: 150, |
|
|
|
filters: [ |
|
|
|
{ text: '自动生成', value: 1 }, |
|
|
|
{ text: '手动编辑', value: 2 }, |
|
|
|
], |
|
|
|
filterMultiple: false, |
|
|
|
filterSearch: false, |
|
|
|
render: (value: number) => { |
|
|
|
return (value === 1 ? <Tag color="purple">自动生成</Tag> : <Tag color="blue">手动编辑</Tag>) |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '应用名', |
|
|
|
dataIndex: 'applicationName', |
|
|
|
key: 'applicationName', |
|
|
|
align: 'center', |
|
|
|
width: 150, |
|
|
|
...getColumnSearchProps('applicationName') |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '错误码编码', |
|
|
|
key: 'code', |
|
|
|
dataIndex: 'code', |
|
|
|
align: 'center', |
|
|
|
width: 150, |
|
|
|
...getColumnSearchProps('code') |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '错误码错误提示', |
|
|
|
key: 'message', |
|
|
|
dataIndex: 'message', |
|
|
|
align: 'center', |
|
|
|
width: 200, |
|
|
|
...getColumnSearchProps('message') |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: t("QkOmYwne" /* 操作 */), |
|
|
|
key: 'action', |
|
|
|
align: 'center', |
|
|
|
render: (_, record) => ( |
|
|
|
<Space size="middle" split={( |
|
|
|
<Divider type='vertical' /> |
|
|
|
)}> |
|
|
|
<a onClick={() => showEditor(record)}> |
|
|
|
编辑 |
|
|
|
</a> |
|
|
|
<a onClick={() => showDeleteConfirm(record)}> |
|
|
|
删除 |
|
|
|
</a> |
|
|
|
</Space> |
|
|
|
), |
|
|
|
width: 150, |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
load(); |
|
|
|
}, [searchState]); |
|
|
|
|
|
|
|
useMemo(() => { |
|
|
|
console.log('onMemChanged: ' + editData) |
|
|
|
}, [editData]) |
|
|
|
|
|
|
|
const onChange: TableProps<ErrorCodeVO>['onChange'] = (pagination, filters, sorter, extra) => { |
|
|
|
const state: ErrorCodePageReqVO = { |
|
|
|
applicationName: filters.applicationName ? filters.applicationName[0] as string : undefined, |
|
|
|
message: filters.message ? filters.message[0] as string : undefined, |
|
|
|
code: filters.code ? filters.code[0] as number : undefined, |
|
|
|
type: filters.type ? filters.type[0] as number : undefined, |
|
|
|
pageNo: pagination.current, |
|
|
|
pageSize: pagination.pageSize |
|
|
|
} |
|
|
|
setSearchState(state); |
|
|
|
}; |
|
|
|
|
|
|
|
return ( |
|
|
|
<> |
|
|
|
<Card className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]' |
|
|
|
bodyStyle={{ |
|
|
|
paddingTop: 0, |
|
|
|
paddingBottom: 0 |
|
|
|
}}> |
|
|
|
<div className="py-[8px] flex flex-row-reverse"> |
|
|
|
<Button className="ml-5" |
|
|
|
type='primary' |
|
|
|
icon={<PlusOutlined />} |
|
|
|
onClick={() => showEditor(undefined)}> 新增 </Button> |
|
|
|
</div> |
|
|
|
<Table rowKey="id" |
|
|
|
scroll={{ x: true }} |
|
|
|
onChange={onChange} |
|
|
|
columns={columns} |
|
|
|
dataSource={dataSource} |
|
|
|
className='bg-transparent' |
|
|
|
pagination={{ |
|
|
|
pageSize: searchState.pageSize, |
|
|
|
current: searchState.pageNo, |
|
|
|
total, |
|
|
|
position: ['bottomRight'] |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Card> |
|
|
|
<ErrorCodeEditor onSave={() => { |
|
|
|
load(); |
|
|
|
seEditorVisable(false); |
|
|
|
}} |
|
|
|
onCancel={() => { seEditorVisable(false) }} |
|
|
|
visible={editorVisable} |
|
|
|
data={editData} /> |
|
|
|
</> |
|
|
|
); |
|
|
|
}; |