大屏页面初始化
This commit is contained in:
194
screen-vue/src/components/Layout/proResizable.vue
Normal file
194
screen-vue/src/components/Layout/proResizable.vue
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
<template>
|
||||||
|
<div class="resizable-layout-container">
|
||||||
|
<div
|
||||||
|
class="sidebar-container"
|
||||||
|
:style="{ width: sidebarWidth + 'px' }"
|
||||||
|
>
|
||||||
|
<slot name="sidebar"></slot>
|
||||||
|
<div
|
||||||
|
class="resize-handle"
|
||||||
|
:class="{ dragging: isDragging }"
|
||||||
|
@mousedown="startDrag"
|
||||||
|
>
|
||||||
|
<div class="handle-indicator"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-container">
|
||||||
|
<slot name="main"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onUnmounted, defineProps, defineEmits, watch, onMounted } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
defaultWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 180
|
||||||
|
},
|
||||||
|
minWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 160
|
||||||
|
},
|
||||||
|
maxWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 420
|
||||||
|
},
|
||||||
|
bgColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#f8f9fa'
|
||||||
|
},
|
||||||
|
handleWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 8
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['width-change'])
|
||||||
|
|
||||||
|
const sidebarWidth = ref(props.defaultWidth)
|
||||||
|
const isDragging = ref(false)
|
||||||
|
let startMouseX = 0
|
||||||
|
let startWidth = 0
|
||||||
|
|
||||||
|
watch([() => props.defaultWidth], (newVal) => {
|
||||||
|
sidebarWidth.value = newVal[0]
|
||||||
|
})
|
||||||
|
|
||||||
|
const startDrag = (e) => {
|
||||||
|
isDragging.value = true
|
||||||
|
startMouseX = e.clientX
|
||||||
|
startWidth = sidebarWidth.value
|
||||||
|
|
||||||
|
document.body.style.cursor = 'ew-resize'
|
||||||
|
document.body.style.userSelect = 'none'
|
||||||
|
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
}
|
||||||
|
|
||||||
|
const onMouseMove = (e) => {
|
||||||
|
if (!isDragging.value) return
|
||||||
|
|
||||||
|
const offsetX = e.clientX - startMouseX
|
||||||
|
const targetWidth = startWidth + offsetX
|
||||||
|
|
||||||
|
if (targetWidth >= props.minWidth && targetWidth <= props.maxWidth) {
|
||||||
|
sidebarWidth.value = targetWidth
|
||||||
|
if (Date.now() % 5 === 0) {
|
||||||
|
emit('width-change', targetWidth)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onMouseUp = () => {
|
||||||
|
if (!isDragging.value) return
|
||||||
|
|
||||||
|
isDragging.value = false
|
||||||
|
document.body.style.cursor = ''
|
||||||
|
document.body.style.userSelect = ''
|
||||||
|
|
||||||
|
emit('width-change', sidebarWidth.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
document.addEventListener('mousemove', onMouseMove)
|
||||||
|
document.addEventListener('mouseup', onMouseUp)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
document.removeEventListener('mousemove', onMouseMove)
|
||||||
|
document.removeEventListener('mouseup', onMouseUp)
|
||||||
|
})
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
setSidebarWidth: (width) => {
|
||||||
|
const safeWidth = Math.max(props.minWidth, Math.min(props.maxWidth, width))
|
||||||
|
sidebarWidth.value = safeWidth
|
||||||
|
emit('width-change', safeWidth)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.resizable-layout-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-container {
|
||||||
|
height: 100%;
|
||||||
|
border-right: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background-color: v-bind(bgColor) !important;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-container > div:first-child {
|
||||||
|
flex: 1;
|
||||||
|
padding: 16px;
|
||||||
|
overflow-y: auto;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #d0d0d0 v-bind(bgColor);
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-container > div:first-child::-webkit-scrollbar { width: 6px }
|
||||||
|
.sidebar-container > div:first-child::-webkit-scrollbar-track { background: v-bind(bgColor) }
|
||||||
|
.sidebar-container > div:first-child::-webkit-scrollbar-thumb {
|
||||||
|
background: #d0d0d0;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.sidebar-container > div:first-child::-webkit-scrollbar-thumb:hover { background: #b0b0b0 }
|
||||||
|
|
||||||
|
.resize-handle {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: v-bind(handleWidth + 'px');
|
||||||
|
height: 100%;
|
||||||
|
cursor: ew-resize;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: transparent;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
box-shadow: inset -4px 0 0 transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-indicator {
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
transition: background-color 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resize-handle:hover .handle-indicator {
|
||||||
|
background-color: #d1d5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resize-handle.dragging .handle-indicator {
|
||||||
|
background-color: #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 0;
|
||||||
|
width: auto;
|
||||||
|
background-color: v-bind(bgColor) !important;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
131
screen-vue/src/components/Table/proTreeTable.vue
Normal file
131
screen-vue/src/components/Table/proTreeTable.vue
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
<template>
|
||||||
|
<div class="custom-table-wrapper">
|
||||||
|
<div class="table-container">
|
||||||
|
<el-table
|
||||||
|
:data="tableData"
|
||||||
|
v-loading="loading"
|
||||||
|
class="data-table"
|
||||||
|
height="100%"
|
||||||
|
border="false"
|
||||||
|
:tree-props="treeProps"
|
||||||
|
lazy
|
||||||
|
:load="loadChildren"
|
||||||
|
row-key="id"
|
||||||
|
>
|
||||||
|
<slot name="columns" />
|
||||||
|
</el-table>
|
||||||
|
<div v-if="tableData.length === 0 && !loading" class="empty-tip">
|
||||||
|
<el-empty description="暂无数据" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineProps, defineEmits, defineOptions } from 'vue'
|
||||||
|
|
||||||
|
// 定义组件属性
|
||||||
|
const props = defineProps({
|
||||||
|
tableData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
treeProps: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
children: 'children',
|
||||||
|
hasChildren: 'hasChildren'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['load-children'])
|
||||||
|
const loadChildren = (row, treeNode, resolve) => {
|
||||||
|
emit('load-children', { row, treeNode, resolve })
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.custom-table-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
gap: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden !important;
|
||||||
|
padding: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table {
|
||||||
|
width: 100%;
|
||||||
|
--el-table-header-text-color: #333;
|
||||||
|
--el-table-row-hover-bg-color: #f8f9fa;
|
||||||
|
--el-table-border-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table :deep(.el-table),
|
||||||
|
.data-table :deep(.el-table__header-wrapper),
|
||||||
|
.data-table :deep(.el-table__body-wrapper),
|
||||||
|
.data-table :deep(.el-table__footer-wrapper) {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table :deep(.el-table__cell) {
|
||||||
|
border: none !important;
|
||||||
|
border-right: none !important;
|
||||||
|
border-bottom: 1px solid #f0f0f0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table :deep(.el-table__header .el-table__cell) {
|
||||||
|
border-bottom: 1px solid #e5e7eb !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-tip {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar-track {
|
||||||
|
background: #f1f5f9;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb {
|
||||||
|
background: #cbd5e1;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 树形表格展开/折叠图标样式优化 */
|
||||||
|
.data-table :deep(.el-table__expand-icon) {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.data-table :deep(.el-table__expand-icon--expanded) {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
8
screen-vue/src/views/system/menu/form.vue
Normal file
8
screen-vue/src/views/system/menu/form.vue
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@@ -1,8 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<ResizablePage
|
||||||
|
:defaultWidth="200"
|
||||||
|
:minWidth="150"
|
||||||
|
:maxWidth="420"
|
||||||
|
bgColor="#fff"
|
||||||
|
>
|
||||||
|
<template #sidebar>
|
||||||
|
<div class="sidebar-content">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #main>
|
||||||
|
<div class="main-content">
|
||||||
|
<vMeun />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ResizablePage>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import ResizablePage from '@/components/Layout/proResizable.vue'
|
||||||
|
import vMeun from './list.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
|
.sidebar-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
padding: 0px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
218
screen-vue/src/views/system/menu/list.vue
Normal file
218
screen-vue/src/views/system/menu/list.vue
Normal file
@@ -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>
|
||||||
8
screen-vue/src/views/system/role/form.vue
Normal file
8
screen-vue/src/views/system/role/form.vue
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@@ -1,8 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<ResizablePage
|
||||||
|
:defaultWidth="200"
|
||||||
|
:minWidth="150"
|
||||||
|
:maxWidth="420"
|
||||||
|
bgColor="#fff"
|
||||||
|
>
|
||||||
|
<template #sidebar>
|
||||||
|
<div class="sidebar-content">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #main>
|
||||||
|
<div class="main-content">
|
||||||
|
<vUser />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ResizablePage>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import ResizablePage from '@/components/Layout/proResizable.vue'
|
||||||
|
import vUser from './list.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
|
.sidebar-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
padding: 0px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
282
screen-vue/src/views/system/role/list.vue
Normal file
282
screen-vue/src/views/system/role/list.vue
Normal file
@@ -0,0 +1,282 @@
|
|||||||
|
<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>
|
||||||
|
<STable
|
||||||
|
:table-data="tableData"
|
||||||
|
:loading="loading"
|
||||||
|
:pagination="pagination"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
>
|
||||||
|
<template #columns>
|
||||||
|
<el-table-column prop="createTime" label="记录日期" />
|
||||||
|
<el-table-column prop="userName" label="登录账户" />
|
||||||
|
<el-table-column prop="uname" label="用户名称" />
|
||||||
|
<el-table-column prop="sex" label="性别" />
|
||||||
|
<el-table-column prop="email" label="电子邮箱" />
|
||||||
|
<el-table-column prop="phone" label="联系电话" />
|
||||||
|
<el-table-column prop="ustatus" label="状态" min-width="100" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag
|
||||||
|
:type="scope.row.ustatus === '1' ? 'success' : scope.row.ustatus === '2' ? 'warning' : 'danger'"
|
||||||
|
>
|
||||||
|
{{ getStatusText(scope.row.ustatus) }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||||
|
<template #default="scope">
|
||||||
|
<!-- 编辑按钮添加 Edit 图标 -->
|
||||||
|
<el-button size="small" type="primary" link @click="handleEdit(scope.row)">
|
||||||
|
<el-icon><Edit /></el-icon>
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<!-- 删除按钮添加 Delete 图标 -->
|
||||||
|
<el-button size="small" type="danger" link @click="handleDelete(scope.row)">
|
||||||
|
<el-icon><Delete /></el-icon>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
</STable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<PDialog
|
||||||
|
v-model="dialogVisible"
|
||||||
|
:title="isEdit ? '编辑数据' : '新增数据'"
|
||||||
|
@close="handleDialogClose"
|
||||||
|
@reset="handleDialogReset"
|
||||||
|
@confirm="handleSave"
|
||||||
|
>
|
||||||
|
<VForm ref="formComponentRef" :form-data="formData" :is-edit="isEdit" />
|
||||||
|
</PDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { Plus, Download, Edit, Delete } from '@element-plus/icons-vue'
|
||||||
|
import { getHomeUserList } from '@/api/bizUser'
|
||||||
|
|
||||||
|
import CSearch from '@/components/Search/proSearch.vue'
|
||||||
|
import STable from '@/components/Table/proTable.vue'
|
||||||
|
import PDialog from '@/components/Dialog/proDialog.vue'
|
||||||
|
import VForm from './form.vue'
|
||||||
|
|
||||||
|
const formComponentRef = ref(null)
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const searchForm = reactive({
|
||||||
|
uname: '',
|
||||||
|
ustatus: '',
|
||||||
|
userName: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const pagination = reactive({
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
total: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const tableData = ref([])
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const isEdit = ref(false)
|
||||||
|
const formData = ref({})
|
||||||
|
|
||||||
|
async function getDataList() {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const reqParmas = {
|
||||||
|
... searchForm,
|
||||||
|
pageNum: pagination.pageNum,
|
||||||
|
pageSize: pagination.pageSize,
|
||||||
|
}
|
||||||
|
const res = await getHomeUserList(reqParmas);
|
||||||
|
pagination.total = res.total;
|
||||||
|
tableData.value = res.list || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取数据失败:', error);
|
||||||
|
tableData.value = []
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatusText = (status) => {
|
||||||
|
const statusMap = {
|
||||||
|
'0': '停用',
|
||||||
|
'1': '在用',
|
||||||
|
'2': '锁定'
|
||||||
|
}
|
||||||
|
return statusMap[status] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
pagination.pageNum = 1
|
||||||
|
getDataList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
Object.assign(searchForm, {
|
||||||
|
uname: '',
|
||||||
|
ustatus: '',
|
||||||
|
userName: ''
|
||||||
|
})
|
||||||
|
pagination.pageNum = 1
|
||||||
|
getDataList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
isEdit.value = false
|
||||||
|
formData.value = {}
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
isEdit.value = true
|
||||||
|
formData.value = { ...row }
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExport = () => {
|
||||||
|
ElMessage.success('开始导出数据...')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = (row) => {
|
||||||
|
ElMessage.warning(`删除ID为 ${row.id} 的数据`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSizeChange = (val) => {
|
||||||
|
pagination.pageSize = val
|
||||||
|
getDataList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCurrentChange = (val) => {
|
||||||
|
pagination.pageNum = val
|
||||||
|
getDataList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDialogClose = () => {
|
||||||
|
formData.value = {}
|
||||||
|
isEdit.value = false
|
||||||
|
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) {
|
||||||
|
ElMessage.warning('表单验证失败，请检查必填项')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
|
||||||
|
dialogVisible.value = false
|
||||||
|
getDataList()
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getDataList()
|
||||||
|
})
|
||||||
|
</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>
|
||||||
Reference in New Issue
Block a user