提交代码

src/api/gas/area.js

@@ -14,6 +14,13 @@ export function flushProgress() {
     method: 'get',
   })
 }
+// 小区导入滚动条监控接口
+export function flushProgressqqq() {
+  return request({
+    url: '/gas/pressureRegulatingBox/flushProgress',
+    method: 'get',
+  })
+}
 // 小区导入滚动条停止监控接口
 export function clearFlushProgress() {
   return request({

src/views/gas/pressureRegulatingBox/index.vue

@@ -129,6 +129,16 @@
         >导出
         </el-button>
       </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          icon="el-icon-upload2"
+          size="mini"
+          @click="handleImport"
+          v-hasPermi="['gas:pressureRegulatingBox:import']"
+        >导入
+        </el-button>
+      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
@@ -177,6 +187,45 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+    <!-- 用户导入对话框 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">
+          <!--<div class="el-upload__tip" slot="tip">-->
+          <!--<el-checkbox v-model="upload.updateSupport"/>-->
+          <!--是否更新已经存在的用户数据-->
+          <!--</div>-->
+          <span>仅允许导入xls、xlsx格式文件。</span>
+          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
+                   @click="importTemplate"
+          >下载模板
+          </el-link>
+        </div>
+      </el-upload>
+      <div style="padding-top: 15px;line-height: 25px;font-size: 14px;">
+        完成度：{{ bfb }}%
+        <progress max="100" :value="bfb" style="width: 200px;height: 18px;"></progress>
+        <br>
+        导入结果：{{ jdtMsg }}
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false;bfb='0';jdtMsg=''">取 消</el-button>
+      </div>
+    </el-dialog>
 
     <!-- 添加或修改调压箱管理对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
@@ -244,12 +293,14 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="总户数" prop="remark">
-              <el-input-number v-model="pressureRegulatingBoxDetailsBo.totalNumberOfHousehold" :controls="false" style="width: 100%"></el-input-number>
+              <el-input-number v-model="pressureRegulatingBoxDetailsBo.totalNumberOfHousehold" :controls="false"
+                               style="width: 100%"></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="调压箱位置" prop="remark">
-              <el-input v-model="pressureRegulatingBoxDetailsBo.positionOfPressureRegulatingBox" placeholder="请输入调压箱位置"/>
+              <el-input v-model="pressureRegulatingBoxDetailsBo.positionOfPressureRegulatingBox"
+                        placeholder="请输入调压箱位置"/>
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -261,12 +312,7 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="接收时间" prop="remark">
-              <el-date-picker
-                v-model="pressureRegulatingBoxDetailsBo.receivingTime"
-                type="date"
-                style="width: 100%"
-                placeholder="选择接收时间">
-              </el-date-picker>
+              <el-input v-model="pressureRegulatingBoxDetailsBo.receivingTime" placeholder="请输入接收时间"/>
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -317,7 +363,8 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="设施规格型号" prop="remark">
-              <el-input v-model="pressureRegulatingBoxDetailsBo.facilitySpecificationsAndModels" placeholder="请输入设施规格型号"/>
+              <el-input v-model="pressureRegulatingBoxDetailsBo.facilitySpecificationsAndModels"
+                        placeholder="请输入设施规格型号"/>
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -351,18 +398,13 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="出厂日期" prop="remark">
-              <el-date-picker
-                v-model="pressureRegulatingBoxDetailsBo.factoryDate"
-                type="date"
-                placeholder="选择出厂日期"
-                style="width: 100%"
-              >
-              </el-date-picker>
+              <el-input v-model="pressureRegulatingBoxDetailsBo.factoryDate" placeholder="请输入出厂日期"/>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="主电源位置" prop="remark">
-              <el-input v-model="pressureRegulatingBoxDetailsBo.mainPowerSupplyPosition" placeholder="请输入主电源位置"></el-input>
+              <el-input v-model="pressureRegulatingBoxDetailsBo.mainPowerSupplyPosition"
+                        placeholder="请输入主电源位置"></el-input>
             </el-form-item>
           </el-col>
           <!--          <el-col :span="16">-->
@@ -388,12 +430,28 @@ import {
   addPressureRegulatingBox,
   updatePressureRegulatingBox
 } from "@/api/gas/pressureRegulatingBox";
+import {getToken} from "@/utils/auth";
+import {clearFlushProgress, flushProgress, flushProgressqqq} from "@/api/gas/area";
 
 export default {
   name: "PressureRegulatingBox",
   dicts: ['administrative_office'],
   data() {
-    return {
+    return {// 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: {Authorization: "Bearer " + getToken()},
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/gas/pressureRegulatingBox/importData"
+      },
       // 按钮loading
       buttonLoading: false,
       // 遮罩层
@@ -459,6 +517,46 @@ export default {
     this.getList();
   },
   methods: {
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.isUploading = false
+      this.$refs.upload.clearFiles()
+      this.getList()
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      this.$download.excel('/gas/pressureRegulatingBox/importTemplate')
+    },
+    // 提交上传文件
+    submitFileForm() {
+      const ther = this
+      this.timeInterval = setInterval(function() {
+        ther.flushProgress()
+      }, 1500)
+      this.$refs.upload.submit()
+    },
+    // 提交上传文件
+    flushProgress() {
+      flushProgressqqq().then(response => {
+        this.bfb = parseInt(response.data.bfb) >= 100 ? 100 : response.data.bfb
+        this.jdtMsg = response.data.message
+        if (response.data.message != null && response.data.message != '') {
+          clearFlushProgress().then(response => {
+          })
+          clearInterval(this.timeInterval)
+        }
+      })
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.title = '用户导入'
+      this.upload.open = true
+    },
+
     /** 查询调压箱管理列表 */
     getList() {
       this.loading = true;