fix: 修复表单弹窗初始化问题
luoer
parent
984a03c339
commit
ff389d988d
|
|
@ -1,7 +1,7 @@
|
|||
import { IToastOptions } from "@/components";
|
||||
import "axios";
|
||||
import { IToastOptions } from '@/components';
|
||||
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 };
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = resMsg ?? resMessageTip;
|
||||
let message: string | null = 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) {
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@ export type FormModalUseOptions = Partial<Omit<AnFormModalProps, 'items'>> & {
|
|||
width?: number;
|
||||
/**
|
||||
* modal宽度
|
||||
* @example
|
||||
* ```ts
|
||||
* 1080
|
||||
* ```
|
||||
*/
|
||||
modalWidth?: number;
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ export function setModel(model: Recordable, data: Recordable) {
|
|||
}
|
||||
model[key] = data[key];
|
||||
}
|
||||
console.log(model, data);
|
||||
return model;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -121,12 +121,12 @@ const { component: UserTable } = useTable({
|
|||
required: true,
|
||||
placeholder: '英文字母+数组组成，5~10位',
|
||||
},
|
||||
{
|
||||
field: 'password',
|
||||
label: '登陆密码',
|
||||
setter: 'input',
|
||||
placeholder: '包含大小写，长度6 ~ 12位',
|
||||
},
|
||||
// {
|
||||
// field: 'password',
|
||||
// label: '登陆密码',
|
||||
// setter: 'input',
|
||||
// placeholder: '包含大小写，长度6 ~ 12位',
|
||||
// },
|
||||
{
|
||||
field: 'nickname',
|
||||
label: '用户昵称',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
v-model="mail.authUser"
|
||||
:disabled="!mail.enable || !mail.smtpAuth"
|
||||
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"
|
||||
v-model="mail.authPass"
|
||||
:disabled="!mail.enable || !mail.smtpAuth"
|
||||
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',
|
||||
authNeed: true,
|
||||
authUser: '952222@163.com',
|
||||
authPass: 'FenZyealdsa@s92.',
|
||||
smtpFrom: 'no-reply@juetan.cn',
|
||||
smtpAuth: true,
|
||||
smtpUser: '952222@163.com',
|
||||
smtpPass: 'FenZyealdsa@s92.',
|
||||
});
|
||||
|
||||
const user = reactive({
|
||||
|
|
|
|||
Loading…
Reference in New Issue