资产打标签

src/model/tag.js

@@ -13,6 +13,10 @@ export function* getResourceTagIn(payload) {
   return yield call(service.getResourceTagIn, payload);
 }
 
+export function* batchAddTagResourceByTagList(payload) {
+  return yield call(service.batchAddTagResourceByTagList, payload);
+}
+
 export function* getTagByKeywordAndCreator(payload) {
   return yield call(service.getTagByKeywordAndCreator, payload);
 }
@@ -23,4 +27,8 @@ export function* getSupportTagForm(payload) {
 
 export function* saveTag(payload) {
   return yield call(service.saveTag, payload);
+}
+
+export function* getTagIdListByNameList(payload) {
+  return yield call(service.getTagIdListByNameList, payload);
 }
\ No newline at end of file

src/service/tag.js

@@ -12,6 +12,10 @@ export function getResourceTagIn(payload) {
   return PostJSON("/tagger/tagResource/getResourceTagIn", payload);
 }
 
+export function batchAddTagResourceByTagList(payload) {
+  return PostJSON("/tagger/tagResource/batchAddTagResourceByTagList", payload)
+}
+
 export function getTagByKeywordAndCreator(payload) {
   return GetJSON("/tagger/tag/getTagByKeywordAndCreator", payload);
 }
@@ -23,3 +27,7 @@ export function getSupportTagForm(payload) {
 export function saveTag(payload) {
   return PostJSON("/tagger/tag/saveTag", payload);
 }
+
+export function getTagIdListByNameList(payload) {
+  return PostJSON("/tagger/tag/getTagIdListByNameList", payload);
+}

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

@@ -9,6 +9,7 @@ import { highlightSearchContentByTerms, showMessage } from '../../../../util';
 import { AppContext } from '../../../../App';
 import Tag from '../../Tag';  
 import Separate from './Separate';
+import AssetTagModal from './AssetTagModal';
 
 import { CancelSvg, EditSvg, SaveSvg, FullScreenSvg, CancelFullScreenSvg } from './AssetSvg';
 
@@ -24,6 +25,8 @@ const AssetAction = (props) => {
   const [ fullScreen, setFullScreen ] = useState(false);
   const [ resourceRelations, setResourceRelations ] = useState([]);
   const { assets, attributes, attributesFoldMap } = assetParams;
+  const [ assetTagModalVisible, setAssetTagModalVisible ] = useState(false);
+  const [ keyword, setKeyword ] = useState('');
 
   useEffect(() => {
     if (action === 'add') {
@@ -233,7 +236,16 @@ const AssetAction = (props) => {
   }
 
   const onAssetTag = (keyword) => {
+    setKeyword(keyword);
+    setAssetTagModalVisible(true);
+  }
+
+  const onAssetTagModalCancel = (refresh = false) => {
+    setAssetTagModalVisible(false);
 
+    if (refresh) {
+      getResourceRelations();
+    }
   }
 
   const formItemLayout = {
@@ -463,6 +475,22 @@ const AssetAction = (props) => {
           } 
         </Spin>
       </div>  
+    
+      <AppContext.Consumer>
+      {
+        value => {
+          return (
+            <AssetTagModal
+              visible={assetTagModalVisible}
+              id={id}
+              keyword={keyword}
+              creator={value?.user?.userName||''}
+              onCancel={onAssetTagModalCancel}
+            />
+          );
+        } 
+      }
+      </AppContext.Consumer>
     </div>
   )
 }

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

+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Input, Space, Button, Select } from 'antd';
+import { dispatch } from '../../../../model';
+import { AppContext } from '../../../../App';
+import MetadataInfo from './MetadataInfo';
+
+const { Option } = Select;
+
+const AssetTagModal = (props) => {
+
+  const { onCancel, visible, id, keyword, creator } = props;
+  const [ form ] = Form.useForm();
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+  const [ elements, setElements ] = useState([]);
+  const [ asset, setAsset ] = useState('');
+  const [ metadataId, setMetadataId ] = useState('');
+  const [ dirs, setDirs ] = useState([]);
+
+  useEffect(() => {
+
+    if (visible && (id||'')!=='') {
+      getAsset();
+    } else {
+      setMetadataId('');
+    }
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ visible, id ])
+
+  useEffect(() => {
+
+    if (visible && (keyword||'')!=='') {
+      getDirectoryByName(keyword);
+    }
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ visible, keyword ])
+
+  const getAsset = () => {
+    dispatch({
+      type: 'assetmanage.getDataAssetDetail',
+      payload: {
+        dataAssetId: id
+      },
+      callback: data => {
+        setAsset(data);
+        setElements(data?.elements||[]);
+        setMetadataId(data.mid||'');
+        let _fieldsValue = {};
+        (data.elements||[]).forEach(element => {
+          _fieldsValue[element.name] = element.value;
+        })
+
+        form.setFieldsValue(_fieldsValue);
+      }
+    })
+  }
+
+  const getDirectoryByName = (keyword) => {
+    dispatch({
+      type: 'assetmanage.listDirectoryByName',
+      payload: {
+        name: keyword
+      },
+      callback: data => {
+        setDirs(data||[]);
+      }
+    });
+  }
+
+  //选中元数据后 内容回填.
+  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: row.tags.join(','),
+      }
+
+      if ((metadataId||'')!=='') {
+        params.metadataId = metadataId;
+      }
+
+      setConfirmLoading(true);
+
+      dispatch({
+        type: 'assetmanage.addOrUpdateDataAsset',
+        payload: { 
+          params,
+          data: { ...asset, elements: newElements } 
+        },
+        callback: () => {
+          const nameList = [];
+          (dirs||[]).forEach(dir=>{
+            if (row.tags.indexOf(dir.id) !== -1) {
+              nameList.push(dir.path);
+            }
+          })
+          dispatch({
+            type: 'tag.getTagIdListByNameList',
+            payload: { 
+              params: {
+                nameList: nameList.join(',') 
+              }
+            },
+            callback: data => {
+              dispatch({
+                type: 'tag.batchAddTagResourceByTagList',
+                payload: { 
+                  params: {
+                    tagIds: (data||[]).join(','),
+                    resourceIds: id,
+                    type: 'public',
+                    creator
+                  }
+                },
+                callback: () => {
+                  setConfirmLoading(false);
+                  onCancel && onCancel(true);
+                },
+                error: () => {
+                  setConfirmLoading(false);
+                }
+              })
+            },
+            error: () => {
+              setConfirmLoading(false);
+            }
+          })
+        },
+        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-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>
+      }
+    >
+      <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 (
+            <>
+            <Form.Item
+              label='资产标签'
+              name='tags'
+              required={true}
+            >
+              <Select mode='multiple'>
+              {
+                (dirs||[]).map((dir, index) => {
+                  return (
+                    <Option key={index} value={dir.id||''}>{dir.path||''}</Option>
+                  );
+                })
+              }
+              </Select>
+            </Form.Item>
+            { (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 AssetTagModal;