drp-ui/src/views/monitor/system/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="来源系统">
        <el-select clearable v-model="queryParams.busDomain" size="mini" style="width: 200px"
                   @keyup.enter.native="handleQuery" clearable>
          <el-option v-for="dict in dict.type.oa_busdomian_desc" :key="dict.value" :label="dict.label"
                     :value="dict.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="OA单据信息" prop="oaIdentity">
        <el-input
          v-model="queryParams.oaIdentity"
          placeholder="请输入OA对应单据信息"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery" plain>搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" type="info" @click="resetQuery" plain>重置</el-button>
        <el-button icon="el-icon-video-play" size="mini" type="success" @click="getDatas" plain>更新数据</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="serviceList" border :height="tableHeight">
      <el-table-column label="业务域" min-width="80" align="center" prop="busDomain" :formatter="formatterBusDomain"/>
      <el-table-column label="业务类型" min-width="60" align="center" prop="monitorType">
        <template slot-scope="scope">
          <span v-if="scope.row.monitorType == 'flow'">流程</span>
          <span v-if="scope.row.monitorType == 'todo'">待办</span>
        </template>
      </el-table-column>
      <el-table-column label="OA单据信息" min-width="120" align="center" prop="oaIdentity"/>
      <el-table-column label="业务域单据信息" min-width="120" align="center" prop="docIdentity"/>
      <el-table-column label="所属模块" min-width="80" align="center" prop="busModule" :show-overflow-tooltip="true"/>
      <el-table-column label="状态释意" min-width="80" align="center" prop="busStatusName"/>
      <el-table-column label="问题原因" min-width="180" align="center" prop="errorMsg"/>
      <el-table-column label="创建时间" min-width="100" align="center" prop="createTime" :show-overflow-tooltip="true"/>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="80"
      >
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="disposeData(scope.row)">处理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import {list, getDatas, detail, disposeData} from "@/api/monitor/system";

  export default {
    dicts: ['oa_todo_type', 'oa_nc_bill_type', 'oa_flow_status', 'oa_busdomian_desc'],
    computed: {
      tableHeight:{
        get(){
          console.log(window,'window');
          return window.innerHeight - 220;
        },
        set(){},
      }
    },
    data() {
      return {
        //遮罩层
        loading: true,
        //服务数据表
        serviceList: [],
        //显示搜索条件
        showSearch: true,
        //总条数
        total: 0,
        //查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          busDomain: '',
          oaIdentity: ''
        }
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      //获取数据列表
      getList() {
        this.loading = true;
        list(this.queryParams).then(res => {
          this.serviceList = res.rows;
          this.total = res.total;
          this.loading = false;
        });
      },
      //刷新数据
      getDatas() {
        this.loading = true;
        getDatas().then(res => {
          if (res.code === 200) {
            this.loading = false
            this.$message.success(res.msg);
            this.getList();
          } else {
            this.$message.error(res.msg)
          }
        }).then(() => {
          this.loading = false
        }).catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
      },
      //处理数据
      disposeData(row) {
        this.loading = true;
        const data = {'id': row.id};
        disposeData(data).then(res => {
          if (res.code === 200) {
            this.loading = false
            this.$message.success(res.msg);
            // this.getDatas();
          } else {
            this.$message.error(res.msg)
          }
        }).then(() => {
          this.loading = false
        }).catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
      },
      formatterBusDomain(row) {
        switch (row.busDomain) {
          case 'NC_MOBLIE_APPROVE':
            return 'NC-移动审批'
          case 'NC_PAY_ORDER':
            return 'NC-付款申请单'
          case 'BIP_CONTRACT':
            return '中台-采购合同'
          case 'DRP':
            return 'DRP-采购协同子系统'
          case 'EHR':
            return 'EHR-人力资源管理系统'
          case 'OA':
            return 'OA-办公管理系统'
        }
      },
      //tab页签点击事件
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //查询
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      //重置
      resetQuery() {
        this.queryParams.busDomain = ''
        this.queryParams.oaIdentity = ''
        this.resetForm("queryForm");
        this.handleQuery();
      }
    }
  }
</script>

<style>

</style>