Win.Sfs.SmartSettlementSystem.PG/vue/src/views/pg-fis/basedate/logRemind/index.vue

<!--系统日志信息页-->
<template>
  <div class="cr-body-content">
    <div ref="box">
    <flexbox class="content-header">
      <el-form
        :model="listQuery"
        ref="queryForm"
        v-show="showSearch"
        :inline="true"
      >
        <el-form-item label="日志标题" prop="LogTitle">
          <el-input
            v-model="listQuery.LogTitle"
            placeholder="请输入日志标题"
            clearable
            size="small"
            style="width: 150px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="日志类别" prop="LogType">
          <el-select
            v-model="listQuery.LogType"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option label="报文传输异常" :value="1"></el-option>
            <el-option label="报文转换异常" :value="2"></el-option>
            <el-option label="报文解析、校验异常" :value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="严重程度" prop="SeriousLevel">
          <el-select
            v-model="listQuery.SeriousLevel"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option label="轻微" :value="1"></el-option>
            <el-option label="一般" :value="2"></el-option>
            <el-option label="严重" :value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleFilter"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery('queryForm')"
            >重置</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            style="margin-left: 15px"
            @click="handleDownload()"
            >导出(Excel)查询信息
          </el-button>
        </el-form-item>
      </el-form>
    </flexbox>
    </div>
    <div class="l-table">
      <!--表格渲染-->
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        class="cr-table"
        :data="list"
        :height="tableHeight"
        :cell-style="cellStyle"
        :header-cell-style="headerRowStyle"
        size="small"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column
          v-for="(item, index) in getDefaultField"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
          :formatter="fieldFormatter"
          sortable="custom"
          show-overflow-tooltip
          :gutter="0"
        >
          <template slot="header" slot-scope="scope">
            {{ scope.column.label }}
          </template>
        </el-table-column >
        <el-table-column
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="primary" size="small">处理</el-button><!-- type="text" -->
              <el-button @click="handleIgnore(scope.row)" type="primary" size="small">忽略</el-button>
            </template>
      </el-table-column>
      </el-table>
    </div>

    <div class="table-footer">
      <!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"-->
      <pagination
        v-show="totalCount > 0"
        :total="totalCount"
        :page.sync="page"
        :limit.sync="listQuery.MaxResultCount"
        @pagination="getList"
      />
      <!-- 导入Excel组件 -->
      <importExcel
        ref="importexcel"
        :show="showExcelImport"
        :crmType="crmType"
        @close="importExcelData"
      />
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
import CRMTableHead from "../../components/CRMTableHead";
import importExcel from "@/components/ImportExcel-vw";
import Lockr from "lockr";
import moment from "moment";
import { mapGetters } from "vuex";
import { downloadFile } from "@/utils/crmindex.js";

//组件计量单位
const bomUnit = [
  { key: 0, display_name: "PC" },
  { key: 1, display_name: "TON" },
  { key: 2, display_name: "Other" },
];
const projectTypeKeyValue = bomUnit.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name;
  return acc;
}, {});

export default {
  name: "BillM100",
  components: { Pagination, CRMTableHead, importExcel },
  directives: { permission },
  filters: {
    IsCustomerSignFilter(status) {
      //翻译是否签字
      const statusMap = {
        true: "是",
        false: "否",
      };
      return statusMap[status];
    },
  },
  props: {
    customerInfos: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      crmType: "bomdatabase",
      versionValue: "",
      versionList: [], //版本列表
      searchContent: "", // 输入内容
      showExcelImport: false,
      form: {},
      drawer: false,
      list: null,
      totalCount: 0,
      listLoading: true,
      customerInfo: {
        bomId: "",
      },
      // 高级搜索
      filterObj: {
        type: Object,
        default: () => {
          return {};
        },
      },
      listQuery: {
        SkipCount: 0,
        MaxResultCount: 15,
        LogTitle: undefined,
        LogType: undefined,
        SeriousLevel: undefined,
      },
      operationQuery:{
        id:undefined,
      },
      page: 1,
      // 显示搜索条件
      showSearch: true,
      bomUnit,
      multipleSelection: [],
      drawer: false,
      tableHeight: document.documentElement.clientHeight - 260,
    };
  },
  mounted() {
    this.$nextTick(() => { 
        var offsetHei = document.documentElement.clientHeight;
        //console.log(offsetHei);
        let boxH = this.$refs.box.offsetHeight;
        this.tableHeight = offsetHei - boxH - 57 - 79;//57为footer高度，79为页面上部标签高度
    });
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapGetters(["messageNum"]),
    getDefaultField() {
      var tempsTabs = [];
      tempsTabs.push({ label: "日志类别", prop: "logType", width: 120 });
      tempsTabs.push({ label: "日志标题", prop: "logTitle", width: 150 });
      tempsTabs.push({
        label: "严重程度",
        prop: "seriousLevel",
        width: 100,
      });
      tempsTabs.push({ label: "创建日期", prop: "creationTime", width: 120 });
      tempsTabs.push({
        label: "日志描述",
        prop: "logDesc",
        width: 400,
      });

      return tempsTabs;
    },
  },
  methods: {
    /** 导出功能 */
    handleDownload() {
      this.listLoading = true;
      console.log("系统日志导出条件："+JSON.stringify(this.listQuery))
      this.$axios
        .posts("/api/newjit/log-remind/export", this.listQuery)
        .then((res) => {
          let filename = res.item;
          this.$axios
            .BolbGets("/api/newjit/exclude-part-cfg/download/" + filename)
            .then((response) => {
              if (filename.indexOf("_") != -1) {
                let downName =
                  filename.slice(0, filename.lastIndexOf("_")) +
                  filename.slice(filename.lastIndexOf("."));
                downloadFile(response, downName);
                this.$notify({
                  title: "成功",
                  message: "数据-导出成功！",
                  type: "success",
                  duration: 2000,
                });
              } else {
                downloadFile(response, filename);
                this.$notify({
                  title: "成功",
                  message: "数据-导出成功！",
                  type: "success",
                  duration: 2000,
                });
              }
              this.listLoading = false;
            });
        });
    },
    /** 重置按钮操作 */
    resetQuery(refName) {
      this.$refs[refName].resetFields();
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.listQuery.SkipCount = 1;
      this.getList();
    },
    selectValue(params) {
      //版本下拉选择
      this.versionValue = params.value;
      this.getList();
    },

    selectOptionsChange(item) {
      this.getList();
    },
    importExcelData() {
      //关闭导入窗体时调用
      this.showExcelImport = false;
      //this.getList();
    },

    /** 刷新列表 */
    handleHandle(data) {
      if (data.type !== "edit") {
        this.getList();
      }
    },
    /** 格式化字段 */
    fieldFormatter(row, column) {
      if (column.property === "seriousLevel") {
        return { 1: "轻微", 2: "一般", 3: "严重" }[row[column.property]];
      }
      if (column.property === "logType") {
        return {
          1: "报文传输异常",
          2: "报文转换异常",
          3: "报文解析、校验异常",
        }[row[column.property]];
      }
      if (column.property == "creationTime") {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      }
      return row[column.property] || "--";
    },
    roleFilter(type) {
      return projectTypeKeyValue[type];
    },
    getList() {
      this.listLoading = true;
      this.listQuery.SkipCount = (this.page - 1) * 10;
      this.$axios
        .gets("/api/newjit/log-remind/list", this.listQuery)
        .then((response) => {
          this.list = response.items;
          this.totalCount = response.totalCount;
          this.$store.commit("SET_MESSAGENUM", this.totalCount);
          setTimeout(() => {
            //大数据量加载时
            this.listLoading = false;
          }, 500);
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    handleFilter() {
      this.page = 1;
      this.getList();
    },

    sortChange(data) {
      const { prop, order } = data;
      if (!prop || !order) {
        this.handleFilter();
        return;
      }
      this.listQuery.Sorting = prop + " " + order;
      this.handleFilter();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === "qty") {
        return { textAlign: "right" };
      } else {
        return { textAlign: "left" };
      }
    },
    /** 通过回调控制表头style */
    headerRowStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === "qty") {
        return { textAlign: "right", background: "#FAFAFA" };
      } else {
        return { textAlign: "left", background: "#FAFAFA" };
      }
    },
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    handleEdit(row)
    {
      this.operationQuery.id = row.id;
      this.$axios
        .posts("/api/newjit/log-remind/do-process", this.operationQuery)
        .then((response) => {
          if(response.status === "true")
          {
            this.$notify({
                  title: "成功",
                  message: "处理成功！",
                  type: "success",
                  duration: 2000,
                });
          }
          else
          {
            this.$notify({
                  title: "失败",
                  message: "处理失败！",
                  type: "success",
                  duration: 2000,
                });
          }
                
        })
        .catch(() => {
                this.$notify({
                  title: "失败",
                  message: "处理失败！",
                  type: "warning",
                  duration: 2000,
                });
        });
    },
    handleIgnore(row)
    {
      this.operationQuery.id = row.id;
      this.$axios
        .posts("/api/newjit/log-remind/do-ignore", this.operationQuery)
        .then((response) => {
          if(response.status === "true")
          {
            this.$notify({
                  title: "成功",
                  message: "忽略成功！",
                  type: "success",
                  duration: 2000,
                });
          }
          else
          {
            this.$notify({
                  title: "失败",
                  message: "忽略失败！",
                  type: "success",
                  duration: 2000,
                });
          }
        })
        .catch(() => {
                this.$notify({
                  title: "失败",
                  message: "忽略失败！",
                  type: "warning",
                  duration: 2000,
                });
        });
    }
  },
};
</script>


<style lang="scss" scoped>
@import "../../../pg-fis/styles/crmtable.scss";
</style>