修复时间规则新增后视图未动态更新的bug

zhangzengfei

2022-03-23 79f521ce63909fff82de9f624911d6c63e84fb53

修复时间规则新增后视图未动态更新的bug

 src/pages/cameraAccess/components/TimeSlider.vue

@@ -2,11 +2,7 @@
  <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>

@@ -22,20 +18,9 @@
        </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}`"

@@ -50,19 +35,19 @@
</template>



<script>

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

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

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

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



export default {

  name: "TimeSlider",

  components: {

    MultiRangeSlider,

    MultiRangeSlider

  },

  props: {

    type: {

      default: "",

      type: String,

    },

      type: String

    }

  },

  data() {

    return {

@@ -77,28 +62,29 @@
        { 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" }] }

      ],

      isAdding: false,

    };

      isAdding: false

    }

  },

  mounted() {

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

  },

  methods: {

    handleTabsEdit(tabId, action) {

      let tabs = this.VideoManageData.TimeRules;

      let tabs = this.VideoManageData.TimeRules

      if (action === "add") {

        if (this.isAdding) {

          return;

          return

        } else {

          this.isAdding = true;

          this.isAdding = true

          let newRule = {

            id: "",

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

            time_rule: this.allDay,

          };

          this.updateTimeRule(newRule);

            time_rule: this.allDay

          }



          this.updateTimeRule(newRule)

        }

      }

      if (action === "remove") {

@@ -106,61 +92,60 @@
          this.$notify({

            title: "警告",

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

            type: "warning",

          });

            type: "warning"

          })



          return;

          return

        }



        this.$confirm(

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

          {

            center: true,

            confirmButtonText: "确定",

            cancelButtonText: "取消",

          }

        )

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

          center: true,

          confirmButtonText: "确定",

          cancelButtonText: "取消"

        })

          .then(() => {

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

              if (rsp && rsp.success) {

                this.VideoManageData.getTimeRule();

                this.VideoManageData.getTimeRule()

                // this.VideoManageData.TimeRules.splice(2, 1)

                this.activeTab = this.VideoManageData.TimeRules[0].id;

                this.activeTab = this.VideoManageData.TimeRules[0].id

                this.$notify({

                  type: "success",

                  message: "删除成功!",

                });

                  message: "删除成功!"

                })

              }

            });

            })

          })

          .catch(() => {});

          .catch(() => {})

      }

      if (action == "edit") {

        this.editSlider = true;

        this.editSlider = true

      }

      if (action == "lock") {

        this.editSlider = false;

        this.editSlider = false

      }

    },

    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(async (rsp) => {

          if (rsp && rsp.success) {

            await this.VideoManageData.getTimeRule();

            this.isAdding = false;

            this.activeTab = rsp.data.id;

            await this.VideoManageData.getTimeRule()

            this.isAdding = false

            this.$nextTick(() => {

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

            })

          } else {

            this.isAdding = false;

            this.isAdding = false

          }

        })

        .catch(() => {

          this.isAdding = false;

        });

          this.isAdding = false

        })

    },

    tabClick(item) {

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

@@ -169,26 +154,26 @@
          cancelButtonText: "取消",

          inputValue: item.name,

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

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

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

<style lang="scss">

.sub-time-box {

  padding-right: 30px;

  position: relative;

@@ -265,4 +250,4 @@
  //   z-index: 1;

  // }

}

</style>
</style>