<template>
|
<div class="out-div">
|
<div class="flex-center left-list">
|
<el-input placeholder="请输入内容" v-model="eventName" size="mini" style="width: 280px">
|
<i slot="suffix" class="el-input__icon el-icon-search"></i>
|
</el-input>
|
|
<div class="icon-btn" @click="add" style="margin-left:10px">
|
<i class="el-icon-circle-plus-outline"></i>
|
<span> 新增</span>
|
</div>
|
</div>
|
<div class="max-height" style="overflow-y:auto;overflow-x:hidden">
|
<el-row
|
class="cursor-pointer"
|
v-for="(item, index) in eventList"
|
:key="item.id"
|
@click.native="clickCategory(index, item)"
|
:class="{activeRow:categoryIndex==index}"
|
>
|
<div class="event-name">
|
<b>{{item.name}}</b>
|
<p style="margin-top:8px; color:#9e9e9e">{{item.time_start}} ~ {{item.time_end}}</p>
|
</div>
|
|
<div class="event-btn">
|
<el-switch
|
v-model="item.enable"
|
@change="enabled(item)"
|
:inactive-value="false"
|
:active-value="true"
|
style="margin-top:-5px"
|
></el-switch>
|
<span
|
class="iconfont iconshanchu iconStyle1"
|
style="color:#E74C3C"
|
@click.stop="deleteBase(item)"
|
></span>
|
</div>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { findAll, changeStatus, deleteByid } from "@/api/event";
|
export default {
|
name: "leftList",
|
|
props: {
|
listWidth: {
|
default: "350px",
|
type: String
|
},
|
title: {
|
default: "",
|
type: String
|
},
|
isSelected: {
|
default: false,
|
type: Boolean
|
},
|
type: {
|
default: "",
|
type: String
|
},
|
activeId: {
|
default: "",
|
type: String
|
}
|
},
|
data() {
|
return {
|
activeNames: ["1"],
|
categoryIndex: -1,
|
eventList: [],
|
// 当前点击的事件对象
|
clickBase: {},
|
// 事件名称
|
eventName: ""
|
};
|
},
|
mounted() {
|
this.findAll();
|
},
|
methods: {
|
async enabled(item) {
|
let json = {
|
id: item.id,
|
enable: item.enable
|
};
|
let res = await changeStatus(json);
|
if (res && res.success) {
|
// console.log(res, "更新状态");
|
this.$emit("enabled", item)
|
}
|
// this.$emit("getEvents", item);
|
},
|
async searchSyncTables() {
|
// let res = await selectSyncTables()
|
// this.data = res.data.datalist
|
},
|
async searchLocalTables() {
|
// let res = await selectLocalTables()
|
// this.data = res.data.datalist
|
},
|
add() {
|
this.$emit("add");
|
this.categoryIndex = -1;
|
},
|
clickCategory(index, item) {
|
// 这里我们传入一个当前值
|
this.categoryIndex = index;
|
// 调用切换右侧面板的函数并且切换父组件中isSelected的值让另一个组件清除被选中状态
|
this.clickBase = item;
|
this.$emit("getEvents", item);
|
},
|
edit(item) {
|
this.$emit("changeShow", item, this.type);
|
},
|
async deleteBase(data) {
|
// console.log(data, "要删除的事件推送");
|
this.$confirm("确定要删除该条推送任务吗？", {
|
center: true,
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure"
|
}).then(() => {
|
let json = {
|
type: "formData",
|
id: data.id
|
};
|
deleteByid(json).then(res => {
|
if (res && res.success) {
|
this.$emit("del-list");
|
this.$notify({
|
type: "success",
|
message: "删除成功"
|
})
|
}
|
});
|
})
|
},
|
// 查询事件列表
|
async findAll() {
|
let json = {
|
name: this.eventName
|
};
|
let res = await findAll(json);
|
if (res && res.success) {
|
// console.log(res, "查询所有事件列表");
|
if (this.activeId !== "") {
|
res.data.forEach((element, index) => {
|
if (element.id === this.activeId) {
|
this.categoryIndex = index;
|
}
|
});
|
}
|
this.eventList = res.data;
|
|
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.flex-center {
|
justify-content: left;
|
}
|
.iconStyle1 {
|
font-size: 18px;
|
margin-left: 15px;
|
cursor: pointer;
|
}
|
.activeRow {
|
background: #f8f8f8;
|
}
|
.cursor-pointer {
|
cursor: pointer;
|
height: 75px;
|
}
|
.max-height {
|
position: absolute;
|
left: 0px;
|
width: 355px;
|
height: 100%;
|
|
margin-top: 20px;
|
border-top: 1px solid #e0e0e0;
|
border-bottom: 1px solid #e0e0e0;
|
}
|
.out-div {
|
width: 350px;
|
text-align: left;
|
padding-top: 20px;
|
//height: 50em;
|
.left-list {
|
position: absolute;
|
left: 15px;
|
top: 10px;
|
}
|
}
|
.event-name {
|
padding: 17px;
|
font-size: 14px;
|
}
|
.event-btn {
|
position: absolute;
|
left: 79%;
|
top: 18%;
|
}
|
.icon-btn {
|
i {
|
font-size: 18px;
|
position: relative;
|
top: 2px;
|
}
|
span {
|
font-size: 14px;
|
}
|
display: inline;
|
color: #3d68e1;
|
line-height: 38px;
|
margin-left: 10px;
|
cursor: pointer;
|
}
|
</style>
|
