<template>
|
<div class="flex-box bg-w">
|
<div class="ev-left-list">
|
<div class="resize-bar"></div>
|
<div class="resize-line"></div>
|
<div class="resize-save">
|
<leftList
|
ref="baseSync"
|
listWidth="350px"
|
type="1"
|
:isSelected="isSelected"
|
:activeId="selectedId"
|
@getEvents="getEventList"
|
@del-list="delList"
|
@add="changeToAdd"
|
@enabled="eventSwitch"
|
></leftList>
|
</div>
|
</div>
|
|
<div v-show="isShowRight" style="height:100vh;overflow-y:auto">
|
<rightEvent
|
ref="right"
|
:eventObject="eventObject"
|
@onCancle="onCancle"
|
@updateList="updateList"
|
></rightEvent>
|
</div>
|
</div>
|
</template>
|
<script>
|
import leftList from "./LeftList";
|
import rightEvent from "./RightEvent";
|
import { getById } from "@/api/event";
|
|
export default {
|
name: "eventPush",
|
components: {
|
leftList,
|
rightEvent
|
},
|
props: {},
|
data() {
|
return {
|
// 是否展示右侧
|
isShowRight: false,
|
// 是否选中
|
isSelected: false,
|
// 当前选中的事件
|
eventObject: {},
|
selectedId: ""
|
};
|
},
|
methods: {
|
eventSwitch(e) {
|
if (this.eventObject.id) {
|
if (e.id === this.eventObject.id) {
|
this.eventObject.enable = e.enable
|
}
|
}
|
// console.log(e)
|
},
|
/**
|
* 添加事件推送
|
*/
|
changeToAdd() {
|
this.$refs.right.reAdd();
|
this.isShowRight = true;
|
},
|
// 获取事件列表
|
async getEventList(data) {
|
// console.log(data, "当前选中的");
|
let json = {
|
id: data.id
|
};
|
let res = await getById(json);
|
if (res && res.success) {
|
this.eventObject = res.data;
|
this.isShowRight = true;
|
}
|
},
|
// 保存成功后的回调
|
updateList(id) {
|
this.$refs.baseSync.findAll();
|
this.getEventList({ id: id });
|
this.selectedId = id;
|
},
|
delList() {
|
this.$refs.baseSync.findAll();
|
this.isShowRight = false;
|
},
|
onCancle() {
|
this.isShowRight = false;
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.flex-box {
|
display: flex;
|
height: 100%;
|
}
|
.ev-left-list {
|
//border-right: 1px solid #e0e0e0;
|
//min-width: 384px;
|
//height: 100vh;
|
height: 100vh;
|
position: relative;
|
}
|
.resize-save {
|
position: absolute;
|
top: 0;
|
right: 5px;
|
bottom: 0;
|
left: 0;
|
padding: 14px;
|
overflow-x: hidden;
|
}
|
.resize-bar {
|
width: 370px;
|
height: inherit;
|
resize: horizontal;
|
cursor: ew-resize;
|
opacity: 0;
|
overflow: scroll;
|
max-width: 500px; //设定最大拉伸长度
|
min-width: 33px; //设定最小宽度
|
}
|
/* 拖拽线 */
|
.resize-line {
|
position: absolute;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
border-right: 2px solid #efefef;
|
border-left: 1px solid #e0e0e0;
|
pointer-events: none;
|
}
|
.resize-bar:hover ~ .resize-line,
|
.resize-bar:active ~ .resize-line {
|
border-left: 1px dashed skyblue;
|
}
|
.resize-bar::-webkit-scrollbar {
|
width: 200px;
|
height: inherit;
|
}
|
|
/* Firefox只有下面一小块区域可以拉伸 */
|
@supports (-moz-user-select: none) {
|
.resize-bar:hover ~ .resize-line,
|
.resize-bar:active ~ .resize-line {
|
border-left: 1px solid #bbb;
|
}
|
.resize-bar:hover ~ .resize-line::after,
|
.resize-bar:active ~ .resize-line::after {
|
content: "";
|
position: absolute;
|
width: 16px;
|
height: 16px;
|
bottom: 0;
|
right: -8px;
|
// background: url(./resize.svg);
|
background-size: 100% 100%;
|
}
|
}
|
.ant-divider,
|
.ant-divider-vertical {
|
margin: 0 8px;
|
display: inline-block;
|
height: 100%;
|
width: 1px;
|
vertical-align: middle;
|
position: relative;
|
top: -0.06em;
|
}
|
</style>
|
