采购需求去掉横向滚动问题

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

@@ -53,40 +53,47 @@
           </el-col>
         </el-row>
 
-        <!-- 拨款单据附件（仅 PDF 电子发票） -->
+        <!-- 拨款单据附件（PDF 电子发票 / 单据图片，可多文件） -->
         <el-form-item label="拨款单据附件" prop="accessoryApplyIds">
           <file-upload v-model="form.accessoryApplyIds" :limit="50" :file-size="50"
-            :file-type="['pdf']" multiple
+            :file-type="['pdf', 'jpg', 'jpeg', 'png']" multiple
             @delete="onFileDelete" />
           <div class="hint-text">
-            仅支持 PDF 电子发票（数电票 / 电子普通发票 / 电子专用发票），上传后自动解析金额与明细。<br/>
-            扫描件 / 图片票 / 纸质票请先在开票平台下载 PDF 原件再上传。
+            可上传多份单据：PDF 电子发票（数电票/电子普通/专用发票）走文字提取；<br/>
+            单据图片（jpg/png，可不是发票样式，如收据/车票/小票）将自动调用 AI 识别金额与标题。
           </div>
         </el-form-item>
 
-        <!-- OCR 识别中提示 -->
+        <!-- 识别中提示 -->
         <div v-if="anyOcrLoading" class="ocr-thinking">
           <i class="el-icon-loading"></i>
-          <span>正在解析发票 PDF…</span>
+          <span>正在识别单据…</span>
         </div>
 
-        <!-- 发票明细条目表 -->
+        <!-- 单据明细条目表 -->
         <div class="block-title">
-          拨款明细
-          <span class="block-title-hint">（上传 PDF 后自动解析；解析失败或无发票时可手动添加）</span>
+          单据明细
+          <span class="block-title-hint">（上传后自动识别标题与金额；事由请手动填写，可手动添加条目）</span>
           <el-button size="mini" type="primary" plain icon="el-icon-plus" @click="addManualItem" style="margin-left:12px;vertical-align:middle">手动添加条目</el-button>
         </div>
         <div class="invoice-table" v-if="invoiceItems.length">
           <div class="invoice-table-header">
-            <span class="col-reason">事由说明</span>
+            <span class="col-title">标题</span>
+            <span class="col-reason">事由</span>
             <span class="col-amount">金额（元）</span>
             <span class="col-file">附件</span>
             <span class="col-action"></span>
           </div>
           <div v-for="(item, idx) in invoiceItems" :key="idx" class="invoice-table-row">
+            <el-input
+              v-model="item.itemName"
+              placeholder="识别标题（可编辑）"
+              size="small"
+              class="col-title"
+            />
             <el-input
               v-model="item.reason"
-              :placeholder="item.itemName || '请填写事由'"
+              placeholder="请手动填写事由"
               size="small"
               class="col-reason"
             />
@@ -104,7 +111,7 @@
               </el-tooltip>
               <el-upload v-else :action="uploadFileUrl" :headers="uploadHeaders" :show-file-list="false"
                 :data="{ isPublic: 1 }" :on-success="(res) => onRowFileSuccess(res, idx)"
-                accept=".pdf" class="row-upload">
+                accept=".pdf,.jpg,.jpeg,.png" class="row-upload">
                 <el-button size="mini" type="text" icon="el-icon-paperclip"></el-button>
               </el-upload>
             </div>
@@ -375,26 +382,27 @@ export default {
         const res = await ocrAppropriationInvoice(ossId)
         if (res.code === 200 && res.data) {
           const { items, totalAmount, sellerName, invoiceDate, invoiceType } = res.data
-          // 拼接发票头部信息作为事由前缀：发票类型 · 销售方 · 开票日期
+          // 发票头部信息（类型 · 销售方 · 开票日期）作为标题前缀，PDF 票据才有
           const prefix = [invoiceType, sellerName, invoiceDate].filter(Boolean).join(' · ')
           if (items && items.length) {
             const startIdx = this.invoiceItems.length
             items.forEach((item, i) => {
-              const reason = [prefix, item.itemName].filter(Boolean).join(' / ')
+              // 标题 = 识别结果（图片单据直接为 AI 标题；PDF 票据拼接发票头部）
+              const title = [prefix, item.itemName].filter(Boolean).join(' / ')
               this.invoiceItems.push({
                 ossId: ossId,
-                itemName: item.itemName || '',
-                reason,
+                itemName: title,
+                reason: '', // 事由由用户手动填写
                 amount: item.amount || 0,
                 sortNo: startIdx + i
               })
             })
           } else if (totalAmount) {
-            // 没有明细时用总金额创建一条，事由取发票头部信息
+            // 没有明细时用总金额创建一条，标题取发票头部信息
             this.invoiceItems.push({
               ossId: ossId,
-              itemName: sellerName || '',
-              reason: prefix || '',
+              itemName: prefix || sellerName || '',
+              reason: '',
               amount: totalAmount,
               sortNo: this.invoiceItems.length
             })
@@ -408,10 +416,10 @@ export default {
           this.invoiceItems.push({ ossId: ossId, itemName: '', reason: '', amount: 0, sortNo: this.invoiceItems.length })
         }
       } catch (e) {
-        console.error('[Invoice] 解析失败', e)
+        console.error('[Invoice] 识别失败', e)
         const msg = (e && e.msg) || (e && e.message) || ''
         this.$message.warning(
-          '发票解析失败，请确认上传的是开票平台下载的正规 PDF 电子发票（数电票 / 电子普通发票 / 电子专用发票）。' +
+          '单据识别失败，已为你添加空白条目，可手动填写标题、事由与金额。' +
           (msg ? ' 错误信息：' + msg : '')
         )
         this.invoiceItems.push({ ossId: ossId, itemName: '', reason: '', amount: 0, sortNo: this.invoiceItems.length })
@@ -551,8 +559,8 @@ export default {
           invoiceItems: this.invoiceItems.map((item, i) => ({
             ossId: item.ossId || null,
             sortNo: i,
-            itemName: item.itemName || '',
-            reason: item.reason || item.itemName || '',
+            itemName: item.itemName || '', // 标题
+            reason: item.reason || '', // 事由（手写）
             amount: item.amount || 0
           }))
         }
@@ -688,11 +696,13 @@ export default {
   &:last-child { border-bottom: none; }
 }
 
+.col-title { flex: 1; }
 .col-reason { flex: 1; }
 .col-amount { width: 140px; flex-shrink: 0; }
 .col-file { width: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
 .col-action { width: 32px; flex-shrink: 0; display: flex; justify-content: center; }
 
+.invoice-table-header .col-title { flex: 1; }
 .invoice-table-header .col-reason { flex: 1; }
 .invoice-table-header .col-amount { width: 140px; }
 .invoice-table-header .col-file { width: 64px; }