Skip to content

P
pet-business-web
Commit 93bb1122 authored by 陈明豪's avatar 陈明豪
Browse files
Options

轮播管理增删改查

parent 5bd237a7
Hide whitespace changes
Inline Side-by-side
Showing with 493 additions and 30 deletions
src/router/index.js
View file @ 93bb1122
...@@ -255,17 +255,51 @@ export const constantRoutes = [ ...@@ -255,17 +255,51 @@ export const constantRoutes = [
}, },
// 轮播 // 轮播
{ {
path: '/banner/management', path: '/banner-management',
component: Layout, component: Layout,
hidden: true, hidden: true,
permissions: ['*:*:*'], permissions: ['*:*:*'],
children: [ children: [
// 轮播管理
{ {
path: 'index', path: 'index',
props: true, props: true,
component: () => import('@/views/banner_management/banner_management.vue'), component: () => import('@/views/banner_management/banner_management'),
name: 'banner_management', name: 'BannerManagement',
meta: { title: '轮播管理', icon: 'component' } meta: { title: '轮播管理', icon: 'component' }
},
// 轮播添加路由
{
path: 'banner-add',
component: () => import('@/views/banner_management/banner_add.vue'),
name: 'BannerInsert',
props: true,
meta: {
title: '新增轮播',
icon: 'component'
}
},
// 轮播编辑路由
{
path: 'banner-edit',
component: () => import('@/views/banner_management/banner_edit.vue'),
name: 'BannerEdit',
props: true,
meta: {
title: '编辑轮播',
icon: 'component'
}
},
// 轮播详情路由
{
path: 'banner-detail',
component: () => import('@/views/banner_management/banner_detail.vue'),
name: 'BannerDetail',
props: true,
meta: {
title: '轮播详情',
icon: 'component'
}
} }
] ]
}, },
......
src/views/banner_management/banner_add.vue
View file @ 93bb1122
<template> <template>
<div> <div class="banner-container">
新增轮播图 <div class="bannerHeaderTitle">
<span style="color: #666666; font-weight: 600; font-size: 16px;">新增</span>
</div>
<div class="bannerAddMain">
<div style="display: flex;margin: 20px;">
<div style="height: 30px;border-left: 10px solid #5FB54B;" />
<div style="padding-top: 3px;padding-left: 10px;color: #666666; font-weight: 700; font-size: 16px;">轮播信息</div>
</div>
<div>
<el-form ref="form" :model="form" label-width="133px" :rules="rules">
<el-form-item label="标题：" prop="title">
<el-input v-model="form.title" class="form-input" style="width: 420px" maxlength="20" show-word-limit clearable />
</el-form-item>
<el-form-item label="轮播图：" prop="img">
<image-upload v-model="form.img" :limit="1" :is-show-tip="false" />
</el-form-item>
<el-form-item label="跳转地址：" prop="url">
<el-input v-model="form.url" class="form-input" style="width: 420px" maxlength="30" show-word-limit clearable />
</el-form-item>
<el-form-item label="权重：" prop="sort">
<el-input-number
v-model="form.sort"
class="weight-number"
:max="9999"
:min="0"
controls-position="right"
/>
</el-form-item>
<el-form-item label="创建日期：" prop="createTime">
<span style="height: 2.5rem;line-height: 2.5rem">{{ form.createTime }}</span>
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-switch
v-model="form.status"
active-color="#13ce66"
inactive-color="#dcdfe6"
active-value="1"
inactive-value="2"
/>
</el-form-item>
<el-form-item label="备注：" prop="notes">
<el-input v-model="form.notes" class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
</el-form-item>
<el-form-item>
<el-button :loading="submitLoading" class="queryBtn" icon="el-icon-check" @click="submitForm">提交</el-button>
<el-button class="resetBtn" icon="el-icon-back" @click="goBack">返回</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { parseTime } from '@/utils/ruoyi'
import { addBanner } from '@/api/business/banner'
export default { export default {
name: 'BannerAdd', name: 'BannerAdd',
data() { data() {
return {} return {
// 表单数据
form: {
title: '',
img: '',
url: '',
sort: 0,
createTime: '',
status: '1',
notes: ''
},
submitLoading: false,
rules: {
title: [
{ required: true, message: '请输入轮播标题', trigger: 'blur' }
],
img: [
{ required: true, message: '请选择轮播图', trigger: 'blur' }
],
url: [
{ required: true, message: '请输入跳转地址', trigger: 'blur' }
],
sort: [
{ required: true, message: '请输入权重', trigger: 'blur' }
],
status: [
{ required: false, message: '请选择轮播状态', trigger: 'blur' }
],
notes: [
{ required: false, message: '请输入备注', trigger: 'blur' }
]
}
}
}, },
watch: {}, watch: {},
created() { created() {
this.getNowDate()
}, },
methods: {} methods: {
// 获取当前日期
getNowDate() {
const date = new Date()
console.log('当前日期', date)
this.form.createTime = parseTime(date, '{y}/{m}/{d}')
},
submitForm() {
console.log('表单内容', this.form)
this.$refs['form'].validate(valid => {
if (valid) {
console.log('校验通过')
this.submitLoading = true
addBanner(this.form).then(res => {
if (res.code === 200) {
this.submitLoading = false
this.$message({
message: '新增成功！',
type: 'success'
})
this.goBack()
}
})
}
})
},
goBack() {
this.$router.push('/banner-management/index')
}
}
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.banner-container {
background-color: #ffffff;
.tip1{
height: 30px;
border-left: 5px solid #5FB54B;
}
.bannerHeaderTitle{
width: 100%;
height: 50px;
background-color: #f9f9f9;
line-height: 50px;
padding-left: 45px;
}
}
.bannerAddMain {
background-color: #ffffff;
padding-left: 30px;
padding-bottom: 40px;
}
::v-deep .el-input--medium .el-input__inner {
height: 40px !important;
line-height: 40px !important;
}
::v-deep .el-form-item--medium .el-form-item__label {
line-height: 40px !important;
font-size: 14px !important;
}
</style> </style>
src/views/banner_management/banner_detail.vue 0 → 100644
View file @ 93bb1122
<template>
<div class="banner-container">
<div class="bannerHeaderTitle">
<span style="color: #666666; font-weight: 600; font-size: 16px;">详情</span>
</div>
<div class="bannerAddMain">
<div style="display: flex;margin: 20px;">
<div style="height: 30px;border-left: 10px solid #5FB54B;" />
<div style="padding-top: 3px;padding-left: 10px;color: #666666; font-weight: 700; font-size: 16px;">轮播信息</div>
</div>
<div>
<el-form ref="form" :model="form" label-width="133px">
<el-form-item label="标题：" prop="title">
<span class="formSpan">{{ form.title || '暂无数据' }}</span>
</el-form-item>
<el-form-item label="轮播图：" prop="img">
<el-image :src="baseUrl + form.img" class="formImg" :preview-src-list="srcList" />
</el-form-item>
<el-form-item label="跳转地址：" prop="url">
<span class="formSpan">{{ form.url || '暂无数据' }}</span>
</el-form-item>
<el-form-item label="权重：" prop="sort">
<span class="formSpan">{{ form.sort || '暂无数据' }}</span>
</el-form-item>
<el-form-item label="创建日期：" prop="createTime">
<span class="formSpan">{{ form.createTime || '暂无数据' }}</span>
</el-form-item>
<el-form-item label="状态：" prop="status">
<span class="formSpan">{{ form.status === '1' ? '已发布':'未发布' }}</span>
</el-form-item>
<el-form-item label="备注：" prop="notes">
<span class="formSpan">{{ form.notes || '暂无数据' }}</span>
</el-form-item>
<el-form-item>
<el-button class="resetBtn" icon="el-icon-back" @click="goBack">返回</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { getBanner } from '@/api/business/banner'
export default {
name: 'BannerDetail',
data() {
return {
id: undefined,
// 表单数据
form: {
title: '',
img: '',
url: '',
sort: 0,
createTime: '',
status: '1',
notes: ''
},
baseUrl: process.env.VUE_APP_TEST_API,
srcList: []
}
},
watch: {},
created() {
this.id = this.$route.query.id
if (this.id) {
this.getBannerDetail()
}
},
methods: {
// 获取当前轮播信息
getBannerDetail() {
getBanner(this.id).then(res => {
if (res.code === 200) {
this.form = res.data
this.srcList.push(this.baseUrl + this.form.img)
}
})
},
goBack() {
this.$router.push('/banner-management/index')
}
}
}
</script>
<style lang="scss" scoped>
.banner-container {
background-color: #ffffff;
.tip1{
height: 30px;
border-left: 5px solid #5FB54B;
}
.bannerHeaderTitle{
width: 100%;
height: 50px;
background-color: #f9f9f9;
line-height: 50px;
padding-left: 45px;
}
}
.bannerAddMain {
background-color: #ffffff;
padding-left: 30px;
padding-bottom: 40px;
}
::v-deep .el-input--medium .el-input__inner {
height: 40px !important;
line-height: 40px !important;
}
::v-deep .el-form-item--medium .el-form-item__label {
line-height: 40px !important;
font-size: 14px !important;
}
.formSpan {
height: 2.5rem;
line-height: 2.5rem
}
.formImg {
width: 9.25rem;
height: 9.25rem;
background-color: #00afff;
}
</style>
src/views/banner_management/banner_edit.vue 0 → 100644
View file @ 93bb1122
<template>
<div class="banner-container">
<div class="bannerHeaderTitle">
<span style="color: #666666; font-weight: 600; font-size: 16px;">编辑</span>
</div>
<div class="bannerAddMain">
<div style="display: flex;margin: 20px;">
<div style="height: 30px;border-left: 10px solid #5FB54B;" />
<div style="padding-top: 3px;padding-left: 10px;color: #666666; font-weight: 700; font-size: 16px;">轮播信息</div>
</div>
<div>
<el-form ref="form" :model="form" label-width="133px" :rules="rules">
<el-form-item label="标题：" prop="title">
<el-input v-model="form.title" class="form-input" style="width: 420px" maxlength="20" show-word-limit clearable />
</el-form-item>
<el-form-item label="轮播图：" prop="img">
<image-upload v-model="form.img" :limit="1" :is-show-tip="false" />
</el-form-item>
<el-form-item label="跳转地址：" prop="url">
<el-input v-model="form.url" class="form-input" style="width: 420px" maxlength="30" show-word-limit clearable />
</el-form-item>
<el-form-item label="权重：" prop="sort">
<el-input-number
v-model="form.sort"
class="weight-number"
:max="9999"
:min="0"
controls-position="right"
/>
</el-form-item>
<el-form-item label="创建日期：" prop="createTime">
<span style="height: 2.5rem;line-height: 2.5rem">{{ form.createTime }}</span>
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-switch
v-model="form.status"
active-color="#13ce66"
inactive-color="#dcdfe6"
active-value="1"
inactive-value="2"
/>
</el-form-item>
<el-form-item label="备注：" prop="notes">
<el-input v-model="form.notes" class="form-input" style="width: 420px" maxlength="60" show-word-limit clearable />
</el-form-item>
<el-form-item>
<el-button :loading="submitLoading" class="queryBtn" icon="el-icon-check" @click="submitForm">提交</el-button>
<el-button class="resetBtn" icon="el-icon-back" @click="goBack">返回</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { getBanner, updateBanner } from '@/api/business/banner'
export default {
name: 'BannerEdit',
data() {
return {
id: undefined,
// 表单数据
form: {
title: '',
img: '',
url: '',
sort: 0,
createTime: '',
status: '1',
notes: ''
},
submitLoading: false,
rules: {
title: [
{ required: true, message: '请输入轮播标题', trigger: 'blur' }
],
img: [
{ required: true, message: '请选择轮播图', trigger: 'blur' }
],
url: [
{ required: true, message: '请输入跳转地址', trigger: 'blur' }
],
sort: [
{ required: true, message: '请输入权重', trigger: 'blur' }
],
status: [
{ required: false, message: '请选择轮播状态', trigger: 'blur' }
],
notes: [
{ required: false, message: '请输入备注', trigger: 'blur' }
]
}
}
},
watch: {},
created() {
this.id = this.$route.query.id
if (this.id) {
this.getBannerDetail()
}
},
methods: {
// 获取当前轮播信息
getBannerDetail() {
getBanner(this.id).then(res => {
if (res.code === 200) {
console.log('轮播信息', res)
this.form = res.data
}
})
},
submitForm() {
console.log('表单内容', this.form)
this.$refs['form'].validate(valid => {
if (valid) {
console.log('校验通过')
this.submitLoading = true
updateBanner(this.form).then(res => {
if (res.code === 200) {
this.submitLoading = false
this.$message({
message: '修改成功！',
type: 'success'
})
this.goBack()
}
})
}
})
},
goBack() {
this.$router.push('/banner-management/index')
}
}
}
</script>
<style lang="scss" scoped>
.banner-container {
background-color: #ffffff;
.tip1{
height: 30px;
border-left: 5px solid #5FB54B;
}
.bannerHeaderTitle{
width: 100%;
height: 50px;
background-color: #f9f9f9;
line-height: 50px;
padding-left: 45px;
}
}
.bannerAddMain {
background-color: #ffffff;
padding-left: 30px;
padding-bottom: 40px;
}
::v-deep .el-input--medium .el-input__inner {
height: 40px !important;
line-height: 40px !important;
}
::v-deep .el-form-item--medium .el-form-item__label {
line-height: 40px !important;
font-size: 14px !important;
}
</style>
src/views/banner_management/banner_management.vue
View file @ 93bb1122
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<el-option <el-option
v-for="item in dict.type.banner_status" v-for="item in dict.type.banner_status"
:key="item.value" :key="item.value"
:label="item.label.substring(1)" :label="item.label.substring(0)"
:value="item.value" :value="item.value"
/> />
</el-select> </el-select>
...@@ -42,8 +42,8 @@ ...@@ -42,8 +42,8 @@
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
/> />
</el-form-item> </el-form-item>
<el-form-item prop="sortWay"> <el-form-item prop="orderWay">
<el-select v-model.trim="queryParams.sortWay" clearable placeholder="请选择排序方式"> <el-select v-model.trim="queryParams.orderWay" clearable placeholder="请选择排序方式">
<el-option <el-option
v-for="item in dict.type.banner_order" v-for="item in dict.type.banner_order"
:key="item.value" :key="item.value"
...@@ -165,7 +165,7 @@ ...@@ -165,7 +165,7 @@
</template> </template>
<script> <script>
import { listBanner, getBanner, delBanner, addBanner, updateBanner } from '@/api/business/banner' import { listBanner, delBanner, addBanner, updateBanner } from '@/api/business/banner'
export default { export default {
name: 'BannerManagement', name: 'BannerManagement',
...@@ -194,14 +194,11 @@ export default { ...@@ -194,14 +194,11 @@ export default {
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 20,
title: null, title: null,
imgBoolean: null, imgBoolean: null,
sortWay: null, orderWay: '1',
url: null,
sort: null,
status: null, status: null,
notes: null,
createTime: null createTime: null
}, },
// 轮播图状态下拉框 // 轮播图状态下拉框
...@@ -280,19 +277,15 @@ export default { ...@@ -280,19 +277,15 @@ export default {
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.reset() this.$router.push('/banner-management/banner-add')
this.open = true
this.title = '添加轮播图管理'
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset() this.$router.push('/banner-management/banner-edit?id=' + row.id)
const id = row.id || this.ids },
getBanner(id).then(response => { /** 详情按钮操作 */
this.form = response.data handleDetail(row) {
this.open = true this.$router.push('/banner-management/banner-detail?id=' + row.id)
this.title = '修改轮播图管理'
})
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
...@@ -317,7 +310,7 @@ export default { ...@@ -317,7 +310,7 @@ export default {
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const ids = row.id || this.ids const ids = row.id || this.ids
this.$modal.confirm('是否确认删除轮播图管理编号为"' + ids + '"的数据项？').then(function() { this.$modal.confirm('是否确认删除该轮播图信息？').then(function() {
return delBanner(ids) return delBanner(ids)
}).then(() => { }).then(() => {
this.getBannerList() this.getBannerList()
......
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