saas_entrepot_admin/src/views/Marketing/goods/commodityManageMent/poppleSet.vue

<template>
  <div id="poppleSet">
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      @open="openExpand"
      :show-close="false"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">试听设置</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisible = false"
          />
        </div>
      </div>
      <div style="text-align: end">
        <el-button type="text" @click="inits">重置</el-button>
      </div>
        <el-tree
          v-if="showPop"
          ref="trees"
          :data="datas"
          :props="layoutTreeProps"
          :load="loadNode"
          lazy
          :default-checked-keys="audition"
          :show-checkbox="true"
          :check-strictly="true"
          @check-change="getCheckedKeys"
          node-key="onlyId"
        >
          <span class="custom-tree-node" slot-scope="{ node }">
            <span>{{ node.label }}</span>
            <span v-if="node.checked && node.data.sectionType !== 2"
              >试听前
              <el-time-picker
                style="width: 140px"
                size="mini"
                value-format="HH:mm:ss"
                range-separator="-"
                v-model="node.data.auditionMinute"
                :picker-options="{
                  selectableRange: compTimes(node.data.durationTime),
                }"
                placeholder="请选择试听时长"
                @blur="changeNum(node)"
              >
              </el-time-picker>
            </span>
          </span>
        </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTable">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["tableData", "auditionList"],
  data() {
    return {
      copyData: [],
      showPop: false,
      datas: [],
      audition: [],
      auditionListCope: [],
      dialogVisible: false,
      layoutTreeProps: {
        label(data, node) {
          return (
            data.courseName || data.categoryName || data.name || data.menuName
          );
        },
        isLeaf(data, node) {
          return !data.hasChildren;
        },
      },
      getAllSeNum: [], //当前tree所有节ID
    };
  },
  computed: {
    compTimes: function () {
      return function (aTime) {
        let chasTime = this.$methodsTools.secondToDate(aTime, false);
        return `00:00:00 - ${chasTime}`;
      };
    },
  },
  methods: {
    /**
     * 相同节-时长同步修改
     */
    changeNum(v) {
      if (v.data.auditionMinute == "00:00:00") {
        this.$message.warning("试听时长禁止为0，请重新设置");
      } else {
        var arrays = this.$refs.trees;
        //修改指定项的 auditionMinute
        arrays.root.childNodes.forEach((item, index) => {
          if (item.data.type && item.data.type === 3) {
            if (
              item.data.TypeId === v.data.TypeId &&
              item.data.courseId === v.data.courseId
            ) {
              item.data.auditionMinute = v.data.auditionMinute;
            }
          } else {
            item.childNodes.forEach((items, indexs) => {
              if (
                items.data.TypeId === v.data.TypeId &&
                items.data.courseId === v.data.courseId
              ) {
                items.data.auditionMinute = v.data.auditionMinute;
              }
              if (items.childNodes.length) {
                items.childNodes.forEach((ik) => {
                  if (
                    ik.data.TypeId === v.data.TypeId &&
                    ik.data.courseId === v.data.courseId
                  ) {
                    ik.data.auditionMinute = v.data.auditionMinute;
                  }
                  if (ik.childNodes.length) {
                    ik.childNodes.forEach((iks) => {
                      if (
                        iks.data.TypeId === v.data.TypeId &&
                        iks.data.courseId === v.data.courseId
                      ) {
                        iks.data.auditionMinute = v.data.auditionMinute;
                      }
                    });
                  }
                });
              }
            });
          }
        });

        this.auditionListCope.forEach((items) => {
          if (
            items.TypeId === v.data.TypeId &&
            v.data.courseId === items.courseId
          ) {
            items.auditionMinute = v.data.auditionMinute;
          }
        });
      }
    },
    /**
     * 重置按钮
     */
    inits() {
      this.showPop = false;
      if (this.auditionList) {
        this.auditionListCope = JSON.parse(JSON.stringify(this.auditionList));
      }
      this.datas = JSON.parse(JSON.stringify(this.copyData));
      setTimeout(() => {
        this.showPop = true;
      }, 50);
    },
    /**
     * 弹窗打开触发
     */
    openExpand() {
      this.showPop = true;
      if (this.auditionList) {
        this.auditionListCope = JSON.parse(JSON.stringify(this.auditionList));
      }
    },
    /**
     * @param {Objact,Bool} 当前点击数据 当前是否勾选
     * 复选框变化触发
     */
    getCheckedKeys(item, node) {
      var self = this;
      if (item.TypeId.split("-")[0] != "3") {
        return;
      }
      if (node) {
        var ast = self.getAllSeNum.filter((items, indexs) => {
          if (
            items.split("-")[0] == item.courseId &&
            items.split("-")[3] == item.menuId
          ) {
            return items;
          }
        });
        var st = ast.concat(self.audition);
        self.audition = [...new Set(st)];
        var pds = self.auditionListCope.some((items, indexs) => {
          return (
            items.courseId === item.courseId && items.menuId === item.menuId
          );
        });
        if (!pds) {
          var data = {
            TypeId: item.TypeId,
            // typeId: item.onlyId,
            auditionMinute: item.auditionMinute,
            courseId: item.courseId,
            menuId: item.menuId,
          };
          self.auditionListCope.push(data);
        }
      } else {
        self.audition = self.audition.filter((items, indexs) => {
          if (items.split("-")[0] != item.courseId) {
            return items;
          } else {
            if (items.split("-")[3] != item.menuId) {
              return items;
            } else {
              self.$refs.trees.setChecked(items, node);
            }
          }
        });
        var pdst = self.auditionListCope.filter((itx, indx) => {
          if (itx.courseId != item.courseId) {
            return itx;
          } else {
            if (itx.menuId != item.menuId) {
              return itx;
            }
          }
        });
        self.auditionListCope = pdst;
      }
    },
    submitTable() {
      if (!this.auditionListCope.length) {
        this.$message.warning("请勾选至少一节的试听时间");
        return;
      }
      this.auditionListCope.forEach((item) => {
        if (!item.auditionMinute || item.auditionMinute === "00:00:00") {
          this.$message.warning("不允许填写时长为0的节，请重新输入");
          return;
        }
      });
      this.$emit("uploadArrays", this.auditionListCope);
      this.dialogVisible = false;
    },
    loadNode(node, resolve) {
      var self = this;
      if (node.level === 0) {
        if (this.tableData[0].type > 0) {
          this.tableData.forEach((item) => {
            item.TypeId = `${item.type}-${item.menuId}`;
            if (item.type === 3) {
              console.log(item,'item')
              item.hasChildren = false;
              item.disabled = false;
              item.onlyId = `${item.courseId || 0}-0-0-${item.menuId}`;
              if (self.getAllSeNum.indexOf(item.onlyId) === -1) {
                self.getAllSeNum.push(item.onlyId);
              }
              if (self.auditionListCope) {
                self.auditionListCope.map((items) => {
                  if (items.TypeId === item.TypeId) {
                    if (self.audition.indexOf(item.onlyId) === -1) {
                      self.audition.push(item.onlyId);
                    }
                    item.auditionMinute = items.auditionMinute;
                  }
                });
              }
            } else {
              item.hasChildren = true;
              item.disabled = true;
            }
          });
          this.copyData = JSON.parse(JSON.stringify(this.tableData));
          return resolve(this.tableData);
        } else {
          this.tableData.forEach((item) => {
            item.TypeId = "0-" + item.courseId;
            item.disabled = true;
            item.hasChildren = true;
          });
          this.copyData = JSON.parse(JSON.stringify(this.tableData));
          return resolve(this.tableData);
        }
      } else {
        if (node.data.type === 1) {
          this.$api
            .inquireCourseListmodulechapter(node.data.menuId)
            .then((res) => {
              res.data.map((item) => {
                item.onlyId = `${node.data.courseId || 0}-${node.data.menuId}-${
                  item.chapterId
                }-0`;
                item.courseId = node.data.courseId || 0;
                item.TypeId = "2" + "-" + item.chapterId;
                item.hasChildren = true;
                item.disabled = true;
                item.menuId = item.chapterId;
                item.type = 2;
              });
              return resolve(res.data);
            });
        } else if (node.data.type === 2) {
          this.$api
            .inquireCoursechaptersectionlist(node.data.menuId)
            .then((res) => {
              res.data.map((item) => {
                item.onlyId = `${node.data.courseId || 0}-${
                  node.data.moduleId ? node.data.moduleId : 0
                }-${item.chapterId}-${item.sectionId}`;
                if (this.getAllSeNum.indexOf(item.onlyId) === -1) {
                  this.getAllSeNum.push(item.onlyId);
                }
                item.type = 3;
                item.TypeId = "3" + "-" + item.sectionId;
                item.menuId = item.sectionId;
                item.auditionMinute = self.$methodsTools.secondToDate(
                  item.durationTime,
                  false
                );
                item.courseId = node.data.courseId || 0;
                if (self.auditionListCope) {
                  self.auditionListCope.map((items) => {
                    if (
                      items.TypeId === item.TypeId &&
                      items.courseId === node.data.courseId
                    ) {
                      if (self.audition.indexOf(item.onlyId) === -1) {
                        self.audition.push(item.onlyId);
                      }
                      item.auditionMinute = items.auditionMinute;
                    }
                  });
                }
                item.hasChildren = false;
              });
              return resolve(res.data);
            });
        } else if (node.data.type === 3) {
          return resolve([]);
        } else {
          this.$api
            .inquireCoursemenuListS({ courseId: node.data.courseId })
            .then((res) => {
              res.rows.map((item) => {
                if (item.type === 1) {
                  item.onlyId = `${node.data.courseId}-${item.menuId}-0-0`;
                  item.TypeId = item.type + "-" + item.menuId;
                }
                if (item.type === 2) {
                  item.onlyId = `${node.data.courseId}-0-${item.menuId}-0`;
                  item.TypeId = item.type + "-" + item.menuId;
                }
                if (item.type === 3) {
                  item.onlyId = `${node.data.courseId}-0-0-${item.menuId}`;
                  if (this.getAllSeNum.indexOf(item.onlyId) === -1) {
                    this.getAllSeNum.push(item.onlyId);
                  }
                  item.TypeId = item.type + "-" + item.menuId;
                  item.auditionMinute = self.$methodsTools.secondToDate(
                    item.durationTime,
                    false
                  );
                  if (self.auditionListCope) {
                    self.auditionListCope.map((items) => {
                      if (
                        items.TypeId === item.TypeId &&
                        items.courseId === node.data.courseId
                      ) {
                        if (self.audition.indexOf(item.onlyId) === -1) {
                          self.audition.push(item.onlyId);
                        }
                        item.auditionMinute = items.auditionMinute;
                      }
                    });
                  }
                  item.disabled = false;
                  item.hasChildren = false;
                } else {
                  item.disabled = true;
                  item.hasChildren = true;
                }
              });
              return resolve(res.rows);
            });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tree-node__content {
  height: 35px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>