feat: 初步更新字典页面
This commit is contained in:
parent
5644602b3a
commit
d33fe94073
14
auto-imports.d.ts
vendored
14
auto-imports.d.ts
vendored
@ -9,6 +9,11 @@ declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const addChildMenu: typeof import('./src/api/menu')['addChildMenu']
|
||||
const addParentMenu: typeof import('./src/api/menu')['addParentMenu']
|
||||
const addChildDictionary: typeof import('./src/api/dictApi')['addChildDictionary']
|
||||
const addParentDic: typeof import('./src/api/dictApi')['addParentDic']
|
||||
const addParentDict: typeof import('./src/api/dictApi')['addParentDict']
|
||||
const addParentDictionaries: typeof import('./src/api/dictApi')['addParentDictionaries']
|
||||
const addParentDictionary: typeof import('./src/api/dictApi')['addParentDictionary']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
@ -17,14 +22,19 @@ declare global {
|
||||
const deleteMenu: typeof import('./src/api/menu')['deleteMenu']
|
||||
const deleteUser: typeof import('./src/api/roleApi')['deleteUser']
|
||||
const editParentMenu: typeof import('./src/api/menu')['editParentMenu']
|
||||
const deleteChildDictionary: typeof import('./src/api/dictApi')['deleteChildDictionary']
|
||||
const deleteParentDictionary: typeof import('./src/api/dictApi')['deleteParentDictionary']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const eidtChildMenu: typeof import('./src/api/menu')['eidtChildMenu']
|
||||
const enable: typeof import('./src/api/roleApi')['enable']
|
||||
const enableRole: typeof import('./src/api/roleApi')['enableRole']
|
||||
const getAllMenu: typeof import('./src/api/menu')['getAllMenu']
|
||||
const getChildDictionary: typeof import('./src/api/dictApi')['getChildDictionary']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const getRoleList: typeof import('./src/api/roleApi')['getRoleList']
|
||||
const getParentDict: typeof import('./src/api/dictApi')['getParentDict']
|
||||
const getParentDictionaries: typeof import('./src/api/dictApi')['getParentDictionaries']
|
||||
const getParentDictionary: typeof import('./src/api/dictApi')['getParentDictionary']
|
||||
const getUserInfo: typeof import('./src/api/userApi')['getUserInfo']
|
||||
const getUserList: typeof import('./src/api/roleApi')['getUserList']
|
||||
const h: typeof import('vue')['h']
|
||||
@ -68,6 +78,8 @@ declare global {
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const updateChildDictionary: typeof import('./src/api/dictApi')['updateChildDictionary']
|
||||
const updateParentDictionary: typeof import('./src/api/dictApi')['updateParentDictionary']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
|
||||
114
src/api/dictApi.ts
Normal file
114
src/api/dictApi.ts
Normal file
@ -0,0 +1,114 @@
|
||||
import http from "@/utils/request";
|
||||
|
||||
const dictUrl = "/api/v1/AdminDictionary"
|
||||
|
||||
interface DictRow {
|
||||
uuid?: string
|
||||
parentId?: string
|
||||
parentValue?: string
|
||||
label: string
|
||||
labelEn?: string
|
||||
remark?: string
|
||||
value: string
|
||||
tags?: string[]
|
||||
createTime?: Date
|
||||
createUserId?: string
|
||||
}
|
||||
|
||||
// 获取父级字典
|
||||
export function getParentDictionary(label: string) {
|
||||
return http({
|
||||
url: "/api/v1/AdminDictionary/GetParentDictionaries",
|
||||
method: 'POST',
|
||||
data: label
|
||||
})
|
||||
}
|
||||
// 新增父级字典
|
||||
/**
|
||||
*
|
||||
* @param data 只需要label和value
|
||||
* @returns
|
||||
*/
|
||||
export function addParentDictionary(data: DictRow) {
|
||||
data.createTime = null;
|
||||
data.createUserId = '';
|
||||
data.labelEn = '';
|
||||
data.remark = '';
|
||||
data.tags = [];
|
||||
data.uuid = '';
|
||||
data.parentId = '';
|
||||
data.parentValue = '';
|
||||
return http({
|
||||
url: "/api/v1/AdminDictionary/AddParentDictionary",
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
// 更新父级字典
|
||||
/**
|
||||
*
|
||||
* @param data 只需要label
|
||||
* @returns
|
||||
*/
|
||||
export function updateParentDictionary(data: DictRow) {
|
||||
return http({
|
||||
url: "/api/v1/AdminDictionary/UpdateParentDictionary",
|
||||
method: 'PUT',
|
||||
data
|
||||
})
|
||||
}
|
||||
// 删除父级字典
|
||||
export function deleteParentDictionary(uuid: string) {
|
||||
return http({
|
||||
url: "/api/v1/AdminDictionary/DeleteParentDictionary",
|
||||
method: 'DELETE',
|
||||
data: uuid
|
||||
})
|
||||
}
|
||||
// 新增子级字典
|
||||
/**
|
||||
*
|
||||
* @param data 必需parentId, parentValue, label, value
|
||||
* @returns
|
||||
*/
|
||||
export function addChildDictionary(data: DictRow) {
|
||||
return http({
|
||||
url: "/api/v1/AdminDictionary/CreateChildDictionary",
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
// 更新子级字典
|
||||
/**
|
||||
*
|
||||
* @param data 必需uuid, label, value
|
||||
* @returns
|
||||
*/
|
||||
export function updateChildDictionary(data: DictRow) {
|
||||
return http({
|
||||
url: "/api/v1/AdminDictionary/UpdateChildDictionary",
|
||||
method: 'PUT',
|
||||
data
|
||||
})
|
||||
}
|
||||
// 删除子级字典
|
||||
export function deleteChildDictionary(uuid: string) {
|
||||
return http({
|
||||
url: "/api/v1/AdminDictionary/DeleteChildDictionary",
|
||||
method: 'DELETE',
|
||||
data: uuid
|
||||
})
|
||||
}
|
||||
// 获取子级字典
|
||||
/**
|
||||
*
|
||||
* @param data 必需value, 非必需tags
|
||||
* @returns
|
||||
*/
|
||||
export function getChildDictionary(data: DictRow) {
|
||||
return http({
|
||||
url: "/api/v1/AdminDictionary/GetChildDictionaries",
|
||||
method: 'POSt',
|
||||
data
|
||||
})
|
||||
}
|
||||
721
src/views/system/dict/compoents/DictMain.vue
Normal file
721
src/views/system/dict/compoents/DictMain.vue
Normal file
@ -0,0 +1,721 @@
|
||||
<template>
|
||||
<main class="dict-main">
|
||||
<!-- 上面有一排操作按钮：input框查询 查询按钮，新增 -->
|
||||
<!-- 字典表格，含有字段：字典id，字典名称，字典值，字典标签，操作列（编辑 删除） -->
|
||||
<div v-if="tableTitle === ''">
|
||||
<LsEmpty type="no-data" v-model:title="emptyStateTitle" v-model:description="emptyStateDescription" />
|
||||
</div>
|
||||
<div v-if="tableTitle !== ''" style="flex: 1;height: 100%;">
|
||||
<h1>{{ tableTitle }}</h1>
|
||||
<div class="main-search">
|
||||
<n-input autosize style="min-width: 50%" v-model:value="mainSearch" placeholder="查询字典名称（中/英）" clearable
|
||||
@keyup.enter="findTableDatas">
|
||||
</n-input>
|
||||
<n-button type="primary" @click="findTableDatas" :focusable="false">
|
||||
<template #icon>
|
||||
<n-icon :component="SearchOutline" />
|
||||
</template>
|
||||
查询
|
||||
</n-button>
|
||||
<n-button type="primary" @click="addTableDatas" :focusable="false">
|
||||
<template #icon>
|
||||
<n-icon :component="AddOutline" />
|
||||
</template>
|
||||
新增
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="main-table" style="flex: 1; height: 100%;" ref="tableMainRef">
|
||||
<n-data-table v-if="height" :loading="loading" :columns="columns" :data="tableData" :table-layout="'fixed'"
|
||||
:max-height="`${height}px`" :scroll-x="100" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<n-modal v-model:show="showDataModal" title="新增字典数据" preset="dialog" :mask-closable="false">
|
||||
<n-form ref="formRef" :model="formData" :rules="formRules">
|
||||
<n-form-item label="字典中文名称" path="label">
|
||||
<n-input v-model:value="formData.label" placeholder="输入字典中文名称" clearable />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="字典英文名称" path="labelEn">
|
||||
<n-input v-model:value="formData.labelEn" placeholder="输入字典英文名称" clearable />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="字典描述" path="remark">
|
||||
<n-input v-model:value="formData.remark" placeholder="输入字典描述" type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="新增标签" path="tags">
|
||||
<n-input v-model:value="newTag" placeholder="输入标签名称" @keyup.enter="addTag" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="已有标签">
|
||||
<div class="tags-container">
|
||||
<n-tag v-for="(tag, index) in formData.tags" :key="index" closable @close="removeTag(index)" :style="{
|
||||
marginRight: '6px',
|
||||
marginBottom: '6px',
|
||||
color: '#3D8EFF',
|
||||
border: 'none'
|
||||
}" :bordered="false" type="info">
|
||||
{{ tag }}
|
||||
</n-tag>
|
||||
</div>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #action>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showDataModal = false">取消</n-button>
|
||||
<n-button type="primary" @click="handleSubmit">提交</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
|
||||
<n-modal v-model:show="showDeleteModal" title="删除字典数据" preset="dialog" :mask-closable="false" content="确认删除该项字典数据？"
|
||||
negative-text="取消" positive-text="确认" @negative-click="showDeleteModal = false" @positive-click="submitDelete">
|
||||
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import LsEmpty from '@/components/Ls-UI/LsEmpty.vue';
|
||||
import { AddOutline, PencilOutline, SearchOutline, TrashOutline } from '@vicons/ionicons5';
|
||||
import { DataTableColumns, FormInst, NButton, NIcon, NSpace, NTag, NTime, useMessage } from 'naive-ui';
|
||||
|
||||
const parentProps = defineProps<{
|
||||
value: string
|
||||
label: string
|
||||
}>();
|
||||
|
||||
watch(parentProps, async (newValue) => {
|
||||
console.log(newValue)
|
||||
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
|
||||
tableTitle.value = newValue.label
|
||||
if (!height.value) {
|
||||
setTimeout(() => {
|
||||
if (tableMainRef.value) {
|
||||
height.value = tableMainRef.value.clientHeight;
|
||||
};
|
||||
}, 10);
|
||||
}
|
||||
|
||||
tableData.value = totalData.value.filter(item => item.value === newValue.value)
|
||||
loading.value = false
|
||||
}, 1000);
|
||||
})
|
||||
|
||||
interface DictRow {
|
||||
label: string
|
||||
labelEn?: string
|
||||
remark?: string
|
||||
value: string
|
||||
tags?: string[]
|
||||
createTime?: Date
|
||||
createUserId?: string
|
||||
}
|
||||
|
||||
const renderIcon = (icon: Component) => {
|
||||
return () => h(NIcon, null, { default: () => h(icon) })
|
||||
}
|
||||
|
||||
const getColumns = ({
|
||||
mod: modifyRowData, del: deleteRowData
|
||||
}: {
|
||||
mod: (row: DictRow) => void,
|
||||
del: (row: DictRow) => void
|
||||
}): DataTableColumns<DictRow> => {
|
||||
return [
|
||||
{
|
||||
title: '字典中文',
|
||||
key: 'label',
|
||||
width: 75,
|
||||
ellipsis: { tooltip: true }
|
||||
},
|
||||
{
|
||||
title: '字典英文',
|
||||
key: 'labelEn',
|
||||
width: 75,
|
||||
ellipsis: { tooltip: true }
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
key: 'remark',
|
||||
width: 125,
|
||||
ellipsis: { tooltip: true }
|
||||
},
|
||||
{
|
||||
title: '字典值',
|
||||
key: 'value',
|
||||
width: 75,
|
||||
ellipsis: { tooltip: true }
|
||||
},
|
||||
{
|
||||
title: '标签',
|
||||
key: 'tags',
|
||||
width: 125,
|
||||
render(row: DictRow) {
|
||||
const tags = row.tags.map((tagKey) => {
|
||||
return h(
|
||||
NTag,
|
||||
{
|
||||
style: {
|
||||
marginRight: '6px',
|
||||
color: '#3D8EFF',
|
||||
},
|
||||
type: 'info',
|
||||
bordered: false
|
||||
},
|
||||
{
|
||||
default: () => tagKey
|
||||
}
|
||||
)
|
||||
})
|
||||
return tags
|
||||
},
|
||||
ellipsis: { tooltip: true }
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
width: 75,
|
||||
render(row: DictRow) {
|
||||
const time = row.createTime;
|
||||
if (!time || isNaN(time.getTime())) {
|
||||
return '无效日期';
|
||||
}
|
||||
return h(
|
||||
NTime,
|
||||
{
|
||||
format: 'yyyy-MM-dd',
|
||||
time: new Date(row.createTime)
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '创建用户编号',
|
||||
key: 'createUserId',
|
||||
width: 75,
|
||||
fixed: 'right',
|
||||
ellipsis: { tooltip: true }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 75,
|
||||
align: 'center',
|
||||
render(row: DictRow) {
|
||||
return h(
|
||||
NSpace,
|
||||
{},
|
||||
{
|
||||
default: () => [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
quaternary: true,
|
||||
type: 'info',
|
||||
focusable: false,
|
||||
onClick: () => modifyRowData(row)
|
||||
},
|
||||
{
|
||||
icon: renderIcon(PencilOutline)
|
||||
}
|
||||
),
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
quaternary: true,
|
||||
type: 'error',
|
||||
focusable: false,
|
||||
onClick: () => deleteRowData(row)
|
||||
},
|
||||
{
|
||||
icon: renderIcon(TrashOutline)
|
||||
}
|
||||
)
|
||||
]
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const getDatas = (): DictRow[] => {
|
||||
return [
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
},
|
||||
{
|
||||
label: '1',
|
||||
labelEn: 'a',
|
||||
value: '1',
|
||||
tags: ['str'],
|
||||
}, {
|
||||
label: '2',
|
||||
labelEn: 'b',
|
||||
value: '2',
|
||||
tags: ['char'],
|
||||
}, {
|
||||
label: '3',
|
||||
labelEn: 'c',
|
||||
value: '2',
|
||||
tags: ['number'],
|
||||
}, {
|
||||
label: '4',
|
||||
labelEn: 'd',
|
||||
value: '3',
|
||||
tags: ['any'],
|
||||
}, {
|
||||
label: '5',
|
||||
labelEn: 'e',
|
||||
value: '3',
|
||||
tags: ['class'],
|
||||
}, {
|
||||
label: '6789',
|
||||
labelEn: 'abc',
|
||||
value: '2',
|
||||
tags: ['number', 'string'],
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
const findTableDatas = () => {
|
||||
tableData.value = totalData.value.filter(item => (item.label.includes(mainSearch.value) || item.labelEn.includes(mainSearch.value)) && item.value === parentProps.value)
|
||||
}
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const formRef = ref<FormInst | null>(null)
|
||||
const currentMode = ref<'Add' | 'Modify'>('Add')
|
||||
const showDataModal = ref(false)
|
||||
|
||||
const formData = ref<DictRow>()
|
||||
const formRules = {
|
||||
label: {
|
||||
required: true,
|
||||
message: '请输入字典中文名称',
|
||||
trigger: 'input'
|
||||
},
|
||||
labelEn: {
|
||||
required: false,
|
||||
message: '请输入字典英文名称',
|
||||
trigger: 'input'
|
||||
},
|
||||
remark: {
|
||||
required: false,
|
||||
message: '请输入字典描述',
|
||||
trigger: 'input'
|
||||
},
|
||||
tags: [],
|
||||
}
|
||||
|
||||
// 新增与修改相关逻辑
|
||||
const addTableDatas = () => {
|
||||
console.log("新增")
|
||||
formData.value = ({
|
||||
label: '',
|
||||
labelEn: '',
|
||||
remark: '',
|
||||
value: '',
|
||||
tags: [],
|
||||
createTime: null,
|
||||
createUserId: ''
|
||||
})
|
||||
currentMode.value = 'Add'
|
||||
showDataModal.value = true
|
||||
}
|
||||
|
||||
const modifyTableDatas = (row: DictRow) => {
|
||||
console.log("修改:", row)
|
||||
formData.value = JSON.parse(JSON.stringify(row));
|
||||
currentMode.value = 'Modify'
|
||||
showDataModal.value = true
|
||||
}
|
||||
|
||||
// 表单内标签逻辑
|
||||
const newTag = ref('');
|
||||
|
||||
const addTag = () => {
|
||||
if (newTag.value.trim() && !formData.value.tags.includes(newTag.value.trim())) {
|
||||
formData.value.tags.push(newTag.value.trim());
|
||||
newTag.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const removeTag = (index: number) => {
|
||||
formData.value.tags.splice(index, 1);
|
||||
};
|
||||
|
||||
// 表单提交
|
||||
const handleSubmit = (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
if (currentMode.value === 'Add') { formData.value.value = parentProps.value }
|
||||
formRef.value?.validate(errors => {
|
||||
if (!errors) {
|
||||
console.log("submit " + currentMode.value, formData)
|
||||
showDataModal.value = false
|
||||
message.success('提交成功')
|
||||
} else {
|
||||
console.log('失败', errors)
|
||||
message.error('提交失败')
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// 删除相关逻辑
|
||||
const showDeleteModal = ref(false)
|
||||
const deleteData = ref<DictRow | null>(null)
|
||||
|
||||
const deleteTableDatas = (row: DictRow) => {
|
||||
console.log("删除:", row)
|
||||
deleteData.value = row
|
||||
showDeleteModal.value = true
|
||||
}
|
||||
|
||||
const submitDelete = () => {
|
||||
console.log('submit delete ', deleteData)
|
||||
tableData.value = tableData.value.filter(item => item !== deleteData.value)
|
||||
showDeleteModal.value = false
|
||||
message.success('删除成功')
|
||||
}
|
||||
|
||||
// 空状态展示用标题与描述
|
||||
const emptyStateTitle = ref('')
|
||||
const emptyStateDescription = ref('')
|
||||
// 搜索绑定字段
|
||||
const mainSearch = ref('')
|
||||
// 页面标题、表格列名、总数据、表格展示数据、表格是否加载
|
||||
const tableTitle = ref('')
|
||||
const columns = ref(getColumns({ mod: modifyTableDatas, del: deleteTableDatas }))
|
||||
const totalData = ref(getDatas());
|
||||
const tableData = ref<DictRow[]>([]);
|
||||
const loading = ref(true)
|
||||
// 用于控制表格最大高度参数
|
||||
const tableMainRef = ref<HTMLElement | null>(null);
|
||||
const height = ref(null);
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dict-main {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* 关键属性：允许换行 */
|
||||
align-items: flex-start;
|
||||
/* 顶部对齐 */
|
||||
gap: 6px;
|
||||
/* 设置标签之间的间距 */
|
||||
padding: 4px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
min-height: 42px;
|
||||
/* 确保没有标签时仍有合适高度 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
300
src/views/system/dict/compoents/DictNav.vue
Normal file
300
src/views/system/dict/compoents/DictNav.vue
Normal file
@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<nav class="dict-nav">
|
||||
<div class="nav-search">
|
||||
<n-input style="min-width: 100%" v-model:value="navSearch" placeholder="查询父级字典" clearable
|
||||
@keyup.enter="findParentDict(navSearch)">
|
||||
<template #prefix>
|
||||
<n-icon :component="SearchOutline" />
|
||||
</template>
|
||||
</n-input>
|
||||
</div>
|
||||
<div class="nav-aciton">
|
||||
<n-button block type="default" @click="addParentDict" :focusable="false">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<AddOutline />
|
||||
</n-icon>
|
||||
</template>
|
||||
新增父级字典
|
||||
</n-button>
|
||||
</div>
|
||||
<n-space vertical>
|
||||
<n-list bordered hoverable class="menu-list">
|
||||
<n-list-item v-for="(item, index) in parentDictDatas" :key="index" @click="updateParentValue(item)"
|
||||
class="menu-list__item">
|
||||
<n-icon :component="BookOutline" size="20" class="menu-list__icon" />
|
||||
<span class="menu-list__label">{{ item.label }}</span>
|
||||
<div class="menu-list__actions">
|
||||
<n-button text class="menu-list__action-button menu-list__action-button--add"
|
||||
@click="e => modifyParentDict(e, item)">
|
||||
<n-icon :component="PencilOutline" size="18" />
|
||||
</n-button>
|
||||
<n-button text class="menu-list__action-button menu-list__action-button--delete"
|
||||
@click="e => deleteParentDict(e, item)">
|
||||
<n-icon :component="TrashOutline" size="18" />
|
||||
</n-button>
|
||||
</div>
|
||||
</n-list-item>
|
||||
</n-list>
|
||||
</n-space>
|
||||
</nav>
|
||||
|
||||
<n-modal v-model:show="showAddModal" title="新增父级字典" preset="dialog" :mask-closable="false">
|
||||
<n-form ref="formRef" :model="formData" :rules="formRules">
|
||||
<n-form-item label="父级字典名称" path="label">
|
||||
<n-input v-model:value="formData.label" placeholder="输入父级字典名称" />
|
||||
</n-form-item>
|
||||
<n-form-item label="父级字典值" path="value">
|
||||
<n-input v-model:value="formData.value" placeholder="输入父级字典值" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #action>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showAddModal = false">取消</n-button>
|
||||
<n-button type="primary" @click="handleSubmit">提交</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
|
||||
<!-- <n-modal v-model:show="showDeleteModal" title="删除字典数据" preset="dialog" :mask-closable="false" content="确认删除该项字典数据？"
|
||||
negative-text="取消" positive-text="确认" @negative-click="showDeleteModal = false" @positive-click="submitDelete">
|
||||
|
||||
</n-modal> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getParentDictionary } from '@/api/dictApi';
|
||||
import { AddOutline, BookOutline, PencilOutline, SearchOutline, TrashOutline } from '@vicons/ionicons5';
|
||||
import { FormInst, NButton, NIcon, useMessage } from 'naive-ui';
|
||||
|
||||
defineProps<{
|
||||
parentValue: string
|
||||
parentTitle: string
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:parentValue', value: string): void
|
||||
(e: 'update:parentTitle', value: string): void
|
||||
}>();
|
||||
|
||||
interface DictRow {
|
||||
uuid?: string
|
||||
parentId?: string
|
||||
parentValue?: string
|
||||
label: string
|
||||
labelEn?: string
|
||||
remark?: string
|
||||
value: string
|
||||
tags?: string[]
|
||||
createTime?: Date
|
||||
createUserId?: string
|
||||
}
|
||||
|
||||
// 图标通用渲染
|
||||
const renderIcon = (icon: Component) => {
|
||||
return () => h(NIcon, null, { default: () => h(icon) })
|
||||
}
|
||||
|
||||
// 获取父级字典相关逻辑
|
||||
const findParentDict = async (label: string) => {
|
||||
console.log('查找父级字典: ', label)
|
||||
try {
|
||||
const result = await getParentDictionary(label);
|
||||
console.log("getParentDict: ", result);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const getParentData = (): DictRow[] => {
|
||||
return [
|
||||
{
|
||||
label: '历史段位',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '陪玩业务类型',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '订单状态',
|
||||
value: '3',
|
||||
}, {
|
||||
label: '?',
|
||||
value: '?',
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const parentDictDatas = ref<DictRow[]>(getParentData());
|
||||
|
||||
// 初始化
|
||||
const init = async () => {
|
||||
findParentDict('');
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
})
|
||||
|
||||
// 按钮触发更新
|
||||
const updateParentValue = (dict: DictRow) => {
|
||||
emit('update:parentValue', dict.value)
|
||||
emit('update:parentTitle', dict.label)
|
||||
return;
|
||||
}
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
// 新增与编辑相关数据与逻辑
|
||||
interface FormData {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
const formData = ref<FormData>({
|
||||
label: '',
|
||||
value: ''
|
||||
})
|
||||
const formRules = {
|
||||
label: {
|
||||
required: true,
|
||||
message: '请输入父级字典名称',
|
||||
trigger: 'input'
|
||||
},
|
||||
value: {
|
||||
required: true,
|
||||
message: '请输入父级字典值',
|
||||
trigger: 'input'
|
||||
}
|
||||
}
|
||||
|
||||
const formRef = ref<FormInst | null>(null);
|
||||
const showAddModal = ref(false);
|
||||
|
||||
const addParentDict = () => {
|
||||
formData.value = {
|
||||
label: '',
|
||||
value: ''
|
||||
}
|
||||
showAddModal.value = true;
|
||||
}
|
||||
|
||||
const modifyParentDict = (e: MouseEvent, data: DictRow) => {
|
||||
e.stopPropagation();
|
||||
console.log('修改', data);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
formRef.value?.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
console.log('提交', formData.value);
|
||||
try {
|
||||
const result = await addParentDictionary(formData.value);
|
||||
console.log(result);
|
||||
showAddModal.value = false;
|
||||
message.success('提交成功');
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
} else {
|
||||
console.log('失败', errors);
|
||||
message.error('提交失败');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除相关逻辑
|
||||
const deleteParentDict = (e: MouseEvent, data: DictRow) => {
|
||||
e.stopPropagation();
|
||||
console.log('删除', data);
|
||||
};
|
||||
|
||||
const navSearch = ref('');
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dict-nav {
|
||||
width: 15%;
|
||||
border-right: 1px solid #eee;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.menu-list {
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(32, 128, 240, 0.1);
|
||||
|
||||
.menu-list__actions {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin-right: 12px;
|
||||
color: $primaryColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-right: 75px; // 为按钮预留空间
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
position: absolute; // 关键：绝对定位
|
||||
right: 16px; // 固定在右侧
|
||||
top: 50%; // 垂直居中
|
||||
transform: translateY(-50%); // 精确垂直居中
|
||||
}
|
||||
|
||||
|
||||
&__item:hover &__actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&__action-button {
|
||||
transition: all 0.2s;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
&--modify:hover {
|
||||
color: $primaryColorHover;
|
||||
}
|
||||
|
||||
&--delete:hover {
|
||||
color: #d03050;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,24 +1,24 @@
|
||||
<!-- 用户字典 -->
|
||||
<template>
|
||||
<!-- 左右布局，左侧为占25%的nav，右侧为占据75%的main -->
|
||||
<div class="main__container white-bg table">
|
||||
<!-- 侧边字典属性结构 -->
|
||||
<nav class="dict-nav">
|
||||
<!-- 要求可以搜索 -->
|
||||
<n-input v-model:value="search"></n-input>
|
||||
<!-- 树结构 右侧要能够删除 -->
|
||||
<n-tree></n-tree>
|
||||
</nav>
|
||||
<main class="dict-nav">
|
||||
<!-- 上面有一排操作按钮：input框查询 查询按钮，新增 -->
|
||||
<!-- 字典表格，含有字段：字典id，字典名称，字典值，字典标签，操作列（编辑 删除） -->
|
||||
<n-table></n-table>
|
||||
</main>
|
||||
|
||||
<!-- 左右布局，左侧为占15%的nav，右侧为占据75%的main -->
|
||||
<div class="main__container white-bg table dict-container">
|
||||
<DictNav v-model:parentValue="currentKey" v-model:parentTitle="currentTitle" />
|
||||
<DictMain :value="currentKey" :label="currentTitle" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
const search = ref('');
|
||||
import DictNav from './compoents/DictNav.vue';
|
||||
import DictMain from './compoents/DictMain.vue';
|
||||
|
||||
const currentKey = ref('')
|
||||
const currentTitle = ref('')
|
||||
|
||||
</script>
|
||||
<style scoped lang='scss'></style>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.dict-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user