更新
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
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