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

<template>
  <section class="content" style="margin-top: 20px;">
    <div class="box box-info">
      <!-- 正文信息 -->
      <div class="box-body">
        <el-form
          :model="formSearch"
          :inline="true"
          label-position="right"
          label-width="100px"
        >
          <el-form-item label="学校">
            <el-select
              v-model="formSearch.orgId"
              placeholder="请选择"
              clearable
              @change="loadExamList(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="考试">
            <el-select
              v-model="formSearch.examId"
              @change="searchRecords"
              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>
            <el-button
              size="small"
              type="primary"
              icon="el-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 label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column label="类别" prop="typeName" />
          <el-table-column label="上传">
            <template slot-scope="scope">
              <el-upload
                :action="uploadAction"
                :headers="uploadHeaders"
                :file-list="fileList"
                :disabled="!hasPermit"
                :on-success="
                  (response, file, fileList) =>
                    uploadSuccess(response, file, fileList, scope.row)
                "
                :on-error="uploadError"
                :show-file-list="false"
                :auto-upload="true"
                :multiple="false"
              >
                <el-button
                  size="mini"
                  icon="el-icon-upload"
                  :disabled="!hasPermit"
                  >上传</el-button
                >
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column label="下载">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-download"
                :disabled="checkEmptyStr(scope.row.fileName)"
                @click="download(scope.row);"
                >下载
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="预览">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-view"
                :disabled="checkEmptyStr(scope.row.fileUrl)"
                @click="preview(scope.row);"
                >预览
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </section>
</template>

<script>
import { PRINT_API } from "@/constants/constants";
import {} from "../constants/constants.js";
import { mapState } from "vuex";
import { checkEmptyStr, checkEmptyNumber } from "../utils/common.js";

export default {
  data() {
    return {
      formSearch: {
        orgId: "",
        examId: ""
      },
      curUserRole: {},
      hasPermit: false,
      loading: false,
      tableData: [],
      orgList: [],
      examList: [],
      templateForm: {
        orgId: "",
        examId: "",
        templateType: "",
        fileUrl: ""
      },
      fileList: [],
      uploadAction: PRINT_API + "/common/upload",
      uploadHeaders: {
        key: "",
        token: ""
      },
      rules: {}
    };
  },
  methods: {
    searchRecords() {
      /* 查询记录列表 */
      let orgId = this.formSearch.orgId;
      if (checkEmptyNumber(orgId)) {
        this.$notify({
          message: "请选择学校！",
          type: "warning"
        });
        return;
      }

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

      this.loading = true;
      let url = PRINT_API + "/project/template/" + orgId + "/" + examId;
      this.$http.post(url, this.formSearch).then(
        response => {
          this.tableData = response.data;
          this.loading = false;
        },
        error => {
          console.log(error);
          this.loading = false;
        }
      );
    },
    selectDefault() {
      if (this.orgList.length > 0) {
        let firstOrgId = this.orgList[0].orgId;
        this.formSearch.orgId = firstOrgId;
        this.loadExamList(firstOrgId);
      }
    },
    loadOrgList() {
      /* 查询学校列表 */
      let url = PRINT_API + "/printing/project/org/list";
      this.$http.post(url).then(
        response => {
          this.orgList = response.data;
          this.selectDefault();
        },
        error => {
          console.log(error);
        }
      );
    },
    loadExamList(orgId) {
      /* 查询考试列表 */
      this.formSearch.examId = "";
      this.examList = [];
      this.tableData = [];

      if (checkEmptyNumber(orgId)) {
        return;
      }
      let url = PRINT_API + "/printing/project/exam/list?orgId=" + orgId;
      this.$http.post(url).then(response => {
        this.examList = response.data;
        if (this.examList.length > 0) {
          this.formSearch.examId = this.examList[0].examId;
          this.searchRecords();
        }
      });
    },
    uploadSuccess(response, file, fileList, row) {
      /* 上传模板 */
      if (response.code == "PRT-000200") {
        this.templateForm.orgId = this.formSearch.orgId;
        this.templateForm.examId = this.formSearch.examId;
        this.templateForm.templateType = row.templateType;
        this.templateForm.fileUrl = response.data;
        this.$http
          .post(PRINT_API + "/project/template/save", this.templateForm)
          .then(
            () => {
              this.$notify({
                message: "上传模板成功！",
                type: "success"
              });
              this.searchRecords();
            },
            () => {
              this.$notify({
                message: "上传模板失败！",
                type: "error"
              });
            }
          );
      }
    },
    uploadError(response) {
      console.log(response);
      this.$notify({
        message: "上传文件失败！",
        type: "error"
      });
    },
    preview(row) {
      /* 预览模板 */
      let url = row.fileUrl;
      if (!url) {
        this.$notify({
          message: "当前模板不存在！",
          type: "warning"
        });
        return;
      }
      window.open(url);
    },
    download(row) {
      /* 下载模板 */
      let filePath = row.fileName;
      if (!filePath) {
        this.$notify({
          message: "当前模板不存在！",
          type: "warning"
        });
        return;
      }
      let url = PRINT_API + "/common/download?filePath=" + filePath;
      window.location.href = url;
    },
    checkEmptyStr: checkEmptyStr
  },
  computed: {
    ...mapState({ user: state => state.user })
  },
  created() {
    this.loadOrgList();

    this.loadUserRole(this.user);

    if (this.curUserRole.isSuperLeader || this.curUserRole.isPM) {
      this.hasPermit = true;
    } else {
      this.hasPermit = false;
    }

    this.uploadHeaders = {
      key: this.user.key,
      token: this.user.token
    };
  }
};
</script>

<style scoped>
.page {
  margin-top: 10px;
}
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.w220 {
  width: 220px;
}
</style>