1

package-lock.json

@@ -10769,6 +10769,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
@@ -11248,6 +11253,15 @@
       "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-3.7.1.tgz",
       "integrity": "sha512-WmUgmcIXr9clVpm1AYS/FgHtcDicfnfoxgQCNg4O6vfk9GVnxA0vSqO321ogUo0b7czYTidj7fQENvWFMWOkUg=="
     },
+    "v-viewer": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/v-viewer/-/v-viewer-1.5.1.tgz",
+      "integrity": "sha512-Q5ICKzmYQD0qTf+hti2Lhgy6UYY2zgFr+YrN9a3yPgr7pOjYrG405Pz4+6Z6FXlhdhGysCWFJUNCI2tsIyvjWQ==",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.1.0.tgz",
@@ -11309,6 +11323,11 @@
         }
       }
     },
+    "viewerjs": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.6.2.tgz",
+      "integrity": "sha512-EHepcPFz2YOv0wOKMUU7JwcUGdF3EmTH8A4owYeNPCM1t5XuE7ePelACY8ltWvh6O2yPOdJ9CI3T6m04RjsmpQ=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",

src/App.vue

@@ -9,6 +9,3 @@ export default {
   name: 'App'
 }
 </script>
-
-<style>
-</style>

src/api/invoke_methods.js

 import {
+  uploadFile,
+  detectVehicleLicense,
   login,
   listCompany,
   myCompany,
@@ -17,13 +19,34 @@ import {
   updateSourceStatus,
   listModel,
   listBrand,
+  listColor,
+  listEnvironmentalStandard,
+  listEngineType,
+  listVehicleType,
+  listUseCharacters,
   createData,
+  listVehicle,
+  listNoSourceContractVehicles,
+  createVehicle,
+  updateVehicle,
+  listContract,
+  listLogs,
+  signContract,
+  updateContract,
+  terminateContract, 
+  returnDeposit,
 } from "./request_methods";
 
 export default {
   namespaced: true,
   state: {},
   actions: {
+    asyncUploadFile(_, payload) {
+      return uploadFile(payload)
+    },
+    asyncDetectVehicleLicense(_, payload) {
+      return detectVehicleLicense(payload)
+    },
     asyncLogin(_, payload) {
       return login(payload)
     },
@@ -79,9 +102,56 @@ export default {
     asyncListBrand(_, payload) {
       return listBrand(payload)
     },
+    asyncListColor(_, payload) {
+      return listColor(payload)
+    },
+    asyncListEnvironmentalStandard(_, payload) {
+      return listEnvironmentalStandard(payload)
+    },
+    asyncListEngineType(_, payload) {
+      return listEngineType(payload)
+    },
+    asyncListVehicleType(_, payload) {
+      return listVehicleType(payload)
+    },
+    asyncListUseCharacters(_, payload) {
+      return listUseCharacters(payload)
+    },
     asyncCreateData(_, payload) {
       return createData(payload)
     },
+
+    asyncListVehicle(_, payload) {
+      return listVehicle(payload)
+    },
+    asyncListNoSourceContractVehicles(_, payload) {
+      return listNoSourceContractVehicles(payload)
+    },
+    asyncCreateVehicle(_, payload) {
+      return createVehicle(payload)
+    },
+    asyncUpdateVehicle(_, payload) {
+      return updateVehicle(payload)
+    },
+    asyncListContract(_, payload) {
+      return listContract(payload)
+    },
+    asyncListLogs(_, payload) {
+      return listLogs(payload)
+    },
+    asyncSignContract(_, payload) {
+      return signContract(payload)
+    },
+    asyncUpdateContract(_, payload) {
+      return updateContract(payload)
+    },
+    asyncTerminateContract(_, payload) {
+      return terminateContract(payload)
+    },
+    asyncReturnDeposit(_, payload) {
+      return returnDeposit(payload)
+    },
+    
   },
   mutations: {
   }

src/api/request_methods.js

@@ -6,6 +6,10 @@ if(process.env.NODE_ENV == 'development') {
 } else {
     console.log("env: " + proxy);
 }
+// 上传文件
+export const uploadFile = params => axios.post(`${proxy}/file/upload`, params, { "Content-Type": "multipart/form-data" });
+// 上传文件
+export const detectVehicleLicense = data => axios.post(`${proxy}/file/vehicle/license/detect`, data);
 // 登录
 export const login = data => axios.post(`${proxy}/account/login`, data);
 
@@ -46,5 +50,36 @@ export const updateSourceStatus = data => axios.post(`${proxy}/data/source/updat
 export const listModel = data => axios.post(`${proxy}/data/models`, data);
 // 数据 / 品牌列表
 export const listBrand = data => axios.post(`${proxy}/data/brands`, data);
+// 数据 / 颜色
+export const listColor = data => axios.post(`${proxy}/data/colors`, data);
+// 数据 / 环保标准
+export const listEnvironmentalStandard = data => axios.post(`${proxy}/data/environmentalStandards`, data);
+// 数据 / 动力类型
+export const listEngineType = data => axios.post(`${proxy}/data/engineTypes`, data);
+// 数据 / 车辆类型
+export const listVehicleType = data => axios.post(`${proxy}/data/vehicleTypes`, data);
+// 数据 / 使用性质
+export const listUseCharacters = data => axios.post(`${proxy}/data/useCharacters`, data);
 // 数据 / 创建
 export const createData = data => axios.post(`${proxy}/data/create`, data);
+
+// 车辆 / 列表
+export const listVehicle = data => axios.post(`${proxy}/vehicle/list`, data);
+export const listNoSourceContractVehicles = data => axios.post(`${proxy}/vehicle/no/source/contract/vehicles`, data);
+// 车辆 / 创建
+export const createVehicle = data => axios.post(`${proxy}/vehicle/create`, data);
+// 车辆 / 修改
+export const updateVehicle = data => axios.post(`${proxy}/vehicle/update`, data);
+
+// 合同 / 合同 列表
+export const listContract = data => axios.post(`${proxy}/contract/list`, data);
+// 合同 / 日志 列表
+export const listLogs = data => axios.post(`${proxy}/contract/logs/${data}`);
+// 合同 / 车源合同 签订
+export const signContract = data => axios.post(`${proxy}/contract/sign`, data);
+// 合同 / 车源合同 修改
+export const updateContract = data => axios.post(`${proxy}/contract/update`, data);
+// 合同 / 车源合同 中止
+export const terminateContract = data => axios.post(`${proxy}/contract/terminate`, data);
+// 合同 / 车源合同 返还押金
+export const returnDeposit = data => axios.post(`${proxy}/contract/return/deposit`, data);
\ No newline at end of file

src/components/Timing/index.vue

@@ -98,7 +98,6 @@ export default {
 
   methods: {
     change(value) {
-      // console.log(value)
       let start;
       let end;
       if (this.start) {

src/index.less

+@import "~iview/src/styles/index.less";
+

src/libs/axios.js

 import axios from "axios";
-import iview from "iview";
+import iview from "view-design";
 import router from "../router";
 
 var service = axios.create({
@@ -45,6 +45,7 @@ service.interceptors.response.use(
         router.push("/");
         return data;
       case 3:
+        // iview.Message.error(msg);
         iview.Notice.error({
           title: "错误",
           desc: msg

src/libs/validator.js

+export function isInteger(rule, value, callback) {
+    if (!value) {
+        return callback();
+    }
+    setTimeout(() => {
+        if (!Number(value)) {
+        callback(new Error('请输入正整数'));
+        } else {
+        const re = /^[0-9]*[1-9][0-9]*$/;
+        const rsCheck = re.test(value);
+        if (!rsCheck) {
+            callback(new Error('请输入正整数'));
+        } else {
+            callback();
+        }
+        }
+    }, 1000);
+}
\ No newline at end of file

src/main.js

 import Vue from 'vue';
 import App from './App.vue';
-import ViewUI from 'view-design'
+import iView from 'view-design'
 import 'view-design/dist/styles/iview.css'
 import router from './router'
+import "./index.less";
+// import Viewer from "v-viewer";
+// import "viewerjs/dist/viewer.css";
 
 Vue.config.productionTip = false;
-Vue.use(ViewUI)
+Vue.use(iView);
+
+// Viewer.setDefaults({
+//   zIndex: 99999999,
+//   url(image) {
+//     return image.getAttribute("url");
+//   }
+// });
+// Vue.use(Viewer);
 
 new Vue({
   router,

src/router/routers.js

@@ -89,5 +89,72 @@ export default [
           component: () => import("@/view/data/model/index.vue")
         }
       ]
-    }
+    },
+    {
+      path: '/vehicle',
+      key: 'vehicle',
+      icon: 'logo-xbox',
+      title: '车辆管理',
+      visable: false,
+      children: [
+        {
+          path: '/vehicle/list',
+          key: 'vehicle_list',
+          icon: 'logo-xbox',
+          title: '车辆查询',
+          visable: false,
+          component: () => import("@/view/vehicle/list/index.vue")
+        }, 
+      ]
+    },
+    {
+      path: '/source_contract',
+      key: 'source_contract',
+      icon: 'logo-xbox',
+      title: '车源合同',
+      visable: false,
+      children: [
+        {
+          path: '/source_contract/list',
+          key: 'source_contract_list',
+          icon: 'logo-xbox',
+          title: '合同查询',
+          visable: false,
+          component: () => import("@/view/source_contract/list/index.vue")
+        }, 
+        {
+          path: '/source_contract/bill_week',
+          key: 'bill_week',
+          icon: 'logo-xbox',
+          title: '七日内交租',
+          visable: false,
+          component: () => import("@/view/vehicle/list/index.vue")
+        }, 
+        {
+          path: '/source_contract/bill_month',
+          key: 'bill_month',
+          icon: 'logo-xbox',
+          title: '本月交租',
+          visable: false,
+          component: () => import("@/view/vehicle/list/index.vue")
+        }, 
+      ]
+    },
+    {
+      path: '/driver',
+      key: 'driver',
+      icon: 'logo-xbox',
+      title: '司机管理',
+      visable: false,
+      children: [
+        {
+          path: '/driver/list',
+          key: 'list',
+          icon: 'logo-xbox',
+          title: '司机查询',
+          visable: false,
+          component: () => import("@/view/driver/list/index.vue")
+        }, 
+      ]
+    },
   ]

src/view/company/accounts/index.js

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

src/view/company/companys/accounts/index.js

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

src/view/company/companys/index.js

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

src/view/company/info/index.js

@@ -20,7 +20,6 @@ export default {
         } else {
           this.company = null;
         }
-        // console.log(this.data)
       });
     },
   },

src/view/company/info/index.vue

 <template>
     <div>
         <Card>
+            <div v-if="company==null">
+                <Spin size="large"></Spin>
+            </div>
+            <div v-else>
             <Form :label-width="100" :label-colon="true" id="fontstyle">
                 <Row>
                     <Col span="24">
@@ -43,6 +47,7 @@
                     </Col>
                 </Row>
              </Form>
+            </div>
         </Card>
     </div>
 </template>

src/view/data/model/index.js

@@ -40,7 +40,6 @@ export default {
     },
     getBrands() {
       dispatch("invoke/asyncListBrand").then(({ data }) => {
-        this.loading = false;
         this.brands = data;
       });
     },

src/view/driver/list/helper.js

+
+export const columns = (disable, enable, updatePassword) => [
+  {
+    title: "帐号",
+    key: "username",
+    align: "center",
+    minWidth: 60,
+  },
+  {
+    title: "姓名",
+    key: "realName",
+    align: "center",
+    minWidth: 60,
+  },
+  {
+    title: "电话",
+    key: "phone",
+    align: "center",
+    minWidth: 60,
+  },
+  {
+    title: "地址",
+    key: "address",
+    align: "center",
+    minWidth: 60,
+  },
+  {
+    title: "类型",
+    align: "center",
+    width: 120,
+    render(h, { row }) {
+      try {
+        const { type } = row;
+        return h("span", type == 1 ? '主帐号' : '子帐号');
+      } catch(e) {
+        console.log(e);
+      }
+    }
+  },
+  {
+    title: "状态",
+    align: "center",
+    width: 120,
+    render(h, { row }) {
+      try {
+        const { status } = row;
+        return h("span", {style: {color: status == 1 ? 'green' : 'red' }}, status == 1 ? '有效' : '失效');
+      } catch(e) {
+        console.log(e);
+      }
+    }
+  },
+  {
+    title: "操作",
+    align: "center",
+    fixed: 'right',
+    width: 180,
+    render(h, { row }) {
+      const { status } = row;
+      var emptyTag = h("span","　");
+
+      var updatePasswordTag = h(
+        "Button",
+        {
+            props: { type: "primary", size: "small" },
+            on: { click: () => { 
+              updatePassword.dataSource = row;
+              updatePassword.visible = true;
+            }}
+        },
+        "修改密码"
+      );
+      var disableTag = h(
+        "Poptip",
+        {
+            props: { title: "确定停用当前帐号吗？", transfer: true, confirm: true, size: "small" },
+            on: { "on-ok": () => { row.status=0; disable(row); } }
+        },
+        [
+            h("Button", {props: {type: "error", size: "small"}}, "停用")
+        ]
+      );
+      var enableTag = h(
+        "Button",
+        {
+            props: { type: "primary", size: "small" },
+            on: { click: () => { row.status=1; enable(row); }}
+        },
+        "启用"
+      );
+
+      return h("span", [updatePasswordTag, emptyTag, status == 1 ? disableTag : enableTag]);
+    }
+  },
+];

src/view/driver/list/index.js

+import store from "@/store";
+const { dispatch } = store;
+import { columns } from "./helper.js";
+
+export default {
+  components: {  },
+  data() {
+    return {
+      loading: false,
+      columns: [], 
+      name: "",
+
+      data: {
+        records:[],
+      },
+    }
+  },
+  methods: {
+    disable(account) {
+      dispatch("invoke/asyncUpdateAccountStatus", account);
+    },
+    enable(account) {
+      dispatch("invoke/asyncUpdateAccountStatus", account);
+    },
+    search() {  
+      this.loading = true;
+      dispatch("invoke/asyncListAccountMine", {}).then(({ data }) => {
+        this.loading = false
+        if (data != null) {
+          this.data.records = data;
+        } else {
+          this.data = {
+            records:[],
+          };
+        }
+      });
+    },
+  },
+  mounted() {
+    this.columns = columns(this.disable, this.enable, this.$refs.updatePassword);
+    this.search();
+  }
+};

src/view/driver/list/index.vue

+<template>
+    <div>
+      <Card>
+      </Card>
+      <Card style="margin-top:10px">
+        <Table
+          border
+          :loading="loading"
+          :columns="columns"
+          :data="data.records"/>
+      </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/index/index.js

@@ -27,7 +27,6 @@ export default {
                 }
                 dispatch("invoke/asyncLogin", requestData).then(response => {
                     if(!response.data) {
-                        console.log("登录失败");
                         return;
                     }
                     localStorage.setItem("tokenInfo", JSON.stringify(response.data));

src/view/main/index.js

 import store from "@/store";
 import routers from "@/router/routers.js";
+import "./main.less";
 const { dispatch } = store;
 export default {
     components: { },
@@ -29,7 +30,6 @@ export default {
                     })
                 }
             });
-            // console.log(routers);
         },
         getMenuFromRouter(key) {
             var maps = [];

src/view/main/index.vue

@@ -44,7 +44,7 @@
 
 <script src="./index.js"></script>
 
-<style scoped>
+<style lang="less">
 .layout{
     background: #f5f7f9;
     overflow: hidden;

src/view/main/main.less

+// .main{
+//   .logo-con{
+//     height: 64px;
+//     padding: 10px;
+//     img{
+//       height: 30px;
+//       width: auto;
+//       display: block;
+//       margin: 0 auto;
+//       background-color: #ffffff
+//     }
+//   }
+//   .header-con{
+//     background: #FF7200;
+//     padding: 0 0;
+//     width: 100%;
+//     height: 64px;
+    
+//   }
+//   .main-layout-con{
+//     height: 100%;
+//     overflow: hidden;
+//   }
+//   .main-content-con{
+//     height: ~"calc(100% - 60px)";
+//     overflow: hidden;
+//   }
+//   .tag-nav-wrapper{
+//     padding: 0;
+//     height:40px;
+//     background:#F0F0F0;
+//   }
+//   .content-wrapper{
+//     padding: 18px;
+//     height: ~"calc(100% - 80px)";
+//     overflow: auto;
+//   }
+//   .left-sider{
+//     background-color: #ffffff;
+//     .ivu-layout-sider-children{
+//       overflow-y: scroll;
+//       margin-right: -18px;
+//     }
+//   }
+// }
+// .ivu-menu-item > i{
+//   margin-right: 12px !important;
+// }
+// .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
+//   margin-right: 8px !important;
+// }
+// .collased-menu-dropdown{
+//   width: 100%;
+//   margin: 0;
+//   line-height: normal;
+//   padding: 7px 0 6px 16px;
+//   clear: both;
+//   font-size: 12px !important;
+//   white-space: nowrap;
+//   list-style: none;
+//   cursor: pointer;
+//   transition: background 0.2s ease-in-out;
+//   &:hover{
+//     background: rgba(100, 100, 100, 0.1);
+//   }
+//   & * {
+//     color: #515a6e;
+//   }
+//   .ivu-menu-item > i{
+//     margin-right: 12px !important;
+//   }
+//   .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
+//     margin-right: 8px !important;
+//   }
+// }
+
+// .ivu-select-dropdown.ivu-dropdown-transfer{
+//   max-height: 400px;
+// }

src/view/source_contract/edit/helper.js

+
+export const columns = () => [
+  {
+    title: "序号",
+    key: "id",
+    align: "center",
+    width: 80,
+  },
+  {
+    title: "操作",
+    key: "action",
+    align: "center",
+    width: 120,
+  },
+  {
+    title: "时间",
+    key: "operationTime",
+    align: "center",
+    width: 180,
+  },
+  {
+    title: "操作人",
+    key: "operatorName",
+    align: "center",
+    width: 120,
+  },
+  {
+    title: "操作内容",
+    key: "content",
+    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";
+
+export default {
+  components: {  },
+  data() {
+    return {
+      logLoading: false,
+      logDatas: [],
+      logColumns: [],
+
+      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,
+        code: null,
+        vehicle: null,
+        source: null,
+        odograph: null,
+        odographEv: null,
+        startDate: null,
+        endDate: null,
+        depositAmount: null,
+        rentAmount: null,
+        leaseType: null,
+        remark: null,
+        files: [],
+      },
+      uploadList: []
+    };
+  },
+  computed: {
+  },
+  watch: {
+    visible(show) {
+      this.submitLoading = false;
+      this.contractForm.contractId = 0;
+      this.contractForm.code = null;
+      this.contractForm.vehicle = null;
+      this.contractForm.source = null;
+      this.contractForm.odograph = null;
+      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;
+      this.contractForm.files = [];
+      this.uploadList = [];
+
+      if(show) {
+        this.selectTab = "contractTab";
+        const vo = this.contract.vehicleVo;
+        const vehicleInfo = vo.id + " / " + vo.plateNo + " / " + vo.color + " / " + vo.brandName + " / " + vo.model;
+        this.contractForm.contractId = this.contract.id;
+        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.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;
+
+        if(this.contract.files) {
+          this.contract.files.forEach(file => {
+            const item = {id: file.id, url: file.filePath, status: "finished"};
+            this.uploadList.push(item);
+          })
+        }
+
+        this.listLogs();
+      } else {
+        this.logDatas = [];
+      }
+      // console.log(this.uploadList);
+      // console.log(this.contractForm);
+    },
+  },
+  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;
+    },
+    saveVehicle() {
+      // 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;
+      });
+    },
+    listSources() {
+      dispatch("invoke/asyncListSource", {}).then(({ data }) => {
+        this.sources = data;
+      });
+    },
+    listLogs() {
+      const contractId = this.contract.id;
+      dispatch("invoke/asyncListLogs", contractId).then(({ data }) => {
+        this.logDatas = data;
+      });
+    }
+  },
+  mounted() {
+    this.logColumns = columns();
+  }
+};

src/view/source_contract/edit/index.vue

+<template>
+  <div>
+    <Modal width="800" v-model="visible" title="车源合同 - 修改" fullscreen>
+        <Tabs v-model="selectTab">
+            <TabPane label="合同信息" icon="md-document" name="contractTab">
+            <div>
+                <Form ref="contractForm" :model="contractForm" :rules="contractFormRule" :label-width="80" label-colon>
+                    <Row>
+                        <Col span="8">
+                            <FormItem label="车辆信息" prop="vehicle">
+                                <Input v-model.trim="contractForm.vehicle" type="text" disabled />
+                            </FormItem>
+                        </Col>
+                        <Col span="8">
+                            <FormItem label="车源信息" prop="source">
+                                <Input v-model.trim="contractForm.source" type="text" disabled />
+                            </FormItem>
+                        </Col>
+                        <Col span="8">
+                            <FormItem label="租赁方式" prop="leaseType">
+                                <Input v-model.trim="contractForm.leaseType" type="text" :disabled="readonly"/>
+                            </FormItem>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col span="8">
+                            <FormItem label="月租金" prop="rentAmount">
+                                <Input v-model.trim="contractForm.rentAmount" type="number" :disabled="readonly"/>
+                            </FormItem>
+                        </Col>
+                        <Col span="8">
+                            <FormItem label="押金" prop="depositAmount">
+                                <Input v-model.trim="contractForm.depositAmount" type="number" :disabled="readonly"/>
+                            </FormItem>
+                        </Col>
+                        <Col span="8">
+                            <FormItem label="反还押金" prop="returnDepositAmount">
+                                <Input v-model.trim="contractForm.returnDepositAmount" type="number" disabled />
+                            </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>
+                        </Col>
+                        <Col span="8">
+                            <FormItem label="里程数" prop="odograph">
+                                <Input v-model.trim="contractForm.odograph" type="number" :disabled="readonly"/>
+                            </FormItem>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col span="8">
+                            <FormItem label="ev里程数" prop="odographEv">
+                                <Input v-model.trim="contractForm.odographEv" type="number" :disabled="readonly"/>
+                            </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>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col span="24">
+                            <FormItem label="验车照片">
+                            <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;">
+                                    <div class="demo-upload-list-cover">
+                                        <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
+                                        <Icon type="ios-trash-outline" @click.native="handleRemove(item)" v-if="!readonly"></Icon>
+                                    </div>
+                                </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>
+                </Form>
+            </div>
+            </TabPane>
+            <TabPane label="操作日志" icon="md-create" name="logTab">
+                <Table border
+                    :loading="logLoading"
+                    :columns="logColumns"
+                    :data="logDatas"/>
+            </TabPane>
+        </Tabs>
+        <div slot="footer">
+            <Button @click="visible = false">取消</Button>
+            <Button @click="saveVehicle" :loading="submitLoading" type="primary" v-if="!readonly">确定</Button>
+        </div>
+    </Modal>
+  </div>
+</template>
+<script src="./index.js"/>
+
+<style lang="less" scoped>
+.img {
+    max-height:200px;
+}
+.demo-upload-list{
+    display: inline-block;
+    width: 60px;
+    height: 60px;
+    text-align: center;
+    line-height: 60px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #fff;
+    position: relative;
+    box-shadow: 0 1px 1px rgba(0,0,0,.2);
+    margin-right: 4px;
+}
+.demo-upload-list img{
+    width: 100%;
+    height: 100%;
+}
+.demo-upload-list-cover{
+    display: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0,0,0,.6);
+}
+.demo-upload-list:hover .demo-upload-list-cover{
+    display: block;
+}
+.demo-upload-list-cover i{
+    color: #fff;
+    font-size: 20px;
+    cursor: pointer;
+    margin: 0 2px;
+}
+</style>
\ No newline at end of file

src/view/source_contract/list/actions/index.js

+import store from "@/store";
+const { dispatch } = store;
+
+export default {
+  components: {  },
+  props: {
+    "data": {}, 
+    "params": {},
+    showContract: Function,
+    showReturnDeposit: Function,
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    onClick(name) {
+      if(name === "edit") {
+        this.showContract(this.data, false);
+      }
+      if(name === "returnVehicle") {
+
+      }
+      if(name === "returnDeposit") {
+        this.showReturnDeposit(this.data);
+      }
+      if(name === "terminate") {
+        this.showConfirmTerminate();
+      }
+    },
+    showConfirmTerminate() {
+      this.$Modal.confirm({
+          title: '中止',
+          content: '确定中止当前合同？',
+          onOk: () => {
+              this.terminateContract();
+          }
+      });
+    },
+    terminateContract() {
+      const requestData = {
+        contractId: this.data.id,
+      }
+      dispatch("invoke/asyncTerminateContract", requestData).then(({ code }) => {
+        this.submitLoading = false;
+        if (code === 1) {
+          this.$Message.success("中止合同成功");
+        }
+      });
+    }
+  },
+  mounted() {
+  }
+};

src/view/source_contract/list/actions/index.vue

+<template>
+    <Dropdown style="margin-left: 20px" transfer @on-click="onClick" trigger="click" v-if="params.edit||params.returnVehicle||params.returnDeposit||params.terminate">
+        <Button type="primary" size="small">
+            操作 
+            <Icon type="ios-arrow-down"></Icon>
+        </Button>
+        <DropdownMenu slot="list">
+            <DropdownItem v-if="params.edit" name="edit">修改合同</DropdownItem>
+            <DropdownItem v-if="params.returnVehicle" name="returnVehicle">返还车辆</DropdownItem>
+            <DropdownItem v-if="params.returnDeposit" name="returnDeposit">返还押金</DropdownItem>
+            <DropdownItem v-if="params.terminate" name="terminate">中止合同</DropdownItem>
+        </DropdownMenu>
+    </Dropdown>
+</template>
+
+<script src="./index.js"></script>

src/view/source_contract/list/helper.js

+import Actions from "./actions/index.vue";
+
+export const columns = (search, showContract, showVehicle, showReturnDeposit) => [
+  {
+    title: "合同ID",
+    key: "id",
+    align: "center",
+    minWidth: 50,
+  },
+  {
+    title: "合同编号",
+    align: "center",
+    minWidth: 180,
+    render: (h, { row }) => {
+      const { code } = row;
+      return h(
+        "a",
+        {
+            on: { click: () => { 
+              showContract(row, true);
+            }}
+        },
+        code
+      );
+    }
+  },
+  {
+    title: "车牌号",
+    align: "center",
+    minWidth: 120,
+    render: (h, { row }) => {
+      const { vehicleVo } = row;
+      return h(
+        "a",
+        {
+            on: { click: () => { 
+              showVehicle(vehicleVo);
+            }}
+        },
+        vehicleVo.plateNo
+      );
+    }
+  },
+  // {
+  //   title: "品牌/型号",
+  //   align: "center",
+  //   minWidth: 100,
+  //   render(h, { row }) {
+  //     try {
+  //       const { vehicleVo } = row;
+  //       return h("span", `${vehicleVo.brandName} / ${vehicleVo.model}`);
+  //     } catch(e) {
+  //       console.log(e);
+  //     }
+  //   }
+  // },
+  {
+    title: "车源名称",
+    align: "center",
+    minWidth: 120,
+    render(h, { row }) {
+      try {
+        const { sourceVo } = row;
+        return h("span", `${sourceVo.name}`);
+      } catch(e) {
+        console.log(e);
+      }
+    }
+  },
+  {
+    title: "车源联系人",
+    align: "center",
+    minWidth: 120,
+    render(h, { row }) {
+      try {
+        const { sourceVo } = row;
+        return h("div", {domProps: { innerHTML: sourceVo.contactName + "<br/>" + sourceVo.contactPhone}});
+      } catch(e) {
+        console.log(e);
+      }
+    }
+  },
+  {
+    title: "里程",
+    key: "odograph",
+    align: "center",
+    minWidth: 100,
+  },
+  {
+    title: "ev里程",
+    key: "odographEv",
+    align: "center",
+    minWidth: 100,
+  },
+  {
+    title: "合同开始日期",
+    key: "startDate",
+    align: "center",
+    minWidth: 120,
+  },
+  {
+    title: "合同结束日期",
+    key: "endDate",
+    align: "center",
+    minWidth: 120,
+  },
+  {
+    title: "租赁方式",
+    key: "leaseType",
+    align: "center",
+    minWidth: 120,
+  },
+  {
+    title: "月租金",
+    key: "rentAmount",
+    align: "center",
+    minWidth: 100,
+  },
+  {
+    title: "押金金额",
+    key: "depositAmount",
+    align: "center",
+    minWidth: 100,
+  },
+  {
+    title: "已返还押金金额",
+    key: "returnDepositAmount",
+    align: "center",
+    minWidth: 100,
+  },
+  {
+    title: "押金状态",
+    align: "center",
+    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" }}, "部分返还");
+      }
+    }
+  },
+  {
+    title: "合同状态",
+    align: "center",
+    width: 120,
+    render(h, { row }) {
+      try {
+        const { status } = row;
+        return h("span", {style: {color: status == 1 ? 'green' : 'red' }}, status == 1 ? '有效' : '失效');
+      } catch(e) {
+        console.log(e);
+      }
+    }
+  },
+  {
+    title: "操作",
+    align: "center",
+    fixed: 'right',
+    width: 150,
+    render(h, { row }) {
+      const { status, depositStatus } = row;
+      const params = {
+        edit: status == 1 ? true : false,
+        terminate: status == 1 ? true : false,
+        returnDeposit: depositStatus == 1 || status == 1 ? false : true,
+      };
+
+      return h(Actions, {
+        props: {
+          data: row,
+          params: params,
+          showContract: showContract,
+          showReturnDeposit: showReturnDeposit,
+        }
+      });
+    }
+  },
+];

src/view/source_contract/list/index.js

+import store from "@/store";
+const { dispatch } = store;
+import { columns } from "./helper.js";
+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";
+
+export default {
+  components: { SignContract, EditContract, EditVehicle, ReturnDeposit },
+  data() {
+    return {
+      loading: false,
+      columns: [], 
+      plateNo: "",
+      status: null,
+      depositStatus: null,
+      type: 1,
+
+      changeCurrent: 1,
+      data: {
+        total:0,
+        current: 1,
+        records:[],
+      },
+      page: {
+        size: 10,
+      },
+    }
+  },
+  methods: {
+    search(current = 1) {  
+      this.searchForm = {
+        type: this.type,
+        plateNo: this.plateNo,
+        status: this.status,
+        depositStatus: this.depositStatus,
+      };
+
+      this.loading = true
+      const initQuery = {
+        current,
+        size: this.page.size,
+        records: this.searchForm
+      };
+      dispatch("invoke/asyncListContract", {
+        ...initQuery
+      }).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(contract, readonly) {
+      this.$refs.editContract.contract = contract;
+      this.$refs.editContract.readonly = readonly;
+      this.$refs.editContract.visible = true;
+    },
+    showReturnDeposit(contract) {
+      this.$refs.returnDeposit.contract = contract;
+      this.$refs.returnDeposit.visible = true;
+    },
+    showVehicle(vehicle) {
+      this.$refs.editVehicle.vehicle = vehicle;
+      this.$refs.editVehicle.readonly = true;
+      this.$refs.editVehicle.visible = true;
+    },
+  },
+  mounted() {
+    this.columns = columns(this.search, this.showContract, this.showVehicle, this.showReturnDeposit);
+    this.search();
+  }
+};

src/view/source_contract/list/index.vue

+<template>
+    <div>
+        <Card>
+            <Form :label-width="80" label-colon>
+                <Row :gutter="5">
+                    <Col span="4">
+                      <FormItem label="车牌号码" >
+                        <Input v-model="plateNo" placeholder="Enter something..." clearable/> 
+                      </FormItem>
+                    </Col>
+                    <Col span="4">
+                      <FormItem label="合同状态" >
+                        <Select v-model.trim="status" clearable>
+                            <Option :value="1" :key="1">有效</Option>
+                            <Option :value="0" :key="0">无效</Option>
+                        </Select>
+                      </FormItem>
+                    </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>
+                      </FormItem>
+                    </Col>
+                    <Col span="2">
+                      <Button @click="search()" type="primary"><Icon type="ios-search-outline" /> 查询</Button>
+                    </Col>
+                    <Col span="10">
+                        <SignContract ref="signContract" @search="search" style="float:right" />
+                        <EditContract ref="editContract" @search="search" />
+                        <ReturnDeposit ref="returnDeposit" @search="search" />
+                        <EditVehicle ref="editVehicle" />
+                    </Col>
+                </Row>
+             </Form>
+        </Card>
+        <Card style="margin-top:10px">
+            <Table
+                border
+                :loading="loading"
+                :columns="columns"
+                :data="data.records"/>
+            <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/source_contract/list/return_deposit/index.js

+import store from "@/store";
+const { dispatch } = store;
+import { isInteger } from "@/libs/validator.js";
+
+export default {
+  components: {  },
+  data() {
+    return {
+      contract: null,
+      visible: false,
+      submitLoading: false,
+      mainUploadStatus: false,
+      secondUploadStatus: false,
+      returnFormRule: {
+        returnAmount: [{ required: true, message: "请输入本次退还押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
+      },
+      returnForm: {
+        plateNo: null,
+        depositStatus: null,
+        depositAmount: null,
+        returnDepositAmount: null,
+        returnAmount: null,
+        remark: null,
+      },
+    };
+  },
+  computed: {
+  },
+  watch: {
+    visible(show) {
+      this.submitLoading = false;
+      this.$refs.returnForm.resetFields();
+      this.returnForm.plateNo = null;
+      this.returnForm.depositStatus = null;
+      this.returnForm.depositAmount = null;
+      this.returnForm.returnDepositAmount = null;
+      this.returnForm.returnAmount = null;
+      this.returnForm.remark = null;
+
+      if(show) {
+        this.returnForm.plateNo = this.contract.vehicleVo.plateNo;
+        this.returnForm.depositAmount = this.contract.depositAmount;
+        this.returnForm.returnDepositAmount = this.contract.returnDepositAmount;
+
+        if (this.contract.depositStatus == 0) {
+          this.returnForm.depositStatus = "未返还";
+        } else if (this.contract.depositStatus == 1) {
+          this.returnForm.depositStatus = "全部返还";
+        } else if (this.contract.depositStatus == 2) {
+          this.returnForm.depositStatus = "部分返还";
+        }
+      }
+    },
+  },
+  methods: {
+    setAll() {
+      this.returnForm.returnAmount = this.returnForm.depositAmount - this.returnForm.returnDepositAmount;
+    },
+    saveReturnDeposit() {
+      this.$refs.returnForm.validate(valid => {
+        if (valid) {
+          const requestData = {
+            contractId: this.contract.id,
+            returnAmount: this.returnForm.returnAmount,
+            remark: this.returnForm.remark,
+          }
+          dispatch("invoke/asyncReturnDeposit", requestData).then(({ code }) => {
+            this.submitLoading = false;
+            if (code === 1) {
+              this.$Message.success("返还成功");
+              this.$emit("search");
+              this.visible = false;
+            }
+          });
+        }
+      });
+    },
+  },
+  mounted() {
+  }
+};

src/view/source_contract/list/return_deposit/index.vue

+<template>
+  <div>
+    <Modal width="600" v-model="visible" title="返还押金" >
+      <div>
+        <Form ref="returnForm" :model="returnForm" :rules="returnFormRule" :label-width="80" label-colon>
+            <Row>
+                <Col span="24">
+                    <FormItem label="车牌号" prop="plateNo">
+                        <Input v-model.trim="returnForm.plateNo" disabled />
+                    </FormItem>
+                </Col>
+            </Row>
+            <Row>
+                <Col span="24">
+                    <FormItem label="押金状态" prop="status">
+                        <Input v-model.trim="returnForm.depositStatus" disabled />
+                    </FormItem>
+                </Col>
+            </Row>
+            <Row :gutter="10">
+                <Col span="12">
+                    <FormItem label="全部押金" prop="depositAmount">
+                        <Input v-model.trim="returnForm.depositAmount" disabled />
+                    </FormItem>
+                </Col>
+                <Col span="12">
+                    <FormItem label="已还金额" prop="returnDepositAmount">
+                        <Input v-model.trim="returnForm.returnDepositAmount" disabled />
+                    </FormItem>
+                </Col>
+            </Row>
+            <Row :gutter="10">
+                <Col span="20">
+                    <FormItem label="本次返还" prop="returnAmount">
+                        <Input v-model.trim="returnForm.returnAmount" />
+                    </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="returnForm.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/source_contract/sign/index.js

+import store from "@/store";
+const { dispatch } = store;
+import { isInteger } from "@/libs/validator.js";
+
+export default {
+  components: {  },
+  data() {
+    return {
+      visible: false,
+      submitLoading: false,
+      mainUploadStatus: false,
+      secondUploadStatus: false,
+      contractFormRule: {
+        vehicleId: [{
+            type: "number",
+            required: true,
+            message: "请选择车辆",
+            trigger: "change"
+          }
+        ],
+        sourceId: [{
+            type: "number",
+            required: true,
+            message: "请选择车源",
+            trigger: "change"
+          }
+        ],
+        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: {
+        type: 1,
+        vehicleId: null,
+        sourceId: null,
+        odograph: null,
+        odographEv: null,
+        startDate: null,
+        endDate: null,
+        depositAmount: null,
+        rentAmount: null,
+        leaseType: null,
+        remark: null,
+        files: [],
+      },
+      vehicles: [],
+      sources: [],
+
+      uploadList: [],
+      defaultList: [],
+    };
+  },
+  computed: {
+  },
+  watch: {
+    visible(show) {
+      this.submitLoading = false;
+      this.$refs.contractForm.resetFields();
+
+      if(show) {
+        this.listVehicles();
+        this.listSources();
+      }
+    },
+  },
+  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;
+    },
+    saveVehicle() {
+      this.$refs.contractForm.validate(valid => {
+        if (valid) {
+          this.uploadList.forEach(f => {
+            this.contractForm.files.push(f.id);
+          })
+          dispatch("invoke/asyncSignContract", 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;
+      });
+    },
+    listSources() {
+      dispatch("invoke/asyncListSource", {}).then(({ data }) => {
+        this.sources = data;
+      });
+    }
+  },
+  mounted() {
+  }
+};

src/view/source_contract/sign/index.vue

+<template>
+  <div>
+    <Button icon="ios-add" type="primary" @click="visible = true">车源签约</Button>
+    <Modal width="800" v-model="visible" title="车源合同 - 签约" fullscreen>
+      <div>
+        <Form ref="contractForm" :model="contractForm" :rules="contractFormRule" :label-width="80" label-colon>
+            <Row>
+                <Col span="8">
+                    <FormItem label="车辆信息" prop="vehicleId">
+                        <Select v-model.trim="contractForm.vehicleId" filterable>
+                            <Option v-for="item in vehicles" :value="item.id" :key="item.id">{{ item.id + " / " + item.plateNo + " / " + item.color + " / " + item.brandName + " / " + item.model }}</Option>
+                        </Select>
+                    </FormItem>
+                </Col>
+                <Col span="8">
+                    <FormItem label="车源信息" prop="sourceId">
+                        <Select v-model.trim="contractForm.sourceId" filterable>
+                            <Option v-for="item in sources" :value="item.id" :key="item.id">{{ item.name }}</Option>
+                        </Select>
+                    </FormItem>
+                </Col>
+                <Col span="8">
+                    <FormItem label="租赁方式" prop="leaseType">
+                        <Input v-model.trim="contractForm.leaseType" type="text" />
+                    </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="depositAmount">
+                        <Input v-model.trim="contractForm.depositAmount" type="number" />
+                    </FormItem>
+                </Col>
+                <Col span="8">
+                    <FormItem label="里程数" prop="odograph">
+                        <Input v-model.trim="contractForm.odograph" type="number" />
+                    </FormItem>
+                </Col>
+            </Row>
+            <Row>
+                <Col span="8">
+                    <FormItem label="开始日期" prop="startDate">
+                        <DatePicker v-model="contractForm.startDate" type="date" style="width: 100%" placeholder="请输入开始日期"></DatePicker>
+                    </FormItem>
+                </Col>
+                <Col span="8">
+                    <FormItem label="结束日期" prop="endDate">
+                        <DatePicker v-model="contractForm.endDate" type="date" style="width: 100%" placeholder="请输入结束日期"></DatePicker>
+                    </FormItem>
+                </Col>
+                <Col span="8">
+                    <FormItem label="ev里程数" prop="odographEv">
+                        <Input v-model.trim="contractForm.odographEv" type="number" />
+                    </FormItem>
+                </Col>
+            </Row>
+            <Row>
+                <Col span="24">
+                    <FormItem label="备注" prop="remark">
+                        <Input v-model="contractForm.remark" type="textarea" :rows="4" placeholder="请输入备注" style="width: 100%" />
+                    </FormItem>
+                </Col>
+            </Row>
+            <Row>
+                <Col span="24">
+                    <FormItem label="验车照片">
+                    <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;">
+                            <div class="demo-upload-list-cover">
+                                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
+                                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <Spin size="small" fix ></Spin>
+                        </template>
+                    </div>
+                    <Upload
+                        ref="upload"
+                        :show-upload-list="false"
+                        :default-file-list="defaultList"
+                        :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>
+        </Form>
+      </div>
+      <div slot="footer">
+        <Button @click="visible = false">取消</Button>
+        <Button @click="saveVehicle" :loading="submitLoading" type="primary">确定</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script src="./index.js"/>
+
+<style lang="less" scoped>
+.img {
+    max-height:200px;
+}
+.demo-upload-list{
+    display: inline-block;
+    width: 60px;
+    height: 60px;
+    text-align: center;
+    line-height: 60px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #fff;
+    position: relative;
+    box-shadow: 0 1px 1px rgba(0,0,0,.2);
+    margin-right: 4px;
+}
+.demo-upload-list img{
+    width: 100%;
+    height: 100%;
+}
+.demo-upload-list-cover{
+    display: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0,0,0,.6);
+}
+.demo-upload-list:hover .demo-upload-list-cover{
+    display: block;
+}
+.demo-upload-list-cover i{
+    color: #fff;
+    font-size: 20px;
+    cursor: pointer;
+    margin: 0 2px;
+}
+</style>
\ No newline at end of file

src/view/vehicle/add/index.js

+import store from "@/store";
+const { dispatch } = store;
+
+export default {
+  components: {  },
+  data() {
+    return {
+      visible: false,
+      submitLoading: false,
+      mainUploadStatus: false,
+      secondUploadStatus: false,
+      vehicleFormRule: {
+        plateNo: [
+          {
+            required: true,
+            message: "请输入车牌号",
+            trigger: "change"
+          }
+        ],
+        brandId: [
+          {
+            required: true,
+            type: 'number',
+            message: "请选择品牌",
+            trigger: "change"
+          }
+        ],
+        model: [
+          {
+            required: true,
+            message: "请选择型号",
+            trigger: "change"
+          }
+        ],
+        engineType: [
+          {
+            required: true,
+            message: "请选择动力类型",
+            trigger: "change"
+          }
+        ],
+        displacement: [
+          {
+            required: true,
+            message: "请输入排量",
+            trigger: "change"
+          }
+        ],
+        color: [
+          {
+            required: true,
+            message: "请选择颜色",
+            trigger: "change"
+          }
+        ],
+      },
+      vehicleForm: {
+        plateNo: "",
+        brandId: null,
+        brandName: "",
+        model: "",
+        engineType: "",
+        displacement: "",
+        color: "",
+        mainFileId: 0,
+        secondFileId: 0,
+        mainFileUrl: null,
+        secondFileUrl: null,
+        type: "",
+        address: "",
+        useCharacter: "",
+        licenseModel: "",
+        vin: "",
+        engineNo: "",
+        registerDate: null,
+        issueDate: null,
+        approvedPerson: "",
+        weight: "",
+        outlineSize: "",
+      },
+      brands: [],
+      models: [],
+      colors: [],
+      engineTypes: [],
+      // vehicleTypes: [],
+      // characters: [],
+    };
+  },
+  computed: {
+  },
+  watch: {
+    visible(show) {
+      this.submitLoading = false;
+      this.$refs.vehicleForm.resetFields();
+      this.vehicleForm.mainFileId = 0;
+      this.vehicleForm.secondFileId = 0;
+      this.vehicleForm.mainFileUrl = null;
+      this.vehicleForm.secondFileUrl = null;
+
+      this.vehicleForm.type = "";
+      this.vehicleForm.address = "";
+      this.vehicleForm.useCharacter = "";
+      this.vehicleForm.licenseModel = "";
+      this.vehicleForm.vin = "";
+      this.vehicleForm.engineNo = "";
+      this.vehicleForm.registerDate = null;
+      this.vehicleForm.issueDate = null;
+      this.vehicleForm.approvedPerson = "";
+      this.vehicleForm.weight = "";
+      this.vehicleForm.outlineSize = "";
+
+      if(show) {
+        this.getBrands();
+        this.getColors();
+        this.getEngineTypes();
+      }
+    },
+  },
+  methods: {
+    upload(formData, isMain) {
+      if(isMain == 1) {
+        this.mainUploadStatus = true;
+      } else {
+        this.secondUploadStatus = true;
+      }
+      dispatch("invoke/asyncUploadFile", formData).then(res => {
+        const { code, data, msg } = res;
+        if(code == 1) {
+          this.$Message.info("上传成功");
+        } else {
+          this.$Message.info("上传失败");
+        }
+        if(isMain == 1) {
+          this.mainUploadStatus = false;
+          this.vehicleForm.mainFileId = data.id;
+          this.vehicleForm.mainFileUrl = data.filePath;
+        } else {
+          this.secondUploadStatus = false;
+          this.vehicleForm.secondFileId = data.id;
+          this.vehicleForm.secondFileUrl = data.filePath;
+        }
+        this.detectVehicleLicense(data.filePath, isMain);
+      });
+    },
+    handleUploadMain(file) {
+      const formData = new FormData();
+      formData.append("file", file);
+      this.upload(formData, 1);
+      return false;
+    },
+    handleUploadSecond(file) {
+      const formData = new FormData();
+      formData.append("file", file);
+      this.upload(formData, 2);
+      return false;
+    },
+    detectVehicleLicense(url, isMain) {
+      var requestData = {
+        url: url,
+        isMain: isMain,
+      }
+      dispatch("invoke/asyncDetectVehicleLicense", requestData).then(({ data }) => {
+        if(isMain == 1) {
+          this.vehicleForm.type = data.type;
+          this.vehicleForm.owner = data.owner;
+          this.vehicleForm.address = data.address;
+          this.vehicleForm.useCharacter = data.useCharacter;
+          this.vehicleForm.licenseModel = data.licenseModel;
+          this.vehicleForm.vin = data.vin;
+          this.vehicleForm.engineNo = data.engineNo;
+          this.vehicleForm.registerDate = data.registerDate;
+          this.vehicleForm.issueDate = data.issueDate;
+        } else {
+          this.vehicleForm.approvedPerson = data.approvedPerson;
+          this.vehicleForm.weight = data.weight;
+          this.vehicleForm.outlineSize = data.outlineSize;
+        }
+      });
+    },
+    saveVehicle() {
+      this.$refs.vehicleForm.validate(valid => {
+        if (valid) {
+          dispatch("invoke/asyncCreateVehicle", this.vehicleForm).then(({ code }) => {
+            this.submitLoading = false;
+            if (code === 1) {
+              this.$Message.success("添加成功");
+              this.$emit("search");
+              this.visible = false;
+            }
+          });
+        }
+      });
+    },
+    brandChange(item) {
+      this.models = [];
+      this.vehicleForm.model = "";
+      if(item) {
+        this.vehicleForm.brandName = item.label;
+        this.getModels(item.value);
+      }
+    },
+    getBrands() {
+      dispatch("invoke/asyncListBrand").then(({ data }) => {
+        this.brands = data;
+      });
+    },
+    getModels(brandId) {
+      var requestData = {
+        parentId: brandId,
+      };
+      dispatch("invoke/asyncListModel", requestData).then(({ data }) => {
+        this.models = data;
+      });
+    },
+    getColors() {
+      dispatch("invoke/asyncListColor").then(({ data }) => {
+        this.colors = data;
+      });
+    },
+    getEngineTypes() {
+      dispatch("invoke/asyncListEngineType").then(({ data }) => {
+        this.engineTypes = data;
+      });
+    },
+    // getVehicleTypes() {
+    //   dispatch("invoke/asyncListVehicleType").then(({ data }) => {
+    //     this.vehicleTypes = data;
+    //   });
+    // },
+    // getUseCharacterss() {
+    //   dispatch("invoke/asyncListUseCharacters").then(({ data }) => {
+    //     this.characters = data;
+    //   });
+    // },
+  },
+  mounted() {
+  }
+};

src/view/vehicle/add/index.vue

+<template>
+  <div>
+    <Button icon="ios-add" type="primary" @click="visible = true">添加车辆</Button>
+    <Modal width="800" v-model="visible" title="车辆信息 - 添加" fullscreen>
+      <div>
+        <Form ref="vehicleForm" :model="vehicleForm" :rules="vehicleFormRule" :label-width="80">
+            <Card :bordered="false">
+                <p slot="title"><Icon type="ios-film-outline"></Icon> 基本信息</p>
+                <Row>
+                    <Col span="8">
+                        <FormItem label="车牌号" prop="plateNo">
+                            <Input v-model.trim="vehicleForm.plateNo" type="text" />
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="品牌" prop="brandId">
+                            <Select v-model.trim="vehicleForm.brandId" @on-change="brandChange" @on-clear="brandChange" clearable label-in-value>
+                                <Option v-for="item in brands" :value="item.id" :key="item.id">{{ item.name }}</Option>
+                            </Select>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="型号" prop="model">
+                            <Select v-model.trim="vehicleForm.model" clearable>
+                                <Option v-for="item in models" :value="item.name" :key="item.name">{{ item.name }}</Option>
+                            </Select>
+                        </FormItem>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span="8">
+                        <FormItem label="动力类型" prop="engineType">
+                            <Select v-model.trim="vehicleForm.engineType" clearable>
+                                <Option v-for="item in engineTypes" :value="item.name" :key="item.name">{{ item.name }}</Option>
+                            </Select>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="排量" prop="displacement">
+                            <Input v-model.trim="vehicleForm.displacement" type="text" />
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="颜色" prop="color">
+                            <Select v-model.trim="vehicleForm.color" clearable>
+                                <Option v-for="item in colors" :value="item.name" :key="item.name">{{ item.name }}</Option>
+                            </Select>
+                        </FormItem>
+                    </Col>
+                </Row>
+                <!-- <Row>
+                    <Col span="8">
+                        <FormItem label="环保标准" prop="environmentalStandards">
+                            <Select clearable label-in-value>
+                                <Option v-for="item in environmentalStandards" :value="item.id" :key="item.id">{{ item.name }}</Option>
+                            </Select>
+                        </FormItem>
+                    </Col>
+                </Row> -->
+            </Card>
+            <br/>
+            <Card :bordered="false">
+                <p slot="title"><Icon type="ios-film-outline"></Icon> 行驶证照片</p>
+                <Row :gutter="20">
+                    <Col span="12">
+                        <Upload type="drag" action :before-upload="handleUploadMain" accept="image/*" >
+                            <div style="padding: 20px 0">
+                                <div v-if="vehicleForm.mainFileUrl==null">
+                                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
+                                    <p>行驶证主页（照片）</p>
+                                </div>
+                                <img v-if="vehicleForm.mainFileUrl!=null" class="img" :src="vehicleForm.mainFileUrl" />
+                                <Spin size="large" fix v-if="mainUploadStatus"></Spin>
+                            </div>
+                        </Upload>
+                    </Col>
+                    <Col span="12">
+                        <Upload type="drag" action :before-upload="handleUploadSecond" accept="image/*" >
+                            <div style="padding: 20px 0">
+                                <div v-if="vehicleForm.secondFileUrl==null">
+                                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
+                                    <p>行驶证副页（照片）</p>
+                                </div>
+                                <img v-if="vehicleForm.secondFileUrl!=null" class="img" :src="vehicleForm.secondFileUrl" />
+                                <Spin size="large" fix v-if="secondUploadStatus"></Spin>
+                            </div>
+                        </Upload>
+                    </Col>
+                </Row>
+            </Card>
+            <br/>
+            <Card :bordered="false">
+                <p slot="title"><Icon type="ios-film-outline"></Icon> 行驶证信息</p>
+                <Row>
+                    <Col span="8">
+                        <FormItem label="车辆类型">
+                            <Input v-model.trim="vehicleForm.type" type="text" />
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="所有人">
+                            <Input v-model.trim="vehicleForm.owner" type="text" />
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="住址">
+                            <Input v-model.trim="vehicleForm.address" type="text" />
+                        </FormItem>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span="8">
+                        <FormItem label="使用性质">
+                            <Input v-model.trim="vehicleForm.useCharacter" type="text" />
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="型号">
+                            <Input v-model.trim="vehicleForm.licenseModel" type="text" />
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="识别代码">
+                            <Input v-model.trim="vehicleForm.vin" type="text" />
+                        </FormItem>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span="8">
+                        <FormItem label="发动机号码">
+                            <Input v-model.trim="vehicleForm.engineNo" type="text" />
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="注册日期">
+                            <Input v-model.trim="vehicleForm.registerDate" type="text" />
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="发证日期">
+                            <Input v-model.trim="vehicleForm.issueDate" type="text" />
+                        </FormItem>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span="8">
+                        <FormItem label="核载人数">
+                            <Input v-model.trim="vehicleForm.approvedPerson" type="text" />
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="总质量">
+                            <Input v-model.trim="vehicleForm.weight" type="text" />
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="尺寸">
+                            <Input v-model.trim="vehicleForm.outlineSize" type="text" />
+                        </FormItem>
+                    </Col>
+                </Row>
+            </Card>
+        </Form>
+      </div>
+      <div slot="footer">
+        <Button @click="visible = false">取消</Button>
+        <Button @click="saveVehicle" :loading="submitLoading" type="primary">确定</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script src="./index.js"/>
+
+<style lang="less" scoped>
+.img {
+    max-height:200px;
+}
+// .ivu-modal-body {
+//     position: relative;
+//     height: ~"calc(100vh - 200px)";
+//     overflow: scroll;
+// }
+</style>
\ No newline at end of file

src/view/vehicle/edit/index.js

+import store from "@/store";
+const { dispatch } = store;
+
+export default {
+  components: {  },
+  data() {
+    return {
+      visible: false,
+      submitLoading: false,
+      mainUploadStatus: false,
+      secondUploadStatus: false,
+      vehicle: null,
+      readonly: false,
+      vehicleFormRule: {
+        plateNo: [
+          {
+            required: true,
+            message: "请输入车牌号",
+            trigger: "change"
+          }
+        ],
+        brandId: [
+          {
+            required: true,
+            type: 'number',
+            message: "请选择品牌",
+            trigger: "change"
+          }
+        ],
+        model: [
+          {
+            required: true,
+            message: "请选择型号",
+            trigger: "change"
+          }
+        ],
+        engineType: [
+          {
+            required: true,
+            message: "请选择动力类型",
+            trigger: "change"
+          }
+        ],
+        displacement: [
+          {
+            required: true,
+            message: "请输入排量",
+            trigger: "change"
+          }
+        ],
+        color: [
+          {
+            required: true,
+            message: "请选择颜色",
+            trigger: "change"
+          }
+        ],
+      },
+      vehicleForm: {
+        id: 0,
+        plateNo: "",
+        brandId: null,
+        brandName: "",
+        model: "",
+        engineType: "",
+        displacement: "",
+        color: "",
+        mainFileId: 0,
+        secondFileId: 0,
+        mainFileUrl: null,
+        secondFileUrl: null,
+        type: "",
+        address: "",
+        useCharacter: "",
+        licenseModel: "",
+        vin: "",
+        engineNo: "",
+        registerDate: null,
+        issueDate: null,
+        approvedPerson: "",
+        weight: "",
+        outlineSize: "",
+      },
+      brands: [],
+      models: [],
+      colors: [],
+      engineTypes: [],
+    };
+  },
+  computed: {
+  },
+  watch: {
+    visible(show) {
+      this.submitLoading = false;
+      this.$refs.vehicleForm.resetFields();
+      this.brands = [];
+      this.models = [];
+      this.colors = [];
+      this.engineTypes = [];
+
+      if(show) {
+        this.vehicleForm.id = this.vehicle.id;
+        this.vehicleForm.mainFileId = this.vehicle.mainFileId;
+        this.vehicleForm.secondFileId = this.vehicle.secondFileId;
+        this.vehicleForm.mainFileUrl = this.vehicle.mainFileUrl;
+        this.vehicleForm.secondFileUrl = this.vehicle.secondFileUrl;
+  
+        this.vehicleForm.plateNo = this.vehicle.plateNo;
+        this.vehicleForm.brandId = this.vehicle.brandId;
+        this.vehicleForm.brandName = this.vehicle.brandName;
+        this.vehicleForm.model = this.vehicle.model;
+        this.vehicleForm.engineType = this.vehicle.engineType;
+        this.vehicleForm.displacement = this.vehicle.displacement;
+        this.vehicleForm.color = this.vehicle.color;
+        
+        this.vehicleForm.type = this.vehicle.type;
+        this.vehicleForm.address = this.vehicle.address;
+        this.vehicleForm.useCharacter = this.vehicle.useCharacter;
+        this.vehicleForm.licenseModel = this.vehicle.licenseModel;
+        this.vehicleForm.vin = this.vehicle.vin;
+        this.vehicleForm.engineNo = this.vehicle.engineNo;
+        this.vehicleForm.registerDate = this.vehicle.registerDate;
+        this.vehicleForm.issueDate = this.vehicle.issueDate;
+        this.vehicleForm.approvedPerson = this.vehicle.approvedPerson;
+        this.vehicleForm.weight = this.vehicle.weight;
+        this.vehicleForm.outlineSize = this.vehicle.outlineSize;
+
+        var item = {
+          name: this.vehicle.model,
+        }
+        this.models.push(item);
+
+        this.getBrands();
+        this.getColors();
+        this.getEngineTypes();
+      }
+    },
+  },
+  methods: {
+    upload(formData, isMain) {
+      if(isMain == 1) {
+        this.mainUploadStatus = true;
+      } else {
+        this.secondUploadStatus = true;
+      }
+      dispatch("invoke/asyncUploadFile", formData).then(res => {
+        const { code, data, msg } = res;
+        if(code == 1) {
+          this.$Message.info("上传成功");
+        } else {
+          this.$Message.info("上传失败");
+        }
+        if(isMain == 1) {
+          this.mainUploadStatus = false;
+          this.vehicleForm.mainFileId = data.id;
+          this.vehicleForm.mainFileUrl = data.filePath;
+        } else {
+          this.secondUploadStatus = false;
+          this.vehicleForm.secondFileId = data.id;
+          this.vehicleForm.secondFileUrl = data.filePath;
+        }
+        this.detectVehicleLicense(data.filePath, isMain);
+      });
+    },
+    handleUploadMain(file) {
+      const formData = new FormData();
+      formData.append("file", file);
+      this.upload(formData, 1);
+      return false;
+    },
+    handleUploadSecond(file) {
+      const formData = new FormData();
+      formData.append("file", file);
+      this.upload(formData, 2);
+      return false;
+    },
+    detectVehicleLicense(url, isMain) {
+      var requestData = {
+        url: url,
+        isMain: isMain,
+      }
+      dispatch("invoke/asyncDetectVehicleLicense", requestData).then(({ data }) => {
+        if(isMain == 1) {
+          this.vehicleForm.type = data.type;
+          this.vehicleForm.owner = data.owner;
+          this.vehicleForm.address = data.address;
+          this.vehicleForm.useCharacter = data.useCharacter;
+          this.vehicleForm.licenseModel = data.licenseModel;
+          this.vehicleForm.vin = data.vin;
+          this.vehicleForm.engineNo = data.engineNo;
+          this.vehicleForm.registerDate = data.registerDate;
+          this.vehicleForm.issueDate = data.issueDate;
+        } else {
+          this.vehicleForm.approvedPerson = data.approvedPerson;
+          this.vehicleForm.weight = data.weight;
+          this.vehicleForm.outlineSize = data.outlineSize;
+        }
+      });
+    },
+    saveVehicle() {
+      this.$refs.vehicleForm.validate(valid => {
+        if (valid) {
+          dispatch("invoke/asyncUpdateVehicle", this.vehicleForm).then(({ code }) => {
+            this.submitLoading = false;
+            if (code === 1) {
+              this.$Message.success("修改成功");
+              this.$emit("search");
+              this.visible = false;
+            }
+          });
+        }
+      });
+    },
+    brandChange(item) {
+      this.models = [];
+      this.vehicleForm.model = "";
+      if(item) {
+        this.vehicleForm.brandName = item.label;
+        this.getModels(item.value);
+      }
+    },
+    getBrands() {
+      dispatch("invoke/asyncListBrand").then(({ data }) => {
+        this.brands = data;
+      });
+    },
+    getModels(brandId) {
+      var requestData = {
+        parentId: brandId,
+      };
+      dispatch("invoke/asyncListModel", requestData).then(({ data }) => {
+        this.models = data;
+      });
+    },
+    getColors() {
+      dispatch("invoke/asyncListColor").then(({ data }) => {
+        this.colors = data;
+      });
+    },
+    getEngineTypes() {
+      dispatch("invoke/asyncListEngineType").then(({ data }) => {
+        this.engineTypes = data;
+      });
+    },
+  },
+  mounted() {
+  }
+};

src/view/vehicle/edit/index.vue

+<template>
+  <div>
+    <Modal width="800" v-model="visible" title="车辆信息 - 修改" fullscreen >
+      <div>
+        <Form ref="vehicleForm" :model="vehicleForm" :rules="vehicleFormRule" :label-width="80">
+            <Card :bordered="false">
+                <p slot="title"><Icon type="ios-film-outline"></Icon> 基本信息</p>
+                <Row>
+                    <Col span="8">
+                        <FormItem label="车牌号" prop="plateNo">
+                            <Input v-model.trim="vehicleForm.plateNo" type="text" disabled/>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="品牌" prop="brandId">
+                            <Select v-model.trim="vehicleForm.brandId" @on-change="brandChange" @on-clear="brandChange" clearable label-in-value :disabled="readonly">
+                                <Option v-for="item in brands" :value="item.id" :key="item.id">{{ item.name }}</Option>
+                            </Select>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="型号" prop="model">
+                            <Select v-model.trim="vehicleForm.model" clearable :disabled="readonly">
+                                <Option v-for="item in models" :value="item.name" :key="item.name">{{ item.name }}</Option>
+                            </Select>
+                        </FormItem>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span="8">
+                        <FormItem label="动力类型" prop="engineType">
+                            <Select v-model.trim="vehicleForm.engineType" clearable :disabled="readonly">
+                                <Option v-for="item in engineTypes" :value="item.name" :key="item.name">{{ item.name }}</Option>
+                            </Select>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="排量" prop="displacement">
+                            <Input v-model.trim="vehicleForm.displacement" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="颜色" prop="color">
+                            <Select v-model.trim="vehicleForm.color" clearable :disabled="readonly">
+                                <Option v-for="item in colors" :value="item.name" :key="item.name">{{ item.name }}</Option>
+                            </Select>
+                        </FormItem>
+                    </Col>
+                </Row>
+                <!-- <Row>
+                    <Col span="8">
+                        <FormItem label="环保标准" prop="environmentalStandards">
+                            <Select clearable label-in-value>
+                                <Option v-for="item in environmentalStandards" :value="item.id" :key="item.id">{{ item.name }}</Option>
+                            </Select>
+                        </FormItem>
+                    </Col>
+                </Row> -->
+            </Card>
+            <br/>
+            <Card :bordered="false">
+                <p slot="title"><Icon type="ios-film-outline"></Icon> 行驶证照片</p>
+                <Row :gutter="20" v-if="!readonly">
+                    <Col span="12">
+                        <Upload type="drag" action :before-upload="handleUploadMain" accept="image/*" >
+                            <div style="padding: 20px 0">
+                                <div v-if="vehicleForm.mainFileUrl==null">
+                                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
+                                    <p>行驶证主页（照片）</p>
+                                </div>
+                                <img v-if="vehicleForm.mainFileUrl!=null" class="img" :src="vehicleForm.mainFileUrl" />
+                                <Spin size="large" fix v-if="mainUploadStatus"></Spin>
+                            </div>
+                        </Upload>
+                    </Col>
+                    <Col span="12">
+                        <Upload type="drag" action :before-upload="handleUploadSecond" accept="image/*" >
+                            <div style="padding: 20px 0">
+                                <div v-if="vehicleForm.secondFileUrl==null">
+                                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
+                                    <p>行驶证副页（照片）</p>
+                                </div>
+                                <img v-if="vehicleForm.secondFileUrl!=null" class="img" :src="vehicleForm.secondFileUrl" />
+                                <Spin size="large" fix v-if="secondUploadStatus"></Spin>
+                            </div>
+                        </Upload>
+                    </Col>
+                </Row>
+                <Row :gutter="20" v-if="readonly">
+                    <Col span="24">
+                        <div style="padding: 20px 0">
+                            <img v-if="vehicleForm.mainFileUrl!=null" class="img" :src="vehicleForm.mainFileUrl" />
+                            &nbsp;
+                            <img v-if="vehicleForm.secondFileUrl!=null" class="img" :src="vehicleForm.secondFileUrl" />
+                        </div>
+                    </Col>
+                </Row>
+            </Card>
+            <br/>
+            <Card :bordered="false">
+                <p slot="title"><Icon type="ios-film-outline"></Icon> 行驶证信息</p>
+                <Row>
+                    <Col span="8">
+                        <FormItem label="车辆类型">
+                            <Input v-model.trim="vehicleForm.type" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="所有人">
+                            <Input v-model.trim="vehicleForm.owner" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="住址">
+                            <Input v-model.trim="vehicleForm.address" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span="8">
+                        <FormItem label="使用性质">
+                            <Input v-model.trim="vehicleForm.useCharacter" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="型号">
+                            <Input v-model.trim="vehicleForm.licenseModel" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="识别代码">
+                            <Input v-model.trim="vehicleForm.vin" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span="8">
+                        <FormItem label="发动机号码">
+                            <Input v-model.trim="vehicleForm.engineNo" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="注册日期">
+                            <Input v-model.trim="vehicleForm.registerDate" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="发证日期">
+                            <Input v-model.trim="vehicleForm.issueDate" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col span="8">
+                        <FormItem label="核载人数">
+                            <Input v-model.trim="vehicleForm.approvedPerson" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="总质量">
+                            <Input v-model.trim="vehicleForm.weight" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                    <Col span="8">
+                        <FormItem label="尺寸">
+                            <Input v-model.trim="vehicleForm.outlineSize" type="text" :disabled="readonly"/>
+                        </FormItem>
+                    </Col>
+                </Row>
+            </Card>
+        </Form>
+      </div>
+      <div slot="footer">
+        <Button @click="visible = false">取消</Button>
+        <Button v-if="!readonly" @click="saveVehicle" :loading="submitLoading" type="primary">确定</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script src="./index.js"/>
+
+<style lang="less" scoped>
+.img {
+    max-height:200px;
+}
+// .ivu-modal-body {
+//     position: relative;
+//     height: ~"calc(100vh - 200px)";
+//     overflow: scroll;
+// }
+</style>
\ No newline at end of file

src/view/vehicle/list/helper.js

+
+export const columns = (search, showEdit) => [
+  {
+    title: "id",
+    key: "id",
+    align: "center",
+    width: 60,
+  },
+  {
+    title: "车牌号",
+    align: "center",
+    minWidth: 100,
+    render: (h, { row }) => {
+      const { plateNo } = row;
+      return h(
+        "a",
+        {
+            on: { click: () => { 
+              showEdit(row);
+            }}
+        },
+        plateNo
+      );
+    }
+  },
+  {
+    title: "品牌/型号",
+    key: "phone",
+    align: "center",
+    minWidth: 100,
+    render(h, { row }) {
+      try {
+        const { brandName, model } = row;
+        return h("span", `${brandName} / ${model}`);
+      } catch(e) {
+        console.log(e);
+      }
+    }
+  },
+  {
+    title: "颜色",
+    key: "color",
+    align: "center",
+    minWidth: 80,
+  },
+  {
+    title: "排量",
+    key: "displacement",
+    align: "center",
+    minWidth: 80,
+  },
+  {
+    title: "动力类型",
+    key: "engineType",
+    align: "center",
+    minWidth: 80,
+  },
+  {
+    title: "车源",
+    key: "",
+    align: "center",
+    minWidth: 80,
+  },
+  {
+    title: "发动机号",
+    key: "engineNo",
+    align: "center",
+    minWidth: 120,
+  },
+  {
+    title: "识别代码",
+    key: "vin",
+    align: "center",
+    minWidth: 150,
+  },
+  {
+    title: "地址",
+    key: "address",
+    align: "center",
+    minWidth: 260,
+  },
+  {
+    title: "注册日期",
+    key: "registerDate",
+    align: "center",
+    minWidth: 100,
+  },
+  {
+    title: "发证日期",
+    key: "issueDate",
+    align: "center",
+    minWidth: 100,
+  },
+  {
+    title: "车辆状态",
+    align: "center",
+    width: 120,
+    render(h, { row }) {
+      try {
+        const { status } = row;
+        return h("span", {style: {color: status == 1 ? 'green' : 'red' }}, status == 1 ? '有效' : '失效');
+      } catch(e) {
+        console.log(e);
+      }
+    }
+  },
+  {
+    title: "操作",
+    align: "center",
+    fixed: 'right',
+    width: 180,
+    render(h, { row }) {
+      const { status } = row;
+      var emptyTag = h("span","　");
+
+      return h("span", [emptyTag]);
+    }
+  },
+];

src/view/vehicle/list/index.js

+import store from "@/store";
+const { dispatch } = store;
+import { columns } from "./helper.js";
+import AddVehicle from "../add/index.vue";
+import EditVehicle from "../edit/index.vue";
+
+export default {
+  components: { AddVehicle, EditVehicle },
+  data() {
+    return {
+      brands: null,
+      loading: false,
+      columns: [], 
+      plateNo: "",
+      brandName: "",
+
+      changeCurrent: 1,
+      data: {
+        total:0,
+        current: 1,
+        records:[],
+      },
+      page: {
+        size: 10,
+      },
+    }
+  },
+  methods: {
+    getBrands() {
+      dispatch("invoke/asyncListBrand").then(({ data }) => {
+        this.brands = data;
+      });
+    },
+    disable(company) {
+      dispatch("invoke/asyncUpdateCompanyStatus", company);
+    },
+    enable(company) {
+      dispatch("invoke/asyncUpdateCompanyStatus", company);
+    },
+    updateExpired(company) {
+      dispatch("invoke/asyncUpdateCompanyExpired", company);
+    },
+    updateCompany(company) {
+      dispatch("invoke/asyncUpdateCompany", company);
+    },
+    brandChange(item) {
+      if(item){
+        this.brandName = item.label;
+      } else {
+        this.brandName = "";
+      }
+    },
+    showEdit(vehicle) {
+      this.$refs.editVehicle.vehicle = vehicle;
+      this.$refs.editVehicle.visible = true;
+    },
+    search(current = 1) {  
+      this.searchForm = {
+        plateNo: this.plateNo,
+        brandName: this.brandName,
+      };
+
+      this.loading = true
+      const initQuery = {
+        current,
+        size: this.page.size,
+        records: this.searchForm
+      };
+      dispatch("invoke/asyncListVehicle", {
+        ...initQuery
+      }).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();
+    },
+  },
+  mounted() {
+    this.getBrands();
+    this.columns = columns(this.search, this.showEdit);
+    this.search();
+  }
+};

src/view/vehicle/list/index.vue

+<template>
+    <div>
+        <Card>
+            <Form :label-width="100" label-colon>
+                <Row :gutter="5">
+                    <Col span="5">
+                      <FormItem label="车牌号码" >
+                        <Input v-model="plateNo" placeholder="Enter something..." /> 
+                      </FormItem>
+                    </Col>
+                    <Col span="5">
+                      <FormItem label="品牌" >
+                        <Select @on-change="brandChange" @on-clear="brandChange" clearable label-in-value>
+                            <Option v-for="item in brands" :value="item.id" :key="item.id">{{ item.name }}</Option>
+                        </Select>
+                      </FormItem>
+                    </Col>
+                    <Col span="5">
+                      <Button @click="search()" type="primary"><Icon type="ios-search-outline" /> 查询</Button>
+                    </Col>
+                    <Col span="9">
+                        <AddVehicle ref="addVehicle" @search="search" style="float:right" />
+                        <EditVehicle ref="editVehicle" @search="search" style="float:right" />
+                    </Col>
+                </Row>
+             </Form>
+        </Card>
+        <Card style="margin-top:10px">
+            <Table
+                border
+                :loading="loading"
+                :columns="columns"
+                :data="data.records"/>
+            <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

vue.config.js

@@ -13,4 +13,11 @@ module.exports = {
             },
         }
     },
+    css: {
+        loaderOptions: { // 向 CSS 相关的 loader 传递选项
+            less: {
+                javascriptEnabled: true
+            }
+        }
+    }
 }
\ No newline at end of file