saber/src/views/certificate/management.vue

<template>
  <basic-container class="management">
    <el-select
      v-model="value"
      filterable
      style="float:right"
      placeholder="请选择"
      @change="projectChange"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.projectName"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="projectName"
        label="项目名称"
      >
      </el-table-column>
      <el-table-column
        prop="personalCount"
        label="个人证书（个）"
      >
      </el-table-column>
      <el-table-column
        prop="enterpriseCount"
        label="企业证书（个）"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="see(scope.row)"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float:right"
      background
      class="martop20 marbottom20"
      layout="prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageindex"
      :page-size="pagesize"
    >
    </el-pagination>
  </basic-container>
</template>
<script>
import { queryProjectList, } from "@/api/certificate/list";
import { singPfxManagementPage, } from "@/api/certificate/management";
export default {
  data () {
    return {
      options: [],
      value: '',
      tableData: [{}],
      total: 0,
      pageindex: 1,
      pagesize: 20,
    }
  },
  methods: {
    //#region 
    projectChange () {//项目名称选择
      this.singPfxManagementPage()
    },
    async queryProjectList () {
      const { data: res } = await queryProjectList()
      console.log(res);
      if (res.code == 200) {
        this.options = res.data
      }
    },
    async singPfxManagementPage () {
      const { data: res } = await singPfxManagementPage({
        current: this.pageindex,
        size: this.pagesize,
        contractId: this.value,
      })
      console.log(res);
      if (res.code == 200) {
        // this.tableData = res.data.records
        this.total = res.data.total
      }
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.singPfxManagementPage()
    },
    handleCurrentChange (val) {
      this.pageindex = val
      this.singPfxManagementPage()
    },
    //#endregion

    //#region 
    see () {
      this.$router.push({ path: '/certificate/management/see' })
    },
    //#endregion
  },
  created () {
    this.queryProjectList()
    this.singPfxManagementPage()
  }
}
</script>

<style lang="scss" scoped>
.management {
}
</style>