9/2 禅道问题
This commit is contained in:
Zy
@@ -1,200 +1,197 @@
|
||||
<template>
|
||||
<div class="p-2 h-full flex flex-col">
|
||||
<pageHeader></pageHeader>
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :inline="true" :model="queryParams" :rules="formRules" label-width="140" @submit.prevent="handleQuery">
|
||||
<div>
|
||||
<el-form-item label="小区(多选)" prop="villageIds">
|
||||
<el-select v-model="queryParams.villageIds" :multiple="true" placeholder="请选择小区">
|
||||
<el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="承租方" prop="lessee">
|
||||
<el-input v-model.trim="queryParams.lessee" placeholder="请输入承租方" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input v-model.trim="queryParams.phone" placeholder="请输入电话" type="tel" />
|
||||
</el-form-item>
|
||||
<el-form-item label="房号" prop="roomNumber">
|
||||
<el-input v-model.trim="queryParams.roomNumber" placeholder="请输入房号" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]" style="overflow: auto; overflow-y: hidden">
|
||||
<div>
|
||||
<!-- 搜索条件： 面积/收费模式/收费标准 -->
|
||||
<div>
|
||||
<el-form-item label="面积" prop="areaSize" style="margin-bottom: 0">
|
||||
<el-input v-model.trim="queryParams.areaSize" placeholder="请输入面积区间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收费模式（多选）" prop="chargeModes" style="margin-bottom: 0">
|
||||
<el-select v-model="queryParams.chargeModes" :multiple="true" placeholder="请选择收费模式">
|
||||
<el-option v-for="item in com_house_rental_pricing_model" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="收费标准（多选）" prop="chargeStandards" style="margin-bottom: 0">
|
||||
<el-select v-model="queryParams.chargeStandards" :multiple="true" placeholder="请选择收费标准">
|
||||
<el-option v-for="item in com_house_rental_pricing" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="queryParams.chargeTypeFilters.length > 0" class="line"></div>
|
||||
|
||||
<el-scrollbar>
|
||||
<div style="width: fit-content">
|
||||
<!-- 搜索条件： 应收/已收/未收 ▐╬╬-->
|
||||
<div class="queryBox_over">
|
||||
<el-form-item
|
||||
v-for="(item, index) in queryParams.chargeTypeFilters"
|
||||
:key="index"
|
||||
:label="`${item.chargeTypeName}（应收）`"
|
||||
:prop="`chargeTypeFilters[${index}].receivable`"
|
||||
>
|
||||
<el-input v-model.trim="queryParams.chargeTypeFilters[index].receivable" placeholder="区间搜索 示例：100-2000" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="queryBox_over">
|
||||
<el-form-item
|
||||
v-for="(item, index) in queryParams.chargeTypeFilters"
|
||||
:key="index"
|
||||
:label="`${item.chargeTypeName}（已收）`"
|
||||
:prop="`chargeTypeFilters[${index}].received`"
|
||||
>
|
||||
<el-input v-model.trim="queryParams.chargeTypeFilters[index].received" placeholder="区间搜索 示例：100-2000" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="queryBox_over">
|
||||
<el-form-item
|
||||
v-for="(item, index) in [...queryParams.chargeTypeFilters]"
|
||||
:key="index"
|
||||
:label="`${item.chargeTypeName}（未收）`"
|
||||
:prop="`chargeTypeFilters[${index}].uncollected`"
|
||||
style="margin-bottom: 0"
|
||||
>
|
||||
<el-input v-model.trim="queryParams.chargeTypeFilters[index].uncollected" placeholder="区间搜索 示例：100-2000" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="line"></div>
|
||||
<!-- 搜索条件： 租赁起始日期/租赁终止日期 -->
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<el-form-item label="租赁起始日期" prop="leaseStartDate">
|
||||
<el-date-picker
|
||||
v-model="leaseStartDate"
|
||||
end-placeholder="结束日期"
|
||||
format="YYYY-MM-DD"
|
||||
placeholder="请选择"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD"
|
||||
@clear="handleClear('leaseStartDate')"
|
||||
@update:model-value="(val: string[]) => handleUpdateLeaseDate('leaseStartDate', val)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="租赁终止日期" prop="leaseEndDate">
|
||||
<el-date-picker
|
||||
v-model="leaseEndDate"
|
||||
end-placeholder="结束日期"
|
||||
format="YYYY-MM-DD"
|
||||
placeholder="请选择"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD"
|
||||
@clear="handleClear('leaseEndDate')"
|
||||
@update:model-value="(val: string[]) => handleUpdateLeaseDate('leaseEndDate', val)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="showSearch">
|
||||
<el-form-item label="">
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
<div v-if="showSearch" class="arrowBox" style="margin-left: 10px" @click="ChangeShowSearch(false)">
|
||||
<span>收起</span>
|
||||
<el-icon style="margin-left: 5px"><ArrowUpBold /></el-icon>
|
||||
</div>
|
||||
<div v-else class="arrowBox" style="margin-left: 10px" @click="ChangeShowSearch(true)">
|
||||
<span>展开</span>
|
||||
<el-icon style="margin-left: 5px"><ArrowDownBold /></el-icon>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-auto flex-1">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :inline="true" :model="queryParams" :rules="formRules" label-width="140" @submit.prevent="handleQuery">
|
||||
<div>
|
||||
<el-form-item label="小区(多选)" prop="villageIds">
|
||||
<el-select v-model="queryParams.villageIds" :multiple="true" placeholder="请选择小区">
|
||||
<el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="承租方" prop="lessee">
|
||||
<el-input v-model.trim="queryParams.lessee" placeholder="请输入承租方" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input v-model.trim="queryParams.phone" placeholder="请输入电话" type="tel" />
|
||||
</el-form-item>
|
||||
<el-form-item label="房号" prop="roomNumber">
|
||||
<el-input v-model.trim="queryParams.roomNumber" placeholder="请输入房号" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</transition>
|
||||
<div v-if="!showSearch">
|
||||
<el-form-item label="">
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
<div v-if="showSearch" class="arrowBox" style="margin-left: 10px" @click="ChangeShowSearch(false)">
|
||||
<span>收起</span>
|
||||
<el-icon style="margin-left: 5px"><ArrowUpBold /></el-icon>
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]" style="overflow: auto; overflow-y: hidden">
|
||||
<div>
|
||||
<!-- 搜索条件： 面积/收费模式/收费标准 -->
|
||||
<div>
|
||||
<el-form-item label="面积" prop="areaSize" style="margin-bottom: 0">
|
||||
<el-input v-model.trim="queryParams.areaSize" placeholder="请输入面积区间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收费模式（多选）" prop="chargeModes" style="margin-bottom: 0">
|
||||
<el-select v-model="queryParams.chargeModes" :multiple="true" placeholder="请选择收费模式">
|
||||
<el-option v-for="item in com_house_rental_pricing_model" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="收费标准（多选）" prop="chargeStandards" style="margin-bottom: 0">
|
||||
<el-select v-model="queryParams.chargeStandards" :multiple="true" placeholder="请选择收费标准">
|
||||
<el-option v-for="item in com_house_rental_pricing" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="queryParams.chargeTypeFilters.length > 0" class="line"></div>
|
||||
|
||||
<el-scrollbar>
|
||||
<div style="width: fit-content">
|
||||
<!-- 搜索条件： 应收/已收/未收 ▐╬╬-->
|
||||
<div class="queryBox_over">
|
||||
<el-form-item
|
||||
v-for="(item, index) in queryParams.chargeTypeFilters"
|
||||
:key="index"
|
||||
:label="`${item.chargeTypeName}（应收）`"
|
||||
:prop="`chargeTypeFilters[${index}].receivable`"
|
||||
>
|
||||
<el-input v-model.trim="queryParams.chargeTypeFilters[index].receivable" placeholder="区间搜索 示例：100-2000" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="queryBox_over">
|
||||
<el-form-item
|
||||
v-for="(item, index) in queryParams.chargeTypeFilters"
|
||||
:key="index"
|
||||
:label="`${item.chargeTypeName}（已收）`"
|
||||
:prop="`chargeTypeFilters[${index}].received`"
|
||||
>
|
||||
<el-input v-model.trim="queryParams.chargeTypeFilters[index].received" placeholder="区间搜索 示例：100-2000" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="queryBox_over">
|
||||
<el-form-item
|
||||
v-for="(item, index) in [...queryParams.chargeTypeFilters]"
|
||||
:key="index"
|
||||
:label="`${item.chargeTypeName}（未收）`"
|
||||
:prop="`chargeTypeFilters[${index}].uncollected`"
|
||||
style="margin-bottom: 0"
|
||||
>
|
||||
<el-input v-model.trim="queryParams.chargeTypeFilters[index].uncollected" placeholder="区间搜索 示例：100-2000" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="line"></div>
|
||||
<!-- 搜索条件： 租赁起始日期/租赁终止日期 -->
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<el-form-item label="租赁起始日期" prop="leaseStartDate">
|
||||
<el-date-picker
|
||||
v-model="leaseStartDate"
|
||||
end-placeholder="结束日期"
|
||||
format="YYYY-MM-DD"
|
||||
placeholder="请选择"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD"
|
||||
@clear="handleClear('leaseStartDate')"
|
||||
@update:model-value="(val: string[]) => handleUpdateLeaseDate('leaseStartDate', val)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="租赁终止日期" prop="leaseEndDate">
|
||||
<el-date-picker
|
||||
v-model="leaseEndDate"
|
||||
end-placeholder="结束日期"
|
||||
format="YYYY-MM-DD"
|
||||
placeholder="请选择"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD"
|
||||
@clear="handleClear('leaseEndDate')"
|
||||
@update:model-value="(val: string[]) => handleUpdateLeaseDate('leaseEndDate', val)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="showSearch">
|
||||
<el-form-item label="">
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
<div v-if="showSearch" class="arrowBox" style="margin-left: 10px" @click="ChangeShowSearch(false)">
|
||||
<span>收起</span>
|
||||
<el-icon style="margin-left: 5px"><ArrowUpBold /></el-icon>
|
||||
</div>
|
||||
<div v-else class="arrowBox" style="margin-left: 10px" @click="ChangeShowSearch(true)">
|
||||
<span>展开</span>
|
||||
<el-icon style="margin-left: 5px"><ArrowDownBold /></el-icon>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="arrowBox" style="margin-left: 10px" @click="ChangeShowSearch(true)">
|
||||
<span>展开</span>
|
||||
<el-icon style="margin-left: 5px"><ArrowDownBold /></el-icon>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="flex-1" shadow="never" style="margin-top: 5px">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="5">
|
||||
</transition>
|
||||
<div v-if="!showSearch">
|
||||
<el-form-item label="">
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
<div v-if="showSearch" class="arrowBox" style="margin-left: 10px" @click="ChangeShowSearch(false)">
|
||||
<span>收起</span>
|
||||
<el-icon style="margin-left: 5px"><ArrowUpBold /></el-icon>
|
||||
</div>
|
||||
<div v-else class="arrowBox" style="margin-left: 10px" @click="ChangeShowSearch(true)">
|
||||
<span>展开</span>
|
||||
<el-icon style="margin-left: 5px"><ArrowDownBold /></el-icon>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="never" style="margin-top: 5px; height: 800px">
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<span>租赁管理明细</span>
|
||||
</el-col>
|
||||
<el-col :span="18"></el-col>
|
||||
<el-col :span="1">
|
||||
<el-button type="primary" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<el-table v-loading="loading" :data="ArrearsDetailList" border>
|
||||
<el-table-column align="center" label="区域" prop="area" />
|
||||
<el-table-column align="center" label="承租方" prop="lessee" />
|
||||
<el-table-column align="center" label="电话" prop="phone" width="120" />
|
||||
<el-table-column align="center" label="房号" prop="roomNumber" />
|
||||
<el-table-column align="center" label="面积" prop="areaSize" width="80" />
|
||||
<el-table-column align="center" label="收费模式" prop="chargeMode" />
|
||||
<el-table-column align="center" label="收费标准" prop="chargeStandard" />
|
||||
<el-table-column align="center" label="租赁起始日" prop="leaseStartDate" />
|
||||
<el-table-column align="center" label="租赁终止日" prop="leaseEndDate" />
|
||||
<el-table-column align="center" label="应收项目">
|
||||
<template #default>
|
||||
<el-table-column v-for="(item, index) in dynamicColumns" :key="index" :label="item.chargeTypeName" align="center" prop="totalAmount">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.receivableAmounts[item.chargeTypeId] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="已收项目">
|
||||
<template #default>
|
||||
<el-table-column v-for="(item, index) in dynamicColumns" :key="index" :label="item.chargeTypeName" align="center" prop="totalAmount">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.receivedAmounts[item.chargeTypeId] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="未收项目">
|
||||
<template #default>
|
||||
<el-table-column v-for="(item, index) in dynamicColumns" :key="index" :label="item.chargeTypeName" align="center" prop="totalAmount">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.uncollectedAmounts[item.chargeTypeId] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<el-table v-loading="loading" :data="ArrearsDetailList" border>
|
||||
<el-table-column align="center" label="区域" prop="area" />
|
||||
<el-table-column align="center" label="承租方" prop="lessee" />
|
||||
<el-table-column align="center" label="电话" prop="phone" width="120" />
|
||||
<el-table-column align="center" label="房号" prop="roomNumber" />
|
||||
<el-table-column align="center" label="面积" prop="areaSize" width="80" />
|
||||
<el-table-column align="center" label="收费模式" prop="chargeMode" />
|
||||
<el-table-column align="center" label="收费标准" prop="chargeStandard" />
|
||||
<el-table-column align="center" label="租赁起始日" prop="leaseStartDate" />
|
||||
<el-table-column align="center" label="租赁终止日" prop="leaseEndDate" />
|
||||
<el-table-column align="center" label="应收项目">
|
||||
<template #default>
|
||||
<el-table-column v-for="(item, index) in dynamicColumns" :key="index" :label="item.chargeTypeName" align="center" prop="totalAmount">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.receivableAmounts[item.chargeTypeId] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="已收项目">
|
||||
<template #default>
|
||||
<el-table-column v-for="(item, index) in dynamicColumns" :key="index" :label="item.chargeTypeName" align="center" prop="totalAmount">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.receivedAmounts[item.chargeTypeId] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="未收项目">
|
||||
<template #default>
|
||||
<el-table-column v-for="(item, index) in dynamicColumns" :key="index" :label="item.chargeTypeName" align="center" prop="totalAmount">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.uncollectedAmounts[item.chargeTypeId] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" name="Arrears" setup>
|
||||
|
||||
Reference in New Issue
Block a user