601 lines
16 KiB
Vue
601 lines
16 KiB
Vue
<template>
|
||
<div class="pages-sidebar-layout dictionary-page">
|
||
<!-- 左侧：字典类型列表 -->
|
||
<div class="left-box">
|
||
<div class="header">
|
||
<a-input v-model:value="dictionaryKeyword" placeholder="搜索字典..." allow-clear @change="handleDictionarySearch">
|
||
<template #prefix>
|
||
<SearchOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||
</template>
|
||
</a-input>
|
||
<a-button type="primary" size="small" style="margin-top: 12px; width: 100%" @click="handleAddDictionary">
|
||
<PlusOutlined /> 新增字典
|
||
</a-button>
|
||
</div>
|
||
|
||
<div class="body">
|
||
<!-- 字典列表 -->
|
||
<div v-if="filteredDictionaries.length > 0" class="dictionary-list">
|
||
<div v-for="item in filteredDictionaries" :key="item.id"
|
||
:class="['dictionary-item', { 'active': selectedDictionaryId === item.id }]"
|
||
@click="handleSelectDictionary(item)">
|
||
<div class="item-main">
|
||
<div class="item-name">{{ item.name }}</div>
|
||
<div class="item-code">{{ item.code }}</div>
|
||
</div>
|
||
<div class="item-meta">
|
||
<a-tag :color="item.status ? 'success' : 'default'" size="small">
|
||
{{ item.status ? '启用' : '禁用' }}
|
||
</a-tag>
|
||
<span class="item-count">{{ item.items_count || 0 }} 项</span>
|
||
</div>
|
||
<div class="item-actions" @click.stop>
|
||
<a-dropdown>
|
||
<a-button type="text" size="small">
|
||
<MoreOutlined />
|
||
</a-button>
|
||
<template #overlay>
|
||
<a-menu>
|
||
<a-menu-item @click="handleEditDictionary(item)">
|
||
<EditOutlined />编辑
|
||
</a-menu-item>
|
||
<a-menu-item @click="handleDeleteDictionary(item)" danger>
|
||
<DeleteOutlined />删除
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<a-empty v-else-if="!dictionaryLoading" description="暂无字典类型" :image-size="80">
|
||
<a-button type="primary" @click="handleAddDictionary">
|
||
创建第一个字典
|
||
</a-button>
|
||
</a-empty>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：字典项表格 -->
|
||
<div class="right-box">
|
||
<!-- 工具栏 -->
|
||
<div class="tool-bar">
|
||
<div class="left-panel">
|
||
<a-space>
|
||
<a-input v-model:value="searchForm.label" placeholder="标签名称" allow-clear style="width: 140px" />
|
||
<a-input v-model:value="searchForm.value" placeholder="数据值" allow-clear style="width: 140px" />
|
||
<a-select v-model:value="searchForm.status" placeholder="状态" allow-clear style="width: 100px">
|
||
<a-select-option :value="true">启用</a-select-option>
|
||
<a-select-option :value="false">禁用</a-select-option>
|
||
</a-select>
|
||
<a-button type="primary" @click="handleItemSearch">
|
||
<template #icon><SearchOutlined /></template>
|
||
搜索
|
||
</a-button>
|
||
<a-button @click="handleItemReset">
|
||
<template #icon><RedoOutlined /></template>
|
||
重置
|
||
</a-button>
|
||
</a-space>
|
||
</div>
|
||
|
||
<div class="right-panel">
|
||
<a-dropdown :disabled="selectedRows.length === 0">
|
||
<a-button :disabled="selectedRows.length === 0">
|
||
批量操作
|
||
<DownOutlined />
|
||
</a-button>
|
||
<template #overlay>
|
||
<a-menu>
|
||
<a-menu-item @click="handleBatchStatus">
|
||
<CheckCircleOutlined />批量启用/禁用
|
||
</a-menu-item>
|
||
<a-menu-divider />
|
||
<a-menu-item @click="handleBatchDelete" danger>
|
||
<DeleteOutlined />批量删除
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
<a-button type="primary" :disabled="!selectedDictionaryId" @click="handleAddItem">
|
||
<template #icon><PlusOutlined /></template>
|
||
新增
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表格内容 -->
|
||
<div class="table-content">
|
||
<!-- 空状态：未选择字典 -->
|
||
<div v-if="!selectedDictionaryId" class="empty-state">
|
||
<a-empty description="请选择左侧字典类型后操作" :image-size="120" />
|
||
</div>
|
||
|
||
<!-- 字典项表格 -->
|
||
<scTable v-else ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
|
||
:pagination="pagination" :row-key="rowKey" :row-selection="rowSelection" @refresh="refreshTable"
|
||
@paginationChange="handlePaginationChange" @select="handleSelectChange" @selectAll="handleSelectAll">
|
||
<template #color="{ record }">
|
||
<span v-if="record.color" class="color-cell" :style="{ backgroundColor: record.color }"></span>
|
||
<span v-else>-</span>
|
||
</template>
|
||
|
||
<template #is_default="{ record }">
|
||
<a-tag v-if="record.is_default" color="orange">
|
||
<StarOutlined />默认
|
||
</a-tag>
|
||
<span v-else>-</span>
|
||
</template>
|
||
|
||
<template #status="{ record }">
|
||
<a-tag :color="record.status ? 'success' : 'error'">
|
||
{{ record.status ? '启用' : '禁用' }}
|
||
</a-tag>
|
||
</template>
|
||
|
||
<template #action="{ record }">
|
||
<a-space>
|
||
<a-button type="link" size="small" @click="handleEditItem(record)">
|
||
编辑
|
||
</a-button>
|
||
<a-popconfirm title="确定删除该字典项吗？" @confirm="handleDeleteItem(record)">
|
||
<a-button type="link" size="small" danger>删除</a-button>
|
||
</a-popconfirm>
|
||
</a-space>
|
||
</template>
|
||
</scTable>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 字典类型弹窗 -->
|
||
<DictionaryDialog v-if="dialog.dictionary" v-model:visible="dialog.dictionary" :record="currentDictionary"
|
||
:dictionary-list="dictionaryList" @success="handleDictionarySuccess" />
|
||
|
||
<!-- 字典项弹窗 -->
|
||
<ItemDialog v-if="dialog.item" v-model:visible="dialog.item" :record="currentItem"
|
||
:dictionary-id="selectedDictionaryId" :item-list="tableData" @success="handleItemSuccess" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, h } from 'vue'
|
||
import { message, Modal } from 'ant-design-vue'
|
||
import {
|
||
SearchOutlined,
|
||
RedoOutlined,
|
||
PlusOutlined,
|
||
DeleteOutlined,
|
||
EditOutlined,
|
||
MoreOutlined,
|
||
CheckCircleOutlined,
|
||
StarOutlined,
|
||
ExclamationCircleOutlined
|
||
} from '@ant-design/icons-vue'
|
||
import { useTable } from '@/hooks/useTable'
|
||
import systemApi from '@/api/system'
|
||
import scTable from '@/components/scTable/index.vue'
|
||
import DictionaryDialog from './components/DictionaryDialog.vue'
|
||
import ItemDialog from './components/ItemDialog.vue'
|
||
import dictionaryCache from '@/utils/dictionaryCache'
|
||
|
||
// ===== 字典列表相关 =====
|
||
const dictionaryList = ref([])
|
||
const filteredDictionaries = ref([])
|
||
const selectedDictionary = ref(null)
|
||
const selectedDictionaryId = ref(null)
|
||
const dictionaryKeyword = ref('')
|
||
const dictionaryLoading = ref(false)
|
||
|
||
// ===== 字典项相关（使用 useTable Hook）=====
|
||
const {
|
||
tableRef,
|
||
searchForm,
|
||
tableData,
|
||
loading,
|
||
pagination,
|
||
selectedRows,
|
||
rowSelection,
|
||
handleSearch,
|
||
handleReset,
|
||
handlePaginationChange,
|
||
handleSelectChange,
|
||
handleSelectAll,
|
||
refreshTable
|
||
} = useTable({
|
||
api: systemApi.dictionaryItems.list.get,
|
||
searchForm: {
|
||
dictionary_id: null,
|
||
label: '',
|
||
value: '',
|
||
status: undefined
|
||
},
|
||
columns: [],
|
||
needPagination: true,
|
||
needSelection: true,
|
||
immediateLoad: false // 不自动加载，等待选择字典
|
||
})
|
||
|
||
// 表格列配置
|
||
const columns = [
|
||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80, align: 'center' },
|
||
{ title: '标签名称', dataIndex: 'label', key: 'label', width: 150, ellipsis: true },
|
||
{ title: '数据值', dataIndex: 'value', key: 'value', width: 120, ellipsis: true },
|
||
{ title: '颜色', dataIndex: 'color', key: 'color', width: 100, align: 'center', slot: 'color' },
|
||
{ title: '默认项', dataIndex: 'is_default', key: 'is_default', width: 100, align: 'center', slot: 'is_default' },
|
||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
|
||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center', slot: 'status' },
|
||
{ title: '描述', dataIndex: 'description', key: 'description', ellipsis: true },
|
||
{ title: '操作', dataIndex: 'action', key: 'action', width: 150, align: 'center', fixed: 'right', slot: 'action' }
|
||
]
|
||
|
||
const rowKey = 'id'
|
||
|
||
// ===== 弹窗状态 =====
|
||
const dialog = reactive({
|
||
dictionary: false,
|
||
item: false
|
||
})
|
||
|
||
// ===== 当前操作的数据 =====
|
||
const currentDictionary = ref(null)
|
||
const currentItem = ref(null)
|
||
|
||
// ===== 方法：加载字典列表 =====
|
||
const loadDictionaryList = async () => {
|
||
try {
|
||
dictionaryLoading.value = true
|
||
const res = await systemApi.dictionaries.all.get()
|
||
if (res.code === 200) {
|
||
dictionaryList.value = res.data || []
|
||
filteredDictionaries.value = res.data || []
|
||
} else {
|
||
message.error(res.message || '加载字典列表失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('加载字典列表失败:', error)
|
||
message.error('加载字典列表失败')
|
||
} finally {
|
||
dictionaryLoading.value = false
|
||
}
|
||
}
|
||
|
||
// ===== 方法：搜索过滤字典 =====
|
||
const handleDictionarySearch = (e) => {
|
||
const keyword = e.target?.value || ''
|
||
dictionaryKeyword.value = keyword
|
||
|
||
if (!keyword) {
|
||
filteredDictionaries.value = dictionaryList.value
|
||
return
|
||
}
|
||
|
||
// 过滤字典列表（支持搜索名称和编码）
|
||
filteredDictionaries.value = dictionaryList.value.filter(dict => {
|
||
return dict.name.toLowerCase().includes(keyword.toLowerCase()) ||
|
||
dict.code.toLowerCase().includes(keyword.toLowerCase())
|
||
})
|
||
}
|
||
|
||
// ===== 方法：选择字典 =====
|
||
const handleSelectDictionary = (dictionary) => {
|
||
selectedDictionary.value = dictionary
|
||
selectedDictionaryId.value = dictionary.id
|
||
|
||
// 重置右侧搜索条件
|
||
searchForm.label = ''
|
||
searchForm.value = ''
|
||
searchForm.status = undefined
|
||
|
||
// 更新 dictionary_id
|
||
searchForm.dictionary_id = dictionary.id
|
||
|
||
// 加载字典项列表
|
||
handleItemSearch()
|
||
}
|
||
|
||
// ===== 方法：字典项搜索 =====
|
||
const handleItemSearch = () => {
|
||
if (!selectedDictionaryId.value) {
|
||
message.warning('请先选择字典类型')
|
||
return
|
||
}
|
||
searchForm.dictionary_id = selectedDictionaryId.value
|
||
handleSearch()
|
||
}
|
||
|
||
// ===== 方法：字典项重置 =====
|
||
const handleItemReset = () => {
|
||
searchForm.label = ''
|
||
searchForm.value = ''
|
||
searchForm.status = undefined
|
||
searchForm.dictionary_id = selectedDictionaryId.value
|
||
handleSearch()
|
||
}
|
||
|
||
// ===== 方法：新增字典 =====
|
||
const handleAddDictionary = () => {
|
||
currentDictionary.value = null
|
||
dialog.dictionary = true
|
||
}
|
||
|
||
// ===== 方法：编辑字典 =====
|
||
const handleEditDictionary = (dictionary) => {
|
||
currentDictionary.value = { ...dictionary }
|
||
dialog.dictionary = true
|
||
}
|
||
|
||
// ===== 方法：删除字典 =====
|
||
const handleDeleteDictionary = (dictionary) => {
|
||
const itemCount = dictionary.items_count || 0
|
||
|
||
Modal.confirm({
|
||
title: '确认删除',
|
||
content: itemCount > 0
|
||
? `确定删除字典类型"${dictionary.name}"吗？删除后该字典下的 ${itemCount} 个字典项也会被删除！`
|
||
: `确定删除字典类型"${dictionary.name}"吗？`,
|
||
okText: '删除',
|
||
okType: 'danger',
|
||
cancelText: '取消',
|
||
icon: h(ExclamationCircleOutlined),
|
||
onOk: async () => {
|
||
try {
|
||
const res = await systemApi.dictionaries.delete.delete(dictionary.id)
|
||
if (res.code === 200) {
|
||
message.success('删除成功')
|
||
|
||
// 如果删除的是当前选中的字典，清空右侧
|
||
if (selectedDictionaryId.value === dictionary.id) {
|
||
selectedDictionary.value = null
|
||
selectedDictionaryId.value = null
|
||
tableData.value = []
|
||
}
|
||
|
||
// 刷新字典列表
|
||
await loadDictionaryList()
|
||
} else {
|
||
message.error(res.message || '删除失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('删除字典失败:', error)
|
||
message.error('删除失败')
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// ===== 方法：新增字典项 =====
|
||
const handleAddItem = () => {
|
||
if (!selectedDictionaryId.value) {
|
||
message.warning('请先选择字典类型')
|
||
return
|
||
}
|
||
|
||
currentItem.value = null
|
||
dialog.item = true
|
||
}
|
||
|
||
// ===== 方法：编辑字典项 =====
|
||
const handleEditItem = (record) => {
|
||
currentItem.value = { ...record }
|
||
dialog.item = true
|
||
}
|
||
|
||
// ===== 方法：删除字典项 =====
|
||
const handleDeleteItem = async (record) => {
|
||
try {
|
||
const res = await systemApi.dictionaryItems.delete.delete(record.id)
|
||
if (res.code === 200) {
|
||
message.success('删除成功')
|
||
refreshTable()
|
||
// 刷新字典列表以更新项数量
|
||
loadDictionaryList()
|
||
} else {
|
||
message.error(res.message || '删除失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('删除字典项失败:', error)
|
||
message.error('删除失败')
|
||
}
|
||
}
|
||
|
||
// ===== 方法：批量删除字典项 =====
|
||
const handleBatchDelete = () => {
|
||
if (selectedRows.value.length === 0) {
|
||
message.warning('请选择要删除的字典项')
|
||
return
|
||
}
|
||
|
||
Modal.confirm({
|
||
title: '确认删除',
|
||
content: `确定删除选中的 ${selectedRows.value.length} 个字典项吗？`,
|
||
okText: '删除',
|
||
okType: 'danger',
|
||
cancelText: '取消',
|
||
icon: h(ExclamationCircleOutlined),
|
||
onOk: async () => {
|
||
try {
|
||
const ids = selectedRows.value.map(item => item.id)
|
||
const res = await systemApi.dictionaryItems.batchDelete.post({ ids })
|
||
if (res.code === 200) {
|
||
message.success('删除成功')
|
||
selectedRows.value = []
|
||
refreshTable()
|
||
loadDictionaryList()
|
||
} else {
|
||
message.error(res.message || '删除失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('批量删除失败:', error)
|
||
message.error('删除失败')
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// ===== 方法：批量启用/禁用字典项 =====
|
||
const handleBatchStatus = () => {
|
||
if (selectedRows.value.length === 0) {
|
||
message.warning('请选择要操作的字典项')
|
||
return
|
||
}
|
||
|
||
const newStatus = selectedRows.value[0].status ? false : true
|
||
const statusText = newStatus === 1 ? '启用' : '禁用'
|
||
|
||
Modal.confirm({
|
||
title: `确认${statusText}`,
|
||
content: `确定要${statusText}选中的 ${selectedRows.value.length} 个字典项吗？`,
|
||
okText: '确定',
|
||
cancelText: '取消',
|
||
onOk: async () => {
|
||
try {
|
||
const ids = selectedRows.value.map(item => item.id)
|
||
const res = await systemApi.dictionaryItems.batchStatus.post({
|
||
ids,
|
||
status: newStatus
|
||
})
|
||
if (res.code === 200) {
|
||
message.success(`${statusText}成功`)
|
||
selectedRows.value = []
|
||
refreshTable()
|
||
} else {
|
||
message.error(res.message || '操作失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('批量操作失败:', error)
|
||
message.error('操作失败')
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// ===== 方法：字典操作成功回调 =====
|
||
const handleDictionarySuccess = () => {
|
||
dialog.dictionary = false
|
||
// 清理字典缓存
|
||
dictionaryCache.clearDictionary()
|
||
loadDictionaryList()
|
||
}
|
||
|
||
// ===== 方法：字典项操作成功回调 =====
|
||
const handleItemSuccess = () => {
|
||
dialog.item = false
|
||
// 清理字典缓存
|
||
dictionaryCache.clearDictionary(selectedDictionaryId.value)
|
||
refreshTable()
|
||
loadDictionaryList()
|
||
}
|
||
|
||
// ===== 生命周期 =====
|
||
onMounted(() => {
|
||
// 加载字典列表
|
||
loadDictionaryList()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.dictionary-page {
|
||
// 左侧字典列表样式
|
||
.left-box {
|
||
.body {
|
||
padding: 16px;
|
||
position: relative;
|
||
|
||
.dictionary-list {
|
||
.dictionary-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px;
|
||
margin-bottom: 8px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
border: 1px solid #f0f0f0;
|
||
background: #fff;
|
||
|
||
&:hover {
|
||
background-color: #fafafa;
|
||
border-color: #d9d9d9;
|
||
|
||
.item-actions {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
background-color: #e6f7ff;
|
||
border-color: #1890ff;
|
||
}
|
||
|
||
.item-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
|
||
.item-name {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #262626;
|
||
margin-bottom: 4px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.item-code {
|
||
font-size: 12px;
|
||
color: #8c8c8c;
|
||
font-family: 'Consolas', 'Monaco', monospace;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.item-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
color: #8c8c8c;
|
||
margin-right: 8px;
|
||
|
||
.item-count {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.item-actions {
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 右侧空状态
|
||
.empty-state {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
// 表格自定义列样式
|
||
:deep(.sc-table) {
|
||
.color-cell {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 2px;
|
||
border: 1px solid #d9d9d9;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
</style>
|