资产属性关联元模型属性

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

 import React, { useEffect, useState } from 'react';
-import { Modal, Form, TreeSelect, Select, Space, Button } from 'antd';
+import { Modal, Form, TreeSelect, Select, Space, Button, Row, Col, } from 'antd';
 
-import { dispatchLatest } from '../../../../model';
+import { dispatch } from '../../../../model';
+
+const MetaModelSelect = ({ value = {}, metaModelTreeData = [], onChange, ...restProps }) => {
+  const [ attributes, setAttributes ] = useState([]);
+  const [ loading, setLoading ] = useState(false);
+
+  useEffect(() => {
+    if ((value?.model||'') !== '') {
+      getAttributesByMetadataModel(value?.model);
+    } else {
+      setAttributes([]);
+    }
+  }, [value?.model])
+
+  const onTreeChange = (value, label, extra) => { 
+    if ((label||[]).length > 0) {
+      triggerChange({ modelValue: value, model: label[0], attrName: '', attrCnName: '' });
+    } else {
+      triggerChange({ modelValue: '', model: '', attrName: '', attrCnName: '' });
+    }
+  }
+
+  const onAttributeChange = (value) => {
+
+    if ((value||'') === '') {
+      triggerChange({ attrName: '', attrCnName: '' });
+      return;
+    }
+
+    const index = (attributes||[]).findIndex(attribute => attribute.name===value);
+
+    if (index !== -1) {
+      triggerChange({ attrName: attributes[index]?.name, attrCnName: attributes[index]?.cnName });
+    } 
+  }
+
+  const triggerChange = (changedValue) => {
+    onChange?.({
+      ...value,
+      ...changedValue,
+    });
+  };
+
+  const getAttributesByMetadataModel = (model) => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.getAttributesByMetadataModel',
+      payload: {
+        modelName: model
+      },
+      callback: data => {
+        setLoading(false);
+        setAttributes(data||[]);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    });
+  }
+
+  //value有可能为空
+  value = value ? value: {};
+
+  return (
+    <Row gutter={10}>
+      <Col span={12}>
+        <TreeSelect
+          value={value.modelValue}
+          placeholder='请选择元模型'
+          treeData={metaModelTreeData}
+          onChange={onTreeChange}
+          allowClear
+        />
+      </Col>
+      <Col span={12}>
+        <Select 
+          onChange={(value) => { onAttributeChange && onAttributeChange(value) }} 
+          value={value.attrName} 
+          loading={loading}
+          placeholder='请选择属性'
+          allowClear
+        >
+        {
+          (attributes||[]).map((attribute, index) => {
+            return (
+              <Select.Option key={index} value={attribute.name||''}>
+              { attribute.cnName||'' }
+              </Select.Option>
+            );
+          })
+        }
+        </Select>
+      </Col>
+    </Row>
+  );
+}
 
 const AttributeRelationModal = (props) => {
   const { visible, onCancel } = props;
@@ -24,7 +119,7 @@ const AttributeRelationModal = (props) => {
   }, [visible])
 
   const getMetadataModelTree = () => {
-    dispatchLatest({
+    dispatch({
       type: 'assetmanage.getMetadataModelTree',
       callback: data => {
         let newData = [...data];
@@ -44,40 +139,19 @@ const AttributeRelationModal = (props) => {
         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: {
-        modelName: model
-      },
-      callback: data => {
-        setAttributes(data||[]);
-        loadElementWithoutCustom(model);
+        loadElementWithoutCustom();
       },
       error: () => {
-        
       }
     });
   }
 
-  const loadElementWithoutCustom = (model) => {
-    dispatchLatest({
+  const loadElementWithoutCustom = () => {
+    dispatch({
       type: 'assetmanage.loadElementWithoutCustom',
       callback: data => {
         setElements(data||[]);
-        getRelAttrByModel(model);
+        getRelAttrByModel();
       },
       error: () => {
         
@@ -85,18 +159,13 @@ const AttributeRelationModal = (props) => {
     });
   }
 
-  const getRelAttrByModel = (model = currentModel) => {
-    dispatchLatest({
+  const getRelAttrByModel = () => {
+    dispatch({
       type: 'assetmanage.getRelAttrByModel',
-      payload: {
-        params: {
-          model
-        }
-      },
       callback: data => {
         let _fieldsValue = {};
         (data||[]).forEach(item => {
-          _fieldsValue[item.elementId] = item.attrName||'';
+          _fieldsValue[item.elementId] = {model: item.model, modelValue: item.model, attrName: item.attrName||'', attrCnName: item.attrCnName||''};
         })
 
         form.setFieldsValue(_fieldsValue);
@@ -107,32 +176,22 @@ const AttributeRelationModal = (props) => {
     });
   }
 
-  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) {
-
         if ((row[key]||'') !== '') {
-          newRels.push({ elementId: key, attrName: row[key]||'' });
+          if ((row[key]?.model||'')!=='' && (row[key]?.attrName||'')!=='') {
+            newRels.push({ elementId: key, model: row[key]?.model, attrName: row[key]?.attrName||'', attrCnName: row[key]?.attrCnName||''});
+          }
         }
       }
 
       setConfirmLoading(true);
 
-      dispatchLatest({
+      dispatch({
         type: 'assetmanage.saveEleAndAttrRel',
         payload: {
           params: {
@@ -193,13 +252,6 @@ const AttributeRelationModal = (props) => {
     >
       <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 (
@@ -208,17 +260,9 @@ const AttributeRelationModal = (props) => {
                   name={element.id||''} 
                   key={index}
                 >
-                  <Select allowClear>
-                  {
-                    (attributes||[]).map((attribute, _index) => {
-                      return (
-                        <Select.Option key={index} value={attribute.name||''}>
-                        { attribute.cnName||'' }
-                        </Select.Option>
-                      );
-                    })
-                  }
-                  </Select> 
+                  <MetaModelSelect
+                    metaModelTreeData={metadataModelTreeData}
+                  />
                 </Form.Item>
               );
             })

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

 import React, { useEffect, useState } from 'react';
-import { Modal, Form, Input, Space, InputNumber, Button, Radio, Select } from 'antd';
+import { Modal, Form, Input, Space, Button, Radio, Select } from 'antd';
 
 import { dispatch } from '../../../../model';
 import { showMessage } from '../../../../util';

src/view/Manage/Model/Component/EditModel.jsx

@@ -23,7 +23,6 @@ const EditModel = (props) => {
   const [ historyAndVersionDrawerVisible, setHistoryAndVersionDrawerVisible ] = useState(false);
   const [ autoTabKey, setAutoTabKey ] = useState(null);
 
-  const mountRef = useRef(false);
   const actionRef = useRef('');
 
   const { action, catalogId, modelerId, hints, roughModelerData, permitCheckOut, editable, stateId, versionId, holder } = actionData;