更新
This commit is contained in:
@@ -69,6 +69,8 @@
|
|||||||
"/src/view/superAdmin/authority/components/apis.vue": "Apis",
|
"/src/view/superAdmin/authority/components/apis.vue": "Apis",
|
||||||
"/src/view/superAdmin/authority/components/datas.vue": "Datas",
|
"/src/view/superAdmin/authority/components/datas.vue": "Datas",
|
||||||
"/src/view/superAdmin/authority/components/menus.vue": "Menus",
|
"/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/index.vue": "SuperAdmin",
|
||||||
"/src/view/superAdmin/menu/components/components-cascader.vue": "ComponentsCascader",
|
"/src/view/superAdmin/menu/components/components-cascader.vue": "ComponentsCascader",
|
||||||
"/src/view/superAdmin/menu/icon.vue": "Icon",
|
"/src/view/superAdmin/menu/icon.vue": "Icon",
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { findSysDictionary } from '@/api/sysDictionary'
|
import { findSysDictionary } from '@/api/system/dictionary/sysDictionary'
|
||||||
import { getDictionaryTreeListByType } from '@/api/sysDictionaryDetail'
|
import { getDictionaryTreeListByType } from '@/api/system/dictionary/sysDictionaryDetail'
|
||||||
|
|
||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
@@ -32,9 +32,7 @@ export const useDictionaryStore = defineStore('dictionary', () => {
|
|||||||
label: item.label,
|
label: item.label,
|
||||||
value: item.value,
|
value: item.value,
|
||||||
extend: item.extend,
|
extend: item.extend,
|
||||||
children: item.children
|
children: item.children ? filterTreeByDepth(item.children, currentDepth + 1, targetDepth) : undefined
|
||||||
? filterTreeByDepth(item.children, currentDepth + 1, targetDepth)
|
|
||||||
: undefined
|
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -66,20 +64,12 @@ export const useDictionaryStore = defineStore('dictionary', () => {
|
|||||||
label: item.label,
|
label: item.label,
|
||||||
value: item.value,
|
value: item.value,
|
||||||
extend: item.extend,
|
extend: item.extend,
|
||||||
children:
|
children: item.children && item.children.length > 0 ? normalizeTreeData(item.children) : undefined
|
||||||
item.children && item.children.length > 0
|
|
||||||
? normalizeTreeData(item.children)
|
|
||||||
: undefined
|
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据value和depth查找指定节点并返回其children
|
// 根据value和depth查找指定节点并返回其children
|
||||||
const findNodeByValue = (
|
const findNodeByValue = (items, targetValue, currentDepth = 1, maxDepth = 0) => {
|
||||||
items,
|
|
||||||
targetValue,
|
|
||||||
currentDepth = 1,
|
|
||||||
maxDepth = 0
|
|
||||||
) => {
|
|
||||||
for (const item of items) {
|
for (const item of items) {
|
||||||
// 如果找到目标value的节点
|
// 如果找到目标value的节点
|
||||||
if (item.value === targetValue) {
|
if (item.value === targetValue) {
|
||||||
@@ -95,17 +85,8 @@ export const useDictionaryStore = defineStore('dictionary', () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 如果当前深度小于最大深度,继续在children中查找
|
// 如果当前深度小于最大深度,继续在children中查找
|
||||||
if (
|
if (item.children && item.children.length > 0 && (maxDepth === 0 || currentDepth < maxDepth)) {
|
||||||
item.children &&
|
const result = findNodeByValue(item.children, targetValue, currentDepth + 1, maxDepth)
|
||||||
item.children.length > 0 &&
|
|
||||||
(maxDepth === 0 || currentDepth < maxDepth)
|
|
||||||
) {
|
|
||||||
const result = findNodeByValue(
|
|
||||||
item.children,
|
|
||||||
targetValue,
|
|
||||||
currentDepth + 1,
|
|
||||||
maxDepth
|
|
||||||
)
|
|
||||||
if (result !== null) {
|
if (result !== null) {
|
||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
@@ -120,29 +101,16 @@ export const useDictionaryStore = defineStore('dictionary', () => {
|
|||||||
// 构建缓存key,包含value和depth信息
|
// 构建缓存key,包含value和depth信息
|
||||||
const cacheKey = `${type}_value_${value}_depth_${depth}`
|
const cacheKey = `${type}_value_${value}_depth_${depth}`
|
||||||
|
|
||||||
if (
|
if (dictionaryMap.value[cacheKey] && dictionaryMap.value[cacheKey].length) {
|
||||||
dictionaryMap.value[cacheKey] &&
|
|
||||||
dictionaryMap.value[cacheKey].length
|
|
||||||
) {
|
|
||||||
return dictionaryMap.value[cacheKey]
|
return dictionaryMap.value[cacheKey]
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// 获取完整的树形结构数据
|
// 获取完整的树形结构数据
|
||||||
const treeRes = await getDictionaryTreeListByType({ type })
|
const treeRes = await getDictionaryTreeListByType({ type })
|
||||||
if (
|
if (treeRes.code === 0 && treeRes.data && treeRes.data.list && treeRes.data.list.length > 0) {
|
||||||
treeRes.code === 0 &&
|
|
||||||
treeRes.data &&
|
|
||||||
treeRes.data.list &&
|
|
||||||
treeRes.data.list.length > 0
|
|
||||||
) {
|
|
||||||
// 查找指定value的节点并返回其children
|
// 查找指定value的节点并返回其children
|
||||||
const targetNodeChildren = findNodeByValue(
|
const targetNodeChildren = findNodeByValue(treeRes.data.list, value, 1, depth)
|
||||||
treeRes.data.list,
|
|
||||||
value,
|
|
||||||
1,
|
|
||||||
depth
|
|
||||||
)
|
|
||||||
|
|
||||||
if (targetNodeChildren !== null) {
|
if (targetNodeChildren !== null) {
|
||||||
let resultData
|
let resultData
|
||||||
@@ -179,12 +147,7 @@ export const useDictionaryStore = defineStore('dictionary', () => {
|
|||||||
try {
|
try {
|
||||||
// 首先尝试获取树形结构数据
|
// 首先尝试获取树形结构数据
|
||||||
const treeRes = await getDictionaryTreeListByType({ type })
|
const treeRes = await getDictionaryTreeListByType({ type })
|
||||||
if (
|
if (treeRes.code === 0 && treeRes.data && treeRes.data.list && treeRes.data.list.length > 0) {
|
||||||
treeRes.code === 0 &&
|
|
||||||
treeRes.data &&
|
|
||||||
treeRes.data.list &&
|
|
||||||
treeRes.data.list.length > 0
|
|
||||||
) {
|
|
||||||
// 使用树形结构数据
|
// 使用树形结构数据
|
||||||
const treeData = treeRes.data.list
|
const treeData = treeRes.data.list
|
||||||
|
|
||||||
|
|||||||
309
src/view/superAdmin/dictionary/sysDictionary.vue
Normal file
309
src/view/superAdmin/dictionary/sysDictionary.vue
Normal 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>
|
||||||
333
src/view/superAdmin/dictionary/sysDictionaryDetail.vue
Normal file
333
src/view/superAdmin/dictionary/sysDictionaryDetail.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user