lshcomment 1.0.0

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

@@ -0,0 +1,542 @@
+<template lang="html">
+<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'}">
+			<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="visibleToggle('carModelCode')"
+					: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 :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">
+                <b-form-input :disabled="isDisabled" v-model.trim="engineNumber" autocomplete="off" maxlength="50" @input="emitInfo" @keyup.native="engineNumberKeyup"/> 
+			</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'}">
+			<b-form-fieldset horizontal :label="label[0]" :label-cols="4" class="text-right">
+				<el-select v-model="carInfoVo.brandCode"
+				    :class="{ 'select_required' : !!state.brand }"
+                    :disabled="isDisabled"
+                    filterable
+                    @change="brandChange"
+                    @visible-change="visibleToggle('brand')"
+                    style="width: 100%">
+                    <el-option
+                        v-for="(item, i) in options.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[1]" :label-cols="4" class="text-right">
+				<el-select v-model="carInfoVo.seriesCode"
+				    :class="{ 'select_required' : !!state.series }"
+                    :disabled="isDisabled"
+                    filterable
+                    @change="seriesChange"
+                    @visible-change="visibleToggle('series')"
+                    style="width: 100%">
+                    <el-option
+                        v-for="(item, i) in options.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'}">
+			<b-form-fieldset horizontal :label="label[2]" :label-cols="4" class="text-right">
+				<el-select v-model="carInfoVo.modelCode"
+				    :class="{ 'select_required' : !!state.model }"
+                    :disabled="isDisabled"
+                    filterable
+                    @change="modelChange"
+                    @visible-change="visibleToggle('model')"
+                    style="width: 100%">
+                    <el-option
+                        v-for="(item, i) in options.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'}">
+			<b-form-fieldset horizontal :label="label[3]" :label-cols="4" class="text-right">
+				<el-select v-model="carInfoVo.carCode"
+				    :class="{ 'select_required' : !!state.display }"
+                    :disabled="isDisabled"
+                    filterable
+                    @change="displayChange"
+                    @visible-change="visibleToggle('display')"
+                    style="width: 100%">
+                    <el-option
+                        v-for="(item, i) in options.display"
+						: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[4]" :label-cols="4" class="text-right">
+				<el-select v-model="carInfoVo.factoryCode"
+				    :class="{ 'select_required' : !!state.factory }"
+                    :disabled="isDisabled"
+                    filterable
+                    @change="factoryChange"
+                    @visible-change="visibleToggle('factory')"
+                    style="width: 100%">
+                    <el-option
+                        v-for="(item, i) in options.factory"
+						:key="i"
+                        :label="item.text"
+                        :value="item.value">
+                    </el-option>
+                </el-select>
+			</b-form-fieldset>
+		</div>
+	</div>
+</div>
+</template>
+<script>
+
+	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
+	
+	/**
+	 * 
+	 * @date 2019/10/09
+	 * @author luwenxiang
+	 * 
+	 * @event initCarInfo 
+	 * @event setValue
+	 * 
+	 * @emits handleChange
+	 * 
+	 * @see 人车组件专用
+	 * 
+	 */
+
+	export default {
+		props: {
+			col: {
+				type: Number,
+				default: 3
+			},
+			isDisabled: {
+				type: Boolean,
+				default: false
+			},
+			required: {
+				type: Boolean,
+                default: false,
+			}
+		},
+		data() {
+            return {
+                // 页面 (品牌 ~ 厂家) 下拉选项
+                options: {
+                    brand: [],
+					series: [],
+					model: [],
+                    display: [],
+                    factory: []
+                },
+			    // 页面 (品牌 ~ 厂家) 下拉选中的绑定值 => 对应的( 品牌 ~ 厂家 )的编码
+				carInfoVo: {
+                    brandCode: '',
+					seriesCode: '',
+					modelCode: '',
+					carCode: '',
+					factoryCode: '',
+                },
+                // 控制必填校验( 红框状态 )
+                state: {
+                    brand: null,
+					series: null,
+					model: null,
+					display: null,
+					factory: null,
+                },
+			
+                names: ['brand', 'series', 'model', 'display', 'factory'],
+
+                carModelCode: '',
+				carModelCodeOptions: [],
+				tempParams: {},
+				propInfo: {},
+
+                // toggle: true,
+                
+                visible: {
+                    brand: false,
+					series: false,
+					model: false,
+					display: false,
+					factory: false,
+
+					carModelCode: false
+                },
+
+                engineNumber: ''
+			}
+		},
+		computed: {
+            label() {
+				let labels = ['品牌', '车系', '车型', '车款', '厂家']
+                if(this.required) {
+                    labels = labels.map(k => k = `${k} *`)
+                }
+                return labels
+            },
+		},
+		methods: {
+            engineNumberKeyup(e) {
+                e.target.value = e.target.value.replace(/[\u4e00-\u9fa5]/ig,'')
+
+                this.engineNumber = e.target.value
+            },
+			visibleToggle(prop) {
+				for(let k in this.visible) {
+					this.visible[k] = k === prop ? true : false
+				}
+			},
+			// 阉割ing...
+			checkRequired() {
+				const {
+					brandCode,
+					seriesCode,
+					modelCode,
+					carCode ,
+					factoryCode,
+				} = this.carInfoVo
+
+				this.state = {
+                    brand: !!brandCode,
+					series: !!seriesCode,
+					model: !!modelCode,
+					display: !!carCode,
+					factory: !!factoryCode,
+                }
+
+			},
+			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 || !this.visible.carModelCode) return
+
+				const { 
+					factoryCode,
+					brandCode,
+					seriesCode,
+					modelCode,
+					carCode
+				} = this.getSelItemInfo(val)
+
+				const params = { 
+					factoryCode,
+					brandCode,
+					seriesCode,
+					modelCode,
+					carCode 
+				}
+
+				const tempParams = {
+					factoryCode: this.tempParams.factoryCode,
+					brandCode: this.tempParams.brandCode,
+					seriesCode: this.tempParams.seriesCode,
+					modelCode: this.tempParams.modelCode,
+					carCode: this.tempParams.carCode,
+				}
+
+				JSON.stringify(params) !== JSON.stringify(tempParams) && this.setValue(params, () => {
+					this.emitInfo()
+				})
+
+			},
+			// 初始化组件
+			initCarInfo() {
+                this.carModelCode = ''
+                this.engineNumber = ''
+
+				this.carInfoVo = {
+                    brandCode: '',
+					seriesCode: '',
+					modelCode: '',
+					carCode: '',
+					factoryCode: '',
+				}
+				
+				this.options = {
+                    brand: [],
+					series: [],
+					model: [],
+                    display: [],
+                    factory: []
+				}
+				this.carModelCodeOptions = []
+
+				this.queryOptions(0, 2, 'brand')
+            },
+            initValue() {},
+            // 数据回显
+            setValue({ factoryCode, brandCode, seriesCode, modelCode, carCode, engineNumber }, next) {
+                this.carInfoVo = {
+                    brandCode,
+                    seriesCode,
+                    modelCode,
+                    carCode,
+                    factoryCode,
+                }
+                this.engineNumber = engineNumber
+
+				Promise.all([
+					this.queryOptions(1, 4, 'series', brandCode),
+					this.queryOptions(2, 8, 'model', seriesCode),
+					this.queryOptions(3, 64, 'display', modelCode),
+					this.queryOptions(0, 1, 'factory')
+				]).then(res => {
+
+                    this.carInfoVo = {
+                        brandCode: this.options.brand.filter(k => k.value === brandCode)[0] ? brandCode : '',
+                        seriesCode: this.options.series.filter(k => k.value === seriesCode)[0] ? seriesCode : '',
+                        modelCode: this.options.model.filter(k => k.value === modelCode)[0] ? modelCode : '',
+                        carCode: this.options.display.filter(k => k.value === carCode)[0] ? carCode : '',
+                        factoryCode: this.options.factory.filter(k => k.value === factoryCode)[0] ? factoryCode : '',
+                    }
+					next && next(res)
+
+					next || this.setCarModelCode()
+				})
+			},
+			setCarModelCode() {
+				const { carModelCode, carCode } = this.options.display.find(k => k.carCode === this.carInfoVo.carCode) || {}
+				if(carModelCode) {
+					this.remoteMethod(carModelCode, () => {
+						this.carModelCode = `${carModelCode}/s/${carCode}`
+					})
+				}else {
+					this.carModelCode = ''
+				}
+			},
+		
+			// 根据车型上级信息查询下级数据
+			queryOptions(type, level, prop, code = '') {
+				const { factoryCode, brandCode, seriesCode, modelCode } = this.carInfoVo
+
+                const i = this.names.indexOf(prop)
+
+				return new Promise(reslove => {
+					if(i === 1 && !brandCode) {
+						reslove()
+						return
+					}
+					if(i === 2 && (!brandCode ||!seriesCode)) {
+						reslove()
+						return
+					}
+					if(i === 3 && (!brandCode ||!seriesCode || !modelCode)) {
+						reslove()
+						return
+					}
+					api.car.queryCarInfoByCarSearch({
+						code,
+						level,
+						type,
+						carBrandCode: brandCode,
+						carSeriesCode: i >= 2 ? seriesCode : '',
+						carModelCode: i >= 3 ? modelCode : '',
+					}, res => {
+                        const obj = res.data.obj
+						if(res.data.code == 'success') {
+                            if(!obj) return
+                            
+							this.setOptions(prop, obj)
+							reslove(obj)
+						}
+					})
+				})
+				
+            },
+
+            setOptions(prop, options) {
+                this.options[prop] = []
+
+                if(prop === 'display') {
+                    this.options[prop] = options.map(k => ({
+                        text: k[`${prop}Name`],
+						value: k.carCode,
+
+						carCode: k.carCode,
+						carModelCode: k.carModelCode
+                    }))
+
+                    return
+                }
+                this.options[prop] = options.map(k => ({
+                    text: k[`${prop}Name`],
+                    value: k[`${prop}Code`]
+                }))
+            },
+            // 初始化所有下级
+            subInit(prop) {
+                let i = this.names.indexOf(prop)
+
+                for(; i < this.names.length; i ++ ) {
+                    const k = this.names[i]
+                    this.options[k] = []
+
+                    k === 'display' 
+                      ? this.carInfoVo['carCode'] = '' 
+                      : this.carInfoVo[`${k}Code`] = ''
+                }
+            },
+
+            brandChange(val) {
+                if(this.visible.brand) {
+                    this.subInit('series')
+					this.queryOptions(1, 4, 'series', val)
+					
+					this.emitInfo()
+                }
+            },
+            seriesChange(val) {
+                if(this.visible.series) {
+                    this.subInit('model')
+					this.queryOptions(2, 8, 'model', val)
+					
+					this.emitInfo()
+                }
+            },
+            modelChange(val) {
+                if(this.visible.model) {
+                    this.subInit('display')
+					this.queryOptions(3, 64, 'display', val)
+					
+					this.emitInfo()
+                }
+            },
+            displayChange(val) {
+                if(this.visible.display) {
+                    this.subInit('factory')
+					this.queryOptions(0, 1, 'factory')
+					
+					this.emitInfo()
+                }
+            },
+			factoryChange(val) {
+				if(this.visible.factory) {
+					this.setCarModelCode()
+
+					this.emitInfo()
+				}
+			},
+			emitInfo() {
+				const { brandCode, seriesCode, modelCode, carCode, factoryCode } = this.carInfoVo
+
+				const [carModelCode, carCode2] = this.carModelCode.split('/s/')
+		
+				const emitParams = {
+					carModelCode,
+					brandCode,
+					seriesCode, 
+					modelCode, 
+					carCode, 
+					factoryCode,
+					brandName: this.findName('brand', brandCode),
+					seriesName: this.findName('series', seriesCode),
+					modelName: this.findName('model', modelCode),
+					displayName: this.findName('display', carCode),
+                    factoryName: this.findName('factory', factoryCode),
+                    
+                    engineNumber: this.engineNumber
+				}
+
+				this.$emit('handleChange', emitParams)
+			},
+
+			findName(prop, value) {
+				const info = this.options[prop].find(k => k.value === value)
+
+				return info ? info.text : ''
+			},
+		},
+	}
+</script>
+<style>
+.select_required .el-input__inner {
+	border-color: #f86c6b; 
+}
+</style>