标签删除

src/views/common/common.vue

@@ -1,7 +1,7 @@
 <script type="text/javascript">
-const baseUrl = "http://192.168.110.100:9200/pb"; //张川川后端
+// const baseUrl = "http://192.168.110.100:9200/pb"; //张川川后端
 // const baseUrl = 'http://59.110.212.44:9100/pb'
-// const baseUrl = 'https://testapi.nuttyreading.com'
+const baseUrl = 'https://testapi.nuttyreading.com'
 // const baseUrl = 'https://api.nuttyreading.com'
 // function commonFun() {
 //     console.log("公共方法")

src/views/modules/shop/bookmarketingtags.vue

@@ -1,14 +1,9 @@
 <template>
   <div class="mod-config">
-    <commonTree
+    <commonTree source="tags"  @changeCurrentNode="changeCurrentNode" ref="commonTree" :dataList="treeDataList" @getCommonShopDataList="getCommonShopDataList"
-    source="tags"
+      @handleClickNodes="handleClickNodes" :urlList="urlList"></commonTree>
-      ref="commonTree"
+    <div v-if="isFresh" v-loading="!isFresh"
-      :dataList="treeDataList"
+      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;">
-      @getCommonShopDataList="getCommonShopDataList"
-      @handleClickNodes="handleClickNodes"
-      :urlList="urlList"
-    ></commonTree>
-    <div style="width: calc(100% - 360px); height: 100%; float: right">
       <div class="border_box info_box">
         <div class="title_box">
           <div class="title"><span class="line"></span>基本标签信息</div>
@@ -17,115 +12,64 @@
         <div class="addFormBox">
           <el-form :model="addForm" ref="addForm" label-width="80px">
             <el-form-item label="标签名称" prop="title" class="form_item">
-              <el-input
+              <el-input placeholder="请输入标签名称" style="width: 100%" v-model="addForm.title" clearable>
-                placeholder="请输入标签名称"
-                style="width: 100%"
-                v-model="addForm.title"
-                clearable
-              >
               </el-input>
             </el-form-item>
             <el-form-item label="排序" prop="sort" class="form_item">
-              <el-input-number
+              <el-input-number placeholder="请输入标签排序" style="width: 100%" v-model="addForm.sort" :min="0" clearable
-                placeholder="请输入标签排序"
+                @keyup.native="UpNumber" @keydown.native="UpNumber">
-                style="width: 100%"
-                v-model="addForm.sort"
-                clearable
-              >
               </el-input-number>
             </el-form-item>
-            <el-form-item
+            <el-form-item label="是否为最终级" prop="isLast" label-width="120px" class="form_item">
-              label="是否为最终级"
+              <el-switch v-model="addForm.isLast" active-color="#13ce66" :active-value="1" :inactive-value="0"
-              prop="isLast"
+                active-text="是" inactive-text="否" @change="handleChangeIsLast">
-              label-width="120px"
-              class="form_item"
-            >
-              <el-switch
-                :disabled="
-                  addForm && addForm.children && addForm.children.length != 0
-                "
-                v-model="addForm.isLast"
-                active-color="#13ce66"
-                :active-value="1"
-                :inactive-value="0"
-                active-text="是"
-                inactive-text="否"
-                @change="handleChangeIsLast"
-              >
               </el-switch>
             </el-form-item>
           </el-form>
         </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.isLast == 1">
+      <div class="border_box tree_content_box" v-if="currentNode && currentNode.data.isLast == 1">
         <div class="title_box" style="margin-bottom: 10px; height: 40px">
           <div class="title">
             <span class="line"></span>已关联商品列表
-            <el-button
+            <el-button plain type="primary" style="margin-left: 20px" @click="openTable('addForm')"
-              plain
+              size="mini">新增</el-button>
-              type="primary"
-              style="margin-left: 20px"
-              @click="openTable('addForm')"
-              size="mini"
-              >新增</el-button
-            >
 
             <!-- <div style="" class="button_box"> -->
-            <el-button
+              <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button>
-              plain
+         
-              :type="isEdit ? 'primary' : ''"
-              @click="dataFormEdit()"
-              size="mini"
-              >{{ this.isEdit ? "退出修改" : "修改" }}</el-button
-            >
             <!-- </div> -->
           </div>
         </div>
-        <commonShop
+        <commonShop :currentId="addForm.id ? addForm.id : ''" currentType="bookMarketId" :dataList="associatedGoodsList"
-          :currentId="addForm.id"
+          :urlList="urlList" @delete="dataFormDelete" :isEdit="isEdit" ref="commonShop" :style="`height: calc(100% - 50px); `"></commonShop>
-          currentType="bookMarketId"
+        <!-- <div class="submitButtonBox" v-if="isEdit">
-          :dataList="associatedGoodsList"
+          <el-checkbox v-model="checkAll" @change="handleCheckAllChange" style="float: left">全选</el-checkbox>
-          :urlList="urlList"
+
-          :isEdit="isEdit"
-          ref="commonShop"
-          :style="`height: calc(100% - 50px); `"
-        ></commonShop>
-        <div class="submitButtonBox" v-if="isEdit">
-          <el-checkbox
-            v-model="checkAll"
-            @change="handleCheckAllChange"
-            style="float: left"
-            >全选</el-checkbox
-          >
-          <!-- <el-button @click="handlereset" size="small">取消</el-button> -->
           <div class="submitButton">
-            <!-- <el-button size="small" @click.stop="dataFormEdit()">
+           
-              取消
+            <el-button type="danger" @click="dataFormDelete('addForm')" size="small">删除</el-button>
-            </el-button> -->
-            <el-button
-              type="danger"
-              @click="dataFormDelete('addForm')"
-              size="small"
-              >删除</el-button
-            >
           </div>
-        </div>
+        </div> -->
         <!-- <div class="submitButtonBox" v-else> -->
 
         <!-- <el-button @click="handlereset" size="small">取消</el-button> -->
-        <div class="submitButton submitButtonBox" v-else>
+        <div class="submitButton submitButtonBox" >
           <!-- <el-button size="small" @click.stop="dataFormEdit()">
             取消
           </el-button> -->
-          <el-button
+          <el-button type="primary" @click="dataFormSubmit('addForm')" size="small">确定</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">
+        <!-- <el-button size="small" @click.stop="dataFormEdit()">
+            取消
+          </el-button> -->
+        <el-button type="primary" @click="dataFormSubmit('addForm')" size="small">确定</el-button>
+        <!-- </div> -->
+      </div>
     </div>
 
     <!-- <el-form
@@ -136,17 +80,9 @@
    
       
     </el-form> -->
-    <commonShopTable
+    <commonShopTable ref="commonShopTable" :currentId="addForm.id" currentType="bookMarketId"
-      ref="commonShopTable"
+      @submit="handleSubmitShopTable"></commonShopTable>
-      :currentId="addForm.id"
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
-      currentType="bookMarketId"
-      @submit="handleSubmitShopTable"
-    ></commonShopTable>
-    <add-or-update
-      v-if="addOrUpdateVisible"
-      ref="addOrUpdate"
-      @refreshDataList="getDataList"
-    ></add-or-update>
   </div>
 </template>
 
@@ -182,7 +118,7 @@ export default {
           },
         ],
       },
-      currentNode: null,
+      currentNode: {},
       treeDataList: [],
       associatedGoodsList: [], //已关联商品列表
 
@@ -225,6 +161,9 @@ export default {
     this.getDataList();
   },
   methods: {
+    UpNumber(e) {
+      e.target.value = e.target.value.replace(/[^\d]/g, "");
+    },
     dataFormEdit() {
       this.checkAll = false;
       this.isEdit = !this.isEdit;
@@ -234,7 +173,7 @@ 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",
@@ -245,15 +184,21 @@ export default {
       }).then(async ({ data }) => {
         if (data && data.code === 0) {
           this.$message.success(data.msg);
+
+          if (this.$refs.commonShop) {
+
           this.$refs.commonShop.getAssociatedGoodsList({
             bookMarketId: this.addForm.id,
           });
+        }
+        if (this.$refs.commonShopTable) {
           this.$refs.commonShopTable.close();
+        }
         } else {
           this.$message.error(data.msg);
         }
       });
-    },200),
+    }, 200),
     openTable() {
       this.isEdit = false;
       this.$nextTick(() => {
@@ -264,28 +209,41 @@ export default {
       console.log("🚀 ~ handleChangeIsLast ~ e:", e);
       this.$nextTick(() => {
         if (e == 1) {
-          this.$refs.commonShop.getAssociatedGoodsList();
+          if (this.$refs.commonShop) {
+          this.$refs.commonShop.getAssociatedGoodsList({
+            bookMarketId: this.addForm.id ? this.addForm.id : null,
+          });
+        }
         }
       });
     },
 
-    getCommonShopDataList(type, id, form) {
+    async getCommonShopDataList(type, id, form) {
+      this.isFresh = false;
       this.isEdit = false;
+      this.isFresh = true;
       console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
+      this.currentNode = { data: { ...form } }
       this.addForm = form;
+
+      await this.getDataList();
+      // this.$refs.commonTree.setCurrentNodeShow();
       this.$nextTick(() => {
         // this.$refs.commonShop.clear();
         // this.$refs.commonShop.bookMarketId = null;
         if (form.isLast == 1) {
+          if (this.$refs.commonShop) {
           this.$refs.commonShop.getAssociatedGoodsList();
+          }
         }
       });
     },
 
     //新增修改
-     dataFormSubmit: debounce(async function (formName)  {
+    dataFormSubmit: debounce(async function (formName) {
       //    return false
-      if (this.addForm.title == "") {
+      if (this.addForm.title == "" || !this.addForm.title) {
+
         this.$message.error("请输入标签名称");
         return false;
       }
@@ -305,7 +263,8 @@ export default {
               this.$nextTick(async () => {
                 this.$refs.commonTree.setCurrentNodeShow(data.result.id);
 
-              
+                this.addForm = data.result;
+                this.currentNode = { data: { ...data.result } }
                 this.$message({
                   message: "操作成功",
                   type: "success",
@@ -323,38 +282,59 @@ export default {
           });
         }
       });
-    },200),
+    }, 200),
     //新增修改
-    async dataFormDelete(formName) {
+    dataFormDelete: debounce(async function (row, deleteType) {
-      //    return false
+      this.$confirm(`确定要删除${deleteType != 'all' ? '该' : '所有'}关联商品嘛?`, "提示", {
-      var selectShopArr = this.$refs.commonShop.selectShopArr;
+        confirmButtonText: "确定",
-      console.log(selectShopArr, "1111");
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(async () => {
+          var lableIds = row[0].bookLabelId
+          var productIds = row.map(e => e.productId)
 
-      if (selectShopArr.length == 0) {
+          // //    return false
-        this.$message.error("请选择已关联的商品");
+          // var selectShopArr = this.$refs.commonShop.selectShopArr;
-        return false;
+          // console.log(selectShopArr, "1111");
-      }
+
-      this.$refs.commonShop.dataListLoading = true;
+          // if (selectShopArr.length == 0) {
-      await this.$http({
+          //   this.$message.error("请选择已关联的商品");
-        url: this.$http.adornUrl(
+          //   return false;
-          `${this.urlList.deleteShop}?lableIds=${selectShopArr.toString(",")}`
+          // }
-        ),
+          this.$refs.commonShop.dataListLoading = true;
-        method: "post",
+          await this.$http({
-      }).then(async ({ data }) => {
+            url: this.$http.adornUrl(
-        if (data && data.code === 0) {
+              `${this.urlList.deleteShop}?marketId=${this.addForm.id}&productId=${productIds.toString(",")}`
-          this.$message.success(data.msg);
+            ),
-          this.$nextTick(() => {
+            method: "post",
-            this.$refs.commonShop.selectShopArr = [];
+          }).then(async ({ data }) => {
-            this.$refs.commonShop.getAssociatedGoodsList();
+            if (data && data.code === 0) {
+              this.$message.success("删除成功");
+              
+            } else {
+              this.$message.error(data.msg);
+            }this.$nextTick(() => {
+                // this.$refs.commonShop.selectShopArr = [];
+                if (this.$refs.commonShop) {
+                  this.$refs.commonShop.getAssociatedGoodsList({
+                    bookLabelId: this.addForm.id,
+                  });
+                }
+
+              });
           });
-        } else {
+        })
-          this.$message.error(data.msg);
+        .catch(() => { });
-        }
+
-      });
+    }, 200),
-    },
     setCheckedKeys() {
       this.$refs.tree.setCheckedKeys([0]);
     },
+    changeCurrentNode(val) {
+      this.changeCurrentNode = val;
+      this.$forceUpdate()
+    },
     handlereset() {
       this.currentNode = null;
       this.isFresh = false;
@@ -365,7 +345,7 @@ export default {
       this.addForm = {};
       // console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
       console.log(node, data, "当前选中节点");
-      this.currentNode = node;
+      this.currentNode = node ? node : {};
       this.isFresh = false;
       this.isFresh = true;
 
@@ -720,19 +700,23 @@ export default {
   box-sizing: border-box;
   // background: #fafafa;
 }
+
 .border_box {
   height: 100px;
   margin-bottom: 10px;
+
   .title_box {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px;
+
     .button_box {
       // width: 200px;
       float: right;
     }
   }
+
   .title {
     width: 300px;
     min-width: 200px;
@@ -752,48 +736,57 @@ export default {
     }
   }
 }
+
 .border_box {
   width: 100%;
   float: right;
   background: #fffefe;
-  border: 1px solid #bababa;
+
   border-radius: 10px;
   padding: 15px 15px;
   box-sizing: border-box;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
 }
+
 .tree_content_box {
   height: calc(100% - 110px) !important;
 }
+
 .mod-config {
   width: 100%;
   height: 82vh;
   overflow: hidden;
 }
+
 .el-tree-node__content {
   .el-button {
     display: none;
   }
 }
+
 .el-tree-node__content:hover {
   .el-button {
     display: inline;
   }
 }
-.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;
 }
+
 .el-tree {
   height: 350px;
   overflow-y: auto !important;
+
   .el-tree-node__content span {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
 }
+
 .custom-tree-node {
   flex: 1;
   display: flex;
@@ -802,6 +795,7 @@ export default {
   font-size: 14px;
   padding-right: 8px;
 }
+
 // .el-card {
 //   background: none !important;
 // }
@@ -809,15 +803,18 @@ p {
   margin: 0;
   margin-bottom: 10px;
 }
+
 .submitButtonBox {
   margin-top: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+
 .submitButton {
   float: right;
 }
+
 // .el-tree-node__content .el-button {
 //   // width: 120px !important;
 
@@ -834,17 +831,22 @@ p {
 // }
 
 .addFormBox {
+  overflow: hidden;
+
   .form_item {
     width: 33%;
     float: left;
   }
 }
+
 .custom-tree-container {
   height: calc(100% - 100px);
+
   .filter-tree {
     height: 100%;
   }
 }
+
 .info_bg {
   background: #e0dede;
   height: 28px;

src/views/modules/shop/booktags.vue

@@ -1,131 +1,71 @@
 <template>
   <div class="mod-config">
-    <commonTree
+    <commonTree source="tags" ref="commonTree" :dataList="treeDataList" @getCommonShopDataList="getCommonShopDataList"
-      source="tags"
+      @changeCurrentNode="changeCurrentNode" :urlList="urlList"></commonTree>
-      ref="commonTree"
+    <div v-if="isFresh" v-loading="!isFresh"
-      :dataList="treeDataList"
+      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;">
-      @getCommonShopDataList="getCommonShopDataList"
-      :urlList="urlList"
-    ></commonTree>
-    <div style="width: calc(100% - 360px); height: 100%; float: right">
       <div class="border_box info_box">
         <div class="title_box">
+
           <div class="title"><span class="line"></span>基本标签信息</div>
         </div>
 
         <div class="addFormBox">
           <el-form :model="addForm" ref="addForm" label-width="80px">
             <el-form-item label="标签名称" prop="title" class="form_item">
-              <el-input
+              <el-input placeholder="请输入标签名称" style="width: 100%" v-model="addForm.title" clearable>
-                placeholder="请输入标签名称"
-                style="width: 100%"
-                v-model="addForm.title"
-                clearable
-              >
               </el-input>
             </el-form-item>
             <el-form-item label="排序" prop="sort" class="form_item">
-              <el-input-number
+              <el-input-number placeholder="请输入标签排序" style="width: 100%" v-model="addForm.sort" clearable :min="0"
-                placeholder="请输入标签排序"
+                @keyup.native="UpNumber" @keydown.native="UpNumber">
-                style="width: 100%"
-                v-model="addForm.sort"
-                clearable
-                @keyup.native="UpNumber"
-                @keydown.native="UpNumber"
-              >
               </el-input-number>
             </el-form-item>
-            <el-form-item
+            <el-form-item label="是否为最终级" prop="isLast" label-width="120px" class="form_item">
-              label="是否为最终级"
+              <el-switch v-model="addForm.isLast" active-color="#13ce66" :active-value="1" :inactive-value="0"
-              prop="isLast"
+                active-text="是" inactive-text="否" @change="handleChangeIsLast">
-              label-width="120px"
-              class="form_item"
-            >
-              <el-switch
-                :disabled="
-                  addForm && addForm.children && addForm.children.length != 0
-                "
-                v-model="addForm.isLast"
-                active-color="#13ce66"
-                :active-value="1"
-                :inactive-value="0"
-                active-text="是"
-                inactive-text="否"
-                @change="handleChangeIsLast"
-              >
               </el-switch>
             </el-form-item>
           </el-form>
         </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.isLast == 1">
+      <div class="border_box tree_content_box" v-if="currentNode && currentNode.data.isLast == 1">
         <div class="title_box" style="margin-bottom: 10px; height: 40px">
           <div class="title">
             <span class="line"></span>已关联商品列表
-            <el-button
+            <el-button plain type="primary" style="margin-left: 20px" @click="openTable('addForm')"
-              plain
+              size="mini">新增</el-button>
-              type="primary"
-              style="margin-left: 20px"
-              @click="openTable('addForm')"
-              size="mini"
-              >新增</el-button
-            >
 
             <!-- <div style="" class="button_box"> -->
-            <el-button
+            <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button>
-              plain
-              :type="isEdit ? 'primary' : ''"
-              @click="dataFormEdit()"
-              size="mini"
-              >{{ this.isEdit ? "退出修改" : "修改" }}</el-button
-            >
             <!-- </div> -->
           </div>
         </div>
-        <commonShop
+        <commonShop :currentId="addForm.id ? addForm.id : ''" currentType="bookLabelId" :dataList="associatedGoodsList"
-          :currentId="addForm.id"
+          :urlList="urlList" :isEdit="isEdit" ref="commonShop" :style="`height: calc(100% - 50px); `"
-          currentType="bookLabelId"
+          @delete="dataFormDelete"></commonShop>
-          :dataList="associatedGoodsList"
-          :urlList="urlList"
-          :isEdit="isEdit"
-          ref="commonShop"
-          :style="`height: calc(100% - 50px); `"
-        ></commonShop>
         <div class="submitButtonBox" v-if="isEdit">
-          <el-checkbox
+          <el-checkbox v-model="checkAll" @change="handleCheckAllChange" style="float: left">全选</el-checkbox>
-            v-model="checkAll"
-            @change="handleCheckAllChange"
-            style="float: left"
-            >全选</el-checkbox
-          >
           <!-- <el-button @click="handlereset" size="small">取消</el-button> -->
           <div class="submitButton">
             <!-- <el-button size="small" @click.stop="dataFormEdit()">
               取消
             </el-button> -->
-            <el-button
+            <el-button type="danger" @click="dataFormDelete('addForm')" size="small">删除</el-button>
-              type="danger"
-              @click="dataFormDelete('addForm')"
-              size="small"
-              >删除</el-button
-            >
           </div>
         </div>
         <!-- <div class="submitButtonBox" v-else> -->
 
         <!-- <el-button @click="handlereset" size="small">取消</el-button> -->
-        <div class="submitButton submitButtonBox" v-else>
+
-          <!-- <el-button size="small" @click.stop="dataFormEdit()">
+      </div>
+      <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
+        <el-button type="primary" @click="dataFormSubmit('addForm')" size="small">确定</el-button>
-            type="primary"
+        <!-- </div> -->
-            @click="dataFormSubmit('addForm')"
-            size="small"
-            >确定</el-button
-          >
-          <!-- </div> -->
-        </div>
       </div>
     </div>
 
@@ -137,17 +77,9 @@
    
       
     </el-form> -->
-    <commonShopTable
+    <commonShopTable ref="commonShopTable" :currentId="addForm.id" currentType="bookLabelId"
-      ref="commonShopTable"
+      @submit="handleSubmitShopTable"></commonShopTable>
-      :currentId="addForm.id"
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
-      currentType="bookLabelId"
-      @submit="handleSubmitShopTable"
-    ></commonShopTable>
-    <add-or-update
-      v-if="addOrUpdateVisible"
-      ref="addOrUpdate"
-      @refreshDataList="getDataList"
-    ></add-or-update>
   </div>
 </template>
 
@@ -183,7 +115,7 @@ export default {
           },
         ],
       },
-      currentNode: null,
+      currentNode: {},
       treeDataList: [],
       associatedGoodsList: [], //已关联商品列表
 
@@ -250,10 +182,15 @@ export default {
       }).then(async ({ data }) => {
         if (data && data.code === 0) {
           this.$message.success(data.msg);
-          this.$refs.commonShop.getAssociatedGoodsList({
+          if (this.$refs.commonShop) {
-            bookLabelId: this.addForm.id,
+            this.$refs.commonShop.getAssociatedGoodsList({
-          });
+              bookLabelId: this.addForm.id,
-          this.$refs.commonShopTable.close();
+            });
+          }
+          if (this.$refs.commonShopTable) {
+            this.$refs.commonShopTable.close();
+          }
+
         } else {
           this.$message.error(data.msg);
         }
@@ -269,30 +206,46 @@ export default {
       console.log("🚀 ~ handleChangeIsLast ~ e:", e);
       this.$nextTick(() => {
         if (e == 1) {
-          this.$refs.commonShop.getAssociatedGoodsList({
+
-            bookLabelId: this.addForm.id,
+          if (this.$refs.commonShop) {
-          });
+            this.$refs.commonShop.getAssociatedGoodsList({
+              bookLabelId: this.addForm.id ? this.addForm.id : null,
+            });
+          }
+
         }
       });
     },
 
-    getCommonShopDataList(type, id, form) {
+    async getCommonShopDataList(type, id, form) {
-      this.isEdit = false;
+      this.isFresh = false;
+
+      this.isEdit = false; this.isFresh = true;
       console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
+      this.currentNode = { data: { ...form } }
       this.addForm = form;
+
+
+      await this.getDataList();
+      // this.$refs.commonTree.setCurrentNodeShow();
+
       this.$nextTick(() => {
         // this.$refs.commonShop.clear();
         // this.$refs.commonShop.bookMarketId = null;
         if (form.isLast == 1) {
-          this.$refs.commonShop.getAssociatedGoodsList();
+          if (this.$refs.commonShop) {
+            this.$refs.commonShop.getAssociatedGoodsList();
+          }
+
         }
       });
     },
 
     //新增修改
     dataFormSubmit: debounce(async function (formName) {
+
       //    return false
-      if (this.addForm.title == "") {
+      if (this.addForm.title == "" || !this.addForm.title) {
         this.$message.error("请输入标签名称");
         return false;
       }
@@ -309,7 +262,8 @@ export default {
               await this.getDataList();
               this.$nextTick(async () => {
                 this.$refs.commonTree.setCurrentNodeShow(data.result.id);
-
+                this.addForm = data.result;
+                this.currentNode = { data: { ...data.result } }
                 this.$message({
                   message: "操作成功",
                   type: "success",
@@ -326,39 +280,58 @@ export default {
         }
       });
     }, 200),
-    //新增修改
+    //删除关联图书
-    dataFormDelete: debounce(async function (formName) {
+    dataFormDelete: debounce(async function (row, deleteType) {
-      //    return false
+      this.$confirm(`确定要删除${deleteType != 'all' ? '该' : '所有'}关联商品嘛?`, "提示", {
-      var selectShopArr = this.$refs.commonShop.selectShopArr;
+        confirmButtonText: "确定",
-      console.log(selectShopArr, "1111");
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(async () => {
+          var lableIds = row[0].bookLabelId
+          var productIds = row.map(e => e.productId)
 
-      if (selectShopArr.length == 0) {
+          // //    return false
-        this.$message.error("请选择已关联的商品");
+          // var selectShopArr = this.$refs.commonShop.selectShopArr;
-        return false;
+          // console.log(selectShopArr, "1111");
-      }
+
-      this.$refs.commonShop.dataListLoading = true;
+          // if (selectShopArr.length == 0) {
-      await this.$http({
+          //   this.$message.error("请选择已关联的商品");
-        url: this.$http.adornUrl(
+          //   return false;
-          `${this.urlList.deleteShop}?lableIds=${selectShopArr.toString(",")}`
+          // }
-        ),
+          this.$refs.commonShop.dataListLoading = true;
-        method: "post",
+          await this.$http({
-      }).then(async ({ data }) => {
+            url: this.$http.adornUrl(
-        if (data && data.code === 0) {
+              `${this.urlList.deleteShop}?lableId=${this.addForm.id}&productId=${productIds.toString(",")}`
-          this.$message.success(data.msg);
+            ),
-          this.$nextTick(() => {
+            method: "post",
-            this.$refs.commonShop.selectShopArr = [];
+          }).then(async ({ data }) => {
-            this.$refs.commonShop.getAssociatedGoodsList({
+            if (data && data.code === 0) {
-              bookLabelId: this.addForm.id,
+              this.$message.success("删除成功");
-            });
+              
+            } else {
+              this.$message.error(data.msg);
+            }this.$nextTick(() => {
+                // this.$refs.commonShop.selectShopArr = [];
+                if (this.$refs.commonShop) {
+                  this.$refs.commonShop.getAssociatedGoodsList({
+                    bookLabelId: this.addForm.id,
+                  });
+                }
+
+              });
           });
-        } else {
+        })
-          this.$message.error(data.msg);
+        .catch(() => { });
-        }
+
-      });
     }, 200),
     setCheckedKeys() {
       this.$refs.tree.setCheckedKeys([0]);
     },
+    changeCurrentNode(val) {
+      this.changeCurrentNode = val;
+      this.$forceUpdate()
+    },
     handlereset() {
       this.currentNode = null;
       this.isFresh = false;
@@ -368,8 +341,8 @@ export default {
       this.isEdit = false;
       this.addForm = {};
       // console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
-      console.log(node, data, "当前选中节点");
+      // console.log(node, data, "当前选中节点");
-      this.currentNode = node;
+      this.currentNode = node ? node : {};
       this.isFresh = false;
       this.isFresh = true;
 
@@ -719,19 +692,23 @@ export default {
   box-sizing: border-box;
   // background: #fafafa;
 }
+
 .border_box {
   height: 100px;
   margin-bottom: 10px;
+
   .title_box {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px;
+
     .button_box {
       // width: 200px;
       float: right;
     }
   }
+
   .title {
     width: 300px;
     min-width: 200px;
@@ -751,48 +728,57 @@ export default {
     }
   }
 }
+
 .border_box {
   width: 100%;
   float: right;
   background: #fffefe;
-  border: 1px solid #bababa;
+
   border-radius: 10px;
   padding: 15px 15px;
   box-sizing: border-box;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
 }
+
 .tree_content_box {
   height: calc(100% - 110px) !important;
 }
+
 .mod-config {
   width: 100%;
   height: 82vh;
   overflow: hidden;
 }
+
 .el-tree-node__content {
   .el-button {
     display: none;
   }
 }
+
 .el-tree-node__content:hover {
   .el-button {
     display: inline;
   }
 }
-.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;
 }
+
 .el-tree {
   height: 350px;
   overflow-y: auto !important;
+
   .el-tree-node__content span {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
 }
+
 .custom-tree-node {
   flex: 1;
   display: flex;
@@ -801,6 +787,7 @@ export default {
   font-size: 14px;
   padding-right: 8px;
 }
+
 // .el-card {
 //   background: none !important;
 // }
@@ -808,15 +795,18 @@ p {
   margin: 0;
   margin-bottom: 10px;
 }
+
 .submitButtonBox {
   margin-top: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+
 .submitButton {
   float: right;
 }
+
 // .el-tree-node__content .el-button {
 //   // width: 120px !important;
 
@@ -833,17 +823,22 @@ p {
 // }
 
 .addFormBox {
+  overflow: hidden;
+
   .form_item {
     width: 33%;
     float: left;
   }
 }
+
 .custom-tree-container {
   height: calc(100% - 100px);
+
   .filter-tree {
     height: 100%;
   }
 }
+
 .info_bg {
   background: #e0dede;
   height: 28px;

src/views/modules/shop/commonBookTags/commonTags.vue

@@ -198,7 +198,7 @@ export default {
         data: this.$http.adornData(data),
       }).then(async ({ data }) => {
         if (data && data.code === 0) {
-          this.$message.success(data.msg);
+          // this.$message.success(data.msg);
         } else {
           this.$message.error(data.msg);
         }
@@ -233,7 +233,7 @@ export default {
         method: "post",
       }).then(async ({ data }) => {
         if (data && data.code === 0) {
-          this.$message.success(data.msg);
+          // this.$message.success(data.msg);
         } else {
           this.$message.error(data.msg);
         }
@@ -513,7 +513,8 @@ export default {
 }
 
 /deep/.tree_box {
-  width: 48% !important;
+  width: 32% !important;
+  min-width: 400px;
 
   border: none !important;
   border-radius: 10px;

src/views/modules/shop/commonBookTags/shopproduct copy.vue

@@ -0,0 +1,511 @@
+<template>
+  <div
+    style="width: 100%; height: 100%; margin-top: -50px"
+    v-loading="dataListLoading"
+  >
+    <!-- <el-form
+      :inline="true"
+      :model="dataForm"
+      @keyup.enter.native="getDataList()"
+      style="float: right"
+    >
+      <el-form-item>
+        <el-input
+          v-model="dataForm.key"
+          placeholder="商品名称"
+          clearable
+          size="small"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          @click="
+            pageIndex = 1;
+            getDataList(bookMarketId);
+          "
+          size="small"
+          >查询</el-button
+        >
+      </el-form-item>
+    </el-form> -->
+    <div class="search_form">
+      <div class="addFormBox shopFormBox">
+        <el-form ref="addForm" label-width="80px" :model="dataForm">
+          <el-form-item label="商品名称" prop="title" class="form_item">
+            <el-input
+              size="small"
+              placeholder="请输入商品名称"
+              style="width: 100%"
+              v-model="dataForm.productName"
+              clearable
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item label="商品类型" prop="goodsType" class="form_item">
+            <el-select
+              size="small"
+              v-model="dataForm.goodsType"
+              placeholder="请选择"
+              style="width: 100%"
+              clearable
+            >
+              <el-option
+                v-for="item in goodsTypeList"
+                :key="item.dictType"
+                :label="item.dictValue"
+                :value="item.dictType"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item
+            label=""
+            class="form_item"
+            label-width="20px"
+            style="width: 80px !important"
+          >
+            <el-button @click="getAssociatedGoodsList(dataForm)" size="mini"
+              >查询</el-button
+            >
+            <!-- <el-button @click="handleCommonShopReset()" size="mini"
+                  >重置</el-button
+                > -->
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    
+    <div class="shop_box">
+      <li
+        v-for="(v, i) in associatedGoodsList"
+        @click="isEdit ? selectShop(v) : ''"
+        :class="
+          selectShopArr.includes(v.id)
+            ? 'isSelect shop_box_item'
+            : 'shop_box_item'
+        "
+      >
+        <el-checkbox
+          v-if="isEdit"
+          size="medium"
+          @change="(e) => selectShop(v)"
+          :value="selectShopArr.includes(v.id)"
+          class="shop_box_item_check"
+        ></el-checkbox>
+        <img
+          class="shop_box_item_img img-loaded"
+          style="object-fit: cover"
+          data-lazy-collect="1"
+          :src="v.product.productImages"
+        />
+
+        <div class="shop_box_item_content">
+          <li class="shop_box_item_title">
+            <span></span><span>{{ v.product.productName }}</span>
+            <!-- <el-tooltip placement="top" sty>
+              <div slot="content">{{ v.product.productName }}</div>
+              <div class="title-text">{{ v.product.productName }}</div>
+            </el-tooltip> -->
+          </li>
+          <li class="shop_box_item_title shop_box_item_info">
+            <span>价格：</span>
+
+            <span style="color: #fd3f31">¥{{ v.product.price }}</span>
+          </li>
+
+          <li
+            v-if="v.product.activityPrice"
+            class="shop_box_item_title shop_box_item_info"
+          >
+            <span>活动价：</span>
+
+            <span style="color: #fd3f31">¥{{ v.product.activityPrice }}</span>
+          </li>
+          <li class="shop_box_item_title shop_box_item_info">
+            <span>库存：</span>
+
+            <span>{{ v.product.productStock }}</span>
+          </li>
+        </div>
+
+        <!-- <div class="price-con">
+            <span class="coupon-price-title">¥</span
+            ><span class="coupon-price-afterCoupon">356</span>
+          </div> -->
+      </li>
+    </div>
+
+    <!-- 弹窗, 新增 / 修改 -->
+    <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @showchooseBookf = "showchooseBookf"></add-or-update>
+      <choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book>   -->
+  </div>
+</template>
+  
+  <script>
+// import chooseBook from './chooseBook.vue'
+// import AddOrUpdate from './shopproduct-add-or-update'
+export default {
+  props: ["urlList", "isEdit", "currentId", "currentType"],
+  data() {
+    return {
+      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
+      goodsTypeList: [], // goodsTypeList
+      multipleSelection: [], // 当前页选中的数据
+      idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
+
+      bookMarketId: null,
+      dataList: [],
+      associatedGoodsList: [],
+      publishStatus: false,
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      chooseBookVisible: false,
+      bookIds: [],
+      selectShopArr: [],
+      dataForm: {
+        productName: "",
+      },
+    };
+  },
+  watch: {
+    // 只要通过this.的方式拿到的值都可以使用watch进行监听
+    isEdit: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        console.log("🚀 ~ handler ~ val:", val);
+        this.selectShopArr = [];
+        this.$forceUpdate();
+      },
+    },
+  },
+  components: {
+    // AddOrUpdate,
+    // chooseBook
+  },
+  async activated() {
+    
+    this.multipleSelection = [];
+    await this.getAssociatedGoodsList({ ...this.dataForm });
+    // await this.getGoodsTypeList();
+  },
+  methods: {
+    // 获取商品类型
+    getGoodsTypeList() {
+      this.$http({
+        url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
+        method: "get",
+      }).then(({ data }) => {
+        // console.log(data.dataList)
+        this.goodsTypeList = data.dataList;
+      });
+    },
+    handleCheckAllChange(status) {
+      if (status) {
+        this.selectShopArr = this.associatedGoodsList.map((e) => e.id);
+      } else {
+        this.selectShopArr = [];
+      }
+      this.$forceUpdate();
+    },
+    selectShop(v) {
+      if (this.selectShopArr.includes(v.id)) {
+        this.selectShopArr = this.selectShopArr.filter(function (item) {
+          return item !== v.id;
+        });
+      } else {
+        this.selectShopArr.push(v.id);
+      }
+      console.log("🚀 ~ selectShop ~ v:", v);
+
+      console.log("🚀 ~ selectShop ~ this.selectShopArr:", this.selectShopArr);
+      this.$forceUpdate();
+    },
+    getRowKeys(row) {
+      return row.productId;
+    },
+    handleSelectionChange(val) {
+      console.log("🚀 ~ handleSelectionChange ~ val:", val);
+      // table组件选中事件,记得加上@selection-change="handleSelectionChange"
+      this.multipleSelection = val;
+      // this.changePageCoreRecordData();
+    },
+
+    closeBookf() {
+      this.chooseBookVisible = false;
+    },
+    showchooseBookf(e) {
+      // 显示图书列表
+      this.chooseBookVisible = true;
+      // console.log(this.bookIds,'this.bookIds')
+      // this.$nextTick(() => {
+      //   this.$refs.chooseBook.getBookList()
+      //   this.bookIds = e.bookIds
+      //   })
+    },
+
+    // 获取数据列表
+    async getDataList(bookMarketId) {
+      this.bookMarketId = bookMarketId;
+      this.dataListLoading = true;
+      this.getDataList = [];
+      this.clear();
+      // if (bookMarketId) {
+      //   await this.getCorrelationArr(bookMarketId);
+      // }
+
+      await this.$http({
+        url: this.$http.adornUrl("/book/shopproduct/list"),
+        method: "get",
+        params: this.$http.adornParams({
+          page: this.pageIndex,
+          limit: this.pageSize,
+          key: this.dataForm.key,
+        }),
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.list;
+          this.totalPage = data.page.totalCount;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        // setTimeout(async () => {
+        //   await this.setSelectRow();
+        // }, 200);
+        this.dataListLoading = false;
+      });
+    },
+    clear() {
+      // this.$refs.table.clearSelection();
+      // this.multipleSelection = [];
+    },
+    // 获取关联数据列表
+    async getAssociatedGoodsList() {
+      console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
+      // :currentId="addForm.id"
+      // currentType="bookLabelId"
+      var form = { ...this.dataForm };
+
+      if (this.currentType == "bookLabelId") {
+        form.bookLabelId = this.currentId;
+        console.log("🚀 ~ getAssociatedGoodsList ~ form:", form)
+      }
+      else if (this.currentType == "bookMarketId") {
+        form.bookMarketId = this.currentId;
+        console.log("🚀 ~ getAssociatedGoodsList ~ form:", form)
+      }
+      
+      await this.getGoodsTypeList();
+      this.dataListLoading = true;
+      await this.$http({
+        url: this.$http.adornUrl(`${this.urlList.getAssociatedGoodsList}`),
+        method: "post",
+        data: this.$http.adornData({
+          current: 1,
+          limit: 99999999,
+          // productName: "",
+          productId: "",
+          ...form,
+          // bookLabelId: bookLabelId,
+        }),
+      }).then(async ({ data }) => {
+        if (data && data.code === 0) {
+          this.associatedGoodsList = [...data.result.records];
+
+          this.dataListLoading = false;
+        }
+      });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      // this.changePageCoreRecordData();
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      // 改变页的时候调用一次
+      // this.changePageCoreRecordData();
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val;
+    },
+    // 新增 / 修改
+    addOrUpdateHandle(id) {
+      this.addOrUpdateVisible = true;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id);
+      });
+    },
+    // 删除
+    deleteHandle(id) {
+      var ids = id
+        ? [id]
+        : this.dataListSelections.map((item) => {
+            return item.productId;
+          });
+      this.$confirm(
+        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      ).then(() => {
+        this.$http({
+          url: this.$http.adornUrl("/book/shopproduct/delete"),
+          method: "post",
+          data: this.$http.adornData(ids, false),
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+              },
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+    SwitchChange(event) {
+      /*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
+      var parms = {
+        publishStatus: event.publishStatus,
+        productId: event.productId,
+      };
+      // console.log(parms)
+      this.$http({
+        url: this.$http.adornUrl("/book/shopproduct/update"),
+        method: "post",
+        data: parms,
+      })
+        .then((res) => {
+          this.$message({
+            message: "成功",
+            type: "success",
+          });
+          this.loading = false;
+          this.getDataList();
+        })
+        .catch((error) => {
+          this.loading = false;
+          console.log(error);
+        });
+      console.log(event);
+    },
+  },
+};
+</script>
+
+
+<style lang="less" scoped>
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.shop_box {
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow: auto;
+  // margin-left: -10px;
+  padding-bottom: 20px;
+  // margin-top: 20px;
+  .shop_box_item {
+    width: 23.7%;
+    min-width: 200px;
+    height: 95px;
+    padding: 6px;
+    box-sizing: border-box;
+    margin-left: 10px;
+    margin-bottom: 10px;
+    position: relative;
+
+    float: left;
+    // margin: 20px;
+    // background: #f5f5f5;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    .shop_box_item_check {
+      position: absolute;
+      top: 4px;
+      right: 6px;
+    }
+    .shop_box_item_img {
+      margin: 0 auto;
+      // display: flex;
+      width: 60px;
+      height: 80px;
+      float: left;
+      object-fit: contain;
+      background: #bababa;
+    }
+    .shop_box_item_content {
+      width: calc(100% - 70px);
+      float: right;
+    }
+    .shop_box_item_title {
+      color: #333;
+      font-size: 12px;
+      font-weight: 600;
+      margin-top: 10px;
+      .title-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        width: 100%;
+      }
+    }
+  }
+}
+
+.isSelect {
+  border: 1px solid rgb(19, 206, 102);
+  box-shadow: 0 2px 12px 0 rgba(19, 206, 102);
+}
+.shop_box_item_info {
+  font-weight: 500 !important;
+  margin-top: 5px !important;
+}
+.shopFormBox {
+  float: right;
+  min-width: 520px;
+  .form_item {
+    width: 240px !important;
+    float: left;
+    margin-bottom: 0;
+  }
+}
+.addFormBox {
+  .form_item {
+    width: 33%;
+    float: left;
+  }
+}
+.search_form {
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+/deep/ .el-select-dropdown__list {
+  padding: 6px !important;
+}
+</style>
+  

src/views/modules/shop/commonBookTags/shopproduct.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     style="width: 100%; height: 100%; margin-top: -50px"
-    v-loading="dataListLoading"
+   
   >
     <!-- <el-form
       :inline="true"
@@ -46,10 +46,11 @@
               size="small"
               v-model="dataForm.goodsType"
               placeholder="请选择"
-              style="width: 100%"
+              style="width: 100%;"
               clearable
             >
               <el-option
+              style="padding:0 10px;box-sizing: border-box;"
                 v-for="item in goodsTypeList"
                 :key="item.dictType"
                 :label="item.dictValue"
@@ -77,7 +78,106 @@
     </div>
     
     <div class="shop_box">
-      <li
+      <!-- @selection-change="handleSelectionChange" -->
+      <el-table
+          ref="table"
+          height="100%"
+          :data="associatedGoodsList"
+          :row-key="getRowKeys"
+          border
+          size="mini"
+          v-loading="dataListLoading"
+         
+          style="width: 100%"
+        >
+          <!-- <el-table-column
+            :reserve-selection="true"
+            type="selection"
+            header-align="center"
+            align="center"
+            width="50"
+          >
+          </el-table-column> -->
+          <!--  -->
+          <el-table-column
+            label="商品ID"
+            width="70"
+            align="center"
+            prop="productId"
+          >
+            <!-- <template slot-scope="scope">
+            {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
+          </template> -->
+          </el-table-column>
+          <el-table-column
+            prop="product.productName"
+            header-align="center"
+            align="center"
+            label="商品名称"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="product.price"
+            width="120"
+            header-align="center"
+            align="center"
+            sortable
+            label="价格"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="product.activityPrice"
+            width="120"
+            header-align="center"
+            align="center"
+            sortable
+            label="活动价"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="product.productStock"
+            width="120"
+            header-align="center"
+            align="center"
+            sortable
+            label="库存"
+          >
+          </el-table-column>
+          <el-table-column
+            header-align="center"
+            align="center"
+            label="商品图"
+            width="80"
+          >
+            <template slot-scope="scope">
+              <img
+                v-if="scope.row.product.productImages != ''"
+                :src="scope.row.product.productImages"
+                width="25"
+                height="35"
+                class="tableImg"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            header-align="center"
+            align="center"
+            label="操作"
+            width="80"
+          >
+            <template slot-scope="scope">
+              <el-button
+            type="text"
+            style="color: red;"
+            @click="shopDelete(scope.row)"
+            size="mini"
+            >删除</el-button
+          >
+            </template>
+          </el-table-column>
+        </el-table>
+      
+      <!-- <li
         v-for="(v, i) in associatedGoodsList"
         @click="isEdit ? selectShop(v) : ''"
         :class="
@@ -103,10 +203,7 @@
         <div class="shop_box_item_content">
           <li class="shop_box_item_title">
             <span></span><span>{{ v.product.productName }}</span>
-            <!-- <el-tooltip placement="top" sty>
+           
-              <div slot="content">{{ v.product.productName }}</div>
-              <div class="title-text">{{ v.product.productName }}</div>
-            </el-tooltip> -->
           </li>
           <li class="shop_box_item_title shop_box_item_info">
             <span>价格：</span>
@@ -129,11 +226,8 @@
           </li>
         </div>
 
-        <!-- <div class="price-con">
+      
-            <span class="coupon-price-title">¥</span
+      </li> -->
-            ><span class="coupon-price-afterCoupon">356</span>
-          </div> -->
-      </li>
     </div>
 
     <!-- 弹窗, 新增 / 修改 -->
@@ -195,6 +289,9 @@ export default {
     // await this.getGoodsTypeList();
   },
   methods: {
+    shopDelete(row){
+this.$emit('delete',[row])
+    },
     // 获取商品类型
     getGoodsTypeList() {
       this.$http({
@@ -206,11 +303,14 @@ export default {
       });
     },
     handleCheckAllChange(status) {
-      if (status) {
+      // if (status) {
-        this.selectShopArr = this.associatedGoodsList.map((e) => e.id);
+      //   this.selectShopArr = this.associatedGoodsList.map((e) => e.id);
-      } else {
+      // } else {
-        this.selectShopArr = [];
+      //   this.selectShopArr = [];
-      }
+      // }
+      this.$emit('delete',this.associatedGoodsList,'all')
+
+      
       this.$forceUpdate();
     },
     selectShop(v) {
@@ -422,7 +522,7 @@ li {
 }
 .shop_box {
   width: 100%;
-  height: calc(100% - 40px);
+  height: calc(100% - 50px);
   overflow: auto;
   // margin-left: -10px;
   padding-bottom: 20px;

src/views/modules/shop/commonBookTags/shopproductTable.vue

@@ -1,166 +1,67 @@
 <template>
   <div>
-    <el-drawer
+    <el-drawer title="新增关联商品" v-if="drawer" :wrapperClosable="false" :visible.sync="drawer" destroy-on-close
-      title="新增关联商品"
+      direction="rtl" size="70%">
-      v-if="drawer"
-      :wrapperClosable="false"
-      :visible.sync="drawer"
-      destroy-on-close
-      direction="rtl"
-      size="70%"
-    >
       <div class="shop_drawer_box demo-drawer__content">
         <div class="addFormBox">
           <el-form ref="addForm" label-width="80px" :model="dataForm">
             <el-form-item label="商品名称" prop="title" class="form_item">
-              <el-input
+              <el-input size="small" placeholder="请输入商品名称" style="width: 100%" v-model="dataForm.productName" clearable>
-                size="small"
-                placeholder="请输入商品名称"
-                style="width: 100%"
-                v-model="dataForm.key"
-                clearable
-              >
               </el-input>
             </el-form-item>
             <el-form-item label="商品类型" prop="goodsType" class="form_item">
-              <el-select
+              <el-select size="small" v-model="dataForm.goodsType" placeholder="请选择" style="width: 100%" clearable>
-                size="small"
+                <el-option v-for="item in goodsTypeList" :key="item.dictType" :label="item.dictValue"
-                v-model="dataForm.goodsType"
+                  :value="item.dictType">
-                placeholder="请选择"
-                style="width: 100%"
-                clearable
-              >
-                <el-option
-                  v-for="item in goodsTypeList"
-                  :key="item.dictType"
-                  :label="item.dictValue"
-                  :value="item.dictType"
-                >
                 </el-option>
               </el-select>
             </el-form-item>
 
-            <el-form-item
+            <el-form-item label="" class="form_item" label-width="20px" style="width: 160px !important">
-              label=""
+              <el-button type="primary" plain @click="
-              class="form_item"
+      pageIndex = 1;
-              label-width="20px"
+    getDataList(bookMarketId);
-              style="width: 160px !important"
+    " size="small">查询</el-button>
-            >
+              <el-button @click="handleReset()" size="small" plain>重置</el-button>
-              <el-button
-                @click="
-                  pageIndex = 1;
-                  getDataList(bookMarketId);
-                "
-                size="small"
-                >查询</el-button
-              >
-              <el-button @click="handleReset()" size="small">重置</el-button>
             </el-form-item>
           </el-form>
         </div>
 
-        <el-table
+        <el-table ref="table" height="80%" :data="dataList" :row-key="getRowKeys" border size="mini"
-          ref="table"
+          v-loading="dataListLoading" @selection-change="handleSelectionChange" style="width: 100%">
-          height="80%"
+          <el-table-column :reserve-selection="true" type="selection" header-align="center" align="center" width="50">
-          :data="dataList"
-          :row-key="getRowKeys"
-          border
-          size="mini"
-          v-loading="dataListLoading"
-          @selection-change="handleSelectionChange"
-          style="width: 100%"
-        >
-          <el-table-column
-            :reserve-selection="true"
-            type="selection"
-            header-align="center"
-            align="center"
-            width="50"
-          >
           </el-table-column>
           <!--  -->
-          <el-table-column
+          <el-table-column label="商品ID" width="70" align="center" prop="productId">
-            label="商品ID"
-            width="70"
-            align="center"
-            prop="productId"
-          >
             <!-- <template slot-scope="scope">
             {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
           </template> -->
           </el-table-column>
-          <el-table-column
+          <el-table-column prop="productName" header-align="center" align="center" label="商品名称">
-            prop="productName"
-            header-align="center"
-            align="center"
-            label="商品名称"
-          >
           </el-table-column>
-          <el-table-column
+          <el-table-column prop="price" width="120" header-align="center" align="center" sortable label="价格">
-            prop="price"
-            width="120"
-            header-align="center"
-            align="center"
-            sortable
-            label="价格"
-          >
           </el-table-column>
-          <el-table-column
+          <el-table-column prop="activityPrice" width="120" header-align="center" align="center" sortable label="活动价">
-            prop="activityPrice"
-            width="120"
-            header-align="center"
-            align="center"
-            sortable
-            label="活动价"
-          >
           </el-table-column>
-          <el-table-column
+          <el-table-column prop="productStock" width="120" header-align="center" align="center" sortable label="库存">
-            prop="productStock"
-            width="120"
-            header-align="center"
-            align="center"
-            sortable
-            label="库存"
-          >
           </el-table-column>
-          <el-table-column
+          <el-table-column header-align="center" align="center" label="商品图" width="120">
-            header-align="center"
-            align="center"
-            label="商品图"
-            width="120"
-          >
             <template slot-scope="scope">
-              <img
+              <img v-if="scope.row.productImages != ''" :src="scope.row.productImages" width="25" height="35"
-                v-if="scope.row.productImages != ''"
+                class="tableImg" />
-                :src="scope.row.productImages"
-                width="25"
-                height="35"
-                class="tableImg"
-              />
             </template>
           </el-table-column>
         </el-table>
-        <el-pagination
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
-          @size-change="sizeChangeHandle"
+          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
-          @current-change="currentChangeHandle"
+          layout="total, sizes, prev, pager, next, jumper">
-          :current-page="pageIndex"
-          :page-sizes="[10, 20, 50, 100]"
-          :page-size="pageSize"
-          :total="totalPage"
-          layout="total, sizes, prev, pager, next, jumper"
-        >
         </el-pagination>
 
         <div class="demo-drawer__footer">
           <div style="float: right; margin-top: 20px">
             <el-button @click="close" size="small">取 消</el-button>
-            <el-button
+            <el-button type="primary" @click="submit" :loading="loading" size="small">{{ loading ? "提交中 ..." : "确 定"
-              type="primary"
+              }}</el-button>
-              @click="submit"
-              :loading="loading"
-              size="small"
-              >{{ loading ? "提交中 ..." : "确 定" }}</el-button
-            >
           </div>
         </div>
         <!-- 弹窗, 新增 / 修改 -->
@@ -171,7 +72,7 @@
   </div>
 </template>
 
-  <script>
+<script>
 // import chooseBook from './chooseBook.vue'
 // import AddOrUpdate from './shopproduct-add-or-update'
 export default {
@@ -185,7 +86,7 @@ export default {
       multipleSelection: [], // 当前页选中的数据
       idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
       dataForm: {
-        key: "",
+        productName: "",
       },
       bookMarketId: null,
       dataList: [],
@@ -346,8 +247,8 @@ export default {
       var ids = id
         ? [id]
         : this.dataListSelections.map((item) => {
-            return item.productId;
+          return item.productId;
-          });
+        });
       this.$confirm(
         `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
         "提示",
@@ -413,6 +314,7 @@ export default {
   width: 100%;
   height: 100%;
 }
+
 .addFormBox {
   width: 100%;
 
@@ -422,8 +324,8 @@ export default {
     float: left;
   }
 }
+
 ::v-deep.el-drawer__header {
   margin-bottom: 10px !important;
 }
 </style>
-  

src/views/modules/shop/commonBookTags/tags.vue

@@ -1,21 +1,13 @@
 <template>
   <div class="tree_box">
     <div style="overflow: hidden" v-if="source == 'tags'">
-      <p
+      <p class="info_bg" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
-        class="info_bg"
+      
-        style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
-      >
         当前标签：<span style="color: #17b3a3; font-weight: 600">{{
-          currentNode ? currentNode.data.title : ""
+      currentNode ? currentNode.data.title : ""
-        }}</span>
+    }}</span>
       </p>
-      <el-button
+      <el-button type="primary" @click="addOrUpdateHandle()" style="float: right" size="mini">新增顶级标签</el-button>
-        type="primary"
-        @click="addOrUpdateHandle()"
-        style="float: right"
-        size="mini"
-        >新增顶级标签</el-button
-      >
     </div>
     <!-- <p v-if="source == 'shop'" class="select_box" style="">
       <el-checkbox
@@ -34,47 +26,24 @@
     <!-- show-checkbox -->
     <!-- :allow-drop="allowDrop" -->
     <div class="custom-tree-container">
-      <el-tree
+      <el-tree :highlight-current="true" class="filter-tree" node-key="id" :data="treeDataList" :props="defaultProps"
-        :highlight-current="true"
+        default-expand-all :filter-node-method="filterNode" ref="tree" :draggable="true" @node-click="handleNodeClick"
-        class="filter-tree"
+        :expand-on-click-node="false">
-        node-key="id"
-        :data="treeDataList"
-        :props="defaultProps"
-        default-expand-all
-        :filter-node-method="filterNode"
-        ref="tree"
-        :draggable="true"
-        @node-click="handleNodeClick"
-        :expand-on-click-node="false"
-      >
         <!-- @click="handleClickNodes(node, data)" -->
-        <span
+        <span class="custom-tree-node" slot-scope="{ node, data }" @click="
-          class="custom-tree-node"
+      source == 'tags'
-          slot-scope="{ node, data }"
+        ? handleClickNodes(node, data, 'edit')
-          @click="
+        : ''
-            source == 'tags'
+      "  :class="`${currentNode&&currentNode.data.id==data.id?'isSelect':''}`" style=" padding-left: 5px;
-              ? handleClickNodes(node, data, 'edit')
+ box-sizing: border-box;">
-              : ''
-          "
-        >
           <!-- @change="(e) => selectShop(data, e)" -->
-          <span style="display: flex; align-items: center"
+          <span style="display: flex; align-items: center" ><el-checkbox @change=" selectShop(data)"
-            ><el-checkbox
+              :value="selectArr.includes(data.id)" v-if="data.isLast == 1 && source == 'shop'"
-            @change=" selectShop(data)"
+              style="margin-right: 10px"></el-checkbox>{{ node.label }}</span>
-              :value="selectArr.includes(data.id)"
-              v-if="data.isLast == 1 && source == 'shop'"
-              style="margin-right: 10px"
-            ></el-checkbox
-            >{{ node.label }}</span
-          >
           <span v-if="source == 'tags'">
             <!-- v-if="node.level <= 1" -->
-            <el-button
+            <el-button type="text" size="mini" @click.stop="handleClickNodes(node, data, 'addChildren')"
-              type="text"
+              v-if="data.isLast != 1">
-              size="mini"
-              @click.stop="handleClickNodes(node, data, 'addChildren')"
-              v-if="data.isLast == 1"
-            >
               添加下级
             </el-button>
             <!-- <el-button
@@ -86,7 +55,7 @@
                 </el-button> -->
 
             <!-- v-if="node.childNodes.length == 0" -->
-            <el-button type="text" size="mini" @click.stop="remove(data)">
+            <el-button type="text" size="mini" @click.stop="remove(data)" style="color: rgb(235 92 92);">
               删除
             </el-button>
           </span>
@@ -96,11 +65,11 @@
   </div>
 </template>
 
-  <script>
+<script>
 // import dialogComponent from './seckillprodrelation'
 import debounce from "lodash/debounce"; //导入lodash中的debounce
 export default {
-  props: ["dataList", "urlList", "source", "productId",'sourceType'],
+  props: ["dataList", "urlList", "source", "productId", 'sourceType'],
   data() {
     return {
       currentNode: null,
@@ -118,6 +87,14 @@ export default {
     dataList(val) {
       this.treeDataList = val;
     },
+    currentNode: {
+      handler(newVal, oldVal) {
+        // this.$emit('changeCurrentNode',this.currentNode)
+      },
+    
+    deep: true
+    },
+   
     filterText(val) {
       this.$refs.tree.filter(val);
     },
@@ -125,7 +102,7 @@ export default {
   activated() {
     console.log("🚀 ~ activated ~ this.currentNode:", this.currentNode, "9999");
     if (this.source == "tags") {
-      if (this.currentNode) {
+      if (this.currentNode && this.currentNode.data.id) {
         this.setCurrentNodeShow(this.currentNode.data.id);
         this.handleClickNodes(this.currentNode, this.currentNode.data, "edit");
       }
@@ -202,7 +179,7 @@ export default {
       }
       this.$forceUpdate();
     },
-    selectShop : debounce(async function (v, status)  {
+    selectShop: debounce(async function (v, status) {
       console.log("🚀 ~ selectShop ~ status:", status);
 
       // if (this.selectArr.includes(v.id)) {
@@ -217,12 +194,12 @@ export default {
       console.log("🚀 ~ selectShop ~ this.selectShopArr999:", this.selectArr);
 
       if (this.selectArr.includes(v.id)) {
-        this.$emit("delete", v.id,this.sourceType);
+        this.$emit("delete", v.id, this.sourceType);
       } else {
-        this.$emit("submit", v.id,this.sourceType);
+        this.$emit("submit", v.id, this.sourceType);
       }
       this.$forceUpdate();
-    },200),
+    }, 200),
     // handleCheckAllChange(status) {
     //   if (status) {
     //     this.selectArr = this.treeDataList.map((e) => e.id);
@@ -232,12 +209,25 @@ export default {
     //   this.$forceUpdate();
     // },
     async setCurrentNodeShow(id) {
-      var newNodeData = await this.$refs.tree.getNode(id);
+      console.log("🚀 ~ setCurrentNodeShow ~ id222:", id, this.currentNode)
-      this.$emit("handleClickNodes", newNodeData, newNodeData.data, "edit");
+
-      this.currentNode = newNodeData;
+      var newNodeData = {}
+      if (id) {
+        newNodeData = await this.$refs.tree.getNode(id);
+      } else {
+        newNodeData = {
+          data: {}
+        }
+      }
+ this.currentNode = newNodeData;
       this.$forceUpdate();
-      this.$refs.tree.setCurrentKey(id);
+      this.$nextTick(() => {
-      this.$refs.tree.setCheckedKeys([id]);
+        this.$refs.tree.setCurrentKey(id);
+        this.$refs.tree.setCheckedKeys([id]);
+      })
+      await this.$emit("handleClickNodes", newNodeData, newNodeData.data, "edit");
+     
+
     },
     allowDrop(draggingNode, dropNode, type) {
       console.log(draggingNode.level, dropNode.level);
@@ -273,7 +263,7 @@ export default {
       return status;
     },
     //新增修改
-     dataFormSubmit: debounce(async function (formName) {
+    dataFormSubmit: debounce(async function (formName) {
       //    return false
       if (this.addForm.title == "") {
         this.$message.error("请输入标签名称");
@@ -324,7 +314,7 @@ export default {
           });
         }
       });
-    },200),
+    }, 200),
     setCheckedKeys() {
       this.$refs.tree.setCheckedKeys([0]);
     },
@@ -334,13 +324,14 @@ export default {
       this.isFresh = true;
     },
     async handleClickNodes(node, data, type) {
+      console.log("🚀 ~ handleClickNodes11111 ~ node, data, type:", node, data, type)
       this.addForm = {};
       // console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
       console.log(node, data, "当前选中节点");
       this.currentNode = node;
       this.isFresh = false;
       this.isFresh = true;
-
+      this.$forceUpdate()
       var form = {};
 
       if (this.source == "shop") {
@@ -380,6 +371,7 @@ export default {
       }
     },
     addOrUpdateHandle() {
+
       var addform = {
         children: [],
         delFlag: 0,
@@ -395,7 +387,7 @@ export default {
       // }
     },
     async remove(data) {
-      var that=this;
+      var that = this;
       var ids = { productId: data.productId };
       this.$confirm(`是否删除标签【${data.title}】？`, "提示", {
         confirmButtonText: "确定",
@@ -409,11 +401,17 @@ export default {
             method: "post",
             data: {},
           }).then(async ({ data }) => {
-
+            if (data && data.code === 0) {
-            that.$message({
+              that.$message({
               type: "success",
               message: "删除成功!",
             });
+          } else {
+            this.$message.error(data.msg);
+            return false
+          
+          }
+           
             that.currentNode = null;
             that.isFresh = false;
             that.addForm = {};
@@ -424,7 +422,7 @@ export default {
             // this.expandedkey = [node.parent.data.catId]
           });
         })
-        .catch(() => {});
+        .catch(() => { });
     },
     filterNode(value, data) {
       if (!value) return true;
@@ -723,7 +721,32 @@ export default {
   },
 };
 </script>
-  <style lang="less" scoped>
+<style lang="less" scoped>
+/deep/ .filter-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  // 设置颜色
+  // background-color: #baf !important;
+}
+
+/deep/ .filter-tree .el-tree-node:focus>.el-tree-node__content {
+  background-color: transparent !important;
+  // color: #17b3a3 !important;
+}
+
+/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  background-color: transparent !important;
+  // color: #17b3a3 !important;
+}
+
+
+/deep/.filter-tree .el-tree-node__content .el-button {
+  display: inline-block !important;
+}
+
+// /deep/.filter-tree .is-focusable {
+
+//   background-color: #17b3a3 !important;
+// }
+
 .tree_box {
   width: 350px;
   height: 100%;
@@ -735,15 +758,18 @@ export default {
   position: relative;
   // background: #fafafa;
 }
+
 .border_box {
   height: 100px;
   margin-bottom: 10px;
+
   .title {
     display: flex;
     align-items: center;
     font-weight: 600;
     font-size: 16px;
     margin-bottom: 10px;
+
     // color: #17b3a3;
     .line {
       width: 4px;
@@ -753,6 +779,7 @@ export default {
     }
   }
 }
+
 .border_box {
   width: 100%;
   float: right;
@@ -762,43 +789,52 @@ export default {
   padding: 15px 15px;
   box-sizing: border-box;
 }
+
 .tree_content_box {
   height: calc(100% - 110px) !important;
 }
+
 .mod-config {
   width: 100%;
   height: 82vh;
   overflow: hidden;
 }
+
 .el-tree-node__content {
   .el-button {
     display: none;
   }
 }
+
 .el-tree-node__content:hover {
   .el-button {
     display: inline;
   }
 }
-.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;
 }
+
 .el-tree {
   height: 350px;
   overflow-y: auto !important;
+
   .el-tree-node__content span {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
 }
+
 .select_box {
   position: absolute;
   right: 20px;
   top: 0px;
 }
+
 .custom-tree-node {
   flex: 1;
   display: flex;
@@ -807,6 +843,7 @@ export default {
   font-size: 14px;
   padding-right: 8px;
 }
+
 // .el-card {
 //   background: none !important;
 // }
@@ -814,10 +851,12 @@ p {
   margin: 0;
   margin-bottom: 10px;
 }
+
 .submitButton {
   float: right;
   margin-top: 20px;
 }
+
 // .el-tree-node__content .el-button {
 //   // width: 120px !important;
 
@@ -838,6 +877,7 @@ p {
     float: left;
   }
 }
+
 .custom-tree-container {
   height: calc(100% - 60px);
 
@@ -845,6 +885,7 @@ p {
     height: 100%;
   }
 }
+
 .info_bg {
   background: #e0dede;
   height: 28px;
@@ -858,5 +899,30 @@ p {
   width: calc(100% - 120px);
   float: left;
 }
-</style>
 
+/* 去掉点击时的蓝色背景 */
+.el-tree .el-tree-node__content:hover {
+  background-color: inherit;
+}
+
+/* 如果需要去掉所有hover效果 */
+.el-tree .el-tree-node__content:hover {
+  background-color: unset;
+}
+
+/* 针对被选中节点去掉背景色 */
+.el-tree .el-tree-node__content.is-checked {
+  background-color: inherit;
+}
+
+/* 如果需要去掉所有hover和active效果 */
+.el-tree-node__content:hover,
+.el-tree-node__content:active {
+  background-color: unset;
+}
+.isSelect{
+
+ /* 自定义角度渐变 */
+background-image: linear-gradient(-45deg, #fff, #b0f3ec);
+}
+</style>

src/views/modules/shop/shopproduct.vue

@@ -88,7 +88,7 @@
         fixed="right"
         header-align="center"
         align="center"
-        width="150"
+        width="180"
         label="操作"
       >
         <template slot-scope="scope">