<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.activeTab = rsp.data.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>
|
