提交 6041b607 编写于 作者: A Administrator

首页

上级 f1d9636a
import request from '@/utils/request'
// 课程分类推荐分页列表接口
export function coursePcAdvList(params, page = 1, pageSize = 20) {
export function categoryList(params, page = 1, pageSize = 20) {
return request({
url: '/course/pc/course/category/list',
method: 'post',
data: { pageNum: page, numPerPage: pageSize, ...params }
})
}
// 课程分类保存接口
export function categorySave(data = {}) {
return request({
url: '/course/pc/course/category/save',
method: 'post',
data: data
})
}
// 课程分类更新接口
export function categoryUpdate(data = {}) {
return request({
url: '/course/pc/course/category/update',
method: 'post',
data: data
})
}
// 课程分类删除接口
export function categoryDelete(data = {}) {
return request({
url: '/course/pc/course/category/delete',
method: 'post',
data: data
})
}
......@@ -29,27 +29,32 @@ export const asyncRouterMap = [
component: () => import('@/views/index'),
children: [
{
path: 'course',
component: () => import('@/views/index/course'),
path: 'recommend',
component: () => import('@/views/index/recommend'),
children: [
{
path: 'adv',
component: () => import('@/views/index/course/adv')
},
path: 'courseCategory',
component: () => import('@/views/index/recommend/courseCategory')
}
]
},
{
path: 'zone',
component: () => import('@/views/index/zone'),
children: [
{
path: 'zone',
component: () => import('@/views/index/course/zone')
},
path: 'zoneSet',
component: () => import('@/views/index/zone/zoneSet')
}
]
},
{
path: 'shuf',
component: () => import('@/views/index/shuf'),
children: [
{
path: 'courseCategory',
component: () => import('@/views/index/course/courseCategory'),
children: [
{
path: 'recommendCourse',
name: 'recommendCourse',
component: () => import('@/views/index/course/courseCategory/recommendCourse')
}
]
path: 'adv',
component: () => import('@/views/index/shuf/adv')
}
]
},
......
......@@ -44,13 +44,13 @@
{
"id": 2,
"name": "首页轮播",
"path": "/course",
"path": "/shuf",
"icon": null,
"children": [
{
"id": 2,
"name": "PC端设置",
"path": "/index/course/adv",
"path": "/index/shuf/adv",
"icon": null,
}
]
......@@ -58,13 +58,13 @@
{
"id": 2,
"name": "专区管理",
"path": "/course",
"path": "/zone",
"icon": null,
"children": [
{
"id": 2,
"name": "PC端设置",
"path": "/index/course/zone",
"path": "/index/zone/zoneSet",
"icon": null,
}
]
......@@ -98,13 +98,13 @@
{
"id": 2,
"name": "分类推荐",
"path": "/course",
"path": "/recommend",
"icon": null,
"children": [
{
"id": 2,
"name": "PC端设置",
"path": "/index/course/courseCategory",
"path": "/index/recommend/courseCategory",
"icon": null,
}
]
......
<template>
<div class="pad20">
<div>
<el-form :inline="true" size="mini">
<el-form-item label="分类名称">
<el-input v-model="map.mobile"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="ctrl.loading" @click="handleCheck">查询</el-button>
<el-button class="filter-item" @click="handleReset">重置
</el-button>
</el-form-item>
</el-form>
</div>
<div>
<el-table v-loading="ctrl.loading" size="medium" :data="page.list" stripe border style="width: 100%">
<el-table-column type="index" label="序号" width="40">
</el-table-column>
<el-table-column prop="userNo" label="用户编号">
</el-table-column>
<el-table-column prop="mobile" label="用户手机">
</el-table-column>
<el-table-column prop="userType" label="用户类型">
</el-table-column>
<el-table-column prop="nickname" label="昵称">
</el-table-column>
<el-table-column prop="statusId" label="状态">
</el-table-column>
<el-table-column prop="gmtCreate" label="注册时间">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="170">
<template slot-scope="scope">
<ul class="list-item-actions">
<li>
<el-button type="primary" @click="handleAddWay(scope.row)" size="mini">修改</el-button>
<el-button type="warning" @click="handleDelRow(scope.row)" size="mini">删除</el-button>
</li>
</ul>
</template>
</el-table-column>
</el-table>
<div class="mgt20">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-size="page.numPerPage"
:page-sizes="[20, 50, 100, 200, 500, 1000]"
layout="total, sizes, prev, pager, next, jumper"
:total="page.totalCount">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import * as userApi from '@/api/user'
export default {
data() {
return {
params: {
PerPage: 20
},
ctrl: {
loading: false
},
page: {
beginPageIndex: 1,
currentPage: 1,
endPageIndex: 8,
numPerPage: 20,
totalCount: 0,
totalPage: 0,
list: []
},
timeData: {
shortcuts: [{
text: '今天',
onClick: picker => {
const now = this.getNow('now')
picker.$emit('pick', now)
}
}, {
text: '昨天',
onClick: picker => {
const now = this.getNow('before')
picker.$emit('pick', now)
}
}]
},
gmtCreate: ''
}
},
mounted() {
this.userExtList(1)
},
methods: {
handleSizeChange(val) {
// console.log(`每页 ${val} 条`)
this.params.pageSize = val
this.userExtList()
},
handleCurrentChange(val) {
this.params.pageCurrent = val
this.userExtList()
// console.log(`当前页: ${val}`)
},
// 注册时间段查询条件
changeTime() {
if (this.gmtCreate.length) {
this.params.beginGmtCreate = this.dateToString(this.gmtCreate[0])
this.params.endGmtCreate = this.dateToString(this.gmtCreate[1])
} else {
this.params.beginGmtCreate = ''
this.params.endTime = ''
}
},
dateToString(date) {
const year = date.getFullYear()
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = date.getDate().toString().padStart(2, '0')
const hours = date.getHours().toString().padStart(2, '0')
const minutes = date.getMinutes().toString().padStart(2, '0')
const seconds = date.getSeconds().toString().padStart(2, '0')
const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
return timeString
},
handleCheck() {
this.params.pageNum = 1
this.userExtList()
},
// 重置查询条件
handleReset() {
this.params = {}
this.userExtList()
},
userExtList() {
this.ctrl.loading = true
console.log(this.params)
userApi.userExtList(this.params).then(res => {
this.page = res.data
this.page.numPerPage = res.data.pageSize
console.log(this.page)
this.ctrl.loading = false
}).catch(() => {
this.ctrl.loading = false
})
}
}
}
</script>
<template>
<div class="pad20">
<div>
<el-form :inline="true" size="mini">
<el-form-item label="分类名称">
<el-input v-model="map.mobile"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="ctrl.loading" @click="handleCheck">查询</el-button>
<el-button class="filter-item" @click="handleReset">重置
</el-button>
</el-form-item>
</el-form>
</div>
<div>
<el-table v-loading="ctrl.loading" size="medium" :data="page.list" stripe border style="width: 100%">
<el-table-column type="index" label="序号" width="40">
</el-table-column>
<el-table-column prop="userNo" label="用户编号">
</el-table-column>
<el-table-column prop="mobile" label="用户手机">
</el-table-column>
<el-table-column prop="userType" label="用户类型">
</el-table-column>
<el-table-column prop="nickname" label="昵称">
</el-table-column>
<el-table-column prop="statusId" label="状态">
</el-table-column>
<el-table-column prop="gmtCreate" label="注册时间">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="170">
<template slot-scope="scope">
<ul class="list-item-actions">
<li>
<el-button type="primary" @click="handleAddWay(scope.row)" size="mini">修改</el-button>
<el-button type="warning" @click="handleDelRow(scope.row)" size="mini">删除</el-button>
</li>
</ul>
</template>
</el-table-column>
</el-table>
<div class="mgt20">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-size="page.numPerPage"
:page-sizes="[20, 50, 100, 200, 500, 1000]"
layout="total, sizes, prev, pager, next, jumper"
:total="page.totalCount">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import * as userApi from '@/api/user'
export default {
data() {
return {
params: {
PerPage: 20
},
ctrl: {
loading: false
},
page: {
beginPageIndex: 1,
currentPage: 1,
endPageIndex: 8,
numPerPage: 20,
totalCount: 0,
totalPage: 0,
list: []
},
timeData: {
shortcuts: [{
text: '今天',
onClick: picker => {
const now = this.getNow('now')
picker.$emit('pick', now)
}
}, {
text: '昨天',
onClick: picker => {
const now = this.getNow('before')
picker.$emit('pick', now)
}
}]
},
gmtCreate: ''
}
},
mounted() {
this.userExtList(1)
},
methods: {
handleSizeChange(val) {
// console.log(`每页 ${val} 条`)
this.params.pageSize = val
this.userExtList()
},
handleCurrentChange(val) {
this.params.pageCurrent = val
this.userExtList()
// console.log(`当前页: ${val}`)
},
// 注册时间段查询条件
changeTime() {
if (this.gmtCreate.length) {
this.params.beginGmtCreate = this.dateToString(this.gmtCreate[0])
this.params.endGmtCreate = this.dateToString(this.gmtCreate[1])
} else {
this.params.beginGmtCreate = ''
this.params.endTime = ''
}
},
dateToString(date) {
const year = date.getFullYear()
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = date.getDate().toString().padStart(2, '0')
const hours = date.getHours().toString().padStart(2, '0')
const minutes = date.getMinutes().toString().padStart(2, '0')
const seconds = date.getSeconds().toString().padStart(2, '0')
const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
return timeString
},
handleCheck() {
this.params.pageNum = 1
this.userExtList()
},
// 重置查询条件
handleReset() {
this.params = {}
this.userExtList()
},
userExtList() {
this.ctrl.loading = true
console.log(this.params)
userApi.userExtList(this.params).then(res => {
this.page = res.data
this.page.numPerPage = res.data.pageSize
console.log(this.page)
this.ctrl.loading = false
}).catch(() => {
this.ctrl.loading = false
})
}
}
}
</script>
<template>
<div class="pad20">
<div>
<el-form :inline="true" size="mini">
<el-form-item>
<el-button class="filter-item" type="success" @click="handleAddRow">
新增
</el-button>
</el-form-item>
<el-form-item label="分类名称">
<el-input v-model="map.navName"></el-input>
</el-form-item>
<el-form-item label="状态">
<template>
<el-select v-model="map.statusId" placeholder="全部">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="ctrl.loading" @click="handleCheck">查询</el-button>
<el-button class="filter-item" @click="handleReset">重置
</el-button>
</el-form-item>
</el-form>
</div>
<div>
<el-table v-loading="ctrl.loading" size="medium" :data="page.list" stripe border style="width: 100%">
<el-table-column type="index" label="序号" width="40">
</el-table-column>
<el-table-column prop="categoryName" label="分类名称">
</el-table-column>
<el-table-column prop="sort" label="排序">
</el-table-column>
<el-table-column
label="状态"
prop="statusId"
align="center"
width="200">
<template slot-scope="scope">
<el-switch
@change="handleChangeStatus(scope.$index, scope.row, $event)"
v-model="scope.row.statusId"
:active-value="1"
:inactive-value="0"
active-text="启用"
inactive-text="禁用">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注">
<el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="formData.remark"></el-input>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="340">
<template slot-scope="scope">
<ul class="list-item-actions">
<li>
<el-button type="primary" @click="handleUpdateRow(scope.row)" size="mini">修改</el-button>
<el-button type="warning" @click="handleDelRow(scope.row)" size="mini">删除</el-button>
<el-button type="warning" @click="handleAddSubclass(scope.row)" size="mini">添加</el-button>
</li>
</ul>
</template>
</el-table-column>
</el-table>
<div class="mgt20">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-size="page.numPerPage"
:page-sizes="[20, 50, 100, 200, 500, 1000]"
layout="total, sizes, prev, pager, next, jumper"
:total="page.totalCount">
</el-pagination>
</div>
</div>
<edit :visible="ctrl.dialogVisible" :formData="formdata" :title="ctrl.dialogTitle" @close-callback="closeCallback"></edit>
<nav-title :visible="ctrl.navTitleVisible" :formData="addMap" :title="ctrl.dialogTitle" @close-callback="closeCallback"></nav-title>
</div>
</template>
<script>
import * as apis from '@/api/courseCategory'
import Edit from './edit'
export default {
components: { Edit },
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
}
return statusMap[status]
}
},
data() {
return {
//状态
options: [{
value: '1',
label: '启用'
}, {
value: '0',
label: '禁用'
}],
// 条件筛选参数
map: {
id: undefined,
navName: undefined,
statusId: undefined,
parentId: undefined
},
addMap: { },
// 页面控制数据,例如形式弹窗,显示加载中等
ctrl: {
loading: false,
remoteAuthorLoading: false,
dialogVisible: false,
navTitleVisible: false
},
// 表单数据, 例如新增编辑子项,页面表单
formdata: {},
tableData: [],
page: {
beginPageIndex: 1,
currentPage: 1,
endPageIndex: 8,
numPerPage: 20,
totalCount: 0,
totalPage: 0,
list: []
}
}
},
mounted() {
this.getList()
},
methods: {
getList() {
this.ctrl.load = true
apis.categoryList(this.map, this.page.pageCurrent, this.page.pageSize).then(res => {
this.ctrl.load = false
this.page.list = res.data.list
this.page.pageSize = res.data.pageSize
this.page.totalCount = res.data.totalCount
}).catch(() => {
this.ctrl.load = false
})
},
handleSizeChange(val) {
// console.log(`每页 ${val} 条`)
this.params.pageSize = val
this.websiteNavList()
},
//跳转到底部导航文章添加页面
handleAddSubclass(data) {
this.addMap = data
this.ctrl.dialogTitle = '添加导航标题'
this.ctrl.navTitleVisible = true
},
handleCurrentChange(val) {
this.params.pageCurrent = val
this.websiteNavList()
// console.log(`当前页: ${val}`)
},
handleCheck() {
this.map.pageNum = 1
this.getList()
},
// 关闭编辑弹窗回调
closeCallback() {
this.ctrl.dialogVisible = false
this.ctrl.navTitleVisible = false
this.reload()
},
reload() {
this.getList(this.currentPage)
},
//新增
handleAddRow() {
this.formdata = {}
this.ctrl.dialogTitle = '新增'
this.ctrl.dialogVisible = true
},
// 重置查询条件
handleReset() {
this.map = {}
this.websiteNavList()
},
//删除
handleDelRow(data) {
console.log('handleCommand ------>> ', data)
this.$confirm(`确定删除这条数据?`, '我要删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.map = {
id: data.id
}
this.loading.show()
apis.categoryDelete(this.map).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
type: 'success',
message: '删除成功'
});
//刪除成功后刷新列表
this.closeCallback()
} else {
this.$alert(res.msg)
}
this.loading.hide()
})
}).catch(() => {
})
},
handleChangeStatus(index, row, command) {
console.log('handleCommand ------>> ', index, row, command)
const txt = { 0: '禁用', 1: '启用' }
this.$confirm(`确定${txt[command]}底部导航:${row.navName}?`, txt[command] + '此项', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.changeStatus(row.id, command)
}).catch(() => {
this.reload()
})
},
//改变状态
changeStatus(id, statusId) {
apis.websiteNavUpate({ id, statusId }).then(res => {
const msg = { 0: '禁用成功', 1: '启用成功' }
this.$message({
type: 'success',
message: msg[statusId]
});
this.reload()
})
},
//编辑
handleUpdateRow(data) {
this.formdata = data
this.ctrl.dialogTitle = '编辑权限'
this.ctrl.dialogVisible = true
},
websiteNavList() {
this.ctrl.loading = true
console.log(this.map)
apis.websiteNavList(this.map).then(res => {
this.page = res.data
this.page.numPerPage = res.data.pageSize
console.log(this.page)
this.ctrl.loading = false
}).catch(() => {
this.ctrl.loading = false
})
}
}
}
</script>
......@@ -26,7 +26,7 @@
<el-input v-model="formData.advTitle" ></el-input>
</el-form-item>
<el-form-item label="广告排序" prop="sort">
<el-input v-model="formData.sort" ></el-input>
<el-input v-model="formData.sort" ></el-input>
</el-form-item>
<el-form-item label="广告状态">
<el-radio-group v-model="formData.statusId">
......
<template >
<router-view />
</template>
......@@ -6,12 +6,17 @@
:before-close="handleClose">
<el-form :model="formData" :rules="rules" ref="formData">
<el-form-item label="导航标题" prop="permission">
<el-input v-model="formData.permission" :disabled="!!formData.id"></el-input>
<el-tag type="danger" v-if="!formData.id">提示:权限标识添加后将不可修改,请确保准确性!</el-tag>
<el-form-item label="导航标题" prop="navTitle">
<el-input v-model="formData.navTitle"></el-input>
</el-form-item>
<el-form-item label="权限描述" prop="remark">
<el-input v-model="formData.remark" type="textarea"></el-input>
<el-form-item label="打开方式" prop="linkTarget" width="200">
<template>
<el-radio v-model="formData.target" label="_blank">新窗口打开</el-radio>
<el-radio v-model="formData.target" label="_self">同窗口打开</el-radio>
</template>
</el-form-item>
<el-form-item label="排序" prop="sort" >
<el-input v-model="formData.sort" ></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -75,10 +80,10 @@
if (this.formData.id === undefined) {
//新增底部导航栏,给父ID赋值
this.formData.parentId = 0
res = await apis.websiteNavSave(this.formData)
res = await apis.navBarSave(this.formData)
} else {
// 编辑
res = await apis.websiteNavUpate(this.formData)
res = await apis.navBarUpdate(this.formData)
}
this.loading.hide()
if (res.code === 200) {
......
......@@ -83,7 +83,7 @@
</el-pagination>
</div>
</div>
<edit :visible="ctrl.dialogVisible" :formData="formdata" :title="ctrl.dialogTitle" @close-cllback="closeCallback"></edit>
<edit :visible="ctrl.dialogVisible" :formData="formdata" :title="ctrl.dialogTitle" @close-callback="closeCallback"></edit>
</div>
</template>
<script>
......@@ -128,7 +128,7 @@
methods: {
handleSizeChange(val) {
// console.log(`每页 ${val} 条`)
this.params.pageSize = val
this.map.pageSize = val
this.getList()
},
// 关闭编辑弹窗回调
......@@ -140,7 +140,7 @@
this.getList(this.currentPage)
},
handleCurrentChange(val) {
this.params.pageCurrent = val
this.map.pageCurrent = val
this.getList()
// console.log(`当前页: ${val}`)
},
......@@ -186,8 +186,8 @@
},
getList() {
this.ctrl.loading = true
console.log(this.params)
apis.navBarList(this.params).then(res => {
console.log(this.map)
apis.navBarList(this.map).then(res => {
this.page = res.data
this.page.numPerPage = res.data.pageSize
this.list = res.data.list
......
......@@ -7,8 +7,8 @@
<el-form :model="formData" :rules="rules" ref="formData">
<el-form-item label="链接地址" prop="linkUrl">
<el-input v-model="formData.linkUrl"></el-input>
</el-form-item>
<el-input v-model="formData.linkUrl"></el-input>
</el-form-item>
<el-form-item label="链接名称" prop="linkName">
<el-input v-model="formData.linkName" ></el-input>
</el-form-item>
......@@ -18,7 +18,6 @@
<el-radio v-model="formData.linkTarget" label="_self">同窗口打开</el-radio>
</template>
</el-form-item>
<el-form-item label="排序" prop="sort" >
<el-input v-model="formData.sort" ></el-input>
</el-form-item>
......
......@@ -9,9 +9,6 @@
<el-form-item label="名称" prop="navName">
<el-input v-model="formData.navName"></el-input>
</el-form-item>
<el-form-item label="排序" prop="sort" >
<el-input v-model="formData.sort" ></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
......@@ -32,9 +29,6 @@ export default {
rules: {
navName: [
{ required: true, message: '请输入导航名称', trigger: 'blur', autocomplete: 'on' }
],
sort: [
{ required: true, message: '请输入导航排序', trigger: 'blur' }
]
}
}
......
<template>
<!--弹窗-->
<el-dialog
:title="title"
:visible.sync="visible"
:before-close="handleClose">
<el-form :model="formData" :rules="rules" ref="formData">
<el-form-item label="链接地址" prop="linkUrl">
<el-input v-model="formData.linkUrl"></el-input>
</el-form-item>
<el-form-item label="链接名称" prop="linkName">
<el-input v-model="formData.linkName" ></el-input>
</el-form-item>
<el-form-item label="打开方式" prop="linkTarget" width="200">
<template>
<el-radio v-model="formData.linkTarget" label="_blank">新窗口打开</el-radio>
<el-radio v-model="formData.linkTarget" label="_self">同窗口打开</el-radio>
</template>
</el-form-item>
<el-form-item label="排序" prop="sort" >
<el-input v-model="formData.sort" ></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submitForm('formData')">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import * as apis from '@/api/system'
export default {
name: 'Edit',
data() {
return {
ctrl: {
dialogVisible: true
},
form: { },
rules: {
linkUrl: [
{ required: true, message: '请输入链接地址', trigger: 'blur', autocomplete: 'on' }
],
linkName: [
{ required: true, message: '请输入链接名称', trigger: 'blur' }
],
sort: [
{ required: true, message: '请输入链接排序', trigger: 'blur' }
]
}
}
},
props: {
// route object
formData: {
type: Object,
default: () => {}
},
visible: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
}
},
methods: {
handleClose(done) {
this.$emit('close-callback')
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.handleConfirm()
} else {
console.log('error submit!!');
return false;
}
});
},
async handleConfirm() {
this.loading.show()
let res = {}
if (this.formData.id === undefined) {
res = await apis.websiteLinkSave(this.formData)
} else {
// 编辑
res = await apis.websiteLinkUpdate(this.formData)
}
this.loading.hide()
if (res.code === 200) {
// 提交成功, 关闭窗口, 刷新列表
this.$emit('close-callback')
} else {
this.$alert(res.msg || '提交失败')
}
}
}
}
</script>
<style scoped>
</style>
<template>
<div class="pad20">
<div>
<el-form :inline="true" size="mini">
<el-form-item>
<el-button class="filter-item" type="success" @click="handleAddRow">
新增
</el-button>
</el-form-item>
<el-form-item label="链接名称">
<el-input v-model="map.linkName"></el-input>
</el-form-item>
<el-form-item label="状态">
<template>
<el-select v-model="map.statusId" placeholder="全部">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="ctrl.loading" @click="handleCheck">查询</el-button>
<el-button class="filter-item" @click="handleReset">重置
</el-button>
</el-form-item>
</el-form>
</div>
<div>
<el-table v-loading="ctrl.loading" size="medium" :data="list" stripe border style="width: 100%">
<el-table-column type="index" label="序号" width="40">
</el-table-column>
<el-table-column prop="linkName,linkUrl" label="链接名称/链接地址">
<template slot-scope="scope">{{scope.row.linkName}}{{scope.row.linkUrl}}</template>
</el-table-column>
<el-table-column prop="sort" label="排序">
</el-table-column>
<el-table-column
label="状态"
prop="statusId"
align="center"
width="200">
<template slot-scope="scope">
<el-switch
@change="handleChangeStatus(scope.$index, scope.row, $event)"
v-model="scope.row.statusId"
:active-value="1"
:inactive-value="0"
active-text="启用"
inactive-text="禁用">
</el-switch>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="340">
<template slot-scope="scope">
<ul class="list-item-actions">
<li>
<el-button type="primary" @click="handleUpdateRow(scope.row)" size="mini">修改</el-button>
<el-button type="danger" @click="handleDelRow(scope.row)" size="mini">删除</el-button>
</li>
</ul>
</template>
</el-table-column>
</el-table>
<div class="mgt20">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-size="page.numPerPage"
:page-sizes="[20, 50, 100, 200, 500, 1000]"
layout="total, sizes, prev, pager, next, jumper"
:total="page.totalCount">
</el-pagination>
</div>
</div>
<edit :visible="ctrl.dialogVisible" :formData="formdata" :title="ctrl.dialogTitle" @close-callback="closeCallback"></edit>
</div>
</template>
<script>
import * as systemApi from '@/api/system'
import Edit from './edit'
export default {
components: { Edit },
data() {
return {
//状态
options: [{
value: '1',
label: '启用'
}, {
value: '0',
label: '禁用'
}],
// 条件筛选参数
map: {
id: undefined,
linkName: undefined,
statusId: undefined
},
// 页面控制数据,例如形式弹窗,显示加载中等
ctrl: {
loading: false,
remoteAuthorLoading: false,
dialogVisible: false
},
// 表单数据, 例如新增编辑子项,页面表单
formdata: {},
tableData: [],
page: {
beginPageIndex: 1,
currentPage: 1,
endPageIndex: 8,
numPerPage: 20,
totalCount: 0,
totalPage: 0,
list: []
}
}
},
mounted() {
this.getList()
},
methods: {
getList() {
this.ctrl.load = true
systemApi.websiteLinkList(this.map, this.page.pageCurrent, this.page.pageSize).then(res => {
this.ctrl.load = false
this.list = res.data.list
this.page.pageSize = res.data.pageSize
this.page.totalCount = res.data.totalCount
}).catch(() => {
this.ctrl.load = false
})
},
// 关闭编辑弹窗回调
closeCallback() {
this.ctrl.dialogVisible = false;
this.reload()
},
reload() {
this.getList(this.currentPage)
},
handleSizeChange(val) {
// console.log(`每页 ${val} 条`)
this.map.pageSize = val
this.getList()
},
handleCurrentChange(val) {
this.map.pageCurrent = val
this.getList()
// console.log(`当前页: ${val}`)
},
handleCheck() {
this.map.pageNum = 1
this.getList()
},
// 重置查询条件
handleReset() {
this.map = { }
this.getList()
},
//新增
handleAddRow() {
this.formdata = {}
this.ctrl.dialogTitle = '新增'
this.ctrl.dialogVisible = true
},
//编辑
handleUpdateRow(data) {
this.formdata = data
this.ctrl.dialogTitle = '编辑权限'
this.ctrl.dialogVisible = true
},
handleChangeStatus(index, row, command) {
console.log('handleCommand ------>> ', index, row, command)
const txt = { 1: '启用', 0: '禁用' }
this.$confirm(`确定${txt[command]}友情链接:${row.linkName}?`, txt[command] + '此项', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.changeStatus(row.id, command)
}).catch(() => {
this.reload()
})
},
//改变状态
changeStatus(id, statusId) {
systemApi.websiteLinkUpdate({ id, statusId }).then(res => {
const msg = { 0: '禁用成功', 1: '启用成功' }
this.$message({
type: 'success',
message: msg[statusId]
});
this.reload()
})
},
//删除
handleDelRow(data) {
console.log('handleCommand ------>> ', data)
this.$confirm(`确定删除这条数据?`, '我要删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.map = {
id: data.id
}
this.loading.show()
systemApi.websiteLinkDelete(this.map).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
type: 'success',
message: '删除成功'
});
//刪除成功后刷新列表
this.closeCallback()
} else {
this.$alert(res.msg)
}
this.loading.hide()
})
}).catch(() => {
})
}
}
}
</script>
<template>
<!--弹窗-->
<el-dialog
:title="title"
:visible.sync="visible"
:before-close="handleClose">
<el-form :model="formData" :rules="rules" ref="formData">
<el-form-item label="名称" prop="navName">
<el-input v-model="formData.navName"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submitForm('formData')">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import * as apis from '@/api/system'
export default {
name: 'Edit',
data() {
return {
ctrl: {
dialogVisible: true
},
form: { },
rules: {
navName: [
{ required: true, message: '请输入导航名称', trigger: 'blur', autocomplete: 'on' }
]
}
}
},
props: {
// route object
formData: {
type: Object,
default: () => {}
},
visible: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
}
},
methods: {
handleClose(done) {
this.$emit('close-callback')
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.handleConfirm()
} else {
console.log('error submit!!');
return false;
}
});
},
async handleConfirm() {
this.loading.show()
let res = {}
if (this.formData.id === undefined) {
//新增底部导航栏,给父ID赋值
this.formData.parentId = 0
res = await apis.websiteNavSave(this.formData)
} else {
// 编辑
res = await apis.websiteNavUpate(this.formData)
}
this.loading.hide()
if (res.code === 200) {
// 提交成功, 关闭窗口, 刷新列表
this.$emit('close-callback')
} else {
this.$alert(res.msg || '提交失败')
}
}
}
}
</script>
<template>
<div class="pad20">
<div>
<el-form :inline="true" size="mini">
<el-form-item>
<el-button class="filter-item" type="success" @click="handleAddRow">
新增
</el-button>
</el-form-item>
<el-form-item label="分类名称">
<el-input v-model="map.navName"></el-input>
</el-form-item>
<el-form-item label="状态">
<template>
<el-select v-model="map.statusId" placeholder="全部">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="ctrl.loading" @click="handleCheck">查询</el-button>
<el-button class="filter-item" @click="handleReset">重置
</el-button>
</el-form-item>
</el-form>
</div>
<div>
<el-table v-loading="ctrl.loading" size="medium" :data="page.list" stripe border style="width: 100%">
<el-table-column type="index" label="序号" width="40">
</el-table-column>
<el-table-column prop="navName" label="导航名称">
</el-table-column>
<el-table-column prop="sort" label="排序">
</el-table-column>
<el-table-column
label="状态"
prop="statusId"
align="center"
width="200">
<template slot-scope="scope">
<el-switch
@change="handleChangeStatus(scope.$index, scope.row, $event)"
v-model="scope.row.statusId"
:active-value="1"
:inactive-value="0"
active-text="启用"
inactive-text="禁用">
</el-switch>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="340">
<template slot-scope="scope">
<ul class="list-item-actions">
<li>
<el-button type="primary" @click="handleUpdateRow(scope.row)" size="mini">修改</el-button>
<el-button type="warning" @click="handleDelRow(scope.row)" size="mini">删除</el-button>
<el-button type="warning" @click="handleAddSubclass(scope.row)" size="mini">添加</el-button>
</li>
</ul>
</template>
</el-table-column>
</el-table>
<div class="mgt20">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-size="page.numPerPage"
:page-sizes="[20, 50, 100, 200, 500, 1000]"
layout="total, sizes, prev, pager, next, jumper"
:total="page.totalCount">
</el-pagination>
</div>
</div>
<edit :visible="ctrl.dialogVisible" :formData="formdata" :title="ctrl.dialogTitle" @close-callback="closeCallback"></edit>
<nav-title :visible="ctrl.navTitleVisible" :formData="addMap" :title="ctrl.dialogTitle" @close-callback="closeCallback"></nav-title>
</div>
</template>
<script>
import * as apis from '@/api/system'
import Edit from './edit'
import NavTitle from './navTitle'
export default {
components: { Edit, NavTitle },
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
}
return statusMap[status]
}
},
data() {
return {
//状态
options: [{
value: '1',
label: '启用'
}, {
value: '0',
label: '禁用'
}],
// 条件筛选参数
map: {
id: undefined,
navName: undefined,
statusId: undefined,
parentId: undefined
},
addMap: { },
// 页面控制数据,例如形式弹窗,显示加载中等
ctrl: {
loading: false,
remoteAuthorLoading: false,
dialogVisible: false,
navTitleVisible: false
},
// 表单数据, 例如新增编辑子项,页面表单
formdata: {},
tableData: [],
page: {
beginPageIndex: 1,
currentPage: 1,
endPageIndex: 8,
numPerPage: 20,
totalCount: 0,
totalPage: 0,
list: []
}
}
},
mounted() {
this.getList()
},
methods: {
getList() {
this.ctrl.load = true
apis.websiteNavList(this.map, this.page.pageCurrent, this.page.pageSize).then(res => {
this.ctrl.load = false
this.page.list = res.data.list
this.page.pageSize = res.data.pageSize
this.page.totalCount = res.data.totalCount
}).catch(() => {
this.ctrl.load = false
})
},
handleSizeChange(val) {
// console.log(`每页 ${val} 条`)
this.params.pageSize = val
this.websiteNavList()
},
//跳转到底部导航文章添加页面
handleAddSubclass(data) {
this.addMap = data
this.ctrl.dialogTitle = '添加导航标题'
this.ctrl.navTitleVisible = true
},
handleCurrentChange(val) {
this.params.pageCurrent = val
this.websiteNavList()
// console.log(`当前页: ${val}`)
},
handleCheck() {
this.map.pageNum = 1
this.getList()
},
// 关闭编辑弹窗回调
closeCallback() {
this.ctrl.dialogVisible = false
this.ctrl.navTitleVisible = false
this.reload()
},
reload() {
this.getList(this.currentPage)
},
//新增
handleAddRow() {
this.formdata = {}
this.ctrl.dialogTitle = '新增'
this.ctrl.dialogVisible = true
},
// 重置查询条件
handleReset() {
this.map = {}
this.websiteNavList()
},
//删除
handleDelRow(data) {
console.log('handleCommand ------>> ', data)
this.$confirm(`确定删除这条数据?`, '我要删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.map = {
id: data.id
}
this.loading.show()
apis.websiteNavDelete(this.map).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
type: 'success',
message: '删除成功'
});
//刪除成功后刷新列表
this.closeCallback()
} else {
this.$alert(res.msg)
}
this.loading.hide()
})
}).catch(() => {
})
},
handleChangeStatus(index, row, command) {
console.log('handleCommand ------>> ', index, row, command)
const txt = { 0: '禁用', 1: '启用' }
this.$confirm(`确定${txt[command]}底部导航:${row.navName}?`, txt[command] + '此项', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.changeStatus(row.id, command)
}).catch(() => {
this.reload()
})
},
//改变状态
changeStatus(id, statusId) {
apis.websiteNavUpate({ id, statusId }).then(res => {
const msg = { 0: '禁用成功', 1: '启用成功' }
this.$message({
type: 'success',
message: msg[statusId]
});
this.reload()
})
},
//编辑
handleUpdateRow(data) {
this.formdata = data
this.ctrl.dialogTitle = '编辑权限'
this.ctrl.dialogVisible = true
},
websiteNavList() {
this.ctrl.loading = true
console.log(this.map)
apis.websiteNavList(this.map).then(res => {
this.page = res.data
this.page.numPerPage = res.data.pageSize
console.log(this.page)
this.ctrl.loading = false
}).catch(() => {
this.ctrl.loading = false
})
}
}
}
</script>
<template>
<!--弹窗-->
<el-dialog
:title="title"
:visible.sync="visible"
:before-close="handleClose">
<el-form :model="addMap" :rules="rules" ref="addMap">
<el-form-item label="名称" prop="navName">
<el-input v-model="addMap.navName"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submitForm('addMap')">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import * as apis from '@/api/system'
export default {
name: 'NavTitle',
data() {
return {
ctrl: {
dialogVisible: true
},
form: { },
rules: {
navName: [
{ required: true, message: '请输入导航名称', trigger: 'blur', autocomplete: 'on' }
]
}
}
},
props: {
// route object
formData: {
type: Object,
default: () => {}
},
visible: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
}
},
methods: {
handleClose(done) {
this.$emit('close-callback')
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.handleConfirm()
} else {
console.log('error submit!!');
return false;
}
});
},
async handleConfirm() {
this.loading.show()
let res = {}
if (this.addMap.id === undefined) {
//新增底部导航栏,给父ID赋值
this.formData.parentId = 0
res = await apis.websiteNavSave(this.formData)
} else {
this.parentId
// 编辑
res = await apis.websiteNavUpate(this.formData)
}
this.loading.hide()
if (res.code === 200) {
// 提交成功, 关闭窗口, 刷新列表
this.$emit('close-callback')
} else {
this.$alert(res.msg || '提交失败')
}
}
}
}
</script>
<template >
<router-view />
</template>
......@@ -37,7 +37,7 @@
{ required: true, message: '请输入专区名称', trigger: 'blur', autocomplete: 'on' }
],
sort: [
{ required: false, message: '请输入专区排序', trigger: 'blur', autocomplete: 'on' }
{ required: true, message: '请输入专区排序', trigger: 'blur', autocomplete: 'on' }
],
zoneDesc: [
{ required: false, message: '请输入专区描述', trigger: 'blur' }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册