bug修复

ZZJ

2022-06-23 feaf0a9778879ef211c5587a513ba4cbdabb52d0

 src/pages/cameraAccess/components/TimeSlider.vue

@@ -1,226 +1,253 @@
<template>
  <div class="sub-time-box">
    <div class="btn-control">
      <div class="el-tabs-edit">
        <span v-if="!editSlider" class="add-btn" @click="handleTabsEdit('','edit')">
          <i class="el-icon-edit"></i>
          编辑
        </span>
        <span v-else class="add-btn" @click="handleTabsEdit('','lock')">
          <i class="el-icon-lock"></i>
          锁定
        </span>
      </div>
      <div class="el-tabs-add">
        <span class="add-btn" @click="handleTabsEdit('','add')">
          <i class="iconfont iconhebingxingzhuang"></i>
          新增
        </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>
        <multi-range-slider
          :timeData="JSON.parse(item.time_rule)"
          :mainId="`${item.id}_${type}`"
          :itemId="item.id"
          :itemName="item.name"
          :edit="editSlider"
          @range-update="updateTimeRule"
        ></multi-range-slider>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import MultiRangeSlider from "@/components/subComponents/MultiRangeSlider";
import { saveTimeRule, deleteTimeRule } from "@/api/timeRule";

export default {
  name: "TimeSlider",
  components: {
    MultiRangeSlider
  },
  props: {
    type: {
      default: "",
      type: String
    }
  },
  data() {
    return {
      editSlider: false,
      activeTab: "",
      activeIndex: 0,
      cavasLength: 800,
      allDay: [
        { day: 1, time_range: [{ start: "00:00", end: "24:00" }] },
        { day: 2, time_range: [{ start: "00:00", end: "24:00" }] },
        { day: 3, time_range: [{ start: "00:00", end: "24:00" }] },
        { 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" }] }
      ]
    };
  },
  mounted() {
    // window.addEventListener('resize', this.windowSizeChange)
  },
  methods: {
    handleTabsEdit(tabId, action) {
      let tabs = this.VideoManageData.TimeRules;
      if (action === "add") {
        let newRule = {
          id: "",
          name: "时间段" + this.VideoManageData.TimeRules.length,
          time_rule: this.allDay
        };
        this.updateTimeRule(newRule);
      }
      if (action === "remove") {
        this.$confirm(
          "此操作将永久删除该规则, 所关联的任务将会失效，是否继续?",
          {
            center: true,
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          }
        ).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: "删除成功!"
              });
            }
          });
        }).catch(() => { });
      }
      if (action == "edit") {
        this.editSlider = true;
      }
      if (action == "lock") {
        this.editSlider = false;
      }
    },
    windowSizeChange() {
      let timeSlideWidth = document.querySelector(".sub-time-box").clientWidth
      this.cavasLength = timeSlideWidth
      console.log("时间组件宽度：", timeSlideWidth)
    },
    updateTimeRule(rule) {
      saveTimeRule(rule).then(rsp => {
        if (rsp && rsp.success) {
          this.VideoManageData.getTimeRule();
          this.activeTab = rsp.data.id;
        }
      });
    },
    tabClick(item) {
      if (this.activeTab === item.id) {
        this.$prompt("", "修改名称", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputValue: item.name,
          inputPattern: /^[\S]{1,16}$/,
          inputErrorMessage: "名称不能包含空格"
        }).then(({ value }) => {
          this.updateTimeRule({
            id: item.id,
            name: value,
            time_rule: JSON.parse(item.time_rule)
          });
          this.$notify({
            type: "success",
            message: "时间规则名称修改成功"
          });
        }).catch(() => { });
      }
    }
  }
};
</script>
<style lang='scss'>
.sub-time-box {
  padding-right: 30px;
  position: relative;
  /* height: calc(100% - 32px);
  width: 100%;
  padding: 5px; */
  /* box-sizing: border-box; */
  /* border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc; */
  .btn-control {
    position: absolute;
    margin-top: -27px;
    top: 0;
    right: 0;
    display: flex;
    i {
      font-size: 16px;
    }
  }
  .el-tabs__item {
    border-right-color: #e2e2e2 !important;
    border-left-color: #e2e2e2 !important;
    border-top-color: #e2e2e2 !important;
  }
  .el-tab-pane {
    height: calc(100% - 50px);
  }
  // .el-tabs__new-tab {
  //   margin: 15px 19px 9px 10px;
  // }
  .el-tabs {
    height: 100%;
  }

  .el-tabs__header {
    margin: 0px !important;
    height: 45px !important;
    border-top: 1px solid #e2e2e2 !important;
    border-bottom: 1px solid #e2e2e2 !important;
    background-color: #fff !important;
    .is-active {
      border-bottom-color: #fff !important;
    }
    .el-tabs__item {
      line-height: 45px !important;
    }
  }
  .el-tabs__content {
    overflow: auto !important;
    height: calc(100% - 51px) !important;
    padding: 13px 0px !important;
  }
  .el-tabs__new-tab {
    visibility: hidden;
    // width: 130px;
  }
  // .el-tabs-add {
  //   position: relative;
  //   display: flex;
  //   width: 70px;
  //   top: 32px;
  //   left: 88%;
  //   z-index: 1;
  // }
  // .el-tabs-edit {
  //   position: relative;
  //   display: -webkit-box;
  //   display: -ms-flexbox;
  //   display: flex;
  //   width: 70px;
  //   top: 47px;
  //   left: 79%;
  //   z-index: 1;
  // }
}
</style>
<template>

  <div class="sub-time-box">

    <div class="btn-control">

      <div class="el-tabs-edit">

        <span v-if="!editSlider" class="add-btn" @click="handleTabsEdit('', 'edit')">

          <i class="el-icon-edit"></i>

          编辑

        </span>

        <span v-else class="add-btn" @click="handleTabsEdit('', 'lock')">

          <i class="el-icon-lock"></i>

          锁定

        </span>

      </div>

      <div class="el-tabs-add">

        <span class="add-btn" @click="handleTabsEdit('', 'add')">

          <i class="iconfont iconhebingxingzhuang"></i>

          新增

        </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>

        <multi-range-slider

          :timeData="JSON.parse(item.time_rule)"

          :mainId="`${item.id}_${type}`"

          :itemId="item.id"

          :itemName="item.name"

          :edit="editSlider"

          @range-update="updateTimeRule"

        ></multi-range-slider>

      </el-tab-pane>

    </el-tabs>

  </div>

</template>



<script>

import MultiRangeSlider from "@/components/subComponents/MultiRangeSlider"

import { saveTimeRule, deleteTimeRule } from "@/api/timeRule"



export default {

  name: "TimeSlider",

  components: {

    MultiRangeSlider

  },

  props: {

    type: {

      default: "",

      type: String

    }

  },

  data() {

    return {

      editSlider: false,

      activeTab: "",

      activeIndex: 0,

      cavasLength: 800,

      allDay: [

        { day: 1, time_range: [{ start: "00:00", end: "24:00" }] },

        { day: 2, time_range: [{ start: "00:00", end: "24:00" }] },

        { day: 3, time_range: [{ start: "00:00", end: "24:00" }] },

        { 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" }] }

      ],

      isAdding: false

    }

  },

  mounted() {

    // window.addEventListener('resize', this.windowSizeChange)

  },

  methods: {

    handleTabsEdit(tabId, action) {

      let tabs = this.VideoManageData.TimeRules

      if (action === "add") {

        if (this.isAdding) {

          return

        } else {

          this.isAdding = true

          let newRule = {

            id: "",

            name: "时间段" + this.VideoManageData.TimeRules.length,

            time_rule: this.allDay

          }



          this.updateTimeRule(newRule)

        }

      }

      if (action === "remove") {

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

          this.$notify({

            title: "警告",

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

            type: "warning"

          })



          return

        }



        this.$confirm("此操作将永久删除该规则, 所关联的任务将会失效，是否继续?", {

          center: true,

          confirmButtonText: "确定",

          cancelButtonText: "取消"

        })

          .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: "删除成功!"

                })

              }

            })

          })

          .catch(() => {})

      }

      if (action == "edit") {

        this.editSlider = true

      }

      if (action == "lock") {

        this.editSlider = false

      }

    },

    windowSizeChange() {

      let timeSlideWidth = document.querySelector(".sub-time-box").clientWidth

      this.cavasLength = timeSlideWidth

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

    },

    updateTimeRule(rule) {

      saveTimeRule(rule)

        .then(async (rsp) => {

          if (rsp && rsp.success) {

            await this.VideoManageData.getTimeRule()

            this.isAdding = false

            this.$nextTick(() => {

              this.activeTab = this.VideoManageData.TimeRules[this.VideoManageData.TimeRuleSum - 1].id

            })

          } else {

            this.isAdding = false

          }

        })

        .catch(() => {

          this.isAdding = false

        })

    },

    tabClick(item) {

      if (this.activeTab === item.id) {

        this.$prompt("", "修改名称", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          inputValue: item.name,

          inputPattern: /^[\S]{1,16}$/,

          inputErrorMessage: "名称不能包含空格"

        })

          .then(({ value }) => {

            this.updateTimeRule({

              id: item.id,

              name: value,

              time_rule: JSON.parse(item.time_rule)

            })

            this.$notify({

              type: "success",

              message: "时间规则名称修改成功"

            })

          })

          .catch(() => {})

      }

    }

  }

}

</script>

<style lang="scss">

.sub-time-box {

  padding-right: 30px;

  position: relative;

  /* height: calc(100% - 32px);

  width: 100%;

  padding: 5px; */

  /* box-sizing: border-box; */

  /* border-right: 1px solid #ccc;

  border-top: 1px solid #ccc;

  border-bottom: 1px solid #ccc; */

  .btn-control {

    position: absolute;

    margin-top: -27px;

    top: 0;

    right: 30px;

    display: flex;

    i {

      font-size: 16px;

    }

  }

  .el-tabs__item {

    border-right-color: #e2e2e2 !important;

    border-left-color: #e2e2e2 !important;

    border-top-color: #e2e2e2 !important;

  }

  .el-tab-pane {

    height: calc(100% - 50px);

  }

  // .el-tabs__new-tab {

  //   margin: 15px 19px 9px 10px;

  // }

  .el-tabs {

    height: 100%;

  }



  .el-tabs__header {

    margin: 0px !important;

    height: 45px !important;

    border-top: 1px solid #e2e2e2 !important;

    border-bottom: 1px solid #e2e2e2 !important;

    background-color: #fff !important;

    .is-active {

      border-bottom-color: #fff !important;

    }

    .el-tabs__item {

      line-height: 45px !important;

    }

  }

  .el-tabs__content {

    overflow: auto !important;

    height: calc(100% - 51px) !important;

    padding: 13px 0px !important;

  }

  .el-tabs__new-tab {

    visibility: hidden;

    // width: 130px;

  }

  // .el-tabs-add {

  //   position: relative;

  //   display: flex;

  //   width: 70px;

  //   top: 32px;

  //   left: 88%;

  //   z-index: 1;

  // }

  // .el-tabs-edit {

  //   position: relative;

  //   display: -webkit-box;

  //   display: -ms-flexbox;

  //   display: flex;

  //   width: 70px;

  //   top: 47px;

  //   left: 79%;

  //   z-index: 1;

  // }

}

</style>