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