s

src/components/busManagement/BusApportionManagement.vue

@@ -52,6 +52,74 @@
   .exportCompany{
     width:450px;
   }
+    ._addUpload_box{
+        display: block;
+        margin-top: 15px;
+    }
+    ._addUpload_box img{
+        width: 100%;
+    }
+    ._addUpload_box>div{
+        float: left;
+        width:138px;
+        height:92px;
+        border:1px dashed rgba(210,210,210,1);
+        border-radius:2px;
+        cursor: pointer;
+        margin-bottom: 10px;
+        padding: 5px;
+        margin-right: 10px;
+        position: relative;
+    }
+    ._addUpload_box>div:hover{
+        background-color: #f5f5f5;
+    }
+    ._addFile_name{
+        padding-left: 15px;
+        max-width: 450px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    ._addUpload_box .icon-guanbi1 {
+        font-size: 12px;
+        color: white;
+        display: inline-block;
+        margin-left: 15px;
+        position: absolute;
+        right: -6px;
+        top: -9px;
+        background-color: #f56c6c;
+        border-radius: 50%;
+        height: 20px;
+        width: 20px;
+        text-align: center;
+        line-height: 20px;
+    }
+    ._addUpload_box .icon-guanbi1:hover {
+        font-size: 12px;
+        color: #c94052;
+    }
+    ._addUpload_box .icon-excel,._addUpload_box .icon-pdf{
+        text-align: center;
+        font-size: 38px;
+        color: green;
+        line-height: 75px;
+    }
+    .BusApportionManagement .el-upload-dragger{
+        width:126px!important;
+        height:80px!important;
+    }
+    ._show_img_box{
+      position: fixed;
+      background: rgba(0,0,0,.6);
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 999;
+      text-align: center;
+    }
 </style>
 
 <template>
@@ -260,6 +328,42 @@
             <el-col :span="4" :gutter="35">
               <button type="button" class="normalBtn" style="margin:5px 0 0 60px;" @click="checkIsUse">添加团号</button>
             </el-col>
+            <el-col :span="12" :gutter="35">
+            <el-form-item label="上传凭证">
+                    <div class="_addUpload_box clearfix" >
+                        <template v-for="(file,fIndex) in saveMsg">
+                            <div v-if="file.Type==3">
+                                <div style="width:100%;height:100%;overflow: hidden;">
+                                    <img :src="file.Url?file.Url:file.Content" @click="showUpLoadFile(file)">
+                                </div>
+                                <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
+                            </div>
+                            <div v-if="file.Type==1">
+                              <div class="iconfont " :class="file.Content.substring(file.Content.lastIndexOf('.')+1,file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"  @click="showUpLoadFile(file)">
+
+                              </div>
+                              <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
+                            </div>
+                            <div v-if="file.Type==2">
+                                <div class="iconfont icon-excel"  @click="showUpLoadFile(file)">
+
+                                </div>
+                                <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
+                            </div>
+                        </template>
+                        <div class="_pic_upload">
+                            <el-upload
+                            drag
+                            :http-request="uploadFileBtn"
+                            :multiple="true"  :show-file-list="false"  action="">
+                            <i class="el-icon-plus avatar-uploader-icon"></i>
+                            <div class="el-upload__text">点击/拖拽上传</div>
+                            </el-upload>
+                        </div>
+                    </div>
+            </el-form-item>
+          </el-col>
+
         </el-row>
         <el-row>
             <el-col :span="20" :gutter="35">
@@ -315,6 +419,16 @@
       </div>
     </el-dialog>
 
+    <div v-if='picIsShow' class="_show_img_box" @click="picIsShow=false,picObj=[]">
+        <div style="position: absolute; width: 800px; height: 600px; left: 50%; top: 50%; margin-left: -400px; margin-top: -300px;">
+            <el-carousel :initial-index=initialIndex height="600px" :interval="5000" trigger="click">
+            <el-carousel-item style="height: 600px;overflow:auto;"  v-for="(item,index) in picObj" :key="index">
+                <img :src="item"  style=""/>
+            </el-carousel-item>
+            </el-carousel>
+        </div>
+    </div>
+
   </div>
 </template>
 <script>
@@ -350,7 +464,8 @@ export default {
               f_currency:1,
               f_rate:'',
               ClientID:0,
-              PayDate:''
+              PayDate:'',
+              VorList:[]
             },
             dataList: [],
             total: 0,
@@ -401,6 +516,11 @@ export default {
               CurrType:3,
               ClientId:0
             },
+            //上传数组
+            saveMsg:[],
+            picIsShow:false,
+            picObj:[],
+            imgList:[],
             pickerBeginDateBefore: {
               disabledDate: time => {
                 let endTime = new Date(this.exportInfo.EndGroupDate)
@@ -572,7 +692,6 @@ export default {
               if (res.data.resultCode == 1) {
                 this.dataList = res.data.data.pageData;
                 this.total = res.data.data.count;
-                console.log(this.dataList,'dataList');
               } else {
                 this.Error(res.data.message);
               }
@@ -597,10 +716,12 @@ export default {
               f_rate:'',
               ClientID:0,
               PayDate:'', 
+              VorList:[]
           };
           this.Year = '';
           this.TCIDS ='';
           this.allTeamList = [];
+          this.saveMsg = [];
           this.addMsg = newMsg;
         },
 
@@ -834,6 +955,64 @@ export default {
           });
           window.open(routeData.href, "_blank");
         },
+
+        showUpLoadFile(i){  // 预览上传文件
+            if(i.Type==3){
+              this.picObj.push(i.Url);
+              this.imgList.push(i.Url);
+              this.picIsShow= true;
+              // this.hideFlashMan = true;
+            }else{
+                if(i.Content.substring(i.Content.lastIndexOf('.')+1,i.Content.length).toUpperCase()=='PDF'){ 
+                    this.previewPDF(i.Url)
+                }else{
+                    window.open("https://view.officeapps.live.com/op/view.aspx?src="+i.Url)
+                }
+            }
+        },
+        deleteUploadFile(i){  // 删除上传文件
+            this.saveMsg.splice(i,1);
+            this.addMsg.VorList = this.saveMsg;
+        },
+        uploadFileBtn(file) { //上传
+            if(file.file.size > 1024 * 1024 * 10) {
+                this.Error('文件大小不能超过10M！')
+                return
+            }
+            //  1 文档  2 数据 3 图片
+            let typeArr=[
+                {stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3},
+                {stringArr:'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF',type:1},
+            ]
+            let ft=file.file.name.substring(file.file.name.lastIndexOf('.')+1,file.file.name.length).toUpperCase();
+            let fileTypeNumber = 2;
+            let typeOk  = false;
+            typeArr.forEach(x=>{
+                if(x.stringArr.indexOf(ft)!='-1')
+                {
+                  fileTypeNumber=x.type
+                  typeOk = true;
+                }
+            })
+            if (!typeOk) return this.Error('请上传图片、word、excel类型的文件！');
+            let newArr = [];
+            newArr.push(file.file)
+            let path = "/Upload/Temporary/"
+            this.$message.info('上传中...')
+            this.uploadFile(path, newArr, x => {
+              console.log(x.res.requestUrls[0])
+                let fileSize = file.file.size<1024? file.file.size:(file.file.size / 1024).toFixed(0);
+                this.saveMsg.push({
+                    Content: x.name,
+                    ID:0,
+                    Type:fileTypeNumber,
+                    Url:x.res.requestUrls[0].split("?")[0],
+                })
+                this.addMsg.VorList = this.saveMsg;
+                this.Success('上传成功');
+            });
+        },
+
     },
     mounted(){
       this.getList();