From ad393cd568df48b54a41608827f02e83d7c19a7a Mon Sep 17 00:00:00 2001 From: lijingjia Date: Tue, 3 Sep 2024 16:39:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BA=94=E6=94=B6=E5=BA=94=E4=BB=98=E8=B4=B9?= =?UTF-8?q?=E7=94=A8=E5=AE=A1=E6=89=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CostEntry/mainInfo.vue | 9 +- src/design/ant/table.less | 21 +- src/views/approve/fee/columns.tsx | 3 +- src/views/approve/fee/index.vue | 269 +++++++++++++++++++++++--- 4 files changed, 265 insertions(+), 37 deletions(-) diff --git a/src/components/CostEntry/mainInfo.vue b/src/components/CostEntry/mainInfo.vue index 184cf3f9..e93423d5 100644 --- a/src/components/CostEntry/mainInfo.vue +++ b/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" > -
+
{{ item.value || '-' }}
@@ -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; } diff --git a/src/design/ant/table.less b/src/design/ant/table.less index 5e703336..90004e02 100644 --- a/src/design/ant/table.less +++ b/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; diff --git a/src/views/approve/fee/columns.tsx b/src/views/approve/fee/columns.tsx index 3f4b19bd..9cbdc6a4 100644 --- a/src/views/approve/fee/columns.tsx +++ b/src/views/approve/fee/columns.tsx @@ -643,4 +643,5 @@ export const columns: BasicColumn[] = [ align: 'left', width: 100 } -] \ No newline at end of file +] + diff --git a/src/views/approve/fee/index.vue b/src/views/approve/fee/index.vue index 20a34cfa..26535107 100644 --- a/src/views/approve/fee/index.vue +++ b/src/views/approve/fee/index.vue @@ -74,8 +74,8 @@ - +
@@ -84,38 +84,27 @@ -
+
{{ item.value || '-' }}
-
-
- - - - - +
+ +
    +
  • 费用名称
    • +
  • + {{ item.feeName }} +
    • +
  • 合计
    • +
+ + + + +
@@ -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;