boss/pages/main/index/dev_check.vue

<template>
  <div id="dev_check">
    <div class="filter-box">
      <el-form :inline="true" :model="filterForm" class="filter-form" :label-position="labelPosition">
        <el-form-item label="类型">
          <el-radio-group v-model="filterForm.cert_id" size="mini">
            <el-radio-button :label="0">全部</el-radio-button>
            <el-radio-button v-for="itm in types" :label="itm.id" :key="itm.id">{{itm.name}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="filterForm.status" size="mini">
            <el-radio-button :label="0">全部</el-radio-button>
            <el-radio-button v-for="itm in statues" :label="itm.id" :key="itm.id">{{itm.name}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchList()" size="small">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table
        v-if="tableData.length"
        border
        style="width: 100%"
        :data="tableData"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          v-for="(prop, index) of tableProps"
          :key="index"
          :prop="prop"
          :label="tableHeaders[index]"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="prop === 'uid'"
              @click="clickUID(scope.row)"
            >{{scope.row[prop]}}</el-button>
            <el-button
              type="text"
              v-else-if="prop === 'ctrl'"
              @click="clickCtrl(scope.row, index)"
            >查看详情</el-button>
            <img class="img" v-else-if="prop === 'img'" :src="scope.row.img" alt="img" />
            <span v-else-if="prop === 'source_type'">
                <span v-if="scope.row.source_type">
                    <el-tooltip class="item" effect="dark" :content="scope.row.version" placement="top">
                      <el-link type="primary">{{scope.row['source_type'] || '--'}}</el-link>
                    </el-tooltip>
                </span>
                <span v-else>
                 --
                </span>
            </span>
            <span v-else>{{scope.row[prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
      <span v-else>暂无数据</span>
    </div>
    <div class="page">
      <el-pagination
        background
        @current-change="changePagination"
        @size-change="changePageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
    
  </div>
</template>

<script>
const tableHeaders = [
  "uid",
  "昵称",
  "职业方向",
  "类型",
  "申请时间",
  "来源",
  "审核时间",
  "申请状态",
  "详情"
];
const tableProps = [
  "uid",
  "nickname",
  "occupation_name",
  "name",
  "create_date",
  "source_type",
  "chk_date",
  "status_name",
  "ctrl"
];

let env = "test";

export default {
  data() {
    return {
      // 筛选类型
      types: [],
      // 筛选状态
      statues: [],
      // 数据总条目
      totalCount: 0,
      currentPage: 1,
      currentPageSize: 20,
      // certID: "",
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 列表数据
      tableData: [],
      labelPosition: 'left',
      filterForm: {
        status: 0,
        cert_id: 0,
      },
    };
  },
  watch: {
    $route(to, from) {
      this.handleRouteParams();
    }
  },
  mounted() {
    // console.log(this.currentPage)
    this.getFilters();
  },
  methods: {
    // 页码变动
    // changePagination(page) {
    //   // console.log(this.certID, page)
    //   this.$router.replace({
    //     // path: `/main/dev_check`,
    //     query: { page, cert_id: this.certID }
    //   });
    // },
    changePagination(val) {
      this.page = val;
      this.getTableData();
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize;
    },
    // 筛选框变动
    // changeSelect(id) {
    //   this.certID = id;
    //   this.$router.replace({
    //     // path: `/main/dev_check`,
    //     query: { page: this.currentPage, cert_id: id }
    //   });
    // },
    searchList() {
      this.currentPage = 1;
      this.getTableData();
    },
    // 获取筛选
    async getFilters() {
      const res = await this.$post("/api/admin/cert/getEnum");
      const data = res.data;

      this.types = data.cert_type_list || [];
      this.statues = data.audit_status_list || [];
      this.handleRouteParams();
    },
    /**
     * 路由钩子触发获取路由携带query, 首次进入也算一次
     */
    handleRouteParams() {
      this.currentPage = Number(this.$route.query.page);
      if (typeof(this.$route.query.cert_id) != 'undefined') {
        this.filterForm.cert_id = this.$route.query.cert_id;
      }
      // for (var i = 0; i < this.types.length; i++) {
      //   if (this.certID == this.types[i].id) {
      //     this.filterForm.cert_id = this.types[i].id;
      //   }
      // }
      this.getTableData();
    },
    clickCtrl(item, index) {
      this.$router.push({
        path: "/main/dev_check_detail",
        query: {
          uid: item.uid,
          cert_id: item.cert_id
        }
      });
    },
    // 点击用户的 uid
    clickUID(item) {
      window.open(
        this.$store.state.domainConfig.siteUrl + `/rooter/user/${item.uid}`
      );
    },
    // 根据状态显示图表样式
    tableRowClassName({ row, rowIndex }) {
      let className = "";
      if (row.status === "1") className = "success-row";
      return className;
    },
    // 格式化列表数据
    formatTableData(data) {
      return data.map(i => ({
        ...i,
        statusShow: i.status === "1" ? "到账" : "失败",
        created_atShow: new Date(Number(i.created_at) * 1000).toLocaleString(),
        taken_atShow: new Date(Number(i.taken_at) * 1000).toLocaleString(),
        ctrl: 1
      }));
    },
    // 获取列表数据
    async getTableData() {
      this.tableData = [];
      let page = this.currentPage;
      let page_size = this.currentPageSize;
      let cert_id = this.filterForm.cert_id;
      let status = this.filterForm.status;
      // let body = { page, page_size, cert_id };
      let params = { page, page_size, cert_id, status };
      let res = await this.$post("/api/admin/audit/getList", params);
      let data = res.data;
      env = data.current_env;
      this.tableData = this.formatTableData(res.data.list);
      this.totalCount = Number(data.total);
      this.totalPage = data.totalPage;
    }
  }
};
</script>

<style scoped>
.table {
  height: calc(100% - 80px);
}
.img {
  width: 100%;
  height: auto;
}
.page {
}
.el-form-item{
  margin-bottom: 0;
}
.filter-box{
  margin-top: 10px;
}
</style>