资产新增

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

+import React, { useState } from 'react';
+import { Modal, Form, Space, Button } from 'antd';
+import { showMessage } from '../../../../util';
+import { dispatch } from '../../../../model';
+import AssetAction from './AssetAction';
+
+import './AddAssetModel.less';
+
+const AddAssetModel = (props) => {
+
+  const { onCancel, visible, nodeId } = props;
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+  const [ metadataId, setMetadataId ] = useState('');
+  const [ elements, setElements ] = useState([]);
+
+  const [ form ] = Form.useForm();
+
+  const onElementsChange = (value) => {
+    setElements(value);
+  }
+
+  const onMetadataChange = (value) => {
+    setMetadataId(value);
+  }
+
+  const onOk = async() => {
+    try {
+      const row = await form?.validateFields();
+      
+      const newElements = [...elements];
+      (newElements||[]).forEach(element => {
+        if (row.hasOwnProperty(element.name)) {
+          element.value = row[element.name];
+        }
+      });
+
+      const params = {
+        dirId: nodeId,
+      }
+
+      if ((metadataId||'')!=='') {
+        params.metadataId = metadataId;
+      }
+
+      setConfirmLoading(true);
+
+      dispatch({
+        type: 'assetmanage.addOrUpdateDataAsset',
+        payload: { 
+          params,
+          data: { elements: newElements } 
+        },
+        callback: () => {
+          setConfirmLoading(false);
+          showMessage("success","新增成功");
+          onCancel && onCancel(true);
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      })
+
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+      setConfirmLoading(false);
+    }
+  }
+
+  return (
+    <Modal
+      forceRender
+      className='asset-add'
+      title='新增资产信息'
+      visible={ visible }
+      width={ 600 }
+      onCancel={() => { onCancel && onCancel(); } }
+      footer={
+        <Space>
+          <Button onClick={() => onCancel && onCancel() }>取消</Button>
+          <Button type="primary" onClick={ onOk } loading={ confirmLoading }>确定</Button>
+        </Space>
+      }
+    >
+      <AssetAction 
+        form={form}
+        dirId={nodeId} 
+        action='add'
+        onMetadataChange={onMetadataChange}
+        onElementsChange={onElementsChange}
+      />
+    </Modal>
+  );
+} 
+
+export default AddAssetModel;
\ No newline at end of file

src/view/Manage/AssetManage/Component/AssetEdit.less → src/view/Manage/AssetManage/Component/AddAssetModel.less

-.asset-edit {
-  .yy-form {
+.asset-add {
+  .yy-modal-body {
     max-height: 500px !important;
     overflow: auto !important;
   }

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

@@ -11,8 +11,7 @@ import { AppContext } from '../../../../App';
 import Tag from '../../Tag';  
 
 const AssetAction = (props) => {
-
-  const { id, dirId, action, terms, onChange, readOnly = false } = props;
+  const { id, dirId, action, terms, onChange, readOnly = false, form, onMetadataChange, onElementsChange } = props;
 
   const [ currentAction, setCurrentAction ] = useState(action);
   const [ assetParams, setAssetParams ] = useState({ assets: [], attributes: [], attributesFoldMap: {} });
@@ -24,8 +23,6 @@ const AssetAction = (props) => {
 
   const { assets, attributes, attributesFoldMap } = assetParams;
 
-  const [ form ] = Form.useForm();
-
   useEffect(() => {
     if (action === 'add') {
       getElements();
@@ -45,6 +42,7 @@ const AssetAction = (props) => {
       callback: data => {
         setLoading(false);
         setElements(data||[]);
+        onElementsChange && onElementsChange(data||[]);
 
         if (action === 'add') {
           const _attributes = [];
@@ -84,6 +82,7 @@ const AssetAction = (props) => {
       callback: data => {
         setLoading(false);
         setMetadataId(data?.mid||'');
+        onMetadataChange && onMetadataChange(data?.mid||'');
 
         const _attributes = [];
         (data?.elements||[]).forEach(element => {
@@ -139,7 +138,7 @@ const AssetAction = (props) => {
 
   const onOk = async() => {
     try {
-      const row = await form.validateFields();
+      const row = await form?.validateFields();
       
       const newElements = [...elements];
       (newElements||[]).forEach(element => {
@@ -208,7 +207,7 @@ const AssetAction = (props) => {
           _fieldsValue[element.name] = element.value;
         })
 
-        form.setFieldsValue(_fieldsValue);
+        form?.setFieldsValue(_fieldsValue);
       }
     })
   }
@@ -240,7 +239,7 @@ const AssetAction = (props) => {
       }}
     >
       {
-        !readOnly && <div
+        (!readOnly&&action!=='add') && <div
           className='flex px-3'
           style={{
             height: 52,
@@ -259,23 +258,24 @@ const AssetAction = (props) => {
           </Space>
         </div>
       }
-
-      <div style={{ padding: 10 }}>
-        <Descriptions column={1}>
-          {
-            (assets.currentPath||'')!=='' && <Descriptions.Item label='路径' style={{ paddingBottom: 10 }}>
-              <a onClick={()=>{jumpToPath();}}>
-              {assets.currentPath||''}
-              </a>
+      {
+        (action!=='add') && <div style={{ padding: 10 }}>
+          <Descriptions column={1}>
+            {
+              (assets.currentPath||'')!=='' && <Descriptions.Item label='路径' style={{ paddingBottom: 10 }}>
+                <a onClick={()=>{jumpToPath();}}>
+                {assets.currentPath||''}
+                </a>
+              </Descriptions.Item>
+            }
+            <Descriptions.Item label='标签' style={{ paddingBottom: 0 }}>
+            {
+              (currentAction==='add'||currentAction==='edit')?<Tag styleType='complex' id={id} />:<Tag id={id} />
+            }
             </Descriptions.Item>
-          }
-          <Descriptions.Item label='标签' style={{ paddingBottom: 0 }}>
-          {
-            (currentAction==='add'||currentAction==='edit')?<Tag styleType='complex' id={id} />:<Tag id={id} />
-          }
-          </Descriptions.Item>
-        </Descriptions>
-      </div>
+          </Descriptions>
+        </div>
+      }
 
       <div
         style={{
@@ -297,7 +297,7 @@ const AssetAction = (props) => {
                 sameAttributeElements = (assets?.elements||[]).filter(element => element.type===attribute);
               }
 
-              if (attributesFoldMap[attribute]) {
+              if (currentAction!=='add' && !fullScreen && attributesFoldMap[attribute]) {
                 sameAttributeElements = (sameAttributeElements||[]).filter(element => unfoldedElements.indexOf(element?.name||'')!==-1);
               }
 
@@ -311,11 +311,14 @@ const AssetAction = (props) => {
                       padding: '0 15px',
                       backgroundColor: '#106baa',
                       color: '#fff',
+                      height: 32
                     }}
                   >
                     <div>{attribute||''}</div>
                     {
-                      attributesFoldMap[attribute] ? <Button type='text' style={{ padding: 0, color: '#fff' }} onClick={() => { onFoldButtonClick(attribute, false) }}>展开<DownOutlined /></Button> : <Button type='text' style={{ padding: 0, color: '#fff' }} onClick={() => { onFoldButtonClick(attribute, true) }}>收起<UpOutlined /></Button>
+                      currentAction!=='add'&&!fullScreen && (
+                        attributesFoldMap[attribute] ? <Button type='text' style={{ padding: 0, color: '#fff' }} onClick={() => { onFoldButtonClick(attribute, false) }}>展开<DownOutlined /></Button> : <Button type='text' style={{ padding: 0, color: '#fff' }} onClick={() => { onFoldButtonClick(attribute, true) }}>收起<UpOutlined /></Button>
+                      )
                     }
                   </div>
                   <div style={{ padding: 10 }}>
@@ -327,6 +330,8 @@ const AssetAction = (props) => {
                           value?.onGlobalStateChange&&value?.onGlobalStateChange((state, prev) => {
                             if (state.message === 'data-govern-show-metadata-list-callback-message') {
                               setMetadataId(state.data?.metadataId||'');
+                              onMetadataChange && onMetadataChange(state.data?.metadataId||'');
+
                               form?.setFieldsValue({ '资产项': state.data?.metadataInfoJson||'' });
 
                               if ((state.data?.metadataId||'') !== '') {

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

 import React from 'react';
-import { Drawer } from 'antd';
+import { Drawer, Form } from 'antd';
 
 import AssetAction from './AssetAction';
 
 const AssetDetailDrawer = (props) => {
   const { onCancel, visible, id, dirId } = props;
+  
+  const [ form ] = Form.useForm();
 
   return (
     <Drawer 
@@ -18,7 +20,7 @@ const AssetDetailDrawer = (props) => {
         onCancel && onCancel();
       }}
     >
-      <AssetAction id={id} dirId={dirId} action='detail' readOnly />
+      <AssetAction form={form} id={id} dirId={dirId} action='detail' readOnly />
     </Drawer>
   )
 }

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

-import React, { useEffect, useState } from 'react';
-import { Modal, Form, Input, Space, Button } from 'antd';
-import { showMessage } from '../../../../util';
-import { dispatch } from '../../../../model';
-import { AppContext } from '../../../../App';
-import MetadataInfo from './MetadataInfo';
-
-import './AssetEdit.less';
-
-const AssetEdit = (props) => {
-
-  const { onCancel, visible, action, id, nodeId } = props;
-  const [ form ] = Form.useForm();
-  const [ confirmLoading, setConfirmLoading ] = useState(false);
-  const [ elements, setElements ] = useState([]);
-  const [ asset, setAsset ] = useState('');
-  const [ metadataId, setMetadataId ] = useState('');
-
-  useEffect(() => {
-
-    if (visible) {
-      if (action === 'add') {
-        getAllElements();
-      } else if (id) {
-        getAllElements(() => {
-          getAsset();
-        });
-      }
-    } else {
-      setMetadataId('');
-    }
-    
-    //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ visible, action, id ])
-
-  const getAllElements = ( cb = null ) => {
-    dispatch({
-      type: 'assetmanage.listElements',
-      callback: data => {
-        setElements(data||[]);
-
-        if (action === 'add') {
-          let _fieldsValue = {};
-          (data||[]).forEach(element => {
-            if (element.manualMaintain === '是') {
-              _fieldsValue[element.name] = '';
-            }
-          })
-
-          form.setFieldsValue(_fieldsValue);
-        }
-
-        cb && cb();
-      }
-    })
-  }
-
-  const getAsset = () => {
-    dispatch({
-      type: 'assetmanage.getDataAssetDetail',
-      payload: {
-        dataAssetId: id
-      },
-      callback: data => {
-        setAsset(data);
-        setMetadataId(data.mid||'');
-        let _fieldsValue = {};
-        (data.elements||[]).forEach(element => {
-          _fieldsValue[element.name] = element.value;
-        })
-
-        form.setFieldsValue(_fieldsValue);
-      }
-    })
-  }
-
-  //选中元数据后 内容回填.
-  const fillElementValueBeforeCreate = (mid = metadataId) => {
-    dispatch({
-      type: 'assetmanage.fillElementValueBeforeCreate',
-      payload: {
-        params: {
-          metadataIds: mid
-        }
-      },
-      callback: data => {
-        let _fieldsValue = {};
-        (data||[]).forEach(element => {
-          _fieldsValue[element.name] = element.value;
-        })
-
-        form.setFieldsValue(_fieldsValue);
-      }
-    })
-  }
-
-  const onOk = async() => {
-    try {
-      const row = await form.validateFields();
-      
-      const newElements = [...elements];
-      (newElements||[]).forEach(element => {
-        if (row.hasOwnProperty(element.name)) {
-          element.value = row[element.name];
-        }
-      });
-
-      const params = {
-        dirId: nodeId,
-      }
-
-      if ((metadataId||'')!=='') {
-        params.metadataId = metadataId;
-      }
-
-      setConfirmLoading(true);
-
-      dispatch({
-        type: 'assetmanage.addOrUpdateDataAsset',
-        payload: { 
-          params,
-          data: action==='add' ? { elements: newElements } : { ...asset, elements: newElements } 
-        },
-        callback: () => {
-          setConfirmLoading(false);
-          onCancel && onCancel(true);
-          showMessage("success",(action==='add')?"新增成功":"修改成功");
-        },
-        error: () => {
-          setConfirmLoading(false);
-        }
-      })
-
-    } catch (errInfo) {
-      console.log('Validate Failed:', errInfo);
-      setConfirmLoading(false);
-    }
-  }
-
-  const formItemLayout = {
-    labelCol: {
-      xs: { span: 24 },
-      sm: { span: 5 },
-    },
-    wrapperCol: {
-      xs: { span: 24 },
-      sm: { span: 17 },
-    },
-  };
-
-  return (
-    <Modal
-      forceRender
-      className='asset-edit'
-      title='资产信息'
-      visible={ visible }
-      width={ 600 }
-      onCancel={() => { onCancel && onCancel(); } }
-      footer={
-        <Space>
-          <Button onClick={() => onCancel && onCancel() }>取消</Button>
-          <Button type="primary" onClick={ onOk } loading={ confirmLoading }>确定</Button>
-        </Space>
-      }
-    >
-      <Form {...formItemLayout} form={form}>
-        <AppContext.Consumer>
-        {
-        value => {
-          value?.onGlobalStateChange&&value?.onGlobalStateChange((state, prev) => {
-            if (state.message === 'data-govern-show-metadata-list-callback-message') {
-              setMetadataId(state.data?.metadataId||'');
-              form?.setFieldsValue({ '资产项': state.data?.metadataInfoJson||'' });
-
-              if ((state.data?.metadataId||'') !== '') {
-                fillElementValueBeforeCreate(state.data?.metadataId||'');
-              }
-            }
-          });
-
-          return (
-            <>
-            { (elements||[]).map((element, index) => {
-              return ( 
-                <Form.Item 
-                  label={element.name}
-                  name={element.name}
-                  key={index}
-                  
-                >
-                { (element.name==='资产项') ? <MetadataInfo /> : <Input disabled={element.manualMaintain==='否'}  /> }
-                </Form.Item>
-              )
-            })}
-            </>
-          );
-        }}
-        </AppContext.Consumer>
-      </Form>
-    </Modal>
-  );
-} 
-
-export default AssetEdit;
\ No newline at end of file

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

@@ -7,7 +7,7 @@ import { Resizable } from 'react-resizable';
 import FilterElementModal from './FilterElementModal';
 import AssetMount from '../../AssetRecycle/Component/AssetMount';
 import ImportAssetDrawer from './ImportAssetDrawer';
-import AssetEdit from './AssetEdit';
+import AssetEdit from './AddAssetModel';
 import AssetDetailDrawer from "./AssetDetailDrawer";
 import { dispatch, dispatchLatestHomepage } from '../../../../model';
 import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util';
@@ -61,7 +61,6 @@ const AssetTable = (props) => {
   const [ assetMountVisible, setAssetMountVisible ] = useState(false);
   const [ assetDetailDrawerVisible, setAssetDetailDrawerVisible ] = useState(false);
   // const [ currentAssetId, setCurrentAssetId ] = useState('');
-  const [ assetEditAction, setAssetEditAction ] = useState('');
   const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
   const { pageNum, pageSize } = pagination;
   const [ keyword, setKeyword ] = useState('');
@@ -326,7 +325,6 @@ const AssetTable = (props) => {
   }
 
   const addAsset =()=>{
-    setAssetEditAction('add');    
     setAssetEditVisible(true);
   }
 
@@ -578,7 +576,6 @@ const AssetTable = (props) => {
 
       <AssetEdit 
         visible={assetEditVisible}
-        action={assetEditAction}
         nodeId={nodeId}
         onCancel={onAssetEditCancel}
       />

src/view/Manage/AssetManage/index.jsx

 import React, { useState } from 'react';
 import classNames from 'classnames';
+import { Form } from 'antd';
 import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
 
 import AssetTree from './Component/AssetTree';
@@ -22,6 +23,7 @@ const AssetManage = (props) => {
   const [ directoryChanged, setDirectoryChanged ] = useState(false);
   const [ elementsChanged, setElementsChanged ] = useState(false);
   const [ assetActionChanged, setAssetActionChanged ] = useState(false);
+  const [ form ] = Form.useForm();
 
   const { assetId, assetDirId } = assetParams;
 
@@ -74,7 +76,7 @@ const AssetManage = (props) => {
         <AssetTable nodeId={nodeId} reference={AssetManageReference} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} />
       </div>
       <div className='right'>
-        <AssetAction id={assetId} dirId={assetDirId} action='detail' onChange={onAssetActionChange} />
+        <AssetAction form={form} id={assetId} dirId={assetDirId} action='detail' onChange={onAssetActionChange} />
       </div>
     </div>
   )