452 行
16 KiB
JavaScript
可执行文件
452 行
16 KiB
JavaScript
可执行文件
/**
|
|
* 选择商品分类（不选到底）
|
|
*/
|
|
Vue.component('select-goods-category', {
|
|
template: `<div style="display: inline-block;vertical-align: top" >
|
|
<el-select :size="size" clearable :disabled="isDisabled" filterable
|
|
@change="changeGoodsClass1($event)"
|
|
value-key="id"
|
|
v-model="id1" :placeholder="placeholder1">
|
|
<el-option-group v-for="group in goodsClass1"
|
|
:key="group.id"
|
|
:label="group.name">
|
|
<el-option v-for="item in group.list"
|
|
:key="item.id"
|
|
:disabled="item.industry_id>0 && limitIndustryId>0 && limitIndustryId!=item.industry_id"
|
|
:label="item.class_name"
|
|
:value="item">
|
|
</el-option>
|
|
</el-option-group>
|
|
</el-select>
|
|
<el-select :size="size" clearable :disabled="isDisabled" filterable v-if="goodsClass2.length"
|
|
@change="changeGoodsClass2($event)"
|
|
v-model="id2" :placeholder="placeholder2">
|
|
<el-option
|
|
v-for="item in goodsClass2"
|
|
:key="item.id"
|
|
:label="item.class_name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
<el-select :size="size" clearable :disabled="isDisabled" filterable v-if="goodsClass3.length"
|
|
@change="changeGoodsClass3($event)"
|
|
v-model="id3" :placeholder="placeholder3">
|
|
<el-option
|
|
v-for="item in goodsClass3"
|
|
:key="item.id"
|
|
:label="item.class_name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</div>`,
|
|
props: {
|
|
'categoryId': {
|
|
type: String,
|
|
default: '',
|
|
},//已选中的最后一级分类ID
|
|
'categoryId1': {
|
|
type: String,
|
|
default: '',
|
|
},//已选中的一级分类
|
|
'categoryId2': {
|
|
type: String,
|
|
default: '',
|
|
},//已选中的二级分类
|
|
'categoryId3': {
|
|
type: String,
|
|
default: '',
|
|
},//已选中的三级分类
|
|
'userType': {
|
|
type: Number,
|
|
default: 1,
|
|
},//获取分类的用户类型 1商户 2门店
|
|
'storeId': {
|
|
type: String,
|
|
default: '',
|
|
},//门店ID在userType等于2时，并且是商户选择门店商品时可能会传
|
|
'getChild': {
|
|
type: Boolean,
|
|
default: true,
|
|
},//是否需要选择二三级分类
|
|
'placeholder1': {
|
|
type: String,
|
|
default: '选择一级分类',
|
|
},
|
|
'placeholder2': {
|
|
type: String,
|
|
default: '选择二级分类',
|
|
},
|
|
'placeholder3': {
|
|
type: String,
|
|
default: '选择三级分类',
|
|
},
|
|
'isDisabled': {
|
|
type: Boolean,
|
|
default: false,
|
|
},//是否禁止修改
|
|
'size': {
|
|
type: String,
|
|
default: 'small'
|
|
},
|
|
'unitData': {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},//初始选中的分类ID列表
|
|
'selIndustryId': {
|
|
type: String,
|
|
default: '',
|
|
},//已选中分类的行业ID
|
|
'limitIndustryId': {
|
|
type: String,
|
|
default: '',
|
|
},//限制的行业ID
|
|
},
|
|
data() {
|
|
return {
|
|
goodsClass1: [],
|
|
goodsClass2: [],
|
|
goodsClass3: [],
|
|
id1: '',
|
|
id2: '',
|
|
id3: '',
|
|
category_id: '',
|
|
}
|
|
},
|
|
methods: {
|
|
getGoodsClass(pid, type, fn) {
|
|
if (type == 1 && this.goodsClass1.length) {
|
|
this.setClassData(type, this.goodsClass1);
|
|
typeof fn == "function" && this.$nextTick(() => {
|
|
fn();
|
|
});
|
|
} else {
|
|
this.sendRequest('Retail/MerCate/getChooseClassList', {
|
|
data: {
|
|
pid: pid,
|
|
type: type,
|
|
user_type: this.userType,
|
|
store_id: this.storeId,
|
|
},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.setClassData(type, res.data);
|
|
typeof fn == "function" && this.$nextTick(() => {
|
|
fn();
|
|
})
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
setClassData(type, data) {
|
|
switch (type) {
|
|
case 1:
|
|
this.goodsClass1 = [];
|
|
this.goodsClass1 = data;
|
|
this.id1 = '';
|
|
this.goodsClass2 = [];
|
|
this.id2 = '';
|
|
this.goodsClass3 = [];
|
|
this.id3 = '';
|
|
this.category_id = '';
|
|
break;
|
|
case 2:
|
|
this.goodsClass2 = [];
|
|
this.goodsClass2 = data;
|
|
this.id2 = '';
|
|
this.goodsClass3 = [];
|
|
this.id3 = '';
|
|
this.category_id = '';
|
|
break;
|
|
case 3:
|
|
this.goodsClass3 = [];
|
|
this.goodsClass3 = data;
|
|
this.id3 = '';
|
|
this.category_id = '';
|
|
break;
|
|
}
|
|
},
|
|
changeGoodsClass1(val, fn) {
|
|
if (!val) {
|
|
this.goodsClass2 = [];
|
|
this.id2 = '';
|
|
this.goodsClass3 = [];
|
|
this.id3 = '';
|
|
this.category_id = '';
|
|
if (typeof fn != "function") {
|
|
this.$nextTick(() => {
|
|
this.callback();
|
|
})
|
|
}
|
|
} else {
|
|
if (this.getChild) {
|
|
this.getGoodsClass(val.id, 2, () => {
|
|
if (!this.goodsClass2.length) {
|
|
this.category_id = this.id1.id;
|
|
}
|
|
this.$nextTick(() => {
|
|
if (typeof fn == "function") {
|
|
fn();
|
|
} else {
|
|
this.callback();
|
|
}
|
|
})
|
|
});
|
|
} else {
|
|
this.category_id = this.id1.id;
|
|
this.$nextTick(() => {
|
|
if (typeof fn == "function") {
|
|
fn();
|
|
} else {
|
|
this.callback();
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
},
|
|
changeGoodsClass2(val, fn) {
|
|
if (!val) {
|
|
this.goodsClass3 = [];
|
|
this.id3 = '';
|
|
this.category_id = '';
|
|
if (typeof fn != "function") {
|
|
this.$nextTick(() => {
|
|
this.callback();
|
|
})
|
|
}
|
|
} else {
|
|
this.getGoodsClass(val, 3, () => {
|
|
if (!this.goodsClass3.length) {
|
|
this.category_id = this.id2;
|
|
}
|
|
this.$nextTick(() => {
|
|
if (typeof fn == "function") {
|
|
fn();
|
|
} else {
|
|
this.callback();
|
|
}
|
|
})
|
|
});
|
|
}
|
|
},
|
|
changeGoodsClass3(val, fn) {
|
|
if (!val) {
|
|
this.id3 = '';
|
|
this.category_id = '';
|
|
} else {
|
|
this.category_id = this.id3;
|
|
}
|
|
this.$nextTick(() => {
|
|
if (typeof fn == "function") {
|
|
fn();
|
|
} else {
|
|
this.callback();
|
|
}
|
|
})
|
|
},
|
|
callback() {
|
|
this.$emit('update:categoryId1', this.id1 ? this.id1.id : '');
|
|
this.$emit('update:categoryId2', this.id2);
|
|
this.$emit('update:categoryId3', this.id3);
|
|
this.$emit('update:categoryId', this.category_id);
|
|
this.$emit('update:selIndustryId', this.id1 ? this.id1.industry_id : '');
|
|
this.$emit('change', {
|
|
category_id: this.category_id,
|
|
industry_id: this.id1 ? this.id1.industry_id : '',
|
|
category: [this.id1 ? this.id1.id : '', this.id2, this.id3],
|
|
});
|
|
},
|
|
unitClass(data) {
|
|
//已选中一级分类
|
|
this.getGoodsClass(0, 1, () => {
|
|
if (data[0]) {
|
|
for (let i = 0; i < this.goodsClass1.length; i++) {
|
|
for (let j = 0; j < this.goodsClass1[i].list.length; j++) {
|
|
if (data[0] == this.goodsClass1[i].list[j].id) {
|
|
this.id1 = {...this.goodsClass1[i].list[j]};//一级分类赋值
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
this.category_id = this.id1.id;
|
|
if (data[1] && this.getChild) {
|
|
//已选中二级分类
|
|
//获取二级分类列表
|
|
this.changeGoodsClass1(this.id1, () => {
|
|
this.id2 = data[1];//二级分类赋值
|
|
this.category_id = this.id2;
|
|
if (data[2]) {
|
|
//已选中三级分类
|
|
//获取三级分类列表
|
|
this.changeGoodsClass2(this.id2, () => {
|
|
this.id3 = data[2];//三级分类赋值
|
|
this.category_id = this.id3;
|
|
this.callback();
|
|
});
|
|
} else {
|
|
this.callback();
|
|
this.setClassData(3, []);
|
|
}
|
|
});
|
|
} else {
|
|
this.callback();
|
|
this.setClassData(2, []);
|
|
}
|
|
} else {
|
|
this.callback();
|
|
this.setClassData(1, this.goodsClass1);
|
|
}
|
|
})
|
|
},
|
|
clearCategory() {
|
|
this.unitClass(['', '', '']);
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
created() {
|
|
this.unitClass(this.unitData);
|
|
},
|
|
watch: {
|
|
unitData: {
|
|
deep: true,
|
|
handler(n, o) {
|
|
this.unitClass(n);
|
|
}
|
|
},
|
|
}
|
|
});
|
|
|
|
/**
|
|
* 选择商品分类（选到底）
|
|
*/
|
|
Vue.component('select-goods-category-deep', {
|
|
template: `<el-cascader :size="size"
|
|
v-model="category"
|
|
placeholder="请选择商品分类"
|
|
clearable
|
|
ref="category"
|
|
:disabled="isDisabled"
|
|
:props="goodsClassList"
|
|
:class="customerClass"
|
|
filterable></el-cascader>`,
|
|
props: {
|
|
'unitCategory': {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},//初始选中的分类ID列表['1','2','3']
|
|
'placeholder': {
|
|
type: String,
|
|
default: '请选择商品分类',
|
|
},
|
|
'customerClass': {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
'userType': {
|
|
type: Number,
|
|
default: 1,
|
|
},//获取分类的用户类型 1商户 2门店
|
|
'storeId': {
|
|
type: String,
|
|
default: '',
|
|
},//门店ID在userType等于2时，或者是商户选择门店商品时可能会传
|
|
'isDisabled': {
|
|
type: Boolean,
|
|
default: false,
|
|
},//是否禁止修改
|
|
'size': {
|
|
type: String,
|
|
default: 'small'
|
|
},
|
|
'categoryId': {
|
|
type: String,
|
|
default: '',
|
|
}
|
|
},
|
|
data() {
|
|
let _this = this;
|
|
return {
|
|
category: [],//被选中的商品分类信息
|
|
goodsClassList: {
|
|
lazy: true,
|
|
emitPath: true,
|
|
lazyLoad(node, resolve) {
|
|
_this.handleGoodsClassList(node, resolve);
|
|
},
|
|
},//供选择的分类列表
|
|
temp_category_id: [],//初始选中的分类ID列表['1','2','3']
|
|
}
|
|
},
|
|
methods: {
|
|
//处理商品分类
|
|
handleGoodsClassList(node, resolve) {
|
|
const {value} = node;
|
|
let list = this.getGoodsClassList(value ? value.id : 0);
|
|
resolve(list);
|
|
},
|
|
//获取商品分类
|
|
getGoodsClassList(pid) {
|
|
let data = [];
|
|
$.ajax({
|
|
url: '/index.php/Retail/MerCate/getGoodsClassify',
|
|
type: 'post',
|
|
data: {
|
|
pid: pid,
|
|
user_type: this.userType,
|
|
store_id: this.storeId,
|
|
},
|
|
async: false,
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
data = res.data.map((item) => {
|
|
let obj = {
|
|
value: item,
|
|
label: item.class_name,
|
|
leaf: item.leaf,
|
|
};
|
|
if (this.temp_category_id.length && this.temp_category_id[0].id == item.id) {
|
|
this.temp_category_id.splice(0, 1);
|
|
this.category.push(item);
|
|
obj.children = this.getGoodsClassList(item.id);
|
|
}
|
|
return obj;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
return data;
|
|
},
|
|
},
|
|
created() {
|
|
this.temp_category_id = this.unitCategory;
|
|
},
|
|
watch: {
|
|
//监听分类切换
|
|
category: {
|
|
deep: true,
|
|
handler(n) {
|
|
let id = '';
|
|
if (n && n.length) id = n[n.length - 1].id;
|
|
this.$emit('update:categoryId', id);
|
|
this.$emit('change', id);
|
|
}
|
|
},
|
|
//监听分类切换
|
|
categoryId(n, o) {
|
|
if (n == '') {
|
|
this.category = [];
|
|
this.$refs.category.$refs.panel.clearCheckedNodes();
|
|
}
|
|
},
|
|
},
|
|
});
|