白名单批量上传

src/util/api/api.js

@@ -1,6 +1,6 @@
 import axios from "../axios/axios";
 
-const {get, post, download} = axios
+const {get, post, download,uploadFile} = axios
 
 export function getUrlKey(name, url) {
     return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ""])[1].replace(/\+/g, '%20')) || null
@@ -40,4 +40,9 @@ export const getCarnoDicByPage = data => post("/WhiteListManageSys/whiteCarnoDic
 export const addCarnoDicData = data => post("/WhiteListManageSys/whiteCarnoDic/addCarnoDicData", data,"")
 //白名单自定义管理删除
 export const batchDelCarnoDicDatas = data => post("/WhiteListManageSys/whiteCarnoDic/batchDelCarnoDicDatas", data,"")
+//白名单批量导入---模板下载
+
+export const downloadSample = data => download("/WhiteListManageSys/whiteBatchImport/download", data,"")
+//上传附件到本地
+export const uploadSample = data => uploadFile("/WhiteListManageSys/whiteBatchImport/uploadFile", data,"")
 

src/util/axios/axios.js

@@ -154,5 +154,26 @@ export default {
                     reject(err)
                 })
         })
+    },uploadFile(url, data, showProgress) {
+        return new Promise((resolve, reject) => {
+            axios({
+                method: 'post',
+                url,
+                params: data,
+                crossDomain: true,
+           /*     headers: {
+                    Accept: 'application/json', 'Content-Type': 'application/json; charset=utf-8',
+                    withCredentials: true,
+                },*/
+                headers: { "Content-Type": "multipart/form-data",'Access-Control-Allow-Origin-Type':'*' },
+                responseType: 'json',
+            })
+                .then(res => {
+                    resolve(res)
+                })
+                .catch(err => {
+                    reject(err)
+                })
+        })
     },
 };

src/util/router/router.js

@@ -3,6 +3,7 @@ import NotFound from '../../views/ErrorPage/404.vue';
 import whiteListManage from '../../views/dev/detail/whiteListManage.vue';
 import whiteCarnoLogManage from '../../views/dev/detail/whiteCarnoLogManage.vue';
 import whiteCarNoDic from '../../views/dev/detail/whiteCarNoDic.vue';
+import uploadFile from '../../views/dev/detail/uploadFile.vue';
 
 
 
@@ -10,13 +11,16 @@ const routes = [
 
     {
         path: '/',
-        component: whiteListManage,// 这个是动态的
+        component: whiteListManage,//白名单管理
     },  {
         path: '/log',
-        component: whiteCarnoLogManage,// 这个是动态的
+        component: whiteCarnoLogManage,//
     },  {
         path: '/dic',
-        component: whiteCarNoDic,// 这个是动态的
+        component: whiteCarNoDic,//
+    },  {
+        path: '/file',
+        component: uploadFile,//
     },{
         path: '/WhiteListManageSys/index',
         component: whiteListManage,// 这个是动态的
@@ -24,14 +28,17 @@ const routes = [
         path: '/WhiteListManageSys/404',
         component: NotFound
     },{
-        path: '/WhiteListManageSys/whiteListManage',
+        path: '/WhiteListManageSys/whiteListManage',//白名单管理
         component: whiteListManage
     },{
-        path: '/WhiteListManageSys/whiteCarnoLogManage',
+        path: '/WhiteListManageSys/whiteCarnoLogManage',//白名单日志管理
         component: whiteCarnoLogManage
     },{
-        path: '/WhiteListManageSys/whiteCarNoDic',
+        path: '/WhiteListManageSys/whiteCarNoDic',//自定义白名单
         component: whiteCarNoDic
+    },{
+        path: '/WhiteListManageSys/uploadFile',////白名单上传
+        component: uploadFile
     },{
         path: '/WhiteListManageSys:pathMatch(.*)',
         redirect: '/WhiteListManageSys/404'

src/views/dev/detail/uploadFile.vue

@@ -0,0 +1,247 @@
+
+<template>
+   <el-row style="width: 100%;height: 5%;border: 1px solid #e9ecee">
+     <el-col :span="2">
+       <el-button size="small" type="success" @click="downSqmple">模板下载</el-button>
+     </el-col>
+     <el-col :span="8">
+         <el-upload
+             class="upload-demo"
+             action=""
+             :limit="1"
+             :http-request="uploadSample"
+             :before-upload="uoloadBefore"
+             :on-preview="handlePreview"
+             :on-remove="handleRemove"
+             :before-remove="beforeRemove"
+             :on-exceed="handleExceed"
+             auto-upload="false"
+             accept="xlsx"
+             >
+           <el-button size="small" type="primary">选择文件</el-button>
+           <p style="color:gray">{{filename}}</p>
+           <p style="color:red">***请选择需要导入的白名单文件</p>
+         </el-upload>
+       </el-col>
+   </el-row>
+    <el-row style="width: 100%;height: 33%;border: 1px solid #e9ecee">
+        <el-col :span="24" style="width: 100%;height: 100%;">
+           <el-row style="width: 100%;height: 10%;border: 1px solid #e9ecee">
+             <el-col :span="24">
+               <el-tag type="primary" size="large" @click="showMFLDDiv">免费路段</el-tag>
+               <el-tag type="primary" size="large" @click="showZDYZHDiv" >自定义组合</el-tag>
+             </el-col>
+           </el-row>
+           <el-row style="width: 100%;height: 90%;border: 1px solid #e9ecee">
+             <el-col :span="24" style="width: 100%;height: 100%;">
+                <el-form v-if="detailLD" style="position: relative;height: 100%">
+                  <el-form-item label="免费路段：" style="position: relative;height: 40%;border:1px solid #e9ecee">
+                    <div style="position: inherit;height: 100%;border:1px solid #e9ecee">
+                      <el-checkbox-group v-model="selectRoadNoName" @change="showValue" :max="9">
+                        <el-checkbox v-for="(item, index) in list"
+                                     :label="item.LABEL" :key="item.VALUE" >{{item.LABEL}}</el-checkbox>
+                      </el-checkbox-group>
+                    </div>
+                  </el-form-item>
+                  <el-form-item label="路段描述：" style="position: relative;height: 30%;border:1px solid #e9ecee">
+                    <div style="position: inherit;height: 100%;border:1px solid #e9ecee">
+                      {{selectRoadNoNameInput}}
+                    </div>
+                  </el-form-item>
+                  <el-form-item label="*单位号：" style="position: relative;height: 10%">
+                    <el-select v-model="account"
+                               placeholder="请选择..."
+                               clearable="true"
+                               filterable="true"
+                               @click="changedwh"
+                                style="margin-top: 0;">
+                      <el-option
+                          v-for="item in accountList"
+                          :key="item.VALUE"
+                          :label="item.LABEL"
+                          :value="item.VALUE"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-form>
+                   <el-form v-if="detail">
+                     <el-form-item label="自定义组合：">
+                       <el-select v-model="zdyzhValue"
+                                  placeholder="请选择..."
+                                  clearable="true"
+                                  @change="zdyStanChange"
+                                  filterable="true"
+                                  @click="changezdy">
+                         <el-option
+                             v-for="item in zdyList"
+                             :key="item.VALUE"
+                             :label="item.LABEL"
+                             :value="item.VALUE"
+                         />
+                       </el-select>
+                     </el-form-item>
+                     <el-form-item label="自定义描述：">{{zdydiscrp}}</el-form-item>
+                     <el-form-item label="*单位号：">
+                       <el-select v-model="account"
+                                  placeholder="请选择..."
+                                  clearable="true"
+                                  filterable="true"
+                                  @click="changedwh">
+                         <el-option
+                             v-for="item in accountList"
+                             :key="item.VALUE"
+                             :label="item.LABEL"
+                             :value="item.VALUE"
+                         />
+                       </el-select>
+                     </el-form-item>
+                   </el-form>
+             </el-col>
+           </el-row>
+        </el-col>
+    </el-row>
+    <el-row style="width: 100%;height: 6%;border: 1px solid #e9ecee">
+      <el-col :span="2" >
+        <el-button size="default" id="import-button" style="" type="primary">数据导入</el-button>
+      </el-col>
+      <el-col :span="22"><p style="color:red">***上传的文件内容导入到白名单系统</p></el-col>
+    </el-row>
+    <el-row style="width: 100%;height: 50%;border: 1px solid #e9ecee">
+       <div>
+         日志内容
+       </div>
+    </el-row>
+</template>
+
+
+<script>
+import {downloadSample, uploadSample, getSelectList} from "@/util/api/api";
+
+    export default {
+      data() {
+        return {
+          fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
+                     {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
+          detailLD:true,
+          detail:false,
+          selectRoadNo:[],
+          selectRoadNoName:[],
+          selectRoadNoNameInput:"",
+          zdydiscrp:"",
+          discrp:"",
+          list:[],
+          zdyList:[],
+          accountList:[],
+          account:"",
+          zdyzhValue:"",
+          filename:""
+
+        };
+      },
+      methods: {
+        downSqmple(){
+          SendXMLHttpRequest();
+        },
+        handleRemove(file, fileList) {
+
+          console.log(file, fileList);
+        },
+        handlePreview(file) {
+          console.log(file);
+        },uoloadBefore(file){
+          debugger
+          console.log(file);
+        },uploadSample(item){//手动上传
+          console.log("上传中......");
+
+          let formData = new FormData();
+          let file = item.file;
+          formData.append('file', file);
+          uploadSample(formData).then(res=>{
+            console.log(JSON.stringify(res))
+          })
+        },
+        handleExceed(files, fileList) {
+          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+        },
+        beforeRemove(file, fileList) {
+          return this.$confirm(`确定移除 ${ file.name }？`);
+        },showMFLDDiv(){
+           this.detailLD=true;
+          this.detail=false;
+        },showZDYZHDiv(){
+          this.detailLD=false;
+          this.detail=true;
+        },showValue(value){
+          //站站里面路段重新加载，起始结束清空
+          this.discrb="";
+          this.selectRoadNo=[];
+          var _selectRoadNo=this.selectRoadNoName;
+          if(_selectRoadNo.length>0){
+            var split = _selectRoadNo;
+            this.selectRoadNo.push(split[0].split(":")[1]);
+            for(var k=1;k<split.length;k++){
+              this.selectRoadNo.push(split[k].split(":")[1]);
+            }
+            this.selectRoadNoNameInput=_selectRoadNo.toLocaleString()
+          }else{
+            this.selectRoadNoNameInput="";
+          }
+        },zdyStanChange(value){
+          const selectedOption = this.zdyList.find(option => option.VALUE === value);
+          if (selectedOption) {
+            this.zdydiscrp=selectedOption.DISCRP;
+          }else{
+            this.zdydiscrp="";
+          }
+        },changezdy(){
+          let selectType={
+            "selectType":"WHITE_ZDYZH"
+          }
+          getSelectList(selectType).then(res=>{
+            if(res.code>0){
+              this.zdyList=res.data;
+            }
+          });
+        },changedwh(){
+          let selectType={
+            "selectType":"COMNO"
+          }
+          getSelectList(selectType).then(res=>{
+            if(res.code>0){
+              this.accountList=res.data;
+            }
+          });
+        }
+      },mounted(){
+        let selectType={
+          "selectType":"ROAD"
+        }
+        getSelectList(selectType).then(res=>{
+          if(res.code>0){
+            this.list=res.data;
+          }
+        });
+      }
+    }
+function SendXMLHttpRequest() {
+  var port = window.location.port;
+  var url='http://' + window.location.host+'/WhiteListManageSys/whiteBatchImport/download';
+  console.log("port===="+port);
+  console.log("port===type="+ typeof port);
+  if(port ==="9980"){
+    url='http://' + window.location.hostname+':9003/WhiteListManageSys/whiteBatchImport/download'
+  }
+  var window1 = window.open(url);
+/*  setTimeout({
+    window1.close();
+  },1*1000);*/
+}
+
+</script>
+
+<style>
+#import-button{
+  margin-top: 10px !important;
+}
+</style>