lshcomment 1.0.0

package/src/components/iris-carinfo/index.vue

@@ -0,0 +1,652 @@
+<template lang="html">
+<div>
+    <div class="row" v-if="showLength > 4">
+		<div :class="{'col-md-4': col=='3', 'col-md-6': col=='2', 'col-md-12': col=='1','col-md-3': col=='4'}">
+			<b-form-fieldset horizontal label="车型代码" :label-cols="4" class="text-right">
+				<el-select v-model="carModelCode"
+					:remote="true" :remote-method="remoteMethod" 
+					filterable placeholder="请输入车型代码"
+					@change="carModelCodeChange"
+					@visible-change="toggle = false"
+					:disabled="isDisabled"
+					style="width: 100%">
+					<el-option
+						v-for="(item, i) in carModelCodeOptions"
+						:key="i"
+						:label="getLabel(item)"
+						:value="`${item.carModelCode}/s/${item.carCode}`">
+					</el-option>
+				</el-select>
+			</b-form-fieldset>
+		</div>
+	</div>
+	<div class="row"> 
+		<div :class="{'col-md-4': col=='3', 'col-md-6': col=='2', 'col-md-12': col=='1','col-md-3': col=='4'}" v-if="!flag">
+			<b-form-fieldset horizontal :label="label[0]" :label-cols="4" class="text-right">
+				<el-select v-model="carCurr.factory"
+				    :class="{ 'select_required' : !!factoryState }"
+                    :disabled="isDisabled"
+					placeholder=""
+                    filterable
+                    style="width: 100%">
+                    <el-option
+                        v-for="(item, i) in factory"
+						:key="i"
+                        :label="item.text"
+                        :value="item.value">
+                    </el-option>
+                </el-select>
+			</b-form-fieldset>
+		</div>
+		<div :class="{'col-md-4': col=='3', 'col-md-6': col=='2', 'col-md-12': col=='1','col-md-3': col=='4'}">
+			<b-form-fieldset horizontal :label="label[1]" :label-cols="4" class="text-right">
+				<el-select v-model="carCurr.brand"
+				    :class="{ 'select_required' : !!brandState }"
+                    :disabled="isDisabled"
+					placeholder=""
+                    filterable
+                    style="width: 100%">
+                    <el-option
+                        v-for="(item, i) in brand"
+						:key="i"
+                        :label="item.text"
+                        :value="item.value">
+                    </el-option>
+                </el-select>
+			</b-form-fieldset>
+		</div>
+		<div :class="{'col-md-4': col=='3', 'col-md-6': col=='2', 'col-md-12': col=='1','col-md-3': col=='4'}">
+			<b-form-fieldset horizontal :label="label[2]" :label-cols="4" class="text-right">
+				<el-select v-model="carCurr.series"
+				    :class="{ 'select_required' : !!seriesState }"
+                    :disabled="isDisabled"
+					placeholder=""
+                    filterable
+                    style="width: 100%">
+                    <el-option
+                        v-for="(item, i) in series"
+						:key="i"
+                        :label="item.text"
+                        :value="item.value">
+                    </el-option>
+                </el-select>
+			</b-form-fieldset>
+		</div>
+		<div :class="{'col-md-4': col=='3', 'col-md-6': col=='2', 'col-md-12': col=='1','col-md-3': col=='4'}" v-if="showLength > 3">
+			<b-form-fieldset horizontal :label="label[3]" :label-cols="4" class="text-right">
+				<el-select v-model="carCurr.model"
+				    :class="{ 'select_required' : !!modelState }"
+                    :disabled="isDisabled"
+					placeholder=""
+                    filterable
+					@visible-change="toggle = true"
+                    style="width: 100%">
+                    <el-option
+                        v-for="(item, i) in model"
+						:key="i"
+                        :label="item.text"
+                        :value="item.value">
+                    </el-option>
+                </el-select>
+			</b-form-fieldset>
+		</div>
+		<div :class="{'col-md-4': col=='3', 'col-md-6': col=='2', 'col-md-12': col=='1','col-md-3': col=='4'}" v-if="showLength > 4">
+			<b-form-fieldset horizontal :label="label[4]" :label-cols="4" class="text-right">
+				<el-select v-model="carCurr.display"
+				    :class="{ 'select_required' : !!displayState }"
+                    :disabled="isDisabled"
+					placeholder=""
+                    filterable
+                    style="width: 100%">
+                    <el-option
+                        v-for="(item, i) in display"
+						:key="i"
+                        :label="item.text"
+                        :value="item.value">
+                    </el-option>
+                </el-select>
+			</b-form-fieldset>
+		</div>
+	</div>
+</div>
+</template>
+<script>
+	// 是否禁用isDisabled (禁用:true, 启用: false)
+	// 选择后触发callBack事件
+	// validateLen需要验证的数据是否为空的个数(大于0,小于6的整数)
+	// 验证后触发validete事件
+	// flag: false 从厂家开始，true从品牌开始
+
+	/**
+	 * update by luwenxiang on 2018/10/08
+	 * @param showLength => 大于4则显示车款, 反之不显示, 默认不显示
+	 * @event setValue(info)
+	 *  info {
+	 *      factoryCode:'',
+	 *		brandCode:'',
+	 *		seriesCode:'',
+	 * 		modelCode:'',
+	 *      displayName: ''  // 车款
+	 *  }
+	 * 
+	 * @see 车型联动选择组件由之前的修改为支持搜索, 原则上用法和以前一样
+	 */
+	import api from 'common/api'
+	import config from 'common/config'
+
+	import Vue from 'vue'
+	import { Select } from 'element-ui'
+	Vue.use(Select)
+
+	const DEFAULT_PAGE_NUMS = 100
+
+	export default {
+		props: {
+			showLength: {
+				type: Number,
+				default: 4
+			},
+			col: {
+				type: Number,
+				default: 3
+			},
+			initData:{},
+			isDisabled:{
+				type:Boolean,
+				default:false
+			},
+			star:{
+				type:Boolean,
+				default:false
+			},
+			validateLen:{
+				type:Number,
+				default:0
+			}
+		},
+		data(){
+			return {
+				flag: config.carFlag,
+				factory:[],
+				brand:[],
+				series:[],
+				model:[],
+				display: [],
+			
+				carCurr:{
+					factory:'',
+					brand:'',
+					series:'',
+					model:'',
+					display:'',
+				},
+				carinfo:{
+					factoryCode:'',
+					factoryName: '',
+					brandCode:'',
+					brandName:'',
+					seriesCode:'',
+					seriesName:'',
+					modelCode:'',
+					modelName:'',
+					displayCode: '',					
+					displayName: '',
+				},
+				factoryState:null,
+				brandState:null,
+				seriesState:null,
+				modelState:null,
+				displayState:null,
+				mapArr:['factory', 'brand', 'series', 'model', 'display'],
+				label:['厂家','品牌','车系','车型','车款'],
+				isWChange: true,
+
+                carModelCode: '',
+				carModelCodeOptions: [],
+				tempParams: {},
+				propInfo: {},
+
+				toggle: true
+			}
+		},
+		created(){
+			if(this.star){
+				this.label = ['厂家 *','品牌 *','车系 *','车型 *','车款 *'];
+			}
+			this.once()
+		},
+		computed:{
+			_factory:function(){
+				return this.carCurr.factory;
+			},
+			_brand:function(){
+				return this.carCurr.brand;
+			},
+			_series:function(){
+				return this.carCurr.series;
+			},
+			_model:function(){
+				return this.carCurr.model;
+			},
+			_display() {
+				return this.carCurr.display
+			}
+
+		},
+		methods:{
+			getLabel(item) {
+				const {
+					carModelCode,
+					factoryName,
+					brandName,
+					seriesName,
+					modelName,
+					displayName
+				} = item
+
+                return `${carModelCode  || ''} - ${factoryName || ''} ${brandName || ''} ${seriesName || ''} ${modelName || ''} ${displayName || ''}`
+			},
+			getSelItemInfo(carModelCode) {
+				let res = {}
+				this.carModelCodeOptions.forEach(k => {
+					carModelCode === `${k.carModelCode}/s/${k.carCode}` && (res = k)
+				})
+				return res
+			},
+			remoteMethod(carModelCode, next) {
+
+				if(Object.keys(this.propInfo).length 
+				  || carModelCode.includes('/s/')
+			      || carModelCode.includes(' - ')) return
+
+				const params = {
+					pageNums: DEFAULT_PAGE_NUMS,
+					pageStart: 1,
+					carModelCode
+				}
+
+				this.carModelCodeOptions = []
+				this.queryCarInfoByCarModelCode(params, obj => {
+					obj && (this.carModelCodeOptions = obj.list || [])
+
+					next && next()
+				})
+			},
+			queryCarInfoByCarModelCode(params, next) {
+                api.baseweb.mainType.queryCar(params, res => {
+					const obj = res.data.obj
+					if(res.data.code === 'success') {
+						next && next(obj)
+					}
+				})
+			},
+			carModelCodeChange(val) {
+                
+				if(!Object.keys(this.getSelItemInfo(val)).length) return
+
+				const { 
+					factoryCode,
+					brandCode,
+					seriesCode,
+					modelCode,
+					displayName
+				} = this.getSelItemInfo(val)
+
+				const params = { 
+					factoryCode,
+					brandCode,
+					seriesCode,
+					modelCode,
+					displayName
+				}
+
+				const tempParams = {
+					factoryCode: this.tempParams.factoryCode,
+					brandCode: this.tempParams.brandCode,
+					seriesCode: this.tempParams.seriesCode,
+					modelCode: this.tempParams.modelCode,
+					displayName: this.tempParams.displayName,
+				}
+
+				JSON.stringify(params) !== JSON.stringify(tempParams) && this.setValue(params, false)
+			},
+
+			setValue(val, isExternalCall = true){
+
+				this.clear() 
+				
+				Object.keys(this.propInfo).length && (this.carModelCode = '')
+
+				let _this = this;
+				let data = val;
+				
+				if(isExternalCall) {
+					this.propInfo = {...val}
+					this.tempParams = {...val}
+				}
+
+				let num = this.flag?1:0, len;		
+				let setFun = async function() {
+					for(var i = num, len = _this.mapArr.length; i < len; i++){	
+						let propValue = data[_this.mapArr[i]+'Code']
+						if(data[_this.mapArr[i]+'Code']) {			
+							let arrCode = i === num ? '' : data[_this.mapArr[i-1]+'Code'];
+							let resl = await _this.getDa(arrCode, _this.mapArr[i], i);
+
+							_this.fliterVal(_this[_this.mapArr[i]], propValue, _this.mapArr[i])
+						}				
+					}
+					_this.isWChange = true;
+				}
+				setFun();
+			},
+			clearValue() {
+				this.carModelCode = ''
+			},
+			getDa(code, type,i) {
+				let _this = this;	
+				return new Promise((resolve, reject) => {
+					_this.isWChange = false;
+					if((!_this.flag) && type == 'factory') {
+						_this.getData('', 1, 0, 'factory').then((res) => {						
+							resolve(res);
+						})
+					}else if(_this.flag && type == 'brand') {
+						_this.getData('', 2, 0, 'brand').then((res) => {
+							resolve(res);
+						})
+					}else {
+						_this.getData(code, Math.pow(2,i), i-1, type).then((res) => {
+							resolve(res);
+						})
+					}
+				})
+			},
+			fliterVal(arr, code, str) {
+				if(arr.length == 0) return;
+				for(let [index, item] of arr.entries()) {
+					if(JSON.parse(item.value)[str+'Code'] === code) {
+						this.carCurr[str] = item.value
+					}
+				}
+			},
+			clear() {
+				this.carCurr = {
+					factory:'',
+					brand:'',
+					series:'',
+					model:'',	
+					display:'',
+				};
+				this.series = [];
+				this.model = [];
+				this.display = [];
+				if(!this.flag) {
+					this.brand = [];
+				}
+				this.factoryState = null;
+				this.brandState = null;
+				this.seriesState = null;
+				this.modelState = null;
+				this.displayState = null;
+				this.$emit('callBack', this.carCurr);
+			},
+			validate(){			 
+				var flag = true;
+				var num = this.flag?1:0, i, len;
+				for(i = num, len = this.validateLen; i < len; i++){
+					if(this.carCurr[this.mapArr[i]] == '' || this.carCurr[this.mapArr[i]] == undefined){
+						this[this.mapArr[i]+'State'] = false;
+						flag = false;
+					}else if (this.carCurr[this.mapArr[i]].displayName == ''){
+						this[this.mapArr[i]+'State'] = false;
+						flag = false;
+					}else{
+						this[this.mapArr[i]+'State'] = null;
+					}
+				}
+				this.$emit('validete',flag);
+			},
+
+			once() {
+				if(!this.flag) {
+					this.getData('', 1, 0, 'factory');
+				}else{
+					this.getData('', 2, 0, 'brand');
+				}
+			},
+
+			//获取车节点数据
+			getData(code, level, type, name, modelChange){
+				var $this = this, code = code || '';
+				const { factory, brand, series, model } = this.carCurr
+
+				const factoryCode = factory ? JSON.parse(factory).factoryCode : undefined
+				const brandCode = brand ? JSON.parse(brand).brandCode : undefined
+				const seriesCode = series ? JSON.parse(series).seriesCode : undefined
+				const modelCode = model ? JSON.parse(model).modelCode : undefined
+
+				return new Promise((reslove,reject) => {
+					api.car.queryCarInfoByCarSearch({
+						code:code,
+						level:level,
+						type:type,
+						//厂家编码
+						carFactoryCode: factoryCode,
+						// 品牌编码
+						carBrandCode: level >= 4 ? brandCode : '',
+						// 车系编码
+						carSeriesCode: level >= 8 ? seriesCode : '',
+						// 车型编码
+						carModelCode: level >=64 ? modelCode : '',
+					},function(res){
+						if(res.data.code == 'success'){
+							$this[name] = [];
+							if(!res.data.obj)return;
+							$this.setOptions($this[name], res.data.obj, name, modelChange);
+							reslove(res.data.obj)
+						}
+					})
+				})
+				
+			},
+			//给选项添加数据
+			setOptions(obj, data, nav, modelChange){
+				if(data.length == 0 && typeof data != 'object') return;
+				for(var i = 0, len = data.length; i < len; i++){
+					if(nav == 'car'){
+						obj.push({
+							text: data[i]['displayName'], 
+							value: JSON.stringify(
+								{['carName']:data[i]['displayName'],[nav+'Code']:data[i][nav+'Code']}
+							)
+						})
+					}else if(nav == 'ioType') {
+						obj.push({
+							text: data[i]['iotypeName'], 
+							value: JSON.stringify(
+								{ioTypeName:data[i]['iotypeName'], ioTypeCode:data[i][nav+'Code']}
+							)
+						})
+					}else{
+						let info = {
+							text: data[i][nav+'Name'] || " ",
+							value: JSON.stringify(
+							    { 
+									[nav+'Name']: data[i][nav+'Name'], 
+									[nav+'Code']: data[i][nav+'Code']
+								}
+							),
+						}
+
+						nav == 'display' && data[i].carModelCode && (info.carModelCode = `${data[i].carModelCode}/s/${data[i].carCode}`)
+						obj.push(info)
+
+					}
+				}
+				if(nav == 'display') {
+					
+					if(this.propInfo.displayName) {
+						this.carCurr.display = JSON.stringify({
+							displayCode: undefined,
+							displayName: this.propInfo.displayName
+						})
+					}else {
+						if(!modelChange) {
+							this.carCurr.display = this.carModelCode 
+								? JSON.stringify({
+									displayCode: undefined,
+									displayName: this.getSelItemInfo(this.carModelCode).displayName
+								}) : ''
+						}
+					}
+
+					if(!Object.keys(this.propInfo).length) return
+
+					this.propInfo = {}
+
+					let _carModelCode = ''
+					this.display.forEach(k => {
+						if(this.carCurr.display == k.value) {
+							_carModelCode = k.carModelCode
+						}
+					})
+
+					_carModelCode && this.remoteMethod(_carModelCode.split('/s/')[0], () => {
+						this.carModelCode = _carModelCode
+					})
+				}
+			},
+			selectBack(type, val){
+				if(!type || !val)return;
+				this.getData(val, 2, 0, 'brand');
+			},
+			resetSelectData(str){
+				var num = this.mapArr.indexOf(str);
+				
+				for(var i = num, len = this.mapArr.length; i < len; i++){
+					this.$set(this.carCurr, this.mapArr[i], '')
+					this[this.mapArr[i]] = []
+				}
+			},
+			analysisData(val) {
+				let obj = Object.assign({}, this.carinfo);
+				for( let item of Object.values(val)){
+					typeof item === "string" && item != '' &&  (item = JSON.parse(item))
+					Object.assign(obj,item)
+				}
+				return obj;
+			},
+			getName(arr,val,str) {
+				for(let i=0; i<arr.length; i++) {
+					if(!arr[i].value[str + 'Code']){
+						return;
+					}
+					if(val == arr[i].value[str + 'Code']) {				
+						return arr[i].value
+					}
+				}
+			}
+		},
+		watch:{
+			//监听厂家获取品牌
+			_factory(val){	
+				const vo = val != '' ? JSON.parse(val) : ''
+
+				if((!this.isWChange) || !vo || !vo.factoryCode ) {
+					return;
+				}
+
+				this.resetSelectData('brand');
+				let param = this.analysisData(this.carCurr);
+				this.$emit('callBack',param);
+
+				this.brand = []
+				this.series = []
+				this.model = []
+				this.display = []
+				
+
+				this.getData(vo.factoryCode, 2, 0, 'brand');
+			},
+			//监听品牌获取车系
+			_brand(val){
+				const vo = val != '' ? JSON.parse(val) : ''
+
+				if((!this.isWChange) || !vo || !vo.brandCode) {
+					return;
+				}
+				this.resetSelectData('series');
+				let param = this.analysisData(this.carCurr);				
+				this.$emit('callBack',param);
+
+				this.series = []
+				this.model = []
+				this.display = []
+				this.getData(vo.brandCode, 4, 1, 'series');
+			},
+			//监听车系获取车型
+			_series(val){
+				const vo = val != '' ? JSON.parse(val) : ''
+
+				if((!this.isWChange) || !vo  || !vo.seriesCode) {
+					return;
+				}
+				this.resetSelectData('model');
+				let param = this.analysisData(this.carCurr);				
+				this.$emit('callBack',param);
+
+				this.model = []
+				this.display = []
+				this.getData(vo.seriesCode, 8, 2, 'model');
+			},
+			//监听车型获取车款
+			_model(val){
+				const vo = val != '' ? JSON.parse(val) : ''
+
+				if((!this.isWChange) || !vo || !vo.modelCode) {
+					return;
+				}				
+				this.resetSelectData('display');
+				let param = this.analysisData(this.carCurr);
+				this.$emit('callBack',param);
+
+				this.display = []
+				this.getData(vo.modelCode, 64, 3, 'display', this.toggle);
+			},
+			
+			_display(val){
+				const vo = val != '' ? JSON.parse(val) : ''
+
+				if((!this.isWChange) || !vo || !vo.displayName) {
+					return;
+				}
+				let param = this.analysisData(this.carCurr);
+
+				this.tempParams = {...param}
+
+                let _carModelCode = ''
+				this.display.forEach(k => {
+					if(vo.displayName == k.text) {
+						_carModelCode = k.carModelCode
+					}
+				})
+				if(_carModelCode) {
+					this.remoteMethod(_carModelCode.split('/s/')[0], () => {
+						this.carModelCode = _carModelCode
+					})
+				}else {
+					this.carModelCode = ''
+				}
+
+				this.$emit('callBack',param)
+			},
+		}
+
+	}
+</script>
+<style>
+.select_required .el-input__inner {
+	border-color: #f86c6b; 
+}
+</style>