大屏项目初始化

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

@@ -0,0 +1,156 @@
+<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>