b5d95c95d8
- 字典管理：左右分栏主从布局，20 个字典类型，el-scrollbar 滚动 - 组织管理：树形表格 + 上级组织 tree-select，级联删除下级 - ty-table 新增树形支持（row-key/tree-props/default-expand-all） - ty-form 新增 tree-select 控件（format/treeData/treeProps） - JsonSchemaProperty 扩展 tree-select 相关字段 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
403 lines
18 KiB
Vue
403 lines
18 KiB
Vue
<template>
|
|
<div class="dict-page">
|
|
<el-card class="dict-page__types" shadow="never">
|
|
<div class="dict-page__type-head">
|
|
<el-input v-model="typeKeyword" placeholder="搜索字典类型" clearable class="min-w-0 flex-1" />
|
|
<el-button type="primary" @click="openTypeCreate">新增</el-button>
|
|
</div>
|
|
|
|
<div class="dict-page__type-list">
|
|
<el-scrollbar class="h-full">
|
|
<div
|
|
v-for="t in filteredTypes"
|
|
:key="t.code"
|
|
class="dict-page__type-item"
|
|
:class="{ 'is-active': t.code === selectedType?.code }"
|
|
@click="selectType(t)"
|
|
>
|
|
<div class="dict-page__type-item-row">
|
|
<span class="dict-page__type-item-name">{{ t.name }}</span>
|
|
<div class="dict-page__type-item-actions" @click.stop>
|
|
<el-button link type="primary" size="small" @click="openTypeEdit(t)">编辑</el-button>
|
|
<el-button link type="danger" size="small" @click="removeType(t)">删除</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="dict-page__type-item-meta">
|
|
<span class="dict-page__type-item-code">{{ t.code }}</span>
|
|
<el-tag :type="t.status === 'enabled' ? 'success' : 'info'" size="small">
|
|
{{ t.status === 'enabled' ? '启用' : '停用' }}
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
<el-empty v-if="filteredTypes.length === 0" description="无匹配的字典类型" :image-size="60" />
|
|
</el-scrollbar>
|
|
</div>
|
|
</el-card>
|
|
|
|
<div class="dict-page__items">
|
|
<ty-crud
|
|
v-if="selectedType"
|
|
:key="selectedType.code"
|
|
entity-name="字典项"
|
|
:columns="itemColumns"
|
|
:search-schema="itemSearchSchema"
|
|
:form-schema="itemFormSchema"
|
|
:list="listItems"
|
|
:create="createItem"
|
|
:update="updateItem"
|
|
:remove="removeItem"
|
|
id-key="id"
|
|
name-key="label"
|
|
/>
|
|
<div v-else class="dict-page__items-empty">
|
|
<el-empty description="请选择或新增字典类型" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import type { JsonSchema, PageQuery, PageResult, TableColumn } from '@/types/crud'
|
|
import TyForm from '@/components/ty-form.vue'
|
|
import { showDialog } from '@/utils/dialog'
|
|
|
|
const STATUS_MAP = {
|
|
enabled: { label: '启用', type: 'success' },
|
|
disabled: { label: '停用', type: 'info' },
|
|
} as const
|
|
|
|
// ---- 占位数据（后续对接后端时替换为 http 调用）----
|
|
interface DictTypeRow {
|
|
id: string
|
|
code: string
|
|
name: string
|
|
status: 'enabled' | 'disabled'
|
|
remark?: string
|
|
createdAt: number
|
|
}
|
|
|
|
interface DictItemRow {
|
|
id: string
|
|
dictTypeCode: string
|
|
label: string
|
|
value: string
|
|
sort: number
|
|
status: 'enabled' | 'disabled'
|
|
createdAt: number
|
|
}
|
|
|
|
const now = Date.now()
|
|
const day = 24 * 60 * 60 * 1000
|
|
|
|
const dictTypes: DictTypeRow[] = [
|
|
{ id: 'dt-1', code: 'sys_status', name: '系统状态', status: 'enabled', remark: '通用启用/停用状态', createdAt: now - 30 * day },
|
|
{ id: 'dt-2', code: 'sys_sex', name: '用户性别', status: 'enabled', remark: '性别选项', createdAt: now - 29 * day },
|
|
{ id: 'dt-3', code: 'menu_type', name: '菜单类型', status: 'enabled', remark: '菜单/按钮/接口', createdAt: now - 28 * day },
|
|
{ id: 'dt-4', code: 'oper_type', name: '操作类型', status: 'enabled', remark: '操作日志动作分类', createdAt: now - 27 * day },
|
|
{ id: 'dt-5', code: 'sys_yes_no', name: '系统是否', status: 'enabled', remark: '是否判断', createdAt: now - 26 * day },
|
|
{ id: 'dt-6', code: 'login_status', name: '登录状态', status: 'enabled', remark: '登录结果', createdAt: now - 25 * day },
|
|
{ id: 'dt-7', code: 'audit_status', name: '操作结果', status: 'enabled', remark: '审计结果', createdAt: now - 24 * day },
|
|
{ id: 'dt-8', code: 'notice_type', name: '通知类型', status: 'enabled', remark: '通知/公告', createdAt: now - 23 * day },
|
|
{ id: 'dt-9', code: 'job_group', name: '任务分组', status: 'enabled', remark: '定时任务分组', createdAt: now - 22 * day },
|
|
{ id: 'dt-10', code: 'job_status', name: '任务状态', status: 'enabled', remark: '任务运行状态', createdAt: now - 21 * day },
|
|
{ id: 'dt-11', code: 'tenant_status', name: '租户状态', status: 'enabled', remark: '租户启用/停用', createdAt: now - 20 * day },
|
|
{ id: 'dt-12', code: 'data_scope', name: '数据权限', status: 'enabled', remark: '角色数据权限档位', createdAt: now - 19 * day },
|
|
{ id: 'dt-13', code: 'log_type', name: '日志类型', status: 'enabled', remark: '操作/登录日志', createdAt: now - 18 * day },
|
|
{ id: 'dt-14', code: 'message_status', name: '消息状态', status: 'enabled', remark: '消息已读/未读', createdAt: now - 17 * day },
|
|
{ id: 'dt-15', code: 'priority_level', name: '优先级', status: 'enabled', remark: '任务优先级', createdAt: now - 16 * day },
|
|
{ id: 'dt-16', code: 'deploy_env', name: '部署环境', status: 'enabled', remark: '开发/测试/生产', createdAt: now - 15 * day },
|
|
{ id: 'dt-17', code: 'language', name: '语言', status: 'enabled', remark: '系统语言', createdAt: now - 14 * day },
|
|
{ id: 'dt-18', code: 'cache_type', name: '缓存类型', status: 'enabled', remark: '缓存介质', createdAt: now - 13 * day },
|
|
{ id: 'dt-19', code: 'report_type', name: '报表类型', status: 'disabled', remark: '预留：报表分类', createdAt: now - 12 * day },
|
|
{ id: 'dt-20', code: 'theme_mode', name: '主题模式', status: 'enabled', remark: '明亮/暗黑', createdAt: now - 11 * day },
|
|
]
|
|
|
|
const dictItems: DictItemRow[] = [
|
|
{ id: 'di-1', dictTypeCode: 'sys_status', label: '启用', value: 'enabled', sort: 1, status: 'enabled', createdAt: now - 10 * day },
|
|
{ id: 'di-2', dictTypeCode: 'sys_status', label: '停用', value: 'disabled', sort: 2, status: 'enabled', createdAt: now - 10 * day },
|
|
{ id: 'di-3', dictTypeCode: 'sys_sex', label: '男', value: 'male', sort: 1, status: 'enabled', createdAt: now - 9 * day },
|
|
{ id: 'di-4', dictTypeCode: 'sys_sex', label: '女', value: 'female', sort: 2, status: 'enabled', createdAt: now - 9 * day },
|
|
{ id: 'di-5', dictTypeCode: 'sys_sex', label: '未知', value: 'unknown', sort: 3, status: 'enabled', createdAt: now - 9 * day },
|
|
{ id: 'di-6', dictTypeCode: 'menu_type', label: '目录', value: 'dir', sort: 1, status: 'enabled', createdAt: now - 8 * day },
|
|
{ id: 'di-7', dictTypeCode: 'menu_type', label: '菜单', value: 'menu', sort: 2, status: 'enabled', createdAt: now - 8 * day },
|
|
{ id: 'di-8', dictTypeCode: 'menu_type', label: '按钮', value: 'button', sort: 3, status: 'enabled', createdAt: now - 8 * day },
|
|
{ id: 'di-9', dictTypeCode: 'menu_type', label: '接口', value: 'api', sort: 4, status: 'enabled', createdAt: now - 8 * day },
|
|
{ id: 'di-10', dictTypeCode: 'oper_type', label: '新增', value: 'create', sort: 1, status: 'enabled', createdAt: now - 7 * day },
|
|
{ id: 'di-11', dictTypeCode: 'oper_type', label: '修改', value: 'update', sort: 2, status: 'enabled', createdAt: now - 7 * day },
|
|
{ id: 'di-12', dictTypeCode: 'oper_type', label: '删除', value: 'delete', sort: 3, status: 'enabled', createdAt: now - 7 * day },
|
|
{ id: 'di-13', dictTypeCode: 'oper_type', label: '查询', value: 'query', sort: 4, status: 'enabled', createdAt: now - 7 * day },
|
|
{ id: 'di-14', dictTypeCode: 'sys_yes_no', label: '是', value: 'yes', sort: 1, status: 'enabled', createdAt: now - 9 * day },
|
|
{ id: 'di-15', dictTypeCode: 'sys_yes_no', label: '否', value: 'no', sort: 2, status: 'enabled', createdAt: now - 9 * day },
|
|
{ id: 'di-16', dictTypeCode: 'login_status', label: '成功', value: 'success', sort: 1, status: 'enabled', createdAt: now - 8 * day },
|
|
{ id: 'di-17', dictTypeCode: 'login_status', label: '失败', value: 'fail', sort: 2, status: 'enabled', createdAt: now - 8 * day },
|
|
{ id: 'di-18', dictTypeCode: 'audit_status', label: '成功', value: 'success', sort: 1, status: 'enabled', createdAt: now - 8 * day },
|
|
{ id: 'di-19', dictTypeCode: 'audit_status', label: '失败', value: 'fail', sort: 2, status: 'enabled', createdAt: now - 8 * day },
|
|
{ id: 'di-20', dictTypeCode: 'notice_type', label: '通知', value: 'notice', sort: 1, status: 'enabled', createdAt: now - 7 * day },
|
|
{ id: 'di-21', dictTypeCode: 'notice_type', label: '公告', value: 'announcement', sort: 2, status: 'enabled', createdAt: now - 7 * day },
|
|
{ id: 'di-22', dictTypeCode: 'job_group', label: '系统', value: 'system', sort: 1, status: 'enabled', createdAt: now - 7 * day },
|
|
{ id: 'di-23', dictTypeCode: 'job_group', label: '默认', value: 'default', sort: 2, status: 'enabled', createdAt: now - 7 * day },
|
|
{ id: 'di-24', dictTypeCode: 'job_status', label: '运行', value: 'running', sort: 1, status: 'enabled', createdAt: now - 6 * day },
|
|
{ id: 'di-25', dictTypeCode: 'job_status', label: '暂停', value: 'paused', sort: 2, status: 'enabled', createdAt: now - 6 * day },
|
|
{ id: 'di-26', dictTypeCode: 'tenant_status', label: '启用', value: 'enabled', sort: 1, status: 'enabled', createdAt: now - 6 * day },
|
|
{ id: 'di-27', dictTypeCode: 'tenant_status', label: '停用', value: 'disabled', sort: 2, status: 'enabled', createdAt: now - 6 * day },
|
|
{ id: 'di-28', dictTypeCode: 'data_scope', label: '全部', value: 'all', sort: 1, status: 'enabled', createdAt: now - 5 * day },
|
|
{ id: 'di-29', dictTypeCode: 'data_scope', label: '本部门', value: 'dept', sort: 2, status: 'enabled', createdAt: now - 5 * day },
|
|
{ id: 'di-30', dictTypeCode: 'data_scope', label: '本部门及以下', value: 'dept_and_child', sort: 3, status: 'enabled', createdAt: now - 5 * day },
|
|
{ id: 'di-31', dictTypeCode: 'data_scope', label: '本人', value: 'self', sort: 4, status: 'enabled', createdAt: now - 5 * day },
|
|
{ id: 'di-32', dictTypeCode: 'data_scope', label: '自定义', value: 'custom', sort: 5, status: 'enabled', createdAt: now - 5 * day },
|
|
{ id: 'di-33', dictTypeCode: 'log_type', label: '操作', value: 'operate', sort: 1, status: 'enabled', createdAt: now - 5 * day },
|
|
{ id: 'di-34', dictTypeCode: 'log_type', label: '登录', value: 'login', sort: 2, status: 'enabled', createdAt: now - 5 * day },
|
|
{ id: 'di-35', dictTypeCode: 'message_status', label: '未读', value: 'unread', sort: 1, status: 'enabled', createdAt: now - 4 * day },
|
|
{ id: 'di-36', dictTypeCode: 'message_status', label: '已读', value: 'read', sort: 2, status: 'enabled', createdAt: now - 4 * day },
|
|
{ id: 'di-37', dictTypeCode: 'priority_level', label: '低', value: 'low', sort: 1, status: 'enabled', createdAt: now - 4 * day },
|
|
{ id: 'di-38', dictTypeCode: 'priority_level', label: '中', value: 'medium', sort: 2, status: 'enabled', createdAt: now - 4 * day },
|
|
{ id: 'di-39', dictTypeCode: 'priority_level', label: '高', value: 'high', sort: 3, status: 'enabled', createdAt: now - 4 * day },
|
|
{ id: 'di-40', dictTypeCode: 'deploy_env', label: '开发', value: 'dev', sort: 1, status: 'enabled', createdAt: now - 3 * day },
|
|
{ id: 'di-41', dictTypeCode: 'deploy_env', label: '测试', value: 'test', sort: 2, status: 'enabled', createdAt: now - 3 * day },
|
|
{ id: 'di-42', dictTypeCode: 'deploy_env', label: '生产', value: 'prod', sort: 3, status: 'enabled', createdAt: now - 3 * day },
|
|
{ id: 'di-43', dictTypeCode: 'language', label: '简体中文', value: 'zh_CN', sort: 1, status: 'enabled', createdAt: now - 3 * day },
|
|
{ id: 'di-44', dictTypeCode: 'language', label: 'English', value: 'en_US', sort: 2, status: 'enabled', createdAt: now - 3 * day },
|
|
{ id: 'di-45', dictTypeCode: 'cache_type', label: 'Redis', value: 'redis', sort: 1, status: 'enabled', createdAt: now - 2 * day },
|
|
{ id: 'di-46', dictTypeCode: 'cache_type', label: '本地', value: 'local', sort: 2, status: 'enabled', createdAt: now - 2 * day },
|
|
{ id: 'di-47', dictTypeCode: 'theme_mode', label: '明亮', value: 'light', sort: 1, status: 'enabled', createdAt: now - 1 * day },
|
|
{ id: 'di-48', dictTypeCode: 'theme_mode', label: '暗黑', value: 'dark', sort: 2, status: 'enabled', createdAt: now - 1 * day },
|
|
]
|
|
|
|
const typeKeyword = ref('')
|
|
const selectedType = ref<DictTypeRow | null>(dictTypes[0] ?? null)
|
|
|
|
const filteredTypes = computed(() => {
|
|
const kw = typeKeyword.value.trim().toLowerCase()
|
|
if (!kw) return dictTypes
|
|
return dictTypes.filter((t) => t.name.toLowerCase().includes(kw) || t.code.toLowerCase().includes(kw))
|
|
})
|
|
|
|
function selectType(t: DictTypeRow): void {
|
|
selectedType.value = t
|
|
}
|
|
|
|
// ---- 字典类型表单 ----
|
|
const typeFormSchema: JsonSchema = {
|
|
type: 'object',
|
|
properties: {
|
|
code: { type: 'string', title: '字典编码', placeholder: '如 sys_status', minLength: 2 },
|
|
name: { type: 'string', title: '字典名称', placeholder: '如 系统状态' },
|
|
status: {
|
|
type: 'string',
|
|
title: '状态',
|
|
enum: ['enabled', 'disabled'],
|
|
enumNames: ['启用', '停用'],
|
|
default: 'enabled',
|
|
},
|
|
remark: { type: 'string', title: '备注', format: 'textarea', placeholder: '请输入备注' },
|
|
},
|
|
required: ['code', 'name'],
|
|
}
|
|
|
|
function buildTypeModel(t?: DictTypeRow): Record<string, any> {
|
|
return { code: t?.code ?? '', name: t?.name ?? '', status: t?.status ?? 'enabled', remark: t?.remark ?? '' }
|
|
}
|
|
|
|
let typeSeq = 0
|
|
const nextTypeId = () => `dt-${Date.now()}-${++typeSeq}`
|
|
|
|
async function openTypeCreate(): Promise<void> {
|
|
const data = await showDialog({
|
|
component: TyForm,
|
|
props: { schema: typeFormSchema, modelValue: buildTypeModel(), mode: 'create' },
|
|
title: '新增字典类型',
|
|
width: '480px',
|
|
})
|
|
if (data == null) return
|
|
dictTypes.push({
|
|
id: nextTypeId(),
|
|
code: data.code,
|
|
name: data.name,
|
|
status: data.status,
|
|
remark: data.remark,
|
|
createdAt: Date.now(),
|
|
})
|
|
ElMessage.success('新增成功')
|
|
selectedType.value = dictTypes[dictTypes.length - 1]
|
|
}
|
|
|
|
async function openTypeEdit(t: DictTypeRow): Promise<void> {
|
|
const data = await showDialog({
|
|
component: TyForm,
|
|
props: { schema: typeFormSchema, modelValue: buildTypeModel(t), mode: 'edit', readonlyKeys: ['code'] },
|
|
title: '编辑字典类型',
|
|
width: '480px',
|
|
})
|
|
if (data == null) return
|
|
Object.assign(t, data)
|
|
ElMessage.success('更新成功')
|
|
}
|
|
|
|
async function removeType(t: DictTypeRow): Promise<void> {
|
|
await ElMessageBox.confirm(`确认删除字典类型「${t.name}」及其全部字典项？`, '提示', { type: 'warning' })
|
|
const ti = dictTypes.findIndex((x) => x.id === t.id)
|
|
if (ti >= 0) dictTypes.splice(ti, 1)
|
|
for (let i = dictItems.length - 1; i >= 0; i--) {
|
|
if (dictItems[i].dictTypeCode === t.code) dictItems.splice(i, 1)
|
|
}
|
|
if (selectedType.value?.id === t.id) selectedType.value = dictTypes[0] ?? null
|
|
ElMessage.success('删除成功')
|
|
}
|
|
|
|
// ---- 字典项 ----
|
|
const itemColumns: TableColumn[] = [
|
|
{ prop: 'label', label: '标签', minWidth: 120 },
|
|
{ prop: 'value', label: '值', minWidth: 120 },
|
|
{ prop: 'sort', label: '排序', width: 80, align: 'center' },
|
|
{ prop: 'status', label: '状态', width: 90, align: 'center', type: 'tag', tagMap: STATUS_MAP },
|
|
{ prop: 'createdAt', label: '创建时间', width: 160, type: 'datetime' },
|
|
]
|
|
|
|
const itemSearchSchema: JsonSchema = {
|
|
type: 'object',
|
|
properties: {
|
|
label: { type: 'string', title: '标签', placeholder: '请输入标签' },
|
|
value: { type: 'string', title: '值', placeholder: '请输入值' },
|
|
},
|
|
}
|
|
|
|
const itemFormSchema: JsonSchema = {
|
|
type: 'object',
|
|
properties: {
|
|
label: { type: 'string', title: '标签', placeholder: '如 启用' },
|
|
value: { type: 'string', title: '值', placeholder: '如 enabled' },
|
|
sort: { type: 'integer', title: '排序', minimum: 0, default: 0 },
|
|
status: {
|
|
type: 'string',
|
|
title: '状态',
|
|
enum: ['enabled', 'disabled'],
|
|
enumNames: ['启用', '停用'],
|
|
default: 'enabled',
|
|
},
|
|
},
|
|
required: ['label', 'value'],
|
|
}
|
|
|
|
let itemSeq = 0
|
|
const nextItemId = () => `di-${Date.now()}-${++itemSeq}`
|
|
|
|
function delay<T>(fn: () => T, ms = 300): Promise<T> {
|
|
return new Promise((resolve) => setTimeout(() => resolve(fn()), ms))
|
|
}
|
|
|
|
const listItems = (query: PageQuery): Promise<PageResult<Record<string, any>>> =>
|
|
delay(() => {
|
|
const code = selectedType.value?.code ?? ''
|
|
const { page, pageSize, label, value } = query
|
|
const filtered = dictItems.filter((i) => {
|
|
if (i.dictTypeCode !== code) return false
|
|
if (label && !i.label.includes(String(label))) return false
|
|
if (value && !i.value.includes(String(value))) return false
|
|
return true
|
|
})
|
|
const start = (page - 1) * pageSize
|
|
return {
|
|
list: filtered.slice(start, start + pageSize) as unknown as Record<string, any>[],
|
|
total: filtered.length,
|
|
page,
|
|
pageSize,
|
|
}
|
|
})
|
|
|
|
const createItem = (data: Record<string, any>): Promise<unknown> =>
|
|
delay(() => {
|
|
dictItems.push({
|
|
id: nextItemId(),
|
|
dictTypeCode: selectedType.value?.code ?? '',
|
|
label: data.label,
|
|
value: data.value,
|
|
sort: data.sort ?? 0,
|
|
status: data.status,
|
|
createdAt: Date.now(),
|
|
})
|
|
return null
|
|
})
|
|
|
|
const updateItem = (id: string, data: Record<string, any>): Promise<unknown> =>
|
|
delay(() => {
|
|
const it = dictItems.find((x) => x.id === id)
|
|
if (it) Object.assign(it, data)
|
|
return null
|
|
})
|
|
|
|
const removeItem = (id: string): Promise<unknown> =>
|
|
delay(() => {
|
|
const i = dictItems.findIndex((x) => x.id === id)
|
|
if (i >= 0) dictItems.splice(i, 1)
|
|
return null
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dict-page {
|
|
@apply flex h-full gap-md;
|
|
}
|
|
|
|
.dict-page__types {
|
|
@apply w-[280px] flex-shrink-0;
|
|
|
|
:deep(.el-card__body) {
|
|
@apply flex h-full flex-col;
|
|
}
|
|
}
|
|
|
|
.dict-page__type-head {
|
|
@apply mb-sm flex flex-shrink-0 gap-sm;
|
|
}
|
|
|
|
.dict-page__type-list {
|
|
@apply min-h-0 flex-1;
|
|
}
|
|
|
|
.dict-page__type-item {
|
|
@apply mb-xs cursor-pointer rounded-sm border border-transparent px-sm py-xs transition-colors;
|
|
|
|
&:hover {
|
|
@apply bg-bg-page;
|
|
}
|
|
|
|
&.is-active {
|
|
@apply border-primary bg-primary-light-7;
|
|
}
|
|
}
|
|
|
|
.dict-page__type-item-row {
|
|
@apply flex items-center justify-between;
|
|
}
|
|
|
|
.dict-page__type-item-name {
|
|
@apply truncate font-medium text-text-primary;
|
|
}
|
|
|
|
.dict-page__type-item-actions {
|
|
@apply hidden flex-shrink-0;
|
|
}
|
|
|
|
.dict-page__type-item:hover .dict-page__type-item-actions {
|
|
@apply flex items-center gap-xs;
|
|
}
|
|
|
|
.dict-page__type-item-meta {
|
|
@apply mt-xs flex items-center justify-between;
|
|
}
|
|
|
|
.dict-page__type-item-code {
|
|
@apply truncate text-xs text-text-secondary;
|
|
}
|
|
|
|
.dict-page__items {
|
|
@apply min-w-0 flex-1;
|
|
}
|
|
|
|
.dict-page__items-empty {
|
|
@apply flex h-full items-center justify-center;
|
|
}
|
|
</style>
|