大屏页面初始化

screen-vue/src/views/system/menu/list.vue

@@ -0,0 +1,218 @@
+<template>
+	  <div class="data-manage-page">
+		  <CSearch
+		    @search="handleSearch"
+		    @reset="handleReset"
+		  >
+		    <el-form-item label="用户名称：" class="search-item">
+		      <el-input
+		        v-model="searchForm.uname"
+		        placeholder="请输入用户名称"
+		        clearable
+		        class="search-input"
+		      />
+		    </el-form-item>
+		    <el-form-item label="登录账户：" class="search-item">
+		      <el-input
+		        v-model="searchForm.userName"
+		        placeholder="请输入登录账户"
+		        clearable
+		        class="search-input"
+		      />
+		    </el-form-item>
+		    <el-form-item label="用户状态：" class="search-item">
+		      <el-select
+		        v-model="searchForm.ustatus"
+		        placeholder="请选择用户状态"
+		        clearable
+		        class="search-select"
+		      >
+		        <el-option label="停用" value="0" />
+		        <el-option label="在用" value="1" />
+		        <el-option label="锁定" value="2" />
+		      </el-select>
+		    </el-form-item>
+		  </CSearch>
+		  
+		  
+		  <div class="main-wrapper">
+		    <div class="main-section">
+		      <div class="action-section">
+		        <el-button type="primary" icon="Plus" @click="handleAdd">
+		          新增
+		        </el-button>
+		        <el-button type="success" icon="Download" @click="handleExport">
+		          导出
+		        </el-button>
+		      </div>
+		      <TreeTable
+		        :table-data="tableData"
+		        :loading="loading"
+		        @load-children="handleLoadChildren"
+		      >
+		        <template #columns>
+		          <el-table-column prop="name" label="名称" width="350" :tree-node="true" />
+		          <el-table-column prop="desc" label="描述" width="400" />
+		          <el-table-column prop="createTime" label="创建时间" width="200" />
+		      	<el-table-column prop="createTime" label="创建时间" width="200" />
+		      	<el-table-column prop="createTime" label="创建时间" width="200" />
+		      	<el-table-column prop="createTime" label="创建时间" width="200" />
+		      	<el-table-column prop="createTime" label="创建时间" width="200" fixed="right" />
+		        </template>
+		      </TreeTable>
+		    </div>
+		  </div>
+	  </div>
+	
+	
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import CSearch from '@/components/Search/proSearch.vue'
+import TreeTable from '@/components/Table/proTreeTable.vue'
+
+
+const searchForm = reactive({
+  uname: '',
+  ustatus: '',
+  userName: ''
+})
+
+// 模拟树形表格数据（一级节点）
+const tableData = ref([
+  {
+    id: 1,
+    name: '一级节点1',
+    desc: '这是一级节点1（可展开到二级）',
+    createTime: '2026-03-04',
+    hasChildren: true // 标记有子节点
+  },
+  {
+    id: 2,
+    name: '一级节点2',
+    desc: '这是一级节点2（无下级）',
+    createTime: '2026-03-04',
+    hasChildren: false
+  },
+  {
+    id: 3,
+    name: '一级节点3',
+    desc: '这是一级节点3（可展开到二级，二级可展开到三级）',
+    createTime: '2026-03-04',
+    hasChildren: true
+  }
+])
+
+const loading = ref(false)
+const handleLoadChildren = async ({ row, resolve }) => {
+  loading.value = true
+  try {
+    // 模拟接口请求延迟
+    await new Promise(resolve => setTimeout(resolve, 800))
+    
+    const nodeId = row.id.toString()
+    const level = nodeId.split('-').length // 通过ID分割判断层级：1=一级，2=二级，3=三级...
+    
+    let childrenData = []
+    // 一级节点的子节点（二级）
+    if (level === 1) {
+      childrenData = [
+        {
+          id: `${row.id}-1`,
+          name: `二级节点-${row.id}-1`,
+          desc: `这是【${row.name}】的二级子节点1`,
+          createTime: '2026-03-04',
+          // 只有一级节点3的二级子节点1可以展开到三级
+          hasChildren: row.id === 3 ? true : false
+        },
+        {
+          id: `${row.id}-2`,
+          name: `二级节点-${row.id}-2`,
+          desc: `这是【${row.name}】的二级子节点2`,
+          createTime: '2026-03-04',
+          hasChildren: false
+        },
+        {
+          id: `${row.id}-3`,
+          name: `二级节点-${row.id}-3`,
+          desc: `这是【${row.name}】的二级子节点3`,
+          createTime: '2026-03-04',
+          hasChildren: false
+        }
+      ]
+    } 
+    // 二级节点的子节点（三级）
+    else if (level === 2) {
+      childrenData = [
+        {
+          id: `${row.id}-1`,
+          name: `三级节点-${row.id}-1`,
+          desc: `这是【${row.name}】的三级子节点1`,
+          createTime: '2026-03-04',
+          hasChildren: false
+        },
+        {
+          id: `${row.id}-2`,
+          name: `三级节点-${row.id}-2`,
+          desc: `这是【${row.name}】的三级子节点2`,
+          createTime: '2026-03-04',
+          hasChildren: false
+        }
+      ]
+    }
+    
+    // 通过 resolve 回调返回子节点数据
+    resolve(childrenData)
+  } catch (error) {
+    console.error('加载子节点失败:', error)
+    resolve([]) // 加载失败返回空数组
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.data-manage-page {
+  width: 100%;
+  height: 100%;
+  padding: 4px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden !important;
+}
+
+.main-wrapper {
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+  min-height: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  margin: 0 !important;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.main-section {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.action-section {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+:deep(.el-button .el-icon) {
+  margin-right: 4px;
+}
+</style>