应付明细添加显示字段

src/views/financialCenter/payables.vue

@@ -140,7 +140,12 @@
           </el-col>
         </el-row>
       </div>
-      <el-table :data="payableReportTableData" border style="width: 100%; margin-bottom: 10px">
+      <el-table
+        :data="payableReportTableData"
+        border
+        style="width: 100%; margin-bottom: 10px"
+        :row-class-name="getRowClassName"
+      >
         <el-table-column
           v-for="item in payableReportListTableColumns"
           :key="item.property"
@@ -373,6 +378,14 @@ const payableReportListTableColumns = ref([
   // { prop: 'fortuneBizType', label: '应付款类型', sortable: true, width: '120', formatter: (row) => getFortuneBizTypeLabel(row.fortuneBizType) || '-' },
   // { prop: 'payableNo', label: '应付账款编号', sortable: true, width: '120', formatter: (row) => row.payableNo || '-' },
   {
+    prop: 'type',
+    label: '是否实际出账',
+    sortable: true,
+    width: '80',
+    formatter: row => getTypeLabel(row.type) || '-'
+  },
+
+  {
     prop: 'payableNo',
     label: '业务编号',
     sortable: true,
@@ -819,6 +832,24 @@ const addPayRecordFormConfig = [
     label: '备注'
   }
 ]
+//是否实收
+const typeOptions = [
+  { value: 1, label: '预计' },
+  { value: 2, label: '实际' }
+]
+
+// 是否实收通过value转成label
+const getTypeLabel = value => {
+  const item = typeOptions.find(item => item.value === value)
+  return item?.label || ''
+}
+
+// 定义行类名方法
+const getRowClassName = ({ row }) => {
+  // type == 1 表示“预计”，添加高亮类名
+  return row.type === 1 ? 'estimated-row' : ''
+}
+
 const handleInputChange = async (formType, prop, value, item) => {
   if (formType == 'addPayRecord') {
     await nextTick()
@@ -1196,4 +1227,8 @@ const handleCurrentChangeDetailRecord = val => {
   border-top: 1px solid #ebeef5;
   text-align: right;
 }
+/* 使用 :deep 穿透 scoped 样式，保证对 el-table__row 生效 */
+:deep(.estimated-row) {
+  background-color: #f0f9ff; /* 浅蓝色，可根据需要修改 */
+}
 </style>