车辆信息管理

src/views/vehicle/vehicleInfo/index.vue

@@ -24,7 +24,6 @@
           </el-col>
 
         </el-row>
-
         <el-row>
           <el-col :span="8">
             <el-form-item label="未预订日期" prop="notBookDateRange">
@@ -50,9 +49,49 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="分公司" prop="subordinateBranch">
-              <el-select class="filter-item" v-model="listQuery.subordinateBranch" placeholder="请选择分公司">
+              <!--<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-autocomplete
+                  class="inline-input"
+                  v-model="state1"
+                  :fetch-suggestions="querySearch"
+                  placeholder="请输入内容"
+                  @select="handleSelect"
+                ></el-autocomplete>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="所属地区" prop="zoneId">
+              <el-select class="filter-item" v-model="listQuery.zoneId" placeholder="请选择">
+                <el-option :key="undefined" label="无" :value="undefined"></el-option>
+                <el-option v-for="(val, key, index) in getAllZone()" :key="val.code" :label="val.val" :value="val.code"> </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-col>
+          <el-col :span="8">
+            <el-form-item label="省份">
+              <el-select class="filter-item" v-model="listQuery.addrProvince" placeholder="请选择省份（直辖市）"  @change='getValue'>
+                <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-col>
+          <el-col :span="8">
+            <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 allCompanies" :key="item.id" :label="item.name" :value="item.id"></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-col>
@@ -342,10 +381,17 @@
         <el-row>
           <el-col :span="12">
             <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-autocomplete
+                class="inline-input"
+                v-model="form.state2"
+                :fetch-suggestions="querySearch"
+                placeholder="请输入内容"
+                @select="handleSelect1"
+              ></el-autocomplete>
+              <!--<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-col>
           <el-col :span="12">
@@ -377,12 +423,8 @@
               </el-date-picker>
             </el-form-item>
           </el-col>
-
-
         </el-row>
-
         <el-row>
-
           <el-col :span="12">
             <el-form-item label="保险公司" prop="insuranceCompany">
               <el-select class="filter-item" v-model="form.insuranceCompany" placeholder="请选择保险公司">
@@ -400,8 +442,6 @@
           </el-col>
 
         </el-row>
-
-
         <el-row>
           <el-col :span="12">
             <el-form-item label="保养时间" prop="annualVerificationDate">
@@ -720,7 +760,8 @@
   } from '../../../store/modules/baseInfo';
 
   import {
-    getAllCompany
+    getAllCompany,
+    getAll
   } from 'api/base_info/branch_company/';
 
   import {
@@ -744,22 +785,31 @@
   import bookInfoViewer from '../bookInfoViewer';
   import accItemSelector from '../accompanyingItem/accItemSelector.vue';
   import Element1 from "../../admin/menu/components/element";
-
+  import ElRow from "element-ui/packages/row/src/row";
+  import ElCol from "element-ui/packages/col/src/col";
+  import {
+    getAllZone
+  } from 'api/base_info/constant/';
 
   export default {
     name: 'vehicleInfo',
     components: {
+      ElCol,
+      ElRow,
       Element1,
       bookInfoViewer,
       accItemSelector
     },
     data() {
       return {
+        state1: '',
+        select: "餐厅名",
         BASE_API: process.env.BASE_API,
         dialogForm4LicenceVisible: false,
         licenceSrcUrl: undefined,
         showLoadingBody: false,
         form: {
+          state2:'',
           status: undefined,
           code: undefined,
           numberPlate: undefined,
@@ -951,12 +1001,17 @@
             }
           ]
         },
+        selectArry:[],
         list: null,
         total: null,
         listLoading: true,
         listQuery: {
           page: 1,
           limit: 20,
+          zoneId: undefined,
+          addrProvince: undefined,
+          addrCity: undefined,
+          addrTown: undefined,
           vin: undefined,
           insuranceCompany: undefined,
           mileageRangeStart: undefined,
@@ -985,6 +1040,7 @@
         vehicleInfo_btn_add: false,
         vehicleInfo_btn_apply: false,
         allCompanies: {},
+        allCompaniesArr: [],
         textMap: {
           update: '编辑',
           create: '创建',
@@ -1032,6 +1088,10 @@
     },
     created() {
       this.getList();
+      getAll()
+        .then(response => {
+          this.allCompaniesArr = response.data;
+        })
       getAllCompany(codeAndBranchCompany => {
         this.allCompanies = codeAndBranchCompany;
       });
@@ -1048,6 +1108,33 @@
         'belong2Type',
         'vehicleStatus'
       ]),
+      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);
+      },
       getHeaderWithToken() {
         return {Authorization: getToken()};
       },
@@ -1149,6 +1236,47 @@
       }
     },
     methods: {
+      getAllZone,
+      getValue(e){
+        this.listQuery.addrCity = undefined;
+      },
+      querySearch(queryString, cb) {
+        let selectArry = [];
+        let iitem = {
+          value: "全部",
+          name: "全部"
+        };
+        selectArry.push(iitem);
+        this.allCompaniesArr.map(function(item){
+          item.value = item.name;
+          selectArry.push(item);
+        });
+        this.selectArry = selectArry;
+        var results = queryString ? selectArry.filter(this.createFilter(queryString)) : selectArry;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      createFilter(queryString) {
+        return (restaurant) => {
+          return (restaurant.name.indexOf(queryString.toLowerCase()) != -1);
+        };
+      },
+      handleSelect1(item){
+        if(item.value == "全部"){
+          this.form.subordinateBranch = undefined;
+        } else {
+          this.form.subordinateBranch = item.id;
+        }
+        console.log(item);
+      },
+      handleSelect(item) {
+        if(item.value == "全部"){
+          this.listQuery.subordinateBranch = undefined;
+        } else {
+          this.listQuery.subordinateBranch = item.id;
+        }
+        console.log(item);
+      },
       upkeepEndHandler(row) {
         console.dir(row);
         this.$confirm('此操作将结束保养, 是否继续?', '提示', {
@@ -1496,12 +1624,29 @@
         this.dialogFormVisible = true;
       },
       handleUpdate(row) {
+        let selectArry = [];
+        let iitem = {
+          value: "全部",
+          name: "全部"
+        };
+        selectArry.push(iitem);
+        this.allCompaniesArr.map(function(item){
+          item.value = item.name;
+          selectArry.push(item);
+        });
+        this.selectArry = selectArry;
         getObj(row.id)
           .then(response => {
+            let that = this;
             this.resetTemp();
             this.$utils.objectEach(response.data, (item, key) => {
               this.form[key] = item;
-            })
+            });
+            selectArry.map(function (iitem) {
+              if( that.form["subordinateBranch"] == iitem.id){
+                that.form.state2 = iitem.name;
+              }
+            });
             this.fillDates2Range(this.form, 'insuranceDateRange4form', 'insuranceStartDate', 'insuranceEndDate');
             this.dialogFormVisible = true;
             this.dialogStatus = 'update';
@@ -1614,6 +1759,7 @@
         this.form = {
           status: undefined,
           code: undefined,
+          state2:undefined,
           numberPlate: undefined,
           brand: undefined,
           subordinateBranch: undefined,