✨ feat(标签): 标签添加图片和描述

src/views/tag/index.vue

@@ -128,7 +128,7 @@
         <el-table-column label="歌曲数" prop="songRefCount"></el-table-column>
         <el-table-column
           label="关联期刊数"
-          prop="columnRefCount"
+          prop="journalRefCount"
         ></el-table-column>
         <el-table-column
           label="子标签数"
@@ -263,6 +263,35 @@
             v-model="modifyDialog.form.data.nameEn"
           ></el-input>
         </el-form-item>
+        <el-form-item prop="image" label="上传图片">
+          <img
+            style="width: 170px;height: 120px;"
+            :src="modifyDialog.form.data.image"
+          />
+          <el-upload
+            :action="`${uploadBase}/luoo-tag/tag/upload/image`"
+            :headers="uploadHeader"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            :on-change="handleUploadTagImageSuccess"
+            multiple
+            :limit="1"
+            :on-exceed="handleExceed"
+            :file-list="modifyDialog.imageUploadFileList"
+          >
+            <el-button size="small" type="primary" icon="el-icon-receiving"
+              >上传图片</el-button
+            >
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="描述信息" prop="description">
+          <el-input
+            size="small"
+            type="textarea"
+            v-model="modifyDialog.form.data.description"
+          ></el-input>
+        </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="handleDialogCancel">取消</el-button>
@@ -276,11 +305,18 @@
 
 <script>
 import tagApi from "@/api/tag";
+import { getToken } from "@/utils/auth";
 
 export default {
   name: "Tag",
   data() {
     return {
+      uploadHeader: {
+        "Admin-Token": getToken(),
+        "X-Token": getToken(),
+        Authorization: getToken()
+      },
+      uploadBase: process.env.BASE_API,
       // 标签分级 1-一级菜单 2-二级菜单
       tagType: 1,
       // 查询表单
@@ -327,9 +363,12 @@ export default {
             parentName: null,
             parentId: null,
             nameCh: null,
-            nameEn: null
+            nameEn: null,
+            image: null,
+            description: null
           }
-        }
+        },
+        imageUploadFileList: []
       }
     };
   },
@@ -405,6 +444,34 @@ export default {
         }
       });
     },
+    // ************************* 上传事件 *************************
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 1 个文件，本次选择了 ${
+          files.length
+        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
+      );
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    handleUploadTagImageSuccess(response, file, fileList) {
+      if (response.status === "success") {
+        if (response.response.code === 200) {
+          this.$message.success("上传成功");
+          this.modifyDialog.form.data.image = response.response.data;
+        } else {
+          this.$message.error(response.response.message);
+        }
+        this.modifyDialog.imageUploadFileList = [];
+      }
+    },
     // ************************* 按扭事件 *************************
     /**
      * 查询按扭点击事件
@@ -433,6 +500,8 @@ export default {
       this.modifyDialog.form.data.parentId = null;
       this.modifyDialog.form.data.nameCh = null;
       this.modifyDialog.form.data.nameEn = null;
+      this.modifyDialog.form.data.image = null;
+      this.modifyDialog.form.data.description = null;
 
       this.modifyDialog.type = 0;
       this.modifyDialog.visible = true;
@@ -453,6 +522,8 @@ export default {
 
       this.modifyDialog.form.data.nameCh = row.nameCh;
       this.modifyDialog.form.data.nameEn = row.nameEn;
+      this.modifyDialog.form.data.image = row.image;
+      this.modifyDialog.form.data.description = row.description;
 
       this.modifyDialog.type = 1;
       this.modifyDialog.visible = true;
@@ -466,6 +537,8 @@ export default {
       this.modifyDialog.form.data.parentId = row.id;
       this.modifyDialog.form.data.nameCh = null;
       this.modifyDialog.form.data.nameEn = null;
+      this.modifyDialog.form.data.image = null;
+      this.modifyDialog.form.data.description = null;
 
       this.modifyDialog.type = 2;
       this.modifyDialog.visible = true;
@@ -513,6 +586,8 @@ export default {
           let data = {
             nameCh: this.modifyDialog.form.data["nameCh"],
             nameEn: this.modifyDialog.form.data["nameEn"],
+            image: this.modifyDialog.form.data["image"],
+            description: this.modifyDialog.form.data["description"],
             parentId:
               this.modifyDialog.form.data["parentId"] === null ||
               this.modifyDialog.form.data["parentId"] === undefined