大屏页面初始化
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>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ResizablePage from '@/components/Layout/proResizable.vue'
|
||||
import vMeun from './list.vue'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.sidebar-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ResizablePage from '@/components/Layout/proResizable.vue'
|
||||
import vUser from './list.vue'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.sidebar-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
</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