小区提交

src/api/zdsz/area.js

@@ -57,3 +57,17 @@ export function getAreas() {
     params:{district:''}
   })
 }
+// 小区导入滚动条监控接口
+export function flushProgress() {
+  return request({
+    url: '/zdsz/area/flushProgress',
+    method: 'get',
+  })
+}
+// 小区导入滚动条停止监控接口
+export function clearFlushProgress() {
+  return request({
+    url: '/zdsz/area/clearFlushProgress',
+    method: 'get',
+  })
+}

src/plugins/download.js

@@ -9,6 +9,46 @@ const baseURL = process.env.VUE_APP_BASE_API
 let downloadLoadingInstance;
 
 export default {
+  excel(url, params) {
+    // get请求映射params参数
+    if (params) {
+      let urlparams = url + '?';
+      for (const propName of Object.keys(params)) {
+        const value = params[propName];
+        var part = encodeURIComponent(propName) + "=";
+        if (value !== null && typeof(value) !== "undefined") {
+          if (typeof value === 'object') {
+            for (const key of Object.keys(value)) {
+              if (value[key] !== null && typeof (value[key]) !== 'undefined') {
+                let params = propName + '[' + key + ']';
+                let subPart = encodeURIComponent(params) + '=';
+                urlparams += subPart + encodeURIComponent(value[key]) + '&';
+              }
+            }
+          } else {
+            urlparams += part + encodeURIComponent(value) + "&";
+          }
+        }
+      }
+      urlparams = urlparams.slice(0, -1);
+      url = urlparams;
+    }
+    url = baseURL + url
+    axios({
+      method: 'get',
+      url: url,
+      responseType: 'blob',
+      headers: { 'Authorization': 'Bearer ' + getToken() }
+    }).then(async (res) => {
+      const isLogin = blobValidate(res.data);
+      if (isLogin) {
+        const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
+        this.saveAs(blob, decodeURI(res.headers['download-filename']))
+      } else {
+        Message.error('无效的会话，或者会话已过期，请重新登录。');
+      }
+    })
+  },
   oss(ossId) {
     var url = baseURL + '/system/oss/download/' + ossId
     downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })

src/views/zdsz/area/index.vue

@@ -9,14 +9,14 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-<!--      <el-form-item label="小区规模" prop="scale">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.scale"-->
-<!--          placeholder="请输入小区规模"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
+      <el-form-item label="小区规模" prop="scale">
+        <el-input
+          v-model="queryParams.scale"
+          placeholder="请输入小区规模"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
       <el-form-item label="是否释放" prop="releaseIs">
         <el-select v-model="queryParams.releaseIs" placeholder="请选择是否释放">
           <el-option
@@ -27,14 +27,14 @@
           ></el-option>
         </el-select>
       </el-form-item>
-<!--      <el-form-item label="释放人" prop="releaseBy">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.releaseBy"-->
-<!--          placeholder="请输入释放人"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
+      <el-form-item label="释放人" prop="releaseBy">
+        <el-input
+          v-model="queryParams.releaseBy"
+          placeholder="请输入释放人"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
       <el-form-item label="行政区" prop="district">
         <el-select v-model="queryParams.district" placeholder="请选择行政区" clearable>
           <el-option
@@ -118,6 +118,28 @@
         >导出
         </el-button>
       </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          :loading="exportLoading"
+          @click="handleExports"
+        >所属包导出
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-upload2"
+          size="mini"
+          @click="handleImport"
+          v-hasPermi="['system:user:import']"
+        >导入
+        </el-button>
+      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
@@ -150,20 +172,37 @@
       <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button v-if="scope.row.releaseIs ==='001'"
+                     size="mini"
+                     type="text"
+                     icon="el-icon-edit"
+                     @click="handleRelease(scope.row)"
+                     v-hasPermi="['gas:area:edit']"
+          >释放
+          </el-button>
+          <el-button v-if="scope.row.releaseIs ==='001'"
+                     type="text"
+                     plain
+                     icon="el-icon-download"
+                     size="mini"
+                     @click="handleUpload(scope.row)"
+                     v-hasPermi="['gas:area:edit']"
+          >下载
+          </el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['zdsz:area:edit']"
-          >修改
+            v-hasPermi="['gas:area:edit']"
+          >编辑
           </el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['zdsz:area:remove']"
+            v-hasPermi="['gas:area:remove']"
           >删除
           </el-button>
         </template>
@@ -261,17 +300,91 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 用户导入对话框 -->
+    <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="所属包导出" :visible.sync="opens" width="500px" append-to-body>
+      <el-form ref="form" :model="forms" :rules="ruless" label-width="100px">
+        <el-form-item label="核算行政区" prop="calculateDistrict">
+          <el-select v-model="forms.calculateDistrict" placeholder="请选择核算行政区" clearable style="width: 100%">
+            <el-option
+              v-for="dict in dict.type.district"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属包" prop="belongingPack">
+          <el-select v-model="forms.belongingPack" placeholder="请选择所属包" clearable style="width: 100%">
+            <el-option
+              v-for="dict in dict.type.belonging_pack"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="dowExports">确 定</el-button>
+        <el-button @click="cancels">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import {listArea, getArea, delArea, addArea, updateArea} from "@/api/zdsz/area";
-
+import {listArea, getArea, delArea, addArea, updateArea,flushProgress,clearFlushProgress} from "@/api/zdsz/area";
+import { getToken } from '@/utils/auth'
 export default {
   name: "Area",
-  dicts: ['belonging_pack', 'district', 'release_status'],
+  dicts: ['belonging_pack', 'district', 'release_status','affiliated_package'],
   data() {
     return {
+      //进度条
+      timeInterval: null,
+      bfb: '0',
+      jdtMsg: '',
       // 按钮loading
       buttonLoading: false,
       // 遮罩层
@@ -292,6 +405,7 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      opens: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -304,6 +418,27 @@ export default {
         calculateDistrict: undefined,
         belongingPack: undefined,
       },
+      forms: {
+        calculateDistrict: '',
+        belongingPack: ''
+      },
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: '',
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: 'Bearer ' + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + '/gas/area/importData'
+      },
+
+
       // 表单参数
       form: {},
       // 表单校验
@@ -356,6 +491,11 @@ export default {
       this.open = false;
       this.reset();
     },
+    // 取消按钮
+    cancels() {
+      this.opens = false
+      this.forms = {}
+    },
     // 表单重置
     reset() {
       this.form = {
@@ -450,12 +590,63 @@ export default {
         this.loading = false;
       });
     },
+    handleUpload(row) {
+      window.location.href = 'https://cczdsz.com/prod-api/zdsz/area/upload?id=' + row.id
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.title = '用户导入'
+      this.upload.open = true
+    },
     /** 导出按钮操作 */
     handleExport() {
       this.download('zdsz/area/export', {
         ...this.queryParams
       }, `area_${new Date().getTime()}.xlsx`)
-    }
+    },
+    // 文件上传中处理
+    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('/zdsz/area/importTemplate')
+    },
+    // 提交上传文件
+    submitFileForm() {
+      const ther = this
+      this.timeInterval = setInterval(function() {
+        ther.flushProgress()
+      }, 1500)
+      this.$refs.upload.submit()
+    },
+    // 提交上传文件
+    flushProgress() {
+      flushProgress().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)
+        }
+      })
+    },
+    /** 导出按钮操作 */
+    handleExports() {
+      this.opens = true
+      this.forms = {}
+    },
+    dowExports() {
+      this.$download.excel('/zdsz/area/exports', this.forms)
+      this.opens = false
+    },
   }
 };
 </script>