调整费用报销支持上传pdf

fhKeeper/formulahousekeeper/timesheet/src/views/expense/expense.vue

@@ -256,11 +256,21 @@
       <div class="dayImge">
         <div class="dayImgeItem" v-if="dialogVisibleImageList">
           <viewer :images="dialogVisibleImageList" v-viewer="viewerOptions" class="dayImgeItem">
-            <div class="xiaoImg" v-for="src,i in dialogVisibleImageList" :key="i">
-              <img ref="imgsa" :src="src.url">
-              <div class="imgIcon" @click.stop="deteleIpc(apl)" v-if="imgLoadType==1"><i class="el-icon-circle-close"></i></div>
-              <div class="imgIcon" @click.stop="deteleIpc(apl, 'ParticularsList', 'invoiceList')" v-if="imgLoadType==2"><i class="el-icon-circle-close"></i></div>
-            </div>
+            <template v-for="src,i in dialogVisibleImageList" :id="src.url">
+              <!-- 图片 -->
+              <div class="xiaoImg" v-if="isFileType(src.url) == 'image'">
+                <img ref="imgsa" :src="src.url">
+                <div class="imgIcon" @click.stop="deteleIpc(apl)" v-if="imgLoadType==1"><i class="el-icon-circle-close"></i></div>
+                <div class="imgIcon" @click.stop="deteleIpc(apl, 'ParticularsList', 'invoiceList')" v-if="imgLoadType==2"><i class="el-icon-circle-close"></i></div>
+              </div>
+
+              <!-- 文件 -->
+              <div class="xiaoImg" v-if="isFileType(src.url) == 'pdf'" @click.stop="openViewPdf(src.url)">
+                <img :src="pdfIcons">
+                <div class="imgIcon" @click.stop="deteleIpc(apl)" v-if="imgLoadType==1"><i class="el-icon-circle-close"></i></div>
+                <div class="imgIcon" @click.stop="deteleIpc(apl, 'ParticularsList', 'invoiceList')" v-if="imgLoadType==2"><i class="el-icon-circle-close"></i></div>
+              </div>
+            </template>
             <img @click.stop="performCustomization(apl, imgLoadType)" v-if="dialogVisibleImageList.length < 10" :src="require('../../assets/image/aacbc.png')" class="xiaoImg" style="margin-right: 0" />
           </viewer>
         </div>
@@ -340,8 +350,8 @@
             v-loading="listLoading" :height="tableHeight - currentClickNum" style="width: 100%;"
             :summary-method="getSummaries" show-summary>
             <el-table-column type="selection" width="55"></el-table-column>
-            <el-table-column prop="code" :label="$t('ticketnumber')"></el-table-column>
-            <el-table-column prop="totalAmount" :label="$t('amountof') + '(' + $t('yuan') + ')'" align="center">
+            <el-table-column prop="code" :label="$t('ticketnumber')" width="120"></el-table-column>
+            <el-table-column prop="totalAmount" :label="$t('amountof') + '(' + $t('yuan') + ')'" align="center" width="120">
               <template slot-scope="scope">
                 <span style="float:right;margin-right:20px">{{ scope.row.totalAmount ? scope.row.totalAmount.toFixed(2) :
                   '0' }}</span>
@@ -359,7 +369,7 @@
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="createDate" :label="$t('fillinthedate')"></el-table-column>
+            <el-table-column prop="createDate" :label="$t('fillinthedate')" width="100"></el-table-column>
             <el-table-column prop="ticketNum" :label="$t('invoicenumber')"
               v-if="this.user.timeType.easyExpense == 0"></el-table-column>
             <el-table-column prop="type" :label="$t('ppertype')" v-if="this.user.timeType.easyExpense == 0">
@@ -1024,7 +1034,10 @@
                       <img ref="imgsa" v-for="src in item.pic" :src="src.url" :key="src.title">
                     </viewer> -->
                     <viewer :images="item.pic">
-                      <img ref="imgsa" v-for="src in item.pic" :src="src.url" :key="src.title">
+                      <template v-for="src,i in item.pic" :id="src.url">
+                        <img ref="imgsa" :src="src.url" v-if="isFileType(src.url) == 'image'">
+                        <img :src="pdfIcons" v-if="isFileType(src.url) == 'pdf'" @click.stop="openViewPdf(src.url)">
+                      </template>
                     </viewer>
                   </div>
                 </div>
@@ -1041,7 +1054,7 @@
 
     <!-- 自定义图片上传 -->
     <div class="customIamgeLoad">
-      <input id="uploadInput" ref="uploadInput" type="file" class="file" @change="fileMultLoad" multiple accept="image/jpg,image/png" />
+      <input id="uploadInput" ref="uploadInput" type="file" class="file" @change="fileMultLoad" multiple accept="image/jpg,image/png,application/pdf" />
     </div>
   </section>
 </template>
@@ -1062,6 +1075,7 @@ export default {
   props: {},
   data() {
     return {
+      pdfIcons: require('@/assets/image/pdfIcon.png'),
       showSingleAudit: false,
       auditTypeItem: { auditType: 0 },
       queryExpenseMainType: null,
@@ -2503,7 +2517,21 @@ export default {
         });
       });
     },
-
+    // 判断当前数据的文件类型
+    isFileType(item) {
+      let str = item.split('.');
+      let format = str[str.length - 1];
+      if (['jpg', 'png', 'jpeg', 'JPG', 'PNG', 'JPEG'].includes(format)) {
+        return 'image'
+      } else if (format == "pdf") {
+        return 'pdf'
+      }
+    },
+    // 查看pdf
+    openViewPdf(urls) {
+      // 新窗口打开pdf
+      window.open(urls)
+    },
   },
   beforeDestroy() {
 
@@ -2838,5 +2866,15 @@ export default {
     display: flex;
     flex-wrap: wrap;
   }
+
+  .dayImgeItemFile {
+    width: 100%;
+    .title {
+      font-size: 20px;
+    }
+    .text {
+      margin: 10px 30px;
+    }
+  }
 }
 </style>