资产打标签

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

@@ -295,9 +295,13 @@ const AssetAction = (props) => {
                 </Descriptions.Item>
               }
               <Descriptions.Item label={<div className='title-text' style={{ textAlign: 'right', width: 60 }}>标签</div>} style={{ paddingBottom: 0 }}>
+                <AppContext.Consumer>
                 {
-                (currentAction==='add'||currentAction==='edit')?<Tag styleType='complex' id={id} />:<Tag id={id} />
+                  value => {
+                    return (currentAction==='add'||currentAction==='edit')?<Tag styleType='complex' id={id} creator={value?.user?.userName||''} />:<Tag id={id} creator={value?.user?.userName||''} />
                   } 
+                }
+                </AppContext.Consumer>
               </Descriptions.Item>
             </Descriptions>
           </div>

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

-import React, { useState } from 'react';
-import { Modal, Button, AutoComplete, Input, Avatar } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Modal, Button, AutoComplete, Input, Avatar, TreeSelect, Form } from 'antd';
 
 import { dispatch } from '../../../../model';
 import { showMessage } from '../../../../util';
@@ -18,6 +18,18 @@ const AddTagModal = (props) => {
   const [ options, setOptions ] = useState();
   const [ confirmLoading, setConfirmLoading ] = useState(false);
   const [ description, setDescription ] = useState('');
+  const [ tagForm, setTagForm ] = useState({});
+
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+
+    if (visible) {
+      getTagByKeywordAndCreator();
+      getSupportTagForm();
+    }
+
+  }, [ visible ])
 
   const getTagByKeywordAndCreator = (value=keyword) => {
     dispatch({
@@ -78,6 +90,20 @@ const AddTagModal = (props) => {
     })
   }
 
+  const getSupportTagForm = () => {
+    dispatch({
+      type: 'tag.getSupportTagForm',
+      payload: {
+        isDefault: false,
+        type: 'private',
+        creator
+      },
+      callback: data => {
+        setTagForm(data||{});
+      }
+    })
+  }
+
   const onOk = () => {
     if (keyword === '') {
       showMessage('warn', '请先填写标签');
@@ -118,33 +144,23 @@ const AddTagModal = (props) => {
     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;
-          }
+  const onCreate = async () => {
+    try {
+      const row = await form?.validateFields();
+
+      const newTagForm = JSON.parse(JSON.stringify(tagForm));
+      (newTagForm?.targetParameters||[]).forEach(param => {
+        param.value = row[param.name];
       })
 
+      setConfirmLoading(true);
       dispatch({
         type: 'tag.saveTag',
         payload: {
           params: {
-              isDefault: true
+            isDefault: false
           },
-            data: _tagForm
+          data: newTagForm
         },
         callback: data => {
           dispatch({
@@ -170,15 +186,10 @@ const AddTagModal = (props) => {
           setConfirmLoading(false);
         }
       })
-      },
-      error: () => {
-        setConfirmLoading(false);
-      }
-    })
-  }
 
-  const onFocus = () => {
-    getTagByKeywordAndCreator();
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
   }
 
   const onKeywordChange = (value) => {
@@ -219,6 +230,25 @@ const AddTagModal = (props) => {
     setKeyword('');
   }
 
+  const loop = (data) =>
+    data.map(item => {
+      if ((item.children||[]).length>0) {
+        return { ...item, ...{title: item.name, value: item.idString, children: loop(item.children)} };
+      }
+
+      return { ...item, ...{ title: item.name, value: item.idString }};
+    });
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 4 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 20 },
+    },
+  };
 
   let footer = [];
 
@@ -253,7 +283,6 @@ const AddTagModal = (props) => {
         type="primary"
         loading={confirmLoading}
         onClick={onCreate}
-        disabled={description===''}
       >
       创建
       </Button>
@@ -276,19 +305,42 @@ const AddTagModal = (props) => {
         allowClear 
         value={keyword}
         onChange={onKeywordChange}
-        onFocus={onFocus}
         options={options}
         onSelect={onSelect}
       />
     }
     {
-      step === 1 && <TextArea 
-        row={4} 
+      step === 1 && <Form 
+        {...formItemLayout}
+        form={form}
+        initialValues={{ name: keyword }}
+      > 
+      {
+        (tagForm?.targetParameters||[]).map((param, index) => {
+
+          if (param.name === 'usable') return null;
+
+          return (
+            <Form.Item
+              key={index}
+              label={param.cnName||''}
+              name={param.name||''}
+              rules={[{ required: param.required, message: `请选择${param.cnName}!` }]}
+            >
+            {
+              (param.selectMode==='singleSelect') ? <TreeSelect 
                 style={{ width: '100%' }}
-        value={description}
-        onChange={onDescriptionChange} 
-        placeholder='为您的新标签填写描述'
-      />
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} 
+                treeData={loop(param?.tagCatalogNode?.children||[])}
+                treeDefaultExpandAll 
+                allowClear
+              /> : <Input disabled={param.name==='name'} />
+            }
+            </Form.Item>
+          );
+        })
+      }
+      </Form>
     }
     </Modal>
   )

src/view/Manage/Tag/index.jsx

@@ -6,7 +6,7 @@ import AddTagModal from './Component/AddTagModal';
 import { dispatch } from '../../../model';
 
 const TagColumn = (props) => {
-  const { id, type = 'dataModel', creator = 'demotest', styleType = 'simple' } = props;
+  const { id, type = 'asset', creator = '', styleType = 'simple' } = props;
 
   const [ ownTags, setOwnTags ] = useState([]);
   const [ addTagModalVisible, setAddTagModalVisible ] = useState(false);