@@ -0,0 +1,143 @@ | |||
import React, { useState, useRef, useEffect } from 'react'; | |||
import { Space, Table, Button, Image, Divider, Card, Input, Form } from 'antd'; | |||
import type { InputRef } from 'antd'; | |||
import type { ColumnType, ColumnsType } from 'antd/es/table'; | |||
import type { FilterConfirmProps, TableRowSelection } from 'antd/es/table/interface'; | |||
import { t } from '@/utils/i18n'; | |||
import { PlusOutlined, ExclamationCircleFilled, DeleteOutlined, SearchOutlined } from '@ant-design/icons'; | |||
import { antdUtils } from '@/utils/antd'; | |||
import { useRequest } from '@/hooks/use-request'; | |||
import type { DictTypeVO, DictDataVO, DictDataPageReqVO } from '@/models' | |||
import dictDataService from '@/request/service/system-dictdata'; | |||
const { Search } = Input; | |||
interface DictDataProps { | |||
data?: DictTypeVO | null; | |||
} | |||
export default (props: DictDataProps) => { | |||
const showDeleteConfirm = (item: DictDataVO) => { | |||
antdUtils.modal?.confirm({ | |||
title: `确认删除值为: ${item.value} 的字典吗?`, | |||
icon: <ExclamationCircleFilled />, | |||
content: '请注意删除以后不可恢复!', | |||
okText: '删除', | |||
okType: 'danger', | |||
cancelText: '取消', | |||
onOk() { | |||
return new Promise(async (resolve) => { | |||
const [error, { code, msg }] = await deleteDictDataApi(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<DictDataVO>(); | |||
const [dataSource, setDataSource] = useState<DictDataVO[]>([]); | |||
const [total, setTotal] = useState(0); | |||
const { runAsync: getDictDataPageApi } = useRequest(dictDataService.getDictDataPageApi, { manual: true }); | |||
const { runAsync: deleteDictDataApi } = useRequest(dictDataService.deleteDictDataApi, { manual: true }); | |||
const load = async () => { | |||
const [error, { data }] = await getDictDataPageApi({ | |||
dictType: props.data?.type, | |||
pageSize:10, | |||
pageNo:1 | |||
}); | |||
if (!error) { | |||
setDataSource(data.list); | |||
setTotal(data.total); | |||
} | |||
}; | |||
const columns: ColumnsType<DictDataVO> = [ | |||
{ | |||
title: '数据标签', | |||
dataIndex: 'label', | |||
key: 'label', | |||
align: 'center', | |||
width: 150, | |||
}, | |||
{ | |||
title: '数据键值', | |||
dataIndex: 'value', | |||
key: 'value', | |||
align: 'center', | |||
width: 120, | |||
}, | |||
{ | |||
title: '状态', | |||
key: 'status', | |||
dataIndex: 'status', | |||
align: 'center', | |||
width: 120, | |||
}, | |||
{ | |||
title: t("QkOmYwne" /* 操作 */), | |||
key: 'action', | |||
align: 'center', | |||
render: (_, record) => ( | |||
<Space size="middle" split={( | |||
<Divider type='vertical' /> | |||
)}> | |||
<a | |||
onClick={() => { | |||
// setCreateVisible(true); | |||
// setCurRowData(record); | |||
}}> | |||
编辑 | |||
</a> | |||
<a | |||
onClick={() => { | |||
showDeleteConfirm(record) | |||
}}> | |||
删除 | |||
</a> | |||
</Space> | |||
), | |||
width: 150, | |||
}, | |||
]; | |||
useEffect(() => { | |||
load(); | |||
}, [props]); | |||
return ( | |||
<div> | |||
<div className="py-[8px] flex flex-row-reverse"> | |||
<Button className="ml-5" type='primary' size='middle' icon={<PlusOutlined />}> 添加字典数据 </Button> | |||
</div> | |||
<Table rowKey="id" | |||
scroll={{ x: true }} | |||
columns={columns} | |||
dataSource={dataSource} | |||
className='bg-transparent' | |||
pagination={{ | |||
pageSize: 10, | |||
current: 1, | |||
total, | |||
position: ['bottomRight'] | |||
}} | |||
/> | |||
</div> | |||
); | |||
}; |
@@ -0,0 +1,166 @@ | |||
import React, { useState, useRef, useEffect } from 'react'; | |||
import { Space, Table, Button, Image, Divider, Card, Input, Form } from 'antd'; | |||
import type { InputRef } from 'antd'; | |||
import type { ColumnType, ColumnsType } from 'antd/es/table'; | |||
import type { FilterConfirmProps, TableRowSelection } from 'antd/es/table/interface'; | |||
import { t } from '@/utils/i18n'; | |||
import { PlusOutlined, ExclamationCircleFilled, DeleteOutlined, SearchOutlined } from '@ant-design/icons'; | |||
import { antdUtils } from '@/utils/antd'; | |||
import { useRequest } from '@/hooks/use-request'; | |||
import type { DictTypeVO, DictTypePageReqVO, DictDataVO, DictDataPageReqVO } from '@/models' | |||
import dictDataService from '@/request/service/system-dictdata'; | |||
import dictTypeService from '@/request/service/system-dicttype'; | |||
import DictData from './dict-data' | |||
const { Search } = Input; | |||
export default () => { | |||
const showDeleteConfirm = (item: DictTypeVO) => { | |||
antdUtils.modal?.confirm({ | |||
title: `确认删除名称为: ${item.name} 的字典吗?`, | |||
icon: <ExclamationCircleFilled />, | |||
content: '请注意删除以后不可恢复!', | |||
okText: '删除', | |||
okType: 'danger', | |||
cancelText: '取消', | |||
onOk() { | |||
return new Promise((resolve, reject) => { | |||
setTimeout(() => { | |||
antdUtils.message?.open({ | |||
type: 'success', | |||
content: '删除成功', | |||
}); | |||
resolve(null) | |||
}, 1000); | |||
}).catch(() => antdUtils.message?.open({ | |||
type: 'error', | |||
content: '操作失败', | |||
})); | |||
}, | |||
onCancel() { | |||
}, | |||
}); | |||
}; | |||
const [editorVisable, seEditorVisable] = useState<boolean>(false); | |||
const [editData, seEditData] = useState<DictTypeVO>(); | |||
const [dataSource, setDataSource] = useState<DictTypeVO[]>([]); | |||
const [total, setTotal] = useState(0); | |||
const [searchFrom] = Form.useForm(); | |||
const { runAsync: getDictTypePageApi } = useRequest(dictTypeService.getDictTypePageApi, { manual: true }); | |||
const { runAsync: deleteDictTypeApi } = useRequest(dictTypeService.deleteDictTypeApi, { manual: true }); | |||
const { runAsync: getDictDataPageApi } = useRequest(dictDataService.getDictDataPageApi, { manual: true }); | |||
const { runAsync: deleteDictDataApi } = useRequest(dictDataService.deleteDictDataApi, { manual: true }); | |||
const load = async () => { | |||
const [error, { data }] = await getDictTypePageApi(searchFrom.getFieldsValue()); | |||
if (!error) { | |||
setDataSource(data.list); | |||
setTotal(data.total); | |||
} | |||
}; | |||
const columns: ColumnsType<DictTypeVO> = [ | |||
{ | |||
title: '字典名称', | |||
dataIndex: 'name', | |||
key: 'name', | |||
align: 'center', | |||
width: 150, | |||
}, | |||
{ | |||
title: '字典类型', | |||
dataIndex: 'type', | |||
key: 'type', | |||
align: 'center', | |||
width: 120, | |||
}, | |||
{ | |||
title: '状态', | |||
key: 'status', | |||
dataIndex: 'status', | |||
align: 'center', | |||
width: 120, | |||
}, | |||
{ | |||
title: t("QkOmYwne" /* 操作 */), | |||
key: 'action', | |||
align: 'center', | |||
render: (_, record) => ( | |||
<Space size="middle" split={( | |||
<Divider type='vertical' /> | |||
)}> | |||
<a | |||
onClick={() => { | |||
// setCreateVisible(true); | |||
// setCurRowData(record); | |||
}}> | |||
编辑 | |||
</a> | |||
<a | |||
onClick={() => { | |||
showDeleteConfirm(record) | |||
}}> | |||
删除 | |||
</a> | |||
</Space> | |||
), | |||
width: 150, | |||
}, | |||
]; | |||
const [isDisableDelete, setDisableDelete] = useState<boolean>(true) | |||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); | |||
const onSelectChange = (newSelectedRowKeys: React.Key[]) => { | |||
console.log('selectedRowKeys changed: ', newSelectedRowKeys); | |||
setSelectedRowKeys(newSelectedRowKeys); | |||
setDisableDelete(newSelectedRowKeys.length === 0) | |||
}; | |||
useEffect(() => { | |||
load(); | |||
}, []); | |||
return ( | |||
<> | |||
<div className='flex flex-row'> | |||
<Card className='basis-1/2 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 />}> 新增字典 </Button> | |||
</div> | |||
<Table rowKey="id" | |||
scroll={{ x: true }} | |||
columns={columns} | |||
dataSource={dataSource} | |||
className='bg-transparent' | |||
pagination={{ | |||
pageSize: 10, | |||
current: 1, | |||
total, | |||
position: ['bottomRight'] | |||
}} | |||
/> | |||
</Card> | |||
<Card className='basis-1/2 mb-[10px] ml-[10px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]' bodyStyle={{ | |||
paddingTop: 0, | |||
paddingBottom: 0 | |||
}}> | |||
<DictData | |||
data={dataSource[0]}/> | |||
</Card> | |||
</div> | |||
</> | |||
); | |||
}; |
@@ -0,0 +1,41 @@ | |||
import request from '@/request'; | |||
import { DictDataVO, DictDataPageReqVO, DictDataExportReqVO, PageData } from '@/models'; | |||
const BASE_URL = '/admin-api/system/dict-data'; | |||
export default { | |||
// 查询字典数据(精简)列表 | |||
listSimpleDictDataApi: () => { | |||
return request.get(`${BASE_URL}/list-all-simple`) | |||
}, | |||
// 查询字典数据列表 | |||
getDictDataPageApi: (params: DictDataPageReqVO) => { | |||
return request.get<PageData<DictDataVO>>(`${BASE_URL}/page`, { params }) | |||
}, | |||
// 查询字典数据详情 | |||
getDictDataApi: (id: number) => { | |||
return request.get(`${BASE_URL}/get?id=${id}`) | |||
}, | |||
// 新增字典数据 | |||
createDictDataApi: (data: DictDataVO) => { | |||
return request.post(`${BASE_URL}/create`, data) | |||
}, | |||
// 修改字典数据 | |||
updateDictDataApi: (data: DictDataVO) => { | |||
return request.put(`${BASE_URL}/update`, data) | |||
}, | |||
// 删除字典数据 | |||
deleteDictDataApi: (id: number) => { | |||
return request.delete(`${BASE_URL}/delete?id=${id}`) | |||
}, | |||
// 导出字典类型数据 | |||
exportDictDataApi: (params: DictDataExportReqVO) => { | |||
return request.get(`${BASE_URL}/export`, { params }) | |||
} | |||
}; |
@@ -0,0 +1,43 @@ | |||
import request from '@/request'; | |||
import { DictTypeVO, DictTypePageReqVO, DictTypeExportReqVO, PageData } from '@/models'; | |||
const BASE_URL = '/admin-api/system/dict-type'; | |||
export default { | |||
// 查询字典(精简)列表 | |||
listSimpleDictTypeApi: () => { | |||
return request.get(`${BASE_URL}/list-all-simple`) | |||
}, | |||
// 查询字典列表 | |||
getDictTypePageApi: (params: DictTypePageReqVO) => { | |||
return request.get<PageData<DictTypeVO>>(`${BASE_URL}/page`, { params }) | |||
}, | |||
// 查询字典详情 | |||
getDictTypeApi: (id: number) => { | |||
return request.get(`${BASE_URL}/get?id=${id}`) | |||
}, | |||
// 新增字典 | |||
createDictTypeApi: (data: DictTypeVO) => { | |||
return request.post(`${BASE_URL}/create`, data) | |||
}, | |||
// 修改字典 | |||
updateDictTypeApi: (data: DictTypeVO) => { | |||
return request.put(`${BASE_URL}/update`, data) | |||
}, | |||
// 删除字典 | |||
deleteDictTypeApi: (id: number) => { | |||
return request.delete(`${BASE_URL}/delete?id=${id}`) | |||
}, | |||
// 导出字典类型 | |||
exportDictTypeApi: (params: DictTypeExportReqVO) => { | |||
return request.get(`${BASE_URL}/export`, { params }) | |||
} | |||
}; | |||