站点导入功能

src/views/bus/routeInfo-detail.vue

@@ -66,7 +66,18 @@
                 }">
                 </el-time-select>
             </el-form-item>
-          <h5>车辆站点信息</h5>
+          <h3>车辆站点信息</h3>
+          <el-divider></el-divider>
+          <el-row class="button-group">
+            <el-button
+              type="primary"
+              size="small"
+              plain
+              icon="el-icon-upload2"
+              @click="batchImportVisible = true"
+              >导入站点</el-button
+            >
+          </el-row>
           <el-table :data="formModel.stationList">
             <el-table-column type="index" label="序号" width="55"></el-table-column>
             <el-table-column prop="name" label="站点名称">
@@ -160,6 +171,55 @@
         <el-button type="primary" @click="handleSelectPoint()">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog
+      title="导入"
+      :visible.sync="batchImportVisible"
+      :modal-append-to-body="false"
+      style="text-align: left"
+      :close-on-click-modal="false"
+    >
+      <el-form label-width="150px">
+        <el-form-item label="模板下载">
+          <el-link
+            href="http://rccs.oss-cn-hangzhou.aliyuncs.com/smart-bus/excel/routeInfo.xls"
+            type="primary"
+            target="_blank"
+            >点击下载模板</el-link
+          >
+        </el-form-item>
+        <el-form-item label="上传文件">
+          <el-upload
+            class="upload-demo"
+            accept=".xls"
+            :action="uploadUrlXls"
+            :data="uploadXlsData"
+            :headers="headers"
+            :on-preview="handleBatchImportPreview"
+            name="uploadFile"
+            :multiple="true"
+            :limit="1"
+            :on-remove="handleBatchImportRemove"
+            :before-remove="beforeBatchImportRemove"
+            :before-upload="beforeUpload"
+            :on-exceed="handleBatchImportExceed"
+            :on-success="handleBatchImportSuccess"
+            :file-list="batchImportFileList"
+          >
+            <el-button size="small" type="primary" :loading="xlsLoading"
+              >点击上传</el-button
+            >
+            <div slot="tip" class="el-upload__tip">
+              只能上传xls文件，且不超过500kb
+            </div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="batchImportVisible = false"
+          >关 闭</el-button
+        >
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -237,8 +297,16 @@ export default {
         label: "name",
         children: "children",
       },
+      uploadUrlXls: Constant.serverUrl + "/bus/stationInfo/importXls",
+      uploadXlsData: {
+        subFolder: "station",
+        routeId:this.businessKey,
+      },
       sceneData: [],
       regionData: [],
+      batchImportVisible: false,
+      batchImportFileList: [],
+      xlsLoading: false,
     };
   },
   created() {
@@ -397,6 +465,84 @@ export default {
         stationList.splice(index+1,0,row);
       }
     },
+    beforeUpload(file, fileList) {
+      //导入前判断
+    },
+    //批量导入-上传成功
+    handleBatchImportSuccess(response, file, fileList) {
+      var self = this;
+      self.xlsLoading = false;
+      if (response.result) {
+        self.$message.success(response.message);
+        this.batchImportFileList = [];
+        this.refurbishList();
+        this.uploadCompanyId = "";
+        this.uploadXlsData.companyId = "";
+        this.batchImportVisible = false;
+      } else {
+        //this.$message.error(response.message);
+        this.refurbishList();
+        this.batchImportFileList = [];
+        this.uploadCompanyId = "";
+        this.uploadXlsData.companyId = "";
+
+        if (response.data != null) {
+          //下载有错误信息提示的报表
+          //window.open(response.data);
+          self.$message({
+            showClose: true,
+            dangerouslyUseHTMLString: true,
+            message:
+              response.message +
+              `,<a href="${response.data}" target="_blank">点击下载未导入的数据报表</a>&nbsp;`,
+            duration: 30000,
+          });
+        }
+      }
+    },
+    //批量导入-预览
+    handleBatchImportPreview(file) {
+      console.log(file.url);
+    },
+    //批量导入-移除
+    handleBatchImportRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    //批量导入-移除前操作
+    beforeBatchImportRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    //批量导入-文件超出个数限制时的钩子
+    handleBatchImportExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
+    },
+    refurbishList(){
+      var self = this;
+      (function () {
+        if (self.businessKey.length == 0) {
+          return routeInfoApi.create();
+        } else {
+          return routeInfoApi.edit(self.businessKey);
+        }
+      })()
+        .then((response) => {
+          var jsonData = response.data;
+          self.loading = false;
+
+          if (jsonData.result) {
+            self.formModel = jsonData.data;
+          } else {
+            self.$message.error(jsonData.message + "");
+          }
+        })
+        .catch((error) => {
+          self.$message.error(error + "");
+        });
+    }
   },
   components: {
     "el-select-tree": SelectTree,
@@ -416,11 +562,6 @@ export default {
 
         if (jsonData.result) {
           self.formModel = jsonData.data;
-          let picture = self.formModel.picture;
-          if (picture != null) {
-            self.fileUrl =
-              picture + "?x-oss-process=image/resize,m_lfit,h_400,w_400";
-          }
         } else {
           self.$message.error(jsonData.message + "");
         }

src/views/bus/routeInfo-list.vue

@@ -290,6 +290,15 @@ export default {
           {id: 2, position: [112.275276, 30.306827], content: ''}
       ],
       mapPath: [[112.276585, 30.306401], [112.275276, 30.306827]],
+      mapLoading: false,
+      plugin: [{
+          pName: 'ToolBar',
+          events: {
+              init(instance) {
+                  console.log(instance);
+              }
+          }
+      }],
     };
   },
   created() {