diff --git a/package.json b/package.json index 51ca257..f71059c 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@mango-scripts/dev-scripts": "^2.0.5", "@mango-scripts/esp-config": "^2.0.3", "@types/lodash-es": "^4.17.11", + "@types/mockjs": "^1.0.10", "@types/node": "^18.15.5", "@types/react": "^18.2.31", "@types/react-dom": "^18.2.14", @@ -60,5 +61,8 @@ "engines": { "node": ">=18.15.0", "pnpm": "=7.29.3" + }, + "dependencies": { + "mockjs": "^1.1.0" } } diff --git a/packages/components/src/MangoProTable/demo/demo.tsx b/packages/components/src/MangoProTable/demo/demo.tsx index 0b098cd..d3d7bd5 100644 --- a/packages/components/src/MangoProTable/demo/demo.tsx +++ b/packages/components/src/MangoProTable/demo/demo.tsx @@ -2,47 +2,60 @@ import { useRef } from 'react' import { MangoProTable } from '@mango-kit/components' import { sleep } from '@mango-kit/utils' import '@mango-kit/components/styles' -import dayjs from 'dayjs' import { ConfigProvider, Button, Space, App } from 'antd' import zh_CN from 'antd/es/locale/zh_CN' +import mockjs from 'mockjs' import type { MangoProTableHandle } from '@mango-kit/components' -const nodeMap = [ +const statusMap = [ { label: '待处理', value: 1, color: '#FA8C16' }, { label: '处理中', value: 2, color: '#2492FF' }, { label: '已处理', value: 3, color: '#52C41A' }, ] +const orderOriginMap = [ + { label: '天猫', value: 1, color: '#FA8C16' }, + { label: '淘宝', value: 2, color: '#2492FF' }, + { label: '小程序', value: 3, color: '#52C41A' }, + { + label: + '这是一个超长的text，这是一个超长的text，这是一个超长的text，这是一个超长的text，这是一个超长的text，这是一个超长的text，这是一个超长的text，这是一个超长的text，这是一个超长的text', + value: 4, + color: '#52C41A', + }, +] + const API = { getSearchOptions: async () => { await sleep(1000) return { - code: 200, + success: true, data: { - nodeCode: [ - { label: '待处理', value: 1, color: '#FA8C16' }, - { label: '处理中', value: 2, color: '#2492FF' }, - { label: '已处理', value: 3, color: '#52C41A' }, - ], - orderOriginList: [ - { label: '天猫', value: 1, color: '#FA8C16' }, - { label: '淘宝', value: 2, color: '#2492FF' }, - { label: '小程序', value: 3, color: '#52C41A' }, - ], + statusMap: statusMap, + orderOriginMap: orderOriginMap, }, + msg: '请求成功', } }, getList: async () => { await sleep(1000) return { - code: 200, - rows: new Array(5).fill(undefined).map((i) => ({ - orderNo: Math.random().toString(36).substring(3, 19), - createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), - nodeCode: nodeMap[0]?.value, - })), - total: 100, + success: true, + data: mockjs.mock({ + 'list|1-10': [ + { + orderNo: mockjs.Random.id(), + status: statusMap[0]?.value, + orderOrigin: function () { + return orderOriginMap[0].value + }, + createTime: mockjs.Random.datetime(), + }, + ], + total: 100, + }), + msg: '请求成功', } }, } @@ -56,15 +69,13 @@ const Demo: FC = () => { columnActions={{ width: 120, showAliasConfig: { - key: 'nodeCode', - map: nodeMap, + key: 'status', + map: statusMap, }, list: [ { title: '去处理', action: (record: any, navigate: any) => { - // navigate(`/detail?id=${record.id}pageType=modify`) - // mangoProTableRef.current.refresh() mangoProTableRef?.current?.modal?.confirm({ title: '录入新订单', content: '请填写订单信息', @@ -92,15 +103,27 @@ const Demo: FC = () => { copyable: true, }, { - title: '下单时间', + title: '创建时间', dataIndex: 'createTime', width: 200, }, + { + title: '订单来源', + dataIndex: 'orderOrigin', + width: 120, + valueType: 'map', + ellipsis: true, + valueEnum: (searchOptionsData: any) => { + return searchOptionsData?.orderOriginMap + }, + }, { title: '订单处理进度', - dataIndex: 'nodeCode', + dataIndex: 'status', width: 120, - valueEnum: nodeMap, + fixed: 'right', + valueType: 'status', + valueEnum: statusMap, }, ]} pageTips={{ @@ -124,11 +147,11 @@ const Demo: FC = () => { searchFormConfigList={[ [ { - name: 'nodeCode', + name: 'status', label: '处理进度', - type: 'mango-radio', - initialValue: '', - optionFilter: (data: any) => data?.nodeCodeList, + type: 'mango-form-radio', + initialValue: 1, + optionFilter: (data: any) => data?.statusMap, immediate: true, }, ], @@ -147,7 +170,7 @@ const Demo: FC = () => { type: 'select', initialValue: undefined, placeholder: '请选择订单来源', - optionFilter: (data: any) => data?.orderOriginList, + optionFilter: (data: any) => data?.orderOriginMap, }, { name: 'orderCreateTime', @@ -161,33 +184,10 @@ const Demo: FC = () => { toolBarRender={() => { return ( - - diff --git a/packages/components/src/MangoProTable/index.tsx b/packages/components/src/MangoProTable/index.tsx index 9c747e4..36e80d6 100644 --- a/packages/components/src/MangoProTable/index.tsx +++ b/packages/components/src/MangoProTable/index.tsx @@ -9,7 +9,8 @@ import { useNavigate } from 'react-router-dom' import cx from 'classnames' import { Table, Space, Button, Typography, Alert, Spin, Empty, App } from 'antd' import dayjs from 'dayjs' -import { matchLabel, parseDate } from '@mango-kit/utils' +import { matchLabel, parseDate, getLabel } from '@mango-kit/utils' +import { isFunction, isArray, isString } from 'lodash-es' import Status from './components/Status' import SearchForm from './components/SearchForm' @@ -25,7 +26,22 @@ import type { MessageInstance } from 'antd/es/message/interface' import type { ModalStaticFunctions } from 'antd/es/modal/confirm' import type { NotificationInstance } from 'antd/es/notification/interface' -export type ValueType = 'text' | 'date' | 'dateTime' +export type ValueType = 'text' | 'date' | 'dateTime' | 'status' | 'map' + +export type ValueEnum = + | { + label: string + value: string | number + color: string + [key: string]: any + }[] + | string + | ((searchOptionsData: any) => { + label: string + value: string | number + color: string + [key: string]: any + }[]) export type ColumnsType = { title: string @@ -35,13 +51,8 @@ export type ColumnsType = { ellipsis?: boolean copyable?: boolean render?: (text: any, record: any, index: number) => ReactNode - valueType?: string - valueEnum?: { - label: string - value: string | number - color: string - [key: string]: any - }[] + valueType?: ValueType + valueEnum?: ValueEnum }[] export type ColumnActionsType = { @@ -62,7 +73,7 @@ export type ColumnActionsType = { } export type TablePaginationType = { - pageNum: number + page: number pageSize: number } @@ -76,11 +87,19 @@ export type MangoProTableProps = { rowKey?: string request: { getSearchOptions?: { - api: (data?: any) => Promise + api: ( + searchData?: Record, + ) => Promise<{ success: boolean; data: any }> appendParams?: Record } getList: { - api: (data: any) => Promise + api: (queryData: Record) => Promise<{ + success: boolean + data: { + list: any[] + total: number + } + }> appendParams?: Record } } @@ -133,39 +152,55 @@ const getInitSearchFormValue = (list: any[] | undefined) => { const renderText = ( text: any, - ellipsis: any, - copyable: any, - valueType: string, - valueEnum: { + ellipsis: boolean, + copyable: boolean, + valueType: ValueType, + valueEnum: ValueEnum, + searchOptionsData: any, +) => { + const wrapperText = (_text: ReactNode) => { + if (!ellipsis && !copyable) { + return _text + } else { + return ( + + {_text} + + ) + } + } + + let valueEnumData: { label: string value: string | number color: string [key: string]: any - }[], -) => { - if (valueEnum) { - return - } - - if (valueType === 'date') { - return parseDate(text, 'YYYY-MM-DD') - } - - if (valueType === 'dateTime') { - return parseDate(text) + }[] = [] + + if (isFunction(valueEnum)) { + valueEnumData = valueEnum(searchOptionsData) + } else if (isArray(valueEnum)) { + valueEnumData = valueEnum + } else if (isString(valueEnum)) { + valueEnumData = searchOptionsData?.[valueEnum] ?? [] + } else { + valueEnumData = [] } - if (!ellipsis && !copyable) { - return text - } else { - return ( - - {text} - - ) + switch (valueType) { + case 'status': + return wrapperText() + case 'map': + return wrapperText(getLabel(text, valueEnumData)) + case 'date': + return wrapperText(parseDate(text, 'YYYY-MM-DD')) + case 'dateTime': + return wrapperText(parseDate(text)) + default: + return wrapperText(text) } } @@ -193,21 +228,21 @@ export const MangoProTable = forwardRef< const { modal, message, notification } = App.useApp() const [searchOptions, setSearchOptions] = useState({ - already: false, data: [], + already: false, }) const [tablePagination, setTablePagination] = useState({ + page: 1, pageSize: 5, - pageNum: 1, }) const [tableData, setTableData] = useState<{ - rows: any[] + list: any[] total: number already: boolean }>({ - rows: [], + list: [], total: 0, already: false, }) @@ -227,7 +262,7 @@ export const MangoProTable = forwardRef< ) => { setSearchFormValue(() => values) if (triggerRequest) { - const newTb = { ...tablePagination, pageNum: 1 } + const newTb = { ...tablePagination, page: 1 } setTablePagination(() => ({ ...newTb })) getList(values, newTb) } @@ -235,10 +270,10 @@ export const MangoProTable = forwardRef< const getSearchOptions = async () => { if (request?.getSearchOptions && request?.getSearchOptions?.api) { - const { code, data } = await request.getSearchOptions.api({ + const { success, data } = await request.getSearchOptions.api({ ...(request?.getSearchOptions?.appendParams ?? {}), }) - if (code === 200 && data) { + if (success && data) { setSearchOptions(() => ({ data, already: true })) } } @@ -249,6 +284,7 @@ export const MangoProTable = forwardRef< _tablePagination?: TablePaginationType, ) => { setTableLoading(true) + let delivery: Record = {} Object.entries({ ..._searchFormValue, @@ -270,11 +306,16 @@ export const MangoProTable = forwardRef< } if (request?.getList?.api) { - const { rows = [], total = 0 } = await request.getList.api(delivery) - - console.log(await request.getList.api(delivery)) + const { + data: { list = [], total = 0 }, + success = true, + } = await request.getList.api(delivery) setTableLoading(false) - setTableData(() => ({ rows, total, already: true })) + if (success) { + setTableData(() => ({ list, total, already: true })) + } else { + setTableData(() => ({ list: [], total: 0, already: true })) + } } } @@ -336,6 +377,7 @@ export const MangoProTable = forwardRef< width, ellipsis = false, copyable = false, + fixed, render, valueType = 'text', valueEnum, @@ -348,10 +390,18 @@ export const MangoProTable = forwardRef< align, width, ellipsis, + fixed, render: render ? render : (text: any) => - renderText(text, ellipsis, copyable, valueType, valueEnum), + renderText( + text, + ellipsis, + copyable, + valueType, + valueEnum, + searchOptions?.data, + ), } }) ?? []), columnActions @@ -369,7 +419,7 @@ export const MangoProTable = forwardRef< : [] const paginationConfig = { - current: tablePagination.pageNum, + current: tablePagination.page, pageSize: tablePagination.pageSize, defaultPageSize: 5, total: tableData.total, @@ -377,8 +427,8 @@ export const MangoProTable = forwardRef< showQuickJumper: true, showSizeChanger: true, showTotal: (total: number) => `共 ${total} 条`, - onChange: (pageNum: number, pageSize: number) => { - const newTb = { pageNum, pageSize } + onChange: (page: number, pageSize: number) => { + const newTb = { page, pageSize } setTablePagination(() => ({ ...newTb })) getList(searchFormValue, newTb) }, @@ -438,7 +488,7 @@ export const MangoProTable = forwardRef< )} row[rowKey]} @@ -480,9 +530,9 @@ export const MangoProTable = forwardRef< > {tableData?.already ? ( <> - {tableData?.rows?.length > 0 ? ( + {tableData?.list?.length > 0 ? (
- {tableData?.rows?.map((i) => { + {tableData?.list?.map((i) => { return renderTableItem && renderTableItem(i) })}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2deb7d5..0eef4fe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,6 +9,7 @@ importers: '@mango-scripts/dev-scripts': ^2.0.5 '@mango-scripts/esp-config': ^2.0.3 '@types/lodash-es': ^4.17.11 + '@types/mockjs': ^1.0.10 '@types/node': ^18.15.5 '@types/react': ^18.2.31 '@types/react-dom': ^18.2.14 @@ -20,6 +21,7 @@ importers: father: ^4.3.7 husky: ^8.0.3 lint-staged: ^14.0.1 + mockjs: ^1.1.0 prettier: ^3.0.3 react: ^18.2.0 react-dom: ^18.2.0 @@ -28,12 +30,15 @@ importers: tsx: ^3.14.0 typescript: ^5.2.2 vitest: ^0.34.6 + dependencies: + mockjs: 1.1.0 devDependencies: '@commitlint/cli': 17.8.1 '@commitlint/config-conventional': 17.8.1 '@mango-scripts/dev-scripts': 2.0.5 '@mango-scripts/esp-config': 2.0.3_hylujpixtsfmb27j3wn3k2bena '@types/lodash-es': 4.17.11 + '@types/mockjs': 1.0.10 '@types/node': 18.18.6 '@types/react': 18.2.31 '@types/react-dom': 18.2.14 @@ -5118,6 +5123,10 @@ packages: resolution: {integrity: sha512-Kfe/D3hxHTusnPNRbycJE1N77WHDsdS4AjUYIzlDzhDrS47NrwuL3YW4VITxwR7KCVpzwgy4Rbj829KSSQmwXQ==} dev: true + /@types/mockjs/1.0.10: + resolution: {integrity: sha512-SXgrhajHG7boLv6oU93CcmdDm0HYRiceuz6b+7z+/2lCJPTWDv0V5YiwFHT2ejE4bQqgSXQiVPQYPWv7LGsK1g==} + dev: true + /@types/ms/0.7.33: resolution: {integrity: sha512-AuHIyzR5Hea7ij0P9q7vx7xu4z0C28ucwjAZC0ja7JhINyCnOw8/DnvAPQQ9TfOlCtZAmCERKQX9+o1mgQhuOQ==} dev: true @@ -8312,7 +8321,6 @@ packages: /commander/11.1.0: resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==} engines: {node: '>=16'} - dev: true /commander/2.20.3: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} @@ -15973,6 +15981,13 @@ packages: ufo: 1.3.1 dev: true + /mockjs/1.1.0: + resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==} + hasBin: true + dependencies: + commander: 11.1.0 + dev: false + /move-concurrently/1.0.1: resolution: {integrity: sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ==} dependencies: