<template>
<div class="pets-category-categoryMap">
<div class="menus">
<div class="menus-left">
<el-row :gutter="20">
<el-col :span="12">
<el-input size="mini" v-model="varietyId" placeholder="请输入品类名称/ID"></el-input>
</el-col>
<el-col :span="4">
<el-button size="mini" @click="find" type="primary">查询</el-button>
</el-col>
<el-col :span="4">
<el-button size="mini" @click="addcat">添加</el-button>
</el-col>
</el-row>
<!-- 树形组件 -->
<el-tree :data="datas" :props="defaultProps" @node-click="handleNodeClick" tyle="margin-top: 20px">
</el-tree>
</div>
<div class="menus-right">
<el-row :gutter="30">
<el-col :span="4">
父级品类:
</el-col>
<el-col :span="20" style="margin-left: -30px">
<el-cascader :options="parentDepart" size="mini" :props="optionProps" @change="handleChange" v-model="pids" style="width: 53%;"></el-cascader>
</el-col>
</el-row>
<el-row class="row">
品类ID: {{classId}}
</el-row>
<el-row class="row">
<el-form inline>
<el-form-item label="品类名字:">
<el-input size="mini" v-model="varietyName" style="width: 248px" placeholder="请输入品类名称, 0/4" maxlength="4"></el-input>
</el-form-item>
</el-form>
</el-row>
<!-- 图片上传Upload组件 -->
<el-row class="row">
<el-col :span="3">
图片:
</el-col>
<el-col :span="13">
<el-row>
<el-upload class="avatar-uploader"
:action="API.upload.sendBos"
accept=".jpg,.jpeg,.png"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-upload2 avatar-uploader-icon"></i>
</el-upload>
</el-row>
<el-row class="row condition">只支持JPG/PNG图片,2M以内,比例1:1</el-row>
</el-col>
</el-row>
<!-- 状态切换 -->
<el-row style="margin-top: 20px">
<el-col :span="3">
状态:
</el-col>
<el-col :span="8">
<el-radio-group v-model="radio" @change="open" :disabled ="varietyName==''">
<el-radio :label="0">启用</el-radio>
<el-radio :label="1">禁用</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row class="row" align="center">
<el-col :span="12" :push="1">
<el-button size="mini" style="width: 80px; margin: 0 10px" @click="preserve" type="primary">保存</el-button>
<el-button size="mini" style="width: 80px; margin-left: 20px" @click="delgoodsType">删除</el-button>
</el-col>
</el-row>
</div>
<!-- 添加的弹框 -->
<el-dialog title="无法添加" :visible.sync="addCategory" width="500px">
<hr />
<div class="warn">该品类下已有商品,无法添加子品类</div>
<div style="text-align: center; margin-top: 30px">
<el-button size="mini" @click="confirmKnow" type="primary">我知道了</el-button>
</div>
</el-dialog>
<!-- 禁用提示弹框 -->
<el-dialog title="禁用提示" :visible.sync="forbidDialog" width="500px">
<hr />
<div class="warn">确定要禁用<span style="color: red; font-weight: 700">{{varietyName}}</span>吗?</div>
<div><span style="color: red; font-weight: 700; margin-left: 150px">禁用后该品类下的子品类和商品无法使用。</span></div>
<div style="text-align: center; margin-top: 30px">
<el-button size="mini" @click="isForbidDialog" type="primary">我知道了</el-button>
</div>
</el-dialog>
<!-- 启用提示弹框 -->
<el-dialog title="启用提示" :visible.sync="openDialog" width="500px">
<hr />
<div class="warn">确定要启用<span style="color: red; font-weight: 700">{{varietyName}}</span>吗?</div>
<div style="text-align: center; margin-top: 30px">
<el-button size="mini" @click="enableType" type="primary">我知道了</el-button>
</div>
</el-dialog>
<!-- 删除提示弹框 -->
<el-dialog title="删除提示" :visible.sync="deleteDialog" width="30%">
<div class="warn">确定要删除<span style="color: red; font-weight: 700">{{varietyName}}</span>吗?</div>
<div style="text-align: center; margin-top: 30px">
<el-button size="mini" @click="deletecatDia" type="primary">我知道了</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pids: '', //父级id
pid: '', //父级id
datas: [], //tree
parentDepart: [], // 父级品类数据
// 父级品类设置
optionProps: {
value: 'id',
label: 'goodsType',
children: 'goodsTypeList',
checkStrictly: true
},
id: '', // 当前选中的父级品类id
content: true, // 值为true/false
varietyId: "", // 输入品类ID
defaultProps: {
children: "goodsTypeList",
label: "goodsType",
},
radio: '', //单选框
radios: [], //
imageUrl: "", //上传图片路径
addCategory: false, //添加弹框
forbidDialog: false, //禁用弹框
openDialog: false, //启用弹框
deleteDialog: false, //删除弹框
switchDialog: false, //切换品类弹框
radioSex: "", //弹框一级品类
form: {
//搜索框
first: "",
second: "",
three: "",
},
varietyName: "", //品类名字
classId: '', // 当前id
selected: '', //父级id
starshow: '',// 启用禁用
isshow: '',
};
},
methods: {
handleChange(value) {
console.log(value)
this.pid = this.pids[this.pids.length-1] // 数组最后一个值就是最后选择的的父级id值
},
// 关键字查询
find() {
if(this.varietyId=='') {
this.getCategory()
}else {
this.$get({
url: this.API.category.getGoodsTypeByCID,
params: {
cidOrName: this.varietyId
}
}).then(res => {
this.datas = res.data
})
}
},
// 点击添加,清除右边的数据
addcat() {
this.classId = '' // 品类id
this.varietyName = '' // 品类名称
this.imageUrl = '' // 图片
this.pids = [] //父级品类
this.pid = '' // 父级部门id
this.id = null
},
// 启用--禁用操作
open(val) {
if (val == 0) {
this.openDialog = true;
this.isshow = val
}
if(val == 1) {
this.forbidDialog = true
this.isshow = val
}
},
// 确定启用
enableType (){
this.starshow = this.isshow
this.openDialog = false
},
// 确认禁用
isForbidDialog() {
this.starshow = this.isshow
this.forbidDialog = false;
},
// 保存
preserve() {
if (this.varietyName==''){
this.$message({
type: 'warning',
message: '请输入品类名称'
})
}else {
this.$post({
url: this.API.category.addOrUpGoodsType,
data: {
goodsType: this.varietyName, // 品类名字
img: this.imageUrl, // 图片
superiorId: this.pid, // 上级id //添加的时候传
isShow: this.starshow, // 是否显示 0为启用, 1为禁用
id: this.classId // 商品id,修改的时候传
},
}).then((res) => {
if (res.code == 200) {
this.addcat() //清空数据
this.getCategory() // 初始化tree
this.$message({
type: 'success',
message: "保存成功"
})
}else{
this.$message({
type: 'warning',
message: res.errMsg
})
}
});
}
},
delgoodsType(){
this.deleteDialog = true
},
// 添加的弹框
confirmKnow () {
this.addCategory = false // 关闭弹窗
},
// 确认删除品类
deletecatDia() {
this.deleteDialog = false;
this.$get({
url: this.API.category.deleteGoodsType,
params: {
goodsTypeId: this.classId
}
}).then(res => {
if(res.code == 200) {
this.$message({
type: 'success',
message: '删除成功'
})
this.getCategory()
}else{
this.$message({
type: 'warning',
message: res.errMsg
})
}
})
},
// tree的点击选中事件
handleNodeClick(data) {
// 树形组件回调
this.id = data.id
this.$get({
url:this.API.category.getGoodsTypeByCID,
params: {
cidOrName: this.id
}
}).then(res => {
const { data } = res
if (res.code == this.API.code.OK) {
console.log(data) // 回显数据
this.classId = data[0].id // 品类id
this.varietyName = data[0].goodsType // 品类名称
this.imageUrl = data[0].img //图片
this.pid = (data[0].superIds[0] ? data[0].superIds[0].id: ''), // 父部门id
this.pids = (data[0].superIds[0] ? data[0].superIds[0].id: []) // 父部门id
}
})
},
handleAvatarSuccess(res) {
//图片文件上传成功时的钩子
// this.imageUrl = URL.createObjectURL(file.raw);
this.imageUrl = res.data // 请求成功后的图片地址给到imageUrl
},
beforeAvatarUpload(file) {
//图片上传之前的钩子,参数为上传的文件对上传的文件大小和文件格式判断
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (isJPG && isPNG) {
this.$message({
type: 'error',
message: '上传头像图片只能是 JPG/PNG 格式!'
})
}
if (!isLt2M) {
this.$message({
type: 'error',
message: '上传头像图片大小不能超过 2MB!'
});
}
return isJPG || isLt2M
},
// tree树
getCategory() {
this.$post({
url: this.API.category.getGoodsTypeAllById,
data: {}
}).then((res) => {
const {data} = res
if (res.code == this.API.code.OK) {
this.datas = data
this.parentDepart = res.data
} else {
this.datas = []
this.parentDepart = []
}
});
},
},
// 生命周期函数
created () {
this.getCategory(); // 进页面展示树状结构
},
};
</script>
<style lang="scss" scoped>
.pets-category-categoryMap {
background: #fff;
height: 100%;
width: 100%;
padding: 10px;
.menus {
height: 100%;
width: 100%;
// background-color: pink;
.menus-left {
width: 40%;
max-height: 420px;
overflow: auto;
}
.menus-right {
width: 60%;
.row {
margin-top: 20px;
.el-form-item__label {
color: black;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
.avatar {
width: 100px;
height: 100px;
display: block;
border: 1px dashed #909399;
display:flex;
align-items:center;
justify-content:center;
}
&.condition {
font-size: 12px;
color: #909399;
}
}
}
.menus-left,
.menus-right {
padding: 20px 10px;
float: left;
}
.warn {
text-align: center;
margin-top: 50px;
color: black;
font-weight: 700;
}
.select {
height: 350px;
border: 1px solid #909399;
border-radius: 6px;
padding: 10px 15px;
position: relative;
}
}
.menus::after {
content: "";
display: block;
clear: both;
}
}
</style>
el-upload设置图片上传格式
最新推荐文章于 2024-07-19 15:25:29 发布