小店效果修改

src/views/modules/shop/smallstore.vue

@@ -1,9 +1,19 @@
 <template>
   <div class="mod-config">
-    <commonTree source="tags"  @changeCurrentNode="changeCurrentNode" ref="commonTree" :dataList="treeDataList" @getCommonShopDataList="getCommonShopDataList"
+    <commonTree
-      @handleClickNodes="handleClickNodes" :urlList="urlList"></commonTree>
+      source="tags"
-    <div v-if="isFresh" v-loading="!isFresh"
+      @changeCurrentNode="changeCurrentNode"
-      style="width: calc(100% - 360px); height: 100%; float: right;  border: 1px solid #bababa; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;">
+      ref="commonTree"
+      :dataList="treeDataList"
+      @getCommonShopDataList="getCommonShopDataList"
+      @handleClickNodes="handleClickNodes"
+      :urlList="urlList"
+    ></commonTree>
+    <div
+      v-if="isFresh"
+      v-loading="!isFresh"
+      style="width: calc(100% - 360px); height: 100%; float: right;  border: 1px solid #bababa; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;"
+    >
       <div class="border_box info_box">
         <div class="title_box">
           <div class="title"><span class="line"></span>基本小店信息</div>
@@ -12,62 +22,117 @@
         <div class="addFormBox">
           <el-form :model="addForm" ref="addForm" label-width="80px">
             <el-form-item label="小店名称" prop="name" class="form_item">
-              <el-input placeholder="请输入小店名称" style="width: 100%" v-model="addForm.name" clearable>
+              <el-input
+                placeholder="请输入小店名称"
+                style="width: 100%"
+                v-model="addForm.name"
+                clearable
+              >
               </el-input>
             </el-form-item>
             <el-form-item label="排序" prop="sort" class="form_item">
-              <el-input-number placeholder="请输入小店排序" style="width: 100%" v-model="addForm.sort" :min="0" clearable
+              <el-input-number
-                @keyup.native="UpNumber" @keydown.native="UpNumber">
+                placeholder="请输入小店排序"
+                style="width: 100%"
+                v-model="addForm.sort"
+                :min="0"
+                clearable
+                @keyup.native="UpNumber"
+                @keydown.native="UpNumber"
+              >
               </el-input-number>
             </el-form-item>
-            <el-form-item label="封面图" prop="images" label-width="120px" > 
+            <el-form-item label="封面图" prop="images" label-width="120px">
               <div style="display:flex; align-items:center">
-              <div>
+                <div>
                   <el-upload
-            class="avatar-uploader"
+                    class="avatar-uploader"
-            :action="baseUrl + '/oss/fileoss'"
+                    :action="baseUrl + '/oss/fileoss'"
-            :show-file-list="false"
+                    :show-file-list="false"
-            :on-success="handlePicSuccess"
+                    :on-success="handlePicSuccess"
-            >
+                  >
-            <!-- <img v-if="!refreshImg" :src="addForm.images" class="avatar"> -->
+                    <!-- <img v-if="!refreshImg" :src="addForm.images" class="avatar"> -->
-            <img v-if="fimages" :src="fimages" class="avatar">
+                    <img v-if="fimages" :src="fimages" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>            
+                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload></div>
+                  </el-upload>
-         <div> <el-tag v-if="fimages != ''"  class="delImgBtn" @click="delImg()" type="danger">清空图片</el-tag></div></div>
+                </div>
-        </el-form-item> 
+                <div>
+                  <div v-if="fimages != ''">
+                    <el-tag class="delImgBtn" @click="delImg()" type="danger"
+                      >清空图片</el-tag
+                    >
+                  </div>
+                </div>
+              </div>
+            </el-form-item>
           </el-form>
         </div>
-        <div style="  border: 1px dashed #bababa;" v-if="currentNode && currentNode.data.isLast == 1"></div>
+        <div
+          style="  border: 1px dashed #bababa;"
+          v-if="currentNode && currentNode.data.isLast == 1"
+        ></div>
       </div>
-      <div class="border_box tree_content_box" v-if="addForm.id" >
+      <div class="border_box tree_content_box" v-if="addForm.id">
-        <div class="title_box" style="margin-bottom: 10px; height: 80px; display:block;">
+        <div
+          class="title_box"
+          style="margin-bottom: 10px; height: 80px; display:block;"
+        >
           <div class="title">
             <span class="line"></span>已关联商品列表
-            <el-button plain type="primary" style="margin-left: 20px" @click="openTable('addForm')"
+            <el-button
-              size="mini">新增</el-button>
+              plain
+              type="primary"
+              style="margin-left: 20px"
+              @click="openTable('addForm')"
+              size="mini"
+              >新增</el-button
+            >
 
             <!-- <div style="" class="button_box"> -->
-              <!-- <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button> -->
+            <!-- <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button> -->
-         
+
             <!-- </div> -->
           </div>
         </div>
-        <commonShop :currentId="addForm.id ? addForm.id : ''" currentType="bookMarketId" :dataList="associatedGoodsList"
+        <commonShop
-          :urlList="urlList" @delete="dataFormDelete" :isEdit="isEdit" :oprateType="oprateType" ref="commonShop" :style="`height: calc(100% - 50px); `"></commonShop>
+          :currentId="addForm.id ? addForm.id : ''"
-        
+          currentType="bookMarketId"
-        <div class="submitButton submitButtonBox" >
+          :dataList="associatedGoodsList"
+          :urlList="urlList"
+          @delete="dataFormDelete"
+          :isEdit="isEdit"
+          :oprateType="oprateType"
+          ref="commonShop"
+          :style="`height: calc(100% - 50px); `"
+        ></commonShop>
+
+        <div class="submitButton submitButtonBox">
           <!-- <el-button size="small" @click.stop="dataFormEdit()">
             取消
           </el-button> -->
-          <el-button type="primary" @click="dataFormSubmit('addForm')" size="small">确定</el-button>
+          <el-button
+            type="primary"
+            @click="dataFormSubmit('addForm')"
+            size="small"
+            >确定</el-button
+          >
           <!-- </div> -->
         </div>
       </div>
-      <div class="submitButton submitButtonBox" style="position: absolute;bottom: 13px;right: 15px;" v-if="!isEdit">
+      <div
+        class="submitButton submitButtonBox"
+        style="position: absolute;bottom: 13px;right: 15px;"
+        v-if="!isEdit"
+      >
         <!-- <el-button size="small" @click.stop="dataFormEdit()">
             取消
           </el-button> -->
-        <el-button type="primary" @click="dataFormSubmit('addForm')" size="small">确定</el-button>
+        <el-button
+          type="primary"
+          @click="dataFormSubmit('addForm')"
+          size="small"
+          >确定</el-button
+        >
         <!-- </div> -->
       </div>
     </div>
@@ -80,9 +145,17 @@
    
       
     </el-form> -->
-    <commonShopTable ref="commonShopTable" :currentId="addForm.id" currentType="bookMarketId"
+    <commonShopTable
-      @submit="handleSubmitShopTable"></commonShopTable>
+      ref="commonShopTable"
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      :currentId="addForm.id"
+      currentType="bookMarketId"
+      @submit="handleSubmitShopTable"
+    ></commonShopTable>
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      @refreshDataList="getDataList"
+    ></add-or-update>
   </div>
 </template>
 
@@ -107,19 +180,19 @@ export default {
         deleteShop: "/master/shopStore/delStore",
         saveShop: "/master/shopStore/saveOrUpdateStore",
         add: "/master/shopStore/saveOrUpdateStore",
-        getAssociatedGoodsList: "/master/shopStore/getStoreProductList",
+        getAssociatedGoodsList: "/master/shopStore/getStoreProductList"
       },
-      oprateType:"yingxiao", // yingxiao：类型是营销         fenlei:类型是分类
+      oprateType: "yingxiao", // yingxiao：类型是营销         fenlei:类型是分类
       addForm: {},
       isFresh: false,
       dataRule: {
         name: [
           {
             required: true,
-            message: "小店名称不能为空",
+            message: "小店名称不能为空"
             // trigger: "change",
-          },
+          }
-        ],
+        ]
       },
       currentNode: {},
       treeDataList: [],
@@ -134,10 +207,10 @@ export default {
       isBreak: false, //是否结束循环
       defaultProps: {
         children: "children",
-        label: "title",
+        label: "title"
       },
       dataForm: {
-        key: "",
+        key: ""
       },
       dataList: [],
       pageIndex: 1,
@@ -146,46 +219,46 @@ export default {
       dataListLoading: false,
       dataListSelections: [],
       addOrUpdateVisible: false,
-      fileList:[],
+      fileList: [],
-      refreshImg:true,
+      refreshImg: true,
-      fimages:""
+      fimages: ""
     };
   },
   components: {
     AddOrUpdate,
     commonShop,
     commonTree,
-    commonShopTable,
+    commonShopTable
   },
   watch: {
     filterText(val) {
       this.$refs.tree.filter(val);
-    },
+    }
   },
   activated() {
     this.isEdit = false;
     this.getDataList();
   },
   methods: {
-    // handlePictureCardPreview(file) {    
+    // handlePictureCardPreview(file) {
     //   // this.addForm.images = file.url;
     //   this.fimages = file.url;
     //   this.$message.success("上传成功");
     //   //this.refreshImg = true
     //   console.log(this.addForm)
     //  // this.dialogVisible = true;
-    // },  
+    // },
-    delImg(){
+    delImg() {
-      this.fimages = ''
+      this.fimages = "";
-      this.addForm.images = '';
+      this.addForm.images = "";
-    },  
+    },
     handlePicSuccess(res, file) {
       // console.log(res,'res')
       // if (res.msg == "success") {
-        this.fimages = res.url;
+      this.fimages = res.url;
-        this.addForm.images = res.url
+      this.addForm.images = res.url;
-        this.$message.success("上传成功");
+      this.$message.success("上传成功");
-        console.log(this.fimages,this.addForm.images,'上传')
+      console.log(this.fimages, this.addForm.images, "上传");
       // } else {
       //   this.$message.error("上传失败");
       // }
@@ -202,29 +275,29 @@ export default {
     //     this.$refs.commonShop.handleCheckAllChange(val);
     //   });
     // },
-    handleSubmitShopTable: debounce(async function (ids) {
+    handleSubmitShopTable: debounce(async function(ids) {
       await this.$http({
         url: this.$http.adornUrl(`${this.urlList.saveShop}`),
         method: "post",
         data: this.$http.adornData({
           productId: ids,
-          bookMarketId: this.addForm.id,
+          bookMarketId: this.addForm.id
-        }),
+        })
       }).then(async ({ data }) => {
         if (data && data.code === 0) {
           this.$message.success(data.msg);
 
           if (this.$refs.commonShop) {
-            if(addForm.id != ''){
+            if (addForm.id != "") {
               // console.log(addForm.id,'addForm.id')
               this.$refs.commonShop.getAssociatedGoodsList({
-                bookMarketId: this.addForm.id,
+                bookMarketId: this.addForm.id
               });
             }
-        }
+          }
-        if (this.$refs.commonShopTable) {
+          if (this.$refs.commonShopTable) {
-          this.$refs.commonShopTable.close();
+            this.$refs.commonShopTable.close();
-        }
+          }
         } else {
           this.$message.error(data.msg);
         }
@@ -241,10 +314,10 @@ export default {
       this.$nextTick(() => {
         if (e == 1) {
           if (this.$refs.commonShop) {
-          this.$refs.commonShop.getAssociatedGoodsList({
+            this.$refs.commonShop.getAssociatedGoodsList({
-            bookMarketId: this.addForm.id ? this.addForm.id : null,
+              bookMarketId: this.addForm.id ? this.addForm.id : null
-          });
+            });
-        }
+          }
         }
       });
     },
@@ -254,48 +327,47 @@ export default {
       this.isEdit = false;
       this.isFresh = true;
       console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
-      this.currentNode = { data: { ...form } }
+      this.currentNode = { data: { ...form } };
       this.addForm = form;
-      this.fimages = form.images
+      this.fimages = form.images;
 
       await this.getDataList();
       // this.$refs.commonTree.setCurrentNodeShow();
       this.$nextTick(() => {
         // this.$refs.commonShop.clear();
-        // this.$refs.commonShop.bookMarketId = null;       
+        // this.$refs.commonShop.bookMarketId = null;
-          if (this.$refs.commonShop && id) {
+        if (this.$refs.commonShop && id) {
           this.$refs.commonShop.getAssociatedGoodsList(form);
-          }        
+        }
       });
     },
 
     //新增修改
-    dataFormSubmit: debounce(async function (formName) {
+    dataFormSubmit: debounce(async function(formName) {
       //    return false
       if (this.addForm.name == "" || !this.addForm.name) {
-
         this.$message.error("请输入小店名称");
         return false;
       }
 
-      var form={...this.addForm}
+      var form = { ...this.addForm };
-      delete form.children            
+      delete form.children;
-      await this.$refs[formName].validate(async (valid) => {
+      await this.$refs[formName].validate(async valid => {
         if (valid) {
           await this.$http({
             url: this.$http.adornUrl(`${this.urlList.add}`),
             method: "post",
             data: this.$http.adornData({
-              ...form,
+              ...form
-            }),
+            })
           }).then(async ({ data }) => {
-            if (data && data.code === 0) {              
+            if (data && data.code === 0) {
               await this.getDataList();
               this.$nextTick(async () => {
                 this.$refs.commonTree.setCurrentNodeShow(data.result.id);
                 this.addForm = data.result;
-                this.currentNode = { data: { ...data.result } }
+                this.currentNode = { data: { ...data.result } };
-                this.fimages= data.result.images
+                this.fimages = data.result.images;
                 // this.currentNode = { data: { ...data.list } }
                 this.$message({
                   message: "操作成功",
@@ -303,7 +375,7 @@ export default {
                   duration: 1500,
                   onClose: () => {
                     this.visible = false;
-                  },
+                  }
                 });
               });
             } else {
@@ -314,12 +386,16 @@ export default {
       });
     }, 200),
     //删除关联商品
-    dataFormDelete: debounce(async function (row, deleteType) {
+    dataFormDelete: debounce(async function(row, deleteType) {
-      this.$confirm(`确定要删除${deleteType != 'all' ? '该' : '所有'}关联商品嘛?`, "提示", {
+      this.$confirm(
-        confirmButtonText: "确定",
+        `确定要删除${deleteType != "all" ? "该" : "所有"}关联商品嘛?`,
-        cancelButtonText: "取消",
+        "提示",
-        type: "warning"
+        {
-      })
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      )
         .then(async () => {
           // var lableIds = row[0].bookLabelId
           // var productIds = row.map(e => e.productId)
@@ -332,15 +408,13 @@ export default {
           //   this.$message.error("请选择已关联的商品");
           //   return false;
           // }
-          
+
           this.$refs.commonShop.dataListLoading = true;
           await this.$http({
-            url: this.$http.adornUrl(
+            url: this.$http.adornUrl(`${this.urlList.delete}`),
-              `${this.urlList.delete}`
-            ),
             method: "post",
             data: {
-              id:row[0].id
+              id: row[0].id
             },
             header: {
               //默认 无 说明：请求头
@@ -349,29 +423,27 @@ export default {
           }).then(async ({ data }) => {
             if (data && data.code === 0) {
               this.$message.success("删除成功");
-              
             } else {
               this.$message.error(data.msg);
-            }this.$nextTick(() => {
+            }
-                // this.$refs.commonShop.selectShopArr = [];
+            this.$nextTick(() => {
-                if (this.$refs.commonShop) {
+              // this.$refs.commonShop.selectShopArr = [];
-                  this.$refs.commonShop.getAssociatedGoodsList({
+              if (this.$refs.commonShop) {
-                    bookLabelId: this.addForm.id,
+                this.$refs.commonShop.getAssociatedGoodsList({
-                  });
+                  bookLabelId: this.addForm.id
-                }
+                });
-
+              }
-              });
+            });
           });
         })
-        .catch(() => { });
+        .catch(() => {});
-
     }, 200),
     setCheckedKeys() {
       this.$refs.tree.setCheckedKeys([0]);
     },
     changeCurrentNode(val) {
       this.changeCurrentNode = val;
-      this.$forceUpdate()
+      this.$forceUpdate();
     },
     handlereset() {
       this.currentNode = null;
@@ -416,12 +488,12 @@ export default {
     },
     addOrUpdateHandle() {
       var addform = {
-        images: 0,       
+        images: 0,
         sort: 0,
         name: "",
-        id:null
+        id: null
       };
-      this.handleClickNodes({ data: addform }, addform, "add");      
+      this.handleClickNodes({ data: addform }, addform, "add");
     },
 
     filterNode(value, data) {
@@ -522,10 +594,10 @@ export default {
       const children = parent.data.nodes || parent.data;
       //若parent.data是对象，操作的是子级；如果是数组，操作的是最外层
       if (Array.isArray(parent.data)) {
-        const parentIndex = parent.data.findIndex((d) => d.id === data.id);
+        const parentIndex = parent.data.findIndex(d => d.id === data.id);
         parent.data.splice(parentIndex, 1);
       } else {
-        const childIndex = children.findIndex((d) => d.id === data.id);
+        const childIndex = children.findIndex(d => d.id === data.id);
         children.splice(childIndex, 1);
       }
       this.curNode = undefined;
@@ -546,7 +618,7 @@ export default {
         return;
       }
 
-      let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+      let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
         (
           c ^
           (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
@@ -558,7 +630,7 @@ export default {
         nodes: [],
         id: id,
         typeName: "模板组",
-        temporaryData: "1", //用来区分临时数据
+        temporaryData: "1" //用来区分临时数据
       };
       /* 如果模版深度最多两层，以下条件改成该部分注释
         this.curNode && this.curNode.depth == 1 
@@ -658,7 +730,7 @@ export default {
         this.isUpdateGroup = false;
         const parent = node.parent;
         const children = parent.data.nodes || parent.data;
-        const index = children.findIndex((d) => d.id === data.id);
+        const index = children.findIndex(d => d.id === data.id);
         let temp = data;
         temp.text = this.isactTitle;
         children.splice(index, 1, temp);
@@ -680,8 +752,8 @@ export default {
         url: this.$http.adornUrl(this.urlList.treeList),
         method: "post",
         data: this.$http.adornData({
-          "current": 1,
+          current: 1,
-          "limit": 10
+          limit: 10
         })
       }).then(({ data }) => {
         console.log("🚀 ~ getDataList ~ data:", data);
@@ -709,7 +781,7 @@ export default {
     // 多选
     selectionChangeHandle(val) {
       this.dataListSelections = val;
-    },
+    }
     // // 新增 / 修改
     // addOrUpdateHandle(row) {
     //   this.addOrUpdateVisible = true;
@@ -717,35 +789,45 @@ export default {
     //     this.$refs.addOrUpdate.init(row);
     //   });
     // },
-  },
+  }
 };
 </script>
 <style lang="less" scoped>
-.delImgBtn{cursor: pointer; display: inline-block; margin-left: 10px;}
+.delImgBtn {
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 10px;
+}
+.imageTxt {
+  font-size: 12px;
+}
 .el-upload {
-    border: 1px dashed #d9d9d9;
+  border: 1px dashed #d9d9d9;
-    border-radius: 6px;
+  border-radius: 6px;
-    cursor: pointer;
+  cursor: pointer;
-    position: relative;
+  position: relative;
-    overflow: hidden;
+  overflow: hidden;
-  }
+}
-  .avatar-uploader .el-upload:hover {
+.avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
+  border-color: #409eff;
-  }
+}
-  .avatar-uploader-icon {
+.avatar-uploader-icon {
-    border: 1px dashed #d9d9d9;  border-color: #409EFF;
+  border: 1px dashed #d9d9d9;
-    font-size: 28px;
+  border-color: #409eff;
-    color: #8c939d;
+  font-size: 28px;
-    width: 70px;
+  color: #8c939d;
-    height: 70px;
+  width: 70px;
-    line-height: 70px;
+  height: 70px;
-    text-align: center;
+  line-height: 70px;
-  }
+  text-align: center;
-  .avatar {
+}
-    width: 70px;
+.avatar {
-    height: 70px;
+  width: 70px;
-    display: block;
+  border: 1px dashed #409eff;
-  }
+  // border-color: #409eff;
+  height: 70px;
+  display: block;
+}
 .tree_box {
   width: 350px !important;
   height: 100%;
@@ -758,8 +840,8 @@ export default {
 }
 
 .border_box {
-  
+  margin-bottom: 10px;
-  margin-bottom: 10px; height: 138px;
+  height: 138px;
 
   .title_box {
     display: flex;
@@ -801,7 +883,6 @@ export default {
   border-radius: 10px;
   padding: 15px 15px;
   box-sizing: border-box;
-
 }
 
 .tree_content_box {
@@ -826,7 +907,7 @@ export default {
   }
 }
 
-.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
   background-color: #eaebed;
   color: #4796ec;
   font-weight: bold;
@@ -852,7 +933,6 @@ export default {
   padding-right: 8px;
 }
 
-
 p {
   margin: 0;
   margin-bottom: 10px;