大屏页面初始化

2026-03-05 18:32:39 +08:00
parent b9dbd542e7
commit d3d713f131
6 changed files with 315 additions and 299 deletions
--- a/screen-vue/src/views/system/menu/form.vue
+++ b/screen-vue/src/views/system/menu/form.vue
@@ -22,7 +22,7 @@
        <el-form-item label="菜单名称" prop="menuName">
          <el-input 
            v-model="formData.menuName" 
-            placeholder="请输入用户名称"
+            placeholder="请输入菜单名称"
            clearable
          />
        </el-form-item>
@@ -61,14 +61,15 @@
            v-model="formData.sort" 
            placeholder="请输入菜单序号"
            clearable
+            type="number"
          />
        </el-form-item>
      </div>
      <div class="form-col">
-        <el-form-item label="外链类别" prop="isIframe">
+        <el-form-item label="是否外链" prop="isIframe">
          <el-select 
            v-model="formData.isIframe" 
-            placeholder="请选择外链类别"
+            placeholder="请选择是否外链"
            clearable
          >
            <el-option label="否" value="0" />
@@ -83,12 +84,23 @@
        <el-form-item label="菜单图标" prop="menuIcon">
          <el-select 
            v-model="formData.menuIcon" 
-            placeholder="请选择菜单图标"
            clearable
+            filterable
+            placeholder="输入图标名称"
          >
-            <el-option label="模块A" value="0" />
-            <el-option label="模块B" value="1" />
-            <el-option label="模块C" value="2" />
+            <el-option 
+              v-for="iconName in iconList" 
+              :key="iconName" 
+              :label="iconName" 
+              :value="iconName"
+            >
+              <div class="icon-option-item">
+                <el-icon :size="16" class="option-icon">
+                  <component :is="iconName" />
+                </el-icon>
+                <span class="option-text">{{ iconName }}</span>
+              </div>
+            </el-option>
          </el-select>
        </el-form-item>
      </div>
@@ -110,7 +122,8 @@
 </template>

 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'

 const props = defineProps({
  formData: {
@@ -121,8 +134,8 @@ const props = defineProps({
      menuName: '',
      menuType: '',
      path: '',
-      sort: '',
-      isIframe : '',
+      sort: 0,
+      isIframe: '',
      menuIcon: '',
      ustatus: '1',
    })
@@ -135,12 +148,26 @@ const props = defineProps({

 const formRef = ref(null)

+const iconList = computed(() => {
+  return Object.keys(ElementPlusIconsVue).filter(name => 
+    !name.includes('Internal') && !name.includes('Icon')
+  )
+})
+
 const formRules = {
-  parentId: [ { required: true, message: '请选择父级菜单', trigger: 'blur' } ],
-  menuName: [ { required: true, message: '请输入菜单名称', trigger: 'blur' } ],
+  parentId: [ { required: true, message: '请选择父级菜单', trigger: 'change' } ],
+  menuName: [ 
+    { required: true, message: '请输入菜单名称', trigger: 'blur' },
+  ],
  menuType: [ { required: true, message: '请选择菜单类型', trigger: 'change' } ],
-  path: [ { required: true, message: '请输入路由地址', trigger: 'change' } ],
+  path: [ 
+    { required: true, message: '请输入路由地址', trigger: 'blur' },
+  ],
+  sort: [ 
+    { required: true, message: '请输入菜单序号', trigger: 'blur' },
+  ],
  isIframe: [ { required: true, message: '请选择外链类型', trigger: 'change' } ],
+  menuIcon: [ { required: true, message: '请选择菜单图标', trigger: 'change' } ],
  ustatus: [ { required: true, message: '请选择菜单状态', trigger: 'change' } ],
 }

@@ -170,6 +197,7 @@ defineExpose({ validate, resetForm })
  border: 1px solid rgba(64, 158, 255, 0.15);
  border-radius: 8px;
  box-sizing: border-box;
+  background: #fff;
 }

 .form-row {
@@ -180,5 +208,31 @@ defineExpose({ validate, resetForm })
  gap: 20px;
 }
 .form-row:last-child { margin-bottom: 0; }
-.form-col { flex: 1; min-width: 180px; }
+.form-col { flex: 1; min-width: 200px; }
+
+.icon-option-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+}
+.option-icon {
+  color: #409eff;
+  flex-shrink: 0;
+}
+.option-text {
+  font-size: 14px;
+  color: #333;
+}
+
+:deep(.el-select), :deep(.el-input) {
+  width: 100%;
+}
+:deep(.el-form-item__label) {
+  font-weight: 500;
+  color: #333;
+}
+:deep(.el-select-dropdown__item) {
+  padding: 6px 12px;
+}
 </style>
--- a/screen-vue/src/views/system/menu/list.vue
+++ b/screen-vue/src/views/system/menu/list.vue
@@ -51,12 +51,35 @@
 		  >
 			<template #columns>
 			  <el-table-column prop="menuName" label="菜单名称" width="225" :tree-node="true" />
-			  <el-table-column prop="menuType" label="菜单类型" />
+			  <el-table-column label="菜单类型" width="100">
+				<template #default="scope">
+				  <el-tag :type="scope.row.menuType === 'M' ? 'info' : scope.row.menuType === 'C' ? 'primary' : 'warning'">
+					{{ scope.row.menuType === 'M' ? '目录' : scope.row.menuType === 'C' ? '菜单' : '按钮' }}
+				  </el-tag>
+				</template>
+			  </el-table-column>
 			  <el-table-column prop="path" label="路由地址" width="225" />
 			  <el-table-column prop="sort" label="序号" sortable />
-			  <el-table-column prop="isIframe" label="是否外链" />
-			  <el-table-column prop="menuIcon" label="图标" />
-			  <el-table-column prop="ustatus" label="状态" sortable />
+			  <el-table-column label="是否外链" width="100">
+				<template #default="scope">
+				  <span>{{ scope.row.isIframe === '1' ? '是' : '否' }}</span>
+				</template>
+			  </el-table-column>
+			  <el-table-column label="图标" width="80">
+				<template #default="scope">
+				  <el-icon v-if="scope.row.menuIcon" :size="18" class="menu-icon">
+					<component :is="scope.row.menuIcon" />
+				  </el-icon>
+				  <span v-else class="no-icon-tip">-</span>
+				</template>
+			  </el-table-column>
+			  <el-table-column label="状态" width="100" sortable>
+				<template #default="scope">
+				  <el-tag :type="scope.row.ustatus === '1' ? 'success' : scope.row.ustatus === '0' ? 'danger' : 'warning'">
+					{{ scope.row.ustatus === '1' ? '在用' : scope.row.ustatus === '0' ? '停用' : '锁定' }}
+				  </el-tag>
+				</template>
+			  </el-table-column>
 			  <el-table-column label="操作" width="260" fixed="right" align="center">
 				<template #default="scope">
 				  <el-button type="primary" size="small" icon="Edit"
@@ -90,6 +113,7 @@

 <script setup>
 import { ref, reactive, watch , onMounted } from 'vue'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import CSearch from '@/components/Search/proSearch.vue'
 import PDialog from '@/components/Dialog/proDialog.vue'
 import TreeTable from '@/components/Table/proTreeTable.vue'
@@ -145,7 +169,7 @@ const getTreeListData = async () => {
    const res = await getHomeMenuList(reqParams);
 	tableData.value = res || []
  } catch (error) {
-	  console.log(error);
+	console.log(error);
  } finally {
 	  loading.value = false
  }
@@ -168,14 +192,8 @@ const handleDelete = async (row) => {
 		type: 'warning'
 	  }
 	);
-	
-	// 这里调用删除接口
-	// const res = await deleteMenu(row.menuId);
-	// if (res.success) {
 	ElMessage.success('删除成功！');
-	// 删除后重新加载列表
 	getTreeListData();
-	// }
  } catch (error) {
 	console.error('删除失败', error);
  }
@@ -189,10 +207,8 @@ const handleAdd = () => {

 const handleExport = () => {
  console.log('导出菜单数据');
-  // 导出逻辑
 }

-
 const handleDialogClose = () => {
  formData.value = {}
  isEdit.value = false
@@ -218,7 +234,7 @@ const handleSave = async () => {
  setTimeout(() => {
    ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
    dialogVisible.value = false
-    getDataList()
+    getTreeListData()
  }, 500)
 }

@@ -278,8 +294,21 @@ onMounted(() => {
  margin-right: 4px;
 }

-/* 新增：操作按钮样式优化 */
 :deep(.operate-btn) {
  margin: 0 4px;
 }
+
+.menu-icon {
+  color: #409eff;
+}
+
+.no-icon-tip {
+  color: #999;
+  font-size: 12px;
+}
+
+:deep(.el-tag) {
+  font-size: 12px;
+  padding: 2px 8px;
+}
 </style>
--- a/screen-vue/src/views/system/role/index.vue
+++ b/screen-vue/src/views/system/role/index.vue
@@ -7,7 +7,15 @@
  >
    <template #sidebar>
      <div class="sidebar-content">
-       
+       <FilterSelect
+		 :list-data="listData"
+		 node-key="roleId"
+		 label-key="roleName"
+		 @item-click="handleItemClick" 
+		 @edit="handleEdit"
+		 @delete="handleDelete"
+		 @view="handleView"
+	   />
      </div>
    </template>
    <template #main>
@@ -19,9 +27,48 @@
 </template>

 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import ResizablePage from '@/components/Layout/proResizable.vue'
+import FilterSelect from '@/components/Table/proFilterSelect.vue'
+
+import { getHomeRoleList } from '@/api/bizRole'
 import vUser from './list.vue'
+
+const FormValues = ref({
+  menuId: ''
+});
+
+const listData = ref([]);
+
+const getListData = async () => {
+  try {
+    const res = await getHomeRoleList();
+	listData.value = res || []
+  } catch (error) {
+	  console.log(error);
+  }
+}
+
+const handleItemClick = (item) => {
+  console.log('选中了：', item)
+}
+
+// 操作事件处理
+const handleEdit = (item) => {
+  console.log('编辑', item)
+}
+
+const handleDelete = (item) => {
+  console.log('删除', item)
+}
+
+const handleView = (item) => {
+  console.log('查看', item)
+}
+
+onMounted(() => {
+	getListData();
+})
 </script>

 <style scoped>