service

foyo-service/src/main/java/com/huiju/foyo/controller/TaServiceController.java

@@ -7,6 +7,8 @@ import com.huiju.foyo.common.BaseController;
 import com.huiju.foyo.common.ConstantFoyo;
 import com.huiju.foyo.common.ResponseBean;
 import com.huiju.foyo.model.TaService;
+import com.huiju.foyo.model.TaServiceLabel;
+import com.huiju.foyo.service.ITaServiceLabelService;
 import com.huiju.foyo.service.ITaServiceService;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -41,6 +43,8 @@ public class TaServiceController extends BaseController {
     @Autowired
     public ITaServiceService iTaServiceService;
 
+    @Autowired
+    private ITaServiceLabelService taServiceLabelService;
 
     /**
      * 分页查询列表
@@ -83,6 +87,19 @@ public class TaServiceController extends BaseController {
             taService.setCreateTime(LocalDateTime.now());
             taService.setCreateBy(ConstantFoyo.USER_ADMIN);
             if (iTaServiceService.save(taService)){
+                //保存对应的标签
+                List<TaServiceLabel> serviceLabelList = new ArrayList<>();
+                List<String> labelList = taService.getLabelList();
+                labelList.stream().forEach(e -> {
+                    TaServiceLabel taServiceLabel = new TaServiceLabel();
+                    taServiceLabel.setLabelName(e);
+                    taServiceLabel.setServiceId(taService.getId());
+                    taServiceLabel.setCreateTime(LocalDateTime.now());
+                    taServiceLabel.setCreateBy(ConstantFoyo.USER_ADMIN);
+                    serviceLabelList.add(taServiceLabel);
+                });
+                taServiceLabelService.saveBatch(serviceLabelList);
+                
                 responseBean.addSuccess(taService);
             }else {
                 responseBean.addError("fail");

foyo-service/src/main/java/com/huiju/foyo/model/TaService.java

@@ -1,6 +1,7 @@
 package com.huiju.foyo.model;
 
 import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableField;
 import com.baomidou.mybatisplus.annotation.TableId;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
@@ -8,6 +9,8 @@ import lombok.experimental.Accessors;
 
 import java.io.Serializable;
 import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.List;
 
 /**
  * <p>
@@ -66,6 +69,10 @@ public class TaService implements Serializable {
      * 排序
      */
     private Integer sort;
-
-
+    
+    /**
+     * 服务标签
+     */
+    @TableField(exist = false)
+    private List<String> labelList = new ArrayList<>();
 }

vue-element-admin/src/views/service/edit.vue

@@ -18,6 +18,25 @@
           <i v-else class="el-icon-plus avatar-uploader-icon"/>
         </el-upload>
       </el-form-item>
+      <el-form-item>
+        <el-tag
+          v-for="tag in dynamicTags"
+          :key="tag"
+          :disable-transitions="false"
+          closable
+          @close="handleClose(tag)">
+          {{ tag }}
+        </el-tag>
+        <el-input
+          v-if="inputVisible"
+          ref="saveTagInput"
+          v-model="inputValue"
+          size="small"
+          class="input-new-tag"
+          @keyup.enter.native="handleInputConfirm"
+          @blur="handleInputConfirm"/>
+        <el-button v-else class="button-new-tag" closable @click="showInput">+ 添加标签</el-button>
+      </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="dialogForm('0')">取 消</el-button>
@@ -81,7 +100,8 @@ export default {
         id: '',
         serviceName: '',
         sort: '',
-        serviceImageUrl: ''
+        serviceImageUrl: '',
+        labelList: []
       },
       uploadImgUrl: process.env.BASE_API + '/uploadimage',
       dialogStatus: '',
@@ -92,7 +112,10 @@ export default {
       bannerPositionArr: [
         { id: 1, value: '首页banner' },
         { id: 2, value: '服务banner' }
-      ]
+      ],
+      dynamicTags: [],
+      inputVisible: false,
+      inputValue: ''
     }
   },
   computed: {
@@ -132,6 +155,7 @@ export default {
     createData() {
       this.$refs['form'].validate((valid) => {
         if (valid) {
+          this.form.labelList = this.dynamicTags
           this.$store.dispatch('service/createService', this.form).then((res) => {
             if (res.data.code === '0') {
               this.$message({
@@ -148,6 +172,23 @@ export default {
           })
         }
       })
+    },
+    handleClose(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
+    },
+    showInput() {
+      this.inputVisible = true
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus()
+      })
+    },
+    handleInputConfirm() {
+      const inputValue = this.inputValue
+      if (inputValue) {
+        this.dynamicTags.push(inputValue)
+      }
+      this.inputVisible = false
+      this.inputValue = ''
     }
   }
 }
@@ -161,6 +202,21 @@ export default {
 .dialog-footer {
   text-align: center;
 }
+.el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
 </style>
 <style>
 .avatar-uploader .el-upload {