jpcj-front/src/views/mocktestscore/index.vue

<template>
  <div>
    <div class="pt20 pb20 pl20">
      <el-form ref="table" inline :model="searchForm">
        <el-form-item
          v-hasPermi="['mocktestscore:index:search']"
          prop="cityName"
          :rules="[{ required: true, message: '请选择城市', trigger: 'blur' }]"
          label=""
        >
          <el-select clearable placeholder="城市" v-model="searchForm.cityName">
            <el-option
              @click.native="selectArea(item.code)"
              v-for="(item, index) in cityList"
              :value="item.name"
              :label="item.name"
              :key="index"
              >{{ item.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item
          v-hasPermi="['mocktestscore:index:search']"
          prop="areaName"
          :rules="[{ required: true, message: '请选择区域', trigger: 'blur' }]"
          label=""
        >
          <el-select placeholder="区域" clearable v-model="searchForm.areaName">
            <el-option
              @click.native="selectSchool(item.code)"
              v-for="(item, index) in areaList"
              :value="item.name"
              :label="item.name"
              :key="index"
              >{{ item.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item
          v-hasPermi="['mocktestscore:index:search']"
          prop="schoolName"
          :rules="[{ required: true, message: '请选择驾校', trigger: 'blur' }]"
          label=""
        >
          <el-select
            clearable
            v-model="searchForm.schoolName"
            placeholder="驾校"
          >
            <el-option
              v-for="(item, index) in schoolInfoList"
              :value="item.schoolName"
              :label="item.schoolName"
              :key="index"
              >{{ item.schoolName }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="searchForm.nickName"
            placeholder="按昵称查询"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="">
          <el-select placeholder="车子类型" clearable v-model="searchForm.type">
            <el-option
              v-for="(item, index) in carTypeList"
              :value="item"
              :label="item"
              :key="index"
              >{{ item }}</el-option
            >
          </el-select>
        </el-form-item> -->
        <el-form-item label="">
          <el-button
            class="ml20"
            @click="getPage"
            @keydown.enter="getPage"
            type="primary"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="pl20 pr20">
      <el-table v-loading="tableLoad" :data="tableData">
        <el-table-column label="微信名" prop="nickName"></el-table-column>
        <el-table-column label="微信头像" prop="extensionCount">
          <template slot-scope="scope">
            <img class="w40" :src="scope.row.headImage" />
          </template>
        </el-table-column>
        <el-table-column
          sortable
          label="最高分"
          prop="highScore"
        ></el-table-column>
        <el-table-column
          sortable
          label="最低分"
          prop="lowScore"
        ></el-table-column>
        <el-table-column sortable label="平均分数" prop="averageScore">
          <template slot-scope="scope">
            {{ tofix(scope.row.averageScore, 1) }}
          </template>
        </el-table-column>

        <el-table-column
          sortable
          label="模拟次数"
          prop="times"
        ></el-table-column>

        <el-table-column sortable label="详情" prop="costCount">
          <template slot-scope="scope">
            <el-link
              @click="
                () => {
                  rowInfoName = scope.row.nickName;
                  rowInfoVisible = true;
                  getRowListInfo(scope.row.userId);
                }
              "
              type="primary"
              >详情</el-link
            >
          </template>
        </el-table-column>
        <!-- achievement -->
      </el-table>
    </div>
    <!-- 分页的 -->
    <el-pagination
      @current-change="
        (page) => {
          searchForm.pageNum = page;
          getPage();
        }
      "
      background
      layout="prev, pager, next"
      :total="tableTotal"
    >
    </el-pagination>

    <el-drawer
      size="60%"
      :title="rowInfoName + '(历次考试记录)'"
      :visible.sync="rowInfoVisible"
      direction="rtl"
    >
      <el-table :data="rowInfoTable">
        <el-table-column label="时间" prop="createTime"></el-table-column>
        <el-table-column label="类型" prop="type"></el-table-column>
        <el-table-column label="科目" prop="kskm"></el-table-column>
        <el-table-column label="分数" prop="score"></el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import proxyscoreApi from "@/api/proxyscore";
import { areaInfoList } from "@/api/area";
import { schoolInfoList } from "@/api/school";
import {
  scoreInfoList,
  scoreInfoStudentlist,
  scoreInfoStudentscore,
} from "@/api/score";
export default {
  data() {
    return {
      searchForm: {
        areaName: "",
        cityName: "",
        nickName: "",
        pageNum: 1,
        pageSize: 10,
        schoolName: "",
        type: null,
      },
      tableData: [],
      tableTotal: 0,
      tableLoad: false,
      rowInfoTable: [],
      rowInfoName: "",
      rowInfoColumn: {},
      rowInfoVisible: false,
      carTypeList: ["小车", "客车", "货车", "摩托车"],
      schoolInfoList: [],
      cityList: [],
      areaList: [],
      proviceList: [
        {
          createTime: "2022-03-14 16:52:59",
          updateTime: null,
          code: "35",
          name: "福建省",
          leaf: "0",
          parentCode: "0",
        },
      ],
    };
  },
  computed: {
    allProxySCore() {
      let allProxySCore = 0;
      this.tableData.forEach((item) => {
        allProxySCore +=
          Number(item.achievementSettled) + Number(item.achievement);
      });
      return allProxySCore;
    },
  },
  methods: {
    tofix(num, index) {
      return num.toFixed(index);
    },
    getRowListInfo(id) {
      scoreInfoStudentscore(id).then((res) => {
        this.rowInfoTable = res.rows;
      });
    },
    selectSchool(areaCode) {
      schoolInfoList({
        areaCode: areaCode,
      }).then((res) => {
        this.schoolInfoList = res.rows;
      });
    },
    selectArea(code) {
      this.getAreaInfoList(code);
    },
    getPage() {
      //   this.$refs["table"].validate((valid) => {});
      this.tableLoad = true;
      scoreInfoStudentlist(this.searchForm).then((res) => {
        this.tableData = res.rows;
        this.tableTotal = res.total;
        this.tableLoad = false;
      });
    },
    getCityInfoList(parentCode) {
      areaInfoList({
        code: null,
        name: "",
        pageNum: 1,
        pageSize: 50,
        parentCode,
      }).then((res) => {
        console.log(res);
        this.cityList = res.rows;
      });
    },
    getAreaInfoList(parentCode) {
      areaInfoList({
        code: null,
        name: "",
        pageNum: 1,
        pageSize: 1000,
        parentCode,
      }).then((res) => {
        console.log(res);
        this.areaList = res.rows;
      });
    },
  },
  mounted() {
    this.getCityInfoList(35);
    this.getPage();
  },
};
</script>

<style lang="scss" scoped>
// .draw-scroll {
//   .el-drawer__container {
//     ::v-deep .el-drawer__body {
//       overflow-y: scroll;
//     }
//   }
// }
::v-deep .el-drawer__body {
  overflow-y: scroll;
}
.overflow-scroll-y {
  overflow-y: scroll;
}
.font14 {
  font-size: 18px;
}
.lh36 {
  line-height: 36px;
}
.pl20 {
  padding-left: 20px;
}
.pr20 {
  padding-right: 20px;
}
.pb20 {
  padding-bottom: 20px;
}
.w40 {
  width: 40px;
}
.font12 {
  font-size: 14px;
}
.pt15 {
  padding-top: 15px;
}
.ml10 {
  margin-left: 10px;
}
.ml20 {
  margin-left: 20px;
}
.pt20 {
  padding-top: 20px;
}
</style>