<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>category管理</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 引入样式 -->
<link rel="stylesheet" >
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
<!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
<style>
.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: 150px;
height: 70px;
line-height: 150px;
text-align: center;
}
.avatar {
width: 150px;
height: 70px;
display: block;
}
</style>
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>管理<small>category管理</small></h1>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>管理</el-breadcrumb-item>
<el-breadcrumb-item>category管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="app-container">
<div class="box">
<div class="filter-container">
<el-button type="primary" class="butT" @click="formVisible=true;pojo={parentId: searchMap.parentId }">新增</el-button>
<el-button type="primary" class="butT" @click="returnQuery()">返回上级</el-button>
</div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="id" label="分类ID" width="80"></el-table-column>
<el-table-column prop="name" label="分类名称" width="200"></el-table-column>
<el-table-column prop="goodsNum" label="商品数量" width="80"></el-table-column>
<el-table-column label="级别" width="80">
<template slot-scope="scope">
{{parentIds.length+1}}
</template>
</el-table-column>
<el-table-column label="是否显示" width="80">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isShow"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0">
</el-switch>
</template>
</el-table-column>
<el-table-column label="是否导航" width="80">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isMenu"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="seq" label="排序" width="80"></el-table-column>
<el-table-column label="模板" width="200">
<template slot-scope="scope">
<el-select v-model="scope.row.templateId" disabled placeholder="请选择">
<el-option
v-for="item in templateList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
label="设置" >
<template slot-scope="scope">
<el-button v-if="parentIds.length<2" @click="queryByParentId(scope.row.id)" size="mini" type="primary" size="small">查看下级</el-button>
</template>
</el-table-column>
<el-table-column
label="操作" >
<template slot-scope="scope">
<el-button @click="edit(scope.row.id)" size="mini" type="primary" size="small">修改</el-button>
<el-button @click="dele(scope.row.id)" size="mini" type="danger" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="add-form">
<!--弹出窗口-->
<el-dialog title="编辑" :visible.sync="formVisible" >
<el-form label-width="80px">
<el-form-item label="分类名称"><el-input v-model="pojo.name"></el-input></el-form-item>
<el-form-item label="是否显示">
<el-switch
v-model="pojo.isShow"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="是否导航">
<el-switch
v-model="pojo.isMenu"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="排序"><el-input v-model="pojo.seq"></el-input></el-form-item>
<el-form-item label="模板ID">
<el-select v-model="pojo.templateId" filterable placeholder="请选择">
<el-option
v-for="item in templateList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<!-- 图片上传代码 如页面有图片上传功能放开注释 ****
<el-form-item label="图片">
<el-upload
class="avatar-uploader"
action="/upload/native.do"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
-->
<el-form-item>
<el-button type="primary" @click="save()">保存</el-button>
<el-button @click="formVisible = false" >关闭</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</div>
</div>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script>
new Vue({
el: '#app',
data(){
return {
tableData: [],
searchMap: {parentId:0},
pojo: {},
formVisible: false,
imageUrl: '',
parentIds:[],
templateList:[]
}
},
created(){
this.fetchData();
//加载模板列表
axios.get(`/template/findAll.do`).then( response=>{
this.templateList=response.data
})
},
methods:{
fetchData (){
axios.post(`/category/findList.do`,this.searchMap).then(response => {
this.tableData = response.data
});
},
save (){
// this.pojo.image= this.imageUrl; //如页面有图片上传功能放开注释
axios.post(`/category/${this.pojo.id==null?'add':'update'}.do`,this.pojo).then(response => {
this.fetchData (); //刷新列表
this.formVisible = false ;//关闭窗口
});
},
edit (id){
this.formVisible = true // 打开窗口
// 调用查询
axios.get(`/category/findById.do?id=${id}`).then(response => {
this.pojo = response.data;
// this.imageUrl=this.pojo.image //显示图片 如页面有图片上传功能放开注释
})
},
dele (id){
this.$confirm('确定要删除此记录吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then( () => {
axios.get(`/category/delete.do?id=${id}`).then(response => {
if(response.data.code==0){
this.fetchData (); //刷新列表
}else{
this.$alert(response.data.message)
}
})
})
},
queryByParentId(parentId){
//做记号
this.parentIds.push(this.searchMap.parentId)
this.searchMap.parentId =parentId
this.fetchData()
},
returnQuery(){
if(this.parentIds.length>0){
this.searchMap.parentId =this.parentIds[ this.parentIds.length-1 ]
this.parentIds.splice( this.parentIds.length-1,1 ) //删除数组最后一个元素
this.fetchData()
}
}
/* ****图片上传相关代码 如页面有图片上传功能放开注释 ****
handleAvatarSuccess(res, file) {
this.imageUrl = file.response;
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}*/
}
})
</script>
</html>
|
|
收藏
淘帖
踩
