Merge: feat(详情) 发票明细内联附件下载

ruoyi-ui/src/views/hrm/requests/appropriationDetail.vue

@@ -24,28 +24,39 @@
           </el-descriptions>
         </el-card>
 
-        <!-- 拨款单据 -->
+        <!-- 发票明细（含附件下载） -->
-        <div class="block-title">拨款单据</div>
-        <el-card class="inner-card" shadow="never">
-          <div class="hint-text">请上传相关拨款单据（发票、收据、凭证等）</div>
-          <file-preview v-model="detail.accessoryApplyIds"></file-preview>
-        </el-card>
-
-        <!-- 发票明细 -->
         <template v-if="detail.invoiceItems && detail.invoiceItems.length">
           <div class="block-title">发票明细</div>
           <el-card class="inner-card" shadow="never">
             <el-table :data="detail.invoiceItems" border size="small" style="width:100%">
               <el-table-column type="index" label="序号" width="55" align="center" />
-              <el-table-column prop="itemName" label="项目名称" min-width="140" />
+              <el-table-column prop="itemName" label="项目名称" min-width="120" />
-              <el-table-column prop="reason" label="事由" min-width="180" />
+              <el-table-column prop="reason" label="事由" min-width="160" />
-              <el-table-column prop="amount" label="金额(元)" width="120" align="right">
+              <el-table-column prop="amount" label="金额(元)" width="110" align="right">
                 <template slot-scope="{ row }">¥{{ row.amount }}</template>
               </el-table-column>
+              <el-table-column label="附件" width="80" align="center">
+                <template slot-scope="scope">
+                  <el-button
+                    v-if="scope.row.ossId && isFirstRowOfFile(detail.invoiceItems, scope.$index, scope.row.ossId)"
+                    type="text" size="mini" title="下载附件"
+                    @click="downloadOss(scope.row.ossId)">
+                    <i class="el-icon-download"></i> 下载
+                  </el-button>
+                </template>
+              </el-table-column>
             </el-table>
           </el-card>
         </template>
 
+        <!-- 单据附件（无发票明细时的兜底展示） -->
+        <template v-else-if="detail.accessoryApplyIds">
+          <div class="block-title">拨款单据</div>
+          <el-card class="inner-card" shadow="never">
+            <file-preview v-model="detail.accessoryApplyIds"></file-preview>
+          </el-card>
+        </template>
+
         <!-- 拨款理由说明 -->
         <div class="block-title">拨款理由说明</div>
         <el-card class="inner-card" shadow="never">
@@ -340,6 +351,12 @@ export default {
       const p = n => (n < 10 ? `0${n}` : n)
       return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
     },
+    isFirstRowOfFile (items, idx, ossId) {
+      return items.findIndex(it => it.ossId === ossId) === idx
+    },
+    downloadOss (ossId) {
+      this.$download.oss(ossId)
+    },
     getActionText (action) {
       const map = {
         'submit': '提交申请',

ruoyi-ui/src/views/hrm/requests/reimburseDetail.vue

@@ -15,28 +15,39 @@
           </el-descriptions>
         </el-card>
 
-        <!-- 报销单据 -->
+        <!-- 发票明细（含附件下载） -->
-        <div class="block-title">报销单据</div>
-        <el-card class="inner-card" shadow="never">
-          <div class="hint-text">请上传相关报销单据（发票、收据、凭证等）</div>
-          <file-preview v-model="detail.accessoryApplyIds"></file-preview>
-        </el-card>
-
-        <!-- 发票明细 -->
         <template v-if="detail.invoiceItems && detail.invoiceItems.length">
           <div class="block-title">发票明细</div>
           <el-card class="inner-card" shadow="never">
             <el-table :data="detail.invoiceItems" border size="small" style="width:100%">
               <el-table-column type="index" label="序号" width="55" align="center" />
-              <el-table-column prop="itemName" label="项目名称" min-width="140" />
+              <el-table-column prop="itemName" label="项目名称" min-width="120" />
-              <el-table-column prop="reason" label="事由" min-width="180" />
+              <el-table-column prop="reason" label="事由" min-width="160" />
-              <el-table-column prop="amount" label="金额(元)" width="120" align="right">
+              <el-table-column prop="amount" label="金额(元)" width="110" align="right">
                 <template slot-scope="{ row }">¥{{ row.amount }}</template>
               </el-table-column>
+              <el-table-column label="附件" width="80" align="center">
+                <template slot-scope="scope">
+                  <el-button
+                    v-if="scope.row.ossId && isFirstRowOfFile(detail.invoiceItems, scope.$index, scope.row.ossId)"
+                    type="text" size="mini" title="下载附件"
+                    @click="downloadOss(scope.row.ossId)">
+                    <i class="el-icon-download"></i> 下载
+                  </el-button>
+                </template>
+              </el-table-column>
             </el-table>
           </el-card>
         </template>
 
+        <!-- 单据附件（无发票明细时的兜底展示） -->
+        <template v-else-if="detail.accessoryApplyIds">
+          <div class="block-title">报销单据</div>
+          <el-card class="inner-card" shadow="never">
+            <file-preview v-model="detail.accessoryApplyIds"></file-preview>
+          </el-card>
+        </template>
+
         <!-- 报销理由说明 -->
         <div class="block-title">报销理由说明</div>
         <el-card class="inner-card" shadow="never">
@@ -81,6 +92,12 @@ export default {
       const p = n => (n < 10 ? `0${n}` : n)
       return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
     },
+    isFirstRowOfFile (items, idx, ossId) {
+      return items.findIndex(it => it.ossId === ossId) === idx
+    },
+    downloadOss (ossId) {
+      this.$download.oss(ossId)
+    }
   }
 }
 </script>