1

src/api/invoke_methods.js

@@ -38,7 +38,7 @@ import {
   updateContract,
   terminateContract, 
   returnDeposit,
-  listPlanning,
+  listPlanningByContractId,
   listDriver,
   createDriver,
   updateDriver,
@@ -47,6 +47,12 @@ import {
   createFee, 
   disableFee, 
   enableFee,
+  searchPlanning, 
+  paying,
+  delay,
+  getContract,
+  getDriver,
+  getVehicle,
 } from "./request_methods";
 
 export default {
@@ -185,8 +191,17 @@ export default {
     asyncReturnDeposit(_, payload) {
       return returnDeposit(payload)
     },
-    asyncListPlanning(_, payload) {
-      return listPlanning(payload)
+    asyncListPlanningByContractId(_, payload) {
+      return listPlanningByContractId(payload)
+    },
+    asyncSearchPlanning(_, payload) {
+      return searchPlanning(payload)
+    },
+    asyncPaying(_, payload) {
+      return paying(payload)
+    },
+    asyncDelay(_, payload) {
+      return delay(payload)
     },
 
     asyncListDriver(_, payload) {
@@ -202,6 +217,15 @@ export default {
       return updateDriver(payload)
     },
     
+    asyncGetContract(_, payload) {
+      return getContract(payload)
+    },
+    asyncGetDriver(_, payload) {
+      return getDriver(payload)
+    },
+    asyncGetVehicle(_, payload) {
+      return getVehicle(payload)
+    },
   },
   mutations: {
   }

src/api/request_methods.js

 import axios from "@/libs/axios";
 import { stringify } from "qs";
 const proxy = process.env.NODE_ENV == 'development' ? "/apis" : "https://smp.sskuaixiu.com/api/order/pub-open/";
-if(process.env.NODE_ENV == 'development') {
-    console.log("dev: " + proxy);
-} else {
-    console.log("env: " + proxy);
-}
+// if(process.env.NODE_ENV == 'development') {
+//     console.log("dev: " + proxy);
+// } else {
+//     console.log("env: " + proxy);
+// }
 // 上传文件
 export const uploadFile = params => axios.post(`${proxy}/file/upload`, params, { "Content-Type": "multipart/form-data" });
 // 行驶证识别
@@ -97,7 +97,13 @@ export const terminateContract = data => axios.post(`${proxy}/contract/terminate
 // 合同 / 车源合同 返还押金
 export const returnDeposit = data => axios.post(`${proxy}/contract/return/deposit`, data);
 // 合同 / 费用计划列表
-export const listPlanning = data => axios.post(`${proxy}/contract/list/planning/${data.contractId}/${data.type}`);
+export const listPlanningByContractId = data => axios.post(`${proxy}/planning/list/${data.contractId}/${data.type}`);
+// 应收帐款 / 费用计划列表
+export const searchPlanning = data => axios.post(`${proxy}/planning/list/`, data);
+// 应收帐款 / 付款
+export const paying = data => axios.post(`${proxy}/planning/paying/`, data);
+// 应收帐款 / 延期
+export const delay = data => axios.post(`${proxy}/planning/delay/`, data);
 
 // 司机 / 列表
 export const listDriver = data => axios.post(`${proxy}/driver/list`, data);
@@ -106,3 +112,10 @@ export const listAllDriver = data => axios.post(`${proxy}/driver/list/all`, data
 export const createDriver = data => axios.post(`${proxy}/driver/create`, data);
 // 司机 / 更新
 export const updateDriver = data => axios.post(`${proxy}/driver/update`, data);
+
+// 合同 / 根据id获取合同信息
+export const getContract = data => axios.post(`${proxy}/contract/get/${data}`);
+// 司机 / 根据id获取司机信息
+export const getDriver = data => axios.post(`${proxy}/driver/get/${data}`);
+// 车辆 / 根据id获取车辆信息
+export const getVehicle = data => axios.post(`${proxy}/vehicle/get/${data}`);
\ No newline at end of file

src/libs/constants.js

@@ -21,3 +21,10 @@ export const depositStatusOption = [
     {text: "部分已退", value: 1},
     {text: "全部已退", value: 2},
 ];
+
+// 费用计划，付款状态
+export const paymentStatusOption = [
+    {text: "未付", value: 0},
+    {text: "部分已付", value: 1},
+    {text: "全部已付", value: 2},
+];

src/router/routers.js

@@ -181,20 +181,12 @@ export default [
           component: () => import("@/view/driver_contract/list/index.vue")
         }, 
         {
-          path: '/driver_contract/bill_week',
-          key: 'driver_contract_bill_week',
+          path: '/driver_contract/receivables',
+          key: 'driver_receivables',
           icon: 'logo-xbox',
-          title: '七日内交租',
-          visable: false,
-          component: () => import("@/view/vehicle/list/index.vue")
-        }, 
-        {
-          path: '/driver_contract/bill_month',
-          key: 'driver_contract_bill_month',
-          icon: 'logo-xbox',
-          title: '本月交租',
+          title: '应收帐款',
           visable: false,
-          component: () => import("@/view/vehicle/list/index.vue")
+          component: () => import("@/view/driver_contract/receivables/index.vue")
         }, 
       ]
     },

src/view/driver/add/index.js

@@ -195,7 +195,6 @@ export default {
     },
     saveDriver() {
       this.$refs.driverForm.validate(valid => {
-        console.log("saveDriver:"+valid);
         if (valid) {
           dispatch("invoke/asyncCreateDriver", this.driverForm).then(({ code }) => {
             this.submitLoading = false;

src/view/driver/edit/index.js

@@ -71,7 +71,6 @@ export default {
       this.$refs.driverForm.resetFields();
 
       if(show) {
-        console.log(this.driver);
         this.driverForm.id = this.driver.id;
         this.driverForm.frontFileId = this.driver.frontFile.id;
         this.driverForm.frontFileUrl = this.driver.frontFile.filePath;
@@ -237,7 +236,6 @@ export default {
     },
     saveDriver() {
       this.$refs.driverForm.validate(valid => {
-        console.log("saveDriver:"+valid);
         if (valid) {
           dispatch("invoke/asyncUpdateDriver", this.driverForm).then(({ code }) => {
             this.submitLoading = false;

src/view/driver/list/index.js

@@ -56,7 +56,6 @@ export default {
             records:[],
           };
         }
-        console.log(this.data)
       });
     },
     changePage(current) {

src/view/driver_contract/edit/index.js

@@ -40,7 +40,6 @@ export default {
         diffDepositAmount: null,
         startDate: null,
         endDate: null,
-        depositAmount: null,
         rentAmount: null,
         leaseType: null,
         remark: null,
@@ -64,7 +63,6 @@ export default {
       this.contractForm.diffDepositAmount = null;
       this.contractForm.startDate = null;
       this.contractForm.endDate = null;
-      this.contractForm.depositAmount = null;
       this.contractForm.rentAmount = null;
       this.contractForm.leaseType = null;
       this.contractForm.remark = null;
@@ -86,7 +84,6 @@ export default {
         this.contractForm.startDate = this.contract.startDate;
         this.contractForm.endDate = this.contract.endDate;
         this.contractForm.leaseType = this.contract.leaseType;
-        this.contractForm.depositAmount = this.contract.depositAmount;
         this.contractForm.returnDepositAmount = this.contract.returnDepositAmount;
         this.contractForm.rentAmount = this.contract.rentAmount;
         this.contractForm.remark = this.contract.remark;
@@ -132,7 +129,7 @@ export default {
     listRentPlanning() {
       this.rentLoading = true;
       const requestData = { contractId: this.contract.id, type: 1 };
-      dispatch("invoke/asyncListPlanning", requestData).then(({ data }) => {
+      dispatch("invoke/asyncListPlanningByContractId", requestData).then(({ data }) => {
         this.rentLoading = false;
         this.rentDatas = data;
       });
@@ -140,7 +137,7 @@ export default {
     listFeePlanning() {
       this.feeLoading = true;
       const requestData = { contractId: this.contract.id, type: 2 };
-      dispatch("invoke/asyncListPlanning", requestData).then(({ data }) => {
+      dispatch("invoke/asyncListPlanningByContractId", requestData).then(({ data }) => {
         this.feeLoading = false;
         this.feeDatas = data;
       });

src/view/driver_contract/edit/index.vue

@@ -18,7 +18,7 @@
                     </Row>
                     <Row>
                         <Col span="8">
-                            <FormItem label="应付押金" prop="payableDepositAmount">{{ contractForm.payableDepositAmount }}</FormItem>
+                            <FormItem label="应收押金" prop="payableDepositAmount">{{ contractForm.payableDepositAmount }}</FormItem>
                         </Col>
                         <Col span="8">
                             <FormItem label="实收押金" prop="paidDepositAmount">{{ contractForm.paidDepositAmount }}</FormItem>

src/view/driver_contract/list/index.vue

@@ -5,12 +5,12 @@
                 <Row :gutter="2">
                     <Col span="4">
                       <FormItem label="车辆信息" >
-                        <Input v-model="vehicleInfo" placeholder="车牌号" clearable/> 
+                        <Input v-model="vehicleInfo" placeholder="车牌号/品牌" clearable/> 
                       </FormItem>
                     </Col>
                     <Col span="4">
                       <FormItem label="司机信息" >
-                        <Input v-model="driverInfo" placeholder="姓名/手机号" clearable/> 
+                        <Input v-model="driverInfo" placeholder="姓名/手机号/身份证" clearable/> 
                       </FormItem>
                     </Col>
                     <Col span="4">

src/view/driver_contract/list/return_deposit/index.js

@@ -10,8 +10,6 @@ export default {
       contract: null,
       visible: false,
       submitLoading: false,
-      mainUploadStatus: false,
-      secondUploadStatus: false,
       returnFormRule: {
         returnAmount: [{ required: true, message: "请输入返还金额", trigger: "blur" }, { validator: isInteger, trigger: "blur" } ],
       },

src/view/driver_contract/receivables/delay/index.js

+import store from "@/store";
+const { dispatch } = store;
+import { isInteger } from "@/libs/validator.js";
+import { paymentStatusOption } from "@/libs/constants.js";
+
+export default {
+  components: {  },
+  data() {
+    return {
+      planning: null,
+      visible: false,
+      submitLoading: false,
+      payingFormRule: {
+        amount: [{ required: true, message: "请输入返还金额", trigger: "blur" }, { validator: isInteger, trigger: "blur" } ],
+      },
+      payingForm: {
+        planningId: 0,
+        plateNo: null,
+        paymentStatus: null,
+        planDate: null,
+        delayDate: null,
+        name: null,
+        payableAmount: null,
+        paidAmount: null,
+        diffAmount: null,
+        amount: null,
+        remark: null,
+      },
+      disabledOption: {
+        disabledDate (date) {
+            return date && date.valueOf() < Date.now() - 86400000;
+        }
+      },
+    };
+  },
+  computed: {
+  },
+  watch: {
+    visible(show) {
+      this.submitLoading = false;
+      this.$refs.payingForm.resetFields();
+      this.payingForm.planningId = null;
+      this.payingForm.plateNo = null;
+      this.payingForm.paymentStatus = null;
+      this.payingForm.planDate = null;
+      this.payingForm.delayDate = null;
+      this.payingForm.name = null;
+      this.payingForm.payableAmount = null;
+      this.payingForm.paidAmount = null;
+      this.payingForm.diffAmount = null;
+      this.payingForm.amount = null;
+      this.payingForm.remark = null;
+
+      if(show) {
+        this.payingForm.planningId = this.planning.id;
+        this.payingForm.plateNo = this.planning.plateNo;
+        this.payingForm.planDate = this.planning.planDate;
+        if(this.planning.delayDate) {
+          this.payingForm.delayDate = this.planning.delayDate;
+        } else {
+          this.payingForm.delayDate = this.planning.planDate;
+        }
+        this.payingForm.name = this.planning.name;
+        this.payingForm.payableAmount = this.planning.payableAmount;
+        this.payingForm.paidAmount = this.planning.paidAmount;
+        this.payingForm.diffAmount = this.planning.payableAmount - this.planning.paidAmount;
+        this.payingForm.paymentStatus = paymentStatusOption.filter(item => item.value === this.planning.paymentStatus)[0].text;
+      }
+    },
+  },
+  methods: {
+    setAll() {
+      this.payingForm.amount = "" + this.payingForm.diffAmount;
+    },
+    saveReturnDeposit() {
+      this.$refs.payingForm.validate(valid => {
+        if (valid) {
+          const requestData = {
+            planningId: this.payingForm.planningId,
+            delayDate: this.payingForm.delayDate,
+            remark: this.payingForm.remark,
+          }
+          dispatch("invoke/asyncDelay", requestData).then(({ code }) => {
+            this.submitLoading = false;
+            if (code === 1) {
+              this.$Message.success("延期成功");
+              this.$emit("search");
+              this.visible = false;
+            }
+          });
+        }
+      });
+    },
+  },
+  mounted() {
+  }
+};

src/view/driver_contract/receivables/delay/index.vue

+<template>
+  <div>
+    <Modal width="600" v-model="visible" title="延期" >
+      <div>
+        <Form ref="payingForm" :model="payingForm" :rules="payingFormRule" :label-width="80" label-colon>
+            <Row>
+                <Col span="12">
+                    <FormItem label="车牌号" prop="plateNo">{{ payingForm.plateNo }}</FormItem>
+                </Col>
+                <Col span="12">
+                    <FormItem label="收款状态" prop="status">{{ payingForm.paymentStatus }}</FormItem>
+                </Col>
+            </Row>
+            <Row>
+                <Col span="12">
+                    <FormItem label="应收日期" prop="planDate">{{ payingForm.planDate }}</FormItem>
+                </Col>
+                <Col span="12">
+                    <FormItem label="款项名称" prop="name">{{ payingForm.name }}</FormItem>
+                </Col>
+            </Row>
+            <Row :gutter="10">
+                <Col span="8">
+                    <FormItem label="应收金额" prop="payableAmount">{{ payingForm.payableAmount }}</FormItem>
+                </Col>
+                <Col span="8">
+                    <FormItem label="已收金额" prop="paidAmount">{{ payingForm.paidAmount }}</FormItem>
+                </Col>
+                <Col span="8">
+                    <FormItem label="欠收金额" prop="diffAmount">{{ payingForm.diffAmount }}</FormItem>
+                </Col>
+            </Row>
+            <Row :gutter="10">
+                <Col span="24">
+                    <FormItem label="延期日期" prop="delayDate">
+                        <DatePicker v-model="payingForm.delayDate" style="width: 100%" placeholder="请输入延期日期" :options="disabledOption"></DatePicker>
+                    </FormItem>
+                </Col>
+            </Row>
+            <Row>
+                <Col span="24">
+                    <FormItem label="备注" prop="remark">
+                        <Input v-model="payingForm.remark" type="textarea" :rows="4" placeholder="请输入备注" style="width: 100%" />
+                    </FormItem>
+                </Col>
+            </Row>
+        </Form>
+      </div>
+      <div slot="footer">
+        <Button @click="visible = false">取消</Button>
+        <Button @click="saveReturnDeposit" :loading="submitLoading" type="primary">确定</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script src="./index.js"/>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file

src/view/driver_contract/receivables/helper.js

+import { paymentStatusOption } from "@/libs/constants.js";
+
+export const columns = (search, showContract, showDriver, showVehicle, showPaying, showDelay) => [
+  // {
+  //   title: "id",
+  //   key: "id",
+  //   align: "center",
+  //   width: 60,
+  // },
+  {
+    title: "付款状态",
+    align: "center",
+    minWidth: 120,
+    render: (h, { row }) => {
+      const { paymentStatus } = row;
+      const [{ text }] = paymentStatusOption.filter(item => item.value === paymentStatus);
+      return h("span", text);
+    }
+  },
+  {
+    title: "费用类型",
+    key: "name",
+    align: "center",
+    minWidth: 120,
+  },
+  {
+    title: "合同",
+    align: "center",
+    minWidth: 160,
+    render: (h, { row }) => {
+      const { contractCode } = row;
+      return h(
+        "a",
+        {
+            on: { click: () => { 
+              showContract(row);
+            }}
+        },
+        contractCode
+      );
+    }
+  },
+  {
+    title: "司机",
+    align: "center",
+    minWidth: 100,
+    render: (h, { row }) => {
+      const { driverName } = row;
+      return h(
+        "a",
+        {
+            on: { click: () => { 
+              showDriver(row);
+            }}
+        },
+        driverName
+      );
+    }
+  },
+  {
+    title: "车辆",
+    align: "center",
+    minWidth: 100,
+    render: (h, { row }) => {
+      const { plateNo } = row;
+      return h(
+        "a",
+        {
+            on: { click: () => { 
+              showVehicle(row);
+            }}
+        },
+        plateNo
+      );
+    }
+  },
+  {
+    title: "应收金额",
+    key: "payableAmount",
+    align: "center",
+    minWidth: 100,
+  },
+  {
+    title: "已收金额",
+    key: "paidAmount",
+    align: "center",
+    minWidth: 100,
+  },
+  {
+    title: "费用日期",
+    key: "planDate",
+    align: "center",
+    minWidth: 100,
+  },
+  {
+    title: "延期至",
+    key: "delayDate",
+    align: "center",
+    minWidth: 100,
+  },
+  {
+    title: "操作",
+    align: "center",
+    fixed: 'right',
+    width: 130,
+    render(h, { row }) {
+      const { status, paymentStatus } = row;
+      var emptyTag = h("span","　");
+      if(status == 0 || paymentStatus==2) {
+        return h("span", [emptyTag]);
+      }
+
+      var payingTag = h(
+          "Button",
+          {
+              props: { type: "primary", size: "small" },
+              on: { click: () => { showPaying(row); }}
+          },
+          "收款"
+      );
+      var delayTag = h(
+          "Button",
+          {
+              props: { type: "primary", size: "small" },
+              on: { click: () => { showDelay(row); }}
+          },
+          "延期"
+      );
+      return h("span", [payingTag, emptyTag, delayTag]);
+    }
+  },
+];

src/view/driver_contract/receivables/index.js

+import store from "@/store";
+const { dispatch } = store;
+import moment from "moment";
+import { columns } from "./helper.js";
+import { Timing } from "@/components/index.js";
+import { paymentStatusOption } from "@/libs/constants.js";
+import Paying from "./paying/index.vue";
+import Delay from "./delay/index.vue";
+import EditContract from "../edit/index.vue";
+import EditVehicle from "@/view/vehicle/edit/index.vue";
+import EditDriver from "@/view/driver/edit/index.vue";
+
+export default {
+  components: { Timing, Paying, Delay, paymentStatusOption, EditContract, EditVehicle, EditDriver },
+  data() {
+    return {
+      loading: false,
+      loadingVisible: false,
+      columns: [], 
+      paymentStatusOption: paymentStatusOption,
+
+      changeCurrent: 1,
+      searchForm: {
+        category: "全部",
+        type: null,
+        typeName: null,
+        driverInfo: null,
+        vehicleInfo: null,
+        planDate: null,
+        planDateStart: null,
+        planDateEnd: null,
+        paymentStatus: 0,
+        status: null,
+      },
+      data: {
+        total:0,
+        current: 1,
+        records:[],
+      },
+      page: {
+        size: 10,
+      },
+    }
+  },
+  watch: {
+    "searchForm.category"() {
+      if(this.searchForm.category == '全部') {
+        this.searchForm.planDate = [];
+      } else if(this.searchForm.category == '已超期') {
+        this.searchForm.planDate = [moment().subtract(10, "years").format().substring(0,10), moment().subtract(1, "days").format().substring(0,10)];
+      } else if(this.searchForm.category == '1周内') {
+        this.searchForm.planDate = [moment().format().substring(0,10), moment().subtract(-7, "days").format().substring(0,10)];
+      } else if(this.searchForm.category == '1月内') {
+        this.searchForm.planDate = [moment().format().substring(0,10), moment().subtract(-30, "days").format().substring(0,10)];
+      } 
+      this.search();
+    }
+  },
+  methods: {
+    showEdit() {
+    },
+    search(current = 1) {  
+      this.loading = true;
+      if(this.searchForm.planDate != null) {
+        this.searchForm.planDateStart = this.searchForm.planDate[0];
+        this.searchForm.planDateEnd = this.searchForm.planDate[1];
+      }
+      dispatch("invoke/asyncSearchPlanning", {
+        current,
+        size: this.page.size,
+        records: this.searchForm
+      }).then(({ data }) => {
+        this.loading = false
+        if (data != null) {
+          this.data = {...data};
+        } else {
+          this.data = {
+            total:0,
+            current: 1,
+            records:[],
+          };
+        }
+      });
+    },
+    changePage(current) {
+      this.search(current);
+      this.changeCurrent = current
+    },
+    changeSize(value) { 
+      this.page.size = value
+      this.search();
+    },
+    showContract(planning) {
+      this.loadingVisible = true;
+      dispatch("invoke/asyncGetContract", planning.contractId).then(({ data }) => {
+        this.loadingVisible = false;
+        if (data == null) {
+          return;
+        }
+        this.$refs.editContract.contract = data;
+        this.$refs.editContract.readonly = true;
+        this.$refs.editContract.visible = true;
+      }, (error) => {
+        this.loadingVisible = false;
+      });
+    },
+    showDriver(planning) {
+      this.loadingVisible = true;
+      dispatch("invoke/asyncGetDriver", planning.driverId).then(({ data }) => {
+        this.loadingVisible = false;
+        if (data == null) {
+          return;
+        }
+        this.$refs.editDriver.driver = data;
+        this.$refs.editDriver.readonly = true;
+        this.$refs.editDriver.visible = true;
+      }, (error) => {
+        this.loadingVisible = false;
+      });
+    },
+    showVehicle(planning) {
+      this.loadingVisible = true;
+      dispatch("invoke/asyncGetVehicle", planning.vehicleId).then(({ data }) => {
+        this.loadingVisible = false;
+        if (data == null) {
+          return;
+        }
+        this.$refs.editVehicle.vehicle = data;
+        this.$refs.editVehicle.readonly = true;
+        this.$refs.editVehicle.visible = true;
+      }, (error) => {
+        this.loadingVisible = false;
+      });
+    },
+    showPaying(planning) {
+      this.$refs.paying.planning = planning;
+      this.$refs.paying.visible = true;
+    },
+    showDelay(planning) {
+      this.$refs.delay.planning = planning;
+      this.$refs.delay.visible = true;
+    },
+  },
+  mounted() {
+    this.columns = columns(this.search, this.showContract, this.showDriver, this.showVehicle, this.showPaying, this.showDelay);
+    this.search();
+  }
+};

src/view/driver_contract/receivables/index.vue

+<template>
+    <div>
+        <Paying ref="paying" @search="search" />
+        <Delay ref="delay" @search="search" />
+        <EditContract ref="editContract" />
+        <EditVehicle ref="editVehicle" />
+        <EditDriver ref="editDriver" />
+        <Card>
+            <Form :label-width="80" label-colon>
+                <Row :gutter="5">
+                  <Col span="6">
+                    <FormItem label="计划状态" >
+                        <RadioGroup v-model="searchForm.category" type="button">
+                            <Radio label="全部"></Radio>
+                            <Radio label="已超期"></Radio>
+                            <Radio label="1周内"></Radio>
+                            <Radio label="1月内"></Radio>
+                        </RadioGroup>
+                    </FormItem>
+                  </Col>
+                  <Col span="6">
+                    <FormItem label="计划日期" >
+                      <Timing v-model="searchForm.planDate" data-type="date" :intervalWidth="5" />
+                    </FormItem>
+                  </Col>
+                  <Col span="6">
+                    <FormItem label="付款状态" >
+                      <Select v-model.trim="searchForm.paymentStatus" filterable clearable>
+                          <Option v-for="item in paymentStatusOption" :value="item.value" :key="item.value">{{ item.text }}</Option>
+                      </Select>
+                    </FormItem>
+                  </Col>
+                </Row>
+                <Row :gutter="5" >
+                  <Col span="6">
+                    <FormItem label="司机信息" >
+                      <Input v-model="searchForm.driverInfo" placeholder="姓名/手机号/身份证" clearable/>
+                    </FormItem>
+                  </Col>
+                  <Col span="6">
+                    <FormItem label="车辆信息" >
+                      <Input v-model="searchForm.vehicleInfo" placeholder="车牌号/品牌" clearable/>
+                    </FormItem>
+                  </Col>
+                  <Col span="6">
+                    <Button @click="search()" type="primary"><Icon type="ios-search-outline" /> 查询</Button>
+                  </Col>
+                </Row>
+             </Form>
+        </Card>
+        <Card style="margin-top:10px">
+            <Table border :loading="loading" :columns="columns" :data="data.records"/>
+            <Spin fix v-if="loadingVisible"/>
+            <Page
+                style="margin-top:10px"
+                :total="Number(data.total)"
+                :current="Number(data.current)"
+                @on-change="changePage"
+                @on-page-size-change="changeSize"
+                :placement="'top'"
+                :page-size-opts="[10, 30, 50, 100]"
+                show-sizer
+                show-elevator 
+                show-total></Page>
+        </Card>
+    </div>
+</template>
+
+<script src="./index.js"></script>
+
+<style>
+.ivu-table-cell {
+  padding-left: 0;
+  padding-right: 0;
+}
+.ivu-table td {
+  height: 30px;
+}
+</style>
\ No newline at end of file

src/view/driver_contract/receivables/paying/index.js

+import store from "@/store";
+const { dispatch } = store;
+import { isInteger } from "@/libs/validator.js";
+import { paymentStatusOption } from "@/libs/constants.js";
+
+export default {
+  components: {  },
+  data() {
+    return {
+      planning: null,
+      visible: false,
+      submitLoading: false,
+      payingFormRule: {
+        amount: [{ required: true, message: "请输入返还金额", trigger: "blur" }, { validator: isInteger, trigger: "blur" } ],
+      },
+      payingForm: {
+        planningId: 0,
+        plateNo: null,
+        paymentStatus: null,
+        planDate: null,
+        name: null,
+        payableAmount: null,
+        paidAmount: null,
+        diffAmount: null,
+        amount: null,
+        remark: null,
+      },
+    };
+  },
+  computed: {
+  },
+  watch: {
+    visible(show) {
+      this.submitLoading = false;
+      this.$refs.payingForm.resetFields();
+      this.payingForm.planningId = null;
+      this.payingForm.plateNo = null;
+      this.payingForm.paymentStatus = null;
+      this.payingForm.planDate = null;
+      this.payingForm.name = null;
+      this.payingForm.payableAmount = null;
+      this.payingForm.paidAmount = null;
+      this.payingForm.diffAmount = null;
+      this.payingForm.amount = null;
+      this.payingForm.remark = null;
+
+      if(show) {
+        this.payingForm.planningId = this.planning.id;
+        this.payingForm.plateNo = this.planning.plateNo;
+        this.payingForm.planDate = this.planning.planDate;
+        this.payingForm.name = this.planning.name;
+        this.payingForm.payableAmount = this.planning.payableAmount;
+        this.payingForm.paidAmount = this.planning.paidAmount;
+        this.payingForm.diffAmount = this.planning.payableAmount - this.planning.paidAmount;
+        this.payingForm.paymentStatus = paymentStatusOption.filter(item => item.value === this.planning.paymentStatus)[0].text;
+      }
+    },
+  },
+  methods: {
+    setAll() {
+      this.payingForm.amount = "" + this.payingForm.diffAmount;
+    },
+    saveReturnDeposit() {
+      this.$refs.payingForm.validate(valid => {
+        if (valid) {
+          const requestData = {
+            planningId: this.payingForm.planningId,
+            amount: this.payingForm.amount,
+            remark: this.payingForm.remark,
+          }
+          dispatch("invoke/asyncPaying", requestData).then(({ code }) => {
+            this.submitLoading = false;
+            if (code === 1) {
+              this.$Message.success("收款成功");
+              this.$emit("search");
+              this.visible = false;
+            }
+          });
+        }
+      });
+    },
+  },
+  mounted() {
+  }
+};

src/view/driver_contract/receivables/paying/index.vue

+<template>
+  <div>
+    <Modal width="600" v-model="visible" title="收款" >
+      <div>
+        <Form ref="payingForm" :model="payingForm" :rules="payingFormRule" :label-width="80" label-colon>
+            <Row>
+                <Col span="12">
+                    <FormItem label="车牌号" prop="plateNo">{{ payingForm.plateNo }}</FormItem>
+                </Col>
+                <Col span="12">
+                    <FormItem label="收款状态" prop="status">{{ payingForm.paymentStatus }}</FormItem>
+                </Col>
+            </Row>
+            <Row>
+                <Col span="12">
+                    <FormItem label="应收日期" prop="planDate">{{ payingForm.planDate }}</FormItem>
+                </Col>
+                <Col span="12">
+                    <FormItem label="款项名称" prop="name">{{ payingForm.name }}</FormItem>
+                </Col>
+            </Row>
+            <Row :gutter="10">
+                <Col span="8">
+                    <FormItem label="应收金额" prop="payableAmount">{{ payingForm.payableAmount }}</FormItem>
+                </Col>
+                <Col span="8">
+                    <FormItem label="已收金额" prop="paidAmount">{{ payingForm.paidAmount }}</FormItem>
+                </Col>
+                <Col span="8">
+                    <FormItem label="欠收金额" prop="diffAmount">{{ payingForm.diffAmount }}</FormItem>
+                </Col>
+            </Row>
+            <Row :gutter="10">
+                <Col span="20">
+                    <FormItem label="本次缴款金额" prop="amount">
+                        <Input v-model.trim="payingForm.amount" type="number" />
+                    </FormItem>
+                </Col>
+                <Col span="4">
+                    <Button @click="setAll" type="primary" style="width:100%">全部</Button>
+                </Col>
+            </Row>
+            <Row>
+                <Col span="24">
+                    <FormItem label="备注" prop="remark">
+                        <Input v-model="payingForm.remark" type="textarea" :rows="4" placeholder="请输入备注" style="width: 100%" />
+                    </FormItem>
+                </Col>
+            </Row>
+        </Form>
+      </div>
+      <div slot="footer">
+        <Button @click="visible = false">取消</Button>
+        <Button @click="saveReturnDeposit" :loading="submitLoading" type="primary">确定</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script src="./index.js"/>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file

src/view/driver_contract/sign/index.vue

@@ -27,7 +27,7 @@
             </Row>
             <Row>
                 <Col span="8">
-                    <FormItem label="应付押金" prop="payableDepositAmount">
+                    <FormItem label="应收押金" prop="payableDepositAmount">
                         <Input v-model.trim="contractForm.payableDepositAmount" type="number" />
                     </FormItem>
                 </Col>

src/view/source_contract/edit/helper.js

 
-export const columns = () => [
+export const logColumns = () => [
   {
     title: "序号",
     key: "id",
@@ -30,3 +30,49 @@ export const columns = () => [
     align: "center",
   },
 ];
+
+
+export const rentColumns = () => [
+  {
+    title: "状态",
+    align: "center",
+    width: 120,
+    render(h, { row }) {
+      try {
+        const { paymentStatus } = row;
+        return h("span", {style: {color: paymentStatus == 2 ? 'green' : 'red' }}, paymentStatus == 2 ? '已付' : '未付');
+      } catch(e) {
+        console.log(e);
+      }
+    }
+  },
+  {
+    title: "类型",
+    key: "name",
+    align: "center",
+    width: 120,
+  },
+  {
+    title: "日期",
+    key: "planDate",
+    align: "center",
+    width: 120,
+  },
+  {
+    title: "应付金额",
+    key: "payableAmount",
+    align: "center",
+    width: 120,
+  },
+  {
+    title: "已付金额",
+    key: "paidAmount",
+    align: "center",
+    width: 120,
+  },
+  {
+    title: "备注",
+    key: "remark",
+    align: "center",
+  },
+];

src/view/source_contract/edit/index.js

 import store from "@/store";
 const { dispatch } = store;
-import { columns } from "./helper.js";
-import { isInteger } from "@/libs/validator.js";
+import { logColumns, rentColumns } from "./helper.js";
+import { leaseTypeOption } from "@/libs/constants.js";
 
 export default {
-  components: {  },
+  components: { leaseTypeOption },
   data() {
     return {
       logLoading: false,
       logDatas: [],
       logColumns: [],
+      leaseTypeOption: leaseTypeOption,
+
+      rentLoading: false,
+      rentDatas: [],
+      rentColumns: [],
 
       contract: null,
-      readonly: false,
       visible: false,
       submitLoading: false,
       mainUploadStatus: false,
       secondUploadStatus: false,
       selectTab: null,
 
-      contractFormRule: {
-        odograph: [{ required: true, message: "请输入里程数", trigger: "blur" }, { validator: isInteger, trigger: "blur" } ],
-        depositAmount: [{ required: true, message: "请输入押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
-        rentAmount: [{ required: true, message: "请输入月租金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
-        startDate: [{ type: "date", required: true, message: "请选择开始日期", trigger: "change" }],
-        endDate: [{ type: "date", required: true, message: "请选择结束日期", trigger: "change" }],
-      },
       contractForm: {
         contractId: 0,
         type: 1,
@@ -33,10 +30,11 @@ export default {
         vehicle: null,
         source: null,
         odograph: null,
-        odographEv: null,
+        payableDepositAmount: null,
+        paidDepositAmount: null,
+        diffDepositAmount: null,
         startDate: null,
         endDate: null,
-        depositAmount: null,
         rentAmount: null,
         leaseType: null,
         remark: null,
@@ -58,7 +56,6 @@ export default {
       this.contractForm.odographEv = null;
       this.contractForm.startDate = null;
       this.contractForm.endDate = null;
-      this.contractForm.depositAmount = null;
       this.contractForm.rentAmount = null;
       this.contractForm.leaseType = null;
       this.contractForm.remark = null;
@@ -73,13 +70,14 @@ export default {
         this.contractForm.code = this.contract.code;
         this.contractForm.vehicle = vehicleInfo;
         this.contractForm.source = this.contract.sourceVo.name;
-        this.contractForm.odograph = ""+this.contract.odograph;
-        this.contractForm.odographEv = ""+this.contract.odographEv;
+        this.contractForm.odograph = this.contract.odograph;
+        this.contractForm.payableDepositAmount = this.contract.payableDepositAmount;
+        this.contractForm.paidDepositAmount = this.contract.paidDepositAmount;
+        this.contractForm.diffDepositAmount = (this.contract.payableDepositAmount - this.contract.paidDepositAmount);
         this.contractForm.startDate = this.contract.startDate;
         this.contractForm.endDate = this.contract.endDate;
         this.contractForm.leaseType = this.contract.leaseType;
-        this.contractForm.depositAmount = ""+this.contract.depositAmount;
-        this.contractForm.returnDepositAmount = ""+this.contract.returnDepositAmount;
+        this.contractForm.returnDepositAmount = this.contract.returnDepositAmount;
         this.contractForm.rentAmount = ""+this.contract.rentAmount;
         this.contractForm.remark = this.contract.remark;
 
@@ -91,6 +89,7 @@ export default {
         }
 
         this.listLogs();
+        this.listRentPlanning();
       } else {
         this.logDatas = [];
       }
@@ -99,66 +98,6 @@ export default {
     },
   },
   methods: {
-    handleView(item) {
-    },
-    handleRemove(file) {
-      // const fileList = this.$refs.upload.fileList;
-      // this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
-
-      this.uploadList.splice(this.uploadList.indexOf(file), 1);
-    },
-    handleFormatError (file) {
-        this.$Notice.warning({
-            title: 'The file format is incorrect',
-            desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
-        });
-    },
-    handleMaxSize (file) {
-        this.$Notice.warning({
-            title: 'Exceeding file size limit',
-            desc: 'File  ' + file.name + ' is too large, no more than 2M.'
-        });
-    },
-    handleBeforeUpload(file) {
-      const formData = new FormData();
-      formData.append("file", file);
-
-      const item = {id: 0, url: "", status: ""};
-      this.uploadList.push(item);
-
-      dispatch("invoke/asyncUploadFile", formData).then(res => {
-        const { code, data, msg } = res;
-        if(code == 1) {
-          this.$Message.info("上传成功");
-
-          item.id = data.id;
-          item.url = data.filePath;
-          item.status = "finished";
-        } else {
-          this.$Message.info("上传失败");
-        }
-      });
-      return false;
-    },
-    saveContract() {
-      // console.log(this.contractForm);
-      // return;
-      this.$refs.contractForm.validate(valid => {
-        if (valid) {
-          this.uploadList.forEach(f => {
-            this.contractForm.files.push(f.id);
-          })
-          dispatch("invoke/asyncUpdateContract", this.contractForm).then(({ code }) => {
-            this.submitLoading = false;
-            if (code === 1) {
-              this.$Message.success("合同修改成功");
-              this.$emit("search");
-              this.visible = false;
-            }
-          });
-        }
-      });
-    },
     listVehicles() {
       dispatch("invoke/asyncListNoSourceContractVehicles").then(({ data }) => {
         this.vehicles = data;
@@ -174,9 +113,18 @@ export default {
       dispatch("invoke/asyncListLogs", contractId).then(({ data }) => {
         this.logDatas = data;
       });
-    }
+    },
+    listRentPlanning() {
+      this.rentLoading = true;
+      const requestData = { contractId: this.contract.id, type: 1 };
+      dispatch("invoke/asyncListPlanningByContractId", requestData).then(({ data }) => {
+        this.rentLoading = false;
+        this.rentDatas = data;
+      });
+    },
   },
   mounted() {
-    this.logColumns = columns();
+    this.logColumns = logColumns();
+    this.rentColumns = rentColumns();
   }
 };

src/view/source_contract/edit/index.vue

@@ -4,75 +4,57 @@
         <Tabs v-model="selectTab">
             <TabPane label="合同信息" icon="md-document" name="contractTab">
             <div>
-                <Form ref="contractForm" :model="contractForm" :rules="contractFormRule" :label-width="80" label-colon>
+                <Form ref="contractForm" :model="contractForm" :label-width="80" label-colon>
                     <Row>
                         <Col span="8">
-                            <FormItem label="车辆信息" prop="vehicle">
-                                <Input v-model.trim="contractForm.vehicle" type="text" disabled />
-                            </FormItem>
+                            <FormItem label="车辆信息" prop="vehicle">{{ contractForm.vehicle }}</FormItem>
                         </Col>
                         <Col span="8">
-                            <FormItem label="车源信息" prop="source">
-                                <Input v-model.trim="contractForm.source" type="text" disabled />
-                            </FormItem>
+                            <FormItem label="车源信息" prop="source">{{ contractForm.source }}</FormItem>
                         </Col>
                         <Col span="8">
-                            <FormItem label="租赁方式" prop="leaseType">
-                                <Input v-model.trim="contractForm.leaseType" type="text" :disabled="readonly"/>
-                            </FormItem>
+                            <FormItem label="里程数" prop="odograph">{{ contractForm.odograph }}</FormItem>
                         </Col>
                     </Row>
                     <Row>
                         <Col span="8">
-                            <FormItem label="月租金" prop="rentAmount">
-                                <Input v-model.trim="contractForm.rentAmount" type="number" :disabled="readonly"/>
-                            </FormItem>
+                            <FormItem label="应付押金" prop="payableDepositAmount">{{ contractForm.payableDepositAmount }}</FormItem>
                         </Col>
                         <Col span="8">
-                            <FormItem label="押金" prop="depositAmount">
-                                <Input v-model.trim="contractForm.depositAmount" type="number" :disabled="readonly"/>
-                            </FormItem>
+                            <FormItem label="实付押金" prop="paidDepositAmount">{{ contractForm.paidDepositAmount }}</FormItem>
                         </Col>
                         <Col span="8">
-                            <FormItem label="反还押金" prop="returnDepositAmount">
-                                <Input v-model.trim="contractForm.returnDepositAmount" type="number" disabled />
-                            </FormItem>
+                            <FormItem label="欠付押金" prop="diffDepositAmount">{{ contractForm.diffDepositAmount }}</FormItem>
                         </Col>
                     </Row>
                     <Row>
                         <Col span="8">
-                            <FormItem label="开始日期" prop="startDate">
-                                <DatePicker v-model="contractForm.startDate" type="date" style="width: 100%" placeholder="请输入开始日期":disabled="readonly"></DatePicker>
-                            </FormItem>
-                        </Col>
-                        <Col span="8">
-                            <FormItem label="结束日期" prop="endDate">
-                                <DatePicker v-model="contractForm.endDate" type="date" style="width: 100%" placeholder="请输入结束日期":disabled="readonly"></DatePicker>
-                            </FormItem>
+                            <FormItem label="周期租金" prop="rentAmount">{{ contractForm.rentAmount }}</FormItem>
                         </Col>
                         <Col span="8">
-                            <FormItem label="里程数" prop="odograph">
-                                <Input v-model.trim="contractForm.odograph" type="number" :disabled="readonly"/>
-                            </FormItem>
+                            <FormItem label="反还押金" prop="returnDepositAmount">{{ contractForm.returnDepositAmount }}</FormItem>
                         </Col>
                     </Row>
                     <Row>
                         <Col span="8">
-                            <FormItem label="ev里程数" prop="odographEv">
-                                <Input v-model.trim="contractForm.odographEv" type="number" :disabled="readonly"/>
-                            </FormItem>
+                            <FormItem label="租赁方式" prop="leaseType">{{ contractForm.leaseType==null ? "" : leaseTypeOption.filter(item => item.value === contractForm.leaseType)[0].text }}</FormItem>
+                        </Col>
+                        <Col span="8">
+                            <FormItem label="开始日期" prop="startDate">{{ contractForm.startDate }}</FormItem>
+                        </Col>
+                        <Col span="8">
+                            <FormItem label="结束日期" prop="endDate">{{ contractForm.endDate }}</FormItem>
                         </Col>
                     </Row>
                     <Row>
                         <Col span="24">
-                            <FormItem label="备注" prop="remark">
-                                <Input v-model="contractForm.remark" type="textarea" :rows="4" placeholder="请输入备注" style="width: 100%" :disabled="readonly"/>
-                            </FormItem>
+                            <FormItem label="备注" prop="remark">{{ contractForm.remark == null ? "无" : contractForm.remark }}</FormItem>
                         </Col>
                     </Row>
                     <Row>
                         <Col span="24">
                             <FormItem label="验车照片">
+                            <div v-if="uploadList==null || uploadList.length==0">无</div>
                             <div class="demo-upload-list" v-for="item in uploadList">
                                 <template v-if="item.status === 'finished'">
                                     <img :src="item.url" style="width: 60px;height:60px;line-height: 60px;">
@@ -81,27 +63,8 @@
                                         <Icon type="ios-trash-outline" @click.native="handleRemove(item)" v-if="!readonly"></Icon>
                                     </div>
                                 </template>
-                                <template v-else>
-                                    <Spin size="small" fix ></Spin>
-                                </template>
+                                <template v-else><Spin size="small" fix ></Spin></template>
                             </div>
-                            <Upload
-                                ref="upload"
-                                v-if="!readonly"
-                                :show-upload-list="false"
-                                :max-size="1024"
-                                :on-format-error="handleFormatError"
-                                :on-exceeded-size="handleMaxSize"
-                                :before-upload="handleBeforeUpload"
-                                multiple
-                                accept="image/*"
-                                type="drag"
-                                action="//jsonplaceholder.typicode.com/posts/"
-                                style="display: inline-block;width:60px;">
-                                <div style="width: 60px;height:60px;line-height: 60px;">
-                                    <Icon type="ios-camera" size="20"></Icon>
-                                </div>
-                            </Upload>
                             </FormItem>
                         </Col>
                     </Row>
@@ -109,15 +72,14 @@
             </div>
             </TabPane>
             <TabPane label="操作日志" icon="md-create" name="logTab">
-                <Table border
-                    :loading="logLoading"
-                    :columns="logColumns"
-                    :data="logDatas"/>
+                <Table border :loading="logLoading" :columns="logColumns" :data="logDatas"/>
+            </TabPane>
+            <TabPane label="租金计划" icon="logo-usd" name="rentTab">
+                <Table border :loading="rentLoading" :columns="rentColumns" :data="rentDatas"/>
             </TabPane>
         </Tabs>
         <div slot="footer">
             <Button @click="visible = false">取消</Button>
-            <Button @click="saveContract" :loading="submitLoading" type="primary" v-if="!readonly">确定</Button>
         </div>
     </Modal>
   </div>

src/view/source_contract/list/helper.js

 import Actions from "./actions/index.vue";
+import { depositStatusOption, leaseTypeOption } from "@/libs/constants.js";
 
 export const columns = (search, showContract, showVehicle, showReturnDeposit) => [
   {
@@ -87,12 +88,6 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit) =>
     minWidth: 100,
   },
   {
-    title: "ev里程",
-    key: "odographEv",
-    align: "center",
-    minWidth: 100,
-  },
-  {
     title: "合同开始日期",
     key: "startDate",
     align: "center",
@@ -106,9 +101,13 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit) =>
   },
   {
     title: "租赁方式",
-    key: "leaseType",
     align: "center",
     minWidth: 120,
+    render: (h, { row }) => {
+      const { leaseType } = row;
+      const [{ text }] = leaseTypeOption.filter(item => item.value === leaseType);
+      return h("span", text);
+    }
   },
   {
     title: "月租金",
@@ -134,13 +133,14 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit) =>
     minWidth: 120,
     render: (h, { row }) => {
       const { depositStatus } = row;
-      if(depositStatus == 0){
-        return h("span", {style: {color: "red" }}, "未返还");
-      } else if(depositStatus == 1){
-        return h("span", {style: {color: "green" }}, "全部返还");
-      } else if(depositStatus == 2){
-        return h("span", {style: {color: "orange" }}, "部分返还");
+      const [{ text }] = depositStatusOption.filter(item => item.value === depositStatus);
+      var color = "red";
+      if(depositStatus == 1) {
+        color = "orange";
+      } else if(depositStatus == 2) {
+        color = "green";
       }
+      return h("span", {style: {color: color }}, text);
     }
   },
   {

src/view/source_contract/list/index.js

@@ -5,14 +5,16 @@ import SignContract from "../sign/index.vue";
 import EditContract from "../edit/index.vue";
 import EditVehicle from "@/view/vehicle/edit/index.vue";
 import ReturnDeposit from "./return_deposit/index.vue";
+import { depositStatusOption } from "@/libs/constants.js";
 
 export default {
-  components: { SignContract, EditContract, EditVehicle, ReturnDeposit },
+  components: { SignContract, EditContract, EditVehicle, ReturnDeposit, depositStatusOption },
   data() {
     return {
       loading: false,
       columns: [], 
-      plateNo: "",
+      depositStatusOption: depositStatusOption,
+      vehicleInfo: "",
       status: null,
       depositStatus: null,
       type: 1,
@@ -32,7 +34,7 @@ export default {
     search(current = 1) {  
       this.searchForm = {
         type: this.type,
-        plateNo: this.plateNo,
+        vehicleInfo: this.vehicleInfo,
         status: this.status,
         depositStatus: this.depositStatus,
       };

src/view/source_contract/list/index.vue

@@ -4,8 +4,8 @@
             <Form :label-width="80" label-colon>
                 <Row :gutter="5">
                     <Col span="4">
-                      <FormItem label="车牌号码" >
-                        <Input v-model="plateNo" placeholder="Enter something..." clearable/> 
+                      <FormItem label="车辆信息" >
+                        <Input v-model="vehicleInfo" placeholder="车牌号" clearable/> 
                       </FormItem>
                     </Col>
                     <Col span="4">
@@ -18,10 +18,8 @@
                     </Col>
                     <Col span="4">
                       <FormItem label="押金状态" >
-                        <Select v-model.trim="depositStatus" clearable>
-                            <Option :value="0" :key="0">未返还</Option>
-                            <Option :value="1" :key="1">全部返还</Option>
-                            <Option :value="2" :key="2">部分返还</Option>
+                        <Select v-model.trim="depositStatus" filterable clearable>
+                            <Option v-for="item in depositStatusOption" :value="item.value" :key="item.value">{{ item.text }}</Option>
                         </Select>
                       </FormItem>
                     </Col>

src/view/source_contract/sign/index.js

 import store from "@/store";
 const { dispatch } = store;
+import moment from "moment";
 import { isInteger } from "@/libs/validator.js";
 import AddVehicle from "@/view/vehicle/add/index.vue";
 import { leaseTypeOption } from "@/libs/constants.js";
@@ -18,6 +19,7 @@ export default {
         payableDepositAmount: [{ required: true, message: "请输入应付押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
         paidDepositAmount: [{ required: true, message: "请输入实收押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
         rentAmount: [{ required: true, message: "请输入月租金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
+        firstPaidAmount: [{ required: true, message: "首次实收租金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
         leaseType: [{ type: "number", required: true, message: "请选择租赁方式", trigger: "change" }],
         startDate: [{ type: "date", required: true, message: "请选择开始日期", trigger: "change" }],
         leasePeriod: [{ required: true, message: "请输入租赁周期", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
@@ -29,9 +31,11 @@ export default {
         odograph: null,
         payableDepositAmount: null,
         paidDepositAmount: null,
+        diffDepositAmount: null,
         startDate: null,
         rentAmount: null,
-        leaseType: null,
+        firstPaidAmount: null,
+        leaseType: 1,
         leasePeriod: null,
         remark: null,
         files: [],
@@ -54,19 +58,26 @@ export default {
         this.leasePeriodName = "周期/月";
       }
     },
+    'contractForm.payableDepositAmount'() {
+      this.contractForm.diffDepositAmount = this.contractForm.payableDepositAmount - this.contractForm.paidDepositAmount;
+    },
+    'contractForm.paidDepositAmount'() {
+      this.contractForm.diffDepositAmount = this.contractForm.payableDepositAmount - this.contractForm.paidDepositAmount;
+    },
     visible(show) {
       this.submitLoading = false;
       this.$refs.contractForm.resetFields();
 
       if(show) {
+        this.contractForm.files = [];
         this.listVehicles();
         this.listSources();
+        this.contractForm.startDate = moment().format().substring(0,10);
       }
     },
   },
   methods: {
     onAddComplete(vehicle) {
-      console.log(vehicle);
       this.vehicles.unshift(vehicle);
       this.contractForm.vehicleId = vehicle.id;
     },

src/view/source_contract/sign/index.vue

@@ -28,11 +28,6 @@
             </Row>
             <Row>
                 <Col span="8">
-                    <FormItem label="周期租金" prop="rentAmount">
-                        <Input v-model.trim="contractForm.rentAmount" type="number" />
-                    </FormItem>
-                </Col>
-                <Col span="8">
                     <FormItem label="应付押金" prop="payableDepositAmount">
                         <Input v-model.trim="contractForm.payableDepositAmount" type="number" />
                     </FormItem>
@@ -42,6 +37,23 @@
                         <Input v-model.trim="contractForm.paidDepositAmount" type="number" />
                     </FormItem>
                 </Col>
+                <Col span="8">
+                    <FormItem label="欠付押金" prop="diffDepositAmount">
+                        <Input v-model.trim="contractForm.diffDepositAmount" type="number" readonly/>
+                    </FormItem>
+                </Col>
+            </Row>
+            <Row>
+                <Col span="8">
+                    <FormItem label="周期租金" prop="rentAmount">
+                        <Input v-model.trim="contractForm.rentAmount" type="number" />
+                    </FormItem>
+                </Col>
+                <Col span="8">
+                    <FormItem label="首次实收租金" prop="firstPaidAmount">
+                        <Input v-model.trim="contractForm.firstPaidAmount" type="number" />
+                    </FormItem>
+                </Col>
             </Row>
             <Row>
                 <Col span="8">

src/view/vehicle/add/index.js

@@ -183,7 +183,6 @@ export default {
           dispatch("invoke/asyncCreateVehicle", this.vehicleForm).then(({ code, data }) => {
             this.submitLoading = false;
             if (code === 1) {
-              console.log(data);
               this.$Message.success("添加成功");
               this.$emit("search", data);
               this.visible = false;