Skip to content

D
dlink
Unverified Commit 5c3d7761 authored by aiwenmo's avatar aiwenmo Committed by GitHub
Browse files
Options

[Optimization-285][web] optimization document manager 

[Optimization-285][web] optimization document manager
parents 1b28572c 03c264ba
Hide whitespace changes
Inline Side-by-side
Showing with 527 additions and 396 deletions
dlink-web/src/pages/AlertGroup/index.tsx
View file @ 5c3d7761
import React, {useEffect, useRef, useState} from "react"; import React, {useEffect, useRef, useState} from "react";
import {DownOutlined,PlusOutlined} from '@ant-design/icons'; import {DownOutlined, PlusOutlined} from '@ant-design/icons';
import {ActionType, ProColumns} from "@ant-design/pro-table"; import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
import {Button, Drawer, Modal, Dropdown, Menu} from 'antd'; import {Button, Drawer, Dropdown, Menu, Modal} from 'antd';
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout'; import {FooterToolbar, PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions'; import ProDescriptions from '@ant-design/pro-descriptions';
import {AlertGroupTableListItem} from "@/pages/AlertGroup/data"; import {AlertGroupTableListItem} from "@/pages/AlertGroup/data";
import {handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud"; import {handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
...@@ -181,7 +180,7 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => { ...@@ -181,7 +180,7 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
<div> <div>
已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp; 已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
<span> <span>
被禁用的集群配置共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} 人 被禁用的报警组共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} 人
</span> </span>
</div> </div>
} }
......
dlink-web/src/pages/Document/components/CreateForm.tsx deleted 100644 → 0
View file @ 1b28572c
import React from 'react';
import { Modal } from 'antd';
type CreateFormProps = {
modalVisible: boolean;
onCancel: () => void;
};
const CreateForm: React.FC<CreateFormProps> = (props) => {
const { modalVisible, onCancel } = props;
return (
<Modal
destroyOnClose
title="添加文档内容"
visible={modalVisible}
onCancel={() => onCancel()}
footer={null}
>
{props.children}
</Modal>
);
};
export default CreateForm;
dlink-web/src/pages/Document/components/DocumentForm.tsx 0 → 100644
View file @ 5c3d7761
import React, {useState} from 'react';
import {Button, Form, Input, Modal, Select, Switch} from 'antd';
import {DocumentTableListItem} from "@/pages/Document/data";
import TextArea from "antd/es/input/TextArea";
import {getDocumentFormData,} from "@/pages/Document/function";
export type DocumentFormProps = {
onCancel: (flag?: boolean) => void;
onSubmit: (values: Partial<DocumentTableListItem>) => void;
modalVisible: boolean;
values: Partial<DocumentTableListItem>;
// instance: DocumentTableListItem[];
};
const FormItem = Form.Item;
const Option = Select.Option;
const formLayout = {
labelCol: {span: 7},
wrapperCol: {span: 13},
};
const DocumentForm: React.FC<DocumentFormProps> = (props) => {
const [form] = Form.useForm();
const [formVals, setFormVals] = useState<Partial<DocumentTableListItem>>({
id: props.values.id,
name: props.values.name,
category: props.values.category,
type: props.values.type,
subtype: props.values.subtype,
description: props.values.description,
fillValue: props.values.fillValue,
version: props.values.version,
likeNum: props.values.likeNum,
enabled: props.values.enabled?props.values.enabled:true,
});
const {
onSubmit: handleSubmit,
onCancel: handleModalVisible,
modalVisible,
} = props;
const submitForm = async () => {
const fieldsValue = await form.validateFields();
setFormVals({...formVals,...fieldsValue});
handleSubmit({...formVals,...fieldsValue});
};
const renderContent = (formVals) => {
return (
<>
<FormItem
name="name"
label="名称"
rules={[{required: true, message: '请输入名称！'}]}>
<Input placeholder="请输入"/>
</FormItem>
<FormItem
name="category"
label="文档类型"
rules={[{required: true, message: '请选择该文档所属类型！'}]}
>
<Select allowClear>
<Option value="Method">Method</Option>
<Option value="Function">Function</Option>
<Option value="Constructor">Constructor</Option>
<Option value="Field">Field</Option>
<Option value="Variable">Variable</Option>
<Option value="Class">Class</Option>
<Option value="Struct">Struct</Option>
<Option value="Interface">Interface</Option>
<Option value="Module">Module</Option>
<Option value="Property">Property</Option>
<Option value="Event">Event</Option>
<Option value="Operator">Operator</Option>
<Option value="Unit">Unit</Option>
<Option value="Value">Value</Option>
<Option value="Constant">Constant</Option>
<Option value="Enum">Enum</Option>
<Option value="EnumMember">EnumMember</Option>
<Option value="Keyword">Keyword</Option>
<Option value="Text">Text</Option>
<Option value="Color">Color</Option>
<Option value="File">File</Option>
<Option value="Reference">Reference</Option>
<Option value="Customcolor">Customcolor</Option>
<Option value="Folder">Folder</Option>
<Option value="TypeParameter">TypeParameter</Option>
<Option value="User">User</Option>
<Option value="Issue">Issue</Option>
<Option value="Snippet">Snippet</Option>
</Select>
</FormItem>
<FormItem
name="type"
label="类型"
rules={[{required: true, message: '请选择该文档所属函数类型！'}]}
>
<Select allowClear>
<Option value="优化参数">优化参数</Option>
<Option value="建表语句">建表语句</Option>
<Option value="CataLog">CataLog</Option>
<Option value="设置参数">设置参数</Option>
<Option value="内置函数">内置函数</Option>
<Option value="UDF">UDF</Option>
<Option value="Other">Other</Option>
</Select>
</FormItem>
<FormItem
name="subtype"
label="子类型"
rules={[{required: true, message: '请选择该文档所属函数子类型！'}]}
>
<Select allowClear>
<Option value="比较函数">比较函数</Option>
<Option value="逻辑函数">逻辑函数</Option>
<Option value="算术函数">算术函数</Option>
<Option value="字符串函数">字符串函数</Option>
<Option value="时间函数">时间函数</Option>
<Option value="条件函数">条件函数</Option>
<Option value="类型转换函数">类型转换函数</Option>
<Option value="Collection 函数">Collection 函数</Option>
<Option value="Value Collection 函数">Value Collection 函数</Option>
<Option value="Value Access 函数">Value Access 函数</Option>
<Option value="分组函数">分组函数</Option>
<Option value="hash函数">hash函数</Option>
<Option value="聚合函数">聚合函数</Option>
<Option value="列函数">列函数</Option>
<Option value="表值聚合函数">表值聚合函数</Option>
<Option value="其他函数">其他函数</Option>
</Select>
</FormItem>
<FormItem
name="description"
label="描述"
>
<TextArea placeholder="请输入文档描述信息!" allowClear autoSize={{minRows: 3, maxRows: 10}}/>
</FormItem>
<FormItem
name="fillValue"
label="填充值"
rules={[{required: true, message: '请输入填充值！'}]}
>
<TextArea placeholder="请输入填充值,编辑器内使用名称触发提示 eg: 如果希望在函数LTRIM(parms)中输入参数 则语法为: LTRIM(${1:}) 此时的1代表第一个光标 如需多个 数字+1即可 tab键切换光标 ; 如不需要参数则直接输入期望填充值"
allowClear
autoSize={{minRows: 3, maxRows: 10}}/>
</FormItem>
<FormItem
name="version"
label="版本"
rules={[{required: true, message: '请选择该文档所属版本！'}]}
>
<Select allowClear >
<Option value="1.11">Flink-1.11</Option>
<Option value="1.12">Flink-1.12</Option>
<Option value="1.13">Flink-1.13</Option>
<Option value="1.14">Flink-1.14</Option>
<Option value="1.15">Flink-1.15</Option>
<Option value="ALL Version">ALL Version</Option>
</Select>
</FormItem>
<FormItem
name="enabled"
label="是否启用"
rules={[{required: true, message: '请输入是否启用！'}]}>
<Switch checkedChildren="启用" unCheckedChildren="禁用"
defaultChecked={formVals.enabled}/>
</FormItem>
</>
);
};
const renderFooter = () => {
return (
<>
<Button onClick={() => handleModalVisible(false)}>取消</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
</Button>
</>
);
};
return (
<Modal
width={1200}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id?"维护文档":"创建文档"}
visible={modalVisible}
footer={renderFooter()}
onCancel={() => handleModalVisible()}
>
<Form
{...formLayout}
form={form}
initialValues={getDocumentFormData(formVals)}
>
{renderContent(getDocumentFormData(formVals))}
</Form>
</Modal>
);
};
export default DocumentForm;
dlink-web/src/pages/Document/components/UpdateForm.tsx deleted 100644 → 0
View file @ 1b28572c
import React, {useEffect, useState} from 'react';
import { Form, Button, Input, Modal,Select } from 'antd';
import Switch from "antd/es/switch";
import TextArea from "antd/es/input/TextArea";
import {DocumentTableListItem} from "@/pages/Document/data";
export type UpdateFormProps = {
onCancel: (flag?: boolean, formVals?: Partial<DocumentTableListItem>) => void;
onSubmit: (values: Partial<DocumentTableListItem>) => void;
updateModalVisible: boolean;
values: Partial<DocumentTableListItem>;
};
const FormItem = Form.Item;
const Option = Select.Option;
const formLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 13 },
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const [formVals, setFormVals] = useState<Partial<DocumentTableListItem>>({
id: props.values.id,
name: props.values.name,
category: props.values.category,
type: props.values.type,
subtype: props.values.subtype,
description: props.values.description,
fillValue: props.values.fillValue,
version: props.values.version,
likeNum: props.values.likeNum,
enabled: props.values.enabled,
});
const [form] = Form.useForm();
const {
onSubmit: handleUpdate,
onCancel: handleUpdateModalVisible,
updateModalVisible,
values,
} = props;
const submitForm = async () => {
const fieldsValue = await form.validateFields();
setFormVals({ ...formVals, ...fieldsValue });
handleUpdate({ ...formVals, ...fieldsValue });
};
const renderContent = (formVals) => {
return (
<>
<FormItem
name="name"
label="名称"
rules={[{ required: true, message: '请输入名称！' }]} >
<Input placeholder="请输入" />
</FormItem>
<FormItem
name="category"
label="文档类型"
>
<Select defaultValue="function" allowClear>
<Option value="function">函数</Option>
</Select>
</FormItem>
<FormItem
name="type"
label="类型"
>
<Select defaultValue="内置函数" allowClear>
<Option value="内置函数">内置函数</Option>
<Option value="UDF">UDF</Option>
</Select>
</FormItem>
<FormItem
name="subtype"
label="子类型"
>
<Select defaultValue="比较函数" allowClear>
<Option value="比较函数">比较函数</Option>
<Option value="逻辑函数">逻辑函数</Option>
<Option value="算术函数">算术函数</Option>
<Option value="字符串函数">字符串函数</Option>
<Option value="时间函数">时间函数</Option>
<Option value="条件函数">条件函数</Option>
<Option value="类型转换函数">类型转换函数</Option>
<Option value="Collection 函数">Collection 函数</Option>
<Option value="Value Collection 函数">Value Collection 函数</Option>
<Option value="Value Access 函数">Value Access 函数</Option>
<Option value="分组函数">分组函数</Option>
<Option value="hash函数">hash函数</Option>
<Option value="聚合函数">聚合函数</Option>
<Option value="列函数">列函数</Option>
<Option value="表值聚合函数">表值聚合函数</Option>
<Option value="其他函数">其他函数</Option>
</Select>
</FormItem>
<FormItem
name="description"
label="描述"
>
<TextArea placeholder="" allowClear autoSize={{ minRows: 3, maxRows: 10 }}/>
</FormItem>
<FormItem
name="fillValue"
label="填充值"
>
<TextArea placeholder="" allowClear autoSize={{ minRows: 3, maxRows: 10 }}/>
</FormItem>
<FormItem
name="version"
label="版本"
>
<Input placeholder="请输入" />
</FormItem>
<FormItem
name="enabled"
label="是否启用"
rules={[{ required: true, message: '请输入是否启用！' }]} >
<Switch checkedChildren="启用" unCheckedChildren="禁用"
defaultChecked={formVals.enabled}/>
</FormItem>
</>
);
};
const renderFooter = () => {
return (
<>
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
</Button>
</>
);
};
return (
<Modal
width={640}
bodyStyle={{ padding: '32px 40px 48px' }}
destroyOnClose
title="编辑文档"
visible={updateModalVisible}
footer={renderFooter()}
onCancel={() => handleUpdateModalVisible()}
>
<Form
{...formLayout}
form={form}
initialValues={{
id: formVals.id,
name: formVals.name,
category: formVals.category,
type: formVals.type,
subtype: formVals.subtype,
description: formVals.description,
fillValue: formVals.fillValue,
version: formVals.version,
likeNum: formVals.likeNum,
enabled: formVals.enabled,
}}
>
{renderContent(formVals)}
</Form>
</Modal>
);
};
export default UpdateForm;
dlink-web/src/pages/Document/function.ts 0 → 100644
View file @ 5c3d7761
import {DocumentTableListItem} from "@/pages/Document/data";
export const getDocumentFormData = (values: DocumentTableListItem) => {
return values;
}
dlink-web/src/pages/Document/index.tsx
View file @ 5c3d7761
import {DownOutlined, HeartOutlined, PlusOutlined, UserOutlined} from '@ant-design/icons'; import {DownOutlined, PlusOutlined} from '@ant-design/icons';
import {Button, message, Input, Drawer, Modal} from 'antd'; import {Button, Drawer, Input, Modal} from 'antd';
import React, {useState, useRef} from 'react'; import React, {useRef, useState} from 'react';
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout'; import {FooterToolbar, PageContainer} from '@ant-design/pro-layout';
import type {ProColumns, ActionType} from '@ant-design/pro-table'; import type {ActionType, ProColumns} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions'; import ProDescriptions from '@ant-design/pro-descriptions';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
import type {DocumentTableListItem} from './data.d'; import type {DocumentTableListItem} from './data.d';
import styles from './index.less';
import Dropdown from "antd/es/dropdown/dropdown"; import Dropdown from "antd/es/dropdown/dropdown";
import Menu from "antd/es/menu"; import Menu from "antd/es/menu";
import { import {handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
handleAddOrUpdate, handleOption, handleRemove, queryData, import DocumentForm from "./components/DocumentForm";
updateEnabled
} from "@/components/Common/crud";
import {getFillAllByVersion} from "@/components/Studio/StudioEvent/DDL";
const url = '/api/document'; const url = '/api/document';
const DocumentTableList: React.FC<{}> = (props: any) => { const DocumentTableList: React.FC<{}> = (props: any) => {
const {dispatch} = props; const [modalVisible, handleModalVisible] = useState<boolean>(false);
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false); const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
const [formValues, setFormValues] = useState({}); const [formValues, setFormValues] = useState({});
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
...@@ -41,8 +32,8 @@ const DocumentTableList: React.FC<{}> = (props: any) => { ...@@ -41,8 +32,8 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
content: '确定删除该文档吗？', content: '确定删除该文档吗？',
okText: '确认', okText: '确认',
cancelText: '取消', cancelText: '取消',
onOk:async () => { onOk: async () => {
await handleRemove(url,[currentItem]); await handleRemove(url, [currentItem]);
actionRef.current?.reloadAndRest?.(); actionRef.current?.reloadAndRest?.();
} }
}); });
...@@ -100,50 +91,148 @@ const DocumentTableList: React.FC<{}> = (props: any) => { ...@@ -100,50 +91,148 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
hideInTable: false, hideInTable: false,
filters: [ filters: [
{ {
text: '函数', text: 'Method',
value: 'function', value: 'Method',
} }, {
text: 'Function',
value: 'Function',
}, {
text: 'Constructor',
value: 'Constructor',
}, {
text: 'Field',
value: 'Field',
}, {
text: 'Variable',
value: 'Variable',
}, {
text: 'Class',
value: 'Class',
}, {
text: 'Struct',
value: 'Struct',
}, {
text: 'Interface',
value: 'Interface',
}, {
text: 'Module',
value: 'Module',
}, {
text: 'Property',
value: 'Property',
},{
text: 'Event',
value: 'Event',
},{
text: 'Operator',
value: 'Operator',
},{
text: 'Unit',
value: 'Unit',
},{
text: 'Value',
value: 'Value',
},{
text: 'Constant',
value: 'Constant',
},{
text: 'Enum',
value: 'Enum',
},{
text: 'EnumMember',
value: 'EnumMember',
},{
text: 'Keyword',
value: 'Keyword',
},{
text: 'Text',
value: 'Text',
},{
text: 'Color',
value: 'Color',
},{
text: 'File',
value: 'File',
},{
text: 'Reference',
value: 'Reference',
},{
text: 'Customcolor',
value: 'Customcolor',
},{
text: 'Folder',
value: 'Folder',
},{
text: 'TypeParameter',
value: 'TypeParameter',
},{
text: 'User',
value: 'User',
},{
text: 'Issue',
value: 'Issue',
},{
text: 'Snippet',
value: 'Snippet',
},
], ],
filterMultiple: false, filterMultiple: false,
valueEnum: { valueEnum: {
'Method': { text: 'Method'}, 'Method': {text: 'Method'},
'Function': { text: 'Function'}, 'Function': {text: 'Function'},
'Constructor': { text: 'Constructor'}, 'Constructor': {text: 'Constructor'},
'Field': { text: 'Field'}, 'Field': {text: 'Field'},
'Variable': { text: 'Variable'}, 'Variable': {text: 'Variable'},
'Class': { text: 'Class'}, 'Class': {text: 'Class'},
'Struct': { text: 'Struct'}, 'Struct': {text: 'Struct'},
'Interface': { text: 'Interface'}, 'Interface': {text: 'Interface'},
'Module': { text: 'Module'}, 'Module': {text: 'Module'},
'Property': { text: 'Property'}, 'Property': {text: 'Property'},
'Event': { text: 'Event'}, 'Event': {text: 'Event'},
'Operator': { text: 'Operator'}, 'Operator': {text: 'Operator'},
'Unit': { text: 'Unit'}, 'Unit': {text: 'Unit'},
'Value': { text: 'Value'}, 'Value': {text: 'Value'},
'Constant': { text: 'Constant'}, 'Constant': {text: 'Constant'},
'Enum': { text: 'Enum'}, 'Enum': {text: 'Enum'},
'EnumMember': { text: 'EnumMember'}, 'EnumMember': {text: 'EnumMember'},
'Keyword': { text: 'Keyword'}, 'Keyword': {text: 'Keyword'},
'Text': { text: 'Text'}, 'Text': {text: 'Text'},
'Color': { text: 'Color'}, 'Color': {text: 'Color'},
'File': { text: 'File'}, 'File': {text: 'File'},
'Reference': { text: 'Reference'}, 'Reference': {text: 'Reference'},
'Customcolor': { text: 'Customcolor'}, 'Customcolor': {text: 'Customcolor'},
'Folder': { text: 'Folder'}, 'Folder': {text: 'Folder'},
'TypeParameter': { text: 'TypeParameter'}, 'TypeParameter': {text: 'TypeParameter'},
'User': { text: 'User'}, 'User': {text: 'User'},
'Issue': { text: 'Issue'}, 'Issue': {text: 'Issue'},
'Snippet': { text: 'Snippet'}, 'Snippet': {text: 'Snippet'},
}, },
}, },
{ {
title: '类型', title: '类型',
tip: '函数类型',
sorter: true, sorter: true,
dataIndex: 'type', dataIndex: 'type',
hideInForm: false, hideInForm: false,
hideInSearch: true, hideInSearch: false,
hideInTable: false, hideInTable: false,
/*filters: [ filters: [
{
text: '优化参数',
value: '优化参数',
},
{
text: '建表语句',
value: '建表语句',
},
{
text: 'CataLog',
value: 'CataLog',
},
{
text: '设置参数',
value: '设置参数',
},
{ {
text: '内置函数', text: '内置函数',
value: '内置函数', value: '内置函数',
...@@ -152,12 +241,21 @@ const DocumentTableList: React.FC<{}> = (props: any) => { ...@@ -152,12 +241,21 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
text: 'UDF', text: 'UDF',
value: 'UDF', value: 'UDF',
}, },
{
text: 'Other',
value: 'Other',
}
], ],
filterMultiple: false, filterMultiple: false,
valueEnum: { valueEnum: {
'内置函数': { text: '内置函数'}, '优化参数': {text: '内置函数'},
'UDF': { text: 'UDF'}, '建表语句': {text: '建表语句'},
},*/ 'CataLog': {text: 'CataLog'},
'设置参数': {text: '设置参数'},
'内置函数': {text: '内置函数'},
'UDF': {text: 'UDF'},
'Other': {text: 'Other'},
},
}, },
{ {
title: '子类型', title: '子类型',
...@@ -166,12 +264,23 @@ const DocumentTableList: React.FC<{}> = (props: any) => { ...@@ -166,12 +264,23 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
hideInForm: false, hideInForm: false,
hideInSearch: true, hideInSearch: true,
hideInTable: false, hideInTable: false,
/*filters: [ filters: [
{ {
text: 'Batch/Streaming',
value: 'Batch/Streaming',
},{
text: 'Batch',
value: 'Batch',
},{
text: 'Streaming',
value: 'Streaming',
},{
text: 'Other',
value: 'Other',
},{
text: '比较函数', text: '比较函数',
value: '比较函数', value: '比较函数',
}, },{
{
text: '逻辑函数', text: '逻辑函数',
value: '逻辑函数', value: '逻辑函数',
},{ },{
...@@ -183,21 +292,21 @@ const DocumentTableList: React.FC<{}> = (props: any) => { ...@@ -183,21 +292,21 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
},{ },{
text: '时间函数', text: '时间函数',
value: '时间函数', value: '时间函数',
},{
text: '类型转换函数功能',
value: '类型转换函数功能',
},{ },{
text: '条件函数', text: '条件函数',
value: '条件函数', value: '条件函数',
},{
text: '类型转换函数',
value: '类型转换函数',
},{ },{
text: 'Collection 函数', text: 'Collection 函数',
value: 'Collection 函数', value: 'Collection 函数',
},{ },{
text: 'Value Collection 函数', text: 'Value Construction函数',
value: 'Value Collection 函数', value: 'Value Construction函数',
},{ },{
text: 'Value Access 函数', text: 'Value Access函数',
value: 'Value Access 函数', value: 'Value Access函数',
},{ },{
text: '分组函数', text: '分组函数',
value: '分组函数', value: '分组函数',
...@@ -220,23 +329,27 @@ const DocumentTableList: React.FC<{}> = (props: any) => { ...@@ -220,23 +329,27 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
], ],
filterMultiple: false, filterMultiple: false,
valueEnum: { valueEnum: {
'比较函数': { text: '比较函数'}, 'Batch/Streaming' : {text: 'Batch/Streaming'},
'逻辑函数': { text: '逻辑函数'}, 'Batch' : {text: 'Batch'},
'算术函数': { text: '算术函数'}, 'Streaming' : {text: 'Streaming'},
'字符串函数': { text: '字符串函数'}, 'Other' : {text: 'Other'},
'时间函数': { text: '时间函数'}, '比较函数' : {text: '比较函数'},
'条件函数': { text: '条件函数'}, '逻辑函数' : {text: '逻辑函数'},
'类型转换函数': { text: '类型转换函数'}, '算术函数' : {text: '算术函数'},
'Collection 函数': { text: 'Collection 函数'}, '字符串函数' : {text: '字符串函数'},
'Value Collection 函数': { text: 'Value Collection 函数'}, '时间函数' : {text: '时间函数'},
'Value Access 函数': { text: 'Value Access 函数'}, '条件函数' : {text: '条件函数'},
'分组函数': { text: '分组函数'}, '类型转换函数功能' : {text: '类型转换函数功能'},
'hash函数': { text: 'hash函数'}, 'Collection 函数' : {text: 'Collection 函数'},
'聚合函数': { text: '聚合函数'}, 'Value Construction函数' : {text: 'Value Construction函数'},
'列函数': { text: '列函数'}, 'Value Access函数' : {text: 'Value Access函数'},
'表值聚合函数': { text: '表值聚合函数'}, '分组函数' : {text: '分组函数'},
'其他函数': { text: '其他函数'}, 'hash函数' : {text: 'hash函数'},
},*/ '聚合函数' : {text: '聚合函数'},
'列函数' : {text: '列函数'},
'表值聚合函数' : {text: '表值聚合函数'},
'其他函数' : {text: '其他函数'},
},
}, },
{ {
title: '描述', title: '描述',
...@@ -246,7 +359,7 @@ const DocumentTableList: React.FC<{}> = (props: any) => { ...@@ -246,7 +359,7 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
hideInForm: false, hideInForm: false,
hideInSearch: false, hideInSearch: false,
hideInTable: true, hideInTable: true,
},{ }, {
title: '填充值', title: '填充值',
sorter: true, sorter: true,
dataIndex: 'fillValue', dataIndex: 'fillValue',
...@@ -254,6 +367,7 @@ const DocumentTableList: React.FC<{}> = (props: any) => { ...@@ -254,6 +367,7 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
hideInForm: false, hideInForm: false,
hideInSearch: true, hideInSearch: true,
hideInTable: true, hideInTable: true,
hideInDescriptions: false,
}, },
{ {
title: '版本', title: '版本',
...@@ -281,8 +395,8 @@ const DocumentTableList: React.FC<{}> = (props: any) => { ...@@ -281,8 +395,8 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
], ],
filterMultiple: false, filterMultiple: false,
valueEnum: { valueEnum: {
true: { text: '已启用', status: 'Success' }, true: {text: '已启用', status: 'Success'},
false: { text: '已禁用', status: 'Error' }, false: {text: '已禁用', status: 'Error'},
}, },
}, },
{ {
...@@ -291,14 +405,14 @@ const DocumentTableList: React.FC<{}> = (props: any) => { ...@@ -291,14 +405,14 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
sorter: true, sorter: true,
valueType: 'dateTime', valueType: 'dateTime',
hideInForm: true, hideInForm: true,
hideInTable:true, hideInTable: true,
renderFormItem: (item, { defaultRender, ...rest }, form) => { renderFormItem: (item, {defaultRender, ...rest}, form) => {
const status = form.getFieldValue('status'); const status = form.getFieldValue('status');
if (`${status}` === '0') { if (`${status}` === '0') {
return false; return false;
} }
if (`${status}` === '3') { if (`${status}` === '3') {
return <Input {...rest} placeholder="请输入异常原因！" />; return <Input {...rest} placeholder="请输入异常原因！"/>;
} }
return defaultRender(item); return defaultRender(item);
}, },
...@@ -309,13 +423,13 @@ const DocumentTableList: React.FC<{}> = (props: any) => { ...@@ -309,13 +423,13 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
sorter: true, sorter: true,
valueType: 'dateTime', valueType: 'dateTime',
hideInForm: true, hideInForm: true,
renderFormItem: (item, { defaultRender, ...rest }, form) => { renderFormItem: (item, {defaultRender, ...rest}, form) => {
const status = form.getFieldValue('status'); const status = form.getFieldValue('status');
if (`${status}` === '0') { if (`${status}` === '0') {
return false; return false;
} }
if (`${status}` === '3') { if (`${status}` === '3') {
return <Input {...rest} placeholder="请输入异常原因！" />; return <Input {...rest} placeholder="请输入异常原因！"/>;
} }
return defaultRender(item); return defaultRender(item);
}, },
...@@ -345,142 +459,143 @@ const DocumentTableList: React.FC<{}> = (props: any) => { ...@@ -345,142 +459,143 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
actionRef={actionRef} actionRef={actionRef}
rowKey="id" rowKey="id"
search={{ search={{
labelWidth: 120, labelWidth: 120,
}} }}
toolBarRender={() => [ toolBarRender={() => [
<Button type="primary" onClick={() => handleModalVisible(true)}> <Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined/> 新建 <PlusOutlined/> 新建
</Button>, </Button>,
]} ]}
request={(params, sorter, filter) => queryData(url,{...params, sorter, filter})} request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
columns={columns} columns={columns}
rowSelection={{ rowSelection={{
onChange: (_, selectedRows) => setSelectedRows(selectedRows), onChange: (_, selectedRows) => setSelectedRows(selectedRows),
}} }}
/> />
{selectedRowsState?.length > 0 && ( {selectedRowsState?.length > 0 && (
<FooterToolbar <FooterToolbar
extra={ extra={
<div> <div>
已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp; 已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
<span> <span>
被禁用的文档共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} 人 被禁用的文档共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} 人
</span> </span>
</div> </div>
} }
>
<Button type="primary" danger
onClick={() => {
Modal.confirm({
title: '删除文档',
content: '确定删除选中的文档吗？',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await handleRemove(url, selectedRowsState);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
> >
<Button type="primary" danger 批量删除
onClick ={()=>{ </Button>
Modal.confirm({ <Button type="primary"
title: '删除文档', onClick={() => {
content: '确定删除选中的文档吗？', Modal.confirm({
okText: '确认', title: '启用文档',
cancelText: '取消', content: '确定启用选中的文档吗？',
onOk:async () => { okText: '确认',
await handleRemove(url,selectedRowsState); cancelText: '取消',
setSelectedRows([]); onOk: async () => {
actionRef.current?.reloadAndRest?.(); await updateEnabled(url, selectedRowsState, true);
} setSelectedRows([]);
}); actionRef.current?.reloadAndRest?.();
}} }
> });
批量删除 }}
</Button> >批量启用</Button>
<Button type="primary" <Button danger
onClick ={()=>{ onClick={() => {
Modal.confirm({ Modal.confirm({
title: '启用文档', title: '禁用文档',
content: '确定启用选中的文档吗？', content: '确定禁用选中的文档吗？',
okText: '确认', okText: '确认',
cancelText: '取消', cancelText: '取消',
onOk:async () => { onOk: async () => {
await updateEnabled(url,selectedRowsState, true); await updateEnabled(url, selectedRowsState, false);
setSelectedRows([]); setSelectedRows([]);
actionRef.current?.reloadAndRest?.(); actionRef.current?.reloadAndRest?.();
} }
}); });
}} }}
>批量启用</Button> >批量禁用</Button>
<Button danger </FooterToolbar>
onClick ={()=>{ )}
Modal.confirm({ <DocumentForm
title: '禁用文档', onSubmit={async (value) => {
content: '确定禁用选中的文档吗？', const success = await handleAddOrUpdate(url, value);
okText: '确认',
cancelText: '取消',
onOk:async () => {
await updateEnabled(url,selectedRowsState, false);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>批量禁用</Button>
</FooterToolbar>
)}
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable<DocumentTableListItem, DocumentTableListItem>
onSubmit={async (value) => {
const success = await handleAddOrUpdate(url,value);
if (success) { if (success) {
handleModalVisible(false); handleModalVisible(false);
setFormValues({});
if (actionRef.current) { if (actionRef.current) {
actionRef.current.reload(); actionRef.current.reload();
} }
getFillAllByVersion('',dispatch);
} }
}} }}
rowKey="id" onCancel={() => {
type="form" handleModalVisible(false);
columns={columns} }}
/> modalVisible={modalVisible}
</CreateForm> values={{}}
{formValues && Object.keys(formValues).length ? ( />
<UpdateForm {
formValues && Object.keys(formValues).length ? (
<DocumentForm
onSubmit={async (value) => { onSubmit={async (value) => {
const success = await handleAddOrUpdate(url,value); const success = await handleAddOrUpdate(url, value);
if (success) { if (success) {
handleUpdateModalVisible(false); handleUpdateModalVisible(false);
setFormValues({}); setFormValues({});
if (actionRef.current) { if (actionRef.current) {
actionRef.current.reload(); actionRef.current.reload();
} }
getFillAllByVersion('',dispatch);
} }
}} }}
onCancel={() => { onCancel={() => {
handleUpdateModalVisible(false); handleUpdateModalVisible(false);
setFormValues({}); setFormValues({});
}} }}
updateModalVisible={updateModalVisible} modalVisible={updateModalVisible}
values={formValues} values={formValues}
/> />
) : null} ) : null
}
<Drawer <Drawer
width={600} width={600}
visible={!!row} visible={!!row}
onClose={() => { onClose={() => {
setRow(undefined); setRow(undefined);
}} }}
closable={false} closable={false}
> >
{row?.name && ( {row?.name && (
<ProDescriptions<DocumentTableListItem> <ProDescriptions<DocumentTableListItem>
column={2} column={2}
title={row?.name} title={row?.name}
request={async () => ({ request={async () => ({
data: row || {}, data: row || {},
})} })}
params={{ params={{
id: row?.name, id: row?.name,
}} }}
columns={columns} columns={columns}
/> />
)} )}
</Drawer> </Drawer>
</PageContainer> </PageContainer>
); )
;
}; };
export default DocumentTableList; export default DocumentTableList;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment