资产详情改造

src/App.js

@@ -7,7 +7,7 @@ import {
 import { $hostParams, ContextPath } from './util';
 import loadable from "./util/loadable";
 
-import { AssetMountReference } from './util/constant';
+import { AssetBrowseReference, AssetMountReference } from './util/constant';
 
 export const AppContext = React.createContext();
 
@@ -22,7 +22,7 @@ const AssetBrowse = loadable(()=> import('./view/Manage/AssetBrowse'));
 const AssetRecycle = loadable(()=> import('./view/Manage/AssetRecycle'));
 const DatasourceManage = loadable(()=> import('./view/Manage/DatasourceManage'));
 const AssetDetailPage = loadable(()=> import('./view/Manage/AssetManage/Component/AssetDetailPage'));
-const AssetDetail = loadable(()=> import('./view/Manage/AssetManage/Component/AssetDetail'));
+const AssetAction = loadable(()=> import('./view/Manage/AssetManage/Component/AssetAction'));
 const ImportAction = loadable(()=> import('./view/Manage/Model/Component/ImportAction'));
 const EditModel = loadable(()=> import('./view/Manage/Model/Component/EditModel'));
 const EditTemplate = loadable(()=> import('./view/Manage/ModelConfig/Component/EditTemplate'));
@@ -90,11 +90,12 @@ export class App extends React.Component {
           setGlobalState,
           onGlobalStateChange
         }}>
-          <AssetDetail
+          <AssetAction reference={AssetBrowseReference} id={id} action='detail' terms={terms} readonly={true} />
+          {/* <AssetDetail
             reference='full-search'
             id={id} 
             terms={terms}
-          />
+          /> */}
         </AppContext.Provider>
       );
     }

src/model/assetmanage.js

 import * as service from '../service/dataassetmanager';
+import * as metadataService from '../service/metadata';
+
 import { call } from 'redux-saga/effects';
 
 export function* importElement(payload) {
@@ -265,3 +267,15 @@ export function* startFlow(payload) {
 export function* getSystems(payload) {
   return yield call(service.getSystems, payload);
 }
+
+export function* getMetadataAttributes(payload) {
+  return yield call(metadataService.getAttributes, payload);
+}
+
+export function* exportMetadataAttributes(payload) {
+  return yield call(metadataService.exportAttributes, payload);
+}
+
+export function* importMetadataAttributes(payload) {
+  return yield call(metadataService.importAttributes, payload);
+}
\ No newline at end of file

src/service/metadata.js

-import { GetJSON } from "../util/axios"
+import { GetJSON, PostJSON, callFetchRaw, PostFile } from "../util/axios"
 
 export function queryDatabase(payload) {
   return GetJSON("/metadatarepo/rest/tag/getDatabaseBySystemCode", payload);
@@ -19,3 +19,15 @@ export function queryAllFields(payload) {
 export function getSystemAllGraph(payload) {
   return GetJSON("/metadatarelation/getSystemAllGraph", payload);
 }
+
+export function getAttributes(payload) {
+  return PostJSON("/metadatarepo/rest/metadata/getByIdList", payload);
+}
+
+export function exportAttributes(payload) {
+  return callFetchRaw('post', '/metadatarepo/rest/download/exportList', payload)
+}
+
+export function importAttributes(payload) {
+  return PostFile("/metadatarepo/rest/import/add", payload);
+}
\ No newline at end of file

src/util/axios.js

 
 import axios from 'axios';
+import qs from 'qs';
 
 import { IsArr, showMessage, isSzseEnv } from './index';
 
@@ -163,3 +164,28 @@ export function PostFile(url, payload) {
     callback
   )
 }
+
+const config = {
+  baseURL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  cache: 'no-cache',
+  // `paramsSerializer` is an optional function in charge of serializing `params`
+  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
+  paramsSerializer: function (params: any) {
+    // return qs.stringify(params, { arrayFormat: 'repeat' })
+    return qs.stringify(params, { arrayFormat: 'brackets' })
+  },
+}
+
+export const callFetchRaw = (method, url, options) => {
+  const { body: data, ...reqConfig } = options
+  return axios.request({
+    method,
+    url,
+    data,
+    ...config,
+    ...reqConfig
+  })
+}
\ No newline at end of file

src/util/download.ts

+import { AxiosResponse } from "axios"
+
+export default function (res: AxiosResponse<any>) {
+  const blob = res.data
+  const headers = res.headers
+
+  let tempName = headers["content-disposition"]
+    ?.split(";")?.[1]
+    ?.split("filename=")?.[1];
+  tempName = decodeURI(tempName);
+
+  // const blob = new Blob([content], { type: 'application/octet-stream' })
+  var url = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.style.display = 'none';
+  link.href = url;
+  link.setAttribute('download', tempName); //or any other extension
+  document.body.appendChild(link);
+  link.click();
+  URL.revokeObjectURL(link.href) // 释放URL 对象
+  document.body.removeChild(link)
+}
\ No newline at end of file

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

+.asset-action {
+  .yy-table-tbody > tr > td  {
+    padding: 8px 8px !important;
+  }
+}
\ No newline at end of file

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

@@ -4,7 +4,7 @@ import { Drawer, Form } from 'antd';
 import AssetAction from './AssetAction';
 
 const AssetDetailDrawer = (props) => {
-  const { onCancel, visible, id, dirId } = props;
+  const { onCancel, visible, id, dirId, reference } = props;
   
   const [ form ] = Form.useForm();
 
@@ -13,7 +13,7 @@ const AssetDetailDrawer = (props) => {
       forceRender
       visible={ visible }
       title='资产详情'
-      width={600}
+      width={830}
       placement="right"
       closable={ true }
       onClose={() => {
@@ -21,7 +21,7 @@ const AssetDetailDrawer = (props) => {
       }}
     >
     {
-      visible && <AssetAction form={form} id={id} dirId={dirId} action='detail' readOnly onChange={() => {
+      visible && <AssetAction reference={reference} form={form} id={id} dirId={dirId} action='detail' onChange={() => {
         onCancel?.(true);
       }} />
     }

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

@@ -515,31 +515,31 @@ const AssetTable = (props) => {
           }, 500)
         }
 
-        if (reference === AssetManageReference) {
-          if (remoteRelationRef.current) {
-            const index = _assets.findIndex((asset) => asset.id === remoteRelationRef.current.dataAssetId);
-
-            remoteRelationRef.current = null;
-
-            if (index === -1) {
-              setSelectItem(_assets.length>0?_assets[0]:{});
-              onSelect && onSelect(_assets.length>0?_assets[0].id:'', _assets.length>0?_assets[0].dirId:'');
-            } else {
-              setSelectItem(_assets[index]);
-              onSelect && onSelect(_assets[index].id, _assets[index].dirId);
-            }
-          } else if ((selectItem?.id||'') !=='') {
-            const index = _assets.findIndex((asset) => asset.id === selectItem?.id);
+        // if (reference === AssetManageReference) {
+        //   if (remoteRelationRef.current) {
+        //     const index = _assets.findIndex((asset) => asset.id === remoteRelationRef.current.dataAssetId);
+
+        //     remoteRelationRef.current = null;
+
+        //     if (index === -1) {
+        //       setSelectItem(_assets.length>0?_assets[0]:{});
+        //       onSelect && onSelect(_assets.length>0?_assets[0].id:'', _assets.length>0?_assets[0].dirId:'');
+        //     } else {
+        //       setSelectItem(_assets[index]);
+        //       onSelect && onSelect(_assets[index].id, _assets[index].dirId);
+        //     }
+        //   } else if ((selectItem?.id||'') !=='') {
+        //     const index = _assets.findIndex((asset) => asset.id === selectItem?.id);
   
-            if (index === -1) {
-              setSelectItem(_assets.length>0?_assets[0]:{});
-              onSelect && onSelect(_assets.length>0?_assets[0].id:'', _assets.length>0?_assets[0].dirId:'');
-            }
-          } else {
-            setSelectItem(_assets.length>0?_assets[0]:{});
-            onSelect && onSelect(_assets.length>0?_assets[0].id:'', _assets.length>0?_assets[0].dirId:'');
-          }
-        }
+        //     if (index === -1) {
+        //       setSelectItem(_assets.length>0?_assets[0]:{});
+        //       onSelect && onSelect(_assets.length>0?_assets[0].id:'', _assets.length>0?_assets[0].dirId:'');
+        //     }
+        //   } else {
+        //     setSelectItem(_assets.length>0?_assets[0]:{});
+        //     onSelect && onSelect(_assets.length>0?_assets[0].id:'', _assets.length>0?_assets[0].dirId:'');
+        //   }
+        // }
 
         setTotal(data.total||0);
         onCountChange && onCountChange(data.total||0);
@@ -943,7 +943,7 @@ const AssetTable = (props) => {
         <Space size={15}>
           { 
             //栏目和自定义目录 不允许新增资产
-            (reference===AssetManageReference && nodeLevel!==1 && nodeType!=='custom') && <Button onClick={addAsset}>新增</Button>
+            // (reference===AssetManageReference && nodeLevel!==1 && nodeType!=='custom') && <Button onClick={addAsset}>新增</Button>
           }
 
           { 
@@ -1052,9 +1052,7 @@ const AssetTable = (props) => {
                   setSelectItem(record);
                   onSelect && onSelect(record?.id, record?.dirId);
 
-                  if (reference !== AssetManageReference) {
                   setAssetDetailDrawerVisible(true);
-                  }
                 },
                 onContextMenu: event => {
                   if ((reference===AssetManageReference||(reference===AssetBrowseReference&&record.hasPermission)) && (record.resourceState==='uncombed'||record.resourceState==='notRelatedAsset')) {
@@ -1136,6 +1134,7 @@ const AssetTable = (props) => {
         id={selectItem?.id}
         dirId={selectItem?.dirId}
         visible={assetDetailDrawerVisible}
+        reference={reference}
         onCancel={onAssetDetailDrawerCancel}
       />
       <AssetDeleteModal 

src/view/Manage/AssetManage/Component/Upload.tsx

+import React, { useCallback, useImperativeHandle, useRef } from "react";
+import { showMessage } from "../../../../util";
+
+export interface UploadType {
+  chooseFile: () => void
+}
+
+export default React.forwardRef<UploadType, { accept: string, upload: (files: FileList) => void }>(function ({ accept, upload }, ref) {
+
+  const input = useRef<HTMLInputElement>(null)
+
+  useImperativeHandle(ref, () => ({
+    chooseFile: () => {
+      input.current!.click();
+    }
+  }), [])
+
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
+    console.log('files', e.target.files)
+    if (e.target.files) { //console.debug(input.current!.files)
+      e.preventDefault();
+
+      let file = e.target.files[0]
+      if (file) {
+        const fileSize = file.size
+        const isLt5G = fileSize / 1024 / 1024 / 1024 < 5
+        if (!isLt5G) {
+          showMessage('warn', '上传文件大小不超过5G')
+          return
+        }
+      }
+      e.target.files && upload(e.target.files)
+    }
+  }, [upload])
+
+  const onInputClick: React.MouseEventHandler<HTMLInputElement> = useCallback((e) => {
+    input.current!.value = null
+  }, [])
+
+  return <input ref={input} type="file" multiple={false} accept={accept ?? "image/png"} style={{ visibility: 'hidden' }}
+    onChange={onChange}
+    onClick={onInputClick}
+  />
+})
\ No newline at end of file

src/view/Manage/AssetManage/index.jsx

@@ -96,10 +96,10 @@ const AssetManage = (props) => {
         { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
         </div>
       </div>
-      <Separate width='15px' />
+      {/* <Separate width='15px' />
       <div className='right'>
         <AssetAction form={form} id={assetId} dirId={assetDirId} action='detail' onChange={onAssetActionChange} />
-      </div>
+      </div> */}
     </div>
   )
 }