my-bigScreen/screen-vue/src/views/database/screen/index.vue

<template>
  <ResizablePage 
    :defaultWidth="200"
    :minWidth="150"
    :maxWidth="420"
    bgColor="#fff" 
  >
    <template #sidebar>
      <div class="sidebar-content">
        <FilterSelect
          :list-data="listData"
          node-key="groupId"
          label-key="groupName"
          @item-click="handleItemClick" 
          @edit="handleEdit"
          @delete="handleDelete"
          @view="handleView"
        />
      </div>
    </template>
    <template #main>
      <div class="main-content">
        <vUser @refresh-role-list="getListData" />
      </div>
    </template>
  </ResizablePage>
  
  <PDialog
    v-model="dialogVisible"
    title="模块授权"
	:loading="saveLoading"
    @close="handleDialogClose"
    @reset="handleDialogReset"
    @confirm="handleSave"
  >
    <vRole ref="formComponentRef" :form-data="roleForm" />
  </PDialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import ResizablePage from '@/components/Table/proResizable.vue'
import FilterSelect from '@/components/Table/proFilterSelect.vue'
import PDialog from '@/components/Dialog/proDialog.vue'

import { getHomeModuleGroupList } from '@/api/bizModule'

import vUser from './list.vue'
import vRole from './role.vue'

const FormValues = ref({
  menuId: ''
});

const listData = ref([]);
const saveLoading = ref(false)
const dialogVisible = ref(false)
const roleForm = ref({})
const formComponentRef = ref(null)

const getListData = async () => {
  try {
    const res = await getHomeModuleGroupList({});
	
	
	console.log(res )
	
    // listData.value = res || []
  } catch (error) {
    console.log(error);
  }
}

const handleItemClick = (item) => {
  console.log('选中了：', item)
}

const handleEdit = (item) => {
  roleForm.value = { ...item }
  dialogVisible.value = true
}

const handleDelete = (item) => {
	ElMessageBox.confirm('确定要删除当前角色吗?', '删除确认', {
	  type: 'warning',
	  closeOnClickModal: false,
	  showClose: false
	})
	.then(async () => {
	  const reqParams = {
	    roleId: item.roleId
	  }
	  const res = await getHomeRoleDelete(reqParams);
	  ElMessage.success(res.msg);
	  getListData();
	})
	.catch(() => {
	  ElMessage.info('已取消删除角色操作');
	});
}

const handleView = (item) => {
  console.log('查看', item)
}

const handleDialogClose = () => {
  roleForm.value = {}
  dialogVisible.value = false
}

const handleDialogReset = () => {
  if (formComponentRef.value) {
    formComponentRef.value.resetForm()
    ElMessage.info('表单已重置')
  }
}

const handleSave = async () => {
  if (formComponentRef.value) {
    const isValid = await formComponentRef.value.validate()
    if (!isValid) {
      return
    }
    const selectedMenuIds = formComponentRef.value.getSelectedMenuIds()
    roleForm.value.menuIds = selectedMenuIds
  }
  const reqParams = {
	  ... roleForm.value
  }
  saveLoading.value = true
  const res = await getHomeRoleAssign(reqParams);
  setTimeout(() => {
    ElMessage.success(res.msg)
	saveLoading.value = false
    dialogVisible.value = false
	getListData()
  }, 500)
}

onMounted(() => {
  getListData();
})
</script>

<style scoped>
.sidebar-content {
  width: 100%;
  height: 100%;
}

.main-content {
  padding: 0px;
  height: 100%;
}
</style>