modules/00_Admin/Admin.UI/src/views/role/bind-menu/index.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
  <m-container>
    <m-box page :title="$t('mod.admin.menu_authorization')" icon="link" :loading="loading" show-fullscreen>
      <el-alert :title="$t('mod.admin.menu_authorization_alert')" type="warning" class="m-margin-b-20"> </el-alert>
      <el-tree ref="treeRef" class="m-admin-bind-menu" :data="treeData" node-key="id" show-checkbox default-expand-all>
        <template #default="{ node, data }">
          <m-icon class="m-admin-bind-menu_icon" :name="data.item.icon || 'folder-o'" :style="{ color: data.item.iconColor }" />
          <span class="m-admin-bind-menu_label">{{ data.item.locales[$i18n.locale] || node.label }}</span>
          <div class="m-admin-bind-menu_buttons">
            <template v-if="data.id === 0">
              <el-checkbox v-model="checkedAllButton" :label="$t('mod.admin.select_all')" @change="handleCheckedAllButton"></el-checkbox>
            </template>
            <template v-else>
              <el-checkbox v-for="b in data.buttons" :key="b.code" v-model="b.checked" :label="$t(b.text)" :disabled="!node.checked" @change="handleCheckedButton"></el-checkbox>
            </template>
          </div>
        </template>
      </el-tree>
      <template #footer>
        <m-button type="success" icon="save" @click="submit">{{ $t('mkh.save') }}</m-button>
      </template>
    </m-box>
  </m-container>
</template>
<script setup lang="ts">
  import type { MenuTreeNode } from '@/types/menu'
  import { nextTick, Ref, ref, toRefs, watch } from 'vue'
  import { mkh, useProfileStore, PageDefinition, useMessage } from 'mkh-ui'
  import { useI18n } from '@/locales'
  import menuApi from '@/api/menu'
  import roleApi from '@/api/role'

  const { t } = useI18n()

  const props = defineProps({
    role: {
      type: Object,
      required: true,
    },
  })

  const profileStore = useProfileStore()

  const message = useMessage()

  const { role } = toRefs(props)
  const treeRef = ref()
  const treeData: Ref<MenuTreeNode[]> = ref([])
  const checkedAllButton = ref(false) //选中所有按钮
  const allButtons: Ref<any[]> = ref([]) //保存所有的按钮对象引用，方便全选时切换
  const loading = ref(false)

  //解析所有页面信息
  let pages: PageDefinition[] = []
  mkh.modules.forEach((m) => {
    pages = pages.concat(m.pages)
  })

  //刷新菜单树
  const refreshTree = () => {