[update] -打包管理数字增加分隔符、并增加总计功能
This commit is contained in:
fengchenchen
@@ -51,7 +51,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">
|
||||
@@ -68,10 +69,38 @@
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="allMoney" slot-scope="text">
|
||||
<a-tooltip>
|
||||
<template slot="title">{{ formatMoney(text) }}</template>
|
||||
<div class="table-text">{{ formatMoney(text) }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)" v-has="'packCompany:edit'">编辑</a>
|
||||
<a @click="handleDelete(record.id)" v-has="'packCompany:delete'">删除</a>
|
||||
</span>
|
||||
|
||||
<template slot="footer" v-if="dataSource.length > 0">
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="footTable"
|
||||
:rowKey="record=>record.id"
|
||||
:columns="columnsFooter"
|
||||
:scroll="{x: 1500}"
|
||||
: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>
|
||||
</a-card>
|
||||
@@ -85,6 +114,86 @@ import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
|
||||
import JYearDate from '../../components/jero/JYearDate'
|
||||
import { JeroListMixin } from '../../mixins/JeroListMixin'
|
||||
import PackCompanyModule from './modules/PackCompanyModule'
|
||||
import {formatMoney} from '@/utils/formatMoney'
|
||||
import {getAction} from '../../api/manage'
|
||||
|
||||
const defaultTableColumns = [
|
||||
{
|
||||
title: '企业名称',
|
||||
align: 'center',
|
||||
width: 240,
|
||||
dataIndex: 'companyTemporaryName',
|
||||
scopedSlots: { customRender: 'projectName' }
|
||||
},
|
||||
{
|
||||
title: '企业联系人',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'companyContactTemporaryName',
|
||||
scopedSlots: { customRender: 'nameText' }
|
||||
},
|
||||
{
|
||||
title: '打包联系人',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'packContactTemporaryName',
|
||||
scopedSlots: { customRender: 'nameText' }
|
||||
},
|
||||
{
|
||||
title: '打包费用总计',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'packChargeTotal',
|
||||
scopedSlots: { customRender: 'allMoney' }
|
||||
},
|
||||
{
|
||||
title: '实际到账费用',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'receiptExpense',
|
||||
scopedSlots: { customRender: 'allMoney' }
|
||||
},
|
||||
{
|
||||
title: '打包年份',
|
||||
align: 'center',
|
||||
dataIndex: 'packYear',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 160,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
const firstColumnTop = {
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
}
|
||||
|
||||
const firstColumnFooter = [
|
||||
{
|
||||
title: '多选',
|
||||
dataIndex: 'selection',
|
||||
align: 'center',
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'title',
|
||||
align: 'center',
|
||||
width: 60
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'PackCompanyList',
|
||||
@@ -101,76 +210,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: 240,
|
||||
dataIndex: 'companyTemporaryName',
|
||||
scopedSlots: { customRender: 'projectName' }
|
||||
},
|
||||
{
|
||||
title: '企业联系人',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'companyContactTemporaryName',
|
||||
scopedSlots: { customRender: 'nameText' }
|
||||
},{
|
||||
title: '打包联系人',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'packContactTemporaryName',
|
||||
scopedSlots: { customRender: 'nameText' }
|
||||
}, {
|
||||
title: '打包费用总计',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'packChargeTotal',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实际到账费用',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'receiptExpense',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '打包年份',
|
||||
align: 'center',
|
||||
dataIndex: 'packYear',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
|
||||
// {
|
||||
// title: '联系人电话',
|
||||
// align: 'center',
|
||||
// width: 200,
|
||||
// dataIndex: 'phone',
|
||||
// scopedSlots: { customRender: 'text' }
|
||||
// }, {
|
||||
// title: '邮箱',
|
||||
// align: 'center',
|
||||
// width: 280,
|
||||
// dataIndex: 'email',
|
||||
// scopedSlots: { customRender: 'text' }
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 160,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
columns: [firstColumnTop, ...defaultTableColumns],
|
||||
columnsFooter: [...firstColumnFooter, ...defaultTableColumns],
|
||||
url: {
|
||||
list: '/pack/payPackCompany/list',
|
||||
delete: '/pack/payPackCompany/delete',
|
||||
@@ -180,6 +221,7 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatMoney,
|
||||
/**
|
||||
* 跳转至打包企业维护页面
|
||||
* 路由参数---打包企业的id
|
||||
@@ -193,11 +235,121 @@ export default {
|
||||
packCompanyName: record.companyTemporaryName
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 同步表与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.pageList || {}
|
||||
//update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||||
this.dataSource = pageListObj.records
|
||||
|
||||
let obj = {
|
||||
id: '1',
|
||||
title: '总计',
|
||||
packChargeTotal: res.result.sumOfMoney || '0.00' + '',
|
||||
receiptExpense: res.result.sumOfConfirmAmount || '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>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '~@assets/less/common.less';
|
||||
// 隐藏主列表的横向滚动条
|
||||
.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>
|
||||
Reference in New Issue
Block a user