feat: 联系人模块/联系人列表

develop
JINGYJ 1 year ago
parent 48bdae4570
commit 694c5bdd69

@ -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',

@ -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)),
};

@ -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': '更新项目',
};

@ -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': '联系人列表'
};

@ -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…
Cancel
Save