同步6/16
This commit is contained in:
Zy
@@ -19,17 +19,26 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="计算公式" prop="formula">
|
||||
<el-select v-model="form.formula">
|
||||
<el-select
|
||||
@change="
|
||||
(val) => {
|
||||
if (val === '2') {
|
||||
form.unit = null;
|
||||
}
|
||||
}
|
||||
"
|
||||
v-model="form.formula"
|
||||
>
|
||||
<el-option v-for="(item, index) in com_charge_item_formula" :key="index" :value="item.value" :label="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="计量单位" prop="unit">
|
||||
<el-form-item label="计量单位" prop="unit" v-if="form.formula !== '2'">
|
||||
<el-select v-model="form.unit">
|
||||
<el-option v-for="(item, index) in com_charge_item_unit" :key="index" :value="item.value" :label="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="费用单价" prop="fixedPrice">
|
||||
<el-input v-model.trim="form.fixedPrice" placeholder="请输入费用单价" />
|
||||
<el-input v-model.trim="form.fixedPrice" :placeholder="placeHolderFun(form.typeId)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计算精度" prop="accuracy">
|
||||
<el-select v-model="form.accuracy">
|
||||
@@ -41,16 +50,15 @@
|
||||
<el-option v-for="(item, index) in com_charge_item_carry_method" :key="index" :value="item.value" :label="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="启用/停用" prop="status">
|
||||
<!-- <el-form-item label="启用/停用" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio value="0" label="启用"></el-radio>
|
||||
<el-radio value="1" label="停用"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" :rows="5" v-model.trim="form.remark" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="margin-top: 30px">
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
<el-button @click="cancelForm">返回</el-button>
|
||||
@@ -119,6 +127,9 @@ if (route.query.id) {
|
||||
// !== 提交 =============================================================================
|
||||
// 提交
|
||||
const submitForm = () => {
|
||||
if (form.value.formula === '2') {
|
||||
form.value.unit = null;
|
||||
}
|
||||
formRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (userid.value) {
|
||||
@@ -139,6 +150,12 @@ const submitForm = () => {
|
||||
const cancelForm = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
// 车位费 物业费
|
||||
const typeNamelist = ref(['2049026520314445826']);
|
||||
function placeHolderFun(typeId: string) {
|
||||
return typeNamelist.value.includes(typeId) ? '请输入每日费用单价' : '请输入费用单价';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -36,38 +36,39 @@
|
||||
<el-table v-loading="loading" border :data="chargeItemList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="项目名称" align="center" prop="itemName" />
|
||||
<el-table-column label="计费方式" align="center" prop="billingType">
|
||||
<el-table-column label="计费方式" width="100" align="center" prop="billingType">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="com_charge_item_method" :value="scope.row.billingType"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="计算公式" align="center" prop="formula">
|
||||
<el-table-column label="计算公式" width="100" align="center" prop="formula">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="com_charge_item_formula" :value="scope.row.formula"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单价" align="center" prop="fixedPrice">
|
||||
<el-table-column label="单价" width="100" align="center" prop="fixedPrice">
|
||||
<template #default="scope">
|
||||
{{ scope.row.price }}
|
||||
<dict-tag :options="com_charge_item_unit" :value="scope.row.fixedPrice"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="计量单位" align="center" prop="unit">
|
||||
<el-table-column label="计量单位" width="100" align="center" prop="unit">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="com_charge_item_unit" :value="scope.row.unit"></dict-tag>
|
||||
<dict-tag v-if="scope.row.unit" :options="com_charge_item_unit" :value="scope.row.unit"></dict-tag>
|
||||
<span v-else>---</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="计算精度" align="center" prop="accuracy">
|
||||
<el-table-column label="计算精度" width="120" align="center" prop="accuracy">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="com_charge_item_precision" :value="scope.row.accuracy"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="进位方式" align="center" prop="carryMethod">
|
||||
<el-table-column label="进位方式" width="100" align="center" prop="carryMethod">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="com_charge_item_carry_method" :value="scope.row.carryMethod"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<el-table-column label="状态" width="100" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
@change="(val: string) => handleSwitch(val, scope.row)"
|
||||
@@ -77,6 +78,7 @@
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" show-overflow-tooltip align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['chargeItem:chargeItem:edit']">编辑</el-button>
|
||||
@@ -138,10 +140,14 @@ const { queryParams, form, rules } = toRefs(data);
|
||||
/** 查询收费项目管理列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listChargeItem(queryParams.value);
|
||||
chargeItemList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
listChargeItem(queryParams.value)
|
||||
.then((res) => {
|
||||
chargeItemList.value = res.rows;
|
||||
total.value = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
@@ -185,10 +191,11 @@ const handleAdd = () => {
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: ChargeItemVO) => {
|
||||
const _ids = row?.id || ids.value[0];
|
||||
router.push({
|
||||
path: '/sdb/editchargeItem',
|
||||
query: {
|
||||
id: row.id
|
||||
id: _ids
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@@ -214,23 +214,12 @@ const submitForm = () => {
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: ChargeTypeVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除收费类型编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await proxy?.$modal.confirm('是否确认删除该收费类型？').finally(() => (loading.value = false));
|
||||
await delChargeType(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download(
|
||||
'chargeType/chargeType/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`chargeType_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<el-input v-model.trim="form.billName" placeholder="请输入账单名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收费项目" prop="chargeItemId">
|
||||
<el-select v-model="form.chargeItemId" @change="handleChange">
|
||||
<el-select v-model="form.chargeItemId" @change="(val: string) => handleChange(val, true)">
|
||||
<el-option
|
||||
:disabled="item.status === '1'"
|
||||
v-for="(item, index) in chargeitemlist"
|
||||
@@ -21,20 +21,23 @@
|
||||
</el-form-item>
|
||||
<!-- 水费，电费， 收费范围为 房屋 -->
|
||||
<el-form-item label="收费范围" prop="chargeScope" v-if="typeNamelist.includes(typeName)">
|
||||
<div class="flex flex-row flex-items-end">
|
||||
<el-radio-group v-model="form.chargeScope">
|
||||
<div class="flex flex-col flex-items-end">
|
||||
<el-radio
|
||||
style="margin-right: 0"
|
||||
v-for="(item, index) in com_bill_charge_scope_house"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-radio>
|
||||
<div>
|
||||
<div class="flex flex-row flex-items-end">
|
||||
<el-radio-group v-model="form.chargeScope">
|
||||
<div class="flex flex-col flex-items-end">
|
||||
<el-radio
|
||||
:disabled="!form.chargeItemId"
|
||||
style="margin-right: 0"
|
||||
v-for="(item, index) in com_bill_charge_scope_house"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></el-radio>
|
||||
</div>
|
||||
</el-radio-group>
|
||||
<div style="height: 32px">
|
||||
<el-button @click="OpenUseTablesfun('house')" link type="primary" v-if="form.chargeScope === '1'" class="ml-10px">请选择</el-button>
|
||||
</div>
|
||||
</el-radio-group>
|
||||
<div style="height: 32px">
|
||||
<el-button @click="OpenUseTablesfun('house')" link type="primary" v-if="form.chargeScope === '1'" class="ml-10px">请选择</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@@ -45,6 +48,7 @@
|
||||
<div class="flex flex-col flex-items-end">
|
||||
<el-radio
|
||||
style="margin-right: 0"
|
||||
:disabled="!form.chargeItemId"
|
||||
v-for="(item, index) in com_questionnaire_scope"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
@@ -65,7 +69,11 @@
|
||||
</el-form-item>
|
||||
<!-- 业主选择 -->
|
||||
<el-form-item v-if="form.chargeScope === '1' && !typeNamelist.includes(typeName)">
|
||||
<div class="residentBox">
|
||||
<!-- 业主选择 车位费用 -->
|
||||
<div class="residentBox" v-if="typeName === HandleTypeId.Resident.Parking">
|
||||
<CarUser returnvalue="parkingId" ref="ParkinguserRef" :isMultiple="true" @change="handleCheckPaking"></CarUser>
|
||||
</div>
|
||||
<div class="residentBox" v-else>
|
||||
<UserHolder returnvalue="residentId" ref="userRef" :isMultiple="true" @change="handleCheckUser"></UserHolder>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@@ -74,18 +82,32 @@
|
||||
<el-option v-for="(item, index) in com_bill_charge_period" :key="index" :value="item.value" :label="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="起止日期" prop="price">
|
||||
<el-form-item label="起止日期" prop="startDate">
|
||||
<el-date-picker
|
||||
v-model="StartEndDate"
|
||||
unlink-panels
|
||||
@update:model-value="handleDate"
|
||||
:value-format="datepicker[form.chargePeriod].format"
|
||||
:format="datepicker[form.chargePeriod].format"
|
||||
:type="datepicker[form.chargePeriod].type"
|
||||
@clear="handleClear"
|
||||
:value-format="datepicker[2].format"
|
||||
:format="datepicker[2].format"
|
||||
:type="datepicker[2].type"
|
||||
range-separator="到"
|
||||
start-placeholder="开始"
|
||||
end-placeholder="结束"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="结束日期" prop="price">
|
||||
<el-date-picker
|
||||
v-model="StartEndDate"
|
||||
@update:model-value="handleDate"
|
||||
:value-format="datepicker[2].format"
|
||||
:format="datepicker[2].format"
|
||||
:type="datepicker[2].type"
|
||||
range-separator="到"
|
||||
start-placeholder="开始"
|
||||
end-placeholder="结束"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" :rows="5" v-model.trim="form.remark" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
@@ -102,14 +124,16 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
import House from '@/components/Holder/house.vue';
|
||||
import UserHolder from '@/components/Holder/user.vue';
|
||||
import CarUser from '@/components/Holder/CarUser.vue';
|
||||
|
||||
import PageHeader from '@/components/Pageheader/index.vue';
|
||||
import { listChargeItem } from '@/api/system/SdbChargeItem';
|
||||
import { getBill, updateBill, addBill, BillHouse, listBillHouse, queryResidentList_holder } from '@/api/system/SdbBill';
|
||||
import type { DatePickerType } from 'element-plus';
|
||||
import { formatDate2 } from '@/utils';
|
||||
import { Delete } from '@element-plus/icons-vue';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_questionnaire_scope } = toRefs<any>(proxy?.useDict('com_questionnaire_scope'));
|
||||
@@ -137,7 +161,8 @@ const form = ref({
|
||||
'chargePeriod': '2', // 费用周期
|
||||
houseIds: [], // 部分房屋
|
||||
residentIds: [], // 部分业主
|
||||
charegeTypeId: '', // typeid
|
||||
parkingIds: [],
|
||||
chargeTypeId: '', // typeid
|
||||
'startDate': '', // 开始
|
||||
'endDate': '', // 结束
|
||||
'remark': ''
|
||||
@@ -154,10 +179,18 @@ const userid = ref(null);
|
||||
// 开始结束日期
|
||||
const StartEndDate = ref([]);
|
||||
function handleDate(val: string[]) {
|
||||
form.value.startDate = formatDate2(val[0]);
|
||||
form.value.endDate = formatDate2(val[1]);
|
||||
if (val === null || val.length === 0) {
|
||||
form.value.startDate = '';
|
||||
form.value.endDate = '';
|
||||
} else {
|
||||
form.value.startDate = val[0] + ' 00:00:00';
|
||||
form.value.endDate = val[1] + ' 23:59:59';
|
||||
}
|
||||
}
|
||||
function handleClear() {
|
||||
form.value.startDate = '';
|
||||
form.value.endDate = '';
|
||||
}
|
||||
|
||||
// 收费类型
|
||||
const chargeitemlist = ref([]);
|
||||
|
||||
@@ -166,62 +199,74 @@ const chargeitemlist = ref([]);
|
||||
// // 住户列表
|
||||
// const userlist = ref([]);
|
||||
async function init() {
|
||||
listChargeItem().then((res) => {
|
||||
listChargeItem({}).then((res) => {
|
||||
chargeitemlist.value = res.rows;
|
||||
|
||||
// const res = await listBillHouse({ pageNum: 1, pageSize: 999999 });
|
||||
// houselist.value = res.rows;
|
||||
// const res2 = await queryResidentList_holder({ pageNum: 1, pageSize: 999999 });
|
||||
// userlist.value = res2.rows;
|
||||
|
||||
if (route.query.id) {
|
||||
userid.value = route.query.id;
|
||||
getBill(userid.value).then((res) => {
|
||||
if (!res.data) return;
|
||||
form.value = {
|
||||
...form.value,
|
||||
...res.data
|
||||
};
|
||||
// TODO 没有住户参数
|
||||
form.value.houseIds = res.data.houseIds || [];
|
||||
form.value.residentIds = res.data.residentIds || [];
|
||||
form.value.parkingIds = res.data.parkingIds || [];
|
||||
form.value.startDate = formatDate2(form.value.startDate);
|
||||
form.value.endDate = formatDate2(form.value.endDate);
|
||||
StartEndDate.value = [form.value.startDate, form.value.endDate];
|
||||
// TODO houseid 有默认值， 需要处理
|
||||
// TODO residentids 添加，
|
||||
checkoutHouses.value = [];
|
||||
checkoutUser.value = [];
|
||||
checkoutParking.value = [];
|
||||
checkoutHouses.value = form.value.houseIds.filter((item) => item);
|
||||
checkoutUser.value = form.value.residentIds.filter((item) => item);
|
||||
checkoutParking.value = form.value.parkingIds.filter((item) => item);
|
||||
handleChange(form.value.chargeItemId);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// const res = await listBillHouse({ pageNum: 1, pageSize: 999999 });
|
||||
// houselist.value = res.rows;
|
||||
// const res2 = await queryResidentList_holder({ pageNum: 1, pageSize: 999999 });
|
||||
// userlist.value = res2.rows;
|
||||
|
||||
if (route.query.id) {
|
||||
userid.value = route.query.id;
|
||||
getBill(userid.value).then((res) => {
|
||||
if (!res.data) return;
|
||||
form.value = {
|
||||
...form.value,
|
||||
...res.data
|
||||
};
|
||||
// TODO 没有住户参数
|
||||
form.value.houseIds = res.data.houseIds || [];
|
||||
form.value.residentIds = res.data.residentIds || [];
|
||||
form.value.startDate = formatDate2(form.value.startDate);
|
||||
form.value.endDate = formatDate2(form.value.endDate);
|
||||
StartEndDate.value = [form.value.startDate, form.value.endDate];
|
||||
// TODO houseid 有默认值， 需要处理
|
||||
// TODO residentids 添加，
|
||||
checkoutHouses.value = form.value.houseIds.filter((item) => item);
|
||||
handleChange(form.value.chargeItemId);
|
||||
});
|
||||
}
|
||||
}
|
||||
init();
|
||||
|
||||
const typeNamelist = ref(['2049026484272791553', '2049026503017136129']);
|
||||
const HandleTypeId = {
|
||||
/** 显示房屋 */
|
||||
'House': {
|
||||
/** 水费 */
|
||||
'Water': '2049026484272791553',
|
||||
/** 电费 */
|
||||
'Electricity': '2049026503017136129'
|
||||
},
|
||||
/** 显示业主 */
|
||||
'Resident': {
|
||||
/** 车位费 */
|
||||
'Parking': '2049026574236418050'
|
||||
}
|
||||
};
|
||||
// 符合类型： 显示房屋，选择房屋
|
||||
const typeNamelist = ref([HandleTypeId.House.Water, HandleTypeId.House.Electricity]);
|
||||
const typeName = ref('');
|
||||
// 获取收费类型id
|
||||
function handleChange(val: string) {
|
||||
function handleChange(val: string, callback: boolean = false) {
|
||||
const find = chargeitemlist.value.find((item) => item.id === val);
|
||||
if (find) {
|
||||
form.value.charegeTypeId = find.typeId;
|
||||
form.value.chargeTypeId = find.typeId;
|
||||
typeName.value = find.typeId;
|
||||
handleClearCheckout();
|
||||
if (callback) {
|
||||
handleClearCheckout();
|
||||
}
|
||||
}
|
||||
}
|
||||
// !== 业主 =============================================================================
|
||||
|
||||
// 打开
|
||||
const HolderRef = ref<InstanceType<typeof House>>();
|
||||
const userRef = ref<InstanceType<typeof UserHolder>>();
|
||||
function OpenUseTablesfun(val: string) {
|
||||
console.log(val);
|
||||
if (val === 'house') {
|
||||
HolderRef.value.open(checkoutHouses.value);
|
||||
} else if (val === 'user') {
|
||||
userRef.value.open(checkoutUser.value);
|
||||
}
|
||||
}
|
||||
// 多选
|
||||
const checkoutHouses = ref<string[]>([]);
|
||||
function handleSelect(val: string[]) {
|
||||
@@ -233,9 +278,15 @@ const checkoutUser = ref([]);
|
||||
/** 添加 业主 */
|
||||
function handleCheckUser(val: string[]) {
|
||||
checkoutUser.value = val;
|
||||
console.log(val);
|
||||
form.value.residentIds = val;
|
||||
}
|
||||
const checkoutParking = ref([]);
|
||||
/** 添加 车位业主 */
|
||||
function handleCheckPaking(val: string[]) {
|
||||
checkoutParking.value = val;
|
||||
console.log(val);
|
||||
form.value.parkingIds = val;
|
||||
}
|
||||
|
||||
/** 清空 */
|
||||
function handleClearCheckout() {
|
||||
@@ -244,10 +295,27 @@ function handleClearCheckout() {
|
||||
form.value.residentIds = [];
|
||||
form.value.houseIds = [];
|
||||
}
|
||||
|
||||
// 打开
|
||||
const HolderRef = ref<InstanceType<typeof House>>();
|
||||
const userRef = ref<InstanceType<typeof UserHolder>>();
|
||||
const ParkinguserRef = ref<InstanceType<typeof CarUser>>();
|
||||
function OpenUseTablesfun(val: string) {
|
||||
if (val === 'house') {
|
||||
HolderRef.value.open(checkoutHouses.value);
|
||||
} else if (val === 'user') {
|
||||
if (typeName.value === HandleTypeId.Resident.Parking) {
|
||||
ParkinguserRef.value.open(checkoutParking.value);
|
||||
} else {
|
||||
userRef.value.open(checkoutUser.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
// !== 业主 =============================================================================
|
||||
|
||||
// !== 提交 =============================================================================
|
||||
const submitForm = () => {
|
||||
console.log(form.value);
|
||||
formRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (userid.value) {
|
||||
|
||||
@@ -10,12 +10,7 @@
|
||||
<el-option v-for="(item, index) in chargeItems" :key="index" :value="item.id" :label="item.itemName"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="精确查询" prop="type">
|
||||
<el-select style="width: 150px; margin-right: 10px" v-model="queryParams.type">
|
||||
<el-option v-for="(item, index) in com_bill_search_filter" :key="index" :value="item.value" :label="item.label"></el-option>
|
||||
</el-select>
|
||||
<el-input v-model="queryParams.billCode" placeholder="请输入" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">搜索</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
@@ -27,17 +22,6 @@
|
||||
<el-card class="flex-1" shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['bill:bill:add']">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['bill:bill:edit']">编辑</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:bill:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col> -->
|
||||
<right-toolbar :show-add="checkPermi(['bill:bill:add'])" :show-edit="false" :show-delete="false" @update:add="handleAdd"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
@@ -57,11 +41,6 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="收费项目" align="center" prop="chargeItemName" />
|
||||
<!-- <el-table-column label="收费周期" align="center" prop="chargePeriod" width="80">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="com_bill_charge_period" :value="scope.row.chargePeriod"></dict-tag>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="起止时间" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.startDate, '{y}/{m}/{d}') }}</span> -
|
||||
@@ -70,23 +49,20 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="单价" align="center" width="180">
|
||||
<template #default="scope">
|
||||
<div class="flex justify-center">
|
||||
<div class="flex justify-center" v-if="scope.row.unit">
|
||||
<span>{{ scope.row.fixedPrice }}</span> /
|
||||
<dict-tag :options="com_charge_item_unit" :value="scope.row.unit"></dict-tag>
|
||||
</div>
|
||||
<span v-else>---</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="数量" align="center" prop="chargePeriod" />
|
||||
<el-table-column label="费用合计" align="center" prop="chargePeriod" /> -->
|
||||
<el-table-column label="操作" width="120" align="center" fixed="right" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['bill:bill:edit']">编辑</el-button>
|
||||
<el-button link type="primary" @click="handleMain(scope.row)" v-hasPermi="['bill:bill:query']">详情</el-button>
|
||||
<!-- <el-button link type="primary" @click="handleDelete(scope.row)" v-hasPermi="['system:bill:remove']">删除</el-button> -->
|
||||
</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-card>
|
||||
</div>
|
||||
@@ -99,14 +75,11 @@ import { listChargeItem } from '@/api/system/SdbChargeItem';
|
||||
import { checkPermi } from '@/utils/permission';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_bill_search_filter } = toRefs<any>(proxy?.useDict('com_bill_search_filter'));
|
||||
const { com_questionnaire_scope } = toRefs<any>(proxy?.useDict('com_questionnaire_scope'));
|
||||
// const { com_bill_charge_period } = toRefs<any>(proxy?.useDict('com_bill_charge_period'));
|
||||
const { com_bill_charge_scope_house } = toRefs<any>(proxy?.useDict('com_bill_charge_scope_house'));
|
||||
const { com_charge_item_unit } = toRefs<any>(proxy?.useDict('com_charge_item_unit'));
|
||||
|
||||
const billList = ref<BillVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
@@ -115,12 +88,6 @@ const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const billFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const ShowHouselist = ['2049026484272791553', '2049026503017136129'];
|
||||
|
||||
@@ -143,8 +110,6 @@ const data = reactive<PageData<BillForm, BillQuery>>({
|
||||
pageSize: 20,
|
||||
chargeItemId: '',
|
||||
billCode: ''
|
||||
// type: '',
|
||||
// value: ''
|
||||
}
|
||||
});
|
||||
|
||||
@@ -152,7 +117,7 @@ const { queryParams, form } = toRefs(data);
|
||||
|
||||
const chargeItems = ref([]);
|
||||
function init() {
|
||||
listChargeItem().then((res) => {
|
||||
listChargeItem({}).then((res) => {
|
||||
chargeItems.value = res.rows;
|
||||
});
|
||||
}
|
||||
@@ -217,14 +182,6 @@ function handleMain(row) {
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: BillVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除账单管理编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delBill(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
|
||||
@@ -8,26 +8,24 @@
|
||||
<el-form-item label="账单名称" prop="billName">
|
||||
<el-input disabled v-model.trim="form.billName" placeholder="请输入账单名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="收费项目" prop="chargeItemId">
|
||||
<el-select disabled v-model="form.chargeItemId" @change="handleChange">
|
||||
<el-option v-for="(item, index) in chargeitemlist" :key="index" :value="item.id" :label="item.itemName"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="收费范围" prop="chargeScope">
|
||||
|
||||
<el-form-item label="收费范围" prop="chargeScope" v-if="itemTypeincludes">
|
||||
<el-radio-group disabled v-model="form.chargeScope">
|
||||
<el-radio v-for="(item, index) in com_questionnaire_scope" :key="index" :value="item.value" :label="item.label"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.chargeScope === '1'">
|
||||
<div class="residentBox">
|
||||
<ul class="checkoutSideUsesbox">
|
||||
<li v-for="(item, index) in checkoutUses" :key="index">
|
||||
<span>{{ item.buildingName }} </span> / <span>{{ item.unitNo }}单元 </span> / <span>{{ item.floorNo }}楼 </span> /
|
||||
<span>{{ item.houseNo }}室</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<el-form-item label="收费范围" prop="chargeScope" v-else>
|
||||
<el-radio-group disabled v-model="form.chargeScope">
|
||||
<el-radio v-for="(item, index) in com_bill_charge_scope_house" :key="index" :value="item.value" :label="item.label"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="费用周期" prop="chargePeriod">
|
||||
<el-select disabled v-model="form.chargePeriod">
|
||||
<el-option v-for="(item, index) in com_bill_charge_period" :key="index" :value="item.value" :label="item.label"></el-option>
|
||||
@@ -71,6 +69,7 @@ import { Delete } from '@element-plus/icons-vue';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_questionnaire_scope } = toRefs<any>(proxy?.useDict('com_questionnaire_scope'));
|
||||
const { com_bill_charge_scope_house } = toRefs<any>(proxy?.useDict('com_bill_charge_scope_house'));
|
||||
const { com_bill_charge_period } = toRefs<any>(proxy?.useDict('com_bill_charge_period'));
|
||||
|
||||
type PickerConfig = {
|
||||
@@ -114,38 +113,47 @@ function handleDate(val: string[]) {
|
||||
form.value.endDate = formatDate2(val[1]);
|
||||
}
|
||||
const chargeitemlist = ref([]);
|
||||
// 电费 水费
|
||||
const typeNamelist = ref(['2049026484272791553', '2049026503017136129']);
|
||||
|
||||
const itemTypeincludes = computed(() => {
|
||||
return typeNamelist.value.includes(form.value.chargeItemId);
|
||||
});
|
||||
|
||||
const houselist = ref([]);
|
||||
|
||||
const checkoutUses = ref([]);
|
||||
async function init() {
|
||||
listChargeItem().then((res) => {
|
||||
const res1 = await listBillHouse({ pageNum: 1, pageSize: 999999 });
|
||||
houselist.value = res1.rows;
|
||||
|
||||
listChargeItem().then(async (res) => {
|
||||
chargeitemlist.value = res.rows;
|
||||
});
|
||||
const res = await listBillHouse({ pageNum: 1, pageSize: 999999 });
|
||||
houselist.value = res.rows;
|
||||
if (route.query.id) {
|
||||
userid.value = route.query.id;
|
||||
getBill(userid.value).then((res) => {
|
||||
form.value = {
|
||||
...form.value,
|
||||
...res.data
|
||||
};
|
||||
form.value.houseIds = res.data.houseIds || [];
|
||||
StartEndDate.value = [formatDate(res.data.startDate), formatDate(res.data.endDate)];
|
||||
checkoutUses.value = form.value.houseIds
|
||||
.map((item) => {
|
||||
if (item) {
|
||||
const find = houselist.value.find((it) => it.houseId === item);
|
||||
if (find) {
|
||||
return find;
|
||||
} else {
|
||||
return null;
|
||||
|
||||
if (route.query.id) {
|
||||
userid.value = route.query.id;
|
||||
getBill(userid.value).then((res1) => {
|
||||
form.value = {
|
||||
...form.value,
|
||||
...res1.data
|
||||
};
|
||||
form.value.houseIds = res1.data.houseIds || [];
|
||||
StartEndDate.value = [formatDate(res1.data.startDate), formatDate(res1.data.endDate)];
|
||||
checkoutUses.value = form.value.houseIds
|
||||
.map((item) => {
|
||||
if (item) {
|
||||
const find = houselist.value.find((it) => it.houseId === item);
|
||||
if (find) {
|
||||
return find;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.filter((item) => item !== null);
|
||||
});
|
||||
}
|
||||
})
|
||||
.filter((item) => item !== null);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
@@ -10,16 +10,19 @@
|
||||
<el-button type="primary" @click="openDiage">收款</el-button>
|
||||
<!-- <el-button>添加临时收费</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="房屋/车位">
|
||||
<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 === '电费' || scope.row.chargeTypeName === '水费'">{{ scope.row.houseName }}</div>
|
||||
<!-- <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">
|
||||
@@ -29,7 +32,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费周期" width="300">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.startDate }} -- {{ scope.row.endDate }}</div>
|
||||
<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">
|
||||
@@ -37,11 +40,6 @@
|
||||
<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="缴费状态" width="120">
|
||||
<template #default="scope">
|
||||
<dict-tag v-if="!inglelist.includes(scope.row.chargeItemName)" :options="com_pay_status" :value="scope.row.payStatus"></dict-tag>
|
||||
@@ -50,8 +48,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="应缴金额" width="120">
|
||||
<template #default="scope">
|
||||
<div v-if="!inglelist.includes(scope.row.chargeItemName)">{{ scope.row.money ?? '--' }}</div>
|
||||
<div v-else>--</div>
|
||||
<div>{{ scope.row.amount ?? '--' }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -65,9 +62,13 @@
|
||||
<div>
|
||||
<span>缴费人：{{ villageinfo.villageName ?? '---' }}-{{ props.query.houseName }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>账单名称： </span>
|
||||
<span style="text-wrap: wrap; text-indent: 2rem">{{ from.billResidentId.map((item) => item.chargeItemName).join('、 ') }}</span>
|
||||
<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>
|
||||
@@ -78,7 +79,7 @@
|
||||
</div>
|
||||
<el-form ref="formRef" :model="from" label-width="100px">
|
||||
<el-form-item label="费用合计" prop="allCost">
|
||||
<el-input v-model="from.allCost">
|
||||
<el-input v-model="from.allCost" disabled>
|
||||
<template #suffix>
|
||||
<span>元</span>
|
||||
</template>
|
||||
@@ -108,16 +109,20 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { billlistType, billQuery } from '@/api/system/SdbCashier';
|
||||
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;
|
||||
@@ -190,6 +195,7 @@ const openDiage = () => {
|
||||
ElMessage.warning('请至少选择一条账单进行收款');
|
||||
return;
|
||||
}
|
||||
|
||||
from.value = {
|
||||
allCost: 0,
|
||||
payStatus: '0',
|
||||
@@ -197,10 +203,9 @@ const openDiage = () => {
|
||||
payType: '0',
|
||||
remark: ''
|
||||
};
|
||||
console.log(ids.value);
|
||||
ids.value.forEach((item) => {
|
||||
from.value.billResidentId.push(item);
|
||||
from.value.allCost += Number(item.money);
|
||||
from.value.allCost = moneyAdd(from.value.allCost, item.amount);
|
||||
});
|
||||
dialog.visible = true;
|
||||
};
|
||||
@@ -210,19 +215,23 @@ const closepay = () => {
|
||||
};
|
||||
const submitForm = () => {
|
||||
buttonLoading.value = true;
|
||||
if (from.value.payStatus === '0') {
|
||||
setTimeout(() => {
|
||||
buttonLoading.value = false;
|
||||
closepay();
|
||||
}, 1000);
|
||||
} else {
|
||||
}
|
||||
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: 0.8rem;
|
||||
font-size: 16px;
|
||||
.el-button {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
|
||||
@@ -2,17 +2,14 @@
|
||||
<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">
|
||||
<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="序号" width="80">
|
||||
<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 v-if="scope.row.houseName">{{ scope.row.parkingName }}</div>
|
||||
<div v-else-if="scope.row.parkingName">{{ scope.row.parkingName }}</div>
|
||||
<div>{{ scope.row.detailsName }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费项目">
|
||||
@@ -22,17 +19,16 @@
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费周期">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.startDate }} -- {{ scope.row.endDate }}</div>
|
||||
<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>{{ scope.row.fixedPrice }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="数量">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.formula }}</div>
|
||||
<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="缴费状态">
|
||||
@@ -40,69 +36,92 @@
|
||||
<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.money }}</div>
|
||||
<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>
|
||||
|
||||
<!-- 添加或修改电 设备对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<div class="payinfo">
|
||||
<div>
|
||||
<span>缴费人：北境碧桂园小区-A栋1单元102-张姗</span>
|
||||
<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>
|
||||
<span>账单名称：2025年车位费、2025年上半年物业费 </span>
|
||||
</div>
|
||||
<div>
|
||||
<span>应收合计：￥1600.00 </span>
|
||||
</div>
|
||||
<div>
|
||||
<span>应缴合计：￥1600.00 </span>
|
||||
<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="inHomenyUse" v-if="!isPrint" placeholder="请输入收款人姓名" style="width: 150px"></el-input>
|
||||
<span style="white-space: nowrap" v-else> {{ inHomelyUse }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</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';
|
||||
import { billlistType, billPrint, BillPrintType, billQuery } from '@/api/system/SdbCashier';
|
||||
import { printTicketDiv } from '@/utils/print';
|
||||
|
||||
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 { com_charge_item_unit } = toRefs<any>(proxy?.useDict('com_charge_item_unit'));
|
||||
|
||||
type querytype = {
|
||||
residentId: string;
|
||||
@@ -123,7 +142,7 @@ const props = defineProps({
|
||||
}
|
||||
}
|
||||
});
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const ids = ref<Array<billlistType>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(100);
|
||||
@@ -131,21 +150,22 @@ const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const tabledata = ref([]);
|
||||
const tabledata = ref<billlistType[]>([]);
|
||||
// 支付状态 0未缴纳 1已缴纳 2缴纳失败
|
||||
const 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[]) => {
|
||||
ids.value = selection.map((item) => item.residentId);
|
||||
ids.value = [];
|
||||
ids.value = selection;
|
||||
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
};
|
||||
@@ -156,43 +176,89 @@ onMounted(() => {
|
||||
|
||||
const emit = defineEmits(['Back']);
|
||||
|
||||
const formRef = ref();
|
||||
const dialog = reactive<DialogOption>({
|
||||
// 打印票据
|
||||
const isPrint = ref(false);
|
||||
const dialog_print = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: '收款'
|
||||
title: '票据打印'
|
||||
});
|
||||
const buttonLoading = ref(false);
|
||||
|
||||
const from = ref({
|
||||
allCost: null,
|
||||
sex: null,
|
||||
deviceType: null,
|
||||
remark: ''
|
||||
const inHomelyUse = ref('');
|
||||
const print_form = ref<BillPrintType>({
|
||||
'totalAccount': '',
|
||||
'residentName': '',
|
||||
'detailsList': [],
|
||||
'printDate': '',
|
||||
'HouseName': '',
|
||||
'title': ''
|
||||
});
|
||||
|
||||
const openDiage = () => {
|
||||
from.value = {
|
||||
allCost: null,
|
||||
sex: null,
|
||||
deviceType: null,
|
||||
remark: ''
|
||||
function printPiaoju() {
|
||||
if (ids.value.length <= 0) {
|
||||
ElMessage.warning('请至少选择一条账单进行打印票据');
|
||||
return;
|
||||
}
|
||||
isPrint.value = false;
|
||||
inHomenyUse.value = '';
|
||||
const query = {
|
||||
'residentId': props.query.residentId,
|
||||
'detailsIds': [...ids.value.map((item) => item.detailsId)]
|
||||
};
|
||||
dialog.visible = true;
|
||||
};
|
||||
const closepay = () => {
|
||||
dialog.visible = false;
|
||||
dialog.title = '';
|
||||
};
|
||||
const submitForm = () => {
|
||||
buttonLoading.value = true;
|
||||
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(() => {
|
||||
buttonLoading.value = false;
|
||||
closepay();
|
||||
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 {
|
||||
|
||||
@@ -1,316 +1,617 @@
|
||||
<template>
|
||||
<div class="p-2 h-full flex flex-col">
|
||||
<Pageheader title="收银台管理"></Pageheader>
|
||||
<div class="" v-if="isSearch">
|
||||
<p class="actionsmain">
|
||||
功能说明：可根据住户姓名、房屋号、手机号，快速搜索对应的未缴费用，修改未缴费用的优惠及滞纳金金额，完成对未缴费用的收取。
|
||||
</p>
|
||||
<div class="contanier flex-center">
|
||||
<div class="h-full flex-1 flex flex-items-start">
|
||||
<div class="typebox">
|
||||
<el-select v-model="searchType" @change="handleChangeSearchType">
|
||||
<el-option v-for="(item, index) in com_cashier_type" :key="index" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
<PageHeader></PageHeader>
|
||||
<div class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
|
||||
<div>
|
||||
<el-form-item label="小区" prop="villageId">
|
||||
<el-select @change="handleChangeVillage" v-model="queryParams.villageId" placeholder="请选择小区">
|
||||
<el-option v-for="(item, index) in villageList" :key="index" :value="item.villageId" :label="item.villageName"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="楼栋" prop="buildingId">
|
||||
<el-select @change="handleChangeBuilding" v-model="queryParams.buildingId" placeholder="请选择楼栋">
|
||||
<el-option v-for="(item, index) in buildingList" :key="index" :value="item.id" :label="item.buildingName"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="单元" prop="unitNoId">
|
||||
<el-select @change="handleChangeUnit" v-model="queryParams.unitNoId" placeholder="请选择单元">
|
||||
<el-option v-for="(item, index) in unitList" :key="index" :value="item.unitNoId" :label="item.unitNoName"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item @change="handleChangeHouseNo" label="房号" prop="houseId">
|
||||
<el-select v-model="queryParams.houseId" placeholder="请选择收费项目">
|
||||
<el-option-group v-for="group in houseList" :key="group.floorNo" :label="String(group.floorNo) + ' 楼'">
|
||||
<el-option v-for="item in group.houses" :key="item.houseId" :label="item.houseNo" :value="item.houseId" />
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="searchBox">
|
||||
<el-input clearable v-model="searchValue" @keyup.enter="getlist">
|
||||
<template #suffix>
|
||||
<el-icon @click="getlist" class="cursor-pointer">
|
||||
<Search></Search>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<div class="listbox" v-if="onceSearch || Searching">
|
||||
<div class="list_item">
|
||||
<div class="title">
|
||||
<DictTag :options="com_cashier_type" :value="LazysearchType"></DictTag>
|
||||
</div>
|
||||
<div class="list_body" v-loading="Searching" v-if="list.length > 0 || Searching">
|
||||
<div class="list_value" @click="searchclick(item)" v-for="(item, index) in list" :key="index">
|
||||
{{ item.houseName }}-{{ item.residentName }}-{{ item.phone }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex h-full items-center justify-center">
|
||||
<span class="noData">暂无数据</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item label="收费项目" prop="itemId">
|
||||
<el-select v-model="queryParams.chargeItemId" placeholder="请选择收费项目">
|
||||
<el-option v-for="(item, index) in chargeItems" :key="index" :value="item.id" :label="item.itemName"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费周期" prop="period">
|
||||
<el-select v-model="queryParams.period" placeholder="请选择收费项目">
|
||||
<el-option v-for="(item, index) in com_bill_charge_period" :key="index" :value="item.value" :label="item.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="业主姓名" prop="residentName">
|
||||
<el-input v-model.trim="queryParams.residentName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div style="text-align: right">
|
||||
<el-button type="primary" @click="handleQuery">搜索</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="actionsBox">
|
||||
<div class="tabs-box">
|
||||
<div
|
||||
class="tabs-items"
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
:class="{
|
||||
active: activeTabs === item.value
|
||||
}"
|
||||
@click="changeTabs(item.value)"
|
||||
>
|
||||
{{ item.type }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button @click="handleIncome(false)">收费</el-button>
|
||||
<el-button @click="printPIaoJuByOnly(false)">打印票据</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-card class="flex-1" shadow="never">
|
||||
<el-table v-loading="loading" border :data="tableData" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="收费项目" align="center" prop="billCode">
|
||||
<template #default="scope">
|
||||
{{ scope.row.chargeItemName }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="收费名称" align="center" prop="detailsName">
|
||||
<template #default="scope">
|
||||
<div style="text-align: left">
|
||||
<span>{{ scope.row.detailsName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="收费周期" width="80" align="center" prop="chargePeriod">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="com_bill_charge_period" :value="scope.row.chargePeriod"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单价" width="100" align="center" prop="fixedPrice">
|
||||
<template #default="scope">
|
||||
<div class="flex justify-center">
|
||||
<span>
|
||||
{{ scope.row.fixedPrice }}
|
||||
</span>
|
||||
<span> / </span>
|
||||
<dict-tag :options="com_charge_item_unit" :value="scope.row.chargePeriod"></dict-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="应收金额" width="100" align="center" prop="amount" />
|
||||
<el-table-column label="缴费状态" width="80" align="center" prop="payStatus">
|
||||
<template #default="scope">
|
||||
<DictTag :options="com_pay_status" :value="scope.row.payStatus"></DictTag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="应缴金额" width="100" align="center" prop="amount" />
|
||||
<el-table-column label="实缴金额" width="100" align="center" prop="amount" />
|
||||
<el-table-column label="缴费人" align="center" prop="residentName" />
|
||||
<el-table-column label="缴费时间" align="center" prop="" />
|
||||
<el-table-column label="操作" width="220" align="center" fixed="right" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" v-if="scope.row.payStatus === '0'" @click="handleIncome(scope.row)" v-hasPermi="['bill:bill:edit']"
|
||||
>收费</el-button
|
||||
>
|
||||
<el-button link type="primary" v-if="scope.row.payStatus === '1'" @click="printPIaoJuByOnly(scope.row)" v-hasPermi="['bill:bill:query']"
|
||||
>打印票据</el-button
|
||||
>
|
||||
</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-card>
|
||||
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<div class="payInfo">
|
||||
<div>
|
||||
<div>缴费人： {{ inComeFrom.residentName }}</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span>收费名称： </span>
|
||||
<div>
|
||||
<div v-for="(item, index) in inComeFrom.billResidentId" :key="index" style="text-wrap: wrap; margin-bottom: 5px">
|
||||
<span style="text-decoration: underline">{{ item.detailsName }} ;</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>应收合计：￥{{ inComeFrom.allCost }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>应缴合计：￥{{ inComeFrom.allCost }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="formRef" :model="inComeFrom" label-width="100px">
|
||||
<el-form-item label="费用合计" prop="allCost">
|
||||
<el-input v-model="inComeFrom.allCost" disabled>
|
||||
<template #suffix>
|
||||
<span>元</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴纳状态" prop="payStatus">
|
||||
<el-radio-group v-model="inComeFrom.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="inComeFrom.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="inComeFrom.remark"></el-input>
|
||||
</el-form-item>
|
||||
<div class="flex justify-end">
|
||||
<el-button @click="closer">取消</el-button>
|
||||
<el-button @click="submitForm" :loading="buttonLoading" type="primary">提交</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<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>
|
||||
</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 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>
|
||||
</div>
|
||||
<div v-else style="margin-top: 20px; height: calc(100% - 210px)">
|
||||
<div class="tabsbox">
|
||||
<div
|
||||
@click="handleChecout(item.value)"
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
class="tabs_item"
|
||||
:class="{ active: checkouttabs === item.value }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full">
|
||||
<cashier :query="checkeditem" @Back="handleBack" v-if="checkouttabs === 'cashier'"></cashier>
|
||||
<history :query="checkeditem" v-if="checkouttabs === 'history'"></history>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// TODO 预存
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
import { Component, ref } from 'vue';
|
||||
|
||||
import cashier from './cashier.vue';
|
||||
import history from './history.vue';
|
||||
import { cashQuery } from '@/api/system/SdbCashier';
|
||||
|
||||
/** 当前状态 搜索后 搜索前 */
|
||||
const isSearch = ref(true);
|
||||
/** 为了loading 搜索结果 添加防抖 */
|
||||
const Searching = ref(false);
|
||||
const onceSearch = ref(false);
|
||||
import PageHeader from '@/components/Pageheader/index.vue';
|
||||
import pagination from '@/components/Pagination/index.vue';
|
||||
import DictTag from '@/components/DictTag/index.vue';
|
||||
import { getBuildinglists, getHouselistAPI } from '@/api/system/house';
|
||||
import { getCommunitylistAPI } from '@/api/system/community';
|
||||
import { billEdit, billlistType, billPrint, BillPrintType, billQuery } from '@/api/system/SdbCashier';
|
||||
import { listChargeItem } from '@/api/system/SdbChargeItem';
|
||||
import { ref } from 'vue';
|
||||
import { printTicketDiv } from '@/utils/print';
|
||||
import { moneyAdd } from '@/utils/money';
|
||||
import { BuildingUnitlist, BuildingVo, FloorsType, HouseType } from '@/api/system/house/type';
|
||||
import { ChargeItemVO } from '@/api/system/SdbChargeItem/type';
|
||||
import { communitylist_rows_type } from '@/api/system/community/type';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_cashier_type } = toRefs<any>(proxy?.useDict('com_cashier_type'));
|
||||
console.log(com_cashier_type);
|
||||
/** 房屋 住户 车辆 车位 */
|
||||
const com_cashier_type_list = ref(['houseName', 'residentName']);
|
||||
const searchform = ref();
|
||||
const searchValue = ref('');
|
||||
const searchType = ref('houseName');
|
||||
const LazysearchType = ref('');
|
||||
function handleChangeSearchType() {
|
||||
list.value = [];
|
||||
searchValue.value = '';
|
||||
}
|
||||
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'));
|
||||
const { com_pay_status, com_pay_method } = toRefs<any>(proxy?.useDict('com_pay_status', 'com_pay_method'));
|
||||
|
||||
const list = ref<querytype[]>([]);
|
||||
// ! ===================================================================================
|
||||
// 先定义 Tab 项类型
|
||||
type TabValue = 'cashier' | 'history';
|
||||
interface TabItem {
|
||||
name: string;
|
||||
value: TabValue;
|
||||
component: Component;
|
||||
}
|
||||
const checkouttabs = ref<TabValue>('cashier');
|
||||
const tabs: TabItem[] = [
|
||||
const loading = ref(false);
|
||||
const ids = ref<Array<billlistType>>([]);
|
||||
const total = ref(0);
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const activeTabs = ref(null);
|
||||
const tabs = [
|
||||
{
|
||||
name: '收银台',
|
||||
value: 'cashier',
|
||||
component: cashier
|
||||
value: null,
|
||||
type: '全部'
|
||||
},
|
||||
{
|
||||
name: '历史缴费',
|
||||
value: 'history',
|
||||
component: history
|
||||
value: 0,
|
||||
type: '待缴纳'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
type: '已缴纳'
|
||||
}
|
||||
];
|
||||
type querytype = {
|
||||
residentId: string;
|
||||
residentName: string;
|
||||
houseName: string;
|
||||
phone: string;
|
||||
};
|
||||
const checkeditem = ref<querytype>({
|
||||
'residentId': '',
|
||||
'residentName': '',
|
||||
'houseName': '',
|
||||
'phone': ''
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
payStatus: null,
|
||||
villageId: undefined,
|
||||
buildingId: undefined,
|
||||
unitNoId: undefined,
|
||||
houseId: undefined,
|
||||
residentName: undefined,
|
||||
chargeItemId: undefined,
|
||||
period: undefined
|
||||
});
|
||||
const searchclick = (row: querytype) => {
|
||||
checkeditem.value = row;
|
||||
isSearch.value = false;
|
||||
handleChecout('cashier');
|
||||
};
|
||||
function handleChecout(index: TabValue) {
|
||||
checkouttabs.value = index;
|
||||
const villageList = ref<communitylist_rows_type[]>([]);
|
||||
const buildingList = ref<BuildingVo[]>([]);
|
||||
const unitList = ref<BuildingUnitlist[]>([]);
|
||||
const houseList = ref<FloorsType[]>([]);
|
||||
const chargeItems = ref<ChargeItemVO[]>([]);
|
||||
|
||||
const tableData = ref([]);
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
// 切换 账单类型
|
||||
function changeTabs(value: number) {
|
||||
activeTabs.value = value;
|
||||
queryParams.value.payStatus = value;
|
||||
getList();
|
||||
}
|
||||
// 选择小区
|
||||
function handleChangeVillage(val: string) {
|
||||
queryParams.value.unitNoId = undefined;
|
||||
queryParams.value.buildingId = undefined;
|
||||
buildingList.value = [];
|
||||
unitList.value = [];
|
||||
if (val) {
|
||||
getBuildinglists({
|
||||
villageId: val
|
||||
}).then((res) => {
|
||||
buildingList.value = res.rows;
|
||||
handleChargeItem(val);
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// ! ===================================================================================
|
||||
// 用于追踪最新请求的标识
|
||||
let latestRequestId = 0;
|
||||
function getlist() {
|
||||
// 生成当前请求的唯一ID
|
||||
const currentRequestId = ++latestRequestId;
|
||||
const currenttime = Date.now();
|
||||
// 获取收费项目
|
||||
function handleChargeItem(id: string) {
|
||||
listChargeItem({
|
||||
villageId: id
|
||||
}).then((res) => {
|
||||
chargeItems.value = res.rows;
|
||||
});
|
||||
}
|
||||
|
||||
Searching.value = true;
|
||||
searchform.value = {};
|
||||
searchform.value[searchType.value] = searchValue.value;
|
||||
// 选择楼栋
|
||||
function handleChangeBuilding(val: string): void {
|
||||
queryParams.value.unitNoId = undefined;
|
||||
unitList.value = [];
|
||||
getHouselistAPI(val).then((res) => {
|
||||
unitList.value = res.data.units;
|
||||
});
|
||||
}
|
||||
// 选择 单元
|
||||
function handleChangeUnit(val: string) {
|
||||
const find = unitList.value.find((item) => item.unitNoId === val);
|
||||
houseList.value = [];
|
||||
if (find) {
|
||||
houseList.value = find.floors;
|
||||
}
|
||||
}
|
||||
// 选择房屋
|
||||
function handleChangeHouseNo() {}
|
||||
|
||||
let lastdata = [];
|
||||
cashQuery(searchform.value)
|
||||
// 获取列表
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
billQuery(queryParams.value)
|
||||
.then((res) => {
|
||||
// 检查是否是最新的请求，防止竞态条件
|
||||
if (currentRequestId === latestRequestId) {
|
||||
lastdata = res.data;
|
||||
}
|
||||
tableData.value = res.rows;
|
||||
total.value = res.total;
|
||||
})
|
||||
.finally(() => {
|
||||
if (currentRequestId === latestRequestId) {
|
||||
LazysearchType.value = searchType.value;
|
||||
onceSearch.value = true;
|
||||
// 计算已过去的时间
|
||||
const elapsedTime = Date.now() - currenttime;
|
||||
const minLoadingTime = 300;
|
||||
if (elapsedTime < minLoadingTime) {
|
||||
setTimeout(() => {
|
||||
// 再次检查，防止在等待期间发起了新请求
|
||||
if (currentRequestId === latestRequestId) {
|
||||
list.value = lastdata;
|
||||
Searching.value = false;
|
||||
}
|
||||
}, minLoadingTime - elapsedTime);
|
||||
} else {
|
||||
list.value = lastdata;
|
||||
Searching.value = false;
|
||||
}
|
||||
}
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
// ! ===================================================================================
|
||||
const handleBack = () => {
|
||||
isSearch.value = true;
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
// ! ===================================================================================
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
queryParams.value = {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
payStatus: null,
|
||||
villageId: undefined,
|
||||
buildingId: undefined,
|
||||
unitNoId: undefined,
|
||||
houseId: undefined,
|
||||
chargeItemId: undefined,
|
||||
period: undefined,
|
||||
residentName: undefined
|
||||
};
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: billlistType[]) => {
|
||||
ids.value = selection.map((item) => item);
|
||||
};
|
||||
const buttonLoading = ref(false);
|
||||
// 收费表单
|
||||
const inComeFrom = ref({
|
||||
allCost: null, // 金额
|
||||
billResidentId: [], // 账单id
|
||||
payStatus: '0', // 0:未缴 1:已缴
|
||||
payType: '0', // 0:微信 1:支付宝 2 线下
|
||||
remark: '',
|
||||
residentName: '' // 缴费人
|
||||
});
|
||||
// 收费 --------------------------------------------------------------
|
||||
/** 收费 */
|
||||
function handleIncome(row: billlistType | false) {
|
||||
console.log(ids.value);
|
||||
inComeFrom.value.allCost = 0;
|
||||
inComeFrom.value.billResidentId = [];
|
||||
inComeFrom.value.residentName = '';
|
||||
if (row) {
|
||||
inComeFrom.value.allCost = row.amount;
|
||||
inComeFrom.value.billResidentId = [row];
|
||||
inComeFrom.value.residentName = row.residentName;
|
||||
} else {
|
||||
const set = new Set();
|
||||
ids.value.forEach((item) => {
|
||||
set.add(item.residentId);
|
||||
});
|
||||
if (set.size > 1) {
|
||||
ElMessage.warning('缴费人不一致，重新选择');
|
||||
return;
|
||||
} else if (set.size === 1) {
|
||||
inComeFrom.value.residentName = ids.value[0].residentName;
|
||||
ids.value.forEach((item) => {
|
||||
inComeFrom.value.billResidentId.push(item);
|
||||
inComeFrom.value.allCost = moneyAdd(inComeFrom.value.allCost, item.amount);
|
||||
});
|
||||
console.log(inComeFrom.value);
|
||||
}
|
||||
}
|
||||
dialog.visible = true;
|
||||
}
|
||||
const closer = () => {
|
||||
dialog.visible = false;
|
||||
dialog.title = '';
|
||||
};
|
||||
const submitForm = () => {
|
||||
buttonLoading.value = true;
|
||||
const obj = {
|
||||
'detailsId': inComeFrom.value.billResidentId.map((item) => item.detailsId),
|
||||
'payType': inComeFrom.value.payType,
|
||||
'payStatus': inComeFrom.value.payStatus
|
||||
};
|
||||
billEdit(obj)
|
||||
.then(() => {
|
||||
ElMessage.success('缴费成功');
|
||||
getList();
|
||||
closer();
|
||||
})
|
||||
.finally(() => {
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 打印票据--------------------------------------------------------------
|
||||
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 printPIaoJuByOnly(row: billlistType | false) {
|
||||
isPrint.value = false;
|
||||
inHomelyUse.value = '';
|
||||
let query = null;
|
||||
if (row) {
|
||||
query = {
|
||||
'residentId': row.residentId,
|
||||
'detailsIds': [row.detailsId]
|
||||
};
|
||||
} else {
|
||||
let residentId = null;
|
||||
const set = new Set();
|
||||
ids.value.forEach((item) => {
|
||||
set.add(item.residentId);
|
||||
});
|
||||
if (set.size > 1) {
|
||||
ElMessage.warning('缴费人不一致，重新选择');
|
||||
return;
|
||||
} else if (set.size === 1) {
|
||||
residentId = Array.from(set).at(0);
|
||||
query = {
|
||||
'residentId': 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);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
// 全部小区
|
||||
getCommunitylistAPI().then((res) => {
|
||||
villageList.value = res.rows;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.noData {
|
||||
color: #999999;
|
||||
<style lang="scss" scoped>
|
||||
.el-table {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.tabsbox {
|
||||
height: 60px;
|
||||
.actionsBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.tabs-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
.tabs_item {
|
||||
|
||||
.tabs-items {
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
margin-right: 40px;
|
||||
font-size: 0.8rem;
|
||||
border-bottom: 2px solid transparent;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
color: #40a0ff98;
|
||||
border-bottom-color: #40a0ff98;
|
||||
opacity: 0.5;
|
||||
color: #1a75ff;
|
||||
border-bottom-color: #1a75ff;
|
||||
}
|
||||
&.active {
|
||||
color: #409eff;
|
||||
border-bottom-color: #409eff;
|
||||
border-bottom: 1px solid;
|
||||
border-bottom-color: #1a75ff;
|
||||
color: #1a75ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actionsmain {
|
||||
font-size: 0.9rem;
|
||||
color: #000;
|
||||
padding-left: 30px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.contanier {
|
||||
width: 900px;
|
||||
min-height: 200px;
|
||||
margin: 100px auto;
|
||||
.typebox {
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
:deep(.el-select__wrapper) {
|
||||
width: 140px;
|
||||
height: 50px;
|
||||
line-height: 20px;
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
&:deep(.el-input__wrapper) {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.listbox {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
min-height: 200px;
|
||||
margin-top: -2px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0px 0px 5px 5px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(16, 16, 16, 1);
|
||||
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.list_item {
|
||||
padding-bottom: 30px;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
flex-direction: column;
|
||||
.title {
|
||||
color: rgba(48, 49, 51, 1);
|
||||
font-size: 1rem;
|
||||
font-weight: 450;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid rgba(204, 204, 204, 1);
|
||||
}
|
||||
.list_body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
.list_value {
|
||||
min-height: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid rgba(204, 204, 204, 1);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #cccccc33;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
font-size: 10px;
|
||||
.printTable {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #000;
|
||||
th,
|
||||
td {
|
||||
text-align: center;
|
||||
min-width: 140px;
|
||||
height: 40px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
</style>
|
||||
|
||||
@@ -52,6 +52,9 @@
|
||||
<el-dropdown-item @click="handleMarkqrcode" v-if="checkPermi(['equipment:addqrcode:electricitydevice'])">
|
||||
<span>批量生成条形码</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="handleMarkQrcodeZip" v-if="checkPermi(['equipment:addqrcode:electricitydevice'])">
|
||||
<span>批量下载条形码</span>
|
||||
</el-dropdown-item>
|
||||
<!-- </el-dropdown-menu> -->
|
||||
<!-- <el-dropdown-item v-hasPermi="['equipment:addqrcode:electricitydevice']">
|
||||
<div @click="handleMarkqrcode">批量更新固件</div>
|
||||
@@ -74,15 +77,15 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="分合状态" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<div class="readRecord" v-if="scope.row.waterRecord">
|
||||
<DictTag :options="com_electricity_readrecord_status" :value="scope.row.waterRecord.status"></DictTag>
|
||||
<div class="readRecord" v-if="scope.row.electricityRecord">
|
||||
<DictTag :options="com_electricity_readrecord_status" :value="scope.row.electricityRecord.status"></DictTag>
|
||||
</div>
|
||||
<span v-else>---</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="房屋号" align="center" prop="houseName" />
|
||||
<el-table-column label="余额" width="100" align="center" prop="elePrice">
|
||||
<template #defaul="scope">
|
||||
<el-table-column label="余额" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.electricityRecord">{{ scope.row.electricityRecord.balance }}</span>
|
||||
<span v-else>---</span>
|
||||
</template>
|
||||
@@ -106,7 +109,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="抄表时间" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.waterRecord ? scope.row.waterRecord.readTime : '--' }}</span>
|
||||
<span>{{ scope.row.electricityRecord ? scope.row.electricityRecord.readTime : '--' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column width="150" label="启停" align="center" prop="deleted" v-hasPermi="['equipment:isUse:electricitydevice']">
|
||||
@@ -265,8 +268,8 @@ import { useUserStore } from '@/store/modules/user';
|
||||
import { checkPermi } from '@/utils/permission';
|
||||
import { Upload } from '@element-plus/icons-vue';
|
||||
import { CascaderValue, tourEmits, UploadProps, UploadRawFile } from 'element-plus';
|
||||
import { exportImagesToZip } from '@/utils/exportZip';
|
||||
|
||||
const huhao = 3096371295;
|
||||
const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/electricityDevice/upload';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
@@ -408,7 +411,7 @@ const EditHouseform = ref({
|
||||
/** 批量生成 条形码 */
|
||||
function handleMarkqrcode() {
|
||||
if (ids.value.length > 0) {
|
||||
ElectricityDeviceMakerQrcode(ids.value).then((res) => {
|
||||
ElectricityDeviceMakerQrcode(ids.value).then(() => {
|
||||
ElMessage.success('批量生成成功');
|
||||
getList();
|
||||
});
|
||||
@@ -416,6 +419,28 @@ function handleMarkqrcode() {
|
||||
ElMessage.warning('请选择设备');
|
||||
}
|
||||
}
|
||||
/** 批量下载条形码 */
|
||||
function handleMarkQrcodeZip() {
|
||||
if (ids.value.length > 0) {
|
||||
const selectedIds = new Set(ids.value.map((item) => item.id));
|
||||
const matchedList = ElectricityDeviceList.value.filter((item) => {
|
||||
return selectedIds.has(item.id) && item.url;
|
||||
});
|
||||
produceQRzip(matchedList);
|
||||
} else {
|
||||
ElMessage.warning('请选择设备');
|
||||
}
|
||||
}
|
||||
function produceQRzip(vals: ElectricityDeviceVO[]) {
|
||||
const arr = vals.map((item) => {
|
||||
return {
|
||||
name: item.deviceCode,
|
||||
url: item.url
|
||||
};
|
||||
});
|
||||
exportImagesToZip(arr, 'ele_images');
|
||||
}
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: ElectricityDeviceVO[]) => {
|
||||
ids.value = selection.map((item) => {
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
<pageheader></pageheader>
|
||||
<el-card class="flex-1 mt-10px" shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" style="font-size: 0.8rem; font-weight: 450">
|
||||
<el-row style="font-size: 0.8rem; font-weight: 450">
|
||||
<el-col :span="4"> 设备号： {{ routeid }} </el-col>
|
||||
<el-col :span="4"> 房屋号： {{ housename }} </el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="8"> 房屋号： {{ housename }} </el-col>
|
||||
<el-col :span="8"></el-col>
|
||||
<el-col :span="4" class="flex">
|
||||
<el-button @click="confinem">返回</el-button>
|
||||
<el-button type="warning" @click="handleExport">导出数据</el-button>
|
||||
|
||||
142
src/views/system/Sdb/statistics/electricity.vue
Normal file
142
src/views/system/Sdb/statistics/electricity.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full p-2">
|
||||
<pageheader></pageheader>
|
||||
<el-card class="flex-1 mt-10px" shadow="never">
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<el-form class="demo-form-inline" :inline="true">
|
||||
<el-form-item label="查询日期">
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="SearchTime"
|
||||
@change="
|
||||
(val) => {
|
||||
if (!val) {
|
||||
queryParams.startDate = '';
|
||||
queryParams.endDate = '';
|
||||
return;
|
||||
}
|
||||
SearchTime = val;
|
||||
const days = val;
|
||||
const [star, end] = days.map((item) => item.split(' ')[0]);
|
||||
queryParams.startDate = star + ' 00:00:00';
|
||||
queryParams.endDate = end + ' 23:59:59';
|
||||
}
|
||||
"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
format="YYYY-MM-DD"
|
||||
range-separator="到"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="" v-hasPermi="['electricity:topupRecord:list']">
|
||||
<el-button type="primary" @click="getList">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button @click="handleExport" v-hasPermi="['electricity:topupRecord:export']" type="warning">导出统计</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-table v-loading="loading" border :data="topupRecordList">
|
||||
<el-table-column label="充值时间" align="center" prop="rechargeTime">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.rechargeTime">{{ scope.row.rechargeTime }}</span>
|
||||
<span v-else>---</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="小区名称" align="center" prop="villageName">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.villageName">{{ scope.row.villageName }}</span>
|
||||
<span v-else>---</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="户主" align="center" prop="residentName">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.residentName">{{ scope.row.residentName }}</span>
|
||||
<span v-else>---</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="房号" align="center" prop="houseName">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.houseName">{{ scope.row.houseName }}</span>
|
||||
<span v-else>---</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单价" align="center" prop="fixedPrice">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.fixedPrice && scope.row.unit">
|
||||
<span>{{ scope.row.fixedPrice }}</span>
|
||||
<span>/</span>
|
||||
<span>{{ scope.row.unit }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span>---</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备编号" align="center" prop="deviceCode" />
|
||||
<el-table-column label="订单号" align="center" prop="orderId" />
|
||||
<el-table-column label="充值金额" align="center" prop="rechargeAmount" />
|
||||
<el-table-column label="缴费方式" align="center" prop="topUpType" />
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getElectricityTopupRecordByDate, type TopupRecordList } from '@/api/system/SdbTopupRecord/index';
|
||||
import { checkPermi } from '@/utils/permission';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const topupRecordList = ref<TopupRecordList[]>([]);
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
}
|
||||
});
|
||||
const SearchTime = ref([]);
|
||||
|
||||
const { queryParams } = toRefs(data);
|
||||
/** 查询充值记录列表 */
|
||||
const getList = async () => {
|
||||
if (!checkPermi(['electricity:topupRecord:list'])) return;
|
||||
loading.value = true;
|
||||
const res = await getElectricityTopupRecordByDate(queryParams.value);
|
||||
topupRecordList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download(
|
||||
'/topupRecord/electricity/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`花开物业电费统计表.xlsx`
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-table {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
143
src/views/system/Sdb/statistics/index.vue
Normal file
143
src/views/system/Sdb/statistics/index.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full p-2">
|
||||
<pageheader></pageheader>
|
||||
<el-card class="flex-1 mt-10px" shadow="never">
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<el-form class="demo-form-inline" :inline="true">
|
||||
<el-form-item label="查询日期">
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="SearchTime"
|
||||
@change="
|
||||
(val) => {
|
||||
if (!val) {
|
||||
queryParams.startDate = '';
|
||||
queryParams.endDate = '';
|
||||
return;
|
||||
}
|
||||
SearchTime = val;
|
||||
const days = val;
|
||||
const [star, end] = days.map((item) => item.split(' ')[0]);
|
||||
queryParams.startDate = star + ' 00:00:00';
|
||||
queryParams.endDate = end + ' 23:59:59';
|
||||
}
|
||||
"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
format="YYYY-MM-DD"
|
||||
range-separator="到"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="" v-hasPermi="['water:topupRecord:list']">
|
||||
<el-button type="primary" @click="getList">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button @click="handleExport" v-hasPermi="['water:topupRecord:export']" type="warning">导出统计</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-table v-loading="loading" border :data="topupRecordList">
|
||||
<el-table-column label="充值时间" align="center" prop="rechargeTime">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.rechargeTime">{{ scope.row.rechargeTime }}</span>
|
||||
<span v-else>---</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="小区名称" align="center" prop="villageName">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.villageName">{{ scope.row.villageName }}</span>
|
||||
<span v-else>---</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="户主" align="center" prop="residentName">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.residentName">{{ scope.row.residentName }}</span>
|
||||
<span v-else>---</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="房号" align="center" prop="houseName">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.houseName">{{ scope.row.houseName }}</span>
|
||||
<span v-else>---</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单价" align="center" prop="fixedPrice">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.fixedPrice && scope.row.unit">
|
||||
<span>{{ scope.row.fixedPrice }}</span>
|
||||
<span>/</span>
|
||||
<span>{{ scope.row.unit }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span>---</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备编号" align="center" prop="deviceCode" />
|
||||
<el-table-column label="订单号" align="center" prop="orderId" />
|
||||
<el-table-column label="充值金额" align="center" prop="rechargeAmount" />
|
||||
<el-table-column label="缴费方式" align="center" prop="topUpType" />
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getTopupRecordByDate, type TopupRecordList } from '@/api/system/SdbTopupRecord/index';
|
||||
import { checkPermi } from '@/utils/permission';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const topupRecordList = ref<TopupRecordList[]>([]);
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
}
|
||||
});
|
||||
const SearchTime = ref([]);
|
||||
|
||||
const { queryParams } = toRefs(data);
|
||||
/** 查询充值记录列表 */
|
||||
const getList = async () => {
|
||||
if (!checkPermi(['water:topupRecord:list'])) return;
|
||||
loading.value = true;
|
||||
const res = await getTopupRecordByDate(queryParams.value);
|
||||
topupRecordList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
// exportTopupRecordByDate();
|
||||
proxy?.download(
|
||||
'/topupRecord/water/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`花开物业水费统计表.xlsx`
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-table {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user