增加车辆管理相关前端模块

config/dev.env.js

 module.exports = {
     NODE_ENV: '"development"',
-    BASE_API: '"http://localhost:8765"',
+  BASE_API: '"http://10.5.52.2:8765"',
     APP_ORIGIN: '"https://wallstreetcn.com"'
 }

config/index.js

@@ -31,13 +31,13 @@ module.exports = {
         assetsPublicPath: '/',
         proxyTable: {
           '/jwt': {
-            target: 'http://localhost:8765',
+            target: 'http://10.5.52.2:8765',
             pathRewrite: {
               '^/jwt': '/jwt'
             },
           },
           '/api':{
-            target: 'http://localhost:8765',
+            target: 'http://10.5.52.2:8765',
             pathRewrite: {
               '^/api': '/api'
             },

package.json

@@ -36,6 +36,8 @@
     "vue-router": "2.5.3",
     "vuedraggable": "2.13.1",
     "vuex": "2.3.1",
+    "vxe-utils": "^1.4.8",
+    "xe-utils": "^1.8.17",
     "xlsx": "^0.10.8"
   },
   "devDependencies": {

src/api/base_info/branch_company/index.js

+import axios from 'axios';
+import rsCode from "../../../utils/rsCode";
+import store from "../../../store";
+import {
+  getToken
+} from 'utils/auth';
+import {Message, MessageBox} from "element-ui";
+import XEUtils from 'xe-utils';//加入常用工具类
+import VXEUtils from 'vxe-utils';//加入常用工具类
+
+
+// 创建axios实例
+const fetch = axios.create({
+  baseURL: 'http://localhost:8091/vehicle', // api的base_url
+  timeout: 5000 // 请求超时时间
+});
+
+// request拦截器
+fetch.interceptors.request.use(config => {
+  // Do something before request is sent
+  if (store.getters.token) {
+    config.headers['Authorization'] = getToken(); // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
+  }
+  return config;
+}, error => {
+  // Do something with request error
+  console.log(error); // for debug
+  Promise.reject(error);
+})
+
+// respone拦截器
+fetch.interceptors.response.use(
+  response => {
+    /**
+     * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
+     * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
+     */
+    const res = response.data;
+    if (response.status === 401 || res.status === 40101) {
+      MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+        confirmButtonText: '重新登录',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        store.dispatch('FedLogOut').then(() => {
+          location.reload(); // 为了重新实例化vue-router对象 避免bug
+        });
+      })
+      return Promise.reject('error');
+    }
+    if (res.status === 40301) {
+      Message({
+        message: '当前用户无相关操作权限！',
+        type: 'error',
+        duration: 5 * 1000
+      });
+      return Promise.reject('error');
+    }
+    if (res.status === 40001) {
+      Message({
+        message: '账户或密码错误！',
+        type: 'warning'
+      });
+      return Promise.reject('error');
+    }
+    if (response.status !== 200 && res.status !== 200) {
+      Message({
+        message: res.message,
+        type: 'error',
+        duration: 5 * 1000
+      });
+    } else {
+      return response.data;
+    }
+  },
+  error => {
+    // console.log(error); // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    });
+    return Promise.reject(error);
+  }
+);
+
+export function page(query) {
+  return fetch({
+    url: '/branchCompany/page',
+    method: 'get',
+    params: query
+  });
+}
+
+export function getObj(id) {
+  return fetch({
+    url: '/branchCompany/' + id,
+    method: 'get'
+  });
+}
+
+
+export function addObj(obj) {
+  return fetch({
+    url: '/branchCompany/',
+    method: 'post',
+    data: obj
+  });
+}
+
+
+export function delObj(id) {
+  return fetch({
+    url: '/branchCompany/' + id,
+    method: 'delete'
+  })
+}
+
+export function putObj(obj) {
+  return fetch({
+    url: '/branchCompany',
+    method: 'put',
+    data: obj
+  })
+}
+
+export function getAll() {
+  return fetch({
+    url: '/branchCompany',
+    method: 'get'
+  })
+}
+
+/**
+ * 获取所有公司信息，并缓存
+ * @returns {null|*}
+ */
+export function getAllCompanyCache(resolve) {
+  let codeAndBranchCompany = store.getters.getAllCompany;
+  if (XEUtils.isEmpty(codeAndBranchCompany)) { //缓存中不存在
+    getAll().then(response => {
+      let companyList = response.data;
+      if (!companyList || companyList.length === 0) {
+        return null;
+      }
+      codeAndBranchCompany = {};
+      for (let index in companyList) {
+        codeAndBranchCompany[companyList[index].id] = companyList[index];
+      }
+      store.dispatch("cacheCompany", codeAndBranchCompany);
+      resolve(codeAndBranchCompany);
+    });
+  } else {
+    resolve(codeAndBranchCompany);
+  }
+}

src/api/base_info/constant/index.js

+import store from '../../../store';
+import rsCode from '../../../utils/rsCode';
+
+
+function loadFromServer(type) {
+  if (!type) {
+    console.error(' load constant with no type');
+    return;
+  }
+  // url : baseURL+"",//路径
+  let rs;
+  $.ajax({
+    type: 'get',
+    url: 'http://localhost:8091/vehicle/constant/type/' + type,
+    async: false,
+    dataType: 'json',
+    data: {},
+    success: function (result) {
+      // 返回数据根据结果进行相应的处理
+      if (result.code === rsCode.RS_CODE_SUC) {
+        rs = result.data;
+      } else {
+        console.log('请求常量信息出错。');
+      }
+    },
+    error: function () {
+      console.log('请求常量信息出错。');
+    }
+  });
+  return rs;
+}
+
+/**
+ * 获取对应类型、编码的常量，相关类型未缓存将缓存/5分钟后过期
+ * @param type
+ * @param code
+ * @returns {null|*}
+ */
+export function getConstantByTypeAndCode(type, code) {
+  if (!type) {
+    console.error('empty constant type');
+    return null;
+  }
+  if (!code) {
+    console.error('empty constant code');
+    return null;
+  }
+  let constantMap = store.getters.vehicleConstants(type);
+  if (!constantMap) {
+    let constants = loadFromServer(type);
+    if (!constants || constants.length === 0) {
+      return null;
+    }
+    constantMap = {};
+    for (let index in constants) {
+      constantMap[constants[index].code] = constants[index];
+    }
+    let constantMapAndType = {type, constantMap};
+    store.dispatch("cacheConstant", constantMapAndType);
+    setTimeout(() => {
+      store.dispatch("clearConstant", type);
+    }, 5 * 60 * 1000);
+  }
+  return constantMap[code];
+}
+
+export function getConstantListByType(type) {
+  if (!type) {
+    console.error('empty constant type');
+    return null;
+  }
+  let constantMap = store.getters.vehicleConstants(type);
+  if (JSON.stringify(constantMap) === '{}') {
+    let constants = loadFromServer(type);
+    if (!constants || constants.length === 0) {
+      return null;
+    }
+    constantMap = {};
+    for (let index in constants) {
+      constantMap[constants[index].code] = constants[index];
+    }
+    let constantMapAndType = {type, constantMap};
+    store.dispatch("cacheConstant", constantMapAndType);
+    setTimeout(() => {
+      store.dispatch("clearConstant", type);
+    }, 5 * 60 * 1000);
+  }
+  return constantMap;
+}

src/api/base_info/region/index.js

+import store from '../../../store';
+import rsCode from '../../../utils/rsCode';
+import baseInfo from "../../../store/modules/baseInfo";
+
+
+function loadFromServer(codes) {
+  if (!codes) {
+    console.error(' load region with no code');
+  }
+  // url : baseURL+"",//路径
+  let rs;
+  $.ajax({
+    type: 'get',
+    url: 'http://localhost:8091/vehicle/sysRegion',
+    async: false,
+    dataType: 'json',
+    data: {
+      idListJson: JSON.stringify(codes)
+    },
+    success: function (result) {
+      // 返回数据根据结果进行相应的处理
+      if (result.code === rsCode.RS_CODE_SUC) {
+        rs = result.data;
+      } else {
+        console.log('请求地区信息出错。');
+      }
+    },
+    error: function () {
+      console.log('请求地区信息出错。');
+    }
+  });
+  return rs;
+}
+
+
+function loadSonsFromServer(code) {
+  if (!code) {
+    console.error(' load region with no code');
+  }
+  // url : baseURL+"",//路径
+  let rs;
+  $.ajax({
+    type: 'get',
+    url: 'http://localhost:8091/vehicle/sysRegion/sons/' + code,
+    async: false,
+    data: {},
+    success: function (result) {
+      // 返回数据根据结果进行相应的处理
+      if (result.code === rsCode.RS_CODE_SUC) {
+        rs = result.data;
+      } else {
+        console.log('请求地区信息出错。');
+      }
+    },
+    error: function () {
+      console.log('请求地区信息出错。');
+    }
+  });
+
+  return rs;
+}
+
+export function getSonRegionByCodes(code) {
+  let actualCode = code;
+  if (!actualCode) {
+    actualCode = rsCode.REGION_CODE_CHAINA;
+  }
+
+  let sonRegions = store.getters.sonRegions(actualCode);
+  if (!sonRegions) {
+    let datas = loadSonsFromServer(actualCode);
+    store.dispatch("cacheSonRegions", {
+      code: actualCode,
+      sons: datas
+    });
+    sonRegions = datas;
+  }
+
+  // 创建axios实例
+  return sonRegions;
+}
+
+
+export function getRegionByCodes(codes) {
+  if (!codes) {
+    console.error('empty region codes');
+    return null;
+  }
+  let regions = [];
+  let hasLoaded = true;
+  for (let index in codes) {
+    let region = store.getters.region(codes[index]);
+    if (!region) {
+      hasLoaded = false;
+      break;
+    }
+    regions = [...regions, region];
+  }
+
+  if (!hasLoaded) {
+    let datas = loadFromServer(codes);
+    for (let index = datas.length - 1; index >= 0; index--) {
+      regions = [datas[index], ...regions];
+    }
+    store.dispatch("cacheRegion", regions);
+  }
+  return regions;
+}
+

src/api/vehicle/bookRecord/index.js

+import axios from 'axios';
+import store from "../../../store";
+import {
+  getToken
+} from 'utils/auth';
+import {Message, MessageBox} from "element-ui";
+
+// 创建axios实例
+const fetch = axios.create({
+  baseURL: 'http://localhost:8091/vehicle', // api的base_url
+  timeout: 5000 // 请求超时时间
+});
+
+// request拦截器
+fetch.interceptors.request.use(config => {
+  // Do something before request is sent
+  if (store.getters.token) {
+    config.headers['Authorization'] = getToken(); // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
+  }
+  return config;
+}, error => {
+  // Do something with request error
+  console.log(error); // for debug
+  Promise.reject(error);
+})
+
+// respone拦截器
+fetch.interceptors.response.use(
+  response => {
+    /**
+     * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
+     * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
+     */
+    const res = response.data;
+    if (response.status === 401 || res.status === 40101) {
+      MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+        confirmButtonText: '重新登录',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        store.dispatch('FedLogOut').then(() => {
+          location.reload(); // 为了重新实例化vue-router对象 避免bug
+        });
+      })
+      return Promise.reject('error');
+    }
+    if (res.status === 40301) {
+      Message({
+        message: '当前用户无相关操作权限！',
+        type: 'error',
+        duration: 5 * 1000
+      });
+      return Promise.reject('error');
+    }
+    if (res.status === 40001) {
+      Message({
+        message: '账户或密码错误！',
+        type: 'warning'
+      });
+      return Promise.reject('error');
+    }
+    if (response.status !== 200 && res.status !== 200) {
+      Message({
+        message: res.message,
+        type: 'error',
+        duration: 5 * 1000
+      });
+    } else {
+      return response.data;
+    }
+  },
+  error => {
+    // console.log(error); // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    });
+    return Promise.reject(error);
+  }
+);
+
+
+export function page(query) {
+  return fetch({
+    url: '/vehicleInfo/bookedRecord',
+    method: 'get',
+    params: {vehicleBookRecordQueryVoJson: JSON.stringify(query)}
+  });
+}
+
+export function getObj(id) {
+  return fetch({
+    url: '/vehicleInfo/' + id,
+    method: 'get'
+  });
+}
+
+
+export function prove(id) {
+  return fetch({
+    url: '/vehicleInfo/book/4employee/prove/' + id,
+    method: 'put'
+  });
+}
+
+export function reject(id) {
+  return fetch({
+    url: '/vehicleInfo/book/4employee/reject/' + id,
+    method: 'put'
+  });
+}
+
+export function unbook(id) {
+  return fetch({
+    url: '/vehicleInfo/unbook/4employee/' + id,
+    method: 'delete'
+  });
+}

src/api/vehicle/vehicleInfo/index.js

+import axios from 'axios';
+import store from "../../../store";
+import {Message, MessageBox} from "element-ui";
+
+import {
+  getToken
+} from 'utils/auth';
+
+
+// 创建axios实例
+const fetch = axios.create({
+  baseURL: 'http://localhost:8091/vehicle', // api的base_url
+  timeout: 5000 // 请求超时时间
+});
+
+// request拦截器
+fetch.interceptors.request.use(config => {
+  // Do something before request is sent
+  if (store.getters.token) {
+    config.headers['Authorization'] = getToken(); // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
+  }
+  return config;
+}, error => {
+  // Do something with request error
+  console.log(error); // for debug
+  Promise.reject(error);
+})
+
+// respone拦截器
+fetch.interceptors.response.use(
+  response => {
+    /**
+     * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
+     * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
+     */
+    const res = response.data;
+    if (response.status === 401 || res.status === 40101) {
+      MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+        confirmButtonText: '重新登录',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        store.dispatch('FedLogOut').then(() => {
+          location.reload(); // 为了重新实例化vue-router对象 避免bug
+        });
+      })
+      return Promise.reject('error');
+    }
+    if (res.status === 40301) {
+      Message({
+        message: '当前用户无相关操作权限！',
+        type: 'error',
+        duration: 5 * 1000
+      });
+      return Promise.reject('error');
+    }
+    if (res.status === 40001) {
+      Message({
+        message: '账户或密码错误！',
+        type: 'warning'
+      });
+      return Promise.reject('error');
+    }
+    if (response.status !== 200 && res.status !== 200) {
+      Message({
+        message: res.message,
+        type: 'error',
+        duration: 5 * 1000
+      });
+    } else {
+      return response.data;
+    }
+  },
+  error => {
+    // console.log(error); // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    });
+    return Promise.reject(error);
+  }
+);
+
+
+export function page(query) {
+  return fetch({
+    url: '/vehicleInfo/page',
+    method: 'get',
+    params: {vehiclePageQueryVoJson: query}
+  });
+}
+
+export function getObj(id) {
+  return fetch({
+    url: '/vehicleInfo/' + id,
+    method: 'get'
+  });
+}
+
+
+export function addObj(obj) {
+  return fetch({
+    url: '/vehicleInfo',
+    method: 'post',
+    data: [obj]
+  });
+}
+
+export function book(param) {
+  return fetch({
+    url: '/vehicleInfo/book/4employee',
+    method: 'post',
+    data: param
+  })
+}
+
+export function putObj(obj) {
+  return fetch({
+    url: '/vehicleInfo',
+    method: 'put',
+    data: [obj]
+  })
+}
+
+export function getBookedInfoIn2Month(vehicleId) {
+  return fetch({
+    url: '/vehicleInfo/bookedInfo/' + vehicleId,
+    method: 'get'
+  });
+}
+
+export function getBookedInfo(vehicleId, yearMonth) {
+  return fetch({
+    url: '/vehicleInfo/bookedInfo/' + vehicleId + '/' + yearMonth,
+    method: 'get'
+  });
+}

src/main.js

@@ -21,6 +21,9 @@ import errLog from 'store/errLog';// error log组件
 import './mock/index.js';  // 该项目所有请求使用mockjs模拟
 import { getToken } from 'utils/auth';
 import 'babel-polyfill';//支持IE执行原生script
+import XEUtils from 'xe-utils';//加入常用工具类
+import VXEUtils from 'vxe-utils';//加入常用工具类
+
 
 // register globally
 Vue.component('multiselect', Multiselect);
@@ -28,6 +31,7 @@ Vue.component('Sticky', Sticky);
 Vue.component('icon-svg', IconSvg)
 Vue.use(ElementUI);
 Vue.use(vueWaves);
+Vue.use(VXEUtils, XEUtils);
 
 // register global utility filters.
 Object.keys(filters).forEach(key => {

src/router/index.js

@@ -154,4 +154,37 @@ export const asyncRouterMap = [{
     name: '服务状态监控',
     authority: 'serviceZipkinManager'
   }]
-}];
+}, {
+    path: '/baseInfo',
+    component: Layout,
+    name: '基础信息',
+    icon: 'fa-user',
+    authority: 'baseInfo',
+    children: [{
+      path: 'branchCompany',
+      component: _import('baseInfo/branchCompany/index'),
+      name: '分公司管理',
+      authority: 'branchCompany'
+    }]
+  }, {
+    path: '/vehicle',
+    component: Layout,
+    name: '车辆管理',
+    icon: 'setting',
+    authority: 'vehicle',
+    children: [
+      {
+        path: 'vehicleInfo',
+        component: _import('vehicle/vehicleInfo/index'),
+        name: '车辆信息管理',
+        authority: 'vehicleInfo'
+      },
+      {
+        path: 'bookRecord',
+        component: _import('vehicle/bookRecord/index'),
+        name: '车辆信息管理',
+        authority: 'bookRecord'
+      }
+    ]
+  }
+];

src/store/getters.js

@@ -12,6 +12,33 @@ const getters = {
   setting: state => state.user.setting,
   permission_routers: state => state.permission.routers,
   addRouters: state => state.permission.addRouters,
-  permissionMenus: state => state.user.permissionMenus
+  permissionMenus: state => state.user.permissionMenus,
+  sonRegions: state => {
+    return code => {
+      if (!state.baseInfo.regions || !state.baseInfo.regions.hasOwnProperty(code)) {
+        return null;
+      }
+      return state.baseInfo.regions[code]
+    };
+  },
+  region: state => {
+    return code => {
+      if (typeof (state.baseInfo.regionAndCode) == 'undefined' || !state.baseInfo.regionAndCode.hasOwnProperty(code)) {
+        return null;
+      }
+      return state.baseInfo.regionAndCode[code]
+    };
+  },
+  vehicleConstants: state => {
+    return type => {
+      if (!state.baseInfo.vehicleConstants || !state.baseInfo.vehicleConstants.hasOwnProperty(type)) {
+        return null;
+      }
+      return state.baseInfo.vehicleConstants[type]
+    };
+  },
+  vehicleStatus: state => state.baseInfo.vehicleStatusAndCode,
+  bookRecordStatus: state => state.baseInfo.bookRecordStatusAndCode,
+  getAllCompany: state => state.baseInfo.codeAndBranchCompany
 };
 export default getters

src/store/index.js

@@ -4,6 +4,7 @@ import app from './modules/app';
 import user from './modules/user';
 import permission from './modules/permission';
 import getters from './getters';
+import baseInfo from './modules/baseInfo';
 
 Vue.use(Vuex);
 
@@ -11,7 +12,8 @@ const store = new Vuex.Store({
   modules: {
     app,
     user,
-    permission
+    permission,
+    baseInfo
   },
   getters
 });

src/store/modules/baseInfo.js

+// 以下为车辆相关常量类型的编码
+export const VEHICLE_CONSTANT_VEHICLE_BRAND = 1; // "车辆品牌"
+export const VEHICLE_CONSTANT_VEHICLE_USE = 2; // "车辆用途"
+
+export const VEHICLE_CONSTANT_BRAND_CODE_UNKOWN = 0; // 车辆品牌-未知
+export const VEHICLE_CONSTANT_USE_TYPE_UNKOWN = 0; // "车辆用途" - 未知
+
+export const VEHICLE_CONSTANT_STATUS_DISCARD = 3; // 车辆状态 - 废弃
+export const VEHICLE_CONSTANT_STATUS_NORMAL = 1; // 车辆状态 - 废弃
+
+export const BOOK_RECORD_STATUS_APPLY = 1; // 预定记录状态 - 申请中
+export const BOOK_RECORD_STATUS_PROVED = 2; // 预定记录状态 - 已通过
+
+
+const baseInfo = {
+  state: {
+    regions: {},
+    regionAndCode: {},
+    vehicleConstants: {},
+    vehicleStatusAndCode: {
+      1: {
+        code: 1,
+        val: '正常运行'
+      },
+      2: {
+        code: 2,
+        val: '维修'
+      },
+      3: {
+        code: 3,
+        val: '报废'
+      }
+    },
+    codeAndBranchCompany: {},
+    bookRecordStatusAndCode: {
+      1: {
+        code: 1,
+        val: '申请中'
+      },
+      2: {
+        code: 2,
+        val: '已通过'
+      },
+      3: {
+        code: 3,
+        val: '已归还'
+      },
+      4: {
+        code: 3,
+        val: '拒绝'
+      },
+      5: {
+        code: 5,
+        val: '逾期归还'
+      },
+      6: {
+        code: 6,
+        val: '取消预订'
+      }
+    }
+  },
+  mutations: {
+    ADD_SON_REGION: (state, sonsAndcode) => {
+      state.regions[sonsAndcode.code] = sonsAndcode.sons;
+    },
+    ADD_REGION: (state, region) => {
+      state.regionAndCode[region.id] = region;
+    },
+    ADD_CONSTANT_DATA: (state, constantMapAndType) => {
+      state.vehicleConstants[constantMapAndType.type] = constantMapAndType.constantMap;
+    },
+    REMOVE_CONSTANT_DATA: (state, type) => {
+      state.vehicleConstants[type] = null;
+    },
+    CAHCE_ALL_COMPANY: (state, companyAndCode) => {
+      state.codeAndBranchCompany = companyAndCode;
+    }
+  },
+
+  actions: {
+    // 加入子地区
+    cacheSonRegions({
+                      commit
+                    }, sonsAndcode) {
+      commit('ADD_SON_REGION', sonsAndcode);
+    },
+    // 加入地区
+    cacheRegion({
+                  commit
+                }, datas) {
+      for (let index in datas) {
+        commit('ADD_REGION', datas[index]);
+      }
+    },
+    cacheConstant({
+                    commit
+                  }, constantMapAndType) {
+      commit('ADD_CONSTANT_DATA', constantMapAndType);
+    },
+    clearConstant({
+                    commit
+                  }, type) {
+      commit('REMOVE_CONSTANT_DATA', type);
+    },
+    cacheCompany({
+                   commit
+                 }, companyAndCode) {
+      commit('CAHCE_ALL_COMPANY', companyAndCode);
+    }
+  }
+}
+
+
+export default baseInfo;

src/store/modules/permission.js

@@ -62,7 +62,6 @@ const permission = {
             menuDatas[data[i].code] = data[i];
           }
           const accessedRouters = filterAsyncRouter(asyncRouterMap, menus, menuDatas);
-          console.log(accessedRouters);
           commit('SET_ROUTERS', accessedRouters);
           resolve();
         });

src/store/modules/user.js

@@ -118,7 +118,6 @@ const user = {
           reject(error);
         });
         getMenus(state.token).then(response => {
-          console.log(response)
           commit('SET_PERMISSION_MENUS', response);
         });
       });

src/utils/dateFormattor.js

+export function formatDate(date, fmt) {
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  let o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  }
+  for (let k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      let str = o[k] + ''
+      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
+    }
+  }
+  return fmt
+}
+
+function padLeftZero(str) {
+  return ('00' + str).substr(str.length)
+}

src/utils/dateUtils.js

+import {
+  formatDate
+} from 'utils/dateFormattor';
+
+export function toEast8Date(dateStr) {
+  if (typeof (dateStr) == 'undefined' || JSON.stringify(dateStr) === '{}') {
+    return undefined;
+  }
+  let timezone = 8; //目标时区时间，东八区
+  let offset_GMT = new Date().getTimezoneOffset(); // 本地时间和格林威治的时间差，单位为分钟
+  let nowDate = new Date(dateStr).getTime(); // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数
+  return new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000);
+}
+
+
+export function newEast8Date() {
+  let timezone = 8; //目标时区时间，东八区
+  let offset_GMT = new Date().getTimezoneOffset(); // 本地时间和格林威治的时间差，单位为分钟
+  let nowDate = new Date().getTime(); // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数
+  return new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000);
+}
+
+
+export function deepCopyDate(date) {
+  return toEast8Date(formatDate(date, 'yyyy-MM-dd'));
+}

src/utils/rsCode.js

+export default {
+  RS_CODE_SUC: 1,
+  code: {
+    INVALID_REST_REQ_PARAM: 100000,  //rest请求参数非法
+    VEHICLE_BOOKED_INFO_ALREADY_CHANGED: 101001,  //车辆预定信息已被修改，请刷新后继续操作
+    VEHICLE_BOOKED_RECORD_ALREADY_CHANGED: 103001, //车辆预定申请状态已被修改，请刷新后继续操作
+  },
+  msg: {
+    1: '成功',
+    100000: "rest请求参数非法",
+    101001: "车辆预定信息已被修改，请刷新后继续操作",
+    103001: "车辆预定申请状态已被修改，请刷新后继续操作"
+  }
+}

src/views/admin/group/components/groupAuthority.vue

@@ -155,13 +155,19 @@ export default {
         });
       }
     },
-    update() {
+    update() {//注意 此处对于elemtn级别的权限其实并没有保存，后端相关接口也没有实现
       this.$emit('closeAuthorityDialog');
       const nodes = this.$refs.menuTree.getCheckedNodes();
+      // const elements = this.$refs.elementTable.selection;
       const ids = [];
       for (let i = 0; i < nodes.length; i++) {
         ids.push(nodes[i].id);
       }
+      // if(elements && elements.length>0) {
+      //   for (let i = 0; i < elements.length; i++) {
+      //     ids.push(elements[i].id);
+      //   }
+      // }
       modifyMenuAuthority(this.groupId, {
         menuTrees: ids.join()
       }).then(() => {

src/views/admin/menu/components/element.vue

@@ -158,8 +158,8 @@ export default {
         },
         {
           min: 3,
-          max: 20,
-          message: '长度在 3 到 20 个字符',
+          max: 200,
+          message: '长度在 3 到 200 个字符',
           trigger: 'blur'
         }
         ],

src/views/baseInfo/branchCompany/index.vue

+<template>
+  <div class="app-container calendar-list-container">
+    <div class="filter-container" ref="filter-container">
+      <el-form :rules="rules4Query" ref="queryForm" :inline="inline" :model="listQuery">
+        <el-form-item label="省份">
+          <el-select class="filter-item" v-model="listQuery.addrProvince" placeholder="请选择省份（直辖市）">
+            <el-option :key="undefined" label="无" :value="undefined"></el-option>
+            <el-option v-for="item in provinceRegions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="城市" prop="addrCity">
+          <el-select class="filter-item" v-model="listQuery.addrCity" placeholder="请选择城市">
+            <el-option :key="undefined" label="无" :value="undefined"></el-option>
+            <el-option v-for="item in cityRegions4Query" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="镇（县）" prop="addrTown">
+          <el-select class="filter-item" v-model="listQuery.addrTown" placeholder="请选择镇（县）">
+            <el-option :key="undefined" label="无" :value="undefined"></el-option>
+            <el-option v-for="item in townRegions4Query" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
+        <el-button class="filter-item" v-if="branchCompany_btn_add" style="margin-left: 10px;" @click="handleCreate"
+                   type="primary" icon="edit">添加
+        </el-button>
+      </el-form>
+    </div>
+
+
+    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
+              style="width: 100%">
+      <el-table-column align="center" label="编号" width="65">
+        <template scope="scope">
+          <span>{{scope.row.id}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="名称">
+        <template scope="scope">
+          <span>{{scope.row.name}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="300" align="center" label="地址">
+        <template scope="scope">
+          <span>{{getAddrStr(scope.row) + scope.row.addrDetail}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="180" align="center" label="最后更新时间">
+        <template scope="scope">
+          <span>{{scope.row.updateTime?scope.row.updateTime:scope.row.createTime}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="操作" width="150">
+        <template scope="scope">
+          <el-button v-if="branchCompany_btn_edit" size="small" type="success" @click="handleUpdate(scope.row)">编辑
+          </el-button>
+          <el-button v-if="branchCompany_btn_del" size="small" type="danger" @click="handleDelete(scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div v-show="!listLoading" class="pagination-container">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
+                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+    </div>
+
+
+    <!--     对话框相关html元素  -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="输入名称"></el-input>
+        </el-form-item>
+
+        <el-form-item label="省份" prop="addrProvince">
+          <el-select v-model="form.addrProvince" placeholder="请选择省份（直辖市）">
+            <el-option v-for="item in provinceRegions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="城市" prop="addrCity">
+          <el-select v-model="form.addrCity" placeholder="请选择城市">
+            <el-option v-for="item in cityRegions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="镇（县）" prop="addrTown">
+          <el-select v-model="form.addrTown" placeholder="请选择镇（县）">
+            <el-option v-for="item in townRegions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="地址" prop="addrDetail">
+          <el-input v-model="form.addrDetail" placeholder="请输入详细地址"></el-input>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel('form')">取 消</el-button>
+        <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
+        <el-button v-else type="primary" @click="update('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import {
+    page,
+    addObj,
+    getObj,
+    delObj,
+    putObj
+  } from 'api/base_info/branch_company';
+
+  import {
+    getSonRegionByCodes,
+    getRegionByCodes,
+  } from 'api/base_info/region/';
+
+  import {mapGetters} from 'vuex';
+
+
+  export default {
+    name: 'brachCompany',
+    data() {
+      return {
+        form: {
+          id: undefined,
+          name: undefined,
+          addrProvince: undefined,
+          addrCity: undefined,
+          addrTown: undefined,
+          addrDetail: undefined,
+          updateTime: undefined
+        },
+        rules: {
+          name: [
+            {
+              required: true,
+              message: '请输名称',
+              trigger: 'blur'
+            },
+            {
+              min: 0,
+              max: 200,
+              message: '长度小于 200 个字符',
+              trigger: 'blur'
+            }
+          ],
+          addrDetail: [
+            {
+              required: true,
+              message: '请输入详细地址',
+              trigger: 'blur'
+            },
+            {
+              min: 0,
+              max: 200,
+              message: '长度小于 200 个字符',
+              trigger: 'blur'
+            }
+          ],
+          addrProvince: [
+            {
+              required: true,
+              type: 'number',
+              message: '请选择省份',
+              trigger: 'blur'
+            }
+          ],
+          addrCity: [
+            {
+              required: true,
+              type: 'number',
+              message: '请选择城市',
+              trigger: 'blur'
+            },
+            {
+              validator: (rule, value, callback) => {
+                if (this.$utils.isInteger(this.form.addrProvince) &&
+                  value.toString().substr(0, 2) != this.form.addrProvince.toString().substr(0, 2)) {
+                  return callback(new Error('请选择省份下相应城市'));
+                }
+                callback();
+              },
+              trigger: 'blur'
+            }
+          ],
+          addrTown: [
+            {
+              required: true,
+              type: 'number',
+              message: '请选择镇(县)',
+              trigger: 'blur'
+            },
+            {
+              validator: (rule, value, callback) => {
+                if (this.$utils.isInteger(this.form.addrCity) &&
+                  value.toString().substr(0, 4) != this.form.addrCity.toString().substr(0, 4)) {
+                  return callback(new Error('请选择城市下相应镇（县）'));
+                }
+                callback();
+              },
+              trigger: 'blur'
+            }
+          ]
+        },
+        rules4Query: {
+          addrCity: [
+            {
+              validator: (rule, value, callback) => {
+                if (this.$utils.isInteger(this.listQuery.addrProvince) &&
+                  value.toString().substr(0, 2) != this.listQuery.addrProvince.toString().substr(0, 2)) {
+                  return callback(new Error('请选择省份下相应城市'));
+                }
+                callback();
+              },
+              trigger: 'blur'
+            }
+          ],
+          addrTown: [
+            {
+              validator: (rule, value, callback) => {
+                if (this.$utils.isInteger(this.listQuery.addrCity) &&
+                  value.toString().substr(0, 4) !== this.listQuery.addrCity.toString().substr(0, 4)) {
+                  return callback(new Error('请选择城市下相应镇（县）'));
+                }
+                callback();
+              },
+              trigger: 'blur'
+            }
+          ]
+        },
+        list: null,
+        total: null,
+        listLoading: true,
+        listQuery: {
+          page: 1,
+          limit: 20,
+          addrProvince: undefined,
+          addrCity: undefined,
+          addrTown: undefined
+        },
+        inline: true,
+        dialogFormVisible: false,
+        dialogStatus: '',
+        branchCompany_btn_edit: false,
+        branchCompany_btn_del: false,
+        branchCompany_btn_add: false,
+        textMap: {
+          update: '编辑',
+          create: '创建'
+        },
+        tableKey: 0
+      }
+    },
+    created() {
+      this.getList();
+      this.branchCompany_btn_edit = this.elements['branchCompany:btn_edit'];
+      this.branchCompany_btn_del = this.elements['branchCompany:btn_del'];
+      this.branchCompany_btn_add = this.elements['branchCompany:btn_add'];
+    },
+    computed: {
+      ...mapGetters([
+        'elements'
+      ]),
+      provinceRegions() {
+        return getSonRegionByCodes(1);
+      },
+      cityRegions() {
+        if (!this.$utils.isInteger(this.form.addrProvince)) {
+          return null;
+        }
+        return getSonRegionByCodes(this.form.addrProvince);
+      },
+      townRegions() {
+        if (!this.$utils.isInteger(this.form.addrCity)) {
+          return null;
+        }
+        return getSonRegionByCodes(this.form.addrCity);
+      },
+      cityRegions4Query() {
+        if (!this.$utils.isInteger(this.listQuery.addrProvince)) {
+          return null;
+        }
+        return getSonRegionByCodes(this.listQuery.addrProvince);
+      },
+      townRegions4Query() {
+        if (!this.$utils.isInteger(this.listQuery.addrCity)) {
+          return null;
+        }
+        return getSonRegionByCodes(this.listQuery.addrCity);
+      }
+    },
+    methods: {
+      getList() {
+        this.listLoading = true;
+        page(this.listQuery)
+          .then(response => {
+            this.list = response.data.data;
+            this.total = response.data.totalCount;
+            this.listLoading = false;
+          })
+      },
+      getAddrStr(branchCompany) {
+        let regions = getRegionByCodes([branchCompany.addrProvince, branchCompany.addrCity, branchCompany.addrTown]);
+        return regions[0].name + ' ' + regions[1].name + ' ' + regions[2].name + ' ';
+      },
+      handleFilter() {
+        this.$refs.queryForm.validate(valid => {
+
+          if (valid) {
+            this.getList();
+          } else {
+            return false;
+          }
+        });
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getList();
+      },
+      handleCreate() {
+        this.resetTemp();
+        this.dialogStatus = 'create';
+        this.dialogFormVisible = true;
+      },
+      handleUpdate(row) {
+        getObj(row.id)
+          .then(response => {
+            this.form = response.data;
+            this.dialogFormVisible = true;
+            this.dialogStatus = 'update';
+            this.selectedProvince = response.data.addrProvince;
+            this.selectedCity = response.data.addrCity;
+          });
+      },
+      handleDelete(row) {
+        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            delObj(row.id)
+              .then(() => {
+                this.$notify({
+                  title: '成功',
+                  message: '删除成功',
+                  type: 'success',
+                  duration: 2000
+                });
+                const index = this.list.indexOf(row);
+                this.list.splice(index, 1);
+              });
+          });
+      },
+      create(formName) {
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          if (valid) {
+            addObj(this.form)
+              .then(() => {
+                this.dialogFormVisible = false;
+                this.getList();
+                this.$notify({
+                  title: '成功',
+                  message: '创建成功',
+                  type: 'success',
+                  duration: 2000
+                });
+              })
+          } else {
+            return false;
+          }
+        });
+      },
+      cancel(formName) {
+        this.dialogFormVisible = false;
+        this.$refs[formName].resetFields();
+      },
+      update(formName) {
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          if (valid) {
+            this.dialogFormVisible = false;
+            putObj(this.form).then(() => {
+              this.dialogFormVisible = false;
+              this.getList();
+              this.$notify({
+                title: '成功',
+                message: '创建成功',
+                type: 'success',
+                duration: 2000
+              });
+            });
+          } else {
+            return false;
+          }
+        });
+      },
+      resetTemp() {
+        this.form = {
+          id: undefined,
+          name: undefined,
+          addrProvince: undefined,
+          addrCity: undefined,
+          addrTown: undefined,
+          addrDetail: undefined,
+          updateTime: undefined
+        };
+      }
+    }
+  }
+</script>

src/views/vehicle/bookInfoViewer.vue

+<template>
+  <div>
+    <!--     查看预定信息对话框相关html元素  -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogForm4BookInfoVisible">
+      <el-form :model="form4BookInfo" ref="form4BookInfo" label-width="120px">
+        <el-form-item label="目标月份" prop="selectedMonth4BookInfo">
+          <el-date-picker
+            v-model="selectedMonth4BookInfo"
+            type="month"
+            :editable="true"
+            format="yyyy-MM"
+            placeholder="请选择目标月份"
+            @change="changeDate4BookInfo"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <table cellpadding="0" cellspacing="0" style=" width: 100%; border: 2px solid rgba(131, 145, 165, 0.43) ">
+        <tbody class="el-date-table" style="">
+        <tr style="font-size: 30px">
+          <th style="font-size: 30px">日</th>
+          <th style="font-size: 30px">一</th>
+          <th style="font-size: 30px">二</th>
+          <th style="font-size: 30px">三</th>
+          <th style="font-size: 30px">四</th>
+          <th style="font-size: 30px">五</th>
+          <th style="font-size: 30px">六</th>
+        </tr>
+        <tr v-for=" row in getEevryDayThisMonth " class="el-date-table__row">
+          <td v-for=" col in row " :class="col.class" :style="col.style">
+            {{col.day}}
+            <span v-if=" col.isBooked === true "
+                  :style="{position: 'relative', fontSize: 10+'px', color: 'rgba(15, 159, 214, 0.6)', float: 'right'}">订</span>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel4BookInfo('form4BookInfo')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import {
+    getBookedInfo
+  } from 'api/vehicle/vehicleInfo/';
+
+
+  import {
+    formatDate
+  } from 'utils/dateFormattor';
+
+  import {
+    toEast8Date,
+    deepCopyDate,
+    newEast8Date
+  } from 'utils/dateUtils';
+
+  export default {
+    name: 'bookInfoViewer',
+    data() {
+      return {
+        form4BookInfo: {
+          selectedMonth: undefined,
+          vehicle: undefined
+        },
+        pickerOptions4Apply: {
+          disabledDate: this.checkBookDate
+        },
+        dialogForm4BookInfoVisible: false,
+        curBookedInfo: undefined,
+        dialogStatus: '',
+        textMap: {
+          bookInfo: '预定信息'
+        }
+      }
+    },
+    created() {
+    },
+    computed: {
+      getEevryDayThisMonth: function () {
+        let curDate = newEast8Date();
+        let allDays = [];
+        for (curDate.setDate(0); curDate.getDay() !== 6; curDate.setDate(curDate.getDate() - 1)) {//第一天不是星期天，往上月补充
+          allDays = [...allDays, {
+            class: 'prev-month',
+            isBooked: false,
+            day: curDate.getDate(),
+            style: {fontSize: 25 + 'px'}
+          }];
+        }
+        curDate = newEast8Date();
+        curDate.setDate(1);
+        let curMonth = curDate.getMonth();
+        let maxDay = undefined;
+        for (; curDate.getMonth() <= curMonth; curDate.setDate(curDate.getDate() + 1)) {
+          maxDay = curDate.getDate();
+          let style = {fontSize: 25 + 'px'};
+          let isBooked = false;
+          if (!this.$utils.isEmpty(this.curBookedInfo) && this.$utils.isInteger(this.curBookedInfo.bookedDate)) {
+            if ((this.curBookedInfo.bookedDate & (1 << (maxDay - 1))) !== 0) {
+              style.color = 'rgba(15, 159, 214, 0.6)';
+              style.border = '2px solid rgba(15, 159, 214, 0.6)';
+              isBooked = true;
+            }
+          }
+          allDays = [...allDays, {class: 'available', isBooked: isBooked, day: maxDay, style: style}];
+        }
+
+        for (; curDate.getDay() !== 0; curDate.setDate(curDate.getDate() + 1)) { //最后一天不是星期六，往下月补充
+          allDays = [...allDays, {
+            class: 'next-month',
+            isBooked: false,
+            day: curDate.getDay(),
+            style: {fontSize: 25 + 'px'}
+          }];
+        }
+        let rs = {};
+        for (let index in allDays) {
+          let rowNo = Math.floor(index / 7);
+          if (this.$utils.isEmpty(rs[rowNo])) {
+            rs[rowNo] = [];
+          }
+          rs[rowNo] = [...rs[rowNo], allDays[index]]
+        }
+        return rs;
+      },
+      selectedMonth4BookInfo: {
+        get: function () {
+          if (this.$utils.isString(this.form4BookInfo.selectedMonth) && this.form4BookInfo.selectedMonth !== '') {
+            return toEast8Date(this.form4BookInfo.selectedMonth);
+          }
+          return undefined;
+        },
+        set: function (date) {
+          if (this.$utils.isDate(date)) {
+            this.form4BookInfo.selectedMonth = formatDate(date, 'yyyy-MM');
+          } else {
+            this.form4BookInfo.selectedMonth = undefined;
+          }
+        }
+      }
+    },
+    methods: {
+      changeDate4BookInfo: function (date) {
+        getBookedInfo(this.form4BookInfo.vehicle, date).then(response => {
+          this.curBookedInfo = response.data;
+        });
+      },
+      checkBookDate: function (time) {
+        let nowDate = newEast8Date();
+        if (this.$utils.toDateString(time, 'yyyy-MM-dd') < this.$utils.toDateString(nowDate, 'yyyy-MM-dd')) {
+          return true;
+        }
+        if (nowDate.setMonth(nowDate.getMonth() + 2) < time) {//预定范围两个月内
+          return true;
+        }
+        let curYearMonth = formatDate(time, 'yyyy-MM');
+        if (!this.$utils.isEmpty(this.getCurBookedInfo) && this.$utils.isInteger(this.getCurBookedInfo[curYearMonth])) {
+          let int4BitMap = this.getCurBookedInfo[curYearMonth];
+          let dayOfMonth = time.getDate();
+          return (int4BitMap & (1 << (dayOfMonth - 1))) != 0;
+        }
+        return false;
+      },
+      handleBookInfo(vehicleId) {
+        this.resetTemp4BookInfo();
+        this.form4BookInfo.vehicle = vehicleId;
+        getBookedInfo(vehicleId, formatDate(newEast8Date(), 'yyyy-MM'))
+          .then(response => {
+            this.curBookedInfo = response.data;
+            this.dialogStatus = 'bookInfo';
+            this.dialogForm4BookInfoVisible = true;
+          });
+      },
+      cancel4BookInfo(formName) {
+        this.dialogForm4BookInfoVisible = false;
+        this.$refs[formName].resetFields();
+      },
+      resetTemp4BookInfo() {
+        this.form4BookInfo = {
+          selectedMonth: this.$utils.toDateString(newEast8Date(), 'yyyy-MM'),
+          vehicle: undefined
+        };
+      }
+    }
+  }
+</script>

src/views/vehicle/bookRecord/index.vue

+<template>
+  <div class="app-container calendar-list-container">
+    <div class="filter-container" ref="filter-container">
+      <el-form :rules="rules4Query" ref="queryForm" :inline="inline" :model="listQuery">
+        <el-form-item label="分公司" prop="subordinateBranch">
+          <el-select class="filter-item" v-model="listQuery.subordinateBranch" placeholder="请选择分公司">
+            <el-option :key="undefined" label="无" :value="undefined"></el-option>
+            <el-option v-for="item in allCompanies" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="">
+          <el-input v-model="listQuery.numberPlate" placeholder="请输入车牌"></el-input>
+        </el-form-item>
+
+        <el-form-item label="">
+          <el-input v-model="listQuery.vehicleCode" placeholder="请输入车辆编码"></el-input>
+        </el-form-item>
+
+        <el-form-item label="申请状态">
+          <el-select class="filter-item" v-model="listQuery.status" placeholder="请选择申请状态">
+            <el-option :key="undefined" label="无" :value="undefined"></el-option>
+            <el-option v-for="(val, key, index)   in getAllBookRecordStatus() " :key="val.code" :label="val.val"
+                       :value="val.code"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="请选择预订月份" prop="selectedMonth4Query">
+          <el-date-picker
+            v-model="selectedMonth4Query"
+            type="month"
+            :editable="true"
+            format="yyyy-MM"
+            placeholder="请选择预订月份">
+          </el-date-picker>
+        </el-form-item>
+
+        <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
+      </el-form>
+    </div>
+
+
+    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
+              style="width: 100%">
+      <el-table-column align="center" label="车辆编号" width="65">
+        <template scope="scope">
+          <span>{{scope.row.vehicleCode}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="车牌号" width="120">
+        <template scope="scope">
+          <span>{{scope.row.numberPlate}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="所属公司" width="120">
+        <template scope="scope">
+          <span>{{scope.row.subBranchName}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="申请状态" width="65">
+        <template scope="scope">
+          <span>{{getBookRecordStatus(scope.row.status)}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="申请用户" width="65">
+        <template scope="scope">
+          <span>{{scope.row.bookUserName}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="预定日期" width="220">
+        <template scope="scope">
+        <span
+          v-if="checkIfApply(scope.row.status) && checkIfBooked(scope.row.bookedDate, [scope.row.bookStartDate, scope.row.bookEndDate])"
+          style="color: red">
+          {{getDatePeriodStr([scope.row.bookStartDate, scope.row.bookEndDate])}}(已被预订)
+        </span>
+          <span v-else>{{getDatePeriodStr([scope.row.bookStartDate, scope.row.bookEndDate])}}</span>
+
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="提车地址" width="200">
+        <template scope="scope">
+          <span>{{scope.row.liftAddr}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="目的地" width="200">
+        <template scope="scope">
+          <span>{{scope.row.destination}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="备注" width="200">
+        <template scope="scope">
+          <span>{{scope.row.remark}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="申请审核人" width="65">
+        <template scope="scope">
+          <span>{{scope.row.reviewerNameApply}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="取消人" width="65">
+        <template scope="scope">
+          <span>{{scope.row.reviewerNameCancel}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="操作" width="250">
+        <template scope="scope">
+          <el-button size="small" type="success" @click="handleBookInfo(scope.row)">预订信息</el-button>
+          <el-button
+            v-if="bookRecord_btn_prove && checkIfApply(scope.row.status) && !checkIfBooked(scope.row.bookedDate, [scope.row.bookStartDate, scope.row.bookEndDate])"
+            size="small" type="success" @click="handleProve(scope.row)">通过
+          </el-button>
+          <el-button
+            v-if="bookRecord_btn_reject && checkIfApply(scope.row.status)  && !checkIfBooked(scope.row.bookedDate, [scope.row.bookStartDate, scope.row.bookEndDate]) "
+            size="small" type="danger" @click="handleReject(scope.row)">拒绝
+          </el-button>
+          <el-button v-if="bookRecord_btn_unbook  && checkIfProved(scope.row.status)" size="small" type="danger"
+                     @click="handleUnbook(scope.row)">取消预定
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div v-show="!listLoading" class="pagination-container">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
+                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+    </div>
+
+    <book-info-viewer ref="bookInfoViewer"></book-info-viewer>
+
+
+  </div>
+</template>
+
+<script>
+  import {
+    page,
+    prove,
+    reject,
+    unbook
+  } from 'api/vehicle/bookRecord';
+
+
+  import {
+    getAllCompanyCache
+  } from 'api/base_info/branch_company/';
+
+  import {
+    formatDate
+  } from 'utils/dateFormattor';
+
+  import rsCode from '../../../utils/rsCode';
+
+  import {mapGetters} from 'vuex';
+
+  import {
+    toEast8Date,
+    deepCopyDate,
+    newEast8Date
+  } from 'utils/dateUtils';
+
+  import {
+    BOOK_RECORD_STATUS_APPLY,
+    BOOK_RECORD_STATUS_PROVED
+  } from '../../../store/modules/baseInfo';
+
+  import bookInfoViewer from '../bookInfoViewer';
+
+  export default {
+    name: 'bookRecord',
+    components: {
+      bookInfoViewer
+    },
+    data() {
+      return {
+        rules4Query: {},
+        list: null,
+        total: null,
+        listLoading: true,
+        listQuery: {
+          page: 1,
+          limit: 20,
+          subordinateBranch: undefined,
+          numberPlate: undefined,
+          selectedMonth: formatDate(newEast8Date(), 'yyyy-MM'),
+          vehicleCode: undefined,
+          status: undefined
+        },
+        inline: true,
+        dialogFormVisible: false,
+        dialogStatus: '',
+        bookRecord_btn_prove: false,
+        bookRecord_btn_unbook: false,
+        bookRecord_btn_reject: false,
+        allCompanies: {},
+        tableKey: 0
+      }
+    },
+    created() {
+      this.getList();
+      getAllCompanyCache(codeAndBranchCompany => {//初始化公司列表
+        this.allCompanies = codeAndBranchCompany;
+      });
+      this.bookRecord_btn_prove = this.elements['bookRecord:btn_prove'];
+      this.bookRecord_btn_unbook = this.elements['bookRecord:btn_unbook'];
+      this.bookRecord_btn_reject = this.elements['bookRecord:btn_reject'];
+    },
+    computed: {
+      ...mapGetters([
+        'elements',
+        'bookRecordStatus'
+      ]),
+      selectedMonth4Query: {
+        get: function () {
+          if (this.$utils.isString(this.listQuery.selectedMonth) && this.listQuery.selectedMonth !== '') {
+            return toEast8Date(this.listQuery.selectedMonth);
+          }
+          return undefined;
+        },
+        set: function (date) {
+          if (this.$utils.isDate(date)) {
+            this.listQuery.selectedMonth = formatDate(date, 'yyyy-MM');
+          } else {
+            this.listQuery.selectedMonth = undefined;
+          }
+        }
+      }
+    },
+    methods: {
+      handleBookInfo(row) {
+        this.$refs.bookInfoViewer.handleBookInfo(row.vehicle);
+      },
+      checkIfBooked(bookedDate, [startDateStr, endDateStr]) {
+        if (this.$utils.isInteger(bookedDate) &&
+          this.$utils.isString(startDateStr) && startDateStr !== '' &&
+          this.$utils.isString(endDateStr) && endDateStr !== '') {
+          let startDate = toEast8Date(startDateStr);
+          let endDate = toEast8Date(endDateStr);
+          for (; this.$utils.toDateString(startDate, 'yyyy-MM-dd') <= this.$utils.toDateString(endDate, 'yyyy-MM-dd');
+                 startDate.setDate(startDate.getDate() + 1)) {
+            if ((bookedDate & (1 << (startDate.getDate() - 1))) !== 0) {
+              return true;
+            }
+          }
+        }
+        return false;
+      },
+      checkIfApply(code) {
+        return code === BOOK_RECORD_STATUS_APPLY;
+      },
+      checkIfProved(code) {
+        return code === BOOK_RECORD_STATUS_PROVED;
+      },
+      getList() {
+        this.listLoading = true;
+        page(this.listQuery)
+          .then(response => {
+            this.list = response.data.data;
+            this.total = response.data.totalCount;
+            this.listLoading = false;
+          })
+      },
+      getBookRecordStatus: function (code) {
+        if (!this.$utils.isInteger(code)) {
+          return '未知';
+        }
+        return this.bookRecordStatus[code + ''].val;
+      },
+      getAllBookRecordStatus: function () {
+        return this.bookRecordStatus;
+      },
+      getDatePeriodStr([startDate, endDate]) {
+        if (this.$utils.isString(startDate) && startDate !== '' &&
+          this.$utils.isString(endDate) && endDate !== '') {
+          return formatDate(toEast8Date(startDate), 'yyyy-MM-dd') + ' 至 ' + formatDate(toEast8Date(endDate), 'yyyy-MM-dd');
+        }
+        return '未知';
+      },
+      handleFilter() {
+        this.$refs.queryForm.validate(valid => {
+
+          if (valid) {
+            this.getList();
+          } else {
+            return false;
+          }
+        });
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getList();
+      },
+      handleProve(row) {
+        this.$confirm('确定批准申请?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          prove(row.id)
+            .then(response => {
+              if (response.code === rsCode.code.VEHICLE_BOOKED_INFO_ALREADY_CHANGED) {
+                this.$notify({
+                  title: '失败',
+                  message: rsCode.msg[rsCode.code.VEHICLE_BOOKED_INFO_ALREADY_CHANGED],
+                  type: 'error',
+                  duration: 2000
+                });
+              } else if (response.code === rsCode.code.VEHICLE_BOOKED_RECORD_ALREADY_CHANGED) {
+                this.$notify({
+                  title: '失败',
+                  message: rsCode.msg[rsCode.code.VEHICLE_BOOKED_RECORD_ALREADY_CHANGED],
+                  type: 'error',
+                  duration: 2000
+                });
+              } else if (response.code === rsCode.RS_CODE_SUC) {
+                this.$notify({
+                  title: '成功',
+                  message: '操作成功',
+                  type: 'success',
+                  duration: 2000
+                });
+              }
+              this.getList();
+            });
+        });
+      },
+      handleReject(row) {
+        this.$confirm('确定拒绝申请?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          reject(row.id)
+            .then(response => {
+              if (response.code === rsCode.code.VEHICLE_BOOKED_INFO_ALREADY_CHANGED) {
+                this.$notify({
+                  title: '失败',
+                  message: rsCode.msg[rsCode.code.VEHICLE_BOOKED_INFO_ALREADY_CHANGED],
+                  type: 'error',
+                  duration: 2000
+                });
+              } else if (response.code === rsCode.code.VEHICLE_BOOKED_RECORD_ALREADY_CHANGED) {
+                this.$notify({
+                  title: '失败',
+                  message: rsCode.msg[rsCode.VEHICLE_BOOKED_RECORD_ALREADY_CHANGED],
+                  type: 'error',
+                  duration: 2000
+                });
+              } else if (response.code === rsCode.RS_CODE_SUC) {
+                this.$notify({
+                  title: '成功',
+                  message: '操作成功',
+                  type: 'success',
+                  duration: 2000
+                });
+              }
+              this.getList();
+            });
+        });
+      },
+      handleUnbook(row) {
+        this.$confirm('确定取消预定?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          unbook(row.id)
+            .then(response => {
+              if (response.code === rsCode.code.VEHICLE_BOOKED_INFO_ALREADY_CHANGED) {
+                this.$notify({
+                  title: '失败',
+                  message: rsCode.msg[rsCode.code.VEHICLE_BOOKED_INFO_ALREADY_CHANGED],
+                  type: 'error',
+                  duration: 2000
+                });
+              } else if (response.code === rsCode.code.VEHICLE_BOOKED_RECORD_ALREADY_CHANGED) {
+                this.$notify({
+                  title: '失败',
+                  message: rsCode.msg[rsCode.code.VEHICLE_BOOKED_RECORD_ALREADY_CHANGED],
+                  type: 'error',
+                  duration: 2000
+                });
+              } else if (response.code === rsCode.RS_CODE_SUC) {
+                this.$notify({
+                  title: '成功',
+                  message: '操作成功',
+                  type: 'success',
+                  duration: 2000
+                });
+              }
+              this.getList();
+            });
+        });
+      },
+      resetTemp() {
+        this.form = {
+          id: undefined,
+          name: undefined,
+          addrProvince: undefined,
+          addrCity: undefined,
+          addrTown: undefined,
+          addrDetail: undefined,
+          updateTime: undefined
+        };
+      }
+    }
+  }
+</script>

src/views/vehicle/vehicleInfo/index.vue

+<template>
+  <div class="app-container calendar-list-container">
+    <div class="filter-container" ref="filter-container">
+      <el-form :rules="rules4Query" ref="queryForm" :inline="inline" :model="listQuery">
+        <el-form-item label="分公司" prop="subordinateBranch">
+          <el-select class="filter-item" v-model="listQuery.subordinateBranch" placeholder="请选择分公司">
+            <el-option :key="undefined" label="无" :value="undefined"></el-option>
+            <el-option v-for="item in allCompanies" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="">
+          <el-input v-model="listQuery.numberPlate" placeholder="请输入车牌"></el-input>
+        </el-form-item>
+
+
+        <el-form-item label="">
+          <el-input v-model="listQuery.code" placeholder="请输入车辆编码"></el-input>
+        </el-form-item>
+
+        <el-form-item label="车辆状态">
+          <el-select class="filter-item" v-model="listQuery.status" placeholder="请选择车辆状态">
+            <el-option :key="undefined" label="无" :value="undefined"></el-option>
+            <el-option v-for="(val, key, index)   in getAllVehicleStatus() " :key="val.code" :label="val.val"
+                       :value="val.code"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="未预订日期范围" prop="notBookDateRange">
+          <el-date-picker
+            v-model="notBookDateRange"
+            type="daterange"
+            :editable="true"
+            format="yyyy-MM-dd"
+            placeholder="请输入未预订日期范围">
+          </el-date-picker>
+        </el-form-item>
+
+        <el-form-item label="预订日期范围" prop="bookDateRange">
+          <el-date-picker
+            v-model="bookDateRange"
+            type="daterange"
+            :editable="true"
+            format="yyyy-MM-dd"
+            placeholder="请输入已预订日期范围">
+          </el-date-picker>
+        </el-form-item>
+
+        <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
+        <el-button class="filter-item" v-if="vehicleInfo_btn_add" style="margin-left: 10px;" @click="handleCreate"
+                   type="primary" icon="edit">添加
+        </el-button>
+      </el-form>
+    </div>
+
+
+    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
+              style="width: 100%">
+      <el-table-column align="center" label="编号" width="65">
+        <template scope="scope">
+          <span>{{scope.row.code}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column width="120" align="center" label="车牌">
+        <template scope="scope">
+          <span>{{scope.row.numberPlate}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="100" align="center" label="车辆状态">
+        <template scope="scope">
+          <span>{{getVehicleStatus(scope.row.status)}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="100" align="center" label="车辆品牌">
+        <template scope="scope">
+          <span>{{getBrand(scope.row.brand)}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="180" align="center" label="所属子公司">
+        <template scope="scope">
+          <span>{{scope.row.subBranchName}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="100" align="center" label="用途">
+        <template scope="scope">
+          <span>{{getUseType(scope.row.useType)}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="200" align="center" label="备注">
+        <template scope="scope">
+          <span>{{scope.row.remark}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="180" align="center" label="最后更新时间">
+        <template scope="scope">
+          <span>{{scope.row.updateTime?scope.row.updateTime:scope.row.createTime}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="操作" width="250">
+        <template scope="scope">
+          <el-button v-if="vehicleInfo_btn_edit " size="small" type="success" @click="handleUpdate(scope.row)">编辑
+          </el-button>
+          <el-button v-if="vehicleInfo_btn_apply && checkIfRuning(scope.row) " size="small" type="success"
+                     @click="handleApply(scope.row)">申请预订
+          </el-button>
+          <el-button size="small" type="success" @click="handleBookInfo(scope.row)">预订信息</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div v-show="!listLoading" class="pagination-container">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
+                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+    </div>
+
+
+    <!--     对话框相关html元素  -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+
+      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+
+        <el-form-item label="车牌" prop="numberPlate">
+          <el-input v-model="form.numberPlate" placeholder="输入车牌"></el-input>
+        </el-form-item>
+
+        <el-form-item label="车辆状态" prop="status">
+          <el-select class="filter-item" v-model="form.status" placeholder="请选择车辆状态">
+            <el-option v-for="(val, key, index)   in getAllVehicleStatus() " :key="val.code" :label="val.val"
+                       :value="val.code"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="车辆品牌" prop="brand">
+          <el-select class="filter-item" v-model="form.brand" placeholder="请选择车辆品牌">
+            <el-option :key="getUnkownBrandCode" label="未知" :value="getUnkownBrandCode"></el-option>
+            <el-option v-for="item  in getAllBranch() " :key="item.code" :label="item.val"
+                       :value="item.code"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="分公司" prop="subordinateBranch">
+          <el-select class="filter-item" v-model="form.subordinateBranch" placeholder="请选择分公司">
+            <el-option :key="undefined" label="无" :value="undefined"></el-option>
+            <el-option v-for="item in allCompanies" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="用途" prop="useType">
+          <el-select class="filter-item" v-model="form.useType" placeholder="请选择用途">
+            <el-option :key="undefined" label="无" :value="undefined"></el-option>
+            <el-option v-for="item  in getAllUseType() " :key="item.code" :label="item.val"
+                       :value="item.code"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注信息"></el-input>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel('form')">取 消</el-button>
+        <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
+        <el-button v-else type="primary" @click="update('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+
+
+    <!--     申请对话框相关html元素  -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogForm4ApplyVisible">
+
+      <el-form :model="form4Apply" :rules="rules4Apply" ref="form4Apply" label-width="120px">
+        <el-form-item label="预订日期范围" prop="bookDateRange4Apply">
+          <el-date-picker
+            v-model="bookDateRange4Apply"
+            type="daterange"
+            :editable="true"
+            format="yyyy-MM-dd"
+            placeholder="请输入预订日期范围"
+            :picker-options="pickerOptions4Apply"
+          >
+          </el-date-picker>
+        </el-form-item>
+
+        <el-form-item label="提车地址" prop="liftAddr">
+          <el-input v-model="form4Apply.liftAddr" placeholder="请输入提车地址"></el-input>
+        </el-form-item>
+        <el-form-item label="目的地" prop="destination">
+          <el-input v-model="form4Apply.destination" placeholder="请输入目的地"></el-input>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form4Apply.remark" placeholder="请输入备注信息"></el-input>
+        </el-form-item>
+
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel4Apply('form4Apply')">取 消</el-button>
+        <el-button type="primary" @click="apply('form4Apply')">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <book-info-viewer ref="bookInfoViewer"></book-info-viewer>
+
+  </div>
+</template>
+
+<script>
+  import {
+    page,
+    addObj,
+    getObj,
+    book,
+    getBookedInfoIn2Month,
+    getBookedInfo,
+    putObj
+  } from 'api/vehicle/vehicleInfo/';
+
+  import {
+    getConstantByTypeAndCode,
+    getConstantListByType
+  } from 'api/base_info/constant/';
+
+  import {
+    getSonRegionByCodes,
+    getRegionByCodes,
+  } from 'api/base_info/region/';
+
+  import {
+    VEHICLE_CONSTANT_VEHICLE_BRAND,
+    VEHICLE_CONSTANT_VEHICLE_USE,
+    VEHICLE_CONSTANT_BRAND_CODE_UNKOWN,
+    VEHICLE_CONSTANT_USE_TYPE_UNKOWN,
+    VEHICLE_CONSTANT_STATUS_NORMAL
+  } from '../../../store/modules/baseInfo';
+
+  import {
+    getAllCompanyCache
+  } from 'api/base_info/branch_company/';
+
+  import {
+    formatDate
+  } from 'utils/dateFormattor';
+
+  import {
+    toEast8Date,
+    deepCopyDate,
+    newEast8Date
+  } from 'utils/dateUtils';
+
+  import rsCode from '../../../utils/rsCode';
+
+  import {mapGetters} from 'vuex';
+
+  import bookInfoViewer from '../bookInfoViewer';
+
+
+  export default {
+    name: 'vehicleInfo',
+    components: {
+      bookInfoViewer
+    },
+    data() {
+      return {
+        form: {
+          status: undefined,
+          numberPlate: undefined,
+          brand: undefined,
+          subordinateBranch: undefined,
+          useType: undefined,
+          remark: undefined
+        },
+        rules: {
+          numberPlate: [
+            {
+              min: 0,
+              max: 20,
+              message: '长度小于 20 个字符',
+              trigger: 'blur'
+            }
+          ],
+          remark: [
+            {
+              min: 0,
+              max: 2000,
+              message: '长度小于 2000 个字符',
+              trigger: 'blur'
+            }
+          ]
+        },
+        form4Apply: {
+          bookStartDate: undefined,
+          bookEndDate: undefined,
+          vehicle: undefined,
+          liftAddr: undefined,
+          destination: undefined,
+          remark: undefined
+        },
+        pickerOptions4Apply: {
+          disabledDate: this.checkBookDate
+        },
+        rules4Query: {
+          subordinateBranch: [
+            {
+              validator: (rule, value, callback) => {
+                if ((this.$utils.isString(this.listQuery.bookedStartDate) && this.listQuery.bookedStartDate !== '') ||
+                  (this.$utils.isString(this.listQuery.bookedEndDate) && this.listQuery.bookedEndDate !== '') ||
+                  (this.$utils.isString(this.listQuery.notBookedStartDate) && this.listQuery.notBookedStartDate !== '') ||
+                  (this.$utils.isString(this.listQuery.notBookedEndDate) && this.listQuery.notBookedEndDate !== '')) {
+                  if (!this.listQuery.subordinateBranch) {
+                    return callback(new Error('若需按预定日期查询车辆，选择分公司'));
+                  }
+                }
+                callback();
+              },
+              trigger: 'blur'
+            }
+          ],
+          notBookDateRange: [
+            {
+              validator: (rule, value, callback) => {
+                if (this.notBookDateRange) {
+                  let startDate = toEast8Date(this.listQuery.notBookedStartDate);
+                  let endDate = toEast8Date(this.listQuery.notBookedEndDate);
+                  if (this.$utils.isDate(startDate) && startDate.setMonth(startDate.getMonth() + 2) < endDate) {
+                    return callback(new Error('日期范围不能超过2个月'));
+                  }
+                }
+                callback();
+              },
+              trigger: 'blur'
+            }
+          ],
+          bookDateRange: [
+            {
+              validator: (rule, value, callback) => {
+                if (this.bookDateRange) {
+                  let startDate = toEast8Date(this.listQuery.bookedStartDate);
+                  let endDate = toEast8Date(this.listQuery.bookedEndDate);
+                  if (this.$utils.isDate(startDate) && startDate.setMonth(startDate.getMonth() + 2) < endDate) {
+                    return callback(new Error('日期范围不能超过2个月'));
+                  }
+                }
+                callback();
+              },
+              trigger: 'blur'
+            }
+          ]
+        },
+        rules4Apply: {
+          bookDateRange4Apply: [
+            {
+              validator: (rule, value, callback) => {
+                if (this.$utils.isArray(this.bookDateRange4Apply) && this.bookDateRange4Apply.length > 0) {
+                  let [oriStartDate, ortEndDate] = this.bookDateRange4Apply;
+                  if (!this.$utils.isDate(oriStartDate) || !this.$utils.isDate(ortEndDate)) {
+                    return callback();
+                  }
+                  let [startDate, endDate] = [deepCopyDate(oriStartDate), deepCopyDate(ortEndDate)];
+                  for (let curDate = startDate; curDate <= endDate; curDate.setDate(curDate.getDate() + 1)) {
+                    if (this.checkBookDate(curDate)) {
+                      return callback(new Error('请选择从今天起两个月内，未预定的时间。'));
+                    }
+                  }
+                  callback();
+                } else {
+                  return callback(new Error('请输入预定时间。'));
+                }
+              },
+              trigger: 'blur'
+            }
+          ],
+          liftAddr: [
+            {
+              required: true,
+              message: '请输入提车地址',
+              trigger: 'blur'
+            },
+            {
+              min: 0,
+              max: 200,
+              message: '长度小于 200 个字符',
+              trigger: 'blur'
+            }
+          ],
+          destination: [
+            {
+              min: 0,
+              max: 200,
+              message: '长度小于 200 个字符',
+              trigger: 'blur'
+            }
+          ],
+          remark: [
+            {
+              min: 0,
+              max: 2000,
+              message: '长度小于 2000 个字符',
+              trigger: 'blur'
+            }
+          ]
+        },
+        list: null,
+        total: null,
+        listLoading: true,
+        listQuery: {
+          page: 1,
+          limit: 20,
+          subordinateBranch: undefined,
+          numberPlate: undefined,
+          status: undefined,
+          bookedStartDate: undefined,
+          bookedEndDate: undefined,
+          notBookedStartDate: undefined,
+          notBookedEndDate: undefined,
+          code: undefined
+        },
+        inline: true,
+        dialogFormVisible: false,
+        dialogForm4ApplyVisible: false,
+        curBookedInfo3Month: undefined,
+        curBookedInfo: undefined,
+        dialogStatus: '',
+        vehicleInfo_btn_edit: false,
+        vehicleInfo_btn_add: false,
+        vehicleInfo_btn_apply: false,
+        allCompanies: {},
+        textMap: {
+          update: '编辑',
+          create: '创建',
+          apply: '预定申请'
+        },
+        tableKey: 0
+      }
+    },
+    created() {
+      this.getList();
+      getAllCompanyCache(codeAndBranchCompany => {
+        this.allCompanies = codeAndBranchCompany;
+      });
+      this.vehicleInfo_btn_edit = this.elements['vehicleInfo:btn_edit'];
+      this.vehicleInfo_btn_add = this.elements['vehicleInfo:btn_add'];
+      this.vehicleInfo_btn_apply = this.elements['vehicleInfo:btn_apply'];
+    },
+    computed: {
+      ...mapGetters([
+        'elements',
+        'vehicleStatus'
+      ]),
+      getUnkownBrandCode: () => VEHICLE_CONSTANT_BRAND_CODE_UNKOWN,
+      getCurBookedInfo: function () {
+        if (!this.$utils.isEmpty(this.curBookedInfo3Month) && this.curBookedInfo3Month.length > 0) {
+          let rs = {};
+          for (let index in this.curBookedInfo3Month) {
+            rs[this.curBookedInfo3Month[index].yearMonth] = this.curBookedInfo3Month[index].bookedDate;
+          }
+          return rs;
+        }
+        return undefined;
+      },
+      bookDateRange: {
+        get: function () {
+          let startDate = undefined;
+          let endDate = undefined;
+          if (this.$utils.isString(this.listQuery.bookedStartDate) && this.listQuery.bookedStartDate !== '') {
+            startDate = toEast8Date(this.listQuery.bookedStartDate);
+          }
+          if (this.$utils.isString(this.listQuery.bookedEndDate) && this.listQuery.bookedEndDate !== '') {
+            endDate = toEast8Date(this.listQuery.bookedEndDate);
+          }
+          return [startDate, endDate];
+        },
+        set: function ([startDate, endDate]) {
+          if (this.$utils.isDate(startDate)) {
+            this.listQuery.bookedStartDate = formatDate(startDate, 'yyyy-MM-dd');
+          } else {
+            this.listQuery.bookedStartDate = undefined;
+          }
+          if (this.$utils.isDate(endDate)) {
+            this.listQuery.bookedEndDate = formatDate(endDate, 'yyyy-MM-dd');
+          } else {
+            this.listQuery.bookedEndDate = undefined;
+          }
+        }
+      },
+      notBookDateRange: {
+        get: function () {
+          let startDate = undefined;
+          let endDate = undefined;
+          if (this.$utils.isString(this.listQuery.notBookedStartDate) && this.listQuery.notBookedStartDate !== '') {
+            startDate = toEast8Date(this.listQuery.notBookedStartDate);
+          }
+          if (this.$utils.isString(this.listQuery.notBookedEndDate) && this.listQuery.notBookedEndDate !== '') {
+            endDate = toEast8Date(this.listQuery.notBookedEndDate);
+          }
+          return [startDate, endDate];
+        },
+        set: function ([startDate, endDate]) {
+          if (this.$utils.isDate(startDate)) {
+            this.listQuery.notBookedStartDate = formatDate(startDate, 'yyyy-MM-dd');
+          } else {
+            this.listQuery.notBookedStartDate = undefined;
+          }
+          if (this.$utils.isDate(endDate)) {
+            this.listQuery.notBookedEndDate = formatDate(endDate, 'yyyy-MM-dd');
+          } else {
+            this.listQuery.notBookedEndDate = undefined;
+          }
+        }
+      },
+      bookDateRange4Apply: {
+        get: function () {
+          let startDate = undefined;
+          let endDate = undefined;
+          if (this.$utils.isString(this.form4Apply.bookStartDate) && this.form4Apply.bookStartDate !== '') {
+            startDate = toEast8Date(this.form4Apply.bookStartDate);
+          }
+          if (this.$utils.isString(this.form4Apply.bookEndDate) && this.form4Apply.bookEndDate !== '') {
+            endDate = toEast8Date(this.form4Apply.bookEndDate);
+          }
+          return [startDate, endDate];
+        },
+        set: function ([startDate, endDate]) {
+          if (this.$utils.isDate(startDate)) {
+            this.form4Apply.bookStartDate = formatDate(startDate, 'yyyy-MM-dd');
+          } else {
+            this.form4Apply.bookStartDate = undefined;
+          }
+          if (this.$utils.isDate(endDate)) {
+            this.form4Apply.bookEndDate = formatDate(endDate, 'yyyy-MM-dd');
+          } else {
+            this.form4Apply.bookEndDate = undefined;
+          }
+        }
+      }
+    },
+    methods: {
+      changeDate4BookInfo: function (date) {
+        getBookedInfo(this.form4BookInfo.vehicle, date).then(response => {
+          this.curBookedInfo = response.data;
+        });
+      },
+      checkBookDate: function (time) {
+        let nowDate = newEast8Date();
+        if (this.$utils.toDateString(time, 'yyyy-MM-dd') < this.$utils.toDateString(nowDate, 'yyyy-MM-dd')) {
+          return true;
+        }
+        if (nowDate.setMonth(nowDate.getMonth() + 2) < time) {//预定范围两个月内
+          return true;
+        }
+        let curYearMonth = formatDate(time, 'yyyy-MM');
+        if (!this.$utils.isEmpty(this.getCurBookedInfo) && this.$utils.isInteger(this.getCurBookedInfo[curYearMonth])) {
+          let int4BitMap = this.getCurBookedInfo[curYearMonth];
+          let dayOfMonth = time.getDate();
+          return (int4BitMap & (1 << (dayOfMonth - 1))) != 0;
+        }
+        return false;
+      },
+      checkIfRuning: vehicle => vehicle.status === VEHICLE_CONSTANT_STATUS_NORMAL,
+      getVehicleStatus: function (code) {
+        return this.vehicleStatus[code].val;
+      },
+      getAllVehicleStatus: function () {
+        return this.vehicleStatus;
+      },
+      getBrand: function (code) {
+        if (!this.$utils.isInteger(code) || code == VEHICLE_CONSTANT_BRAND_CODE_UNKOWN) {
+          return '未知';
+        }
+        return getConstantByTypeAndCode(VEHICLE_CONSTANT_VEHICLE_BRAND, code).val;
+      },
+      getAllBranch: () => {
+        return getConstantListByType(VEHICLE_CONSTANT_VEHICLE_BRAND);
+      },
+      getUseType: function (code) {
+        if (!this.$utils.isInteger(code) || code == VEHICLE_CONSTANT_USE_TYPE_UNKOWN) {
+          return '未知';
+        }
+        return getConstantByTypeAndCode(VEHICLE_CONSTANT_VEHICLE_USE, code).val;
+      },
+      getAllUseType: () => {
+        return getConstantListByType(VEHICLE_CONSTANT_VEHICLE_USE);
+      },
+      getList() {
+        this.listLoading = true;
+        page(this.listQuery).then(response => {
+          let totalCountRs = undefined;
+          let listRs = undefined;
+          if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
+            listRs = response.data.data;
+            totalCountRs = response.data.totalCount;
+          }
+          this.listLoading = false;
+          this.list = listRs;
+          this.total = totalCountRs;
+        })
+      },
+      getAddrStr(branchCompany) {
+        let regions = getRegionByCodes([branchCompany.addrProvince, branchCompany.addrCity, branchCompany.addrTown]);
+        return regions[0].name + ' ' + regions[1].name + ' ' + regions[2].name + ' ';
+      },
+      handleFilter() {
+        this.$refs.queryForm.validate(valid => {
+          if (valid) {
+            this.getList();
+          } else {
+            return false;
+          }
+        });
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getList();
+      },
+      handleCreate() {
+        this.resetTemp();
+        this.dialogStatus = 'create';
+        this.dialogFormVisible = true;
+      },
+      handleUpdate(row) {
+        getObj(row.id)
+          .then(response => {
+            this.form = response.data;
+            this.dialogFormVisible = true;
+            this.dialogStatus = 'update';
+          });
+      },
+      handleApply(row) {
+        this.resetTemp4Apply();
+        this.form4Apply.vehicle = row.id;
+        getBookedInfoIn2Month(row.id)
+          .then(response => {
+            this.curBookedInfo3Month = response.data;
+            this.dialogStatus = 'apply';
+            this.dialogForm4ApplyVisible = true;
+          });
+      },
+      handleBookInfo(row) {
+        this.$refs.bookInfoViewer.handleBookInfo(row.id);
+      },
+      create(formName) {
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          if (valid) {
+            addObj(this.form)
+              .then(() => {
+                this.dialogFormVisible = false;
+                this.getList();
+                this.$notify({
+                  title: '成功',
+                  message: '创建成功',
+                  type: 'success',
+                  duration: 2000
+                });
+              })
+          } else {
+            return false;
+          }
+        });
+      },
+      cancel(formName) {
+        this.dialogFormVisible = false;
+        this.dialogForm4ApplyVisible = false;
+        this.$refs[formName].resetFields();
+      },
+      cancel4Apply(formName) {
+        this.dialogForm4ApplyVisible = false;
+        this.$refs[formName].resetFields();
+      },
+      update(formName) {
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          if (valid) {
+            this.dialogFormVisible = false;
+            putObj(this.form).then(() => {
+              this.dialogFormVisible = false;
+              this.getList();
+              this.$notify({
+                title: '成功',
+                message: '创建成功',
+                type: 'success',
+                duration: 2000
+              });
+            });
+          } else {
+            return false;
+          }
+        });
+      },
+      apply(formName) {
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          if (valid) {
+            this.dialogFormVisible = false;
+            book(this.form4Apply).then((response) => {
+              this.dialogForm4ApplyVisible = false;
+              this.getList();
+              this.$notify({
+                title: '成功',
+                message: '预定成功',
+                type: 'success',
+                duration: 2000
+              });
+            });
+          } else {
+            return false;
+          }
+        });
+      },
+      resetTemp() {
+        this.form = {
+          status: undefined,
+          numberPlate: undefined,
+          brand: undefined,
+          subordinateBranch: undefined,
+          useType: undefined,
+          remark: undefined
+        };
+      },
+      resetTemp4Apply() {
+        this.form4Apply = {
+          bookStartDate: undefined,
+          bookEndDate: undefined,
+          vehicle: undefined,
+          liftAddr: undefined,
+          destination: undefined,
+          remark: undefined
+        };
+      },
+      resetTemp4BookInfo() {
+        this.form4BookInfo = {
+          selectedMonth: this.$utils.toDateString(newEast8Date(), 'yyyy-MM'),
+          vehicle: undefined
+        };
+      }
+    }
+  }
+</script>