增加随行物品模块

src/api/base_info/branch_company/index.js

@@ -50,25 +50,19 @@ export function getAll() {
 }
 
 /**
- * 获取所有公司信息，并缓存
+ * 获取所有公司信息
  * @returns {null|*}
  */
-export function getAllCompanyCache(resolve) {
-  let codeAndBranchCompany = store.getters.getAllCompany;
-  if (XEUtils.isEmpty(codeAndBranchCompany)) { //缓存中不存在
+export function getAllCompany(resolve) {
     getAll().then(response => {
       let companyList = response.data;
       if (!companyList || companyList.length === 0) {
         return null;
       }
-      codeAndBranchCompany = {};
+      let codeAndBranchCompany = {};
       for (let index in companyList) {
         codeAndBranchCompany[companyList[index].id] = companyList[index];
       }
-      store.dispatch("cacheCompany", codeAndBranchCompany);
       resolve(codeAndBranchCompany);
     });
-  } else {
-    resolve(codeAndBranchCompany);
-  }
 }

src/api/vehicle/accompanyingItem/index.js

+import fetch from 'utils/fetch';
+
+
+export function page(query) {
+  return fetch({
+    url: '/vehicle/accompanyingItem/page',
+    method: 'get',
+    params: {
+      queryAccompanyItemVoJson: JSON.stringify(query)
+    }
+  });
+}
+
+export function getAllAccItem() {
+  return fetch({
+    url: '/vehicle/accompanyingItem/all',
+    method: 'get'
+  });
+}
+
+export function getObj(id) {
+  return fetch({
+    url: '/vehicle/accompanyingItem/' + id,
+    method: 'get'
+  });
+}
+
+export function addObj(obj) {
+  return fetch({
+    url: '/vehicle/accompanyingItem',
+    method: 'post',
+    data: obj
+  });
+}
+
+export function putObj(obj) {
+  return fetch({
+    url: '/vehicle/accompanyingItem',
+    method: 'put',
+    data: obj
+  })
+}
+
+export function delObj(id) {
+  return fetch({
+    url: '/vehicle/accompanyingItem/' + id,
+    method: 'delete'
+  })
+}

src/api/vehicle/bookRecord/index.js

@@ -9,9 +9,9 @@ export function page(query) {
   });
 }
 
-export function getObj(id) {
+export function getObj(id, bookEndDate) {
   return fetch({
-    url: '/vehicle/vehicleInfo/bookedRecord/' + id,
+    url: '/vehicle/vehicleInfo/bookedRecord/' + bookEndDate + '/' + id,
     method: 'get'
   });
 }

src/router/index.js

@@ -165,7 +165,14 @@ export const asyncRouterMap = [{
       component: _import('baseInfo/branchCompany/index'),
       name: '分公司管理',
       authority: 'branchCompany'
-    }]
+    },
+      {
+        path: '/baseInfo/accompanyingItem',
+        component: _import('vehicle/accompanyingItem/index'),
+        name: '随行物品管理',
+        authority: 'accompanyingItem'
+      }
+    ]
   }, {
     path: '/vehicle',
     component: Layout,

src/store/getters.js

@@ -37,8 +37,11 @@ const getters = {
       return state.baseInfo.vehicleConstants[type]
     };
   },
+  accompanyItemTypeAndCode: state => state.baseInfo.accompanyItemTypeAndCode,
   vehicleStatus: state => state.baseInfo.vehicleStatusAndCode,
   bookRecordStatus: state => state.baseInfo.bookRecordStatusAndCode,
-  getAllCompany: state => state.baseInfo.codeAndBranchCompany
+  getAllCompany: state => state.baseInfo.codeAndBranchCompany,
+  allAccItem: state => state.baseInfo.allAccItem,
+  allAccItemIdAndName: state => state.baseInfo.allAccItemIdAndName
 };
 export default getters

src/store/modules/baseInfo.js

@@ -16,11 +16,38 @@ export const BOOK_RECORD_STATUS_PROVED = 2; // 预定记录状态 - 已通过
 export const BOOK_RECORD_STATUS_LIFT = 7; // 预定记录状态 - 已提车
 
 
+export const ACCOMPANYING_ITEM_AMOUNT_INFINITY = -1; // 随车物品余量 - 不作限制
+
+
+import XEUtils from 'xe-utils';// 加入常用工具类
+import VXEUtils from 'vxe-utils';// 加入常用工具类
+
+
+import {
+  getAllAccItem
+} from 'api/vehicle/accompanyingItem/';
+
 const baseInfo = {
   state: {
     regions: {},
     regionAndCode: {},
     vehicleConstants: {},
+    allAccItem: {},
+    allAccItemIdAndName: {},
+    accompanyItemTypeAndCode: {
+      1: {
+        code: 1,
+        val: '随车工具'
+      },
+      2: {
+        code: 2,
+        val: '随车配备'
+      },
+      3: {
+        code: 3,
+        val: '可配物品'
+      }
+    },
     vehicleStatusAndCode: {
       1: {
         code: 1,
@@ -80,8 +107,19 @@ const baseInfo = {
     REMOVE_CONSTANT_DATA: (state, type) => {
       state.vehicleConstants[type] = null;
     },
-    CAHCE_ALL_COMPANY: (state, companyAndCode) => {
+    ALL_COMPANY: (state, companyAndCode) => {
       state.codeAndBranchCompany = companyAndCode;
+    },
+    ALL_ACC_ITEM: (state, allAccItem) => {
+      state.allAccItem = allAccItem;
+      if (XEUtils.isEmpty(allAccItem)) {
+        return;
+      }
+      for (let key in allAccItem) {
+        for (let index in allAccItem[key]) {
+          state.allAccItemIdAndName[allAccItem[key][index].id] = allAccItem[key][index].name;
+        }
+      }
     }
   },
 
@@ -110,10 +148,40 @@ const baseInfo = {
                   }, type) {
       commit('REMOVE_CONSTANT_DATA', type);
     },
-    cacheCompany({
+    allCompany({
                    commit
                  }, companyAndCode) {
-      commit('CAHCE_ALL_COMPANY', companyAndCode);
+      commit('ALL_COMPANY', companyAndCode);
+    },
+    loadAccItem({
+                  getters,
+                  commit
+                }, resolve) {
+      // 从后端异步读取，返回promise
+      return new Promise((resolve, reject) => {
+        getAllAccItem().then(response => {
+          let accItemList = response.data;
+          if (XEUtils.isEmpty(accItemList)) {
+            resolve();
+            return;
+          }
+          let allAccItem = {};
+          for (let index in accItemList) {
+            let arrayType = allAccItem[accItemList[index].type];
+            if (!XEUtils.isArray(allAccItem[accItemList[index].type])) {
+              arrayType = [];
+            }
+            arrayType = [...arrayType, accItemList[index]];
+            allAccItem[accItemList[index].type] = arrayType;
+          }
+          commit('ALL_ACC_ITEM', allAccItem);
+          resolve();
+        }).catch(error => {
+          console.error(error);
+          reject(error);
+        });
+        return;
+      });
     }
   }
 }

src/views/vehicle/accompanyingItem/accItemSelector.vue

+<template>
+  <div>
+    <!--     查看预定信息对话框相关html元素  -->
+    <el-dialog title="选择随行物品" v-loading.body="isLoadingShowed" element-loading-text="加载随行物品中"
+               element-loading-spinner="el-icon-loading" :visible.sync="dialogVisible">
+      <el-form :model="selected" :inline="true" ref="form4Selected" label-width="100px">
+        <el-collapse v-model="activeTypes">
+          <el-collapse-item v-for=" (val, key, index) in allAccItem " :title="getTypeName(key)" :name="key">
+            <el-row :gutter="10">
+              <el-col v-for=" item in val " :span="8" :style="{padding: '2px'}">
+                <el-col :span="16" :style="{textAlign: 'center'}">
+                  <span :style="{padding: '3px 10px', fontSize: '14px' ,display: 'inline-block'}">{{item.name}}</span>
+                </el-col>
+                <el-col :span="8">
+                  <el-input v-model="selected[item.id]" clearable placeholder="数量" :disabled="readOnly"></el-input>
+                </el-col>
+              </el-col>
+            </el-row>
+          </el-collapse-item>
+        </el-collapse>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button v-if="!readOnly" @click="cancel()">取 消</el-button>
+        <el-button v-if="!readOnly" @click="clear()">清 空</el-button>
+        <el-button v-if="!readOnly" type="primary" @click="select()">确 定</el-button>
+        <el-button v-if="readOnly" @click="clear()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+  import {mapGetters} from 'vuex';
+
+  export default {
+    name: 'accItemSelector',
+    props: ['selectedAccItem', 'isReadOnly'],
+    data() {
+      return {
+        isLoadingShowed: true,
+        dialogVisible: false,
+        selected: {},
+        readOnly: this.isReadOnly
+      }
+    },
+    created() {
+      this.$store.dispatch('loadAccItem').then(() => { // 读取随行物品列表
+        this.isLoadingShowed = false;
+      }).catch(() => {
+        console.error('读取随行物品列表失败');
+        this.isLoadingShowed = false;
+      })
+    },
+    computed: {
+      ...mapGetters([
+        'allAccItem',
+        'accompanyItemTypeAndCode',
+        'allAccItemIdAndName'
+      ]),
+      activeTypes: {
+        get: function () {
+          let keys = [];
+          for (let key in this.allAccItem) {
+            keys = [...keys, key];
+          }
+          return keys;
+        },
+        set: function () {
+          return;
+        }
+      }
+    },
+    methods: {
+      select() {
+        this.$emit('select', this.selected);
+        this.dialogVisible = false;
+      },
+      clear() {
+        this.selected = {};
+        this.$emit('clear');
+        this.dialogVisible = false;
+      },
+      show() {
+        if (this.$utils.isUndefined(this.selectedAccItem)) {
+          this.selected = {};
+        } else {
+          this.selected = this.selectedAccItem;
+        }
+        this.dialogVisible = true;
+        this.readOnly = this.isReadOnly;
+      },
+      getTypeName: function (type) {
+        if (this.$utils.isEmpty(this.accompanyItemTypeAndCode[type])) {
+          return '未知';
+        }
+        return this.accompanyItemTypeAndCode[type].val;
+      },
+      getNameById: function (id) {
+        if (this.$utils.isEmpty(this.allAccItemIdAndName) || this.$utils.isEmpty(this.allAccItemIdAndName[id])) {
+          return '未知';
+        }
+        return this.allAccItemIdAndName[id];
+      },
+      cancel() {
+        this.dialogVisible = false;
+      }
+    },
+    watch: {
+      selectedAccItem: function () {
+        if (this.$utils.isUndefined(this.selectedAccItem)) {
+          this.selected = {};
+        } else {
+          this.selected = this.selectedAccItem;
+        }
+      },
+      isReadOnly: function () {
+        this.readOnly = this.isReadOnly;
+      }
+    }
+  }
+</script>

src/views/vehicle/accompanyingItem/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" label-width="100px">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="名称">
+              <el-input v-model="listQuery.name" placeholder="请输入名称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="类型">
+              <el-select class="filter-item" v-model="listQuery.type" placeholder="请选择随行物品类型">
+                <el-option :key="undefined" label="无" :value="undefined"></el-option>
+                <el-option v-for="(val, key, index) in accompanyItemTypeAndCode " :key="val.code" :label="val.val"
+                           :value="val.code"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
+            <el-button class="filter-item" v-if="accompanying_item_btn_add" style="margin-left: 10px;"
+                       @click="handleCreate"
+                       type="primary" icon="edit">添加
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+
+    </div>
+
+
+    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
+              style="width: 100%">
+
+      <el-table-column width="120" align="center" label="名称">
+        <template scope="scope">
+          <span>{{scope.row.name}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="100" align="center" label="物品类型">
+        <template scope="scope">
+          <span>{{getTypeName(scope.row.type)}}</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="accompanying_item_btn_update " size="small" type="success" @click="handleUpdate(scope.row)">
+            编辑
+          </el-button>
+          <el-button v-if="accompanying_item_btn_del " size="small" type="success" @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>
+
+
+    <!--  增加/修改弹出框  -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+
+      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
+        <el-form-item label="名称">
+          <el-input v-model="form.name" placeholder="请输入名称"></el-input>
+        </el-form-item>
+
+        <el-form-item label="类型">
+          <el-select class="filter-item" v-model="form.type" placeholder="请选择随行物品类型">
+            <el-option v-for="(val, key, index) in accompanyItemTypeAndCode " :key="val.code" :label="val.val"
+                       :value="val.code"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="备注" prop="remark">
+          <el-input type="textarea" :rows="5" v-model="form.remark" placeholder="请输入备注信息"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel('form4Apply')">取 消</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/vehicle/accompanyingItem/';
+
+
+  import {
+    ACCOMPANYING_ITEM_AMOUNT_INFINITY
+  } from '../../../store/modules/baseInfo';
+
+
+  import rsCode from '../../../utils/rsCode';
+
+  import {mapGetters} from 'vuex';
+
+
+  export default {
+    name: 'vehicleInfo',
+    components: {},
+    data() {
+      return {
+        form: {
+          name: undefined,
+          type: undefined,
+        },
+        rules: {
+          name: [
+            {
+              type: 'string',
+              required: true,
+              message: '请输入名称',
+              trigger: 'blur'
+            }
+          ],
+          remark: [
+            {
+              min: 0,
+              max: 2000,
+              message: '长度小于 2000 个字符',
+              trigger: 'blur'
+            }
+          ]
+        },
+        list: null,
+        total: null,
+        listLoading: true,
+        listQuery: {
+          page: 1,
+          limit: 20,
+          name: undefined,
+          type: undefined
+        },
+        rules4Query: undefined,
+        dialogFormVisible: false,
+        inline: true,
+        textMap: {
+          update: '编辑',
+          create: '创建'
+        },
+        dialogStatus: undefined,
+        tableKey: 0,
+        accompanying_item_btn_edit: false,
+        accompanying_item_btn_del: false,
+        accompanying_item_btn_load: false
+      }
+    },
+    created() {
+      this.getList();
+
+      this.accompanying_item_btn_update = this.elements['accompanyingItem:btn_update'];
+      this.accompanying_item_btn_del = this.elements['accompanyingItem:btn_del'];
+      this.accompanying_item_btn_add = this.elements['accompanyingItem:btn_add'];
+    },
+    computed: {
+      ...mapGetters([
+        'elements',
+        'accompanyItemTypeAndCode'
+      ])
+    },
+    methods: {
+      getTypeName: function (type) {
+        if (this.$utils.isEmpty(this.accompanyItemTypeAndCode[type])) {
+          return '未知';
+        }
+        return this.accompanyItemTypeAndCode[type].val;
+      },
+      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;
+        })
+      },
+      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';
+          });
+      },
+      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(response => {
+                if (response.code === rsCode.RS_CODE_SUC) {
+                  this.dialogFormVisible = false;
+                  this.getList();
+                  this.$notify({
+                    title: '成功',
+                    message: '创建成功',
+                    type: 'success',
+                    duration: 2000
+                  });
+                } else {
+                  this.$notify({
+                    title: '失败',
+                    message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
+                    type: 'error',
+                    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.form.amount = undefined; // 不能直接修改数量
+            putObj(this.form).then(response => {
+              if (response.code === rsCode.RS_CODE_SUC) {
+                this.dialogFormVisible = false;
+                this.getList();
+                this.$notify({
+                  title: '成功',
+                  message: '更新成功',
+                  type: 'success',
+                  duration: 2000
+                });
+              } else {
+                this.$notify({
+                  title: '失败',
+                  message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
+                  type: 'error',
+                  duration: 2000
+                });
+              }
+            });
+          } else {
+            return false;
+          }
+        });
+      },
+      resetTemp() {
+        this.form = {
+          name: undefined,
+          type: undefined
+        };
+      }
+    }
+  }
+</script>

src/views/vehicle/bookRecord/index.vue

@@ -146,6 +146,13 @@
         </template>
       </el-table-column>
 
+      <el-table-column align="center" label="随车物品" width="120">
+        <template scope="scope">
+          <el-button size="small" type="success" @click="handleAccItemInfo(scope.row)">查看随车物品</el-button>
+        </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>
@@ -177,6 +184,7 @@
     </div>
 
     <book-info-viewer ref="bookInfoViewer"></book-info-viewer>
+    <acc-item-selector :selectedAccItem="selectedAccItem" :isReadOnly="true" ref="accItemSelector"></acc-item-selector>
 
 
     <!--     提车对话框相关html元素  -->
@@ -241,7 +249,7 @@
 
 
   import {
-    getAllCompanyCache
+    getAllCompany
   } from 'api/base_info/branch_company/';
 
   import {
@@ -265,15 +273,29 @@
   } from '../../../store/modules/baseInfo';
 
   import bookInfoViewer from '../bookInfoViewer';
+  import accItemSelector from '../accompanyingItem/accItemSelector.vue';
 
   export default {
     name: 'bookRecord',
     components: {
-      bookInfoViewer
+      bookInfoViewer,
+      accItemSelector
     },
     data() {
       return {
-        rules4Query: {},
+        rules4Query: {
+          selectedMonth4Query: [
+            {
+              validator: (rule, value, callback) => {
+                if (this.$utils.isUndefined(this.selectedMonth4Query) || !this.$utils.isDate(this.selectedMonth4Query)) {
+                  return callback(new Error('请选择月份'));
+                }
+                callback();
+              },
+              trigger: 'blur'
+            }
+          ]
+        },
         list: null,
         total: null,
         listLoading: true,
@@ -343,12 +365,13 @@
               trigger: 'blur'
             }
           ]
-        }
+        },
+        selectedAccItem: undefined
       }
     },
     created() {
       this.getList();
-      getAllCompanyCache(codeAndBranchCompany => {//初始化公司列表
+      getAllCompany(codeAndBranchCompany => {//初始化公司列表
         this.allCompanies = codeAndBranchCompany;
       });
       this.bookRecord_btn_prove = this.elements['bookRecord:btn_prove'];
@@ -425,6 +448,10 @@
       handleBookInfo(row) {
         this.$refs.bookInfoViewer.handleBookInfo(row.vehicle);
       },
+      handleAccItemInfo(row) {
+        this.selectedAccItem = row.accItemAndAmount;
+        this.$refs.accItemSelector.show();
+      },
       checkIfBooked(bookedDate, [startDateStr, endDateStr]) {
         if (this.$utils.isInteger(bookedDate) &&
           this.$utils.isString(startDateStr) && startDateStr !== '' &&
@@ -562,7 +589,7 @@
       },
       handleLift(row) {
         this.resetTemp4Lift();
-        getObj(row.id)
+        getObj(row.id, row.bookEndDate)
           .then(response => {
             if (!this.$utils.isEmpty(response.data) && this.$utils.isInteger(response.data.liftCompany)) {
               this.form4Lift.liftCompany = response.data.liftCompany;
@@ -573,7 +600,7 @@
       },
       handleRet(row) {
         this.resetTemp4Ret();
-        getObj(row.id)
+        getObj(row.id, row.bookEndDate)
           .then(response => {
             if (!this.$utils.isEmpty(response.data) && this.$utils.isInteger(response.data.retCompany)) {
               this.form4Ret.retCompany = response.data.retCompany;

src/views/vehicle/vehicleInfo/index.vue

@@ -476,6 +476,11 @@
         <el-form-item label="目的地" prop="destination">
           <el-input v-model="form4Apply.destination" placeholder="请输入目的地"></el-input>
         </el-form-item>
+        <el-form-item label="随行物品" prop="selectedAccItem">
+          <el-input type="textarea" v-model="getSelectedAccItemStr" :rows="5" icon="menu" @focus="handleAccItemSelect"
+                    clearable placeholder="请选择随行物品"
+          ></el-input>
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form4Apply.remark" placeholder="请输入备注信息"></el-input>
         </el-form-item>
@@ -489,6 +494,8 @@
     </el-dialog>
 
     <book-info-viewer ref="bookInfoViewer"></book-info-viewer>
+    <acc-item-selector v-on:select="accItemSelected" :selectedAccItem="form4Apply.selectedAccItem"
+                       v-on:clear="accItemClear" ref="accItemSelector"></acc-item-selector>
 
   </div>
 </template>
@@ -526,7 +533,7 @@
   } from '../../../store/modules/baseInfo';
 
   import {
-    getAllCompanyCache
+    getAllCompany
   } from 'api/base_info/branch_company/';
 
   import {
@@ -545,12 +552,14 @@
   import {mapGetters} from 'vuex';
 
   import bookInfoViewer from '../bookInfoViewer';
+  import accItemSelector from '../accompanyingItem/accItemSelector.vue';
 
 
   export default {
     name: 'vehicleInfo',
     components: {
-      bookInfoViewer
+      bookInfoViewer,
+      accItemSelector
     },
     data() {
       return {
@@ -632,6 +641,7 @@
           liftAddr: undefined,
           liftCompany: undefined,
           destination: undefined,
+          selectedAccItem: undefined,
           remark: undefined
         },
         pickerOptions4Apply: {
@@ -697,21 +707,23 @@
           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 {
+                if (!this.$utils.isArray(this.bookDateRange4Apply) || this.bookDateRange4Apply.length === 0) {
                   return callback(new Error('请输入预定时间。'));
                 }
+                let [oriStartDate, ortEndDate] = this.bookDateRange4Apply;
+                if (!this.$utils.isDate(oriStartDate) || !this.$utils.isDate(ortEndDate)) {
+                  return callback(new Error('请输入预定时间。'));
+                }
+                let [startDate, endDate] = [deepCopyDate(oriStartDate), deepCopyDate(ortEndDate)];
+                if (!this.$utils.isDate(oriStartDate) || !this.$utils.isDate(ortEndDate)) {
+                  return callback();
+                }
+                for (let curDate = startDate; curDate <= endDate; curDate.setDate(curDate.getDate() + 1)) {
+                  if (this.checkBookDate(curDate)) {
+                    return callback(new Error('请选择从今天起两个月内，未预定的时间。'));
+                  }
+                }
+                callback();
               },
               trigger: 'blur'
             }
@@ -786,7 +798,7 @@
     },
     created() {
       this.getList();
-      getAllCompanyCache(codeAndBranchCompany => {
+      getAllCompany(codeAndBranchCompany => {
         this.allCompanies = codeAndBranchCompany;
       });
       this.vehicleInfo_btn_edit = this.elements['vehicleInfo:btn_edit'];
@@ -798,6 +810,16 @@
         'elements',
         'vehicleStatus'
       ]),
+      getSelectedAccItemStr() {
+        if (!this.$utils.isEmpty(this.form4Apply.selectedAccItem)) {
+          let rsStr = '';
+          for (let key in this.form4Apply.selectedAccItem) {
+            rsStr = rsStr + this.$refs.accItemSelector.getNameById(key) + ' : ' + this.form4Apply.selectedAccItem[key] + '\n';
+          }
+          return rsStr;
+        }
+        return '';
+      },
       getUnkownBrandCode: () => VEHICLE_CONSTANT_BRAND_CODE_UNKOWN,
       getCurBookedInfo: function () {
         if (!this.$utils.isEmpty(this.curBookedInfo3Month) && this.curBookedInfo3Month.length > 0) {
@@ -886,6 +908,15 @@
       }
     },
     methods: {
+      accItemSelected(selected) {
+        this.form4Apply.selectedAccItem = selected;
+      },
+      accItemClear() {
+        this.form4Apply.selectedAccItem = undefined;
+      },
+      handleAccItemSelect() {
+        this.$refs.accItemSelector.show();
+      },
       getAllInsuranceCompany,
       getInsuranceCompany,
       integerValidator: function () {
@@ -1158,6 +1189,7 @@
           bookStartDate: undefined,
           bookEndDate: undefined,
           vehicle: undefined,
+          selectedAccItem: undefined,
           liftCompany: undefined,
           liftAddr: undefined,
           destination: undefined,