资产详情

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

+import React, { useEffect, useState } from 'react';
+import { Form, Spin, Input, Descriptions, Space, Button } from 'antd';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+
+import MetadataInfo from './MetadataInfo';
+import { dispatch } from '../../../../model';
+import { highlightSearchContentByTerms, showMessage } from '../../../../util';
+import { unfoldedElements } from '../util';
+
+const AssetAction = (props) => {
+
+  const { id, dirId, action, terms } = props;
+
+  const [ currentAction, setCurrentAction ] = useState(action);
+  const [ assetParams, setAssetParams ] = useState({ assets: [], attributes: [], attributesFoldMap: {} });
+  const [ elements, setElements ] = useState([]);
+  const [ metadataId, setMetadataId ] = useState('');
+  const [ loading, setLoading ] = useState(false);
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+
+  const { assets, attributes, attributesFoldMap } = assetParams;
+
+  const [ form ] = Form.useForm();
+
+  useEffect(() => {
+    if (action === 'add') {
+      getElements();
+    } else if ((id||'')!=='') {
+      setCurrentAction('detail');
+      getElements(() => {
+        getAsset();
+      });
+    }    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id])
+
+  const getElements = ( cb = null ) => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.listElements',
+      callback: data => {
+        setLoading(false);
+        setElements(data||[]);
+
+        if (action === 'add') {
+          const _attributes = [];
+          (data||[]).forEach(element => {
+            if (_attributes.indexOf(element.type) === -1) {
+              _attributes.push(element.type);
+            }
+          })
+
+          let newAttributesFoldMap = {...attributesFoldMap};
+          (_attributes||[]).forEach(attribute => {
+            if (newAttributesFoldMap[attribute]===undefined || newAttributesFoldMap[attribute]===null) {
+              newAttributesFoldMap[attribute] = true;
+            }
+          })
+
+          setAssetParams({ assets: [], attributes: _attributes, attributesFoldMap: newAttributesFoldMap });
+          form?.resetFields();
+        }
+
+        cb && cb();
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const getAsset = () => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.getDataAssetDetail',
+      payload: {
+        dataAssetId: id
+      },
+      callback: data => {
+        setLoading(false);
+        setMetadataId(data?.mid||'');
+
+        const _attributes = [];
+        (data?.elements||[]).forEach(element => {
+          if (_attributes.indexOf(element.type) === -1) {
+            _attributes.push(element.type||'');
+          }
+        })
+
+        let newAttributesFoldMap = {...attributesFoldMap};
+        (_attributes||[]).forEach(attribute => {
+          if (newAttributesFoldMap[attribute]===undefined || newAttributesFoldMap[attribute]===null) {
+            newAttributesFoldMap[attribute] = true;
+          }
+        })
+
+        setAssetParams({ assets: data, attributes: _attributes, attributesFoldMap: newAttributesFoldMap });
+
+        let _fieldsValue = {};
+        (data.elements||[]).forEach(element => {
+          _fieldsValue[element.name] = element.value||'';
+        })
+
+        form?.setFieldsValue(_fieldsValue);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const onActionButtonClick = () => {
+    if (currentAction === 'detail') {
+      setCurrentAction('edit');
+    } else if (currentAction === 'edit') {
+      onOk();
+    }
+  }
+
+  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,
+      }
+
+      if ((metadataId||'')!=='') {
+        params.metadataId = metadataId;
+      }
+
+      setConfirmLoading(true);
+
+      dispatch({
+        type: 'assetmanage.addOrUpdateDataAsset',
+        payload: { 
+          params,
+          data: action==='add' ? { elements: newElements } : { ...assets, elements: newElements } 
+        },
+        callback: () => {
+          setConfirmLoading(false);
+          setCurrentAction('detail');
+          getAsset();
+          showMessage("success",(action==='add')?"新增成功":"修改成功");
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      })
+
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+      setConfirmLoading(false);
+    }
+  }
+
+  const onFoldButtonClick = (attribute, fold) => {
+    let newAttributesFoldMap = {...attributesFoldMap};
+    newAttributesFoldMap[attribute] = fold;
+
+    setAssetParams({...assetParams, attributesFoldMap: newAttributesFoldMap});
+  }
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 5 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 17 },
+    },
+  };
+
+  return (
+    <div
+      className='flex'
+      style={{
+        height: '100%',
+        flexDirection: 'column'
+      }}
+    >
+      <div
+        className='flex px-3'
+        style={{
+          height: 52,
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          borderBottom: '1px solid #f0f0f0',
+        }}
+      >
+        <div style={{ color: 'rgba(0,0,0,0.75)' }}>资产详情</div>
+        <Space>
+          <Button loading={confirmLoading} onClick={onActionButtonClick}>{ currentAction==='detail'?'编辑':'保存'}</Button>
+        </Space>
+      </div>
+      
+      <div
+        className='p-3'
+        style={{
+          flex: 1,
+          overflow: 'auto'
+        }}
+      >
+        <Spin 
+          spinning={loading}
+        >
+          {
+            (attributes||[]).map((attribute, index) => {
+              let sameAttributeElements = [];
+
+              if (currentAction==='add' || currentAction==='edit') {
+                sameAttributeElements = (elements||[]).filter(element => element.type===attribute);
+              } else {
+                sameAttributeElements = (assets?.elements||[]).filter(element => element.type===attribute);
+              }
+
+              if (attributesFoldMap[attribute]) {
+                sameAttributeElements = (sameAttributeElements||[]).filter(element => unfoldedElements.indexOf(element?.name||'')!==-1);
+              }
+
+              return (
+                <div key={index}>
+                  <div className='flex'>
+                    <div style={{ color: 'rgba(0,0,0,0.75)' }}>{attribute||''}</div>
+                    {
+                      attributesFoldMap[attribute] ? <Button type='text' style={{ padding: 0, color: '#0069AC' }} onClick={() => { onFoldButtonClick(attribute, false) }}>展开<DownOutlined /></Button> : <Button type='text' style={{ padding: 0, color: '#0069AC' }} onClick={() => { onFoldButtonClick(attribute, true) }}>收起<UpOutlined /></Button>
+                    }
+                  </div>
+                  {
+                    (currentAction==='add'||currentAction==='edit') ? <Form {...formItemLayout} form={form}>
+                    {
+                      (sameAttributeElements||[]).map((element, _index) => {
+                        return (
+                          <Form.Item 
+                            label={element.name}
+                            name={element.name}
+                            key={_index}
+                          >
+                          { (element.name==='资产项') ? <MetadataInfo /> : <Input disabled={element.manualMaintain==='否'}  /> }
+                          </Form.Item>
+                        );
+                      })
+                    }
+                    </Form> : <Descriptions column={1}>
+                    {
+                      (sameAttributeElements||[]).map((item, index) => {
+                        return (
+                          <Descriptions.Item label={item.name||''} key={index}>
+                          { 
+                            item.name==='资产项' ? <MetadataInfo config={false} value={item.value||''} /> : <span>{highlightSearchContentByTerms(item.value||'', terms)}</span>
+                          }
+                          </Descriptions.Item>
+                        );
+                      })
+                    }
+                    </Descriptions>
+                  }
+                </div>
+              );
+            })
+          } 
+        </Spin>
+      </div>  
+    </div>
+  )
+}
+
+export default AssetAction;
\ No newline at end of file

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

@@ -4,7 +4,6 @@ import { Space, Spin, Tooltip } from 'antd';
 import { dispatch } from '../../../../model';
 
 import record from '../../../../assets/record.png'; 
-import DescriptionsItem from 'antd/lib/descriptions/Item';
 
 const AssetDirectory = (props) => {
   const { id } = props;

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

@@ -191,7 +191,7 @@ const AssetEdit = (props) => {
                 { (element.name==='资产项') ? <MetadataInfo /> : <Input disabled={element.manualMaintain==='否'}  /> }
                 </Form.Item>
               )
-          })}
+            })}
             </>
           );
         }}

src/view/Manage/AssetManage/index.jsx

@@ -2,10 +2,11 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
 
-import AssetTable from './Component/AssetTable';
+import AssetTree from './Component/AssetTree';
 import ElementManage from './Component/ElementManage';
 import AssetDirectory from './Component/AssetDirectory';
-import AssetTree from './Component/AssetTree';
+import AssetTable from './Component/AssetTable';
+import AssetAction from './Component/AssetAction';
 
 import './index.less';
 
@@ -13,6 +14,7 @@ const AssetManage = (props) => {
 
   const [ nodeId, setNodeId ] = useState('');
   const [ nodeType, setNodeType ] = useState(''); 
+  const [ assetId, setAssetId ] = useState('');
   const [ expandTree, setExpandTree ] = useState(true);
 
   const onTreeSelect = (value, type) => {
@@ -21,6 +23,10 @@ const AssetManage = (props) => {
     setNodeType(type);
   }
 
+  const onTableSelect = (value) => {
+    setAssetId(value);
+  }
+
   const treeToggleClick = () => {
     setExpandTree(!expandTree);
   }
@@ -39,10 +45,13 @@ const AssetManage = (props) => {
         { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
         </div>
       </div>
-      <div className='right'>
+      <div className='middle'>
         <ElementManage />
         <AssetDirectory id={nodeId} />
-        <AssetTable nodeId={nodeId} nodeType={nodeType} {...props} />
+        <AssetTable nodeId={nodeId} nodeType={nodeType} onSelect={onTableSelect} {...props} />
+      </div>
+      <div className='right'>
+        <AssetAction id={assetId} dirId={nodeId} action='detail' />
       </div>
     </div>
   )

src/view/Manage/AssetManage/index.less

@@ -32,8 +32,13 @@
     }
   }
 
+  .middle {
+    width: calc(100% - 250px - 400px);
+  }
+
   .right {
-    width: calc(100% - 250px);
+    width: 400px;
+    border-left: 1px solid #EFEFEF;
   }
 }
 
@@ -42,7 +47,7 @@
     width: 0;
   }
 
-  .right {
-    width: calc(100% - 20px);
+  .middle {
+    width: calc(100% - 20px - 400px);
   }
 }
\ No newline at end of file

src/view/Manage/AssetManage/util/index.js

+export const requireElements = ['中文名称', '资产项', '使用方', '信息安全等级'];
+
+export const unfoldedElements = ['编号', '中文名称', '英文名称', '描述', '表现形式', '数据类型', '来源系统', '资产项', '使用方', '标签', '共享级别', '信息安全等级', '来源单位', '状态', '所属部门', '维护方', '所属层次', '更新频度', '数据规模', '数据大小', '质量情况'];
\ No newline at end of file