大屏页面初始化
This commit is contained in:
@@ -163,10 +163,6 @@
|
||||
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
ArrowDown, Lock, SwitchButton, User, FullScreen, Monitor,
|
||||
Expand, Fold, Close, ArrowLeft, ArrowRight, Menu, House
|
||||
} from '@element-plus/icons-vue'
|
||||
import { getUserMenuList } from '@/api/bizMenu'
|
||||
import LogoImg from '@/assets/logo.png'
|
||||
import EditPswd from './components/editPswd.vue'
|
||||
|
||||
@@ -5,7 +5,7 @@ import Layout from '@/components/Layout/index.vue'
|
||||
import Dashboard from '@/views/desktop/index.vue'
|
||||
import bigScreen from '@/views/screen/index.vue'
|
||||
|
||||
const modules = import.meta.glob('../views/**/index.vue', {
|
||||
const modules = import.meta.glob('../views/**/{index,list}.vue', {
|
||||
eager: false,
|
||||
import: 'default'
|
||||
})
|
||||
@@ -41,7 +41,7 @@ const generateRoutes = () => {
|
||||
component: module
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
return routes
|
||||
}
|
||||
|
||||
|
||||
@@ -1,313 +1,203 @@
|
||||
<template>
|
||||
<div class="search-list-page">
|
||||
<div class="search-section">
|
||||
<div class="search-wrapper">
|
||||
<el-input
|
||||
v-model="searchForm.websiteName"
|
||||
placeholder="请输入搜索网站名称"
|
||||
class="search-input"
|
||||
clearable
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<div class="search-btn-group">
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
<div class="layout-container">
|
||||
<div class="header-section">
|
||||
<el-card shadow="hover" class="header-card">
|
||||
<div class="header-content">
|
||||
<UserTop
|
||||
userName="超级管理员"
|
||||
weatherInfo="今日小雪;夜间:多云;温度:(-4.0℃ 至 2.0℃);东北风/1-3级"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="list-wrapper">
|
||||
<div class="list-section">
|
||||
<div v-if="listData.length === 0" class="empty-tip">
|
||||
<el-empty description="暂无数据" />
|
||||
<div class="main-section">
|
||||
<div class="left-section">
|
||||
<el-card shadow="hover" class="card-item card-1">
|
||||
<NoteLeft />
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="card-item card-2">
|
||||
<AlertMain />
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="card-item card-3">
|
||||
<QuickLogin />
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="right-section">
|
||||
<div class="right-top-section">
|
||||
<el-card class="right-card right-top-card">
|
||||
<div class="right-placeholder">上区域内容</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div v-else class="card-list">
|
||||
<el-card
|
||||
v-for="item in listData"
|
||||
:key="item.websiteId"
|
||||
class="list-card"
|
||||
shadow="hover"
|
||||
>
|
||||
<div class="card-top">
|
||||
<div class="site-main">
|
||||
<el-tooltip :content="item.websiteName" placement="top">
|
||||
<div class="site-name">{{ item.websiteName }}</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip :content="item.websiteUrl" placement="top">
|
||||
<div class="site-url">{{ item.websiteUrl }}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-divider"></div>
|
||||
<div class="card-bottom">
|
||||
<span class="card-date">{{ item.createTime }}</span>
|
||||
<div class="card-actions">
|
||||
<el-button size="small" type="primary" link @click="handleVisit(item)">
|
||||
<el-icon><Link /></el-icon>
|
||||
访问
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-bottom-section">
|
||||
<el-card class="right-card right-bottom-card">
|
||||
<div class="right-placeholder">下区域内容</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-footer">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[20, 50, 99]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
background
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Link } from '@element-plus/icons-vue'
|
||||
import { getWebsiteStorageList } from '@/api/bizWebsiteStorage'
|
||||
|
||||
const searchForm = reactive({
|
||||
websiteName: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const listData = ref([])
|
||||
const getDataList = async () => {
|
||||
try {
|
||||
const reqParmas = {
|
||||
...searchForm,
|
||||
pageNum: pagination.pageNum,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
const res = await getWebsiteStorageList(reqParmas)
|
||||
listData.value = res.list || []
|
||||
pagination.total = res.total
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleVisit = (item) => {
|
||||
window.open(item.websiteUrl, '_blank')
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
Object.assign(searchForm, {
|
||||
websiteName: ''
|
||||
})
|
||||
pagination.pageNum = 1
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleSizeChange = (val) => {
|
||||
pagination.pageSize = val
|
||||
getDataList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
pagination.pageNum = val
|
||||
getDataList()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDataList()
|
||||
})
|
||||
import { ref } from 'vue'
|
||||
import UserTop from './components/UserTop.vue';
|
||||
import NoteLeft from './components/Note.vue'
|
||||
import AlertMain from './components/Alert.vue'
|
||||
import QuickLogin from './components/Quick.vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-list-page {
|
||||
.layout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
flex-shrink: 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-btn-group {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.list-section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
padding: 12px;
|
||||
background-color: #f5f7fa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
.header-section {
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.list-card {
|
||||
align-items: stretch !important;
|
||||
justify-content: stretch !important;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.list-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
|
||||
border-color: #409eff !important;
|
||||
.header-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-top {
|
||||
.main-section {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 6px 12px 4px;
|
||||
}
|
||||
|
||||
.site-main {
|
||||
flex: 1;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #1f2937;
|
||||
margin-bottom: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.site-url {
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.site-url:hover {
|
||||
color: #409eff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px 8px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
.left-section {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
.card-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: stretch !important;
|
||||
justify-content: stretch !important;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 3px;
|
||||
.right-section {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 3px;
|
||||
.right-top-section {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
.right-bottom-section {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.right-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.right-card:hover {
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.right-placeholder {
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.el-card) {
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 4px !important;
|
||||
margin: 0 !important;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:deep(.el-card:hover) {
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card-list {
|
||||
grid-template-columns: 1fr;
|
||||
.main-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
.left-section, .right-section {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
flex: none;
|
||||
}
|
||||
.left-section {
|
||||
flex-direction: row;
|
||||
}
|
||||
.card-item {
|
||||
min-width: 120px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.right-top-section, .right-bottom-section {
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user