数据字典相关。

README.md

@@ -19,4 +19,4 @@ pnpm run dev
 和crud相关代码可以参看hooksDemo.vue (目前不够特别全面，需要什么后续可以在userCrud.ts里面添加)
 
 功能示例：
-1. v-debounce:click防抖。2.按钮权限。v-hasPerm或者checkPerm
+1. v-debounce:click防抖。2.按钮权限。v-hasPerm或者checkPerm 3.数据字典在dictionary里面添加type。

package.json

@@ -57,6 +57,7 @@
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.1",
     "pinia": "^2.1.7",
+    "pinia-plugin-persist": "^1.0.0",
     "sockjs-client": "1.6.1",
     "sortablejs": "^1.15.2",
     "stompjs": "^2.3.3",

src/api/auth/index.ts

@@ -44,6 +44,17 @@ export function getCaptchaApi(): AxiosPromise<CaptchaResult> {
   });
 }
 
+/**
+ * 登录成功后获取用户字典
+ */
+export function getUserDicts(data: string[]): AxiosPromise {
+  return request({
+    url: "/api/v1/sys/dictData/queryByTypes",
+    method: "post",
+    data: data,
+  });
+}
+
 export function getOrgListApi(): AxiosPromise<any[]> {
   return request({
     url: "/api/v1/sys/dept/orgList",

src/store/index.ts

@@ -1,7 +1,9 @@
 import type { App } from "vue";
 import { createPinia } from "pinia";
+import piniaPersist from "pinia-plugin-persist";
 
 const store = createPinia();
+store.use(piniaPersist);
 
 // 全局注册 store
 export function setupStore(app: App<Element>) {
@@ -14,4 +16,5 @@ export * from "./modules/settings";
 export * from "./modules/tagsView";
 export * from "./modules/user";
 export * from "./modules/common";
+export * from "./modules/dictionary";
 export { store };

src/store/modules/dictionary.ts

@@ -0,0 +1,26 @@
+import { store } from "@/store";
+import { defineStore } from "pinia";
+
+export const useDictionaryStore = defineStore("dictionaryStore", {
+  state: () => ({
+    /**
+     * 需要后端返回的type
+     */
+    types: ["station_type", "station_operate_type"],
+    dicts: [],
+  }),
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        key: "dicts",
+        storage: sessionStorage,
+        paths: ["dicts"],
+      },
+    ],
+  },
+});
+
+export function useDictionaryStoreHook() {
+  return useDictionaryStore(store);
+}

src/views/demo/hooksDemo.vue

@@ -61,8 +61,10 @@
 import { ref, getCurrentInstance } from "vue";
 import { useCrud } from "@/hooks/userCrud";
 import ButtonPermKeys from "@/common/configs/buttonPermission";
-import { useCommonStoreHook } from "@/store";
+import { useCommonStoreHook, useDictionaryStoreHook } from "@/store";
 const { isShowTable, tableType } = toRefs(useCommonStoreHook());
+// 数据字典相关
+const { dicts } = useDictionaryStoreHook();
 
 const test = () => {
   isShowTable.value = true;
@@ -132,6 +134,16 @@ option.value = Object.assign(option.value, {
       search: true,
     },
     {
+      label: "网络字典",
+      prop: "province",
+      type: "select",
+      dicData: dicts.station_operate_type,
+      props: {
+        label: "dictLabel",
+        value: "dictValue",
+      },
+    },
+    {
       label: "身高",
       prop: "projectCode",
       search: true,

src/views/login/index.vue

@@ -110,8 +110,8 @@
 </template>
 
 <script setup lang="ts">
-import { useSettingsStore, useUserStore } from "@/store";
-import { getCaptchaApi, getOrgListApi } from "@/api/auth";
+import { useSettingsStore, useUserStore, useDictionaryStore } from "@/store";
+import { getCaptchaApi, getOrgListApi, getUserDicts } from "@/api/auth";
 import { LoginData } from "@/api/auth/types";
 import { Sunny, Moon } from "@element-plus/icons-vue";
 import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
@@ -122,6 +122,8 @@ import { usePermissionStore } from "@/store/modules/permission";
 // Stores
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
+// 数据字典相关
+const dictStore = useDictionaryStore();
 
 // Internationalization
 const { t } = useI18n();
@@ -129,14 +131,14 @@ const { t } = useI18n();
 // Reactive states
 const isDark = ref(settingsStore.theme === ThemeEnum.DARK);
 const icpVisible = ref(true);
-const orgList = ref([]);
+const orgList = ref<any>([]);
 const loading = ref(false); // 按钮loading
 const isCapslock = ref(false); // 是否大写锁定
 const captchaBase64 = ref(); // 验证码图片Base64字符串
 const loginFormRef = ref(ElForm); // 登录表单ref
 const { height } = useWindowSize();
 
-const loginData = ref<LoginData>({
+const loginData = ref<any>({
   userName: "admin",
   password: "admin@123",
 });
@@ -212,6 +214,13 @@ function handleLogin() {
             },
             {}
           );
+          // 获取字典
+          getUserDicts(dictStore.types).then((res) => {
+            if (res.data) {
+              dictStore.dicts = res?.data ?? [];
+            }
+          });
+
           router.push({ path: redirect, query: otherQueryParams });
         })
         .catch(() => {