资产增加标签的功能

web/src/components/asset/Asset.js

@@ -70,6 +70,7 @@ class Asset extends Component {
         modalTitle: '',
         modalConfirmLoading: false,
         credentials: [],
+        tags: [],
         model: {},
         selectedRowKeys: [],
         delBtnLoading: false,
@@ -193,17 +194,31 @@ class Asset extends Component {
         await this.showModal('复制资产', result.data);
     }
 
-    async showModal(title, assets = {}) {
-        let result = await request.get('/credentials');
+    async showModal(title, asset = {}) {
+        // 并行请求
+        let getCredentials = request.get('/credentials');
+        let getTags = request.get('/tags');
+
         let credentials = [];
-        if (result.code === 1) {
-            credentials = result.data;
+        let tags = [];
+
+        let r1 = await getCredentials;
+        let r2 = await getTags;
+
+        if (r1['code'] === 1) {
+            credentials = r1['data'];
         }
+
+        if (r2['code'] === 1) {
+            tags = r2['data'];
+        }
+
         this.setState({
             modalTitle: title,
             modalVisible: true,
             credentials: credentials,
-            model: assets
+            tags: tags,
+            model: asset
         });
     };
 
@@ -220,6 +235,8 @@ class Asset extends Component {
             modalConfirmLoading: true
         });
 
+        formData.tags = formData.tags.join(',');
+
         if (formData.id) {
             // 向后台提交数据
             const result = await request.put('/assets/' + formData.id, formData);
@@ -501,6 +518,7 @@ class Asset extends Component {
                                 handleCancel={this.handleCancelModal}
                                 confirmLoading={this.state.modalConfirmLoading}
                                 credentials={this.state.credentials}
+                                tags={this.state.tags}
                                 model={this.state.model}
                             />
                             : null

web/src/components/asset/AssetModal.js

@@ -1,5 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {Form, Input, InputNumber, Modal, Radio, Select, Tooltip} from "antd/lib/index";
+import {isEmpty} from "../../utils/utils";
 
 const {TextArea} = Input;
 const {Option} = Select;
@@ -18,7 +19,7 @@ const protocolMapping = {
     'telnet': [{text: '自定义', value: 'custom'}, {text: '授权凭证', value: 'credential'}]
 }
 
-const AssetModal = function ({title, visible, handleOk, handleCancel, confirmLoading, credentials, model}) {
+const AssetModal = function ({title, visible, handleOk, handleCancel, confirmLoading, credentials, tags, model}) {
 
     const [form] = Form.useForm();
 
@@ -42,6 +43,15 @@ const AssetModal = function ({title, visible, handleOk, handleCancel, confirmLoa
         }
     }
 
+    let initAssetTags = []
+    if (!isEmpty(model['tags'])) {
+        initAssetTags = model['tags'].split(',');
+    }
+
+    let [assetTags, setAssetTags] = useState(initAssetTags);
+    console.log('初始元素', assetTags)
+    model['tags'] = undefined;
+
     const formItemLayout = {
         labelCol: {span: 6},
         wrapperCol: {span: 14},
@@ -96,6 +106,11 @@ const AssetModal = function ({title, visible, handleOk, handleCancel, confirmLoa
         model.accountType = v;
     }
 
+    const handleTagsChange = v => {
+        console.log(v)
+        setAssetTags(v);
+    }
+
     return (
 
         <Modal
@@ -152,7 +167,6 @@ const AssetModal = function ({title, visible, handleOk, handleCancel, confirmLoa
                     </Select>
                 </Form.Item>
 
-
                 {
                     accountType === 'credential' ?
                         <Form.Item label="授权凭证" name='credentialId' rules={[{required: true, message: '请选择授权凭证'}]}>
@@ -203,6 +217,14 @@ const AssetModal = function ({title, visible, handleOk, handleCancel, confirmLoa
 
                         : null
                 }
+
+                <Form.Item label="标签" name='tags'>
+                    <Select mode="tags" placeholder="请选择标签" defaultValue={assetTags} onChange={handleTagsChange}>
+                        {tags.map(tag => {
+                            return (<Option key={tag}>{tag}</Option>)
+                        })}
+                    </Select>
+                </Form.Item>
             </Form>
         </Modal>
     )

web/src/utils/utils.js

@@ -143,3 +143,7 @@ export function differTime(start, end) {
     }
     return show;
 }
+
+export const isEmpty = (text) =>{
+    return text === undefined || text == null || text.length === 0;
+}