Newer
Older
operation_web / src / components / configure / PushRules.vue
<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="推送频率(秒)"
        ></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"
          >平&nbsp;台&nbsp;名&nbsp;称&nbsp;&nbsp;:</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"
          >开&nbsp;始&nbsp;推&nbsp;送&nbsp;&nbsp;:</span
        >
        <el-time-picker
          v-model="startTime"
          value-format="HH:mm:ss"
        ></el-time-picker>
      </div>
      <div class="DialogList">
        <span class="DialogListName"
          >结&nbsp;束&nbsp;推&nbsp;送&nbsp;&nbsp;:</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"
          >取&nbsp;&nbsp;&nbsp;&nbsp;消</a
        >
        <a href="javascript:void(0)" class="DialogListButton2" @click="Updata()"
          >确&nbsp;&nbsp;&nbsp;&nbsp;定</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>