课程医学标签添加分类图片

src/views/components/commonBookTags/tags.vue

@@ -409,6 +409,7 @@ export default {
               children: [],
               delFlag: 0,
               isLast: 0,
+              icon:'',
               pid: data.id,
               sort: 0,
               title: ""

src/views/modules/course/medicalLabel.vue

@@ -32,6 +32,7 @@
               >
               </el-input>
             </el-form-item>
+            
             <el-form-item label="排序" prop="sort" class="form_item">
               <el-input-number
                 placeholder="请输入标签排序"
@@ -44,6 +45,34 @@
               >
               </el-input-number>
             </el-form-item>
+            <el-form-item
+              label="封面图"
+              prop="icon"
+              label-width="120px"
+              class="form_item"
+            >
+              <div style="display:flex; align-items:center">
+                <div>
+                  <el-upload
+                    class="avatar-uploader"
+                    :action="baseUrl + '/oss/fileoss'"
+                    :show-file-list="false"
+                    :on-success="handlePicSuccess"
+                  >
+                    <!-- <img v-if="!refreshImg" :src="addForm.images" class="avatar"> -->
+                    <img v-if="fimages" :src="fimages" class="avatar" />
+                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                  </el-upload>
+                </div>
+                <div>
+                  <div v-if="fimages != ''">
+                    <el-tag class="delImgBtn" @click="delImg()" type="danger"
+                      >清空图片</el-tag
+                    >
+                  </div>
+                </div>
+              </div>
+            </el-form-item>
             <el-form-item
               label="是否为最终级"
               prop="isLast"
@@ -61,6 +90,7 @@
               >
               </el-switch>
             </el-form-item>
+            
           </el-form>
         </div>
         <div
@@ -301,6 +331,7 @@
 </template>
 
 <script>
+import global from "../../common/common.vue"; //引入共用组间
 import debounce from "lodash/debounce"; //导入lodash中的debounce
 import AddOrUpdate from "@/views/components/commonBookTags/bookTagsForm.vue";
 import commonShop from "@/views/components/commonBookTags/shopproduct.vue";
@@ -310,6 +341,7 @@ import commonTree from "@/views/components/commonBookTags/tags.vue";
 export default {
   data() {
     return {
+      baseUrl: global.baseUrl,
       isEdit: false,
       checkAll: false,
       isIndeterminate: true,
@@ -334,6 +366,7 @@ export default {
           }
         ]
       },
+      fimages:'',
       currentNode: {},
       treeDataList: [],
       associatedGoodsList: [], //已关联商品列表
@@ -489,6 +522,7 @@ export default {
       console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
       this.currentNode = { data: { ...form } };
       this.addForm = form;      
+      this.fimages = this.addForm.icon
 
       await this.getDataList();
       // this.$refs.commonTree.setCurrentNodeShow();
@@ -506,7 +540,18 @@ export default {
         }
       });
     },
-
+    delImg() {
+      this.fimages = "";
+      this.addForm.icon = "";
+    },
+    handlePicSuccess(res, file) {
+      // console.log(res,'res')
+      // if (res.msg == "success") {
+      this.fimages = res.url;
+      this.addForm.icon = res.url;
+      this.$message.success("上传成功");
+      console.log(this.fimages, this.addForm.icon, "上传");      
+    },
     //新增修改
     dataFormSubmit: debounce(async function(formName) {
       //    return false
@@ -514,6 +559,8 @@ export default {
         this.$message.error("请输入标签名称");
         return false;
       }
+      console.log(this.addForm, "this.addForm-----------");
+   
       await this.$refs[formName].validate(async valid => {
         if (valid) {
           await this.$http({
@@ -531,7 +578,7 @@ export default {
 
               this.$nextTick(async () => {
                 this.$refs.commonTree.setCurrentNodeShow(data.Medical.id);
-
+                this.fimages = data.market.icon
                 this.addForm = data.market;
                 this.currentNode = { data: { ...data.Medical } };
                 this.$message({
@@ -545,9 +592,9 @@ export default {
               });
             } else {
               this.$message.error(data.msg);
-              setTimeout(()=>{
-                 this.addForm = { ...this.currentNode.data };
-              },500)
+              setTimeout(() => {
+                this.addForm = { ...this.currentNode.data };
+              }, 500);
 
               // console.log('this.addForm at line 550:', this.addForm)
               // console.log('this.addForm at line 550:', this.currentNode)
@@ -586,7 +633,7 @@ export default {
               url: this.$http.adornUrl(`${this.urlList.deleteShop}`),
               method: "POST",
               data: {
-                id: row[0].bindId,
+                id: row[0].bindId
                 // marketId: this.addForm.id
               },
               header: {
@@ -648,6 +695,7 @@ export default {
             children: [],
             delFlag: 0,
             isLast: 0,
+            icon: "",
             pid: data.id,
             sort: 0,
             title: ""
@@ -669,7 +717,8 @@ export default {
         isLast: 0,
         pid: 0,
         sort: 0,
-        title: ""
+        title: "",
+        icon: ""
       };
       this.handleClickNodes({ data: addform }, addform, "add");
       // if (!this.currentNode) {
@@ -976,6 +1025,38 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.delImgBtn {
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 10px;
+}
+.el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  border: 1px dashed #d9d9d9;
+  border-color: #409eff;
+  font-size: 28px;
+  color: #8c939d;
+  width: 70px;
+  height: 70px;
+  line-height: 70px;
+  text-align: center;
+}
+.avatar {
+  width: 70px;
+  border: 1px dashed #409eff;
+  // border-color: #409eff;
+  height: 70px;
+  display: block;
+}
 .tree_box {
   width: 350px !important;
   height: 100%;
@@ -1122,7 +1203,7 @@ p {
   overflow: hidden;
 
   .form_item {
-    width: 33%;
+    width: 25%;
     float: left;
   }
 }