472 行
22 KiB
JavaScript
可执行文件
472 行
22 KiB
JavaScript
可执行文件
Vue.component('goods-class-list', {
|
|
template: `<div class="class-list-box">
|
|
<i v-show="showArrow && clickIndex >= 0 && arrowOffsetTop >= 110"
|
|
class="el-icon-caret-right class-list-to-right"
|
|
:style="'top:' + arrowOffsetTop + 'px'"
|
|
ref="list_to_right_1"></i>
|
|
<div class="class-list-top-title">{{classTitle}}</div>
|
|
<div class="class-list-top" v-if="classType==1&&(userType==1||storeIndustryId=='')">
|
|
<div>
|
|
<select-industry :industry-id.sync="industry_id"
|
|
@change="changeIndustry"
|
|
:show-common="true"></select-industry>
|
|
<el-tooltip effect="dark"
|
|
content="可根据行业筛选分类"
|
|
placement="top-start">
|
|
<i class="el-icon-question"></i>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
<div class="class-list-top">
|
|
<el-input size="mini" placeholder="分类名称"
|
|
clearable v-model="search_name"
|
|
@keydown.enter.exact.native.prevent="refreshClass"
|
|
class="class-search">
|
|
<template slot="append">
|
|
<i class="el-icon-search" @click="refreshClass"></i>
|
|
</template>
|
|
</el-input>
|
|
<div class="class-list-top-right">
|
|
<el-tooltip class="item" effect="dark" content="刷新" placement="top">
|
|
<el-button size="mini" type="text" style="font-size: 18px" icon="el-icon-refresh"
|
|
@click="refreshClass"></el-button>
|
|
</el-tooltip>
|
|
|
|
<el-button v-if="(userType==1||storeAuth.edit_goods_class==1)&&operate.edit" size="mini" circle type="primary" plain icon="el-icon-plus"
|
|
@click="showEditClassDialog=true"></el-button>
|
|
</div>
|
|
</div>
|
|
<div class="class-list-title">
|
|
<div>名称</div>
|
|
<div>编码</div>
|
|
<div>操作</div>
|
|
</div>
|
|
|
|
<el-scrollbar class="class-list-big" ref="class_list_big" :style="'height:calc(100vh - '+(classType==1&&storeIndustryId!=''?424:380)+'px)'">
|
|
<template v-for="(item,index) in dataList">
|
|
<div class="class-list" :ref="'class_list_'+index"
|
|
:class="index==clickIndex?'class-list-active':''"
|
|
@click="clickClass(index)">
|
|
<el-tooltip class="item" effect="dark" :content="item.class_name" placement="top-start">
|
|
<div v-text="item.class_name"></div>
|
|
</el-tooltip>
|
|
<div v-text="item.code"></div>
|
|
<div>
|
|
<el-tooltip v-if="userType==2" class="item" effect="dark"
|
|
content="商城显示状态"
|
|
placement="top-start">
|
|
<el-switch @change="changeOnlineState(index)"
|
|
:disabled="!operate.online"
|
|
v-model="item.online_state"
|
|
:width="28"
|
|
active-value="1"
|
|
inactive-value="0">
|
|
</el-switch>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip v-if="operate.edit&&(userType==1||userType==2&&item.store_id==storeId&&storeAuth.edit_goods_class==1)" class="item" effect="dark" content="编辑" placement="top">
|
|
<el-button size="mini" type="text" icon="el-icon-edit"
|
|
@click.stop="editClass(item)"></el-button>
|
|
</el-tooltip>
|
|
<el-tooltip v-if="operate.del&&(userType==1||userType==2&&item.store_id==storeId&&storeAuth.edit_goods_class==1)" class="item" effect="dark" content="删除" placement="top">
|
|
<el-button size="mini" type="text" icon="el-icon-delete"
|
|
@click.stop="delClass(item)"></el-button>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div v-if="canLoad&&!loading" class="class-list-more">
|
|
<el-button type="text" size="mini" @click="getClassList()">
|
|
<span>获取更多</span>
|
|
<i class="el-icon-arrow-down"></i>
|
|
</el-button>
|
|
</div>
|
|
<div class="class-list-loading" v-if="loading">
|
|
<span class="el-icon-loading"></span>
|
|
</div>
|
|
<div v-if="!canLoad&&!loading" class="class-list-more">
|
|
<span v-if="dataList.length>0">已显示全部</span>
|
|
<span v-else>暂未添加一级分类</span>
|
|
</div>
|
|
</el-scrollbar>
|
|
|
|
<!--添加、编辑分类-->
|
|
<el-dialog :title="(ruleForm.id?'编辑':'添加') + classTitle"
|
|
:append-to-body="true"
|
|
:before-close="closeEditClass"
|
|
:visible.sync="showEditClassDialog"
|
|
:close-on-click-modal="false"
|
|
width="500px">
|
|
<el-form label-width="100px" :model="ruleForm" size="small" :rules="classRules" ref="ruleForm">
|
|
<el-form-item label="级别:">
|
|
<span class="class-type" v-text="classTitle"></span>
|
|
</el-form-item>
|
|
<el-form-item label="行业:" prop="industry_id">
|
|
<select-industry :industry-id.sync="ruleForm.industry_id"
|
|
:is-disabled="ruleForm.id>0||this.classType!=1||storeIndustryId>0?true:false"
|
|
:placeholder="ruleForm.id>0?'编辑不可修改行业':'请选择行业'"></select-industry>
|
|
<template>
|
|
<el-tooltip class="item" effect="dark" placement="top-start">
|
|
<div slot="content">
|
|
<p>1.不限制行业的分类可在所有行业的门店使用</p>
|
|
<p>2.编辑分类时不可修改行业</p>
|
|
<p>3.下级分类的行业与上级分类的一致</p>
|
|
</div>
|
|
<i class="el-icon-question"></i>
|
|
</el-tooltip>
|
|
</template>
|
|
</el-form-item>
|
|
<el-form-item label="图片:" prop="banner_id">
|
|
<choose-image :image-url="ruleForm.banner_url" :image-id="ruleForm.banner_id" @choose="selectImage">
|
|
</choose-image>
|
|
</el-form-item>
|
|
<el-form-item label="名称:" prop="class_name">
|
|
<el-input v-model="ruleForm.class_name" style="width: 190px;"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="编号:" prop="code">
|
|
<el-input type="text" v-model="ruleForm.code" style="width: 190px;"></el-input>
|
|
<el-button style="margin-left: 10px;" @click="autoCode">自动编号</el-button>
|
|
</el-form-item>
|
|
<el-form-item label-width="0" style="text-align: center">
|
|
<el-button type="primary" :disabled="subLoading" @click="sureSubmit">
|
|
<span>保存</span>
|
|
<i v-if="subLoading" class="el-icon-loading"></i>
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
<el-dialog title="选择图片" :append-to-body="true" :visible.sync="showSelectImage"
|
|
custom-class="select-image-el-dialog" :top="'10px'" style="z-index: 9999;">
|
|
<template-select-image :can-select-num="1" @selectfile="selectFile"></template-select-image>
|
|
</el-dialog>
|
|
</div>`,
|
|
props: {
|
|
'classType': {
|
|
type: Number,
|
|
default: 1,
|
|
},//选择的单位ID
|
|
'userType': {
|
|
type: Number,
|
|
default: 1,
|
|
},//1商户 2门店
|
|
'parentData': {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
},
|
|
},//上级分类信息
|
|
'operate': {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
},
|
|
},//操作权限
|
|
'requestUrl': {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
},
|
|
},//请求地址对象
|
|
'showArrow': {
|
|
type: Boolean,
|
|
default: true,
|
|
},//是否显示点击时的右箭头->即是否可以点击产生回调
|
|
},
|
|
data() {
|
|
return {
|
|
classTitle: '一级分类',//标题
|
|
arrowOffsetTop: 0,//右箭头的高度
|
|
page: 0,//分页
|
|
search_name: '',//搜索的关键词
|
|
industry_id: '',//用来搜索的行业ID
|
|
storeIndustryId: localStorage.industry_id>0?localStorage.industry_id:'',//门店的行业ID
|
|
clickIndex: -1,//已点击的下标
|
|
dataList: [],// 数据
|
|
canLoad: true,//是否可以加载
|
|
loading: false,//是否正在加载
|
|
parentId: '0',
|
|
parentIndustryId: '',//上级的行业ID
|
|
|
|
storeId: localStorage.store_id,//门店ID
|
|
|
|
showEditClassDialog: false,//是否显示新增、编辑分类弹框
|
|
subLoading: false,//提交的按钮状态
|
|
ruleForm: {},
|
|
classRules: {
|
|
industry_id: [{message: '请选择分类所属行业', required: false, trigger: 'blur'}],
|
|
class_name: [{message: '请输入分类名称', required: true, trigger: 'blur'}, {
|
|
min: 1,
|
|
max: 20,
|
|
message: '限制长度 1 到 20',
|
|
}],
|
|
code: [{message: '请输入分类编号', required: true, trigger: 'blur'}, {
|
|
min: 1,
|
|
max: 10,
|
|
message: '限制长度 1 到 10',
|
|
}],
|
|
},
|
|
showSelectImage: false,
|
|
};
|
|
},
|
|
methods: {
|
|
//选择图片完成
|
|
selectFile(item) {
|
|
this.showSelectImage = false;
|
|
this.ruleForm.banner_id = item[0].id;
|
|
this.ruleForm.banner_url = item[0].path;
|
|
},
|
|
//显示选择图片
|
|
selectImage() {
|
|
this.showSelectImage = true;
|
|
},
|
|
changeIndustry(val) {
|
|
this.refreshClass();
|
|
},
|
|
//设置默认的添加表单
|
|
setDefaultRuleForm() {
|
|
this.ruleForm = {
|
|
id: '',
|
|
pid: this.parentId,
|
|
class_name: '',
|
|
code: '',
|
|
industry_id: this.parentIndustryId ? this.parentIndustryId : (this.userType == 1 ? '' : this.storeIndustryId),
|
|
banner_id: 0,
|
|
banner_url: ''
|
|
};
|
|
},
|
|
//取消添加分类
|
|
closeEditClass() {
|
|
console.log('closeEditClass');
|
|
this.setDefaultRuleForm();
|
|
this.$refs.ruleForm.resetFields();
|
|
this.showEditClassDialog = false;
|
|
},
|
|
//添加分类
|
|
addClass(item) {
|
|
this.showEditClassDialog = true;
|
|
},
|
|
//编辑分类
|
|
editClass(item) {
|
|
this.ruleForm = {...item};
|
|
console.log(this.ruleForm);
|
|
this.showEditClassDialog = true;
|
|
},
|
|
//修改门店商城显示状态
|
|
changeOnlineState(index) {
|
|
this.sendRequest(this.requestUrl.online, {
|
|
data: {
|
|
id: this.dataList[index].id,
|
|
state: this.dataList[index].online_state,
|
|
},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.$message.success(res.message);
|
|
} else {
|
|
this.$message.error(res.message);
|
|
let dataList = [...this.dataList];
|
|
dataList[index].online_state = dataList[index].online_state == '1' ? '0' : '1';
|
|
this.dataList = [];
|
|
this.dataList = dataList;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//自动编号
|
|
autoCode() {
|
|
this.sendRequest('/Retail/MerCate/getAutoClassCode', {
|
|
data: {
|
|
pid: this.ruleForm.pid,
|
|
},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.ruleForm.code = String(res.code);
|
|
this.$message.success(res.message);
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//添加或编辑，保存分类
|
|
sureSubmit() {
|
|
this.$refs.ruleForm.validate((valid) => {
|
|
if (valid) {
|
|
this.$confirm("确认保存以上设置的分类吗？", "温馨提示", {
|
|
confirmButtonText: '保存',
|
|
cancelButtonText: '取消',
|
|
type: 'info'
|
|
}).then(() => {
|
|
this.subLoading = true;
|
|
this.sendRequest(this.requestUrl.edit, {
|
|
data: this.ruleForm,
|
|
success: (res) => {
|
|
this.subLoading = false;
|
|
if (res.status == 1) {
|
|
this.$message.success(res.message);
|
|
this.refreshClass();
|
|
this.closeEditClass();
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
}
|
|
});
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
//删除分类
|
|
delClass(item) {
|
|
this.$confirm("分类删除后将不可恢复，确认删除分类 “" + item.class_name + "” 吗？", "温馨提示", {
|
|
confirmButtonText: '删除',
|
|
cancelButtonText: '取消',
|
|
type: 'info'
|
|
}).then(() => {
|
|
this.$loading({
|
|
lock: true,
|
|
text: '删除中，请等待',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(255, 255, 255, 0.3)'
|
|
});
|
|
this.sendRequest(this.requestUrl.del, {
|
|
data: {
|
|
id: item.id,
|
|
},
|
|
success: (res) => {
|
|
this.$loading().close();
|
|
if (res.status == 1) {
|
|
this.refreshClass();
|
|
this.$message.success(res.message);
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
}
|
|
});
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
//点击分类
|
|
clickClass(index) {
|
|
if (!this.showArrow) return;
|
|
this.clickIndex = index;
|
|
let scrollbarEl = this.$refs.class_list_big.wrap;
|
|
let scrollTop = scrollbarEl.scrollTop;
|
|
let offsetTop = $(this.$refs['class_list_' + this.clickIndex])[0].offsetTop;
|
|
this.arrowOffsetTop = offsetTop - scrollbarEl.scrollTop + (this.classType == 1 && this.storeIndustryId == '' ? 160 : 120);
|
|
|
|
this.$emit('click-class', {...this.dataList[index]});
|
|
},
|
|
//刷新分类
|
|
refreshClass() {
|
|
this.clickIndex = -1;
|
|
this.page = 0;//分类分页变0
|
|
this.canLoad = true;//分类分页可以加载
|
|
this.getClassList();
|
|
},
|
|
//获取分类列表
|
|
getClassList() {
|
|
if (!this.canLoad) {
|
|
return;
|
|
}
|
|
this.canLoad = false;
|
|
this.loading = true;
|
|
this.sendRequest(this.requestUrl.getClass, {
|
|
data: {
|
|
type: this.classType,
|
|
pid: this.parentId,
|
|
page: ++this.page,
|
|
search_name: this.search_name,
|
|
industry_id: this.industry_id,
|
|
store_industry_id: this.storeIndustryId,
|
|
},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
let dataList = [...this.dataList];
|
|
if (this.page == 1) {
|
|
dataList = res.data;
|
|
} else {
|
|
dataList.push.apply(dataList, res.data);
|
|
}
|
|
this.dataList = [];
|
|
this.dataList = dataList;
|
|
this.$nextTick(() => {
|
|
if (res.data.length < res.limit) {
|
|
this.canLoad = false;
|
|
} else {
|
|
this.canLoad = true;
|
|
}
|
|
this.loading = false;
|
|
this.page == 1 && this.dataList.length && this.clickClass(0)
|
|
})
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//监听滚动条
|
|
handleScroll(e) {
|
|
let scrollbarEl = this.$refs.class_list_big.wrap
|
|
scrollbarEl.onscroll = () => {
|
|
var scrollTop = scrollbarEl.scrollTop; //距顶部的高度
|
|
var windowHeight = scrollbarEl.clientHeight; //可视区的高度
|
|
var scrollHeight = scrollbarEl.scrollHeight;//滚动条总高度
|
|
|
|
if (this.showArrow && this.clickIndex >= 0) {
|
|
let offsetTop = $(this.$refs['class_list_' + this.clickIndex])[0].offsetTop;
|
|
this.arrowOffsetTop = offsetTop - scrollbarEl.scrollTop + (this.classType == 1 && this.userType == 1 ? 160 : 120);
|
|
}
|
|
if (scrollTop + windowHeight == scrollHeight) {
|
|
// console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
|
|
this.getClassList();
|
|
}
|
|
}
|
|
},
|
|
//处理父级
|
|
handlerParent() {
|
|
// console.log(1);
|
|
if (this.parentData.length) {
|
|
this.parentId = this.parentData[this.parentData.length - 1].id;
|
|
this.parentIndustryId = this.parentData[this.parentData.length - 1].industry_id;
|
|
// this.industry_id = this.parentIndustryId ? this.parentIndustryId : (this.userType == 1 ? '' : this.storeIndustryId);
|
|
console.log(this.parentIndustryId);
|
|
let arr = [];
|
|
this.parentData.forEach((item) => {
|
|
arr.push(item.class_name);
|
|
});
|
|
this.classTitle = arr.join('/');
|
|
switch (this.classType) {
|
|
case 2:
|
|
this.classTitle += '/二级分类';
|
|
break;
|
|
case 3:
|
|
this.classTitle += '/三级分类';
|
|
break;
|
|
}
|
|
this.dataList = [];
|
|
}
|
|
this.refreshClass();
|
|
this.setDefaultRuleForm();
|
|
},
|
|
},
|
|
mounted() {
|
|
// if (this.userType == 2) {
|
|
// this.industry_id = this.storeIndustryId;
|
|
// }
|
|
this.handlerParent();
|
|
this.handleScroll();
|
|
},
|
|
created() {
|
|
// console.log(this.requestUrl);
|
|
},
|
|
watch: {
|
|
parentData: {
|
|
deep: true,
|
|
handler(n, o) {
|
|
this.handlerParent();
|
|
}
|
|
}
|
|
}
|
|
});
|