|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<Row :gutter="24" class-name="filter-row">
|
|
|
|
<Col :span="6">
|
|
|
|
<Row>
|
|
|
|
<Col :span="fieldSort.first.labelSpan"><label class="field-label">{{fieldSort.first.label}}:</label></Col>
|
|
|
|
<Col :span="fieldSort.first.fieldSpan">
|
|
|
|
<Select v-model="_firstModel" :placeholder="fieldSort.first.holder" @on-change="firstChange" clearable>
|
|
|
|
<Option v-for="option in firstList" :value="option.sortId" :key="option.sortId">
|
|
|
|
{{option.sortName}}
|
|
|
|
</Option>
|
|
|
|
</Select>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
<Col :span="6" v-show="showSecond">
|
|
|
|
<Row>
|
|
|
|
<Col :span="fieldSort.second.labelSpan"><label class="field-label">{{fieldSort.second.label}}:</label></Col>
|
|
|
|
<Col :span="fieldSort.second.fieldSpan">
|
|
|
|
<Select v-model="_secondModel" :placeholder="fieldSort.second.holder" @on-change="secondChange" clearable>
|
|
|
|
<Option v-for="option in secondList" :value="option.sortId" :key="option.sortId">
|
|
|
|
{{option.sortName}}
|
|
|
|
</Option>
|
|
|
|
</Select>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
<Col :span="6" v-show="showThird">
|
|
|
|
<Row>
|
|
|
|
<Col :span="fieldSort.third.labelSpan"><label class="field-label">{{fieldSort.third.label}}:</label></Col>
|
|
|
|
<Col :span="fieldSort.third.fieldSpan">
|
|
|
|
<Select v-model="_thirdModel" :placeholder="fieldSort.third.holder" @on-change="thirdChange" clearable>
|
|
|
|
<Option v-for="option in thirdList" :value="option.sortId" :key="option.sortId">
|
|
|
|
{{option.sortName}}
|
|
|
|
</Option>
|
|
|
|
</Select>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
<slot></slot>
|
|
|
|
</Row>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import _ from 'lodash';
|
|
|
|
import service from 'product-service';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'SelcetCategory',
|
|
|
|
props: {
|
|
|
|
fieldSort: {
|
|
|
|
type: Object
|
|
|
|
},
|
|
|
|
firstModel: {
|
|
|
|
type: [String, Number]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
firstList: [],
|
|
|
|
secondList: [],
|
|
|
|
thirdList: [],
|
|
|
|
showSecond: false,
|
|
|
|
showThird: false,
|
|
|
|
sortId: {
|
|
|
|
first: '',
|
|
|
|
second: '',
|
|
|
|
third: ''
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
_firstModel() {
|
|
|
|
return this.fieldSort.first.model;
|
|
|
|
},
|
|
|
|
_secondModel() {
|
|
|
|
return this.fieldSort.second.model;
|
|
|
|
},
|
|
|
|
_thirdModel() {
|
|
|
|
return this.fieldSort.third.model;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.getSortInfo({level: 1});
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
firstChange(val) {
|
|
|
|
this.sortId.first = val;
|
|
|
|
this.getSortInfo({
|
|
|
|
level: 2,
|
|
|
|
sortId: val
|
|
|
|
});
|
|
|
|
|
|
|
|
this.showSecond = val !== '' && val !== null;
|
|
|
|
this.$emit('on-change', this.sortId);
|
|
|
|
},
|
|
|
|
secondChange(val) {
|
|
|
|
this.sortId.second = val;
|
|
|
|
this.getSortInfo({
|
|
|
|
level: 3,
|
|
|
|
sortId: val
|
|
|
|
});
|
|
|
|
|
|
|
|
this.showThird = val !== '' && val !== null;
|
|
|
|
this.$emit('on-change', this.sortId);
|
|
|
|
},
|
|
|
|
thirdChange(val) {
|
|
|
|
this.sortId.third = val;
|
|
|
|
this.$emit('on-change', this.sortId);
|
|
|
|
},
|
|
|
|
getSortInfo(params) {
|
|
|
|
const listMap = {
|
|
|
|
1: 'firstList',
|
|
|
|
2: 'secondList',
|
|
|
|
3: 'thirdList'
|
|
|
|
};
|
|
|
|
|
|
|
|
service.getSort({
|
|
|
|
params
|
|
|
|
}).then((res) => {
|
|
|
|
let code = _.get(res, 'data.code');
|
|
|
|
|
|
|
|
if(code === 200) {
|
|
|
|
this[listMap[params.level]] = res.data.data;
|
|
|
|
}
|
|
|
|
|
|
|
|
}, (error) => {
|
|
|
|
this.$Message.error(error.message);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.field-label {
|
|
|
|
line-height: 32px;
|
|
|
|
}
|
|
|
|
</style> |
|
|
\ No newline at end of file |
