feat: 联系人模块/联系人列表
JINGYJ
1 year ago
parent
48bdae4570
commit
694c5bdd69
@ -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': '更新项目',
|
||||||
|
};
|
||||||
@ -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<API.Project>[];
|
||||||
|
currentRow: API.Project | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
width={500}
|
||||||
|
open={props.isShowDetail}
|
||||||
|
onClose={() => {
|
||||||
|
props.handleDrawer();
|
||||||
|
}}
|
||||||
|
closable={true}
|
||||||
|
>
|
||||||
|
{props.currentRow?.id && (
|
||||||
|
<ProDescriptions<API.Project>
|
||||||
|
column={2}
|
||||||
|
title={props.currentRow?.id}
|
||||||
|
request={async () => ({
|
||||||
|
data: props.currentRow || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: props.currentRow?.id,
|
||||||
|
}}
|
||||||
|
columns={props.columns as ProDescriptionsItemProps<API.Project>[]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export {ColumnDrawer}
|
||||||
|
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import { FormattedMessage} from '@umijs/max';
|
||||||
|
export const ProjectColumns = [{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="project.project.table.list.id"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "id",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="project.project.table.list.name"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "name",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="project.project.table.list.code"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "code",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="project.project.table.list.info"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "info",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="project.project.table.list.inferConfig"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "infer_config",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="project.project.table.list.isEnable"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "is_enable",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="project.project.table.list.remark"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "remark",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="project.project.table.list.createTime"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "create_time",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="project.project.table.list.updateTime"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "update_time",
|
||||||
|
},]
|
||||||
@ -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<API.DeviceCategory>;
|
||||||
|
|
||||||
|
export type CreateFormProps = {
|
||||||
|
createModalOpen: boolean;
|
||||||
|
handleModal: () => void;
|
||||||
|
values: Partial<API.DeviceCategory>;
|
||||||
|
reload: any;
|
||||||
|
};
|
||||||
|
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const [isAuto, setIsAuto] = useState(true);
|
||||||
|
const [form] = Form.useForm<API.DeviceCategory>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalForm<API.DeviceCategory>
|
||||||
|
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;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormSmallItemStyleProps.width}
|
||||||
|
name="name"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_category.table.list.name" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_category.table.list.name',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={true}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_category.table.rule.required.name"
|
||||||
|
defaultMessage="name is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width="lg"
|
||||||
|
name="code"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_category.table.list.code" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
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: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_category.table.rule.required.code"
|
||||||
|
defaultMessage="code is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
addonAfter={
|
||||||
|
<Switch
|
||||||
|
checked={isAuto}
|
||||||
|
checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
|
||||||
|
unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
|
||||||
|
onChange={setIsAuto}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormSmallItemStyleProps.width}
|
||||||
|
name="remark"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_category.table.list.remark" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_category.table.list.remark',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
</ProForm.Group>
|
||||||
|
</ModalForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default CreateForm;
|
||||||
@ -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<object>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type FormValueType = {
|
||||||
|
target?: string;
|
||||||
|
template?: string;
|
||||||
|
type?: string;
|
||||||
|
time?: string;
|
||||||
|
frequency?: string;
|
||||||
|
} & Partial<API.Project>;
|
||||||
|
|
||||||
|
export type CreateFormProps = {
|
||||||
|
createModalOpen: boolean;
|
||||||
|
handleModal: () => void;
|
||||||
|
values: Partial<API.Project>;
|
||||||
|
reload: any;
|
||||||
|
};
|
||||||
|
const waitTime = (time: number = 100) => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve(true);
|
||||||
|
}, time);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**styles 配置 */
|
||||||
|
|
||||||
|
const MyCreateForm: React.FC<CreateFormProps> = (props) => {
|
||||||
|
const [treeData, setTreeData] = React.useState<DataNode[]>([]);
|
||||||
|
const [modalData, setModalData] = useState<RecordType[]>([]);
|
||||||
|
const [targetKeys, setTargetKeys] = useState<string[]>([]);
|
||||||
|
const [selectKeys, setSelectKeys] = useState([]);
|
||||||
|
const [filePath, setFilePath] = useState('');
|
||||||
|
const [configData, setConfigData] = useState<ProjectConfig>({ params: [] });
|
||||||
|
const intl = useIntl();
|
||||||
|
const [isAuto, setIsAuto] = useState(true);
|
||||||
|
const formRef = useRef<ProFormInstance>();
|
||||||
|
const formRef3 = useRef<ProFormInstance>();
|
||||||
|
const [current, setCurrent] = useState(0);
|
||||||
|
|
||||||
|
const [dataFormList, setDataFormList] = useState<any>([]);
|
||||||
|
const dataFormListRef = useRef(dataFormList);
|
||||||
|
const [fileList, setFileList] = useState<UploadFile<any>[]>([]);
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<div className="gn">
|
||||||
|
<StepsForm<{
|
||||||
|
name: string;
|
||||||
|
}>
|
||||||
|
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 (
|
||||||
|
<Modal
|
||||||
|
width={proFormModelWidth}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
id: 'project.project.table.list.add',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
onCancel={() => {
|
||||||
|
setCurrent(0);
|
||||||
|
setFileList([]);
|
||||||
|
formRef.current?.resetFields();
|
||||||
|
formRef3.current?.resetFields();
|
||||||
|
props.handleModal();
|
||||||
|
}}
|
||||||
|
open={props.createModalOpen}
|
||||||
|
footer={submitter}
|
||||||
|
destroyOnClose
|
||||||
|
>
|
||||||
|
{dom}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 创建项目数据 */}
|
||||||
|
<StepsForm.StepForm<{
|
||||||
|
name: string;
|
||||||
|
}>
|
||||||
|
name="base"
|
||||||
|
formRef={formRef}
|
||||||
|
title="创建项目数据"
|
||||||
|
stepProps={{
|
||||||
|
description: '这里填入项目基本信息',
|
||||||
|
}}
|
||||||
|
onFinish={async () => {
|
||||||
|
// setFormData(formRef.current?.getFieldsValue());
|
||||||
|
await waitTime(500);
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.width}
|
||||||
|
name="name"
|
||||||
|
label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'project.project.table.list.name',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={true}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="project.project.table.rule.required.name"
|
||||||
|
defaultMessage="name is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.width - 85}
|
||||||
|
name="code"
|
||||||
|
label={<FormattedMessage id="project.project.table.list.code" defaultMessage="$$$" />}
|
||||||
|
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: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="project.project.table.rule.required.code"
|
||||||
|
defaultMessage="code is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
addonAfter={
|
||||||
|
<Switch
|
||||||
|
style={{ marginLeft: 10 }}
|
||||||
|
checked={isAuto}
|
||||||
|
checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
|
||||||
|
unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
|
||||||
|
onChange={setIsAuto}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.width}
|
||||||
|
name="info"
|
||||||
|
label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'project.project.table.list.info',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={true}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="project.project.table.rule.required.info"
|
||||||
|
defaultMessage="info is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.width}
|
||||||
|
name="remark"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'project.project.table.list.remark',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormSwitch
|
||||||
|
width={proFormItemStyleProps.width}
|
||||||
|
name="isEnable"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
initialValue={true}
|
||||||
|
/>
|
||||||
|
</ProForm.Group>
|
||||||
|
</ProForm.Group>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
{/* 关联算法模型 */}
|
||||||
|
<StepsForm.StepForm<{
|
||||||
|
model: string;
|
||||||
|
}>
|
||||||
|
name="model"
|
||||||
|
title="关联算法模型"
|
||||||
|
stepProps={{
|
||||||
|
description: '选择算法模型',
|
||||||
|
}}
|
||||||
|
onFinish={async () => {
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Transfer
|
||||||
|
dataSource={modalData}
|
||||||
|
showSearch
|
||||||
|
titles={['未选模型', '已选模型']}
|
||||||
|
locale={{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }}
|
||||||
|
targetKeys={targetKeys}
|
||||||
|
onChange={handleChange}
|
||||||
|
onSearch={handleSearch}
|
||||||
|
style={{ marginBottom: '20px' }}
|
||||||
|
listStyle={{ width: 289, height: 300 }}
|
||||||
|
operationStyle={{ width: 50, alignItems: 'center' }}
|
||||||
|
render={(item) => item.title}
|
||||||
|
/>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
{/* 上传业务代码 */}
|
||||||
|
<StepsForm.StepForm<{
|
||||||
|
project_file: string;
|
||||||
|
}>
|
||||||
|
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;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProFormUploadDragger
|
||||||
|
label={<span className='h3 gn'>上传文件</span>}
|
||||||
|
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') || ''}`,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
{/* 业务参数配置 */}
|
||||||
|
<StepsForm.StepForm<{
|
||||||
|
config: string;
|
||||||
|
}>
|
||||||
|
name="config"
|
||||||
|
title="业务参数配置"
|
||||||
|
stepProps={{
|
||||||
|
description: '业务参数配置',
|
||||||
|
}}
|
||||||
|
onFinish={async (values: any) => {
|
||||||
|
setConfigData(values);
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* <Icon type="delete" /> */}
|
||||||
|
{/* TODO 图标需要替换 */}
|
||||||
|
|
||||||
|
<ProFormUploadDragger
|
||||||
|
max={1}
|
||||||
|
label={<span className='h3 gn'>配置文件上传</span>}
|
||||||
|
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<string, unknown>;
|
||||||
|
}
|
||||||
|
if (file.name.endsWith('.json')) {
|
||||||
|
parsedData = JSON.parse(text) as Record<string, unknown>;
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ProFormList
|
||||||
|
style={{ width: proFormItemStyleProps.width }}
|
||||||
|
actionRef={actionFormListRef}
|
||||||
|
copyIconProps={{
|
||||||
|
Icon: SnippetsOutlined,
|
||||||
|
}}
|
||||||
|
deleteIconProps={{
|
||||||
|
Icon: CloseOutlined,
|
||||||
|
}}
|
||||||
|
name="params"
|
||||||
|
label= {<span className='h3 gn'>模型参数</span>}
|
||||||
|
creatorButtonProps={proFormListCreatorButtonProps}
|
||||||
|
>
|
||||||
|
{(f, index, action) => {
|
||||||
|
return (
|
||||||
|
<ProCard style={{ padding: 0, margin: 0 }} bodyStyle={{ padding: 0, margin: 0 }}>
|
||||||
|
<ProCard
|
||||||
|
style={{ padding: 0, margin: 0 }}
|
||||||
|
bodyStyle={{ padding: 0, marginRight: 10 }}
|
||||||
|
>
|
||||||
|
<ProFormText key="name" name="name" label="键名" />
|
||||||
|
</ProCard>
|
||||||
|
<ProCard
|
||||||
|
style={{ padding: 0, margin: 0 }}
|
||||||
|
bodyStyle={{ padding: 0, marginRight: 10 }}
|
||||||
|
>
|
||||||
|
<ProFormText key="default" name="default" label="默认值" />
|
||||||
|
</ProCard>
|
||||||
|
</ProCard>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</ProFormList>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
{/* 关联网点 */}
|
||||||
|
<StepsForm.StepForm<{
|
||||||
|
group: string;
|
||||||
|
}>
|
||||||
|
name="group"
|
||||||
|
title="关联网点"
|
||||||
|
stepProps={{
|
||||||
|
description: '选择网点',
|
||||||
|
}}
|
||||||
|
onFinish={async () => {
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
style={{ width: proFormItemStyleProps.width }}
|
||||||
|
formRef={formRef3}
|
||||||
|
>
|
||||||
|
<div style={{ paddingBottom: 10, fontWeight: 700 }}>{'选择网点'}</div>
|
||||||
|
<Tree
|
||||||
|
checkable
|
||||||
|
defaultExpandAll={true}
|
||||||
|
defaultCheckedKeys={[]}
|
||||||
|
autoExpandParent={true}
|
||||||
|
onCheck={(checkedKeys: any) => {
|
||||||
|
// form.setFieldsValue({menuIds: checkedKeys})
|
||||||
|
setSelectKeys(checkedKeys);
|
||||||
|
// formRef3.current?.setFieldValue('groupIds', checkedKeys)
|
||||||
|
}}
|
||||||
|
treeData={treeData}
|
||||||
|
// loadData={({treeNode}) => {
|
||||||
|
// return treeData
|
||||||
|
// }}
|
||||||
|
/>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
</StepsForm>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default MyCreateForm;
|
||||||
@ -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<API.Project>;
|
||||||
|
|
||||||
|
export type UpdateFormProps = {
|
||||||
|
updateModalOpen: boolean;
|
||||||
|
handleModal: () => void;
|
||||||
|
values: Partial<API.Project>;
|
||||||
|
reload: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const [form] = Form.useForm<API.Project>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalForm<API.Project>
|
||||||
|
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;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="id"
|
||||||
|
label="id"
|
||||||
|
disabled={true}
|
||||||
|
initialValue={props.values.id}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="name"
|
||||||
|
label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$" />}
|
||||||
|
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: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="project.project.table.rule.required.name"
|
||||||
|
defaultMessage="name is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="code"
|
||||||
|
label={<FormattedMessage id="project.project.table.list.code" defaultMessage="$$$" />}
|
||||||
|
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: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="project.project.table.rule.required.code"
|
||||||
|
defaultMessage="code is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="info"
|
||||||
|
label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$" />}
|
||||||
|
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: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="project.project.table.rule.required.info"
|
||||||
|
defaultMessage="info is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* <ProFormCheckbox.Group
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="isEnable"
|
||||||
|
layout="vertical"
|
||||||
|
label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
|
||||||
|
options={[{label: '启用此项目', value: true}]}
|
||||||
|
/> */}
|
||||||
|
{/* <div style={{ width: formItemStyleProps.width, paddingBottom: 10}}>
|
||||||
|
<div>
|
||||||
|
{<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
|
||||||
|
</div>
|
||||||
|
<ProFormCheckbox noStyle name="isEnable"></ProFormCheckbox>
|
||||||
|
启用此项目
|
||||||
|
</div> */}
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="remark"
|
||||||
|
label={<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$" />}
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
<ProFormSwitch
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="isEnable"
|
||||||
|
label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
|
||||||
|
initialValue={props.values.isEnable}
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
<ProFormDateTimePicker
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="createTime"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="project.project.table.list.createTime" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
<ProFormDateTimePicker
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="updateTime"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="project.project.table.list.updateTime" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
</ProForm.Group>
|
||||||
|
</ModalForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default UpdateForm;
|
||||||
@ -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<boolean>(false);
|
||||||
|
/**
|
||||||
|
* @en-US The pop-up window of the distribution update window
|
||||||
|
* @zh-CN 分布更新窗口的弹窗
|
||||||
|
* */
|
||||||
|
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
||||||
|
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||||
|
/**
|
||||||
|
* @en-US International configuration
|
||||||
|
* @zh-CN 国际化配置
|
||||||
|
* */
|
||||||
|
const access = useAccess();
|
||||||
|
const intl = useIntl();
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
// 动态设置每页数量
|
||||||
|
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
|
||||||
|
const [currentRow, setCurrentRow] = useState<API.Project>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.Project[]>([]);
|
||||||
|
|
||||||
|
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<API.Project>[] = [
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="contact.contact.table.list.name" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'name',
|
||||||
|
sorter: true,
|
||||||
|
// render: (dom, entity) => {
|
||||||
|
// return (
|
||||||
|
// <a
|
||||||
|
// onClick={() => {
|
||||||
|
// setCurrentRow(entity);
|
||||||
|
// setShowDetail(true);
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// {dom}
|
||||||
|
// </a>
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
key: 'fixedName',
|
||||||
|
fixed: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="contact.contact.table.list.phone" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'code',
|
||||||
|
// hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="contact.contact.table.list.mail" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'info',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="contact.contact.table.list.WeChatID" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'info',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
// {
|
||||||
|
// title: <FormattedMessage id="contact.contact.table.list.inferConfig" defaultMessage="$$$" />,
|
||||||
|
// dataIndex: 'inferConfig',
|
||||||
|
// hideInSearch: true,
|
||||||
|
// hideInTable: true,
|
||||||
|
// hideInDescriptions: true,
|
||||||
|
// },
|
||||||
|
|
||||||
|
// {
|
||||||
|
// title: <FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />,
|
||||||
|
// dataIndex: 'isEnable',
|
||||||
|
// filters: true,
|
||||||
|
// onFilter: true,
|
||||||
|
// hideInSearch: true,
|
||||||
|
// valueType: 'switch',
|
||||||
|
// render: (_text, item) => {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <IsEnableBox isEnable={!!item.isEnable}></IsEnableBox>
|
||||||
|
// </>
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: <FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$" />,
|
||||||
|
// dataIndex: 'remark',
|
||||||
|
// hideInSearch: true,
|
||||||
|
// },
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="contact.contact.table.list.createTime" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
|
||||||
|
// {
|
||||||
|
// title: <FormattedMessage id="project.project.table.list.updateTime" defaultMessage="$$$" />,
|
||||||
|
// dataIndex: 'updateTime',
|
||||||
|
// sorter: true,
|
||||||
|
// hideInSearch: true,
|
||||||
|
// valueType: 'dateTime',
|
||||||
|
// },
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
fixed: 'right',
|
||||||
|
render: (_, record) => [
|
||||||
|
<TableActionCard
|
||||||
|
key="TableActionCardRef"
|
||||||
|
renderActions={[
|
||||||
|
{
|
||||||
|
key: 'update',
|
||||||
|
renderDom: (
|
||||||
|
<Button
|
||||||
|
key="update"
|
||||||
|
type="link"
|
||||||
|
size="small"
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateModalOpen(true);
|
||||||
|
setCurrentRow(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'destroy',
|
||||||
|
renderDom: (
|
||||||
|
<IsDelete
|
||||||
|
deleteApi={() => {
|
||||||
|
handleDestroy(record).then(() => {});
|
||||||
|
}}
|
||||||
|
></IsDelete>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
></TableActionCard>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<PageContainer>
|
||||||
|
<ProTable<API.Project>
|
||||||
|
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 && (
|
||||||
|
<IsBatchDelete
|
||||||
|
deleteApi={() => {
|
||||||
|
// TODO 需要；联调删除接口
|
||||||
|
deleteProjectDeleteProjectByIds({
|
||||||
|
ids: selectedRowsState.map((v: API.Project) => {
|
||||||
|
return v.id as number;
|
||||||
|
}),
|
||||||
|
}).then(() => {
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Access
|
||||||
|
accessible={access.canUpdate(history.location.pathname)}
|
||||||
|
key={`${history.location.pathname}-add`}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
key="primary"
|
||||||
|
onClick={() => {
|
||||||
|
setCreateModalOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
|
||||||
|
</Button>
|
||||||
|
</Access>,
|
||||||
|
]}
|
||||||
|
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);
|
||||||
|
// },
|
||||||
|
// }}
|
||||||
|
/>
|
||||||
|
<CreateForm
|
||||||
|
createModalOpen={createModalOpen}
|
||||||
|
values={currentRow || {}}
|
||||||
|
handleModal={handleCreateModal}
|
||||||
|
reload={actionRef.current?.reload}
|
||||||
|
/>
|
||||||
|
<UpdateForm
|
||||||
|
updateModalOpen={updateModalOpen}
|
||||||
|
values={currentRow || {}}
|
||||||
|
handleModal={handleUpdateModal}
|
||||||
|
reload={actionRef.current?.reload}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ColumnDrawer
|
||||||
|
handleDrawer={handleColumnDrawer}
|
||||||
|
isShowDetail={showDetail}
|
||||||
|
columns={columns}
|
||||||
|
currentRow={currentRow}
|
||||||
|
/>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProjectList;
|
||||||
Loading…
Reference in New Issue