申请书下载

src/components/FinancialModule/Application.vue

 <template>
   <div class="Application">
       <div class="Application_content">
+          <div>
+              <el-select @change="ChangeType" v-model="formdata.Type" placeholder="请选择">
+                <el-option label="现金" :value="1"></el-option>
+                <el-option label="转账" :value="2"></el-option>
+            </el-select>
+          </div>
+          <p style="text-align:right;margin:10px 0;font-size:14px">
+              流水号：<span style="color:#E95252">{{data.ApplyForNumber}}</span>
+          </p>
           <p style="text-align:center">
-              <span style="font-weight:700;font-size:20px;">現金受取依頼書</span>
+              <span style="font-weight:700;font-size:20px;">{{baseData.head}}</span>
               <span class="download" @click="downLoad">下载并保存</span>
           </p>
           <div> 
@@ -16,7 +25,7 @@
                         </el-option>
                     </el-select>
             </div>　　
-            弊社は下記のガイド1名が現金を受け取りします。受取者の本人パスポートを提示して/身分証明書を確認してから現金を渡してください。ご対応お願い致します。
+            {{baseData.info}}
           </div>
             
             <table style="margin-top:30px" class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
@@ -27,8 +36,10 @@
                     <th>金 額</th>
                 </tr>
                 <tr>
-                    <td>{{data.GetDate}}</td>
-                    <td>{{data.LeaderName}}</td>	
+                    <td>{{formdata.GetDate}}</td>
+                    <td>
+                        <el-input v-model="formdata.LeaderName" placeholder="请输入内容"></el-input>
+                    </td>	
                     <td>
                         <el-select clearable :disabled="disabled1" v-model="formdata.GetAddress" placeholder="请选择">
                             <el-option v-if="id=='' || id==item.CashId"
@@ -39,13 +50,32 @@
                             </el-option>
                         </el-select>
                     </td>	
-                    <td>{{data.Money}}</td>
+                    <td>
+                        <el-input v-model="formdata.Money" placeholder="请输入内容"></el-input>
+                    </td>
                 </tr>
             </table>
             <div style="text-align:right;margin-top:20px;font-size:14px;">
                 <p style="padding-bottom: 10px;">会社名 成都印象之旅</p>
                 <span>{{data.JapNowTime}}</span>
             </div>
+            <div class="_addUpload_box clearfix">
+                <div v-if="formdata.ImgAddress!=''">
+                    <div style="width:100%;height:100%;overflow: hidden;">
+                        <img :src="formdata.ImgAddress?formdata.ImgAddress:''">
+                    </div>
+                    <span class="iconfont icon-guanbi1" @click="deleteUploadFile"></span>
+                </div>
+                <div class="_pic_upload" >
+                    <el-upload style="width:100%;height:100%"
+                    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>
             <div style="margin:50px 0">
                 <p>{{data.CityName}}<span style="padding-left:6px;"> </span>{{data.TCNUM}}编号：{{data.FrId}}</p>
                 
@@ -58,6 +88,10 @@
 export default {
   data () {
     return {
+        baseData:{
+            head:"現金受取依頼書",
+            info:"弊社は下記のガイド1名が現金を受け取りします。受取者の本人パスポートを提示して/身分証明書を確認してから現金を渡してください。ご対応お願い致します。",
+        },
         FrId:0,
         CashList:[],
         formdata:{},
@@ -76,6 +110,44 @@ export default {
     
   },
   methods: {
+      ChangeType(val){
+          console.log("val",val);
+      },
+      uploadFileBtn(file) { //上传
+        if(this.formdata.ImgAddress!=''){
+            this.Error("只能上传一张图片！");
+            return;
+        }
+        //  1 文档  2 数据 3 图片
+        let typeArr=[
+            {stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3},
+        ]
+        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.$message.error("请上传图片！");
+        let newArr = [];
+        newArr.push(file.file)
+        let path = "/Upload/Temporary/"
+        this.$message.info(this.$t('tips.shangchuanzhong'))
+        this.UploadSelfFileT(path, newArr, x => {
+            let fileSize = file.file.size<1024? file.file.size:(file.file.size / 1024).toFixed(0);
+            let url=this.domainManager().ViittoFileUrl + x.data.FilePath;
+            
+            this.formdata.ImgAddress=url;
+            this.$message.success(this.$t('tips.scchenggong'))
+        }, 1);
+    },
+      deleteUploadFile(i){  // 删除上传文件
+            this.formdata.ImgAddress="";
+        },
       downLoad(){
           if(this.formdata.Name==""){
               this.Error("请选择旅行社")
@@ -110,7 +182,9 @@ export default {
         this.apipost('Financial_get_GetFinanceCashWithDrawals',{FrId:this.FrId}, res => {
         if(res.data.resultCode == 1) {
           this.data = res.data.data;
+          console.log("this.data",this.data)
           this.formdata=Object.assign({},res.data.data);
+          this.formdata.Type=1;
           this.CashList= res.data.data.CashList;
           if(this.data.Name!=""){
               this.disabled=true;
@@ -133,6 +207,65 @@ export default {
 </script>
 
 <style>
+.Application .singeRowTable tr td{
+    padding: 6px;
+}
+.Application .el-upload,.Application .el-upload-dragger{
+    font-size: 28px;
+    color: #8c939d;
+    width: 126px;
+    height: 80px;
+    line-height: 41px;
+    text-align: center;
+}
+.Application ._addUpload_box{
+    display: block;
+    margin-top: 15px
+}
+.Application ._addUpload_box img{
+    width: 100%;
+    height: 100%;
+}
+.Application ._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;
+}
+.Application ._addUpload_box>div:hover{
+    background-color: #f5f5f5;
+}
+.Application ._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;
+    }
+.Application ._addUpload_box .icon-guanbi1:hover {
+        font-size: 12px;
+        color: #c94052;
+    }
+.Application ._addUpload_box .icon-excel,._addUpload_box .icon-pdf{
+        text-align: center;
+        font-size: 38px;
+        color: green;
+        line-height: 75px;
+    }
 .Application .download{
     float:right;
     cursor: pointer;