mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
chore: 重构字典管理模块
This commit is contained in:
xlsea
187
src/views/system/dict/modules/dict-data-operate-drawer.vue
Normal file
187
src/views/system/dict/modules/dict-data-operate-drawer.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<script setup lang="tsx">
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import { NTag } from 'naive-ui';
|
||||
import { fetchCreateDictData, fetchUpdateDictData } from '@/service/api/system/dict-data';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'DictDataOperateDrawer'
|
||||
});
|
||||
|
||||
interface Props {
|
||||
/** the type of operation */
|
||||
operateType: NaiveUI.TableOperateType;
|
||||
/** the edit row data */
|
||||
rowData?: Api.System.DictData | null;
|
||||
dictType: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
interface Emits {
|
||||
(e: 'submitted'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
|
||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
const { createRequiredRule } = useFormRules();
|
||||
|
||||
const title = computed(() => {
|
||||
const titles: Record<NaiveUI.TableOperateType, string> = {
|
||||
add: '新增字典数据',
|
||||
edit: '编辑字典数据'
|
||||
};
|
||||
return titles[props.operateType];
|
||||
});
|
||||
|
||||
type Model = Api.System.DictDataOperateParams;
|
||||
|
||||
const model: Model = reactive(createDefaultModel());
|
||||
|
||||
const listClassOptions = [
|
||||
{ label: 'primary', value: 'primary' },
|
||||
{ label: 'success', value: 'success' },
|
||||
{ label: 'info', value: 'info' },
|
||||
{ label: 'warning', value: 'warning' },
|
||||
{ label: 'error', value: 'error' },
|
||||
{ label: 'default', value: 'default' }
|
||||
];
|
||||
|
||||
function createDefaultModel(): Model {
|
||||
return {
|
||||
dictSort: 0,
|
||||
dictLabel: '',
|
||||
dictValue: '',
|
||||
dictType: props.dictType,
|
||||
cssClass: '',
|
||||
listClass: null,
|
||||
remark: ''
|
||||
};
|
||||
}
|
||||
|
||||
type RuleKey = Extract<keyof Model, 'dictCode' | 'dictLabel' | 'dictValue'>;
|
||||
|
||||
const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
dictCode: createRequiredRule('字典编码不能为空'),
|
||||
dictLabel: createRequiredRule('字典标签不能为空'),
|
||||
dictValue: createRequiredRule('字典键值不能为空')
|
||||
};
|
||||
|
||||
function handleUpdateModelWhenEdit() {
|
||||
if (props.operateType === 'add') {
|
||||
Object.assign(model, createDefaultModel());
|
||||
return;
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit' && props.rowData) {
|
||||
Object.assign(model, props.rowData);
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await validate();
|
||||
|
||||
// request
|
||||
if (props.operateType === 'add') {
|
||||
const { dictSort, dictLabel, dictValue, dictType, cssClass, listClass, remark } = model;
|
||||
const { error } = await fetchCreateDictData({
|
||||
dictSort,
|
||||
dictLabel,
|
||||
dictValue,
|
||||
dictType,
|
||||
cssClass,
|
||||
listClass,
|
||||
remark
|
||||
});
|
||||
if (error) return;
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit') {
|
||||
const { dictCode, dictSort, dictLabel, dictValue, dictType, cssClass, listClass, remark } = model;
|
||||
const { error } = await fetchUpdateDictData({
|
||||
dictCode,
|
||||
dictSort,
|
||||
dictLabel,
|
||||
dictValue,
|
||||
dictType,
|
||||
cssClass,
|
||||
listClass,
|
||||
remark
|
||||
});
|
||||
if (error) return;
|
||||
}
|
||||
|
||||
window.$message?.success($t('common.updateSuccess'));
|
||||
closeDrawer();
|
||||
emit('submitted');
|
||||
}
|
||||
|
||||
watch(visible, () => {
|
||||
if (visible.value) {
|
||||
handleUpdateModelWhenEdit();
|
||||
restoreValidation();
|
||||
}
|
||||
});
|
||||
|
||||
function renderTagLabel(option: { label: string; value: string }) {
|
||||
return (
|
||||
<NTag size="small" type={option.value as any}>
|
||||
{option.label}
|
||||
</NTag>
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
|
||||
<NDrawerContent :title="title" :native-scrollbar="false" closable>
|
||||
<NForm ref="formRef" :model="model" :rules="rules">
|
||||
<NFormItem label="字典类型" path="dictType">
|
||||
<NInput v-model:value="model.dictType" disabled placeholder="请输入字典类型" />
|
||||
</NFormItem>
|
||||
<NFormItem label="标签样式" path="listClass">
|
||||
<NSelect
|
||||
v-model:value="model.listClass"
|
||||
clearable
|
||||
:options="listClassOptions"
|
||||
placeholder="请选择标签样式"
|
||||
:render-label="renderTagLabel"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="数据标签" path="dictLabel">
|
||||
<NInput v-model:value="model.dictLabel" placeholder="请输入字典标签" />
|
||||
</NFormItem>
|
||||
<NFormItem label="数据键值" path="dictValue">
|
||||
<NInput v-model:value="model.dictValue" placeholder="请输入字典键值" />
|
||||
</NFormItem>
|
||||
<NFormItem label="css类名" path="cssClass">
|
||||
<NInput v-model:value="model.cssClass" placeholder="请输入样式属性（其他样式扩展）" />
|
||||
</NFormItem>
|
||||
<NFormItem label="显示排序" path="dictSort">
|
||||
<NInputNumber v-model:value="model.dictSort" placeholder="请输入字典排序" />
|
||||
</NFormItem>
|
||||
<NFormItem label="备注" path="remark">
|
||||
<NInput v-model:value="model.remark" :rows="3" type="textarea" placeholder="请输入备注" />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<template #footer>
|
||||
<NSpace :size="16">
|
||||
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
63
src/views/system/dict/modules/dict-data-search.vue
Normal file
63
src/views/system/dict/modules/dict-data-search.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import { useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'DictDataSearch'
|
||||
});
|
||||
|
||||
interface Emits {
|
||||
(e: 'reset'): void;
|
||||
(e: 'search'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
|
||||
const model = defineModel<Api.System.DictDataSearchParams>('model', { required: true });
|
||||
|
||||
async function reset() {
|
||||
await restoreValidation();
|
||||
emit('reset');
|
||||
}
|
||||
|
||||
async function search() {
|
||||
await validate();
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" size="small" class="card-wrapper">
|
||||
<NCollapse>
|
||||
<NCollapseItem :title="$t('common.search')" name="user-search">
|
||||
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
|
||||
<NGrid responsive="self" item-responsive>
|
||||
<NFormItemGi :show-feedback="false" span="12" label="字典标签" path="dictLabel" class="pr-24px">
|
||||
<NInput v-model:value="model.dictLabel" placeholder="请输入字典标签" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi :show-feedback="false" span="12" class="pr-24px">
|
||||
<NSpace class="w-full" justify="end">
|
||||
<NButton @click="reset">
|
||||
<template #icon>
|
||||
<icon-ic-round-refresh class="text-icon" />
|
||||
</template>
|
||||
{{ $t('common.reset') }}
|
||||
</NButton>
|
||||
<NButton type="primary" ghost @click="search">
|
||||
<template #icon>
|
||||
<icon-ic-round-search class="text-icon" />
|
||||
</template>
|
||||
{{ $t('common.search') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
</NForm>
|
||||
</NCollapseItem>
|
||||
</NCollapse>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
129
src/views/system/dict/modules/dict-type-operate-drawer.vue
Normal file
129
src/views/system/dict/modules/dict-type-operate-drawer.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import { fetchCreateDictType, fetchUpdateDictType } from '@/service/api/system/dict';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'DictTypeOperateDrawer'
|
||||
});
|
||||
|
||||
interface Props {
|
||||
/** the type of operation */
|
||||
operateType: NaiveUI.TableOperateType;
|
||||
/** the edit row data */
|
||||
rowData?: Api.System.DictType | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
interface Emits {
|
||||
(e: 'submitted'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
|
||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
const { createRequiredRule } = useFormRules();
|
||||
|
||||
const title = computed(() => {
|
||||
const titles: Record<NaiveUI.TableOperateType, string> = {
|
||||
add: '新增字典类型',
|
||||
edit: '编辑字典类型'
|
||||
};
|
||||
return titles[props.operateType];
|
||||
});
|
||||
|
||||
type Model = Api.System.DictTypeOperateParams;
|
||||
|
||||
const model: Model = reactive(createDefaultModel());
|
||||
|
||||
function createDefaultModel(): Model {
|
||||
return {
|
||||
dictName: '',
|
||||
dictType: '',
|
||||
remark: ''
|
||||
};
|
||||
}
|
||||
|
||||
type RuleKey = Extract<keyof Model, 'dictId' | 'dictName' | 'dictType'>;
|
||||
|
||||
const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
dictId: createRequiredRule('字典主键不能为空'),
|
||||
dictName: createRequiredRule('字典名称不能为空'),
|
||||
dictType: createRequiredRule('字典类型不能为空')
|
||||
};
|
||||
|
||||
function handleUpdateModelWhenEdit() {
|
||||
if (props.operateType === 'add') {
|
||||
Object.assign(model, createDefaultModel());
|
||||
return;
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit' && props.rowData) {
|
||||
Object.assign(model, props.rowData);
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await validate();
|
||||
|
||||
// request
|
||||
if (props.operateType === 'add') {
|
||||
const { dictName, dictType, remark } = model;
|
||||
const { error } = await fetchCreateDictType({ dictName, dictType, remark });
|
||||
if (error) return;
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit') {
|
||||
const { dictId, dictName, dictType, remark } = model;
|
||||
const { error } = await fetchUpdateDictType({ dictId, dictName, dictType, remark });
|
||||
if (error) return;
|
||||
}
|
||||
|
||||
window.$message?.success($t('common.updateSuccess'));
|
||||
closeDrawer();
|
||||
emit('submitted');
|
||||
}
|
||||
|
||||
watch(visible, () => {
|
||||
if (visible.value) {
|
||||
handleUpdateModelWhenEdit();
|
||||
restoreValidation();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
|
||||
<NDrawerContent :title="title" :native-scrollbar="false" closable>
|
||||
<NForm ref="formRef" :model="model" :rules="rules">
|
||||
<NFormItem label="字典名称" path="dictName">
|
||||
<NInput v-model:value="model.dictName" placeholder="请输入字典名称" />
|
||||
</NFormItem>
|
||||
<NFormItem label="字典类型" path="dictType">
|
||||
<NInput v-model:value="model.dictType" placeholder="请输入字典类型" />
|
||||
</NFormItem>
|
||||
<NFormItem label="备注" path="remark">
|
||||
<NInput v-model:value="model.remark" :rows="3" type="textarea" placeholder="请输入备注" />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<template #footer>
|
||||
<NSpace :size="16">
|
||||
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user