From 6e8d0b7babefeff5efa895cf9af8f2f63141eebb Mon Sep 17 00:00:00 2001
From: wangxy <xinyao.wang@le-it.com.cn>
Date: Thu, 22 Apr 2021 13:06:17 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=B4=E8=B4=B9=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.staging                           |   4 +-
 src/layout/components/Sidebar/Logo.vue |   4 +-
 src/views/property/pay.vue             | 172 ++++++++++++++++++-------
 3 files changed, 128 insertions(+), 52 deletions(-)

diff --git a/.env.staging b/.env.staging
index af242d3..2faa01a 100644
--- a/.env.staging
+++ b/.env.staging
@@ -5,7 +5,7 @@ NODE_ENV = 'production'
 
 # base api
 玫苑
-# VUE_APP_BASE_API = 'http://101.201.121.115:8092'
+VUE_APP_BASE_API = 'http://101.201.121.115:8092'
 # 和瑞 
-VUE_APP_BASE_API = 'http://101.201.121.115:8094'
+# VUE_APP_BASE_API = 'http://101.201.121.115:8094'
 
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 6c43dc3..85b0a9a 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -37,8 +37,8 @@ export default {
   },
   data() {
     return {
-      title: `和瑞物业`,
-      // title: `玫苑物业`,
+      // title: `和瑞物业`,
+      title: `玫苑物业`,
       logo: '@/assets/logo/logo.png'
     }
   }
diff --git a/src/views/property/pay.vue b/src/views/property/pay.vue
index 28f705d..4f76465 100644
--- a/src/views/property/pay.vue
+++ b/src/views/property/pay.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="app-container">
-    <el-form ref="queryForm"
-             :model="queryParams"
-             :inline="true">
-      <el-form-item label="户号:">
+    <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="楼号"
@@ -20,15 +18,13 @@
                   style="display: inline-block; width:80px" />
         <span> 室 </span>
       </el-form-item>
-      <el-form-item v-if="queryParams.chargetype === 2"
-                    label="卡号">
+      <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-form-item v-if="queryParams.chargetype === 3" label="车位号">
         <el-input v-model="queryParams.carportid"
                   size="small"
                   placeholder="请输入"
@@ -41,17 +37,13 @@
                    @click="handleQuery">搜索</el-button>
       </el-form-item>
       <br>
-      <el-form-item v-if="queryParams.chargetype === 1"
-                    label="面积:"
-                    class="word property">
+      <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">
+      <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">
+      <el-form-item label="费用已缴至:" class="word property">
         <div>{{ queryParams.contracttab.enddate }}</div>
       </el-form-item>
       <br>
@@ -63,32 +55,45 @@
         </el-input>
       </el-form-item>
       <el-form-item class="property">
-        <el-input v-if="queryParams.chargetype === 1"
-                  v-model="queryParams.phone1"
+        <el-input v-model="queryParams.phone1"
                   size="small"
                   placeholder="请输入内容">
           <template slot="prepend"><span class="word">联系电话:</span></template>
         </el-input>
-        <el-input v-else
+        <!-- <el-input v-else
                   v-model="queryParams.contracttab.mobile"
                   size="small"
                   placeholder="请输入内容">
           <template slot="prepend"><span class="word">联系电话:</span></template>
-        </el-input>
+        </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">
+      <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.value === queryParams.contracttab.chargedexpense && item.value > 0 }"
-                @click="liEvent(item.value)">
+                @click="liEvent(item.value,item.key)">
               <div>{{ item.key }}个月</div>
               <div>{{ item.value }}元</div>
             </li>
@@ -96,8 +101,7 @@
             <br>
           </ul>
         </el-tab-pane>
-        <el-tab-pane label="电梯卡费"
-                     name="2">
+        <el-tab-pane label="电梯卡费" name="2">
           <ul class="ul">
             <li v-for="item in fees"
                 :key="item.key"
@@ -111,8 +115,7 @@
             <br>
           </ul>
         </el-tab-pane>
-        <el-tab-pane label="车位费"
-                     name="3">
+        <el-tab-pane label="车位费" name="3">
           <ul class="ul">
             <li v-for="item in fees"
                 :key="item.key"
@@ -128,6 +131,21 @@
         </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" :max="60" label="描述文字"></el-input-number>
+					<span v-if="queryParams.chargetype === 1"
+              class="word-title"
+              style="width:60px;height:20px;display:inline-block"></span>
+					<span v-if="queryParams.chargetype === 1"
+              style="width:26%;height:20px;display:inline-block"></span>
+				<br>
+        <br>
+			</div>
       <div style="text-align:center;">
         <span class="word-title">缴费方式:</span>
         <el-select v-model="queryParams.contracttab.chargeway"
@@ -150,15 +168,26 @@
         <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">收款人员:</span>
+				<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>
         <br>
         <span class="word-title">缴费日期:</span>
         <el-date-picker v-model="queryParams.chargetime"
@@ -167,13 +196,14 @@
                         value-format="yyyy-MM-dd"
                         style="width:26%"
                         size="small" />
-        <span class="word-title"
-              v-if="queryParams.chargetype === 2">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span>
-        <span class="word-title"
-              v-if="queryParams.chargetype === 3">车&nbsp;&nbsp;牌&nbsp;&nbsp;号:</span>
-        <span v-if="queryParams.chargetype === 1"
-              class="word-title"
-              style="width:60px;height:20px;display:inline-block"></span>
+				<span class="word-title" v-if="queryParams.chargetype === 1">收款人员:</span>
+        <span class="word-title" v-if="queryParams.chargetype === 2">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span>
+        <span class="word-title" v-if="queryParams.chargetype === 3">车&nbsp;&nbsp;牌&nbsp;&nbsp;号:</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"
@@ -184,18 +214,22 @@
                      :label="item"
                      :value="item" />
         </el-select>
-        <el-select v-if="queryParams.chargetype === 3"
+				<el-input v-model="queryParams.carportid"
+									v-if="queryParams.chargetype === 3"
+									disabled
+                  placeholder=""
+                  style="width:26%;" />
+        <!-- <el-select v-if="queryParams.chargetype === 3"
                    v-model="queryParams.carportid"
                    size="small"
+									 disabled
                    placeholder="请选择"
                    style="width:26%;">
           <el-option v-for="item in carportidlist"
                      :key="item"
                      :label="item"
                      :value="item" />
-        </el-select>
-        <span v-if="queryParams.chargetype === 1"
-              style="width:26%;height:20px;display:inline-block"></span>
+        </el-select> -->
         <br>
         <br>
         <el-button type="primary"
@@ -233,6 +267,7 @@ export default {
   },
   data() {
     return {
+			fewMonths: 0,
       // 查询参数
       queryParams: {
         chargetype: 1,
@@ -245,6 +280,7 @@ export default {
         constructionarea: undefined,
         phone1: undefined,
         begindate: undefined,
+				enddate: undefined,
         contracttab: {
           chargedexpense: undefined,
           enddate: undefined,
@@ -311,17 +347,20 @@ export default {
     }
   },
   methods: {
+		handleBeginChange(value) {
+			let endTime = this.createBeginDate(value,parseInt(this.fewMonths))
+			this.queryParams.enddate = endTime
+		},
     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
+                item.key * this.queryParams.unitprice * this.queryParams.constructionarea
               )
             })
           })
@@ -397,15 +436,49 @@ export default {
         .then(() => {})
         .catch(function () {})
     },
-    liEvent(value) {
+		// 改变月数
+		monthNumChange(value) {
+			this.fewMonths = value
+			let endTime = this.createBeginDate(this.queryParams.begindate,parseInt(this.fewMonths))
+			this.queryParams.enddate = endTime
+			let oneMonthMoney = this.queryParams.unitprice * this.queryParams.constructionarea
+			this.queryParams.contracttab.chargedexpense = Math.round(oneMonthMoney*value)
+		},
+		// 根据开始日期往后推延n个月，并且返回为yyyy-MM-dd格式
+		createBeginDate(timeValue,monthCount){
+	    var date = new Date(timeValue);
+	    date.setMonth(date.getMonth()+monthCount);
+	    date.toLocaleDateString()
+	    var y = date.getFullYear()
+	    var m = date.getMonth() + 1
+	    m = m < 10 ? ('0' + m) : m
+	    var d = date.getDate()
+	    d = d < 10 ? ('0' + d) : d
+	    const time = y + '-' + m + '-' + d
+			var oldTime = (new Date(time)).getTime()-24*3600*1000
+			var newTime = new Date(oldTime);
+			var year = newTime.getFullYear()
+			var month = newTime.getMonth()+1
+			month= month < 10 ? ('0' + month) : month
+			var date = newTime.getDate()
+			date = date < 10 ? ('0' + date) : date
+			const newtime = year + '-' + month + '-' + date
+	    return newtime
+    },
+    liEvent(value,keyValue) {
+			this.fewMonths = keyValue
+			let endTime = this.createBeginDate(this.queryParams.begindate,parseInt(keyValue))
+			this.queryParams.enddate = endTime
       this.queryParams.contracttab.chargedexpense = value
     },
     getTableData(arg) {
       this.queryParams = arg
+			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 || []
+      // this.carportidlist = arg.carportidlist || []
       if (this.queryParams.chargetype === 1) {
         this.tableData = this.tempArrayData.filter(
           (item) => item.key !== '车位' && item.key !== '电梯卡'
@@ -459,7 +532,10 @@ export default {
             item.value = arg.contracttab.lengthdate
             break
           case '金额':
-            item.value = arg.contracttab.chargedexpense
+            // item.value = arg.contracttab.chargedexpense
+						this.fewMonths = 0
+						let endTime = this.createBeginDate(this.queryParams.begindate,parseInt(this.fewMonths))
+						this.queryParams.enddate = endTime
             break
           case '支付方式':
             item.value = arg.contracttab.chargeway