This commit is contained in:
xiaozhiyong
2026-06-11 18:39:29 +08:00
parent 987b2c8f90
commit 0ae8ba168b
6 changed files with 655 additions and 48 deletions

View File

@@ -69,6 +69,8 @@
"/src/view/superAdmin/authority/components/apis.vue": "Apis",
"/src/view/superAdmin/authority/components/datas.vue": "Datas",
"/src/view/superAdmin/authority/components/menus.vue": "Menus",
"/src/view/superAdmin/dictionary/sysDictionary.vue": "SysDictionary",
"/src/view/superAdmin/dictionary/sysDictionaryDetail.vue": "SysDictionaryDetail",
"/src/view/superAdmin/index.vue": "SuperAdmin",
"/src/view/superAdmin/menu/components/components-cascader.vue": "ComponentsCascader",
"/src/view/superAdmin/menu/icon.vue": "Icon",

View File

@@ -1,5 +1,5 @@
import { findSysDictionary } from '@/api/sysDictionary'
import { getDictionaryTreeListByType } from '@/api/sysDictionaryDetail'
import { findSysDictionary } from '@/api/system/dictionary/sysDictionary'
import { getDictionaryTreeListByType } from '@/api/system/dictionary/sysDictionaryDetail'
import { defineStore } from 'pinia'
import { ref } from 'vue'
@@ -32,9 +32,7 @@ export const useDictionaryStore = defineStore('dictionary', () => {
label: item.label,
value: item.value,
extend: item.extend,
children: item.children
? filterTreeByDepth(item.children, currentDepth + 1, targetDepth)
: undefined
children: item.children ? filterTreeByDepth(item.children, currentDepth + 1, targetDepth) : undefined
}))
}
@@ -66,20 +64,12 @@ export const useDictionaryStore = defineStore('dictionary', () => {
label: item.label,
value: item.value,
extend: item.extend,
children:
item.children && item.children.length > 0
? normalizeTreeData(item.children)
: undefined
children: item.children && item.children.length > 0 ? normalizeTreeData(item.children) : undefined
}))
}
// 根据value和depth查找指定节点并返回其children
const findNodeByValue = (
items,
targetValue,
currentDepth = 1,
maxDepth = 0
) => {
const findNodeByValue = (items, targetValue, currentDepth = 1, maxDepth = 0) => {
for (const item of items) {
// 如果找到目标value的节点
if (item.value === targetValue) {
@@ -95,17 +85,8 @@ export const useDictionaryStore = defineStore('dictionary', () => {
}
// 如果当前深度小于最大深度继续在children中查找
if (
item.children &&
item.children.length > 0 &&
(maxDepth === 0 || currentDepth < maxDepth)
) {
const result = findNodeByValue(
item.children,
targetValue,
currentDepth + 1,
maxDepth
)
if (item.children && item.children.length > 0 && (maxDepth === 0 || currentDepth < maxDepth)) {
const result = findNodeByValue(item.children, targetValue, currentDepth + 1, maxDepth)
if (result !== null) {
return result
}
@@ -120,29 +101,16 @@ export const useDictionaryStore = defineStore('dictionary', () => {
// 构建缓存key包含value和depth信息
const cacheKey = `${type}_value_${value}_depth_${depth}`
if (
dictionaryMap.value[cacheKey] &&
dictionaryMap.value[cacheKey].length
) {
if (dictionaryMap.value[cacheKey] && dictionaryMap.value[cacheKey].length) {
return dictionaryMap.value[cacheKey]
}
try {
// 获取完整的树形结构数据
const treeRes = await getDictionaryTreeListByType({ type })
if (
treeRes.code === 0 &&
treeRes.data &&
treeRes.data.list &&
treeRes.data.list.length > 0
) {
if (treeRes.code === 0 && treeRes.data && treeRes.data.list && treeRes.data.list.length > 0) {
// 查找指定value的节点并返回其children
const targetNodeChildren = findNodeByValue(
treeRes.data.list,
value,
1,
depth
)
const targetNodeChildren = findNodeByValue(treeRes.data.list, value, 1, depth)
if (targetNodeChildren !== null) {
let resultData
@@ -179,12 +147,7 @@ export const useDictionaryStore = defineStore('dictionary', () => {
try {
// 首先尝试获取树形结构数据
const treeRes = await getDictionaryTreeListByType({ type })
if (
treeRes.code === 0 &&
treeRes.data &&
treeRes.data.list &&
treeRes.data.list.length > 0
) {
if (treeRes.code === 0 && treeRes.data && treeRes.data.list && treeRes.data.list.length > 0) {
// 使用树形结构数据
const treeData = treeRes.data.list

View File

@@ -0,0 +1,309 @@
<template>
<div>
<warning-bar title="获取字典且缓存方法已在前端utils/dictionary 已经封装完成 不必自己书写 使用方法查看文件内注释" />
<el-splitter class="h-full">
<el-splitter-panel size="400px" min="200px" max="800px" collapsible>
<div class="flex-none bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded p-4">
<div class="flex justify-between items-center relative">
<span class="text font-bold">字典列表</span>
<el-input
class="!absolute top-0 left-0 z-2 ease-in-out animate-slide-left"
placeholder="搜索"
v-if="showSearchInput"
v-model="searchName"
clearable
:autofocus="showSearchInput"
@clear="clearSearchInput"
:prefix-icon="Search"
v-click-outside="handleCloseSearchInput"
@keydown="handleInputKeyDown"
>
<template #append>
<el-button :type="searchName ? 'primary' : 'info'" @click="getTableData">搜索</el-button>
</template>
</el-input>
<el-button class="ml-auto" :icon="Search" @click="showSearchInputHandler"></el-button>
<el-button type="primary" @click="openDrawer" :icon="Plus"> </el-button>
</div>
<el-scrollbar class="mt-4" style="height: calc(100vh - 300px)">
<div
v-for="dictionary in dictionaryData"
:key="dictionary.ID"
class="rounded flex justify-between items-center px-2 py-4 cursor-pointer mt-2 hover:bg-blue-50 dark:hover:bg-blue-900 bg-gray-50 dark:bg-gray-800 gap-4"
:class="[
selectID === dictionary.ID ? 'text-active' : 'text-slate-700 dark:text-slate-50',
dictionary.parentID ? 'ml-4 border-l-2 border-blue-200' : ''
]"
@click="toDetail(dictionary)"
>
<div class="max-w-[160px] truncate">
<span v-if="dictionary.parentID" class="text-xs text-gray-400 mr-1"></span>
{{ dictionary.name }}
<span class="mr-auto text-sm">{{ dictionary.type }}</span>
</div>
<div class="min-w-[40px]">
<el-icon class="text-blue-500" @click.stop="updateSysDictionaryFunc(dictionary)">
<Edit />
</el-icon>
<el-icon class="ml-2 text-red-500" @click="deleteSysDictionaryFunc(dictionary)">
<Delete />
</el-icon>
</div>
</div>
</el-scrollbar>
</div>
</el-splitter-panel>
<el-splitter-panel :min="200">
<div class="flex-1 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900">
<sysDictionaryDetail :sys-dictionary-i-d="selectID" />
</div>
</el-splitter-panel>
</el-splitter>
<el-drawer v-model="drawerFormVisible" :size="appStore.drawerSize" :show-close="false" :before-close="closeDrawer">
<template #header>
<div class="flex justify-between items-center">
<span class="text-lg">{{ type === 'create' ? '添加字典' : '修改字典' }}</span>
<div>
<el-button @click="closeDrawer"> </el-button>
<el-button type="primary" @click="enterDrawer"> </el-button>
</div>
</div>
</template>
<el-form ref="drawerForm" :model="formData" :rules="rules" label-width="110px">
<el-form-item label="父级字典" prop="parentID">
<el-select
v-model="formData.parentID"
placeholder="请选择父级字典(可选)"
clearable
filterable
:style="{ width: '100%' }"
>
<el-option
v-for="dict in availableParentDictionaries"
:key="dict.ID"
:label="`${dict.name}${dict.type}`"
:value="dict.ID"
/>
</el-select>
</el-form-item>
<el-form-item label="字典名(中)" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典名(中)" clearable :style="{ width: '100%' }" />
</el-form-item>
<el-form-item label="字典名(英)" prop="type">
<el-input v-model="formData.type" placeholder="请输入字典名(英)" clearable :style="{ width: '100%' }" />
</el-form-item>
<el-form-item label="状态" prop="status" required>
<el-switch v-model="formData.status" active-text="开启" inactive-text="停用" />
</el-form-item>
<el-form-item label="描述" prop="desc">
<el-input v-model="formData.desc" placeholder="请输入描述" clearable :style="{ width: '100%' }" />
</el-form-item>
</el-form>
</el-drawer>
</div>
</template>
<script setup>
import {
createSysDictionary,
deleteSysDictionary,
updateSysDictionary,
findSysDictionary,
getSysDictionaryList
} from '@/api/system/dictionary/sysDictionary.js' // 此处请自行替换地址
import WarningBar from '@/components/warningBar/warningBar.vue'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import sysDictionaryDetail from './sysDictionaryDetail.vue'
import { Edit, Plus, Search } from '@element-plus/icons-vue'
import { useAppStore } from '@/pinia'
defineOptions({
name: 'SysDictionary'
})
const appStore = useAppStore()
const selectID = ref(0)
const formData = ref({
name: null,
type: null,
status: true,
desc: null,
parentID: null
})
const searchName = ref('')
const showSearchInput = ref(false)
const rules = ref({
name: [
{
required: true,
message: '请输入字典名(中)',
trigger: 'blur'
}
],
type: [
{
required: true,
message: '请输入字典名(英)',
trigger: 'blur'
}
],
desc: [
{
required: true,
message: '请输入描述',
trigger: 'blur'
}
]
})
const dictionaryData = ref([])
const availableParentDictionaries = ref([])
// 查询
const getTableData = async () => {
const res = await getSysDictionaryList({
name: searchName.value.trim()
})
if (res.code === 0) {
dictionaryData.value = res.data
selectID.value = res.data[0].ID
// 更新可选父级字典列表
updateAvailableParentDictionaries()
}
}
// 更新可选父级字典列表
const updateAvailableParentDictionaries = () => {
// 如果是编辑模式,排除当前字典及其子字典
if (type.value === 'update' && formData.value.ID) {
availableParentDictionaries.value = dictionaryData.value.filter((dict) => {
return dict.ID !== formData.value.ID && !isChildDictionary(dict.ID, formData.value.ID)
})
} else {
// 创建模式,显示所有字典
availableParentDictionaries.value = [...dictionaryData.value]
}
}
// 检查是否为子字典(防止循环引用)
const isChildDictionary = (dictId, parentId) => {
const dict = dictionaryData.value.find((d) => d.ID === dictId)
if (!dict || !dict.parentID) return false
if (dict.parentID === parentId) return true
return isChildDictionary(dict.parentID, parentId)
}
getTableData()
const toDetail = (row) => {
selectID.value = row.ID
}
const drawerFormVisible = ref(false)
const type = ref('')
const updateSysDictionaryFunc = async (row) => {
const res = await findSysDictionary({ ID: row.ID, status: row.status })
type.value = 'update'
if (res.code === 0) {
formData.value = res.data.resysDictionary
drawerFormVisible.value = true
// 更新可选父级字典列表
updateAvailableParentDictionaries()
}
}
const closeDrawer = () => {
drawerFormVisible.value = false
formData.value = {
name: null,
type: null,
status: true,
desc: null,
parentID: null
}
}
const deleteSysDictionaryFunc = async (row) => {
ElMessageBox.confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const res = await deleteSysDictionary({ ID: row.ID })
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功'
})
getTableData()
}
})
}
const drawerForm = ref(null)
const enterDrawer = async () => {
drawerForm.value.validate(async (valid) => {
if (!valid) return
let res
switch (type.value) {
case 'create':
res = await createSysDictionary(formData.value)
break
case 'update':
res = await updateSysDictionary(formData.value)
break
default:
res = await createSysDictionary(formData.value)
break
}
if (res.code === 0) {
ElMessage.success('操作成功')
closeDrawer()
getTableData()
}
})
}
const openDrawer = () => {
type.value = 'create'
drawerForm.value && drawerForm.value.clearValidate()
drawerFormVisible.value = true
// 更新可选父级字典列表
updateAvailableParentDictionaries()
}
const clearSearchInput = () => {
if (!showSearchInput.value) return
searchName.value = ''
showSearchInput.value = false
getTableData()
}
const handleCloseSearchInput = () => {
if (!showSearchInput.value || searchName.value.trim() != '') return
showSearchInput.value = false
}
const showSearchInputHandler = () => {
showSearchInput.value = true
}
const handleInputKeyDown = (e) => {
if (e.key === 'Enter' && searchName.value.trim() !== '') {
getTableData()
}
}
</script>
<style>
.dict-box {
height: calc(100vh - 240px);
}
.active {
background-color: var(--el-color-primary) !important;
color: #fff;
}
</style>

View File

@@ -0,0 +1,333 @@
<template>
<div>
<div class="gva-table-box">
<div class="gva-btn-list justify-between flex items-center">
<span class="text font-bold">字典详细内容</span>
<div class="flex items-center gap-2">
<el-input
placeholder="搜索展示值"
v-model="searchName"
clearable
class="!w-64"
@clear="clearSearchInput"
:prefix-icon="Search"
v-click-outside="handleCloseSearchInput"
@keydown="handleInputKeyDown"
>
<template #append>
<el-button :type="searchName ? 'primary' : 'info'" @click="getTreeData">搜索</el-button>
</template>
</el-input>
<el-button type="primary" icon="plus" @click="openDrawer"> 新增字典项 </el-button>
</div>
</div>
<!-- 表格视图 -->
<el-table
:data="treeData"
style="width: 100%"
tooltip-effect="dark"
:tree-props="{ children: 'children' }"
row-key="ID"
default-expand-all
>
<el-table-column type="selection" width="55" />
<el-table-column align="left" label="展示值" prop="label" min-width="240" />
<el-table-column align="left" label="字典值" prop="value" />
<el-table-column align="left" label="扩展值" prop="extend" />
<el-table-column align="left" label="日期" width="180">
<template #default="scope">
{{ formatDate(scope.row.CreatedAt) }}
</template>
</el-table-column>
<el-table-column align="left" label="层级" prop="level" width="80" />
<el-table-column align="left" label="启用状态" prop="status" width="120">
<template #default="scope">
{{ formatBoolean(scope.row.status) }}
</template>
</el-table-column>
<el-table-column align="left" label="排序标记" prop="sort" width="120" />
<el-table-column align="left" label="操作" :min-width="appStore.operateMinWith">
<template #default="scope">
<el-button type="success" link icon="plus" @click="addChildNode(scope.row)"> 添加子项 </el-button>
<el-button type="primary" link icon="edit" @click="updateSysDictionaryDetailFunc(scope.row)">
变更
</el-button>
<el-button type="primary" link icon="delete" @click="deleteSysDictionaryDetailFunc(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-drawer v-model="drawerFormVisible" :size="appStore.drawerSize" :show-close="false" :before-close="closeDrawer">
<template #header>
<div class="flex justify-between items-center">
<span class="text-lg">{{ type === 'create' ? '添加字典项' : '修改字典项' }}</span>
<div>
<el-button @click="closeDrawer"> </el-button>
<el-button type="primary" @click="enterDrawer"> </el-button>
</div>
</div>
</template>
<el-form ref="drawerForm" :model="formData" :rules="rules" label-width="110px">
<el-form-item label="父级字典项" prop="parentID">
<el-cascader
v-model="formData.parentID"
:options="[rootOption, ...treeData]"
:props="cascadeProps"
placeholder="请选择父级字典项(可选)"
clearable
filterable
:style="{ width: '100%' }"
@change="handleParentChange"
/>
</el-form-item>
<el-form-item label="展示值" prop="label">
<el-input v-model="formData.label" placeholder="请输入展示值" clearable :style="{ width: '100%' }" />
</el-form-item>
<el-form-item label="字典值" prop="value">
<el-input v-model="formData.value" placeholder="请输入字典值" clearable :style="{ width: '100%' }" />
</el-form-item>
<el-form-item label="扩展值" prop="extend">
<el-input v-model="formData.extend" placeholder="请输入扩展值" clearable :style="{ width: '100%' }" />
</el-form-item>
<el-form-item label="启用状态" prop="status" required>
<el-switch v-model="formData.status" active-text="开启" inactive-text="停用" />
</el-form-item>
<el-form-item label="排序标记" prop="sort">
<el-input-number v-model.number="formData.sort" placeholder="排序标记" />
</el-form-item>
</el-form>
</el-drawer>
</div>
</template>
<script setup>
import {
createSysDictionaryDetail,
deleteSysDictionaryDetail,
updateSysDictionaryDetail,
findSysDictionaryDetail,
getDictionaryTreeList
} from '@/api/system/dictionary/sysDictionaryDetail' // 此处请自行替换地址
import { ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatBoolean, formatDate } from '@/utils/format'
import { useAppStore } from '@/pinia'
import { Search } from '@element-plus/icons-vue'
defineOptions({
name: 'SysDictionaryDetail'
})
const appStore = useAppStore()
const searchName = ref('')
const props = defineProps({
sysDictionaryID: {
type: Number,
default: 0
}
})
const formData = ref({
label: null,
value: null,
status: true,
sort: null,
parentID: null
})
const rules = ref({
label: [
{
required: true,
message: '请输入展示值',
trigger: 'blur'
}
],
value: [
{
required: true,
message: '请输入字典值',
trigger: 'blur'
}
],
sort: [
{
required: true,
message: '排序标记',
trigger: 'blur'
}
]
})
const treeData = ref([])
// 级联选择器配置
const cascadeProps = {
value: 'ID',
label: 'label',
children: 'children',
checkStrictly: true, // 允许选择任意级别
emitPath: false // 只返回选中节点的值
}
// 获取树形数据
const getTreeData = async () => {
if (!props.sysDictionaryID) return
try {
const res = await getDictionaryTreeList({
sysDictionaryID: props.sysDictionaryID
})
if (res.code === 0) {
treeData.value = res.data.list || []
}
} catch (error) {
console.error('获取树形数据失败:', error)
ElMessage.error('获取层级数据失败')
}
}
const rootOption = {
ID: null,
label: '无父级(根级)'
}
// 初始加载
getTreeData()
const type = ref('')
const drawerFormVisible = ref(false)
const updateSysDictionaryDetailFunc = async (row) => {
drawerForm.value && drawerForm.value.clearValidate()
const res = await findSysDictionaryDetail({ ID: row.ID })
type.value = 'update'
if (res.code === 0) {
formData.value = res.data.reSysDictionaryDetail
drawerFormVisible.value = true
}
}
// 添加子节点
const addChildNode = (parentNode) => {
console.log(parentNode)
type.value = 'create'
formData.value = {
label: null,
value: null,
status: true,
sort: null,
parentID: parentNode.ID,
sysDictionaryID: props.sysDictionaryID
}
drawerForm.value && drawerForm.value.clearValidate()
drawerFormVisible.value = true
}
// 处理父级选择变化
const handleParentChange = (value) => {
formData.value.parentID = value
}
const closeDrawer = () => {
drawerFormVisible.value = false
formData.value = {
label: null,
value: null,
status: true,
sort: null,
parentID: null,
sysDictionaryID: props.sysDictionaryID
}
}
const deleteSysDictionaryDetailFunc = async (row) => {
ElMessageBox.confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const res = await deleteSysDictionaryDetail({ ID: row.ID })
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功'
})
if (tableData.value.length === 1 && page.value > 1) {
page.value--
}
await getTreeData() // 重新加载数据
}
})
}
const drawerForm = ref(null)
const enterDrawer = async () => {
drawerForm.value.validate(async (valid) => {
formData.value.sysDictionaryID = props.sysDictionaryID
if (!valid) return
let res
switch (type.value) {
case 'create':
res = await createSysDictionaryDetail(formData.value)
break
case 'update':
res = await updateSysDictionaryDetail(formData.value)
break
default:
res = await createSysDictionaryDetail(formData.value)
break
}
if (res.code === 0) {
ElMessage({
type: 'success',
message: '创建/更改成功'
})
closeDrawer()
await getTreeData() // 重新加载数据
}
})
}
const openDrawer = () => {
type.value = 'create'
formData.value.parentID = null
drawerForm.value && drawerForm.value.clearValidate()
drawerFormVisible.value = true
}
const clearSearchInput = () => {
searchName.value = ''
getTreeData()
}
const handleCloseSearchInput = () => {
// 处理搜索输入框关闭
}
const handleInputKeyDown = (e) => {
if (e.key === 'Enter' && searchName.value.trim() !== '') {
getTreeData()
}
}
watch(
() => props.sysDictionaryID,
() => {
getTreeData()
}
)
</script>
<style scoped></style>