提交 9c990dd7 编写于 作者: K keyinghao

提交

上级 d306869e
......@@ -150,11 +150,11 @@
type: 'error'
});
} else {
this.load = true
this.loading.show()
if (this.formData.id === undefined) {
// 新增
apis.coursePcAdvSave(this.formData).then(res => {
this.load = false
this.loading.hide()
if (res.code === 200 && res.data > 0) {
// 提交成功, 关闭窗口, 刷新列表
this.handleClose('close-callback')
......@@ -168,7 +168,9 @@
})
} else {
// 编辑
this.loading.show()
apis.coursePcAdvUpdate(this.formData).then(res => {
this.loading.hide()
this.load = false
if (res.code === 200 && res.data > 0) {
// 提交成功, 关闭窗口, 刷新列表
......
......@@ -7,7 +7,7 @@
:before-close="handleClose">
<el-form :model="formData" :rules="rules" ref="formData" label-width="100px">
<el-form-item label="导航标题:">
<el-select v-model="formData.navUrl" @change="changeValue" class="auto-width" clearable filterable placeholder="导航标题" style="width: 200px">
<el-select v-model="formData.navUrl" @change="changeValue" class="auto-width" clearable filterable placeholder="导航标题" style="width: 150px">
<el-option
v-for="item in opts.navList"
:key="item.code"
......@@ -16,15 +16,10 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="打开方式:" width="200">
<el-form-item label="打开方式:" prop="target" width="200">
<template>
<el-radio-group v-model="formData.tradeType">
<el-radio
v-for="item in opts.targetList"
:key="item.code"
:label="item.desc"
:value="item.code"></el-radio>
</el-radio-group>
<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>
......@@ -41,12 +36,12 @@
data() {
return {
opts: {
navList: [],
targetList: []
navList: []
},
ada: {},
navTitle: '',
formData: {},
formData: {
target: '_blank'
},
rules: {
target: [
{ required: true, message: '请选择打开方式', trigger: 'blur' }
......@@ -71,12 +66,10 @@
this.$store.dispatch('GetOpts', { enumName: "NavEnum", type: 'arr' }).then(res => {
this.opts.navList = res
})
this.$store.dispatch('GetOpts', { enumName: "TargetEnum", type: 'arr' }).then(res => {
this.opts.targetList = res
})
},
methods: {
handleClose(done) {
this.formData = {}
this.$emit('close-callback')
},
// 获取选中的导航标题
......@@ -96,8 +89,8 @@
if (valid) {
//新增底部导航栏,给父ID赋值
this.formData.parentId = 0
console.log("value", this.formData);
api.navBarSave().then(res => {
this.loading.show()
api.navBarSave(this.formData).then(res => {
this.loading.hide()
if (res.code === 200 && res.data > 0) {
// 提交成功, 关闭窗口, 刷新列表
......
......@@ -81,40 +81,21 @@
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.formData.id === undefined) {
//新增底部导航栏,给父ID赋值
this.formData.parentId = 0
console.log("value", this.formData);
api.navBarSave().then(res => {
this.loading.hide()
if (res.code === 200 && res.data > 0) {
// 提交成功, 关闭窗口, 刷新列表
this.tips('操作成功', 'success')
this.handleClose()
} else {
this.$message({
type: 'error',
message: "提交失败"
});
}
})
} else {
// 编辑
api.navBarUpdate(this.formData).then(res => {
this.loading.hide()
console.log('handleCommand ------>> ', res)
if (res.code === 200 && res.data > 0) {
// 提交成功, 关闭窗口, 刷新列表
this.tips('操作成功', 'success')
this.handleClose()
} else {
this.$message({
type: 'error',
message: "提交失败"
});
}
})
}
// 编辑
this.loading.show()
api.navBarUpdate(this.formData).then(res => {
this.loading.hide()
if (res.code === 200 && res.data > 0) {
// 提交成功, 关闭窗口, 刷新列表
this.tips('操作成功', 'success')
this.handleClose()
} else {
this.$message({
type: 'error',
message: "提交失败"
});
}
})
} else {
this.$message({
type: 'error',
......
......@@ -60,7 +60,7 @@
<template slot-scope="scope">
<ul class="list-item-actions">
<li>
<el-button type="danger" @click="handleUpdateRow(scope.row.id)" size="mini">删除</el-button>
<el-button type="danger" @click="handleDelRow(scope.row.id)" size="mini">删除</el-button>
<el-button type="success" @click="handleEdit(scope.row)" size="mini">修改</el-button>
</li>
</ul>
......@@ -94,7 +94,6 @@
return {
// 表单数据, 例如新增编辑子项,页面表单
formData: {},
tableData: [],
list: [],
map: {},
ctrl: {
......@@ -144,29 +143,32 @@
this.reload()
},
//删除
handleDelRow(data) {
handleDelRow(id) {
this.$confirm(`确定删除这条数据?`, '我要删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.map = {
id: data.id
id: id
}
this.loading.show()
this.ctrl.loading = true
apis.navBarDelete(this.map).then(res => {
console.log(res)
if (res.code === 200) {
this.ctrl.loading = false
if (res.code === 200 && res.data > 0) {
this.$message({
type: 'success',
message: '删除成功'
});
//刪除成功后刷新列表
this.closeCallback()
this.reload()
} else {
this.$alert(res.msg)
this.$message({
type: 'error',
message: "删除失败"
});
this.reload()
}
this.loading.hide()
})
}).catch(() => {
})
......@@ -217,6 +219,7 @@
// 刷新当前页面
reload() {
this.map = {}
this.formData = {}
this.getList()
},
handleSizeChange(val) {
......
......@@ -10,27 +10,31 @@
<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 label="状态:" >
<el-select v-model="map.statusId" class="auto-width" clearable filterable placeholder="状态" style="width: 85px">
<el-option
v-for="item in opts.statusIdList"
:key="item.code"
:label="item.desc"
:value="item.code">
</el-option>
</el-select>
</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-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
<el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
<el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="handleAddSubclass(scope.row)">添加</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
:data="list"
style="width: 100%"
v-loading="ctrl.loading"
border
row-key="id"
:default-expand-all="false">
<el-table-column type="index" label="序号" width="40">
</el-table-column>
<el-table-column prop="navName" label="导航名称">
......@@ -38,18 +42,20 @@
<el-table-column prop="sort" label="排序">
</el-table-column>
<el-table-column
label="状态"
width="170"
prop="statusId"
align="center"
width="200">
label="状态"
align="center">
<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="禁用">
@change="handleChangeStatus(scope.row.id, scope.row.statusId)"
:active-value="0"
:inactive-value="1"
active-color="#ff4949"
inactive-color="#13ce66"
active-text="禁用"
inactive-text="正常">
</el-switch>
</template>
</el-table-column>
......@@ -60,9 +66,9 @@
<template slot-scope="scope">
<ul class="list-item-actions">
<li>
<el-button type="danger" @click="handleDelRow(scope.row.id)" size="mini">删除</el-button>
<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>
<el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="handleAddSubclass(scope.row)">添加</el-button>
</li>
</ul>
</template>
......@@ -70,53 +76,34 @@
</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>
background
style="float: right;margin-top: 20px; margin-bottom: 22px"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-size="page.pageSize"
: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>
<edit :visible="ctrl.dialogVisible" :formData="formData" :title="ctrl.dialogTitle" @close-callback="closeCallback"></edit>
<nav-title :visible="ctrl.navTitleVisible" :formData="formData" :title="ctrl.dialogTitle" @close-callback="closeCallback"></nav-title>
</div>
</template>
<script>
import * as apis from '@/api/system'
import * as api 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
opts: {
statusIdList: []
},
addMap: { },
// 条件筛选参数
map: {},
// 页面控制数据,例如形式弹窗,显示加载中等
ctrl: {
loading: false,
......@@ -125,16 +112,16 @@
navTitleVisible: false
},
// 表单数据, 例如新增编辑子项,页面表单
formdata: {},
formData: {},
tableData: [],
list: [],
page: {
beginPageIndex: 1,
currentPage: 1,
pageCurrent: 1,
endPageIndex: 8,
numPerPage: 20,
pageSize: 20,
totalCount: 0,
totalPage: 0,
list: []
totalPage: 0
}
}
},
......@@ -142,36 +129,17 @@
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.formData = 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()
//编辑
handleUpdateRow(data) {
this.formdata = data
this.ctrl.dialogTitle = '编辑权限'
this.ctrl.dialogVisible = true
},
// 关闭编辑弹窗回调
closeCallback() {
......@@ -179,33 +147,22 @@
this.ctrl.navTitleVisible = false
this.reload()
},
reload() {
this.getList(this.currentPage)
},
//新增
handleAddRow() {
this.formdata = {}
this.ctrl.dialogTitle = '新增'
this.formData = {}
this.ctrl.dialogTitle = '添加'
this.ctrl.dialogVisible = true
},
// 重置查询条件
handleReset() {
this.map = {}
this.websiteNavList()
},
//删除
handleDelRow(data) {
console.log('handleCommand ------>> ', data)
handleDelRow(id) {
this.$confirm(`确定删除这条数据?`, '我要删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.map = {
id: data.id
}
this.map.id = id
this.loading.show()
apis.websiteNavDelete(this.map).then(res => {
api.websiteNavDelete(this.map).then(res => {
console.log(res)
if (res.code === 200) {
this.$message({
......@@ -222,22 +179,23 @@
}).catch(() => {
})
},
handleChangeStatus(index, row, command) {
console.log('handleCommand ------>> ', index, row, command)
const txt = { 0: '禁用', 1: '启用' }
this.$confirm(`确定${txt[command]}底部导航:${row.navName}?`, txt[command] + '此项', {
handleChangeStatus(id, statusId) {
const title = { 0: '禁用', 1: '启用' }
this.$confirm(`确定要${title[statusId]}吗?`, {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.changeStatus(row.id, command)
this.ctrl.loading = true
this.changeStatus(id, statusId)
}).catch(() => {
this.reload()
})
},
//改变状态
changeStatus(id, statusId) {
apis.websiteNavUpate({ id, statusId }).then(res => {
api.websiteNavUpate({ id, statusId }).then(res => {
this.ctrl.loading = false
const msg = { 0: '禁用成功', 1: '启用成功' }
this.$message({
type: 'success',
......@@ -246,22 +204,41 @@
this.reload()
})
},
//编辑
handleUpdateRow(data) {
this.formdata = data
this.ctrl.dialogTitle = '编辑权限'
this.ctrl.dialogVisible = true
// 查询条件
handleCheck() {
this.page.pageCurrent = 1
this.getList()
},
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
// 重置查询条件
handleReset() {
this.reload()
},
// 刷新当前页面
reload() {
this.map = {}
this.gmtCreate = ''
this.getList()
},
handleSizeChange(val) {
// console.log(`每页 ${val} 条`)
this.page.pageSize = val
this.getList()
},
handleCurrentChange(val) {
this.page.pageCurrent = val
this.getList()
// console.log(`当前页: ${val}`)
},
getList() {
this.ctrl.load = true
api.websiteNavList(this.map, this.page.pageCurrent, this.page.pageSize).then(res => {
this.list = res.data.list
this.page.pageCurrent = res.data.pageCurrent
this.page.totalCount = res.data.totalCount
this.page.pageSize = res.data.pageSize
this.ctrl.load = false
}).catch(() => {
this.ctrl.loading = false
this.ctrl.load = false
})
}
}
......
......@@ -4,14 +4,14 @@
:title="title"
:visible.sync="visible"
:before-close="handleClose">
<el-form :model="addMap" :rules="rules" ref="addMap">
<el-form :model="formData" :rules="rules" ref="formData">
<el-form-item label="名称" prop="navName">
<el-input v-model="addMap.navName"></el-input>
<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('addMap')">确 定</el-button>
<el-button type="primary" @click="submitForm('formData')">确 定</el-button>
</div>
</el-dialog>
</template>
......
<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>
......@@ -82,7 +82,7 @@ public class PcApiWebsiteNavBiz {
websiteNavV2.setIsArticle(0);
}
}
resq.setWebsiteNavList(websiteNavList);
resq.setChildren(websiteNavList);
}
return resq;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册