real3d-portalsite/src/views/farmlandProtection/components/exportFile.vue

<template>
  <div>
    <div class="heaerCon">
      <div class="miniBtn">
        <!-- <el-button plain size="mini">导入监测数据包</el-button> -->
        <!-- <el-button plain size="mini">导入核查</el-button> -->
        <!-- <el-upload
          class="upload-demo"
          :on-change="handleChange"
          :auto-upload="false"
          :show-file-list="false"
          :file-list="fileList"
          :limit="1"
          accept=".zip"
          :action="uploadFileUrl"
        > -->
        <el-upload
          ref="fileUploadBtn"
          class="upload-demo"
          :action="uploadFileUrl"
          :before-upload="handleBeforeUpload"
          :on-error="handleUploadError"
          :on-success="handleUploadSuccess"
          :limit="1"
          accept=".zip"
          :file-list="fileList"
          :show-file-list="false"
          :data="additionalData"
        >
          <el-button plain size="mini">导入监测数据包</el-button>
        </el-upload>
      </div>
      <div class="showBtn">
        <span @click="showPlin(false)" v-show="showExp">数据说明</span>
        <span @click="showPlin(true)" v-show="!showExp" showExp="false"
          >退出说明</span
        >
        <!-- <span>删除记录</span> -->
      </div>
    </div>
    <div v-show="showExp" class="bodyCon">
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column
          property="name"
          label="导入数据包"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column property="uploadtime" label="导入时间">
        </el-table-column>
        <el-table-column property="uploaduser" label="操作人" width="120">
        </el-table-column>
        <el-table-column label="导入结果" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.readstatus == 0">导入成功</span>
            <span v-else>导入失败</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="60">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        class="pagination"
      >
      </el-pagination>
    </div>
    <div v-show="!showExp" class="expCon bodyCon">
      <span
        >&nbsp;&nbsp;&nbsp;&nbsp;监测批次数据包括监测图斑、前期影像、后期影像，其中：前期影像放在文件夹QDOM中、后期影像放在文件夹DDOM中。同一块区域的影像命名必须一致。
      </span>
      <br />
      <span>
        对数据要求说明：
        <br />（1）数据压缩包格式为.zip <br />
        （2）数据压缩包中包含文件夹QDOM、DDOM，shp数据文件 <br />
        （3）矢量数据shp和tif影像坐标系为CGCS2000<br />
        （4）检测图斑shp文件中必须包含字段jcbh(图斑编号),jcmj(检测面积),xmc(行政名称),qsx(前时相),hsx(后时相),qlx(前类型),hlx(后类型)
      </span>
    </div>
  </div>
</template>

<script>
import { ShapeUploadV1, FileList, deletFile } from "@/api/ghss/hgxfx.js";
export default {
  components: {},
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      total: 0,
      showExp: true,
      // uploadFileUrl: window.axiosURI + "/file/upload", // 上传文件服务器地址
      uploadFileUrl: window.axiosURI + "/file/upload/geom/v1", // 上传文件服务器地址
      fileList: [], //文件
      fileDataID: "", //存储上传文件获取到的id
      tableData: [],
      additionalData: {
        // file: null,
        fromType: 2,
        fromRoute: this.$route.path,
        storeStats: "",
        followup: 1,
      },
      loading:null,
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    showPlin(val) {
      this.showExp = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.init();
    },
    init() {
      FileList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    handleBeforeUpload(file) {
      // this.additionalData.file = file;
      // this.$modal.loading("正在上传文件，请稍候...");
     this.loading = this.$loading({
          lock: true,
          text: '正在上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      return true;
    },
    // 上传失败
    handleUploadError(err) {
      this.$message.error("上传文件失败,请重试");
    }, 
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.success) {
        this.$message({
          message: "导入文件成功!",
          type: "success",
        });
        this.loading.close();
        this.fileDataID = res.data.id;
        this.init();
        this.$refs.fileUploadBtn.clearFiles(); //上传成功之后清除历史记录
      }else{
        this.loading.close();
        this.$refs.fileUploadBtn.clearFiles(); //上传成功之后清除历史记录
      }
    },
    //上传文件
    handleChange(file, fileList) {
      this.fileDataID = "";
      // this.fileList = [];
      // if (fileList.length > 0) {
      //   this.fileList = [fileList[fileList.length - 1]]; //这一步，是展示最后一次选择文件
      // }
      const formdata = new FormData();
      // formdata.append("file", file.raw);
      formdata.append("file", file.file);
      formdata.append("fromType", 2);
      formdata.append("fromRoute", this.$route.path);
      formdata.append("storeStats", "");
      formdata.append("followup", 1);
      ShapeUploadV1(formdata).then((res) => {
        if (res.success) {
          this.$message({
            message: "导入文件成功!",
            type: "success",
          });
          this.fileDataID = res.data.id;
          this.init();
        }
      });
    },
    handleDel(row) {
      deletFile(row.id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "删除成功成功!",
            type: "success",
          });
          this.init();
        }
      });
    },
  },
  watch: {},
  watch: {},
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.heaerCon {
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
  .miniBtn {
    /deep/ .el-button--mini {
      background: #0f7ac8;
      border: none;
      border-radius: 0;
      color: #fff;
    }
  }
  .showBtn {
    color: #169bd5;
  }
}
/deep/.dialog-footer .el-button {
  background-color: #3f94f53f;
  border: 1px solid #3f93f5;
}
.expCon {
  color: #fff;
}
.bodyCon {
  height: 36vh;
  /deep/ .el-pagination button:disabled {
    color: #fff;
    background-color: rgba(75, 185, 250, 0.2) !important;
    cursor: not-allowed;
  }
}
</style>