a-form

该段代码展示了在Vue.js应用中使用AntDesignVue库创建一个内联表单,包含一个年份选择器组件。用户选择年份后,通过`searchQuery`方法触发查询操作。表单数据绑定到`queryParam`对象,并在`searchReset`方法中重置。此外,还包括了对`yearShowOne`、`panelChangeOne`事件的处理。

temple

<a-form layout="inline" :form="form" @keyup.enter.native="searchQuery">
    <a-row :gutter="24">
     <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="年份" :label-col="{ span: 6 }" :wrapper-col="{ span:         
                      12 }">
                    <a-date-picker
                      mode="year"
                      placeholder="请选择年份"
                      format="YYYY"
                      v-model="queryParam.year"
                      style="width: 100%"
                      :open="yearShowOne"
                      v-decorator="['year', {}]"
                      @openChange="openChangeOne"
                      @panelChange="panelChangeOne"
                    />
                  </a-form-item>
                </a-col>

data

 form: this.$form.createForm(this, { name: 'search' }), // 表单关联设置

method

searchReset() {
      this.queryParam = {
        year: '',
      }
      this.form.setFieldsValue({
        // date: '',
        year: '',
        yearPlanName: '',
        status: ''
      })
      this.loadData()
    },

请修改前端界面,使其以合适的情形展示<a-modal title="选择 OCAP 数据" :visible="isOvLDataVisible" @ok="handleOvLDataOk" @cancel="handleOvLDataCancel" okText="确认" cancelText="取消" width="900" > <a-form layout="vertical"> <!-- OCAP 类型选择 --> <a-form-item label="请选择 OCAP 类型"> <a-radio-group v-model="selectedOcapType" @change="handleOcapChange"> <a-radio value="asml">ASML OCAP</a-radio> <a-radio value="canonduv">Canon DUV OCAP</a-radio> <a-radio value="canoni">Canon I-Line OCAP</a-radio> <a-radio value="nikonscanner">Nikon Scanner OCAP</a-radio> <a-radio value="nikonstepper">Nikon Stepper OCAP</a-radio> </a-radio-group> </a-form-item> <!-- ASML 表单 --> <div v-if="selectedOcapType === 'asml'"> <a-row :gutter="16"> <a-col :span="12"> <h4>Interfield</h4> <a-form-item label="Tx"> <a-input v-model="asmlData.tx" @blur="checkData(asmlData.tx)" /> </a-form-item> <a-form-item label="Ty"> <a-input v-model="asmlData.ty" @blur="checkData(asmlData.ty)" /> </a-form-item> <a-form-item label="W/Ro"> <a-input v-model="asmlData.wr" @blur="checkData(asmlData.wr)" /> </a-form-item> <a-form-item label="W/NonRrt"> <a-input v-model="asmlData.wn" @blur="checkData(asmlData.wn)" /> </a-form-item> <a-form-item label="W/Ex"> <a-input v-model="asmlData.wex" @blur="checkData(asmlData.wex)" /> </a-form-item> <a-form-item label="W/Ey"> <a-input v-model="asmlData.we" @blur="checkData(asmlData.we)" /> </a-form-item> </a-col> <a-col :span="12"> <h4>Intrafield</h4> <a-form-item label="S/Rot"> <a-input v-model="asmlData.sr" @blur="checkData(asmlData.sr)" /> </a-form-item> <a-form-item label="S/Mag"> <a-input v-model="asmlData.sm" @blur="checkData(asmlData.sm)" /> </a-form-item> <a-form-item label="S/AsyRot"> <a-input v-model="asmlData.ar" @blur="checkData(asmlData.ar)" /> </a-form-item> <a-form-item label="S/AsyMag"> <a-input v-model="asmlData.am" @blur="checkData(asmlData.am)" /> </a-form-item> <a-form-item label="MEMS Product"> <a-checkbox v-model="asmlData.mp" /> </a-form-item> </a-col> </a-row> </div> <!-- Canon DUV 表单 --> <div v-if="selectedOcapType === 'canonduv'"> <a-row :gutter="16"> <a-col :span="12"> <h4>Interfield</h4> <a-form-item label="Tx"> <a-input v-model="canonduvData.tx" @blur="checkData(canonduvData.tx)" /> </a-form-item> <a-form-item label="Ty"> <a-input v-model="canonduvData.ty" @blur="checkData(canonduvData.ty)" /> </a-form-item> <a-form-item label="W/Magx"> <a-input v-model="canonduvData.wx" @blur="checkData(canonduvData.wx)" /> </a-form-item> <a-form-item label="W/Magy"> <a-input v-model="canonduvData.wy" @blur="checkData(canonduvData.wy)" /> </a-form-item> <a-form-item label="W/Rotx"> <a-input v-model="canonduvData.wrx" @blur="checkData(canonduvData.wrx)" /> </a-form-item> <a-form-item label="W/Roty"> <a-input v-model="canonduvData.wry" @blur="checkData(canonduvData.wry)" /> </a-form-item> </a-col> <a-col :span="12"> <h4>Intrafield</h4> <a-form-item label="S/Magx"> <a-input v-model="canonduvData.smx" @blur="checkData(canonduvData.smx)" /> </a-form-item> <a-form-item label="S/Magy"> <a-input v-model="canonduvData.smy" @blur="checkData(canonduvData.smy)" /> </a-form-item> <a-form-item label="S/Rotx"> <a-input v-model="canonduvData.srx" @blur="checkData(canonduvData.srx)" /> </a-form-item> <a-form-item label="S/Roty"> <a-input v-model="canonduvData.sry" @blur="checkData(canonduvData.sry)" /> </a-form-item> </a-col> </a-row> </div> <!-- Canon I-Line 表单 --> <div v-if="selectedOcapType === 'canoni'"> <a-row :gutter="16"> <a-col :span="12"> <h4>Interfield</h4> <a-form-item label="Tx"> <a-input v-model="canoniData.tx" @blur="checkData(canoniData.tx)" /> </a-form-item> <a-form-item label="Ty"> <a-input v-model="canoniData.ty" @blur="checkData(canoniData.ty)" /> </a-form-item> <a-form-item label="W/Magx"> <a-input v-model="canoniData.wx" @blur="checkData(canoniData.wx)" /> </a-form-item> <a-form-item label="W/Magy"> <a-input v-model="canoniData.wy" @blur="checkData(canoniData.wy)" /> </a-form-item> <a-form-item label="W/Rotx"> <a-input v-model="canoniData.wrx" @blur="checkData(canoniData.wrx)" /> </a-form-item> <a-form-item label="W/Roty"> <a-input v-model="canoniData.wry" @blur="checkData(canoniData.wry)" /> </a-form-item> </a-col> <a-col :span="12"> <h4>Intrafield</h4> <a-form-item label="S/Mag"> <a-input v-model="canoniData.sm" @blur="checkData(canoniData.sm)" /> </a-form-item> <a-form-item label="S/Rot"> <a-input v-model="canoniData.sr" @blur="checkData(canoniData.sr)" /> </a-form-item> </a-col> </a-row> </div> <!-- Nikon Scanner 表单 --> <div v-if="selectedOcapType === 'nikonscanner'"> <a-row :gutter="16"> <a-col :span="12"> <h4>Interfield</h4> <a-form-item label="ShiftX"> <a-input v-model="nikonScannerData.tx" @blur="checkData(nikonScannerData.tx)" /> </a-form-item> <a-form-item label="ShiftY"> <a-input v-model="nikonScannerData.ty" @blur="checkData(nikonScannerData.ty)" /> </a-form-item> <a-form-item label="ScalingX"> <a-input v-model="nikonScannerData.wx" @blur="checkData(nikonScannerData.wx)" /> </a-form-item> <a-form-item label="ScalingY"> <a-input v-model="nikonScannerData.wy" @blur="checkData(nikonScannerData.wy)" /> </a-form-item> <a-form-item label="W/Rot"> <a-input v-model="nikonScannerData.wrx" @blur="checkData(nikonScannerData.wrx)" /> </a-form-item> <a-form-item label="Orth"> <a-input v-model="nikonScannerData.wry" @blur="checkData(nikonScannerData.wry)" /> </a-form-item> </a-col> <a-col :span="12"> <h4>Intrafield</h4> <a-form-item label="S/ScalingX"> <a-input v-model="nikonScannerData.sx" @blur="checkData(nikonScannerData.sx)" /> </a-form-item> <a-form-item label="S/ScalingY"> <a-input v-model="nikonScannerData.sy" @blur="checkData(nikonScannerData.sy)" /> </a-form-item> <a-form-item label="S/Rot"> <a-input v-model="nikonScannerData.sr" @blur="checkData(nikonScannerData.sr)" /> </a-form-item> <a-form-item label="S/Skew"> <a-input v-model="nikonScannerData.sk" @blur="checkData(nikonScannerData.sk)" /> </a-form-item> </a-col> </a-row> </div> <!-- Nikon Stepper 表单 --> <div v-if="selectedOcapType === 'nikonstepper'"> <a-row :gutter="16"> <a-col :span="12"> <h4>Interfield</h4> <a-form-item label="ShiftX"> <a-input v-model="nikonStepperData.tx" @blur="checkData(nikonStepperData.tx)" /> </a-form-item> <a-form-item label="ShiftY"> <a-input v-model="nikonStepperData.ty" @blur="checkData(nikonStepperData.ty)" /> </a-form-item> <a-form-item label="ScalingX"> <a-input v-model="nikonStepperData.wx" @blur="checkData(nikonStepperData.wx)" /> </a-form-item> <a-form-item label="ScalingY"> <a-input v-model="nikonStepperData.wy" @blur="checkData(nikonStepperData.wy)" /> </a-form-item> <a-form-item label="W/Rot"> <a-input v-model="nikonStepperData.wrx" @blur="checkData(nikonStepperData.wrx)" /> </a-form-item> <a-form-item label="Orth"> <a-input v-model="nikonStepperData.wry" @blur="checkData(nikonStepperData.wry)" /> </a-form-item> </a-col> <a-col :span="12"> <h4>Intrafield</h4> <a-form-item label="S/Scaling"> <a-input v-model="nikonStepperData.sy" @blur="checkData(nikonStepperData.sy)" /> </a-form-item> <a-form-item label="S/Rot"> <a-input v-model="nikonStepperData.sr" @blur="checkData(nikonStepperData.sr)" /> </a-form-item> </a-col> </a-row> </div> </a-form> </a-modal>
最新发布
12-04
你可以通过以下方式优化前端界面展示,使其更清晰、易用、美观,适合用户操作和阅读: --- ### ✅ 修改目标: 1. **弹窗结构更清晰**:增加表单分组标题、间距、视觉层次。 2. **表单字段更易读**:统一字段宽度、增加提示信息(可选)。 3. **交互更友好**:字段校验提示、表单提交时的非空验证。 4. **响应式优化**:适配不同屏幕尺寸。 --- ### ✅ 优化后的 `<a-modal>` 结构如下: ```html <a-modal title="选择 OCAP 数据" :visible="isOvLDataVisible" @ok="handleOvLDataOk" @cancel="handleOvLDataCancel" okText="确认" cancelText="取消" width="1000" :footer="[ <a-button key="back" @click="handleOvLDataCancel">取消</a-button>, <a-button key="submit" type="primary" @click="handleOvLDataOk">确认</a-button> ]" > <a-form layout="vertical" :form="form"> <!-- OCAP 类型选择 --> <a-form-item label="请选择 OCAP 类型"> <a-radio-group v-model="selectedOcapType" @change="handleOcapChange"> <a-radio value="asml">ASML OCAP</a-radio> <a-radio value="canonduv">Canon DUV OCAP</a-radio> <a-radio value="canoni">Canon I-Line OCAP</a-radio> <a-radio value="nikonscanner">Nikon Scanner OCAP</a-radio> <a-radio value="nikonstepper">Nikon Stepper OCAP</a-radio> </a-radio-group> </a-form-item> <!-- 表单内容区域 --> <div v-if="selectedOcapType" class="form-container"> <!-- ASML 表单 --> <div v-if="selectedOcapType === 'asml'"> <h4>Interfield 参数</h4> <a-row :gutter="16"> <a-col :span="12"> <a-form-item label="Tx"> <a-input v-model="asmlData.tx" @blur="checkData(asmlData.tx)" placeholder="请输入 Tx 值" /> </a-form-item> <a-form-item label="Ty"> <a-input v-model="asmlData.ty" @blur="checkData(asmlData.ty)" placeholder="请输入 Ty 值" /> </a-form-item> <a-form-item label="W/Ro"> <a-input v-model="asmlData.wr" @blur="checkData(asmlData.wr)" placeholder="请输入 W/Ro 值" /> </a-form-item> <a-form-item label="W/NonRrt"> <a-input v-model="asmlData.wn" @blur="checkData(asmlData.wn)" placeholder="请输入 W/NonRrt 值" /> </a-form-item> <a-form-item label="W/Ex"> <a-input v-model="asmlData.wex" @blur="checkData(asmlData.wex)" placeholder="请输入 W/Ex 值" /> </a-form-item> <a-form-item label="W/Ey"> <a-input v-model="asmlData.we" @blur="checkData(asmlData.we)" placeholder="请输入 W/Ey 值" /> </a-form-item> </a-col> <a-col :span="12"> <h4>Intrafield 参数</h4> <a-form-item label="S/Rot"> <a-input v-model="asmlData.sr" @blur="checkData(asmlData.sr)" placeholder="请输入 S/Rot 值" /> </a-form-item> <a-form-item label="S/Mag"> <a-input v-model="asmlData.sm" @blur="checkData(asmlData.sm)" placeholder="请输入 S/Mag 值" /> </a-form-item> <a-form-item label="S/AsyRot"> <a-input v-model="asmlData.ar" @blur="checkData(asmlData.ar)" placeholder="请输入 S/AsyRot 值" /> </a-form-item> <a-form-item label="S/AsyMag"> <a-input v-model="asmlData.am" @blur="checkData(asmlData.am)" placeholder="请输入 S/AsyMag 值" /> </a-form-item> <a-form-item label="MEMS Product"> <a-checkbox v-model="asmlData.mp" /> </a-form-item> </a-col> </a-row> </div> <!-- Canon DUV 表单 --> <div v-if="selectedOcapType === 'canonduv'"> <h4>Interfield 参数</h4> <a-row :gutter="16"> <a-col :span="12"> <a-form-item label="Tx"> <a-input v-model="canonduvData.tx" @blur="checkData(canonduvData.tx)" placeholder="请输入 Tx 值" /> </a-form-item> <a-form-item label="Ty"> <a-input v-model="canonduvData.ty" @blur="checkData(canonduvData.ty)" placeholder="请输入 Ty 值" /> </a-form-item> <a-form-item label="W/Magx"> <a-input v-model="canonduvData.wx" @blur="checkData(canonduvData.wx)" placeholder="请输入 W/Magx 值" /> </a-form-item> <a-form-item label="W/Magy"> <a-input v-model="canonduvData.wy" @blur="checkData(canonduvData.wy)" placeholder="请输入 W/Magy 值" /> </a-form-item> <a-form-item label="W/Rotx"> <a-input v-model="canonduvData.wrx" @blur="checkData(canonduvData.wrx)" placeholder="请输入 W/Rotx 值" /> </a-form-item> <a-form-item label="W/Roty"> <a-input v-model="canonduvData.wry" @blur="checkData(canonduvData.wry)" placeholder="请输入 W/Roty 值" /> </a-form-item> </a-col> <a-col :span="12"> <h4>Intrafield 参数</h4> <a-form-item label="S/Magx"> <a-input v-model="canonduvData.smx" @blur="checkData(canonduvData.smx)" placeholder="请输入 S/Magx 值" /> </a-form-item> <a-form-item label="S/Magy"> <a-input v-model="canonduvData.smy" @blur="checkData(canonduvData.smy)" placeholder="请输入 S/Magy 值" /> </a-form-item> <a-form-item label="S/Rotx"> <a-input v-model="canonduvData.srx" @blur="checkData(canonduvData.srx)" placeholder="请输入 S/Rotx 值" /> </a-form-item> <a-form-item label="S/Roty"> <a-input v-model="canonduvData.sry" @blur="checkData(canonduvData.sry)" placeholder="请输入 S/Roty 值" /> </a-form-item> </a-col> </a-row> </div> <!-- 其他类型表单结构类似,此处省略以节省篇幅 --> </div> <!-- 如果未选择类型,显示提示 --> <div v-else class="no-selection"> <a-empty description="请先选择 OCAP 类型" /> </div> </a-form> </a-modal> ``` --- ### ✅ 推荐添加的样式: ```css <style scoped> .form-container { margin-top: 16px; } .no-selection { text-align: center; margin-top: 50px; } h4 { margin-bottom: 12px; font-weight: bold; color: #595959; } </style> ``` --- ### ✅ 优化建议补充: 1. **字段校验增强**: - 使用 `a-form` 的 `validateFields` 方法进行非空校验。 - 提示用户必须填写字段。 2. **响应式优化**: - 使用 `a-col` 的 `xs`、`sm`、`md` 等属性适配小屏幕设备。 3. **默认值初始化**: - 在 `data()` 中为字段设置默认值(如 `0.0`),避免空值。 4. **字段说明 Tooltip**(可选): - 给每个字段加一个 `a-tooltip`,解释字段含义。 --- ### ✅ 示例:带 Tooltip 的字段 ```html <a-form-item label="S/Rot"> <a-tooltip title="请输入 S/Rot 值,例如 0.12"> <a-input v-model="asmlData.sr" @blur="checkData(asmlData.sr)" /> </a-tooltip> </a-form-item> ``` --- ### ✅ 总结 通过上述优化,你的弹窗将具备以下特点: | 优化点 | 效果 | |--------|------| | 结构清晰 | 分组展示,易于理解 | | 易于操作 | 字段统一、提示明确 | | 视觉友好 | 层次分明、美观 | | 用户友好 | 支持响应式、校验提示 | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值