大屏项目初始化

2026-03-08 13:05:57 +08:00
parent a052721622
commit f14cde0287
19 changed files with 329 additions and 357 deletions
--- a/screen-vue/src/api/bizModule.js
+++ b/screen-vue/src/api/bizModule.js
@@ -9,4 +9,15 @@ export function getHomeModuleList(params) {
    method: 'get', 
    params: params
  })
+}
+
+/**
+ * 删除信息列表
+ */
+export function getHomeModuleDelete(params) {
+  return request({
+    url: '/biz/homeModule/delete',
+    method: 'post', 
+    params: params
+  })
 }
--- a/screen-vue/src/api/bizModuleUser.js
+++ b/screen-vue/src/api/bizModuleUser.js
@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+/**
+ * 获取指标信息列表
+ */
+export function getHomeModuleUserList(params) {
+  return request({
+    url: '/biz/homeModuleUser/userList',
+    method: 'get', 
+    params: params
+  })
+}
+
+/**
+ * 保存信息列表
+ */
+export function getHomeModuleUserSave(data) {
+  return request({
+    url: '/biz/homeModuleUser/save',
+    method: 'post', 
+    data
+  })
+}
+
+/**
+ * 删除信息列表
+ */
+export function getHomeModuleUserDelete(params) {
+  return request({
+    url: '/biz/homeModuleUser/delete',
+    method: 'post', 
+    params: params
+  })
+}
--- a/screen-vue/src/api/bizUser.js
+++ b/screen-vue/src/api/bizUser.js
@@ -11,6 +11,17 @@ export function getHomeUserList(params) {
  })
 }

+/**
+ * 获取用户信息列表
+ */
+export function getHomeUserListAll(params) {
+  return request({
+    url: '/biz/homeUser/listAll',
+    method: 'get', 
+    params: params
+  })
+}
+
 /**
 * 保存用户信息列表
 */
--- a/screen-vue/src/views/database/screen/index.vue
+++ b/screen-vue/src/views/database/screen/index.vue
@@ -9,8 +9,8 @@
      <div class="sidebar-content">
        <FilterSelect
          :list-data="listData"
-          node-key="groupId"
-          label-key="groupName"
+          node-key="moduleId"
+          label-key="moduleName"
          @item-click="handleItemClick" 
          @edit="handleEdit"
          @delete="handleDelete"
@@ -43,8 +43,8 @@ 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 { getHomeModuleList } from '@/api/bizModule'
+import { getHomeModuleUserSave , getHomeModuleUserDelete } from '@/api/bizModuleUser'

 import vUser from './list.vue'
 import vRole from './role.vue'
@@ -61,12 +61,8 @@ const formComponentRef = ref(null)

 const getListData = async () => {
  try {
-    const res = await getHomeModuleGroupList({});
-	
-	
-	console.log(res )
-	
-    // listData.value = res || []
+    const res = await getHomeModuleList();
+    listData.value = res || []
  } catch (error) {
    console.log(error);
  }
@@ -82,7 +78,7 @@ const handleEdit = (item) => {
 }

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

@@ -120,16 +116,15 @@ const handleSave = async () => {
  if (formComponentRef.value) {
    const isValid = await formComponentRef.value.validate()
    if (!isValid) {
+		ElMessage.warning('表单验证失败,请检查必填项');
      return
    }
-    const selectedMenuIds = formComponentRef.value.getSelectedMenuIds()
-    roleForm.value.menuIds = selectedMenuIds
  }
  const reqParams = {
 	  ... roleForm.value
  }
  saveLoading.value = true
-  const res = await getHomeRoleAssign(reqParams);
+  const res = await getHomeModuleUserSave(reqParams);
  setTimeout(() => {
    ElMessage.success(res.msg)
 	saveLoading.value = false
--- a/screen-vue/src/views/database/screen/role.vue
+++ b/screen-vue/src/views/database/screen/role.vue
@@ -1,246 +1,236 @@
 <template>
-  <div class="role-auth-container">
-    <el-form 
-      :model="formData" 
-      class="role-info-form"
-      label-width="80px"
-      inline
-    >
-      <el-form-item label="角色编号:" class="form-col">
-        <el-input 
-          v-model="formData.roleId" 
-          disabled 
-          class="info-input"
-        />
-      </el-form-item>
-      <el-form-item label="角色名称:" class="form-col">
-        <el-input 
-          v-model="formData.roleName" 
-          class="info-input"
-        />
-      </el-form-item>
-    </el-form>
-
-    <div class="menu-tree-wrapper">
+  <el-form 
+    :model="formData" 
+    :rules="formRules" 
+    ref="formRef"
+    label-width="100px"
+    class="dialog-form-container"
+  >
+    <div class="form-row">
+      <div class="form-col">
+        <el-form-item label="模块编号" prop="moduleId">
+          <el-input 
+            v-model="formData.moduleId" 
+            placeholder="请输入模块编号"
+			disabled
+            clearable
+          />
+        </el-form-item>
+      </div>
+	  <div class="form-col">
+	    <el-form-item label="模块名称" prop="moduleName">
+	      <el-input 
+	        v-model="formData.moduleName" 
+	        placeholder="请输入模块名称"
+	        clearable
+	      />
+	    </el-form-item>
+	  </div>
+	</div>
+    <div class="form-row transfer-row">
+      <div class="form-col transfer-col">
+        <el-form-item label="权限列表" prop="userIds">
+          <el-transfer
+			  filterable
+			  v-model="formData.userIds"
+			  :data="transferData"
+			  :props="{ key: 'userId', label: 'uname' }"
+			  :titles="['待选用户', '已选用户']"
+			  placeholder="请输入权限名称搜索"
+			  class="full-width-transfer"
+			/>
+        </el-form-item>
+      </div>
    </div>
-  </div>
+  </el-form>
 </template>

 <script setup>
-import { ref, reactive, onMounted, defineProps, defineExpose, watch } from 'vue'
-import { ElMessage } from 'element-plus'
-import { getTreeMenuList } from '@/api/bizMenu'
-import { getHomeRoleMenus }  from '@/api/bizRole'
+import { ref, onMounted, nextTick, watch } from 'vue'
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
+import { getHomeUserListAll } from '@/api/bizUser'
+import { getHomeModuleUserList } from '@/api/bizModuleUser'

 const props = defineProps({
  formData: {
    type: Object,
    required: true,
    default: () => ({
-      roleId: '',
-      roleName: '',
-      menuIds: []
+	  moduleId: '',
+      moduleName: '',
+      userIds: []
    })
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
  }
 })

-const menuTreeData = ref([])
-const loading = ref(false)
-const menuTreeRef = ref(null)
-const selectedMenuIds = ref([])
+const formRef = ref(null)
+const transferData = ref([])

-const getLeafNodeIds = (treeData, leafIds = []) => {
-  treeData.forEach(node => {
-    if (!node.children || node.children.length === 0) {
-      leafIds.push(String(node.id))
-    } else {
-      getLeafNodeIds(node.children, leafIds)
-    }
-  })
-  return leafIds
+const formRules = {
+  moduleName: [ { required: true, message: '请输入模块名称', trigger: 'blur' } ],
+  userIds: [
+    { required: true, message: '请至少选择一个用户', trigger: 'change' }
+  ]
 }

-const filterOnlyLeafIds = (allIds, treeData) => {
-  const allLeafIds = getLeafNodeIds(treeData)
-  return allIds.filter(id => allLeafIds.includes(id))
-}

-const getTreeListData = async () => {
-  try {
-    const res = await getTreeMenuList()
-    menuTreeData.value = res ?? []
-    return menuTreeData.value
-  } catch (error) {
-    console.error('加载菜单树失败：', error)
-    menuTreeData.value = []
-    return []
-  }
-}
-
-const getRoleMenuIds = async () => {
-  try {
-    const reqParams = { roleId: props.formData.roleId }
-    const res = await getHomeRoleMenus(reqParams)
-    return (res ?? []).map(item => String(item?.menuId)).filter(id => id)
-  } catch (error) {
-    console.error('加载角色菜单权限失败：', error)
-    return []
-  }
-}
-
-const treeProps = reactive({
-  label: 'label',
-  children: 'children',
-  disabled: 'disabled'
-})
-
-function getIndeterminateKeys(node) {
-  let keys = []
-  if (node.indeterminate) {
-    keys.push(node.key)
-  }
-  if (node.childNodes) {
-    node.childNodes.forEach(c => keys.push(...getIndeterminateKeys(c)))
-  }
-  return keys
-}
-
-function getCheckedAndIndeterminateKeys() {
-  if (!menuTreeRef.value) return []
-  const checked = menuTreeRef.value.getCheckedKeys(false)
-  const indeterminate = getIndeterminateKeys(menuTreeRef.value.root)
-  return [...new Set([...checked, ...indeterminate])]
-}
-
-onMounted(async () => {
-  loading.value = true
-  try {
-    const treeData = await getTreeListData()
-    const roleMenuIds = await getRoleMenuIds()
-    const propsMenuIds = (props.formData?.menuIds ?? []).map(id => String(id)).filter(id => id)
-    const allMenuIds = roleMenuIds.length > 0 ? roleMenuIds : propsMenuIds
-    const leafMenuIds = filterOnlyLeafIds(allMenuIds, treeData)
-
-    if (leafMenuIds.length > 0) {
-      selectedMenuIds.value = [...leafMenuIds]
-      setTimeout(() => {
-        if (menuTreeRef.value && treeData.length) {
-          menuTreeRef.value.setCheckedKeys(leafMenuIds, false)
-        }
-      }, 300)
-    }
-  } catch (error) {
-    console.error('初始化权限数据失败：', error)
-  } finally {
-    loading.value = false
-  }
-})
-
-watch(() => props.formData.menuIds, (newVal) => {
-  if (!newVal || !newVal.length || !menuTreeRef.value || !menuTreeData.value.length) return
-  
-  const allMenuIds = newVal.map(id => String(id)).filter(id => id)
-  const leafMenuIds = filterOnlyLeafIds(allMenuIds, menuTreeData.value)
-  
-  if (leafMenuIds.length) {
-    selectedMenuIds.value = [...leafMenuIds]
-    menuTreeRef.value.setCheckedKeys(leafMenuIds, false)
-  }
-}, { deep: true })
-
-const handleCheck = () => {
-  if (!menuTreeRef.value) return
-  selectedMenuIds.value = menuTreeRef.value.getCheckedKeys(false)
-}
-
-const handleCheckChange = () => {
-  handleCheck()
-}

 const validate = async () => {
-  if (selectedMenuIds.value.length === 0) {
-    ElMessage.warning('请至少选择一个菜单权限!')
+  if (!formRef.value) return false
+  try {
+    const valid = await formRef.value.validate()
+    return valid
+  } catch (error) {
+    console.error('表单验证失败:', error)
    return false
  }
-  return true
 }

+
 const resetForm = () => {
-  if (menuTreeRef.value) {
-    menuTreeRef.value.setCheckedKeys([])
-    selectedMenuIds.value = []
-  }
+  if (formRef.value) formRef.value.resetFields()
 }

-defineExpose({ 
-  validate, 
-  resetForm,
-  getSelectedMenuIds: () => getCheckedAndIndeterminateKeys(),
-  getLeafMenuIds: () => menuTreeRef.value ? menuTreeRef.value.getCheckedKeys(true) : []
+async function getUserData() {
+  try {
+	  const res = await getHomeUserListAll()
+	  transferData.value = res || []
+  } catch (error) {
+    console.error('获取数据失败:', error);
+    transferData.value = []
+  } 
+}
+
+async function getUserModuleData() {
+  try {
+	  const reqParams = {
+		  moduleId: props.formData.moduleId
+	  }
+	  const res = await getHomeModuleUserList(reqParams)
+	  if (Array.isArray(res)) {
+	    const selectedUserIds = res.map(item => item.userId).filter(Boolean)
+	    nextTick(() => {
+	      props.formData.userIds = selectedUserIds
+	    })
+	  }
+  } catch (error) {
+    console.error('获取数据失败:', error);
+    transUserData.value = []
+  } 
+}
+
+watch(() => props.formData.moduleId, () => {
+  if (props.formData.moduleId) {
+    getUserModuleData()
+  }
+}, { immediate: true })
+
+onMounted(() => {
+  getUserData()
+  getUserModuleData()
 })
+
+defineExpose({ validate, resetForm })
 </script>

 <style scoped>
-.role-auth-container {
+.dialog-form-container {
  width: 100%;
  padding: 16px;
+  margin: 0;
  border: 1px solid rgba(64, 158, 255, 0.15);
  border-radius: 8px;
  box-sizing: border-box;
-  background: #fff;
 }

-.role-info-form {
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #e5e7eb;
-  width: 100%;
+.form-row {
  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin: 0 0 16px 0;
  gap: 20px;
 }
-.form-col {
-  flex: 1;
-  min-width: 200px;
-}
-.info-input {
-  width: 100%;
-}
-:deep(.role-info-form .el-form-item) {
-  margin-bottom: 0;
-  width: 100%;
-}
-:deep(.role-info-form .el-input.is-disabled .el-input__inner) {
-  background-color: #f5f7fa;
-  color: #666;
+
+.form-row:last-child { 
+  margin-bottom: 0; 
 }

-.menu-tree-wrapper {
-  width: 100%;
-}
-
-.tree-content {
-  width: 100%;
-  height: 400px;
-  overflow-y: auto;
-  border: 1px solid #e5e7eb;
-  border-radius: 4px;
-  padding: 8px;
+.form-col { 
+  flex: 1; 
+  min-width: 180px; 
  box-sizing: border-box;
 }

-:deep(.el-tree) {
-  --el-tree-node-content-hover-bg-color: #f5f7fa;
-}
-:deep(.el-tree-node__content) {
-  height: 36px;
-  line-height: 36px;
+.transfer-col {
+  width: 100% !important;
+  min-width: unset !important;
+  padding: 0 !important;
+  margin: 0 !important;
 }

-.tree-content::-webkit-scrollbar {
-  width: 6px;
+.full-width-transfer {
+  width: 100% !important;
+  box-sizing: border-box !important;
+  padding: 0 !important;
+  margin: 0 !important;
 }
-.tree-content::-webkit-scrollbar-thumb {
-  background-color: #dcdfe6;
-  border-radius: 3px;
+
+:deep(.el-transfer) {
+  width: 100% !important;
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  box-sizing: border-box !important;
+}
+
+:deep(.el-transfer-panel) {
+  flex: 1 1 0 !important;
+  width: calc((100% - 50px) / 2) !important;
+  max-width: calc((100% - 50px) / 2) !important;
+  min-width: 150px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  box-sizing: border-box !important;
+}
+
+:deep(.el-transfer__buttons) {
+  flex: 0 0 50px !important;
+  display: flex !important;
+  flex-direction: row !important;
+  justify-content: center !important;
+  align-items: center !important;
+  padding: 0 5px !important;
+  gap: 5px !important;
+  height: 100% !important;
+  margin: auto 0 !important;
+}
+
+:deep(.el-transfer__button) {
+  width: 45px !important;
+  height: 32px !important;
+  line-height: 32px !important;
+  padding: 0 !important;
+  font-size: 14px !important;
+  border-radius: 4px !important;
+  border: 1px solid #dcdfe6 !important;
+}
+
+:deep(.el-transfer__button .el-icon) {
+  display: block !important;
+  margin: 0 !important;
+  color: #666 !important;
+  font-size: 14px !important;
+}
+
+:deep(.el-form-item) {
+  margin: 0 !important;
+  padding: 0 !important;
 }
 </style>
--- a/screen-vue/src/views/system/menu/list.vue
+++ b/screen-vue/src/views/system/menu/list.vue
@@ -235,7 +235,7 @@ const handleSave = async () => {
  if (formComponentRef.value) {
    const isValid = await formComponentRef.value.validate()
    if (!isValid) {
-      ElMessage.warning('表单验证失败，请检查必填项')
+	  ElMessage.warning('表单验证失败,请检查必填项');
      return
    }
  }
--- a/screen-vue/src/views/system/role/index.vue
+++ b/screen-vue/src/views/system/role/index.vue
@@ -114,6 +114,7 @@ const handleSave = async () => {
  if (formComponentRef.value) {
    const isValid = await formComponentRef.value.validate()
    if (!isValid) {
+		ElMessage.warning('表单验证失败,请检查必填项');
      return
    }
    const selectedMenuIds = formComponentRef.value.getSelectedMenuIds()
--- a/screen-vue/src/views/system/user/list.vue
+++ b/screen-vue/src/views/system/user/list.vue
@@ -266,7 +266,7 @@ const handleSave = async () => {
  if (formComponentRef.value) {
    const isValid = await formComponentRef.value.validate()
    if (!isValid) {
-      ElMessage.warning('表单验证失败，请检查必填项')
+      ElMessage.warning('表单验证失败,请检查必填项')
      return
    }
  }