lshcom 1.0.0

package/src/components/lsh-vehicle/index.vue

@@ -0,0 +1,534 @@
+<template>
+  <div class="lsh-vehicle">
+    <b-card header="查询">
+      <div class="row">
+        <div class="col-md-4">
+          <b-form-fieldset horizontal label="车架号" label-cols="4" class="text-right">
+            <el-autocomplete
+              class="inline-input"
+              v-model="queryParams.frameNo"
+              :fetch-suggestions="queryCarVinList"
+              placeholder="请输入车架号"
+              :trigger-on-focus="false"
+              @select="handleSelect">
+            </el-autocomplete>
+          </b-form-fieldset>
+	  </div>
+
+        <div class="col-md-4">
+          <b-form-fieldset horizontal label="移动电话" label-cols="4" class="text-right">
+            <el-autocomplete
+              :maxlength="11"
+              class="inline-input"
+              v-model="queryParams.contactPhoneNo"
+              @keyup.native="numberKeyup"
+              :fetch-suggestions="querySearch"
+              placeholder="请输入手机号"
+              :trigger-on-focus="false"
+              @select="handleSelectNo">
+            </el-autocomplete>
+          </b-form-fieldset>
+        </div>
+        <div class="col-md-4">
+          <b-form-fieldset horizontal label="车牌号" label-cols="4" class="text-right">
+            <el-input v-model.trim="queryParams.licNum"   placeholder="请输入完整车牌号"/>
+          </b-form-fieldset>
+        </div>
+      </div>
+
+      <div class="col-md-12">
+        <div class="pull-right">
+          <b-button size="sm" variant="primary" @click="handleQuery(1)">查询</b-button>
+        </div>
+      </div>
+    </b-card>
+
+    <b-card>
+      <el-tabs v-model="activeName" type="card">
+
+        <el-tab-pane label="车辆管理" name="first">
+          <div class="pull-left tab-first">
+            <b-button size="sm" variant="default" @click="add">新增</b-button>
+            <b-button size="sm" variant="primary" @click="edit">编辑</b-button>
+            <b-button size="sm" variant="primary" @click="comfirm" class="btn-comfirm">确定</b-button>
+          </div>
+
+          <el-table
+            :data="tableList"
+            border
+            max-height="400"
+            @row-click="rowClick"
+            style="width: 100%">
+
+            <el-table-column
+              label="选择"
+              align="center"
+              min-width="80">
+              <template slot-scope="scope">
+                <input type="radio" v-model="selCont" :value="scope.row">
+              </template>
+            </el-table-column>
+
+            <el-table-column
+              label="车牌号"
+              align="center"
+              prop="licNum"
+              show-overflow-tooltip
+              min-width="100" />
+
+              <el-table-column
+                label="车架号"
+                align="center"
+                prop="frameNo"
+                show-overflow-tooltip
+                min-width="100" />
+
+              <el-table-column
+                label="发动机号"
+                align="center"
+                prop="engineNumber"
+                show-overflow-tooltip
+                min-width="100" />
+
+              <el-table-column
+                label="车主姓名"
+                align="center"
+                prop="customerName"
+                show-overflow-tooltip
+                min-width="100" />
+
+              <el-table-column
+                label="车主手机号"
+                align="center"
+                prop="contactPhoneNo"
+                show-overflow-tooltip
+                min-width="120" />
+
+              <el-table-column
+                label="品牌"
+                align="center"
+                prop="brandName"
+                show-overflow-tooltip
+                min-width="100" />
+
+              <el-table-column
+                label="来源"
+                align="center"
+                prop="vehicleSource"
+                show-overflow-tooltip
+                min-width="100" />
+
+              <el-table-column
+                label="车系"
+                align="center"
+                prop="vehicleClass"
+                show-overflow-tooltip
+                min-width="100" />
+
+              <el-table-column
+                label="车型"
+                align="center"
+                prop="vehicleModel"
+                show-overflow-tooltip
+                min-width="100" />
+
+              <el-table-column
+                label="车款"
+                align="center"
+                prop="vehicleVariant"
+                show-overflow-tooltip
+                min-width="100" />
+
+              <el-table-column
+				  v-if="!disableOptionFlag"
+                label="操作"
+                align="center"
+                prop="bpNo"
+                fixed="right"
+                min-width="150">
+                  <template slot-scope="scope">
+                    <b-button @click="handleBind(scope.row)" variant="primary">车主绑定</b-button>
+                  </template>
+              </el-table-column>
+          </el-table>
+        </el-tab-pane>
+
+        <el-tab-pane label="配置管理" name="second" disabled>
+          <LshVehicle :vehicleVo="selCont" v-show="!bindFlag" :isAdd="isAdd" @preserve="preserve1" @cancel="cancel"/>
+          <LshCust :bindFlag="bindFlag" :custVo="selCont" @changeMaster="changeMaster"  @preserve="preserve" v-show="bindFlag" @cancel="cancel"/>
+        </el-tab-pane>
+      </el-tabs>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import LshVehicle from '../LshVehicle/index'
+import LshCust from './lshCust'
+import api from 'common/api'
+export default {
+  props: {
+    frameNo: {
+      type: String,
+      deafult: ''
+    }
+  },
+	inject:{
+		disableOptionFlag:{
+			type:Boolean,
+			default:false
+		}
+	},
+  data() {
+    return {
+      activeName: 'first',
+      queryParams: {
+        frameNo: '',
+        pageStart: 1,
+        pageNums: 1000,
+        licNum:'',
+      },
+      tableList: [],
+      selCont: null,
+      isAdd: false,
+      bindFlag: false,
+      chooseList: [],
+      custPhoneList: [],
+    }
+  },
+
+  watch: {
+    frameNo(val) {
+      this.queryParams.frameNo = val
+    }
+  },
+
+  created() {
+    this.init()
+  },
+
+	methods: {
+    init() {
+      this.frameNo && (this.queryParams.frameNo = this.frameNo)
+
+    },
+
+    /**
+     * @desc 查询
+     */
+    handleQuery() {
+      if(!this.queryParams.frameNo &&  !this.queryParams.contactPhoneNo && !this.queryParams.licNum){
+        this.$message({
+            message: '手机号、车架号和车牌号必填一个',
+            type: 'warning'
+          })
+          return
+      }
+      this.activeName = 'first'
+      api.liApi.custVehcile.getVehicleByVin(this.queryParams, res => {
+        if (res && res.data.code === 'success') {
+          this.tableList = res.data.obj || []
+        }
+      })
+    },
+
+    // 车辆保存查询不校验
+    handleQueryNoCheck() {
+      this.activeName = 'first'
+      api.liApi.custVehcile.getVehicleByVin(this.queryParams, res => {
+        if (res && res.data.code === 'success') {
+          this.tableList = res.data.obj || []
+        }
+      })
+    },
+    /**
+     * @desc 确定
+     */
+    comfirm() {
+      if (!this.selCont) {
+        this.$message({
+          message: '请选择一条数据',
+          type: 'warning'
+        })
+        return
+      }
+      if (!this.selCont.contactPhoneNo || (!!this.selCont.contactPhoneNo && !this.selCont.bpNum)) {
+        this.$message({
+          message: '请绑定车主',
+          type: 'warning'
+        })
+        return
+      }
+      api.liApi.custVehcile.pushSapCarInfoByVinNo({frameNo: this.selCont.frameNo, scvId: this.selCont.scvId}, res => {
+        if (res && res.data.code === 'success') {
+          this.$emit('comfirm', this.selCont)
+        }
+      })
+    },
+
+
+    /**
+     * @desc 新增
+     */
+    add() {
+      this.selCont = null
+      this.bindFlag =false
+      this.activeName = 'second'
+      this.isAdd = true
+    },
+
+
+    /**
+     * @desc 编辑
+     */
+    edit() {
+      if (!this.selCont) {
+        this.$message({
+          message: '请选择一条数据',
+          type: 'warning'
+        })
+        return
+      }
+      // console.log('test:>edit', this.selCont)
+      this.isAdd = false
+      this.bindFlag = false
+      this.activeName = 'second'
+
+    },
+
+    /**
+     * @desc 重置
+     */
+    handleReset() {
+      this.queryParams = {
+        frameNo: '',
+        pageStart: 1,
+        pageNums: 1000
+      }
+      this.tableList = []
+      this.selCont = null
+      this.bindFlag = false
+      this.chooseList = []
+      this.custPhoneList = []
+    },
+
+
+    /**
+     * @desc 车主绑定
+     */
+    handleBind(row) {
+      this.bindFlag = true
+      this.activeName = 'second'
+
+
+    },
+
+    /**
+     * @desc 保存车主信息
+     */
+    preserve(Vo) {
+//       delete  Vo.salesDate
+//       delete  Vo.sapSyncTime
+//       const params = {
+//         saveFrom: 0,
+//         custVo: Vo,
+//         relationList: [{
+//           vinNo: this.selCont.frameNo,
+//           finNo: this.selCont.vehicleNo,
+//           plateNumber: this.selCont.plateNumber,
+//           custName: Vo.customerName,
+//           custPhone: Vo.contactPhoneNo,
+//           relationType: 0,
+//           scvId: Vo.scvId,
+//           state: 0,
+//         }],
+//       }
+//       api.liApi.custVehcile.setCustVehicle(params, res => {
+//         if (res && res.data.code === 'success') {
+//           this.queryParams.contactPhoneNo = Vo.contactPhoneNo
+//           this.handleQuery()
+//         }
+//         if(res && res.data.code === 'carIsBind'){
+//           this.$message({
+//             message:'该车已绑定多个车主，请点击车主变更进行车主变更',
+//             type: 'warning'
+//           })
+//         }
+//       })
+      
+      this.queryParams.contactPhoneNo = Vo.contactPhoneNo
+      this.handleQuery()
+    },
+	  changeMaster(Vo){
+    	// console.log(Vo)
+		  // delete  Vo.salesDate
+		  // delete  Vo.sapSyncTime
+		  // const params = {
+			//   saveFrom: 0,
+			//   custVo: Vo,
+			//   relationList: [{
+			// 	  vinNo: this.selCont.frameNo,
+			// 	  finNo: this.selCont.vehicleNo,
+			// 	  plateNumber: this.selCont.plateNumber,
+			// 	  custName: Vo.customerName,
+			// 	  custPhone: Vo.contactPhoneNo,
+			// 	  relationType: 0,
+			// 	  scvId: Vo.scvId,
+			// 	  state: 0,
+			//   }],
+		  // }
+		  // api.liApi.custVehcile.setCustVehicle(params, res => {
+			//   if (res && res.data.code === 'success') {
+			// 	  this.queryParams.contactPhoneNo = Vo.contactPhoneNo
+			// 	  this.handleQuery()
+			//   }
+			//   if(res && res.data.code === 'carIsBind'){
+			// 	  this.visible = false;
+			// 	  const {custName, custPhone} = res.data.obj;
+			// 	  const {customerName, contactPhoneNo} = params.custVo;
+			// 	  let msg = `该车现车主为${custName}、手机号${custPhone}，确定要更换为车主${customerName}、手机号${contactPhoneNo}?`;
+			// 	  this.$confirm(msg, '', {
+			// 		  confirmButtonText: '确定',
+			// 		  cancelButtonText: '取消',
+			// 		  type: 'warning'
+			// 	  }).then(() => {
+			// 		  params.force = true;
+			// 		  api.liApi.custVehcile.setCustVehicle(params, res => {
+			// 			  if (res && res.data.code === 'success') {
+			// 				  this.$message({
+			// 					  message: '更换成功',
+			// 					  type: 'success'
+			// 				  });
+			// 				  this.handleQuery()
+			// 			  }
+			// 		  })
+			// 	  }).catch(() => {
+			// 		  this.visible = true
+			// 	  })
+			//   }
+		  // })
+      this.queryParams.contactPhoneNo = Vo.contactPhoneNo
+      this.handleQuery()
+	  },
+    cancel() {
+    	console.log('go?')
+      this.activeName = 'first'
+      this.$emit('cancel')
+    },
+
+    /**
+     * @desc 车辆保存
+     */
+    preserve1(Vo, flag) {
+      this.handleQueryNoCheck()
+      if(!flag) return
+      const params = {
+        saveFrom: 0,
+        vehicleVo: Vo,
+        relationList: [],
+      }
+      api.liApi.custVehcile.setCustVehicle(params, res => {
+        if (res && res.data.code === 'success') {
+          this.queryParams.scvId = ''
+          this.queryParams.contactPhoneNo = ''
+          this.queryParams.frameNo = Vo.frameNo
+          this.handleQueryNoCheck()
+        }
+      })
+    },
+
+    /**
+     * @desc 手机号下拉查询
+     */
+    querySearch(val, cb) {
+      // this.queryParams.scvId = ''
+      this.queryParams.contactPhoneNo = val
+      if (val && val.length === 11) {
+        api.liApi.custVehcile.getCustByPhoneName({contactPhoneNo: val, pageStart: 1, pageNums: 1000}, res => {
+          if (res && res.data.code === 'success') {
+            if (res.data.obj && res.data.obj.length > 0) {
+              let list = res.data.obj.map((item, index) => {
+                return {
+                  value: `${item.contactPhoneNo} ${item.customerName}`,
+                  label: item.contactPhoneNo,
+                  index: index,
+                  ...item
+                }
+              })
+              cb(list)
+              this.custPhoneList = res.data.obj
+            } else {
+              cb([])
+            }
+          }
+        })
+      } else {
+        cb([])
+      }
+    },
+
+    queryCarVinList(val, cb) {
+      if (!val || val.length < 6) {
+        cb([])
+        return
+      }
+      api.liApi.custVehcile.queryCarVinList({vinNoReverse: val, pageNums: 1000}, res => {
+        if (res && res.data.code === 'success') {
+          if (res.data.obj.list && res.data.obj.list.length > 0) {
+            let list = res.data.obj.list.map((item, index) => {
+              return { value: item.vinNo, index: index }
+            })
+            cb(list)
+            this.chooseList = res.data.obj.list
+          } else {
+            cb([])
+          }
+        }
+      })
+    },
+
+    handleSelect(item) {
+      this.queryParams = {
+        frameNo: item.value,
+        pageStart: 1,
+        pageNums: 1000
+      }
+    },
+
+    handleSelectNo(item) {
+      this.queryParams.scvId = item.scvId
+      this.queryParams.contactPhoneNo = item.contactPhoneNo
+    },
+
+    /**
+     * @desc 点击行
+     */
+    rowClick(row) {
+      this.selCont = row
+    },
+
+    numberKeyup(e) {
+      e.target.value = e.target.value.replace(/[^\d]/g,'')
+      this.queryParams.scvId = ''
+    },
+  },
+
+  components: {
+    LshVehicle,
+    LshCust
+  }
+
+}
+</script>
+
+<style lang="scss">
+.lsh-vehicle {
+  .tab-first {
+    width: 100%;
+    margin-bottom: 10px;
+    .btn-comfirm {
+      float: right;
+    }
+  }
+}
+</style>