LK/income_payments_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【update】-打包管理详情页增加

Browse Source
This commit is contained in:
fengchenchen
2023-08-30 16:58:24 +08:00
parent 9289bce141
commit ffe2bf064a
4 changed files with 265 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/packManagement/PackProjectMaintenance.vue
+253 -97
View File
@@ -92,7 +92,8 @@
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
@change="handleTableChange"
class="j-table-force-nowrap">
:class="dataSource.length === 0 ? 'show-scroll' : ''"
class="j-table-force-nowrap main-table">
<!-- 项目名称-->
<template slot="projectName" slot-scope="text, record">
@@ -139,6 +140,29 @@
<!--工作组项目、普通项目、资料网员项目可以修改发票信息-->
<a v-has="'packProject:changeInvoiceInfo'" @click="changeInvoiceInfo(record)" :disabled="Number(record.projectType) !== ProjectTypeEnums.GENERAL_PRO.value && Number(record.projectType) !== ProjectTypeEnums.GROUP_PRO.value && Number(record.projectType) !== ProjectTypeEnums.MEMBER_PRO.value">开票类型</a>
</span>
<template slot="footer" v-if="dataSource.length > 0">
<a-table
size="middle"
ref="footTable"
:rowKey="record=>record.id"
:columns="columnsFooter"
:scroll="{x: 1600}"
:dataSource="footerDataSource"
:showHeader="false"
:pagination="false"
class="j-table-force-nowrap footer-table">
<template slot="allMoney" slot-scope="text">
<a-tooltip>
<template slot="title">{{ formatMoney(text+'') }}</template>
<div class="table-text">{{ formatMoney(text+'') }}</div>
</a-tooltip>
</template>
</a-table>
</template>
</a-table>
</div>
<!-- /项目信息-->
@@ -222,6 +246,119 @@ import ConfirmStageModule from '../financialManagement/arriveAndInvoicing/module
import {getPayConfirmList} from '@/api/incomePaymentsApi'
import InvoiceInfoChangeModule from './modules/InvoiceInfoChangeModule'
import { ProjectTypeEnums } from '../../enums/commonEnums'
import { getAction } from "../../api/manage";
const firstColumnTop = {
title: '序号',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
}
const defaultTableColumns = [
{
title: '打包项目名称',
align: 'center',
width: 280,
dataIndex: 'chargeProject',
scopedSlots: { customRender: 'projectName' }
}, {
title: '项目负责人',
align: 'center',
width: 140,
dataIndex: 'principalName',
scopedSlots: { customRender: 'text' }
}, {
title: '待确收金额',
align: 'center',
width: 120,
dataIndex: 'receivableAmount'
}, {
title: '实收金额',
align: 'center',
width: 120,
dataIndex: 'paidAmount'
}, {
title: '打包',
align: 'center',
width: 80,
dataIndex: 'pack',
scopedSlots: { customRender: 'status-pack' }
}, {
title: '需要发票',
align: 'center',
width: 80,
dataIndex: 'needInvoice',
scopedSlots: { customRender: 'status-pack' }
}, {
title: '到账',
align: 'center',
width: 80,
dataIndex: 'inAccount',
scopedSlots: { customRender: 'status' }
}, {
title: '收入',
align: 'center',
width: 80,
dataIndex: 'affirmIncome',
scopedSlots: {customRender: 'status-confirm'}
}, {
title: '开票',
align: 'center',
width: 80,
dataIndex: 'makeInvoice',
scopedSlots: { customRender: 'status-bill' }
}, {
title: '邮寄',
align: 'center',
width: 80,
dataIndex: 'mail',
scopedSlots: { customRender: 'status-mail' }
}, {
title: '企业联系人',
align: 'center',
width: 100,
dataIndex: 'contactsTemporaryName',
scopedSlots: { customRender: 'text' }
}, {
title: '联系人电话',
align: 'center',
width: 100,
dataIndex: 'phone',
scopedSlots: { customRender: 'text' }
}, {
title: '联系人邮箱',
align: 'center',
width: 200,
dataIndex: 'email',
scopedSlots: { customRender: 'text' }
}, {
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
width: 330,
scopedSlots: { customRender: 'action' }
}
]
const firstColumnFooter = [
{
title: '多选',
dataIndex: 'selection',
align: 'center',
width: 60
},
{
title: '序号',
dataIndex: 'title',
align: 'center',
width: 60
}
]
export default {
name: 'PackProjectMaintenance',
@@ -284,101 +421,8 @@ export default {
xs: { span: 24 },
sm: { span: 10 }
},
columns: [
{
title: '序号',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
}, {
title: '打包项目名称',
align: 'center',
width: 280,
dataIndex: 'chargeProject',
scopedSlots: { customRender: 'projectName' }
}, {
title: '项目负责人',
align: 'center',
width: 140,
dataIndex: 'principalName',
scopedSlots: { customRender: 'text' }
}, {
title: '待确收金额',
align: 'center',
width: 120,
dataIndex: 'receivableAmount'
}, {
title: '实收金额',
align: 'center',
width: 120,
dataIndex: 'paidAmount'
}, {
title: '打包',
align: 'center',
width: 80,
dataIndex: 'pack',
scopedSlots: { customRender: 'status-pack' }
}, {
title: '需要发票',
align: 'center',
width: 80,
dataIndex: 'needInvoice',
scopedSlots: { customRender: 'status-pack' }
}, {
title: '到账',
align: 'center',
width: 80,
dataIndex: 'inAccount',
scopedSlots: { customRender: 'status' }
}, {
title: '收入',
align: 'center',
width: 80,
dataIndex: 'affirmIncome',
scopedSlots: {customRender: 'status-confirm'}
}, {
title: '开票',
align: 'center',
width: 80,
dataIndex: 'makeInvoice',
scopedSlots: { customRender: 'status-bill' }
}, {
title: '邮寄',
align: 'center',
width: 80,
dataIndex: 'mail',
scopedSlots: { customRender: 'status-mail' }
}, {
title: '企业联系人',
align: 'center',
width: 100,
dataIndex: 'contactsTemporaryName',
scopedSlots: { customRender: 'text' }
}, {
title: '联系人电话',
align: 'center',
width: 100,
dataIndex: 'phone',
scopedSlots: { customRender: 'text' }
}, {
title: '联系人邮箱',
align: 'center',
width: 200,
dataIndex: 'email',
scopedSlots: { customRender: 'text' }
}, {
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
width: 330,
scopedSlots: { customRender: 'action' }
}
],
columns: [firstColumnTop, ...defaultTableColumns],
columnsFooter: [...firstColumnFooter, ...defaultTableColumns],
disableMixinCreated: true,
selectPackProjectVisible: false,
selectedProject: [], // 选中的项目
@@ -395,7 +439,8 @@ export default {
url: {
list: '/pack/payPackCompanyProject/listAll',
exportXlsUrl: '/pack/payPackCompanyProject/exportXls'
}
},
footerDataSource: []
}
},
created() {
@@ -624,8 +669,76 @@ export default {
// this.confirmStageVisible = true
this.$refs.changeInvoiceInfo.open(record)
},
/**
* 同步表与footer滚动，保留底部滚动条
*/
setScroll() {
if (this.dataSource.length === 0) {
return
}
let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
dom.addEventListener(
'scroll',
() => {
this.$refs.table.$el.querySelectorAll(
'.ant-table-body'
)[0].scrollLeft = dom.scrollLeft
},
true
)
},
// 重写加载的方法
loadData(arg) {
if (!this.url.list) {
this.$message.error('请设置url.list属性!')
return
}
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1
}
let params = this.getQueryParams()//查询条件
this.loading = true
getAction(this.url.list, params).then((res) => {
if (res.success) {
let pageListObj = res.result || {}
//update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
this.dataSource = pageListObj.list
let obj = {
id: '1',
title: '总计',
receivableAmount: pageListObj.sumOfPaidAmount || '0.00' + '',
paidAmount: pageListObj.sumOfReceivableAmount || '0.00' + ''
}
this.footerDataSource = [obj]
if (pageListObj.total) {
this.ipagination.total = pageListObj.total
//清空列表选中
this.onClearSelected()
} else {
this.ipagination.total = 0
}
//update-end---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
}
if (this.dataSource.length > 0) {
this.$nextTick(() => {
this.setScroll()
})
}
if (res.code === 510) {
this.$message.warning(res.message)
}
this.loading = false
}).finally(() => {
this.loading = false
})
}
},
mounted() {
this.setScroll()
}
}
</script>
@@ -676,4 +789,47 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
}
// 隐藏主列表的横向滚动条
.main-table {
/deep/ .ant-table-body {
overflow-x: hidden !important;
}
/deep/ .ant-table-footer {
padding: 0 0;
}
/deep/ .ant-table.ant-table-bordered .ant-table-footer {
border-left: none;
margin-top: -2px;
}
}
.show-scroll {
/deep/ .ant-table-body {
overflow-x: auto !important;
}
}
// 去除底部表格边框
.footer-table {
/deep/ .ant-table-tbody > tr > td {
border: none;
background-color: #F5F5F5;
}
/deep/ .ant-table-fixed-right table {
border-left: none !important;
background: none;
}
/deep/ .ant-table-body {
overflow-x: auto !important;
}
/deep/ .ant-table-bordered .ant-table-header > table {
border-left: none;
}
}
</style>