## 自定義表單布局 當項目無法滿足實際業務需求時可以使用antd vue 原生布局具體用法參考[Grid柵格用法](https://2x.antdv.com/components/grid-cn) 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); //表單modal const 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> </style> ~~~