luohe_fronted/src/pages/index/components/employee_qualification.vue

<template>
  <div class="body-wrapper">
    <div class="search-card">
      <h5>从业人员资质</h5>
    </div>
    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
                     :current-page.sync="pageNum" :page-size.sync="pageSize">
      </el-pagination>
    </div>
    <br>

    <div class="search-card">
      <h5>从业人员考核管理</h5>
    </div>
    <el-table :data="tableData2" style="background: #2a2a2a;border-color: #333;">
      <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 :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
                     :current-page.sync="pageNum2" :page-size.sync="pageSize2">
      </el-pagination>
    </div>
    <br>



  </div>
</template>
<script>
import api from "@/api/article_liao";
import piechart from "@/components/pieChart";

export default {
  components: {
    piechart
  },
  data() {
    return {
      columns: [
        {
          label: '人员姓名',
          key: 'mname'
        },
        {
          label: '资质名称',
          key: 'qualificationName'
        },
        // {
        //   label: '有效时间',
        //   key: ''
        // },
        {
          label: '考核结果',
          key: 'assessmentResults'
        },
        {
          label: '考核时间',
          key: 'assessmentTime'
        }
      ],
      columns2: [
        {
          label: '人员姓名',
          key: 'staffName'
        },
        {
          label: '驾驶技术',
          key: 'driveLevel'
        },
        {
          label: '服务态度',
          key: 'serverLevel'
        },
        {
          label: '沟通能力',
          key: 'communicateLevel'
        },
        {
          label: '应急处理能力',
          key: 'emergencyCapability'
        }
      ],
      modelPieColor: ["#2E8B57","#9078f8"],
      modelData: {
        list: [{name: '在线', value: 600}, {name: '离线', value: 800}]
      },

      tableData: [],
      tableData2: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      pageSize2: 10,
      pageNum2: 1,
      radio: '2',
      dialogVisible: false,
      selRow: {},
    }
  },
  mounted() {
    this.dashEmployeeQualificationQualifications()
    this.dashEmployeeQualificationExamine()
  },
  watch: {
  },
  methods: {
    handlePageChange() {
      this.getTableData()
    },
    handleAudit(row) {
      this.selRow = row
      this.dialogVisible = true
    },
    handleCancelApply(row) {
      console.log('enter handle cancel apply')
    },
    dashEmployeeQualificationQualifications(){
      api.dashEmployeeQualificationQualifications().then(res => {
        this.tableData = res.data.records
        this.pageNum = res.current
        this.pageSize = res.page
      })
    },
    dashEmployeeQualificationExamine(){
      api.dashEmployeeQualificationExamine().then(res => {
        this.tableData2 = res.data.records
        this.pageNum2 = res.current
        this.pageSize2 = res.page
      })
    },


    getApplyTypeText(val) {
      if (!val){
        return '未申请'
      }
      const textMap = {
        1: '待审批',
        2: '审批通过',
        3: '审批驳回'
      }
      return textMap[val]
    },
    handleSearch() {
      this.pageNum = 1
      this.getTableData()
    }
  }
}
</script>
<style  lang="scss" scoped>
.body-wrapper {
  padding: 20px;
  background: #0c0c0c;
  .button-block{
    text-align: right;
    margin-bottom: 20px;
  }
  .table-pagination{
    text-align: right;
  }
  .search-card{
    font-size: 24px;
    font-weight: bold;
    color: #3498db;
    margin-bottom: 20px;
    .input-wrapper{
      width: 36%;
    }
  }
}
.audit-dialog{
  .mg-bt{
    margin-bottom: 24px;
  }
  .label{
    text-align: right;
  }
}
</style>