From 9c977b0051a8c92ad0ecc23dce86722fae306fb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Mon, 16 Dec 2024 13:45:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B5=B7=E5=A4=96=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=20=20=E8=AF=84=E8=AE=BA=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/hwReadManage/commontList.vue      |   49 +
 .../hwReadManage/components/bookTagsForm.vue  |  594 +++++++++
 .../hwReadManage/components/commont.vue       |  256 ++++
 .../hwReadManage/components/shopproduct.vue   |  617 +++++++++
 .../components/shopproductTable.vue           |  423 +++++++
 .../components/sociology-add-or-update.vue    |  359 ++++++
 .../modules/hwReadManage/components/tags.vue  |  931 ++++++++++++++
 .../modules/hwReadManage/operationsList.vue   | 1115 ++++++++++++++++
 src/views/modules/hwReadManage/readLabel.vue  | 1127 +++++++++++++++++
 9 files changed, 5471 insertions(+)
 create mode 100644 src/views/modules/hwReadManage/commontList.vue
 create mode 100644 src/views/modules/hwReadManage/components/bookTagsForm.vue
 create mode 100644 src/views/modules/hwReadManage/components/commont.vue
 create mode 100644 src/views/modules/hwReadManage/components/shopproduct.vue
 create mode 100644 src/views/modules/hwReadManage/components/shopproductTable.vue
 create mode 100644 src/views/modules/hwReadManage/components/sociology-add-or-update.vue
 create mode 100644 src/views/modules/hwReadManage/components/tags.vue
 create mode 100644 src/views/modules/hwReadManage/operationsList.vue
 create mode 100644 src/views/modules/hwReadManage/readLabel.vue

diff --git a/src/views/modules/hwReadManage/commontList.vue b/src/views/modules/hwReadManage/commontList.vue
new file mode 100644
index 0000000..a8f7918
--- /dev/null
+++ b/src/views/modules/hwReadManage/commontList.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="mod-config">
+    <div
+        style="padding:0 20px;box-sizing: border-box;height:calc(100% - 100px);"
+      >
+        <common-commont
+          ref="commonCommont"
+        
+       
+        ></common-commont>
+      </div>
+  </div>
+</template>
+
+<script>
+
+import commonCommont from "./components/commont.vue";
+
+export default {
+  data() {
+    return {
+aaa:111,
+    };
+  },
+  components: {
+  
+    commonCommont
+  },
+  activated() {
+    this.$nextTick(() => {
+        this.$refs.commonCommont.init();
+      });
+  },
+  created(){
+    this.$nextTick(() => {
+        this.$refs.commonCommont.init();
+      });
+  },
+  methods: {
+   
+  
+  }
+};
+</script>
+<style lang="less" scoped>
+.mod-config{
+  height: 80vh;
+}
+</style>
diff --git a/src/views/modules/hwReadManage/components/bookTagsForm.vue b/src/views/modules/hwReadManage/components/bookTagsForm.vue
new file mode 100644
index 0000000..83f49ac
--- /dev/null
+++ b/src/views/modules/hwReadManage/components/bookTagsForm.vue
@@ -0,0 +1,594 @@
+<template>
+  <el-dialog
+    :title="!dataForm.productId ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    @close="handlereset"
+    lock-scroll
+    width="750px"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      label-width="100px"
+    >
+      <el-form-item label="所属分类" prop="poids">
+        <el-cascader
+          v-model="dataForm.poids"
+          :options="categorys"
+          :props="props"
+          clearable
+        ></el-cascader>
+      </el-form-item>
+     
+    
+     
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handlereset">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { quillEditor } from "vue-quill-editor";
+import global from "@/views/common/common.vue"; //引入共用组间
+
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+const toolbarOptions = [
+  ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
+  ["blockquote", "code-block"], //引用，代码块
+  [{ header: 1 }, { header: 2 }], // 几级标题
+  [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
+  [{ script: "sub" }, { script: "super" }], // 下角标，上角标
+  [{ indent: "-1" }, { indent: "+1" }], // 缩进
+  [{ direction: "rtl" }], // 文字输入方向
+  [{ size: ["small", false, "large", "huge"] }], // 字体大小
+  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+  [{ color: [] }, { background: [] }], // 颜色选择
+  [
+    {
+      font: [
+        "SimSun",
+        "SimHei",
+        "Microsoft-YaHei",
+        "KaiTi",
+        "FangSong",
+        "Arial",
+      ],
+    },
+  ], // 字体
+  [{ align: [] }], // 居中
+  ["clean"], // 清除样式,
+  ["link", "image"], // 上传图片、上传视频
+];
+
+export default {
+  data() {
+    return {
+      pointMemery: [], // 花生币操作记录
+      baseUrl: global.baseUrl,
+      goodsTypeList: [],
+      visible: false,
+      categorys: [],
+      fileList: [], // 封面图
+      swiperfileList: [],
+      dialogVisible: false,
+      props: {
+        value: "catId",
+        label: "name",
+        children: "children",
+        checkStrictly: true,
+      },
+      dataForm: {
+        tags: [], // 商品标签
+        hDprice: 0, // 活动价
+        productId: 0,
+        limitCountImg: 1, // 图片数量
+        productImageList: "", // 轮播图
+        showBtnDealImg: true,
+        noneBtnImg: false,
+        productName: "",
+        productStock: null, // 商品库存
+        price: "",
+        author: "",
+        publisher: "",
+        weight: "",
+        pubDate: "",
+        // format: '', // 开本
+        isFreeMail: 1, // 是否包邮
+        // pageNum: '',
+        // quality: '', // 内文用纸
+        isNew: 0,
+        sumSales: null, // 总销量
+        publishStatus: "",
+        productPid: "",
+        productImages: "",
+        createTime: "",
+        updateTime: "",
+        delFlag: "",
+        sort: "",
+        goodsType: "", // 商品类型
+        poids: [],
+
+        Books: [], // 关联的图书
+      },
+      bookidsd: [],
+      dataRule: {
+        productName: [
+          {
+            required: true,
+            message: "商品名称不能为空",
+            trigger: "blur",
+          },
+        ],
+        price: [
+          {
+            required: true,
+            message: "商品价格不能为空",
+            trigger: "blur",
+          },
+        ],
+        weight: [
+          {
+            required: true,
+            message: "商品重量不能为空",
+            trigger: "blur",
+          },
+        ],
+        goodsType: [
+          {
+            required: true,
+            message: "商品类型不能为空",
+            trigger: "blur",
+          },
+        ],
+        poids: [
+          {
+            required: true,
+            message: "商品父id不能为空",
+            trigger: "blur",
+          },
+        ],
+        productImages: [
+          {
+            required: true,
+            message: "商品图不能为空",
+            trigger: "blur",
+          },
+        ],
+        // productDetails: [{
+        //   required: true,
+        //   message: '商品详情不能为空',
+        //   trigger: 'blur'
+        // }],
+        productStock: [
+          {
+            required: true,
+            message: "商品库存不能为空",
+            trigger: "blur",
+          },
+        ],
+        // updateTime: [
+        //   { required: true, message: '更新时间不能为空', trigger: 'blur' }
+        // ],
+        // delFlag: [
+        //   { required: true, message: '删除标记不能为空', trigger: 'blur' }
+        // ],
+        // sort: [
+        //   { required: true, message: '排序不能为空', trigger: 'blur' }
+        // ]
+      },
+      // 富文本编辑器配置
+      editorOption: {
+        modules: {
+          history: {
+            delay: 1000,
+            maxStack: 50,
+            userOnly: false,
+          },
+          toolbar: {
+            container: toolbarOptions,
+            handlers: {
+              image: function (value) {
+                if (value) {
+                  // 调用element的图片上传组件
+                  document.querySelector(".avatar-uploader input").click();
+                } else {
+                  this.quill.format("image", false);
+                }
+              },
+            },
+          },
+        },
+        placeholder: "请输入正文",
+      },
+      tagList: [],
+    };
+  },
+  created() {
+    this.getTreeList();
+    this.getTags();
+  },
+  methods: {
+    contentUploadSuccess(res, file) {
+      // console.log(res)
+      let quill = this.$refs.myQuillEditor.quill;
+      // 如果上传成功
+      if (res) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片，res为服务器返回的图片链接地址
+        quill.insertEmbed(length, "image", res.url);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        // 提示信息，需引入Message
+        this.$message.error("图片插入失败！");
+      }
+    },
+    handleCheckedCitiesChange(value) {
+      // console.log(value, 'value')
+    },
+    // 获取商品标签
+    getTags() {
+      this.$http({
+        url: this.$http.adornUrl("/book/label/getLabels"),
+        method: "post",
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.tagList = data.result.labels;
+          // this.totalPage = data.page.totalCount
+        } else {
+          this.tagList = [];
+          // this.totalPage = 0
+        }
+      });
+    },
+    showChooseBook() {
+      // 显示图书列表
+      this.$emit("showchooseBookf", { bookIds: this.dataForm.Books });
+      // console.log('发送指令')
+      this.$bus.$emit("showchooseBook", { bookIds: this.dataForm.Books });
+    },
+    init(id) {
+      this.dataForm.productId = id || 0;
+      this.visible = true;
+      this.getTags();
+      this.$nextTick(() => {
+        this.$refs["dataForm"].resetFields();
+        if (this.dataForm.productId) {
+          this.$http({
+            url: this.$http.adornUrl(
+              `/book/shopproduct/info/${this.dataForm.productId}`
+            ),
+            method: "get",
+            params: this.$http.adornParams(),
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.dataForm.tags = data.labels;
+              // console.log('收到的值', this.dataForm.tags)
+              this.dataForm.productName = data.shopProduct.productName;
+              this.dataForm.price = data.shopProduct.price;
+              this.dataForm.goodsType = data.shopProduct.goodsType;
+              this.dataForm.weight = data.shopProduct.weight;
+              this.dataForm.publishStatus = data.shopProduct.publishStatus;
+              this.dataForm.productPid = data.shopProduct.productPid;
+              this.dataForm.productImages = data.shopProduct.productImages;
+              this.dataForm.createTime = data.shopProduct.createTime;
+              this.dataForm.updateTime = data.shopProduct.updateTime;
+              this.dataForm.delFlag = data.shopProduct.delFlag;
+              this.dataForm.sort = data.shopProduct.sort;
+              this.dataForm.publisher = data.shopProduct.publisher;
+              this.dataForm.author = data.shopProduct.author;
+              this.dataForm.pubDate = data.shopProduct.pubDate;
+              // this.dataForm.pageNum = data.shopProduct.pageNum
+              // this.dataForm.quality = data.shopProduct.quality
+              // this.dataForm.format = data.shopProduct.format
+              this.dataForm.isFreeMail = data.shopProduct.isFreeMail;
+              this.dataForm.isNew = data.shopProduct.isNew;
+              this.dataForm.productDetails = data.shopProduct.productDetails;
+              this.dataForm.poids = data.shopProduct.poids;
+              this.dataForm.productStock = data.shopProduct.productStock;
+              this.dataForm.hDprice = data.shopProduct.activityPrice;
+              let arrArr = [];
+
+              if (data.shopProduct.bookidsimages !== "") {
+                this.dataForm.Books = data.shopProduct.bookidsimages;
+              }
+
+              sessionStorage.setItem(
+                "Books",
+                JSON.stringify(this.dataForm.Books)
+              );
+
+              if (data.shopProduct.productImages != "") {
+                var img = {
+                  name: "",
+                  url: data.shopProduct.productImages,
+                };
+                var attr = [];
+                attr.push(img);
+                this.fileList = attr;
+              }
+
+              if (
+                data.shopProduct.productImageList == null ||
+                data.shopProduct.productImageList[0] == "" ||
+                data.shopProduct.productImageList == ""
+              ) {
+                this.swiperfileList = [];
+                // console.log('走这')
+              } else {
+                // 有轮播图
+                // console.log(data.shopProduct.productImageList)
+                let arr = [];
+                let arr1 = [];
+
+                arr = data.shopProduct.productImageList.split(",");
+                // console.log(arr, '处理后得轮播图数组')
+                arr.forEach((item, index) => {
+                  arr1.push({
+                    name: index,
+                    url: item,
+                  });
+                });
+                this.swiperfileList = arr1;
+              }
+            }
+          });
+        }
+      });
+    },
+    // 获取商品类型
+    getGoodsTypeList() {
+      this.$http({
+        url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
+        method: "get",
+      }).then(({ data }) => {
+        // console.log(data.dataList)
+        this.goodsTypeList = data.dataList;
+      });
+    },
+    // 删除图书
+    deliteBook(index) {
+      this.dataForm.Books.splice(index, 1);
+      sessionStorage.setItem("Books", JSON.stringify(this.dataForm.Books));
+    },
+    dealImgChange(file, fileList) {
+      this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.getBookIds();
+      // console.log(this.bookidsd,'this.bookidsd')
+      //    return false
+      this.$refs["dataForm"].validate((valid) => {
+        this.dataForm.productImageList = this.getStringImgUrl();
+        var bookIDS = this.getBookIds();
+        //  console.log(this.dataForm.productImageList)
+        if (valid) {
+       
+
+          this.$http({
+            url: this.$http.adornUrl(
+              `/book/shopproduct/${
+                !this.dataForm.productId ? "save" : "update"
+              }`
+            ),
+            method: "post",
+            data: this.$http.adornData({
+              productId: this.dataForm.productId || undefined,
+              productName: this.dataForm.productName,
+              price: this.dataForm.price,
+              weight: this.dataForm.weight,
+              publishStatus: this.dataForm.publishStatus,
+              productPid: this.dataForm.poids[this.dataForm.poids.length - 1],
+              productImages: this.dataForm.productImages,
+              productImageList: this.dataForm.productImageList,
+              createTime: this.dataForm.createTime,
+              updateTime: this.dataForm.updateTime,
+              delFlag: this.dataForm.delFlag,
+              sort: this.dataForm.sort,
+              goodsType: this.dataForm.goodsType,
+              productDetails: this.dataForm.productDetails,
+              author: this.dataForm.author,
+              publisher: this.dataForm.publisher,
+              pubDate: this.dataForm.pubDate,
+              shoproudLabels: this.dataForm.tags,
+              // 'format': this.dataForm.format, // 开本
+              isFreeMail: this.dataForm.isFreeMail,
+              isNew: this.dataForm.isNew,
+              // 'pageNum': this.dataForm.pageNum,
+              // 'quality': this.dataForm.quality, // 内文用纸
+              productStock: this.dataForm.productStock, // 库存
+              activityPrice: this.dataForm.hDprice,
+              bookids: this.bookidsd, // 关联的图书[12,13,45]
+              // 'bookidsimages': this.dataForm.Books     // 关联的图书对象
+            }),
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: "操作成功",
+                type: "success",
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false;
+                  this.$refs["dataForm"].resetFields();
+                  // this.$refs['dataForm'].reset()
+                  this.$emit("refreshDataList");
+                },
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    changeTime(e) {
+      console.log(e);
+    },
+    getBookIds() {
+      // 图书ids
+      //  console.log(this.dataForm.Books,'Books')
+      this.bookidsd = this.dataForm.Books.map((item) => {
+        return item.id;
+      });
+    },
+    getTreeList() {
+      this.$http({
+        url: this.$http.adornUrl(`/book/shopcategory/listTree`),
+        method: "get",
+        params: this.$http.adornParams(),
+      }).then(({ data }) => {
+        this.categorys = data.data;
+      });
+    },
+    handlePictureCardPreview(file) {
+      this.dataForm.productImages = file.url;
+      this.dialogVisible = true;
+    },
+    bannerHandlePicSuccess(res, file) {
+      // 轮播图上传成功
+      if (res.msg == "success") {
+        this.swiperfileList.push({
+          name: file.name,
+          url: res.url,
+        });
+        // console.log(this.swiperfileList)
+        this.$message.success("上传成功");
+      } else {
+        this.$message.error("上传失败");
+      }
+    },
+    // 字符串图片地址
+    getStringImgUrl() {
+      let arr = this.swiperfileList.map((item) => item.url);
+      if (arr.length <= 0) {
+        return null;
+      } else {
+        return arr.toString();
+      }
+    },
+    handlePicSuccess(res, file) {
+      // console.log(res,'res')
+      if (res.msg == "success") {
+        this.dataForm.productImages = res.url;
+        this.fileList.push({
+          name: file.name,
+          url: res.url,
+        });
+        //  console.log(this.dataForm.productImages,'productImages')
+        this.$message.success("上传成功");
+      } else {
+        this.$message.error("上传失败");
+      }
+    },
+    bannerHandleRemove(file, fileList) {
+      // 轮播图删除操作
+      this.swiperfileList = fileList;
+    },
+    handleRemove(file, fileList) {
+      this.dataForm.productImages = "";
+      this.fileList = [];
+      this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
+    },
+    handlereset() {
+      (this.fileList = []), (this.visible = false);
+      this.dataForm.tagList = [];
+      this.dataForm.Books = [];
+      this.swiperfileList = [];
+      this.$refs["dataForm"].resetFields();
+      sessionStorage.setItem("Books", JSON.stringify([]));
+      // this.$refs['dataForm'].reset()
+    },
+    // 失去焦点事件
+    onEditorBlur(quill) {
+      //  console.log('editor blur!', quill)
+    },
+    // 获得焦点事件
+    onEditorFocus(quill) {
+      //console.log('editor focus!', quill)
+    },
+    // 准备富文本编辑器
+    onEditorReady(quill) {
+      // console.log('editor ready!', quill)
+    },
+  },
+  components: {
+    quillEditor,
+  },
+  mounted() {
+    this.$bus.$on("haveBookIds", (data) => {
+      sessionStorage.setItem("Books", JSON.stringify(data.bookIds));
+      //  console.log('haveBookIds',data)
+      //console.log(data.bookIds, '收到的数据')
+      var newarr = [];
+      var ids = []; //哨兵数组
+      if (data.bookIds && data.bookIds.length > 0) {
+        ids[0] = data.bookIds[0].id;
+        newarr[0] = data.bookIds[0];
+        //   console.log(ids,'ids')
+        //  newarr.push(data.bookIds[0])
+        for (let index = 0; index < data.bookIds.length; index++) {
+          if (!ids.includes(data.bookIds[index].id)) {
+            // console.log(data.bookIds[index].id, 'data.bookIds[index].id')
+            newarr.push(data.bookIds[index]);
+            ids.push(data.bookIds[index].id);
+          }
+        }
+      }
+      //  console.log(newarr,'newarr',ids)
+      data.bookIds.length > 0
+        ? (this.dataForm.Books = newarr)
+        : (this.dataForm.Books = []);
+    });
+  },
+
+  watch: {
+    visible: {
+      handler(val, oldVal) {
+        this.getGoodsTypeList();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style lang="less">
+// .disUoloadSty {
+//   .el-upload--picture-card {
+//     display: none;
+//     /* 上传按钮隐藏 */
+//   }
+// }
+
+// .el-form-item {
+//   /deep/ .el-form-item__label {
+//     font-size: 12px;
+//   }
+// }
+
+.el-uploadfeng {
+  .el-upload-list__item {
+    width: 95px;
+    height: 95px;
+  }
+
+  .el-upload--picture-card {
+    width: 95px;
+    height: 95px;
+    line-height: 95px;
+  }
+}
+
+.shangpin_editor .ql-editor {
+  height: 150px;
+}
+</style>
diff --git a/src/views/modules/hwReadManage/components/commont.vue b/src/views/modules/hwReadManage/components/commont.vue
new file mode 100644
index 0000000..136211c
--- /dev/null
+++ b/src/views/modules/hwReadManage/components/commont.vue
@@ -0,0 +1,256 @@
+<template>
+    <div style="width: 100%;height: 100%;">
+      <el-form
+        :inline="true"
+        :model="query"
+        @keyup.enter.native="getList()"
+        style="position: relative;"
+      >
+        <el-form-item label="评论内容">
+          <el-input
+            style="width: 100%;"
+            v-model="query.content"
+            placeholder="请输入评论内容"
+            clearable
+          ></el-input>
+        </el-form-item>
+  
+        <el-form-item style="width: 120px;">
+          <el-button
+            @click="
+              pageIndex = 1;
+              getList();
+            "
+            >查询</el-button
+          >
+        </el-form-item>
+        <!-- <el-button
+          v-if="tableData.length > 0"
+          style="position: absolute;right: 0;"
+          type="danger"
+          size="small"
+          @click="deleteHandle('all')"
+          >批量删除</el-button
+        > -->
+        <!-- <el-button type="text" 
+          @click="changeDefalutExpand()"
+          style="position: absolute;right: 0;"
+          :style="`color:${defaultExpand?'#17B3A3':'#333'}`"
+          >{{ !defaultExpand ? "收起" : "展开" }}全部评论
+          <i class="el-icon-s-comment" ></i
+        ></el-button> -->
+      </el-form>
+  
+      <!--  -->
+      <el-table
+        row-key="id"
+        v-if="refreshTable"
+        :default-expand-all="defaultExpand"
+        :data="tableData"
+        style="width: 100%"
+        height="calc(100% - 40px)"
+        @selection-change="handleSelectionChange"
+        :default-sort="{ prop: 'date', order: 'descending' }"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column
+          fixed
+          prop="createTime"
+          label="日期"
+          width="200"
+          sortable
+        >
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" width="120">
+          <template slot-scope="scope">
+            <div>
+              <el-tooltip placement="top" v-if="scope.row.user">
+                <div slot="content">
+                  <div>
+                    <p v-if="scope.row.user.nickname">
+                      昵称：{{ scope.row.user.nickname }}
+                    </p>
+                    <p v-if="scope.row.user.name">
+                      姓名：{{ scope.row.user.name }}
+                    </p>
+                    <p v-if="scope.row.user.email">
+                      邮箱：{{ scope.row.user.email }}
+                    </p>
+                    <p v-if="scope.row.user.tel">
+                      手机号：{{ scope.row.user.tel }}
+                    </p>
+                  </div>
+                </div>
+                <div class="avatar">
+                  <img
+                    :src="scope.row.user ? scope.row.user.avatar : ''"
+                    alt=""
+                    v-if="scope.row.user && scope.row.user.avatar"
+                  />
+                </div>
+              </el-tooltip>
+  
+              <div class="avatar" v-else></div>
+  
+              <span></span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="content" label="评论内容">
+          <template slot-scope="scope">
+            <div v-html="scope.row.content"></div>
+          </template>
+        </el-table-column>
+  
+        <el-table-column label="操作" width="60">
+          <template slot-scope="scope">
+            <span
+              style="color: red;cursor: pointer;"
+              @click="deleteHandle('one', scope.row.id)"
+            >
+              删除
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        style="padding: 30px 0; text-align: center;"
+        layout="total, sizes, prev, pager, next, jumper"
+      >
+      </el-pagination>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: ["courseId"],
+    data() {
+      return {
+        tableData: [],
+        selectData: [],
+        query: {
+          content: ""
+        },
+        pageIndex: 1,
+        defaultExpand: false,
+        refreshTable: true,
+        pageSize: 10,
+        totalPage: 0
+      };
+    },
+    created() {},
+    methods: {
+      handleSelectionChange(data) {
+        console.log("data at line 141:", data);
+        this.selectData = data;
+      },
+      changeDefalutExpand() {
+        this.refreshTable = false;
+        this.$nextTick(() => {
+          this.refreshTable = true;
+          this.defaultExpand = !this.defaultExpand;
+        });
+        this.$forceUpdate();
+      },
+      init() {
+        this.getList();
+      },
+      sizeChangeHandle(val) {
+        this.pageSize = val;
+        this.pageIndex = 1;
+        this.getList();
+      },
+      // 当前页
+      currentChangeHandle(val) {
+        this.pageIndex = val;
+        this.getList();
+      },
+      getList() {
+        this.$http({
+          url: this.$http.adornUrl(
+            "/master/bookAbroad/getBookAbroadCommentList"
+          ),
+          method: "post",
+          data: this.$http.adornData({
+            limit: this.pageSize,
+            current: this.pageIndex,
+           
+            content: this.query.content //内容
+          })
+        }).then(res => {
+          console.log("res at line 68:", res);
+  
+          if (res.data.code == 0 && res.data.comments.records.length > 0) {
+            this.tableData = res.data.comments.records ? res.data.comments.records : [];
+            this.totalPage = res.data.comments.total;
+            this.$forceUpdate();
+          } else {
+            this.tableData = [];
+            this.totalPage = 0;
+            this.$forceUpdate();
+          }
+          // console.log(row, "row" , res.data.resList,this.resList);
+        });
+      },
+  
+      deleteHandle(type, id) {
+        if (type == "all") {
+          if (this.selectData.length == 0) {
+            this.$message.error("请至少选择一条评论");
+            return false;
+          }
+        }
+        this.$confirm(`请确认是否${type == "all" ? "批量" : ""}删除?`, "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          var ids = this.selectData.map(e => e.id).join(",");
+          console.log("ids at line 205:", ids);
+          this.$http({
+            url: this.$http.adornUrl(
+              `/master/bookAbroad/delBookAbroadComment`
+            ),
+            method: "post",
+            data: this.$http.adornData({
+                commentId: type == "all" ? ids : id
+            })
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: "操作成功",
+                type: "success",
+                duration: 1500,
+                onClose: () => {
+                  this.getList();
+                }
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        });
+      }
+    }
+  };
+  </script>
+  <style lang="less" scoped>
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 40px;
+    overflow: hidden;
+    background-color: #f0f0f0;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/modules/hwReadManage/components/shopproduct.vue b/src/views/modules/hwReadManage/components/shopproduct.vue
new file mode 100644
index 0000000..271b59e
--- /dev/null
+++ b/src/views/modules/hwReadManage/components/shopproduct.vue
@@ -0,0 +1,617 @@
+<template>
+  <div style="width: 100%; height: 100%;">
+    <!-- <el-form
+      :inline="true"
+      :model="dataForm"
+      
+      style="float: right"
+    >
+      <el-form-item>
+        <el-input
+          v-model="dataForm.keywords"
+          placeholder="课程名称"
+          clearable
+          size="small"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          @click="
+            pageIndex = 1;
+            getDataList();
+          "
+          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.keywords"
+              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
+              style="padding:0 10px;box-sizing: border-box;"
+                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-form-item>
+        </el-form>
+      </div> -->
+    </div>
+
+    <div class="shop_box">
+      <!-- @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="book_id">
+          <!-- <template slot-scope="scope">
+            {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
+          </template> -->
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          header-align="center"
+          align="center"
+          label="图书名称"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="sort"
+          header-align="center"
+          align="center"
+          label="排序"
+          width="180"
+        >
+       
+        </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="140"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+            
+              @click="shopEdit(scope.row)"
+              size="mini"
+              >修改排序</el-button
+            >
+            <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="
+          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>
+           
+          </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>
+
+      
+      </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: {
+        
+      }
+    };
+  },
+  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: {
+    onBlurFirst(row, column) {
+      //由于修改的数据只会让合并列的第一行数据改变，因此循环遍历列表修改相同类型的合并列的其余数据
+      this.associatedGoodsList.map(item => {
+        if (row.rootTargetCode == item.rootTargetCode) {
+          item.sort = Number(row.sort);
+        }
+      });
+      //修改原型数据
+      row[column.property + "Show"] = false;
+      this.updateTable();
+    },
+
+    shopDelete(row) {
+      this.$emit("delete", row);
+    },
+    shopEdit(row) {
+      this.$emit("edit", row);
+    },
+    // 获取商品类型
+    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.$emit("delete", this.associatedGoodsList, "all");
+
+      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() {
+      // 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,
+          keywords: this.dataForm.keywords
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.list;
+          console.log("this.dataList at line 372:", this.dataList);
+          this.totalPage = data.page.totalPage;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.$forceUpdate();
+        // setTimeout(async () => {
+        //   await this.setSelectRow();
+        // }, 200);
+        this.dataListLoading = false;
+      });
+    },
+    clear() {
+      // this.$refs.table.clearSelection();
+      // this.multipleSelection = [];
+    },
+    // 获取关联数据列表
+    async getAssociatedGoodsList() {
+    
+      var form = { ...this.dataForm };
+
+      form.lableId = this.currentId;
+      this.dataListLoading = true;
+      await this.$http({
+        url: this.$http.adornUrl(`${this.urlList.getAssociatedGoodsList}`),
+        method: "post",
+        data: this.$http.adornData({
+          // page: 1,
+          // limit: 99999999,
+
+          ...form
+          // bookLabelId: bookLabelId,
+        })
+      }).then(async ({ data }) => {
+        if (data && data.code === 0) {
+          this.associatedGoodsList = [...data.bookList];
+
+          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>
diff --git a/src/views/modules/hwReadManage/components/shopproductTable.vue b/src/views/modules/hwReadManage/components/shopproductTable.vue
new file mode 100644
index 0000000..04d13bf
--- /dev/null
+++ b/src/views/modules/hwReadManage/components/shopproductTable.vue
@@ -0,0 +1,423 @@
+<template>
+  <div>
+    <el-drawer
+      title="新增关联图书"
+      v-show="drawer"
+      :wrapperClosable="false"
+      :visible.sync="drawer"
+      destroy-on-close
+      direction="rtl"
+      size="70%"
+    >
+      <!-- <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="drawer"
+    @close="handlereset"> -->
+      <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="bookName" class="form_item">
+              <el-input
+                size="small"
+                placeholder="请输入图书名称"
+                style="width: 100%"
+                v-model="dataForm.bookName"
+                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: 160px !important"
+            >
+              <el-button
+                type="primary"
+                plain
+                @click="
+                  pageIndex = 1;
+                  getDataList(bookMarketId);
+                "
+                size="small"
+                >查询</el-button
+              >
+              <el-button @click="handleReset()" size="small" plain
+                >重置</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <el-table
+          ref="table"
+          height="80%"
+          :data="dataList"
+          :row-key="getRowKeys"
+          border
+          size="mini"
+          highlight-current-row
+          v-loading="dataListLoading"
+          @selection-change="handleSelectionChange"
+          @current-change="handleCurrentChange"
+          style="width: 100%"
+        >
+          <!-- <el-table-column :reserve-selection="true" type="selection" header-align="center" align="center" width="50">
+          </el-table-column> -->
+
+          <!-- <el-table-column align="center" width="40px">
+            <template slot-scope="scope">
+              <el-radio v-model="currentRow" :label="scope.row"
+                >&nbsp;</el-radio
+              >
+            
+            </template>
+          </el-table-column> -->
+
+          <!--  -->
+          <el-table-column label="图书ID" width="70" align="center" prop="id">
+            <!-- <template slot-scope="scope">
+            {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
+          </template> -->
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            header-align="center"
+            align="center"
+            label="图书名称"
+          >
+          </el-table-column>
+
+        
+          <el-table-column
+            header-align="center"
+            align="center"
+            label="商品图"
+            width="120"
+          >
+            <template slot-scope="scope">
+              <img
+                v-if="scope.row.images != ''"
+                :src="scope.row.images"
+                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"
+                @click="handleCurrentChange(scope.row)"
+                size="mini"
+                >绑定</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          @size-change="sizeChangeHandle"
+          @current-change="currentChangeHandle"
+          :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 type="primary" @click="submit" :loading="loading" size="small">{{ loading ? "提交中 ..." : "确 定"
+              }}</el-button>
+          </div> -->
+        </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>
+    </el-drawer>
+    <!-- </el-dialog> -->
+  </div>
+</template>
+
+<script>
+// import chooseBook from './chooseBook.vue'
+// import AddOrUpdate from './shopproduct-add-or-update'
+export default {
+  props: ["currentType", "currentId"],
+  data() {
+    return {
+      timer: null,
+      drawer: false,
+      loading: false,
+      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
+      multipleSelection: [], // 当前页选中的数据
+      idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
+      dataForm: {
+        bookName: ""
+      },
+      currentRow: null,
+      bookMarketId: null,
+      dataList: [],
+      publishStatus: false,
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      chooseBookVisible: false,
+      bookIds: [],
+      goodsTypeList: []
+    };
+  },
+  components: {
+    // AddOrUpdate,
+    // chooseBook
+  },
+  activated() {
+    this.getDataList();
+  },
+  methods: {
+    handleReset() {
+      this.dataForm = {};
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    submit() {
+      var ids = this.multipleSelection.map(e => e.id).toString(",");
+      this.$emit("submit", ids);
+      console.log(
+        "🚀 ~ submit ~ this.multipleSelection:",
+        this.multipleSelection
+      );
+    },
+
+    // 获取商品类型
+    getGoodsTypeList() {
+      this.$http({
+        url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
+        method: "get"
+      }).then(({ data }) => {
+        // console.log(data.dataList)
+        this.goodsTypeList = data.dataList;
+      });
+    },
+    handleClose(done) {
+      done();
+      // this.$confirm("确认关闭？")
+      //   .then((_) => {
+      //     done();
+      //   })
+      //   .catch((_) => {});
+    },
+    async open() {
+      this.drawer = true;
+      this.dataForm = {};
+      this.pageIndex = 1;
+      // await this.getGoodsTypeList();
+      await this.getDataList();
+    },
+    close() {
+      this.drawer = false;
+    },
+    getRowKeys(row) {
+      return row.productId;
+    },
+
+    handleCurrentChange(val) {
+      console.log("🚀 ~ handleSelectionChange ~ val:", val);
+
+      this.$emit("submit", val.id);
+
+      // table组件选中事件,记得加上@selection-change="handleSelectionChange"
+      // this.multipleSelection = val;
+      // this.changePageCoreRecordData();
+    },
+
+    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() {
+      var form = {
+        ...this.dataForm,
+        current: this.pageIndex,
+        limit: this.pageSize,
+        "bookName":this.dataForm.bookName?this.dataForm.bookName:"",
+
+      };
+     
+      form.lableId = this.currentId;
+      console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
+      // } else if (this.currentType == "bookMarketId") {
+      //   form.bookMarketId = this.currentId;
+      //   console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
+      // }
+      this.dataListLoading = true;
+      this.clear();
+
+      await this.$http({
+        url: this.$http.adornUrl(
+          `/master/bookAbroad/getBookListCanToLable`
+        ),
+        method: "post",
+        data: this.$http.adornData(form)
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.records;
+          this.totalPage = data.page.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    clear() {
+      // this.$refs.table.clearSelection();
+      this.multipleSelection = [];
+    },
+
+    // 每页数
+    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>
+.shop_drawer_box {
+  padding: 20px !important;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+
+.addFormBox {
+  width: 100%;
+
+  // overflow: hidden;
+  .form_item {
+    width: 33%;
+    float: left;
+  }
+}
+
+::v-deep.el-drawer__header {
+  margin-bottom: 10px !important;
+}
+</style>
diff --git a/src/views/modules/hwReadManage/components/sociology-add-or-update.vue b/src/views/modules/hwReadManage/components/sociology-add-or-update.vue
new file mode 100644
index 0000000..a2c847f
--- /dev/null
+++ b/src/views/modules/hwReadManage/components/sociology-add-or-update.vue
@@ -0,0 +1,359 @@
+<template>
+  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"
+    @close="handlereset">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
+      <el-form-item label="加密类型" prop="type">
+        <el-select v-model="dataForm.type" filterable
+              placeholder="请选择类型">
+          <el-option v-for="item in typeList" :key="item.dictType" :label="item.dictValue" :value="item.dictType">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="视频" prop="video">
+        <el-input v-model="dataForm.video" placeholder="视频"></el-input>
+        <!-- <el-upload
+          :limit="1"
+          :on-preview="handlePictureCardPreview"
+          class="el-uploadfeng"
+          ref="files"
+          action="#"
+          :file-list="fileList"
+          :on-change="changeData"
+          accept=".mp3,.mp4,.gif,.mpeg,.mpg"
+          :http-request="handleRequest"
+          :before-remove="handleBeforeRemove"
+          :on-remove="handleRemove"
+        >
+          <i
+            class="el-icon-plus"
+            v-if="fileList.length == 0 && !isUpload"
+          ></i>
+        </el-upload> -->
+        <div class="newpro">
+          <el-progress
+            v-if="isUpload"
+            :stroke-width="10"
+            :percentage="progressPercent"
+            style="width: 100%"
+          ></el-progress>
+        </div>
+        <!-- <el-upload :action="baseUrl + '/oss/fileoss'" list-type="picture-card" :on-preview="handlePictureCardPreview"
+          :file-list="fileList" :on-success="handlePicSuccess" :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
+          <img width="100%" :src="dataForm.video" alt="">
+        </el-dialog> -->
+      </el-form-item>
+      <!-- <el-form-item label="内容" prop="content">
+        <el-input v-model="dataForm.content" placeholder="内容"></el-input>
+      </el-form-item> -->
+      <el-form-item label="排序" prop="sort">
+        <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
+      </el-form-item>
+
+     
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handlereset">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+
+
+<script>
+  import global from '../../../common/common.vue' //引入共用组间
+  import axios from "axios";
+  export default {
+    data() {
+      return {
+        baseUrl: global.baseUrl,
+        progressPercent: 0,
+        curPercentage: 0,
+        isUpload: false,
+        uploadTimer: null,
+        visible: false,
+        typeList: [ //类型0普通1加密
+            
+          {
+            dictType: 0,
+            dictValue: "普通"
+          },
+          {
+            dictType: 1,
+            dictValue: "加密"
+          }
+        ],
+        props: {
+          dictType: '',
+          dictValue: ''
+        },
+        gushuList:[],
+        authorList: [],
+        restaurants: [],
+        author: '',
+        publisherList: [],
+        fileList: [],
+        fileListNovel: [],
+        dialogImageUrl: '',
+        dialogVisible: false,
+        dataForm: {
+          "pid": null,
+          "id": null,
+          "isLast": 0,
+          "title": "",
+          "sort": 1,
+        },
+        splitsTypeList: [],
+        dataRule: {
+          video: [
+            { required: true, message: '请填写本项', trigger: 'blur' }
+          ],
+        }
+      }
+    },
+    created() {
+    },
+    mounted() {
+    },
+    watch: {
+      isUpload: {
+        handler(val, oldVal) {
+          if (this.isUpload) {
+            this.uploadTimer = setInterval(async () => {
+              //需要定时执行的代码
+              this.progressPercent = await this.getProgress(this.currentFile);
+            }, 1000);
+          } else {
+            //this.uploadTimer = null;
+            clearInterval(this.uploadTimer);
+            this.currentFile = {};
+          }
+          // this.getGoodsTypeList()
+        },
+        deep: true,
+      },
+    },
+    methods: {
+      init(row, chapter_id) {
+        console.log('row2', row)
+        this.dataForm = row || {}
+        this.dataForm.chapterId = chapter_id || ''
+        this.visible = true
+        if (this.dataForm.video && this.dataForm.video != "") {
+          var img = {
+            name: this.dataForm.video,
+            url: this.dataForm.video
+          }
+          var attr = []
+          attr.push(img)
+          this.fileList = attr
+        }else{
+          this.fileList = []
+        }
+      
+      },
+      // 表单提交
+      dataFormSubmit() {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.$http({
+              url: this.$http.adornUrl(`${!this.dataForm.id ? '/master/courseSociology/addCourseSociology' : '/master/courseSociology/editCourseSociology'}`),
+              method: 'post',
+              data: this.$http.adornData({
+                "pid": this.dataForm.pid || undefined,
+                "id": this.dataForm.id || undefined,
+                'isLast': this.dataForm.isLast,
+                'title': this.dataForm.title,
+                "sort": this.dataForm.sort,
+              })
+            }).then(({
+              data
+            }) => {
+              if (data && data.code === 0) {
+                this.$message({
+                  message: '操作成功',
+                  type: 'success',
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false
+                    this.$emit('refreshDataList')
+                  }
+                })
+              } else {
+                this.$message.error(data.msg)
+              }
+            })
+          }
+        })
+      },
+      async getProgress(file) {
+        var that = this;
+
+        console.log("🚀 ~ handleRequest ~ data222:", file.uid);
+        var progress = 0;
+        // const config = {
+        //   onUploadProgress: (progressEvent) => {
+        //     // progressEvent.loaded:已上传文件大小
+        //     // progressEvent.total:被上传文件的总大小
+        //     this.progressPercent = Number(
+        //       ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
+        //     );
+        //   },
+        // };
+        await axios
+          .get(this.$http.adornUrl(`/oss/fileoss/getSchedule?uid=${file.uid}`))
+          .then(async (res) => {
+            console.log("🚀 ~ this.$axios.post ~ res999:", res.data.percent);
+            progress = Number(res.data.percent);
+            if (progress == 100) {
+              this.isUpload = false;
+              clearInterval(this.uploadTimer);
+              that.uploadTimer = null;
+              await that.handlePicSuccess(res.data, file);
+              this.currentFile = {};
+              this.$forceUpdate();
+            }
+          });
+        console.log("🚀 ~ .then ~ progress888:", progress);
+        return progress;
+      },
+      handleRequest(option) {
+        var that = this;
+        const { onProgress, onSuccess, onError } = option;
+        this.progressPercent = 0;
+
+        this.currentFile = option.file;
+        let formdata = new FormData();
+        formdata.append("file", option.file);
+        formdata.append("fileName", option.file.fileNamee);
+        formdata.append("uid", option.file.uid);
+        console.log("🚀 ~ handleRequest ~ formdata:", formdata);
+
+        this.isUpload = true;
+
+        axios
+          .post(this.baseUrl + "/oss/fileoss/uploadFileSchedule", formdata)
+          .then((res) => {
+            console.log("🚀 ~ this.$axios.post ~ res111:", res);
+            if (res.data.code == 0) {
+              that.fileList[that.fileList.length - 1].status = "done";
+              // clearInterval(that.uploadTimer);
+              // that.isUpload = false;
+              // that.currentFile = {};
+              // await that.handlePicSuccess(res.data, data.file);
+              onSuccess();
+            } else {
+              that.fileList[that.fileList.length - 1].ststus = "error";
+              onError();
+            }
+          });
+        // var prom = new Promise((resolve, reject) => {});
+        //   prom.abort = () => {};
+        //   return prom;
+      },
+      handlePictureCardPreview(file) {
+        this.dataForm.video = file.url;
+        this.dialogVisible = true;
+      },
+      handlePicSuccess(res, file) {
+        console.log(res, file, "999999999");
+        if (res.msg == "success") {
+          this.dataForm.video = res.url;
+          this.fileList.push({
+            name: file.name,
+            url: res.url,
+          });
+          this.$message.success("上传成功");
+          this.isUpload = false;
+        } else {
+          this.$message.error("上传失败");
+        }
+      },
+      handlePicSuccess(res, file) {
+        if (res.msg == "success") {
+          this.dataForm.video = res.url;
+          this.$message.success("上传成功");
+        } else {
+          this.$message.error("上传失败");
+        }
+      },
+      changeData(file, fileList) {
+        // 数据小于0.1M的时候按KB显示
+        const size =
+          file.size / 1024 / 1024 > 0.1
+            ? `(${(file.size / 1024 / 1024).toFixed(1)}M)`
+            : `(${(file.size / 1024).toFixed(1)}KB)`;
+        file.name.indexOf("M") > -1 || file.name.indexOf("KB") > -1
+          ? file.name
+          : (file.name += size);
+      },
+      handleBeforeRemove(file, fileList) {
+        console.log(file, fileList, "file, fileListfile, fileListfile, fileList");
+        this.$refs.files.clearFiles();
+        clearInterval(this.uploadTimer);
+        this.isUpload = false;
+
+        this.currentFile = {};
+        this.$forceUpdate();
+      },
+      handleRemove(file, fileList) {
+        this.dataForm.video = "";
+        this.fileList = fileList;
+        //this.uploadTimer = null;
+        clearInterval(this.uploadTimer);
+        this.isUpload = false;
+
+        this.currentFile = {};
+        this.$forceUpdate();
+
+        // this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
+      },
+      handleDownload(file) {
+        console.log(file)
+      },
+      handlereset() {
+        this.fileList = [],
+          this.fileListNovel = [],
+          this.visible = false
+      },
+      // handlePreview(file) {
+      //   console.log(file);
+      // },
+      // handleExceed(files, fileList) {
+      //   this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      // },
+      // beforeRemove(file, fileList) {
+      //   return this.$confirm(`确定移除 ${ file.name }？`);
+      // },
+      // handleRemoveNovel(file) {
+      //   this.dataForm.novel = '';
+      // },
+      // handleNovelSuccess(file) {
+      //   this.dataForm.novel = file.url
+      // },
+      // querySearch(queryString, cb) {
+      //     var restaurants = this.restaurants;
+      //     var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
+      //     // 调用 callback 返回建议列表的数据
+      //     console.log(results)
+      //     cb(results);
+      // },
+      // createFilter(queryString) {
+      //     return (restaurant) => {
+      //       return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+      //     };
+      // },
+      // handleSelect(item) {
+      //   this.dataForm.authorId = item.id
+      //     console.log(item);
+      //   }
+    },
+    beforeDestroy() {
+      clearInterval(this.uploadTimer);
+    },
+
+  }
+</script>
diff --git a/src/views/modules/hwReadManage/components/tags.vue b/src/views/modules/hwReadManage/components/tags.vue
new file mode 100644
index 0000000..48b1d8f
--- /dev/null
+++ b/src/views/modules/hwReadManage/components/tags.vue
@@ -0,0 +1,931 @@
+<template>
+  <div class="tree_box">
+    <div style="overflow: hidden" v-if="source == 'tags'">
+      <p class="info_bg" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
+      
+        当前标签：<span style="color: #17b3a3; font-weight: 600">{{
+      currentNode ? currentNode.data.title : ""
+    }}</span>
+      </p>
+      <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
+        v-model="checkAll"
+        @change="handleCheckAllChange"
+        style="float: left"
+        >全选</el-checkbox
+      >
+    </p> -->
+    <slot name="center" v-if="source == 'shop'"></slot>
+
+    <!-- <slot v-if="source=='shop'" name="title">
+
+    </slot> -->
+
+    <!-- show-checkbox -->
+    <!-- :allow-drop="allowDrop" -->
+    <div class="custom-tree-container">
+      <el-tree :highlight-current="true" class="filter-tree" 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 class="custom-tree-node" slot-scope="{ node, data }" @click="
+      source == 'tags'
+        ? handleClickNodes(node, data, 'edit')
+        : ''
+      "  :class="`${currentNode&&currentNode.data.id==data.id?'isSelect':''}`" style=" padding-left: 5px;
+ box-sizing: border-box;">
+          <!-- @change="(e) => selectShop(data, e)" -->
+          <span style="display: flex; align-items: center" ><el-checkbox @change=" selectShop(data)"
+              :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 type="text" size="mini" @click.stop="handleClickNodes(node, data, 'addChildren')"
+              v-if="data.isLast != 1">
+              添加下级
+            </el-button>
+            <!-- <el-button
+                  type="text"
+                  size="mini"
+                  @click.stop="handleClickNodes(node, data, 'edit')"
+                >
+                  修改
+                </el-button> -->
+
+            <!-- v-if="node.childNodes.length == 0" -->
+            <el-button type="text" size="mini" @click.stop="remove(data)" style="color: rgb(235 92 92);">
+              删除
+            </el-button>
+          </span>
+        </span>
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+// import dialogComponent from './seckillprodrelation'
+import debounce from "lodash/debounce"; //导入lodash中的debounce
+export default {
+  props: ["dataList", "urlList", "source", "productId", 'sourceType','type'],
+  data() {
+    return {
+      currentNode: null,
+      checkAll: false,
+      treeDataList: [],
+      selectArr: [],
+      defaultProps: {
+        children: "children",
+        label: "title",
+      },
+    };
+  },
+  components: {},
+  watch: {
+    dataList(val) {
+      this.treeDataList = val;
+    },
+    currentNode: {
+      handler(newVal, oldVal) {
+        // this.$emit('changeCurrentNode',this.currentNode)
+      },
+    
+    deep: true
+    },
+   
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  activated() {
+    console.log("🚀 ~ activated ~ this.currentNode:", this.currentNode, "9999");
+    if (this.source == "tags") {
+      if (this.currentNode && this.currentNode.data.id) {
+        this.setCurrentNodeShow(this.currentNode.data.id);
+        this.handleClickNodes(this.currentNode, this.currentNode.data, "edit");
+      }
+    }
+    this.selectArr = [];
+    this.checkAll = false;
+
+    //   this.getDataList();
+  },
+
+  methods: {
+    async getAssociatedGoodsList(urlList, idType) {
+      console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
+      // :currentId="addForm.id"
+      // currentType="bookLabelId"
+      var form = {};
+      this.dataListLoading = true;
+      await this.$http({
+        url: this.$http.adornUrl(`${urlList}`),
+        method: "post",
+        data: this.$http.adornData({
+          current: 1,
+          limit: 99999999,
+          // productName: "",
+          productId: this.productId,
+          ...form,
+          // bookLabelId: bookLabelId,
+        }),
+      }).then(async ({ data }) => {
+        if (data && data.code === 0) {
+          if (idType == "bookLabelId") {
+            this.selectArr = data.result.records.map((e) => {
+              return e.bookLabelId;
+            });
+          } else if (idType == "bookMarketId") {
+            this.selectArr = data.result.records.map((e) => {
+              return e.bookMarketId;
+            });
+          }
+
+          console.log(
+            "🚀 ~ getAssociatedGoodsList ~ this.selectArr:",
+            this.selectArr
+          );
+          this.dataListLoading = false;
+        } else {
+          this.dataListLoading = false;
+        }
+      });
+    },
+    collectId(arr, ids = []) {
+      arr.forEach(({ id, children, isLast }) => {
+        if (id && isLast == 1) {
+          ids.push(id);
+        }
+        if (children) {
+          this.collectId(children, ids);
+        }
+      });
+      return ids;
+    },
+    handleCheckAllChange(status) {
+      this.selectArr = [];
+      if (status) {
+        this.selectArr = this.collectId(this.treeDataList);
+        console.log("🚀 ~ handleCheckAllChange ~ data111:", this.selectArr);
+        // this.treeDataList.forEach((e) => {
+        //   if (e.isLast == 1) {
+        //     this.selectArr.push(e.id);
+        //   }
+        // });
+      } else {
+        this.selectArr = [];
+      }
+      this.$forceUpdate();
+    },
+    selectShop: debounce(async function (v, status) {
+      console.log("🚀 ~ selectShop ~ status:", status);
+
+      // if (this.selectArr.includes(v.id)) {
+      //   // this.selectArr = this.selectArr.filter(function (item) {
+      //   //   return item !== v.id;
+      //   // });
+      // } else {
+      //   // this.selectArr.push(v.id);
+      // }
+      console.log("🚀 ~ selectShop ~ v:", v);
+
+      console.log("🚀 ~ selectShop ~ this.selectShopArr999:", this.selectArr);
+
+      if (this.selectArr.includes(v.id)) {
+        this.$emit("delete", v.id, this.sourceType);
+      } else {
+        this.$emit("submit", v.id, this.sourceType);
+      }
+      this.$forceUpdate();
+    }, 200),
+    // handleCheckAllChange(status) {
+    //   if (status) {
+    //     this.selectArr = this.treeDataList.map((e) => e.id);
+    //   } else {
+    //     this.selectArr = [];
+    //   }
+    //   this.$forceUpdate();
+    // },
+    async setCurrentNodeShow(id) {
+      console.log("🚀 ~ setCurrentNodeShow ~ id222:", id, this.currentNode)
+
+      var newNodeData = {}
+      if (id) {
+        newNodeData = await this.$refs.tree.getNode(id);
+      } else {
+        newNodeData = {
+          data: {}
+        }
+      }
+ this.currentNode = newNodeData;
+      this.$forceUpdate();
+      this.$nextTick(() => {
+        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);
+      //注掉的是同级拖拽
+      if (draggingNode.level === dropNode.level) {
+        return type === "prev" || type === "next";
+      } else {
+        // 不同级进行处理
+        return false;
+      }
+    },
+    async correlationShop(bookLabelId) {
+      var status;
+      var productId = this.$refs.commonShop.multipleSelection.map(
+        (e) => e.productId
+      );
+      console.log("🚀 ~ correlationShop ~ productId:", productId);
+      await this.$http({
+        url: this.$http.adornUrl(`/book/labelAndMarket/saveToLabel`),
+        method: "post",
+        data: this.$http.adornData({
+          productId: productId.toString(","),
+          bookLabelId: bookLabelId,
+        }),
+      }).then(async ({ data }) => {
+        if (data && data.code === 0) {
+          status = true;
+        } else {
+          this.$message.error(data.msg);
+          status = false;
+        }
+      });
+      return status;
+    },
+    //新增修改
+    dataFormSubmit: debounce(async function (formName) {
+      //    return false
+      if (this.addForm.title == "") {
+        this.$message.error("请输入标签名称");
+        return false;
+      }
+      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({
+              type: type,
+              ...this.addForm,
+            }),
+          }).then(async ({ data }) => {
+            if (data && data.code === 0) {
+              var status = await this.correlationShop(data.result.id);
+              if (status) {
+                await this.getDataList();
+                var newNodeData = await this.$refs.tree.getNode(data.result.id);
+                this.$nextTick(() => {
+                  this.$refs.tree.setCurrentKey(data.result.id);
+                });
+
+                await this.handleClickNodes(
+                  newNodeData,
+                  newNodeData.data,
+                  "edit"
+                );
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false;
+
+                    this.$refs.tree.setCheckedKeys([data.result.id]);
+                    // console.log(this.$refs.tree.getCheckedKeys([this.addForm.id]),'88888');
+                    //   this.$refs["addForm"].resetFields();
+                    //  this.addForm={}
+
+                    // this.$emit("refreshDataList");
+                  },
+                });
+              }
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    }, 200),
+    setCheckedKeys() {
+      this.$refs.tree.setCheckedKeys([0]);
+    },
+    handlereset() {
+      this.currentNode = null;
+      this.isFresh = false;
+      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") {
+        await this.selectShop(data);
+      } else if (this.source == "tags") {
+        switch (type) {
+          case "add":
+            form = { ...data };
+            break;
+          case "edit":
+            form = { ...node.data };
+            break;
+          case "addChildren":
+            form = {
+              children: [],
+              delFlag: 0,
+              isLast: 0,
+              pid: data.id,
+              sort: 0,
+              title: "",
+            };
+            break;
+        }
+        this.addForm = { ...form };
+
+        this.$nextTick(() => {
+          this.$emit(
+            "getCommonShopDataList",
+            type,
+            type == "edit" ? form.id : null,
+            this.addForm
+          );
+          // this.$refs.commonShop.clear();
+          // this.$refs.commonShop.bookMarketId = null;
+          // this.$refs.commonShop.getDataList();
+        });
+      }
+    },
+    addOrUpdateHandle() {
+
+      var addform = {
+        children: [],
+        delFlag: 0,
+        isLast: 0,
+        pid: 0,
+        sort: 0,
+        title: "",
+      };
+      this.handleClickNodes({ data: addform }, addform, "add");
+      // if (!this.currentNode) {
+      //   this.$message.error("请先选择分类");
+      //   return;
+      // }
+    },
+    async remove(data) {
+      var that = this;
+      var ids = { productId: data.productId };
+      this.$confirm(`是否删除标签【${data.title}】？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+
+          that.$http({
+            url: that.$http.adornUrl(`${that.urlList.delete}`),
+            method: "post",
+            data: this.$http.adornData({
+              "id": data.id
+            }),
+          }).then(async ({ data }) => {
+            if (data && data.code === 0) {
+              that.$message({
+              type: "success",
+              message: "删除成功!",
+            });
+          } else {
+            this.$message.error(data.msg);
+            return false
+          
+          }
+           
+            that.currentNode = null;
+            that.isFresh = false;
+            that.addForm = {};
+            that.$nextTick(() => {
+              that.isFresh = true;
+            });
+            await that.addOrUpdateHandle();
+            // this.expandedkey = [node.parent.data.catId]
+          });
+        })
+        .catch(() => { });
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.title.indexOf(value) !== -1;
+    },
+
+    // renderContent(h, { node, data, store }) {
+    //   return;
+    //   `<span
+    //       style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;"
+    //       on-mouseenter={() => this.mouseenteract(data)}
+    //       on-mouseleave={() => this.mouseleaveact(data)}
+    //     >
+    //       <span>
+    //         <span>{node.label}</span>
+    //       </span>
+    //       {this.isact == data ? (
+    //         <span>
+    //           {this.isact.typeName == "模板组" ? (
+    //             <el-button
+    //               class="m-r-10"
+    //               type="text"
+    //               icon="el-icon-edit"
+    //               on-click={() => this.handleUpdateGroup(node, data)}
+    //             ></el-button>
+    //           ) : (
+    //             <span></span>
+    //           )}
+    //           <el-button
+    //             type="text"
+    //             icon="el-icon-delete"
+    //             on-click={(e) => this.handleDelete(node, data, e)}
+    //           ></el-button>
+    //         </span>
+    //       ) : (
+    //         <span></span>
+    //       )}
+    //     </span>`;
+    // },
+    updateRenderContent(h, { node, data, store }) {
+      return `
+          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
+            <span>
+              {this.isact == data ? (
+                <input
+                  type="text"
+                  onChange={this.handleChangeTitle.bind(this)}
+                  value={node.label}
+                />
+              ) : (
+                <span>{node.label}</span>
+              )}
+            </span>
+            {this.isact == data ? (
+              <span>
+                {this.isact.typeName == "模板组" ? (
+                  <span>
+                    <el-button
+                      class="m-r-10"
+                      type="text"
+                      icon="el-icon-check"
+                      on-click={() => this.updateGroup(node, data)}
+                    ></el-button>
+                    <el-button
+                      class="m-r-10"
+                      type="text"
+                      icon="el-icon-close"
+                      on-click={(e) => this.cancelUpdate(node, data, e)}
+                    ></el-button>
+                  </span>
+                ) : (
+                  <span></span>
+                )}
+              </span>
+            ) : (
+              <span></span>
+            )}
+          </span>`;
+    },
+    //获取鼠标进入节点的数据
+    mouseenteract(da) {
+      this.isact = da;
+    },
+    mouseleaveact(da) {
+      this.isact = "";
+    },
+    handleNodeClick(pdata) {
+      this.curNode = pdata;
+      document
+        .getElementsByClassName("el-tree-node__content")[0]
+        .setAttribute("class", "el-tree-node__content");
+    },
+    handleDelete(node, data, e) {
+      e.stopPropagation();
+      //存在则添加到子级
+      const parent = node.parent;
+      const children = parent.data.nodes || parent.data;
+      //若parent.data是对象，操作的是子级；如果是数组，操作的是最外层
+      if (Array.isArray(parent.data)) {
+        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);
+        children.splice(childIndex, 1);
+      }
+      this.curNode = undefined;
+    },
+    //新增组
+    handleAddGroup() {
+      /**
+         *  如果模版深度最多两层，取消该部分注释
+         * //最多只有两层组 不可能添加在dept2的组上 curNode存在 并且  深度超过1
+           if (this.curNode != undefined && this.curNode.depth != 1) { 
+           this.$message.warning("不能添加超过两层");  
+           return; 
+         }
+         */
+
+      //如果isUpdateGroup 已经是true了 说明重复点击了
+      if (this.isUpdateGroup) {
+        return;
+      }
+
+      let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+        (
+          c ^
+          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+        ).toString(16)
+      );
+      let newChild = {
+        parentId: "", //如果有这个id 是插入第二层 否则是第一层 可有可无
+        text: "", //必须有 this.templateContent.tempName
+        nodes: [],
+        id: id,
+        typeName: "模板组",
+        temporaryData: "1", //用来区分临时数据
+      };
+      /* 如果模版深度最多两层，以下条件改成该部分注释
+          this.curNode && this.curNode.depth == 1 
+        */
+      this.indexRecord = [];
+      if (this.curNode) {
+        if (!this.curNode.nodes) {
+          this.$message.warning("模板不可添加");
+          return;
+        }
+        newChild.parentId = this.curNode.id;
+        /* 如果模版深度最多两层，以下条件改成该部分注释
+            const index = this.treeDataList.findIndex(
+              item => item.id == this.curNode.id
+            );
+            this.treeDataList[index].nodes.push(newChild);
+          */
+        //找到tree中的index轨迹
+        this.getTemplateTreeNode(this.curNode.id, this.treeDataList, 0);
+        //按照index轨迹插入节点
+        this.insertNode(
+          newChild,
+          this.treeDataList,
+          this.indexRecord,
+          this.indexRecord.length
+        );
+        this.isBreak = false;
+      } else if (this.curNode == undefined) {
+        //没有选中的时候 添加到最外层
+        newChild.depth = 1;
+        this.treeDataList.push(newChild);
+      }
+      //调用出updateRender的input
+      this.isact = newChild;
+      this.isUpdateGroup = true;
+    },
+    //递归遍历获得选中node
+    getTemplateTreeNode(target, list, dept) {
+      //空数组直接返回
+      if (list.length == 0) return;
+      let dataLen = list.length;
+      for (let i = 0; i < dataLen; i++) {
+        //如果不匹配
+        if (target != list[i].id) {
+          //存在nodes 遍历nodes里的节点
+          if (list[i].nodes) {
+            this.indexRecord[dept] = i;
+            let recordDept = dept + 1;
+            this.getTemplateTreeNode(target, list[i].nodes, recordDept);
+          } else {
+            //不存在nodes 继续遍历
+            continue;
+          }
+        } else {
+          //匹配，则修改下标数组
+          this.indexRecord[dept] = i;
+          this.isBreak = true;
+          break;
+        }
+        //删除不匹配的轨迹 如果已经break了说明已经找到正确的节点，就不用再删了
+        if (!this.isBreak) {
+          this.indexRecord.pop();
+        }
+      }
+    },
+    //插入节点
+    insertNode(insertChild, tree, indexArr, len) {
+      let index = indexArr.length - len;
+      if (len == 0) {
+        tree.push(insertChild);
+      } else {
+        this.insertNode(
+          insertChild,
+          tree[indexArr[index]].nodes,
+          indexArr,
+          len - 1
+        );
+      }
+    },
+    //修改组
+    handleUpdateGroup() {
+      this.isUpdateGroup = true;
+    },
+    //修改组名时获取title
+    handleChangeTitle(e) {
+      let value = e.target.value;
+      this.isactTitle = value;
+    },
+    updateGroup(node, data) {
+      //先handleChangeTitle获取title 再调用
+      setTimeout(() => {
+        if (this.isactTitle.trim() == "") {
+          this.$message.warning("名称不能为空");
+          return;
+        }
+        //修改数据组
+        this.isUpdateGroup = false;
+        const parent = node.parent;
+        const children = parent.data.nodes || parent.data;
+        const index = children.findIndex((d) => d.id === data.id);
+        let temp = data;
+        temp.text = this.isactTitle;
+        children.splice(index, 1, temp);
+      }, 500);
+    },
+    cancelUpdate(node, data, e) {
+      this.$message.info("已取消");
+      this.isUpdateGroup = false;
+      //如果是插入操作 需要移除数据
+      if (this.isact.temporaryData) {
+        this.handleDelete(node, data, e);
+      }
+    },
+    // 获取数据列表
+
+    async getDataList() {
+      this.dataListLoading = true;
+      await this.$http({
+        url: this.$http.adornUrl("/book/labelAndMarket/labelTree"),
+        method: "get",
+        // params: this.$http.adornParams({
+        //   'page': this.pageIndex,
+        //   'limit': this.pageSize,
+        //   'key': this.dataForm.key
+        // })
+      }).then(({ data }) => {
+        console.log("🚀 ~ getDataList ~ data:", data);
+        if (data && data.code === 0) {
+          this.treeDataList = data.result;
+          // this.totalPage = data.page.totalCount
+        } else {
+          this.treeDataList = [];
+          // this.totalPage = 0
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val;
+    },
+    // // 新增 / 修改
+    // addOrUpdateHandle(row) {
+    //   this.addOrUpdateVisible = true;
+    //   this.$nextTick(() => {
+    //     this.$refs.addOrUpdate.init(row);
+    //   });
+    // },
+  },
+};
+</script>
+<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%;
+  float: left;
+  border: 1px solid #bababa;
+  border-radius: 10px;
+  padding: 15px;
+  box-sizing: border-box;
+  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;
+      height: 20px;
+      margin-right: 8px;
+      background: #17b3a3;
+    }
+  }
+}
+
+.border_box {
+  width: 100%;
+  float: right;
+  background: #fffefe;
+  border: 1px solid #bababa;
+  border-radius: 10px;
+  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 {
+  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;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+// .el-card {
+//   background: none !important;
+// }
+p {
+  margin: 0;
+  margin-bottom: 10px;
+}
+
+.submitButton {
+  float: right;
+  margin-top: 20px;
+}
+
+// .el-tree-node__content .el-button {
+//   // width: 120px !important;
+
+//   display: block !important;
+// }
+// ::v-deep .el-tree .el-tree-node__content span:nth-child(2) {
+//   width: 120px;
+//   display: flex !important;
+//   align-items: center !important;
+//   justify-content: space-between !important;
+// }
+// /deep/.el-table__row--level-1 {
+//   display: block !important;
+// }
+.addFormBox {
+  .form_item {
+    width: 49%;
+    float: left;
+  }
+}
+
+.custom-tree-container {
+  height: calc(100% - 60px);
+
+  .filter-tree {
+    height: 100%;
+  }
+}
+
+.info_bg {
+  background: #e0dede;
+  height: 28px;
+  line-height: 28px;
+  padding-left: 10px;
+  // padding: 8px 5px;
+  box-sizing: border-box;
+  // margin-top: -10px;
+  border-radius: 4px;
+  font-size: 14px;
+  width: calc(100% - 120px);
+  float: left;
+}
+
+/* 去掉点击时的蓝色背景 */
+.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>
\ No newline at end of file
diff --git a/src/views/modules/hwReadManage/operationsList.vue b/src/views/modules/hwReadManage/operationsList.vue
new file mode 100644
index 0000000..1129e26
--- /dev/null
+++ b/src/views/modules/hwReadManage/operationsList.vue
@@ -0,0 +1,1115 @@
+<template>
+  <div class="mod-config">
+    <commonTree
+      source="tags"
+      ref="commonTree"
+      :dataList="treeDataList"
+      @getCommonShopDataList="getCommonShopDataList"
+      @changeCurrentNode="changeCurrentNode"
+      :urlList="urlList"
+      :type="type"
+    ></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>
+        </div>
+
+        <div class="addFormBox">
+          <el-form :model="addForm" ref="addForm" label-width="80px">
+            <el-form-item label="标签名称" prop="title" class="form_item">
+              <el-input
+                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
+                placeholder="请输入标签排序"
+                style="width: 100%"
+                v-model="addForm.sort"
+                clearable
+                :min="0"
+                @keyup.native="UpNumber"
+                @keydown.native="UpNumber"
+              >
+              </el-input-number>
+            </el-form-item>
+            <el-form-item
+              style="width: auto;"
+              label="是否为最终级"
+              prop="isLast"
+              label-width="120px"
+              class="form_item"
+            >
+              <el-switch
+                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-item
+                style="width: auto;"
+                label="图标"
+                prop="isLast"
+                label-width="80px"
+                class="form_item"
+              >
+                <el-upload
+                  class="avatar-uploader"
+                  :action="baseUrl + '/oss/fileoss'"
+                  :show-file-list="false"
+                  :on-success="handlePicSuccess"
+                >
+                  <img v-if="fimages" :src="fimages" class="avatar" />
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+                <i
+                  class="el-icon-error delImgBtn"
+                  style="font-size: 24px;"
+                  @click="delImg()"
+                  v-if="fimages != ''"
+                ></i>
+              </el-form-item> -->
+            <div class="clear"></div>
+          </el-form>
+          <div class="clear"></div>
+        </div>
+      </div>
+      <div
+        style="width:100%;  border: 1px dashed #bababa;float: left;"
+        v-if="currentNode && currentNode.data.isLast == 1"
+      ></div>
+      <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
+              plain
+              type="primary"
+              style="margin-left: 20px"
+              @click="openTable('addForm')"
+              size="mini"
+              >新增</el-button
+            >
+          </div>
+        </div>
+        <commonShop
+          :currentId="addForm.id ? addForm.id : ''"
+          currentType="bookLabelId"
+          :dataList="associatedGoodsList"
+          :urlList="urlList"
+          :isEdit="isEdit"
+          ref="commonShop"
+          :style="`height: calc(100% - 50px); `"
+          @delete="dataFormDelete"
+          @edit="dataFormEdit"
+        ></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> -->
+            <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>
+      <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
+          :inline="true"
+          :model="dataForm"
+          @keyup.enter.native="getDataList()"
+        >
+       
+          
+        </el-form> -->
+    <commonShopTable
+      :type="type"
+      ref="commonShopTable"
+      :currentId="addForm.id"
+      currentType="bookLabelId"
+      @submit="handleSubmitShopTable"
+    ></commonShopTable>
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      @refreshDataList="getDataList"
+    ></add-or-update>
+    <el-dialog
+      :append-to-body="true"
+      :modal-append-to-body="false"
+      title="修改排序"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <div class="addFormBox selectTimeBox">
+        <el-form ref="addForm" :model="dataForm" label-width="80px">
+          <slot name="searchFormItem" :dataForm="dataForm"></slot>
+
+          <el-form-item
+            label="图书名称:"
+            class="form_item"
+            style="width: 100% !important"
+          >
+            <p class="input_item">
+              {{ dataForm.name }}
+            </p>
+            <!-- selectCourse -->
+            <!-- <el-input
+                  v-model="selectCourse.courseCatalogueTitle"
+                  readonly
+                ></el-input> -->
+          </el-form-item>
+          <el-form-item
+            label="排序:"
+            class="form_item"
+            style="width: 100% !important"
+          >
+            <el-input
+              v-model="dataForm.toSociologySort"
+              type="number"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="handleSubmitDataForm"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import global from "@/views/common/common.vue"; //引入共用组间
+// import AddOrUpdate from "./sociologyComponents/bookTagsForm.vue";
+import AddOrUpdate from "./components/sociology-add-or-update";
+import commonShop from "./components/shopproduct.vue";
+import commonShopTable from "./components/shopproductTable.vue";
+import commonTree from "./components/tags.vue";
+import debounce from "lodash/debounce"; //导入lodash中的debounce
+// import dialogComponent from './seckillprodrelation'
+export default {
+  data() {
+    return {
+      type: 1,
+      fimages: "",
+      baseUrl: global.baseUrl,
+      isEdit: false,
+      checkAll: false,
+      dialogVisible: false,
+      isIndeterminate: true,
+      urlList: {
+        treeList: "/master/bookAbroad/getLableTree",
+        editSort: "/master/bookAbroad/updateToLableSort",
+        delete: "/master/bookAbroad/delBookAbroadLable",
+        add: "/master/bookAbroad/insertBookAbroadLable",
+        edit: "/master/bookAbroad/updateBookAbroadLable",
+        getAssociatedGoodsList: "/master/bookAbroad/getAbroadBookListByLable",
+        deleteShop: "/master/bookAbroad/delBookAbroadToLable",
+        saveShop: "/master/bookAbroad/insertBookAbroadToLable"
+      },
+      addForm: {},
+      isFresh: false,
+      dataRule: {
+        name: [
+          {
+            required: true,
+            message: "标签名称不能为空"
+            // trigger: "change",
+          }
+        ]
+      },
+      currentNode: {},
+      treeDataList: [],
+      associatedGoodsList: [], //已关联商品列表
+
+      isact: "", //当前hover的节点
+      isactTitle: "", //记录修改节点名称
+      curNode: undefined, //当前选中节点
+      isUpdateGroup: false, //是否在修改模板组
+      filterText: "",
+      indexRecord: [], //记录节点轨迹
+      isBreak: false, //是否结束循环
+      defaultProps: {
+        children: "children",
+        label: "title"
+      },
+      dataForm: {},
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false
+    };
+  },
+  components: {
+    AddOrUpdate,
+    commonShop,
+    commonTree,
+    commonShopTable
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  activated() {
+    this.isEdit = false;
+    this.getDataList();
+  },
+  methods: {
+    delImg() {
+      this.fimages = "";
+      this.addForm.icon = "";
+    },
+    handlePicSuccess(res, file) {
+      this.fimages = res.url;
+      this.addForm.icon = res.url;
+      this.$message.success("上传成功");
+      //  console.log(res, "上传");
+    },
+    // 只可输入数字
+    UpNumber(e) {
+      e.target.value = e.target.value.replace(/[^\d]/g, "");
+    },
+    // dataFormEdit() {
+    //   this.checkAll = false;
+    //   this.isEdit = !this.isEdit;
+    // },
+    handleCheckAllChange(val) {
+      this.$nextTick(() => {
+        this.$refs.commonShop.handleCheckAllChange(val);
+      });
+    },
+    handleSubmitShopTable: debounce(async function(ids) {
+      await this.$http({
+        url: this.$http.adornUrl(`${this.urlList.saveShop}`),
+        method: "post",
+        data: this.$http.adornData({
+          bookId: ids,
+          lableId: this.addForm.id
+        })
+      }).then(async ({ data }) => {
+        if (data && data.code === 0) {
+          this.$message.success(data.msg);
+          if (this.$refs.commonShop) {
+            this.$refs.commonShop.getAssociatedGoodsList({
+              lableId: this.addForm.id
+            });
+          }
+          if (this.$refs.commonShopTable) {
+            this.$refs.commonShopTable.close();
+          }
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    }, 200),
+    handleSubmitDataForm: debounce(async function() {
+      var that = this;
+      this.$http
+        .request({
+          url: this.$http.adornUrl(`${this.urlList.editSort}`),
+          method: "POST",
+          data: {
+            toLableId: this.dataForm.id,
+            sort: Number(this.dataForm.sort)
+          },
+          header: {
+            //默认 无 说明：请求头
+            "Content-Type": "application/json"
+          }
+        })
+
+        .then(async ({ data }) => {
+          if (data && data.code === 0) {
+            this.$message.success(data.msg);
+
+            if (this.$refs.commonShop) {
+              this.$refs.commonShop.getAssociatedGoodsList({
+                courseId: this.addForm.id
+              });
+            }
+          } else {
+            this.$message.error(data.msg);
+          }
+          that.dialogVisible = false;
+        });
+
+      that.$forceUpdate();
+    }, 200),
+    openTable() {
+      this.isEdit = false;
+      this.$nextTick(() => {
+        this.$refs.commonShopTable.open(this.addForm.id);
+      });
+    },
+    handleChangeIsLast(e) {
+      console.log("🚀 ~ handleChangeIsLast ~ e:", e);
+      this.$nextTick(() => {
+        if (e == 1) {
+          if (this.$refs.commonShop) {
+            this.$refs.commonShop.getAssociatedGoodsList({
+              bookLabelId: this.addForm.id ? this.addForm.id : null
+            });
+          }
+        }
+      });
+    },
+
+    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 } };
+      console.log("this.currentNode at line 423:", this.currentNode);
+      this.addForm = form;
+      if (form.icon) {
+        this.fimages = form.icon;
+      } else {
+        this.fimages = "";
+      }
+
+      await this.getDataList();
+      // this.$refs.commonTree.setCurrentNodeShow();
+
+      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) {
+      //    return false
+      if (this.addForm.title == "" || !this.addForm.title) {
+        this.$message.error("请输入标签名称");
+        return false;
+      }
+      this.addForm.content = "";
+      await this.$refs[formName].validate(async valid => {
+        if (valid) {
+          await this.$http({
+            url: this.$http.adornUrl(
+              `${this.addForm.id ? this.urlList.edit : this.urlList.add}`
+            ),
+            method: "post",
+            data: this.$http.adornData({
+              ...this.addForm
+            })
+          }).then(async ({ data }) => {
+            if (data && data.code === 0) {
+              await this.getDataList();
+              this.$nextTick(async () => {
+                this.$refs.commonTree.setCurrentNodeShow(
+                  data.bookAbroadLable.id
+                );
+                this.addForm = data.bookAbroadLable;
+                if (data.bookAbroadLable.icon) {
+                  this.fimages = data.bookAbroadLable.icon;
+                }
+
+                this.currentNode = { data: { ...data.bookAbroadLable } };
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false;
+                  }
+                });
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    }, 200),
+    dataFormEdit(row) {
+      this.dataForm = { ...row };
+      this.dialogVisible = true;
+    },
+    //删除关联图书
+    dataFormDelete: debounce(async function(row, deleteType) {
+      console.log("row at line 292:", row);
+      this.$confirm(
+        `确定要删除${deleteType != "all" ? "该" : "所有"}关联图书吗?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      )
+        .then(async () => {
+          // var lableIds = row[0].bookLabelId
+          var bindId = row.id;
+
+          // //    return false
+          // var selectShopArr = this.$refs.commonShop.selectShopArr;
+          // console.log(selectShopArr, "1111");
+
+          // if (selectShopArr.length == 0) {
+          //   this.$message.error("请选择已关联的商品");
+          //   return false;
+          // }
+          this.$refs.commonShop.dataListLoading = true;
+          await this.$http({
+            url: this.$http.adornUrl(`${this.urlList.deleteShop}`),
+            method: "post",
+            data: this.$http.adornData({
+              ids: bindId
+            })
+          }).then(async ({ data }) => {
+            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
+                });
+              }
+            });
+          });
+        })
+        .catch(() => {});
+    }, 200),
+    setCheckedKeys() {
+      this.$refs.tree.setCheckedKeys([0]);
+    },
+    changeCurrentNode(val) {
+      this.changeCurrentNode = val;
+      this.$forceUpdate();
+    },
+    handlereset() {
+      this.currentNode = null;
+      this.isFresh = false;
+      this.isFresh = true;
+    },
+    handleClickNodes(node, data, type) {
+      console.log("type at line 552:", type);
+      this.isEdit = false;
+      this.addForm = {};
+      // console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
+      // console.log(node, data, "当前选中节点");
+      this.currentNode = node ? node : {};
+      this.isFresh = false;
+      this.isFresh = true;
+
+      var form = {};
+      switch (type) {
+        case "add":
+          form = { ...data };
+          break;
+        case "edit":
+          form = { ...node.data };
+          break;
+        case "addChildren":
+          form = {
+            children: [],
+            delFlag: 0,
+            isLast: 0,
+            pid: data.id,
+            sort: 0,
+            title: "",
+            icon: ""
+          };
+          break;
+      }
+      this.addForm = { ...form };
+      console.log("this.addForm at line 581:", this.addForm);
+      if (this.addForm.icon) {
+        this.fimages = this.addForm.icon;
+      }
+      this.$nextTick(() => {
+        this.$refs.commonShop.clear();
+        // this.$refs.commonShop.bookMarketId = null;
+        this.$refs.commonShop.getDataList(type == "edit" ? form.id : "");
+      });
+    },
+    addOrUpdateHandle() {
+      var addform = {
+        children: [],
+        delFlag: 0,
+        isLast: 0,
+        pid: 0,
+        sort: 0,
+        title: ""
+      };
+      this.handleClickNodes({ data: addform }, addform, "add");
+      // if (!this.currentNode) {
+      //   this.$message.error("请先选择分类");
+      //   return;
+      // }
+    },
+
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.title.indexOf(value) !== -1;
+    },
+
+    // renderContent(h, { node, data, store }) {
+    //   return;
+    //   `<span
+    //       style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;"
+    //       on-mouseenter={() => this.mouseenteract(data)}
+    //       on-mouseleave={() => this.mouseleaveact(data)}
+    //     >
+    //       <span>
+    //         <span>{node.label}</span>
+    //       </span>
+    //       {this.isact == data ? (
+    //         <span>
+    //           {this.isact.typeName == "模板组" ? (
+    //             <el-button
+    //               class="m-r-10"
+    //               type="text"
+    //               icon="el-icon-edit"
+    //               on-click={() => this.handleUpdateGroup(node, data)}
+    //             ></el-button>
+    //           ) : (
+    //             <span></span>
+    //           )}
+    //           <el-button
+    //             type="text"
+    //             icon="el-icon-delete"
+    //             on-click={(e) => this.handleDelete(node, data, e)}
+    //           ></el-button>
+    //         </span>
+    //       ) : (
+    //         <span></span>
+    //       )}
+    //     </span>`;
+    // },
+    updateRenderContent(h, { node, data, store }) {
+      return `
+            <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
+              <span>
+                {this.isact == data ? (
+                  <input
+                    type="text"
+                    onChange={this.handleChangeTitle.bind(this)}
+                    value={node.label}
+                  />
+                ) : (
+                  <span>{node.label}</span>
+                )}
+              </span>
+              {this.isact == data ? (
+                <span>
+                  {this.isact.typeName == "模板组" ? (
+                    <span>
+                      <el-button
+                        class="m-r-10"
+                        type="text"
+                        icon="el-icon-check"
+                        on-click={() => this.updateGroup(node, data)}
+                      ></el-button>
+                      <el-button
+                        class="m-r-10"
+                        type="text"
+                        icon="el-icon-close"
+                        on-click={(e) => this.cancelUpdate(node, data, e)}
+                      ></el-button>
+                    </span>
+                  ) : (
+                    <span></span>
+                  )}
+                </span>
+              ) : (
+                <span></span>
+              )}
+            </span>`;
+    },
+    handleClose() {
+      this.dataForm = {};
+      this.dialogVisible = false;
+    },
+    //获取鼠标进入节点的数据
+    mouseenteract(da) {
+      this.isact = da;
+    },
+    mouseleaveact(da) {
+      this.isact = "";
+    },
+    handleNodeClick(pdata) {
+      this.curNode = pdata;
+      document
+        .getElementsByClassName("el-tree-node__content")[0]
+        .setAttribute("class", "el-tree-node__content");
+    },
+    handleDelete(node, data, e) {
+      e.stopPropagation();
+      //存在则添加到子级
+      const parent = node.parent;
+      const children = parent.data.nodes || parent.data;
+      //若parent.data是对象，操作的是子级；如果是数组，操作的是最外层
+      if (Array.isArray(parent.data)) {
+        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);
+        children.splice(childIndex, 1);
+      }
+      this.curNode = undefined;
+    },
+    //新增组
+    handleAddGroup() {
+      /**
+           *  如果模版深度最多两层，取消该部分注释
+           * //最多只有两层组 不可能添加在dept2的组上 curNode存在 并且  深度超过1
+             if (this.curNode != undefined && this.curNode.depth != 1) { 
+             this.$message.warning("不能添加超过两层");  
+             return; 
+           }
+           */
+
+      //如果isUpdateGroup 已经是true了 说明重复点击了
+      if (this.isUpdateGroup) {
+        return;
+      }
+
+      let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+        (
+          c ^
+          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+        ).toString(16)
+      );
+      let newChild = {
+        parentId: "", //如果有这个id 是插入第二层 否则是第一层 可有可无
+        text: "", //必须有 this.templateContent.tempName
+        nodes: [],
+        id: id,
+        typeName: "模板组",
+        temporaryData: "1" //用来区分临时数据
+      };
+      /* 如果模版深度最多两层，以下条件改成该部分注释
+            this.curNode && this.curNode.depth == 1 
+          */
+      this.indexRecord = [];
+      if (this.curNode) {
+        if (!this.curNode.nodes) {
+          this.$message.warning("模板不可添加");
+          return;
+        }
+        newChild.parentId = this.curNode.id;
+        /* 如果模版深度最多两层，以下条件改成该部分注释
+              const index = this.treeDataList.findIndex(
+                item => item.id == this.curNode.id
+              );
+              this.treeDataList[index].nodes.push(newChild);
+            */
+        //找到tree中的index轨迹
+        this.getTemplateTreeNode(this.curNode.id, this.treeDataList, 0);
+        //按照index轨迹插入节点
+        this.insertNode(
+          newChild,
+          this.treeDataList,
+          this.indexRecord,
+          this.indexRecord.length
+        );
+        this.isBreak = false;
+      } else if (this.curNode == undefined) {
+        //没有选中的时候 添加到最外层
+        newChild.depth = 1;
+        this.treeDataList.push(newChild);
+      }
+      //调用出updateRender的input
+      this.isact = newChild;
+      this.isUpdateGroup = true;
+    },
+    //递归遍历获得选中node
+    getTemplateTreeNode(target, list, dept) {
+      //空数组直接返回
+      if (list.length == 0) return;
+      let dataLen = list.length;
+      for (let i = 0; i < dataLen; i++) {
+        //如果不匹配
+        if (target != list[i].id) {
+          //存在nodes 遍历nodes里的节点
+          if (list[i].nodes) {
+            this.indexRecord[dept] = i;
+            let recordDept = dept + 1;
+            this.getTemplateTreeNode(target, list[i].nodes, recordDept);
+          } else {
+            //不存在nodes 继续遍历
+            continue;
+          }
+        } else {
+          //匹配，则修改下标数组
+          this.indexRecord[dept] = i;
+          this.isBreak = true;
+          break;
+        }
+        //删除不匹配的轨迹 如果已经break了说明已经找到正确的节点，就不用再删了
+        if (!this.isBreak) {
+          this.indexRecord.pop();
+        }
+      }
+    },
+    //插入节点
+    insertNode(insertChild, tree, indexArr, len) {
+      let index = indexArr.length - len;
+      if (len == 0) {
+        tree.push(insertChild);
+      } else {
+        this.insertNode(
+          insertChild,
+          tree[indexArr[index]].nodes,
+          indexArr,
+          len - 1
+        );
+      }
+    },
+    //修改组
+    handleUpdateGroup() {
+      this.isUpdateGroup = true;
+    },
+    //修改组名时获取title
+    handleChangeTitle(e) {
+      let value = e.target.value;
+      this.isactTitle = value;
+    },
+    updateGroup(node, data) {
+      //先handleChangeTitle获取title 再调用
+      setTimeout(() => {
+        if (this.isactTitle.trim() == "") {
+          this.$message.warning("名称不能为空");
+          return;
+        }
+        //修改数据组
+        this.isUpdateGroup = false;
+        const parent = node.parent;
+        const children = parent.data.nodes || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        let temp = data;
+        temp.text = this.isactTitle;
+        children.splice(index, 1, temp);
+      }, 500);
+    },
+    cancelUpdate(node, data, e) {
+      this.$message.info("已取消");
+      this.isUpdateGroup = false;
+      //如果是插入操作 需要移除数据
+      if (this.isact.temporaryData) {
+        this.handleDelete(node, data, e);
+      }
+    },
+    // 获取数据列表
+
+    async getDataList() {
+      this.dataListLoading = true;
+      await this.$http({
+        url: this.$http.adornUrl(`${this.urlList.treeList}`),
+        method: "post",
+        data: this.$http.adornData({
+          type: this.type
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.treeDataList = data.labelsTree;
+        } else {
+          this.treeDataList = [];
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val;
+    }
+    // // 新增 / 修改
+    // addOrUpdateHandle(row) {
+    //   this.addOrUpdateVisible = true;
+    //   this.$nextTick(() => {
+    //     this.$refs.addOrUpdate.init(row);
+    //   });
+    // },
+  }
+};
+</script>
+<style lang="less" scoped>
+.tree_box {
+  width: 350px !important;
+  height: 100%;
+  float: left;
+  border: 1px solid #bababa;
+  border-radius: 10px;
+  padding: 15px;
+  box-sizing: border-box;
+  // background: #fafafa;
+}
+
+.border_box {
+  height: 120px;
+  // 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;
+
+    float: left;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    font-size: 16px;
+
+    // color: #17b3a3;
+    .line {
+      width: 4px;
+      height: 20px;
+      margin-right: 8px;
+      background: #17b3a3;
+    }
+  }
+}
+
+.border_box {
+  width: 100%;
+  float: right;
+  background: #fffefe;
+
+  border-radius: 10px;
+  padding: 15px 15px;
+  box-sizing: border-box;
+}
+
+.tree_content_box {
+  height: calc(100% - 120px) !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 {
+  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;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+// .el-card {
+//   background: none !important;
+// }
+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;
+
+//   display: block !important;
+// }
+// ::v-deep .el-tree .el-tree-node__content span:nth-child(2) {
+//   width: 120px;
+//   display: flex !important;
+//   align-items: center !important;
+//   justify-content: space-between !important;
+// }
+// /deep/.el-table__row--level-1 {
+//   display: block !important;
+// }
+
+.addFormBox {
+  // overflow: hidden;
+  // overflow: auto;
+  .form_item {
+    width: 33%;
+    margin-bottom: 0 !important;
+    float: left;
+  }
+}
+.clear {
+  clear: both;
+}
+
+.custom-tree-container {
+  height: calc(100% - 100px);
+
+  .filter-tree {
+    height: 100%;
+  }
+}
+
+.info_bg {
+  background: #e0dede;
+  height: 28px;
+  line-height: 28px;
+  padding-left: 10px;
+  // padding: 8px 5px;
+  box-sizing: border-box;
+  // margin-top: -10px;
+  border-radius: 4px;
+  font-size: 14px;
+  width: calc(100% - 120px);
+  float: left;
+}
+.delImgBtn {
+  cursor: pointer;
+  position: absolute;
+  display: inline-block;
+  top: -10px;
+  right: -10px;
+}
+.el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: rgb(162, 225, 218);
+}
+.avatar-uploader-icon {
+  border: 1px dashed #d9d9d9;
+  border-color: rgb(162, 225, 218);
+  font-size: 28px;
+  color: #8c939d;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+}
+.avatar {
+  width: 50px;
+  border: 1px dashed rgb(162, 225, 218);
+  background-color: #b0b0b09e;
+  // border-color: #409eff;
+  height: 50px;
+  display: block;
+}
+</style>
diff --git a/src/views/modules/hwReadManage/readLabel.vue b/src/views/modules/hwReadManage/readLabel.vue
new file mode 100644
index 0000000..a72f258
--- /dev/null
+++ b/src/views/modules/hwReadManage/readLabel.vue
@@ -0,0 +1,1127 @@
+<template>
+  <div class="mod-config">
+    <commonTree
+      source="tags"
+      ref="commonTree"
+      :dataList="treeDataList"
+      @getCommonShopDataList="getCommonShopDataList"
+      @changeCurrentNode="changeCurrentNode"
+      :urlList="urlList"
+      :type="type"
+    ></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>
+        </div>
+
+        <div class="addFormBox">
+          <el-form :model="addForm" ref="addForm" label-width="80px">
+            <el-form-item label="标签名称" prop="title" class="form_item">
+              <el-input
+                placeholder="请输入标签名称"
+                style="width: 100%"
+                v-model="addForm.title"
+                clearable
+              >
+              </el-input>
+            </el-form-item>
+            <el-form-item label="英文名称" prop="title" class="form_item">
+              <el-input
+                placeholder="请输入英文标签名称"
+                style="width: 100%"
+                v-model="addForm.etitle"
+                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"
+                clearable
+                :min="0"
+                @keyup.native="UpNumber"
+                @keydown.native="UpNumber"
+              >
+              </el-input-number>
+            </el-form-item>
+            <el-form-item
+              style="width: auto;"
+              label="是否为最终级"
+              prop="isLast"
+              label-width="120px"
+              class="form_item"
+            >
+              <el-switch
+                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-item
+              style="width: auto;"
+              label="图标"
+              prop="isLast"
+              label-width="80px"
+              class="form_item"
+            >
+              <el-upload
+                class="avatar-uploader"
+                :action="baseUrl + '/oss/fileoss'"
+                :show-file-list="false"
+                :on-success="handlePicSuccess"
+              >
+                <img v-if="fimages" :src="fimages" class="avatar" />
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+              <i
+                class="el-icon-error delImgBtn"
+                style="font-size: 24px;"
+                @click="delImg()"
+                v-if="fimages != ''"
+              ></i>
+            </el-form-item> -->
+            <div class="clear"></div>
+          </el-form>
+          <div class="clear"></div>
+        </div>
+      </div>
+      <div
+        style="width:100%;  border: 1px dashed #bababa;float: left;"
+        v-if="currentNode && currentNode.data.isLast == 1"
+      ></div>
+      <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
+              plain
+              type="primary"
+              style="margin-left: 20px"
+              @click="openTable('addForm')"
+              size="mini"
+              >新增</el-button
+            >
+
+          </div>
+        </div>
+        <commonShop
+          :currentId="addForm.id ? addForm.id : ''"
+          currentType="bookLabelId"
+          :dataList="associatedGoodsList"
+          :urlList="urlList"
+          :isEdit="isEdit"
+          ref="commonShop"
+          :style="`height: calc(100% - 50px); `"
+          @delete="dataFormDelete"
+          @edit="dataFormEdit"
+        ></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> -->
+            <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>
+      <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
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
+     
+        
+      </el-form> -->
+    <commonShopTable
+    :type="type"
+      ref="commonShopTable"
+      :currentId="addForm.id"
+      currentType="bookLabelId"
+      @submit="handleSubmitShopTable"
+    ></commonShopTable>
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      @refreshDataList="getDataList"
+    ></add-or-update>
+    <el-dialog
+      :append-to-body="true"
+      :modal-append-to-body="false"
+      title="修改排序"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <div class="addFormBox selectTimeBox">
+        <el-form ref="addForm" :model="dataForm" label-width="80px">
+          <slot name="searchFormItem" :dataForm="dataForm"></slot>
+
+          <el-form-item
+            label="图书名称:"
+            class="form_item"
+            style="width: 100% !important"
+          >
+            <p class="input_item">
+              {{ dataForm.name }}
+            </p>
+            <!-- selectCourse -->
+            <!-- <el-input
+                v-model="selectCourse.courseCatalogueTitle"
+                readonly
+              ></el-input> -->
+          </el-form-item>
+          <el-form-item
+            label="排序:"
+            class="form_item"
+            style="width: 100% !important"
+          >
+            <el-input
+              v-model="dataForm.sort"
+              type="number"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="handleSubmitDataForm"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import global from "@/views/common/common.vue"; //引入共用组间
+// import AddOrUpdate from "./sociologyComponents/bookTagsForm.vue";
+import AddOrUpdate from "./components/sociology-add-or-update";
+import commonShop from "./components/shopproduct.vue";
+import commonShopTable from "./components/shopproductTable.vue";
+import commonTree from "./components/tags.vue";
+import debounce from "lodash/debounce"; //导入lodash中的debounce
+// import dialogComponent from './seckillprodrelation'
+export default {
+  data() {
+    return {
+        type:0,
+      fimages: "",
+      baseUrl: global.baseUrl,
+      isEdit: false,
+      checkAll: false,
+      dialogVisible: false,
+      isIndeterminate: true,
+      urlList: {
+        treeList: "/master/bookAbroad/getLableTree",
+        editSort: "/master/bookAbroad/updateToLableSort",
+        delete: "/master/bookAbroad/delBookAbroadLable",
+        add: "/master/bookAbroad/insertBookAbroadLable",
+        edit: "/master/bookAbroad/updateBookAbroadLable",
+        getAssociatedGoodsList:
+          "/master/bookAbroad/getAbroadBookListByLable",
+        deleteShop: "/master/bookAbroad/delBookAbroadToLable",
+        saveShop: "/master/bookAbroad/insertBookAbroadToLable"
+      },
+      addForm: {},
+      isFresh: false,
+      dataRule: {
+        name: [
+          {
+            required: true,
+            message: "标签名称不能为空"
+            // trigger: "change",
+          }
+        ]
+      },
+      currentNode: {},
+      treeDataList: [],
+      associatedGoodsList: [], //已关联商品列表
+
+      isact: "", //当前hover的节点
+      isactTitle: "", //记录修改节点名称
+      curNode: undefined, //当前选中节点
+      isUpdateGroup: false, //是否在修改模板组
+      filterText: "",
+      indexRecord: [], //记录节点轨迹
+      isBreak: false, //是否结束循环
+      defaultProps: {
+        children: "children",
+        label: "title"
+      },
+      dataForm: {},
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false
+    };
+  },
+  components: {
+    AddOrUpdate,
+    commonShop,
+    commonTree,
+    commonShopTable
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  activated() {
+    this.isEdit = false;
+    this.getDataList();
+  },
+  methods: {
+    delImg() {
+      this.fimages = "";
+      this.addForm.icon = "";
+    },
+    handlePicSuccess(res, file) {
+      this.fimages = res.url;
+      this.addForm.icon = res.url;
+      this.$message.success("上传成功");
+      //  console.log(res, "上传");
+    },
+    // 只可输入数字
+    UpNumber(e) {
+      e.target.value = e.target.value.replace(/[^\d]/g, "");
+    },
+    // dataFormEdit() {
+    //   this.checkAll = false;
+    //   this.isEdit = !this.isEdit;
+    // },
+    handleCheckAllChange(val) {
+      this.$nextTick(() => {
+        this.$refs.commonShop.handleCheckAllChange(val);
+      });
+    },
+    handleSubmitShopTable: debounce(async function(ids) {
+      await this.$http({
+        url: this.$http.adornUrl(`${this.urlList.saveShop}`),
+        method: "post",
+        data: this.$http.adornData({
+            bookId: ids,
+          lableId: this.addForm.id
+        })
+      }).then(async ({ data }) => {
+        if (data && data.code === 0) {
+          this.$message.success(data.msg);
+          if (this.$refs.commonShop) {
+            this.$refs.commonShop.getAssociatedGoodsList({
+                lableId: this.addForm.id
+            });
+          }
+          if (this.$refs.commonShopTable) {
+            this.$refs.commonShopTable.close();
+          }
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    }, 200),
+    handleSubmitDataForm: debounce(async function() {
+      var that = this;
+      this.$http
+        .request({
+          url: this.$http.adornUrl(`${this.urlList.editSort}`),
+          method: "POST",
+          data: {
+            toLableId: this.dataForm.id,
+            sort: Number(this.dataForm.sort)
+          },
+          header: {
+            //默认 无 说明：请求头
+            "Content-Type": "application/json"
+          }
+        })
+
+        .then(async ({ data }) => {
+          if (data && data.code === 0) {
+            this.$message.success(data.msg);
+
+            if (this.$refs.commonShop) {
+              this.$refs.commonShop.getAssociatedGoodsList({
+                courseId: this.addForm.id
+              });
+            }
+          } else {
+            this.$message.error(data.msg);
+          }
+          that.dialogVisible = false;
+        });
+
+      that.$forceUpdate();
+    }, 200),
+    openTable() {
+      this.isEdit = false;
+      this.$nextTick(() => {
+        this.$refs.commonShopTable.open(this.addForm.id);
+      });
+    },
+    handleChangeIsLast(e) {
+      console.log("🚀 ~ handleChangeIsLast ~ e:", e);
+      this.$nextTick(() => {
+        if (e == 1) {
+          if (this.$refs.commonShop) {
+            this.$refs.commonShop.getAssociatedGoodsList({
+              bookLabelId: this.addForm.id ? this.addForm.id : null
+            });
+          }
+        }
+      });
+    },
+
+    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 } };
+      console.log("this.currentNode at line 423:", this.currentNode);
+      this.addForm = form;
+      if (form.icon) {
+        this.fimages = form.icon;
+      } else {
+        this.fimages = "";
+      }
+
+      await this.getDataList();
+      // this.$refs.commonTree.setCurrentNodeShow();
+
+      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) {
+      //    return false
+      if (this.addForm.title == "" || !this.addForm.title) {
+        this.$message.error("请输入标签名称");
+        return false;
+      }
+      this.addForm.content = "";
+      await this.$refs[formName].validate(async valid => {
+        if (valid) {
+          await this.$http({
+            url: this.$http.adornUrl(
+              `${this.addForm.id ? this.urlList.edit : this.urlList.add}`
+            ),
+            method: "post",
+            data: this.$http.adornData({
+              ...this.addForm
+            })
+          }).then(async ({ data }) => {
+            if (data && data.code === 0) {
+              await this.getDataList();
+              this.$nextTick(async () => {
+                this.$refs.commonTree.setCurrentNodeShow(data.bookAbroadLable.id);
+                this.addForm = data.bookAbroadLable;
+                if (data.bookAbroadLable.icon) {
+                  this.fimages = data.bookAbroadLable.icon;
+                }
+
+                this.currentNode = { data: { ...data.bookAbroadLable } };
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false;
+                  }
+                });
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    }, 200),
+    dataFormEdit(row) {
+      this.dataForm = { ...row };
+      this.dialogVisible = true;
+    },
+    //删除关联图书
+    dataFormDelete: debounce(async function(row, deleteType) {
+      console.log("row at line 292:", row);
+      this.$confirm(
+        `确定要删除${deleteType != "all" ? "该" : "所有"}关联图书吗?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      )
+        .then(async () => {
+          // var lableIds = row[0].bookLabelId
+          var bindId = row.id;
+
+          // //    return false
+          // var selectShopArr = this.$refs.commonShop.selectShopArr;
+          // console.log(selectShopArr, "1111");
+
+          // if (selectShopArr.length == 0) {
+          //   this.$message.error("请选择已关联的商品");
+          //   return false;
+          // }
+          this.$refs.commonShop.dataListLoading = true;
+          await this.$http({
+            url: this.$http.adornUrl(
+              // `${this.urlList.deleteShop}?id=${this.addForm.id}&sociologyId=${sociologyId.toString(",")}`
+              `${this.urlList.deleteShop}`
+            ),
+            method: "post",
+            data: this.$http.adornData({
+              ids: bindId
+            })
+          }).then(async ({ data }) => {
+            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
+                });
+              }
+            });
+          });
+        })
+        .catch(() => {});
+    }, 200),
+    setCheckedKeys() {
+      this.$refs.tree.setCheckedKeys([0]);
+    },
+    changeCurrentNode(val) {
+      this.changeCurrentNode = val;
+      this.$forceUpdate();
+    },
+    handlereset() {
+      this.currentNode = null;
+      this.isFresh = false;
+      this.isFresh = true;
+    },
+    handleClickNodes(node, data, type) {
+      console.log("type at line 552:", type);
+      this.isEdit = false;
+      this.addForm = {};
+      // console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
+      // console.log(node, data, "当前选中节点");
+      this.currentNode = node ? node : {};
+      this.isFresh = false;
+      this.isFresh = true;
+
+      var form = {};
+      switch (type) {
+        case "add":
+          form = { ...data };
+          break;
+        case "edit":
+          form = { ...node.data };
+          break;
+        case "addChildren":
+          form = {
+            children: [],
+            delFlag: 0,
+            isLast: 0,
+            pid: data.id,
+            sort: 0,
+            title: "",
+            icon: ""
+          };
+          break;
+      }
+      this.addForm = { ...form };
+      console.log("this.addForm at line 581:", this.addForm);
+      if (this.addForm.icon) {
+        this.fimages = this.addForm.icon;
+      }
+      this.$nextTick(() => {
+        this.$refs.commonShop.clear();
+        // this.$refs.commonShop.bookMarketId = null;
+        this.$refs.commonShop.getDataList(type == "edit" ? form.id : "");
+      });
+    },
+    addOrUpdateHandle() {
+      var addform = {
+        children: [],
+        delFlag: 0,
+        isLast: 0,
+        pid: 0,
+        sort: 0,
+        title: ""
+      };
+      this.handleClickNodes({ data: addform }, addform, "add");
+      // if (!this.currentNode) {
+      //   this.$message.error("请先选择分类");
+      //   return;
+      // }
+    },
+
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.title.indexOf(value) !== -1;
+    },
+
+    // renderContent(h, { node, data, store }) {
+    //   return;
+    //   `<span
+    //       style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;"
+    //       on-mouseenter={() => this.mouseenteract(data)}
+    //       on-mouseleave={() => this.mouseleaveact(data)}
+    //     >
+    //       <span>
+    //         <span>{node.label}</span>
+    //       </span>
+    //       {this.isact == data ? (
+    //         <span>
+    //           {this.isact.typeName == "模板组" ? (
+    //             <el-button
+    //               class="m-r-10"
+    //               type="text"
+    //               icon="el-icon-edit"
+    //               on-click={() => this.handleUpdateGroup(node, data)}
+    //             ></el-button>
+    //           ) : (
+    //             <span></span>
+    //           )}
+    //           <el-button
+    //             type="text"
+    //             icon="el-icon-delete"
+    //             on-click={(e) => this.handleDelete(node, data, e)}
+    //           ></el-button>
+    //         </span>
+    //       ) : (
+    //         <span></span>
+    //       )}
+    //     </span>`;
+    // },
+    updateRenderContent(h, { node, data, store }) {
+      return `
+          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
+            <span>
+              {this.isact == data ? (
+                <input
+                  type="text"
+                  onChange={this.handleChangeTitle.bind(this)}
+                  value={node.label}
+                />
+              ) : (
+                <span>{node.label}</span>
+              )}
+            </span>
+            {this.isact == data ? (
+              <span>
+                {this.isact.typeName == "模板组" ? (
+                  <span>
+                    <el-button
+                      class="m-r-10"
+                      type="text"
+                      icon="el-icon-check"
+                      on-click={() => this.updateGroup(node, data)}
+                    ></el-button>
+                    <el-button
+                      class="m-r-10"
+                      type="text"
+                      icon="el-icon-close"
+                      on-click={(e) => this.cancelUpdate(node, data, e)}
+                    ></el-button>
+                  </span>
+                ) : (
+                  <span></span>
+                )}
+              </span>
+            ) : (
+              <span></span>
+            )}
+          </span>`;
+    },
+    handleClose() {
+      this.dataForm = {};
+      this.dialogVisible = false;
+    },
+    //获取鼠标进入节点的数据
+    mouseenteract(da) {
+      this.isact = da;
+    },
+    mouseleaveact(da) {
+      this.isact = "";
+    },
+    handleNodeClick(pdata) {
+      this.curNode = pdata;
+      document
+        .getElementsByClassName("el-tree-node__content")[0]
+        .setAttribute("class", "el-tree-node__content");
+    },
+    handleDelete(node, data, e) {
+      e.stopPropagation();
+      //存在则添加到子级
+      const parent = node.parent;
+      const children = parent.data.nodes || parent.data;
+      //若parent.data是对象，操作的是子级；如果是数组，操作的是最外层
+      if (Array.isArray(parent.data)) {
+        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);
+        children.splice(childIndex, 1);
+      }
+      this.curNode = undefined;
+    },
+    //新增组
+    handleAddGroup() {
+      /**
+         *  如果模版深度最多两层，取消该部分注释
+         * //最多只有两层组 不可能添加在dept2的组上 curNode存在 并且  深度超过1
+           if (this.curNode != undefined && this.curNode.depth != 1) { 
+           this.$message.warning("不能添加超过两层");  
+           return; 
+         }
+         */
+
+      //如果isUpdateGroup 已经是true了 说明重复点击了
+      if (this.isUpdateGroup) {
+        return;
+      }
+
+      let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+        (
+          c ^
+          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+        ).toString(16)
+      );
+      let newChild = {
+        parentId: "", //如果有这个id 是插入第二层 否则是第一层 可有可无
+        text: "", //必须有 this.templateContent.tempName
+        nodes: [],
+        id: id,
+        typeName: "模板组",
+        temporaryData: "1" //用来区分临时数据
+      };
+      /* 如果模版深度最多两层，以下条件改成该部分注释
+          this.curNode && this.curNode.depth == 1 
+        */
+      this.indexRecord = [];
+      if (this.curNode) {
+        if (!this.curNode.nodes) {
+          this.$message.warning("模板不可添加");
+          return;
+        }
+        newChild.parentId = this.curNode.id;
+        /* 如果模版深度最多两层，以下条件改成该部分注释
+            const index = this.treeDataList.findIndex(
+              item => item.id == this.curNode.id
+            );
+            this.treeDataList[index].nodes.push(newChild);
+          */
+        //找到tree中的index轨迹
+        this.getTemplateTreeNode(this.curNode.id, this.treeDataList, 0);
+        //按照index轨迹插入节点
+        this.insertNode(
+          newChild,
+          this.treeDataList,
+          this.indexRecord,
+          this.indexRecord.length
+        );
+        this.isBreak = false;
+      } else if (this.curNode == undefined) {
+        //没有选中的时候 添加到最外层
+        newChild.depth = 1;
+        this.treeDataList.push(newChild);
+      }
+      //调用出updateRender的input
+      this.isact = newChild;
+      this.isUpdateGroup = true;
+    },
+    //递归遍历获得选中node
+    getTemplateTreeNode(target, list, dept) {
+      //空数组直接返回
+      if (list.length == 0) return;
+      let dataLen = list.length;
+      for (let i = 0; i < dataLen; i++) {
+        //如果不匹配
+        if (target != list[i].id) {
+          //存在nodes 遍历nodes里的节点
+          if (list[i].nodes) {
+            this.indexRecord[dept] = i;
+            let recordDept = dept + 1;
+            this.getTemplateTreeNode(target, list[i].nodes, recordDept);
+          } else {
+            //不存在nodes 继续遍历
+            continue;
+          }
+        } else {
+          //匹配，则修改下标数组
+          this.indexRecord[dept] = i;
+          this.isBreak = true;
+          break;
+        }
+        //删除不匹配的轨迹 如果已经break了说明已经找到正确的节点，就不用再删了
+        if (!this.isBreak) {
+          this.indexRecord.pop();
+        }
+      }
+    },
+    //插入节点
+    insertNode(insertChild, tree, indexArr, len) {
+      let index = indexArr.length - len;
+      if (len == 0) {
+        tree.push(insertChild);
+      } else {
+        this.insertNode(
+          insertChild,
+          tree[indexArr[index]].nodes,
+          indexArr,
+          len - 1
+        );
+      }
+    },
+    //修改组
+    handleUpdateGroup() {
+      this.isUpdateGroup = true;
+    },
+    //修改组名时获取title
+    handleChangeTitle(e) {
+      let value = e.target.value;
+      this.isactTitle = value;
+    },
+    updateGroup(node, data) {
+      //先handleChangeTitle获取title 再调用
+      setTimeout(() => {
+        if (this.isactTitle.trim() == "") {
+          this.$message.warning("名称不能为空");
+          return;
+        }
+        //修改数据组
+        this.isUpdateGroup = false;
+        const parent = node.parent;
+        const children = parent.data.nodes || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        let temp = data;
+        temp.text = this.isactTitle;
+        children.splice(index, 1, temp);
+      }, 500);
+    },
+    cancelUpdate(node, data, e) {
+      this.$message.info("已取消");
+      this.isUpdateGroup = false;
+      //如果是插入操作 需要移除数据
+      if (this.isact.temporaryData) {
+        this.handleDelete(node, data, e);
+      }
+    },
+    // 获取数据列表
+
+    async getDataList() {
+      this.dataListLoading = true;
+      await this.$http({
+        url: this.$http.adornUrl(`${this.urlList.treeList}`),
+        method: "post",
+        data: this.$http.adornData({
+          type: this.type
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.treeDataList = data.labelsTree;
+        } else {
+          this.treeDataList = [];
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val;
+    }
+    // // 新增 / 修改
+    // addOrUpdateHandle(row) {
+    //   this.addOrUpdateVisible = true;
+    //   this.$nextTick(() => {
+    //     this.$refs.addOrUpdate.init(row);
+    //   });
+    // },
+  }
+};
+</script>
+<style lang="less" scoped>
+.tree_box {
+  width: 350px !important;
+  height: 100%;
+  float: left;
+  border: 1px solid #bababa;
+  border-radius: 10px;
+  padding: 15px;
+  box-sizing: border-box;
+  // background: #fafafa;
+}
+
+.border_box {
+  height: 120px;
+  // 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;
+
+    float: left;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    font-size: 16px;
+
+    // color: #17b3a3;
+    .line {
+      width: 4px;
+      height: 20px;
+      margin-right: 8px;
+      background: #17b3a3;
+    }
+  }
+}
+
+.border_box {
+  width: 100%;
+  float: right;
+  background: #fffefe;
+
+  border-radius: 10px;
+  padding: 15px 15px;
+  box-sizing: border-box;
+}
+
+.tree_content_box {
+  height: calc(100% - 120px) !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 {
+  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;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+// .el-card {
+//   background: none !important;
+// }
+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;
+
+//   display: block !important;
+// }
+// ::v-deep .el-tree .el-tree-node__content span:nth-child(2) {
+//   width: 120px;
+//   display: flex !important;
+//   align-items: center !important;
+//   justify-content: space-between !important;
+// }
+// /deep/.el-table__row--level-1 {
+//   display: block !important;
+// }
+
+.addFormBox {
+  // overflow: hidden;
+  // overflow: auto;
+  .form_item {
+    width: 24%;
+    margin-bottom: 0 !important;
+    float: left;
+  }
+}
+.clear {
+  clear: both;
+}
+
+.custom-tree-container {
+  height: calc(100% - 100px);
+
+  .filter-tree {
+    height: 100%;
+  }
+}
+
+.info_bg {
+  background: #e0dede;
+  height: 28px;
+  line-height: 28px;
+  padding-left: 10px;
+  // padding: 8px 5px;
+  box-sizing: border-box;
+  // margin-top: -10px;
+  border-radius: 4px;
+  font-size: 14px;
+  width: calc(100% - 120px);
+  float: left;
+}
+.delImgBtn {
+  cursor: pointer;
+  position: absolute;
+  display: inline-block;
+  top: -10px;
+  right: -10px;
+}
+.el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: rgb(162, 225, 218);
+}
+.avatar-uploader-icon {
+  border: 1px dashed #d9d9d9;
+  border-color: rgb(162, 225, 218);
+  font-size: 28px;
+  color: #8c939d;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+}
+.avatar {
+  width: 50px;
+  border: 1px dashed rgb(162, 225, 218);
+  background-color: #b0b0b09e;
+  // border-color: #409eff;
+  height: 50px;
+  display: block;
+}
+</style>