Skip to content

D
dlink
Commit e66d6026 authored by zhu-mingye's avatar zhu-mingye
Browse files
Options

优化前端文档管理

parent 77823144
Hide whitespace changes
Inline Side-by-side
Showing with 527 additions and 371 deletions
dlink-web/src/pages/AlertGroup/index.tsx
View file @ e66d6026
import React, {useEffect, useRef, useState} from "react";
import {DownOutlined,PlusOutlined} from '@ant-design/icons';
import {ActionType, ProColumns} from "@ant-design/pro-table";
import {Button, Drawer, Modal, Dropdown, Menu} from 'antd';
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {DownOutlined, PlusOutlined} from '@ant-design/icons';
import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
import {Button, Drawer, Dropdown, Menu, Modal} from 'antd';
import {FooterToolbar, PageContainer} from '@ant-design/pro-layout';
import ProDescriptions from '@ant-design/pro-descriptions';
import {AlertGroupTableListItem} from "@/pages/AlertGroup/data";
import {handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
......@@ -181,7 +180,7 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
<div>
已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
<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>
</div>
}
......
dlink-web/src/pages/Document/components/DocumentForm.tsx 0 → 100644
View file @ e66d6026
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)中输入参数 则语法为: ${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 @ 77823144
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 @ e66d6026
import {DocumentTableListItem} from "@/pages/Document/data";
export const getDocumentFormData = (values: DocumentTableListItem) => {
return values;
}
dlink-web/src/pages/Document/index.tsx
View file @ e66d6026
import {DownOutlined, HeartOutlined, PlusOutlined, UserOutlined} from '@ant-design/icons';
import {Button, message, Input, Drawer, Modal} from 'antd';
import React, {useState, useRef} from 'react';
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
import type {ProColumns, ActionType} from '@ant-design/pro-table';
import {DownOutlined, PlusOutlined} from '@ant-design/icons';
import {Button, Drawer, Input, Modal} from 'antd';
import React, {useRef, useState} from 'react';
import {FooterToolbar, PageContainer} from '@ant-design/pro-layout';
import type {ActionType, ProColumns} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
import type {DocumentTableListItem} from './data.d';
import styles from './index.less';
import Dropdown from "antd/es/dropdown/dropdown";
import Menu from "antd/es/menu";
import {
handleAddOrUpdate, handleOption, handleRemove, queryData,
updateEnabled
} from "@/components/Common/crud";
import {getFillAllByVersion} from "@/components/Studio/StudioEvent/DDL";
import {handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
import DocumentForm from "./components/DocumentForm";
const url = '/api/document';
const DocumentTableList: React.FC<{}> = (props: any) => {
const {dispatch} = props;
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
const [modalVisible, handleModalVisible] = useState<boolean>(false);
const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
const [formValues, setFormValues] = useState({});
const actionRef = useRef<ActionType>();
......@@ -41,8 +32,8 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
content: '确定删除该文档吗？',
okText: '确认',
cancelText: '取消',
onOk:async () => {
await handleRemove(url,[currentItem]);
onOk: async () => {
await handleRemove(url, [currentItem]);
actionRef.current?.reloadAndRest?.();
}
});
......@@ -100,50 +91,148 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
hideInTable: false,
filters: [
{
text: '函数',
value: 'function',
}
text: 'Method',
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,
valueEnum: {
'Method': { text: 'Method'},
'Function': { text: 'Function'},
'Constructor': { text: 'Constructor'},
'Field': { text: 'Field'},
'Variable': { text: 'Variable'},
'Class': { text: 'Class'},
'Struct': { text: 'Struct'},
'Interface': { text: 'Interface'},
'Module': { text: 'Module'},
'Property': { text: 'Property'},
'Event': { text: 'Event'},
'Operator': { text: 'Operator'},
'Unit': { text: 'Unit'},
'Value': { text: 'Value'},
'Constant': { text: 'Constant'},
'Enum': { text: 'Enum'},
'EnumMember': { text: 'EnumMember'},
'Keyword': { text: 'Keyword'},
'Text': { text: 'Text'},
'Color': { text: 'Color'},
'File': { text: 'File'},
'Reference': { text: 'Reference'},
'Customcolor': { text: 'Customcolor'},
'Folder': { text: 'Folder'},
'TypeParameter': { text: 'TypeParameter'},
'User': { text: 'User'},
'Issue': { text: 'Issue'},
'Snippet': { text: 'Snippet'},
'Method': {text: 'Method'},
'Function': {text: 'Function'},
'Constructor': {text: 'Constructor'},
'Field': {text: 'Field'},
'Variable': {text: 'Variable'},
'Class': {text: 'Class'},
'Struct': {text: 'Struct'},
'Interface': {text: 'Interface'},
'Module': {text: 'Module'},
'Property': {text: 'Property'},
'Event': {text: 'Event'},
'Operator': {text: 'Operator'},
'Unit': {text: 'Unit'},
'Value': {text: 'Value'},
'Constant': {text: 'Constant'},
'Enum': {text: 'Enum'},
'EnumMember': {text: 'EnumMember'},
'Keyword': {text: 'Keyword'},
'Text': {text: 'Text'},
'Color': {text: 'Color'},
'File': {text: 'File'},
'Reference': {text: 'Reference'},
'Customcolor': {text: 'Customcolor'},
'Folder': {text: 'Folder'},
'TypeParameter': {text: 'TypeParameter'},
'User': {text: 'User'},
'Issue': {text: 'Issue'},
'Snippet': {text: 'Snippet'},
},
},
{
title: '类型',
tip: '函数类型',
sorter: true,
dataIndex: 'type',
hideInForm: false,
hideInSearch: true,
hideInSearch: false,
hideInTable: false,
/*filters: [
filters: [
{
text: '优化参数',
value: '优化参数',
},
{
text: '建表语句',
value: '建表语句',
},
{
text: 'CataLog',
value: 'CataLog',
},
{
text: '设置参数',
value: '设置参数',
},
{
text: '内置函数',
value: '内置函数',
......@@ -152,12 +241,21 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
text: 'UDF',
value: 'UDF',
},
{
text: 'Other',
value: 'Other',
}
],
filterMultiple: false,
valueEnum: {
'内置函数': { text: '内置函数'},
'UDF': { text: 'UDF'},
},*/
'优化参数': {text: '内置函数'},
'建表语句': {text: '建表语句'},
'CataLog': {text: 'CataLog'},
'设置参数': {text: '设置参数'},
'内置函数': {text: '内置函数'},
'UDF': {text: 'UDF'},
'Other': {text: 'Other'},
},
},
{
title: '子类型',
......@@ -166,12 +264,23 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
hideInForm: false,
hideInSearch: true,
hideInTable: false,
/*filters: [
filters: [
{
text: 'Batch/Streaming',
value: 'Batch/Streaming',
},{
text: 'Batch',
value: 'Batch',
},{
text: 'Streaming',
value: 'Streaming',
},{
text: 'Other',
value: 'Other',
},{
text: '比较函数',
value: '比较函数',
},
{
},{
text: '逻辑函数',
value: '逻辑函数',
},{
......@@ -183,21 +292,21 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
},{
text: '时间函数',
value: '时间函数',
},{
text: '类型转换函数功能',
value: '类型转换函数功能',
},{
text: '条件函数',
value: '条件函数',
},{
text: '类型转换函数',
value: '类型转换函数',
},{
text: 'Collection 函数',
value: 'Collection 函数',
},{
text: 'Value Collection 函数',
value: 'Value Collection 函数',
text: 'Value Construction函数',
value: 'Value Construction函数',
},{
text: 'Value Access 函数',
value: 'Value Access 函数',
text: 'Value Access函数',
value: 'Value Access函数',
},{
text: '分组函数',
value: '分组函数',
......@@ -220,23 +329,27 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
],
filterMultiple: false,
valueEnum: {
'比较函数': { text: '比较函数'},
'逻辑函数': { text: '逻辑函数'},
'算术函数': { text: '算术函数'},
'字符串函数': { text: '字符串函数'},
'时间函数': { text: '时间函数'},
'条件函数': { text: '条件函数'},
'类型转换函数': { text: '类型转换函数'},
'Collection 函数': { text: 'Collection 函数'},
'Value Collection 函数': { text: 'Value Collection 函数'},
'Value Access 函数': { text: 'Value Access 函数'},
'分组函数': { text: '分组函数'},
'hash函数': { text: 'hash函数'},
'聚合函数': { text: '聚合函数'},
'列函数': { text: '列函数'},
'表值聚合函数': { text: '表值聚合函数'},
'其他函数': { text: '其他函数'},
},*/
'Batch/Streaming' : {text: 'Batch/Streaming'},
'Batch' : {text: 'Batch'},
'Streaming' : {text: 'Streaming'},
'Other' : {text: 'Other'},
'比较函数' : {text: '比较函数'},
'逻辑函数' : {text: '逻辑函数'},
'算术函数' : {text: '算术函数'},
'字符串函数' : {text: '字符串函数'},
'时间函数' : {text: '时间函数'},
'条件函数' : {text: '条件函数'},
'类型转换函数功能' : {text: '类型转换函数功能'},
'Collection 函数' : {text: 'Collection 函数'},
'Value Construction函数' : {text: 'Value Construction函数'},
'Value Access函数' : {text: 'Value Access函数'},
'分组函数' : {text: '分组函数'},
'hash函数' : {text: 'hash函数'},
'聚合函数' : {text: '聚合函数'},
'列函数' : {text: '列函数'},
'表值聚合函数' : {text: '表值聚合函数'},
'其他函数' : {text: '其他函数'},
},
},
{
title: '描述',
......@@ -246,7 +359,7 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
hideInForm: false,
hideInSearch: false,
hideInTable: true,
},{
}, {
title: '填充值',
sorter: true,
dataIndex: 'fillValue',
......@@ -254,6 +367,7 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
hideInForm: false,
hideInSearch: true,
hideInTable: true,
hideInDescriptions: false,
},
{
title: '版本',
......@@ -281,8 +395,8 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
],
filterMultiple: false,
valueEnum: {
true: { text: '已启用', status: 'Success' },
false: { text: '已禁用', status: 'Error' },
true: {text: '已启用', status: 'Success'},
false: {text: '已禁用', status: 'Error'},
},
},
{
......@@ -291,14 +405,14 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
sorter: true,
valueType: 'dateTime',
hideInForm: true,
hideInTable:true,
renderFormItem: (item, { defaultRender, ...rest }, form) => {
hideInTable: true,
renderFormItem: (item, {defaultRender, ...rest}, form) => {
const status = form.getFieldValue('status');
if (`${status}` === '0') {
return false;
}
if (`${status}` === '3') {
return <Input {...rest} placeholder="请输入异常原因！" />;
return <Input {...rest} placeholder="请输入异常原因！"/>;
}
return defaultRender(item);
},
......@@ -309,13 +423,13 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
sorter: true,
valueType: 'dateTime',
hideInForm: true,
renderFormItem: (item, { defaultRender, ...rest }, form) => {
renderFormItem: (item, {defaultRender, ...rest}, form) => {
const status = form.getFieldValue('status');
if (`${status}` === '0') {
return false;
}
if (`${status}` === '3') {
return <Input {...rest} placeholder="请输入异常原因！" />;
return <Input {...rest} placeholder="请输入异常原因！"/>;
}
return defaultRender(item);
},
......@@ -345,142 +459,143 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
actionRef={actionRef}
rowKey="id"
search={{
labelWidth: 120,
}}
labelWidth: 120,
}}
toolBarRender={() => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined/> 新建
</Button>,
]}
request={(params, sorter, filter) => queryData(url,{...params, sorter, filter})}
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined/> 新建
</Button>,
]}
request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
<span>
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
<span>
被禁用的文档共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)} 人
</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 ={()=>{
Modal.confirm({
title: '删除文档',
content: '确定删除选中的文档吗？',
okText: '确认',
cancelText: '取消',
onOk:async () => {
await handleRemove(url,selectedRowsState);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>
批量删除
</Button>
<Button type="primary"
onClick ={()=>{
Modal.confirm({
title: '启用文档',
content: '确定启用选中的文档吗？',
okText: '确认',
cancelText: '取消',
onOk:async () => {
await updateEnabled(url,selectedRowsState, true);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>批量启用</Button>
<Button danger
onClick ={()=>{
Modal.confirm({
title: '禁用文档',
content: '确定禁用选中的文档吗？',
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);
批量删除
</Button>
<Button type="primary"
onClick={() => {
Modal.confirm({
title: '启用文档',
content: '确定启用选中的文档吗？',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await updateEnabled(url, selectedRowsState, true);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>批量启用</Button>
<Button danger
onClick={() => {
Modal.confirm({
title: '禁用文档',
content: '确定禁用选中的文档吗？',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await updateEnabled(url, selectedRowsState, false);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>批量禁用</Button>
</FooterToolbar>
)}
<DocumentForm
onSubmit={async (value) => {
const success = await handleAddOrUpdate(url, value);
if (success) {
handleModalVisible(false);
setFormValues({});
if (actionRef.current) {
actionRef.current.reload();
}
getFillAllByVersion('',dispatch);
}
}}
rowKey="id"
type="form"
columns={columns}
/>
</CreateForm>
{formValues && Object.keys(formValues).length ? (
<UpdateForm
onCancel={() => {
handleModalVisible(false);
}}
modalVisible={modalVisible}
values={{}}
/>
{
formValues && Object.keys(formValues).length ? (
<DocumentForm
onSubmit={async (value) => {
const success = await handleAddOrUpdate(url,value);
const success = await handleAddOrUpdate(url, value);
if (success) {
handleUpdateModalVisible(false);
setFormValues({});
if (actionRef.current) {
actionRef.current.reload();
}
getFillAllByVersion('',dispatch);
}
}}
onCancel={() => {
handleUpdateModalVisible(false);
setFormValues({});
}}
updateModalVisible={updateModalVisible}
modalVisible={updateModalVisible}
values={formValues}
/>
) : null}
<Drawer
width={600}
visible={!!row}
onClose={() => {
setRow(undefined);
}}
closable={false}
>
{row?.name && (
<ProDescriptions<DocumentTableListItem>
column={2}
title={row?.name}
request={async () => ({
) : null
}
<Drawer
width={600}
visible={!!row}
onClose={() => {
setRow(undefined);
}}
closable={false}
>
{row?.name && (
<ProDescriptions<DocumentTableListItem>
column={2}
title={row?.name}
request={async () => ({
data: row || {},
})}
params={{
params={{
id: row?.name,
}}
columns={columns}
/>
)}
</Drawer>
columns={columns}
/>
)}
</Drawer>
</PageContainer>
);
)
;
};
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