其他缴费添加缴费时间字段

.env.development

@@ -5,6 +5,6 @@ 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'

src/views/property/otherPay.vue

@@ -1,141 +1,199 @@
 <template>
   <div class="app-container">
-    <el-form ref="queryForm"
-             :model="queryParams"
-             :inline="true">
+    <el-form ref="queryForm" :model="queryParams" :inline="true">
       <el-form-item label="收费项目:">
-        <el-select v-model="queryParams.category"
-                   size="small"
-                   clearable
-                   placeholder="请选择">
-          <el-option v-for="item in typeArray"
-                     :key="item['stdeftab-lang']"
-                     :label="item['stdeftab-lang']"
-                     :value="item['stdeftab-lang']" />
+        <el-select
+          v-model="queryParams.category"
+          size="small"
+          clearable
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in typeArray"
+            :key="item['stdeftab-lang']"
+            :label="item['stdeftab-lang']"
+            :value="item['stdeftab-lang']"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="查询条件:">
-        <el-input v-model="queryParams.remark"
-                  size="small"
-                  clearable
-                  placeholder="请输入电梯卡号/车牌号" />
+        <el-input
+          v-model="queryParams.remark"
+          size="small"
+          clearable
+          placeholder="请输入电梯卡号/车牌号"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary"
-                   icon="el-icon-search"
-                   size="mini"
-                   @click="handleQuery">搜索</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
       </el-form-item>
     </el-form>
     <div style="width:54%; float:left; margin-top:5%;">
       <div style="text-align:center;">
         <span class="word-title">收费项目:</span>
-        <el-select v-model="data.category"
-                   size="small"
-                   placeholder="请选择"
-                   style="width:26%;">
-          <el-option v-for="item in typeArray"
-                     :key="item['stdeftab-lang']"
-                     :label="item['stdeftab-lang']"
-                     :value="item['stdeftab-lang']" />
+        <el-select
+          v-model="data.category"
+          size="small"
+          placeholder="请选择"
+          style="width:26%;"
+        >
+          <el-option
+            v-for="item in typeArray"
+            :key="item['stdeftab-lang']"
+            :label="item['stdeftab-lang']"
+            :value="item['stdeftab-lang']"
+          />
         </el-select>
         <span class="word-title">缴费方式:</span>
-        <el-select v-model="data.chargeway"
-                   size="small"
-                   placeholder="请选择"
-                   style="width:26%;">
-          <el-option v-for="item in wayArray"
-                     :key="item"
-                     :label="item"
-                     :value="item" />
+        <el-select
+          v-model="data.chargeway"
+          size="small"
+          placeholder="请选择"
+          style="width:26%;"
+        >
+          <el-option
+            v-for="item in wayArray"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
         </el-select>
-        <br>
-        <br>
+        <br />
+        <br />
         <span class="word-title">开始日期:</span>
-        <el-date-picker v-model="data.chargestartdate"
-                        type="date"
-                        placeholder="选择日期"
-                        value-format="yyyy-MM-dd"
-                        style="width:26%"
-                        size="small" />
+        <el-date-picker
+          v-model="data.chargestartdate"
+          type="date"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          style="width:26%"
+          size="small"
+        />
         <span class="word-title">终止日期:</span>
-        <el-date-picker v-model="data.chargeenddate"
-                        type="date"
-                        placeholder="选择日期"
-                        value-format="yyyy-MM-dd"
-                        style="width:26%"
-                        size="small" />
-        <br>
-        <br>
+        <el-date-picker
+          v-model="data.chargeenddate"
+          type="date"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          style="width:26%"
+          size="small"
+        />
+        <br />
+        <br />
         <span class="word-title">缴费金额:</span>
-        <el-input v-model="data.charge_money"
-                  size="small"
-                  placeholder="请输入"
-                  style="width:26%;" />
+        <el-input
+          v-model="data.charge_money"
+          size="small"
+          placeholder="请输入"
+          style="width:26%;"
+        />
         <span class="word-title">收款人员:</span>
-        <el-input v-model="data.chargeby"
-                  size="small"
-                  placeholder="请输入"
-                  style="width:26%;" />
-        <br>
-        <br>
+        <el-input
+          v-model="data.chargeby"
+          size="small"
+          placeholder="请输入"
+          style="width:26%;"
+        />
+        <br />
+        <br />
         <span class="word-title">缴费备注:</span>
-        <el-input v-model="data.remark"
-                  size="small"
-                  placeholder="请输入电梯卡号/车牌号"
-                  style="width:26%;" />
+        <el-input
+          v-model="data.remark"
+          size="small"
+          placeholder="请输入电梯卡号/车牌号"
+          style="width:26%;"
+        />
+        <span class="word-title">缴费时间:</span>
+        <el-date-picker
+          v-model="data.chargetime"
+          type="date"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+          style="width:26%"
+          size="small"
+        />
+        <br />
+        <br />
         <span class="word-title">联 系 人:</span>
-        <el-input v-model="data.contact"
-                  size="small"
-                  placeholder="请输入"
-                  style="width:26%;" />
-        <br>
-        <br>
+        <el-input
+          v-model="data.contact"
+          size="small"
+          placeholder="请输入"
+          style="width:26%;"
+        />
         <span class="word-title">联系方式:</span>
-        <el-input v-model="data.phone"
-                  size="small"
-                  placeholder="请输入"
-                  style="width:60%;" />
-        <br>
-        <br>
-        <el-button type="primary"
-                   :disabled="!data.charge_money > 0"
-                   :loading="loading"
-                   @click="payEvent">缴费</el-button>
-        <el-button @click="getNextsnr" v-print="'#data'"
-                   style="margin-left:80px"
-                   type="primary"> 打印 </el-button>
+        <el-input
+          v-model="data.phone"
+          size="small"
+          placeholder="请输入"
+          style="width:26%;"
+        />
+        <br />
+        <br />
+        <el-button
+          type="primary"
+          :disabled="!data.charge_money > 0"
+          :loading="loading"
+          @click="payEvent"
+          >缴费</el-button
+        >
+        <el-button
+          @click="getNextsnr"
+          v-print="'#data'"
+          style="margin-left:80px"
+          type="primary"
+        >
+          打印
+        </el-button>
       </div>
     </div>
-    <div id="print"
-         style="display:inline-block; width:42%; margin-left:4%;margin-bottom:100%">
-      <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
+      id="print"
+      style="display:inline-block; width:42%; margin-left:4%;margin-bottom:100%"
+    >
+      <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 :printSerialNumber="printSerialNumber" :data="receiptDetails" />
+      <ReceiptPrinting
+        :printSerialNumber="printSerialNumber"
+        :data="receiptDetails"
+      />
     </div>
   </div>
 </template>
 <script>
-import mailTable from '@/components/ColumnTable/tableComponent'
-import ReceiptPrinting from '@/components/receiptPrinting.vue';
-import { getCharge, addCharge } from '@/api/property/otherPay';
-import { getNextsnr } from '@/api/property/pay'
+import mailTable from "@/components/ColumnTable/tableComponent";
+import ReceiptPrinting from "@/components/receiptPrinting.vue";
+import { getCharge, addCharge } from "@/api/property/otherPay";
+import { getNextsnr } from "@/api/property/pay";
 export default {
-  name: 'OtherPay',
+  name: "OtherPay",
   components: {
     mailTable,
     ReceiptPrinting
   },
   data() {
     return {
-      printSerialNumber:'',
-      receiptDetails:{},
+      printSerialNumber: "",
+      receiptDetails: {},
       // 查询参数
       queryParams: {
         chargetype: 4,
@@ -143,131 +201,131 @@ export default {
         remark: undefined
       },
       wayArray: [
-        '现金',
+        "现金",
         // '微信',
         // '支付宝',
-        '扫码',
-        '银行卡',
-        '其它'
+        "扫码",
+        "银行卡",
+        "其它"
       ],
       typeArray: [],
       loading: false,
       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: "" },
+        { key: "缴费区间", value: "" },
+        { key: "金额", value: "" },
+        { key: "缴费备注", value: "" },
+        { key: "支付方式", value: "" },
+        { key: "收款人", value: "" }
       ],
-      serialnumber: '',
+      serialnumber: "",
       data: {}
-    }
+    };
   },
   created() {
-    this.getStanderOne({ statid: 'FEE_TYPE' }).then((res) => {
-      this.typeArray = res.data
-    })
+    this.getStanderOne({ statid: "FEE_TYPE" }).then(res => {
+      this.typeArray = res.data;
+    });
     this.getNextsnr();
   },
   methods: {
-    getNextsnr(){
-      getNextsnr({snrid:'printId'}).then(({data})=>{
-        this.printSerialNumber=data;
-      })
+    getNextsnr() {
+      getNextsnr({ snrid: "printId" }).then(({ data }) => {
+        this.printSerialNumber = data;
+      });
     },
     handleQuery() {
-      getCharge(this.queryParams).then((res) => {
-        this.getTableData(res.data)
-        this.data = res.data
-      })
+      getCharge(this.queryParams).then(res => {
+        this.getTableData(res.data);
+        this.data = res.data;
+      });
     },
     payEvent() {
-      this.data.charge_money = parseFloat(this.data.charge_money)
-      this.$confirm('是否确认缴费, 金额为' + this.data.charge_money, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+      this.data.charge_money = parseFloat(this.data.charge_money);
+      this.$confirm("是否确认缴费, 金额为" + this.data.charge_money, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
       })
         .then(() => {
-          this.loading = true
-          addCharge(this.data).then((res) => {
-            this.handleQuery()
+          this.loading = true;
+          addCharge(this.data).then(res => {
+            this.handleQuery();
             if (res.code === 200) {
               this.$message({
-                message: '缴费成功',
-                type: 'success'
-              })
+                message: "缴费成功",
+                type: "success"
+              });
             }
-            this.loading = false
-          })
+            this.loading = false;
+          });
         })
         .then(() => {})
-        .catch(function () {})
+        .catch(function() {});
     },
     getTableData(arg) {
       this.data = arg;
-      this.receiptDetails={
+      this.receiptDetails = {
         ...arg,
-        contracttab:{
-          serialnumber:arg.serialnumber,
-          lengthdate:'',
-          chargableexpense:arg.charge_money,
-          begdate:arg.chargestartdate,
-          enddate:arg.chargeenddate,
-          chargeway:arg.chargeway,
-          createby:arg.chargeby,
-          chargetime:arg.chargetime,
+        contracttab: {
+          serialnumber: arg.serialnumber,
+          lengthdate: "",
+          chargableexpense: arg.charge_money,
+          begdate: arg.chargestartdate,
+          enddate: arg.chargeenddate,
+          chargeway: arg.chargeway,
+          createby: arg.chargeby,
+          chargetime: arg.chargetime
         },
-        propertyid:arg.contact,
-        cidName:this.getValue(arg.cid)
+        propertyid: arg.contact,
+        cidName: this.getValue(arg.cid)
       };
-      this.serialnumber = arg.serialnumber
-      this.tableData.forEach((item) => {
+      this.serialnumber = arg.serialnumber;
+      this.tableData.forEach(item => {
         switch (item.key) {
-          case '楼盘名称':
-            item.value = this.getValue(arg.cid)
-            break
-          case '收款时间':
-            item.value = arg.chargetime
-            break
-          case '联系人':
-            item.value = arg.contact
-            break
-          case '收费项目':
-            item.value = arg.category
-            break
-          case '缴费区间':
-            item.value = `${arg.chargestartdate} 至 ${arg.chargeenddate}`
-            break
-          case '金额':
-            item.value = arg.charge_money
-            break
-          case '缴费备注':
-            item.value = arg.remark
-            break
-          case '支付方式':
-            item.value = arg.chargeway
-            break
-          case '收款人':
-            item.value = arg.chargeby
-            break
+          case "楼盘名称":
+            item.value = this.getValue(arg.cid);
+            break;
+          case "收款时间":
+            item.value = arg.chargetime;
+            break;
+          case "联系人":
+            item.value = arg.contact;
+            break;
+          case "收费项目":
+            item.value = arg.category;
+            break;
+          case "缴费区间":
+            item.value = `${arg.chargestartdate} 至 ${arg.chargeenddate}`;
+            break;
+          case "金额":
+            item.value = arg.charge_money;
+            break;
+          case "缴费备注":
+            item.value = arg.remark;
+            break;
+          case "支付方式":
+            item.value = arg.chargeway;
+            break;
+          case "收款人":
+            item.value = arg.chargeby;
+            break;
           default:
-            console.log(item.key)
+            console.log(item.key);
         }
-      })
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-.app-container{
+.app-container {
   overflow: hidden;
-  height: calc( 100vh - 60px );
+  height: calc(100vh - 60px);
 }
 .word {
   color: black;