应收应付费用审批

src/components/CostEntry/mainInfo.vue

@@ -12,7 +12,7 @@
             :class="{ noBorder: item.field == 'cbm' || item.field == 'dischargePort' || item.field == 'invoiceNo' || item.field == 'note' }"
             :label="item.label"
           >
-            <div>
+            <div class="content" :title="item.value">
               {{ item.value || '-' }}
             </div>
           </a-form-item>
@@ -26,7 +26,7 @@
   // 表单字段
   const list = ref([
     { label: '委托编号', field: 'customerNo', span: 4, value: '' },
-    { label: '主题单号', field: 'mblno', span: 4, value: '' },
+    { label: '主提单号', field: 'mblno', span: 4, value: '' },
     { label: '箱型箱量', field: 'cntrTotal', span: 4, value: '' },
     { label: '件数', field: 'pkgs', span: 4, value: '' },
     { label: '毛重', field: 'kgs', span: 4, value: '' },
@@ -75,6 +75,11 @@
       color: #7A8798;
     }
   }
+  .content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .ant-form-item-control-input {
     min-height: 24px;
   }

src/design/ant/table.less

@@ -1,5 +1,5 @@
 // 列表页面表单和表格的整体样式管理
-.ds-table, .ds-table-detail, .ds-mini-table {
+.ds-table, .ds-table-detail, .ds-mini-table, .ds-mini-table-detail {
   .ant-form {
     padding: 10px 19px 1px!important;
     .ant-btn {
@@ -90,6 +90,24 @@
     }
   }
 }
+.ds-mini-table-detail {
+  .ant-table-container {
+    padding: 0;
+    .ant-table-thead {
+      th {
+        padding: 4.5px 7px!important;
+      }
+    }
+    .ant-table-tbody {
+      .ant-table-row {
+        height: 26px !important;
+        .ant-table-cell {
+          padding: 0 8px;
+        }
+      }
+    }
+  }
+}
 .ant-table-thead {
   th {
     background-color: rgba(240, 244, 250, 1) !important;
@@ -98,7 +116,6 @@
     letter-spacing: 1px;
     line-height: 15.84px;
     color: rgba(51, 56, 61, 1) !important;
-    text-align: left !important;
     vertical-align: bottom;
     border: none !important;
     border-bottom: 1px solid rgba(232, 232, 232, 1) !important;

src/views/approve/fee/columns.tsx

@@ -643,4 +643,5 @@ export const columns: BasicColumn[] = [
     align: 'left',
     width: 100
   }
-]
+]
+

src/views/approve/fee/index.vue

@@ -74,8 +74,8 @@
           </a-button>
         </a-dropdown>
         <Divider type="vertical" />
-        <FeeActionBar
-        ></FeeActionBar>
+        <!-- <FeeActionBar
+        ></FeeActionBar> -->
       </div>
       <div style="padding-left: 20px;">
         <a-form>
@@ -84,38 +84,27 @@
               <a-form-item
                 :label="item.label"
               >
-                <div>
+                <div class="content">
                   {{ item.value || '-' }}
                 </div>
               </a-form-item>
             </a-col>
           </a-row>
         </a-form>
-      </div>
-      <div>
-        <!-- 应收费用表格 -->
-        <!-- <FeeTable
-          class="fee-tb"
-          :style="{ 'height': feeHeight / 2 + 'px' }"
-          ref="receiveTable"
-          :heigth="feeHeight"
-          :id="busId"
-          :profit="profit"
-          tbType="receive"
-          @checkProfit="checkProfit"
-        ></FeeTable> -->
-
-        <!-- 应付费用表格 -->
-        <!-- <FeeTable
-          class="fee-tb"
-          :style="{ 'height': feeHeight / 2 + 'px' }"
-          ref="payTable"
-          :feeHeight="feeHeight"
-          :id="busId"
-          :profit="profit"
-          tbType="pay"
-          @checkProfit="checkProfit"
-        ></FeeTable> -->
+        <div class="flex fee-tables">
+          <!-- 三个表格 -->
+          <ul class="columns-name">
+            <li class="fee-name">费用名称</li>
+            <li v-for="(item, index) in tableData" class="fee-data" :key="'f-n-' + index">
+              {{ item.feeName }}
+            </li>
+            <li>合计</li>
+          </ul>
+          <!-- 应收表格 -->
+          <BasicTable class="ds-mini-table-detail receive-table" @register="registerTable1"></BasicTable>
+          <!-- 应付表格 -->
+          <BasicTable class="ds-mini-table-detail pay-table" @register="registerTable2"></BasicTable>
+        </div>
       </div>
       <!-- <Statistic v-show="busId.length" :id="busId"></Statistic> -->
     </div>
@@ -128,11 +117,11 @@
   import { GetList, GetFees } from './api'
   import { Divider } from 'ant-design-vue'
   import FeeActionBar from './components/feeActionBar.vue'
-  import { useModal } from '/@/components/Modal'
+  // import { useModal } from '/@/components/Modal'
   import { columns, searchFormSchema } from './columns'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import FeeTable from './components/feeTable.vue'
-  import Statistic from './components/Statistic.vue'
+  // import FeeTable from './components/feeTable.vue'
+  // import Statistic from './components/Statistic.vue'
   import MainActionBar from './components/mainActionBar.vue'
   import { formatTableData } from '/@/hooks/web/common'
   const { createMessage } = useMessage()
@@ -143,6 +132,7 @@
   const data = ref([])
   const check = ref(true)
   const innerHeight = window.innerHeight
+  const fheight = (innerHeight / 2) - 97
   const [registerTable, { reload, getDataSource }] = useTable({
     maxHeight: (innerHeight - 60) / 2,
     api: async (p) => {
@@ -180,6 +170,8 @@
     immediate: false,
     resizeHeightOffset: (innerHeight - 60) / 2
   })
+  // 应收应付表格数据整体
+  const tableData = ref([])
   const selectHandle = (v) => {
     let ids = []
     if (v.rows && v.rows.length) {
@@ -192,6 +184,7 @@
     if (ids && ids.length) {
       GetFees(ids[0]).then(res => {
         const val = res.data
+        // 处理详情信息数据
         if (val.etd) val.etd = val.etd.split(' ')[0]
         if (val.eta) val.etd = val.eta.split(' ')[0]
         val.etd = val.etd || '' + (val.etd ? '/' : '') + val.eta || ''
@@ -207,9 +200,175 @@
             }
           }
         })
+        // 处理表格数据
+        tableData.value = val.itemGroups
+        // 应收费用数据
+        if (val.itemGroups) {
+          RData.value = []
+          PData.value = []
+          val.itemGroups.forEach(item => {
+            if (item.items.length == 0) {
+              item.items = [{ feeType: 1 }, { feeType: 2 }]
+            }
+            if (item.items.length == 1) {
+              if (item.items[0].feeType == 1) {
+                item.items[1] = { feeType: 2 } 
+              } else {
+                item.items[1] = { feeType: 1 } 
+              }
+            }
+            item.items.forEach(row => {
+              if (row.currency == 'RMB') {
+                row['RMB'] = row.amount
+              } else if (row.currency == 'USD') {
+                row['USD'] = row.amount
+              } else {
+                row['other'] = row.amount
+              }
+              // 应收
+              if (row.feeType === 1) {
+                RData.value.push(row)
+              }
+              // 应付
+              if (row.feeType === 2) {
+                PData.value.push(row)
+              }
+            })
+          })
+        }
       })
+    } else {
+      list.value.forEach(item => {
+        item.value = ''
+      })
+      tableData.value = []
+      PData.value = []
+      RData.value = []
     }
   }
+  const feeColumns = (v) => {
+    return [
+      {
+        title: v == 1 ? '应收' : '应付',
+        align: 'center',
+        width: 200,
+        children: [
+          {
+            dataIndex: 'RMB',
+            title: 'RMB',
+            align: 'left',
+            minWidth: 80
+          },
+          {
+            dataIndex: 'USD',
+            title: 'USD',
+            align: 'left',
+            minWidth: 80
+          },
+          {
+            dataIndex: 'other',
+            title: '其他币别',
+            align: 'left',
+            minWidth: 80
+          },
+          {
+            dataIndex: 'customerFullName',
+            title: '客户名称',
+            align: 'left',
+            minWidth: 80
+          },
+          {
+            dataIndex: 'feeStatusText',
+            title: '状态',
+            align: 'left',
+            width: 80
+          },
+          {
+            dataIndex: 'unitPrice',
+            title: '单价',
+            align: 'left',
+            width: 100
+          },
+          {
+            dataIndex: 'quantity',
+            title: '数量',
+            align: 'left',
+            width: 50
+          },
+          {
+            dataIndex: 'exchangeRate',
+            title: '汇率',
+            align: 'left',
+            width: 50
+          }
+        ]
+      }
+    ]
+  }
+  // 应收费用数据
+  const RData = ref([])
+  // 应付费用数据
+  const PData = ref([])
+  const [registerTable1] = useTable({
+    dataSource: RData,
+    columns: feeColumns(1),
+    isTreeTable: false,
+    pagination: false,
+    showIndexColumn: false,
+    bordered: true,
+    rowSelection: { type: 'checkbox' },
+    canResize: false,
+    summaryFunc(param) {
+      alert(1)
+      const { columns, data } = param
+      const sums = {}
+      // 遍历所有列，找出需要合计的列
+      columns.forEach(column => {
+        if (['RMB', 'USD', 'other'].includes(column.dataIndex)) {
+          // 初始化合计值为0
+          sums[column.dataIndex] = 0
+          // 遍历所有行数据，累加对应字段的值
+          data.forEach(row => {
+            if (!isNaN(row[column.dataIndex])) {
+              sums[column.dataIndex] += Number(row[column.dataIndex])
+            }
+          })
+        }
+      })
+      // 返回合计数据对象
+      return sums
+    }
+  })
+  const [registerTable2] = useTable({
+    dataSource: PData,
+    columns: feeColumns(2),
+    isTreeTable: false,
+    pagination: false,
+    showIndexColumn: false,
+    bordered: true,
+    rowSelection: { type: 'checkbox' },
+    canResize: false,
+    summaryFunc(param) {
+      console.log(param)
+      const { columns, data } = param
+      const sums = {}
+      // 遍历所有列，找出需要合计的列
+      columns.forEach(column => {
+        if (['RMB', 'USD', 'other'].includes(column.dataIndex)) {
+          // 初始化合计值为0
+          sums[column.dataIndex] = 0
+          // 遍历所有行数据，累加对应字段的值
+          data.forEach(row => {
+            if (!isNaN(row[column.dataIndex])) {
+              sums[column.dataIndex] += Number(row[column.dataIndex])
+            }
+          })
+        }
+      })
+      // 返回合计数据对象
+      return sums
+    }
+  })
   const receiveTable = ref(null)
   const payTable = ref(null)
   const mainApprove = () => {
@@ -280,7 +439,7 @@
   //   // 允许用户拖动元素
   //   document.ondragstart = null
   // }
-  // const fheight = ref(268)
+
   onMounted(() => {
     //初始化
     reload()
@@ -295,6 +454,52 @@
   .vben-basic-table-header__toolbar {
     justify-content: space-between;
   }
+  .content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .columns-name {
+    width: 110px;
+  }
+  .fee-tables {
+    height: calc(50vh - 136px);
+    overflow-y: auto;
+  }
+  .receive-table, .pay-table {
+    flex: 1;
+    th::before {
+      height: 0!important;
+    }
+  }
+  .receive-table {
+    th {
+      background: #F2FAFA!important;
+    }
+  }
+  .pay-table {
+    th {
+      background: #FCF5F5!important;
+    }
+  }
+  ul {
+    font-size: 12px;
+    .fee-name, .fee-data {
+      background: #FFFDF5;
+      padding-left: 10px;
+    }
+    .fee-name {
+      height: 51px;
+      display: flex;
+      align-items: end;
+      padding-bottom: 5px;
+    }
+    .fee-data {
+      height: 26px;
+      border-top: 1px solid #e5e7eb;
+      line-height: 26px;
+    }
+  }
   .ant-form-item-label {
     label {
       font-size: 12px;