yxt_product
/
oms-ui-admin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
商享通oms管理后台
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
11 Commits
1 Branch
0 Tags
13 MiB
 
 
 
 
Tree: 67553e555d
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '67553e555d'
${ noResults }
oms-ui-admin/src/views/system/menuManage/menuManage.vue

632 lines
17 KiB
Raw Blame History

<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>
<div class="listconadd">
<el-table v-loading="loading" ref="multipleTable" :data="tableData" border
style="width: 100%;margin-bottom: 100px;" 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" width="120" label="类型" align="center" />
<el-table-column prop="pageUrl" label="链接地址" align="center" />
<el-table-column prop="isShow" label="可见性" align="center">
<template slot-scope="scope">
<el-switch v-model="scope.row.isShow" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
inactive-value="0" @change="enabledChange(scope.row.isShow,scope.row)" />
</template>
</el-table-column>
</el-table>
</div>
</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-input v-model="form.sourceName" :disabled="true" style="width:300px" />
</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="editMenuType" @change="menuTypeChangeRadio">
<el-radio :label="'1'">目录</el-radio>
<el-radio :label="'2'">菜单</el-radio>
<el-radio :label="'3'">按钮</el-radio>
</el-radio-group>
</td>
</tr>
<tr>
<td>是否可见</td>
<td>
<el-radio-group v-model="editShow" @change="changeRadio">
<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-input v-model="form.sourceName" :disabled="true" style="width:300px" />
</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="addMenuType" @change="menuTypeChangeRadio2">
<el-radio :label="'1'">目录</el-radio>
<el-radio :label="'2'">菜单</el-radio>
<el-radio :label="'3'">按钮</el-radio>
</el-radio-group>
</td>
</tr>
<tr>
<td>是否可见</td>
<td>
<el-radio-group v-model="addShow" @change="changeRadio2">
<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'
export default {
data() {
return {
loading: false,
activeName: 'roleList',
editDialog: false,
dialogTitle: '',
checked: '',
form: {
pname: '顶级菜单',
iconUrl: '',
isShow: '1',
menuName: '',
menuUrl: '',
pageAliasName: '',
pageName: '',
pageUrl: '',
pageUrlRedirect: '',
psid: '',
remarks: '',
sortNo: 0,
sourceName: 'wms',
sourceSid: 'd936f1ba-03c3-11ec-bf08-48452053aa33'
},
formBackup: Object.assign({}, this.form),
tableData: [],
page: {
current: 1,
size: 10,
total: 0,
params: {
name: '',
psid: '',
sourceName: 'wms',
sourceSid: 'd936f1ba-03c3-11ec-bf08-48452053aa33'
}
},
rank: '1',
sourceNameData: [], // 资源
isadd: false,
editShow: '1',
addShow: '1',
addMenuType: '1',
editMenuType: '1',
}
},
mounted() {
this.getPageList()
// this.getsourceList()
// getsourceList().then(res => {
// this.sourceNameData = res.data
// })
},
methods: {
menuTypeChangeRadio(val) {
console.log('menuTypeChangeRadio', val)
this.form.menuType = val
},
menuTypeChangeRadio2(val) {
console.log('menuTypeChangeRadio2', val)
this.form.menuType = val
},
changeRadio(val) {
console.log('changeRadio', val)
this.form.isShow = val
},
changeRadio2(val) {
console.log('changeRadio2', val)
this.form.isShow = val
},
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList()
},
resetSearch() { // 重置
this.page.params = this.pageBackup
},
getPageList() { // 获取列表
this.loading = true
pageList(this.page).then((res) => {
this.loading = false
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.form = Object.assign({}, this.formBackup)
this.form.isShow = '1'
this.form.menuType = '1'
// this.form.psid = row.sid || 0
this.form.pname = '顶级菜单'
this.form.sourceName = 'wms'
this.form.sourceSid = 'd936f1ba-03c3-11ec-bf08-48452053aa33'
this.form.psid = 0
} 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.menuType = '1'
// this.form.psid = row.sid || 0
this.form.pname = row.name || '顶级菜单'
this.form.sourceName = row.sourceName
this.form.sourceSid = row.sourceSid
if (row.isSource == '1') {
this.form.psid = 0
} else {
this.form.psid = row.sid
}
},
editRow(row) {
console.log("editRow", row);
this.dialogTitle = '编辑'
this.editDialog = true
this.form = Object.assign({}, row)
this.editShow = this.form.isShow
this.editMenuType = this.form.menuType
// 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.$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(() => {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
delMenus({
sid: row.sid
}).then(res => {
loading.close()
this.getPageList()
this.$message({
type: 'success',
message: resp.msg,
showClose: true
})
}).catch(e => {
loading.close()
})
})
},
// 是否可用 按钮
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>