|
@@ -1,4 +1,4 @@ |
|
|
import React, { useState, useRef } from 'react'; |
|
|
|
|
|
|
|
|
import React, { useState, useRef, useEffect } from 'react'; |
|
|
import { Space, Table, Button, Image, Divider, Card, Input } from 'antd'; |
|
|
import { Space, Table, Button, Image, Divider, Card, Input } from 'antd'; |
|
|
import type { InputRef } from 'antd'; |
|
|
import type { InputRef } from 'antd'; |
|
|
import type { ColumnType, ColumnsType } from 'antd/es/table'; |
|
|
import type { ColumnType, ColumnsType } from 'antd/es/table'; |
|
@@ -6,27 +6,29 @@ import type { FilterConfirmProps, TableRowSelection } from 'antd/es/table/interf |
|
|
import { t } from '@/utils/i18n'; |
|
|
import { t } from '@/utils/i18n'; |
|
|
import { PlusOutlined, ExclamationCircleFilled, DeleteOutlined, SearchOutlined } from '@ant-design/icons'; |
|
|
import { PlusOutlined, ExclamationCircleFilled, DeleteOutlined, SearchOutlined } from '@ant-design/icons'; |
|
|
import { antdUtils } from '@/utils/antd'; |
|
|
import { antdUtils } from '@/utils/antd'; |
|
|
|
|
|
import { useRequest } from '@/hooks/use-request'; |
|
|
import { DataDictVO, DataDictDetailVO } from '@/models'; |
|
|
import { DataDictVO, DataDictDetailVO } from '@/models'; |
|
|
import DictEditor from './dict-editor'; |
|
|
import DictEditor from './dict-editor'; |
|
|
import DictDetailEditor from './dict-detail-editor'; |
|
|
import DictDetailEditor from './dict-detail-editor'; |
|
|
|
|
|
import templateDictService from '@/request/service/template-dict'; |
|
|
|
|
|
|
|
|
const dataDicts: DataDictVO[] = [ |
|
|
|
|
|
{ |
|
|
|
|
|
"id": 43, |
|
|
|
|
|
"name": "爆款词", |
|
|
|
|
|
"description": "爆款词" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": 42, |
|
|
|
|
|
"name": "T-T", |
|
|
|
|
|
"description": "t-shirt" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": 41, |
|
|
|
|
|
"name": "T-shirt Background", |
|
|
|
|
|
"description": "T桖背景" |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
|
|
|
// const dataDicts: DataDictVO[] = [ |
|
|
|
|
|
// { |
|
|
|
|
|
// "id": 43, |
|
|
|
|
|
// "name": "爆款词", |
|
|
|
|
|
// "description": "爆款词" |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// "id": 42, |
|
|
|
|
|
// "name": "T-T", |
|
|
|
|
|
// "description": "t-shirt" |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// "id": 41, |
|
|
|
|
|
// "name": "T-shirt Background", |
|
|
|
|
|
// "description": "T桖背景" |
|
|
|
|
|
// } |
|
|
|
|
|
// ] |
|
|
|
|
|
|
|
|
const dictDetailsA: DataDictDetailVO[] = [ |
|
|
const dictDetailsA: DataDictDetailVO[] = [ |
|
|
{ |
|
|
{ |
|
@@ -117,7 +119,9 @@ const dictDetailsC: DataDictDetailVO[] = [ |
|
|
|
|
|
|
|
|
export default () => { |
|
|
export default () => { |
|
|
|
|
|
|
|
|
|
|
|
const [dataDicts, setDataDicts] = useState<DataDictVO[]>(); |
|
|
const [dictDetail, setDictDetail] = useState<DataDictDetailVO[]>(); |
|
|
const [dictDetail, setDictDetail] = useState<DataDictDetailVO[]>(); |
|
|
|
|
|
const [total, setTotal] = useState(0); |
|
|
|
|
|
|
|
|
const [editorVisable, seEditorVisable] = useState<boolean>(false); |
|
|
const [editorVisable, seEditorVisable] = useState<boolean>(false); |
|
|
const [editData, seEditData] = useState<DataDictVO>(); |
|
|
const [editData, seEditData] = useState<DataDictVO>(); |
|
@@ -125,6 +129,23 @@ export default () => { |
|
|
const [detailEditorVisable, seEdtailEditorVisable] = useState<boolean>(false); |
|
|
const [detailEditorVisable, seEdtailEditorVisable] = useState<boolean>(false); |
|
|
const [editDetailData, seEditDetailData] = useState<DataDictDetailVO>(); |
|
|
const [editDetailData, seEditDetailData] = useState<DataDictDetailVO>(); |
|
|
|
|
|
|
|
|
|
|
|
//获取字典分页数据 |
|
|
|
|
|
const { runAsync: getDictPageApi } = useRequest(templateDictService.getDictPageApi, { manual: true }); |
|
|
|
|
|
//删除字典数据 |
|
|
|
|
|
const { runAsync: deleteDictApi } = useRequest(templateDictService.deleteDictApi, { manual: true }); |
|
|
|
|
|
|
|
|
|
|
|
const load = async () => { |
|
|
|
|
|
const [error, { data }] = await getDictPageApi(); |
|
|
|
|
|
if (!error) { |
|
|
|
|
|
setDataDicts(data.list); |
|
|
|
|
|
setTotal(data.total); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
load(); |
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
const showDeleteConfirm = (item: DataDictVO) => { |
|
|
const showDeleteConfirm = (item: DataDictVO) => { |
|
|
antdUtils.modal?.confirm({ |
|
|
antdUtils.modal?.confirm({ |
|
|
title: `确认删除名称为: ${item.name} 的字典吗?`, |
|
|
title: `确认删除名称为: ${item.name} 的字典吗?`, |
|
@@ -133,20 +154,14 @@ export default () => { |
|
|
okText: '删除', |
|
|
okText: '删除', |
|
|
okType: 'danger', |
|
|
okType: 'danger', |
|
|
cancelText: '取消', |
|
|
cancelText: '取消', |
|
|
onOk() { |
|
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
antdUtils.message?.open({ |
|
|
|
|
|
type: 'success', |
|
|
|
|
|
content: '删除成功', |
|
|
|
|
|
}); |
|
|
|
|
|
resolve(null) |
|
|
|
|
|
}, 1000); |
|
|
|
|
|
|
|
|
|
|
|
}).catch(() => antdUtils.message?.open({ |
|
|
|
|
|
type: 'error', |
|
|
|
|
|
content: '操作失败', |
|
|
|
|
|
})); |
|
|
|
|
|
|
|
|
onOk: async () => { |
|
|
|
|
|
const [error, { code, msg }] = await deleteDictApi(item.id); |
|
|
|
|
|
if (error || code !== 0) { |
|
|
|
|
|
antdUtils.message?.open({ type: 'error', content: msg ?? '操作失败' }) |
|
|
|
|
|
} else { |
|
|
|
|
|
antdUtils.message?.open({ type: 'success', content: '删除成功' }) |
|
|
|
|
|
} |
|
|
|
|
|
await load(); |
|
|
}, |
|
|
}, |
|
|
onCancel() { |
|
|
onCancel() { |
|
|
}, |
|
|
}, |
|
@@ -186,7 +201,7 @@ export default () => { |
|
|
onClick={() => { |
|
|
onClick={() => { |
|
|
seEditDetailData(record) |
|
|
seEditDetailData(record) |
|
|
seEdtailEditorVisable(true); |
|
|
seEdtailEditorVisable(true); |
|
|
}}> |
|
|
|
|
|
|
|
|
}}> |
|
|
编辑 |
|
|
编辑 |
|
|
</a> |
|
|
</a> |
|
|
<a |
|
|
<a |
|
@@ -256,7 +271,17 @@ export default () => { |
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
|
<div className='flex flex-row'> |
|
|
<div className='flex flex-row'> |
|
|
<Card className='basis-2/5 w-[100px] mb-[10px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'> |
|
|
|
|
|
|
|
|
<Card className='basis-2/5 w-[100px] mb-[10px] 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' size='middle' icon={<PlusOutlined />} |
|
|
|
|
|
onClick={() => { |
|
|
|
|
|
seEditData(undefined); |
|
|
|
|
|
seEditorVisable(true); |
|
|
|
|
|
}}> 新增 </Button> |
|
|
|
|
|
</div> |
|
|
<Table rowKey="id" scroll={{ x: true }} columns={dictColumns} dataSource={dataDicts} className='bg-transparent' |
|
|
<Table rowKey="id" scroll={{ x: true }} columns={dictColumns} dataSource={dataDicts} className='bg-transparent' |
|
|
onRow={(record) => { |
|
|
onRow={(record) => { |
|
|
return { |
|
|
return { |
|
@@ -282,6 +307,8 @@ export default () => { |
|
|
</div> |
|
|
</div> |
|
|
<DictEditor |
|
|
<DictEditor |
|
|
onSave={() => { |
|
|
onSave={() => { |
|
|
|
|
|
load(); |
|
|
|
|
|
seEditorVisable(false); |
|
|
}} |
|
|
}} |
|
|
onCancel={() => { seEditorVisable(false) }} |
|
|
onCancel={() => { seEditorVisable(false) }} |
|
|
visible={editorVisable} |
|
|
visible={editorVisable} |
|
|