|
|
@@ -5,47 +5,50 @@
|
|
|
<div class="bar__top"></div>
|
|
|
<div class="bar__bottom"></div>
|
|
|
</div>
|
|
|
- <el-aside class="local_aside">
|
|
|
- <el-container style="height: 100%">
|
|
|
- <el-header>
|
|
|
- <el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
|
|
|
- </el-header>
|
|
|
- <el-main style="flex-basis: 100%; padding: 0px">
|
|
|
- <el-tree
|
|
|
- ref="treeRef"
|
|
|
- class="menu-tree"
|
|
|
- :data="treeData"
|
|
|
- node-key="id"
|
|
|
- :current-node-key="''"
|
|
|
- :highlight-current="true"
|
|
|
- :expand-on-click-node="false"
|
|
|
- :props="{ label: 'name' }"
|
|
|
- default-expand-all
|
|
|
- :filter-node-method="filterNode"
|
|
|
- @node-click="leftTreeClick"
|
|
|
- >
|
|
|
- <template #default="{ node, data }">
|
|
|
- <span class="custom-tree-node">
|
|
|
- <span class="label">{{ node.label }}</span>
|
|
|
- <span class="code">{{ data.code }}</span>
|
|
|
- <span class="do">
|
|
|
- <el-icon @click.stop="dicEdit(data)"><Edit /></el-icon>
|
|
|
- <el-icon @click.stop="dictDel(node, data)"><Delete /></el-icon>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-tree>
|
|
|
- </el-main>
|
|
|
- <el-footer style="height: 51px">
|
|
|
- <el-button type="primary" style="width: 100%" @click="addHandler('tree')">
|
|
|
- <el-icon>
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- 字典分类
|
|
|
- </el-button>
|
|
|
- </el-footer>
|
|
|
- </el-container>
|
|
|
- </el-aside>
|
|
|
+ <el-card class="h-full border-none menu-card" shadow="never">
|
|
|
+ <template #header>
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="card-header">
|
|
|
+ <span>字典分类</span>
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ <el-space>
|
|
|
+ <el-icon :style="{ color: 'var(--el-color-primary)' }" class="cursor-pointer" size="22" @click="addHandler('tree')"
|
|
|
+ ><Plus />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon class="cursor-pointer" size="22" @click="getGroup"><Refresh /></el-icon>
|
|
|
+ </el-space>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable />
|
|
|
+ <el-tree
|
|
|
+ ref="treeRef"
|
|
|
+ v-loading="showGroupLoading"
|
|
|
+ class="menu-tree-box py-3"
|
|
|
+ :data="treeData"
|
|
|
+ node-key="id"
|
|
|
+ :current-node-key="''"
|
|
|
+ :highlight-current="true"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :props="{ label: 'name' }"
|
|
|
+ default-expand-all
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ @node-click="leftTreeClick"
|
|
|
+ >
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span class="custom-tree-node">
|
|
|
+ <span class="label">{{ node.label }}</span>
|
|
|
+ <span class="code">{{ data.code }}</span>
|
|
|
+ <span class="do">
|
|
|
+ <el-icon :style="{ color: 'var(--el-color-primary)' }" size="24" @click.stop="dicEdit(data)"><Edit /></el-icon>
|
|
|
+ <el-icon :style="{ color: 'var(--el-color-error)' }" size="24" @click.stop="dictDel(node, data)"><Delete /></el-icon>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
<div class="content-warp flex-column-page-wrap">
|
|
|
<!-- 公用搜索组件 -->
|
|
|
@@ -74,7 +77,11 @@
|
|
|
|
|
|
<template #actionSlot="{ row }">
|
|
|
<div class="flex flex-align-pack-center">
|
|
|
- <LeIcon class="text-lg text-icon-color cursor-pointer icon-mage--edit" icon-class="icon-processInfo-mage--edit" @click="table_edit(row)" />
|
|
|
+ <LeIcon
|
|
|
+ class="text-lg text-icon-color cursor-pointer icon-mage--edit"
|
|
|
+ icon-class="icon-processInfo-mage--edit"
|
|
|
+ @click="table_edit(row)"
|
|
|
+ />
|
|
|
|
|
|
<LeIcon class="text-lg ml-2 text-rose-700 cursor-pointer" icon-class="icon-processInfo-iconoir--trash" @click="table_del(row)" />
|
|
|
</div>
|
|
|
@@ -99,7 +106,7 @@ import dict from '@/api/system/dict'
|
|
|
import { computed, nextTick, ref, watch } from 'vue'
|
|
|
import { ElMessage, ElTree, ElMessageBox } from 'element-plus'
|
|
|
import { useTablePage } from '@/hooks/useTablePage'
|
|
|
-import { Plus, Delete, Edit } from '@element-plus/icons-vue'
|
|
|
+import { Plus, Delete, Edit, Refresh } from '@element-plus/icons-vue'
|
|
|
|
|
|
const isCollapsed = ref(false)
|
|
|
const visible = ref(false) // 弹窗显示隐藏
|
|
|
@@ -444,56 +451,40 @@ watch(groupFilterText, val => {
|
|
|
font-size: 14px;
|
|
|
padding-right: 24px;
|
|
|
height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.custom-tree-node .code {
|
|
|
- font-size: 12px;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-.custom-tree-node {
|
|
|
- .do {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.custom-tree-node .do i {
|
|
|
- margin-left: 3px;
|
|
|
- color: #999;
|
|
|
- padding: 3px;
|
|
|
- font-size: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.custom-tree-node .do i:hover {
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.custom-tree-node {
|
|
|
&:hover {
|
|
|
.code {
|
|
|
display: none;
|
|
|
}
|
|
|
+ .do {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .do {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .code {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ .do i {
|
|
|
+ margin-left: 3px;
|
|
|
+ color: #999;
|
|
|
+ padding: 3px;
|
|
|
+ font-size: 20px;
|
|
|
+ &:hover {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.custom-tree-node:hover .do {
|
|
|
- display: inline-block;
|
|
|
-}
|
|
|
.content-warp {
|
|
|
- // 260 + 28
|
|
|
- width: calc(100% - 288px);
|
|
|
+ // 300 + 28
|
|
|
+ width: calc(100% - 328px);
|
|
|
}
|
|
|
-.aside-wrap {
|
|
|
- background-color: var(--el-bg-color);
|
|
|
- .local_aside {
|
|
|
- height: 100%;
|
|
|
- width: 260px;
|
|
|
- }
|
|
|
- &--collapsed {
|
|
|
- margin-left: -10px;
|
|
|
- .local_aside {
|
|
|
- width: 0;
|
|
|
- }
|
|
|
+.aside-wrap--collapsed {
|
|
|
+ margin-left: -10px;
|
|
|
+ .menu-card {
|
|
|
+ width: 0;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
luoyali