294 lines
9.0 KiB
Vue
294 lines
9.0 KiB
Vue
<template>
|
||
<el-card style="margin-top: 20px; height: 100%">
|
||
<div class="p-2 flex flex-col cashierbox h-full">
|
||
<div class="tablebox">
|
||
<div style="margin-bottom: 20px">
|
||
<el-button @click="printPiaoju" type="primary">打印票据</el-button>
|
||
</div>
|
||
<el-table :data="tabledata" @selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column align="center" label="收费名称">
|
||
<template #default="scope">
|
||
<div>{{ scope.row.detailsName }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="收费项目">
|
||
<template #default="scope">
|
||
<div>{{ scope.row.chargeItemName }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="收费周期">
|
||
<template #default="scope">
|
||
<dict-tag :options="com_bill_charge_period" :value="scope.row.chargePeriod"></dict-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="单价">
|
||
<template #default="scope">
|
||
<div class="flex flex-items-center justify-center">
|
||
<div>{{ scope.row.fixedPrice ?? '--' }}</div>
|
||
<span v-show="Boolean(scope.row.unit)">/</span>
|
||
<dict-tag v-show="Boolean(scope.row.unit)" :options="com_charge_item_unit" :value="scope.row.unit"></dict-tag>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="缴费状态">
|
||
<template #default="scope">
|
||
<dict-tag :options="com_pay_status" :value="scope.row.payStatus"></dict-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="应缴金额">
|
||
<template #default="scope">
|
||
<div>{{ scope.row.amount }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||
</div>
|
||
</div>
|
||
<el-dialog :title="dialog_print.title" v-model="dialog_print.visible" width="1200px" append-to-body>
|
||
<template #header>
|
||
<div class="flex" style="justify-content: space-between; padding: 0 20px">
|
||
<div class="title">票据打印</div>
|
||
<el-button type="primary" :loading="isLoading" @click="confimPrint">打印</el-button>
|
||
<!-- <el-button type="primary" v-print="printOption">打印</el-button> -->
|
||
</div>
|
||
</template>
|
||
|
||
<div class="printBox" id="printBox-Bill">
|
||
<div class="title">{{ print_form.title }}</div>
|
||
<div class="nav gridbox">
|
||
<div>单据日期：{{ print_form.printDate }}</div>
|
||
<div>房号：{{ print_form.HouseName }}</div>
|
||
<div>产权人：{{ print_form.residentName }}</div>
|
||
<div>No.</div>
|
||
</div>
|
||
<div class="tablebox">
|
||
<table border class="printTable">
|
||
<thead>
|
||
<tr>
|
||
<th>收费项目</th>
|
||
<th>收费标准</th>
|
||
<th>账单时间</th>
|
||
<th>面积</th>
|
||
<th style="width: 80px">应收金额</th>
|
||
<th style="width: 80px">实收金额</th>
|
||
<th>收款方式</th>
|
||
<th style="width: 80px">备注</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in print_form.detailsList" :key="index">
|
||
<td>{{ item.chargeItemName }}</td>
|
||
<td>{{ item.billName }}</td>
|
||
<td>{{ item.detailsTime }}</td>
|
||
<td>{{ item.useCount }}</td>
|
||
<td style="width: 80px">{{ item.account }}</td>
|
||
<td style="width: 80px">{{ item.account }}</td>
|
||
<td>{{ item.payType }}</td>
|
||
<td style="width: 80px">{{ item.remark }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>合计</td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td style="width: 80px">{{ print_form.totalAccount }}</td>
|
||
<td style="width: 80px">{{ print_form.totalAccount }}</td>
|
||
<td style="width: 80px"></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p style="font-size: 10px">说明：本收据收款单位和收款具签章方为有效，本收据手写无效</p>
|
||
<div class="flex flex-items-center" style="font-size: 12px">
|
||
<div class="flex-1">交款人：</div>
|
||
<div class="flex-1 flex flex-items-center">
|
||
<span style="white-space: nowrap">收款人： </span>
|
||
<el-input v-model="inHomelyUse" v-if="!isPrint" placeholder="请输入收款人姓名" style="width: 150px"></el-input>
|
||
<span style="white-space: nowrap" v-else> {{ inHomelyUse }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import DictTag from '@/components/DictTag/index.vue';
|
||
import pagination from '@/components/Pagination/index.vue';
|
||
import { ref } from 'vue';
|
||
import { billlistType, billPrint, BillPrintType, billQuery } from '@/api/system/SdbCashier';
|
||
import { printTicketDiv } from '@/utils/print';
|
||
|
||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||
const { com_pay_status } = toRefs<any>(proxy?.useDict('com_pay_status'));
|
||
const { com_bill_charge_period } = toRefs<any>(proxy?.useDict('com_bill_charge_period'));
|
||
const { com_charge_item_unit } = toRefs<any>(proxy?.useDict('com_charge_item_unit'));
|
||
|
||
type querytype = {
|
||
residentId: string;
|
||
residentName: string;
|
||
houseName: string;
|
||
phone: string;
|
||
};
|
||
const props = defineProps({
|
||
query: {
|
||
type: Object as PropType<querytype>,
|
||
default: () => {
|
||
return {
|
||
'residentId': '',
|
||
'residentName': '',
|
||
'houseName': '',
|
||
'phone': ''
|
||
};
|
||
}
|
||
}
|
||
});
|
||
const ids = ref<Array<billlistType>>([]);
|
||
const single = ref(true);
|
||
const multiple = ref(true);
|
||
const total = ref(100);
|
||
const queryParams = ref({
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
});
|
||
const tabledata = ref<billlistType[]>([]);
|
||
// 支付状态 0未缴纳 1已缴纳 2缴纳失败
|
||
const getList = () => {
|
||
billQuery({
|
||
residentId: props.query.residentId,
|
||
'payStatus': '1'
|
||
}).then((res) => {
|
||
tabledata.value = res.rows;
|
||
total.value = res.total;
|
||
});
|
||
};
|
||
/** 多选框选中数据 */
|
||
const handleSelectionChange = (selection: billlistType[]) => {
|
||
ids.value = [];
|
||
ids.value = selection;
|
||
|
||
single.value = selection.length != 1;
|
||
multiple.value = !selection.length;
|
||
};
|
||
|
||
onMounted(() => {
|
||
getList();
|
||
});
|
||
|
||
const emit = defineEmits(['Back']);
|
||
|
||
// 打印票据
|
||
const isPrint = ref(false);
|
||
const dialog_print = reactive<DialogOption>({
|
||
visible: false,
|
||
title: '票据打印'
|
||
});
|
||
const inHomelyUse = ref('');
|
||
const print_form = ref<BillPrintType>({
|
||
'totalAccount': '',
|
||
'residentName': '',
|
||
'detailsList': [],
|
||
'printDate': '',
|
||
'HouseName': '',
|
||
'title': ''
|
||
});
|
||
function printPiaoju() {
|
||
if (ids.value.length <= 0) {
|
||
ElMessage.warning('请至少选择一条账单进行打印票据');
|
||
return;
|
||
}
|
||
isPrint.value = false;
|
||
inHomelyUse.value = '';
|
||
const query = {
|
||
'residentId': props.query.residentId,
|
||
'detailsIds': [...ids.value.map((item) => item.detailsId)]
|
||
};
|
||
billPrint(query).then((res) => {
|
||
print_form.value = res.data;
|
||
dialog_print.visible = true;
|
||
});
|
||
}
|
||
const isLoading = ref(false);
|
||
function confimPrint() {
|
||
isLoading.value = true;
|
||
isPrint.value = true;
|
||
setTimeout(() => {
|
||
printTicketDiv('printBox-Bill', '票据打印', () => {
|
||
isPrint.value = false;
|
||
isLoading.value = false;
|
||
});
|
||
}, 1000);
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.printBox {
|
||
color: rgba(0, 0, 0, 1);
|
||
padding-top: 5px;
|
||
.title {
|
||
font-weight: bold;
|
||
font-size: 1.2rem;
|
||
margin-bottom: 10px;
|
||
text-indent: 5em;
|
||
}
|
||
.nav {
|
||
font-size: 12px;
|
||
&.gridbox {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||
grid-gap: 10px;
|
||
grid-template-rows: 1fr;
|
||
}
|
||
&.flexbox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.tablebox {
|
||
font-size: 10px;
|
||
.printTable {
|
||
border-collapse: collapse;
|
||
border: 1px solid #000;
|
||
th,
|
||
td {
|
||
text-align: center;
|
||
min-width: 140px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cashierbox {
|
||
font-size: 0.8rem;
|
||
.el-button {
|
||
width: 100px;
|
||
height: 35px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.actionsbox {
|
||
margin-top: 20px;
|
||
}
|
||
.tablebox {
|
||
margin-top: 20px;
|
||
height: 100%;
|
||
.el-table {
|
||
height: calc(100% - 80px);
|
||
}
|
||
}
|
||
}
|
||
.payinfo {
|
||
color: rgba(0, 0, 0, 1);
|
||
margin-top: 20px;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 30px;
|
||
border-bottom: 1px solid #d2d2d2;
|
||
& > div {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
</style>
|