最后更新
This commit is contained in:
parent
ae1351356a
commit
af39a61116
|
|
@ -0,0 +1,54 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
const api_name = '/admin/wechat/menu'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
removeMenu() {
|
||||||
|
return request({
|
||||||
|
url: `${api_name}/removeMenu`,
|
||||||
|
method: `delete`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
syncMenu() {
|
||||||
|
return request({
|
||||||
|
url: `${api_name}/syncMenu`,
|
||||||
|
method: `get`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
findMenuInfo() {
|
||||||
|
return request({
|
||||||
|
url: `${api_name}/findMenuInfo`,
|
||||||
|
method: `get`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
save(menu) {
|
||||||
|
return request({
|
||||||
|
url: `${api_name}/save`,
|
||||||
|
method: `post`,
|
||||||
|
data: menu
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getById(id) {
|
||||||
|
return request({
|
||||||
|
url: `${api_name}/get/${id}`,
|
||||||
|
method: `get`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
updateById(menu) {
|
||||||
|
return request({
|
||||||
|
url: `${api_name}/update`,
|
||||||
|
method: `put`,
|
||||||
|
data: menu
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
removeById(id) {
|
||||||
|
return request({
|
||||||
|
url: `${api_name}/remove/${id}`,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,205 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
|
||||||
|
<!-- 工具条 -->
|
||||||
|
<div class="tools-div">
|
||||||
|
<el-button class="btn-add" size="mini" @click="add">添 加</el-button>
|
||||||
|
<el-button class="btn-add" size="mini" @click="syncMenu">同步菜单</el-button>
|
||||||
|
<el-button class="btn-add" size="mini" @click="removeMenu">删除菜单</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
:data="list"
|
||||||
|
style="width: 100%;margin-bottom: 20px;"
|
||||||
|
row-key="id"
|
||||||
|
border
|
||||||
|
default-expand-all
|
||||||
|
:tree-props="{children: 'children'}"
|
||||||
|
>
|
||||||
|
|
||||||
|
<el-table-column label="名称" prop="name" width="350" />
|
||||||
|
<el-table-column label="类型" width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ scope.row.type == 'view' ? '链接' : scope.row.type == 'click' ? '事件' : '' }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="菜单URL" prop="url" />
|
||||||
|
<el-table-column label="菜单KEY" prop="meunKey" width="130" />
|
||||||
|
<el-table-column label="排序号" prop="sort" width="70" />
|
||||||
|
<el-table-column label="操作" width="170" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button v-if="scope.row.parentId > 0" type="text" size="mini" @click="edit(scope.row.id)">修改</el-button>
|
||||||
|
<el-button v-if="scope.row.parentId > 0" type="text" size="mini" @click="removeDataById(scope.row.id)">删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
|
||||||
|
<el-form ref="flashPromotionForm" label-width="150px" size="small" style="padding-right: 40px;">
|
||||||
|
|
||||||
|
<el-form-item label="选择一级菜单">
|
||||||
|
<el-select
|
||||||
|
v-model="menu.parentId"
|
||||||
|
placeholder="请选择"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in list"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="菜单名称">
|
||||||
|
<el-input v-model="menu.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="菜单类型">
|
||||||
|
<el-radio-group v-model="menu.type">
|
||||||
|
<el-radio label="view">链接</el-radio>
|
||||||
|
<el-radio label="click">事件</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="menu.type == 'view'" label="链接">
|
||||||
|
<el-input v-model="menu.url" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="menu.type == 'click'" label="菜单KEY">
|
||||||
|
<el-input v-model="menu.meunKey" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排序">
|
||||||
|
<el-input v-model="menu.sort" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button size="small" @click="dialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" size="small" @click="saveOrUpdate()">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import menuApi from '@/api/wechat/menu'
|
||||||
|
|
||||||
|
const defaultForm = {
|
||||||
|
id: null,
|
||||||
|
parentId: 1,
|
||||||
|
name: '',
|
||||||
|
nameId: null,
|
||||||
|
sort: 1,
|
||||||
|
type: 'view',
|
||||||
|
meunKey: '',
|
||||||
|
url: ''
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
|
||||||
|
// 定义数据
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [],
|
||||||
|
dialogVisible: false,
|
||||||
|
menu: defaultForm,
|
||||||
|
saveBtnDisabled: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 当页面加载时获取数据
|
||||||
|
created() {
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
removeMenu() {
|
||||||
|
menuApi.removeMenu().then(response => {
|
||||||
|
this.$message.success('菜单已删除')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
syncMenu() {
|
||||||
|
this.$confirm('你确定上传菜单吗, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
return menuApi.syncMenu()
|
||||||
|
}).then((response) => {
|
||||||
|
this.$message.success(response.message)
|
||||||
|
}).catch(error => {
|
||||||
|
console.log('error', error)
|
||||||
|
if (error === 'cancel') {
|
||||||
|
this.$message.info('取消上传')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 调用api层获取数据库中的数据
|
||||||
|
fetchData() {
|
||||||
|
console.log('加载列表')
|
||||||
|
menuApi.findMenuInfo().then(response => {
|
||||||
|
this.list = response.data
|
||||||
|
console.log(this.list)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据id删除数据
|
||||||
|
removeDataById(id) {
|
||||||
|
// debugger
|
||||||
|
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => { // promise
|
||||||
|
// 点击确定，远程调用ajax
|
||||||
|
return menuApi.removeById(id)
|
||||||
|
}).then((response) => {
|
||||||
|
this.fetchData(this.page)
|
||||||
|
this.$message.success(response.message || '删除成功')
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message.info('取消删除')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// -------------
|
||||||
|
add() {
|
||||||
|
this.dialogVisible = true
|
||||||
|
this.menu = Object.assign({}, defaultForm)
|
||||||
|
},
|
||||||
|
|
||||||
|
edit(id) {
|
||||||
|
this.dialogVisible = true
|
||||||
|
this.fetchDataById(id)
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchDataById(id) {
|
||||||
|
menuApi.getById(id).then(response => {
|
||||||
|
this.menu = response.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
saveOrUpdate() {
|
||||||
|
this.saveBtnDisabled = true // 防止表单重复提交
|
||||||
|
|
||||||
|
if (!this.menu.id) {
|
||||||
|
this.saveData()
|
||||||
|
} else {
|
||||||
|
this.updateData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
saveData() {
|
||||||
|
menuApi.save(this.menu).then(response => {
|
||||||
|
this.$message.success(response.message || '操作成功')
|
||||||
|
this.dialogVisible = false
|
||||||
|
this.fetchData(this.page)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据id更新记录
|
||||||
|
updateData() {
|
||||||
|
menuApi.updateById(this.menu).then(response => {
|
||||||
|
this.$message.success(response.message || '操作成功')
|
||||||
|
this.dialogVisible = false
|
||||||
|
this.fetchData(this.page)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue