分类加图标

src/views/modules/course/sociologyList.vue

@@ -42,6 +42,7 @@
               </el-input-number>
             </el-form-item>
             <el-form-item
+              style="width: auto;"
               label="是否为最终级"
               prop="isLast"
               label-width="120px"
@@ -58,14 +59,40 @@
               >
               </el-switch>
             </el-form-item>
+            <el-form-item
+              style="width: auto;"
+              label="图标"
+              prop="isLast"
+              label-width="80px"
+              class="form_item"
+            >
+              <el-upload
+                class="avatar-uploader"
+                :action="baseUrl + '/oss/fileoss'"
+                :show-file-list="false"
+                :on-success="handlePicSuccess"
+              >
+                <img v-if="fimages" :src="fimages" class="avatar" />
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+              <i
+              
+                class="el-icon-error delImgBtn"
+                style="font-size: 24px;"
+                @click="delImg()"
+                v-if="fimages != ''"
+              ></i>
+            </el-form-item>
+            <div class="clear"></div>
           </el-form>
+          <div class="clear"></div>
+         
+        </div>
       </div>
       <div
-          style="  border: 1px dashed #bababa;"
+            style="width:100%;  border: 1px dashed #bababa;float: left;"
             v-if="currentNode && currentNode.data.isLast == 1"
           ></div>
-      </div>
-
       <div
         class="border_box tree_content_box"
         v-if="currentNode && currentNode.data.isLast == 1"
@@ -208,6 +235,7 @@
 </template>
 
 <script>
+import global from "@/views/common/common.vue"; //引入共用组间
 // import AddOrUpdate from "./sociologyComponents/bookTagsForm.vue";
 import AddOrUpdate from "./sociologyComponents/sociology-add-or-update";
 import commonShop from "./sociologyComponents/shopproduct.vue";
@@ -218,6 +246,8 @@ import debounce from "lodash/debounce"; //导入lodash中的debounce
 export default {
   data() {
     return {
+      fimages: "",
+      baseUrl: global.baseUrl,
       isEdit: false,
       checkAll: false,
       dialogVisible: false,
@@ -285,6 +315,16 @@ export default {
     this.getDataList();
   },
   methods: {
+    delImg() {
+      this.fimages = "";
+      this.addForm.icon = "";
+    },
+    handlePicSuccess(res, file) {
+      this.fimages = res.url;
+      this.addForm.icon = res.url;
+      this.$message.success("上传成功");
+      //  console.log(res, "上传");
+    },
     // 只可输入数字
     UpNumber(e) {
       e.target.value = e.target.value.replace(/[^\d]/g, "");
@@ -347,13 +387,13 @@ export default {
                 courseId: this.addForm.id
               });
             }
-           
           } else {
             this.$message.error(data.msg);
-          }that.dialogVisible = false;
+          }
+          that.dialogVisible = false;
         });
 
-      that.$forceUpdate()
+      that.$forceUpdate();
     }, 200),
     openTable() {
       this.isEdit = false;
@@ -381,7 +421,13 @@ export default {
       this.isFresh = true;
       console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
       this.currentNode = { data: { ...form } };
+      console.log('this.currentNode at line 423:', this.currentNode)
       this.addForm = form;
+      if(form.icon){
+        this.fimages=form.icon
+      }else{
+        this.fimages=''
+      }
 
       await this.getDataList();
       // this.$refs.commonTree.setCurrentNodeShow();
@@ -420,6 +466,10 @@ export default {
               this.$nextTick(async () => {
                 this.$refs.commonTree.setCurrentNodeShow(data.sociology.id);
                 this.addForm = data.sociology;
+                if(data.sociology.icon){
+                   this.fimages = data.sociology.icon;
+                }
+               
                 this.currentNode = { data: { ...data.sociology } };
                 this.$message({
                   message: "操作成功",
@@ -497,6 +547,7 @@ export default {
       this.$refs.tree.setCheckedKeys([0]);
     },
     changeCurrentNode(val) {
+    
       this.changeCurrentNode = val;
       this.$forceUpdate();
     },
@@ -506,6 +557,7 @@ export default {
       this.isFresh = true;
     },
     handleClickNodes(node, data, type) {
+    console.log('type at line 552:', type)
       this.isEdit = false;
       this.addForm = {};
       // console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
@@ -529,12 +581,16 @@ export default {
             isLast: 0,
             pid: data.id,
             sort: 0,
-            title: ""
+            title: "",
+            icon: "",
           };
           break;
       }
       this.addForm = { ...form };
-
+      console.log('this.addForm at line 581:', this.addForm)
+      if(this.addForm.icon){
+                   this.fimages = this.addForm.icon;
+                }
       this.$nextTick(() => {
         this.$refs.commonShop.clear();
         // this.$refs.commonShop.bookMarketId = null;
@@ -866,8 +922,8 @@ export default {
 }
 
 .border_box {
-  height: 100px;
-  margin-bottom: 10px;
+  height: 120px;
+  // margin-bottom: 10px;
 
   .title_box {
     display: flex;
@@ -912,7 +968,7 @@ export default {
 }
 
 .tree_content_box {
-  height: calc(100% - 110px) !important;
+  height: calc(100% - 120px) !important;
 }
 
 .mod-config {
@@ -994,13 +1050,17 @@ p {
 // }
 
 .addFormBox {
-  overflow: hidden;
-
+  // overflow: hidden;
+  // overflow: auto;
   .form_item {
     width: 33%;
+    margin-bottom: 0 !important;
     float: left;
   }
 }
+.clear{
+      clear: both;
+    }
 
 .custom-tree-container {
   height: calc(100% - 100px);
@@ -1023,4 +1083,38 @@ p {
   width: calc(100% - 120px);
   float: left;
 }
+.delImgBtn {
+  cursor: pointer;
+  position: absolute;
+  display: inline-block;
+  top: -10px;
+  right: -10px;
+}
+.el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: rgb(162, 225, 218);
+}
+.avatar-uploader-icon {
+  border: 1px dashed #d9d9d9;
+  border-color: rgb(162, 225, 218);
+  font-size: 28px;
+  color: #8c939d;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+}
+.avatar {
+  width: 50px;
+  border: 1px dashed rgb(162, 225, 218);
+  background-color: #b0b0b09e;
+  // border-color: #409eff;
+  height: 50px;
+  display: block;
+}
 </style>