|
@@ -0,0 +1,201 @@
|
|
|
+<template>
|
|
|
+ <view class="auth_page">
|
|
|
+ <view class="auth_list">
|
|
|
+ <view class="leve_0" v-if="authList.length" v-for="(item,index) in authList" :key="item.id">
|
|
|
+ <view class="leve_1">
|
|
|
+ <label @click="checkParent(item)">
|
|
|
+ <checkbox :value="String(item.id)" :checked="item.checked" /> {{item.name}}
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <checkbox-group :data-pid="String(item.id)" class="leve_2" @change="checkboxChange">
|
|
|
+ <label class="leve_3" v-for="citem in item.children" :key="citem.id">
|
|
|
+ <checkbox :value="String(citem.id)" :checked="citem.checked" />
|
|
|
+ {{citem.name}}
|
|
|
+ </label>
|
|
|
+ </checkbox-group>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form-footer-btn">
|
|
|
+ <button type="primary" :style="{background:$config('buttonColors')}" :disabled="loading" :loading="loading" @click="handleSubmit()">保存</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { getMenuList, addMenuPower } from '@/api/powerRole-md.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id:'',
|
|
|
+ menuData: {},
|
|
|
+ authList: [], // app 权限菜单
|
|
|
+ checkedIds: [[],[],[]], // 已选的ids
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.id = options.id
|
|
|
+ this.getMenuList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取菜单树列表
|
|
|
+ getMenuList () {
|
|
|
+ let _this = this
|
|
|
+ getMenuList({id: this.id}).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ _this.menuData = res.data
|
|
|
+ if (_this.menuData.role.menuIds) {
|
|
|
+ const arr = _this.menuData.role.menuIds.split(',')
|
|
|
+ // 勾选已选的
|
|
|
+ _this.findLeaf(_this.menuData.allMenuList, arr)
|
|
|
+ _this.getIds(_this.menuData.allMenuList[0].children,0)
|
|
|
+ _this.getIds(_this.menuData.allMenuList[1].children,1)
|
|
|
+ }
|
|
|
+ // app 菜单
|
|
|
+ _this.authList = _this.menuData.allMenuList[2].children
|
|
|
+ }
|
|
|
+ console.log(_this.menuData,'_this.menuData')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 勾选已选的
|
|
|
+ findLeaf (data, arr) {
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ const node = data[i]
|
|
|
+ const hasNode = this.hasSelNode(node.id, arr)
|
|
|
+ this.$set(node, 'checked', !!hasNode)
|
|
|
+ if (node.children){
|
|
|
+ this.$set(node, 'expand', !!hasNode)
|
|
|
+ this.findLeaf(node.children, arr)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hasSelNode (id, arr){
|
|
|
+ const hasNode = arr.find(item => {
|
|
|
+ return item == id
|
|
|
+ })
|
|
|
+ return hasNode
|
|
|
+ },
|
|
|
+ // 获取选中的ids, index 那个菜单
|
|
|
+ getIds (data,index){
|
|
|
+ let _this = this
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ const node = data[i]
|
|
|
+ if(node.checked){
|
|
|
+ _this.checkedIds[index].push(node.id)
|
|
|
+ }
|
|
|
+ if (node.children){
|
|
|
+ _this.getIds(node.children,index)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择一级菜单
|
|
|
+ checkParent(item){
|
|
|
+ console.log(item)
|
|
|
+ if(item.children){
|
|
|
+ item.children.map(k=>{
|
|
|
+ this.$set(k, 'checked', !item.checked)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$set(item, 'checked', !item.checked)
|
|
|
+ },
|
|
|
+ // 选择复选框
|
|
|
+ checkboxChange(e){
|
|
|
+ console.log(e)
|
|
|
+ let pid = e.currentTarget.dataset.pid
|
|
|
+ let ids = e.detail.value
|
|
|
+ let pc = this.authList.find(item=> item.id == pid)
|
|
|
+ if(pc.children&&pc.children.length){
|
|
|
+ pc.children.map(k=>{
|
|
|
+ this.$set(k, 'checked', !!ids.find(a=>a==k.id))
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$set(pc, 'checked', ids.length>0)
|
|
|
+ },
|
|
|
+ // 保存提交
|
|
|
+ handleSubmit () {
|
|
|
+ const _this = this
|
|
|
+ // 获取已选的项
|
|
|
+ this.checkedIds[2] = []
|
|
|
+ this.getIds(this.authList,2)
|
|
|
+ if (this.checkedIds[2].length == 0) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请先选择菜单'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let checkeNodes = []
|
|
|
+ checkeNodes = checkeNodes.concat(this.checkedIds[0])
|
|
|
+ checkeNodes = checkeNodes.concat(this.checkedIds[1])
|
|
|
+ checkeNodes = checkeNodes.concat(this.checkedIds[2])
|
|
|
+ console.log(checkeNodes, 'checkeNodes')
|
|
|
+ uni.showLoading({
|
|
|
+ title: "正在提交..."
|
|
|
+ })
|
|
|
+ this.loading = true
|
|
|
+ addMenuPower({ id: this.id, menuIds: checkeNodes.join(',') }).then(res => {
|
|
|
+ console.log(res, 'res--save')
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: res.message
|
|
|
+ })
|
|
|
+ if (res.status + '' === '200') {
|
|
|
+ setTimeout(function () {
|
|
|
+ _this.cancel()
|
|
|
+ }, 300)
|
|
|
+ }
|
|
|
+ uni.hideLoading()
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cancel(){
|
|
|
+ uni.navigateBack()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page{
|
|
|
+ height: 100%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ .auth_page{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ .auth_list{
|
|
|
+ flex-grow: 1;
|
|
|
+ overflow: auto;
|
|
|
+ height: 100%;
|
|
|
+ .leve_0{
|
|
|
+ padding:0 20upx;
|
|
|
+ margin-top: 20upx;
|
|
|
+ .leve_1{
|
|
|
+ padding: 15upx;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ uni-label{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .leve_2{
|
|
|
+ padding: 10upx 10upx 10upx 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .leve_3{
|
|
|
+ margin: 20upx 5%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-footer-btn{
|
|
|
+ margin: 20upx;
|
|
|
+ uni-button{
|
|
|
+ font-size: 30upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|