Merge pull request '管理员缴费和缴费' (#18) from feature_approval into develop

Reviewed-on: #18

src/views/property/pay.vue

@@ -232,6 +232,7 @@
         <el-input
           v-model="queryParams.contracttab.chargedexpense"
           size="small"
+          disabled
           placeholder="请输入"
           style="width: 26%"
         />

src/views/property/payCopy.vue

@@ -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"
+          >卡&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"
+          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>