From 694c5bdd6943c281b640bfab74c582afcb512ddf Mon Sep 17 00:00:00 2001 From: JINGYJ <1458671527@qq.com> Date: Fri, 15 Dec 2023 17:57:31 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=81=94=E7=B3=BB=E4=BA=BA=E6=A8=A1?= =?UTF-8?q?=E5=9D=97/=E8=81=94=E7=B3=BB=E4=BA=BA=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/routes.ts | 11 + src/locales/zh-CN.ts | 2 + src/locales/zh-CN/contact.ts | 16 + src/locales/zh-CN/menu.ts | 3 +- .../ContactList/components/ColumnDrawer.tsx | 41 ++ .../ContactList/components/Columns.tsx | 47 ++ .../ContactList/components/CreateForm.tsx | 143 +++++ .../ContactList/components/MyCreateForm.tsx | 537 ++++++++++++++++++ .../ContactList/components/UpdateForm.tsx | 225 ++++++++ src/pages/Contact/ContactList/index.tsx | 316 +++++++++++ 10 files changed, 1340 insertions(+), 1 deletion(-) create mode 100644 src/locales/zh-CN/contact.ts create mode 100644 src/pages/Contact/ContactList/components/ColumnDrawer.tsx create mode 100644 src/pages/Contact/ContactList/components/Columns.tsx create mode 100644 src/pages/Contact/ContactList/components/CreateForm.tsx create mode 100644 src/pages/Contact/ContactList/components/MyCreateForm.tsx create mode 100644 src/pages/Contact/ContactList/components/UpdateForm.tsx create mode 100644 src/pages/Contact/ContactList/index.tsx diff --git a/config/routes.ts b/config/routes.ts index 9b973f0..5852a18 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -211,6 +211,17 @@ export default [ 'access': 'canReadMenu' }] }, + { + name: 'Contact', + path: '/Contact', + routes: [{ + 'name': 'Contact-contact-list', + 'path': '/Contact/contact-list', + 'component': 'Contact/ContactList', + 'access': 'canReadMenu' + }], + + }, { name: 'task', path: '/task', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 018d018..558f199 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -6,6 +6,7 @@ * @FilePath: \general-ai-platform-web\src\locales\zh-CN.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ +import * as contactZh from '@/locales/zh-CN/contact'; import * as DCSDevice from '@/locales/zh-CN/DCSDevice'; import * as analysisZh from '@/locales/zh-CN/analysis'; import * as deviceZh from '@/locales/zh-CN/device'; @@ -65,4 +66,5 @@ export default { ...Object.assign({}, ...Object.values(resourceZh)), ...Object.assign({}, ...Object.values(projectZh)), ...Object.assign({}, ...Object.values(DCSDevice)), + ...Object.assign({}, ...Object.values(contactZh)), }; diff --git a/src/locales/zh-CN/contact.ts b/src/locales/zh-CN/contact.ts new file mode 100644 index 0000000..6496572 --- /dev/null +++ b/src/locales/zh-CN/contact.ts @@ -0,0 +1,16 @@ +export const contact_list: { [key: string]: string } = { + 'contact.contact.table.list.id': 'ID', + 'contact.contact.table.list.name': '姓名', + 'contact.contact.table.list.phone': '手机号码', + 'contact.contact.table.list.mail': '邮箱', + 'contact.contact.table.list.WeChatID': '微信号', + 'contact.contact.table.list.isEnable': '是否启用', + 'contact.contact.table.list.remark': '备注', + 'contact.contact.table.list.createTime': '创建时间', + 'contact.contact.table.list.updateTime': '更新时间', + 'contact.contact.table.rule.required.name': '项目名称为必填项', + 'contact.contact.table.rule.required.code': '项目代码为必填项', + 'contact.contact.table.rule.required.info': '项目简介为必填项', + 'contact.contact.table.list.add': '新建项目', + 'contact.contact.table.list.update': '更新项目', +}; \ No newline at end of file diff --git a/src/locales/zh-CN/menu.ts b/src/locales/zh-CN/menu.ts index 569de68..c2ea48c 100644 --- a/src/locales/zh-CN/menu.ts +++ b/src/locales/zh-CN/menu.ts @@ -74,5 +74,6 @@ export default { 'menu.DCSDevice.DCSDevice-device-status': '设备状态', 'menu.DCSDevice.DCSDevice-device-list': '设备列表', 'menu.DCSDevice.DCSDevice-device-category-list': '设备类别', - 'menu.DCSDevice.DCSDevice-device-group-list': '设备组' + 'menu.DCSDevice.DCSDevice-device-group-list': '设备组', + 'menu.Contact.Contact-contact-list': '联系人列表' }; diff --git a/src/pages/Contact/ContactList/components/ColumnDrawer.tsx b/src/pages/Contact/ContactList/components/ColumnDrawer.tsx new file mode 100644 index 0000000..727e160 --- /dev/null +++ b/src/pages/Contact/ContactList/components/ColumnDrawer.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import {Drawer} from "antd"; +import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components"; + +export type ColumnDrawProps = { + handleDrawer: (id?: any)=>void; + isShowDetail: boolean; + columns: ProColumns[]; + currentRow: API.Project | undefined; +}; + + +const ColumnDrawer: React.FC = (props) => { + + return ( + { + props.handleDrawer(); + }} + closable={true} + > + {props.currentRow?.id && ( + + column={2} + title={props.currentRow?.id} + request={async () => ({ + data: props.currentRow || {}, + })} + params={{ + id: props.currentRow?.id, + }} + columns={props.columns as ProDescriptionsItemProps[]} + /> + )} + + ) +} +export {ColumnDrawer} + diff --git a/src/pages/Contact/ContactList/components/Columns.tsx b/src/pages/Contact/ContactList/components/Columns.tsx new file mode 100644 index 0000000..fc1d078 --- /dev/null +++ b/src/pages/Contact/ContactList/components/Columns.tsx @@ -0,0 +1,47 @@ +import { FormattedMessage} from '@umijs/max'; +export const ProjectColumns = [{ + title: (), + dataIndex: "id", + },{ + title: (), + dataIndex: "name", + },{ + title: (), + dataIndex: "code", + },{ + title: (), + dataIndex: "info", + },{ + title: (), + dataIndex: "infer_config", + },{ + title: (), + dataIndex: "is_enable", + },{ + title: (), + dataIndex: "remark", + },{ + title: (), + dataIndex: "create_time", + },{ + title: (), + dataIndex: "update_time", + },] diff --git a/src/pages/Contact/ContactList/components/CreateForm.tsx b/src/pages/Contact/ContactList/components/CreateForm.tsx new file mode 100644 index 0000000..abf8d84 --- /dev/null +++ b/src/pages/Contact/ContactList/components/CreateForm.tsx @@ -0,0 +1,143 @@ +import { postDeviceCategoryCreateDeviceCategory } from '@/services/device/DeviceCategory'; +import { ModalForm, ProForm, ProFormText } from '@ant-design/pro-components'; +import { FormattedMessage, useIntl } from '@umijs/max'; +import { Form, Switch, message } from 'antd'; +import React, { useState } from 'react'; +import { + proFormSmallItemStyleProps, + proFormSmallModelWidth, +} from '../../../../../config/defaultForm'; +export type FormValueType = { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; + +export type CreateFormProps = { + createModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; +const CreateForm: React.FC = (props) => { + const intl = useIntl(); + const [isAuto, setIsAuto] = useState(true); + const [form] = Form.useForm(); + + return ( + + width={proFormSmallModelWidth} + title={intl.formatMessage({ + id: 'device.device_category.table.list.add', + defaultMessage: '$$$', + })} + open={props.createModalOpen} + form={form} + autoFocusFirstInput + modalProps={{ + destroyOnClose: true, + onCancel: () => props.handleModal(), + }} + submitTimeout={2000} + onFinish={async (values) => { + postDeviceCategoryCreateDeviceCategory(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: 'device.device_category.table.list.name', + defaultMessage: '$$$', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_category.table.list.code', + defaultMessage: '$$$', + })}`} + required={!isAuto} + initialValue="" + disabled={isAuto} + rules={ + isAuto + ? [] + : [ + { + required: true, + message: ( + + ), + }, + ] + } + addonAfter={ + } + unCheckedChildren={} + onChange={setIsAuto} + /> + } + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_category.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + /> + + + ); +}; +export default CreateForm; diff --git a/src/pages/Contact/ContactList/components/MyCreateForm.tsx b/src/pages/Contact/ContactList/components/MyCreateForm.tsx new file mode 100644 index 0000000..9b55734 --- /dev/null +++ b/src/pages/Contact/ContactList/components/MyCreateForm.tsx @@ -0,0 +1,537 @@ +import { postDeviceGroupGetDeviceGroupTree } from '@/services/device/DeviceGroup'; +import { postProjectCreateProject } from '@/services/project/Project'; +import { postAlgorithmModelGetAlgorithmModelFkSelect } from '@/services/resource/AlgorithmModel'; +import { beforeUploadFile } from '@/utils/common'; +import { CloseOutlined, SnippetsOutlined } from '@ant-design/icons'; +import type { ProFormInstance } from '@ant-design/pro-components'; +import { + ProCard, + ProForm, + ProFormList, + ProFormSwitch, + ProFormText, + ProFormUploadDragger, + StepsForm, +} from '@ant-design/pro-components'; +import { FormattedMessage, useIntl } from '@umijs/max'; +import { Modal, Switch, Transfer, Tree, UploadFile, message } from 'antd'; +import type { TransferDirection } from 'antd/es/transfer'; +import { DataNode } from 'antd/es/tree'; +import React, { useEffect, useRef, useState } from 'react'; +// @ts-ignore +import { FormListActionType } from '@ant-design/pro-form/lib'; +import yaml from 'js-yaml'; +// @ts-ignore +import cookie from 'react-cookies'; +import { proFormItemStyleProps, proFormListCreatorButtonProps, proFormModelWidth, proFormSmallModelWidth, proFormStepsFormProps } from '../../../../../config/defaultForm'; + +interface RecordType { + key: string; + title: string; + description: string; + chosen: boolean; +} + +interface ProjectConfig { + params: Array; +} + +export type FormValueType = { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; + +export type CreateFormProps = { + createModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; +const waitTime = (time: number = 100) => { + return new Promise((resolve) => { + setTimeout(() => { + resolve(true); + }, time); + }); +}; + +/**styles 配置 */ + +const MyCreateForm: React.FC = (props) => { + const [treeData, setTreeData] = React.useState([]); + const [modalData, setModalData] = useState([]); + const [targetKeys, setTargetKeys] = useState([]); + const [selectKeys, setSelectKeys] = useState([]); + const [filePath, setFilePath] = useState(''); + const [configData, setConfigData] = useState({ params: [] }); + const intl = useIntl(); + const [isAuto, setIsAuto] = useState(true); + const formRef = useRef(); + const formRef3 = useRef(); + const [current, setCurrent] = useState(0); + + const [dataFormList, setDataFormList] = useState([]); + const dataFormListRef = useRef(dataFormList); + const [fileList, setFileList] = useState[]>([]); + + const actionFormListRef = useRef< + FormListActionType<{ + name: string; + }> + >(); + const handleFileChange = ({ file }: { file: UploadFile }) => { + let curFile: any; + + switch (file.status) { + case 'uploading': + case 'done': + curFile = [file]; + break; + + case 'removed': + default: + curFile = []; + break; + } + + setFileList([...curFile]); + }; + + const getModelData = () => { + postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: '' }).then((res) => { + let result = (res.data?.list || []).map((v: any) => { + return { + key: v.id, + title: v.name, + chosen: false, + }; + }); + setModalData(result); + }); + // setMockData(tempMockData); + // setTargetKeys(tempTargetKeys); + }; + + const handleChange = (newTargetKeys: string[]) => { + setTargetKeys(newTargetKeys); + }; + useEffect(() => { + setTargetKeys([]); + if (props.createModalOpen) { + getModelData(); + postDeviceGroupGetDeviceGroupTree() + .then((resp: API.Response) => { + setTreeData(resp.data.tree); + }) + .catch(() => {}); + } else { + formRef.current?.resetFields(); + } + }, [props.createModalOpen]); + const handleSearch = (dir: TransferDirection, value: string) => { + postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: value }).then((res) => { + let result = (res.data?.list || []).map((v: any) => { + return { + key: v.id, + title: v.name, + chosen: false, + }; + }); + setModalData(result); + }); + }; + return ( +
+ + stepsProps={proFormStepsFormProps.stepsProps} + current={current} + onCurrentChange={setCurrent} + onFinish={async () => { + setFileList([]); + let formData = formRef.current?.getFieldsValue(); + if (formData?.name) { + formData.inferConfig = { models: targetKeys, params: configData?.params || [] }; + formData.groupIds = selectKeys; + formData.projectFilePath = filePath; + postProjectCreateProject(formData) + .then(() => { + message.success( + intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }), + ); + props.handleModal(); + props.reload(); + }) + .catch(() => { + message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); + return false; + }); + } + return true; + }} + formProps={{ + validateMessages: { + required: '此项为必填项', + }, + }} + stepsFormRender={(dom, submitter) => { + return ( + { + setCurrent(0); + setFileList([]); + formRef.current?.resetFields(); + formRef3.current?.resetFields(); + props.handleModal(); + }} + open={props.createModalOpen} + footer={submitter} + destroyOnClose + > + {dom} + + ); + }} + > + {/* 创建项目数据 */} + + name="base" + formRef={formRef} + title="创建项目数据" + stepProps={{ + description: '这里填入项目基本信息', + }} + onFinish={async () => { + // setFormData(formRef.current?.getFieldsValue()); + await waitTime(500); + return true; + }} + > + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'project.project.table.list.name', + defaultMessage: '$$$', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'project.project.table.list.code', + defaultMessage: '$$$', + })}`} + required={!isAuto} + initialValue="" + disabled={isAuto} + rules={ + isAuto + ? [] + : [ + { + required: true, + message: ( + + ), + }, + ] + } + addonAfter={ + } + unCheckedChildren={} + onChange={setIsAuto} + /> + } + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'project.project.table.list.info', + defaultMessage: '$$$', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'project.project.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + /> + + + } + initialValue={true} + /> + + + + {/* 关联算法模型 */} + + name="model" + title="关联算法模型" + stepProps={{ + description: '选择算法模型', + }} + onFinish={async () => { + return true; + }} + > + item.title} + /> + + {/* 上传业务代码 */} + + name="project_file" + title="上传业务代码" + style={{ width: proFormItemStyleProps.width }} + stepProps={{ + description: '上传业务代码格式为(.zip,.tar.gz)', + }} + onFinish={async (values: any) => { + if ('projectFilePath' in values && values['projectFilePath'].length > 0) { + let projectFilePath = values['projectFilePath'][0]?.response?.data?.path || ''; + setFilePath(projectFilePath); + } + return true; + }} + > + 上传文件} + name="projectFilePath" + action="/api/v1/file/uploadFile" + max={1} + fieldProps={{ + name: 'file', + beforeUpload: beforeUploadFile, + data: { path: 'project/files' }, + headers: { + 'X-CSRFToken': cookie.load('csrftoken'), + Authorization: `Bearer ${localStorage.getItem('access') || ''}`, + }, + }} + /> + + {/* 业务参数配置 */} + + name="config" + title="业务参数配置" + stepProps={{ + description: '业务参数配置', + }} + onFinish={async (values: any) => { + setConfigData(values); + return true; + }} + > + {/* */} + {/* TODO 图标需要替换 */} + + 配置文件上传} + value={fileList} + name="dragger" + fieldProps={{ + onChange: handleFileChange, + onRemove: () => { + let index_ids = actionFormListRef.current?.getList()?.map((v, i) => { + return i; + }); + actionFormListRef.current?.remove(index_ids || []); + }, + beforeUpload: (file, fileList) => { + if ( + !file.name.endsWith('.yaml') && + !file.name.endsWith('.yml') && + !file.name.endsWith('.json') + ) { + message.error('请上传yaml或json文件').then(() => {}); + return false; + } else { + let parsedData = {}; + file + .text() + .then((text) => { + if (file.name.endsWith('.yaml') || file.name.endsWith('.yml')) { + parsedData = yaml.load(text) as Record; + } + if (file.name.endsWith('.json')) { + parsedData = JSON.parse(text) as Record; + } + if (Object.keys(parsedData).length > 0) { + dataFormListRef.current = Object.entries(parsedData).map( + ([key, value]) => ({ + name: key, + default: value, + }), + ); + + dataFormListRef.current.forEach((v: any, i: number) => { + actionFormListRef.current?.add(v, i); + }); + } + return true; + }) + .catch(() => { + return false; + }); + } + }, + }} + /> + 模型参数} + creatorButtonProps={proFormListCreatorButtonProps} + > + {(f, index, action) => { + return ( + + + + + + + + + ); + }} + + + {/* 关联网点 */} + + name="group" + title="关联网点" + stepProps={{ + description: '选择网点', + }} + onFinish={async () => { + return true; + }} + style={{ width: proFormItemStyleProps.width }} + formRef={formRef3} + > +
{'选择网点'}
+ { + // form.setFieldsValue({menuIds: checkedKeys}) + setSelectKeys(checkedKeys); + // formRef3.current?.setFieldValue('groupIds', checkedKeys) + }} + treeData={treeData} + // loadData={({treeNode}) => { + // return treeData + // }} + /> + + +
+ ); +}; +export default MyCreateForm; diff --git a/src/pages/Contact/ContactList/components/UpdateForm.tsx b/src/pages/Contact/ContactList/components/UpdateForm.tsx new file mode 100644 index 0000000..741077c --- /dev/null +++ b/src/pages/Contact/ContactList/components/UpdateForm.tsx @@ -0,0 +1,225 @@ +import { putProjectUpdateProject } from '@/services/project/Project'; +import { + ModalForm, + ProForm, + ProFormCheckbox, + ProFormDateTimePicker, + ProFormSwitch, + ProFormText, +} from '@ant-design/pro-components'; +import { FormattedMessage, useIntl } from '@umijs/max'; +import { Form, message } from 'antd'; +import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm'; +import React from 'react'; +export type FormValueType = { + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; + +export type UpdateFormProps = { + updateModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; + + + +const UpdateForm: React.FC = (props) => { + const intl = useIntl(); + const [form] = Form.useForm(); + + return ( + + width={proFormModelWidth} + title={intl.formatMessage({ + id: 'project.project.table.list.update', + defaultMessage: '$$$', + })} + open={props.updateModalOpen} + form={form} + autoFocusFirstInput + modalProps={{ + destroyOnClose: true, + onCancel: () => props.handleModal(), + }} + submitTimeout={2000} + onFinish={async (values) => { + putProjectUpdateProject(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: 'project.project.table.list.name', + defaultMessage: '$$$', + })}`} + required={true} + initialValue={props.values.name} + disabled={false} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'project.project.table.list.code', + defaultMessage: '$$$', + })}`} + required={true} + initialValue={props.values.code} + disabled={false} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'project.project.table.list.info', + defaultMessage: '$$$', + })}`} + required={true} + initialValue={props.values.info} + disabled={false} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + {/* } + options={[{label: '启用此项目', value: true}]} + /> */} + {/*
+
+ {} +
+ + 启用此项目 +
*/} + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'project.project.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + initialValue={props.values.remark} + disabled={false} + /> + } + initialValue={props.values.isEnable} + disabled={false} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'project.project.table.list.createTime', + defaultMessage: '$$$', + })}`} + required={false} + initialValue={props.values.createTime} + disabled={true} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'project.project.table.list.updateTime', + defaultMessage: '$$$', + })}`} + required={false} + initialValue={props.values.updateTime} + disabled={true} + /> + + + ); +}; +export default UpdateForm; diff --git a/src/pages/Contact/ContactList/index.tsx b/src/pages/Contact/ContactList/index.tsx new file mode 100644 index 0000000..efb3d6f --- /dev/null +++ b/src/pages/Contact/ContactList/index.tsx @@ -0,0 +1,316 @@ +import IsBatchDelete from '@/components/BatchOperation/isBatchDelete'; +import IsEnableBox from '@/components/DictionaryBox/isEnable'; +import TableActionCard from '@/components/TableActionCard'; +import IsDelete from '@/components/TableActionCard/isDelete'; +import { + deleteProjectDeleteProject, + deleteProjectDeleteProjectByIds, + postProjectGetProjectList, +} from '@/services/project/Project'; +import { PlusOutlined } from '@ant-design/icons'; +import type { ActionType, ProColumns } from '@ant-design/pro-components'; +import { PageContainer, ProTable } from '@ant-design/pro-components'; +import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max'; +import { Button, message } from 'antd'; +import React, { useRef, useState } from 'react'; +import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable'; +import { ColumnDrawer } from './components/ColumnDrawer'; +// import MyCreateForm from './components/MyCreateForm'; +import CreateForm from './components/CreateForm'; +import UpdateForm from './components/UpdateForm'; +const ProjectList: 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 [currentPageSize, setCurrentPageSize] = useState(10); + const [currentRow, setCurrentRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + + 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.Project) => { + deleteProjectDeleteProject({ 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: 'name', + sorter: true, + // render: (dom, entity) => { + // return ( + // { + // setCurrentRow(entity); + // setShowDetail(true); + // }} + // > + // {dom} + // + // ); + // }, + key: 'fixedName', + fixed: 'left', + }, + { + title: , + dataIndex: 'code', + // hideInSearch: true, + }, + + { + title: , + dataIndex: 'info', + hideInSearch: true, + }, + { + title: , + dataIndex: 'info', + hideInSearch: true, + }, + + // { + // title: , + // dataIndex: 'inferConfig', + // hideInSearch: true, + // hideInTable: true, + // hideInDescriptions: true, + // }, + + // { + // title: , + // dataIndex: 'isEnable', + // filters: true, + // onFilter: true, + // hideInSearch: true, + // valueType: 'switch', + // render: (_text, item) => { + // return ( + // <> + // + // + // ); + // }, + // }, + // { + // title: , + // dataIndex: 'remark', + // hideInSearch: true, + // }, + + { + 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) => [ + { + setUpdateModalOpen(true); + setCurrentRow(record); + }} + > + + + ), + }, + { + key: 'destroy', + renderDom: ( + { + handleDestroy(record).then(() => {}); + }} + > + ), + }, + ]} + >, + ], + }, + ]; + return ( + + + headerTitle={intl.formatMessage({ + id: 'pages.searchTable.title', + defaultMessage: '$$$', + })} + scroll={{ y: proTableCommonOptions.commscrollY, x: proTableCommonOptions.commscrollX }} + options={{ fullScreen: true, setting: true, density: true, reload: true }} + actionRef={actionRef} + rowKey="key" + search={{ + labelWidth: proTableCommonOptions.searchLabelWidth, + }} + onDataSourceChange={() => {}} + pagination={{ + ...proTablePaginationOptions, + pageSize: currentPageSize, + onChange: (page, pageSize) => setCurrentPageSize(pageSize), + }} + columnsState={{ + persistenceKey: 'project_list', + persistenceType: 'localStorage', + }} + tableAlertOptionRender={() => { + return ( + <> + {selectedRowsState?.length > 0 && ( + { + // TODO 需要；联调删除接口 + deleteProjectDeleteProjectByIds({ + ids: selectedRowsState.map((v: API.Project) => { + return v.id as number; + }), + }).then(() => { + actionRef.current?.reloadAndRest?.(); + }); + }} + /> + )} + + ); + }} + toolBarRender={() => [ + + + , + ]} + request={async (params = {}, sort) => { + const { current, ...rest } = params; + const reqParams = { + page: current, + desc: false, + orderKey: '', + ...rest, + }; + if (sort && Object.keys(sort).length) { + reqParams.orderKey = Object.keys(sort)[0]; + let sort_select = sort[reqParams.orderKey]; + reqParams.desc = sort_select === 'descend'; + } + let resp = await postProjectGetProjectList({ ...reqParams }); + return { + data: resp.data.list.map((v: API.Project) => { + return { ...v, key: v.id }; + }), + success: resp.success, + total: resp.data.total, + current: resp.data.page, + pageSize: resp.data.pageSize, + }; + }} + columns={columns} + // rowSelection={{ + // onChange: (_, selectedRows) => { + // setSelectedRows(selectedRows); + // }, + // }} + /> + + + + + + ); +}; + +export default ProjectList;