265 lines
8.3 KiB
Vue
265 lines
8.3 KiB
Vue
<template>
|
||
<el-card style="margin-top: 20px; height: 100%">
|
||
<div class="p-2 flex flex-col cashierbox h-full">
|
||
<div class="flex">
|
||
<div>小区：{{ villageinfo.villageName ?? '---' }}</div>
|
||
<div style="margin: 0 80px">住户姓名： {{ props.query.residentName }}</div>
|
||
<div>手机号： {{ props.query.phone }}</div>
|
||
</div>
|
||
<div class="actionsbox">
|
||
<el-button type="primary" @click="openDiage">收款</el-button>
|
||
<!-- <el-button>添加临时收费</el-button> -->
|
||
<!-- <el-button>预存</el-button> -->
|
||
<el-button @click="emit('Back')">返回</el-button>
|
||
</div>
|
||
<div class="tablebox">
|
||
<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 v-if="scope.row.chargeTypeName === '车位费'">{{ scope.row.parkingName }}</div>
|
||
<div v-else-if="scope.row.chargeTypeName === chargeTypeName.Electricity || scope.row.chargeTypeName === chargeTypeName.Water">
|
||
{{ scope.row.houseName }}
|
||
</div>
|
||
<div v-else>--</div> -->
|
||
<div>{{ scope.row.detailsName }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="收费项目" width="250">
|
||
<template #default="scope">
|
||
<div>{{ scope.row.chargeItemName }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="收费周期" width="300">
|
||
<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="单价" width="150">
|
||
<template #default="scope">
|
||
<div>{{ scope.row.fixedPrice }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="缴费状态" width="120">
|
||
<template #default="scope">
|
||
<dict-tag v-if="!inglelist.includes(scope.row.chargeItemName)" :options="com_pay_status" :value="scope.row.payStatus"></dict-tag>
|
||
<div v-else>--</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="应缴金额" width="120">
|
||
<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.title" v-model="dialog.visible" width="500px" append-to-body>
|
||
<div class="payinfo">
|
||
<div>
|
||
<span>缴费人：{{ villageinfo.villageName ?? '---' }}-{{ props.query.houseName }}</span>
|
||
</div>
|
||
<div class="flex">
|
||
<span>收费名称： </span>
|
||
<div>
|
||
<div v-for="(item, index) in from.billResidentId" :key="index" style="text-wrap: wrap; margin-bottom: 5px">
|
||
<span style="text-decoration: underline">{{ item.detailsName }} ;</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<span>应收合计：￥{{ from.allCost }}</span>
|
||
</div>
|
||
<div>
|
||
<span>应缴合计：￥{{ from.allCost }}</span>
|
||
</div>
|
||
</div>
|
||
<el-form ref="formRef" :model="from" label-width="100px">
|
||
<el-form-item label="费用合计" prop="allCost">
|
||
<el-input v-model="from.allCost" disabled>
|
||
<template #suffix>
|
||
<span>元</span>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="缴纳状态" prop="payStatus">
|
||
<el-radio-group v-model="from.payStatus">
|
||
<el-radio v-for="dict in com_pay_status" :key="dict.value" :label="dict.label" :value="dict.value"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="支付方式" prop="payType">
|
||
<el-select v-model="from.payType" placeholder="请选择">
|
||
<el-option v-for="dict in com_pay_method" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input type="textarea" :rows="5" v-model="from.remark"></el-input>
|
||
</el-form-item>
|
||
<div class="flex justify-end">
|
||
<el-button @click="closepay">取消</el-button>
|
||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
|
||
</div>
|
||
</el-form>
|
||
</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, billQuery, billEdit } from '@/api/system/SdbCashier';
|
||
import { moneyAdd } from '@/utils/money';
|
||
|
||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||
const { com_pay_method, com_pay_status } = toRefs<any>(proxy?.useDict('com_pay_method', 'com_pay_status'));
|
||
const { com_bill_charge_period } = toRefs<any>(proxy?.useDict('com_bill_charge_period'));
|
||
const villageinfo = JSON.parse(localStorage.getItem('villageInfo') || '{}');
|
||
|
||
// 隐藏收费金额的 类型列表
|
||
const inglelist = ['电费', '水费'];
|
||
enum chargeTypeName {
|
||
'Water' = '水费',
|
||
'Electricity' = '电费'
|
||
}
|
||
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([]);
|
||
const getList = () => {
|
||
billQuery({
|
||
residentId: props.query.residentId,
|
||
payStatus: '0'
|
||
}).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 formRef = ref();
|
||
const dialog = reactive<DialogOption>({
|
||
visible: false,
|
||
title: '收款'
|
||
});
|
||
const buttonLoading = ref(false);
|
||
|
||
const from = ref({
|
||
allCost: null, // 金额
|
||
billResidentId: [], // 账单id
|
||
payStatus: '0', // 0:未缴 1:已缴
|
||
payType: '0', // 0:微信 1:支付宝 2 线下
|
||
remark: ''
|
||
});
|
||
|
||
const openDiage = () => {
|
||
if (!ids.value.length) {
|
||
ElMessage.warning('请至少选择一条账单进行收款');
|
||
return;
|
||
}
|
||
|
||
from.value = {
|
||
allCost: 0,
|
||
payStatus: '0',
|
||
billResidentId: [],
|
||
payType: '0',
|
||
remark: ''
|
||
};
|
||
ids.value.forEach((item) => {
|
||
from.value.billResidentId.push(item);
|
||
from.value.allCost = moneyAdd(from.value.allCost, item.amount);
|
||
});
|
||
dialog.visible = true;
|
||
};
|
||
const closepay = () => {
|
||
dialog.visible = false;
|
||
dialog.title = '';
|
||
};
|
||
const submitForm = () => {
|
||
buttonLoading.value = true;
|
||
const obj = {
|
||
'detailsId': from.value.billResidentId.map((item) => item.detailsId),
|
||
'payType': from.value.payType,
|
||
'payStatus': from.value.payStatus
|
||
};
|
||
billEdit(obj).then(() => {
|
||
ElMessage.success('缴费成功');
|
||
buttonLoading.value = false;
|
||
getList();
|
||
closepay();
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.cashierbox {
|
||
font-size: 16px;
|
||
.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>
|