spfm-market-front/src/pages/main/longProcessVis/processAlarmInfoQuery.vue

<template>
  <div class="container">
    <fullscreen :fullscreen.sync="fullscreen" class="container-box">
      <div class="titbox">
        <h2 class="font-ui">超时工单预警列表</h2>
        <div>
          <i class="el-icon-refresh" @click="iconCli(1)"></i>
          <i class="el-icon-full-screen" @click="iconCli(2)"></i>
          <!--                    <i class="el-icon-folder-opened"></i>-->
          <!--                    <i class="el-icon-view"></i>-->
          <!--                    <i class="el-icon-more"></i>-->
        </div>
      </div>
      <div class="search">
        <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
      </div>
      <div class="tabbox">
        <el-table
          height="calc(100% - 40px)"
          v-loading="loading"
          class="com-table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="processWOID"
            label="工单编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="alarmInfoId"
            show-overflow-tooltip
            label="告警信息编号"
          >
          </el-table-column>
          <el-table-column
            prop="alarmType"
            label="告警类型"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="center" prop="description" label="告警内容">
          </el-table-column>
          <el-table-column
            width="150"
            align="center"
            prop="alarmTime"
            label="告警时间"
          >
          </el-table-column>
          <el-table-column align="center" prop="alarmStatus" label="告警状态">
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </fullscreen>
  </div>
</template>
<script>
import mySearch from "../../../components/search";

export default {
  components: {
    mySearch,
  },
  data() {
    return {
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [],
      searchList: [
        {
          type: "input",
          tit: "CRM订单号",
          value: "",
          width: "100%",
          options: [],
        },
      ],
      params: {
        crmProcessWOID: "1",
      },
      loading: false,
    };
  },
  methods: {
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.crmProcessWOID = v[0]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      this.loading = true;
      this.pageSize = n;
      this.$http({
        url: "/compvis/ipv/processWoAlarmInfoQuery",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
      });
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
  },
  mounted() {
    if (this.$route.params.crmProcessWOID) {
      this.searchList[0].value = this.$route.params.crmProcessWOID;
      this.params.crmProcessWOID = this.$route.params.crmProcessWOID;
    } else {
      this.searchList[0].value = "";
      this.params.crmProcessWOID = "";
    }
    this.getList(this.params, this.pageSize);
  },
  created() {},
  watch: {
    $route(to, from) {
      if (from.name == "complaintQuery" && this.$route.params.crmProcessWOID) {
        this.searchList[0].value = this.$route.params.crmProcessWOID;
        this.params.crmProcessWOID = this.$route.params.crmProcessWOID;
        this.getList(this.params, this.pageSize);
      } else {
        this.searchList[0].value = "";
        this.params.crmProcessWOID = "";
      }
    },
  },
};
</script>
<style>
.el-input__suffix {
  cursor: pointer;
}
</style>
<style scoped lang="scss">
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}
</style>