mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-16 06:56:57 +00:00
first commit
This commit is contained in:
jerryjzhang
@@ -0,0 +1,123 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Button, Modal } from 'antd';
|
||||
import type { IDataSource } from '../data';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
import { connect } from 'umi';
|
||||
import type { Dispatch } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
|
||||
export type CreateFormProps = {
|
||||
measuresList: any[];
|
||||
selectedMeasuresList: any[];
|
||||
onCancel: () => void;
|
||||
onSubmit: (selectMeasuresList: any[]) => void;
|
||||
createModalVisible: boolean;
|
||||
projectManger: StateType;
|
||||
dispatch: Dispatch;
|
||||
};
|
||||
|
||||
const BindMeasuresTable: React.FC<CreateFormProps> = ({
|
||||
measuresList,
|
||||
selectedMeasuresList = [],
|
||||
onSubmit,
|
||||
onCancel,
|
||||
createModalVisible,
|
||||
projectManger,
|
||||
}) => {
|
||||
const { searchParams = {} } = projectManger || {};
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
const [selectedMeasuresKeys, setSelectedMeasuresKeys] = useState<string[]>(() => {
|
||||
return selectedMeasuresList.map((item: any) => {
|
||||
return item.bizName;
|
||||
});
|
||||
});
|
||||
const [selectMeasuresList, setSelectMeasuresList] = useState<IDataSource.IMeasuresItem[]>([]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
onSubmit?.(selectMeasuresList);
|
||||
};
|
||||
|
||||
const findMeasureItemByName = (bizName: string) => {
|
||||
return measuresList.find((item) => {
|
||||
return item.bizName === bizName;
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const selectedMeasures: IDataSource.IMeasuresItem[] = selectedMeasuresKeys.map((bizName) => {
|
||||
const item = findMeasureItemByName(bizName);
|
||||
return item;
|
||||
});
|
||||
setSelectMeasuresList([...selectedMeasures]);
|
||||
}, [selectedMeasuresKeys]);
|
||||
|
||||
useEffect(() => {}, []);
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'bizName',
|
||||
title: '度量名称',
|
||||
},
|
||||
{
|
||||
dataIndex: 'alias',
|
||||
title: '别名',
|
||||
},
|
||||
{
|
||||
dataIndex: 'agg',
|
||||
title: '算子类型',
|
||||
},
|
||||
{
|
||||
dataIndex: 'datasourceName',
|
||||
title: '所属数据源',
|
||||
},
|
||||
];
|
||||
const renderFooter = () => {
|
||||
return (
|
||||
<>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button type="primary" onClick={handleSubmit}>
|
||||
将选中度量添加到指标
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const rowSelection = {
|
||||
selectedRowKeys: selectedMeasuresKeys,
|
||||
onChange: (_selectedRowKeys: any[]) => {
|
||||
setSelectedMeasuresKeys([..._selectedRowKeys]);
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={800}
|
||||
destroyOnClose
|
||||
title="度量添加"
|
||||
open={createModalVisible}
|
||||
footer={renderFooter()}
|
||||
onCancel={() => {
|
||||
onCancel();
|
||||
}}
|
||||
>
|
||||
<ProTable
|
||||
actionRef={actionRef}
|
||||
rowKey="bizName"
|
||||
rowSelection={rowSelection}
|
||||
columns={columns}
|
||||
params={{ ...searchParams }}
|
||||
pagination={false}
|
||||
dataSource={measuresList}
|
||||
size="small"
|
||||
search={false}
|
||||
options={false}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(({ projectManger }: { projectManger: StateType }) => ({
|
||||
projectManger,
|
||||
}))(BindMeasuresTable);
|
||||
@@ -0,0 +1,178 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import { message, Button, Drawer, Space, Popconfirm } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import type { Dispatch } from 'umi';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import { getDatasourceList, deleteDatasource } from '../service';
|
||||
import DataSource from '../Datasource';
|
||||
import moment from 'moment';
|
||||
|
||||
type Props = {
|
||||
dispatch: Dispatch;
|
||||
domainManger: StateType;
|
||||
};
|
||||
|
||||
const ClassDataSourceTable: React.FC<Props> = ({ dispatch, domainManger }) => {
|
||||
const { selectDomainId } = domainManger;
|
||||
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
|
||||
const [dataSourceItem, setDataSourceItem] = useState<any>();
|
||||
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
title: 'ID',
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '数据源名称',
|
||||
},
|
||||
{
|
||||
dataIndex: 'bizName',
|
||||
title: '英文名称',
|
||||
},
|
||||
{
|
||||
dataIndex: 'createdBy',
|
||||
title: '创建人',
|
||||
},
|
||||
{
|
||||
dataIndex: 'description',
|
||||
title: '描述',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'updatedAt',
|
||||
title: '更新时间',
|
||||
search: false,
|
||||
render: (value: any) => {
|
||||
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'x',
|
||||
valueType: 'option',
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<Space>
|
||||
<a
|
||||
key="classEditBtn"
|
||||
onClick={() => {
|
||||
setDataSourceItem(record);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<Popconfirm
|
||||
title="确认删除？"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
onConfirm={async () => {
|
||||
const { code } = await deleteDatasource(record.id);
|
||||
if (code === 200) {
|
||||
setDataSourceItem(undefined);
|
||||
actionRef.current?.reload();
|
||||
} else {
|
||||
message.error('删除失败');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<a
|
||||
key="classEditBtn"
|
||||
onClick={() => {
|
||||
setDataSourceItem(record);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const queryDataSourceList = async (params: any) => {
|
||||
dispatch({
|
||||
type: 'domainManger/setPagination',
|
||||
payload: {
|
||||
...params,
|
||||
},
|
||||
});
|
||||
const { code, data, msg } = await getDatasourceList({ ...params });
|
||||
let resData: any = {};
|
||||
if (code === 200) {
|
||||
resData = {
|
||||
data: data || [],
|
||||
success: true,
|
||||
};
|
||||
} else {
|
||||
message.error(msg);
|
||||
resData = {
|
||||
data: [],
|
||||
total: 0,
|
||||
success: false,
|
||||
};
|
||||
}
|
||||
return resData;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProTable
|
||||
actionRef={actionRef}
|
||||
headerTitle="数据源列表"
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
params={{ domainId: selectDomainId }}
|
||||
request={queryDataSourceList}
|
||||
pagination={false}
|
||||
search={false}
|
||||
size="small"
|
||||
options={{ reload: false, density: false, fullScreen: false }}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="create"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setDataSourceItem(undefined);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
创建数据源
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
{createModalVisible && (
|
||||
<Drawer
|
||||
width={'100%'}
|
||||
destroyOnClose
|
||||
title="数据源编辑"
|
||||
open={true}
|
||||
onClose={() => {
|
||||
setCreateModalVisible(false);
|
||||
setDataSourceItem(undefined);
|
||||
}}
|
||||
footer={null}
|
||||
>
|
||||
<DataSource
|
||||
initialValues={dataSourceItem}
|
||||
domainId={Number(selectDomainId)}
|
||||
onSubmitSuccess={() => {
|
||||
setCreateModalVisible(false);
|
||||
setDataSourceItem(undefined);
|
||||
actionRef.current?.reload();
|
||||
}}
|
||||
/>
|
||||
</Drawer>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(ClassDataSourceTable);
|
||||
@@ -0,0 +1,263 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import { message, Button, Space, Popconfirm } from 'antd';
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import type { Dispatch } from 'umi';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import { SENSITIVE_LEVEL_ENUM } from '../constant';
|
||||
import {
|
||||
getDatasourceList,
|
||||
getDimensionList,
|
||||
createDimension,
|
||||
updateDimension,
|
||||
deleteDimension,
|
||||
} from '../service';
|
||||
import DimensionInfoModal from './DimensionInfoModal';
|
||||
import moment from 'moment';
|
||||
import styles from './style.less';
|
||||
|
||||
type Props = {
|
||||
dispatch: Dispatch;
|
||||
domainManger: StateType;
|
||||
};
|
||||
|
||||
const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
const { selectDomainId } = domainManger;
|
||||
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
|
||||
const [dimensionItem, setDimensionItem] = useState<any>();
|
||||
const [dataSourceList, setDataSourceList] = useState<any[]>([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
const queryDimensionList = async (params: any) => {
|
||||
const { code, data, msg } = await getDimensionList({
|
||||
...params,
|
||||
...pagination,
|
||||
domainId: selectDomainId,
|
||||
});
|
||||
const { list, pageSize, current, total } = data;
|
||||
let resData: any = {};
|
||||
if (code === 200) {
|
||||
setPagination({
|
||||
pageSize,
|
||||
current,
|
||||
total,
|
||||
});
|
||||
|
||||
resData = {
|
||||
data: list || [],
|
||||
success: true,
|
||||
};
|
||||
} else {
|
||||
message.error(msg);
|
||||
resData = {
|
||||
data: [],
|
||||
total: 0,
|
||||
success: false,
|
||||
};
|
||||
}
|
||||
return resData;
|
||||
};
|
||||
|
||||
const queryDataSourceList = async () => {
|
||||
const { code, data, msg } = await getDatasourceList({ domainId: selectDomainId });
|
||||
if (code === 200) {
|
||||
setDataSourceList(data);
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
queryDataSourceList();
|
||||
}, [selectDomainId]);
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
title: 'ID',
|
||||
order: 100,
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '维度名称',
|
||||
},
|
||||
{
|
||||
dataIndex: 'bizName',
|
||||
title: '字段名称',
|
||||
order: 9,
|
||||
},
|
||||
{
|
||||
dataIndex: 'sensitiveLevel',
|
||||
title: '敏感度',
|
||||
valueEnum: SENSITIVE_LEVEL_ENUM,
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'datasourceName',
|
||||
title: '数据源名称',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'createdBy',
|
||||
title: '创建人',
|
||||
search: false,
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'description',
|
||||
title: '描述',
|
||||
search: false,
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'updatedAt',
|
||||
title: '更新时间',
|
||||
search: false,
|
||||
render: (value: any) => {
|
||||
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'x',
|
||||
valueType: 'option',
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<Space>
|
||||
<a
|
||||
key="classEditBtn"
|
||||
onClick={() => {
|
||||
setDimensionItem(record);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<Popconfirm
|
||||
title="确认删除？"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
onConfirm={async () => {
|
||||
const { code } = await deleteDimension(record.id);
|
||||
if (code === 200) {
|
||||
setDimensionItem(undefined);
|
||||
actionRef.current?.reload();
|
||||
} else {
|
||||
message.error('删除失败');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<a
|
||||
key="classEditBtn"
|
||||
onClick={() => {
|
||||
setDimensionItem(record);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const saveDimension = async (fieldsValue: any, reloadState: boolean = true) => {
|
||||
const queryParams = {
|
||||
domainId: selectDomainId,
|
||||
type: 'categorical',
|
||||
...fieldsValue,
|
||||
};
|
||||
let saveDimensionQuery = createDimension;
|
||||
if (queryParams.id) {
|
||||
saveDimensionQuery = updateDimension;
|
||||
}
|
||||
|
||||
const { code, msg } = await saveDimensionQuery(queryParams);
|
||||
|
||||
if (code === 200) {
|
||||
setCreateModalVisible(false);
|
||||
if (reloadState) {
|
||||
message.success('编辑维度成功');
|
||||
actionRef?.current?.reload();
|
||||
}
|
||||
dispatch({
|
||||
type: 'domainManger/queryDimensionList',
|
||||
payload: {
|
||||
domainId: selectDomainId,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProTable
|
||||
className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
|
||||
actionRef={actionRef}
|
||||
headerTitle="维度列表"
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
request={queryDimensionList}
|
||||
pagination={pagination}
|
||||
search={{
|
||||
span: 4,
|
||||
defaultCollapsed: false,
|
||||
collapseRender: () => {
|
||||
return <></>;
|
||||
},
|
||||
}}
|
||||
onChange={(data: any) => {
|
||||
const { current, pageSize, total } = data;
|
||||
setPagination({
|
||||
current,
|
||||
pageSize,
|
||||
total,
|
||||
});
|
||||
}}
|
||||
tableAlertRender={() => {
|
||||
return false;
|
||||
}}
|
||||
size="small"
|
||||
options={{ reload: false, density: false, fullScreen: false }}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="create"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setDimensionItem(undefined);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
创建维度
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
|
||||
{createModalVisible && (
|
||||
<DimensionInfoModal
|
||||
bindModalVisible={createModalVisible}
|
||||
dimensionItem={dimensionItem}
|
||||
dataSourceList={dataSourceList}
|
||||
onSubmit={saveDimension}
|
||||
onCancel={() => {
|
||||
setCreateModalVisible(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(ClassDimensionTable);
|
||||
@@ -0,0 +1,238 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import { message, Button, Space, Popconfirm } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import type { Dispatch } from 'umi';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import { SENSITIVE_LEVEL_ENUM } from '../constant';
|
||||
import { creatExprMetric, updateExprMetric, queryMetric, deleteMetric } from '../service';
|
||||
|
||||
import MetricInfoCreateForm from './MetricInfoCreateForm';
|
||||
|
||||
import moment from 'moment';
|
||||
import styles from './style.less';
|
||||
|
||||
type Props = {
|
||||
dispatch: Dispatch;
|
||||
domainManger: StateType;
|
||||
};
|
||||
|
||||
const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
const { selectDomainId } = domainManger;
|
||||
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
|
||||
const [metricItem, setMetricItem] = useState<any>();
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
});
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
const queryMetricList = async (params: any) => {
|
||||
const { code, data, msg } = await queryMetric({
|
||||
...params,
|
||||
...pagination,
|
||||
domainId: selectDomainId,
|
||||
});
|
||||
const { list, pageSize, current, total } = data;
|
||||
let resData: any = {};
|
||||
if (code === 200) {
|
||||
setPagination({
|
||||
pageSize,
|
||||
current,
|
||||
total,
|
||||
});
|
||||
|
||||
resData = {
|
||||
data: list || [],
|
||||
success: true,
|
||||
};
|
||||
} else {
|
||||
message.error(msg);
|
||||
resData = {
|
||||
data: [],
|
||||
total: 0,
|
||||
success: false,
|
||||
};
|
||||
}
|
||||
return resData;
|
||||
};
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'id',
|
||||
title: 'ID',
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '指标名称',
|
||||
},
|
||||
{
|
||||
dataIndex: 'bizName',
|
||||
title: '字段名称',
|
||||
},
|
||||
{
|
||||
dataIndex: 'sensitiveLevel',
|
||||
title: '敏感度',
|
||||
valueEnum: SENSITIVE_LEVEL_ENUM,
|
||||
},
|
||||
{
|
||||
dataIndex: 'createdBy',
|
||||
title: '创建人',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
dataIndex: 'description',
|
||||
title: '描述',
|
||||
search: false,
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'updatedAt',
|
||||
title: '更新时间',
|
||||
search: false,
|
||||
render: (value: any) => {
|
||||
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'x',
|
||||
valueType: 'option',
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<Space>
|
||||
<a
|
||||
key="classEditBtn"
|
||||
onClick={() => {
|
||||
setMetricItem(record);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
|
||||
<Popconfirm
|
||||
title="确认删除？"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
onConfirm={async () => {
|
||||
const { code } = await deleteMetric(record.id);
|
||||
if (code === 200) {
|
||||
setMetricItem(undefined);
|
||||
actionRef.current?.reload();
|
||||
} else {
|
||||
message.error('删除失败');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<a
|
||||
key="classEditBtn"
|
||||
onClick={() => {
|
||||
setMetricItem(record);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const saveMetric = async (fieldsValue: any, reloadState: boolean = true) => {
|
||||
const queryParams = {
|
||||
domainId: selectDomainId,
|
||||
...fieldsValue,
|
||||
};
|
||||
if (queryParams.typeParams && !queryParams.typeParams.expr) {
|
||||
message.error('度量表达式不能为空');
|
||||
return;
|
||||
}
|
||||
let saveMetricQuery = creatExprMetric;
|
||||
if (queryParams.id) {
|
||||
saveMetricQuery = updateExprMetric;
|
||||
}
|
||||
const { code, msg } = await saveMetricQuery(queryParams);
|
||||
if (code === 200) {
|
||||
message.success('编辑指标成功');
|
||||
setCreateModalVisible(false);
|
||||
if (reloadState) {
|
||||
actionRef?.current?.reload();
|
||||
}
|
||||
dispatch({
|
||||
type: 'domainManger/queryMetricList',
|
||||
payload: {
|
||||
domainId: selectDomainId,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProTable
|
||||
className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
|
||||
actionRef={actionRef}
|
||||
headerTitle="指标列表"
|
||||
rowKey="id"
|
||||
search={{
|
||||
span: 4,
|
||||
defaultCollapsed: false,
|
||||
collapseRender: () => {
|
||||
return <></>;
|
||||
},
|
||||
}}
|
||||
columns={columns}
|
||||
params={{ domainId: selectDomainId }}
|
||||
request={queryMetricList}
|
||||
pagination={pagination}
|
||||
tableAlertRender={() => {
|
||||
return false;
|
||||
}}
|
||||
onChange={(data: any) => {
|
||||
const { current, pageSize, total } = data;
|
||||
setPagination({
|
||||
current,
|
||||
pageSize,
|
||||
total,
|
||||
});
|
||||
}}
|
||||
size="small"
|
||||
options={{ reload: false, density: false, fullScreen: false }}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="create"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setMetricItem(undefined);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
创建指标
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
{createModalVisible && (
|
||||
<MetricInfoCreateForm
|
||||
domainId={Number(selectDomainId)}
|
||||
createModalVisible={createModalVisible}
|
||||
metricItem={metricItem}
|
||||
onSubmit={(values) => {
|
||||
saveMetric(values);
|
||||
}}
|
||||
onCancel={() => {
|
||||
setCreateModalVisible(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(ClassMetricTable);
|
||||
@@ -0,0 +1,159 @@
|
||||
import type { ActionType } from '@ant-design/pro-table';
|
||||
import type { Ref, ReactNode } from 'react';
|
||||
import { Space, message } from 'antd';
|
||||
import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
|
||||
|
||||
import { EditableProTable } from '@ant-design/pro-table';
|
||||
|
||||
type Props = {
|
||||
title?: string;
|
||||
tableDataSource: any[];
|
||||
columnList: any[];
|
||||
rowKey: string;
|
||||
editableProTableProps?: any;
|
||||
onDataSourceChange?: (dataSource: any) => void;
|
||||
extenderCtrlColumn?: (text, record, _, action) => ReactNode[];
|
||||
editableActionRender?: (row, config, defaultDom, actionRef) => ReactNode[];
|
||||
ref?: any;
|
||||
};
|
||||
|
||||
export type CommonEditTableRef = {
|
||||
getCommonEditTableDataSource: () => void;
|
||||
editTableActionRef: ActionType;
|
||||
};
|
||||
const CommonEditTable: React.FC<Props> = forwardRef(
|
||||
(
|
||||
{
|
||||
title,
|
||||
columnList,
|
||||
rowKey,
|
||||
tableDataSource,
|
||||
editableProTableProps = {},
|
||||
onDataSourceChange,
|
||||
extenderCtrlColumn,
|
||||
editableActionRender,
|
||||
}: Props,
|
||||
ref: Ref<any>,
|
||||
) => {
|
||||
const [dataSource, setDataSource] = useState<any[]>(tableDataSource);
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getCommonEditTableDataSource: () => {
|
||||
return [...dataSource];
|
||||
},
|
||||
editTableActionRef: actionRef,
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
setDataSource(
|
||||
tableDataSource.map((item: any) => {
|
||||
return {
|
||||
...item,
|
||||
editRowId: item[rowKey] || (Math.random() * 1000000).toFixed(0),
|
||||
};
|
||||
}),
|
||||
);
|
||||
}, [tableDataSource]);
|
||||
|
||||
const handleDataSourceChange = (data: any) => {
|
||||
setTimeout(() => {
|
||||
onDataSourceChange?.(data);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
...columnList,
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'x',
|
||||
valueType: 'option',
|
||||
render: (text, record, _, action) => {
|
||||
return (
|
||||
<Space>
|
||||
<a
|
||||
key="editable"
|
||||
onClick={() => {
|
||||
action?.startEditable?.(record.editRowId);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<a
|
||||
key="deleteBtn"
|
||||
onClick={() => {
|
||||
const data = [...dataSource].filter((item) => item[rowKey] !== record[rowKey]);
|
||||
setDataSource(data);
|
||||
handleDataSourceChange(data);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
{extenderCtrlColumn?.(text, record, _, action)}
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
dataIndex: 'editRowId',
|
||||
hideInTable: true,
|
||||
},
|
||||
];
|
||||
|
||||
const defaultActionRender = (row, config, defaultDom) => {
|
||||
return editableActionRender?.(row, config, defaultDom, actionRef);
|
||||
};
|
||||
const actionRender = editableActionRender ? defaultActionRender : undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<EditableProTable
|
||||
key={title}
|
||||
actionRef={actionRef}
|
||||
headerTitle={title}
|
||||
rowKey={'editRowId'}
|
||||
columns={columns}
|
||||
value={dataSource}
|
||||
tableAlertRender={() => {
|
||||
return false;
|
||||
}}
|
||||
onChange={(data) => {
|
||||
let tableData = data;
|
||||
if (rowKey) {
|
||||
// 如果rowKey存在，将rowId复写为rowKey值
|
||||
tableData = data.map((item: any) => {
|
||||
return {
|
||||
...item,
|
||||
editRowId: item[rowKey],
|
||||
};
|
||||
});
|
||||
}
|
||||
setDataSource(tableData);
|
||||
handleDataSourceChange(data);
|
||||
}}
|
||||
editable={{
|
||||
onSave: (_, row) => {
|
||||
const rowKeyValue = row[rowKey];
|
||||
const isSame = dataSource.filter((item: any, index: number) => {
|
||||
return index !== row.index && item[rowKey] === rowKeyValue;
|
||||
});
|
||||
if (isSame[0]) {
|
||||
message.error('存在重复值');
|
||||
return Promise.reject();
|
||||
}
|
||||
return true;
|
||||
},
|
||||
actionRender: actionRender,
|
||||
}}
|
||||
pagination={false}
|
||||
size="small"
|
||||
recordCreatorProps={{
|
||||
record: () => ({ editRowId: (Math.random() * 1000000).toFixed(0) }),
|
||||
}}
|
||||
{...editableProTableProps}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
export default CommonEditTable;
|
||||
@@ -0,0 +1,160 @@
|
||||
import { useEffect, forwardRef, useImperativeHandle, useState } from 'react';
|
||||
import type { ForwardRefRenderFunction } from 'react';
|
||||
import { message, Form, Input, Select, Button, Space } from 'antd';
|
||||
import { saveDatabase, getDatabaseByDomainId, testDatabaseConnect } from '../../service';
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
|
||||
import styles from '../style.less';
|
||||
type Props = {
|
||||
domainId: number;
|
||||
onSubmit: (params?: any) => void;
|
||||
};
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const TextArea = Input.TextArea;
|
||||
|
||||
const DatabaseCreateForm: ForwardRefRenderFunction<any, Props> = ({ domainId }, ref) => {
|
||||
const [form] = Form.useForm();
|
||||
const [selectedDbType, setSelectedDbType] = useState<string>('h2');
|
||||
const queryDatabaseConfig = async () => {
|
||||
const { code, data } = await getDatabaseByDomainId(domainId);
|
||||
if (code === 200) {
|
||||
form.setFieldsValue({ ...data });
|
||||
setSelectedDbType(data?.type);
|
||||
return;
|
||||
}
|
||||
message.error('数据库配置获取错误');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
queryDatabaseConfig();
|
||||
}, [domainId]);
|
||||
|
||||
const getFormValidateFields = async () => {
|
||||
return await form.validateFields();
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getFormValidateFields,
|
||||
}));
|
||||
|
||||
const saveDatabaseConfig = async () => {
|
||||
const values = await form.validateFields();
|
||||
const { code, msg } = await saveDatabase({
|
||||
...values,
|
||||
domainId,
|
||||
});
|
||||
|
||||
if (code === 200) {
|
||||
message.success('保存成功');
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
const testDatabaseConnection = async () => {
|
||||
const values = await form.validateFields();
|
||||
const { code, data } = await testDatabaseConnect({
|
||||
...values,
|
||||
domainId,
|
||||
});
|
||||
if (code === 200 && data) {
|
||||
message.success('连接测试通过');
|
||||
return;
|
||||
}
|
||||
message.error('连接测试失败');
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
{...formLayout}
|
||||
form={form}
|
||||
layout="vertical"
|
||||
className={styles.form}
|
||||
onValuesChange={(value) => {
|
||||
const { type } = value;
|
||||
if (type) {
|
||||
setSelectedDbType(type);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FormItem name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
|
||||
<Input placeholder="请输入数据库名称" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="type"
|
||||
label="数据库类型"
|
||||
rules={[{ required: true, message: '请选择数据库类型' }]}
|
||||
>
|
||||
<Select
|
||||
style={{ width: '100%' }}
|
||||
placeholder="请选择数据库类型"
|
||||
options={[
|
||||
{ value: 'h2', label: 'h2' },
|
||||
{ value: 'mysql', label: 'mysql' },
|
||||
{ value: 'clickhouse', label: 'clickhouse' },
|
||||
]}
|
||||
/>
|
||||
</FormItem>
|
||||
{selectedDbType === 'h2' ? (
|
||||
<FormItem name="url" label="链接" rules={[{ required: true, message: '请输入链接' }]}>
|
||||
<Input placeholder="请输入链接" />
|
||||
</FormItem>
|
||||
) : (
|
||||
<>
|
||||
<FormItem name="host" label="host" rules={[{ required: true, message: '请输入IP' }]}>
|
||||
<Input placeholder="请输入IP" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="port"
|
||||
label="port"
|
||||
rules={[{ required: true, message: '请输入端口号' }]}
|
||||
>
|
||||
<Input placeholder="请输入端口号" />
|
||||
</FormItem>
|
||||
</>
|
||||
)}
|
||||
<FormItem
|
||||
name="username"
|
||||
label="用户名"
|
||||
rules={[{ required: true, message: '请输入用户名' }]}
|
||||
>
|
||||
<Input placeholder="请输入用户名" />
|
||||
</FormItem>
|
||||
<FormItem name="password" label="密码">
|
||||
<Input.Password placeholder="请输入密码" />
|
||||
</FormItem>
|
||||
<FormItem name="database" label="数据库名称">
|
||||
<Input placeholder="请输入数据库名称" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem name="description" label="描述">
|
||||
<TextArea placeholder="请输入数据库描述" style={{ height: 100 }} />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
testDatabaseConnection();
|
||||
}}
|
||||
>
|
||||
连接测试
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
saveDatabaseConfig();
|
||||
}}
|
||||
>
|
||||
保 存
|
||||
</Button>
|
||||
</Space>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default forwardRef(DatabaseCreateForm);
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Space } from 'antd';
|
||||
import React, { useRef } from 'react';
|
||||
import type { Dispatch } from 'umi';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../../model';
|
||||
import ProCard from '@ant-design/pro-card';
|
||||
import DatabaseCreateForm from './DatabaseCreateForm';
|
||||
|
||||
type Props = {
|
||||
dispatch: Dispatch;
|
||||
domainManger: StateType;
|
||||
};
|
||||
|
||||
const DatabaseSection: React.FC<Props> = ({ domainManger }) => {
|
||||
const { selectDomainId } = domainManger;
|
||||
|
||||
const entityCreateRef = useRef<any>({});
|
||||
|
||||
return (
|
||||
<div style={{ width: 800, margin: '0 auto' }}>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size={20}>
|
||||
<ProCard title="数据库设置" bordered>
|
||||
<DatabaseCreateForm
|
||||
ref={entityCreateRef}
|
||||
domainId={Number(selectDomainId)}
|
||||
onSubmit={() => {}}
|
||||
/>
|
||||
</ProCard>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(DatabaseSection);
|
||||
@@ -0,0 +1,165 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, Form, Input, Modal, Select } from 'antd';
|
||||
import { SENSITIVE_LEVEL_OPTIONS } from '../constant';
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
import SqlEditor from '@/components/SqlEditor';
|
||||
import { message } from 'antd';
|
||||
|
||||
export type CreateFormProps = {
|
||||
dimensionItem: any;
|
||||
onCancel: () => void;
|
||||
bindModalVisible: boolean;
|
||||
dataSourceList: any[];
|
||||
onSubmit: (values: any) => Promise<any>;
|
||||
};
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const { Option } = Select;
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
const DimensionInfoModal: React.FC<CreateFormProps> = ({
|
||||
onCancel,
|
||||
bindModalVisible,
|
||||
dimensionItem,
|
||||
dataSourceList,
|
||||
onSubmit: handleUpdate,
|
||||
}) => {
|
||||
const isEdit = dimensionItem?.id;
|
||||
const [formVals, setFormVals] = useState<any>({
|
||||
roleCode: '',
|
||||
users: [],
|
||||
effectiveTime: 1,
|
||||
});
|
||||
const [form] = Form.useForm();
|
||||
const { setFieldsValue } = form;
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const fieldsValue = await form.validateFields();
|
||||
setFormVals({ ...fieldsValue });
|
||||
try {
|
||||
await handleUpdate(fieldsValue);
|
||||
} catch (error) {
|
||||
message.error('保存失败，接口调用出错');
|
||||
}
|
||||
};
|
||||
|
||||
const setFormVal = () => {
|
||||
setFieldsValue(dimensionItem);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (dimensionItem) {
|
||||
setFormVal();
|
||||
}
|
||||
}, [dimensionItem]);
|
||||
|
||||
const renderFooter = () => {
|
||||
return (
|
||||
<>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button type="primary" onClick={handleSubmit}>
|
||||
完成
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
return (
|
||||
<>
|
||||
<FormItem hidden={true} name="id" label="ID">
|
||||
<Input placeholder="id" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="name"
|
||||
label="维度中文名"
|
||||
rules={[{ required: true, message: '请输入维度中文名' }]}
|
||||
>
|
||||
<Input placeholder="名称不可重复" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="bizName"
|
||||
label="维度英文名"
|
||||
rules={[{ required: true, message: '请输入维度英文名' }]}
|
||||
>
|
||||
<Input placeholder="名称不可重复" disabled={isEdit} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="datasourceId"
|
||||
label="所属数据源"
|
||||
rules={[{ required: true, message: '请选择所属数据源' }]}
|
||||
>
|
||||
<Select placeholder="请选择数据源" disabled={isEdit}>
|
||||
{dataSourceList.map((item) => (
|
||||
<Option key={item.id} value={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="semanticType"
|
||||
label="类型"
|
||||
rules={[{ required: true, message: '请选择维度类型' }]}
|
||||
>
|
||||
<Select placeholder="请选择维度类型">
|
||||
{['CATEGORY', 'ID', 'DATE'].map((item) => (
|
||||
<Option key={item} value={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="sensitiveLevel"
|
||||
label="敏感度"
|
||||
rules={[{ required: true, message: '请选择敏感度' }]}
|
||||
>
|
||||
<Select placeholder="请选择敏感度">
|
||||
{SENSITIVE_LEVEL_OPTIONS.map((item) => (
|
||||
<Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="description"
|
||||
label="维度描述"
|
||||
rules={[{ required: true, message: '请输入维度描述' }]}
|
||||
>
|
||||
<TextArea placeholder="请输入维度描述" />
|
||||
</FormItem>
|
||||
<FormItem name="expr" label="表达式" rules={[{ required: true, message: '请输入表达式' }]}>
|
||||
<SqlEditor height={'150px'} />
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={800}
|
||||
destroyOnClose
|
||||
title="维度信息"
|
||||
style={{ top: 48 }}
|
||||
maskClosable={false}
|
||||
open={bindModalVisible}
|
||||
footer={renderFooter()}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<Form
|
||||
{...formLayout}
|
||||
form={form}
|
||||
initialValues={{
|
||||
...formVals,
|
||||
}}
|
||||
>
|
||||
{renderContent()}
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DimensionInfoModal;
|
||||
@@ -0,0 +1,135 @@
|
||||
import { useState, forwardRef } from 'react';
|
||||
import type { ForwardRefRenderFunction } from 'react';
|
||||
import { Form, Button } from 'antd';
|
||||
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
import DimensionMetricVisibleModal from './DimensionMetricVisibleModal';
|
||||
import DimensionSearchVisibleModal from './DimensionSearchVisibleModal';
|
||||
|
||||
type Props = {
|
||||
themeData: any;
|
||||
metricList: any[];
|
||||
dimensionList: any[];
|
||||
domainId: number;
|
||||
onSubmit: (params?: any) => void;
|
||||
};
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const DimensionMetricVisibleForm: ForwardRefRenderFunction<any, Props> = ({
|
||||
domainId,
|
||||
metricList,
|
||||
dimensionList,
|
||||
themeData,
|
||||
onSubmit,
|
||||
}) => {
|
||||
const [dimensionModalVisible, setDimensionModalVisible] = useState(false);
|
||||
const [dimensionSearchModalVisible, setDimensionSearchModalVisible] = useState(false);
|
||||
const [metricModalVisible, setMetricModalVisible] = useState<boolean>(false);
|
||||
return (
|
||||
<>
|
||||
<Form {...formLayout}>
|
||||
<FormItem
|
||||
label={
|
||||
<FormItemTitle title={'可见维度'} subTitle={'设置可见后，维度将允许在问答中被使用'} />
|
||||
}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setDimensionModalVisible(true);
|
||||
}}
|
||||
>
|
||||
设 置
|
||||
</Button>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label={
|
||||
<FormItemTitle title={'可见指标'} subTitle={'设置可见后，指标将允许在问答中被使用'} />
|
||||
}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setMetricModalVisible(true);
|
||||
}}
|
||||
>
|
||||
设 置
|
||||
</Button>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label={
|
||||
<FormItemTitle
|
||||
title={'可见维度值'}
|
||||
subTitle={'设置可见后，在可见维度设置的基础上，维度值将在搜索时可以被联想出来'}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setDimensionSearchModalVisible(true);
|
||||
}}
|
||||
>
|
||||
设 置
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
{dimensionModalVisible && (
|
||||
<DimensionMetricVisibleModal
|
||||
domainId={domainId}
|
||||
themeData={themeData}
|
||||
settingSourceList={dimensionList}
|
||||
settingType="dimension"
|
||||
visible={dimensionModalVisible}
|
||||
onCancel={() => {
|
||||
setDimensionModalVisible(false);
|
||||
}}
|
||||
onSubmit={() => {
|
||||
onSubmit?.();
|
||||
setDimensionModalVisible(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{dimensionSearchModalVisible && (
|
||||
<DimensionSearchVisibleModal
|
||||
domainId={domainId}
|
||||
settingSourceList={dimensionList.filter((item) => {
|
||||
const blackDimensionList = themeData.visibility?.blackDimIdList;
|
||||
if (Array.isArray(blackDimensionList)) {
|
||||
return !blackDimensionList.includes(item.id);
|
||||
}
|
||||
return false;
|
||||
})}
|
||||
themeData={themeData}
|
||||
visible={dimensionSearchModalVisible}
|
||||
onCancel={() => {
|
||||
setDimensionSearchModalVisible(false);
|
||||
}}
|
||||
onSubmit={() => {
|
||||
onSubmit?.({ from: 'dimensionSearchVisible' });
|
||||
setDimensionSearchModalVisible(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{metricModalVisible && (
|
||||
<DimensionMetricVisibleModal
|
||||
domainId={domainId}
|
||||
themeData={themeData}
|
||||
settingSourceList={metricList}
|
||||
settingType="metric"
|
||||
visible={metricModalVisible}
|
||||
onCancel={() => {
|
||||
setMetricModalVisible(false);
|
||||
}}
|
||||
onSubmit={() => {
|
||||
onSubmit?.();
|
||||
setMetricModalVisible(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default forwardRef(DimensionMetricVisibleForm);
|
||||
@@ -0,0 +1,151 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, Modal, message } from 'antd';
|
||||
import { addDomainExtend, editDomainExtend, getDomainExtendDetailConfig } from '../../service';
|
||||
import DimensionMetricVisibleTransfer from './DimensionMetricVisibleTransfer';
|
||||
type Props = {
|
||||
domainId: number;
|
||||
themeData: any;
|
||||
settingType: 'dimension' | 'metric';
|
||||
settingSourceList: any[];
|
||||
onCancel: () => void;
|
||||
visible: boolean;
|
||||
onSubmit: (params?: any) => void;
|
||||
};
|
||||
|
||||
const dimensionConfig = {
|
||||
blackIdListKey: 'blackDimIdList',
|
||||
visibleIdListKey: 'whiteDimIdList',
|
||||
modalTitle: '问答可见维度信息',
|
||||
titles: ['不可见维度', '可见维度'],
|
||||
};
|
||||
|
||||
const metricConfig = {
|
||||
blackIdListKey: 'blackMetricIdList',
|
||||
visibleIdListKey: 'whiteMetricIdList',
|
||||
modalTitle: '问答可见指标信息',
|
||||
titles: ['不可见指标', '可见指标'],
|
||||
};
|
||||
|
||||
const DimensionMetricVisibleModal: React.FC<Props> = ({
|
||||
domainId,
|
||||
visible,
|
||||
themeData = {},
|
||||
settingType,
|
||||
settingSourceList,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
}) => {
|
||||
const [sourceList, setSourceList] = useState<any[]>([]);
|
||||
const [visibilityData, setVisibilityData] = useState<any>({});
|
||||
const [selectedKeyList, setSelectedKeyList] = useState<string[]>([]);
|
||||
const settingTypeConfig = settingType === 'dimension' ? dimensionConfig : metricConfig;
|
||||
useEffect(() => {
|
||||
const list = settingSourceList.map((item: any) => {
|
||||
const { id, name } = item;
|
||||
return { id, name, type: settingType };
|
||||
});
|
||||
setSourceList(list);
|
||||
}, [settingSourceList]);
|
||||
|
||||
const queryThemeListData: any = async () => {
|
||||
const { code, data } = await getDomainExtendDetailConfig({
|
||||
domainId,
|
||||
});
|
||||
if (code === 200) {
|
||||
setVisibilityData(data.visibility);
|
||||
return;
|
||||
}
|
||||
message.error('获取可见信息失败');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
queryThemeListData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedKeyList(visibilityData?.[settingTypeConfig.visibleIdListKey] || []);
|
||||
}, [visibilityData]);
|
||||
|
||||
const saveEntity = async () => {
|
||||
const { id } = themeData;
|
||||
let saveDomainExtendQuery = addDomainExtend;
|
||||
if (id) {
|
||||
saveDomainExtendQuery = editDomainExtend;
|
||||
}
|
||||
const blackIdList = settingSourceList.reduce((list, item: any) => {
|
||||
const { id: targetId } = item;
|
||||
if (!selectedKeyList.includes(targetId)) {
|
||||
list.push(targetId);
|
||||
}
|
||||
return list;
|
||||
}, []);
|
||||
const params = {
|
||||
...themeData,
|
||||
visibility: themeData.visibility || {},
|
||||
};
|
||||
params.visibility[settingTypeConfig.blackIdListKey] = blackIdList;
|
||||
|
||||
if (!params.visibility.blackDimIdList) {
|
||||
params.visibility.blackDimIdList = [];
|
||||
}
|
||||
if (!params.visibility.blackMetricIdList) {
|
||||
params.visibility.blackMetricIdList = [];
|
||||
}
|
||||
|
||||
const { code, msg } = await saveDomainExtendQuery({
|
||||
...params,
|
||||
id,
|
||||
domainId,
|
||||
});
|
||||
if (code === 200) {
|
||||
onSubmit?.();
|
||||
message.success('保存成功');
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const handleTransferChange = (newTargetKeys: string[]) => {
|
||||
setSelectedKeyList(newTargetKeys);
|
||||
};
|
||||
|
||||
const renderFooter = () => {
|
||||
return (
|
||||
<>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
saveEntity();
|
||||
}}
|
||||
>
|
||||
完成
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
width={1200}
|
||||
destroyOnClose
|
||||
title={settingTypeConfig.modalTitle}
|
||||
maskClosable={false}
|
||||
open={visible}
|
||||
footer={renderFooter()}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<DimensionMetricVisibleTransfer
|
||||
titles={settingTypeConfig.titles}
|
||||
sourceList={sourceList}
|
||||
targetList={selectedKeyList}
|
||||
onChange={(newTargetKeys) => {
|
||||
handleTransferChange(newTargetKeys);
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DimensionMetricVisibleModal;
|
||||
@@ -0,0 +1,88 @@
|
||||
import { Transfer, Tag } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
interface RecordType {
|
||||
key: string;
|
||||
name: string;
|
||||
type: 'dimension' | 'metric';
|
||||
}
|
||||
|
||||
type Props = {
|
||||
sourceList: any[];
|
||||
targetList: string[];
|
||||
titles?: string[];
|
||||
onChange?: (params?: any) => void;
|
||||
transferProps?: Record<string, any>;
|
||||
};
|
||||
|
||||
const DimensionMetricVisibleTransfer: React.FC<Props> = ({
|
||||
sourceList = [],
|
||||
targetList = [],
|
||||
titles,
|
||||
transferProps = {},
|
||||
onChange,
|
||||
}) => {
|
||||
const [transferData, setTransferData] = useState<RecordType[]>([]);
|
||||
const [targetKeys, setTargetKeys] = useState<string[]>(targetList);
|
||||
|
||||
useEffect(() => {
|
||||
setTransferData(
|
||||
sourceList.map(({ id, name, type }: any) => {
|
||||
return {
|
||||
key: id,
|
||||
name,
|
||||
type,
|
||||
};
|
||||
}),
|
||||
);
|
||||
}, [sourceList]);
|
||||
|
||||
useEffect(() => {
|
||||
setTargetKeys(targetList);
|
||||
}, [targetList]);
|
||||
|
||||
const handleChange = (newTargetKeys: string[]) => {
|
||||
setTargetKeys(newTargetKeys);
|
||||
onChange?.(newTargetKeys);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<Transfer
|
||||
dataSource={transferData}
|
||||
showSearch
|
||||
titles={titles || ['不可见维度', '可见维度']}
|
||||
listStyle={{
|
||||
width: 430,
|
||||
height: 500,
|
||||
}}
|
||||
filterOption={(inputValue: string, item: any) => {
|
||||
const { name } = item;
|
||||
if (name.includes(inputValue)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}}
|
||||
targetKeys={targetKeys}
|
||||
onChange={handleChange}
|
||||
render={(item) => (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<span style={{ flex: '1' }}>{item.name}</span>
|
||||
<span style={{ flex: '0 1 40px' }}>
|
||||
{item.type === 'dimension' ? (
|
||||
<Tag color="blue">{'维度'}</Tag>
|
||||
) : item.type === 'metric' ? (
|
||||
<Tag color="orange">{'指标'}</Tag>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{...transferProps}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DimensionMetricVisibleTransfer;
|
||||
@@ -0,0 +1,138 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, Modal, message, Space } from 'antd';
|
||||
import ProCard from '@ant-design/pro-card';
|
||||
import { addDomainExtend, editDomainExtend } from '../../service';
|
||||
import DimensionMetricVisibleTransfer from './DimensionMetricVisibleTransfer';
|
||||
import SqlEditor from '@/components/SqlEditor';
|
||||
type Props = {
|
||||
domainId: number;
|
||||
themeData: any;
|
||||
settingSourceList: any[];
|
||||
onCancel: () => void;
|
||||
visible: boolean;
|
||||
onSubmit: (params?: any) => void;
|
||||
};
|
||||
|
||||
const DimensionSearchVisibleModal: React.FC<Props> = ({
|
||||
domainId,
|
||||
themeData,
|
||||
visible,
|
||||
settingSourceList,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
}) => {
|
||||
const [sourceList, setSourceList] = useState<any[]>([]);
|
||||
const [selectedKeyList, setSelectedKeyList] = useState<string[]>([]);
|
||||
const [dictRules, setDictRules] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
const dictionaryInfos = themeData?.dictionaryInfos;
|
||||
if (Array.isArray(dictionaryInfos)) {
|
||||
const target = dictionaryInfos[0];
|
||||
if (Array.isArray(target?.ruleList)) {
|
||||
setDictRules(target.ruleList[0]);
|
||||
}
|
||||
const selectKeys = dictionaryInfos.map((item: any) => {
|
||||
return item.itemId;
|
||||
});
|
||||
setSelectedKeyList(selectKeys);
|
||||
}
|
||||
}, [themeData]);
|
||||
|
||||
useEffect(() => {
|
||||
const list = settingSourceList.map((item: any) => {
|
||||
const { id, name } = item;
|
||||
return { id, name, type: 'dimension' };
|
||||
});
|
||||
setSourceList(list);
|
||||
}, [settingSourceList]);
|
||||
|
||||
const saveDictBatch = async () => {
|
||||
const dictionaryInfos = selectedKeyList.map((key: string) => {
|
||||
return {
|
||||
itemId: key,
|
||||
type: 'DIMENSION',
|
||||
isDictInfo: true,
|
||||
ruleList: dictRules ? [dictRules] : [],
|
||||
};
|
||||
});
|
||||
const id = themeData?.id;
|
||||
let saveDomainExtendQuery = addDomainExtend;
|
||||
if (id) {
|
||||
saveDomainExtendQuery = editDomainExtend;
|
||||
}
|
||||
const { code, msg } = await saveDomainExtendQuery({
|
||||
dictionaryInfos,
|
||||
domainId,
|
||||
id,
|
||||
});
|
||||
|
||||
if (code === 200) {
|
||||
message.success('保存可见维度值成功');
|
||||
onSubmit?.();
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
const saveDictSetting = async () => {
|
||||
await saveDictBatch();
|
||||
};
|
||||
|
||||
const handleTransferChange = (newTargetKeys: string[]) => {
|
||||
setSelectedKeyList(newTargetKeys);
|
||||
};
|
||||
|
||||
const renderFooter = () => {
|
||||
return (
|
||||
<>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
saveDictSetting();
|
||||
}}
|
||||
>
|
||||
完成
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
width={1200}
|
||||
destroyOnClose
|
||||
title={'可见维度值设置'}
|
||||
maskClosable={false}
|
||||
open={visible}
|
||||
footer={renderFooter()}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size={20}>
|
||||
<ProCard bordered title="可见设置">
|
||||
<DimensionMetricVisibleTransfer
|
||||
titles={['不可见维度值', '可见维度值']}
|
||||
sourceList={sourceList}
|
||||
targetList={selectedKeyList}
|
||||
onChange={(newTargetKeys) => {
|
||||
handleTransferChange(newTargetKeys);
|
||||
}}
|
||||
/>
|
||||
</ProCard>
|
||||
<ProCard bordered title="维度值过滤">
|
||||
<SqlEditor
|
||||
height={'150px'}
|
||||
value={dictRules}
|
||||
onChange={(sql: string) => {
|
||||
setDictRules(sql);
|
||||
}}
|
||||
/>
|
||||
</ProCard>
|
||||
</Space>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DimensionSearchVisibleModal;
|
||||
@@ -0,0 +1,168 @@
|
||||
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
|
||||
import type { ForwardRefRenderFunction } from 'react';
|
||||
import { message, Form, Input, Select, Button } from 'antd';
|
||||
import { addDomainExtend, editDomainExtend } from '../../service';
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
|
||||
import styles from '../style.less';
|
||||
type Props = {
|
||||
entityData: any;
|
||||
metricList: any[];
|
||||
dimensionList: any[];
|
||||
domainId: number;
|
||||
onSubmit: (params?: any) => void;
|
||||
};
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const TextArea = Input.TextArea;
|
||||
|
||||
const EntityCreateForm: ForwardRefRenderFunction<any, Props> = (
|
||||
{ entityData, metricList, dimensionList, domainId, onSubmit },
|
||||
ref,
|
||||
) => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [metricListOptions, setMetricListOptions] = useState<any>([]);
|
||||
const [dimensionListOptions, setDimensionListOptions] = useState<any>([]);
|
||||
|
||||
const getFormValidateFields = async () => {
|
||||
return await form.validateFields();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
if (Object.keys(entityData).length === 0) {
|
||||
return;
|
||||
}
|
||||
const { detailData = {}, names = [] } = entityData;
|
||||
if (!detailData.dimensionIds) {
|
||||
entityData = {
|
||||
...entityData,
|
||||
detailData: {
|
||||
...detailData,
|
||||
dimensionIds: [],
|
||||
},
|
||||
};
|
||||
}
|
||||
if (!detailData.metricIds) {
|
||||
entityData = {
|
||||
...entityData,
|
||||
detailData: {
|
||||
...detailData,
|
||||
metricIds: [],
|
||||
},
|
||||
};
|
||||
}
|
||||
form.setFieldsValue({ ...entityData, name: names.join(',') });
|
||||
}, [entityData]);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getFormValidateFields,
|
||||
}));
|
||||
useEffect(() => {
|
||||
const metricOption = metricList.map((item: any) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
setMetricListOptions(metricOption);
|
||||
}, [metricList]);
|
||||
|
||||
useEffect(() => {
|
||||
const dimensionEnum = dimensionList.map((item: any) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
setDimensionListOptions(dimensionEnum);
|
||||
}, [dimensionList]);
|
||||
|
||||
const saveEntity = async () => {
|
||||
const values = await form.validateFields();
|
||||
const { id, name } = values;
|
||||
let saveDomainExtendQuery = addDomainExtend;
|
||||
if (id) {
|
||||
saveDomainExtendQuery = editDomainExtend;
|
||||
}
|
||||
const { code, msg, data } = await saveDomainExtendQuery({
|
||||
entity: {
|
||||
...values,
|
||||
names: name.split(','),
|
||||
},
|
||||
domainId,
|
||||
});
|
||||
|
||||
if (code === 200) {
|
||||
form.setFieldValue('id', data);
|
||||
onSubmit?.();
|
||||
message.success('保存成功');
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form {...formLayout} form={form} layout="vertical" className={styles.form}>
|
||||
<FormItem hidden={true} name="id" label="ID">
|
||||
<Input placeholder="id" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="name"
|
||||
label="实体名称"
|
||||
rules={[{ required: true, message: '请输入实体名称' }]}
|
||||
>
|
||||
<TextArea
|
||||
placeholder="请输入实体名称,多个实体名称以英文逗号分隔"
|
||||
style={{ height: 100 }}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="entityIds"
|
||||
label="唯一标识"
|
||||
rules={[{ required: true, message: '请选择实体标识' }]}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
allowClear
|
||||
style={{ width: '100%' }}
|
||||
placeholder="请选择主体标识"
|
||||
options={dimensionListOptions}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name={['detailData', 'dimensionIds']} label="维度信息">
|
||||
<Select
|
||||
mode="multiple"
|
||||
allowClear
|
||||
style={{ width: '100%' }}
|
||||
placeholder="请选择展示维度信息"
|
||||
options={dimensionListOptions}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name={['detailData', 'metricIds']} label="指标信息">
|
||||
<Select
|
||||
mode="multiple"
|
||||
allowClear
|
||||
style={{ width: '100%' }}
|
||||
placeholder="请选择展示指标信息"
|
||||
options={metricListOptions}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
saveEntity();
|
||||
}}
|
||||
>
|
||||
保 存
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default forwardRef(EntityCreateForm);
|
||||
@@ -0,0 +1,102 @@
|
||||
import { message, Space } from 'antd';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import type { Dispatch } from 'umi';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../../model';
|
||||
import { getDomainExtendConfig } from '../../service';
|
||||
import ProCard from '@ant-design/pro-card';
|
||||
import EntityCreateForm from './EntityCreateForm';
|
||||
import MetricSettingForm from './MetricSettingForm';
|
||||
import DimensionMetricVisibleForm from './DimensionMetricVisibleForm';
|
||||
|
||||
type Props = {
|
||||
dispatch: Dispatch;
|
||||
domainManger: StateType;
|
||||
};
|
||||
|
||||
const EntitySection: React.FC<Props> = ({ domainManger, dispatch }) => {
|
||||
const { selectDomainId, dimensionList, metricList } = domainManger;
|
||||
|
||||
const [entityData, setEntityData] = useState<any>({});
|
||||
|
||||
const [themeData, setThemeData] = useState<any>({});
|
||||
|
||||
const entityCreateRef = useRef<any>({});
|
||||
|
||||
const queryThemeListData: any = async () => {
|
||||
const { code, data } = await getDomainExtendConfig({
|
||||
domainId: selectDomainId,
|
||||
});
|
||||
if (code === 200) {
|
||||
const target = data?.[0] || {};
|
||||
if (target) {
|
||||
setThemeData(target);
|
||||
setEntityData({
|
||||
id: target.id,
|
||||
...target.entity,
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
message.error('获取主题域解析词失败');
|
||||
};
|
||||
|
||||
const initPage = async () => {
|
||||
queryThemeListData();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
initPage();
|
||||
}, [selectDomainId]);
|
||||
|
||||
return (
|
||||
<div style={{ width: 800, margin: '0 auto' }}>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size={20}>
|
||||
<ProCard bordered title="问答可见">
|
||||
<DimensionMetricVisibleForm
|
||||
themeData={themeData}
|
||||
domainId={Number(selectDomainId)}
|
||||
metricList={metricList}
|
||||
dimensionList={dimensionList}
|
||||
onSubmit={(params: any = {}) => {
|
||||
if (params.from === 'dimensionSearchVisible') {
|
||||
dispatch({
|
||||
type: 'domainManger/queryDimensionList',
|
||||
payload: {
|
||||
domainId: selectDomainId,
|
||||
},
|
||||
});
|
||||
}
|
||||
queryThemeListData();
|
||||
}}
|
||||
/>
|
||||
</ProCard>
|
||||
<ProCard bordered title="默认指标">
|
||||
<MetricSettingForm
|
||||
domainId={Number(selectDomainId)}
|
||||
themeData={themeData}
|
||||
metricList={metricList}
|
||||
onSubmit={() => {
|
||||
queryThemeListData();
|
||||
}}
|
||||
/>
|
||||
</ProCard>
|
||||
<ProCard title="实体" bordered>
|
||||
<EntityCreateForm
|
||||
ref={entityCreateRef}
|
||||
domainId={Number(selectDomainId)}
|
||||
entityData={entityData}
|
||||
metricList={metricList}
|
||||
dimensionList={dimensionList}
|
||||
onSubmit={() => {
|
||||
queryThemeListData();
|
||||
}}
|
||||
/>
|
||||
</ProCard>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(EntitySection);
|
||||
@@ -0,0 +1,187 @@
|
||||
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
|
||||
import type { ForwardRefRenderFunction } from 'react';
|
||||
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
import { message, Form, Input, Select, Button, InputNumber } from 'antd';
|
||||
import { addDomainExtend, editDomainExtend } from '../../service';
|
||||
|
||||
import styles from '../style.less';
|
||||
type Props = {
|
||||
themeData: any;
|
||||
metricList: any[];
|
||||
domainId: number;
|
||||
onSubmit: (params?: any) => void;
|
||||
};
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
|
||||
const MetricSettingForm: ForwardRefRenderFunction<any, Props> = (
|
||||
{ metricList, domainId, themeData: uniqueMetricData },
|
||||
ref,
|
||||
) => {
|
||||
const [form] = Form.useForm();
|
||||
const [metricListOptions, setMetricListOptions] = useState<any>([]);
|
||||
const [unitState, setUnit] = useState<number | null>();
|
||||
const [periodState, setPeriod] = useState<string>();
|
||||
const getFormValidateFields = async () => {
|
||||
return await form.validateFields();
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getFormValidateFields,
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
setUnit(null);
|
||||
setPeriod('');
|
||||
if (Object.keys(uniqueMetricData).length === 0) {
|
||||
return;
|
||||
}
|
||||
const { defaultMetrics = [], id } = uniqueMetricData;
|
||||
const defaultMetric = defaultMetrics[0];
|
||||
const recordId = id === -1 ? undefined : id;
|
||||
if (defaultMetric) {
|
||||
const { period, unit } = defaultMetric;
|
||||
setUnit(unit);
|
||||
setPeriod(period);
|
||||
form.setFieldsValue({
|
||||
...defaultMetric,
|
||||
id: recordId,
|
||||
});
|
||||
} else {
|
||||
form.setFieldsValue({
|
||||
id: recordId,
|
||||
});
|
||||
}
|
||||
}, [uniqueMetricData]);
|
||||
|
||||
useEffect(() => {
|
||||
const metricOption = metricList.map((item: any) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
setMetricListOptions(metricOption);
|
||||
}, [metricList]);
|
||||
|
||||
const saveEntity = async () => {
|
||||
const values = await form.validateFields();
|
||||
const { id } = values;
|
||||
let saveDomainExtendQuery = addDomainExtend;
|
||||
if (id) {
|
||||
saveDomainExtendQuery = editDomainExtend;
|
||||
}
|
||||
const { code, msg, data } = await saveDomainExtendQuery({
|
||||
defaultMetrics: [{ ...values }],
|
||||
domainId,
|
||||
id,
|
||||
});
|
||||
|
||||
if (code === 200) {
|
||||
form.setFieldValue('id', data);
|
||||
message.success('保存成功');
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
{...formLayout}
|
||||
form={form}
|
||||
layout="vertical"
|
||||
className={styles.form}
|
||||
initialValues={{
|
||||
unit: 7,
|
||||
period: 'DAY',
|
||||
}}
|
||||
>
|
||||
<FormItem hidden={true} name="id" label="ID">
|
||||
<Input placeholder="id" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name={'metricId'}
|
||||
label={
|
||||
<FormItemTitle
|
||||
title={'指标'}
|
||||
subTitle={'问答搜索结果选择中，如果没有指定指标，将会采用默认指标进行展示'}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Select
|
||||
allowClear
|
||||
showSearch
|
||||
style={{ width: '100%' }}
|
||||
placeholder="请选择展示指标信息"
|
||||
options={metricListOptions}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label={
|
||||
<FormItemTitle
|
||||
title={'时间范围'}
|
||||
subTitle={'问答搜索结果选择中，如果没有指定时间范围，将会采用默认时间范围'}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Input.Group compact>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
lineHeight: '32px',
|
||||
marginRight: '8px',
|
||||
}}
|
||||
>
|
||||
最近
|
||||
</span>
|
||||
<InputNumber
|
||||
value={unitState}
|
||||
style={{ width: '120px' }}
|
||||
onChange={(value) => {
|
||||
setUnit(value);
|
||||
form.setFieldValue('unit', value);
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
value={periodState}
|
||||
style={{ width: '100px' }}
|
||||
onChange={(value) => {
|
||||
form.setFieldValue('period', value);
|
||||
setPeriod(value);
|
||||
}}
|
||||
>
|
||||
<Option value="DAY">天</Option>
|
||||
<Option value="WEEK">周</Option>
|
||||
<Option value="MONTH">月</Option>
|
||||
<Option value="YEAR">年</Option>
|
||||
</Select>
|
||||
</Input.Group>
|
||||
</FormItem>
|
||||
|
||||
<FormItem name="unit" hidden={true}>
|
||||
<InputNumber />
|
||||
</FormItem>
|
||||
<FormItem name="period" hidden={true}>
|
||||
<Input />
|
||||
</FormItem>
|
||||
|
||||
<FormItem>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
saveEntity();
|
||||
}}
|
||||
>
|
||||
保 存
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default forwardRef(MetricSettingForm);
|
||||
@@ -0,0 +1,288 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Form, Button, Modal, Steps, Input, Select, Switch, InputNumber } from 'antd';
|
||||
import MetricMeasuresFormTable from './MetricMeasuresFormTable';
|
||||
import { SENSITIVE_LEVEL_OPTIONS } from '../constant';
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
|
||||
import styles from './style.less';
|
||||
import { getMeasureListByDomainId } from '../service';
|
||||
|
||||
export type CreateFormProps = {
|
||||
domainId: number;
|
||||
createModalVisible: boolean;
|
||||
metricItem: any;
|
||||
onCancel?: () => void;
|
||||
onSubmit: (values: any) => void;
|
||||
};
|
||||
|
||||
const { Step } = Steps;
|
||||
const FormItem = Form.Item;
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
|
||||
const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
|
||||
domainId,
|
||||
onCancel,
|
||||
createModalVisible,
|
||||
metricItem,
|
||||
onSubmit,
|
||||
}) => {
|
||||
const isEdit = !!metricItem?.id;
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const formValRef = useRef({} as any);
|
||||
const [form] = Form.useForm();
|
||||
const updateFormVal = (val: SaveDataSetForm) => {
|
||||
formValRef.current = val;
|
||||
};
|
||||
|
||||
const [classMeasureList, setClassMeasureList] = useState<any[]>([]);
|
||||
|
||||
const [exprTypeParamsState, setExprTypeParamsState] = useState<any>([]);
|
||||
|
||||
const [exprSql, setExprSql] = useState<string>('');
|
||||
|
||||
const [isPercentState, setIsPercentState] = useState<boolean>(false);
|
||||
|
||||
const forward = () => setCurrentStep(currentStep + 1);
|
||||
const backward = () => setCurrentStep(currentStep - 1);
|
||||
|
||||
const queryClassMeasureList = async () => {
|
||||
const { code, data } = await getMeasureListByDomainId(domainId);
|
||||
if (code === 200) {
|
||||
setClassMeasureList(data);
|
||||
return;
|
||||
}
|
||||
setClassMeasureList([]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
queryClassMeasureList();
|
||||
}, []);
|
||||
|
||||
const handleNext = async () => {
|
||||
const fieldsValue = await form.validateFields();
|
||||
const submitForm = {
|
||||
...formValRef.current,
|
||||
...fieldsValue,
|
||||
typeParams: {
|
||||
expr: exprSql,
|
||||
measures: exprTypeParamsState,
|
||||
},
|
||||
dataFormatType: isPercentState ? 'percent' : '',
|
||||
};
|
||||
updateFormVal(submitForm);
|
||||
if (currentStep < 1) {
|
||||
forward();
|
||||
} else {
|
||||
onSubmit?.(submitForm);
|
||||
}
|
||||
};
|
||||
|
||||
const initData = () => {
|
||||
const {
|
||||
id,
|
||||
name,
|
||||
bizName,
|
||||
description,
|
||||
sensitiveLevel,
|
||||
typeParams: typeParams,
|
||||
dataFormat,
|
||||
dataFormatType,
|
||||
} = metricItem as any;
|
||||
const isPercent = dataFormatType === 'percent';
|
||||
const initValue = {
|
||||
id,
|
||||
name,
|
||||
bizName,
|
||||
sensitiveLevel,
|
||||
description,
|
||||
isPercent,
|
||||
dataFormat: dataFormat || {
|
||||
decimalPlaces: 2,
|
||||
needMultiply100: false,
|
||||
},
|
||||
};
|
||||
const editInitFormVal = {
|
||||
...formValRef.current,
|
||||
...initValue,
|
||||
};
|
||||
updateFormVal(editInitFormVal);
|
||||
form.setFieldsValue(initValue);
|
||||
setExprTypeParamsState(typeParams.measures);
|
||||
setExprSql(typeParams.expr);
|
||||
setIsPercentState(isPercent);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
initData();
|
||||
} else {
|
||||
// initFields([]);
|
||||
}
|
||||
}, [metricItem]);
|
||||
|
||||
const renderContent = () => {
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<MetricMeasuresFormTable
|
||||
typeParams={{
|
||||
measures: exprTypeParamsState,
|
||||
expr: exprSql,
|
||||
}}
|
||||
measuresList={classMeasureList}
|
||||
onFieldChange={(typeParams: any) => {
|
||||
setExprTypeParamsState([...typeParams]);
|
||||
}}
|
||||
onSqlChange={(sql: string) => {
|
||||
setExprSql(sql);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormItem hidden={true} name="id" label="ID">
|
||||
<Input placeholder="id" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="name"
|
||||
label="指标中文名"
|
||||
rules={[{ required: true, message: '请输入指标中文名' }]}
|
||||
>
|
||||
<Input placeholder="名称不可重复" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="bizName"
|
||||
label="指标英文名"
|
||||
rules={[{ required: true, message: '请输入指标英文名' }]}
|
||||
>
|
||||
<Input placeholder="名称不可重复" disabled={isEdit} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="sensitiveLevel"
|
||||
label="敏感度"
|
||||
rules={[{ required: true, message: '请选择敏感度' }]}
|
||||
>
|
||||
<Select placeholder="请选择敏感度">
|
||||
{SENSITIVE_LEVEL_OPTIONS.map((item) => (
|
||||
<Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="description"
|
||||
label="指标描述"
|
||||
rules={[{ required: true, message: '请输入指标描述' }]}
|
||||
>
|
||||
<TextArea placeholder="请输入指标描述" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label={
|
||||
<FormItemTitle
|
||||
title={'是否展示为百分比'}
|
||||
subTitle={'开启后，指标数据展示时会根据配置进行格式化，如0.02 -> 2%'}
|
||||
/>
|
||||
}
|
||||
name="isPercent"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</FormItem>
|
||||
{isPercentState && (
|
||||
<>
|
||||
<FormItem
|
||||
label={
|
||||
<FormItemTitle
|
||||
title={'小数位数'}
|
||||
subTitle={'对小数位数进行设置，如保留两位，0.021252 -> 2.12%'}
|
||||
/>
|
||||
}
|
||||
name={['dataFormat', 'decimalPlaces']}
|
||||
>
|
||||
<InputNumber placeholder="请输入需要保留小数位数" style={{ width: '300px' }} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label={
|
||||
<FormItemTitle
|
||||
title={'原始值是否乘以100'}
|
||||
subTitle={'如 原始值0.001 ->展示值0.1% '}
|
||||
/>
|
||||
// <FormItemTitle
|
||||
// title={'仅添加百分号'}
|
||||
// subTitle={'开启后，会对原始数值直接加%，如0.02 -> 0.02%'}
|
||||
// />
|
||||
}
|
||||
name={['dataFormat', 'needMultiply100']}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</FormItem>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
const renderFooter = () => {
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<>
|
||||
<Button style={{ float: 'left' }} onClick={backward}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button type="primary" onClick={handleNext}>
|
||||
完成
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button type="primary" onClick={handleNext}>
|
||||
下一步
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
forceRender
|
||||
width={1300}
|
||||
style={{ top: 48 }}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title={`${isEdit ? '编辑' : '新建'}指标`}
|
||||
maskClosable={false}
|
||||
open={createModalVisible}
|
||||
footer={renderFooter()}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
|
||||
<Step title="基本信息" />
|
||||
<Step title="度量信息" />
|
||||
</Steps>
|
||||
<Form
|
||||
{...formLayout}
|
||||
form={form}
|
||||
initialValues={{
|
||||
...formValRef.current,
|
||||
}}
|
||||
onValuesChange={(value) => {
|
||||
const { isPercent } = value;
|
||||
if (isPercent !== undefined) {
|
||||
setIsPercentState(isPercent);
|
||||
}
|
||||
}}
|
||||
className={styles.form}
|
||||
>
|
||||
{renderContent()}
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetricInfoCreateForm;
|
||||
@@ -0,0 +1,192 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Button, Input, Space } from 'antd';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import ProCard from '@ant-design/pro-card';
|
||||
import SqlEditor from '@/components/SqlEditor';
|
||||
import BindMeasuresTable from './BindMeasuresTable';
|
||||
|
||||
type Props = {
|
||||
typeParams: any;
|
||||
measuresList: any[];
|
||||
onFieldChange: (measures: any[]) => void;
|
||||
onSqlChange: (sql: string) => void;
|
||||
};
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
const MetricMeasuresFormTable: React.FC<Props> = ({
|
||||
typeParams,
|
||||
measuresList,
|
||||
onFieldChange,
|
||||
onSqlChange,
|
||||
}) => {
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
const [measuresModalVisible, setMeasuresModalVisible] = useState<boolean>(false);
|
||||
const [measuresParams, setMeasuresParams] = useState(
|
||||
typeParams || {
|
||||
expr: '',
|
||||
measures: [],
|
||||
},
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setMeasuresParams({ ...typeParams });
|
||||
}, [typeParams]);
|
||||
|
||||
const [exprString, setExprString] = useState(typeParams?.expr || '');
|
||||
|
||||
const columns = [
|
||||
{
|
||||
dataIndex: 'bizName',
|
||||
title: '度量名称',
|
||||
},
|
||||
// {
|
||||
// dataIndex: 'alias',
|
||||
// title: '别名',
|
||||
// render: (_: any, record: any) => {
|
||||
// const { alias, name } = record;
|
||||
// const { measures } = measuresParams;
|
||||
// return (
|
||||
// <Input
|
||||
// placeholder="请输入别名"
|
||||
// value={alias}
|
||||
// onChange={(event) => {
|
||||
// const { value } = event.target;
|
||||
// const list = measures.map((item: any) => {
|
||||
// if (item.name === name) {
|
||||
// return {
|
||||
// ...item,
|
||||
// alias: value,
|
||||
// };
|
||||
// }
|
||||
// return item;
|
||||
// });
|
||||
// onFieldChange?.(list);
|
||||
// }}
|
||||
// />
|
||||
// );
|
||||
// },
|
||||
// },
|
||||
{
|
||||
dataIndex: 'constraint',
|
||||
title: '限定条件',
|
||||
tooltip:
|
||||
'所用于过滤的维度需要存在于"维度"列表，不需要加where关键字。比如：维度A="值1" and 维度B="值2"',
|
||||
render: (_: any, record: any) => {
|
||||
const { constraint, name } = record;
|
||||
const { measures } = measuresParams;
|
||||
return (
|
||||
<TextArea
|
||||
placeholder="请输入限定条件"
|
||||
value={constraint}
|
||||
onChange={(event) => {
|
||||
const { value } = event.target;
|
||||
const list = measures.map((item: any) => {
|
||||
if (item.name === name) {
|
||||
return {
|
||||
...item,
|
||||
constraint: value,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
onFieldChange?.(list);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'x',
|
||||
valueType: 'option',
|
||||
render: (_: any, record: any) => {
|
||||
const { name } = record;
|
||||
return (
|
||||
<Space>
|
||||
<a
|
||||
key="deleteBtn"
|
||||
onClick={() => {
|
||||
const { measures } = measuresParams;
|
||||
const list = measures.filter((item: any) => {
|
||||
return item.name !== name;
|
||||
});
|
||||
onFieldChange?.(list);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<ProTable
|
||||
actionRef={actionRef}
|
||||
headerTitle="度量列表"
|
||||
tooltip="一般用于在“指标”列表已有指标的基础上加工新指标，比如：指标NEW1=指标A/100，指标NEW2=指标B/指标C。（若需用到多个已有指标，可以点击右上角“增加度量”）"
|
||||
rowKey="name"
|
||||
columns={columns}
|
||||
dataSource={measuresParams?.measures || []}
|
||||
pagination={false}
|
||||
search={false}
|
||||
size="small"
|
||||
options={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="create"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setMeasuresModalVisible(true);
|
||||
}}
|
||||
>
|
||||
增加度量
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<ProCard
|
||||
title={'度量表达式'}
|
||||
tooltip="若为指标NEW1，则填写：指标A/100。若为指标NEW2，则填写：指标B/指标C"
|
||||
>
|
||||
<SqlEditor
|
||||
value={exprString}
|
||||
onChange={(sql: string) => {
|
||||
const expr = sql;
|
||||
setExprString(expr);
|
||||
onSqlChange?.(expr);
|
||||
}}
|
||||
height={'150px'}
|
||||
/>
|
||||
</ProCard>
|
||||
</Space>
|
||||
{measuresModalVisible && (
|
||||
<BindMeasuresTable
|
||||
measuresList={measuresList}
|
||||
selectedMeasuresList={measuresParams?.measures || []}
|
||||
onSubmit={async (values: any[]) => {
|
||||
const measures = values.map(({ bizName, name, expr, datasourceId }) => {
|
||||
return {
|
||||
bizName,
|
||||
name,
|
||||
expr,
|
||||
datasourceId,
|
||||
};
|
||||
});
|
||||
onFieldChange?.(measures);
|
||||
setMeasuresModalVisible(false);
|
||||
}}
|
||||
onCancel={() => {
|
||||
setMeasuresModalVisible(false);
|
||||
}}
|
||||
createModalVisible={measuresModalVisible}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetricMeasuresFormTable;
|
||||
@@ -0,0 +1,143 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Form, Input, Switch, message } from 'antd';
|
||||
import SelectPartenr from '@/components/SelectPartner';
|
||||
import SelectTMEPerson from '@/components/SelectTMEPerson';
|
||||
import { connect } from 'umi';
|
||||
import type { Dispatch } from 'umi';
|
||||
import type { StateType } from '../../model';
|
||||
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
|
||||
import { updateDomain, getDomainDetail } from '../../service';
|
||||
|
||||
import styles from '../style.less';
|
||||
type Props = {
|
||||
dispatch: Dispatch;
|
||||
domainManger: StateType;
|
||||
onSubmit?: (data?: any) => void;
|
||||
onValuesChange?: (value, values) => void;
|
||||
};
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const PermissionAdminForm: React.FC<Props> = ({ domainManger, onValuesChange }) => {
|
||||
const [form] = Form.useForm();
|
||||
const [isOpenState, setIsOpenState] = useState<boolean>(true);
|
||||
const [classDetail, setClassDetail] = useState<any>({});
|
||||
const { selectDomainId } = domainManger;
|
||||
const { APP_TARGET } = process.env;
|
||||
|
||||
const queryClassDetail = async (domainId: number) => {
|
||||
const { code, msg, data } = await getDomainDetail({ domainId });
|
||||
if (code === 200) {
|
||||
setClassDetail(data);
|
||||
const fieldsValue = {
|
||||
...data,
|
||||
};
|
||||
fieldsValue.admins = fieldsValue.admins || [];
|
||||
fieldsValue.viewers = fieldsValue.viewers || [];
|
||||
fieldsValue.viewOrgs = fieldsValue.viewOrgs || [];
|
||||
fieldsValue.isOpen = !!fieldsValue.isOpen;
|
||||
setIsOpenState(fieldsValue.isOpen);
|
||||
form.setFieldsValue(fieldsValue);
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
queryClassDetail(selectDomainId);
|
||||
}, [selectDomainId]);
|
||||
|
||||
const saveAuth = async () => {
|
||||
const values = await form.validateFields();
|
||||
const { admins, isOpen, viewOrgs = [], viewers = [] } = values;
|
||||
const queryClassData = {
|
||||
...classDetail,
|
||||
admins,
|
||||
viewOrgs,
|
||||
viewers,
|
||||
isOpen: isOpen ? 1 : 0,
|
||||
};
|
||||
const { code, msg } = await updateDomain(queryClassData);
|
||||
if (code === 200) {
|
||||
// message.success('保存成功');
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onValuesChange={(value, values) => {
|
||||
const { isOpen } = value;
|
||||
if (isOpen !== undefined) {
|
||||
setIsOpenState(isOpen);
|
||||
}
|
||||
saveAuth();
|
||||
onValuesChange?.(value, values);
|
||||
}}
|
||||
className={styles.form}
|
||||
>
|
||||
<FormItem hidden={true} name="groupId" label="ID">
|
||||
<Input placeholder="groupId" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="admins"
|
||||
label={
|
||||
<FormItemTitle title={'管理员'} subTitle={'管理员将拥有主题域下所有编辑及访问权限'} />
|
||||
}
|
||||
>
|
||||
<SelectTMEPerson placeholder="请邀请团队成员" />
|
||||
</FormItem>
|
||||
|
||||
<Form.Item
|
||||
label={
|
||||
<FormItemTitle
|
||||
title={'设为公开'}
|
||||
subTitle={
|
||||
'公开后,所有用户将可使用主题域下低/中敏感度资源，高敏感度资源需通过资源列表进行授权'
|
||||
}
|
||||
/>
|
||||
}
|
||||
name="isOpen"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
{!isOpenState && (
|
||||
<>
|
||||
{APP_TARGET === 'inner' && (
|
||||
<FormItem name="viewOrgs" label="按组织">
|
||||
<SelectPartenr
|
||||
type="selectedDepartment"
|
||||
treeSelectProps={{
|
||||
placeholder: '请选择需要授权的部门',
|
||||
}}
|
||||
/>
|
||||
</FormItem>
|
||||
)}
|
||||
<FormItem name="viewers" label="按个人">
|
||||
<SelectTMEPerson placeholder="请选择需要授权的个人" />
|
||||
</FormItem>
|
||||
</>
|
||||
)}
|
||||
{/* <FormItem>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
saveAuth();
|
||||
}}
|
||||
>
|
||||
保 存
|
||||
</Button>
|
||||
</FormItem> */}
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(PermissionAdminForm);
|
||||
@@ -0,0 +1,202 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { Button, message, Form, Space, Drawer, Input } from 'antd';
|
||||
import { ProCard } from '@ant-design/pro-components';
|
||||
import { connect } from 'umi';
|
||||
import { createGroupAuth, updateGroupAuth } from '../../service';
|
||||
import PermissionCreateForm from './PermissionCreateForm';
|
||||
import type { StateType } from '../../model';
|
||||
import SqlEditor from '@/components/SqlEditor';
|
||||
import DimensionMetricVisibleTransfer from '../Entity/DimensionMetricVisibleTransfer';
|
||||
import styles from '../style.less';
|
||||
|
||||
type Props = {
|
||||
domainManger: StateType;
|
||||
permissonData: any;
|
||||
domainId: number;
|
||||
onCancel: () => void;
|
||||
visible: boolean;
|
||||
onSubmit: (params?: any) => void;
|
||||
};
|
||||
const FormItem = Form.Item;
|
||||
const TextArea = Input.TextArea;
|
||||
const PermissionCreateDrawer: React.FC<Props> = ({
|
||||
domainManger,
|
||||
visible,
|
||||
permissonData,
|
||||
domainId,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
}) => {
|
||||
const { dimensionList, metricList } = domainManger;
|
||||
const [form] = Form.useForm();
|
||||
const basicInfoFormRef = useRef<any>(null);
|
||||
const [sourceDimensionList, setSourceDimensionList] = useState<any[]>([]);
|
||||
const [sourceMetricList, setSourceMetricList] = useState<any[]>([]);
|
||||
const [selectedDimensionKeyList, setSelectedDimensionKeyList] = useState<string[]>([]);
|
||||
const [selectedMetricKeyList, setSelectedMetricKeyList] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const list = dimensionList.reduce((highList: any[], item: any) => {
|
||||
const { name, bizName, sensitiveLevel } = item;
|
||||
if (sensitiveLevel === 2) {
|
||||
highList.push({ id: bizName, name, type: 'dimension' });
|
||||
}
|
||||
return highList;
|
||||
}, []);
|
||||
setSourceDimensionList(list);
|
||||
}, [dimensionList]);
|
||||
|
||||
useEffect(() => {
|
||||
const list = metricList.reduce((highList: any[], item: any) => {
|
||||
const { name, bizName, sensitiveLevel } = item;
|
||||
if (sensitiveLevel === 2) {
|
||||
highList.push({ id: bizName, name, type: 'metric' });
|
||||
}
|
||||
return highList;
|
||||
}, []);
|
||||
setSourceMetricList(list);
|
||||
}, [metricList]);
|
||||
|
||||
const saveAuth = async () => {
|
||||
const basicInfoFormValues = await basicInfoFormRef.current.formRef.validateFields();
|
||||
const values = await form.validateFields();
|
||||
const { dimensionFilters, dimensionFilterDescription } = values;
|
||||
|
||||
const { authRules = [] } = permissonData;
|
||||
let target = authRules?.[0];
|
||||
if (!target) {
|
||||
target = { dimensions: dimensionList };
|
||||
} else {
|
||||
target.dimensions = dimensionList;
|
||||
}
|
||||
permissonData.authRules = [target];
|
||||
|
||||
let saveAuthQuery = createGroupAuth;
|
||||
if (basicInfoFormValues.groupId) {
|
||||
saveAuthQuery = updateGroupAuth;
|
||||
}
|
||||
const { code, msg } = await saveAuthQuery({
|
||||
...basicInfoFormValues,
|
||||
dimensionFilters: [dimensionFilters],
|
||||
dimensionFilterDescription,
|
||||
authRules: [
|
||||
{
|
||||
dimensions: selectedDimensionKeyList,
|
||||
metrics: selectedMetricKeyList,
|
||||
},
|
||||
],
|
||||
domainId,
|
||||
});
|
||||
|
||||
if (code === 200) {
|
||||
onSubmit?.();
|
||||
message.success('保存成功');
|
||||
return;
|
||||
}
|
||||
message.error(msg);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
const { dimensionFilters, dimensionFilterDescription } = permissonData;
|
||||
form.setFieldsValue({
|
||||
dimensionFilterDescription,
|
||||
dimensionFilters: Array.isArray(dimensionFilters) ? dimensionFilters[0] || '' : '',
|
||||
});
|
||||
|
||||
setSelectedDimensionKeyList(permissonData?.authRules?.[0]?.dimensions || []);
|
||||
setSelectedMetricKeyList(permissonData?.authRules?.[0]?.metrics || []);
|
||||
}, [permissonData]);
|
||||
|
||||
const renderFooter = () => {
|
||||
return (
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Space>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
saveAuth();
|
||||
}}
|
||||
>
|
||||
完成
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer
|
||||
width={'100%'}
|
||||
className={styles.permissionDrawer}
|
||||
destroyOnClose
|
||||
title={'权限组信息'}
|
||||
maskClosable={false}
|
||||
open={visible}
|
||||
footer={renderFooter()}
|
||||
onClose={onCancel}
|
||||
>
|
||||
<div style={{ overflow: 'auto', margin: '0 auto', width: '1000px' }}>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size={20}>
|
||||
<ProCard title="基本信息" bordered>
|
||||
<PermissionCreateForm
|
||||
ref={basicInfoFormRef}
|
||||
permissonData={permissonData}
|
||||
domainId={domainId}
|
||||
/>
|
||||
</ProCard>
|
||||
|
||||
<ProCard title="列权限" bordered>
|
||||
<DimensionMetricVisibleTransfer
|
||||
titles={['未授权维度/指标', '已授权维度/指标']}
|
||||
sourceList={[...sourceDimensionList, ...sourceMetricList]}
|
||||
targetList={[...selectedDimensionKeyList, ...selectedMetricKeyList]}
|
||||
onChange={(bizNameList: string[]) => {
|
||||
const dimensionKeyChangeList = dimensionList.reduce(
|
||||
(dimensionChangeList: string[], item: any) => {
|
||||
if (bizNameList.includes(item.bizName)) {
|
||||
dimensionChangeList.push(item.bizName);
|
||||
}
|
||||
return dimensionChangeList;
|
||||
},
|
||||
[],
|
||||
);
|
||||
const metricKeyChangeList = metricList.reduce(
|
||||
(metricChangeList: string[], item: any) => {
|
||||
if (bizNameList.includes(item.bizName)) {
|
||||
metricChangeList.push(item.bizName);
|
||||
}
|
||||
return metricChangeList;
|
||||
},
|
||||
[],
|
||||
);
|
||||
setSelectedDimensionKeyList(dimensionKeyChangeList);
|
||||
setSelectedMetricKeyList(metricKeyChangeList);
|
||||
}}
|
||||
/>
|
||||
</ProCard>
|
||||
|
||||
<ProCard bordered title="行权限">
|
||||
<div>
|
||||
<Form form={form} layout="vertical">
|
||||
<FormItem name="dimensionFilters" label="表达式">
|
||||
<SqlEditor height={'150px'} />
|
||||
</FormItem>
|
||||
<FormItem name="dimensionFilterDescription" label="描述">
|
||||
<TextArea placeholder="行权限描述" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</ProCard>
|
||||
</Space>
|
||||
</div>
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(PermissionCreateDrawer);
|
||||
@@ -0,0 +1,74 @@
|
||||
import { useEffect, useImperativeHandle, forwardRef } from 'react';
|
||||
import { Form, Input } from 'antd';
|
||||
import type { ForwardRefRenderFunction } from 'react';
|
||||
import SelectPartenr from '@/components/SelectPartner';
|
||||
import SelectTMEPerson from '@/components/SelectTMEPerson';
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
import styles from '../style.less';
|
||||
type Props = {
|
||||
domainId: number;
|
||||
permissonData: any;
|
||||
onSubmit?: (data?: any) => void;
|
||||
onValuesChange?: (value, values) => void;
|
||||
};
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const PermissionCreateForm: ForwardRefRenderFunction<any, Props> = (
|
||||
{ permissonData, onValuesChange },
|
||||
ref,
|
||||
) => {
|
||||
const { APP_TARGET } = process.env;
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
formRef: form,
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
const fieldsValue = {
|
||||
...permissonData,
|
||||
};
|
||||
fieldsValue.authorizedDepartmentIds = permissonData.authorizedDepartmentIds || [];
|
||||
fieldsValue.authorizedUsers = permissonData.authorizedUsers || [];
|
||||
form.setFieldsValue(fieldsValue);
|
||||
}, [permissonData]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
{...formLayout}
|
||||
key={permissonData.groupId}
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onValuesChange={(value, values) => {
|
||||
onValuesChange?.(value, values);
|
||||
}}
|
||||
className={styles.form}
|
||||
>
|
||||
<FormItem hidden={true} name="groupId" label="ID">
|
||||
<Input placeholder="groupId" />
|
||||
</FormItem>
|
||||
<FormItem name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
|
||||
<Input placeholder="请输入名称" />
|
||||
</FormItem>
|
||||
{APP_TARGET === 'inner' && (
|
||||
<FormItem name="authorizedDepartmentIds" label="按组织">
|
||||
<SelectPartenr
|
||||
type="selectedDepartment"
|
||||
treeSelectProps={{
|
||||
placeholder: '请选择需要授权的部门',
|
||||
}}
|
||||
/>
|
||||
</FormItem>
|
||||
)}
|
||||
|
||||
<FormItem name="authorizedUsers" label="按个人">
|
||||
<SelectTMEPerson placeholder="请选择需要授权的个人" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default forwardRef(PermissionCreateForm);
|
||||
@@ -0,0 +1,32 @@
|
||||
import { Space } from 'antd';
|
||||
import React from 'react';
|
||||
import type { Dispatch } from 'umi';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../../model';
|
||||
import { ProCard } from '@ant-design/pro-card';
|
||||
import PermissionTable from './PermissionTable';
|
||||
import PermissionAdminForm from './PermissionAdminForm';
|
||||
|
||||
type Props = {
|
||||
dispatch: Dispatch;
|
||||
domainManger: StateType;
|
||||
};
|
||||
|
||||
const PermissionSection: React.FC<Props> = () => {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size={20}>
|
||||
<ProCard title="邀请成员" bordered>
|
||||
<PermissionAdminForm />
|
||||
</ProCard>
|
||||
|
||||
<PermissionTable />
|
||||
</Space>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(PermissionSection);
|
||||
@@ -0,0 +1,297 @@
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import { message, Button, Space, Popconfirm, Tooltip } from 'antd';
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import type { Dispatch } from 'umi';
|
||||
import { connect } from 'umi';
|
||||
import type { StateType } from '../../model';
|
||||
import { getGroupAuthInfo, removeGroupAuth } from '../../service';
|
||||
import { getDepartmentTree } from '@/components/SelectPartner/service';
|
||||
import { getAllUser } from '@/components/SelectTMEPerson/service';
|
||||
import PermissionCreateDrawer from './PermissionCreateDrawer';
|
||||
import { findDepartmentTree } from '@/pages/SemanticModel/utils';
|
||||
|
||||
type Props = {
|
||||
dispatch: Dispatch;
|
||||
domainManger: StateType;
|
||||
};
|
||||
|
||||
const PermissionTable: React.FC<Props> = ({ domainManger }) => {
|
||||
const { APP_TARGET } = process.env;
|
||||
const isInner = APP_TARGET === 'inner';
|
||||
const { dimensionList, metricList, selectDomainId } = domainManger;
|
||||
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
|
||||
|
||||
const [permissonData, setPermissonData] = useState<any>({});
|
||||
|
||||
const [intentionList, setIntentionList] = useState<any[]>([]);
|
||||
|
||||
const [departmentTreeData, setDepartmentTreeData] = useState<any[]>([]);
|
||||
const [tmePerson, setTmePerson] = useState<any[]>([]);
|
||||
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
});
|
||||
const actionRef = useRef<ActionType>();
|
||||
|
||||
const queryListData = async () => {
|
||||
const { code, data } = await getGroupAuthInfo(selectDomainId);
|
||||
if (code === 200) {
|
||||
setIntentionList(data);
|
||||
return;
|
||||
}
|
||||
message.error('获取主题域解析词失败');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (selectDomainId) {
|
||||
queryListData();
|
||||
}
|
||||
}, [selectDomainId]);
|
||||
|
||||
const queryDepartmentData = async () => {
|
||||
const { code, data } = await getDepartmentTree();
|
||||
if (code === 200) {
|
||||
setDepartmentTreeData(data);
|
||||
}
|
||||
};
|
||||
|
||||
const queryTmePersonData = async () => {
|
||||
const { code, data } = await getAllUser();
|
||||
if (code === 200) {
|
||||
setTmePerson(data);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (isInner) {
|
||||
queryDepartmentData();
|
||||
}
|
||||
queryTmePersonData();
|
||||
}, []);
|
||||
|
||||
const columns: ProColumns[] = [
|
||||
{
|
||||
dataIndex: 'groupId',
|
||||
title: 'ID',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '名称',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
dataIndex: 'departmentPermission',
|
||||
title: '授权组织',
|
||||
ellipsis: {
|
||||
showTitle: false,
|
||||
},
|
||||
hideInTable: !isInner,
|
||||
width: 200,
|
||||
render: (_, record: any) => {
|
||||
const { authorizedDepartmentIds = [] } = record;
|
||||
const departmentNameList = authorizedDepartmentIds.reduce(
|
||||
(departmentNames: string[], id: string) => {
|
||||
const department = findDepartmentTree(departmentTreeData, id);
|
||||
if (department) {
|
||||
departmentNames.push(department.name);
|
||||
}
|
||||
return departmentNames;
|
||||
},
|
||||
[],
|
||||
);
|
||||
const words = departmentNameList.join(',');
|
||||
return (
|
||||
<Tooltip placement="topLeft" title={words}>
|
||||
{words}
|
||||
</Tooltip>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
dataIndex: 'personPermission',
|
||||
title: '授权个人',
|
||||
ellipsis: {
|
||||
showTitle: false,
|
||||
},
|
||||
// width: 200,
|
||||
render: (_, record: any) => {
|
||||
const { authorizedUsers = [] } = record;
|
||||
const personNameList = tmePerson.reduce((enNames: string[], item: any) => {
|
||||
const hasPerson = authorizedUsers.includes(item.enName);
|
||||
if (hasPerson) {
|
||||
enNames.push(item.displayName);
|
||||
}
|
||||
return enNames;
|
||||
}, []);
|
||||
const words = personNameList.join(',');
|
||||
return (
|
||||
<Tooltip placement="topLeft" title={words}>
|
||||
{words}
|
||||
</Tooltip>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
dataIndex: 'columnPermission',
|
||||
title: '列权限',
|
||||
// width: 400,
|
||||
ellipsis: {
|
||||
showTitle: false,
|
||||
},
|
||||
render: (_, record: any) => {
|
||||
const { authRules } = record;
|
||||
const target = authRules?.[0];
|
||||
if (target) {
|
||||
const { dimensions, metrics } = target;
|
||||
let dimensionNameList: string[] = [];
|
||||
let metricsNameList: string[] = [];
|
||||
if (Array.isArray(dimensions)) {
|
||||
dimensionNameList = dimensionList.reduce((enNameList: string[], item: any) => {
|
||||
const { bizName, name } = item;
|
||||
if (dimensions.includes(bizName)) {
|
||||
enNameList.push(name);
|
||||
}
|
||||
return enNameList;
|
||||
}, []);
|
||||
}
|
||||
if (Array.isArray(metrics)) {
|
||||
metricsNameList = metricList.reduce((enNameList: string[], item: any) => {
|
||||
const { bizName, name } = item;
|
||||
if (metrics.includes(bizName)) {
|
||||
enNameList.push(name);
|
||||
}
|
||||
return enNameList;
|
||||
}, []);
|
||||
}
|
||||
const words = [...dimensionNameList, ...metricsNameList].join(',');
|
||||
return (
|
||||
<Tooltip placement="topLeft" title={words}>
|
||||
{words}
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
return <> - </>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'x',
|
||||
valueType: 'option',
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<Space>
|
||||
<a
|
||||
key="classEditBtn"
|
||||
onClick={() => {
|
||||
setPermissonData(record);
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
{/* <a
|
||||
key="dimensionEditBtn"
|
||||
onClick={() => {
|
||||
setPermissonData(record);
|
||||
setDimensionModalVisible(true);
|
||||
}}
|
||||
>
|
||||
维度授权
|
||||
</a>
|
||||
<a
|
||||
key="metricEditBtn"
|
||||
onClick={() => {
|
||||
setPermissonData(record);
|
||||
setMetricModalVisible(true);
|
||||
}}
|
||||
>
|
||||
指标授权
|
||||
</a> */}
|
||||
<Popconfirm
|
||||
title="确认删除？"
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
onConfirm={async () => {
|
||||
const { code } = await removeGroupAuth({
|
||||
domainId: record.domainId,
|
||||
groupId: record.groupId,
|
||||
});
|
||||
if (code === 200) {
|
||||
setPermissonData({});
|
||||
queryListData();
|
||||
} else {
|
||||
message.error('删除失败');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<a
|
||||
key="classEditBtn"
|
||||
onClick={() => {
|
||||
setPermissonData(record);
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProTable
|
||||
actionRef={actionRef}
|
||||
headerTitle="资源列表"
|
||||
rowKey="groupId"
|
||||
columns={columns}
|
||||
search={false}
|
||||
dataSource={intentionList}
|
||||
pagination={pagination}
|
||||
onChange={(data: any) => {
|
||||
const { current, pageSize, total } = data;
|
||||
setPagination({
|
||||
current,
|
||||
pageSize,
|
||||
total,
|
||||
});
|
||||
}}
|
||||
size="small"
|
||||
options={false}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="create"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setPermissonData({});
|
||||
setCreateModalVisible(true);
|
||||
}}
|
||||
>
|
||||
新建授权
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
{createModalVisible && (
|
||||
<PermissionCreateDrawer
|
||||
domainId={Number(selectDomainId)}
|
||||
visible={createModalVisible}
|
||||
permissonData={permissonData}
|
||||
onSubmit={() => {
|
||||
queryListData();
|
||||
setCreateModalVisible(false);
|
||||
}}
|
||||
onCancel={() => {
|
||||
setCreateModalVisible(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default connect(({ domainManger }: { domainManger: StateType }) => ({
|
||||
domainManger,
|
||||
}))(PermissionTable);
|
||||
@@ -0,0 +1,124 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Form, Button, Modal, Input, Switch } from 'antd';
|
||||
import styles from './style.less';
|
||||
import { useMounted } from '@/hooks/useMounted';
|
||||
import { message } from 'antd';
|
||||
import { formLayout } from '@/components/FormHelper/utils';
|
||||
import { EnumTransModelType } from '@/enum';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
export type ProjectInfoFormProps = {
|
||||
basicInfo: any;
|
||||
onCancel: () => void;
|
||||
onSubmit: (values: any) => Promise<any>;
|
||||
};
|
||||
|
||||
const ProjectInfoForm: React.FC<ProjectInfoFormProps> = (props) => {
|
||||
const { basicInfo, onSubmit: handleUpdate, onCancel } = props;
|
||||
const { type, modelType } = basicInfo;
|
||||
|
||||
const isMounted = useMounted();
|
||||
const [formVals, setFormVals] = useState<any>(basicInfo);
|
||||
const [saveLoading, setSaveLoading] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const handleConfirm = async () => {
|
||||
const fieldsValue = await form.validateFields();
|
||||
// const columnsValue = { ...fieldsValue, isUnique: fieldsValue.isUnique === true ? 1 : 0 };
|
||||
const columnsValue = { ...fieldsValue, isUnique: 1 };
|
||||
setFormVals({ ...formVals, ...columnsValue });
|
||||
setSaveLoading(true);
|
||||
try {
|
||||
await handleUpdate({ ...formVals, ...columnsValue });
|
||||
if (isMounted()) {
|
||||
setSaveLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('接口调用出错');
|
||||
setSaveLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const footer = (
|
||||
<>
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button type="primary" loading={saveLoading} onClick={handleConfirm}>
|
||||
确定
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
const titleRender = () => {
|
||||
let str = EnumTransModelType[modelType];
|
||||
if (type === 'top') {
|
||||
str += '顶级';
|
||||
} else if (modelType === 'add') {
|
||||
str += '子';
|
||||
}
|
||||
str += '主题域';
|
||||
return str;
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title={titleRender()}
|
||||
open={true}
|
||||
footer={footer}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<Form
|
||||
{...formLayout}
|
||||
form={form}
|
||||
initialValues={{
|
||||
...formVals,
|
||||
}}
|
||||
className={styles.form}
|
||||
>
|
||||
{type !== 'top' && modelType === 'add' && (
|
||||
<FormItem name="parentName" label="父主题域名称">
|
||||
<Input disabled placeholder="父主题域名称" />
|
||||
</FormItem>
|
||||
)}
|
||||
<FormItem
|
||||
name="name"
|
||||
label="主题域名称"
|
||||
rules={[{ required: true, message: '请输入主题域名称！' }]}
|
||||
>
|
||||
<Input placeholder="主题域名称不可重复" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="bizName"
|
||||
label="主题域英文名称"
|
||||
rules={[{ required: true, message: '请输入主题域英文名称！' }]}
|
||||
>
|
||||
<Input placeholder="请输入主题域英文名称" />
|
||||
</FormItem>
|
||||
<FormItem name="description" label="主题域描述">
|
||||
<Input.TextArea placeholder="主题域描述" />
|
||||
</FormItem>
|
||||
<FormItem name="isUnique" label="是否唯一" hidden={true}>
|
||||
<Switch
|
||||
size="small"
|
||||
checked={true}
|
||||
// onChange={(checked) => {
|
||||
// setFormVals({ ...formVals, isUnique: checked });
|
||||
// }}
|
||||
/>
|
||||
{/* <Switch
|
||||
size="small"
|
||||
checked={formVals.isUnique ? true : false}
|
||||
onChange={(checked) => {
|
||||
setFormVals({ ...formVals, isUnique: checked });
|
||||
}}
|
||||
/> */}
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectInfoForm;
|
||||
@@ -0,0 +1,250 @@
|
||||
import { DownOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import { Input, message, Tree, Popconfirm, Space, Tooltip } from 'antd';
|
||||
import type { DataNode } from 'antd/lib/tree';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { FC, Key } from 'react';
|
||||
import { connect } from 'umi';
|
||||
import type { Dispatch } from 'umi';
|
||||
import type { StateType } from '../model';
|
||||
import { getDomainList, createDomain, updateDomain, deleteDomain } from '../service';
|
||||
import { treeParentKeyLists } from '../utils';
|
||||
import ProjectInfoFormProps from './ProjectInfoForm';
|
||||
import { constructorClassTreeFromList, addPathInTreeData } from '../utils';
|
||||
import { PlusCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
import styles from './style.less';
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
type ProjectListProps = {
|
||||
selectDomainId: string;
|
||||
selectDomainName: string;
|
||||
createDomainBtnVisible?: boolean;
|
||||
dispatch: Dispatch;
|
||||
};
|
||||
|
||||
const projectTreeFlat = (projectTree: DataNode[], filterValue: string): DataNode[] => {
|
||||
let newProjectTree: DataNode[] = [];
|
||||
projectTree.map((item) => {
|
||||
const { children, ...rest } = item;
|
||||
if (String(item.title).includes(filterValue)) {
|
||||
newProjectTree.push({ ...rest });
|
||||
}
|
||||
if (children && children.length > 0) {
|
||||
newProjectTree = newProjectTree.concat(projectTreeFlat(children, filterValue));
|
||||
}
|
||||
return item;
|
||||
});
|
||||
return newProjectTree;
|
||||
};
|
||||
|
||||
const ProjectListTree: FC<ProjectListProps> = ({
|
||||
selectDomainId,
|
||||
createDomainBtnVisible = true,
|
||||
dispatch,
|
||||
}) => {
|
||||
const [projectTree, setProjectTree] = useState<DataNode[]>([]);
|
||||
const [projectInfoModalVisible, setProjectInfoModalVisible] = useState<boolean>(false);
|
||||
const [projectInfoParams, setProjectInfoParams] = useState<any>({});
|
||||
const [filterValue, setFliterValue] = useState<string>('');
|
||||
const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
|
||||
const [classList, setClassList] = useState<any[]>([]);
|
||||
|
||||
const onSearch = (value: any) => {
|
||||
setFliterValue(value);
|
||||
};
|
||||
|
||||
const initProjectTree = async () => {
|
||||
const { code, data, msg } = await getDomainList();
|
||||
if (code === 200) {
|
||||
const treeData = addPathInTreeData(constructorClassTreeFromList(data));
|
||||
setProjectTree(treeData);
|
||||
setClassList(data);
|
||||
setExpandedKeys(treeParentKeyLists(treeData));
|
||||
const firstRootNode = data.filter((item: any) => {
|
||||
return item.parentId === 0;
|
||||
})[0];
|
||||
if (firstRootNode) {
|
||||
const { id, name } = firstRootNode;
|
||||
dispatch({
|
||||
type: 'domainManger/setSelectDomain',
|
||||
selectDomainId: id,
|
||||
selectDomainName: name,
|
||||
domainData: firstRootNode,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
initProjectTree();
|
||||
}, []);
|
||||
|
||||
const handleSelect = (selectedKeys: string, projectName: string) => {
|
||||
if (selectedKeys === selectDomainId) {
|
||||
return;
|
||||
}
|
||||
const targetNodeData = classList.filter((item: any) => {
|
||||
return item.id === selectedKeys;
|
||||
})[0];
|
||||
dispatch({
|
||||
type: 'domainManger/setSelectDomain',
|
||||
selectDomainId: selectedKeys,
|
||||
selectDomainName: projectName,
|
||||
domainData: targetNodeData,
|
||||
});
|
||||
};
|
||||
|
||||
const editProject = async (values: any) => {
|
||||
const params = { ...values };
|
||||
const res = await updateDomain(params);
|
||||
if (res.code === 200) {
|
||||
message.success('编辑分类成功');
|
||||
setProjectInfoModalVisible(false);
|
||||
initProjectTree();
|
||||
} else {
|
||||
message.error(res.msg);
|
||||
}
|
||||
};
|
||||
|
||||
const projectSubmit = async (values: any) => {
|
||||
if (values.modelType === 'add') {
|
||||
await createDomain(values);
|
||||
} else if (values.modelType === 'edit') {
|
||||
await editProject(values);
|
||||
}
|
||||
initProjectTree();
|
||||
setProjectInfoModalVisible(false);
|
||||
};
|
||||
|
||||
// 删除项目
|
||||
const confirmDelete = async (projectId: string) => {
|
||||
const res = await deleteDomain(projectId);
|
||||
if (res.code === 200) {
|
||||
message.success('编辑项目成功');
|
||||
setProjectInfoModalVisible(false);
|
||||
initProjectTree();
|
||||
} else {
|
||||
message.error(res.msg);
|
||||
}
|
||||
};
|
||||
|
||||
const titleRender = (node: any) => {
|
||||
const { id, name, path } = node as any;
|
||||
return (
|
||||
<div className={styles.projectItem}>
|
||||
<span
|
||||
className={styles.title}
|
||||
onClick={() => {
|
||||
handleSelect(id, name);
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
{createDomainBtnVisible && (
|
||||
<span className={styles.operation}>
|
||||
{Array.isArray(path) && path.length < 3 && (
|
||||
<PlusOutlined
|
||||
className={styles.icon}
|
||||
onClick={() => {
|
||||
setProjectInfoParams({
|
||||
modelType: 'add',
|
||||
type: 'normal',
|
||||
parentId: id,
|
||||
parentName: name,
|
||||
});
|
||||
setProjectInfoModalVisible(true);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<EditOutlined
|
||||
className={styles.icon}
|
||||
onClick={() => {
|
||||
setProjectInfoParams({
|
||||
modelType: 'edit',
|
||||
type: 'normal',
|
||||
...node,
|
||||
});
|
||||
setProjectInfoModalVisible(true);
|
||||
}}
|
||||
/>
|
||||
<Popconfirm
|
||||
key="popconfirm"
|
||||
title={'确认删除吗?'}
|
||||
onConfirm={() => {
|
||||
confirmDelete(id);
|
||||
}}
|
||||
okText="是"
|
||||
cancelText="否"
|
||||
>
|
||||
<DeleteOutlined className={styles.icon} />
|
||||
</Popconfirm>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const projectRenderTree = filterValue ? projectTreeFlat(projectTree, filterValue) : projectTree;
|
||||
|
||||
const handleExpand = (_expandedKeys: Key[]) => {
|
||||
setExpandedKeys(_expandedKeys as string[]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.projectList}>
|
||||
<h2 className={styles.treeTitle}>
|
||||
<span className={styles.title}>主题域</span>
|
||||
<Space>
|
||||
{createDomainBtnVisible && (
|
||||
<Tooltip title="新增顶级域">
|
||||
<PlusCircleOutlined
|
||||
onClick={() => {
|
||||
setProjectInfoParams({ type: 'top', modelType: 'add' });
|
||||
setProjectInfoModalVisible(true);
|
||||
}}
|
||||
className={styles.addBtn}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Space>
|
||||
</h2>
|
||||
<Search
|
||||
allowClear
|
||||
className={styles.search}
|
||||
placeholder="请输入主题域名称进行查询"
|
||||
onSearch={onSearch}
|
||||
/>
|
||||
<Tree
|
||||
expandedKeys={expandedKeys}
|
||||
onExpand={handleExpand}
|
||||
className={styles.tree}
|
||||
selectedKeys={[selectDomainId]}
|
||||
blockNode={true}
|
||||
switcherIcon={<DownOutlined />}
|
||||
defaultExpandAll={true}
|
||||
treeData={projectRenderTree}
|
||||
titleRender={titleRender}
|
||||
/>
|
||||
{projectInfoModalVisible && (
|
||||
<ProjectInfoFormProps
|
||||
basicInfo={projectInfoParams}
|
||||
onSubmit={projectSubmit}
|
||||
onCancel={() => {
|
||||
setProjectInfoModalVisible(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(
|
||||
({ domainManger: { selectDomainId, selectDomainName } }: { domainManger: StateType }) => ({
|
||||
selectDomainId,
|
||||
selectDomainName,
|
||||
}),
|
||||
)(ProjectListTree);
|
||||
@@ -0,0 +1,224 @@
|
||||
.projectBody {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #fff;
|
||||
height: calc(100vh - 48px);
|
||||
.projectList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// width: 400px;
|
||||
overflow: hidden;
|
||||
// min-height: calc(100vh - 48px);
|
||||
border-right: 1px solid #d9d9d9;
|
||||
|
||||
.treeTitle {
|
||||
margin-bottom: 0;
|
||||
padding: 20px;
|
||||
line-height: 34px;
|
||||
text-align: right;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
|
||||
.title {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #296DF3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
width: calc(100% - 20px);
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.tree {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
|
||||
.projectItem {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
cursor: auto;
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.operation {
|
||||
.icon {
|
||||
margin-left: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.projectManger {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 48px);
|
||||
background: #f8f9fb;
|
||||
position: relative;
|
||||
|
||||
|
||||
.collapseLeftBtn {
|
||||
position: absolute;
|
||||
top: calc(50% + 45px);
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
background-color: rgba(40, 46, 54, 0.2);
|
||||
border-radius: 0 24px 24px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
padding: 20px;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.mainTip {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-card-body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.ant-tabs-content-holder {
|
||||
overflow: scroll;
|
||||
height: calc(100vh - 192px);
|
||||
}
|
||||
}
|
||||
|
||||
.resource {
|
||||
display: flex;
|
||||
|
||||
.tree {
|
||||
flex: 1;
|
||||
|
||||
.headOperation {
|
||||
.btn {
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.resourceSearch {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.view {
|
||||
width: 480px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.selectTypesBtn {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.search{
|
||||
width: 50%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.paramsName{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.deleteBtn{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.authBtn{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectedResource{
|
||||
font-size: 12px;
|
||||
color: darkgrey;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
|
||||
.switch{
|
||||
// min-width: 900px;
|
||||
// max-width: 1200px;
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.switchUser {
|
||||
width: 200px;
|
||||
margin-left: 33px;
|
||||
:global {
|
||||
.ant-select {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dimensionIntentionForm {
|
||||
margin-bottom: -24px !important;
|
||||
margin-top: 10px;
|
||||
margin-left: 26px;
|
||||
}
|
||||
|
||||
.classTable {
|
||||
:global {
|
||||
.ant-pro-table-search-query-filter {
|
||||
padding-left: 0 !important;
|
||||
// padding-bottom: 24px !important;
|
||||
.ant-pro-form-query-filter {
|
||||
.ant-form-item {
|
||||
// margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-tbody > tr.ant-table-row-selected > td {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.classTableSelectColumnAlignLeft {
|
||||
:global {
|
||||
.ant-table-selection-column {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.permissionDrawer {
|
||||
:global {
|
||||
.ant-drawer-body {
|
||||
background: #f8f9fb;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user