bug修复

ZZJ

2022-01-26 da4f50e1008b815067cf47352747bf6d23b8b043

 src/pages/cameraAccess/components/TimeSlider.vue

@@ -2,7 +2,11 @@
  <div class="sub-time-box">
    <div class="btn-control">
      <div class="el-tabs-edit">
        <span v-if="!editSlider" class="add-btn" @click="handleTabsEdit('','edit')">
        <span

          v-if="!editSlider"

          class="add-btn"

          @click="handleTabsEdit('', 'edit')"

        >

          <i class="el-icon-edit"></i>
          编辑
        </span>
@@ -18,9 +22,20 @@
        </span>
      </div>
    </div>
    <el-tabs v-model="activeTab" type="border-card" editable @edit="handleTabsEdit">
      <el-tab-pane v-for="item in VideoManageData.TimeRules" :key="item.id" :name="item.id">
        <span slot="label" @click="tabClick(item)" style="width:100px">{{item.name}}</span>
    <el-tabs

      v-model="activeTab"

      type="border-card"

      editable

      @edit="handleTabsEdit"

    >

      <el-tab-pane

        v-for="item in VideoManageData.TimeRules"

        :key="item.id"

        :name="item.id"

      >

        <span slot="label" @click="tabClick(item)" style="width: 100px">{{

          item.name

        }}</span>

        <multi-range-slider
          :timeData="JSON.parse(item.time_rule)"
          :mainId="`${item.id}_${type}`"
@@ -41,13 +56,13 @@
export default {
  name: "TimeSlider",
  components: {
    MultiRangeSlider
    MultiRangeSlider,

  },
  props: {
    type: {
      default: "",
      type: String
    }
      type: String,

    },

  },
  data() {
    return {
@@ -62,8 +77,8 @@
        { day: 4, time_range: [{ start: "00:00", end: "24:00" }] },
        { day: 5, time_range: [{ start: "00:00", end: "24:00" }] },
        { day: 6, time_range: [{ start: "00:00", end: "24:00" }] },
        { day: 7, time_range: [{ start: "00:00", end: "24:00" }] }
      ]
        { day: 7, time_range: [{ start: "00:00", end: "24:00" }] },

      ],

    };
  },
  mounted() {
@@ -76,11 +91,23 @@
        let newRule = {
          id: "",
          name: "时间段" + this.VideoManageData.TimeRules.length,
          time_rule: this.allDay
          time_rule: this.allDay,

        };
        this.updateTimeRule(newRule);
      }
      if (action === "remove") {
        console.log();



        if (this.VideoManageData.TimeRules.length == 1) {

          this.$notify({

            title: "警告",

            message: "此时间段正在使用中，无法删除！",

            type: "warning",

          });



          return;

        }



        this.$confirm(
          "此操作将永久删除该规则, 所关联的任务将会失效，是否继续?",
          {
@@ -88,19 +115,21 @@
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          }
        ).then(() => {
          deleteTimeRule({ id: tabId }).then(rsp => {
        )

          .then(() => {

            deleteTimeRule({ id: tabId }).then((rsp) => {

            if (rsp && rsp.success) {
              this.VideoManageData.getTimeRule();
              // this.VideoManageData.TimeRules.splice(2, 1)
              this.activeTab = this.VideoManageData.TimeRules[0].id;
              this.$notify({
                type: "success",
                message: "删除成功!"
                  message: "删除成功!",

              });
            }
          });
        }).catch(() => { });
          })

          .catch(() => {});

      }
      if (action == "edit") {
        this.editSlider = true;
@@ -110,12 +139,12 @@
      }
    },
    windowSizeChange() {
      let timeSlideWidth = document.querySelector(".sub-time-box").clientWidth
      this.cavasLength = timeSlideWidth
      console.log("时间组件宽度：", timeSlideWidth)
      let timeSlideWidth = document.querySelector(".sub-time-box").clientWidth;

      this.cavasLength = timeSlideWidth;

      console.log("时间组件宽度：", timeSlideWidth);

    },
    updateTimeRule(rule) {
      saveTimeRule(rule).then(rsp => {
      saveTimeRule(rule).then((rsp) => {

        if (rsp && rsp.success) {
          this.VideoManageData.getTimeRule();
          this.activeTab = rsp.data.id;
@@ -129,21 +158,23 @@
          cancelButtonText: "取消",
          inputValue: item.name,
          inputPattern: /^[\S]{1,16}$/,
          inputErrorMessage: "名称不能包含空格"
        }).then(({ value }) => {
          inputErrorMessage: "名称不能包含空格",

        })

          .then(({ value }) => {

          this.updateTimeRule({
            id: item.id,
            name: value,
            time_rule: JSON.parse(item.time_rule)
              time_rule: JSON.parse(item.time_rule),

          });
          this.$notify({
            type: "success",
            message: "时间规则名称修改成功"
              message: "时间规则名称修改成功",

          });
        }).catch(() => { });
          })

          .catch(() => {});

      }
    }
  }
    },

  },

};
</script>
<style lang='scss'>