cnbg_web/src/views/admin/taskManagement/reportRule.vue

<template>
  <basic-container>
    <div class="tabStyle">
      <avue-crud
        :data="tableData"
        :option="option"
        :page="page"
        :table-loading="tableLoading"
        @on-load="getList"
        @search-change="searchVal"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        <template slot="menu" slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-tickets"
            v-if="
              scope.row.reportStatus == '1' || scope.row.reportStatus == '4'
            "
            @click="submitBtn(scope.row, scope.index)"
            >提交
          </el-button>

          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            v-if="
              scope.row.reportStatus == '1' || scope.row.reportStatus == '4'
            "
            @click="delBtn(scope.row, scope.index)"
            >删除
          </el-button>

          <el-button
            type="text"
            size="small"
            icon="el-icon-view"
            @click="lookBtn(scope.row, scope.index)"
            >查看
          </el-button>

          <el-button
            type="text"
            size="small"
            icon="el-icon-folder-checked"
            v-if="
              scope.row.reportStatus == '3' ||
                scope.row.reportStatus == '5' ||
                scope.row.reportStatus == '6'
            "
            @click="exportBtn(scope.row, scope.index)"
          >
            导出
          </el-button>
        </template>
      </avue-crud>

      <!-- 导出弹窗 -->
      <el-dialog
        title="导出"
        :visible.sync="exportDig"
        width="30%"
        :close-on-click-modal="false"
        center
      >
        <!-- 第一次导出 -->
        <template>
          <div class="down-item">
            <span>word格式：</span>
            <template
              v-if="checkRow && checkRow.reportOpt.status === 'NOT_GENERATE'"
            >
              <el-button
                class="first"
                @click="taskExport('word')"
                :loading="wordLoading"
                >生成报告</el-button
              >
            </template>
            <template
              v-else-if="checkRow && checkRow.reportOpt.status === 'GENERATING'"
            >
              <el-button class="first" :loading="true">报告生成中...</el-button>
            </template>
            <template
              v-else-if="
                checkRow &&
                  (checkRow.reportOpt.status === 'GENERATED' ||
                    checkRow.reportOpt.status === 'ERROR')
              "
            >
              <el-button @click="taskExport('word')">重新导出</el-button>
              <el-button
                @click="downloadTask('word')"
                v-if="checkRow.reportOpt.status === 'GENERATED'"
                >下载报告</el-button
              >
              <el-button
                disabled
                :title="checkRow.reportOpt.errorMsg"
                v-else-if="checkRow.reportOpt.status === 'ERROR'"
                >导出失败</el-button
              >
            </template>
            <div class="title-msg">
              <p v-if="checkRow && checkRow.reportOpt.status === 'GENERATED'">
                下载截止日期：{{ checkRow.reportOpt.ttl }}
              </p>
              <p v-if="checkRow && checkRow.reportOpt.status === 'ERROR'">
                本次导出失败：{{ checkRow.reportOpt.errorMsg }}
              </p>
            </div>
          </div>
          <div class="down-item">
            <span>excel格式：</span>
            <template
              v-if="
                checkRow && checkRow.excelReportOpt.status === 'NOT_GENERATE'
              "
            >
              <el-button
                class="first"
                @click="taskExport('excel')"
                :loading="excelLoading"
                >生成报告</el-button
              >
            </template>
            <template
              v-if="checkRow && checkRow.excelReportOpt.status === 'GENERATING'"
            >
              <el-button class="first" :loading="true">报告生成中...</el-button>
            </template>
            <template
              v-else-if="
                checkRow &&
                  (checkRow.excelReportOpt.status === 'GENERATED' ||
                    checkRow.excelReportOpt.status === 'ERROR')
              "
            >
              <el-button @click="taskExport('excel')">重新导出</el-button>
              <el-button
                @click="downloadTask('excel')"
                v-if="checkRow.excelReportOpt.status === 'GENERATED'"
                >下载报告</el-button
              >
              <el-button
                disabled
                :title="checkRow.excelReportOpt.errorMsg"
                v-else-if="checkRow.excelReportOpt.status === 'ERROR'"
                >导出失败</el-button
              >
            </template>
            <div class="title-msg">
              <p
                v-if="
                  checkRow && checkRow.excelReportOpt.status === 'GENERATED'
                "
              >
                下载截止日期：{{ checkRow.excelReportOpt.ttl }}
              </p>
              <p v-if="checkRow && checkRow.excelReportOpt.status === 'ERROR'">
                本次导出失败：{{ checkRow.excelReportOpt.errorMsg }}
              </p>
            </div>
          </div>
        </template>
        <span slot="footer" class="dialog-footer">
          注意： 1.报告将于24小时之内生成完毕，请注意下载。<br />
          <i style="margin-left:62px"></i
          >2.报告汇总为封面+任务数据汇总+任务列表明细。
          <br />
          <i style="margin-left:10px"></i>3.报告详情为每条任务的任务详情+图片。
        </span>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
import { reportRuledata } from "@/const/crud/reportRule";
import {
  reportPage,
  updateReportStatus,
  delObj,
  exportNbReport,
  exportExcelNbReport
} from "@/api/taskManagement/reportRule";

export default {
  name: "points",
  data() {
    return {
      checkRow: null,
      reportForm: {
        jfbID: "",
        bgID: "",
        rwhjjfz: "",
        hjrws: "",
        jsqy: ""
      },
      tableData: [],
      wordLoading: false,
      excelLoading: false,
      option: reportRuledata,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      searchForm: {},
      taskExportLoading: false,
      taskExportInfoLoading: false,
      exportDig: false
    };
  },
  components: {},
  mounted() {},
  computed: {},

  methods: {
    // 初始化页面
    getList(page, params) {
      this.tableLoading = true;
      reportPage(
        Object.assign(
          {
            type: 1,
            current: page.currentPage,
            size: page.pageSize
            // queryScoreId: "",
            // queryName: ""
          },
          params,
          this.searchForm
        )
      )
        .then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 搜索按钮
    searchVal(form, done) {
      this.searchForm = form;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    // 提交按钮
    submitBtn(row) {
      let args = {
        id: row.id,
        reportStatus: 2
      };
      this.$confirm('是否提交报告id为"' + row.reportNo + '"的数据?', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return updateReportStatus(args);
        })
        .then(() => {
          this.getList(this.page);
          this.$message.success("提交成功");
        })
        .catch(function() {});
    },
    // 删除按钮
    delBtn(row, index) {
      // let args = {
      //   id: row.id
      // }
      this.$confirm('是否删除报告id为"' + row.reportNo + '"的数据?', "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delObj(row.id)
            .then(() => {
              this.getList(this.page);
              this.$notify.success("删除成功");
            })
            .catch(() => {
              this.$notify.error("删除失败");
            });
        })
        .catch(function() {});
    },

    // 查看按钮
    lookBtn(row) {
      this.$router.push({
        path: "/admin/taskManagement/reportRulelook?id=" + row.id
      });
    },
    // 分页查询
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },

    // 导出按钮
    exportBtn(row) {
      this.exportDig = true;
      this.checkRow = row;
    },
    async taskExport(type) {
      this.taskExportLoading = true;
      let row = this.checkRow;
      var obj = {
        id: row.id,
        exportType: 1,
        scoreId: row.scoreId
      };
      let res;
      if (type === "word") {
        this.wordLoading = true;
        res = await exportNbReport(obj);
      } else if (type === "excel") {
        this.excelLoading = true;
        res = await exportExcelNbReport(obj);
      }
      if (res.data) {
        this.$message.success(res.data.data);
        this.exportDig = false;
        this.getList(this.page);
        this.wordLoading = false;
        this.excelLoading = false;
      } else {
        this.$message.error("导出失败");
      }
    },
    downloadTask(type) {
      let latestUrl;
      if (type === "word") {
        latestUrl = this.checkRow.reportOpt.latestUrl;
      } else if (type === "excel") {
        latestUrl = this.checkRow.excelReportOpt.latestUrl;
      }
      let a = document.createElement("a");
      a.href = latestUrl;
      a.click();
      this.$message.success("导出汇总报告成功");
      this.exportDig = false;
    },
    taskExportInfo() {
      this.taskExportInfoLoading = true;
      let row = this.checkRow;
      var obj = {
        id: row.id,
        exportType: 2,
        scoreId: row.scoreId
      };
      exportNbReport(obj)
        .then(response => {
          if (undefined == response.data || undefined == response.data.data) {
            this.$message.error("导出失败");
            return false;
          }
          let obj = response.data.data;
          let a = document.createElement("a");
          a.href = obj.url; // 这里的请求方式为get，如果需要认证，接口上需要带上token
          a.click();
          this.$message.success("导出报告详情成功");
          this.taskExportInfoLoading = false;
        })
        .catch(() => {
          this.taskExportInfoLoading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.down-item {
  margin-left: 20px;
  margin-bottom: 15px;
  span {
    width: 80px;
    display: inline-block;
    text-align: right;
  }
  .first {
    width: 240px;
  }
}
</style>

<style>
.tabStyle {
  width: 100%;
  margin-top: 10px;
}
.el-input__inner {
  border: 1px solid #dcdfe6 !important;
}

.generating {
  color: #1e90ff;
  text-align: center;
  display: block;
}

.btns {
  display: flex;
  justify-content: center;
}

.title-msg {
  text-align: center;
  margin-top: 10px;
}
</style>