出纳审核 上传附件

src/pages/financial/financalDocument/BasicDocuments.vue

@@ -722,14 +722,136 @@
     left: -4px;
     top: 19px;
   }
+  .page_fdd .sqs:hover {
+    text-decoration: underline;
+    color: rgb(255, 0, 0);
+  }
+
+  .page_fdd .Note_span:hover {
+    text-decoration: underline;
+    color: rgb(255, 0, 0);
+  }
+
+  .page_fdd .sqs {
+    position: relative;
+    cursor: pointer;
+    color: #3980C8;
+    font-size: 12px;
+  }
+
+  .page_fdd .Note_span {
+    position: relative;
+    cursor: pointer;
+    color: #3980C8;
+    font-size: 12px;
+  }
+  .page_fdd .page_bdm .avatar-uploader-icon{
+    width: 100% !important;
+    line-height: 0 !important;
+    height: 0;
+  }
+  .page_fdd .shangchuanfujian{
+    text-align: right
+  }
+  ._addUpload_box_btm {
+    padding-top: 20px;
+    max-height: 230px;
+    overflow: auto;
+  }
+  ._addUpload_box_btm img {
+    width: 100%;
+  }
+
+  ._addUpload_box_btm>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_btm>div:hover {
+    background-color: #f5f5f5;
+  }
+  ._addFile_name {
+    padding-left: 15px;
+    max-width: 450px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
+  ._addUpload_box_btm .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_btm .icon-guanbi1:hover {
+    font-size: 12px;
+    color: #c94052;
+  }
+
+  ._addUpload_box_btm .icon-excel {
+    text-align: center;
+    font-size: 38px;
+    color: green;
+    line-height: 75px;
+  }
+
+  ._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;
+  }
+
+  ._addUpload_tips {
+    font-size: 12px;
+    color: #999999;
+  }
+  ._wenjian {
+    padding: 15px;
+    width: 91px;
+    height: 80px;
+    border: 1px solid rgba(221, 221, 221, 1);
+    float: left;
+    cursor: pointer;
+    margin-right: 10px;
+    margin-top: 10px;
+  }
+
+  ._wenjian_P {
+    font-size: 30px;
+    text-align: center;
+    color: #41D2A1;
+    line-height: 80px;
+  }
 </style>
 
 <template>
+  <div class="page_fdd">
     <div class="page_bdm" v-if="GetDetail" v-loading="loading">
       <p class="_tit">{{GetDetail.FinanceName}} <span style="color: red;" v-if="GetDetail.Status==4">已作废</span></p>
-
-
       <div
         v-if="GetDetail.TemplateId==36 || GetDetail.TemplateId==37 || GetDetail.TemplateId==53 ||GetDetail.TemplateId==48 || (GetDetail.TemplateId==43&&GetDetail.IsPublic==4) || (GetDetail.TemplateId==56&&GetDetail.IsPublic==4)"
         style="width: 890px;text-align: right;font-size:12px;cursor: pointer;color: #3980C8;"
@@ -993,6 +1115,40 @@
               </div>
             </template>
           </div>
+          <div>
+            <div class="_addUpload_box _addUpload_box_btm clearfix">
+              <template v-for="(file,fIndex) in saveMsg">
+                <div v-if="file.Type==3">
+                  <div style="width:100%;height:100%;overflow: hidden;">
+                    <el-image
+                    style="width: 100%; height: 100%"
+                    :src="file.Url?file.Url:file.Content"
+                    :preview-src-list="[file.Url?file.Url:file.Content]">
+                  </el-image>
+                    <!-- <img :src="file.Url?file.Url:file.Content" @click="showImg(file.Url?file.Url:file.Content)"> -->
+                  </div>
+                  <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
+                </div>
+                <div v-if="file.Type==1">
+                  <div class="iconfont _wenjian_P"
+                    :class="file.Content.substring(file.Content.lastIndexOf('.')+1,file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"
+                    @click="showUpLoadFileT(file)">
+                  </div>
+                  <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
+                </div>
+              </template>
+            </div>
+          </div>
+          <div style="margin-top: 10px;">
+            <div class="_pic_upload" v-if="GetDetail.IsUploadPic===1">
+              <!--<div class="_pic_upload" v-if="saveMsg.length!==5 && ((saveMsg.length + GetDetail.VorcherInos.length) < 5)">-->
+              <el-upload drag :http-request="uploadFileBtn2" :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 class="shangchuanfujian"><button class="hollowFixedBtn" @click="upLoadFuJian">上传附件</button></div>
+          </div>
         </div>
       </div>
       <div class="w890px">
@@ -1829,6 +1985,7 @@
       </viewquotationForm>
 
     </div>
+  </div>
 </template>
 <script>
   import myFlowChartModule from "../components/FlowChartModule.vue";
@@ -1871,6 +2028,13 @@
   export default {
     data() {
       return {
+        saveMsg: [
+          {
+            Type: 3,
+            Content:'http://192.168.10.214:8130/EduSystem/Test/Upload/Temporary/202311131052426600000000001.png',
+            Url:'http://192.168.10.214:8130/EduSystem/Test/Upload/Temporary/202311131052426600000000001.png'
+          }
+        ],
         TeamShouZhi: false,
         F_Disbursement_Schedule: false,
         userInfo: {},
@@ -3007,6 +3171,77 @@
           this.$message.success(this.$t('tips.scchenggong'))
         }, 1);
       },
+      uploadFileBtn2(file) { //上传
+        if (file.file.size > 1024 * 1024 * 10) {
+          this.$message.warning('文件大小不能超过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.$message.error('请上传图片、word、excel类型的文件！');
+        let newArr = [];
+        newArr.push(file.file)
+        let path = "/Upload/Temporary/"
+        this.$message.info('上传中...')
+        UploadSelfFile('Temporary', file.file, x => {
+          let fileSize = file.file.size < 1024 ? file.file.size : (file.file.size / 1024).toFixed(0);
+          this.saveMsg.push({
+            Type: fileTypeNumber,
+            Content: x.FileUrl,
+            Url: x.FileUrl,
+          });
+          this.$message.success('上传成功');
+        });
+      },
+      deleteUploadFile(i) { // 删除上传文件
+        this.saveMsg.splice(i, 1);
+      },
+      showUpLoadFileT(i) { // 预览上传文件
+        if (i.Type == 3) {
+          this.picObj.push(i.Url);
+          this.imgList.push(i.Url);
+          this.picIsShow = true;
+        } else {
+          if (i.Content.substring(i.Content.lastIndexOf('.') + 1, i.Content.length).toUpperCase() == 'PDF') {
+            this.previewPDF(i.Url)
+          } else {
+            let dom = document.querySelector("#groupTourOrder_DownLoad");
+            dom.href = i.Url;
+            dom.click();
+          }
+        }
+      },
+      upLoadFuJian: function () {
+        if (this.saveMsg.length === 0) return this.$message.error('请上传文件！');
+        let msg = {
+          FrID: this.ID,
+          vorcherInos: this.saveMsg
+        };
+        this.apipost('Financial_post_SetVoucher', msg, res => {
+          if (res.data.resultCode === 1) {
+            this.Financial_post_GetDetail(this.ID)
+          } else {
+            this.$message.error(res.data.message);
+          }
+        }, null)
+      },
       handleAvatarSuccess(res, file) { //上传
         if (res.resultCode == 1) {
           var img_path = res.data.FullFilePath
@@ -3083,6 +3318,7 @@
       },
       Financial_post_GetDetail(id, t) { //获取单据详情
         let userInfo = this.getLocalStorage();
+        // this.saveMsg = [];
         this.apipost('Financial_post_GetDetail', {
           ID: id,
           Type: 2