新建标签

src/App.js

@@ -85,6 +85,7 @@ export class App extends React.Component {
     return (
       <AppContext.Provider value={{
         env: params?.env,
+        user: params?.user,
         setGlobalState,
         onGlobalStateChange
       }}>

src/model/index.js

@@ -9,8 +9,9 @@ import * as datasource from './datasource';
 import * as map from './map';
 import * as datamodel from './datamodel';
 import * as assetmanage from './assetmanage';
+import * as tag from './tag';
 
-const funcs = Connect({ user, datamodel, map, assetmanage, datasource })
+const funcs = Connect({ user, datamodel, map, assetmanage, datasource, tag })
 
 function* request(args) {
   const { type, payload, callback, error } = args.args;

src/model/tag.js

+import * as service from '../service/tag';
+import { call } from 'redux-saga/effects';
+
+export function* batchAddTagResource(payload) {
+  return yield call(service.batchAddTagResource, payload);
+}
+
+export function* deleteTagResource(payload) {
+  return yield call(service.deleteTagResource, payload);
+}
+
+export function* getResourceTagIn(payload) {
+  return yield call(service.getResourceTagIn, payload);
+}
+
+export function* getTagByKeywordAndCreator(payload) {
+  return yield call(service.getTagByKeywordAndCreator, payload);
+}
+
+export function* getSupportTagForm(payload) {
+  return yield call(service.getSupportTagForm, payload);
+}
+
+export function* saveTag(payload) {
+  return yield call(service.saveTag, payload);
+}
\ No newline at end of file

src/service/tag.js

+import { GetJSON, PostJSON, Delete } from "../util/axios";
+
+export function batchAddTagResource(payload) {
+  return PostJSON("/tagger/tagResource/batchAddTagResource", payload);
+}
+
+export function deleteTagResource(payload) {
+  return Delete("/tagger/tagResource/deleteTagResource", payload);
+}
+
+export function getResourceTagIn(payload) {
+  return PostJSON("/tagger/tagResource/getResourceTagIn", payload);
+}
+
+export function getTagByKeywordAndCreator(payload) {
+  return GetJSON("/tagger/tag/getTagByKeywordAndCreator", payload);
+}
+
+export function getSupportTagForm(payload) {
+  return GetJSON("/tagger/tag/getSupportTagForm", payload);
+}
+
+export function saveTag(payload) {
+  return PostJSON("/tagger/tag/saveTag", payload);
+}

src/view/Manage/Model/Component/ModelTable.jsx

@@ -7,6 +7,7 @@ import classnames from 'classnames';
 import { dispatch } from '../../../../model'; 
 import { showMessage, getQueryParam, paginate, isSzseEnv } from '../../../../util';
 import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId } from '../../../../util/constant';
+import Tag from "../../Tag";
 
 import './ModelTable.less';
 
@@ -122,6 +123,16 @@ const ModelTable = (props) => {
       width: 100,
       ellipsis: true,
     },
+    // {
+    //   title: '标签',
+    //   dataIndex: 'tag',
+    //   width: 250,
+    //   render: (_,__) => {
+    //     return (
+    //       <Tag />
+    //     );
+    //   }
+    // },
     {
       title: '操作',
       key: 'action',

src/view/Manage/Tag/Component/AddTagModal.jsx

+import React, { useState, useRef, useEffect } from 'react';
+import { Modal, Button, AutoComplete, Input, Avatar, Tooltip } from 'antd';
+
+import { dispatch } from '../../../../model';
+import { showMessage } from '../../../../util';
+
+import './AddTagModal.less';
+
+const { TextArea } = Input;
+
+const AddTagModal = (props) => {
+  const { visible, onCancel, id, type, creator } = props;
+
+  const [ step, setStep ] = useState(0);
+  const [ keyword, setKeyword ] = useState('');
+  const [ selectTag, setSelectTag ] = useState(null);
+  const [ matchTags, setMatchTags ] = useState([]);
+  const [ options, setOptions ] = useState();
+  const [ confirmLoading, setConfirmLoading ] = useState(false);
+  const [ description, setDescription ] = useState('');
+
+  const getTagByKeywordAndCreator = (value=keyword) => {
+    dispatch({
+      type: 'tag.getTagByKeywordAndCreator',
+      payload: {
+        keyword: value,
+        creator,
+      },
+      callback: data => {
+        setMatchTags(data||[]);
+
+        let tagExsit = false, _selectTag = null;
+        const _options = [];
+        (data||[]).forEach(item => {
+          _options.push({
+            value: item.tagId,
+            label: (
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                }}
+              >
+                {item.name||''}
+                <Avatar 
+                  shape="square" 
+                  size="small"
+                  title={item.type==='public'?'公共标签':'个人标签'}
+                >
+                  {item.type==='public'?'公':'个'}
+                </Avatar>
+              </div>
+            )
+          });
+
+          if (value==='' || item.name===value) {
+            tagExsit = true;
+          }
+
+          if (item.name === value) {
+            _selectTag = item;
+          }
+
+        })
+
+        if (!tagExsit) {
+          _options.push({
+            value: -1,
+            label: (
+              <a >{`创建 ${value||''}`}</a>
+            )
+          })
+        }
+
+        setSelectTag(_selectTag);
+        setOptions(_options);
+      }
+    })
+  }
+
+  const onOk = () => {
+    if (keyword === '') {
+      showMessage('warn', '请先填写标签');
+      return;
+    }
+
+    if (selectTag) {
+      setConfirmLoading(true);
+      dispatch({
+        type: 'tag.batchAddTagResource',
+        payload: {
+          params: {
+            tagId: selectTag.tagId,
+            resourceIds: id,
+            type,
+            creator
+          }
+        },
+        callback: () => {
+          reset();
+          onCancel && onCancel(true);
+        },
+        error: () => {
+          setConfirmLoading(false);
+        }
+      })
+    } else {
+      setStep(1);
+    }
+  }
+
+  const cancel = () => {
+    reset();
+    onCancel && onCancel();
+  }
+
+  const onBack = () => {
+    setStep(0);
+  }
+
+  const onCreate = () => {
+    setConfirmLoading(true);
+    dispatch({
+      type: 'tag.getSupportTagForm',
+      payload: {
+        isDefault: true,
+        type: 'private',
+        creator
+      },
+      callback: data => {
+        const _tagForm = data||{};
+        (_tagForm.targetParameters||[]).forEach(param => {
+          if (param.name === 'name') {
+            param.value = keyword;
+          } 
+          if (param.name === 'desc') {
+            param.value = description;
+          }
+        })
+
+        dispatch({
+          type: 'tag.saveTag',
+          payload: {
+            params: {
+              isDefault: true
+            },
+            data: _tagForm
+          },
+          callback: data => {
+            dispatch({
+              type: 'tag.batchAddTagResource',
+              payload: {
+                params: {
+                  tagId: data.id,
+                  resourceIds: id,
+                  type,
+                  creator
+                }
+              },
+              callback: () => {
+                reset();
+                onCancel && onCancel(true);
+              },
+              error: () => {
+                setConfirmLoading(false);
+              }
+            })
+          },
+          error: () => {
+            setConfirmLoading(false);
+          }
+        })
+      },
+      error: () => {
+        setConfirmLoading(false);
+      }
+    })
+  }
+
+  const onFocus = () => {
+    getTagByKeywordAndCreator();
+  }
+
+  const onKeywordChange = (value) => {
+    //匹配行被选中时 跳过
+    if (value!==undefined && value!==null && typeof(value)!=='string') return;
+
+    setSelectTag(null);
+    setKeyword(value||'');
+    getTagByKeywordAndCreator(value||'');
+  }
+
+  const onSelect = (value, option) => {
+    if (value!==-1) {
+      let _selectTag = null;
+
+      matchTags.forEach(item => {
+        if (item.tagId === value) {
+          _selectTag = item;
+        }
+      })
+
+      setSelectTag(_selectTag);
+      setKeyword(_selectTag.name||'');
+    } else {
+      setSelectTag(null);
+      setStep(1);
+    }
+  }
+
+  const onDescriptionChange = (e) => {
+    setDescription(e.target.value);
+  }
+
+  const reset = () => {
+    setConfirmLoading(false);
+    setStep(0);
+    setSelectTag(null);
+    setKeyword('');
+  }
+
+
+  let footer = [];
+
+  if (step === 0) {
+    footer = [ 
+      <Button
+        key="0" 
+        onClick={cancel}
+      >
+      取消
+      </Button>,
+      <Button
+        key="1" 
+        type="primary"
+        loading={confirmLoading}
+        onClick={onOk}
+        disabled={keyword===''}
+      >
+      确定
+      </Button>
+    ];
+  } else if (step === 1) {
+    footer = [ 
+      <Button
+        key="0" 
+        onClick={onBack}
+      >
+      返回
+      </Button>,
+      <Button
+        key="1" 
+        type="primary"
+        loading={confirmLoading}
+        onClick={onCreate}
+        disabled={description===''}
+      >
+      创建
+      </Button>
+    ];
+  }
+
+  return (
+    <Modal 
+      className='add-tag-modal'
+      forceRender
+      visible={visible}
+      title={(step===0)?'新建标签':`创建${keyword}`}
+      width={520}
+      onCancel={cancel}
+      footer={footer}
+    >
+    {
+      step === 0 && <AutoComplete
+        style={{ width: '100%' }}
+        allowClear 
+        value={keyword}
+        onChange={onKeywordChange}
+        onFocus={onFocus}
+        options={options}
+        onSelect={onSelect}
+      />
+    }
+    {
+      step === 1 && <TextArea 
+        row={4} 
+        style={{ width: '100%' }} 
+        value={description}
+        onChange={onDescriptionChange} 
+        placeholder='为您的新标签填写描述'
+      />
+    }
+    </Modal>
+  )
+}
+
+export default AddTagModal;
\ No newline at end of file

src/view/Manage/Tag/Component/AddTagModal.less

+.add-tag-modal {
+  .yy-select-item-group {
+    min-height: 0 !important;
+    height: 0 !important;
+  }
+}
\ No newline at end of file

src/view/Manage/Tag/index.jsx

+import React, { useEffect, useState } from 'react';
+import { Button, Space } from 'antd';
+
+import AddTagModal from './Component/AddTagModal';
+import { dispatch } from '../../../model';
+
+const Tag = (props) => {
+  const { id = '619dd97e9e14e63b24b1dbc2-1', type = 'dataModel', creator = 'demotest' } = props;
+
+  const [ ownTags, setOwnTags ] = useState([]);
+  const [ addTagModalVisible, setAddTagModalVisible ] = useState(false);
+
+  useEffect(() => {
+    getTags();
+  }, [])
+
+  const getTags = () => {
+    dispatch({
+      type: 'tag.getResourceTagIn',
+      payload: {
+        params: {
+          resourceIds: id,
+          type,
+          creator,
+          includeAll: true
+        }
+      },
+      callback: data => {
+        if (data) {
+          setOwnTags(data[id]||[]);
+        }
+      }
+    })
+  }
+
+  const onAddBtnClick = () => {
+    setAddTagModalVisible(true);
+  }
+
+  const onAddTagModalCancel = (refresh=false) => {
+    setAddTagModalVisible(false);
+    refresh && getTags();
+  }
+
+  return (
+    <div className='tag'>
+      <Space>
+        {
+          (ownTags||[]).map((item, index) => {
+            return (
+              <Button key={index} size='small'>
+              { item.name||'' }
+              </Button>
+            );
+          })
+        }
+        <Button 
+          size='small' 
+          type='dashed'
+          onClick={onAddBtnClick}
+        >
+          新建
+        </Button>
+        <AddTagModal 
+          visible={addTagModalVisible}  
+          id={id}
+          type={type}
+          creator={creator}
+          onCancel={onAddTagModalCancel}  
+        />
+      </Space>
+    </div>
+  );
+}
+
+export default Tag;
\ No newline at end of file