|
|
|
|
@ -1,13 +1,12 @@
|
|
|
|
|
<template>
|
|
|
|
|
<BasicModal
|
|
|
|
|
class="customerModal"
|
|
|
|
|
v-bind="$attrs"
|
|
|
|
|
:use-wrapper="true"
|
|
|
|
|
title="增加账单明细"
|
|
|
|
|
width="90%"
|
|
|
|
|
title="添加账单明细"
|
|
|
|
|
@register="registerModal"
|
|
|
|
|
@cancel="closeModal"
|
|
|
|
|
:defaultFullscreen="true"
|
|
|
|
|
width="84%"
|
|
|
|
|
height="793"
|
|
|
|
|
:canFullscreen="false"
|
|
|
|
|
:showFooter="false"
|
|
|
|
|
>
|
|
|
|
|
@ -17,8 +16,38 @@
|
|
|
|
|
<BasicForm @register="registerForm" @submit="handleSubmit" />
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<a-row class="p-4 CsBottom" :gutter="5">
|
|
|
|
|
<a-col :span="17" class="bottomTableL">
|
|
|
|
|
<div class="CsBottom">
|
|
|
|
|
<div class="bottomTableL">
|
|
|
|
|
<a-spin :spinning="spinningL">
|
|
|
|
|
<BasicTable
|
|
|
|
|
class="ds-table"
|
|
|
|
|
@register="registerTableL"
|
|
|
|
|
@selection-change="selectionChange"
|
|
|
|
|
>
|
|
|
|
|
<template #tableTitle>
|
|
|
|
|
<p class="tableTitle">账单明细</p>
|
|
|
|
|
<a-button v-repeat type="link" @click="addDetailL">
|
|
|
|
|
<i class="iconfont icon-jiahao2fill"></i>增加账单明细
|
|
|
|
|
</a-button>
|
|
|
|
|
</template>
|
|
|
|
|
</BasicTable>
|
|
|
|
|
</a-spin>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottomTableR">
|
|
|
|
|
<a-spin :spinning="spinningR">
|
|
|
|
|
<BasicTable class="ds-table" @register="registerTableRT" rowKey="id" :maxHeight="300">
|
|
|
|
|
<template #tableTitle>
|
|
|
|
|
<p class="tableTitle">账单费用明细</p>
|
|
|
|
|
<a-button v-repeat type="link" @click="addDetailR">
|
|
|
|
|
<i class="iconfont icon-jiahao2fill"></i>增加账单费用明细
|
|
|
|
|
</a-button>
|
|
|
|
|
</template>
|
|
|
|
|
</BasicTable>
|
|
|
|
|
</a-spin>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <a-row class="p-4 CsBottom" :gutter="5"> -->
|
|
|
|
|
<!-- <a-col :span="17" class="bottomTableL">
|
|
|
|
|
<a-spin :spinning="spinningL">
|
|
|
|
|
<BasicTable @register="registerTableL" @selection-change="selectionChange">
|
|
|
|
|
<template #toolbar>
|
|
|
|
|
@ -28,8 +57,8 @@
|
|
|
|
|
</template>
|
|
|
|
|
</BasicTable>
|
|
|
|
|
</a-spin>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="7" class="bottomTableR">
|
|
|
|
|
</a-col> -->
|
|
|
|
|
<!-- <a-col :span="7" class="bottomTableR">
|
|
|
|
|
<a-spin :spinning="spinningR">
|
|
|
|
|
<BasicTable @register="registerTableRT" rowKey="id" :maxHeight="300">
|
|
|
|
|
<template #toolbar>
|
|
|
|
|
@ -40,20 +69,11 @@
|
|
|
|
|
</BasicTable>
|
|
|
|
|
</a-spin>
|
|
|
|
|
<BasicTable style="height: '50%'" @register="registerTableRB"></BasicTable>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</a-col> -->
|
|
|
|
|
<!-- </a-row> -->
|
|
|
|
|
</div>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<span> </span>
|
|
|
|
|
<!-- <a-button
|
|
|
|
|
pre-icon="ant-design:close-outlined"
|
|
|
|
|
type="warning"
|
|
|
|
|
ghost
|
|
|
|
|
style="margin-right: 0.8rem"
|
|
|
|
|
@click="closeModal"
|
|
|
|
|
>
|
|
|
|
|
取消
|
|
|
|
|
</a-button> -->
|
|
|
|
|
</template>
|
|
|
|
|
</BasicModal>
|
|
|
|
|
</template>
|
|
|
|
|
@ -90,7 +110,7 @@
|
|
|
|
|
dataSourceL.value = res.data
|
|
|
|
|
setTableData([...res.data])
|
|
|
|
|
setTableDataRT([])
|
|
|
|
|
setTableDataRB([])
|
|
|
|
|
// setTableDataRB([])
|
|
|
|
|
}
|
|
|
|
|
spinningL.value = false
|
|
|
|
|
}
|
|
|
|
|
@ -103,42 +123,47 @@
|
|
|
|
|
title: '',
|
|
|
|
|
dataSource: dataSourceL.value,
|
|
|
|
|
rowSelection: { type: 'checkbox' },
|
|
|
|
|
clickToRowSelect: true,
|
|
|
|
|
columns: columnsL,
|
|
|
|
|
pagination: true,
|
|
|
|
|
striped: true,
|
|
|
|
|
showTableSetting: false,
|
|
|
|
|
bordered: true,
|
|
|
|
|
canResize: false,
|
|
|
|
|
immediate: true,
|
|
|
|
|
showIndexColumn: true,
|
|
|
|
|
immediate: false,
|
|
|
|
|
})
|
|
|
|
|
// 左侧表格点击查询费用明细
|
|
|
|
|
function selectionChange(e) {
|
|
|
|
|
spinningR.value = true
|
|
|
|
|
let ApiData = {
|
|
|
|
|
queryCondition: `[{"FieldName":"businessId","FieldValue":"${
|
|
|
|
|
e.rows[e.rows.length - 1].id
|
|
|
|
|
}","ConditionalType":1}]`,
|
|
|
|
|
pageCondition: {
|
|
|
|
|
sortConditions: [],
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
GetFeeRecordQueryList(ApiData).then((res) => {
|
|
|
|
|
console.log(res.data)
|
|
|
|
|
let Arr: any = [
|
|
|
|
|
{ currency: 'RMB', cr: 0, dr: 0 },
|
|
|
|
|
{ currency: 'USD', cr: 0, dr: 0 },
|
|
|
|
|
]
|
|
|
|
|
getSelectRowsL().forEach((item) => {
|
|
|
|
|
Arr[0].cr = parseInt(item.rmbcr) + parseInt(Arr[0].cr)
|
|
|
|
|
Arr[0].dr = parseInt(item.rmbdr) + parseInt(Arr[0].dr)
|
|
|
|
|
Arr[1].cr = parseInt(item.usdcr) + parseInt(Arr[1].cr)
|
|
|
|
|
Arr[1].dr = parseInt(item.usddr) + parseInt(Arr[1].dr)
|
|
|
|
|
console.log(e)
|
|
|
|
|
|
|
|
|
|
if (e.rows.length) {
|
|
|
|
|
spinningR.value = true
|
|
|
|
|
let ApiData = {
|
|
|
|
|
queryCondition: `[{"FieldName":"businessId","FieldValue":"${
|
|
|
|
|
e.rows[e.rows.length - 1].id
|
|
|
|
|
}","ConditionalType":1}]`,
|
|
|
|
|
pageCondition: {
|
|
|
|
|
sortConditions: [],
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
GetFeeRecordQueryList(ApiData).then((res) => {
|
|
|
|
|
console.log(res.data)
|
|
|
|
|
let Arr: any = [
|
|
|
|
|
{ currency: 'RMB', cr: 0, dr: 0 },
|
|
|
|
|
{ currency: 'USD', cr: 0, dr: 0 },
|
|
|
|
|
]
|
|
|
|
|
getSelectRowsL().forEach((item) => {
|
|
|
|
|
Arr[0].cr = parseInt(item.rmbcr) + parseInt(Arr[0].cr)
|
|
|
|
|
Arr[0].dr = parseInt(item.rmbdr) + parseInt(Arr[0].dr)
|
|
|
|
|
Arr[1].cr = parseInt(item.usdcr) + parseInt(Arr[1].cr)
|
|
|
|
|
Arr[1].dr = parseInt(item.usddr) + parseInt(Arr[1].dr)
|
|
|
|
|
})
|
|
|
|
|
// setTableDataRB(Arr)
|
|
|
|
|
setTableDataRT(res.data)
|
|
|
|
|
spinningR.value = false
|
|
|
|
|
})
|
|
|
|
|
setTableDataRB(Arr)
|
|
|
|
|
setTableDataRT(res.data)
|
|
|
|
|
spinningR.value = false
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
setTableDataRT([])
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function beforeFetch(data) {
|
|
|
|
|
var currentPageInfo: any = getPaginationRef()
|
|
|
|
|
@ -225,7 +250,7 @@
|
|
|
|
|
dataSourceL.value = res.data
|
|
|
|
|
setTableData([...res.data])
|
|
|
|
|
setTableDataRT([])
|
|
|
|
|
setTableDataRB([])
|
|
|
|
|
// setTableDataRB([])
|
|
|
|
|
spinningL.value = false
|
|
|
|
|
}
|
|
|
|
|
setModalProps({ confirmLoading: false, loading: false })
|
|
|
|
|
@ -236,7 +261,7 @@
|
|
|
|
|
title: '',
|
|
|
|
|
rowSelection: { type: 'checkbox' },
|
|
|
|
|
columns: columnsRT,
|
|
|
|
|
pagination: false,
|
|
|
|
|
pagination: true,
|
|
|
|
|
striped: true,
|
|
|
|
|
showTableSetting: false,
|
|
|
|
|
bordered: true,
|
|
|
|
|
@ -244,24 +269,24 @@
|
|
|
|
|
canResize: false,
|
|
|
|
|
immediate: false,
|
|
|
|
|
})
|
|
|
|
|
// 右下侧表格
|
|
|
|
|
const [registerTableRB, { setTableData: setTableDataRB }] = useTable({
|
|
|
|
|
title: '',
|
|
|
|
|
// api: async (p) => {
|
|
|
|
|
// const res: API.DataResult = await ApiList(p)
|
|
|
|
|
// return new Promise((resolve) => {
|
|
|
|
|
// resolve({ data: [...res.data], total: res.count })
|
|
|
|
|
// })
|
|
|
|
|
// },
|
|
|
|
|
columns: columnsRB,
|
|
|
|
|
pagination: false,
|
|
|
|
|
striped: true,
|
|
|
|
|
showTableSetting: false,
|
|
|
|
|
bordered: true,
|
|
|
|
|
showIndexColumn: true,
|
|
|
|
|
canResize: false,
|
|
|
|
|
immediate: false,
|
|
|
|
|
})
|
|
|
|
|
// // 右下侧表格
|
|
|
|
|
// const [registerTableRB, { setTableData: setTableDataRB }] = useTable({
|
|
|
|
|
// title: '',
|
|
|
|
|
// // api: async (p) => {
|
|
|
|
|
// // const res: API.DataResult = await ApiList(p)
|
|
|
|
|
// // return new Promise((resolve) => {
|
|
|
|
|
// // resolve({ data: [...res.data], total: res.count })
|
|
|
|
|
// // })
|
|
|
|
|
// // },
|
|
|
|
|
// columns: columnsRB,
|
|
|
|
|
// pagination: false,
|
|
|
|
|
// striped: true,
|
|
|
|
|
// showTableSetting: false,
|
|
|
|
|
// bordered: true,
|
|
|
|
|
// showIndexColumn: true,
|
|
|
|
|
// canResize: false,
|
|
|
|
|
// immediate: false,
|
|
|
|
|
// })
|
|
|
|
|
// id 传主表id ids传勾选id
|
|
|
|
|
// 增加账单明细
|
|
|
|
|
function addDetailL() {
|
|
|
|
|
@ -288,57 +313,62 @@
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
:deep(.ant-form-item) {
|
|
|
|
|
margin-bottom: 0px !important;
|
|
|
|
|
}
|
|
|
|
|
.bottomTableL {
|
|
|
|
|
:deep(.ant-table-container) {
|
|
|
|
|
min-height: calc(100vh - 430px);
|
|
|
|
|
// .ant-table-content {
|
|
|
|
|
// height: 100%;
|
|
|
|
|
// }
|
|
|
|
|
// .ant-table-expanded-row-fixed {
|
|
|
|
|
// height: calc(100vh - 429px);
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottomTableR {
|
|
|
|
|
:deep(.ant-table-container) {
|
|
|
|
|
min-height: calc(100vh - 665px);
|
|
|
|
|
// .ant-table-content {
|
|
|
|
|
// height: 100%;
|
|
|
|
|
// }
|
|
|
|
|
// .ant-table-expanded-row-fixed {
|
|
|
|
|
// height: calc(100vh - 664px);
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style lang="less">
|
|
|
|
|
.CsMain {
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.CsHeader {
|
|
|
|
|
padding-bottom: 0 !important;
|
|
|
|
|
padding-top: 0 !important;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
.headerForm {
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 10px 15px 0 15px !important;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.CsBottom {
|
|
|
|
|
flex: 1;
|
|
|
|
|
padding-top: 0 !important;
|
|
|
|
|
.bottomTableL {
|
|
|
|
|
padding-left: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
.bottomTableR {
|
|
|
|
|
padding-right: 0 !important;
|
|
|
|
|
.vben-basic-table {
|
|
|
|
|
height: auto !important;
|
|
|
|
|
.tableTitle {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
line-height: 15.84px;
|
|
|
|
|
color: rgba(51, 56, 61, 1);
|
|
|
|
|
text-align: left;
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
}
|
|
|
|
|
.bottomTableL {
|
|
|
|
|
height: calc(100vh - 650px);
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
.bottomTableR {
|
|
|
|
|
height: calc(100vh - 650px);
|
|
|
|
|
}
|
|
|
|
|
:deep(.ant-spin-nested-loading) {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ant-spin-container {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ds-table {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ant-table-wrapper {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ant-spin-nested-loading {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ant-spin-container {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ant-table {
|
|
|
|
|
height: calc(100% - 30px);
|
|
|
|
|
.ant-table-container {
|
|
|
|
|
height: calc(100% - 54px);
|
|
|
|
|
.ant-table-body {
|
|
|
|
|
max-height: auto !important;
|
|
|
|
|
height: auto !important;
|
|
|
|
|
table {
|
|
|
|
|
height: calc(100% - 24px) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ant-table-content {
|
|
|
|
|
overflow: auto !important;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
张同海
4 months ago