资产要素与元数据属性关联

src/model/assetmanage.js

@@ -102,3 +102,25 @@ export function* getDataAssetLocation(payload) {
 export function* createDataAssetByMetadataIds(payload) {
   return yield call(service.createDataAssetByMetadataIds, payload);
 }
+
+export function* getMetadataModelTree() {
+  return yield call(service.getMetadataModelTree);
+}
+
+export function* getAttributesByMetadataModel(payload) {
+  return yield call(service.getAttributesByMetadataModel, payload);
+}
+
+export function* loadElementWithoutCustom() {
+  return yield call(service.loadElementWithoutCustom);
+}
+
+export function* saveEleAndAttrRel(payload) {
+  return yield call(service.saveEleAndAttrRel, payload);
+}
+
+export function* getRelAttrByModel(payload) {
+  return yield call(service.getRelAttrByModel, payload);
+}
+
+

src/service/dataassetmanager.js

@@ -107,3 +107,23 @@ export function assetImport(payload) {
 export function getDirectoryById(payload) {
   return GetJSON("/dataassetmanager/directoryApi/getDirectoryById", payload);
 }
+
+export function getMetadataModelTree() {
+  return GetJSON("/metadatarepo/rest/model/tree");
+}
+
+export function getAttributesByMetadataModel(payload) {
+  return GetJSON(`/metadatarepo/rest/model/getAttributes/${payload.model||''}`);
+}
+
+export function loadElementWithoutCustom() {
+  return GetJSON("/dataassetmanager/eleAndAttrApi/loadElementWithoutCustom");
+}
+
+export function saveEleAndAttrRel(payload) {
+  return PostJSON("/dataassetmanager/eleAndAttrApi/saveEleAndAttrRel", payload);
+}
+
+export function getRelAttrByModel(payload) {
+  return PostJSON("/dataassetmanager/eleAndAttrApi/getRelAttrByModel", payload);
+}

src/view/Manage/AssetManage/Component/AssetEdit.jsx

@@ -14,6 +14,7 @@ const AssetEdit = (props) => {
   const [ confirmLoading, setConfirmLoading ] = useState(false);
   const [ elements, setElements ] = useState([]);
   const [ asset, setAsset ] = useState('');
+  const [ metadataId, setMetadataId ] = useState('');
 
   useEffect(() => {
 
@@ -25,6 +26,8 @@ const AssetEdit = (props) => {
           getAsset();
         });
       }
+    } else {
+      setMetadataId('');
     }
     
     //eslint-disable-next-line react-hooks/exhaustive-deps
@@ -60,6 +63,7 @@ const AssetEdit = (props) => {
       },
       callback: data => {
         setAsset(data);
+        setMetadataId(data.mid||'');
         let _fieldsValue = {};
         (data.elements||[]).forEach(element => {
           if (element.manualMaintain === '是') {
@@ -83,12 +87,18 @@ const AssetEdit = (props) => {
         }
       });
 
+      const params = {
+        dirId: nodeId,
+      }
+
+      if ((metadataId||'')!=='') {
+        params.metadataId = metadataId;
+      }
+
       dispatch({
         type: 'assetmanage.addOrUpdateDataAsset',
         payload: { 
-          params: {
-            dirId: nodeId
-          },
+          params,
           data: action==='add' ? { elements: newElements } : { ...asset, elements: newElements } 
         },
         callback: () => {
@@ -139,7 +149,8 @@ const AssetEdit = (props) => {
         value => {
           value?.onGlobalStateChange&&value?.onGlobalStateChange((state, prev) => {
             if (state.message === 'data-govern-show-metadata-list-callback-message') {
-              form?.setFieldsValue({ '资产项': state.data });
+              setMetadataId(state.data?.metadataId||'');
+              form?.setFieldsValue({ '资产项': state.data?.metadataInfoJson||'' });
             }
           });
 

src/view/Manage/AssetManage/Component/AssetTable.jsx

@@ -9,6 +9,7 @@ import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs
 import ImportElement from './ImportElement';
 import FilterElement from './FilterElement';
 import AssetMount from '../../AssetRecycle/Component/AssetMount';
+import AttributeRelationModal from "./AttributeRelationModal";
 import ImportAsset from './ImportAsset';
 import AssetEdit from './AssetEdit';
 import AssetDetail from "./AssetDetail";
@@ -32,6 +33,7 @@ const AssetTable = (props) => {
   const [ importAssetVisible, setImportAssetVisible ] = useState(false);
   const [ importElementVisible, setImportElementVisible ] = useState(false);
   const [ filterElementVisible, setFilterElementVisible ] = useState(false);
+  const [ attributeRelationModalVisible, setAttributeRelationModalVisible ] = useState(false);
   const [ assetEditVisible, setAssetEditVisible ] = useState(false);
   const [ assetDetailVisible, setAssetDetailVisible ] = useState(false);
   const [ assetMountVisible, setAssetMountVisible ] = useState(false);
@@ -352,6 +354,14 @@ const AssetTable = (props) => {
     window.open('/api/dataassetmanager/elementApi/export');
   }
 
+  const onAttributeRelationBtnClick = () => {
+    setAttributeRelationModalVisible(true);
+  }
+
+  const onAttributeRelationModalCancel = () => {
+    setAttributeRelationModalVisible(false);
+  }
+
   const classes = classNames('asset-list', className, {
     'asset-list-read-only': readOnly
   });  
@@ -410,6 +420,7 @@ const AssetTable = (props) => {
               trigger="hover">
               <Button type="primary">过滤</Button>
             </Popover>
+            <Button type='primary' onClick={onAttributeRelationBtnClick}>属性关联</Button>
           </Space>
           <Space className='ml-5'>
             <span>资产:</span>
@@ -546,6 +557,11 @@ const AssetTable = (props) => {
         onCancel={ onAssetMountCancel }
         {...props}
       />
+      <AttributeRelationModal
+        visible={ attributeRelationModalVisible }
+        readOnly={ readOnly }
+        onCancel={ onAttributeRelationModalCancel }
+      />
       {contextHolder}
     </Card>
   )

src/view/Manage/AssetManage/Component/AttributeRelationModal.jsx

+import React, { useEffect, useState } from 'react';
+import { Modal, Form, TreeSelect, Select, Space, Button } from 'antd';
+
+import { dispatchLatest } from '../../../../model';
+
+const AttributeRelationModal = (props) => {
+  const { visible, onCancel, readOnly } = props;
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const [ metadataModelTreeData, setMetadataModelTreeData ] = useState([]);
+  const [ currentTreeValue, setCurrentTreeValue ] = useState('');
+  const [ currentModel, setCurrentModel ] = useState('');
+  const [ attributes, setAttributes ] = useState([]);
+  const [ elements, setElements] = useState([]);
+
+  const [ form ] = Form.useForm();
+
+  useEffect(() => {
+    if (visible) {
+      getMetadataModelTree();
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible])
+
+  const getMetadataModelTree = () => {
+    dispatchLatest({
+      type: 'assetmanage.getMetadataModelTree',
+      callback: data => {
+        let newData = [...data];
+        
+        function recursion(_data, superKey='') {
+
+          if ((_data||[]).length===0) return;
+
+          (_data||[]).forEach(item=> {
+            item.title = item.nodeName||'';
+            item.value = superKey + '/' +(item.nodeName||'');
+
+            recursion(item.children, item.value);
+          })
+        } 
+
+        recursion(newData);
+        setMetadataModelTreeData(newData||[]);
+        
+        if ((newData||[]).length > 0) {
+          let _currentModel = newData[0].nodeName||'';
+          setCurrentModel(_currentModel);
+          setCurrentTreeValue(newData[0].value||'');
+          getAttributesByMetadataModel(_currentModel);
+        }
+      },
+      error: () => {
+      }
+    });
+  }
+
+  const getAttributesByMetadataModel = (model) => {
+    dispatchLatest({
+      type: 'assetmanage.getAttributesByMetadataModel',
+      payload: {
+        model
+      },
+      callback: data => {
+        setAttributes(data||[]);
+        loadElementWithoutCustom(model);
+      },
+      error: () => {
+        
+      }
+    });
+  }
+
+  const loadElementWithoutCustom = (model) => {
+    dispatchLatest({
+      type: 'assetmanage.loadElementWithoutCustom',
+      callback: data => {
+        setElements(data||[]);
+        getRelAttrByModel(model);
+      },
+      error: () => {
+        
+      }
+    });
+  }
+
+  const getRelAttrByModel = (model = currentModel) => {
+    dispatchLatest({
+      type: 'assetmanage.getRelAttrByModel',
+      payload: {
+        params: {
+          model
+        }
+      },
+      callback: data => {
+        let _fieldsValue = {};
+        (data||[]).forEach(item => {
+          _fieldsValue[item.elementId] = item.attrName||'';
+        })
+
+        form.setFieldsValue(_fieldsValue);
+      },
+      error: () => {
+        
+      }
+    });
+  }
+
+  const onTreeChange = (value, label, extra) => {
+
+    setCurrentTreeValue(value);
+
+    if ((label||[]).length > 0) {
+      setCurrentModel(label[0]);
+      reset();
+      getAttributesByMetadataModel(label[0]);
+    }
+  }
+
+  const onOk = async() => {
+    try {
+      const row = await form.validateFields();
+
+      let newRels = [];
+      for (var key in row) {
+        newRels.push({ elementId: key, attrName: row[key]||'' });
+      }
+
+      setConfirmLoading(true);
+
+      dispatchLatest({
+        type: 'assetmanage.saveEleAndAttrRel',
+        payload: {
+          params: {
+            model: currentModel
+          },
+          data: newRels
+        },
+        callback: data => {
+          reset();
+          onCancel && onCancel();
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      });
+
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+      setConfirmLoading(false);
+    }
+  }
+
+  const reset = () => {
+    setConfirmLoading(false);
+    form.resetFields();
+  }
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 5 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 17 },
+    },
+  };
+
+  return (
+    <Modal
+      forceRender
+      title={'关联元数据属性'}
+      visible={visible}
+      width={600}
+      onCancel={() => { 
+        reset();
+        onCancel && onCancel() 
+      }}
+      footer={
+        <Space>
+          <Button onClick={() => {
+            reset();
+             onCancel && onCancel();
+          }}>返回</Button>
+          {
+            !readOnly && <Button type="primary" onClick={ onOk } loading={ confirmLoading }>确定</Button>
+          }
+        </Space>
+      }
+    >
+      <div style={{ maxHeight: 500, overflow: 'auto' }}>
+        <Form form={form} {...formItemLayout}> 
+          <Form.Item label='元模型'>
+            <TreeSelect
+              value={currentTreeValue}
+              treeData={metadataModelTreeData}
+              onChange={onTreeChange}
+            />
+          </Form.Item>
+          {
+            (elements||[]).map((element, index) => {
+              return (
+                <Form.Item 
+                  label={element.name||''} 
+                  name={element.id||''} 
+                  key={index}
+                >
+                  <Select>
+                  {
+                    (attributes||[]).map((attribute, _index) => {
+                      return (
+                        <Select.Option key={index} value={attribute.name||''}>
+                        { attribute.cnName||'' }
+                        </Select.Option>
+                      );
+                    })
+                  }
+                  </Select> 
+                </Form.Item>
+              );
+            })
+          }
+        </Form>
+      </div>
+    </Modal>  
+  );
+}
+
+export default AttributeRelationModal;
\ No newline at end of file