feat: 基本完成字典页面及其api对接
This commit is contained in:
parent
d33fe94073
commit
0d9b6589c7
27
auto-imports.d.ts
vendored
27
auto-imports.d.ts
vendored
@ -9,11 +9,10 @@ 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 addChildDict: typeof import('./src/api/dictApi')['addChildDict']
|
||||||
const addParentDic: typeof import('./src/api/dictApi')['addParentDic']
|
const addChildMenu: typeof import('./src/api/menu')['addChildMenu']
|
||||||
const addParentDict: typeof import('./src/api/dictApi')['addParentDict']
|
const addParentDict: typeof import('./src/api/dictApi')['addParentDict']
|
||||||
const addParentDictionaries: typeof import('./src/api/dictApi')['addParentDictionaries']
|
const addParentMenu: typeof import('./src/api/menu')['addParentMenu']
|
||||||
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']
|
||||||
@ -22,19 +21,25 @@ 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 deleteChildDict: typeof import('./src/api/dictApi')['deleteChildDict']
|
||||||
const deleteParentDictionary: typeof import('./src/api/dictApi')['deleteParentDictionary']
|
const deleteMenu: typeof import('./src/api/menu')['deleteMenu']
|
||||||
|
const deleteParentDict: typeof import('./src/api/dictApi')['deleteParentDict']
|
||||||
|
const deleteUser: typeof import('./src/api/roleApi')['deleteUser']
|
||||||
|
const editParentMenu: typeof import('./src/api/menu')['editParentMenu']
|
||||||
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 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 getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||||
|
const getDict: typeof import('./src/api/dictApi')['getDict']
|
||||||
const getParentDict: typeof import('./src/api/dictApi')['getParentDict']
|
const getParentDict: typeof import('./src/api/dictApi')['getParentDict']
|
||||||
const getParentDictionaries: typeof import('./src/api/dictApi')['getParentDictionaries']
|
const getRoleList: typeof import('./src/api/roleApi')['getRoleList']
|
||||||
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']
|
||||||
@ -78,8 +83,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 updateChildDict: typeof import('./src/api/dictApi')['updateChildDict']
|
||||||
const updateParentDictionary: typeof import('./src/api/dictApi')['updateParentDictionary']
|
const updateParentDict: typeof import('./src/api/dictApi')['updateParentDict']
|
||||||
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']
|
||||||
|
|||||||
5642
package-lock.json
generated
Normal file
5642
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -2,67 +2,60 @@ import http from "@/utils/request";
|
|||||||
|
|
||||||
const dictUrl = "/api/v1/AdminDictionary"
|
const dictUrl = "/api/v1/AdminDictionary"
|
||||||
|
|
||||||
interface DictRow {
|
interface DictRowQuery {
|
||||||
uuid?: string
|
|
||||||
parentId?: string
|
parentId?: string
|
||||||
parentValue?: string
|
parentValue?: string
|
||||||
label: string
|
label: string
|
||||||
labelEn?: string
|
labelEn?: string
|
||||||
remark?: string
|
remark?: string
|
||||||
value: string
|
value: string
|
||||||
tags?: string[]
|
tag?: string
|
||||||
createTime?: Date
|
|
||||||
createUserId?: string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface DictRowReturn {
|
||||||
|
uuid: string
|
||||||
|
parentId: string
|
||||||
|
parentValue: string
|
||||||
|
label: string
|
||||||
|
labelEn: string
|
||||||
|
remark: string
|
||||||
|
value: string
|
||||||
|
tag: string
|
||||||
|
createTime: string
|
||||||
|
createUserId: string
|
||||||
|
};
|
||||||
|
const DictParentURL = "/api/Dict/parents";
|
||||||
|
const DictChildURL = "/api/Dict/children";
|
||||||
|
|
||||||
// 获取父级字典
|
// 获取父级字典
|
||||||
export function getParentDictionary(label: string) {
|
export function getParentDict(label: string): Promise<DictRowReturn[]> {
|
||||||
return http({
|
return http({
|
||||||
url: "/api/v1/AdminDictionary/GetParentDictionaries",
|
url: DictParentURL,
|
||||||
method: 'POST',
|
method: 'GET',
|
||||||
data: label
|
params: label
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 新增父级字典
|
// 新增父级字典
|
||||||
/**
|
export function addParentDict(data: { label: string, value: string }) {
|
||||||
*
|
|
||||||
* @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({
|
return http({
|
||||||
url: "/api/v1/AdminDictionary/AddParentDictionary",
|
url: DictParentURL,
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 更新父级字典
|
// 更新父级字典
|
||||||
/**
|
export function updateParentDict(uuid: string, data: { label: string }) {
|
||||||
*
|
|
||||||
* @param data 只需要label
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function updateParentDictionary(data: DictRow) {
|
|
||||||
return http({
|
return http({
|
||||||
url: "/api/v1/AdminDictionary/UpdateParentDictionary",
|
url: `${DictParentURL}/${uuid}`,
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 删除父级字典
|
// 删除父级字典
|
||||||
export function deleteParentDictionary(uuid: string) {
|
export function deleteParentDict(uuid: string) {
|
||||||
return http({
|
return http({
|
||||||
url: "/api/v1/AdminDictionary/DeleteParentDictionary",
|
url: `${DictParentURL}/${uuid}`,
|
||||||
method: 'DELETE',
|
method: 'DELETE',
|
||||||
data: uuid
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 新增子级字典
|
// 新增子级字典
|
||||||
@ -71,44 +64,46 @@ export function deleteParentDictionary(uuid: string) {
|
|||||||
* @param data 必需parentId, parentValue, label, value
|
* @param data 必需parentId, parentValue, label, value
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export function addChildDictionary(data: DictRow) {
|
export function addChildDict(data: DictRowQuery) {
|
||||||
|
console.log("addChildDict", data);
|
||||||
return http({
|
return http({
|
||||||
url: "/api/v1/AdminDictionary/CreateChildDictionary",
|
url: DictChildURL,
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data
|
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
|
* @param value 为父级value
|
||||||
|
* @param tag 用逗号连接选择的tags数组
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export function getChildDictionary(data: DictRow) {
|
export function getDict(value: string, tag: string): Promise<DictRowReturn[]> {
|
||||||
return http({
|
return http({
|
||||||
url: "/api/v1/AdminDictionary/GetChildDictionaries",
|
url: DictChildURL,
|
||||||
method: 'POSt',
|
method: 'GET',
|
||||||
|
params: { value, tag }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 更新子级字典
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param data 必需label, value
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function updateChildDict(uuid: string, data: DictRowQuery) {
|
||||||
|
console.log("updateChildDict", data);
|
||||||
|
return http({
|
||||||
|
url: `${DictChildURL}/${uuid}`,
|
||||||
|
method: 'PUT',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 删除子级字典
|
||||||
|
export function deleteChildDict(uuid: string) {
|
||||||
|
return http({
|
||||||
|
url: `${DictChildURL}/${uuid}`,
|
||||||
|
method: 'DELETE',
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -1,721 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,300 +0,0 @@
|
|||||||
<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>
|
|
||||||
508
src/views/system/dict/components/DictMain.vue
Normal file
508
src/views/system/dict/components/DictMain.vue
Normal file
@ -0,0 +1,508 @@
|
|||||||
|
<template>
|
||||||
|
<main class="dict-main">
|
||||||
|
<!-- 上面有一排操作按钮：input框查询 查询按钮，新增 -->
|
||||||
|
<!-- 字典表格，含有字段：字典id，字典名称，字典值，字典标签，操作列（编辑 删除） -->
|
||||||
|
<div v-if="tableTitle === ''" class="dict-main__empty">
|
||||||
|
<LsEmpty type="no-data" v-model:title="emptyStateTitle" v-model:description="emptyStateDescription" />
|
||||||
|
</div>
|
||||||
|
<div v-if="tableTitle !== ''" class="dict-main__content">
|
||||||
|
<div class="dict-main__header">
|
||||||
|
<h1>{{ tableTitle }}</h1>
|
||||||
|
</div>
|
||||||
|
<div class="dict-main__search">
|
||||||
|
<n-input autosize v-model:value="mainSearch" placeholder="查询字典名称（中/英）" clearable
|
||||||
|
@keyup.enter="handleFindDatas" class="dict-main__search-input">
|
||||||
|
</n-input>
|
||||||
|
<n-button type="primary" @click="handleFindDatas" :focusable="false" class="dict-main__search-btn">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon :component="SearchOutline" />
|
||||||
|
</template>
|
||||||
|
查询
|
||||||
|
</n-button>
|
||||||
|
<n-button type="primary" @click="hanldeAddData" :focusable="false" class="dict-main__add-btn">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon :component="AddOutline" />
|
||||||
|
</template>
|
||||||
|
新增
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
<div class="dict-main__table" ref="tableMainRef">
|
||||||
|
<n-data-table v-if="height" :loading="loading" :columns="columns" :data="currentData"
|
||||||
|
:table-layout="'fixed'" :max-height="`${height}px`" class="dict-main__table-content" />
|
||||||
|
</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="value">
|
||||||
|
<n-input v-model:value="formData.value" placeholder="输入字典值" clearable />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="新增标签" path="tags">
|
||||||
|
<n-dynamic-tags v-model:value="formData.tags" :render-tag="renderTag" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
<template #action>
|
||||||
|
<n-space justify="end">
|
||||||
|
<n-button @click="showDataModal = false">取消</n-button>
|
||||||
|
<n-button type="primary" @click="handleFormSubmit">提交</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="hanldeDeleteSubmit">
|
||||||
|
|
||||||
|
</n-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { getDict } from '@/api/dictApi';
|
||||||
|
import LsEmpty from '@/components/Ls-UI/LsEmpty.vue';
|
||||||
|
import { deepClone } from '@/utils';
|
||||||
|
import { AddOutline, PencilOutline, SearchOutline, TrashOutline } from '@vicons/ionicons5';
|
||||||
|
import { DataTableColumns, FormInst, NButton, NIcon, NSpace, NTag, NTime, useMessage } from 'naive-ui';
|
||||||
|
|
||||||
|
const parentProps = defineProps<{
|
||||||
|
uuid: string
|
||||||
|
value: string
|
||||||
|
label: string
|
||||||
|
}>();
|
||||||
|
|
||||||
|
watch(parentProps, async (newValue) => {
|
||||||
|
console.log(newValue);
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
tableTitle.value = newValue.label;
|
||||||
|
if (!height.value) {
|
||||||
|
nextTick(() => {
|
||||||
|
if (tableMainRef.value) {
|
||||||
|
height.value = tableMainRef.value.clientHeight;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (tableTitle.value !== '') {
|
||||||
|
try {
|
||||||
|
await getDatas();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('数据获取失败:', error);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
interface DictRow {
|
||||||
|
uuid?: string
|
||||||
|
parentId?: string
|
||||||
|
parentValue?: string
|
||||||
|
label: string
|
||||||
|
labelEn?: string
|
||||||
|
remark?: string
|
||||||
|
value: string
|
||||||
|
tags?: string[]
|
||||||
|
createTime?: string
|
||||||
|
createUserId?: string
|
||||||
|
};
|
||||||
|
|
||||||
|
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 timeStr = row.createTime;
|
||||||
|
if (!timeStr) return '无效日期';
|
||||||
|
|
||||||
|
const timestamp = Date.parse(timeStr);
|
||||||
|
if (isNaN(timestamp)) {
|
||||||
|
return '无效日期';
|
||||||
|
}
|
||||||
|
|
||||||
|
return h(
|
||||||
|
NTime,
|
||||||
|
{
|
||||||
|
format: 'yyyy-MM-dd hh:mm:ss',
|
||||||
|
time: timestamp
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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: () => h(NIcon, { color: 'blue' }, { default: () => h(PencilOutline) })
|
||||||
|
}
|
||||||
|
),
|
||||||
|
h(
|
||||||
|
NButton,
|
||||||
|
{
|
||||||
|
size: 'small',
|
||||||
|
quaternary: true,
|
||||||
|
type: 'error',
|
||||||
|
focusable: false,
|
||||||
|
onClick: () => deleteRowData(row)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: () => h(NIcon, { color: 'red' }, { default: () => h(TrashOutline) })
|
||||||
|
}
|
||||||
|
)
|
||||||
|
]
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDatas = async () => {
|
||||||
|
try {
|
||||||
|
console.log("父级字典：", parentProps);
|
||||||
|
const result = await getDict(parentProps.value, null);
|
||||||
|
tableData.value = result.map(item => {
|
||||||
|
const { tag, ...rest } = item;
|
||||||
|
return {
|
||||||
|
tags: tag ? tag.split(",") : [],
|
||||||
|
...rest,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
currentData.value = tableData.value
|
||||||
|
} catch (error) {
|
||||||
|
console.log('获取失败', error);
|
||||||
|
message.error('获取数据失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFindDatas = () => {
|
||||||
|
currentData.value = tableData.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'
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入字典值',
|
||||||
|
trigger: 'input'
|
||||||
|
},
|
||||||
|
tags: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增与修改相关逻辑
|
||||||
|
const hanldeAddData = () => {
|
||||||
|
console.log("新增");
|
||||||
|
formData.value = ({
|
||||||
|
label: '',
|
||||||
|
labelEn: '',
|
||||||
|
remark: '',
|
||||||
|
value: '',
|
||||||
|
tags: [],
|
||||||
|
});
|
||||||
|
currentMode.value = 'Add';
|
||||||
|
showDataModal.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const modifyChildUuid = ref('');
|
||||||
|
|
||||||
|
const hanldeModifyData = (row: DictRow) => {
|
||||||
|
console.log("修改:", row);
|
||||||
|
const { uuid, parentId, parentValue, createTime, createUserId, ...rest } = row;
|
||||||
|
modifyChildUuid.value = uuid;
|
||||||
|
formData.value = deepClone(rest);
|
||||||
|
console.log(formData.value.tags);
|
||||||
|
currentMode.value = 'Modify';
|
||||||
|
showDataModal.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单内标签逻辑
|
||||||
|
const renderTag = (tag: string, index: number) => {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
color: '#3D8EFF',
|
||||||
|
},
|
||||||
|
type: 'info',
|
||||||
|
bordered: false,
|
||||||
|
closable: true,
|
||||||
|
onClose: () => {
|
||||||
|
formData.value.tags.splice(index, 1)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => tag
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单提交
|
||||||
|
const handleFormSubmit = async (e: MouseEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
formRef.value?.validate(async (errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
try {
|
||||||
|
const { tags, ...rest } = formData.value;
|
||||||
|
if (currentMode.value === 'Add') {
|
||||||
|
const result = await addChildDict({ parentId: parentProps.uuid, parentValue: parentProps.value, tag: tags.join(","), ...rest });
|
||||||
|
console.log(result);
|
||||||
|
message.success('新增成功');
|
||||||
|
}
|
||||||
|
else if (currentMode.value === 'Modify') {
|
||||||
|
const result = await updateChildDict(modifyChildUuid.value, { tag: tags.join(","), ...rest });
|
||||||
|
console.log(result);
|
||||||
|
message.success('修改成功');
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await getDatas();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('数据获取失败:', error);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log('提交失败', error);
|
||||||
|
message.error('提交失败');
|
||||||
|
} finally {
|
||||||
|
modifyChildUuid.value = '';
|
||||||
|
showDataModal.value = false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('表单信息不完整', errors);
|
||||||
|
message.error('表单信息不完整');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除相关逻辑
|
||||||
|
const showDeleteModal = ref(false);
|
||||||
|
const deleteData = ref<DictRow | null>(null);
|
||||||
|
|
||||||
|
const handleDeleteDatas = (row: DictRow) => {
|
||||||
|
console.log("删除:", row);
|
||||||
|
deleteData.value = row;
|
||||||
|
showDeleteModal.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const hanldeDeleteSubmit = async () => {
|
||||||
|
console.log('submit delete ', deleteData);
|
||||||
|
try {
|
||||||
|
await deleteChildDict(deleteData.value.uuid);
|
||||||
|
message.success('删除成功');
|
||||||
|
try {
|
||||||
|
await getDatas();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('数据获取失败:', error);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log('删除失败', error);
|
||||||
|
message.error('删除失败');
|
||||||
|
} finally {
|
||||||
|
showDataModal.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 空状态展示用标题与描述
|
||||||
|
const emptyStateTitle = ref('');
|
||||||
|
const emptyStateDescription = ref('');
|
||||||
|
// 搜索绑定字段
|
||||||
|
const mainSearch = ref('');
|
||||||
|
// 页面标题、表格列名、总数据、表格展示数据、表格是否加载
|
||||||
|
const tableTitle = ref('');
|
||||||
|
const columns = ref(getColumns({ mod: hanldeModifyData, del: handleDeleteDatas }));
|
||||||
|
const tableData = ref<DictRow[]>([]);
|
||||||
|
const currentData = 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: $normolGap;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
&__empty {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: $bigGap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-bottom: $smallGap;
|
||||||
|
border-bottom: 1px solid $dashLineColor;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $titleTextColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__search {
|
||||||
|
display: flex;
|
||||||
|
gap: $smallGap;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.n-input {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__table {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid $dashLineColor;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.n-data-table {
|
||||||
|
:deep(.n-data-table-th) {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-data-table-td) {
|
||||||
|
padding: 12px $smallGap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
417
src/views/system/dict/components/DictNav.vue
Normal file
417
src/views/system/dict/components/DictNav.vue
Normal file
@ -0,0 +1,417 @@
|
|||||||
|
<template>
|
||||||
|
<nav class="dict-nav">
|
||||||
|
<div class="dict-nav__search">
|
||||||
|
<n-input style="min-width: 100%" v-model:value="navSearch" placeholder="查询父级字典" clearable
|
||||||
|
@keyup.enter="handleFindParent(navSearch)">
|
||||||
|
<template #prefix>
|
||||||
|
<n-icon :component="SearchOutline" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</div>
|
||||||
|
<div class="dict-nav__aciton">
|
||||||
|
<n-button block type="default" @click="handleAddParent" :focusable="false">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<AddOutline />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
新增父级字典
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
<n-space vertical>
|
||||||
|
<n-list bordered hoverable class="dict-nav__list">
|
||||||
|
<n-list-item v-for="(item, index) in parentDictDatas" :key="index" @click="handleUpdateParent(item)"
|
||||||
|
class="dict-nav__item">
|
||||||
|
<n-icon :component="BookOutline" size="20" class="dict-nav__item-icon" />
|
||||||
|
<span class="dict-nav__item-label">{{ item.label }}</span>
|
||||||
|
<div class="dict-nav__item-actions">
|
||||||
|
<n-button text class="dict-nav__action-btn dict-nav__action-btn--modify"
|
||||||
|
@click="e => handleModifyParent(e, item)">
|
||||||
|
<n-icon :component="PencilOutline" size="18" />
|
||||||
|
</n-button>
|
||||||
|
<n-button text class="dict-nav__action-btn dict-nav__action-btn--delete"
|
||||||
|
@click="e => handleDeleteParent(e, item)">
|
||||||
|
<n-icon :component="TrashOutline" size="18" />
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
</n-list-item>
|
||||||
|
</n-list>
|
||||||
|
</n-space>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<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="输入父级字典名称" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="父级字典值" path="value" v-if="currentMode === 'Add'">
|
||||||
|
<n-input v-model:value="formData.value" placeholder="输入父级字典值" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
<template #action>
|
||||||
|
<n-space justify="end">
|
||||||
|
<n-button @click="showDataModal = false">取消</n-button>
|
||||||
|
<n-button type="primary" @click="handleFormSubmit">提交</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="handleDeleteSubmit">
|
||||||
|
|
||||||
|
</n-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { getParentDict } from '@/api/dictApi';
|
||||||
|
import { AddOutline, BookOutline, PencilOutline, SearchOutline, TrashOutline } from '@vicons/ionicons5';
|
||||||
|
import { FormInst, NButton, NIcon, useMessage } from 'naive-ui';
|
||||||
|
|
||||||
|
const parentProps = defineProps<{
|
||||||
|
parentUuid: string
|
||||||
|
parentValue: string
|
||||||
|
parentTitle: string
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:parentUuid', value: string): void
|
||||||
|
(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?: string
|
||||||
|
createUserId?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const parentDictDatas = ref<DictRow[]>([]);
|
||||||
|
|
||||||
|
// 查找父级字典相关逻辑
|
||||||
|
const handleFindParent = async (label: string) => {
|
||||||
|
console.log('查找父级字典: ', label)
|
||||||
|
try {
|
||||||
|
const result = await getParentDict(label);
|
||||||
|
console.log("getParentDict: ", result);;
|
||||||
|
parentDictDatas.value = result;
|
||||||
|
console.log(parentDictDatas);
|
||||||
|
} catch (error) {
|
||||||
|
console.log('获取失败', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
const init = async () => {
|
||||||
|
handleFindParent('');
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
init();
|
||||||
|
})
|
||||||
|
|
||||||
|
// 按钮触发更新
|
||||||
|
const handleUpdateParent = (dict: DictRow) => {
|
||||||
|
console.log("点击更新！", dict);
|
||||||
|
emit('update:parentUuid', dict.uuid);
|
||||||
|
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 currentMode = ref<'Add' | 'Modify'>('Add');
|
||||||
|
const showDataModal = ref(false);
|
||||||
|
|
||||||
|
const handleAddParent = () => {
|
||||||
|
formData.value = {
|
||||||
|
label: '',
|
||||||
|
value: ''
|
||||||
|
};
|
||||||
|
currentMode.value = 'Add';
|
||||||
|
showDataModal.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const modifyParentUuid = ref('');
|
||||||
|
|
||||||
|
const handleModifyParent = (e: MouseEvent, data: DictRow) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
formData.value = { label: data.label };
|
||||||
|
currentMode.value = 'Modify';
|
||||||
|
modifyParentUuid.value = data.uuid;
|
||||||
|
console.log('修改', data);
|
||||||
|
showDataModal.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFormSubmit = async (e: MouseEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log('当前模式：', currentMode.value);
|
||||||
|
formRef.value?.validate(async (errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
console.log('提交', formData.value);
|
||||||
|
try {
|
||||||
|
if (currentMode.value === 'Add' && formData.value.value) {
|
||||||
|
const result = await addParentDict({ label: formData.value.label, value: formData.value.value });
|
||||||
|
console.log(result);
|
||||||
|
message.success('新增成功');
|
||||||
|
} else if (currentMode.value === 'Modify') {
|
||||||
|
const result = await updateParentDict(modifyParentUuid.value, formData.value);
|
||||||
|
console.log(result);
|
||||||
|
message.success('修改成功');
|
||||||
|
}
|
||||||
|
handleFindParent(navSearch.value);
|
||||||
|
} catch (error) {
|
||||||
|
console.log('提交失败', error);
|
||||||
|
message.error('提交失败');
|
||||||
|
} finally {
|
||||||
|
modifyParentUuid.value = '';
|
||||||
|
showDataModal.value = false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('表单信息不完整', errors);
|
||||||
|
message.error('表单信息不完整');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除相关逻辑
|
||||||
|
const showDeleteModal = ref(false);
|
||||||
|
const deleteData = ref<DictRow | null>(null);
|
||||||
|
|
||||||
|
const handleDeleteParent = (e: MouseEvent, data: DictRow) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
console.log('删除', data);
|
||||||
|
deleteData.value = data;
|
||||||
|
showDeleteModal.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDeleteSubmit = async () => {
|
||||||
|
console.log('submit delete ', deleteData);
|
||||||
|
try {
|
||||||
|
await deleteParentDict(deleteData.value.uuid);
|
||||||
|
if (deleteData.value.uuid === parentProps.parentUuid) {
|
||||||
|
emit('update:parentUuid', '');
|
||||||
|
emit('update:parentValue', '');
|
||||||
|
emit('update:parentTitle', '');
|
||||||
|
}
|
||||||
|
message.success('删除成功');
|
||||||
|
handleFindParent(navSearch.value);
|
||||||
|
} catch (error) {
|
||||||
|
console.log('删除失败', error);
|
||||||
|
message.error('删除失败');
|
||||||
|
} finally {
|
||||||
|
showDataModal.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const navSearch = ref('');
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.dict-nav {
|
||||||
|
width: 280px;
|
||||||
|
min-width: 280px;
|
||||||
|
height: 100%;
|
||||||
|
padding: $normolGap;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: $bigGap;
|
||||||
|
background-color: #fff;
|
||||||
|
border-right: 1px solid $dashLineColor;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
&__search {
|
||||||
|
.n-input {
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
:deep(.n-input__border) {
|
||||||
|
border-color: $dashLineColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-input__state-border) {
|
||||||
|
border-color: $primaryColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action {
|
||||||
|
.dict-nav__add-btn {
|
||||||
|
background-color: $primaryColor;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $primaryColorHover;
|
||||||
|
box-shadow: 0 2px 8px rgba($primaryColor, 0.3);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: $primaryColorPressed;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid $dashLineColor;
|
||||||
|
|
||||||
|
.n-list {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
.n-list-item {
|
||||||
|
padding: 0;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-bottom: 1px solid $dashLineColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: $smallGap $normolGap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon {
|
||||||
|
margin-right: $smallGap;
|
||||||
|
color: $primaryColor;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-label {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-right: $bigGap;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-actions {
|
||||||
|
position: absolute;
|
||||||
|
right: $smallGap;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: flex;
|
||||||
|
gap: $miniGap;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba($primaryColor, 0.05);
|
||||||
|
|
||||||
|
.dict-nav__item-label {
|
||||||
|
padding-right: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dict-nav__item-actions {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
background-color: rgba($primaryColor, 0.1);
|
||||||
|
border-left: 3px solid $primaryColor;
|
||||||
|
|
||||||
|
.dict-nav__item-label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: $primaryColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dict-nav__item-icon {
|
||||||
|
color: $primaryColorSuppl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-btn {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: rgba(#fff, 0.8);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
.n-icon {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--modify {
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba($primaryColor, 0.15);
|
||||||
|
color: $primaryColor;
|
||||||
|
|
||||||
|
.n-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--delete {
|
||||||
|
color: #999;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(#ff4d4f, 0.15);
|
||||||
|
color: #ff4d4f;
|
||||||
|
|
||||||
|
.n-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -2,15 +2,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 左右布局，左侧为占15%的nav，右侧为占据75%的main -->
|
<!-- 左右布局，左侧为占15%的nav，右侧为占据75%的main -->
|
||||||
<div class="main__container white-bg table dict-container">
|
<div class="main__container white-bg table dict-container">
|
||||||
<DictNav v-model:parentValue="currentKey" v-model:parentTitle="currentTitle" />
|
<DictNav v-model:parentUuid="currentUuid" v-model:parentValue="currentKey" v-model:parentTitle="currentTitle" />
|
||||||
<DictMain :value="currentKey" :label="currentTitle" />
|
<DictMain :uuid="currentUuid" :value="currentKey" :label="currentTitle" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import DictNav from './compoents/DictNav.vue';
|
import DictMain from './components/DictMain.vue';
|
||||||
import DictMain from './compoents/DictMain.vue';
|
import DictNav from './components/DictNav.vue';
|
||||||
|
|
||||||
|
const currentUuid = ref('')
|
||||||
const currentKey = ref('')
|
const currentKey = ref('')
|
||||||
const currentTitle = ref('')
|
const currentTitle = ref('')
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user