集成插件封装json转formData方法

client_h5/package.json

@@ -27,6 +27,7 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "sass": "^1.71.1",
     "typescript": "^5.2.2",
+    "unplugin-auto-import": "^0.17.5",
     "vite": "^5.1.4",
     "vue-tsc": "^1.8.27"
   }

client_h5/src/pages/home/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useUserStoreWithOut } from "@/stores/modules/user";
 import { getAssetsURI } from "@/utils/common";
-import { ref } from "vue";
 
 const userStore = useUserStoreWithOut();
 

client_h5/src/types/auto-imports.d.ts

@@ -0,0 +1,77 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const required: typeof import('@/utils/formRules')['required']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCrudSchemas: typeof import('@/hooks/web/useCrudSchemas')['useCrudSchemas']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useI18n: typeof import('@/hooks/web/useI18n')['useI18n']
+  const useLink: typeof import('vue-router')['useLink']
+  const useMessage: typeof import('@/hooks/web/useMessage')['useMessage']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTable: typeof import('@/hooks/web/useTable')['useTable']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

client_h5/src/utils/common.ts

@@ -20,4 +20,18 @@ export const getUrlParams: (url: Required<string>)=>Map<string, string> | null =
         return map;
     }
     return null;
+}
+
+/***
+ * JSON转formData
+ */
+export const jsonToFormData = (json: any): FormData | null => {
+  const keys: string[] = Object.keys(json)
+  const formData = new FormData();
+  if (keys.length > 0) { 
+    keys.forEach((key) => { 
+      formData.append(key, (json[key] instanceof Object) ? JSON.stringify(json[key]) : json[key]);
+    });
+  }
+  return formData;
 }

client_h5/vite.config.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { createVitePlugins } from './vite.plugin'
 
 const root = process.cwd()
 function pathResolve(dir: string) {
@@ -22,5 +22,5 @@ export default defineConfig({
       }
     ]
   },
-  plugins: [vue()],
+  plugins: createVitePlugins(),
 })

client_h5/vite.plugin.ts

@@ -0,0 +1,44 @@
+import { resolve } from 'path'
+import Vue from '@vitejs/plugin-vue'
+// @ts-ignore
+import AutoImport from 'unplugin-auto-import/vite'
+
+export function createVitePlugins() {
+  const root = process.cwd()
+
+  // 路径查找
+  function pathResolve(dir: string) {
+    return resolve(root, '.', dir)
+  }
+
+  return [
+    Vue(),
+    AutoImport({
+      include: [
+        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+        /\.vue$/,
+        /\.vue\?vue/, // .vue
+        /\.md$/ // .md
+      ],
+      imports: [
+        'vue',
+        'vue-router',
+        // 可额外添加需要 autoImport 的组件
+        {
+          '@/hooks/web/useI18n': ['useI18n'],
+          '@/hooks/web/useMessage': ['useMessage'],
+          '@/hooks/web/useTable': ['useTable'],
+          '@/hooks/web/useCrudSchemas': ['useCrudSchemas'],
+          '@/utils/formRules': ['required'],
+          '@/utils/dict': ['DICT_TYPE']
+        }
+      ],
+      dts: 'src/types/auto-imports.d.ts',
+      eslintrc: {
+        enabled: false, // Default `false`
+        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
+        globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
+      }
+    }),
+  ]
+}