增加上传

src/components/FinancialModule/accDetail/CompanyAccDetail.vue

@@ -23,6 +23,46 @@
     .page_CompanyAccDetail .CAcc_bg_green{color: #2BB87C}
     ._addChuNa_tit{color: gray;margin-bottom: 10px;}
     ._addChuNa_tit span{ color:#333333}
+    .page_CompanyAccDetail ._addUpload_box{
+      display: block;
+      margin-top: 20px;
+      width:590px;
+    }
+    .page_CompanyAccDetail ._addUpload_box>div{
+      float: left;
+      width: 138px;
+      height: 92px;
+      border: 1px dashed rgba(210,210,210,1);
+      border-radius: 2px;
+      cursor: pointer;
+      padding: 5px;
+      margin:0 10px 10px 0;
+      position: relative;
+    }
+    .page_CompanyAccDetail .el-upload-dragger {
+        width: 126px!important;
+        height: 80px!important;
+    }
+    .page_CompanyAccDetail ._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;
+    }
+    .page_CompanyAccDetail ._addUpload_box .icon-guanbi1:hover {
+        font-size: 12px;
+        color: #c94052;
+    }
+
 </style>
 <template>
     <div  class='flexOne page_CompanyAccDetail'>
@@ -299,7 +339,6 @@
                   <td>{{moneyFormat(payMsg.allMoney)}}</td>
                 </tr>
               </template>
-
             <tr>
               <td height="34px">{{$t('fnc.a_zongjine')}}</td>
               <td height="34px" colspan="7">
@@ -337,12 +376,62 @@
               </td>
             </tr>
           </table>
+          <el-form label-width="110px">
+            <el-row>
+              <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">{{$t('active.ld_djscwj')}}</div>
+                          </el-upload>
+                      </div>
+                  </div>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
           <div slot="footer" class="dialog-footer">
             <button class="normalBtn" type="primary" @click="submitAddChuNa">{{$t('pub.saveBtn')}}</button>
             &nbsp;
             <button class="hollowFixedBtn" @click="initAddChuNa">{{$t('pub.cancelBtn')}}</button>
           </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>
@@ -408,6 +497,7 @@ export default {
               RemitterName:'',
               TradeDate:'',
               BankList:[],
+              vorcherInos:[]
             },
             AccListT:[],
             accountListT:[],
@@ -421,6 +511,13 @@ export default {
             isCheckAll:false,
             //是否显示全选框
             isShowCheckAll:false,
+            picIsShow:false,
+            picObj:[],
+            imgList:[],
+            //上传数组
+            saveMsg:[],
+            TradeDate:'',
+            initialIndex: 0,
         }
     },
     created(){
@@ -628,9 +725,10 @@ export default {
         },
         initAddChuNa(){
           this.payMsgList = [];
+          this.saveMsg=[];
           this.listAllMoney = 0;
           this.huikuanren = '';
-          this.TradeDate = '';
+          this.TradeDate='';
           this.addChuNa = false;
           this.payMsg = {
             ID:0,
@@ -803,7 +901,8 @@ export default {
           this.allLoading = true
           this.apipost('Financial_post_MergeFinance',this.addMsg,r=>{
             if(r.data.resultCode === 1) {
-              this.addChuNa = false
+              this.addChuNa = false;
+              this.saveMsg=[];
               this.getList()
             }else{
               this.$message.error(r.data.message)
@@ -950,6 +1049,63 @@ export default {
                     }else{}
                 },err=>{})
         },
+
+        showUpLoadFile(i){  // 预览上传文件
+            if(i.Type==3){
+              this.picObj.push(i.Url);
+              this.imgList.push(i.Url);
+              this.picIsShow= false;
+              // 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.vorcherInos = 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.UploadSelfFileT(path, newArr, x => {
+                let fileSize = file.file.size<1024? file.file.size:(file.file.size / 1024).toFixed(0);
+                this.saveMsg.push({
+                    Content: x.data.FilePath,
+                    ID:0,
+                    Type:fileTypeNumber,
+                    Url: this.domainManager().ViittoFileUrl + x.data.FilePath,
+                })
+                this.addMsg.vorcherInos = this.saveMsg;
+                this.Success('上传成功');
+            });
+        },
     },mounted(){
         let userInfo=this.getLocalStorage();
         this.getAccountTypeList();