mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-18 00:07:21 +00:00
first commit
This commit is contained in:
jerryjzhang
@@ -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);
|
||||
Reference in New Issue
Block a user