资产属性关联

package.json

@@ -77,6 +77,6 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://139.198.127.28:17277",
+  "proxy": "http://139.198.126.96:8089",
   "homepage": "http://myhost/data-govern"
 }

src/model/assetmanage.js

@@ -201,6 +201,22 @@ export function* getRelAttrByModel(payload) {
   return yield call(service.getRelAttrByModel, payload);
 }
 
+export function* listSourceModels(payload) {
+  return yield call(service.listSourceModels, payload);
+}
+
+export function* saveEleAndAttrRelWithSourceModel(payload) {
+  return yield call(service.saveEleAndAttrRelWithSourceModel, payload);
+}
+
+export function* getRelAttrBySourceModel(payload) {
+  return yield call(service.getRelAttrBySourceModel, payload);
+}
+
+export function* deleteRelAttrBySourceModel(payload) {
+  return yield call(service.deleteRelAttrBySourceModel, payload);
+}
+
 export function* fillElementValueBeforeCreate(payload) {
   return yield call(service.fillElementValueBeforeCreate, payload);
 }

src/service/dataassetmanager.js

@@ -212,10 +212,30 @@ export function getRelAttrByModel(payload) {
   return PostJSON("/dataassetmanager/eleAndAttrApi/getRelAttrByModel", payload);
 }
 
+export function listSourceModels() {
+  return GetJSON("/dataassetmanager/eleAndAttrApi/listSourceModels")
+}
+
+export function saveEleAndAttrRelWithSourceModel(payload) {
+  return PostJSON("/dataassetmanager/eleAndAttrApi/saveEleAndAttrRelWithSourceModel", payload)
+}
+
+export function getRelAttrBySourceModel(payload) {
+  return GetJSON("/dataassetmanager/eleAndAttrApi/getRelAttrBySourceModel", payload)
+}
+
+export function deleteRelAttrBySourceModel(payload) {
+  return PostJSON("/dataassetmanager/eleAndAttrApi/delEleAndAttrRelWithSourceModel", payload)
+}
+
 export function fillElementValueBeforeCreate(payload) {
   return PostJSON("/dataassetmanager/eleAndAttrApi/fillElementValueBeforeCreate", payload);
 }
 
+export function listSupportSourceModels() {
+  return GetJSON("/dataassetmanager/eleAndAttrApi/listSupportSourceModels");
+}
+
 export function countResourceState(payload) {
   return GetJSON("/dataassetmanager/countApi/countResourceState", payload);
 }

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

-import React, { useEffect, useState } from 'react';
-import { Modal, Form, TreeSelect, Select, Space, Button, Row, Col, } from 'antd';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Modal, Form, TreeSelect, Select, Space, Button, Row, Col, Tabs, Spin, Input } from 'antd';
 
 import { dispatch } from '../../../../model';
+import { showMessage } from '../../../../util';
+
+const AddSourceModelName = '新增数据来源'
 
 const MetaModelSelect = ({ value = {}, metaModelTreeData = [], onChange, ...restProps }) => {
   const [ attributes, setAttributes ] = useState([]);
@@ -98,82 +101,79 @@ const MetaModelSelect = ({ value = {}, metaModelTreeData = [], onChange, ...rest
   );
 }
 
-const AttributeRelationModal = (props) => {
-  const { visible, onCancel } = props;
+const AttributeRelationWithSourceModel = (props) => {
+  const { elements, sourceModel, supportSourceModelsName, metadataModelTreeData, activeKey, onChange  } = props;
+  
+  const [ loading, setLoading ] = useState(false)
   const [ confirmLoading, setConfirmLoading ] = useState(false);
-
-  const [ metadataModelTreeData, setMetadataModelTreeData ] = useState([]);
-  const [ elements, setElements] = useState([]);
+  const [ currentRelations, setCurrentRelations ] = useState();
 
   const [ form ] = Form.useForm();
+  const [modal, contextHolder] = Modal.useModal()
 
   useEffect(() => {
-    if (visible) {
-      getMetadataModelTree();
+    if (sourceModel) {
+      getRelAttrBySourceModel()
+    } else {
+      form.resetFields()
     }
 
-    //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible])
-
-  const getMetadataModelTree = () => {
-    dispatch({
-      type: 'assetmanage.getMetadataModelTree',
-      callback: data => {
-        let newData = [...data];
-        
-        function recursion(_data, superKey='') {
+    form.setFieldsValue({ sourceModel })
+  }, [activeKey, sourceModel])
 
-          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||[]);
+  useEffect(() => {
+    if (currentRelations && elements?.length > 0) {
+      let newFiledsValue = {};
+      (currentRelations||[]).forEach(item => {
+        newFiledsValue[item.elementId] = {model: item.model, modelValue: item.model, attrName: item.attrName||'', attrCnName: item.attrCnName||''};
+      })
 
-        loadElementWithoutCustom();
-      },
-      error: () => {
-      }
-    });
-  }
+      form.setFieldsValue(newFiledsValue);
+    }
+  }, [currentRelations, elements])
 
-  const loadElementWithoutCustom = () => {
+  const getRelAttrBySourceModel = () => {
+    setLoading(true)
     dispatch({
-      type: 'assetmanage.loadElementWithoutCustom',
+      type: 'assetmanage.getRelAttrBySourceModel',
+      payload: {
+        sourceModel
+      },
       callback: data => {
-        setElements(data||[]);
-        getRelAttrByModel();
+        setLoading(false)
+        setCurrentRelations(data||[])
       },
       error: () => {
-        
+        setLoading(false)
       }
     });
   }
 
-  const getRelAttrByModel = () => {
-    dispatch({
-      type: 'assetmanage.getRelAttrByModel',
-      callback: data => {
-        let _fieldsValue = {};
-        (data||[]).forEach(item => {
-          _fieldsValue[item.elementId] = {model: item.model, modelValue: item.model, attrName: item.attrName||'', attrCnName: item.attrCnName||''};
-        })
-
-        form.setFieldsValue(_fieldsValue);
-      },
-      error: () => {
-        
+  const onDelete = () => {
+    modal.confirm({
+      title: '提示!',
+      content: '您确定要删除该来源模型名称吗?',
+      onOk: () => {
+        dispatch({
+          type: 'assetmanage.deleteRelAttrBySourceModel',
+          payload: {
+            params: {
+              sourceModel
+            }
+          },
+          callback: () => {
+            showMessage('success', '删除成功')
+            onChange?.('delete')
+          }, 
+          error: () => {
+            
+          }
+        });
       }
     });
   }
 
-  const onOk = async() => {
+  const onOk = async () => {
     try {
       const row = await form.validateFields();
 
@@ -189,13 +189,17 @@ const AttributeRelationModal = (props) => {
       setConfirmLoading(true);
 
       dispatch({
-        type: 'assetmanage.saveEleAndAttrRel',
+        type: 'assetmanage.saveEleAndAttrRelWithSourceModel',
         payload: {
-          data: newRels
+          data: newRels,
+          params: {
+            sourceModel: row.sourceModel,
+          }
         },
         callback: data => {
-          reset();
-          onCancel && onCancel();
+          showMessage('success', sourceModel?'更新成功':'新增成功')
+          setConfirmLoading(false);
+          onChange?.('update', row.sourceModel)
         },
         error: () => {
           setConfirmLoading(false);
@@ -208,11 +212,6 @@ const AttributeRelationModal = (props) => {
     }
   }
 
-  const reset = () => {
-    setConfirmLoading(false);
-    form.resetFields();
-  }
-
   const formItemLayout = {
     labelCol: {
       xs: { span: 24 },
@@ -224,45 +223,204 @@ const AttributeRelationModal = (props) => {
     },
   };
 
+  return <Spin spinning={loading}>
+    <div className='mb-3' style={{ textAlign: 'right' }}>
+      <Space>
+        {
+          sourceModel && <Button type="primary" danger onClick={() => onDelete()}>删除</Button>
+        }
+        <Button type="primary" onClick={() => onOk()} loading={confirmLoading}>确定</Button>
+      </Space>
+    </div>
+    <Form form={form} style={{ maxHeight: 400, overflow: 'auto' }} {...formItemLayout}> 
+      <Form.Item 
+        label='来源模型名称' 
+        name='sourceModel' 
+        rules={[{ required: true, message: '请输入来源名称'}]}
+      >
+        <Select 
+          allowClear
+          placeholder='请选择来源模型名称'
+          disabled={sourceModel}
+        >
+        {
+          supportSourceModelsName?.map((name, index) => {
+            return <Select.Option key={index} value={name}>
+            { name }
+            </Select.Option>
+          })
+        }
+        </Select>
+      </Form.Item>
+      {
+        (elements||[]).map((element, index) => {
+          return (
+            <Form.Item 
+              label={element.name||''} 
+              name={element.id||''} 
+              key={index}
+            >
+              <MetaModelSelect
+                metaModelTreeData={metadataModelTreeData}
+              />
+            </Form.Item>
+          );
+        })
+      }
+    </Form>
+    {contextHolder}
+  </Spin>
+}
+
+const AttributeRelationModal = (props) => {
+  const { visible, onCancel } = props;
+
+  const [ supportSourceModelsName, setSupportSourceModelsName ] = useState()
+  const [ loadingSourceModels, setLoadingSourceModels] = useState(false)
+  const [ sourceModels, setSourceModels ] = useState()
+  const [ metadataModelTreeData, setMetadataModelTreeData ] = useState([]);
+  const [ elements, setElements] = useState([]);
+  const [ activeKey, setActiveKey ] = useState();
+
+  const activeKeyRef = useRef();
+
+  useEffect(() => {
+    if (visible) {
+      getSupportSourceModelsName();
+      getSourceModels();
+      loadElementWithoutCustom();
+      getMetadataModelTree();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible])
+
+  const tabData = useMemo(() => {
+    return [...sourceModels||[], AddSourceModelName]
+  }, [sourceModels])
+
+  const getSupportSourceModelsName = () => {
+    dispatch({
+      type: 'assetmanage.listSupportSourceModels',
+      callback: (data) => {
+        console.log('data', data)
+        setSupportSourceModelsName(data||[])
+      },
+    })
+  }
+
+  const getSourceModels = () => {
+    setLoadingSourceModels(true)
+    dispatch({
+      type: 'assetmanage.listSourceModels',
+      callback: (data) => {
+        setLoadingSourceModels(false)
+        setSourceModels(data||[])
+
+        if (!activeKeyRef.current) {
+          activeKeyRef.current = data?.length > 0 ? data[0] : AddSourceModelName
+          setActiveKey(data?.length > 0 ? data[0] : AddSourceModelName)
+        } else if (activeKeyRef.current !== activeKey) {
+          setActiveKey(activeKeyRef.current)
+        }
+      },
+      error: () => {
+        setLoadingSourceModels(false)
+      }
+    })
+  }
+
+  const getMetadataModelTree = () => {
+    dispatch({
+      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||[]);
+      },
+      error: () => {
+      }
+    });
+  }
+
+  const loadElementWithoutCustom = () => {
+    dispatch({
+      type: 'assetmanage.loadElementWithoutCustom',
+      callback: data => {
+        setElements(data||[]);
+      },
+      error: () => {
+        
+      }
+    });
+  }
+
+  const onTabsChange = (value) => {
+    activeKeyRef.current = value
+    setActiveKey(value)
+  }
+
+  const onRelationChange = (type, value) => {
+    if (type === 'delete') {
+      activeKeyRef.current = undefined
+      getSourceModels()
+    } else if (type === 'update') {
+      activeKeyRef.current = value
+      getSourceModels()
+    }
+  }
+
+  const reset = () => {
+    setActiveKey(undefined);
+  }
+
   return (
     <Modal
       forceRender
       title={'资产属性关联'}
       visible={visible}
-      width={600}
+      width={1000}
       onCancel={() => { 
         reset();
-        onCancel && onCancel() 
+        onCancel?.();
       }}
       footer={
         <Space>
           <Button onClick={() => {
             reset();
-            onCancel && onCancel();
-          }}>返回</Button>
-          <Button type="primary" onClick={ onOk } loading={ confirmLoading }>确定</Button>
+            onCancel?.();
+          }}>取消</Button>
         </Space>
       }
     >
-      <div style={{ maxHeight: 500, overflow: 'auto' }}>
-        <Form form={form} {...formItemLayout}> 
-          {
-            (elements||[]).map((element, index) => {
-              return (
-                <Form.Item 
-                  label={element.name||''} 
-                  name={element.id||''} 
-                  key={index}
-                >
-                  <MetaModelSelect
-                    metaModelTreeData={metadataModelTreeData}
-                  />
-                </Form.Item>
-              );
-            })
-          }
-        </Form>
-      </div>
+      <Tabs tabPosition='left' activeKey={activeKey} onChange={onTabsChange}>
+      {
+        tabData?.map((item, i) => {
+          return <Tabs.TabPane tab={item} key={item}>
+            <AttributeRelationWithSourceModel 
+              elements={elements} 
+              supportSourceModelsName={supportSourceModelsName}
+              metadataModelTreeData={metadataModelTreeData} 
+              sourceModel={item === AddSourceModelName ? undefined: item}
+              activeKey={activeKey}
+              onChange={onRelationChange}
+            />
+          </Tabs.TabPane>
+        })
+      }
+      </Tabs>
     </Modal>  
   );
 }