From 79f521ce63909fff82de9f624911d6c63e84fb53 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 23 三月 2022 21:08:45 +0800
Subject: [PATCH] 修复时间规则新增后视图未动态更新的bug
---
src/pages/cameraAccess/components/TimeSlider.vue | 129 +++++++++++++++++++------------------------
1 files changed, 57 insertions(+), 72 deletions(-)
diff --git a/src/pages/cameraAccess/components/TimeSlider.vue b/src/pages/cameraAccess/components/TimeSlider.vue
index 0f326d3..f84883f 100644
--- a/src/pages/cameraAccess/components/TimeSlider.vue
+++ b/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>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0