vue3中FormCreate封装

最新推荐文章于 2025-07-04 16:20:00 发布

安城无殇

最新推荐文章于 2025-07-04 16:20:00 发布

阅读量1.8k

点赞数 49

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/m0_73205039/article/details/137115574

文章介绍了如何在Vue项目中使用el-dialog实现一个可配置的表单对话框，涉及模板语法、props和emits的使用，以及表单数据提交、验证和关闭的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.全局注册使用

<el-dialog :title="dialogTitle" v-model="dialogShow" @opened="openedDialog" @close="closeDialog" :width="width">

<form-create v-model="formModelData" v-model:api="fApi" :rule="formModel.formItems" :option="formModel.formOption"></form-create>

<el-button class="cancel_btn" @click="onCancel" size="small">{{ $t('message.form.cancel') }}</el-button>

<el-button class="search_btn" type="primary" @click="onSubmit" size="small">{{ $t('message.form.submit') }}</el-button>

</div>

</template>

</el-dialog>

</div>

</template>

import { reactive, ref, toRefs, getCurrentInstance, computed } from 'vue';

import { useRoute } from 'vue-router';

import { ElMessage } from 'element-plus';

import { comApi } from '/@/api/common/index';

import { useStore } from '/@/store/index';

import _ from 'lodash';

export default {

name: 'systemEditForm',

components: {

Editor,

props: {

width: { type: String, default: '769px' },

dialogShow: {

type: Boolean,

default: false,

formDisabled: {

type: Boolean,

default: false,

dialogFooterShow: {

type: Boolean,

default: true,

dialogTitle: {

type: String,

default: '表单操作',

formConfig: {

type: Object,

formActionType: {

type: String,

default: '',

formModelData: {

type: Object,

emits: ['dialogOpened', 'dialogClose'],

setup(props, { emit }) {

const route = useRoute();

const { proxy } = getCurrentInstance() as any;

const formRef = ref();

const projectRef = ref();

const store = useStore();

const state: any = reactive({

//实例对象

fApi: {},

formModel: _.cloneDeep(props.formConfig),

timer: '',

});

// 编辑

const onSubmit = () => {

console.log('操作类型', props.formActionType, state.fApi);

state.fApi.validate((valid: Boolean) => {

console.log('表单验证', valid);

if (valid) {

state.fApi.submit((formData: Object) => {

console.log(formData, '编辑编辑');

formData.coverDescribe = props.formModelData.coverDescribe;

formData.projdesc = props.formModelData.projdesc;

formData.introduction = props.formModelData.introduction;

switch (props.formActionType) {

case 'add':

comApi({ url: props.formConfig.formApi.save.url, method: props.formConfig.formApi.save.method, data: formData })

.then(async (res: any) => {

ElMessage.success(res.message);

proxy.mittBus.emit('onTagsViewRefreshRouterView', route.fullPath);

closeDialog();

})

.catch((err) => {});

break;

case 'edit':

comApi({ url: props.formConfig.formApi.update.url, method: props.formConfig.formApi.update.method, data: formData })

.then(async (res: any) => {

ElMessage.success(res.message);

proxy.mittBus.emit('onTagsViewRefreshRouterView', route.fullPath);

closeDialog();

})

.catch((err) => {});

break;

}

});

}

});

};

//打开弹窗

const openedDialog = () => {

// console.log(props.formModelData, 13456);

state.timer = new Date().getTime();

//state.fApi.updateRules(state.formModel.formItems);

emit('dialogOpened', state.fApi);

};

// 关闭弹窗

const closeDialog = () => {

//state.fApi.resetFields();

state.fApi.clearValidateState();

console.log('表单重设');

state.timer = new Date().getTime();

emit('dialogClose', false);

};

// 取消

const onCancel = () => {

closeDialog();

};

return {

formRef,

onSubmit,

openedDialog,

closeDialog,

onCancel,

projectRef,

...toRefs(state),

};

</script>