[update] 打包项目维护字段修改；统计报表模块页面
This commit is contained in:
zhaoxiao
+7
-1
@@ -59,6 +59,11 @@
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<!-- 进度-->
|
||||
<template slot="rateOfProgress" slot-scope="text">
|
||||
<progress-bar :data="text"></progress-bar>
|
||||
</template>
|
||||
|
||||
<template slot="status-pack" slot-scope="text,record">
|
||||
<status-slot :statu-obj="record" :status-no="text"></status-slot>
|
||||
</template>
|
||||
@@ -82,10 +87,11 @@ import { JeroListMixin } from '../../../../mixins/JeroListMixin'
|
||||
import JYearDate from '../../../../components/jero/JYearDate'
|
||||
import WorkingGroupMemberUnitModule from '../../../projectManagement/modules/WorkingGroupMemberUnitModule'
|
||||
import { associatedProject } from '../../../../api/incomePaymentsApi'
|
||||
import ProgressBar from '../../../../components/ProgressBar'
|
||||
|
||||
export default {
|
||||
name: 'SelectWorkingGroupProjectModule',
|
||||
components: { WorkingGroupMemberUnitModule, JYearDate },
|
||||
components: { WorkingGroupMemberUnitModule, JYearDate, ProgressBar },
|
||||
mixins: [JeroListMixin],
|
||||
props: {
|
||||
// 打包状态
|
||||
|
||||
@@ -39,17 +39,17 @@
|
||||
<a-row>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入项目名称" v-model="queryParam.companyName"></a-input>
|
||||
<a-input placeholder="请输入项目名称" v-model="queryParam.projectName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.packYear"></j-year-date>
|
||||
<j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="打包年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-year-date style="width:100%" placeholder="请选择打包年份" v-model="queryParam.packYear"></j-year-date>
|
||||
<a-form-item label="运行年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-year-date style="width:100%" placeholder="请选择运行年份" v-model="queryParam.year"></j-year-date>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
|
||||
@@ -39,19 +39,13 @@
|
||||
<j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="payment_charge_use"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-col :xl="10" :lg="11" :md="12" :sm="24">
|
||||
<a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName"></a-input>
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
<span class="query-group-split-cust"></span>
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-row>
|
||||
<a-col :span="1">~</a-col>
|
||||
<a-col :span="18">
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName"></a-input>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
|
||||
@@ -100,9 +94,8 @@
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange"
|
||||
class="j-table-force-nowrap">
|
||||
class="j-table-force-nowrap main-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
@@ -118,6 +111,7 @@
|
||||
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="footTable"
|
||||
rowKey="id"
|
||||
:columns="columnsFooter"
|
||||
:scroll="{x: 1100}"
|
||||
@@ -272,7 +266,27 @@ export default {
|
||||
created() {
|
||||
this.loadDepartTreeData()
|
||||
},
|
||||
mounted() {
|
||||
this.setScroll()
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 同步表与footer滚动，保留底部滚动条
|
||||
*/
|
||||
setScroll() {
|
||||
//
|
||||
let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
|
||||
console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
|
||||
dom.addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
this.$refs.table.$el.querySelectorAll(
|
||||
'.ant-table-body'
|
||||
)[0].scrollLeft = dom.scrollLeft
|
||||
},
|
||||
true
|
||||
)
|
||||
},
|
||||
/**
|
||||
* 获取科室（部门）数据
|
||||
*/
|
||||
@@ -298,18 +312,39 @@ export default {
|
||||
<style scoped lang="less">
|
||||
@import '~@assets/less/common.less';
|
||||
|
||||
/deep/ .ant-table-footer {
|
||||
padding: 0 0;
|
||||
}
|
||||
// 隐藏主列表的横向滚动条
|
||||
.main-table {
|
||||
/deep/ .ant-table-body {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
/deep/ .ant-table.ant-table-bordered .ant-table-footer {
|
||||
border-left: none;
|
||||
margin-top: -2px;
|
||||
/deep/ .ant-table-footer {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
/deep/ .ant-table.ant-table-bordered .ant-table-footer {
|
||||
border-left: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
// 去除底部表格边框
|
||||
.footer-table {
|
||||
/deep/ .ant-table-tbody > tr > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/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>
|
||||
+286
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header-title :is-level-one="false" level-two-title="个人来款详情"></page-header-title>
|
||||
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域-start -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入来款项目" v-model="queryParam.contractName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款用途" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="payment_charge_use"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="付款状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam.pack"
|
||||
placeholder="请选择付款状态"
|
||||
dictCode="yn"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="10" :lg="11" :md="12" :sm="24">
|
||||
<a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
<span class="query-group-split-cust"></span>
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="4" :lg="7" :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
|
||||
<a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- /查询区域-end-->
|
||||
|
||||
<!-- 操作按钮区域-->
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
|
||||
</div>
|
||||
<!-- 操作按钮区域-end-->
|
||||
|
||||
<!-- table表格区域-->
|
||||
<div>
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="table"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:scroll="{x: 1100}"
|
||||
@change="handleTableChange"
|
||||
class="j-table-force-nowrap main-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="openDetailModal(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||||
<a @click="goDetail(record.id)">详情</a>
|
||||
</span>
|
||||
|
||||
<template slot="footer" slot-scope="currentPageData">
|
||||
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="footTable"
|
||||
rowKey="id"
|
||||
:columns="columnsFooter"
|
||||
:dataSource="footerDataSource"
|
||||
:showHeader="false"
|
||||
:pagination="false"
|
||||
:scroll="{x: 1100}"
|
||||
class="j-table-force-nowrap footer-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="openDetailModal(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
|
||||
import { JeroListMixin } from '../../../mixins/JeroListMixin'
|
||||
import JYearDate from '../../../components/jero/JYearDate'
|
||||
|
||||
export default {
|
||||
name: 'IndividualPaymentStatisticsDetail',
|
||||
components: { PageHeaderTitle, JYearDate },
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 10 }
|
||||
},
|
||||
url: {
|
||||
list: ''
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
}, {
|
||||
title: '来款项目',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'workGroup',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'allMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'comeAllMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款用途',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'chargeUse_dictText',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{
|
||||
id: 1,
|
||||
workGroup: 'zx工作组',
|
||||
allMoney: '500',
|
||||
comeAllMoney: '600'
|
||||
}
|
||||
],
|
||||
// 总计表头，与主表表头一致
|
||||
columnsFooter: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'title',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
}, {
|
||||
title: '来款项目',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'workGroup',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'allMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'comeAllMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款用途',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'chargeUse_dictText',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
],
|
||||
// 总计数据
|
||||
footerDataSource: [
|
||||
{
|
||||
id: 1,
|
||||
title: '总计',
|
||||
allMoney: '500',
|
||||
comeAllMoney: '600'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setScroll()
|
||||
},
|
||||
methods: {
|
||||
// 同步表与footer滚动，保留底部滚动条
|
||||
setScroll() {
|
||||
//
|
||||
let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
|
||||
console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
|
||||
dom.addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
this.$refs.table.$el.querySelectorAll(
|
||||
'.ant-table-body'
|
||||
)[0].scrollLeft = dom.scrollLeft
|
||||
},
|
||||
true
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
// 去除底部表格边框
|
||||
.footer-table {
|
||||
/deep/ .ant-table-tbody > tr > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/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>
|
||||
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header-title :img-for-icon="IconImg"></page-header-title>
|
||||
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域-start -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入来款单位" v-model="queryParam.contractNum"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入来款项目" v-model="queryParam.contractName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="项目负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<select-principal placeholder="请选择项目负责人" v-model="queryParam.principalId"></select-principal>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="所属科室" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-tree-select
|
||||
style="width:100%"
|
||||
:dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflow-y': 'auto' }"
|
||||
:treeData="treeDepartData"
|
||||
v-model="queryParam.departId"
|
||||
placeholder="请选择科室">
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款用途" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="payment_charge_use"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="10" :lg="11" :md="12" :sm="24">
|
||||
<a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
<span class="query-group-split-cust"></span>
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="是否打包" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam.pack"
|
||||
placeholder="请选择是否打包"
|
||||
dictCode="yn"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="付款状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam.pack"
|
||||
placeholder="请选择付款状态"
|
||||
dictCode="yn"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="4" :lg="7" :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
|
||||
<a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- /查询区域-end-->
|
||||
|
||||
<!-- 操作按钮区域-->
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
|
||||
</div>
|
||||
<!-- 操作按钮区域-end-->
|
||||
|
||||
<!-- table表格区域-->
|
||||
<div>
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:scroll="{x: 1100}"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
class="j-table-force-nowrap main-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="goDetail(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="footer" slot-scope="currentPageData">
|
||||
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="footTable"
|
||||
rowKey="id"
|
||||
:columns="columnsFooter"
|
||||
:scroll="{x: 1100}"
|
||||
:dataSource="footerDataSource"
|
||||
:showHeader="false"
|
||||
:pagination="false"
|
||||
class="j-table-force-nowrap footer-table">
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconImg from '@/assets/imgs/icon/icon_statistical_report.png'
|
||||
import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
|
||||
import { JeroListMixin } from '../../../mixins/JeroListMixin'
|
||||
import JYearDate from '../../../components/jero/JYearDate'
|
||||
import SelectPrincipal from '../../../components/company/SelectPrincipal'
|
||||
|
||||
export default {
|
||||
name: 'IndividualPaymentStatisticsList',
|
||||
components: { PageHeaderTitle, JYearDate, SelectPrincipal },
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
IconImg,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 10 }
|
||||
},
|
||||
treeDepartData: [],
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
}, {
|
||||
title: '项目名称',
|
||||
align: 'center',
|
||||
// width: 200,
|
||||
dataIndex: 'chargeProject',
|
||||
scopedSlots: { customRender: 'projectName' }
|
||||
}, {
|
||||
title: '负责人',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'principalName',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '所属科室',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'departId',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收金额',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'receivableAmount'
|
||||
}, {
|
||||
title: '实收金额',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'paidAmount'
|
||||
}, {
|
||||
title: '来款用途',
|
||||
align: 'center',
|
||||
dataIndex: 'chargeUse_dictText',
|
||||
width: 140
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{
|
||||
id: 1,
|
||||
chargeProject: '项目名称'
|
||||
}
|
||||
],
|
||||
columnsFooter: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'title',
|
||||
key: 'rowIndex',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
}, {
|
||||
title: '项目名称',
|
||||
align: 'center',
|
||||
// width: 200,
|
||||
dataIndex: 'chargeProject',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '负责人',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'principalName',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '所属科室',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'departId',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收金额',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'receivableAmount'
|
||||
}, {
|
||||
title: '实收金额',
|
||||
align: 'center',
|
||||
width: 140,
|
||||
dataIndex: 'paidAmount'
|
||||
}, {
|
||||
title: '来款用途',
|
||||
align: 'center',
|
||||
dataIndex: 'chargeUse_dictText',
|
||||
width: 140
|
||||
}
|
||||
],
|
||||
footerDataSource: [
|
||||
{
|
||||
id: 1,
|
||||
title: '总计',
|
||||
receivableAmount: 4000,
|
||||
paidAmount: 200
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setScroll()
|
||||
},
|
||||
methods: {
|
||||
// 同步表与footer滚动，保留底部滚动条
|
||||
setScroll() {
|
||||
//
|
||||
let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
|
||||
console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
|
||||
dom.addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
this.$refs.table.$el.querySelectorAll(
|
||||
'.ant-table-body'
|
||||
)[0].scrollLeft = dom.scrollLeft
|
||||
},
|
||||
true
|
||||
)
|
||||
},
|
||||
goDetail(id) {
|
||||
this.$router.push({
|
||||
path: '/statisticalReport/departmentStatistics/IndividualPaymentStatisticsDetail'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
// 去除底部表格边框
|
||||
.footer-table {
|
||||
/deep/ .ant-table-tbody > tr > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/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>
|
||||
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header-title :img-for-icon="IconImg"></page-header-title>
|
||||
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域-start -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入来款项目" v-model="queryParam.contractName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款用途" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="payment_charge_use"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="付款状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam.pack"
|
||||
placeholder="请选择付款状态"
|
||||
dictCode="yn"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="10" :lg="11" :md="12" :sm="24">
|
||||
<a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
<span class="query-group-split-cust"></span>
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="4" :lg="7" :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
|
||||
<a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- /查询区域-end-->
|
||||
|
||||
<!-- 操作按钮区域-->
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
|
||||
</div>
|
||||
<!-- 操作按钮区域-end-->
|
||||
|
||||
<!-- table表格区域-->
|
||||
<div>
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="table"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:scroll="{x: 1100}"
|
||||
@change="handleTableChange"
|
||||
class="j-table-force-nowrap main-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="openDetailModal(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||||
<a @click="goDetail(record.id)">详情</a>
|
||||
</span>
|
||||
|
||||
<template slot="footer" slot-scope="currentPageData">
|
||||
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="footTable"
|
||||
rowKey="id"
|
||||
:columns="columnsFooter"
|
||||
:dataSource="footerDataSource"
|
||||
:showHeader="false"
|
||||
:pagination="false"
|
||||
:scroll="{x: 1100}"
|
||||
class="j-table-force-nowrap footer-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="openDetailModal(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconImg from '@/assets/imgs/icon/icon_statistical_report.png'
|
||||
import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
|
||||
import { JeroListMixin } from '../../../mixins/JeroListMixin'
|
||||
import JYearDate from '../../../components/jero/JYearDate'
|
||||
|
||||
export default {
|
||||
name: 'ProjectPaymentStatisticsList',
|
||||
components: { PageHeaderTitle, JYearDate },
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
IconImg,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 10 }
|
||||
},
|
||||
url: {
|
||||
list: ''
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
}, {
|
||||
title: '来款项目',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'workGroup',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'allMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'comeAllMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款用途',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'chargeUse_dictText',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{
|
||||
id: 1,
|
||||
workGroup: 'zx工作组',
|
||||
allMoney: '500',
|
||||
comeAllMoney: '600'
|
||||
}
|
||||
],
|
||||
// 总计表头，与主表表头一致
|
||||
columnsFooter: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'title',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
}, {
|
||||
title: '来款项目',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'workGroup',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'allMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'comeAllMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款用途',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'chargeUse_dictText',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
],
|
||||
// 总计数据
|
||||
footerDataSource: [
|
||||
{
|
||||
id: 1,
|
||||
title: '总计',
|
||||
allMoney: '500',
|
||||
comeAllMoney: '600'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setScroll()
|
||||
},
|
||||
methods: {
|
||||
// 同步表与footer滚动，保留底部滚动条
|
||||
setScroll() {
|
||||
//
|
||||
let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
|
||||
console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
|
||||
dom.addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
this.$refs.table.$el.querySelectorAll(
|
||||
'.ant-table-body'
|
||||
)[0].scrollLeft = dom.scrollLeft
|
||||
},
|
||||
true
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
// 去除底部表格边框
|
||||
.footer-table {
|
||||
/deep/ .ant-table-tbody > tr > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/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>
|
||||
+297
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header-title :is-level-one="false" level-two-title="企业来款详情"></page-header-title>
|
||||
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域-start -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入来款项目" v-model="queryParam.contractName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款用途" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="payment_charge_use"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="付款状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam.pack"
|
||||
placeholder="请选择付款状态"
|
||||
dictCode="yn"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="10" :lg="11" :md="12" :sm="24">
|
||||
<a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
<span class="query-group-split-cust"></span>
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="4" :lg="7" :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
|
||||
<a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- /查询区域-end-->
|
||||
|
||||
<!-- 操作按钮区域-->
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
|
||||
</div>
|
||||
<!-- 操作按钮区域-end-->
|
||||
|
||||
<!-- table表格区域-->
|
||||
<div>
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="table"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:scroll="{x: 1100}"
|
||||
@change="handleTableChange"
|
||||
class="j-table-force-nowrap main-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="openDetailModal(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||||
<a @click="goDetail(record.id)">详情</a>
|
||||
</span>
|
||||
|
||||
<template slot="footer" slot-scope="currentPageData">
|
||||
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="footTable"
|
||||
rowKey="id"
|
||||
:columns="columnsFooter"
|
||||
:dataSource="footerDataSource"
|
||||
:showHeader="false"
|
||||
:pagination="false"
|
||||
:scroll="{x: 1100}"
|
||||
class="j-table-force-nowrap footer-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="openDetailModal(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
|
||||
import { JeroListMixin } from '../../../mixins/JeroListMixin'
|
||||
import JYearDate from '../../../components/jero/JYearDate'
|
||||
|
||||
export default {
|
||||
name: 'EnterprisePaymentStatisticsDetail',
|
||||
components: { PageHeaderTitle, JYearDate },
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 10 }
|
||||
},
|
||||
url: {
|
||||
list: ''
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
}, {
|
||||
title: '项目负责人',
|
||||
align: 'center',
|
||||
dataIndex: 'workGroup',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款单位',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'allMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'comeAllMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'moneyRate',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款用途',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'chargeUse_dictText',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{
|
||||
id: 1,
|
||||
workGroup: 'zx工作组',
|
||||
allMoney: '500',
|
||||
comeAllMoney: '600'
|
||||
}
|
||||
],
|
||||
// 总计表头，与主表表头一致
|
||||
columnsFooter: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'title',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
}, {
|
||||
title: '项目负责人',
|
||||
align: 'center',
|
||||
dataIndex: 'workGroup',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款单位',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'allMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'comeAllMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'moneyRate',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款用途',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'chargeUse_dictText',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
],
|
||||
// 总计数据
|
||||
footerDataSource: [
|
||||
{
|
||||
id: 1,
|
||||
title: '总计',
|
||||
allMoney: '500',
|
||||
comeAllMoney: '600'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setScroll()
|
||||
},
|
||||
methods: {
|
||||
// 同步表与footer滚动，保留底部滚动条
|
||||
setScroll() {
|
||||
//
|
||||
let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
|
||||
console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
|
||||
dom.addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
this.$refs.table.$el.querySelectorAll(
|
||||
'.ant-table-body'
|
||||
)[0].scrollLeft = dom.scrollLeft
|
||||
},
|
||||
true
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
// 去除底部表格边框
|
||||
.footer-table {
|
||||
/deep/ .ant-table-tbody > tr > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/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>
|
||||
+283
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header-title :img-for-icon="IconImg"></page-header-title>
|
||||
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域-start -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款企业" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入来款企业" v-model="queryParam.workGroup"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.year"></j-year-date>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="10" :lg="11" :md="12" :sm="24">
|
||||
<a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
<span class="query-group-split-cust"></span>
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="4" :lg="7" :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
|
||||
<a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- /查询区域-end-->
|
||||
|
||||
<!-- 操作按钮区域-->
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
|
||||
</div>
|
||||
<!-- 操作按钮区域-end-->
|
||||
|
||||
<!-- table表格区域-->
|
||||
<div>
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="table"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:scroll="{x: 1100}"
|
||||
@change="handleTableChange"
|
||||
class="j-table-force-nowrap main-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="openDetailModal(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||||
<a @click="goDetail(record.id)">详情</a>
|
||||
</span>
|
||||
|
||||
<template slot="footer" slot-scope="currentPageData">
|
||||
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="footTable"
|
||||
rowKey="id"
|
||||
:columns="columnsFooter"
|
||||
:dataSource="footerDataSource"
|
||||
:showHeader="false"
|
||||
:pagination="false"
|
||||
:scroll="{x: 1100}"
|
||||
class="j-table-force-nowrap footer-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="openDetailModal(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconImg from '@/assets/imgs/icon/icon_statistical_report.png'
|
||||
import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
|
||||
import { JeroListMixin } from '../../../mixins/JeroListMixin'
|
||||
import JYearDate from '../../../components/jero/JYearDate'
|
||||
|
||||
export default {
|
||||
name: 'EnterprisePaymentStatisticsList',
|
||||
components: { PageHeaderTitle, JYearDate },
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
IconImg,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 10 }
|
||||
},
|
||||
url: {
|
||||
list: ''
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
}, {
|
||||
title: '来款企业',
|
||||
align: 'center',
|
||||
dataIndex: 'workGroup',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收总金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'allMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收总金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'comeAllMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 160,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{
|
||||
id: 1,
|
||||
workGroup: 'zx工作组',
|
||||
allMoney: '500',
|
||||
comeAllMoney: '600'
|
||||
}
|
||||
],
|
||||
// 总计表头，与主表表头一致
|
||||
columnsFooter: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'title',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
}, {
|
||||
title: '来款企业',
|
||||
align: 'center',
|
||||
dataIndex: 'workGroup',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收总金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'allMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收总金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'comeAllMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 160
|
||||
}
|
||||
],
|
||||
// 总计数据
|
||||
footerDataSource: [
|
||||
{
|
||||
id: 1,
|
||||
title: '总计',
|
||||
allMoney: '500',
|
||||
comeAllMoney: '600'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setScroll()
|
||||
},
|
||||
methods: {
|
||||
goDetail(id) {
|
||||
console.log(id)
|
||||
this.$router.push({
|
||||
path: '/statisticalReport/enterprisePaymentStatistics/EnterprisePaymentStatisticsDetail'
|
||||
})
|
||||
},
|
||||
// 同步表与footer滚动，保留底部滚动条
|
||||
setScroll() {
|
||||
//
|
||||
let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
|
||||
console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
|
||||
dom.addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
this.$refs.table.$el.querySelectorAll(
|
||||
'.ant-table-body'
|
||||
)[0].scrollLeft = dom.scrollLeft
|
||||
},
|
||||
true
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
// 去除底部表格边框
|
||||
.footer-table {
|
||||
/deep/ .ant-table-tbody > tr > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/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>
|
||||
+310
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header-title :is-level-one="false" level-two-title="工作组来款详情"></page-header-title>
|
||||
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域-start -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入来款单位" v-model="queryParam.contractNum"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入来款项目" v-model="queryParam.contractName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款用途" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="payment_charge_use"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="付款状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam.pack"
|
||||
placeholder="请选择付款状态"
|
||||
dictCode="yn"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="10" :lg="11" :md="12" :sm="24">
|
||||
<a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
<span class="query-group-split-cust"></span>
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="项目负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<select-principal placeholder="请选择项目负责人" v-model="queryParam.principalId"></select-principal>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="4" :lg="7" :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
|
||||
<a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- /查询区域-end-->
|
||||
|
||||
<!-- 操作按钮区域-->
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
|
||||
</div>
|
||||
<!-- 操作按钮区域-end-->
|
||||
|
||||
<!-- table表格区域-->
|
||||
<div>
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="table"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:scroll="{x: 1100}"
|
||||
@change="handleTableChange"
|
||||
class="j-table-force-nowrap main-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="openDetailModal(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||||
<a @click="goDetail(record.id)">详情</a>
|
||||
</span>
|
||||
|
||||
<template slot="footer" slot-scope="currentPageData">
|
||||
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="footTable"
|
||||
rowKey="id"
|
||||
:columns="columnsFooter"
|
||||
:dataSource="footerDataSource"
|
||||
:showHeader="false"
|
||||
:pagination="false"
|
||||
:scroll="{x: 1100}"
|
||||
class="j-table-force-nowrap footer-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="openDetailModal(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconImg from '@/assets/imgs/icon/icon_statistical_report.png'
|
||||
import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
|
||||
import { JeroListMixin } from '../../../mixins/JeroListMixin'
|
||||
import SelectPrincipal from '../../../components/company/SelectPrincipal'
|
||||
import JYearDate from '../../../components/jero/JYearDate'
|
||||
|
||||
export default {
|
||||
name: 'WorkingGroupPaymentStatisticsDetail',
|
||||
components: { PageHeaderTitle, SelectPrincipal, JYearDate },
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
IconImg,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 10 }
|
||||
},
|
||||
url: {
|
||||
list: ''
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
}, {
|
||||
title: '项目负责人',
|
||||
align: 'center',
|
||||
dataIndex: 'workGroup',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款单位',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'allMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'comeAllMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'moneyRate',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款用途',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'chargeUse_dictText',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{
|
||||
id: 1,
|
||||
workGroup: 'zx工作组',
|
||||
allMoney: '500',
|
||||
comeAllMoney: '600'
|
||||
}
|
||||
],
|
||||
// 总计表头，与主表表头一致
|
||||
columnsFooter: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'title',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
}, {
|
||||
title: '项目负责人',
|
||||
align: 'center',
|
||||
dataIndex: 'workGroup',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款单位',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'allMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'comeAllMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'moneyRate',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '来款用途',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'chargeUse_dictText',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
],
|
||||
// 总计数据
|
||||
footerDataSource: [
|
||||
{
|
||||
id: 1,
|
||||
title: '总计',
|
||||
allMoney: '500',
|
||||
comeAllMoney: '600'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setScroll()
|
||||
},
|
||||
methods: {
|
||||
// 同步表与footer滚动，保留底部滚动条
|
||||
setScroll() {
|
||||
//
|
||||
let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
|
||||
console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
|
||||
dom.addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
this.$refs.table.$el.querySelectorAll(
|
||||
'.ant-table-body'
|
||||
)[0].scrollLeft = dom.scrollLeft
|
||||
},
|
||||
true
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
// 去除底部表格边框
|
||||
.footer-table {
|
||||
/deep/ .ant-table-tbody > tr > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/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>
|
||||
+294
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header-title :img-for-icon="IconImg"></page-header-title>
|
||||
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域-start -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="工作组" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入工作组" v-model="queryParam.workGroup"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
||||
<a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.year"></j-year-date>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="10" :lg="11" :md="12" :sm="24">
|
||||
<a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
<span class="query-group-split-cust"></span>
|
||||
<a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xl="4" :lg="7" :md="8" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
|
||||
<a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!-- /查询区域-end-->
|
||||
|
||||
<!-- 操作按钮区域-->
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
|
||||
</div>
|
||||
<!-- 操作按钮区域-end-->
|
||||
|
||||
<!-- table表格区域-->
|
||||
<div>
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="table"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:scroll="{x: 1100}"
|
||||
@change="handleTableChange"
|
||||
class="j-table-force-nowrap main-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="openDetailModal(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<span slot="action" class="action-span-cell" slot-scope="text, record">
|
||||
<a @click="goDetail(record.id)">详情</a>
|
||||
</span>
|
||||
|
||||
<template slot="footer" slot-scope="currentPageData">
|
||||
|
||||
<a-table
|
||||
size="middle"
|
||||
ref="footTable"
|
||||
rowKey="id"
|
||||
:columns="columnsFooter"
|
||||
:dataSource="footerDataSource"
|
||||
:showHeader="false"
|
||||
:pagination="false"
|
||||
:scroll="{x: 1100}"
|
||||
class="j-table-force-nowrap footer-table">
|
||||
|
||||
<!-- 项目名称-->
|
||||
<template slot="projectName" slot-scope="text, record">
|
||||
<j-ellipsis :value="text" :length="18" class="primary-color"
|
||||
@click="openDetailModal(record)"></j-ellipsis>
|
||||
</template>
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconImg from '@/assets/imgs/icon/icon_statistical_report.png'
|
||||
import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
|
||||
import { JeroListMixin } from '../../../mixins/JeroListMixin'
|
||||
import JYearDate from '../../../components/jero/JYearDate'
|
||||
|
||||
export default {
|
||||
name: 'WorkingGroupPaymentStatisticsList',
|
||||
components: { PageHeaderTitle, JYearDate },
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
IconImg,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 10 }
|
||||
},
|
||||
url: {
|
||||
list: ''
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
}, {
|
||||
title: '工作组',
|
||||
align: 'center',
|
||||
dataIndex: 'workGroup',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收总金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'allMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收总金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'comeAllMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收完成率',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'moneyRate',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 160,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{
|
||||
id: 1,
|
||||
workGroup: 'zx工作组',
|
||||
allMoney: '500',
|
||||
comeAllMoney: '600'
|
||||
}
|
||||
],
|
||||
// 总计表头，与主表表头一致
|
||||
columnsFooter: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'title',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
}, {
|
||||
title: '工作组',
|
||||
align: 'center',
|
||||
dataIndex: 'workGroup',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '应收总金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'allMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收总金额',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'comeAllMoney',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '实收完成率',
|
||||
align: 'center',
|
||||
width: 160,
|
||||
dataIndex: 'moneyRate',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}, {
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 160
|
||||
}
|
||||
],
|
||||
// 总计数据
|
||||
footerDataSource: [
|
||||
{
|
||||
id: 1,
|
||||
title: '总计',
|
||||
allMoney: '500',
|
||||
comeAllMoney: '600'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setScroll()
|
||||
},
|
||||
methods: {
|
||||
goDetail(id) {
|
||||
console.log(id)
|
||||
this.$router.push({
|
||||
path: '/statisticalReport/workingGroupPaymentStatistics/WorkingGroupPaymentStatisticsDetail'
|
||||
})
|
||||
},
|
||||
// 同步表与footer滚动，保留底部滚动条
|
||||
setScroll() {
|
||||
//
|
||||
let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
|
||||
console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
|
||||
dom.addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
this.$refs.table.$el.querySelectorAll(
|
||||
'.ant-table-body'
|
||||
)[0].scrollLeft = dom.scrollLeft
|
||||
},
|
||||
true
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
// 去除底部表格边框
|
||||
.footer-table {
|
||||
/deep/ .ant-table-tbody > tr > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/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