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.
349 lines
11 KiB
349 lines
11 KiB
<template>
|
|
<div>
|
|
<el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
|
|
<el-tab-pane label="功能列表" name="roleList">
|
|
|
|
<div class="container">
|
|
<div class="tab-header">
|
|
<el-form ref="form" :inline="true" :model="search" label-width="80px">
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item label="功能名称">
|
|
<el-input v-model="search.name" clearable></el-input>
|
|
</el-form-item>
|
|
<el-button @click="getList">查询</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
<!-- table -->
|
|
<el-table :data="roleTable" border style="width: 100%;"
|
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
row-key="sid"
|
|
ref="multipleTable"
|
|
header-cell-class-name="table-header"
|
|
>
|
|
<!--<el-table-column label="序号" width="50px" type="index" align="center"></el-table-column>-->
|
|
<el-table-column prop="name" label="功能名称" width="200px" align="left"></el-table-column>
|
|
<el-table-column label="操作" width="280px" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button @click="addChildren(scope.row)" type="primary" size="mini"> 添加子功能 </el-button>
|
|
<el-button @click="editRow(scope.row)" v-if="scope.row.isSource == '0'" type="primary" size="mini"> 修改 </el-button>
|
|
<el-button @click="delRow(scope.row)" v-if="scope.row.isSource == '0'" type="danger" size="mini"> 删除 </el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="actionUrl" label="url地址" width="200" align="center"></el-table-column>
|
|
<!--<el-table-column prop="sourceName" label="模块名称" align="center"></el-table-column>-->
|
|
<el-table-column prop="isEnable" label="是否可用" align="center">
|
|
<template slot-scope="scope">
|
|
<el-switch
|
|
v-model="scope.row.isEnable"
|
|
active-value='1'
|
|
inactive-value='0'
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949"
|
|
@change="enabledChange($event,scope.row)">
|
|
</el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--<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="roleForm.parentName" :disabled="true"></el-input></td>
|
|
</tr>
|
|
<tr>
|
|
<td>功能名称</td>
|
|
<td><el-input v-model="roleForm.name"></el-input></td>
|
|
</tr>
|
|
<tr>
|
|
<td>url地址</td>
|
|
<td><el-input v-model="roleForm.actionUrl"></el-input></td>
|
|
</tr>
|
|
<tr>
|
|
<td>模块名称</td>
|
|
<td>
|
|
<el-select v-model="roleForm.sourceSid">
|
|
<el-option
|
|
v-for="(item, i) in sourceNameData"
|
|
:key="i"
|
|
:label="item.sourceName"
|
|
:value="item.sid">
|
|
</el-option>
|
|
</el-select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>终端权限</td>
|
|
<td>
|
|
<el-checkbox-group v-model="phoneFunction">
|
|
<!--<el-checkbox v-for="(item,index) in phoneFunctionData" :label="item.name"></el-checkbox>-->
|
|
<el-checkbox label="0" name="type">pc端</el-checkbox>
|
|
<el-checkbox label="1" name="type">移动端</el-checkbox>
|
|
</el-checkbox-group>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>说明</td>
|
|
<td> <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input></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>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="新增功能" name="addrole">
|
|
<el-card class="box-card">
|
|
<table class="e-table" cellspacing="0">
|
|
<tr>
|
|
<td>上级功能</td>
|
|
<td><el-input v-model="roleForm.parentName" :disabled="true"></el-input></td>
|
|
</tr>
|
|
<tr>
|
|
<td>功能名称</td>
|
|
<td><el-input v-model="roleForm.name"></el-input></td>
|
|
</tr>
|
|
<tr>
|
|
<td>url地址</td>
|
|
<td><el-input v-model="roleForm.actionUrl"></el-input></td>
|
|
</tr>
|
|
<tr>
|
|
<td>模块名称</td>
|
|
<td>
|
|
<el-select v-model="roleForm.sourceSid">
|
|
<el-option
|
|
v-for="(item, i) in sourceNameData"
|
|
:key="i"
|
|
:label="item.sourceName"
|
|
:value="item.sid">
|
|
</el-option>
|
|
</el-select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>终端权限</td>
|
|
<td>
|
|
<el-checkbox-group v-model="phoneFunction">
|
|
<!--<el-checkbox v-for="(item,index) in phoneFunctionData" :label="item.name"></el-checkbox>-->
|
|
<el-checkbox label="0" name="type">pc端</el-checkbox>
|
|
<el-checkbox label="1" name="type">移动端</el-checkbox>
|
|
</el-checkbox-group>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>说明</td>
|
|
<td> <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input></td>
|
|
</tr>
|
|
</table>
|
|
<div style="margin-top: 20px; text-align: center;">
|
|
<el-button type="primary" @click="save()">保 存</el-button>
|
|
</div>
|
|
</el-card>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
pageList,
|
|
savePost,
|
|
sourceList,
|
|
delOrgroles,
|
|
getSingleData,
|
|
putOrgroles,
|
|
IsEnable
|
|
} from '@/api/system/functional/functional.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
dialogTitle: '',
|
|
activeName: 'roleList',
|
|
roleForm: {
|
|
sid:'',
|
|
parentName:'顶级菜单',
|
|
parentSid:'0',
|
|
name:'',
|
|
actionUrl:'',
|
|
// controllerName:'',
|
|
sourceSid:'',
|
|
phoneFunction:'',
|
|
remarks: "",
|
|
},
|
|
phoneFunction:[],
|
|
phoneFunctionData:[{
|
|
name:'PC端',
|
|
id:'0'
|
|
},{
|
|
name:'移动端',
|
|
id:'1'
|
|
}],
|
|
// 模块名称
|
|
sourceNameData:[],
|
|
formBackup: {},
|
|
search: {
|
|
name: ''
|
|
},
|
|
orgName:'',
|
|
roleTable: [],
|
|
editDialog: false,
|
|
// 树形
|
|
loading: false,
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
orgdata:[], // 部门
|
|
checkedId: [],
|
|
treedata: [],
|
|
// chace: [],
|
|
// roleDialog: false,
|
|
// Thisrow: {},
|
|
// orgListAll:[]
|
|
|
|
};
|
|
},
|
|
mounted() {
|
|
this.formBackup = Object.assign({}, this.roleForm),
|
|
this.getList()
|
|
this.getsourceList()
|
|
},
|
|
methods: {
|
|
// 分页列表
|
|
getList() {
|
|
// let params = this.search
|
|
let params={
|
|
name: this.search.name
|
|
}
|
|
pageList(params).then(res => {
|
|
this.roleTable = res.data
|
|
console.log(res.data)
|
|
})
|
|
},
|
|
// 模块名称
|
|
getsourceList(){
|
|
let 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.getList()
|
|
}
|
|
},
|
|
editRow(row) {
|
|
this.dialogTitle = '编辑'
|
|
this.editDialog = true
|
|
this.roleForm = Object.assign({}, row)
|
|
getSingleData({id: row.sid }).then(res => {
|
|
this.roleForm.parentName= res.data.parentName
|
|
this.roleForm.sourceSid= res.data.sourceSid
|
|
this.roleForm.sourceName= ''
|
|
this.phoneFunction = res.data.phoneFunction.split(",")
|
|
})
|
|
},
|
|
addChildren(row){
|
|
this.refersh()
|
|
this.activeName= 'addrole'
|
|
this.roleForm.parentName = row.name
|
|
this.roleForm.parentSid = row.sid
|
|
if(row.isSource == '1'){
|
|
this.roleForm.parentName = '顶级菜单'
|
|
this.roleForm.parentSid = 0
|
|
}else{
|
|
this.roleForm.parentName = row.name
|
|
this.roleForm.parentSid = row.sid
|
|
}
|
|
},
|
|
delRow(row) {
|
|
this.$confirm('确定要删除该功能吗, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
delOrgroles({
|
|
sid: row.sid
|
|
}).then(res => {
|
|
this.getList()
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
});
|
|
})
|
|
})
|
|
},
|
|
// 保存角色
|
|
save() {
|
|
this.roleForm.phoneFunction = this.phoneFunction.toString()
|
|
if (this.roleForm.sid) {
|
|
putOrgroles(this.roleForm).then(res => {
|
|
if (res.code == '200') {
|
|
this.getList()
|
|
this.editDialog = false
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'success'
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
savePost(this.roleForm).then(res => {
|
|
if (res.code == '200') {
|
|
this.getList()
|
|
this.activeName = "roleList"
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'success'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
refersh(){
|
|
this.roleForm= {
|
|
parentName:'顶级菜单',
|
|
parentSid:'0',
|
|
name:'',
|
|
actionUrl:'',
|
|
sourceSid:'',
|
|
phoneFunction:'',
|
|
remarks: "",
|
|
}
|
|
},
|
|
// 是否可用 按钮
|
|
enabledChange(value, row) {
|
|
IsEnable({
|
|
sid: row.sid
|
|
}).then(res => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: res.msg
|
|
});
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style scoped="scoped">
|
|
.el-select > .el-input {
|
|
display: block;
|
|
width: 300px;
|
|
}
|
|
.my-tabs{
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|