epmet-work-pc-chengyang/src/views/modules/base/smartImport/cpts/completeTask.vue

<template>
  <div class="">
    <div class="content_box">
      <div class="left">
        <i class="el-icon-success" style="font-size: 50px; color: #1cc58c"></i>
        <p>导入完成</p>
        <el-button
          style="margin-left: 10px"
          size="small"
          type="primary"
          @click="handelClickBackList"
          >返回任务列表</el-button
        >
      </div>
      <div class="right">
        <h4>
          <el-icon
            class="el-icon-warning-outline"
            style="color: #0056d6; font-size: 18px; font-weight: 600"
          ></el-icon>
          操作说明
        </h4>
        <p>1、可以到居民信息中查看本次导入的数据。</p>
        <p>2、导入失效的数据,您可以下载失败文件修改后,重新创建任务导入。</p>
      </div>
    </div>
    <h3 class="title-small">数据导入明细</h3>
    <el-row type="flex" justify="">
      <el-col :span="24">
      <i class="el-icon-circle-check" style="color: #1cc58c; font-size: 15px;font-weight: 600;"></i>   {{ this.importSuccessNum || "--" }}条数据已导入。<el-button
          type="text"
          @click="handelClickLook('success')"
          >查看</el-button
        >
      </el-col>
    </el-row>
    <el-row type="flex" justify="">
      <el-col :span="24">
        <i class="el-icon-circle-close" style="color: #ff5b5d;font-size: 15px;font-weight: 600;"></i> {{ this.importFailNum || "--" }}条问题数据导入失败。<el-button
          type="text"
          @click="handelClickLook('fail')"
          >查看</el-button
        >
        <!--     -->
        <i class="el-icon-download" style="margin-left: 16px;"></i>
        <a
        v-if="resultDescFile"
        :href="this.resultDescFile"
              target="_blank"
              style="color: #ff4d4f; cursor: pointer"
              >下载结果说明</a
            >
      </el-col>
    </el-row>
    <el-dialog
      title="列表"
      :visible.sync="showTable"
      width="50%"
      v-if="showTable"
    >
      <el-table
        :data="tableData"
        row-key="fileCode"
        border
        style="width: 100%; height: 500px; overflow-y: auto"
      >
        <el-table-column
          v-for="item in tableHeader"
          :key="item.columnName"
          :prop="item.columnName"
          :label="item.label"
          :align="item.align"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ handleFilterSpan(scope.row, item) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageNo"
        :page-size="pageSize"
        :total="total"
        layout=" prev, pager, next"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showTable = false">取 消</el-button>
        <el-button type="primary" @click="showTable = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
      <script>
import { requestPost } from "@/js/dai/request";
export default {
  data() {
    return {
      resident_category_import_list: [],
      showTable: false,
      tableHeader: [],
      tableData: [],
      importSuccessNum: null,
      importFailNum: null,
      importCategory:null,
      pageNo:1,
      pageSize:20,
      total:0,
      tableType:null
    };
  },
  props: {
    fileCode: {
      type: String,
      default: "",
    },
    fileCodeP: {
      type: String,
      default: "",
    },
  },
  created() {
    this.getTaskInfo();
  },
  methods: {
    handleFilterSpan(row, item) {
      let _val = "";
      if (item.options && item.options.length > 0) {
        item.options.forEach((n) => {
          if (n.value === row[item.columnName]) _val = n.label;
        });
      }
      return _val || row[item.columnName];
    },
    async handelClickLook(type) {
      this.showTable = true;
      this.tableType = type;
      this.pageNo = 1;
      this.getTable()
    },
    async getTable(){
      let url = "/actual/base/excelDataShow/quaryExcelDataList";
      const {pageNo,pageSize,importCategory,tableType} = this;
      let parm = {
        taskId: this.taskId,
        boolranFlag: tableType == "success" ? "1" : "0",
        pageNo,
        pageSize,
        fileCategory:importCategory,
      };
      let { data, code, msg } = await requestPost(url, parm);
      if (code == 0) {
        this.showTable = true;
        this.tableHeader = Object.entries(data.columnsDict).map((item) => ({
          label: item[0],
          columnName: item[1],
        })); //属性名和属性值
        this.tableData = data.excelDataShowDTOList.list;
        this.total = data.excelDataShowDTOList.total;
      } else if (code >= 8000) {
        this.$message.error(msg);
      }
    },
    pageCurrentChangeHandle (val) {
      this.pageNo = val
      this.getTable()
    },
    handelClickUpload() {
      this.$emit("handelClickUpload");
    },
    handelClickBackList() {
      this.$emit("handelClickBack");
    },
    async getTaskInfo() {
      let url = "/actual/base/intelligentImportData/getTaskInfo";
      let parm = {
        fileCode: this.fileCodeP || this.fileCode,
      };
      let { data, code, msg } = await requestPost(url, parm);
      if (code == 0) {
        this.taskId = data.taskId;
        this.importFailNum = data.importFailNum.toString();
        this.importSuccessNum = data.importSuccessNum.toString();
        this.importCategory = data.importCategory;
        this.resultDescFile = data.resultDescFile;
        this.$emit("updateoperatorName", {
          operatorName: data.operatorName,
          createdTime: data.createdTime,
        });
      } else if (code >= 8000) {
        this.$message.error(msg);
      }
    },
  },
  components: {},
  computed: {},
  watch: {},
};
</script>
      <style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";
@import "@/assets/scss/modules/management/detail-main.scss";
@import "@/assets/scss/pages/smartImport.scss";
.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #838383;
}
</style>