other_project/demo
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

demo-web-ui

Browse Source
This commit is contained in:
liupopo
2023-04-24 09:29:28 +08:00
parent c190807b10
commit 8730220d6a
342 changed files with 33994 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

577
demo-web-ui/src/views/menuManage/menuManage.vue Normal file
View File

@@ -0,0 +1,577 @@
<template>
<el-tabs v-model="activeName" class="my-tabs" type="card" @tab-click="handleClick">
<el-tab-pane label="菜单列表" name="roleList">
<div class="content">
<!--<div class="tab-header">-->
<!-- <el-form :inline="true" :model="form" class="demo-form-inline">
<el-row :gutter="20">
<el-col :span="18">
<el-form-item label="菜单名称">
<el-input v-model="page.params.name" placeholder="菜单名称" clearable/>
</el-form-item>
<el-form-item label="资源名称">
&lt;!&ndash;<el-select v-model="page.sourceSid" @change="$forceUpdate()" :disabled="isadd">
<el-option
v-for="(item, i) in sourceNameData"
:key="i"
:label="item.sourceName"
:value="item.sid">
</el-option>
</el-select>&ndash;&gt;
<el-input v-model="page.params.sourceName" placeholder="资源名称" clearable/>
</el-form-item>
<el-button type="primary" @click="getPageList">查询</el-button>
</el-col>-->
<!-- <el-col :span="6">
<el-form-item style="float: right;">
<el-button type="primary" @click="getSorting">保存排序</el-button>
</el-form-item>
</el-col>-->
<!--</el-row>
</el-form>-->
<!-- </div>-->
<!-- table -->
<div class="table-describe clearfix">
<h4 style="color:#000;">菜单列表</h4>
</div>
<el-table
ref="multipleTable"
:data="tableData"
border
style="width: 100%;"
row-key="sid"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="name" label="菜单名称" width="220"/>
<el-table-column label="操作" width="260" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="add(scope.row)">
添加子菜单
</el-button>
<el-button v-if="scope.row.isSource == '0'" type="primary" size="mini" @click="editRow(scope.row)">
修改
</el-button>
<el-button
v-if="scope.row.isSource == '0'"
type="danger"
size="mini"
@click.native.prevent="deleteRow(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
<!--<el-table-column prop="sourceName" label="资源名称" align="center"></el-table-column>-->
<!-- <el-table-column prop="sortNo" sortable label="排序" align="center" width="100">
<template slot-scope="scope">
<el-input v-model="scope.row.sortNo" size="mini"/>
</template>
</el-table-column>-->
<el-table-column prop="pageUrl" label="链接地址" align="center"/>
<el-table-column prop="isEnable" label="可见性" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isEnable"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0"
@change="enabledChange(scope.row.isEnable,scope.row)"
/>
</template>
</el-table-column>
</el-table>
</div>
<!-- <pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/> -->
<!-- 编辑功能信息 -->
<el-dialog :title="dialogTitle + '功能信息'" :visible.sync="editDialog" width="40%">
<table class="e-table" cellspacing="0">
<tr>
<td>上级菜单</td>
<td>
<el-input v-model="form.pname" :disabled="true" style="width:300px"/>
</td>
</tr>
<tr>
<td>资源名称</td>
<td>
<el-select v-model="form.sourceSid" :disabled="isadd" @change="$forceUpdate()">
<el-option
v-for="(item, i) in sourceNameData"
:key="i"
:label="item.sourceName"
:value="item.sid"
/>
</el-select>
</td>
</tr>
<tr>
<td>菜单名称</td>
<td>
<el-input v-model="form.name"/>
</td>
</tr>
<tr>
<td>菜单路由</td>
<td>
<el-input v-model="form.menuUrl"/>
</td>
</tr>
<tr>
<td>菜单图片路径</td>
<td>
<el-input v-model="form.iconUrl"/>
</td>
</tr>
<tr>
<td>前端页面名称</td>
<td>
<el-input v-model="form.pageName"/>
</td>
</tr>
<tr>
<td>前端页面路径</td>
<td>
<el-input v-model="form.pageUrl"/>
</td>
</tr>
<tr>
<td>是否可见</td>
<td>
<el-radio-group v-model="form.isShow">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</td>
</tr>
<tr>
<td>排序号</td>
<td>
<el-input v-model="form.sortNo"/>
</td>
</tr>
<tr>
<td>备注</td>
<td>
<el-input v-model="form.remarks"/>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="editDialog = false">关 闭</el-button>
</div>
</el-dialog>
</el-tab-pane>
<el-tab-pane label="新增菜单" name="addrole">
<!-- 添加 -->
<!--<el-dialog :title="dialogTitle + '菜单管理'" :visible.sync="editDialog" width="40%">-->
<table class="e-table" cellspacing="0">
<tr>
<td>上级菜单</td>
<td>
<el-input v-model="form.pname" :disabled="true" style="width:300px"/>
</td>
</tr>
<tr>
<td>资源名称</td>
<td>
<el-select v-model="form.sourceSid" :disabled="isadd" @change="$forceUpdate()" style="width:300px">
<el-option
v-for="(item, i) in sourceNameData"
:key="i"
:label="item.sourceName"
:value="item.sid"
/>
</el-select>
</td>
</tr>
<tr>
<td>菜单名称</td>
<td>
<el-input v-model="form.name" style="width:300px"/>
</td>
</tr>
<tr>
<td>菜单路由</td>
<td>
<el-input v-model="form.menuUrl" style="width:300px"/>
</td>
</tr>
<tr>
<td>菜单图片路径</td>
<td>
<el-input v-model="form.iconUrl" style="width:300px"/>
</td>
</tr>
<tr>
<td>前端页面名称</td>
<td>
<el-input v-model="form.pageName" style="width:300px"/>
</td>
</tr>
<tr>
<td>前端页面路径</td>
<td>
<el-input v-model="form.pageUrl" style="width:300px"/>
</td>
</tr>
<tr>
<td>是否可见</td>
<td>
<el-radio-group v-model="form.isShow">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</td>
</tr>
<tr>
<td>排序号</td>
<td>
<el-input v-model="form.sortNo" style="width:300px"/>
</td>
</tr>
<tr>
<td>备注</td>
<td>
<el-input v-model="form.remarks"/>
</td>
</tr>
</table>
<div style="margin-top: 20px; text-align: center;">
<el-button type="primary" @click="save()">保存</el-button>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import {pageList, menusTreelist, saveMenusInfo, putMenusInfo, delMenus, IsEnable} from '@/api/system/menu/index.js'
import {sourceList} from '@/api/system/functional/functional.js'
export default {
data() {
return {
activeName: 'roleList',
editDialog: false,
dialogTitle: '',
checked: '',
form: {
pname: '顶级菜单',
iconUrl: '',
isShow: 1,
menuName: '',
menuUrl: '',
pageAliasName: '',
pageName: '',
pageUrl: '',
pageUrlRedirect: '',
psid: '',
remarks: '',
sortNo: 0,
sourceSid: ''
},
formBackup: Object.assign({}, this.form),
tableData: [],
page: {
current: 1,
size: 10,
total: 0,
params: {
name: '',
psid: '',
sourceName: '',
sourceSid: ''
}
},
rank: '1',
sourceNameData: [], // 资源
isadd: false
}
},
mounted() {
this.getPageList()
this.getsourceList()
// getsourceList().then(res => {
// this.sourceNameData = res.data
// })
},
methods: {
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList()
},
resetSearch() { // 重置
this.page.params = this.pageBackup
},
getPageList() { // 获取列表
pageList(this.page).then((res) => {
console.log('这里是条件查询', this.page)
const treedata = res.data
console.log('菜单列表', res)
this.tableData = treedata
this.page.total = res.data.total
})
},
// 资源名称
getsourceList() {
const params = {}
sourceList(params).then(res => {
this.sourceNameData = res.data
this.loading = false
})
},
handleClick(tab, event) {
if (tab.name == 'addrole') {
this.dialogTitle = '新增'
this.roleForm = Object.assign({}, this.formBackup)
} else {
this.getPageList()
}
},
add(row) {
this.activeName = 'addrole'
// if(row == 0){
// this.isadd = false
// }else{
// this.isadd = true
// }
// this.dialogTitle = '新增'
// this.editDialog = true
this.form = Object.assign({}, this.formBackup)
this.form.isShow = 1
// this.form.psid = row.sid || 0
this.form.pname = row.name || '顶级菜单'
this.form.sourceSid = row.sourceSid || ''
if (row.isSource == '1') {
this.form.psid = 0
} else {
this.form.psid = row.sid
}
},
editRow(row) {
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
this.form.isShow = 1
this.form.pname = row.psid == '0' ? '顶级菜单' : row.pname
},
save() {
if (this.form.sid) {
putMenusInfo(this.form).then(res => {
this.editDialog = false
this.getPageList(this.page)
this.$message({
message: res.msg,
type: 'success'
})
})
} else {
saveMenusInfo(this.form).then(res => {
this.activeName = 'roleList'
this.getPageList()
this.$message({
message: res.msg,
type: 'success'
})
})
}
},
deleteRow(row) {
this.$confirm('确定要删除该菜单吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delMenus({sid: row.sid}).then(res => {
this.getPageList(this.page)
this.$message({
type: 'success',
message: '删除成功!'
})
})
})
},
// 是否可用 按钮
enabledChange(value, row) {
IsEnable({
sid: row.sid,
isEnable:value
}).then(res => {
this.$message({
type: 'success',
message: res.msg
})
})
},
//保存排序
getSorting(){
},
retname(sid) {
obj = this.sourceNameData.find((item) => {
return item.sid == sid// 筛选出匹配数据
})
return obj.name
}
}
}
</script>
<style>
.el-input__inner {
line-height: 32px;
height: 32px;
}
</style>
<style scoped="scoped" lang="scss">
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
padding: 0 20px;
border: 1px solid #ccc;
border-radius: 2px;
background-color: #FFFFFF;
}
.el-icon-arrow-left:before,
.el-icon-arrow-right:before {
content: '下一页';
color: #727272;
}
.el-icon-arrow-left:before {
content: '上一页';
}
.content {
width: 100%;
padding-top: 10px;
font-size: 16px;
color: #fff;
box-sizing: border-box;
}
.shouye {
position: absolute;
top: -3px;
left: 100px;
font-size: 16px;
color: #0395d8;
font-weight: bold;
}
.placename {
position: absolute;
top: -3px;
left: 210px;
font-size: 16px;
color: #fff;
font-weight: bold;
}
.right_cont {
width: 100%;
height: 645px;
background-color: #fff;
margin: 0;
padding: 15px;
box-sizing: border-box;
}
.cont_head {
height: 40px;
width: 97%;
margin-left: 1.5%;
background-color: #f7f9fc;
overflow: hidden;
}
.cont_head p {
float: left;
color: #000;
line-height: 40px;
margin-left: 50px;
}
.cont_head input {
float: left;
height: 24px;
width: 147px;
margin-top: 6px;
border: 1px solid #e6e9f0;
border-radius: 5px;
-webkit-appearance: none;
outline: none;
}
.cont_head select {
float: left;
height: 28px;
width: 147px;
margin-top: 6px;
border: 1px solid #e6e9f0;
border-radius: 5px;
outline: none;
}
.chaxun {
height: 28px;
width: 85px;
line-height: 0px;
background-color: #018ad2;
margin-top: 6px;
text-align: center;
padding: 0;
float: right;
margin-right: 6px;
}
.tishi {
width: 80%;
margin: auto;
tr {
height: 50px;
}
td {
border: 1px solid #e6e9f0;
text-align: center;
}
td:first-child {
background-color: #f7f9fc;
}
input {
width: 80%;
height: 30px;
border: 1px solid #e6e9f0;
}
textarea {
width: 80%;
height: 100px;
border: 1px solid #e6e9f0;
margin-top: 10px;
margin-bottom: 6px;
}
select {
width: 80%;
height: 30px;
border: 1px solid #e6e9f0;
}
}
.my-tabs {
margin-top: 10px;
}
</style>