当项目无法满足实际业务需求时可以使用antd vue 原生布局具体用法参考Grid栅格用法
1.表单布局，一行两列
<template><BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" :width="1000" @ok="handleSubmit"><a-form ref="formEl" :model="planModel" :label-col="{xs: {span: 24}, sm: {span: 6}}" :wrapper-col="{xs: {span: 24}, sm: {span: 18}}" :rules="validatorRules"><a-row><a-col :span="12"><a-form-item label="日程标题" name="title"><a-input placeholder="请输入标题" v-model:value="planModel.title"/></a-form-item></a-col><a-col :span="12"><a-form-item label="日程类型"><JDictSelectTag placeholder="请选择类型" type="select" v-model:value="planModel.type" dictCode="eoa_plan_type"/></a-form-item></a-col><a-col :span="12"><a-form-item label="提醒类型" name="remindType"><a-select placeholder="请选择提醒类型" mode="multiple" v-model:value="planModel.remindType"><a-select-option value="1">邮件</a-select-option><a-select-option value="2">短信</a-select-option><a-select-option value="4">系统消息</a-select-option></a-select></a-form-item></a-col><a-col :span="12"><a-form-item label="紧急程度" name="urgentLevel"><JDictSelectTag placeholder="请选择紧急程度" type="select" v-model:value="planModel.urgentLevel" dictCode="urgent_level"/></a-form-item></a-col><a-col :span="12"><a-form-item label="提醒时间" name="remind"><JDictSelectTag placeholder="请选择提醒时间" type="select" v-model:value="planModel.remind" dictCode="remindTime"/></a-form-item></a-col><a-col :span="12"><a-form-item label="重复提醒" name="reminders"><JDictSelectTag placeholder="请选择重复提醒" type="select" v-model:value="planModel.reminders" dictCode="reminders"/></a-form-item></a-col><a-col :span="12"><a-form-item label="日程时间" name="rangeTime"><a-range-picker v-bind="dateRangePickerProps" v-model:value="planModel.rangeTime" /></a-form-item></a-col></a-row></a-form></BasicModal>
</template>
<script lang="ts" setup>省略....const formEl = ref();const isUpdate = ref(true);//表单modalconst planModel = reactive({ });//表单赋值const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {setModalProps({confirmLoading: false});isUpdate.value = !!data?.isUpdate;if (unref(isUpdate)) {const record = await queryById({id:data?.record?.id});Object.assign(planModel, record);}});//标题const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));/*** 表单提交事件* */async function handleSubmit() {formEl.value.validate().then(async() => {try {setModalProps({confirmLoading: true});let formData = Object.assign({}, planModel)await saveOrUpdate(formData,unref(isUpdate));closeModal();emit('success'); } finally {setModalProps({confirmLoading: false});}}).catch((error: ValidateErrorEntity<any>) => {console.log('error', error);})}
</script><style lang="less" scoped>
