feat:添加字典项时下拉Tag功能,对接参数配置功能
This commit is contained in:
parent
7f781112a9
commit
ce4c086473
1
docs/template/modules/soy.search.vue.vm
vendored
1
docs/template/modules/soy.search.vue.vm
vendored
@ -1,6 +1,5 @@
|
||||
#set($ModuleName=$moduleName.substring(0, 1).toUpperCase() + $moduleName.substring(1))
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { $t } from '@/locales';
|
||||
import { useNaiveForm } from '@/hooks/common/form';
|
||||
#if($dictList && $dictList.size() > 0)import { useDict } from '@/hooks/business/dict';#end
|
||||
|
@ -8,6 +8,7 @@ defineOptions({
|
||||
interface Props {
|
||||
itemAlign?: NaiveUI.Align;
|
||||
disabledDelete?: boolean;
|
||||
disableAdd?: boolean;
|
||||
loading?: boolean;
|
||||
showAdd?: boolean;
|
||||
showDelete?: boolean;
|
||||
@ -55,7 +56,7 @@ function handleExport() {
|
||||
<NSpace :align="itemAlign" wrap justify="end" class="lt-sm:w-200px">
|
||||
<slot name="prefix"></slot>
|
||||
<slot name="default">
|
||||
<NButton v-if="showAdd" size="small" ghost type="primary" @click="add">
|
||||
<NButton v-if="showAdd" :disabled="disableAdd" size="small" ghost type="primary" @click="add">
|
||||
<template #icon>
|
||||
<icon-ic-round-plus class="text-icon" />
|
||||
</template>
|
||||
|
@ -29,15 +29,20 @@ export function useDownload() {
|
||||
const token = localStg.get('token');
|
||||
const clientId = import.meta.env.VITE_APP_CLIENT_ID;
|
||||
const now = Date.now();
|
||||
const formData = new FormData();
|
||||
Object.keys(params).forEach(key => formData.append(key, params[key]));
|
||||
const searchParams = new FormData();
|
||||
if (params) {
|
||||
Object.keys(params).forEach(key => {
|
||||
if (params[key] !== null && params[key] !== undefined) {
|
||||
searchParams.append(key, params[key]);
|
||||
}
|
||||
});
|
||||
}
|
||||
fetch(`${baseURL}${url}?t=${now}`, {
|
||||
method: 'post',
|
||||
body: formData,
|
||||
body: searchParams,
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
Clientid: clientId!,
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
Clientid: clientId!
|
||||
}
|
||||
})
|
||||
.then(async response => {
|
||||
|
@ -21,6 +21,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
|
||||
"iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
|
||||
login: () => import("@/views/_builtin/login/index.vue"),
|
||||
home: () => import("@/views/home/index.vue"),
|
||||
system_config: () => import("@/views/system/config/index.vue"),
|
||||
system_dict_data: () => import("@/views/system/dict/data/index.vue"),
|
||||
system_dict: () => import("@/views/system/dict/index.vue"),
|
||||
system_dict_type: () => import("@/views/system/dict/type/index.vue"),
|
||||
|
@ -86,6 +86,15 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
order: 1
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'system_config',
|
||||
path: '/system/config',
|
||||
component: 'view.system_config',
|
||||
meta: {
|
||||
title: 'system_config',
|
||||
i18nKey: 'route.system_config'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'system_dict',
|
||||
path: '/system/dict',
|
||||
|
@ -170,6 +170,7 @@ const routeMap: RouteMap = {
|
||||
"iframe-page": "/iframe-page/:url",
|
||||
"login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
|
||||
"system": "/system",
|
||||
"system_config": "/system/config",
|
||||
"system_dict": "/system/dict",
|
||||
"system_dict_data": "/system/dict/data",
|
||||
"system_dict_type": "/system/dict/type",
|
||||
|
41
src/typings/api/system.api.d.ts
vendored
41
src/typings/api/system.api.d.ts
vendored
@ -285,15 +285,7 @@ declare namespace Api {
|
||||
type DictDataOperateParams = CommonType.RecordNullable<
|
||||
Pick<
|
||||
Api.System.DictData,
|
||||
| 'dictCode'
|
||||
| 'dictSort'
|
||||
| 'dictLabel'
|
||||
| 'dictValue'
|
||||
| 'dictType'
|
||||
| 'cssClass'
|
||||
| 'listClass'
|
||||
| 'isDefault'
|
||||
| 'remark'
|
||||
'dictCode' | 'dictSort' | 'dictLabel' | 'dictValue' | 'dictType' | 'cssClass' | 'listClass' | 'remark'
|
||||
>
|
||||
>;
|
||||
|
||||
@ -381,6 +373,37 @@ declare namespace Api {
|
||||
/** post list */
|
||||
type PostList = Api.Common.PaginatingQueryRecord<Post>;
|
||||
|
||||
/** config */
|
||||
type Config = Common.CommonRecord<{
|
||||
/** 参数主键 */
|
||||
configId: CommonType.IdType;
|
||||
/** 租户编号 */
|
||||
tenantId: CommonType.IdType;
|
||||
/** 参数名称 */
|
||||
configName: string;
|
||||
/** 参数键名 */
|
||||
configKey: string;
|
||||
/** 参数键值 */
|
||||
configValue: string;
|
||||
/** 是否内置 */
|
||||
configType: string;
|
||||
/** 备注 */
|
||||
remark: string;
|
||||
}>;
|
||||
|
||||
/** config search params */
|
||||
type ConfigSearchParams = CommonType.RecordNullable<
|
||||
Pick<Api.System.Config, 'configName' | 'configKey' | 'configType' | 'createTime'> & Api.Common.CommonSearchParams
|
||||
>;
|
||||
|
||||
/** config operate params */
|
||||
type ConfigOperateParams = CommonType.RecordNullable<
|
||||
Pick<Api.System.Config, 'configId' | 'configName' | 'configKey' | 'configValue' | 'configType' | 'remark'>
|
||||
>;
|
||||
|
||||
/** config list */
|
||||
type ConfigList = Api.Common.PaginatingQueryRecord<Config>;
|
||||
|
||||
/** tenant */
|
||||
type Tenant = Common.CommonRecord<{
|
||||
/** id */
|
||||
|
2
src/typings/elegant-router.d.ts
vendored
2
src/typings/elegant-router.d.ts
vendored
@ -24,6 +24,7 @@ declare module "@elegant-router/types" {
|
||||
"iframe-page": "/iframe-page/:url";
|
||||
"login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
|
||||
"system": "/system";
|
||||
"system_config": "/system/config";
|
||||
"system_dict": "/system/dict";
|
||||
"system_dict_data": "/system/dict/data";
|
||||
"system_dict_type": "/system/dict/type";
|
||||
@ -93,6 +94,7 @@ declare module "@elegant-router/types" {
|
||||
| "iframe-page"
|
||||
| "login"
|
||||
| "home"
|
||||
| "system_config"
|
||||
| "system_dict_data"
|
||||
| "system_dict"
|
||||
| "system_dict_type"
|
||||
|
@ -10,6 +10,7 @@ import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import { emitter } from '../mitt';
|
||||
import DictDataOperateDrawer from './modules/dict-data-operate-drawer.vue';
|
||||
import DictDataSearch from './modules/dict-data-search.vue';
|
||||
import { ref } from 'vue';
|
||||
defineOptions({
|
||||
name: 'DictDataList'
|
||||
});
|
||||
@ -170,19 +171,29 @@ async function handleExport() {
|
||||
|
||||
emitter.on('rowClick', async (value: string) => {
|
||||
searchParams.dictType = value;
|
||||
await getData();
|
||||
await getDataByPage();
|
||||
});
|
||||
|
||||
/**
|
||||
* 自定义重置方法,重置dictLabel,不重置dictType
|
||||
*/
|
||||
async function handleReset() {
|
||||
searchParams.dictLabel = null;
|
||||
await getDataByPage();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
|
||||
<DictDataSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
|
||||
<DictDataSearch v-model:model="searchParams" @reset="handleReset" @search="getDataByPage" />
|
||||
<NCard title="字典数据列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<template #header-extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="columnChecks"
|
||||
:disabled-delete="checkedRowKeys.length === 0"
|
||||
:loading="loading"
|
||||
:disable-add="searchParams.dictType == null"
|
||||
:show-add="hasAuth('system:dictData:add')"
|
||||
:show-delete="hasAuth('system:dictData:remove')"
|
||||
:show-export="hasAuth('system:dictData:export')"
|
||||
@ -209,6 +220,7 @@ emitter.on('rowClick', async (value: string) => {
|
||||
v-model:visible="drawerVisible"
|
||||
:operate-type="operateType"
|
||||
:row-data="editingData"
|
||||
:dict-type="searchParams.dictType || ''"
|
||||
@submitted="getDataByPage"
|
||||
/>
|
||||
</NCard>
|
||||
|
@ -1,8 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import { computed, h, reactive, watch } from 'vue';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
import { fetchCreateDictData, fetchUpdateDictData } from '@/service/api/system/dict-data';
|
||||
import { NTag } from 'naive-ui';
|
||||
|
||||
defineOptions({
|
||||
name: 'DictDataOperateDrawer'
|
||||
@ -13,6 +14,7 @@ interface Props {
|
||||
operateType: NaiveUI.TableOperateType;
|
||||
/** the edit row data */
|
||||
rowData?: Api.System.DictData | null;
|
||||
dictType: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
@ -42,15 +44,23 @@ 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: null,
|
||||
dictSort: 0,
|
||||
dictLabel: '',
|
||||
dictValue: '',
|
||||
dictType: '',
|
||||
dictType: props.dictType,
|
||||
cssClass: '',
|
||||
listClass: null,
|
||||
isDefault: '',
|
||||
remark: ''
|
||||
};
|
||||
}
|
||||
@ -83,7 +93,7 @@ async function handleSubmit() {
|
||||
|
||||
// request
|
||||
if (props.operateType === 'add') {
|
||||
const { dictSort, dictLabel, dictValue, dictType, cssClass, listClass, isDefault, remark } = model;
|
||||
const { dictSort, dictLabel, dictValue, dictType, cssClass, listClass, remark } = model;
|
||||
const { error } = await fetchCreateDictData({
|
||||
dictSort,
|
||||
dictLabel,
|
||||
@ -91,14 +101,13 @@ async function handleSubmit() {
|
||||
dictType,
|
||||
cssClass,
|
||||
listClass,
|
||||
isDefault,
|
||||
remark
|
||||
});
|
||||
if (error) return;
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit') {
|
||||
const { dictCode, dictSort, dictLabel, dictValue, dictType, cssClass, listClass, isDefault, remark } = model;
|
||||
const { dictCode, dictSort, dictLabel, dictValue, dictType, cssClass, listClass, remark } = model;
|
||||
const { error } = await fetchUpdateDictData({
|
||||
dictCode,
|
||||
dictSort,
|
||||
@ -107,7 +116,6 @@ async function handleSubmit() {
|
||||
dictType,
|
||||
cssClass,
|
||||
listClass,
|
||||
isDefault,
|
||||
remark
|
||||
});
|
||||
if (error) return;
|
||||
@ -124,32 +132,44 @@ watch(visible, () => {
|
||||
restoreValidation();
|
||||
}
|
||||
});
|
||||
|
||||
function renderTagLabel(option: { label: string; value: string }) {
|
||||
return h(
|
||||
'div',
|
||||
{ class: 'flex items-center gap-2' },
|
||||
[
|
||||
h(NTag, {type: option.value as any,}, { default: () => option.label })
|
||||
]
|
||||
);
|
||||
}
|
||||
</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="dictSort">
|
||||
<NInputNumber v-model:value="model.dictSort" placeholder="请输入字典排序" />
|
||||
<NFormItem label="字典类型" path="dictType">
|
||||
<NInput v-model:value="model.dictType" disabled placeholder="请输入字典类型" />
|
||||
</NFormItem>
|
||||
<NFormItem label="字典标签" path="dictLabel">
|
||||
<NFormItem label="标签样式" path="listClass">
|
||||
<NSelect
|
||||
v-model:value="model.listClass"
|
||||
:options="listClassOptions"
|
||||
placeholder="请选择标签样式"
|
||||
:render-label="renderTagLabel"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="数据标签" path="dictLabel">
|
||||
<NInput v-model:value="model.dictLabel" placeholder="请输入字典标签" />
|
||||
</NFormItem>
|
||||
<NFormItem label="字典键值" path="dictValue">
|
||||
<NFormItem label="数据键值" path="dictValue">
|
||||
<NInput v-model:value="model.dictValue" placeholder="请输入字典键值" />
|
||||
</NFormItem>
|
||||
<NFormItem label="字典类型" path="dictType">
|
||||
<NInput v-model:value="model.dictType" placeholder="请输入字典类型" />
|
||||
</NFormItem>
|
||||
<NFormItem label="样式属性(其他样式扩展)" path="cssClass">
|
||||
<NFormItem label="css类名" path="cssClass">
|
||||
<NInput v-model:value="model.cssClass" placeholder="请输入样式属性(其他样式扩展)" />
|
||||
</NFormItem>
|
||||
<NFormItem label="表格回显样式" path="listClass">
|
||||
<NInput v-model:value="model.listClass" placeholder="请输入表格回显样式" />
|
||||
</NFormItem>
|
||||
<NFormItem label="是否默认(Y是 N否)" path="isDefault">
|
||||
<NInput v-model:value="model.isDefault" placeholder="请输入是否默认(Y是 N否)" />
|
||||
<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="请输入备注" />
|
||||
@ -166,4 +186,3 @@ watch(visible, () => {
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@/service/api/system/dict-data
|
||||
|
@ -9,9 +9,9 @@ onUnmounted(() => emitter.off('rowClick'));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full flex gap-16px">
|
||||
<DictTypeList class="w-1/2" />
|
||||
<DictDataList class="w-1/2" />
|
||||
<div class="h-full flex flex-col md:flex-row gap-16px">
|
||||
<DictTypeList class="w-full md:w-1/2" />
|
||||
<DictDataList class="w-full md:w-1/2" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -202,9 +202,9 @@ async function handleExport() {
|
||||
<NCard title="租户列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<template #header-extra>
|
||||
<NSpace>
|
||||
<NPopconfirm @positive-click="() => handleSyncTenantDict()">
|
||||
<NPopconfirm v-if="isSuperAdmin" @positive-click="() => handleSyncTenantDict()">
|
||||
<template #trigger>
|
||||
<NButton v-if="isSuperAdmin" size="small">
|
||||
<NButton size="small">
|
||||
<template #icon>
|
||||
<icon-material-symbols:sync-rounded />
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user