<template>
<div id="PushRules">
<div id="PRTop">
<el-input
placeholder="请输入站点名称"
v-model="PRValue"
clearable
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="loadGridData()"
v-has="'Search'"
>搜索</el-button
>
<el-button
type="primary"
icon="el-icon-plus"
@click="Add()"
v-has="'m3-2-b1'"
>新增推送规则</el-button
>
</div>
<div
id="PRCentent"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.8)"
>
<!-- element-loading-background="rgba(0, 0, 0, 0.8)" -->
<el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)">
<el-table-column prop="platForm" label="平台编号"></el-table-column>
<el-table-column prop="platFormName" label="平台名称"></el-table-column>
<el-table-column prop="pushFrequency" label="推送频率">
<template slot-scope="scope">
{{ scope.row.pushFrequency | timefilter }}
</template>
</el-table-column>
<el-table-column
prop="startTime"
label="推送开始时间"
></el-table-column>
<el-table-column prop="endTime" label="推送结束时间"></el-table-column>
<el-table-column prop="createTime" label="创建时间"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="Edit(scope.$index, scope.row)"
style="margin:0 10px"
v-has="'m3-2-b2'"
>修改</el-button
>
<el-button
type="text"
size="small"
@click="Del(scope.$index, scope.row)"
style="margin:0 10px"
v-has="'m3-2-b3'"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="PRSizeChange"
@current-change="PRCurrentChange"
:current-page="PRPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="PRSize"
layout="total, sizes, prev, pager, next, jumper"
:total="PRDatagridDataLength"
style="margin-top:10px;"
></el-pagination>
</div>
<el-dialog :title="DialogTitle" :visible.sync="dialogVisible" width="500px">
<div class="DialogList">
<span class="DialogListName"
>平 台 名 称 :</span
>
<el-select
v-model="platForm"
filterable
placeholder="请选择平台"
:disabled="!isAdd"
@change="platFormChange"
>
<el-option
v-for="item in platFormData"
:key="item.index"
:label="item.name"
:value="item.platformCode"
></el-option>
</el-select>
</div>
<div class="DialogList">
<span class="DialogListName">推送频率(秒):</span>
<el-input
placeholder="请输入站点名称"
v-model="pushFrequency"
clearable
type="number"
></el-input>
</div>
<div class="DialogList">
<span class="DialogListName"
>开 始 推 送 :</span
>
<el-time-picker
v-model="startTime"
value-format="HH:mm:ss"
></el-time-picker>
</div>
<div class="DialogList">
<span class="DialogListName"
>结 束 推 送 :</span
>
<el-time-picker
v-model="endTime"
value-format="HH:mm:ss"
></el-time-picker>
</div>
<div class="Dialog2List">
<a
href="javascript:void(0)"
class="DialogListButton"
@click="dialogVisible = false"
>取 消</a
>
<a href="javascript:void(0)" class="DialogListButton2" @click="Updata()"
>确 定</a
>
</div>
</el-dialog>
</div>
</template>
<script>
import { message } from "./../../util/item";
export default {
name: "PushRules",
data: function() {
return {
loading: false, //加载中 状态
PRValue: "", //顶部模糊搜索
TableData: [], //表格数据
PRPage: 1, //分页默认显示页
PRDatagridDataLength: 0, //分页上显示的数据总条数
PRSize: 10, //分页上显示的每页的条数
dialogVisible: false, //dialog状态
isAdd: true, //判断当前是新增还是修改，true为新增
DialogTitle: "", //弹窗得标题
platForm: "", //平台编号
platFormData: [], //平台编号渲染数据
platFormName: "", //平台名称
pushFrequency: 28800, //推送频率
startTime: "08:00:00", //时间
endTime: "08:00:00" //时间
};
},
methods: {
PRSizeChange(val) {
// 改变每页的条数
this.PRSize = val;
this.loadGridData();
},
PRCurrentChange(val) {
console.log(val);
//改变页数
this.PRPage = val;
this.loadGridData();
},
// 加载表格数据
loadGridData() {
this.loading = true;
this.TableData = [];
this.$http
.post(this.nozzle.warnRuleListPushRule, {
current: this.PRPage,
size: this.PRSize,
data: {
platFormName: this.PRValue //模糊搜索
}
})
.then(response => {
this.loading = false;
if (response.data.code === 200) {
this.TableData = response.data.data.records;
this.PRDatagridDataLength = response.data.data.total;
} else {
message(response);
}
})
.catch(response => {
this.loading = false;
message(response);
});
},
// 修改
Edit(index, rows) {
this.isAdd = false;
this.DialogTitle = rows.platFormName;
this.dialogVisible = true;
this.platFormData = [
{
platformCode: rows.platForm,
name: rows.platFormName
}
];
this.platForm = rows.platForm;
this.pushFrequency = rows.pushFrequency;
this.startTime = rows.startTime;
this.endTime = rows.endTime;
},
// 新增
Add() {
this.isAdd = true;
// 获取未设置推送规则得平台，如果没有则阻止其操作
this.$http
.post(this.nozzle.warnRuleListNonConfigPlatform, {
data: {}
})
.then(response => {
if (response.data.code === 200) {
if (response.data.data.length == 0) {
// 无法新增
this.$message({
type: "warning",
message: "暂无未配置推送规则的平台"
});
} else {
// 才能新增
this.DialogTitle = "新增推送规则";
this.dialogVisible = true;
// 设置默认值
this.platFormData = response.data.data;
this.platForm = response.data.data[0].platformCode;
this.platFormName = response.data.data[0].name;
this.pushFrequency = 28800;
this.startTime = "08:00:00";
this.endTime = "22:00:00";
}
} else {
message(response);
}
})
.catch(response => {
message(response);
});
},
// 选择项目
platFormChange(vId) {
let obj = {};
// obj = this.platFormData.find(item => {
// //这里的userList就是上面遍历的数据源
// return item.platForm === vId; //筛选出匹配数据
// });
for (var i = 0; i < this.platFormData.length; i++) {
if (this.platFormData[i].platformCode == vId) {
this.platFormName = this.platFormData[i].name; //我这边的name就是对应label的
console.log(this.platFormName);
}
}
},
// 删除
Del(index, rows) {
this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
var DelID = [];
DelID.push(rows.id);
this.$http
.post(this.nozzle.warnRuleInsertDeleteWarnPushRule, DelID)
.then(response => {
message(response);
this.dialogVisible = false;
this.loadGridData();
})
.catch(response => {
message(response);
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
},
// 提交
Updata() {
var PostUrl = "",
params2;
if (this.isAdd) {
// 新增时：
PostUrl = this.nozzle.warnRuleInsertWarnPushRule;
params2 = {
data: {
platForm: this.platForm, //平台编号
platFormName: this.platFormName, //平台名称
pushFrequency: this.pushFrequency, //推送频率
startTime: this.startTime, //推送起始时间
endTime: this.endTime //推送结束时间
}
};
} else {
// 修改时：
PostUrl = this.nozzle.warnRuleInsertUpdateWarnPushRule;
params2 = {
data: {
platForm: this.platForm, //平台编号
pushFrequency: this.pushFrequency, //推送频率
startTime: this.startTime, //推送起始时间
endTime: this.endTime //推送结束时间
}
};
}
this.$http
.post(PostUrl, params2)
.then(response => {
message(response);
this.dialogVisible = false;
this.loadGridData();
})
.catch(response => {
message(response);
});
}
},
mounted: function() {
this.loadGridData();
}
};
</script>
<style scoped>
#PushRules {
width: 100%;
height: 100%;
}
/* 顶部搜索 */
#PRTop {
width: 100%;
height: 60px;
line-height: 60px;
text-align: left;
}
#PRTop .el-input {
width: 250px;
margin: 0 10px;
} /* 表格 */
#PRCentent {
width: 100%;
height: calc(100% - 70px);
margin-top: 10px;
/* background: rgba(53, 53, 53, 0.5); */
}
/* 弹窗 */
.DialogList {
width: 100%;
height: 60px;
line-height: 60px;
box-sizing: border-box;
text-align: center;
}
.DialogList .el-input {
width: 217px;
}
.DialogListName {
display: inline-block;
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
}
.DialogListButton {
height: 40px;
width: 100px;
display: inline-block;
line-height: 40px;
border-radius: 2px;
text-decoration: none;
color: rgb(0, 111, 255);
background: rgba(255, 255, 255, 0);
border: 1px solid rgb(0, 111, 255);
margin: 0 30px;
}
.DialogListButton2 {
height: 40px;
width: 100px;
display: inline-block;
line-height: 40px;
border-radius: 2px;
text-decoration: none;
color: white;
background: rgb(0, 111, 255);
border: 1px solid rgb(0, 111, 255);
margin: 0 30px;
}
</style>
<style>
.el-dialog__header {
text-align: left !important;
}
</style>
