lijingjia
/
ds-wms-client-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

应收应付审核

Browse Source
szh-new
lijingjia 3 months ago
parent 81ae47f8c5
commit af52dae87b
3 changed files with 243 additions and 551 deletions
Show Stats Download Patch File Download Diff File

315
src/views/approve/fee/components/feeTable.vue
Unescape Escape View File

@ -4,116 +4,114 @@
* @Date: 2024-06-13 17:08:08 * @Date: 2024-06-13 17:08:08
--> -->
<template> <template>
<div class="ds-approve-fee-table"> <a-spin :spinning="loading">
<div class="fee-check-opt"> <div class="ds-approve-fee-table">
<h4>应收应付费用</h4> <div class="fee-check-opt">
<a-dropdown> <h4>应收应付费用</h4>
<template #overlay> <a-dropdown>
<a-menu> <template #overlay>
<a-menu-item @click="check = !check">{{ <a-menu>
check ? '仅待审核费用' : '显示所有费用' <a-menu-item @click="toggleFee">{{
}}</a-menu-item> check ? '显示所有费用' : '仅待审核费用'
</a-menu> }}</a-menu-item>
</template> </a-menu>
<a-button type="link"> </template>
<span <a-button type="link">
style="font-size: 13px" <span
class="iconfont icon-shenhe ml15" style="font-size: 13px"
></span> class="iconfont icon-shenhe ml15"
{{ check ? '显示所有费用' : '仅待审核费用' }} ></span>
<span class="iconfont icon-30jiantouxiangxiafill"></span> {{ check ? '仅待审核费用' : '显示所有费用' }}
<span class="iconfont icon-30jiantouxiangxiafill"></span>
</a-button>
</a-dropdown>
<Divider type="vertical" />
<a-button type="link" @click="agree('1', 1)">
<span class="iconfont icon-chenggong" :style="{fontSize: '13px'}"></span>
审核通过
</a-button> </a-button>
</a-dropdown> <!-- <FeeActionBar
<Divider type="vertical" /> ></FeeActionBar> -->
<!-- <FeeActionBar </div>
></FeeActionBar> --> <div style="padding-left: 20px;">
</div> <a-form>
<div style="padding-left: 20px;"> <a-row :gutter="15">
<a-form> <a-col v-for="(item, index) in list" :span="item.span" :key='item.value + index'>
<a-row :gutter="15"> <a-form-item
<a-col v-for="(item, index) in list" :span="item.span" :key='item.value + index'> :label="item.label"
<a-form-item >
:label="item.label" <div class="content">
> {{ item.value || '-' }}
<div class="content"> </div>
{{ item.value || '-' }} </a-form-item>
</div> </a-col>
</a-form-item> </a-row>
</a-col> </a-form>
</a-row> <div class="flex fee-tables">
</a-form> <!-- 三个表格 -->
<div class="flex fee-tables"> <ul class="columns-name">
<!-- 三个表格 --> <li class="fee-name">费用名称</li>
<ul class="columns-name"> <li v-for="(item, index) in tableData" class="fee-data" :key="'f-n-' + index">
<li class="fee-name">费用名称</li> {{ item.feeName }}
<li v-for="(item, index) in tableData" class="fee-data" :key="'f-n-' + index"> </li>
{{ item.feeName }} <li v-show="tableData.length" class="fee-statistic">合计</li>
</li> </ul>
<li>合计</li> <!-- 应收表格 -->
</ul> <BasicTable class="ds-mini-table-detail receive-table" @register="registerTable1">
<!-- 应收表格 --> <template v-slot:bodyCell="{ column, record }">
<BasicTable class="ds-mini-table-detail receive-table" @register="registerTable1"> <!-- 应收费用 -->
<template v-slot:bodyCell="{ column, record }"> <template v-if="column.dataIndex == 'feeStatusText'">
<!-- 应收费用 --> <span v-if="record.feeStatus == 0" class="ds-green-tag">
<template v-if="column.dataIndex == 'feeStatusText'"> {{ record.feeStatusText }}</span>
<span v-if="record.feeStatus == 0" class="ds-green-tag"> <span v-else-if="record.feeStatus == 1" class="ds-blue-tag">{{
{{ record.feeStatusText }}</span> record.feeStatusText
<span v-else-if="record.feeStatus == 1" class="ds-blue-tag">{{ }}</span>
record.feeStatusText <span v-else-if="/^2|3|4|5|6$/.test(record.feeStatus)" class="ds-orange-tag">{{
}}</span> record.feeStatusText
<span v-else-if="/^2|3|4|5|6$/.test(record.feeStatus)" class="ds-orange-tag">{{ }}</span>
record.feeStatusText <span v-else-if="/^7|8$/.test(record.feeStatus)" class="ds-red-tag">{{
}}</span> record.feeStatusText
<span v-else-if="/^7|8$/.test(record.feeStatus)" class="ds-red-tag">{{ }}</span>
record.feeStatusText <span v-else-if="/^9|10$/.test(record.feeStatus)" class="ds-purple-tag">{{ record.feeStatusText }}</span>
}}</span> </template>
<span v-else-if="/^9|10$/.test(record.feeStatus)" class="ds-purple-tag">{{ record.feeStatusText }}</span>
</template> </template>
</template> </BasicTable>
</BasicTable> <!-- 应付表格 -->
<!-- 应付表格 --> <BasicTable class="ds-mini-table-detail pay-table" @register="registerTable2">
<BasicTable class="ds-mini-table-detail pay-table" @register="registerTable2"> <template v-slot:bodyCell="{ column, record }">
<template v-slot:bodyCell="{ column, record }"> <!-- 应付费用 -->
<!-- 应付费用 --> <template v-if="column.dataIndex == 'feeStatusText'">
<template v-if="column.dataIndex == 'feeStatusText'"> <span v-if="record.feeStatus == 0" class="ds-green-tag">
<span v-if="record.feeStatus == 0" class="ds-green-tag"> {{ record.feeStatusText }}</span>
{{ record.feeStatusText }}</span> <span v-else-if="record.feeStatus == 1" class="ds-blue-tag">{{
<span v-else-if="record.feeStatus == 1" class="ds-blue-tag">{{ record.feeStatusText
record.feeStatusText }}</span>
}}</span> <span v-else-if="/^2|3|4|5|6$/.test(record.feeStatus)" class="ds-orange-tag">{{
<span v-else-if="/^2|3|4|5|6$/.test(record.feeStatus)" class="ds-orange-tag">{{ record.feeStatusText
record.feeStatusText }}</span>
}}</span> <span v-else-if="/^7|8$/.test(record.feeStatus)" class="ds-red-tag">{{
<span v-else-if="/^7|8$/.test(record.feeStatus)" class="ds-red-tag">{{ record.feeStatusText
record.feeStatusText }}</span>
}}</span> <span v-else-if="/^9|10$/.test(record.feeStatus)" class="ds-purple-tag">{{ record.feeStatusText }}</span>
<span v-else-if="/^9|10$/.test(record.feeStatus)" class="ds-purple-tag">{{ record.feeStatusText }}</span> </template>
</template> </template>
</template> </BasicTable>
</BasicTable> </div>
</div> </div>
</div> </div>
</div> </a-spin>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, reactive, defineProps, watch, defineExpose, defineEmits } from 'vue' import { onMounted, ref, reactive, defineProps, watch, defineExpose, defineEmits } from 'vue'
import { BasicTable, useTable } from '/@/components/Table' import { BasicTable, useTable } from '/@/components/Table'
import { useMessage } from '/@/hooks/web/useMessage' import { useMessage } from '/@/hooks/web/useMessage'
import { GetFees } from '../api' import { GetFees, Audit, SetInvoiceEnabled } from '../api'
import { Divider } from 'ant-design-vue' import { Divider } from 'ant-design-vue'
import FeeActionBar from './feeActionBar.vue' import FeeActionBar from './feeActionBar.vue'
import AlterNewValue from './AlterNewValue.vue' import AlterNewValue from './AlterNewValue.vue'
import { formatTableData } from '/@/hooks/web/common' import { formatTableData } from '/@/hooks/web/common'
import emitter from '/@/utils/Bus' import emitter from '/@/utils/Bus'
const { createMessage } = useMessage() const { createMessage } = useMessage()
const props = defineProps({
BRows: {
type: Array,
default: () => {
return []
}
}
})
// 过滤显示仅审核费用 // 过滤显示仅审核费用
const check = ref(true) const check = ref(true)
// 表单详情字段 // 表单详情字段
@ -193,7 +191,7 @@
const tableData = ref([]) const tableData = ref([])
const RData = ref([]) const RData = ref([])
const PData = ref([]) const PData = ref([])
const [registerTable1] = useTable({ const [registerTable1, { getSelectRows: getSelectRows1, clearSelectedRowKeys: clearSelectedRowKeys1 }] = useTable({
dataSource: RData, dataSource: RData,
columns: feeColumns(1), columns: feeColumns(1),
isTreeTable: false, isTreeTable: false,
@ -224,7 +222,7 @@
return [sums] return [sums]
} }
}) })
const [registerTable2] = useTable({ const [registerTable2, { getSelectRows: getSelectRows2, clearSelectedRowKeys: clearSelectedRowKeys2 }] = useTable({
dataSource: PData, dataSource: PData,
columns: feeColumns(2), columns: feeColumns(2),
isTreeTable: false, isTreeTable: false,
@ -255,15 +253,24 @@
return [sums] return [sums]
} }
}) })
const selectHandle = (v) => { // 切换显示的费用
if (v.rows && v.rows.length) { const toggleFee = () => {
ids = v.rows.map(item => { if (!selectRows.value?.id) return createMessage.warning('请先选择业务数据！')
return { id: item.id, businessType: item.businessType } check.value = !check.value
}) // 切换清空选择
} clearSelectedRowKeys1()
// 默认选择当前显示费用的业务类型 clearSelectedRowKeys2()
if (props.busId && props.busId.length) { init(selectRows.value)
GetFees(props.busId[0]).then(res => { }
const selectRows = ref()
// 初始化加载表格数据
const init = (record) => {
selectRows.value = record
if (record && record.id) {
const postData = {
id: record.id, businessType: record.businessType, auditOnly: check.value
}
GetFees(postData).then(res => {
const val = res.data const val = res.data
// 处理详情信息数据 // 处理详情信息数据
if (val.etd) val.etd = val.etd.split(' ')[0] if (val.etd) val.etd = val.etd.split(' ')[0]
@ -319,6 +326,7 @@
} }
}) })
} else { } else {
// 没有勾选情况数据
list.value.forEach(item => { list.value.forEach(item => {
item.value = '' item.value = ''
}) })
@ -327,15 +335,82 @@
RData.value = [] RData.value = []
} }
} }
watch( // 校验费用利润
() => props.BRows, const checkProfit = () => {
(v) => { const receiveData = getSelectRows1()
console.log(v) const payData = getSelectRows2()
}, let rAmount = 0
{ receiveData.forEach(item => {
deep: true rAmount = rAmount + Number(item.amount )
})
let pAmount = 0
payData.forEach(item => {
pAmount = pAmount + Number(item.amount )
})
return rAmount - pAmount
}
// 审核通过 params(v: 1.审核通过、2.批准申请、3.驳回申请), (r: 1.同意、2.驳回)
const agree = async(v, r) => {
// 应收应付费用勾选集合
const arrs = [...getSelectRows1(), ...getSelectRows2()]
if (arrs.length == 0) return createMessage.warning('请选择要审核的费用！')
const ids = arrs.map(item => {
return item.id
})
// if (v == '3' || v == '2') {
// for(let i = 0; i < props.feeStatus.length; i++) {
// if (props.feeStatus[i] == 2) {
// if (v == 2) {
// return createMessage.warning('只能费用状态为[申请修改]或[申请删除]的费用才能审核通过！')
// } else {
// return createMessage.warning('只能费用状态为[申请修改]或[申请删除]的费用才能驳回提交！')
// }
// }
// }
// }
// 利润小于0的时候，弹窗提示二次确认
const profit = checkProfit()
if (profit <= 0 && (v == '1' || v == '2')) {
// visible.value = true
return
}
// // 驳回申请的时候弹窗填写驳回原因
// if (v == '3') {
// openModal(true, {
// businessType: props?.data[0]?.businessType,
// ids: props.ids
// })
// return
// }
approve(2, r, ids)
}
// 费用按钮组loading
const loading = ref(false)
const approve = (v, r, ids) => {
const postData = {
result: r,
remark: r == 1 ? "同意" : '',
ids,
businessType: selectRows.value.businessType
} }
) loading.value = true
Audit(postData).then(res => {
loading.value = false
init(selectRows.value)
// if (v == 1) {
// visible.value = false
// }
// if (res.succeeded) {
// createMessage.success(res.message)
// emit('refresh')
// }
}).catch(() => {
loading.value = false
})
}
defineExpose({
init
})
</script> </script>
<style lang="less"> <style lang="less">
@ -420,10 +495,20 @@
align-items: flex-end; align-items: flex-end;
padding-bottom: 5px; padding-bottom: 5px;
} }
li {
border-bottom: 0.7px solid #e5e7eb;
}
.fee-data { .fee-data {
height: 26px; height: 26.4px;
border-top: 1px solid #e5e7eb; font-size: 12px;
line-height: 26px;
padding-left: 9px;
}
.fee-statistic {
height: 26.4px;
font-size: 12px;
line-height: 26px; line-height: 26px;
padding-left: 8px;
} }
} }
.ant-form-item-label { .ant-form-item-label {

15
src/views/approve/fee/components/mainActionBar.vue
Unescape Escape View File

@ -36,7 +36,7 @@
<a-dropdown> <a-dropdown>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item @click="check = !check">{{ <a-menu-item @click="refreshTable">{{
check ? '所有业务' : '仅需审核业务' check ? '所有业务' : '仅需审核业务'
}}</a-menu-item> }}</a-menu-item>
</a-menu> </a-menu>
@ -53,7 +53,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, defineProps, watch, defineEmits } from 'vue' import { onMounted, ref, defineProps, watch, defineEmits, defineExpose } from 'vue'
import { Divider } from 'ant-design-vue' import { Divider } from 'ant-design-vue'
import { SvgIcon } from '/@/components/Icon' import { SvgIcon } from '/@/components/Icon'
import { AuditByBiz } from '../api' import { AuditByBiz } from '../api'
@ -86,6 +86,9 @@
}, },
searchFlag: { searchFlag: {
type: Boolean type: Boolean
},
reload: {
type: Function
} }
}) })
// 业务锁定 // 业务锁定
@ -109,6 +112,11 @@
return createMessage.warning('请勾选需要解锁的业务！') return createMessage.warning('请勾选需要解锁的业务！')
} }
} }
// 切换仅需审核，和全部业务的数据
const refreshTable = () => {
check.value = !check.value
props.reload()
}
// 批量审核 // 批量审核
const approve = (v, parent) => { const approve = (v, parent) => {
const postData = { const postData = {
@ -149,6 +157,9 @@
onMounted(() => { onMounted(() => {
}) })
defineExpose({
check
})
</script> </script>
<style lang="less"> <style lang="less">

462
src/views/approve/fee/index.vue
Unescape Escape View File

@ -10,14 +10,19 @@
class="ds-mini-table fee-table" class="ds-mini-table fee-table"
height="500px" height="500px"
:scroll="{ 'x': '100%', 'y': fheight + 'px' }" :scroll="{ 'x': '100%', 'y': fheight + 'px' }"
:row-selection="{ selectedRowKeys: state.BRowKeys, onChange: BChange }"
:canRowSelect="true"
rowKey="id"
@register="registerTable" @register="registerTable"
@selection-change="selectHandle" @row-click="onRowClick"
> >
<template #toolbar> <template #toolbar>
<MainActionBar <MainActionBar
ref="mainActionBar"
:ids="busId" :ids="busId"
:selectedBusiness="selectedBusiness" :selectedBusiness="selectedBusiness"
:data="data" :data="data"
:reload="reload"
@apporveHandle="mainApprove" @apporveHandle="mainApprove"
></MainActionBar> ></MainActionBar>
</template> </template>
@ -55,102 +60,7 @@
</template> </template>
</template> </template>
</BasicTable> </BasicTable>
<div class="fee-check-opt"> <FeeTable ref="mainFeeTable" :BRows="BRows"></FeeTable>
<h4>应收应付费用</h4>
<a-dropdown>
<template #overlay>
<a-menu>
<a-menu-item @click="check = !check">{{
check ? '仅待审核费用' : '显示所有费用'
}}</a-menu-item>
</a-menu>
</template>
<a-button type="link">
<span
style="font-size: 13px"
class="iconfont icon-shenhe ml15"
></span>
{{ check ? '显示所有费用' : '仅待审核费用' }}
<span class="iconfont icon-30jiantouxiangxiafill"></span>
</a-button>
</a-dropdown>
<Divider type="vertical" />
<a-button type="link">
<span class="iconfont icon-chenggong" :style="{fontSize: '13px'}"></span>
审核通过
</a-button>
<a-button type="link" @click="openTable">
<span class="iconfont icon-Icon-" :style="{fontSize: '13px'}"></span>
完整列表
</a-button>
<!-- <FeeActionBar
></FeeActionBar> -->
</div>
<div style="padding-left: 20px;">
<a-form>
<a-row :gutter="15">
<a-col v-for="(item, index) in list" :span="item.span" :key='item.value + index'>
<a-form-item
:label="item.label"
>
<div class="content">
{{ item.value || '-' }}
</div>
</a-form-item>
</a-col>
</a-row>
</a-form>
<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">
<template v-slot:bodyCell="{ column, record }">
<!-- 应收费用 -->
<template v-if="column.dataIndex == 'feeStatusText'">
<span v-if="record.feeStatus == 0" class="ds-green-tag">
{{ record.feeStatusText }}</span>
<span v-else-if="record.feeStatus == 1" class="ds-blue-tag">{{
record.feeStatusText
}}</span>
<span v-else-if="/^2|3|4|5|6$/.test(record.feeStatus)" class="ds-orange-tag">{{
record.feeStatusText
}}</span>
<span v-else-if="/^7|8$/.test(record.feeStatus)" class="ds-red-tag">{{
record.feeStatusText
}}</span>
<span v-else-if="/^9|10$/.test(record.feeStatus)" class="ds-purple-tag">{{ record.feeStatusText }}</span>
</template>
</template>
</BasicTable>
<!-- 应付表格 -->
<BasicTable class="ds-mini-table-detail pay-table" @register="registerTable2">
<template v-slot:bodyCell="{ column, record }">
<!-- 应付费用 -->
<template v-if="column.dataIndex == 'feeStatusText'">
<span v-if="record.feeStatus == 0" class="ds-green-tag">
{{ record.feeStatusText }}</span>
<span v-else-if="record.feeStatus == 1" class="ds-blue-tag">{{
record.feeStatusText
}}</span>
<span v-else-if="/^2|3|4|5|6$/.test(record.feeStatus)" class="ds-orange-tag">{{
record.feeStatusText
}}</span>
<span v-else-if="/^7|8$/.test(record.feeStatus)" class="ds-red-tag">{{
record.feeStatusText
}}</span>
<span v-else-if="/^9|10$/.test(record.feeStatus)" class="ds-purple-tag">{{ record.feeStatusText }}</span>
</template>
</template>
</BasicTable>
</div>
</div>
<!-- <Statistic v-show="busId.length" :id="busId"></Statistic> --> <!-- <Statistic v-show="busId.length" :id="busId"></Statistic> -->
<!-- 完整费用弹窗 --> <!-- 完整费用弹窗 -->
<a-modal <a-modal
@ -164,10 +74,10 @@
</a-spin> </a-spin>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, defineExpose, computed } from 'vue' import { onMounted, ref, defineExpose, computed, reactive } from 'vue'
import { BasicTable, useTable } from '/@/components/Table' import { BasicTable, useTable } from '/@/components/Table'
import { formatParams } from '/@/hooks/web/common' import { formatParams } from '/@/hooks/web/common'
import { GetList, GetFees } from './api' import { GetList } from './api'
import { Divider } from 'ant-design-vue' import { Divider } from 'ant-design-vue'
import FeeActionBar from './components/feeActionBar.vue' import FeeActionBar from './components/feeActionBar.vue'
// import { useModal } from '/@/components/Modal' // import { useModal } from '/@/components/Modal'
@ -185,13 +95,19 @@
// 选中的业务id // 选中的业务id
const busId = ref([]) const busId = ref([])
const data = ref([]) const data = ref([])
const check = ref(true)
const innerHeight = window.innerHeight const innerHeight = window.innerHeight
const fheight = (innerHeight / 2) - 97 const fheight = (innerHeight / 2) - 97
const [registerTable, { reload, getDataSource, getSelectRows }] = useTable({ const mainActionBar = ref(null)
// 主窗口的费用表格组件
const mainFeeTable = ref(null)
// 费用信息已选项
const state = reactive({
BRowKeys: []
})
const [registerTable, { reload, getDataSource, getSelectRows, setSelectedRows }] = useTable({
maxHeight: (innerHeight - 60) / 2, maxHeight: (innerHeight - 60) / 2,
api: async (p) => { api: async (p) => {
console.log(p) p['otherQueryCondition'] = mainActionBar.value.check
const res = await GetList(p) const res = await GetList(p)
return new Promise((resolve) => { return new Promise((resolve) => {
res.data.forEach(item => { res.data.forEach(item => {
@ -218,9 +134,8 @@
pagination: true, pagination: true,
striped: false, striped: false,
useSearchForm: true, useSearchForm: true,
showTableSetting: true, showTableSetting: false,
showIndexColumn: true, showIndexColumn: true,
rowSelection: { type: 'checkbox' },
canResize: false, canResize: false,
immediate: false, immediate: false,
resizeHeightOffset: (innerHeight - 60) / 2 resizeHeightOffset: (innerHeight - 60) / 2
@ -231,282 +146,25 @@
}) })
// 应收应付表格数据整体 // 应收应付表格数据整体
const tableData = ref([]) const tableData = ref([])
const selectHandle = (v) => { const BChange = async (v) => {
let ids = [] state.BRowKeys = v
if (v.rows && v.rows.length) {
ids = v.rows.map(item => {
return { id: item.id, businessType: item.businessType }
})
}
// 默认选择当前显示费用的业务类型
busId.value = ids
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 || ''
val.loadPort = val.loadPort || '' + (val.loadPort ? '/' : '') + val.dischargePort || ''
val.vessel = val.vessel || '' + (val.vessel ? '/' : '') + val.voyno || ''
list.value.forEach(item => {
for(let key in val) {
if (item.field === key) {
if (key == 'etd' && val[key]) {
val[key] = val[key].split(' ')[0]
}
item.value = val[key]
}
}
})
// 处理表格数据
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: 85
},
{
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,
showSummary: true,
summaryFunc(param) {
const sums = {}
// 遍历所有列，找出需要合计的列
const columns = feeColumns(1)
columns[0].children.forEach(column => {
if (['RMB', 'USD', 'other'].includes(column.dataIndex)) {
console.log(column)
// 初始化合计值为0
sums[column.dataIndex] = 0
// 遍历所有行数据，累加对应字段的值
param.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,
showSummary: true,
summaryFunc(param) {
const sums = {}
// 遍历所有列，找出需要合计的列
const columns = feeColumns(2)
columns[0].children.forEach(column => {
if (['RMB', 'USD', 'other'].includes(column.dataIndex)) {
console.log(column)
// 初始化合计值为0
sums[column.dataIndex] = 0
// 遍历所有行数据，累加对应字段的值
param.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 = () => {
loading.value = !loading.value
if (!loading.value) {
receiveTable.value.reload()
payTable.value.reload()
}
} }
// 业务费用利润 // 行点击事件
const profit = ref(0) const onRowClick = (record) => {
// 校验费用利润 state.BRowKeys = [record?.id]
const checkProfit = () => { setSelectedRows([record])
const receiveData = receiveTable.value.getDataSource() // 触发子组件刷新表格数据
const payData = payTable.value.getDataSource() mainFeeTable.value.init(record)
let rAmount = 0
receiveData.forEach(item => {
rAmount = rAmount + Number(item.amount )
})
let pAmount = 0
payData.forEach(item => {
pAmount = pAmount + Number(item.amount )
})
profit.value = rAmount - pAmount
} }
// 表单字段
const list = ref([
{ label: 'M B/L NO', field: 'mblno', span: 5, value: '' },
{ label: '业务类别', field: 'businessTypeText', span: 5, value: '' },
{ label: '委托单位', field: 'cntrTotal', span: 5, value: '' },
{ label: '业务编号', field: 'customerNo', span: 5, value: '' },
{ label: 'VSL/VOY', field: 'vessel', span: 5, value: '' },
{ label: 'CARRIER', field: 'carrier', span: 5, value: '' },
{ label: '会计期间', field: 'accountDate', span: 5, value: '' },
{ label: 'ETD/ETA', field: 'etd', span: 5, value: '' },
{ label: '放单方式', field: 'voyno', span: 5, value: '' },
{ label: 'POL/POD', field: 'loadPort', span: 5, value: '' }
])
// 选中的业务行数据 // 选中的业务行数据
const BRows = ref([]) const BRows = ref([])
const openTable = () => { const openTable = () => {
visible.value = true visible.value = true
BRows.value = getSelectRows() BRows.value = getSelectRows()
} }
// 记录费用表格表格box的高度 const mainApprove = () => {
// const feeHeight = ref(465)
// const oldFeeHeight = ref(465)
// // 记录数据按下时候的Y轴坐标
// const clientY = ref()
// const handleMouseDown = (event) => {
// // 禁止用户选择网页中文字
// document.onselectstart = () => false
// // 禁止用户拖动元素
// document.ondragstart = () => false
// // 保存鼠标最后移动的位置（Y轴）
// clientY.value = event.clientY
// // 绑定鼠标移动事件
// document.addEventListener('mousemove', handleMouseMove)
// // 绑定鼠标放开事件
// document.addEventListener('mouseup', handleMouseUp)
// }
// // 富文本鼠标按钮移动事件
// const handleMouseMove = (event) => {
// feeHeight.value = clientY.value - event.clientY + Number(oldFeeHeight.value)
// }
// const handleMouseUp = (event) => {
// oldFeeHeight.value = feeHeight.value
// // 移除鼠标移动事件
// document.removeEventListener('mousemove', handleMouseMove)
// // 移除鼠标放开事件
// document.removeEventListener('mouseup', handleMouseUp)
// // 允许用户选择网页中文字
// document.onselectstart = null
// // 允许用户拖动元素
// document.ondragstart = null
// }
}
onMounted(() => { onMounted(() => {
//初始化 //初始化
reload() reload()
@ -533,68 +191,6 @@
height: calc(50vh - 136px); height: calc(50vh - 136px);
overflow-y: auto; overflow-y: auto;
} }
.receive-table, .pay-table {
flex: 1;
th::before {
height: 0!important;
}
.ant-table-footer {
.ant-table-measure-row {
display: none;
}
.ant-table-row-level-0 {
height: 26px!important;
padding-left: 50px;
td {
padding: 5px 6px!important;
font-size: 14px;
font-weight: 600!important;
}
}
}
}
.receive-table {
.ant-table-footer {
td {
color: #17A6A3!important;
}
}
}
.pay-table {
.ant-table-footer {
td {
color: #BA3849!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: flex-end;
padding-bottom: 5px;
}
.fee-data {
height: 26px;
border-top: 1px solid #e5e7eb;
line-height: 26px;
}
}
.ant-form-item-label { .ant-form-item-label {
label { label {
font-size: 12px; font-size: 12px;

Write Preview
Loading…
Cancel
Save