物业主开发
This commit is contained in:
Zy
@@ -1,74 +1,194 @@
|
||||
<template>
|
||||
<div class="p-2 flex flex-col cashierbox h-full">
|
||||
<div class="flex">
|
||||
<div>小区： 北境碧桂园小区</div>
|
||||
<div style="margin: 0 80px">小区： 北境碧桂园小区</div>
|
||||
<div>小区： 北境碧桂园小区</div>
|
||||
</div>
|
||||
<div class="tablebox">
|
||||
<el-table>
|
||||
<el-table-column align="center" label="序号" width="80">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="房屋/车位/车辆">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费项目">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费周期">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="单价">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="数量">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="应收金额">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="缴费状态">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-card style="margin-top: 20px; height: 100%">
|
||||
<div class="p-2 flex flex-col cashierbox h-full">
|
||||
<div class="tablebox">
|
||||
<el-table :data="tabledata">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column align="center" label="序号" width="80">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="房屋/车位/车辆">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.houseName">{{ scope.row.parkingName }}</div>
|
||||
<div v-else-if="scope.row.parkingName">{{ scope.row.parkingName }}</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">
|
||||
<div>{{ scope.row.startDate }} -- {{ scope.row.endDate }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="单价">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.fixedPrice }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="数量">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.formula }}</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.$index }}</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" />
|
||||
<el-table-column align="center" label="应缴金额">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.money }}</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>
|
||||
</div>
|
||||
|
||||
<!-- 添加或修改电 设备对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<div class="payinfo">
|
||||
<div>
|
||||
<span>缴费人：北境碧桂园小区-A栋1单元102-张姗</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>账单名称：2025年车位费、2025年上半年物业费 </span>
|
||||
</div>
|
||||
<div>
|
||||
<span>应收合计：￥1600.00 </span>
|
||||
</div>
|
||||
<div>
|
||||
<span>应缴合计：￥1600.00 </span>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="formRef" :model="from" label-width="100px">
|
||||
<el-form-item label="费用合计" prop="allCost">
|
||||
<el-input v-model="from.allCost">
|
||||
<template #suffix>
|
||||
<span>元</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴纳状态" prop="startTime">
|
||||
<el-radio-group v-model="from.deviceType">
|
||||
<el-radio v-for="dict in com_pay_status" :key="dict.value" :label="dict.label"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付方式" prop="endTime">
|
||||
<el-select v-model="from.deviceType" 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 { ref } from 'vue';
|
||||
import { billlistType, billQuery } from '@/api/system/SdbCashier';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_pay_method, com_pay_status } = toRefs<any>(proxy?.useDict('com_pay_method', 'com_pay_status'));
|
||||
|
||||
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<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(100);
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const tabledata = ref([]);
|
||||
const getList = () => {
|
||||
console.log('getList');
|
||||
billQuery({
|
||||
residentId: props.query.residentId,
|
||||
'payStatus': '1'
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
tabledata.value = res.rows;
|
||||
total.value = res.total;
|
||||
});
|
||||
};
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: billlistType[]) => {
|
||||
// TODO: 获取选中的id
|
||||
ids.value = selection.map((item) => item.residentId);
|
||||
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,
|
||||
sex: null,
|
||||
deviceType: null,
|
||||
remark: ''
|
||||
});
|
||||
|
||||
const openDiage = () => {
|
||||
from.value = {
|
||||
allCost: null,
|
||||
sex: null,
|
||||
deviceType: null,
|
||||
remark: ''
|
||||
};
|
||||
dialog.visible = true;
|
||||
};
|
||||
const closepay = () => {
|
||||
dialog.visible = false;
|
||||
dialog.title = '';
|
||||
};
|
||||
const submitForm = () => {
|
||||
buttonLoading.value = true;
|
||||
setTimeout(() => {
|
||||
buttonLoading.value = false;
|
||||
closepay();
|
||||
}, 1000);
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -92,4 +212,14 @@ const getList = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user