mirror of
https://github.com/didi/KnowStreaming.git
synced 2025-12-24 20:22:12 +08:00
361 lines
9.8 KiB
TypeScript
361 lines
9.8 KiB
TypeScript
import { wrapper } from 'store';
|
||
import { order } from 'store/order';
|
||
import { message, Icon, notification, Modal, Table, Tooltip } from 'component/antd';
|
||
import { IApprovalOrder, IBaseOrder, IOrderInfo } from 'types/base-type';
|
||
import { admin } from 'store/admin';
|
||
import { modal } from 'store/modal';
|
||
import { cellStyle } from 'constants/table';
|
||
import * as React from 'react';
|
||
|
||
const updateInputModal = (status: string, type: number) => {
|
||
const formMap = wrapper.xFormWrapper.formMap;
|
||
const region = type === 0 ? 5 : 3;
|
||
const broker = type === 0 ? 6 : 4;
|
||
formMap[region].invisible = status === 'region';
|
||
formMap[broker].invisible = status !== 'region';
|
||
|
||
formMap[region].rules = type === 0 ? [{ required: status !== 'region' }] : [{ required: false }];
|
||
formMap[broker].rules = type === 0 ? [{ required: status === 'region' }] : [{ required: false }];
|
||
// tslint:disable-next-line:no-unused-expression
|
||
wrapper.ref && wrapper.ref.updateFormMap$(formMap, wrapper.xFormWrapper.formData);
|
||
};
|
||
|
||
const renderModalTilte = (type: number, status: number) => {
|
||
return (
|
||
<>
|
||
<span key={'title-1'}>审批</span>
|
||
{
|
||
type === 3 && status === 1 ? <span key={'subtitle-1'}>
|
||
<a target="_blank" href="https://github.com/didi/kafka-manager">
|
||
<span className="safe-tip" key={1}>敏感操作：请确认您当前操作是否包含敏感信息</span>
|
||
<Icon key={2} type="question-circle" />
|
||
</a>
|
||
</span> : null}
|
||
</>);
|
||
};
|
||
|
||
export const showApprovalModal = (info: IOrderInfo, status: number, from?: string) => {
|
||
const { id, type } = info;
|
||
const formMap = [{
|
||
key: 'partitionNum',
|
||
label: '分区数',
|
||
type: 'input_number',
|
||
rules: [{
|
||
required: true,
|
||
message: '请输入分区数（正数）',
|
||
pattern: /^[1-9]\d*$/,
|
||
}],
|
||
}, {
|
||
key: 'replicaNum',
|
||
label: '副本数',
|
||
type: 'input_number',
|
||
defaultValue: 3,
|
||
rules: [{
|
||
required: true,
|
||
message: '请输入副本数（正数）',
|
||
pattern: /^[1-9]\d*$/,
|
||
}],
|
||
}, {
|
||
key: 'retentionTime',
|
||
label: '保存时间（/小时）',
|
||
defaultValue: '12',
|
||
type: 'input_number',
|
||
// options: [{
|
||
// label: '12小时',
|
||
// value: '12',
|
||
// }, {
|
||
// label: '24小时',
|
||
// value: '24',
|
||
// }, {
|
||
// label: '48小时',
|
||
// value: '48',
|
||
// }, {
|
||
// label: '72小时',
|
||
// value: '72',
|
||
// }],
|
||
rules: [{
|
||
required: true,
|
||
message: '请输入大于12小于999的整数',
|
||
pattern: /^([1-9]{1}[0-9]{2})$|^([2-9]{1}[0-9]{1})$|^(1[2-9]{1})$/,
|
||
}],
|
||
}, {
|
||
key: 'species',
|
||
label: '类型',
|
||
type: 'radio_group',
|
||
defaultValue: 'region',
|
||
options: [{
|
||
label: 'Region',
|
||
value: 'region',
|
||
}, {
|
||
label: 'Borker',
|
||
value: 'broker',
|
||
}],
|
||
rules: [{ required: false, message: '请选择类型' }],
|
||
attrs: {
|
||
onChange(item: any) {
|
||
updateInputModal(item.target.value, type);
|
||
},
|
||
},
|
||
}, {
|
||
key: 'brokerIdList',
|
||
label: 'Broker',
|
||
invisible: true,
|
||
rules: [{ required: false, message: '请输入Broker' }],
|
||
attrs: {
|
||
placeholder: '请输入Broker',
|
||
},
|
||
}, {
|
||
key: 'regionId',
|
||
label: 'Region',
|
||
type: 'select',
|
||
invisible: false,
|
||
options: admin.brokersRegions,
|
||
rules: [{ required: true, message: '请选择Region' }],
|
||
attrs: {
|
||
placeholder: '请选择Region',
|
||
},
|
||
}] as any;
|
||
|
||
const quotaFormMap = [{
|
||
key: 'nowPartitionNum',
|
||
label: '现有分区数',
|
||
type: 'input_number',
|
||
defaultValue: info.detail.partitionNum || info.detail.presentPartitionNum,
|
||
rules: [{ required: false }],
|
||
attrs: { disabled: true },
|
||
}, {
|
||
key: 'regionName',
|
||
label: '所属Region',
|
||
defaultValue: info.detail.regionNameList,
|
||
rules: [{ required: false }],
|
||
attrs: { disabled: true },
|
||
}, {
|
||
key: 'regionBrokerIdList',
|
||
label: 'RegionBroker',
|
||
defaultValue: info.detail.regionBrokerIdList,
|
||
rules: [{ required: false }],
|
||
attrs: { disabled: true },
|
||
}, {
|
||
key: 'topicBrokerIdList',
|
||
label: 'TopicBroker',
|
||
defaultValue: info.detail.topicBrokerIdList,
|
||
rules: [{ required: false }],
|
||
attrs: { disabled: true },
|
||
}, {
|
||
key: 'partitionNum',
|
||
label: '新增分区数',
|
||
type: 'input_number',
|
||
rules: [{
|
||
required: type !== 2,
|
||
message: '请输入分区数（正数）',
|
||
pattern: /^[1-9]\d*$/,
|
||
}],
|
||
}, {
|
||
key: 'brokerIdList',
|
||
label: '扩至Broker',
|
||
defaultValue: info.detail.regionBrokerIdList,
|
||
rules: [{ required: true }],
|
||
}] as any;
|
||
|
||
const xFormWrapper = {
|
||
formMap: [
|
||
{
|
||
key: 'id',
|
||
label: '工单ID',
|
||
type: 'input_number',
|
||
attrs: { disabled: true },
|
||
},
|
||
{
|
||
key: 'opinion',
|
||
label: '审批意见',
|
||
type: 'text_area',
|
||
rules: [{
|
||
required: status === 2,
|
||
validator: (rule: any, value: string, callback: any) => {
|
||
if (status === 2) {
|
||
value = value.trim();
|
||
const regexp = /^[ ]+$/;
|
||
if (value.length <= 0 || regexp.test(value)) {
|
||
callback('审批意见不能为空');
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
},
|
||
}],
|
||
}],
|
||
formData: { id },
|
||
okText: status === 1 ? '通过' : '驳回',
|
||
visible: true,
|
||
width: type === 0 ? 760 : 520,
|
||
title: renderModalTilte(type, status) as any,
|
||
onSubmit: (value: any) => {
|
||
value.id = id;
|
||
value.status = status;
|
||
if (value.brokerIdList) {
|
||
value.brokerIdList = value.brokerIdList && Array.isArray(value.brokerIdList) ?
|
||
value.brokerIdList : value.brokerIdList.split(',');
|
||
}
|
||
let params = {} as any;
|
||
if (type === 0) {
|
||
params = {
|
||
replicaNum: value.replicaNum ? Number(value.replicaNum) : '',
|
||
partitionNum: value.partitionNum ? Number(value.partitionNum) : null,
|
||
retentionTime: value.retentionTime,
|
||
brokerIdList: value.brokerIdList,
|
||
regionId: value.regionId,
|
||
};
|
||
params.regionId ? delete params.brokerIdList : delete params.regionId;
|
||
} else if (type === 2 || type === 12) {
|
||
params = {
|
||
partitionNum: value.partitionNum ? Number(value.partitionNum) : null,
|
||
brokerIdList: value.brokerIdList,
|
||
};
|
||
} else {
|
||
params = {};
|
||
}
|
||
const orderParams = {
|
||
id,
|
||
opinion: value.opinion.trim(),
|
||
status,
|
||
detail: JSON.stringify(params),
|
||
} as IApprovalOrder;
|
||
order.approvalOrder(orderParams).then(() => {
|
||
message.success('操作成功');
|
||
if (from) {
|
||
order.getOrderDetail(id);
|
||
}
|
||
order.getApplyOrderList(0);
|
||
order.getApprovalList(0);
|
||
}).catch(err => {
|
||
if (!err || !err.code) {
|
||
notification.error({
|
||
message: '错误',
|
||
description: '网络或服务器错误，请重试！',
|
||
});
|
||
}
|
||
});
|
||
},
|
||
};
|
||
if (type === 0 && status === 1) { // 通过 topic
|
||
xFormWrapper.formMap.splice(1, 0, ...formMap);
|
||
}
|
||
if ((type === 2 || type === 12) && status === 1) { // 通过配额 12分区
|
||
xFormWrapper.formMap.splice(1, 0, ...quotaFormMap);
|
||
}
|
||
wrapper.open(xFormWrapper);
|
||
};
|
||
|
||
export const renderOrderOpModal = (selectedRowKeys: IBaseOrder[], status: number, rowsCallBack?: any) => {
|
||
if (modal.actionAfterClose === 'close') {
|
||
// tslint:disable-next-line: no-unused-expression
|
||
rowsCallBack && rowsCallBack.onChange([], []);
|
||
order.setSelectedRows([]);
|
||
}
|
||
const orderIdList = selectedRowKeys.map((ele: IBaseOrder) => {
|
||
return ele.id;
|
||
});
|
||
const xFormWrapper = {
|
||
formMap: [
|
||
{
|
||
key: 'opinion',
|
||
label: '审批意见',
|
||
type: 'text_area',
|
||
rules: [{
|
||
required: true,
|
||
validator: (rule: any, value: string, callback: any) => {
|
||
value = value.trim();
|
||
const regexp = /^[ ]+$/;
|
||
if (value.length <= 0 || regexp.test(value)) {
|
||
callback('审批意见不能为空');
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
}],
|
||
},
|
||
],
|
||
formData: {},
|
||
visible: true,
|
||
okText: status === 1 ? '通过' : '驳回',
|
||
title: status === 1 ? '通过' : '驳回',
|
||
onSubmit: async (value: any) => {
|
||
const params = {
|
||
opinion: value.opinion,
|
||
orderIdList,
|
||
status,
|
||
};
|
||
order.batchApprovalOrders(params).then(data => {
|
||
modal.setAction('close');
|
||
modal.showOrderOpResult();
|
||
order.setSelectedRows();
|
||
});
|
||
},
|
||
};
|
||
wrapper.open(xFormWrapper);
|
||
};
|
||
|
||
export const RenderOrderOpResult = () => {
|
||
const handleOk = () => {
|
||
order.getApplyOrderList(0);
|
||
order.getApprovalList(0);
|
||
order.setSelectedRows();
|
||
modal.close();
|
||
};
|
||
|
||
const flowColumns = [
|
||
{
|
||
title: '工单Id',
|
||
dataIndex: 'id',
|
||
key: 'id',
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'code',
|
||
key: 'code',
|
||
render: (t: number) => {
|
||
return (
|
||
<span className={t === 0 ? 'success' : 'fail'}>
|
||
{t === 0 ? '成功' : '失败'}
|
||
</span>
|
||
);
|
||
},
|
||
},
|
||
{
|
||
title: '原因',
|
||
dataIndex: 'message',
|
||
key: 'message',
|
||
onCell: () => ({
|
||
style: {
|
||
maxWidth: 120,
|
||
...cellStyle,
|
||
},
|
||
}),
|
||
render: (text: string) => {
|
||
return (
|
||
<Tooltip placement="bottomLeft" title={text} >
|
||
{text}
|
||
</Tooltip>);
|
||
},
|
||
},
|
||
];
|
||
return (
|
||
<>
|
||
<Modal
|
||
title="审批结果"
|
||
visible={true}
|
||
onOk={handleOk}
|
||
onCancel={handleOk}
|
||
>
|
||
<Table
|
||
columns={flowColumns}
|
||
rowKey="id"
|
||
dataSource={order.batchApprovalList}
|
||
scroll={{ x: 450, y: 260 }}
|
||
pagination={false}
|
||
/>
|
||
</Modal>
|
||
</>
|
||
);
|
||
};
|