前端

unimall-admin/src/views/productManagement/index.vue

@@ -33,7 +33,7 @@
     </el-row>
     <el-row style="margin-top:20px;display: flex;overflow-x: auto;">
       <el-col :span="7" style="min-width:450px">
-        <el-tree :default-expanded-keys="[-1]" node-key="id" :data="data" :props="defaultProps" @node-click="handleNodeClick">
+        <el-tree :default-expanded-keys="[-1]" node-key="id" :data="data" :props="defaultProps" >
           <span  class="custom-tree-node" slot-scope="{ node, data }">
             <span>{{ node.label }}</span>
             <span v-if="node.label!='全部分类'&&node.label!='未分类'">
@@ -178,6 +178,16 @@
           :before-upload="onBeforeUpload">
             <img v-if="dict.classifyIcon" :src="dict.classifyIcon" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <div v-if="dict.classifyIcon" class="el-upload-list__item-actions">
+
+              <span class="el-upload-list__item-preview" @click.stop="handleRemoves">
+
+                <i class="el-icon-delete"></i>
+
+              </span>
+
+            </div>
+            
         </el-upload>
       </el-form-item>
       <el-form-item label="分类封面">
@@ -190,6 +200,7 @@
           :on-success="uploadSuccessHandle1"
           :before-upload="onBeforeUpload1">
             <img v-if="dict.classifyImage" :src="dict.classifyImage" class="avatar">
+
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
       </el-form-item>
@@ -279,6 +290,15 @@ export default {
     }
   },
   methods: {
+    handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handleRemoves(){
+        console.log(11111)
+        this.dict.classifyIcon = ''
+         this.$refs['mYupload'].clearFiles()
+         this.$forceUpdate()
+      },
     // 上传图片了处理图片
     uploadSuccessHandle(e, file) {
         const that = this
@@ -492,4 +512,103 @@ export default {
   height: 178px;
   display: block;
 }
+.el-upload-list--picture-card .el-upload-list__item {
+
+width: 178px;
+
+height: 178px;
+
+}
+
+.el-upload__tip {
+
+text-align: center;
+
+}
+
+
+
+
+.uoloadSty .el-upload--picture-card{
+
+font-size: 28px;
+
+color: #8c939d;
+
+width: 178px;
+
+height: 178px;
+
+line-height: 178px;
+
+text-align: center;
+
+}
+
+.disUoloadSty .el-upload--picture-card{
+
+display: none;   /* 上传按钮隐藏 */
+
+}
+
+.el-upload-list__item-actions {
+
+width: 178px;
+
+height: 178px;
+
+position: absolute;
+
+top: 0;
+
+display: flex;
+
+align-items: center;
+
+justify-content: space-around;
+
+visibility: hidden;
+
+background: rgba(0, 0, 0, 0.4);
+
+}
+
+.el-upload-list__item-preview {
+
+display: inline-block;
+
+width: 20px;
+
+height: 20px;
+
+display: flex;
+
+align-items: center;
+
+justify-content: center;
+
+}
+
+.el-icon-zoom-in:before,
+
+.el-icon-delete:before {
+
+font-size: 30px;
+
+color: #fff;
+
+}
+
+.el-upload:hover .el-upload-list__item-actions {
+
+visibility: visible;
+
+transition: 1s;
+
+z-index: 200;
+
+}
+
+
+
 </style>