|
@@ -0,0 +1,152 @@ |
|
|
|
|
|
import { Space, Table, Button, Input, Select, Divider, Tag, Card, Badge, Form, InputRef } from 'antd'; |
|
|
|
|
|
import type { TableColumnsType } from 'antd'; |
|
|
|
|
|
import { t } from '@/utils/i18n'; |
|
|
|
|
|
import React, { useState, useEffect, useRef } from 'react'; |
|
|
|
|
|
import { PlusOutlined, ExclamationCircleFilled, SearchOutlined, UndoOutlined } from '@ant-design/icons'; |
|
|
|
|
|
import type { CategoryPageReqVO, CategoryVO } from '@/models' |
|
|
|
|
|
import { antdUtils } from '@/utils/antd'; |
|
|
|
|
|
import { useRequest } from '@/hooks/use-request'; |
|
|
|
|
|
import platformShopService from '@/request/service/category'; |
|
|
|
|
|
import { formatDate } from '@/utils/formatTime'; |
|
|
|
|
|
import { useSetState } from 'ahooks'; |
|
|
|
|
|
|
|
|
|
|
|
export default () => { |
|
|
|
|
|
|
|
|
|
|
|
const [editorVisable, seEditorVisable] = useState<boolean>(false); |
|
|
|
|
|
const [editData, seEditData] = useState<CategoryVO>(); |
|
|
|
|
|
const [dataSource, setDataSource] = useState<CategoryVO[]>([]); |
|
|
|
|
|
const [searchFrom] = Form.useForm(); |
|
|
|
|
|
|
|
|
|
|
|
const [searchState, setSearchState] = useSetState<CategoryPageReqVO>({ |
|
|
|
|
|
pageNo: 1, |
|
|
|
|
|
pageSize: 10 |
|
|
|
|
|
}); |
|
|
|
|
|
const [total, setTotal] = useState(0) |
|
|
|
|
|
const searchInput = useRef<InputRef>(null); |
|
|
|
|
|
const [onSearching, setOnSearching] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
const { runAsync: getPageApi } = useRequest(platformShopService.getCategoryPageApi, { manual: true }); |
|
|
|
|
|
const { runAsync: deleteApi } = useRequest(platformShopService.deleteCategoryApi, { manual: true }); |
|
|
|
|
|
|
|
|
|
|
|
const load = async () => { |
|
|
|
|
|
const [error, { data }] = await getPageApi(searchFrom.getFieldsValue()); |
|
|
|
|
|
if (!error) { |
|
|
|
|
|
setDataSource(data.list); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const showDeleteConfirm = (data: CategoryVO) => { |
|
|
|
|
|
antdUtils.modal?.confirm({ |
|
|
|
|
|
title: '确认要将该分类删除吗?', |
|
|
|
|
|
icon: <ExclamationCircleFilled />, |
|
|
|
|
|
content: '请注意删除以后不可恢复!', |
|
|
|
|
|
okText: '删除', |
|
|
|
|
|
okType: 'danger', |
|
|
|
|
|
cancelText: '取消', |
|
|
|
|
|
onOk() { |
|
|
|
|
|
return new Promise(async (resolve) => { |
|
|
|
|
|
const [error, { code, msg }] = await deleteApi(data.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 columns: TableColumnsType<CategoryVO> = [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: '类目名称(CN)', |
|
|
|
|
|
dataIndex: 'categoryName', |
|
|
|
|
|
key: 'categoryName', |
|
|
|
|
|
align: 'right', |
|
|
|
|
|
width: 200, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: '类目名称(EN)', |
|
|
|
|
|
dataIndex: 'categoryNameEn', |
|
|
|
|
|
key: 'categoryNameEn', |
|
|
|
|
|
align: 'center', |
|
|
|
|
|
width: 200, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: '敦煌类目', |
|
|
|
|
|
dataIndex: '', |
|
|
|
|
|
key: '', |
|
|
|
|
|
align: 'center', |
|
|
|
|
|
width: 200, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: 'sds类目', |
|
|
|
|
|
dataIndex: '', |
|
|
|
|
|
key: '', |
|
|
|
|
|
align: 'center', |
|
|
|
|
|
width: 200 |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: '虾皮类目', |
|
|
|
|
|
dataIndex: '', |
|
|
|
|
|
key: '', |
|
|
|
|
|
align: 'center', |
|
|
|
|
|
width: 200 |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: t("QkOmYwne" /* 操作 */), |
|
|
|
|
|
key: 'action', |
|
|
|
|
|
render: (value: CategoryVO, record) => ( |
|
|
|
|
|
<Space size="small" split={(<Divider type='vertical' />)}> |
|
|
|
|
|
<a onClick={() => { |
|
|
|
|
|
seEditData(value); |
|
|
|
|
|
seEditorVisable(true); |
|
|
|
|
|
}}> |
|
|
|
|
|
编辑 |
|
|
|
|
|
</a> |
|
|
|
|
|
<a onClick={() => { |
|
|
|
|
|
showDeleteConfirm(value) |
|
|
|
|
|
}}> |
|
|
|
|
|
删除 |
|
|
|
|
|
</a> |
|
|
|
|
|
</Space> |
|
|
|
|
|
), |
|
|
|
|
|
}, |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
load(); |
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
const onReset = () => { |
|
|
|
|
|
searchFrom.resetFields() |
|
|
|
|
|
load() |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
<> |
|
|
|
|
|
<div> |
|
|
|
|
|
<Card className='mt-[4px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'> |
|
|
|
|
|
<Table rowKey="id" |
|
|
|
|
|
scroll={{ x: true }} |
|
|
|
|
|
columns={columns} |
|
|
|
|
|
dataSource={dataSource} |
|
|
|
|
|
className='bg-transparent' |
|
|
|
|
|
pagination={{ |
|
|
|
|
|
position: ['bottomRight'], |
|
|
|
|
|
current: searchState.pageNo, |
|
|
|
|
|
pageSize: searchState.pageSize, |
|
|
|
|
|
total |
|
|
|
|
|
}} /> |
|
|
|
|
|
</Card> |
|
|
|
|
|
</div> |
|
|
|
|
|
</> |
|
|
|
|
|
); |
|
|
|
|
|
}; |
|
|
|
|
|
|