wip: 表单BUG修复中

.env.base

@@ -2,7 +2,7 @@
 NODE_ENV=development
 
 # 接口前缀
-VITE_API_BASEPATH=base
+VITE_API_BASE_PATH=base
 
 # 打包路径
 VITE_BASE_PATH=/

.env.dev

@@ -2,7 +2,7 @@
 NODE_ENV=production
 
 # 接口前缀
-VITE_API_BASEPATH=dev
+VITE_API_BASE_PATH=dev
 
 # 打包路径
 VITE_BASE_PATH=/dist-dev/

.env.gitee

@@ -2,7 +2,7 @@
 NODE_ENV=production
 
 # 接口前缀
-VITE_API_BASEPATH=pro
+VITE_API_BASE_PATH=pro
 
 # 打包路径
 VITE_BASE_PATH=/vue-element-plus-admin/

.env.pro

@@ -2,7 +2,7 @@
 NODE_ENV=production
 
 # 接口前缀
-VITE_API_BASEPATH=pro
+VITE_API_BASE_PATH=pro
 
 # 打包路径
 VITE_BASE_PATH=/

.env.test

@@ -2,7 +2,7 @@
 NODE_ENV=production
 
 # 接口前缀
-VITE_API_BASEPATH=test
+VITE_API_BASE_PATH=test
 
 # 打包路径
 VITE_BASE_PATH=/dist-test/

package.json

@@ -10,7 +10,7 @@
     "ts:check": "vue-tsc --noEmit",
     "build:pro": "vite build --mode pro",
     "build:gitee": "vite build --mode gitee",
-    "build:dev": "npm run ts:check && vite build --mode dev",
+    "build:dev": "vite build --mode dev",
     "build:test": "npm run ts:check && vite build --mode test",
     "serve:pro": "vite preview --mode pro",
     "serve:dev": "vite preview --mode dev",

src/api/common/index.ts

@@ -1,11 +1,11 @@
 import request from '@/config/axios'
 
 // 获取所有字典
-export const getDictApi = (): Promise<IResponse> => {
+export const getDictApi = () => {
   return request.get({ url: '/dict/list' })
 }
 
 // 模拟获取某个字典
-export const getDictOneApi = async (): Promise<IResponse> => {
+export const getDictOneApi = async () => {
   return request.get({ url: '/dict/one' })
 }

src/components/Form/src/Form.vue

@@ -1,6 +1,15 @@
 <script lang="tsx">
-import { PropType, defineComponent, ref, computed, unref, watch, onMounted } from 'vue'
-import { ElForm, ElFormItem, ElRow, ElCol, ElTooltip } from 'element-plus'
+import {
+  PropType,
+  defineComponent,
+  ref,
+  computed,
+  unref,
+  watch,
+  onMounted,
+  defineAsyncComponent
+} from 'vue'
+import { ElForm, ElFormItem, ElRow, ElCol } from 'element-plus'
 import { componentMap } from './helper/componentMap'
 import { propTypes } from '@/utils/propTypes'
 import { getSlot } from '@/utils/tsxHelper'
@@ -9,8 +18,7 @@ import {
   setGridProp,
   setComponentProps,
   setItemComponentSlots,
-  initModel,
-  setFormItemSlots
+  initModel
 } from './helper'
 import { useRenderSelect } from './components/useRenderSelect'
 import { useRenderRadio } from './components/useRenderRadio'
@@ -19,7 +27,6 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { findIndex } from '@/utils'
 import { set } from 'lodash-es'
 import { FormProps } from './types'
-import { Icon } from '@/components/Icon'
 import {
   FormSchema,
   FormSetProps,
@@ -125,6 +132,11 @@ export default defineComponent({
       return unref(elFormRef) as ComponentRef<typeof ElForm>
     }
 
+    const getOptions = async (fn: Function) => {
+      const options = await fn()
+      console.log('=====：', options)
+    }
+
     expose({
       setValues,
       formModel,
@@ -139,6 +151,7 @@ export default defineComponent({
     watch(
       () => unref(getProps).schema,
       (schema = []) => {
+        console.log('@@####')
         formModel.value = initModel(schema, unref(formModel))
       },
       {
@@ -182,14 +195,13 @@ export default defineComponent({
 
     // 渲染formItem
     const renderFormItem = (item: FormSchema) => {
-      const formItemSlots = {
+      const formItemSlots: Recordable = {
         default: () => {
           if (slots[item.field]) {
             return getSlot(slots, item.field, formModel.value)
           } else {
-                const Com = componentMap[item.component as string] as ReturnType<
-                  typeof defineComponent
-                >
+            console.log(item.field)
+            const Com = componentMap[item.component as string] as ReturnType<typeof defineComponent>
 
             const { autoSetPlaceholder } = unref(getProps)
 
@@ -197,8 +209,13 @@ export default defineComponent({
             const slotsMap: Recordable = {
               ...setItemComponentSlots(componentSlots)
             }
-                // 如果是select组件，并且没有自定义模板，自动渲染options
+            // // 如果是select组件，并且没有自定义模板，自动渲染options
             if (item.component === ComponentNameEnum.SELECT) {
+              // 如果有optionApi，优先使用optionApi
+              if (item.optionApi) {
+                // 内部自动调用接口，不影响其他渲染
+                getOptions(item.optionApi)
+              }
               slotsMap.default = !componentSlots.default
                 ? () => renderSelectOptions(item)
                 : () => {
@@ -243,6 +260,7 @@ export default defineComponent({
                   }
             }
 
+            const Comp = () => {
               return (
                 <Com
                   vModel={formModel.value[item.field]}
@@ -254,23 +272,31 @@ export default defineComponent({
                 </Com>
               )
             }
+
+            return <>{Comp()}</>
+          }
         }
       }
       if (item?.formItemProps?.slots?.label) {
         formItemSlots.label = (...args: any[]) => {
-          return item.formItemProps.slots.label(...args)
+          return (item?.formItemProps?.slots as any)?.label(...args)
         }
       }
       if (item?.formItemProps?.slots?.error) {
         formItemSlots.error = (...args: any[]) => {
-          return item.formItemProps.slots.error(...args)
+          return (item?.formItemProps?.slots as any)?.error(...args)
         }
       }
       return (
         <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
-          {{
-            ...formItemSlots
-          }}
+          {formItemSlots}
+          {/* {{
+            default: () => {
+              console.log(item.field)
+
+              return '2222'
+            }
+          }} */}
         </ElFormItem>
       )
     }

src/components/Form/src/types/index.ts

@@ -820,7 +820,7 @@ export interface FormSchema {
   /**
    * @returns 远程加载下拉项
    */
-  api?: <T = any>() => AxiosPromise<T>
+  optionApi?: any
 }
 
 export interface FormProps {

src/components/InputPassword/src/InputPassword.vue

@@ -32,10 +32,6 @@ const emit = defineEmits(['update:modelValue'])
 // 设置input的type属性
 const textType = ref<'password' | 'text'>('password')
 
-const changeTextType = () => {
-  textType.value = unref(textType) === 'text' ? 'password' : 'text'
-}
-
 // 输入框的值
 const valueRef = ref(props.modelValue)
 

src/config/axios/config.ts

@@ -4,7 +4,7 @@ import {
   AxiosRequestHeaders,
   AxiosError,
   InternalAxiosRequestConfig
-} from './type'
+} from './types'
 import { ElMessage } from 'element-plus'
 import qs from 'qs'
 

src/config/axios/index.ts

@@ -4,7 +4,7 @@ import config from './config'
 
 const { defaultHeaders } = config
 
-const request = (option: any) => {
+const request = (option: AxiosConfig) => {
   const { url, method, params, data, headersType, responseType } = option
   return service.request({
     url: url,
@@ -19,17 +19,17 @@ const request = (option: any) => {
 }
 
 export default {
-  get: <T = any>(option: any) => {
-    return request({ method: 'get', ...option }) as unknown as T
+  get: <T = any>(option: AxiosConfig) => {
+    return request({ method: 'get', ...option }) as Promise<IResponse<T>>
   },
-  post: <T = any>(option: any) => {
-    return request({ method: 'post', ...option }) as unknown as T
+  post: <T = any>(option: AxiosConfig) => {
+    return request({ method: 'post', ...option }) as Promise<IResponse<T>>
   },
-  delete: <T = any>(option: any) => {
-    return request({ method: 'delete', ...option }) as unknown as T
+  delete: <T = any>(option: AxiosConfig) => {
+    return request({ method: 'delete', ...option }) as Promise<IResponse<T>>
   },
-  put: <T = any>(option: any) => {
-    return request({ method: 'put', ...option }) as unknown as T
+  put: <T = any>(option: AxiosConfig) => {
+    return request({ method: 'put', ...option }) as Promise<IResponse<T>>
   },
   cancelRequest: (url: string | string[]) => {
     return service.cancelRequest(url)

src/config/axios/service.ts

@@ -1,10 +1,10 @@
 import axios from 'axios'
 import config, { defaultRequestInterceptors, defaultResponseInterceptors } from './config'
 
-import { AxiosInstance, InternalAxiosRequestConfig, RequestConfig, AxiosResponse } from './type'
+import { AxiosInstance, InternalAxiosRequestConfig, RequestConfig, AxiosResponse } from './types'
 
 const { interceptors, baseUrl } = config
-export const PATH_URL = baseUrl[import.meta.env.VITE_API_BASEPATH]
+export const PATH_URL = baseUrl[import.meta.env.VITE_API_BASE_PATH]
 
 const { requestInterceptors, responseInterceptors } = interceptors
 

src/locales/en.ts

@@ -283,7 +283,9 @@ export default {
     verifyReset: 'Verify reset',
     // 富文本编辑器
     richText: 'Rich text',
-    form: 'Form'
+    form: 'Form',
+    // 远程加载
+    remoteLoading: 'Remote loading'
   },
   guideDemo: {
     guide: 'Guide',

src/locales/zh-CN.ts

@@ -282,7 +282,9 @@ export default {
     verifyReset: '验证重置',
     // 富文本编辑器
     richText: '富文本编辑器',
-    form: '表单'
+    form: '表单',
+    // 远程加载
+    remoteLoading: '远程加载'
   },
   guideDemo: {
     guide: '引导页',

types/env.d.ts

@@ -9,7 +9,7 @@ declare module '*.vue' {
 
 interface ImportMetaEnv {
   readonly VITE_APP_TITLE: string
-  readonly VITE_API_BASEPATH: string
+  readonly VITE_API_BASE_PATH: string
   readonly VITE_BASE_PATH: string
   readonly VITE_DROP_DEBUGGER: string
   readonly VITE_DROP_CONSOLE: string