examcloud-admin-web/src/modules/print/view/CourseStatistic.vue

<template>
  <section class="content" style="margin-top: -18px;">
    <div class="box box-info">
      <!-- 头信息 -->
      <div
        class="box-header with-border"
        style="background-color:#d3dce6;margin-bottom:20px;"
      >
        <h3 class="box-title">课程统计</h3>
        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse">
            <i class="fa fa-minus"></i>
          </button>
        </div>
      </div>

      <!-- 正文信息 -->
      <div class="box-body">
        <el-form
          :model="formSearch"
          :inline="true"
          label-position="right"
          label-width="100px"
        >
          <el-form-item label="学校" class="pull-left">
            <el-select
              v-model="formSearch.orgId"
              placeholder="请选择"
              filterable
              clearable
              @change="searchExamList(formSearch.orgId);"
            >
              <el-option
                v-for="item in orgList"
                :label="item.orgName"
                :value="item.orgId"
                :key="item.orgId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="考试" class="pull-left">
            <el-select v-model="formSearch.examId" placeholder="请选择">
              <el-option
                v-for="item in examList"
                :label="item.examName"
                :value="item.examId"
                :key="item.examId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="项目经理" class="pull-left">
            <el-select
              v-model="formSearch.pmId"
              placeholder="请选择"
              filterable
              clearable
              remote
              :remote-method="searchPmList"
            >
              <el-option label="请选择" value=""></el-option>
              <el-option
                v-for="item in pmList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="印刷供应商" class="pull-left">
            <el-select
              v-model="formSearch.supplierId"
              placeholder="请选择"
              filterable
              clearable
              remote
              :remote-method="searchSupplierList"
            >
              <el-option label="请选择" value=""></el-option>
              <el-option
                v-for="item in supplierList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item class="pull-right">
            <el-button
              size="small"
              type="primary"
              icon="search"
              @click="searchRecords"
              >查询
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 数据列表 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          element-loading-text="数据加载中"
          style="width:100%;"
          border
        >
          <el-table-column width="200" label="学校名称" prop="orgName" />
          <el-table-column label="考试名称" prop="examName" />
          <el-table-column width="200" label="印刷供应商" prop="supplierName" />
          <el-table-column width="150" label="项目经理" prop="pmName" />

          <el-table-column width="100" label="项目统计">
            <template slot-scope="scope">
              <a
                href="javascript:void(0)"
                @click="gotoProjectStatistic(scope.row);"
                >查看
              </a>
            </template>
          </el-table-column>

          <el-table-column width="100" label="操作" :context="_self">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="editProjectSetting(scope.row);"
                :disabled="!hasPermit"
              >
                <i class="el-icon-edit"></i> 项目设置
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="page pull-left">
          <el-pagination
            @current-change="handlePager"
            :current-page="formSearch.pageNo"
            :page-size="formSearch.pageSize"
            :total="totalElements"
            layout="total, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { core_api, print_api, userRole } from "../constants/constants.js";
import { mapState } from "vuex";

export default {
  data() {
    return {
      formSearch: {
        orgId: "",
        examId: "",
        pmId: "",
        supplierId: "",
        pageNo: 1,
        pageSize: 10
      },
      curUserRole: userRole,
      hasPermit: false,
      totalElements: 0,
      loading: false,
      tableData: [],
      orgList: [],
      examList: [],
      pmList: [],
      supplierList: [],
      rules: {}
    };
  },
  methods: {
    handlePager(current) {
      /* 处理分页 */
      this.formSearch.pageNo = current;
      this.searchRecords();
    },
    searchRecords() {
      /* 查询记录列表 */
      let orgId = this.formSearch.orgId;
      if (!orgId || orgId == "") {
        this.$notify({
          message: "请选择学校！",
          type: "warning"
        });
        return;
      }

      let examId = this.formSearch.examId;
      if (!examId || examId == "") {
        this.$notify({
          message: "请选择考试！",
          type: "warning"
        });
        return;
      }

      this.loading = true;
      let url = print_api + "/printing/project/list";
      this.$http.post(url, this.formSearch).then(
        response => {
          this.tableData = response.data.content;
          this.totalElements = response.data.totalElements;
          this.loading = false;
        },
        error => {
          console.log(error);
          this.loading = false;
        }
      );
    },
    searchExamList(orgId) {
      /* 查询考试列表 */
      this.formSearch.examId = "";
      this.examList = [];

      if (orgId && orgId != "") {
        let url = print_api + "/printing/project/exam/list?orgId=" + orgId;
        this.$http.post(url).then(response => {
          this.examList = response.data;
        });
      }
    },
    searchPmList(query) {
      /* 查询项目经理列表 */
      this.pmList = [];
      let url =
        core_api +
        "/user/query?rootOrgIdNull=true&roleCode=PRINT_PROJECT_LEADER";
      if (query && query != "") {
        url += "&name=" + query;
      }
      this.$http.get(url).then(response => {
        this.pmList = response.data;
      });
    },
    searchSupplierList(query) {
      /* 查询印刷供应商列表 */
      this.supplierList = [];
      let url =
        core_api + "/user/query?rootOrgIdNull=true&roleCode=PRINT_SUPPLIER";
      if (query && query != "") {
        url += "&name=" + query;
      }
      this.$http.get(url).then(response => {
        this.supplierList = response.data;
      });
    },
    gotoProjectStatistic(row) {
      /* 查看项目统计 */
      let url = "/print/project/statistic/" + row.orgId + "/" + row.examId;
      this.$router.push({ path: url });
    },
    editProjectSetting(row) {
      console.log(row);
    }
  },
  computed: {
    ...mapState({ user: state => state.user })
  },
  created() {
    this.searchOrgList();

    this.checkUserRole(this.user);

    if (this.curUserRole.isSuperLeader) {
      this.hasPermit = true;
      this.searchPmList();
      this.searchSupplierList();
    } else if (this.curUserRole.isPM) {
      this.hasPermit = true;
      this.loadPmInfo(this.user);
    } else if (this.curUserRole.isSupplier) {
      this.hasPermit = false;
      this.loadSupplierInfo(this.user);
    } else {
      this.hasPermit = false;
    }
  }
};
</script>

<style scoped>
.page {
  margin-top: 10px;
}

.el-table th > .cell {
  text-align: center;
}
</style>