fix: 修复表单弹窗初始化问题

src/api/instance/axios.d.ts

@@ -1,7 +1,7 @@
-import { IToastOptions } from "@/components";
+import { IToastOptions } from '@/components';
-import "axios";
+import 'axios';
 
-declare module "axios" {
+declare module 'axios' {
   interface AxiosRequestConfig {
     /**
      * 请求弹窗配置
@@ -26,5 +26,9 @@ declare module "axios" {
      * 请求异常提示
      */
     reqErrorTip?: boolean | string;
+    /**
+     * TODO
+     */
+    tip?: boolean | string | { requestErrorTip?: string; responseErrorTip?: string };
   }
 }

src/api/interceptors/exception.ts

@@ -33,7 +33,6 @@ export function addExceptionInterceptor(axios: AxiosInstance, exipreHandler?: (.
       return res;
     },
     error => {
-      console.log('res error', error);
       if (error.response) {
         const code = error.response.data?.code;
         if (expiredCodes.includes(code)) {
@@ -48,11 +47,14 @@ export function addExceptionInterceptor(axios: AxiosInstance, exipreHandler?: (.
           }
           return Promise.reject(error);
         }
-        const resMsg = error.response?.data?.message;
+        let message: string | null = resMessageTip;
-        let message: string | null = resMsg ?? resMessageTip;
         if (error.config?.method === 'get') {
           message = resGetMessage;
         }
+        const resMsg = error.response?.data?.message;
+        if (resMsg) {
+          message = resMsg;
+        }
         if (has(error.config, 'resErrorTip')) {
           const tip = error.config.resErrorTip;
           if (tip) {

src/components/AnForm/components/FormModal.tsx

@@ -4,6 +4,7 @@ import { InjectionKey, PropType, Ref } from 'vue';
 import { getModel, setModel } from '../utils/useFormModel';
 import { AnForm, AnFormInstance, AnFormSubmit } from './Form';
 import { AnFormItemProps } from './FormItem';
+import { cloneDeep } from 'lodash-es';
 
 export interface AnFormModalContext {
   visible: Ref<boolean>;
@@ -113,6 +114,7 @@ export const AnFormModal = defineComponent({
   emits: ['update:model', 'submited'],
   setup(props, { emit }) {
     const model = useVModel(props, 'model', emit);
+    const originModel = cloneDeep(model.value);
     const anFormRef = ref<AnFormInstance | null>(null);
     const visible = ref(false);
     const loading = ref(false);
@@ -175,7 +177,8 @@ export const AnFormModal = defineComponent({
     const open = async (data: Recordable = {}) => {
       visible.value = true;
       await nextTick();
-      anFormRef.value && setModel(model.value, data);
+      model.value = cloneDeep(originModel)
+      setModel(model.value, data);
     };
 
     const close = () => {

src/components/AnForm/hooks/useFormItems.tsx

@@ -73,7 +73,7 @@ export function useFormItems(items: FormItem[], model: Recordable) {
       (target.setterProps as Recordable).placholder = item.placeholder;
     }
 
-    if (has(item, 'value')) {
+    if (!has(model, item.field)) {
       model[item.field] = item.value;
     }
 

src/components/AnForm/hooks/useFormModal.tsx

@@ -15,6 +15,10 @@ export type FormModalUseOptions = Partial<Omit<AnFormModalProps, 'items'>> & {
   width?: number;
   /**
    * modal宽度
+   * @example
+   * ```ts
+   * 1080
+   * ```
    */
   modalWidth?: number;
   /**

src/components/AnForm/utils/useFormModel.tsx

@@ -32,6 +32,7 @@ export function setModel(model: Recordable, data: Recordable) {
     }
     model[key] = data[key];
   }
+  console.log(model, data);
   return model;
 }
 

src/components/AnTable/hooks/useModiyForm.tsx

@@ -1,5 +1,5 @@
 import { FormItem, FormModalUseOptions, useFormModalProps, AnFormModalProps } from '@/components/AnForm';
-import { merge } from 'lodash-es';
+import { cloneDeep, merge } from 'lodash-es';
 import { ExtendFormItem } from './useSearchForm';
 import { TableUseOptions } from './useTable';
 
@@ -23,14 +23,14 @@ export type ModifyForm = Omit<FormModalUseOptions, 'items' | 'trigger'> & {
   items?: ExtendFormItem[];
 };
 
-export function useModifyForm(options: TableUseOptions): AnFormModalProps | undefined {
+export function useModifyForm(options: TableUseOptions, createModel: Recordable): AnFormModalProps | undefined {
   const { create, modify } = options;
 
   if (!modify) {
     return undefined;
   }
 
-  let result: FormModalUseOptions = { items: [] };
+  let result: FormModalUseOptions = { items: [], model: cloneDeep(createModel) };
   if (modify.extend && create) {
     result = merge({}, create);
   }

src/components/AnTable/hooks/useTable.tsx

@@ -80,7 +80,7 @@ export function useTableProps(options: TableUseOptions): AnTableProps {
   const paging = { hide: false, showTotal: true, showPageSize: true, ...(options.paging ?? {}) };
   const search = options.search && useSearchForm(options.search);
   const create = options.create && useFormModalProps(options.create);
-  const modify = options.modify && useModifyForm(options);
+  const modify = options.modify && useModifyForm(options, create?.model ?? {} );
 
   return {
     tableProps,

src/pages/system/user/index.vue

@@ -121,12 +121,12 @@ const { component: UserTable } = useTable({
         required: true,
         placeholder: '英文字母+数组组成，5~10位',
       },
-      {
+      // {
-        field: 'password',
+      //   field: 'password',
-        label: '登陆密码',
+      //   label: '登陆密码',
-        setter: 'input',
+      //   setter: 'input',
-        placeholder: '包含大小写，长度6 ~ 12位',
+      //   placeholder: '包含大小写，长度6 ~ 12位',
-      },
+      // },
       {
         field: 'nickname',
         label: '用户昵称',

src/pages/user/index.vue

@@ -86,15 +86,15 @@
                 <template #help> 示例: smtp.163.com:25。国内常见有
                   <a target="_blank" class="mr-2" href="https://mail.163.com">网易邮箱</a>
                   <a target="_blank" class="mr-2" href="http://mail.aliyun.com/">阿里邮箱</a>
-                  <a target="_blank" class="mr-2" href="https://mail.qq.com">QQ邮箱</a>等，HTTP 默认 25 端口，HTTPS 默认 465 端口。
+                  <a target="_blank" class="mr-2" href="https://mail.qq.com">QQ邮箱</a>等，默认 25 端口。
                 </template>
               </a-form-item>
               <a-form-item label="发信人地址">
-                <a-input v-model="mail.sender" placeholder="请输入" class="!w-[432px]"></a-input>
+                <a-input v-model="mail.smtpFrom" placeholder="请输入" class="!w-[432px]"></a-input>
                 <template #help> 示例: example@mail.com。仅作为发送邮件时的发送人标识，与登陆无关。</template>
               </a-form-item>
               <a-form-item label="是否需要验证">
-                <a-radio-group v-model="mail.authNeed" :type="'button'">
+                <a-radio-group v-model="mail.smtpAuth" :type="'button'">
                   <a-radio :value="true">是</a-radio>
                   <a-radio :value="false">否</a-radio>
                 </a-radio-group>
@@ -102,8 +102,8 @@
               </a-form-item>
               <a-form-item label="验证账号">
                 <a-input
-                  :disabled="!mail.enable || !mail.authNeed"
+                  :disabled="!mail.enable || !mail.smtpAuth"
-                  v-model="mail.authUser"
+                  v-model="mail.smtpUser"
                   placeholder="请输入"
                   class="!w-[432px]"
                 ></a-input>
@@ -111,8 +111,8 @@
               </a-form-item>
               <a-form-item label="验证密码">
                 <a-input
-                  :disabled="!mail.enable || !mail.authNeed"
+                  :disabled="!mail.enable || !mail.smtpAuth"
-                  v-model="mail.authPass"
+                  v-model="mail.smtpPass"
                   placeholder="请输入"
                   class="!w-[432px]"
                 ></a-input>
@@ -170,10 +170,10 @@ const mail = reactive({
   enable: true,
   smtpHost: '10.10.10.30',
   smtpPort: 25,
-  sender: 'no-reply@juetan.cn',
+  smtpFrom: 'no-reply@juetan.cn',
-  authNeed: true,
+  smtpAuth: true,
-  authUser: '952222@163.com',
+  smtpUser: '952222@163.com',
-  authPass: 'FenZyealdsa@s92.',
+  smtpPass: 'FenZyealdsa@s92.',
 });
 
 const user = reactive({