列表中将常量值转文本，store缓存常量字典

Admin.NET/Admin.NET.Core/Service/ConstSelector/ConstSelectorService.cs

@@ -7,7 +7,6 @@
 public class ConstSelectorService : IDynamicApiController, ITransient
 {
     private readonly IDistributedCache _cache;
-
     public ConstSelectorService(IDistributedCache cache)
     {
         _cache = cache;
@@ -17,8 +16,9 @@ public class ConstSelectorService : IDynamicApiController, ITransient
     /// 获取所有常量下拉框列表
     /// </summary>
     /// <returns></returns>
+    [AllowAnonymous]
     [HttpGet("/constSelector/allConstSelector")]
-    public async Task<dynamic> GetAllConstSelector()
+    public async Task<List<SelectorDto>> GetAllConstSelector()
     {
         var key = $"{CacheConst.KeyConstSelector}AllSelector";
         var json = await _cache.GetStringAsync(key);
@@ -41,8 +41,9 @@ public class ConstSelectorService : IDynamicApiController, ITransient
     /// </summary>
     /// <param name="typeName"></param>
     /// <returns></returns>
+    [AllowAnonymous]
     [HttpGet("/constSelector/constSelector")]
-    public async Task<dynamic> GetConstSelector(string typeName)
+    public async Task<List<SelectorDto>> GetConstSelector(string typeName)
     {
         var key = $"{CacheConst.KeyConstSelector}{typeName.ToUpper()}";
         var json = await _cache.GetStringAsync(key);
@@ -65,6 +66,22 @@ public class ConstSelectorService : IDynamicApiController, ITransient
         return selectData;
     }
 
+    /// <summary>
+    /// 获取所有下拉框及选项  用于前端缓存
+    /// </summary>
+    /// <returns></returns>
+    [AllowAnonymous]
+    [HttpGet("/constSelector/allConstSelectorWithOptions")]
+    public async Task<List<SelectorDto>> GetAllConstSelectorWithOptions()
+    {
+        var selectors = await GetAllConstSelector();
+        foreach (var p in selectors)
+        {
+            p.Data = await GetConstSelector(Convert.ToString(p.Code));
+        }
+        return selectors;
+    }
+
     /// <summary>
     /// 获取所有常量
     /// </summary>
@@ -80,4 +97,5 @@ public class ConstSelectorService : IDynamicApiController, ITransient
             return typeList;
         });
     }
-}
+}
+

Admin.NET/Admin.NET.Web.Entry/wwwroot/Template/data.data.ts.vm

@@ -10,7 +10,7 @@ if(@column.EffectType == "Upload"){
 }else if(@column.EffectType == "ApiTreeSelect"){
 @:import { get@(@column.FkEntityName)Tree } from '/@@/api/main/@(@Model.ClassName)';
 }else if(@column.EffectType == "ConstSelector"){
-@:import { getConstSelector } from '/@@/api/sys/admin';
+@:import { codeToName, getSelector } from '/@@/utils/helper/constSelectorHelper';
 }else if(@column.EffectType == "Switch"){
 @:import { Switch } from 'ant-design-vue';
 }
@@ -32,6 +32,10 @@ if(@column.EffectType == "Upload"){
     @:customRender: ({ record }) => {
       @:return h(@(@column.EffectType), { checked: record.@(@column.LowerColumnName) });
     @:},
+}else if(@column.EffectType == "ConstSelector"){
+    @:customRender: ({ record }) => {
+      @:return codeToName(record.@(@column.LowerColumnName), '@(@column.DictTypeCode)');
+    @:},
 }
   @:},
     }
@@ -63,10 +67,9 @@ if(@column.EffectType == "fk"){
       @:},
     @:},
 }else if(@column.EffectType == "ConstSelector"){
-    @:component: 'ApiSelect',
+    @:component: 'Select',
     @:componentProps: {
-      @:api: getConstSelector,
-      @:params: '@(@column.DictTypeCode)',
+      @:options: getSelector('@(@column.DictTypeCode)'),
       @:fieldNames: {
         @:label: 'name',
         @:value: 'code',
@@ -115,10 +118,9 @@ if(@column.EffectType == "fk"){
       @:},
     @:},
 }else if(@column.EffectType == "ConstSelector"){
-    @:component: 'ApiSelect',
+    @:component: 'Select',
     @:componentProps: {
-      @:api: getConstSelector,
-      @:params: '@(@column.DictTypeCode)',
+      @:options: getSelector('@(@column.DictTypeCode)'),
       @:fieldNames: {
         @:label: 'name',
         @:value: 'code',

Vben2/src/api/sys/admin.ts

@@ -136,6 +136,7 @@ enum Api {
   // 常量下拉框接口
   AllConstSelector = '/constSelector/allConstSelector',
   ConstSelector = '/constSelector/constSelector',
+  AllConstSelectorWithOptions = '/constSelector/allConstSelectorWithOptions',
 }
 
 ////////// 账号管理接口 //////////
@@ -433,3 +434,6 @@ export const getAllConstSelector = () => defHttp.get<any>({ url: Api.AllConstSel
 // 根据类名获取下拉框数据
 export const getConstSelector = (typeName?: string) =>
   defHttp.get<any>({ url: Api.ConstSelector, params: { typeName } });
+// 获取所有下拉框及选项
+export const getAllConstSelectorWithOptions = () =>
+  defHttp.get<any>({ url: Api.AllConstSelectorWithOptions });

Vben2/src/main.ts

@@ -14,6 +14,7 @@ import { setupStore } from '/@/store';
 import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
 import { registerGlobComp } from '/@/components/registerGlobComp';
+import { setupConstSelectorFilter } from './utils/helper/constSelectorHelper';
 
 async function bootstrap() {
   const app = createApp(App);
@@ -52,6 +53,8 @@ async function bootstrap() {
   // 配置全局错误处理
   setupErrorHandle(app);
 
+  setupConstSelectorFilter(app);
+
   // https://next.router.vuejs.org/api/#isready
   // await router.isReady();
 

Vben2/src/router/guard/permissionGuard.ts

@@ -29,6 +29,10 @@ export function createPermissionGuard(router: Router) {
       return;
     }
 
+    //缓存所有常量数据
+    if (userStore.constSelectorWithOptions.length === 0) {
+      await userStore.getAllConstSelectorWithOptionsAction();
+    }
     const token = userStore.getToken;
 
     // Whitelist can be directly entered

Vben2/src/store/modules/user.ts

@@ -8,6 +8,7 @@ import { ROLES_KEY, TOKEN_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum';
 import { getAuthCache, setAuthCache } from '/@/utils/auth';
 import { GetUserInfoModel, LoginParams } from '/@/api/sys/model/userModel';
 import { doLogout, getUserInfo, loginApi } from '/@/api/sys/user';
+import { getAllConstSelectorWithOptions } from '/@/api/sys/admin';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { router } from '/@/router';
@@ -23,6 +24,7 @@ interface UserState {
   roleList: RoleEnum[];
   sessionTimeout?: boolean;
   lastUpdateTime: number;
+  constSelectorWithOptions: [];
 }
 
 export const useUserStore = defineStore({
@@ -38,6 +40,8 @@ export const useUserStore = defineStore({
     sessionTimeout: false,
     // Last fetch time
     lastUpdateTime: 0,
+
+    constSelectorWithOptions: [],
   }),
   getters: {
     getUserInfo(): UserInfo {
@@ -55,6 +59,9 @@ export const useUserStore = defineStore({
     getLastUpdateTime(): number {
       return this.lastUpdateTime;
     },
+    getAllConstSelectorWithOptions(): any[] {
+      return this.constSelectorWithOptions || getAllConstSelectorWithOptions();
+    },
   },
   actions: {
     setToken(info: string | undefined) {
@@ -168,6 +175,11 @@ export const useUserStore = defineStore({
         },
       });
     },
+    async getAllConstSelectorWithOptionsAction() {
+      const data = await getAllConstSelectorWithOptions();
+      this.constSelectorWithOptions = data;
+      // setAuthCache(USER_INFO_KEY, data);
+    },
   },
 });
 

Vben2/src/utils/helper/constSelectorHelper.ts

@@ -0,0 +1,32 @@
+import type { App } from 'vue';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+
+export function setupConstSelectorFilter(app: App) {
+  // 全局过滤器  在vue文件中调用  $filters.codeToName(code,type)
+  app.config.globalProperties.$filters = {
+    codeToName(code, type) {
+      return codeToName(code, type);
+    },
+  };
+}
+
+//常量值转换
+export function codeToName(code, type) {
+  const userStore = useUserStoreWithOut();
+  try {
+    const name = userStore.constSelectorWithOptions
+      .filter((x) => x.code === type)
+      .map((x) => x.data)
+      .map((x) => x.filter((y) => y.code === code))
+      .map((x) => x[0].name);
+    return name[0];
+  } catch (error) {
+    return code;
+  }
+}
+
+export function getSelector(type) {
+  const userStore = useUserStoreWithOut();
+  const selector = userStore.constSelectorWithOptions.filter((x) => x.code === type)[0].data;
+  return selector;
+}