Skip to content

A
admin-base
Commit c7bc8f34 authored by 王's avatar 王
Browse files
Options

推广banner

parent d64a924f
Show whitespace changes
Inline Side-by-side
Showing with 687 additions and 18 deletions
src/components/system/banner.vue
View file @ c7bc8f34
<template> <template>
<div class="banner" v-loading="loading">
<div class="head">
<el-button @click="add" plain type="success">新增banner</el-button>
</div>
<el-table
:data="bannerList"
style="width: 100%">
<el-table-column
prop="id"
label="ID">
</el-table-column>
<el-table-column
prop="title"
label="标题">
</el-table-column>
<el-table-column
prop="url"
label="图片">
<template slot-scope="scope">
<a :href="scope.row.url" target="_blank">
<img class="short-banner" :src="scope.row.url"/>
</a>
</template>
</el-table-column>
<el-table-column
prop="link"
label="链接">
</el-table-column>
<el-table-column
label="操作"
width="100">
<template slot-scope="scope">
<el-popover
placement="top"
width="280">
<div style="text-align: center">
<el-button size="mini" plain type="primary" @click="edit(scope.row)">
编辑
</el-button>
<el-button size="mini" type="danger" plain @click="del(scope.row)">
删除
</el-button>
<el-button v-if="scope.$index > 0" size="mini" type="primary" plain @click="moveUp(scope.$index)">
上移
</el-button>
<el-button v-if="scope.$index !== bannerList.length - 1" size="mini" type="primary" plain @click="moveDown(scope.$index)">
下移
</el-button>
</div>
<el-button slot="reference" size="mini" type="text" >操作</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
<el-dialog
:title="dialog.title"
center
append-to-body
:visible.sync="dialog.show"
width="30%">
<el-form ref="form" :rules="dialog.rules" :model="dialog.form" label-width="100px">
<el-form-item label="banner名称" prop="title">
<el-input v-model="dialog.form.title"></el-input>
</el-form-item>
<el-form-item label="banner链接" prop="link">
<el-input v-model="dialog.form.link"></el-input>
</el-form-item>
<div class="upload-block">
<el-upload
action="/api/public/upload"
:class="{disabled:!uploadShow}"
:before-upload="beforeAvatarUpload"
list-type="picture-card"
:file-list="imageList"
:on-success="handleAvatarSuccess"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialog.show = false">取 消</el-button>
<el-button type="primary" @click="sub">确 定</el-button>
</span>
</el-dialog>
</div>
</template> </template>
<script> <script>
import {getBannerListApi,addBannerApi,editBannerApi,getBannerDetailApi,delBannerApi,moveApi} from "../../service/api";
export default { export default {
name: "banner" name: "banner",
data(){
return {
loading: false,
bannerList: [],
total: 0,
uploadShow: true,
limit: 1,
dialog:{
title:'新增Banner',
show:false,
rules: {
title: [
{required: true, message: '请填写Banner名称', trigger: 'change'},
],
link: [
{required: true, message: '请填写Banner链接', trigger: 'change'},
]
},
form:{
title:'',
url:'',
link:'',
id: ''
}
},
imageList: []
}
},
created(){
this.getList()
},
methods: {
getList(){
this.loading = true;
getBannerListApi().then(res=>{
if (res) {
this.bannerList = res.list;
this.total = res.total;
this.loading = false;
}
})
},
edit(data){
this.dialog.form.id = data.id;
this.dialog.title = '编辑Banner';
getBannerDetailApi(data.id).then((res)=>{
this.dialog.form.title = res.title
this.dialog.form.link = res.link
this.imageList = [{name:res.url,url:res.url}]
this.dialog.show = true;
this.uploadShow = false;
})
},
add(){
this.dialog.show = true;
this.dialog.form.id = '';
this.dialog.title = '新增Banner';
this.dialog.form.title = ''
this.dialog.form.link = '';
this.imageList = [];
this.uploadShow = true;
},
del(data){
this.$confirm('此操作将删除该Banner?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delBannerApi(data.id).then(res=>{
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList()
});
});
},
handleAvatarSuccess(res) {
this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
this.dialog.form.url = process.env.IMAGE_URL_HEAD + res.data.url
},
beforeAvatarUpload(){
this.uploadShow = false
},
handleRemove(){
this.uploadShow = true
},
sub(){
this.$refs['form'].validate((valid) => {
if(valid){
let dia = this.dialog;
if(dia.form.id){
let json = {
title:dia.form.title,
link:dia.form.link
};
if (this.imageList.length > 0) {
json.url = this.imageList[0].url
}
editBannerApi(dia.form.id,json).then(()=>{
this.$message({
type: 'success',
message: '修改成功!'
});
dia.show = false;
this.getList()
})
}else{
let json = {
title:dia.form.title,
link:dia.form.link
};
if (this.imageList.length > 0) {
json.url = this.imageList[0].url
}
addBannerApi(json).then(()=>{
this.$message({
type: 'success',
message: '添加成功!'
});
dia.show = false;
this.getList()
})
}
}
})
},
moveUp(index){
let list = this.bannerList;
this.sort(list[index].id,list[index-1].id);
},
moveDown(index){
let list = this.bannerList;
this.sort(list[index + 1].id,list[index].id);
},
sort(upId, downId){
this.loading = true;
moveApi(upId,downId).then(()=>{
this.loading = false;
this.getList();
})
}
}
} }
</script> </script>
<style @scoped lang="less">
<style scoped> .banner{
.head{
padding: 5px;
}
width: 100%;
padding: 10px;
.page-div{
text-align: center;
padding-top: 20px
}
}
.short-banner {
width: 50px;
}
</style>
<style>
.disabled .el-upload--picture-card {
display: none !important;
}
</style> </style>
src/components/system/menu.vue
View file @ c7bc8f34
<template> <template>
<div class="menu">
<div class="head">
<el-button @click="add" plain type="success">新增菜单</el-button>
</div>
<el-table
:data="menuList"
style="width: 100%">
<el-table-column
prop="id"
label="菜单ID">
</el-table-column>
<el-table-column
prop="cover"
label="菜单Code">
</el-table-column>
<el-table-column
prop="name"
label="菜单名称">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button size="mini" plain type="primary" @click="edit(scope.row)">
编辑
</el-button>
<el-button size="mini" type="danger" plain @click="del(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
:title="dialog.title"
center
append-to-body
:visible.sync="dialog.show"
width="30%">
<el-form ref="form" :rules="dialog.rules" :model="dialog.form" label-width="100px">
<el-form-item label="菜单名称" prop="name">
<el-input v-model="dialog.form.name"></el-input>
</el-form-item>
<el-form-item label="菜单Code" prop="cover">
<el-input v-model="dialog.form.cover"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialog.show = false">取 消</el-button>
<el-button type="primary" @click="sub">确 定</el-button>
</span>
</el-dialog>
</div>
</template> </template>
<script> <script>
import {getMenuListApi,saveMenuApi,delMenuApi,updateMenuApi} from "../../service/api";
export default { export default {
name: "menu" name: "menu",
data(){
return {
nowPage:1,
total:0,
menuList:[],
dialog:{
title:'新增菜单',
show:false,
rules: {
name: [
{required: true, message: '请填写菜单名称', trigger: 'change'},
],
cover: [
{required: true, message: '请填写菜单code', trigger: 'change'},
]
},
form:{
id:'',
name:'',
cover:'',
pid:0,
type:2
}
},
}
},
created(){
this.getList()
},
methods:{
getList(){
getMenuListApi().then(res=>{
if (res) {
this.menuList = res
}
})
},
edit(data){
this.dialog.show = true;
this.dialog.form.id = data.id;
this.dialog.title = '编辑菜单';
this.dialog.form.name = data.name;
this.dialog.form.cover = data.cover;
this.dialog.form.pid = 0;
},
add(){
this.dialog.show = true;
this.dialog.form.id = '';
this.dialog.title = '新增菜单';
this.dialog.form.name = '';
this.dialog.form.pid = 0;
this.dialog.form.cover = '';
},
del(data){
this.$confirm('此操作将删除该菜单?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delMenuApi(data.id).then(res=>{
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList()
});
});
},
sub(){
this.$refs['form'].validate((valid) => {
if(valid){
let dia = this.dialog;
if(dia.form.id){
let json = {
name:dia.form.name,
cover:dia.form.cover,
pid:dia.form.pid
};
updateMenuApi(dia.form.id,json).then(()=>{
this.$message({
type: 'success',
message: '修改成功!'
});
dia.show = false;
this.getList()
})
}else{
let json = {
name:dia.form.name,
cover:dia.form.cover,
pid:dia.form.pid
};
saveMenuApi(json).then(()=>{
this.$message({
type: 'success',
message: '添加成功!'
});
dia.show = false;
this.getList()
})
}
}
})
}
}
} }
</script> </script>
<style scoped> <style scoped lang="less">
.menu{
.head{
padding: 5px;
}
width: 100%;
padding: 10px;
.page-div{
text-align: center;
padding-top: 20px
}
}
</style> </style>
src/components/system/role.vue
View file @ c7bc8f34
<template> <template>
<div> <div class="role">
<div class="head">
<el-button @click="add" plain type="success">新增角色</el-button>
</div>
<el-table
:data="roleList"
style="width: 100%">
<el-table-column
prop="id"
label="角色ID">
</el-table-column>
<el-table-column
prop="name"
label="角色名称">
</el-table-column>
<el-table-column
prop="menu_ids"
label="菜单IDs">
</el-table-column>
<el-table-column
prop="created_at"
label="创建时间">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button size="mini" plain type="primary" @click="edit(scope.row)">
编辑
</el-button>
<el-button size="mini" type="danger" plain @click="del(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<page :nowPage="nowPage" :total="total"/>
<el-dialog
:title="dialog.title"
center
append-to-body
:visible.sync="dialog.show"
width="30%">
<el-form ref="form" :rules="dialog.rules" :model="dialog.form" label-width="100px">
<el-form-item label="菜单名称" prop="name">
<el-input v-model="dialog.form.name"></el-input>
</el-form-item>
<el-form-item label="菜单选项" prop="menu_ids">
<el-select v-model="dialog.form.menu_ids" multiple placeholder="请选择">
<el-option
v-for="item in dialog.select"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialog.show = false">取 消</el-button>
<el-button type="primary" @click="sub">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import {getMenuListApi,getRoleListApi,getRoleDetailApi,delRoleApi,updateRoleApi,saveRoleApi} from "../../service/api";
import page from '../framework/page'
export default { export default {
name: "role", name: "menu",
components:{
page
},
data(){ data(){
return { return {
nowPage:1,
total:0,
roleList:[],
dialog:{
title:'新增角色',
show:false,
select:[],
rules: {
name: [
{required: true, message: '请填写角色名称', trigger: 'change'},
],
menu_ids: [
{required: true, message: '请选择菜单', trigger: 'change'},
]
},
form:{
name:'',
menu_ids:[],
id: ''
}
},
}
},
created(){
this.getList()
},
methods:{
getMenuList(){
getMenuListApi().then(res=>{
if (res) {
this.dialog.select = res
}
})
},
getList(){
getRoleListApi().then(res=>{
if (res) {
this.roleList = res.list;
this.total = res.total;
}
})
},
edit(data){
this.dialog.form.id = data.id;
this.dialog.title = '编辑角色';
this.getMenuList();
getRoleDetailApi(data.id).then((res)=>{
this.dialog.form.name = res.name
let _ids = res.menu_ids.split(',').map((item)=>{
return parseInt(item);
})
this.dialog.form.menu_ids = _ids
this.dialog.show = true;
})
},
add(){
this.dialog.show = true;
this.dialog.form.id = '';
this.dialog.title = '新增菜单';
this.dialog.form.name = ''
this.dialog.form.menu_ids = [];
this.getMenuList();
},
del(data){
this.$confirm('此操作将删除该角色?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delRoleApi(data.id).then(res=>{
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList()
});
});
},
sub(){
this.$refs['form'].validate((valid) => {
if(valid){
let dia = this.dialog;
if(dia.form.id){
let json = {
name:dia.form.name,
menu_ids:dia.form.menu_ids.join(',')
};
updateRoleApi(dia.form.id,json).then(()=>{
this.$message({
type: 'success',
message: '修改成功!'
});
dia.show = false;
this.getList()
})
}else{
let json = {
name:dia.form.name,
menu_ids:dia.form.menu_ids.join(',')
};
saveRoleApi(json).then(()=>{
this.$message({
type: 'success',
message: '添加成功!'
});
dia.show = false;
this.getList()
})
}
}
})
} }
} }
} }
</script> </script>
<style scoped> <style scoped lang="less">
.role{
.head{
padding: 5px;
}
width: 100%;
padding: 10px;
.page-div{
text-align: center;
padding-top: 20px
}
}
</style> </style>
src/service/api.js
View file @ c7bc8f34
...@@ -253,3 +253,75 @@ export const getMediaListApi = function (json) { ...@@ -253,3 +253,75 @@ export const getMediaListApi = function (json) {
}; };
// 获取商品列表 // 获取商品列表
// const getGoodsListUrl = `${_baseUrl}api/admin/goods/list`; // const getGoodsListUrl = `${_baseUrl}api/admin/goods/list`;
// 获取菜单列表
const getMenuListUrl = `${_baseUrl}api/admin/category/list/2`;
export const getMenuListApi = function () {
return Vue.prototype.$fetch(`${getMenuListUrl}`)
};
// 新增菜单
const addMenuListUrl = `${_baseUrl}api/admin/category/add/2`;
export const saveMenuApi = function (json) {
return Vue.prototype.$post(addMenuListUrl, json)
};
// 更改菜单
const updateMenuUrl = `${_baseUrl}api/admin/category/`;
export const updateMenuApi = function (id,json) {
return Vue.prototype.$put(`${updateMenuUrl}${id}`, json)
};
// 删除菜单
export const delMenuApi = function (id) {
return Vue.prototype.$del(`${updateMenuUrl}${id}`)
};
// 获取权限列表
const getRoleListUrl = `${_baseUrl}api/admin/role/list`;
export const getRoleListApi = function (json) {
return Vue.prototype.$fetch(`${getRoleListUrl}`, json)
};
// 新增角色
const addRoleUrl = `${_baseUrl}api/admin/role/add`;
export const saveRoleApi = function (json) {
return Vue.prototype.$post(addRoleUrl, json)
};
// 更新权限
const updateRoleUrl = `${_baseUrl}api/admin/role/info/`;
export const updateRoleApi = function (id,json) {
return Vue.prototype.$put(`${updateRoleUrl}${id}`, json)
};
// 获取权限详情
export const getRoleDetailApi = function (id) {
return Vue.prototype.$fetch(`${updateRoleUrl}${id}`)
};
// 删除权限
const delRoleUrl = `${_baseUrl}api/admin/role/`;
export const delRoleApi = function (id) {
return Vue.prototype.$del(`${delRoleUrl}${id}`)
};
// 获取banner列表
const getBannerListUrl = `${_baseUrl}api/admin/banner/list`;
export const getBannerListApi = function () {
return Vue.prototype.$fetch(`${getBannerListUrl}`)
};
// 添加banner
const addBannerUrl = `${_baseUrl}api/admin/banner/add`;
export const addBannerApi = function (json) {
return Vue.prototype.$post(addBannerUrl, json)
};
// 编辑banner
const editBannerUrl = `${_baseUrl}api/admin/banner/info/`;
export const editBannerApi = function (id,json) {
return Vue.prototype.$put(`${editBannerUrl}${id}`, json)
};
// 获取banner详情
export const getBannerDetailApi = function (id) {
return Vue.prototype.$fetch(`${editBannerUrl}${id}`)
};
// 删除banner
const delBannerUrl = `${_baseUrl}api/admin/banner/`;
export const delBannerApi = function (id) {
return Vue.prototype.$del(`${delBannerUrl}${id}`)
};
// 移动顺序
const moveUrl = `${_baseUrl}api/admin/banner/sort`;
export const moveApi = function (upId, downId) {
return Vue.prototype.$patch(`${moveUrl}`, {banner_up_id: upId, banner_down_id: downId})
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment