dolphin-projects/dolphin-frontend
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat-wip(components): 数据字典相关页面代码提交

Browse Source
This commit is contained in:
佳木流泉
2025-12-04 23:16:29 +08:00
parent 0943818fec
commit ccf2565e1d
9 changed files with 167 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.test
View File

@ -1,5 +1,5 @@
# backend service base url, test environment
VITE_SERVICE_BASE_URL=http://localhost:8080
VITE_SERVICE_BASE_URL=http://192.168.1.7:8080
# other backend service base url, test environment
VITE_OTHER_SERVICE_BASE_URL=`{

8
src/locales/langs/en-us.ts
View File

@ -332,7 +332,13 @@ const local: App.I18n.Schema = {
}
},
item: {
title: 'Item'
title: 'Item',
fields: {
name: 'Name',
code: 'Code',
sort: 'Sort',
description: 'Description'
}
}
}
},

8
src/locales/langs/zh-cn.ts
View File

@ -328,7 +328,13 @@ const local: App.I18n.Schema = {
}
},
item: {
title: '字典项'
title: '字典项',
fields: {
name: '名称',
code: '代码',
sort: '排序',
description: '描述'
}
}
}
},

10
src/service/api/sys/core/dictionary.ts
View File

@ -43,3 +43,13 @@ export function fetchDictionaryDeleteBatch(ids: string[]) {
}
});
}
export function fetchTreeDictionaryItem(dictionaryId: string) {
return request<Api.Sys.Core.DictionaryItem[]>({
url: '/dictionaryItem/tree',
method: 'post',
data: {
dictionaryId
}
});
}

6
src/typings/app.d.ts vendored
View File

@ -575,6 +575,12 @@ declare namespace App {
};
item: {
title: string;
fields: {
name: string;
code: string;
sort: string;
description: string;
};
};
};
};

2
src/typings/components.d.ts vendored
View File

@ -63,6 +63,7 @@ declare module 'vue' {
NFormItemGi: typeof import('naive-ui')['NFormItemGi']
NGi: typeof import('naive-ui')['NGi']
NGrid: typeof import('naive-ui')['NGrid']
NHr: typeof import('naive-ui')['NHr']
NInput: typeof import('naive-ui')['NInput']
NInputGroup: typeof import('naive-ui')['NInputGroup']
NInputNumber: typeof import('naive-ui')['NInputNumber']
@ -154,6 +155,7 @@ declare global {
const NFormItemGi: typeof import('naive-ui')['NFormItemGi']
const NGi: typeof import('naive-ui')['NGi']
const NGrid: typeof import('naive-ui')['NGrid']
const NHr: typeof import('naive-ui')['NHr']
const NInput: typeof import('naive-ui')['NInput']
const NInputGroup: typeof import('naive-ui')['NInputGroup']
const NInputNumber: typeof import('naive-ui')['NInputNumber']

5
src/views/sys/core/dictionary/index.vue
View File

@ -82,9 +82,6 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi
align: 'center',
render: row => (
<div class="flex-center gap-8px">
<NButton type="success" ghost size="small" onClick={() => handleOpenChildren(row.id)}>
{$t('common.children')}
</NButton>
<NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
{$t('common.edit')}
</NButton>
@ -122,8 +119,6 @@ function handleDelete(id: string) {
function edit(id: string) {
handleEdit(id);
}
function handleOpenChildren(_: string) {}
</script>
<template>

59
src/views/sys/core/dictionary/modules/dictionary-operate-dialog.vue Normal file
View File

@ -0,0 +1,59 @@
<script setup lang="ts">
import { computed } from 'vue';
import { $t } from '@/locales';
defineOptions({
name: 'DictionaryOperateDialog'
});
const props = defineProps<{
/** the type of operation */
operateType: NaiveUI.TableOperateType;
/** the edit row data */
// rowData?: Api.Sys.Core.Dictionary | null;
}>();
const emit = defineEmits<{
(e: 'submitted'): void;
}>();
const visible = defineModel<boolean>('visible', {
default: false
});
const title = computed(() => {
const titles: Record<NaiveUI.TableOperateType, string> = {
add: $t('common.add'),
edit: $t('common.edit')
};
return titles[props.operateType];
});
function closeDialog(): void {
visible.value = false;
}
function handleSubmit() {
window.$message?.success($t('common.updateSuccess'));
closeDialog();
emit('submitted');
}
</script>
<template>
<NModal
v-model:show="visible"
preset="dialog"
:title="title"
@positive-click="handleSubmit"
@negative-click="visible = false"
>
<div class="dialog-wrapper">111</div>
</NModal>
</template>
<style scoped>
.dialog-wrapper {
width: 1000px;
}
</style>

103
src/views/sys/core/dictionary/modules/dictionary-operate-drawer.vue
View File

@ -1,10 +1,12 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import type { DataTableColumns } from 'naive-ui';
import { jsonClone } from '@sa/utils';
import { dictionaryTypeOptions } from '@/constants/sys/core/dictionary';
import { fetchDictionaryAdd, fetchDictionaryEdit } from '@/service/api';
import { fetchDictionaryAdd, fetchDictionaryEdit, fetchTreeDictionaryItem } from '@/service/api';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
import DictionaryItem = Api.Sys.Core.DictionaryItem;
defineOptions({
name: 'DictionaryOperateDrawer'
@ -40,20 +42,48 @@ const title = computed(() => {
return titles[props.operateType];
});
type Model = Pick<Api.Sys.Core.Dictionary, 'name' | 'code' | 'type' | 'description'>;
interface Model {
name: string;
code: string;
type: Api.Sys.Core.DictionaryType;
description: string | null;
children: Api.Sys.Core.DictionaryItem[];
}
const model = ref(createDefaultModel());
const childrenColumns: DataTableColumns<DictionaryItem> = [
{
key: 'name',
title: $t('page.sys.core.dictionary.item.fields.name'),
align: 'center',
resizable: true
},
{
key: 'code',
title: $t('page.sys.core.dictionary.item.fields.code'),
align: 'center',
resizable: true
},
{
key: 'sort',
title: $t('page.sys.core.dictionary.item.fields.sort'),
align: 'center',
resizable: true
}
];
function createDefaultModel(): Model {
return {
name: '',
code: '',
type: 'enum',
description: null
description: null,
children: []
};
}
type RuleKey = Exclude<keyof Model, 'description'>;
type RuleKey = 'name' | 'code' | 'type';
const rules: Record<RuleKey, App.Global.FormRule> = {
name: defaultRequiredRule,
@ -69,6 +99,17 @@ function handleInitModel() {
}
}
function handleInitChildrenModel() {
if (props.operateType !== 'edit' || !props.rowData?.id) {
return;
}
fetchTreeDictionaryItem(props.rowData.id).then(res => {
if (res.data) {
model.value.children = res.data ? res.data : [];
}
});
}
function closeDrawer() {
visible.value = false;
}
@ -93,6 +134,7 @@ watch(visible, () => {
if (visible.value) {
handleInitModel();
restoreValidation();
handleInitChildrenModel();
}
});
</script>
@ -100,31 +142,36 @@ watch(visible, () => {
<template>
<NDrawer v-model:show="visible" display-directive="show" :default-width="600" resizable>
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem :label="$t('page.sys.core.dictionary.fields.name')" path="name">
<NInput v-model:value="model.name" :placeholder="$t('page.sys.core.dictionary.fields.name')" />
</NFormItem>
<NFormItem :label="$t('page.sys.core.dictionary.fields.code')" path="code">
<NInput v-model:value="model.code" :placeholder="$t('page.sys.core.dictionary.fields.code')" />
</NFormItem>
<NFormItem :label="$t('page.sys.core.dictionary.fields.type')" path="type">
<NRadioGroup v-model:value="model.type">
<NRadio
v-for="item in dictionaryTypeOptions"
:key="item.value"
:value="item.value"
:label="$t(item.label)"
<NScrollbar>
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem :label="$t('page.sys.core.dictionary.fields.name')" path="name">
<NInput v-model:value="model.name" :placeholder="$t('page.sys.core.dictionary.fields.name')" />
</NFormItem>
<NFormItem :label="$t('page.sys.core.dictionary.fields.code')" path="code">
<NInput v-model:value="model.code" :placeholder="$t('page.sys.core.dictionary.fields.code')" />
</NFormItem>
<NFormItem :label="$t('page.sys.core.dictionary.fields.type')" path="type">
<NRadioGroup v-model:value="model.type">
<NRadio
v-for="item in dictionaryTypeOptions"
:key="item.value"
:value="item.value"
:label="$t(item.label)"
/>
</NRadioGroup>
</NFormItem>
<NFormItem :label="$t('page.sys.core.dictionary.fields.description')" path="description">
<NInput
v-model:value="model.description"
:placeholder="$t('page.sys.core.dictionary.fields.description')"
type="textarea"
/>
</NRadioGroup>
</NFormItem>
<NFormItem :label="$t('page.sys.core.dictionary.fields.description')" path="description">
<NInput
v-model:value="model.description"
:placeholder="$t('page.sys.core.dictionary.fields.description')"
type="textarea"
/>
</NFormItem>
</NForm>
</NFormItem>
</NForm>
<NCard v-if="props.operateType === 'edit'" :title="$t('page.sys.core.dictionary.item.title')">
<NDataTable :data="model.children" :columns="childrenColumns" :bordered="true" />
</NCard>
</NScrollbar>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>