luohe_operation/src/pages/index/components/performance_assess.vue

<template>
  <div class="body-wrapper">
    <el-tabs  v-model="activeName">
      <el-tab-pane label="收费员工作统计" name="收费员工作统计">
        <el-form class="form-wrapper" :inline="true" :model="formInline1" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="收费员: ">
                <el-input v-model="formInline1.tollCollector" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit1">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData1">
          <el-table-column v-for="(item, index) in columns1" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="prev, pager, next" :total="total1" @current-change="handlePageChange1"
                         :current-page.sync="pageNum1" :page-size.sync="pageSize1">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="稽查员稽查工作统计" name="稽查员稽查工作统计">
        <el-form class="form-wrapper" :inline="true" :model="formInline2" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="稽查员姓名: ">
                <el-select clearable v-model="formInline2.id" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in peopleOptions"
                    :key="index"
                    :label="item.tollmanName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit2">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData2">
          <el-table-column v-for="(item, index) in columns2" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="prev, pager, next" :total="total1" @current-change="handlePageChange2"
                         :current-page.sync="pageNum2" :page-size.sync="pageSize2">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="收费员被稽查统计" name="收费员被稽查统计">
        <el-form class="form-wrapper" :inline="true" :model="formInline3" style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="收费员:">
                <el-input v-model="formInline3.tollCollector" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="稽查员:">
                <el-input v-model="formInline3.inspector" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" class="query-btn" @click="onSubmit3">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData3">
          <el-table-column v-for="(item, index) in columns3" :key="index" :label="item.label" :prop="item.key">
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="prev, pager, next" :total="total3" @current-change="handlePageChange3"
                         :current-page.sync="pageNum3" :page-size.sync="pageSize3">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import api from "@/api/audit.js";
import api_l from "@/api/article_liao.js";
import dictionary from "@/util/dictionary";

export default {
  components: {},
  data() {
    return {
      activeName: '收费员工作统计',
      columns1: [
        {
          label: '收费员',
          key: 'inspectionManName'
        },
        {
          label: '收费员收入',
          key: 'tollRevenue'
        },
        {
          label: '预收款',
          key: 'advancePayment'
        },
        {
          label: '欠费追缴金额',
          key: 'recoveryAmount'
        },
        {
          label: '录入次数',
          key: 'recordIn'
        },
        {
          label: '录出次数',
          key: 'recordOut'
        },
      ],
      tableData1: [],
      peopleOptions:[],
      total1: 0,
      pageSize1: 10,
      pageNum1: 1,
      formInline1: {
        tollCollector: ''
      },
      columns2: [
        {
          label: '稽查员',
          key: 'inspectionManName'
        },
        {
          label: '稽查次数',
          key: 'inspectionCount'
        },
        {
          label: '平均处理时间(/分钟)',
          key: 'perMinutes'
        },
      ],
      tableData2: [],
      total2: 0,
      pageSize2: 10,
      pageNum2: 1,
      formInline2: {
        inspector: '',
        inspectionmanId:'',
        rollmanId:'',
        inspectionManName:'',
        inspectionCount:'',
        perMinutes:''
      },
      columns3: [
        {
          label: '收费员',
          key: 'inspectionManName'
        },
        {
          label: '稽查员',
          key: 'tollManName'
        },
        {
          label: '被稽查次数',
          key: 'inspectionCount'
        },
      ],
      tableData3: [],
      total3: 0,
      pageSize3: 10,
      pageNum3: 1,
      formInline3: {
        tollCollector: '',
        inspector:''
      },
    }
  },
  mounted() {
     this.getTableData1()
     this.getTableData2()
     this.getTableData3()
     this.getPeopleName()
  },
  watch: {
  },
  methods: {
    onSubmit1() {
      this.pageNum1 = 1
      api_l.optPerformanceassesspage({rollmanId: this.formInline1.tollCollector}).then(res => {
        this.tableData1 = res.data.records
      })
    },
    onSubmit2() {
      const {pageNum2, pageSize2} = this
      api_l.optPerformanceAssessStat1page({inspectionmanId:this.formInline2.inspectionmanId}).then(res => {
        this.tableData2 = res.data.records
        this.total2 = res.data.total
      })
    },
    onSubmit3() {
      const {pageNum3, pageSize3} = this
      api_l.optPerformanceAssessStat2page({inspectionmanId:this.formInline2.inspectionmanId,rollmanId:this.formInline2.rollmanId}).then(res => {
        this.tableData2 = res.data.records
        this.total2 = res.data.total
      })
    },
    handlePageChange1() {
      this.getTableData1()
    },
    getPeopleName(){

    },
    getTableData1() {
      const {pageNum1, pageSize1} = this
      api_l.optPerformanceassesspage({}).then(res => {
        this.tableData1 = res.data.records
        this.total1 = res.data.total
      })
    },
    handlePageChange2() {
      this.getTableData2()
    },
    getTableData2() {
      const {pageNum2, pageSize2} = this
      api_l.optPerformanceAssessStat1page({}).then(res => {
        this.tableData2 = res.data.records
        this.total2 = res.data.total
      })
    },
    handlePageChange3() {
      this.getTableData3()
    },
    getTableData3() {
      const {pageNum3, pageSize3} = this
      api_l.optPerformanceAssessStat2page({}).then(res => {
        this.tableData3 = res.data.records
        this.total3 = res.data.total
      })
    },
  }
}
</script>
<style  lang="scss" scoped>
.body-wrapper {
  padding: 20px;
  .button-block{
    text-align: right;
    margin-bottom: 20px;
  }
  .table-pagination{
    text-align: right;
  }
  .search-card{
    margin-bottom: 20px;
    text-align: center;
    .input-wrapper{
      width: 36%;
    }
  }

  .audit-dialog{
    .mg-bt{
      margin-bottom: 24px;
    }
    .label{
      text-align: right;
    }
    .form-div{
      /deep/ .el-input__inner{
        height: 35px;
        width: 90%;
        border: 1px solid #a6a5a5;
      }
    }
  }
}
</style>