2 changed files with 771 additions and 0 deletions
-
+1 -0src/views/property/pay.vue
-
+770 -0src/views/property/payCopy.vue
+ 1
- 0
src/views/property/pay.vue
View File
+ 770
- 0
src/views/property/payCopy.vue
View File
| @ -0,0 +1,770 @@ | |||
| <template> | |||
| <div class="app-container"> | |||
| <el-form ref="queryForm" :model="queryParams" :inline="true"> | |||
| <el-form-item label="户号:" v-if="queryParams.chargetype !== 3"> | |||
| <el-input | |||
| v-model="queryParams.buildingid" | |||
| size="small" | |||
| placeholder="楼号" | |||
| style="display: inline-block; width: 60px" | |||
| /> | |||
| <span> 幢 </span> | |||
| <el-input | |||
| v-model="queryParams.unit" | |||
| size="small" | |||
| placeholder="单元号" | |||
| style="display: inline-block; width: 80px" | |||
| /> | |||
| <span> 单元 </span> | |||
| <el-input | |||
| v-model="queryParams.room" | |||
| placeholder="房间号" | |||
| size="small" | |||
| style="display: inline-block; width: 80px" | |||
| /> | |||
| <span> 室 </span> | |||
| </el-form-item> | |||
| <el-form-item v-if="queryParams.chargetype === 2" label="卡号"> | |||
| <el-input | |||
| v-model="queryParams.accesscardid" | |||
| size="small" | |||
| placeholder="请输入" | |||
| style="width: 120px" | |||
| /> | |||
| </el-form-item> | |||
| <el-form-item v-if="queryParams.chargetype === 3" label="车位号"> | |||
| <el-input | |||
| v-model="queryParams.carportid" | |||
| size="small" | |||
| placeholder="请输入" | |||
| style="width: 120px" | |||
| /> | |||
| </el-form-item> | |||
| <el-form-item> | |||
| <el-button | |||
| type="primary" | |||
| icon="el-icon-search" | |||
| size="mini" | |||
| @click="handleQuery" | |||
| >搜索</el-button | |||
| > | |||
| </el-form-item> | |||
| <br /> | |||
| <el-form-item | |||
| v-if="queryParams.chargetype === 1" | |||
| label="面积:" | |||
| class="word property" | |||
| > | |||
| <div>{{ queryParams.constructionarea }}</div> | |||
| </el-form-item> | |||
| <el-form-item label="收费标准:" class="word property"> | |||
| <div v-show="queryParams.unitprice > 0"> | |||
| {{ | |||
| `${queryParams.unitprice}${ | |||
| queryParams.chargetype === 1 | |||
| ? "元/㎡·月" | |||
| : queryParams.chargetype === 2 | |||
| ? "元/卡·月" | |||
| : queryParams.chargetype === 3 | |||
| ? "/车·月" | |||
| : "" | |||
| }` | |||
| }} | |||
| </div> | |||
| </el-form-item> | |||
| <el-form-item label="费用已缴至:" class="word property"> | |||
| <div>{{ queryParams.contracttab.enddate }}</div> | |||
| </el-form-item> | |||
| <br /> | |||
| <el-form-item class="property"> | |||
| <el-input | |||
| v-model="queryParams.contact" | |||
| size="small" | |||
| placeholder="请输入内容" | |||
| > | |||
| <template slot="prepend" v-if="queryParams.chargetype !== 3" | |||
| ><span class="word">户主:</span></template | |||
| > | |||
| <template slot="prepend" v-if="queryParams.chargetype === 3" | |||
| ><span class="word">联系人:</span></template | |||
| > | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item class="property"> | |||
| <el-input | |||
| v-model="queryParams.phone1" | |||
| size="small" | |||
| placeholder="请输入内容" | |||
| > | |||
| <template slot="prepend" | |||
| ><span class="word">联系电话:</span></template | |||
| > | |||
| </el-input> | |||
| </el-form-item> | |||
| <el-form-item | |||
| class="property" | |||
| label="户号:" | |||
| v-if="queryParams.chargetype === 3" | |||
| > | |||
| <el-input | |||
| v-model="queryParams.buildingid" | |||
| size="small" | |||
| placeholder="楼号" | |||
| style="display: inline-block; width: 60px" | |||
| /> | |||
| <span> 幢 </span> | |||
| <el-input | |||
| v-model="queryParams.unit" | |||
| size="small" | |||
| placeholder="单元号" | |||
| style="display: inline-block; width: 80px" | |||
| /> | |||
| <span> 单元 </span> | |||
| <el-input | |||
| v-model="queryParams.room" | |||
| placeholder="房间号" | |||
| size="small" | |||
| style="display: inline-block; width: 80px" | |||
| /> | |||
| <span> 室 </span> | |||
| </el-form-item> | |||
| </el-form> | |||
| <div style="width: 54%; float: left; margin-top: -10px"> | |||
| <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> | |||
| <el-tab-pane label="物业费" name="1"> | |||
| <ul class="ul"> | |||
| <li | |||
| v-for="item in fees" | |||
| :key="item.key" | |||
| class="li" | |||
| :class="{ liClick: item.key === fewMonths && item.key > 0 }" | |||
| @click="liEvent(item.value, item.key)" | |||
| > | |||
| <div>{{ item.key }}个月</div> | |||
| <div>{{ item.value }}元</div> | |||
| </li> | |||
| <br /> | |||
| <br /> | |||
| </ul> | |||
| </el-tab-pane> | |||
| <el-tab-pane label="电梯卡费" name="2"> | |||
| <ul class="ul"> | |||
| <li | |||
| v-for="item in fees" | |||
| :key="item.key" | |||
| class="li" | |||
| :class="{ | |||
| liClick: | |||
| item.value === queryParams.contracttab.chargedexpense && | |||
| item.value > 0, | |||
| }" | |||
| @click="liEvent(item.value)" | |||
| > | |||
| <div>{{ item.key }}个月</div> | |||
| <div>{{ item.value }}元</div> | |||
| </li> | |||
| <br /> | |||
| <br /> | |||
| </ul> | |||
| </el-tab-pane> | |||
| <el-tab-pane label="车位费" name="3"> | |||
| <ul class="ul"> | |||
| <li | |||
| v-for="item in fees" | |||
| :key="item.key" | |||
| class="li" | |||
| :class="{ | |||
| liClick: | |||
| item.value === queryParams.contracttab.chargedexpense && | |||
| item.value > 0, | |||
| }" | |||
| @click="liEvent(item.value)" | |||
| > | |||
| <div>{{ item.key }}个月</div> | |||
| <div>{{ item.value }}元</div> | |||
| </li> | |||
| <br /> | |||
| <br /> | |||
| </ul> | |||
| </el-tab-pane> | |||
| </el-tabs> | |||
| <br /> | |||
| <div style="text-align: center" v-if="queryParams.chargetype === 1"> | |||
| <span class="word-title">缴费月数:</span> | |||
| <el-input-number | |||
| v-model="fewMonths" | |||
| style="width: 26%" | |||
| @change="monthNumChange" | |||
| size="small" | |||
| :min="0" | |||
| label="描述文字" | |||
| ></el-input-number> | |||
| <!-- <span class="word-title">补缴天数:</span> | |||
| <el-input-number | |||
| v-model="fewDays" | |||
| style="width: 26%" | |||
| :step="1" | |||
| step-strictly | |||
| :min="0" | |||
| :max="31" | |||
| @change="daysNumChange" | |||
| size="small" | |||
| ></el-input-number> --> | |||
| <br /> | |||
| <br /> | |||
| </div> | |||
| <div style="text-align: center"> | |||
| <span class="word-title">缴费方式:</span> | |||
| <el-select | |||
| v-model="queryParams.contracttab.chargeway" | |||
| size="small" | |||
| placeholder="请选择" | |||
| style="width: 26%" | |||
| > | |||
| <el-option | |||
| v-for="item in wayArray" | |||
| :key="item" | |||
| :label="item" | |||
| :value="item" | |||
| /> | |||
| </el-select> | |||
| <span class="word-title">缴费金额:</span> | |||
| <el-input | |||
| v-model="queryParams.contracttab.chargedexpense" | |||
| size="small" | |||
| disabled | |||
| placeholder="请输入" | |||
| style="width: 26%" | |||
| /> | |||
| <br /> | |||
| <br /> | |||
| <span class="word-title">开始日期:</span> | |||
| <el-date-picker | |||
| v-model="queryParams.begindate" | |||
| type="date" | |||
| placeholder="选择日期" | |||
| @change="handleBeginChange" | |||
| value-format="yyyy-MM-dd" | |||
| style="width: 26%" | |||
| size="small" | |||
| /> | |||
| <span class="word-title" v-if="queryParams.chargetype === 1" | |||
| >结束日期:</span | |||
| > | |||
| <el-date-picker | |||
| v-model="queryParams.enddate" | |||
| disabled | |||
| type="date" | |||
| placeholder="选择日期" | |||
| value-format="yyyy-MM-dd" | |||
| style="width: 26%" | |||
| v-if="queryParams.chargetype === 1" | |||
| size="small" | |||
| /> | |||
| <span class="word-title" v-if="queryParams.chargetype !== 1" | |||
| >收款人员:</span | |||
| > | |||
| <el-input | |||
| v-model="queryParams.contracttab.createby" | |||
| size="small" | |||
| v-if="queryParams.chargetype !== 1" | |||
| placeholder="请输入" | |||
| style="width: 26%" | |||
| /> | |||
| <br /> | |||
| <br /> | |||
| <span class="word-title">缴费日期:</span> | |||
| <el-date-picker | |||
| v-model="queryParams.chargetime" | |||
| type="date" | |||
| placeholder="选择日期" | |||
| value-format="yyyy-MM-dd" | |||
| style="width: 26%" | |||
| size="small" | |||
| /> | |||
| <span class="word-title" v-if="queryParams.chargetype === 1" | |||
| >收款人员:</span | |||
| > | |||
| <span class="word-title" v-if="queryParams.chargetype === 2" | |||
| >卡 号:</span | |||
| > | |||
| <span class="word-title" v-if="queryParams.chargetype === 3" | |||
| >车 牌 号:</span | |||
| > | |||
| <el-input | |||
| v-model="queryParams.contracttab.createby" | |||
| size="small" | |||
| v-if="queryParams.chargetype === 1" | |||
| placeholder="请输入" | |||
| style="width: 26%" | |||
| /> | |||
| <el-select | |||
| v-if="queryParams.chargetype === 2" | |||
| v-model="queryParams.accesscardid" | |||
| size="small" | |||
| placeholder="请选择" | |||
| style="width: 26%" | |||
| > | |||
| <el-option | |||
| v-for="item in accesscardlist" | |||
| :key="item" | |||
| :label="item" | |||
| :value="item" | |||
| /> | |||
| </el-select> | |||
| <el-input | |||
| v-model="queryParams.carportid" | |||
| v-if="queryParams.chargetype === 3" | |||
| disabled | |||
| placeholder="" | |||
| style="width: 26%" | |||
| /> | |||
| <br /> | |||
| <br /> | |||
| <el-button | |||
| type="primary" | |||
| :disabled="!queryParams.contracttab.chargedexpense > 0" | |||
| :loading="loading" | |||
| @click="payEvent" | |||
| >缴费</el-button | |||
| > | |||
| <el-button v-print="'#data'" style="margin-left: 80px" :disabled="!receiptDetails.contracttab || !receiptDetails.contracttab.serialnumber" type="primary"> | |||
| 打印 | |||
| </el-button> | |||
| </div> | |||
| </div> | |||
| <div | |||
| id="print" | |||
| style=" | |||
| display: inline-block; | |||
| width: 42%; | |||
| margin-left: 4%; | |||
| margin-bottom: 200px; | |||
| " | |||
| > | |||
| <div style="width: 480px; text-align: center; margin: 0 0 10px 0"> | |||
| 收款凭证 | |||
| </div> | |||
| <div style="margin: 0 0 8px 0; font-size: 16px"> | |||
| 编号: {{ serialnumber }} | |||
| </div> | |||
| <mailTable | |||
| :table-data="tableData" | |||
| :table-style="{ width: '480px' }" | |||
| style="margin-top: -10px" | |||
| > | |||
| /> | |||
| </mailTable> | |||
| </div> | |||
| <div id="data"> | |||
| <ReceiptPrinting :data="receiptDetails" /> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import mailTable from '@/components/ColumnTable/tableComponent'; | |||
| import ReceiptPrinting from '@/components/receiptPrinting.vue'; | |||
| import moment from 'moment' | |||
| import { | |||
| getPropertyTab, | |||
| getAccesscardTab, | |||
| getCarportTab, | |||
| addContract, | |||
| getCountMoney | |||
| } from '@/api/property/pay' | |||
| export default { | |||
| name: 'Pay', | |||
| components: { | |||
| mailTable, | |||
| ReceiptPrinting | |||
| }, | |||
| data() { | |||
| return { | |||
| fewMonths: 0, // 月数 | |||
| fewDays: '', // 天数 | |||
| ratesDay: '', // 收费标准-1天-1平米 | |||
| // 查询参数 | |||
| queryParams: { | |||
| chargetype: 1, | |||
| buildingid: undefined, | |||
| unit: undefined, | |||
| room: undefined, | |||
| carPort: undefined, | |||
| accesscardid: undefined, | |||
| contact: undefined, | |||
| constructionarea: undefined, | |||
| phone1: undefined, | |||
| begindate: undefined, | |||
| enddate: undefined, | |||
| contracttab: { | |||
| chargedexpense: undefined, | |||
| enddate: undefined, | |||
| chargeway: undefined, | |||
| createby: undefined | |||
| } | |||
| }, | |||
| queryHistoryParams: { | |||
| pageIndex: 1, | |||
| pageSize: 10 | |||
| }, | |||
| feesType: [ | |||
| { value: 1, label: '物业费' }, | |||
| { value: 2, label: '电梯卡费' }, | |||
| { value: 3, label: '车位费' } | |||
| ], | |||
| fees: [ | |||
| { key: 12, value: 0 }, | |||
| { key: 6, value: 0 }, | |||
| { key: 3, value: 0 }, | |||
| { key: 1, value: 0 } | |||
| ], | |||
| // wayArray: ['现金', '微信', '支付宝', '银行卡', '其它'], | |||
| wayArray: ['现金', '扫码', '银行卡', '其它'], | |||
| tableData: [ | |||
| { key: '楼盘名称', value: '' }, | |||
| { key: '收款时间', value: '' }, | |||
| { key: '户主姓名', value: '' }, | |||
| { key: '户号', value: '' }, | |||
| { key: '收费项目', value: '' }, | |||
| { key: '缴费区间', value: '' }, | |||
| { key: '建筑面积', value: '' }, | |||
| { key: '电梯卡', value: '' }, | |||
| { key: '车位', value: '' }, | |||
| { key: '月份', value: '' }, | |||
| { key: '金额', value: '' }, | |||
| { key: '支付方式', value: '' }, | |||
| { key: '收款人', value: '' } | |||
| ], | |||
| tempArrayData: [ | |||
| { key: '楼盘名称', value: '' }, | |||
| { key: '收款时间', value: '' }, | |||
| { key: '户主姓名', value: '' }, | |||
| { key: '户号', value: '' }, | |||
| { key: '收费项目', value: '' }, | |||
| { key: '缴费区间', value: '' }, | |||
| { key: '建筑面积', value: '' }, | |||
| { key: '电梯卡', value: '' }, | |||
| { key: '车位', value: '' }, | |||
| { key: '月份', value: '' }, | |||
| { key: '金额', value: '' }, | |||
| { key: '支付方式', value: '' }, | |||
| { key: '收款人', value: '' } | |||
| ], | |||
| historyTable: [], | |||
| headers: [], | |||
| activeName: '1', | |||
| loading: false, | |||
| loadingTable: false, | |||
| total: 0, | |||
| serialnumber: '', | |||
| accesscardlist: [], | |||
| carportidlist: [], | |||
| receiptDetails:{} | |||
| } | |||
| }, | |||
| methods: { | |||
| // changeFewDays() { // 校验补缴天数 | |||
| // var pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式 | |||
| // if (!pattern.test(this.fewDays)) { // 不符合正整数时 | |||
| // this.fewDays = '' // input 框绑定的内容为空 | |||
| // } else if (this.fewDays > 31) { | |||
| // this.fewDays = 31 | |||
| // } | |||
| // }, | |||
| // changeRatesDay() { // 校验收费标准 | |||
| // var reg = /^\d+(?=\.{0,1}\d+$|$)/ // 正数的正则表达式 | |||
| // if (!reg.test(this.ratesDay)) { // 不符合正整数时 | |||
| // this.ratesDay = '' // input 框绑定的内容为空 | |||
| // } | |||
| // }, | |||
| handleBeginChange(value) { | |||
| let endTime = this.createBeginDate(this.queryParams.begindate,parseInt(this.fewMonths)) | |||
| let newEndTime = moment(endTime).add(this.fewDays,'d').format('YYYY-MM-DD') | |||
| this.queryParams.enddate = newEndTime | |||
| }, | |||
| handleQuery() { | |||
| this.resetFees() | |||
| this.fewMonths = 0 | |||
| switch (this.queryParams.chargetype) { | |||
| case 1: | |||
| getPropertyTab(this.queryParams).then((res) => { | |||
| this.getTableData(res.data) | |||
| this.fees.forEach((item) => { | |||
| item.value = Math.round( | |||
| item.key * this.queryParams.unitprice * this.queryParams.constructionarea | |||
| ) | |||
| }) | |||
| }) | |||
| break | |||
| case 2: | |||
| getAccesscardTab(this.queryParams).then((res) => { | |||
| this.getTableData(res.data) | |||
| this.fees.forEach((item) => { | |||
| item.value = Math.round(item.key * this.queryParams.unitprice) | |||
| }) | |||
| }) | |||
| break | |||
| case 3: | |||
| getCarportTab(this.queryParams).then((res) => { | |||
| this.getTableData(res.data) | |||
| this.fees.forEach((item) => { | |||
| item.value = Math.round(item.key * this.queryParams.unitprice) | |||
| }) | |||
| }) | |||
| break | |||
| default: | |||
| // console.log('请选择类型') | |||
| } | |||
| }, | |||
| handleClick(tab, event) { | |||
| this.queryParams.chargetype = parseInt(this.activeName) | |||
| this.queryParams.contracttab = {} | |||
| this.queryParams.phone1 = undefined | |||
| this.queryParams.contact = undefined | |||
| this.queryParams.constructionarea = undefined | |||
| this.queryParams.unitprice = undefined | |||
| this.resetFees() | |||
| }, | |||
| resetFees() { | |||
| this.fees = [ | |||
| { key: 12, value: 0 }, | |||
| { key: 6, value: 0 }, | |||
| { key: 3, value: 0 }, | |||
| { key: 1, value: 0 } | |||
| ] | |||
| }, | |||
| payEvent() { | |||
| this.queryParams.contracttab.chargedexpense = parseFloat( | |||
| this.queryParams.contracttab.chargedexpense | |||
| ) | |||
| if (this.queryParams.chargetype === 1) { | |||
| if (this.fewMonths > 0) { | |||
| this.queryParams.months = this.fewMonths | |||
| } else { | |||
| this.queryParams.months = 0 | |||
| } | |||
| if (this.fewDays) { | |||
| this.fewDays = Number(this.fewDays) | |||
| } | |||
| if (this.fewDays > 0) { | |||
| this.queryParams.days = this.fewDays | |||
| } else { | |||
| this.queryParams.days = 0 | |||
| } | |||
| } | |||
| this.$confirm( | |||
| '是否确认缴费, 金额为' + this.queryParams.contracttab.chargedexpense, | |||
| '提示', | |||
| { | |||
| confirmButtonText: '确定', | |||
| cancelButtonText: '取消', | |||
| type: 'warning' | |||
| } | |||
| ) | |||
| .then(() => { | |||
| this.loading = true | |||
| addContract(this.queryParams) | |||
| .then((res) => { | |||
| // console.log(res) | |||
| this.handleQuery() | |||
| if (res.code === 200) { | |||
| this.$message({ | |||
| message: '缴费成功', | |||
| type: 'success' | |||
| }) | |||
| this.fewMonths = 0 | |||
| this.fewDays = 0 | |||
| } | |||
| this.loading = false | |||
| }) | |||
| .catch((res) => { | |||
| this.loading = false | |||
| }) | |||
| }) | |||
| .then(() => {}) | |||
| .catch(function () {}) | |||
| }, | |||
| // 获取金额 | |||
| getCountMoney() { | |||
| let params = { | |||
| beginDate: this.queryParams.begindate, | |||
| lenDay: this.fewDays ? this.fewDays : 0, | |||
| area: this.queryParams.constructionarea, | |||
| unitPrice: this.queryParams.unitprice, | |||
| months: this.fewMonths ? this.fewMonths : 0 | |||
| } | |||
| getCountMoney(params).then((res) => { | |||
| if (res.code === 200) { | |||
| this.queryParams.contracttab.chargedexpense = res.data | |||
| } | |||
| }) | |||
| }, | |||
| // 改变月数 | |||
| monthNumChange(value) { | |||
| this.fewMonths = value | |||
| var pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式 | |||
| if (!pattern.test(this.fewMonths)) { // 不符合正整数时 | |||
| this.msgError('输入的月数必须为正整数') | |||
| this.fewMonths = '' | |||
| return | |||
| } | |||
| let endTime = this.createBeginDate(this.queryParams.begindate,parseInt(this.fewMonths)) | |||
| let newEndTime = moment(endTime).add(this.fewDays,'d').format('YYYY-MM-DD') | |||
| this.queryParams.enddate = newEndTime | |||
| this.getCountMoney() | |||
| }, | |||
| // 改变天数 | |||
| daysNumChange(value) { | |||
| this.fewDays = value | |||
| var pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式 | |||
| if (!pattern.test(this.fewDays)) { // 不符合正整数时 | |||
| this.msgError('输入的月数必须为正整数') | |||
| this.fewDays = '' | |||
| return | |||
| } | |||
| let endTime = this.createBeginDate(this.queryParams.begindate,parseInt(this.fewMonths)) | |||
| let newEndTime = moment(endTime).add(this.fewDays,'d').format('YYYY-MM-DD') | |||
| this.queryParams.enddate = newEndTime | |||
| this.getCountMoney() | |||
| }, | |||
| // 根据开始日期往后推延n个月，并且返回为yyyy-MM-dd格式 | |||
| createBeginDate(timeValue,monthCount){ | |||
| let newtime = moment(timeValue).add(monthCount,'M').subtract(1,'d').format('YYYY-MM-DD') | |||
| return newtime | |||
| }, | |||
| liEvent(value,keyValue) { | |||
| this.fewMonths = keyValue | |||
| let endTime = this.createBeginDate(this.queryParams.begindate,parseInt(keyValue)) | |||
| let newEndTime = moment(endTime).add(this.fewDays,'d').format('YYYY-MM-DD') | |||
| this.queryParams.enddate = newEndTime | |||
| if (this.queryParams.chargetype === 1) { | |||
| // let moneyValue = value + this.fewDays*this.ratesDay*this.queryParams.constructionarea | |||
| // this.queryParams.contracttab.chargedexpense = Math.round(moneyValue) | |||
| this.getCountMoney() | |||
| } else { | |||
| this.queryParams.contracttab.chargedexpense = value | |||
| } | |||
| }, | |||
| getTableData(arg) { | |||
| this.receiptDetails=arg; | |||
| this.queryParams = arg; | |||
| this.queryParams.cidName=this.getValue(arg.cid); | |||
| this.queryParams.contracttab.chargedexpense = undefined | |||
| this.queryParams.begindate = arg.contracttab.enddate | |||
| this.queryParams.carportid = arg.carportid | |||
| this.serialnumber = arg.contracttab.serialnumber | |||
| this.accesscardlist = arg.accesscardlist || [] | |||
| // this.carportidlist = arg.carportidlist || [] | |||
| if (this.queryParams.chargetype === 1) { | |||
| this.tableData = this.tempArrayData.filter( | |||
| (item) => item.key !== '车位' && item.key !== '电梯卡' | |||
| ) | |||
| } | |||
| if (this.queryParams.chargetype === 2) { | |||
| this.tableData = this.tempArrayData.filter( | |||
| (item) => item.key !== '建筑面积' && item.key !== '车位' | |||
| ) | |||
| } | |||
| if (this.queryParams.chargetype === 3) { | |||
| this.tableData = this.tempArrayData.filter( | |||
| (item) => item.key !== '建筑面积' && item.key !== '电梯卡' | |||
| ) | |||
| } | |||
| this.tableData.forEach((item) => { | |||
| switch (item.key) { | |||
| case '楼盘名称': | |||
| item.value = this.getValue(arg.cid) | |||
| break | |||
| case '收款时间': | |||
| item.value = arg.contracttab.chargetime | |||
| break | |||
| case '户主姓名': | |||
| item.value = arg.contact | |||
| break | |||
| case '户号': | |||
| item.value = `${arg.buildingid}-${arg.unit}-${arg.room}` | |||
| break | |||
| case '收费项目': | |||
| item.value = | |||
| arg.chargetype === 2 | |||
| ? '电梯卡费' | |||
| : arg.chargetype === 3 | |||
| ? '车位费' | |||
| : '物业费' | |||
| break | |||
| case '缴费区间': | |||
| item.value = `${arg.contracttab.begdate} 至 ${arg.contracttab.enddate}` | |||
| break | |||
| case '建筑面积': | |||
| item.value = arg.constructionarea | |||
| break | |||
| case '电梯卡': | |||
| item.value = arg.accesscardid | |||
| break | |||
| case '车位': | |||
| item.value = arg.carportid | |||
| break | |||
| case '月份': | |||
| item.value = arg.contracttab.lengthdate | |||
| break | |||
| case '金额': | |||
| item.value = arg.contracttab.chargableexpense | |||
| this.fewMonths = 0 | |||
| let endTime = this.createBeginDate(this.queryParams.begindate,parseInt(this.fewMonths)) | |||
| this.queryParams.enddate = endTime | |||
| break | |||
| case '支付方式': | |||
| item.value = arg.contracttab.chargeway | |||
| break | |||
| case '收款人': | |||
| item.value = arg.contracttab.createby | |||
| break | |||
| default: | |||
| // console.log(item.key) | |||
| } | |||
| }) | |||
| } | |||
| }, | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .app-container { | |||
| overflow-y: hidden; | |||
| min-width: 720px; | |||
| height: calc(100vh - 86px); | |||
| } | |||
| .word { | |||
| color: black; | |||
| font-weight: 550; | |||
| width: 300px; | |||
| } | |||
| .word-title { | |||
| color: black; | |||
| font-weight: 550; | |||
| font-size: 14px; | |||
| } | |||
| .property { | |||
| margin-top: -20px; | |||
| } | |||
| .ul { | |||
| list-style: none; | |||
| margin: 0; | |||
| text-align: center; | |||
| margin-top: 40px; | |||
| } | |||
| .li { | |||
| display: inline-block; | |||
| line-height: 40px; | |||
| margin-right: 20px; | |||
| width: 104px; | |||
| border: 1px solid black; | |||
| text-align: center; | |||
| background: #b7caee; | |||
| color: #333; | |||
| cursor: pointer; | |||
| } | |||
| .liClick { | |||
| background: #4d88f7; | |||
| } | |||
| </style> | |||