数据采集-数据采集添加 导入、下载模板功能

src/api/portal/GATHER/GATHER.js

@@ -81,3 +81,22 @@ export function report(data) {
     data: data
   })
 }
+
+// 下载导入模板
+export function download(id) {
+  return request({
+    url: '/gather/download/' + id,
+    method: 'get',
+    responseType: "blob",
+  })
+}
+
+
+// 导入
+export function upload(data) {
+  return request({
+    url: '/gather/upload/',
+    method: 'post',
+    data:data
+  })
+}

src/views/GATHER/index.vue

@@ -84,14 +84,30 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
+        <el-button type="success" plain size="mini" @click="openUpload = true"
+          >导入</el-button
+        >
+
+        <!-- <el-upload
+          :show-file-list="false"
+          :http-request="httprequest"
+          :before-upload="uploadFile"
+          class="upload-demo"
+          action="#"
+          :auto-upload="true"
+          :on-change="handleChange"
+          :file-list="fileList"
+        >
+          <el-button type="success" plain size="mini">导入</el-button>
+        </el-upload> -->
+      </el-col>
+      <el-col :span="1.5">
         <el-button
-          type="warning"
           plain
-          icon="el-icon-download"
           size="mini"
-          @click="handleExport"
-          v-hasPermi="['business:GATHER:export']"
-          >导出</el-button
+          @click="handleDownload()"
+          :disabled="radio === '' ? true : false"
+          >下载导入模板</el-button
         >
       </el-col>
       <right-toolbar
@@ -104,8 +120,26 @@
       v-loading="loading"
       :data="GATHERList"
       @selection-change="handleSelectionChange"
+      @row-click="showRow"
     >
+      <!-- @current-change="handleCurrentChange" -->
+      <el-table-column label="选择" width="70" center>
+        <template scope="scope">
+          <el-radio
+            class="radio"
+            v-model="radio"
+            :label="scope.$index"
+            @change.native="getCurrentRow(scope.row)"
+            >{{ "" }}</el-radio
+          >
+        </template>
+      </el-table-column>
       <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <el-table-column label="单位名称" align="center" prop="deptId_dictText">
+        <template slot-scope="scope">
+          {{ scope.row.deptId_dictText }}
+        </template>
+      </el-table-column>
       <el-table-column label="数据类型" align="center" prop="type">
         <template slot-scope="scope">
           <span v-if="scope.row.type == 0">量化指标数据</span>
@@ -143,12 +177,19 @@
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
+          <!-- <el-button
+            style="margin: 0 2px"
+            size="mini"
+            type="text"
+            @click="handleDownload(scope.row)"
+            >下载导入模板</el-button
+          > -->
           <el-button
+            style="margin: 0 2px"
             v-if="scope.row.collStatus == 0"
             size="mini"
             type="text"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['business:GATHER:edit']"
             >录入</el-button
           >
 
@@ -157,11 +198,11 @@
             @confirm="handleApprove(scope.row)"
           >
             <el-button
+              style="margin: 0 2px"
               v-if="scope.row.reportStatus == 0"
               size="mini"
               slot="reference"
               type="text"
-              v-hasPermi="['business:GATHER:edit']"
               >上报</el-button
             >
           </el-popconfirm>
@@ -171,15 +212,16 @@
             @confirm="handleReport(scope.row)"
           >
             <el-button
+              style="margin: 0 2px"
               v-if="scope.row.reportStatus == 0"
               size="mini"
               type="text"
               slot="reference"
-              v-hasPermi="['business:GATHER:edit']"
               >提交审核</el-button
             >
           </el-popconfirm>
           <el-button
+            style="margin: 0 2px"
             v-if="scope.row.collStatus == 1"
             size="mini"
             type="text"
@@ -198,8 +240,80 @@
       @pagination="getList"
     />
 
+    <!-- 上传文件对话框 -->
+    <el-dialog
+      center
+      title="导入"
+      :visible.sync="openUpload"
+      width="50%"
+      append-to-body
+    >
+      <el-form
+        ref="uploadForm"
+        :model="uploadForm"
+        :rules="rules"
+        label-width="120px"
+      >
+        <el-form-item label="数据类型" prop="type">
+          <el-select
+            v-model="uploadForm.type"
+            placeholder="请选择数据类型"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="dict in typeList"
+              :key="dict.value + 'typeList'"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="文件" prop="linkUrl" v-show="uploadForm.type">
+          <el-upload
+            class="upload-demo"
+            ref="upload"
+            action="#"
+            :http-request="httprequest"
+            :before-upload="uploadFile"
+            :file-list="fileList"
+            :auto-upload="false"
+            :limit="1"
+          >
+            <el-button slot="trigger" size="small" type="primary"
+              >选取文件</el-button
+            >
+          </el-upload>
+          <!-- <el-upload
+            :http-request="httprequest"
+            :before-upload="uploadFile"
+            :limit="1"
+            class="upload-demo"
+            action="#"
+            :auto-upload="true"
+            :on-change="handleChange"
+            :file-list="fileList"
+          >
+            <el-button size="small" type="primary">点击上传</el-button>
+          </el-upload> -->
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitUpload">导 入</el-button>
+        <el-button @click="cancel">取 消</el-button>
+        <!-- <el-button @click="cancel">取 消</el-button> -->
+      </div>
+    </el-dialog>
+
     <!-- 添加或修改数据采集对话框 -->
-    <el-dialog center :title="title" :visible.sync="open" width="80%" append-to-body>
+    <el-dialog
+      center
+      :title="title"
+      :visible.sync="open"
+      width="80%"
+      append-to-body
+    >
       <el-tabs
         v-if="this.form.type == 0"
         v-model="activeName"
@@ -370,7 +484,12 @@ import {
   getInfoByColl,
   approve,
   report,
+  download,
+  upload,
 } from "@/api/portal/GATHER/GATHER.js";
+import { saveAs } from "file-saver";
+import { getToken } from "@/utils/auth";
+import axios from "axios";
 
 export default {
   name: "GATHER",
@@ -445,12 +564,67 @@ export default {
       rules: {
         // id: [{ required: true, message: "$comment不能为空", trigger: "blur" }],
       },
+      //设置文件名字
+      setFileName: "",
+      radio: "",
+      rowData: {},
+      fileList: [],
+      uploadForm: {},
+      openUpload: false,
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    submitUpload() {
+      this.$refs.upload.submit();
+    },
+    httprequest() {},
+    getCurrentRow(val) {
+      console.log(val);
+    },
+    handleCurrentChange(val, index) {
+      this.currentRow = val;
+      this.$emit("data", val.pkg);
+    },
+    handleChange(file, fileList) {
+      this.fileList = fileList.slice(-3);
+    },
+    showRow(row) {
+      //赋值给radio
+      this.radio = this.GATHERList.indexOf(row);
+      this.rowData = row;
+    },
+    //导入
+    uploadFile(file) {
+      let formData = new FormData();
+      formData.append("file", file);
+      formData.append("type", this.uploadForm.type);
+      upload(formData).then((res) => {
+
+      });
+    },
+    //下载模板
+    handleDownload() {
+      let row = this.rowData;
+      axios({
+        url: process.env.VUE_APP_BASE_API + "/gather/download/" + row.id,
+        method: "get",
+        responseType: "blob",
+        headers: {
+          Authorization: "Bearer " + getToken(),
+        },
+      }).then((res) => {
+        const temp = res.headers["content-disposition"]
+          .split(";")[1]
+          .split("filename=")[1];
+        const fileName = decodeURIComponent(temp);
+        const blob = new Blob([res.data]);
+        saveAs(blob, fileName);
+        this.getList();
+      });
+    },
     //上报
     handleApprove(data) {
       approve(data).then((res) => {
@@ -480,6 +654,7 @@ export default {
     cancel() {
       this.open = false;
       this.openDetail = false;
+      this.openUpload = false;
       this.reset();
     },
     // 表单重置
@@ -494,6 +669,10 @@ export default {
         reportStatus: "0",
         approveStatus: "0",
       };
+      this.uploadForm = {
+        type: "",
+      };
+      this.fileList = []
       this.resetForm("form");
     },
     /** 搜索按钮操作 */