优化多属性的展示和编辑输入框

jshERP-web/src/views/material/MaterialAttributeList.vue

@@ -47,6 +47,9 @@
                 <a>删除</a>
               </a-popconfirm>
             </span>
+            <template slot="customRenderAttributeValue" slot-scope="attributeValue">
+              <a-tag  v-for="(item,index) in getTagArr(attributeValue)" color="blue">{{item}}</a-tag>
+            </template>
           </a-table>
         </div>
         <!-- table区域-end -->
@@ -97,8 +100,10 @@
             align:"center",
             scopedSlots: { customRender: 'action' },
           },
-          {title: '属性名', dataIndex: 'attributeName', width: 200},
-          {title: '属性值（用竖线隔开）', dataIndex: 'attributeValue', width: 500}
+          {title: '属性名', dataIndex: 'attributeName', width: 150},
+          {title: '属性值', dataIndex: 'attributeValue', width: 750,
+            scopedSlots: { customRender: 'customRenderAttributeValue' }
+          }
         ],
         url: {
           list: "/materialAttribute/list",
@@ -111,6 +116,9 @@
 
     },
     methods: {
+      getTagArr(attributeValue) {
+        return attributeValue.split('|')
+      },
       handleEdit: function (record) {
         this.$refs.modalForm.edit(record);
         this.$refs.modalForm.title = "编辑";

jshERP-web/src/views/material/modules/MaterialAttributeModal.vue

@@ -14,7 +14,7 @@
       @cancel="handleCancel"
       cancelText="取消"
       okText="保存"
-      style="top:100px;height: 50%;">
+      style="top:100px;height: 60%;">
       <template slot="footer">
         <a-button key="back" v-if="isReadOnly" @click="handleCancel">
           取消
@@ -28,8 +28,34 @@
         </a-form>
         <a-form :form="form">
           <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="属性值">
-            <a-textarea :rows="5" placeholder="请输入属性值" v-decorator.trim="[ 'attributeValue', validatorRules.attributeValue]" />
-            注意：属性值请用竖线隔开，比如：红色|橙色|黄色|绿色
+            <a-tabs v-model:activeKey="activeKey" size="small">
+              <a-tab-pane key="1" tab="标签模式" forceRender>
+                <template v-for="(tag, index) in tags">
+                  <a-tag color="blue" style="margin-bottom: 10px" :key="tag" :closable="true" @close="() => handleClose(tag)">
+                    {{ tag }}
+                  </a-tag>
+                </template>
+                <a-input
+                  v-if="inputVisible"
+                  ref="input"
+                  type="text"
+                  size="small"
+                  :style="{ width: '150px' }"
+                  :value="inputValue"
+                  @change="handleInputChange"
+                  @blur="handleInputConfirm"
+                  @keyup.enter="handleInputConfirm"
+                />
+                <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
+                  <a-icon type="plus" /> 请输入属性值
+                </a-tag>
+              </a-tab-pane>
+              <a-tab-pane key="2" tab="文字模式" forceRender>
+                <a-textarea :rows="8" placeholder="请输入属性值" @change="handleValueChange"
+                            v-decorator.trim="[ 'attributeValue', validatorRules.attributeValue]" />
+                注意：属性值请用竖线隔开，比如：红色|橙色|黄色|绿色
+              </a-tab-pane>
+            </a-tabs>
           </a-form-item>
         </a-form>
       </a-spin>
@@ -38,8 +64,9 @@
 </template>
 <script>
   import pick from 'lodash.pick'
-  import {addMaterialAttribute,editMaterialAttribute,checkMaterialAttribute } from '@/api/api'
-  import {mixinDevice} from '@/utils/mixin'
+  import { addMaterialAttribute, checkMaterialAttribute, editMaterialAttribute } from '@/api/api'
+  import { mixinDevice } from '@/utils/mixin'
+
   export default {
     name: "MaterialAttributeModal",
     mixins: [mixinDevice],
@@ -49,6 +76,10 @@
         visible: false,
         model: {},
         isReadOnly: false,
+        activeKey: '1',
+        tags: [],
+        inputVisible: false,
+        inputValue: '',
         labelCol: {
           xs: { span: 24 },
           sm: { span: 5 },
@@ -69,7 +100,7 @@
           },
           attributeValue:{
             rules: [
-              { required: true, message: '请输入属性值（用竖线隔开）!' }
+              { required: true, message: '请输入属性值!' }
             ]
           }
         }
@@ -84,7 +115,13 @@
       edit (record) {
         this.form.resetFields();
         this.model = Object.assign({}, record);
+        this.activeKey = '1'
         this.visible = true;
+        if(this.model.attributeValue) {
+          this.tags = this.model.attributeValue.split('|')
+        } else {
+          this.tags = []
+        }
         this.$nextTick(() => {
           this.form.setFieldsValue(pick(this.model, 'attributeName', 'attributeValue'))
         });
@@ -123,21 +160,62 @@
         this.close()
       },
       validateAttributeName(rule, value, callback){
-        let params = {
-          name: value,
-          id: this.model.id?this.model.id:0
-        };
-        checkMaterialAttribute(params).then((res)=>{
-          if(res && res.code===200) {
-            if(!res.data.status){
-              callback();
-            } else {
-              callback("名称已经存在");
-            }
-          } else {
-            callback(res.data);
+        if(value) {
+          let params = {
+            name: value,
+            id: this.model.id?this.model.id:0
           }
+          checkMaterialAttribute(params).then((res)=>{
+            if(res && res.code===200) {
+              if(!res.data.status){
+                callback();
+              } else {
+                callback("名称已经存在");
+              }
+            } else {
+              callback(res.data);
+            }
+          })
+        } else {
+          callback()
+        }
+      },
+      //属性值变更
+      handleValueChange(e) {
+        let attributeValue = e.target.value
+        if(attributeValue) {
+          this.tags = attributeValue.split('|')
+        } else {
+          this.tags = []
+        }
+      },
+      //删除tag
+      handleClose(removedTag) {
+        this.tags = this.tags.filter(tag => tag !== removedTag)
+        this.form.setFieldsValue({'attributeValue': this.tags.join('|')})
+      },
+      //展示tag输入框
+      showInput() {
+        this.inputVisible = true
+        this.$nextTick(function() {
+          this.$refs.input.focus()
         });
+      },
+      handleInputChange(e) {
+        this.inputValue = e.target.value
+      },
+      handleInputConfirm() {
+        const inputValue = this.inputValue
+        let tags = this.tags
+        if (inputValue && tags.indexOf(inputValue) === -1) {
+          tags = [...tags, inputValue]
+        }
+        Object.assign(this, {
+          tags,
+          inputVisible: false,
+          inputValue: '',
+        })
+        this.form.setFieldsValue({'attributeValue': this.tags.join('|')})
       }
     }
   }