主要想优化card内部字段的放置： <a
-row>
<a
-col :span="12">
<a
-form
-model
-item :prop="'StepForms.' + index + '.fabName'" label="Fab Area:"
:label
Col="{ span: 6 }" :wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<a
-select placeholder="请选择" v
-model="step.fabName" style="width: 100%"
:disabled="step.isSubmitted" @change="(value) => handleFabNameChange(value, step)">
<a
-select
-option v
-for="item in StepFabAreaList" :key="item">{{ item }}</a
-select
-option>
</a
-select>
</a
-form
-model
-item>
</a
-col>
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.area'" label="Area:" :label
Col="{ span: 6 }"
:wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<a
-select placeholder="请选择" v
-model="step.area" style="width: 100%" :disabled="step.isSubmitted">
<a
-select
-option v
-for="item in StepAreaList" :key="item">{{ item }}</a
-select
-option>
</a
-select>
</a
-form
-model
-item>
</a
-col>
<!
-- RCP 字段
-->
<a
-col :span="12">
<a
-form
-model
-item label="Check With RCP" :label
Col="{ span: 6 }"
:wrapper
Col="{ span: 12, offset: 2 }">
<a
-checkbox :checked="step.rcp === 'on'" @change="(e) => handleRcpChange(e, step)"
:disabled="step.isSubmitted">
</a
-checkbox>
</a
-form
-model
-item>
</a
-col>
</a
-row>
<a
-row>
<a
-col :span="16">
<a
-form
-model
-item prop="'StepForms.' + index + '.stepNo'" label="Reference Step No"
:label
Col="{ span: 6 }" :wrapper
Col="{ span: 12 }" :required='required'>
<div style="display: flex; align
-items: center; gap: 8px; white
-space: nowrap;">
<a
-checkbox :checked="step.noStepNo === 'on'" @change="(e) => handleNoStepNoChange(e, step)"
:disabled="step.isSubmitted || step.isstepNoupdate">NA
</a
-checkbox>
<a
-input v
-model="step.stepNo" placeholder="Enter Step No"
:disabled="step.isreadonlyStepNo || step.isSubmitted || step.isstepNoupdate"
style="flex: 1; height: 32px;" />
<a
-button @click="getStepLotInfo(index)" style="height: 32px;"
:disabled="step.isSubmitted || step.isstepNoupdate">Go
</a
-button>
<a
-button @click="getfuturestepinfo(index)" style="height: 32px;"
:disabled="step.isSubmitted || step.isstepNoupdate">
ViewFutureStep</a
-button>
</div>
</a
-form
-model
-item>
</a
-col>
</a
-row>
<a
-row>
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.eqpMode'" label="Equipment:"
:label
Col="{ span: 6 }" :wrapper
Col="{ span: 6, offset: 2 }" :required='required'>
<a
-select placeholder="请选择" v
-model="step.eqpMode" style="width: 100%"
:disabled="step.isSubmitted">
<a
-select
-option v
-for="item in StepEqpModeList" :key="item">{{ item }}</a
-select
-option>
</a
-select>
</a
-form
-model
-item>
</a
-col>
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.eqpModeName'" label="" :label
Col="{ span: 6 }"
:wrapper
Col="{ span: 20, offset: 2 }" :required='required'>
<div style="display: flex; align
-items: center; gap: 8px; Height: 40px;">
<a
-input v
-model="step.eqpModeName" :disabled="step.isSubmitted"
@blur="handleEqpNameBlur(step)" />
<div style="
color: red; white
-space: nowrap;">
EqpGroup区分大小写，输入的EqpID最大长度7位!!!
</div>
</div>
</a
-form
-model
-item>
</a
-col>
</a
-row>
<!
-- Recipe 字段（根据条件显示）
-->
<a
-row>
<a
-col :span="12" v
-if="!step.showPhotoFields">
<a
-form
-model
-item prop="'StepForms.' + index + '.recipe'" label="Recipe：" :label
Col="{ span: 6 }"
:wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<div style="display: flex; align
-items: center; gap: 8px; Height: 40px;">
<a
-input v
-model="step.recipe" :disabled="step.isSubmitted" />
<div style="
color: red; white
-space: nowrap;">
区分大小写!!!
</div>
</div>
</a
-form
-model
-item>
</a
-col>
</a
-row>
<!
-- Photo 相关字段（当 area 包含 photo 时显示）
-->
<template v
-if="step.showPhotoFields">
<a
-row>
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.trackOutRecipe'" label="TrackOut Recipe："
:label
Col="{ span: 6 }" :wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<template #help>
<span style="
color: red;"> 区分大小写!!!</span>
</template>
<a
-input v
-model="step.trackOutRecipe" :disabled="step.isSubmitted" />
</a
-form
-model
-item>
</a
-col>
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.scannerRecipe'" label="Scanner Recipe："
:label
Col="{ span: 6 }" :wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<template #help>
<span style="
color: red;"> 区分大小写!!!</span>
</template>
<a
-input v
-model="step.scannerRecipe" :disabled="step.isSubmitted" />
</a
-form
-model
-item>
</a
-col>
<a
-col :span="12">
<a
-form
-model
-item label="Recipe Type：" :label
Col="{ span: 6 }"
:wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<a
-radio
-group :value="step.recipeType" @change="(e) => handleRecipeTypeChange(e, step, index)"
:disabled="step.isSubmitted">
<a
-radio value="Production">Production</a
-radio>
<a
-radio value="Engineer" @click.stop="confirmEngineer(step, index)">Engineer</a
-radio>
</a
-radio
-group>
</a
-form
-model
-item>
</a
-col>
<template v
-if="step.recipeType === 'Engineer'">
<a
-col :span="12">
<a
-form
-model
-item label="Batch Type：" :label
Col="{ span: 6 }"
:wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<a
-radio
-group :value="step.batchType" @change="(e) => handleBatchTypeChange(e, step, index)"
:disabled="step.isSubmitted">
<a
-radio value="Production">Production</a
-radio>
<a
-radio value="Matrix" @click.stop="confirmMatrix(step, index)">Matrix</a
-radio>
</a
-radio
-group>
</a
-form
-model
-item>
</a
-col>
</template>
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.reticleId'" label="Reticle ID："
:label
Col="{ span: 6 }" :wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<a
-input v
-model="step.reticleId" :disabled="step.isSubmitted" />
</a
-form
-model
-item>
</a
-col>
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.energy'" label="Energy：" :label
Col="{ span: 6 }"
:wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<a
-input v
-model="step.energy" :disabled="step.isSubmitted"
@blur="handleEnergyFocusStepBlur(step)" />
</a
-form
-model
-item>
</a
-col>
<template v
-if="step.batchType === 'Matrix'">
<a
-col :span="12">
<a
-form
-model
-item label="Energy Step：" :label
Col="{ span: 6 }"
:wrapper
Col="{ span: 12, offset: 2 }">
<template #help>
<span style="
color: red;">(Value:
-1000.0~1000.0)</span>
</template>
<a
-input v
-model="step.energyStep" :disabled="step.isSubmitted"
@blur="handleEnergyFocusStepBlur(step)" />
</a
-form
-model
-item>
</a
-col>
</template>
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.focus'" label="Focus：" :label
Col="{ span: 6 }"
:wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<a
-input v
-model="step.focus" :disabled="step.isSubmitted"
@blur="handleEnergyFocusStepBlur(step)" />
</a
-form
-model
-item>
</a
-col>
<template v
-if="step.batchType === 'Matrix'">
<a
-col :span="12">
<a
-form
-model
-item label="Focus Step：" :label
Col="{ span: 6 }"
:wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<template #help>
<span style="
color: red;">(Value:
-2.00~2.00)</span>
</template>
<a
-input v
-model="step.focusStep" :disabled="step.isSubmitted"
@blur="handleEnergyFocusStepBlur(step)" />
</a
-form
-model
-item>
</a
-col>
</template>
<!
-- <a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.ovlData'" label="OVL Data："
:label
Col="{ span: 6 }" :wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<a
-textarea v
-model="step.ovlData" :rows="3" :disabled="step.isSubmitted" />
</a
-form
-model
-item>
</a
-col>
-->
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.ovlData'" label="OVL Data："
:label
Col="{ span: 6 }" :wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<a
-textarea v
-model="step.ovlData" @click="() => openOvLDataModal(index)" read
-only
style="cursor: pointer" :rows="3" :disabled="step.isSubmitted" />
</a
-form
-model
-item>
</a
-col>
</a
-row>
</template>
<a
-row>
<!
-- WaferID 显示和弹窗按钮
-->
<a
-col :span="18">
<a
-form
-model
-item prop="'StepForms.' + index + '.waferId'" label="WaferID" :label
Col="{ span: 3 }"
:wrapper
Col="{ span: 15 }" :required='required'>
<a
-input :value="step.waferId" placeholder="请选择 WaferID" @click="() => openWaferModal(index)"
read
-only style="cursor: pointer" :disabled="step.isSubmitted" />
</a
-form
-model
-item>
</a
-col>
<!
-- QTY 数量显示
-->
<a
-col :span="6">
<a
-form
-model
-item prop="'StepForms.' + index + '.waferIdQty'" label="QTY" :label
Col="{ span: 3 }"
:wrapper
Col="{ span: 3 }">
<a
-input :value="step.waferIdQty.toString()" read
-only :disabled="step.isSubmitted" />
</a
-form
-model
-item>
</a
-col>
</a
-row>
<a
-row>
<!
-- MeasWaferID 显示和弹窗按钮
-->
<a
-col :span="18">
<a
-form
-model
-item prop="'StepForms.' + index + '.slotId'" label="MeasSlotId"
:label
Col="{ span: 3 }" :wrapper
Col="{ span: 15 }">
<a
-input :value="step.slotId" placeholder="请选择量测 WaferID" @click="() => openMeasWaferModal(index)"
read
-only style="cursor: pointer" :disabled="step.isSubmitted" />
</a
-form
-model
-item>
</a
-col>
<!
-- MeasWaferIDQTY 数量显示
-->
<a
-col :span="6">
<a
-form
-model
-item prop="'StepForms.' + index + '.slotIdQty'" label="QTY" :label
Col="{ span: 3 }"
:wrapper
Col="{ span: 3 }">
<a
-input :value="step.slotIdQty.toString()" read
-only :disabled="step.isSubmitted" />
</a
-form
-model
-item>
</a
-col>
</a
-row>
<a
-row>
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.contaminationFlag'" label="ContaminationFlag:"
:label
Col="{ span: 6 }" :wrapper
Col="{ span: 12, offset: 2 }" :required='required'>
<a
-select placeholder="请选择" v
-model="step.contaminationFlag" style="width: 100%"
:disabled="step.isSubmitted">
<a
-select
-option v
-for="item in contaminationFlagList" :key="item">{{ item }}</a
-select
-option>
</a
-select>
</a
-form
-model
-item>
</a
-col>
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.remark'" label="Remark：" :label
Col="{ span: 6 }"
:wrapper
Col="{ span: 16 }" :required='required'>
<template #help>
<span style="
color: red;">如果输入中文，Runcard只能Manual Run!!!</span>
</template>
<a
-textarea v
-model="step.remark" placeholder="100字内..." :rows="3" :disabled="step.isSubmitted" />
</a
-form
-model
-item>
</a
-col>
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.ecdPlanName'" label="EDC Plan Name："
:label
Col="{ span: 6 }" :wrapper
Col="{ span: 16 }">
<a
-input v
-model="step.ecdPlanName" placeholder="Enter EDC PlanName"
:disabled="step.isSubmitted" />
<a
-button @click="getEdcPlanSpecInfomation(index)" :disabled="step.isSubmitted">Go</a
-button>
</a
-form
-model
-item>
</a
-col>
<a
-col :span="12">
<a
-form
-model
-item prop="'StepForms.' + index + '.spec'" label="量测规格SPEC：" :label
Col="{ span: 6 }"
:wrapper
Col="{ span: 16 }">
<a
-textarea v
-model="step.spec" read
-only style="overflow: auto; white
-space: nowrap;" :row="3" />
</a
-form
-model
-item>
</a
-col>
</a
-row>
文章展示了如何在Vue应用中使用AntDesignVue库创建一个具有行列布局的表单，特别是焦点在于`a-col`用于列布局，`a-form-item`配合`labelCol`和`wrapperCol`定义标签和输入域的分布，以及`a-textarea`用于创建可调整大小的文本区域，用`v-decorator`进行数据绑定。
扫一扫
589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
