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 EffectScope: typeof import('vue')['EffectScope']
|
||||||
const addChildMenu: typeof import('./src/api/menu')['addChildMenu']
|
const addChildMenu: typeof import('./src/api/menu')['addChildMenu']
|
||||||
const addParentMenu: typeof import('./src/api/menu')['addParentMenu']
|
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 computed: typeof import('vue')['computed']
|
||||||
const createApp: typeof import('vue')['createApp']
|
const createApp: typeof import('vue')['createApp']
|
||||||
const customRef: typeof import('vue')['customRef']
|
const customRef: typeof import('vue')['customRef']
|
||||||
@ -17,14 +22,19 @@ declare global {
|
|||||||
const deleteMenu: typeof import('./src/api/menu')['deleteMenu']
|
const deleteMenu: typeof import('./src/api/menu')['deleteMenu']
|
||||||
const deleteUser: typeof import('./src/api/roleApi')['deleteUser']
|
const deleteUser: typeof import('./src/api/roleApi')['deleteUser']
|
||||||
const editParentMenu: typeof import('./src/api/menu')['editParentMenu']
|
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 effectScope: typeof import('vue')['effectScope']
|
||||||
const eidtChildMenu: typeof import('./src/api/menu')['eidtChildMenu']
|
const eidtChildMenu: typeof import('./src/api/menu')['eidtChildMenu']
|
||||||
const enable: typeof import('./src/api/roleApi')['enable']
|
const enable: typeof import('./src/api/roleApi')['enable']
|
||||||
const enableRole: typeof import('./src/api/roleApi')['enableRole']
|
const enableRole: typeof import('./src/api/roleApi')['enableRole']
|
||||||
const getAllMenu: typeof import('./src/api/menu')['getAllMenu']
|
const getAllMenu: typeof import('./src/api/menu')['getAllMenu']
|
||||||
|
const getChildDictionary: typeof import('./src/api/dictApi')['getChildDictionary']
|
||||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
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 getUserInfo: typeof import('./src/api/userApi')['getUserInfo']
|
||||||
const getUserList: typeof import('./src/api/roleApi')['getUserList']
|
const getUserList: typeof import('./src/api/roleApi')['getUserList']
|
||||||
const h: typeof import('vue')['h']
|
const h: typeof import('vue')['h']
|
||||||
@ -68,6 +78,8 @@ declare global {
|
|||||||
const toValue: typeof import('vue')['toValue']
|
const toValue: typeof import('vue')['toValue']
|
||||||
const triggerRef: typeof import('vue')['triggerRef']
|
const triggerRef: typeof import('vue')['triggerRef']
|
||||||
const unref: typeof import('vue')['unref']
|
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 useAttrs: typeof import('vue')['useAttrs']
|
||||||
const useCssModule: typeof import('vue')['useCssModule']
|
const useCssModule: typeof import('vue')['useCssModule']
|
||||||
const useCssVars: typeof import('vue')['useCssVars']
|
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>
|
<template>
|
||||||
<!-- 左右布局，左侧为占25%的nav，右侧为占据75%的main -->
|
<!-- 左右布局，左侧为占15%的nav，右侧为占据75%的main -->
|
||||||
<div class="main__container white-bg table">
|
<div class="main__container white-bg table dict-container">
|
||||||
<!-- 侧边字典属性结构 -->
|
<DictNav v-model:parentValue="currentKey" v-model:parentTitle="currentTitle" />
|
||||||
<nav class="dict-nav">
|
<DictMain :value="currentKey" :label="currentTitle" />
|
||||||
<!-- 要求可以搜索 -->
|
|
||||||
<n-input v-model:value="search"></n-input>
|
|
||||||
<!-- 树结构 右侧要能够删除 -->
|
|
||||||
<n-tree></n-tree>
|
|
||||||
</nav>
|
|
||||||
<main class="dict-nav">
|
|
||||||
<!-- 上面有一排操作按钮：input框查询 查询按钮，新增 -->
|
|
||||||
<!-- 字典表格，含有字段：字典id，字典名称，字典值，字典标签，操作列（编辑 删除） -->
|
|
||||||
<n-table></n-table>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang='ts'>
|
<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>
|
</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