realty/virgo.wzfrontend/console/src/views/work/bill/contract/client.vue

<template>
	<div class="hui-flex hui-content">
		<div class="hui-flex">
			<div class="hui-content-title">
				<div class="hui-title-item active">个人付款账单</div>
			</div>
			<div class="hui-flex-box hui-flex hui-table">
				<list-filter ref="billContract" type="billContract" @filter="filterInit"></list-filter>
				<div class="hui-flex-box">
					<el-table :data="tableData" row-key="id" border height="100%">
						<el-table-column label="序号" width="50">
							<template slot-scope="scope">
								<div style="text-align: center;">{{scope.$index + 1}}</div>
							</template>
						</el-table-column>
						<el-table-column label="合同编码" prop="contractCode"></el-table-column>
						<el-table-column label="账单期数" prop="code" width="100">
							<template slot-scope="scope">
								<span>{{'第' + scope.row.phase + '期'}}</span>
							</template>
						</el-table-column>
						<el-table-column label="账单日期" prop="code" width="200">
							<template slot-scope="scope">
								<span>{{scope.row.startDate}}至{{scope.row.endDate}}</span>
							</template>
						</el-table-column>
						<el-table-column label="金额">
							<template slot-scope="scope">
								<span>{{scope.row.amount + '元'}}</span>
							</template>
						</el-table-column>
						<el-table-column label="收款方" prop="organizationName"></el-table-column>
						<el-table-column label="付款方">
							<template slot-scope="scope">
								<span> {{scope.row.payMerchantName || scope.row.payClientName}}</span>
							</template>
						</el-table-column>
						<el-table-column label="状态" width="80">
							<template slot-scope="scope">
								<div class="hui-table-tag">
									<div class="hui-tag hui-tag-info" v-if="!scope.row.status">待付款</div>
									<div class="hui-tag hui-tag-warning" v-else-if="scope.row.status === 1">付款中</div>
									<div class="hui-tag hui-tag-success" v-else-if="scope.row.status === 2">已付款</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="80">
							<template slot-scope="scope">
								<div class="hui-table-operation">
									<span class="table-operation" @click="detailItem(scope.row)">
										详情
									</span>
								</div>
							</template>
						</el-table-column>
						<template slot="empty">
							<empty description="暂无数据"></empty>
						</template>
					</el-table>
				</div>
				<div class="hui-content-pagination">
					<el-pagination :page-size="pageSize" :pager-count="9" layout="prev, pager, next" :total="totalCount"
						@current-change="currentChange">
					</el-pagination>
				</div>
			</div>
		</div>
		<el-drawer title="账单详情" :visible.sync="drawer" :size="400" :append-to-body="true">
			<detail v-if="drawer" :detailId="detailId" @reload="init" :showType="2"></detail>
		</el-drawer>
	</div>
</template>

<script>
	import detail from '@/components/work/bill/contract/detail'
	import listFilter from '@/components/common/listFilter'
	import {
		bindProjectDetail
	} from '@/httpApi/organization'
	import {
		getPaymentListByPage
	} from '@/httpApi/contract'
	export default {
		data() {
			return {
				tableData: [],
				currPage: 1,
				pageSize: 10,
				totalCount: 0,
				detailId: '',
				filterOption: {},
				drawer: false,
				clientId: ''
			}
		},
		created() {
			bindProjectDetail({
				userId: this.$store.getters.user.userId,
				projectId: this.$store.getters.project.id,
				identityId: 1
			}).then(res => {
				if (res.state) {
					if (res.data.length == 0) return;
					this.clientId = res.data[0].clientId;
					this.init();
				}
			})
		},
		methods: {
			init() {
				let postData = {
					currPage: this.currPage,
					pageSize: this.pageSize,
					projectId: this.$store.getters.project.id,
					payClientId: this.clientId
				}
				postData = Object.assign(postData, this.filterOption);
				getPaymentListByPage(postData).then(res => {
					if (res.state) {
						this.tableData = res.data.dataList;
						this.totalCount = res.data.totalCount;
					}
				})
			},
			filterInit(option) {
				this.filterOption = option;
				this.currPage = 1;
				this.init();
			},
			currentChange(currPage) {
				this.currPage = currPage;
				this.init();
			},
			detailItem(item) {
				this.detailId = item.id;
				this.drawer = true;
			},
			callback(type) {
				if (type === 'init') this.init();
				this.type = 'list';
			}
		},
		components: {
			detail,
			listFilter
		},
	}
</script>

<style>
</style>