为Element Plus封装业务组件FormDialog，将所有需要填写表单的弹窗组件封装，方便快速配置

为Element Plus封装业务组件FormDialog，将所有需要填写表单的弹窗组件封装，方便快速配置

使用FormDialog组件能够对表单弹窗进行快速配置，不用每次单独写弹窗表单业务组件，快速实现表单弹窗业务功能。

调用页面demo.vue

 validateRules.js引用

<script setup lang="ts">
import FormDialog from '@/components/FormDialog/index.vue'
import { validateRules } from '@/utils/validate'const formDialogRef = ref({})
const ruleFormRef = ref({})
const withdrawDialog = reactive({form: {pointName: '',},rules: {pointName: [validateRules.required('名称'),validateRules.max(10),],},confirm: {onClick(visible: { value: boolean }) {visible.value = falseconsole.log('withdrawDialog.form is: ', JSON.stringify(withdrawDialog.form))},},handleVisibleChange(v) {if (v) { // 处理回显加载等操作withdrawDialog.form.pointName = 'test'}else {ruleFormRef.value.resetFields()}},
})
</script><template><el-buttonlinktype="primary" @click="formDialogRef.open()">测试表单窗口</el-button><FormDialogref="formDialogRef" title="测试":confirm="withdrawDialog.confirm" width="480"@visible-change="withdrawDialog.handleVisibleChange"><el-formref="ruleFormRef":model="withdrawDialog.form":rules="withdrawDialog.rules"label-width="120px"class="demo-ruleForm"><el-form-item label="名称" prop="pointName"><el-input v-model="withdrawDialog.form.pointName" maxlength="50" /></el-form-item></el-form></FormDialog>
</template>

 FormDialog/index.vue

useDialog.js引用

<script lang="ts" setup>
import { useDialog } from '@/utils/useDialog'const props = defineProps({title: {type: String,},hideCancel: {type: Boolean,},cancel: {type: Object,default: () => ({show: true,}),},confirm: {type: Object,default: () => ({show: true,disabled: false,onClick: null,}),},width: {type: [Number, String],},
})
const emit = defineEmits(['visibleChange'])
const dialog = useDialog({ title: props.title, confirmDisabled: props.confirm.disabled })
const open = (data: any) => {dialog.visible.value = truedialog.data.value = data
}
watch(() => props.confirm.disabled, v => dialog.setConfirmDisabled(v))
watch(() => dialog.visible.value, v => emit('visibleChange', v))
const handleConfirmClick = () => {if (typeof props.confirm.onClick === 'function') {props.confirm.onClick(dialog.visible)}else {dialog.visible.value = false}
}
defineExpose({ open })
</script><template><el-dialogv-model="dialog.visible.value":title="dialog.title.value"class="form-dialog":before-close="dialog.handleClose"align-center:style="{ width: width ? (width.includes('px') ? width : `${width}px`) : null }"><slot /><template #footer><span class="dialog-footer"><el-button v-if="!hideCancel && cancel.show" auto-insert-space @click="dialog.visible.value = false">取消</el-button><el-buttonv-if="confirm.show || confirm.show === undefined":disabled="confirm.disabled"type="primary" auto-insert-space @click="handleConfirmClick">确认</el-button></span></template></el-dialog>
</template><style lang="scss">.form-dialog {.el-dialog__body{width: 100%;}}
</style>