diff --git a/.gitignore b/.gitignore index 0fb3670..447857f 100644 --- a/.gitignore +++ b/.gitignore @@ -8,7 +8,7 @@ _roadhog-api-doc # production /dist - +/taskDoc # misc .DS_Store npm-debug.log* diff --git a/README.md b/README.md index 9086245..8262ac9 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,34 @@ # General-AI-Platform-Web 通用算法平台前端仓库 develop + + + + +### remark +* 列表筛选表单配置统一使用renderFormItem配置，方便个性化处理 +* 删除按钮颜色配色 统一将a标签换成Button 设置属性{ type="text" danger} +* 列表多选的操作高亮处理，目前不明显 +* 列表action栏位操作多个排在一起显得拥挤 + + +* 展示抽屉内容时需要有关闭按钮，排版需和谐 + + + + +### 具体实现 +1. 筛选表单区： 列表在columns配置初始数据时，需要筛选的表单项统一使用renderFormItem属性，基于renderFormItem去配置表单项field, 【searchFormItemProps】属性统一配置自定义业务 +{ + width="md" // 表单项宽度可以是数字 + labelCol={{span: 4}} // 标签布局 + wrapperCol={{span: 22}} // 输入控件布局 +} + +2. 列表action区按钮个性化和操作确认调整为 统一将a标签换成Button 设置属性【actionInnerDeleteBtnProps】 +{ type="text" danger} + +3. 列表action有多个按钮显示更多 +暂时使用默认超过3个显示更多，如需统一处理或者权限控制下的按钮显示隐藏导致的按钮数量不一致，可根据需要独立封装TableActionComp + + diff --git a/src/pages/Resource/AlgorithmModelList/components/ColumnDrawer.tsx b/src/pages/Resource/AlgorithmModelList/components/ColumnDrawer.tsx index 969fa53..9d0df11 100644 --- a/src/pages/Resource/AlgorithmModelList/components/ColumnDrawer.tsx +++ b/src/pages/Resource/AlgorithmModelList/components/ColumnDrawer.tsx @@ -1,3 +1,11 @@ +/* + * @Author: zhoux zhouxia@supervision.ltd + * @Date: 2023-11-01 13:56:33 + * @LastEditors: zhoux zhouxia@supervision.ltd + * @LastEditTime: 2023-11-02 15:19:11 + * @FilePath: \general-ai-platform-web\src\pages\Resource\AlgorithmModelList\components\ColumnDrawer.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD% + */ import React from "react"; import {Drawer} from "antd"; import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components"; @@ -9,7 +17,11 @@ export type ColumnDrawProps = { currentRow: API.AlgorithmModel | undefined; }; - +/** + * @表格列信息展示 + * @param props + * @returns + */ const ColumnDrawer: React.FC = (props) => { return ( @@ -20,6 +32,9 @@ const ColumnDrawer: React.FC = (props) => { props.handleDrawer(); }} closable={false} + extra={ + <>123 + } > {props.currentRow?.id && ( diff --git a/src/pages/Resource/AlgorithmModelList/components/CreateForm.tsx b/src/pages/Resource/AlgorithmModelList/components/CreateForm.tsx index 74e63fa..ff9a4c9 100644 --- a/src/pages/Resource/AlgorithmModelList/components/CreateForm.tsx +++ b/src/pages/Resource/AlgorithmModelList/components/CreateForm.tsx @@ -1,79 +1,140 @@ -import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';import {ProFormSelect} from '@ant-design/pro-components'; -import {FormattedMessage, useIntl} from '@umijs/max'; -import {postModelCategoryGetModelCategoryFkSelect} from "@/services/resource/ModelCategory"; -import {postAlgorithmModelCreateAlgorithmModel} from "@/services/resource/AlgorithmModel"; -import React, {useState} from 'react'; -import {Button, Form, message} from 'antd'; +/* + * @Author: zhoux zhouxia@supervision.ltd + * @Date: 2023-11-01 13:56:33 + * @LastEditors: zhoux zhouxia@supervision.ltd + * @LastEditTime: 2023-11-02 14:01:29 + * @FilePath: \general-ai-platform-web\src\pages\Resource\AlgorithmModelList\components\CreateForm.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ +import { postAlgorithmModelCreateAlgorithmModel } from '@/services/resource/AlgorithmModel'; +import { postModelCategoryGetModelCategoryFkSelect } from '@/services/resource/ModelCategory'; +import { ModalForm, ProForm, ProFormSelect, ProFormText } from '@ant-design/pro-components'; +import { FormattedMessage, useIntl } from '@umijs/max'; +import { Form, message } from 'antd'; +import React from 'react'; export type FormValueType = { - target?: string; - template?: string; - type?: string; - time?: string; - frequency?: string; - } & Partial; + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; - export type CreateFormProps = { - createModalOpen: boolean; - handleModal: ()=>void; - values: Partial; - reload: any; - }; +export type CreateFormProps = { + createModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; const CreateForm: React.FC = (props) => { + const intl = useIntl(); + const [form] = Form.useForm(); - const intl = useIntl(); - const [form] = Form.useForm(); - - return ( - - title={intl.formatMessage({ - id: 'common.modal.table.create.title', - defaultMessage: '$$$', - })} - open={props.createModalOpen} - form={form} - autoFocusFirstInput - modalProps={{ - destroyOnClose: true, - onCancel: () => props.handleModal(), - }} - submitTimeout={2000} - onFinish={async (values) => { - postAlgorithmModelCreateAlgorithmModel(values).then(()=>{ - message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) - props.reload() - }).catch(()=>{ - message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'})) - }) + return ( + + title={intl.formatMessage({ + id: 'common.modal.table.create.title', + defaultMessage: '$$$', + })} + open={props.createModalOpen} + form={form} + autoFocusFirstInput + modalProps={{ + destroyOnClose: true, + onCancel: () => props.handleModal(), + }} + submitTimeout={2000} + onFinish={async (values) => { + postAlgorithmModelCreateAlgorithmModel(values) + .then(() => { + message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' })); + props.reload(); + }) + .catch(() => { + message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); + }); props.handleModal(); return true; }} - > - - -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.algorithm_model.table.list.name', defaultMessage: '$$$'})}`} required={true} - rules={[ - { - required: true, - message: ( - - ), - }, - ]} - /> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.algorithm_model.table.list.categoryFkId', defaultMessage: '$$$'})}`} required={true} showSearch debounceTime={1000} request={async (keyWord)=>{ - const resp = await postModelCategoryGetModelCategoryFkSelect({keyword: keyWord?.keyWords || ''}) - return resp.data.list.map((v: any)=>{ - return { - label: v.name, - value: v.id - } - }) - } - }/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.algorithm_model.table.list.remark', defaultMessage: '$$$'})}`} required={false}/> - -)} + > + + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'resource.algorithm_model.table.list.name', + defaultMessage: '$$$', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'resource.algorithm_model.table.list.categoryFkId', + defaultMessage: '$$$', + })}`} + required={true} + showSearch + debounceTime={1000} + request={async (keyWord) => { + const resp = await postModelCategoryGetModelCategoryFkSelect({ + keyword: keyWord?.keyWords || '', + }); + return resp.data.list.map((v: any) => { + return { + label: v.name, + value: v.id, + }; + }); + }} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'resource.algorithm_model.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + /> + + + ); +}; export default CreateForm; diff --git a/src/pages/Resource/AlgorithmModelList/index.tsx b/src/pages/Resource/AlgorithmModelList/index.tsx index aeca552..88c290e 100644 --- a/src/pages/Resource/AlgorithmModelList/index.tsx +++ b/src/pages/Resource/AlgorithmModelList/index.tsx @@ -1,115 +1,125 @@ -import {ModelCategoryColumns} from '@/pages/Resource/ModelCategoryList/components/Columns'; -import {postModelCategoryGetModelCategoryById, postModelCategoryGetModelCategoryFkSelect, postModelCategoryGetModelCategoryNames} from '@/services/resource/ModelCategory'; -import {ColumnDrawer as ModelCategoryColumnDrawer} from "@/pages/Resource/ModelCategoryList/components/ColumnDrawer"; -import {deleteAlgorithmModelDeleteAlgorithmModel, postAlgorithmModelGetAlgorithmModelList, deleteAlgorithmModelDeleteAlgorithmModelByIds} from '@/services/resource/AlgorithmModel'; +import { ColumnDrawer as ModelCategoryColumnDrawer } from '@/pages/Resource/ModelCategoryList/components/ColumnDrawer'; +import { ModelCategoryColumns } from '@/pages/Resource/ModelCategoryList/components/Columns'; +import { + deleteAlgorithmModelDeleteAlgorithmModel, + deleteAlgorithmModelDeleteAlgorithmModelByIds, + postAlgorithmModelGetAlgorithmModelList, +} from '@/services/resource/AlgorithmModel'; +import { + postModelCategoryGetModelCategoryById, + postModelCategoryGetModelCategoryFkSelect, + postModelCategoryGetModelCategoryNames, +} from '@/services/resource/ModelCategory'; import { PlusOutlined } from '@ant-design/icons'; import type { ActionType, ProColumns } from '@ant-design/pro-components'; import { FooterToolbar, PageContainer, - ProTable, ProFormSelect, + ProFormText, + ProTable, } from '@ant-design/pro-components'; -import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max'; -import {Button, message} from 'antd'; +import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max'; +import { Button, Popconfirm, message } from 'antd'; import React, { useRef, useState } from 'react'; +import { ColumnDrawer } from './components/ColumnDrawer'; +import CreateForm from './components/CreateForm'; import UpdateForm from './components/UpdateForm'; -import CreateForm from "./components/CreateForm"; -import {ColumnDrawer} from "./components/ColumnDrawer"; const AlgorithmModelList: React.FC = () => { - /** - * @en-US Pop-up window of new window - * @zh-CN 新建窗口的弹窗 - * */ - const [createModalOpen, setCreateModalOpen] = useState(false); - /** - * @en-US The pop-up window of the distribution update window - * @zh-CN 分布更新窗口的弹窗 - * */ - const [updateModalOpen, setUpdateModalOpen] = useState(false); - const [showDetail, setShowDetail] = useState(false); - /** - * @en-US International configuration - * @zh-CN 国际化配置 - * */ - const access = useAccess(); - const intl = useIntl(); - const actionRef = useRef(); - const [currentRow, setCurrentRow] = useState(); - const [selectedRowsState, setSelectedRows] = useState([]); - const [category_fk_id_open, set_category_fk_id_open] = useState(false) - const [category_fk_id, set_category_fk_id] = useState() - const [category_fk_id_column_open, set_category_fk_id_column_open] = useState(false) - const [categoryFkIdIds, setCategoryFkIdIds] = useState([]) - const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({}) - const handle_category_fk_id = (id: any)=>{ - if (category_fk_id_open) { - set_category_fk_id(undefined); - set_category_fk_id_open(false) - }else { - postModelCategoryGetModelCategoryById({id: id}).then((resp)=>{ - set_category_fk_id(resp.data.modelCategory) - set_category_fk_id_open(true) - }) - } - } - const handle_category_fk_id_column_open = ()=>{ - if (category_fk_id_column_open) { - set_category_fk_id_column_open(false) - }else { - postModelCategoryGetModelCategoryNames({ids: categoryFkIdIds}).then((resp)=>{ - let a: any = {} - resp.data.list.forEach((v: any)=>{ - if (v.id) { - a[v.id] = v.name - } - }) - setCategoryFkIdMap(a) - }) - set_category_fk_id_column_open(true) - } - } - - const handleUpdateModal = ()=>{ - if (updateModalOpen) { - setUpdateModalOpen(false) - setCurrentRow(undefined) - } else { - setUpdateModalOpen(true) - } - } - const handleCreateModal = ()=>{ - if (createModalOpen) { - setCreateModalOpen(false) - setCurrentRow(undefined) - } else { - setCreateModalOpen(true) - } - } - const handleColumnDrawer = ()=>{ - if (showDetail) { - setShowDetail(false) - setCurrentRow(undefined) - } else { - setShowDetail(true) - } - } - const handleDestroy = async (selectedRow: API.AlgorithmModel) => { - deleteAlgorithmModelDeleteAlgorithmModel({id: selectedRow.id}).then(()=>{ - message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) - actionRef.current?.reload() - }).catch(()=>{ - message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'})) - }) - }; + /** + * @en-US Pop-up window of new window + * @zh-CN 新建窗口的弹窗 + * */ + const [createModalOpen, setCreateModalOpen] = useState(false); + /** + * @en-US The pop-up window of the distribution update window + * @zh-CN 分布更新窗口的弹窗 + * */ + const [updateModalOpen, setUpdateModalOpen] = useState(false); + const [showDetail, setShowDetail] = useState(false); + /** + * @en-US International configuration + * @zh-CN 国际化配置 + * */ + const access = useAccess(); + const intl = useIntl(); + const actionRef = useRef(); + // TODO 动态设置每页数量 + const [currentPageSize, setCurrentPageSize] = useState(10) + const [currentRow, setCurrentRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + const [category_fk_id_open, set_category_fk_id_open] = useState(false); + const [category_fk_id, set_category_fk_id] = useState(); + const [category_fk_id_column_open, set_category_fk_id_column_open] = useState(false); + const [categoryFkIdIds, setCategoryFkIdIds] = useState([]); + const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({}); + const handle_category_fk_id = (id: any) => { + if (category_fk_id_open) { + set_category_fk_id(undefined); + set_category_fk_id_open(false); + } else { + postModelCategoryGetModelCategoryById({ id: id }).then((resp) => { + set_category_fk_id(resp.data.modelCategory); + set_category_fk_id_open(true); + }); + } + }; + const handle_category_fk_id_column_open = () => { + if (category_fk_id_column_open) { + set_category_fk_id_column_open(false); + } else { + postModelCategoryGetModelCategoryNames({ ids: categoryFkIdIds }).then((resp) => { + let a: any = {}; + resp.data.list.forEach((v: any) => { + if (v.id) { + a[v.id] = v.name; + } + }); + setCategoryFkIdMap(a); + }); + set_category_fk_id_column_open(true); + } + }; -const columns: ProColumns[] = [ + const handleUpdateModal = () => { + if (updateModalOpen) { + setUpdateModalOpen(false); + setCurrentRow(undefined); + } else { + setUpdateModalOpen(true); + } + }; + const handleCreateModal = () => { + if (createModalOpen) { + setCreateModalOpen(false); + setCurrentRow(undefined); + } else { + setCreateModalOpen(true); + } + }; + const handleColumnDrawer = () => { + if (showDetail) { + setShowDetail(false); + setCurrentRow(undefined); + } else { + setShowDetail(true); + } + }; + const handleDestroy = async (selectedRow: API.AlgorithmModel) => { + deleteAlgorithmModelDeleteAlgorithmModel({ id: selectedRow.id }) + .then(() => { + message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' })); + actionRef.current?.reload(); + }) + .catch(() => { + message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); + }); + }; + const columns: ProColumns[] = [ { - title: (), - dataIndex: "id", + title: , + dataIndex: 'id', sorter: true, render: (dom, entity) => { return ( @@ -123,228 +133,293 @@ const columns: ProColumns[] = [ ); }, + //TODO 默认使用renderFormItem update1101 + renderFormItem: () => { + return ( + <> + + + ); + }, }, { - title: (), - dataIndex: "name", - hideInSearch: true, + title: ( + + ), + dataIndex: 'name', + hideInSearch: true, }, - { - title: (), - dataIndex: "categoryFkId", - hideInSearch: false, - render: (text, record) => { - if (category_fk_id_column_open) { - return ( {handle_category_fk_id(record.categoryFkId)}}>{record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined}) - } else { - return ({handle_category_fk_id(record.categoryFkId)}}>{record.categoryFkId}) - } - }, - renderFormItem: () => { - return ( - // value 和 onchange 会通过 form 自动注入。 - { - const resp = await postModelCategoryGetModelCategoryFkSelect({keyword: keyWord?.keyWords || ''}) - return resp.data.list.map((v: any)=>{ - return { - label: v.name, - value: v.id - } - }) - }} - /> - ); + title: ( + + ), + dataIndex: 'categoryFkId', + hideInSearch: false, + render: (text, record) => { + if (category_fk_id_column_open) { + return ( + { + handle_category_fk_id(record.categoryFkId); + }} + > + {record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined} + + ); + } else { + return ( + { + handle_category_fk_id(record.categoryFkId); + }} + > + {record.categoryFkId} + + ); + } + }, + renderFormItem: () => { + return ( + // value 和 onchange 会通过 form 自动注入。 + { + const resp = await postModelCategoryGetModelCategoryFkSelect({ + keyword: keyWord?.keyWords || '', + }); + return resp.data.list.map((v: any) => { + return { + label: v.name, + value: v.id, + }; + }); + }} + /> + ); }, }, { - title: (), - dataIndex: "defaultVersionFkId", - hideInSearch: true, + title: ( + + ), + dataIndex: 'defaultVersionFkId', + hideInSearch: true, }, { - title: (), - dataIndex: "remark", - hideInSearch: true, + title: ( + + ), + dataIndex: 'remark', + hideInSearch: true, }, - { - title: (), - dataIndex: "createTime", - sorter: true, - hideInSearch: true, - valueType: 'dateTime', + title: ( + + ), + dataIndex: 'createTime', + sorter: true, + hideInSearch: true, + valueType: 'dateTime', }, - { - title: (), - dataIndex: "updateTime", - sorter: true, - hideInSearch: true, - valueType: 'dateTime', + title: ( + + ), + dataIndex: 'updateTime', + sorter: true, + hideInSearch: true, + valueType: 'dateTime', }, - - { - title: , - dataIndex: 'option', - valueType: 'option', - fixed:'right', - render: (_, record) => [ - - { - setUpdateModalOpen(true); - setCurrentRow(record); - }} - > - - - { - handleDestroy(record).then(()=>{}) - }}> - - - - ], - },]; -return ( - - - headerTitle={intl.formatMessage({ - id: 'pages.searchTable.title', - defaultMessage: '$$$', - })} - options={{ fullScreen: true, setting: true, density: true, reload: true }} - actionRef={actionRef} - rowKey="key" - search={{ - labelWidth: 120, - }} - onDataSourceChange={(data)=>{ - - let CategoryFkIdIds: any = data.map((v)=>{ - return v.categoryFkId - }) - setCategoryFkIdIds(CategoryFkIdIds) - - - }} - pagination={{ - showSizeChanger: true, - pageSize: 10, + { + title: , + dataIndex: 'option', + valueType: 'option', + fixed: 'right', + render: (_, record) => [ + + { + setUpdateModalOpen(true); + setCurrentRow(record); }} - columnsState={{ - persistenceKey: 'algorithm_model_list', - persistenceType: 'localStorage' + > + + + {/* update1101 */} + { + handleDestroy(record).then(() => {}); }} - toolBarRender={() => [ - - - + + , + ], + }, + ]; + return ( + + + headerTitle={intl.formatMessage({ + id: 'pages.searchTable.title', + defaultMessage: '$$$', + })} + options={{ fullScreen: true, setting: true, density: true, reload: true }} + actionRef={actionRef} + rowKey="key" + search={{ + labelWidth: 120 + }} + onDataSourceChange={(data) => { + let CategoryFkIdIds: any = data.map((v) => { + return v.categoryFkId; + }); + setCategoryFkIdIds(CategoryFkIdIds); + }} + pagination={{ + showSizeChanger: true, + pageSize: currentPageSize, + onChange: (page, pageSize) => setCurrentPageSize(pageSize) + }} + columnsState={{ + persistenceKey: 'algorithm_model_list', + persistenceType: 'localStorage', + }} + toolBarRender={() => [ + + - - - ]} - request={async (params = {}, sort) => { - const {current, ...rest} = params + + , + ]} + request={async (params = {}, sort) => { + const { current, ...rest } = params; const reqParams = { page: current, desc: false, - orderKey: "", + orderKey: '', ...rest, - } + }; if (sort && Object.keys(sort).length) { - reqParams.orderKey = Object.keys(sort)[0] - let sort_select = sort[reqParams.orderKey] + reqParams.orderKey = Object.keys(sort)[0]; + let sort_select = sort[reqParams.orderKey]; reqParams.desc = sort_select === 'descend'; } - let resp = await postAlgorithmModelGetAlgorithmModelList({...reqParams}) + let resp = await postAlgorithmModelGetAlgorithmModelList({ ...reqParams }); return { - data: resp.data.list.map((v: API.AlgorithmModel)=>{ - return {...v, key: v.id} + data: resp.data.list.map((v: API.AlgorithmModel) => { + return { ...v, key: v.id }; }), success: resp.success, total: resp.data.total, current: resp.data.page, - pageSize: resp.data.pageSize + pageSize: resp.data.pageSize, }; - - }} - columns={columns} - rowSelection={{ - onChange: (_, selectedRows) => { - setSelectedRows(selectedRows); - }, - }} - /> - {selectedRowsState?.length > 0 && ( - - {' '} - {selectedRowsState.length}{' '} - - - } - > - - - )} - - + + )} + {/* 列表关联操作项组件 */} + + - - + - - - ); + + ); }; - export default AlgorithmModelList; +export default AlgorithmModelList; diff --git a/src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx b/src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx index 0caeff8..6b331df 100644 --- a/src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx +++ b/src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx @@ -19,10 +19,14 @@ const ColumnDrawer: React.FC = (props) => { onClose={() => { props.handleDrawer(); }} - closable={false} + closable={true} > {props.currentRow?.id && ( + style={{ + paddingLeft: 10, + paddingRight: 10 + }} column={2} title={props.currentRow?.id} request={async () => ({ diff --git a/src/pages/Resource/ModelVersionList/index.tsx b/src/pages/Resource/ModelVersionList/index.tsx index 4d58cbb..4555f72 100644 --- a/src/pages/Resource/ModelVersionList/index.tsx +++ b/src/pages/Resource/ModelVersionList/index.tsx @@ -1,130 +1,167 @@ -import {AlgorithmModelColumns} from '@/pages/Resource/AlgorithmModelList/components/Columns'; +import { ColumnDrawer as AlgorithmModelColumnDrawer } from '@/pages/Resource/AlgorithmModelList/components/ColumnDrawer'; +import { AlgorithmModelColumns } from '@/pages/Resource/AlgorithmModelList/components/Columns'; import { - postAlgorithmModelGetAlgorithmModelById, - postAlgorithmModelGetAlgorithmModelFkSelect, - postAlgorithmModelGetAlgorithmModelNames, - putAlgorithmModelUpdateAlgorithmModel + postAlgorithmModelGetAlgorithmModelById, + postAlgorithmModelGetAlgorithmModelFkSelect, + postAlgorithmModelGetAlgorithmModelNames, + putAlgorithmModelUpdateAlgorithmModel, } from '@/services/resource/AlgorithmModel'; -import {ColumnDrawer as AlgorithmModelColumnDrawer} from "@/pages/Resource/AlgorithmModelList/components/ColumnDrawer"; -import {deleteModelVersionDeleteModelVersion, postModelVersionGetModelVersionList, deleteModelVersionDeleteModelVersionByIds} from '@/services/resource/ModelVersion'; -import { PlusOutlined } from '@ant-design/icons'; -import type { ActionType, ProColumns } from '@ant-design/pro-components'; import { - FooterToolbar, - PageContainer, - ProTable, - ProFormSelect, -} from '@ant-design/pro-components'; -import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max'; -import {Button, message, Popconfirm} from 'antd'; + deleteModelVersionDeleteModelVersion, + deleteModelVersionDeleteModelVersionByIds, + postModelVersionGetModelVersionList, +} from '@/services/resource/ModelVersion'; +import { DownOutlined, PlusOutlined } from '@ant-design/icons'; +import type { ActionType, ProColumns } from '@ant-design/pro-components'; +import { FooterToolbar, PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-components'; +import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max'; +import { Button, Popconfirm, message , Dropdown} from 'antd'; +// import { MenuProps } from 'rc-menu'; import React, { useRef, useState } from 'react'; +import { ColumnDrawer } from './components/ColumnDrawer'; +import MyCreateForm from './components/MyCreateForm'; import UpdateForm from './components/UpdateForm'; -import MyCreateForm from "./components/MyCreateForm"; -import {ColumnDrawer} from "./components/ColumnDrawer"; const ModelVersionList: React.FC = () => { - /** - * @en-US Pop-up window of new window - * @zh-CN 新建窗口的弹窗 - * */ - const [publishModalOpen, setPublishModalOpen] = useState(false); + /** + * @en-US Pop-up window of new window + * @zh-CN 新建窗口的弹窗 + * */ + const [publishModalOpen, setPublishModalOpen] = useState(false); - const [createModalOpen, setCreateModalOpen] = useState(false); - /** - * @en-US The pop-up window of the distribution update window - * @zh-CN 分布更新窗口的弹窗 - * */ - const [updateModalOpen, setUpdateModalOpen] = useState(false); - const [showDetail, setShowDetail] = useState(false); - /** - * @en-US International configuration - * @zh-CN 国际化配置 - * */ - const access = useAccess(); - const intl = useIntl(); - const actionRef = useRef(); - const [currentRow, setCurrentRow] = useState(); - const [selectedRowsState, setSelectedRows] = useState([]); - const [model_fk_id_open, set_model_fk_id_open] = useState(false) - const [model_fk_id, set_model_fk_id] = useState() - const [model_fk_id_column_open, set_model_fk_id_column_open] = useState(false) - const [modelFkIdIds, setModelFkIdIds] = useState([]) - const [modelFkIdMap, setModelFkIdMap] = useState<{ [key: number]: string }>({}) - const handle_model_fk_id = (id: any)=>{ - if (model_fk_id_open) { - set_model_fk_id(undefined); - set_model_fk_id_open(false) - }else { - postAlgorithmModelGetAlgorithmModelById({id: id}).then((resp)=>{ - set_model_fk_id(resp.data.algorithmModel) - set_model_fk_id_open(true) - }) - } - } - const handle_model_fk_id_column_open = ()=>{ - if (model_fk_id_column_open) { - set_model_fk_id_column_open(false) - }else { - postAlgorithmModelGetAlgorithmModelNames({ids: modelFkIdIds}).then((resp)=>{ - let a: any = {} - resp.data.list.forEach((v: any)=>{ - if (v.id) { - a[v.id] = v.name - } - }) - setModelFkIdMap(a) - }) - set_model_fk_id_column_open(true) - } - } + const [createModalOpen, setCreateModalOpen] = useState(false); + /** + * @en-US The pop-up window of the distribution update window + * @zh-CN 分布更新窗口的弹窗 + * */ + const [updateModalOpen, setUpdateModalOpen] = useState(false); + const [showDetail, setShowDetail] = useState(false); + /** + * @en-US International configuration + * @zh-CN 国际化配置 + * */ + const access = useAccess(); + const intl = useIntl(); + const actionRef = useRef(); + const [currentRow, setCurrentRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + const [model_fk_id_open, set_model_fk_id_open] = useState(false); + const [model_fk_id, set_model_fk_id] = useState(); + const [model_fk_id_column_open, set_model_fk_id_column_open] = useState(false); + const [modelFkIdIds, setModelFkIdIds] = useState([]); + const [modelFkIdMap, setModelFkIdMap] = useState<{ [key: number]: string }>({}); + const handle_model_fk_id = (id: any) => { + if (model_fk_id_open) { + set_model_fk_id(undefined); + set_model_fk_id_open(false); + } else { + postAlgorithmModelGetAlgorithmModelById({ id: id }).then((resp) => { + set_model_fk_id(resp.data.algorithmModel); + set_model_fk_id_open(true); + }); + } + }; + const handle_model_fk_id_column_open = () => { + if (model_fk_id_column_open) { + set_model_fk_id_column_open(false); + } else { + postAlgorithmModelGetAlgorithmModelNames({ ids: modelFkIdIds }).then((resp) => { + let a: any = {}; + resp.data.list.forEach((v: any) => { + if (v.id) { + a[v.id] = v.name; + } + }); + setModelFkIdMap(a); + }); + set_model_fk_id_column_open(true); + } + }; - const handleUpdateModal = ()=>{ - if (updateModalOpen) { - setUpdateModalOpen(false) - setCurrentRow(undefined) - } else { - setUpdateModalOpen(true) - } - } - const handlePublishModal = ()=>{ - if (publishModalOpen) { - setPublishModalOpen(false) - setCurrentRow(undefined) - } else { - setPublishModalOpen(true) - } + const handleUpdateModal = () => { + if (updateModalOpen) { + setUpdateModalOpen(false); + setCurrentRow(undefined); + } else { + setUpdateModalOpen(true); } - const handleCreateModal = ()=>{ - if (createModalOpen) { - setCreateModalOpen(false) - setCurrentRow(undefined) - } else { - setCreateModalOpen(true) - } - } - const handleColumnDrawer = ()=>{ - if (showDetail) { - setShowDetail(false) - setCurrentRow(undefined) + }; + const handlePublishModal = () => { + if (publishModalOpen) { + setPublishModalOpen(false); + setCurrentRow(undefined); + } else { + setPublishModalOpen(true); + } + }; + const handleCreateModal = () => { + if (createModalOpen) { + setCreateModalOpen(false); + setCurrentRow(undefined); + } else { + setCreateModalOpen(true); + } + }; + const handleColumnDrawer = () => { + if (showDetail) { + setShowDetail(false); + setCurrentRow(undefined); + } else { + setShowDetail(true); + } + }; + const handleDestroy = async (selectedRow: API.ModelVersion) => { + deleteModelVersionDeleteModelVersion({ id: selectedRow.id }) + .then(() => { + message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' })); + actionRef.current?.reload(); + }) + .catch(() => { + message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); + }); + }; + + //TODO 表单的操作按钮集合 + type TableActionItemProps = { + renderActions: any[]; + }; + + const TableActionCard: React.FC = (props) => { + const { renderActions } = props; + const maxActionCount = 3; + if (renderActions.length <= maxActionCount) { + return renderActions.map((item) => { + return <>{item}; + }); + } + const prevActions: any[] = []; + const moreActions: { key: string; label: any; }[] = []; + renderActions.map((item, index) => { + if (index < maxActionCount - 1) { + prevActions.push(item); } else { - setShowDetail(true) - } + moreActions.push({ + key: index+"", + label: item + }); } - const handleDestroy = async (selectedRow: API.ModelVersion) => { - deleteModelVersionDeleteModelVersion({id: selectedRow.id}).then(()=>{ - message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) - actionRef.current?.reload() - }).catch(()=>{ - message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'})) - }) - }; - -const columns: ProColumns[] = [ + // eslint-disable-next-line react/jsx-key + }); + return ( + <> + {prevActions.map((item) => { + return <>{item}; + })} + + 更多 + + + ); + }; + const columns: ProColumns[] = [ { - title: (), - dataIndex: "id", + title: , + dataIndex: 'id', sorter: true, render: (dom, entity) => { return ( @@ -141,128 +178,148 @@ const columns: ProColumns[] = [ }, { - title: (), - dataIndex: "modelFkId", - hideInSearch: false, - render: (text, record) => { - if (model_fk_id_column_open) { - return ( {handle_model_fk_id(record.modelFkId)}}>{record?.modelFkId ? modelFkIdMap[record.modelFkId] : undefined}) - } else { - return ({handle_model_fk_id(record.modelFkId)}}>{record.modelFkId}) - } - }, - renderFormItem: () => { - return ( - // value 和 onchange 会通过 form 自动注入。 - { - const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({keyword: keyWord?.keyWords || ''}) - return resp.data.list.map((v: any)=>{ - return { - label: v.name, - value: v.id - } - }) - }} - /> - ); + title: ( + + ), + dataIndex: 'modelFkId', + hideInSearch: false, + render: (text, record) => { + if (model_fk_id_column_open) { + return ( + { + handle_model_fk_id(record.modelFkId); + }} + > + {record?.modelFkId ? modelFkIdMap[record.modelFkId] : undefined} + + ); + } else { + return ( + { + handle_model_fk_id(record.modelFkId); + }} + > + {record.modelFkId} + + ); + } + }, + renderFormItem: () => { + return ( + // value 和 onchange 会通过 form 自动注入。 + { + const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({ + keyword: keyWord?.keyWords || '', + }); + return resp.data.list.map((v: any) => { + return { + label: v.name, + value: v.id, + }; + }); + }} + /> + ); }, }, + { + title: ( + + ), + dataIndex: 'version', + hideInSearch: true, + }, - { - title: (), - dataIndex: "version", - hideInSearch: true, - }, - - - { - title: (), - dataIndex: "path", - hideInSearch: true, - }, - - - { - title: (), - dataIndex: "startCode", - hideInSearch: true, - }, - - - { - title: (), - dataIndex: "isEnable", - filters: true, onFilter: true, - hideInSearch: true, - valueType: 'switch', - }, - + { + title: , + dataIndex: 'path', + hideInSearch: true, + }, - { - title: (), - dataIndex: "remark", - hideInSearch: true, - }, - { - title: (), - dataIndex: "status", - hideInSearch: true, - valueEnum: { - 1: { text: '已创建', status: 'Default' }, - 2: { text: '已发布', status: 'Processing' }, - 3: { text: '已上架', status: 'Success' }, - 4: { text: '已下架', status: 'Default' }, - 5: { text: '已关闭', status: 'Error' }, - }, - }, + { + title: ( + + ), + dataIndex: 'startCode', + hideInSearch: true, + }, - { - title: (), - dataIndex: "createTime", - sorter: true, - hideInSearch: true, - valueType: 'dateTime', - }, + { + title: ( + + ), + dataIndex: 'isEnable', + filters: true, + onFilter: true, + hideInSearch: true, + valueType: 'switch', + }, + { + title: ( + + ), + dataIndex: 'remark', + hideInSearch: true, + }, + { + title: ( + + ), + dataIndex: 'status', + hideInSearch: true, + valueEnum: { + 1: { text: '已创建', status: 'Default' }, + 2: { text: '已发布', status: 'Processing' }, + 3: { text: '已上架', status: 'Success' }, + 4: { text: '已下架', status: 'Default' }, + 5: { text: '已关闭', status: 'Error' }, + }, + }, - { - title: (), - dataIndex: "updateTime", - sorter: true, - hideInSearch: true, - valueType: 'dateTime', - }, + { + title: ( + + ), + dataIndex: 'createTime', + sorter: true, + hideInSearch: true, + valueType: 'dateTime', + }, + { + title: ( + + ), + dataIndex: 'updateTime', + sorter: true, + hideInSearch: true, + valueType: 'dateTime', + }, - { - title: , - dataIndex: 'option', - valueType: 'option', - fixed:'right', - render: (_, record) => [ - + { + title: , + dataIndex: 'option', + valueType: 'option', + fixed: 'right', + render: (_, record) => [ + + { @@ -271,18 +328,83 @@ const columns: ProColumns[] = [ }} > - + , { - handleDestroy(record).then(()=>{}) - }}> - - - { + handleDestroy(record).then(() => {}); + }} + > + + , + // eslint-disable-next-line react/jsx-key + {}} + onCancel={() => {}} + okText="Yes" + cancelText="No" + > + { + setPublishModalOpen(true); + setCurrentRow(record); + }} + > + + + , + // eslint-disable-next-line react/jsx-key + { + putAlgorithmModelUpdateAlgorithmModel({ + id: record.modelFkId, + defaultVersionFkId: record.id, + }) + .then(() => { + message.success( + intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }), + ); + }) + .catch(() => { + message.error( + intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }), + ); + }); + }} + onCancel={() => {}} + okText="Yes" + cancelText="No" + > + {}}> + + + , + ]} + > + + {/* { + setUpdateModalOpen(true); + setCurrentRow(record); + }} + > + + + { + handleDestroy(record).then(() => {}); + }} + > + + */} + {/* {}} @@ -326,121 +448,122 @@ const columns: ProColumns[] = [ defaultMessage="$$$" /> - - - ], - },]; -return ( - - - headerTitle={intl.formatMessage({ - id: 'pages.searchTable.title', - defaultMessage: '$$$', - })} - options={{ fullScreen: true, setting: true, density: true, reload: true }} - actionRef={actionRef} - rowKey="key" - search={{ - labelWidth: 120, - }} - onDataSourceChange={(data)=>{ - - let ModelFkIdIds: any = data.map((v)=>{ - return v.modelFkId - }) - setModelFkIdIds(ModelFkIdIds) - - - }} - pagination={{ - showSizeChanger: true, - pageSize: 10, - }} - columnsState={{ - persistenceKey: 'model_version_list', - persistenceType: 'localStorage' - }} - toolBarRender={() => [ - - - - - - ]} - request={async (params = {}, sort) => { - const {current, ...rest} = params + + , + ]} + request={async (params = {}, sort) => { + const { current, ...rest } = params; const reqParams = { page: current, desc: false, - orderKey: "", + orderKey: '', ...rest, - } + }; if (sort && Object.keys(sort).length) { - reqParams.orderKey = Object.keys(sort)[0] - let sort_select = sort[reqParams.orderKey] + reqParams.orderKey = Object.keys(sort)[0]; + let sort_select = sort[reqParams.orderKey]; reqParams.desc = sort_select === 'descend'; } - let resp = await postModelVersionGetModelVersionList({...reqParams}) + let resp = await postModelVersionGetModelVersionList({ ...reqParams }); return { - data: resp.data.list.map((v: API.ModelVersion)=>{ - return {...v, key: v.id} + data: resp.data.list.map((v: API.ModelVersion) => { + return { ...v, key: v.id }; }), success: resp.success, total: resp.data.total, current: resp.data.page, - pageSize: resp.data.pageSize + pageSize: resp.data.pageSize, }; - - }} - columns={columns} - rowSelection={{ - onChange: (_, selectedRows) => { - setSelectedRows(selectedRows); - }, - }} - /> - {selectedRowsState?.length > 0 && ( - - {' '} - {selectedRowsState.length}{' '} - - - } - > - - - )} - - - {/**/} + + )} + + + {/**/} - - + - - - ); + + ); }; - export default ModelVersionList; +export default ModelVersionList;