| | |
| | | default() { |
| | | return []; |
| | | } |
| | | }, |
| | | labelWidth: { |
| | | type: Number, |
| | | default: 120 |
| | | } |
| | | }); |
| | | |
| | |
| | | </script> |
| | | |
| | | <template> |
| | | <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px"> |
| | | <el-form-item |
| | | v-for="(item, index) in formData.list" |
| | | :key="item.id" |
| | | :label="fieldLabel(item)" |
| | | :prop="`list.${index}.value`" |
| | | > |
| | | <el-input-number |
| | | v-if="getType(item) === '数值格式'" |
| | | v-model="item.value" |
| | | :controls="false" |
| | | style="width: 100%" |
| | | placeholder="请输入" |
| | | /> |
| | | <el-date-picker |
| | | v-else-if="getType(item) === '时间格式'" |
| | | v-model="item.value" |
| | | type="datetime" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | placeholder="请选择" |
| | | style="width: 100%" |
| | | /> |
| | | <el-date-picker |
| | | v-else-if="getType(item) === '日期格式'" |
| | | v-model="item.value" |
| | | type="date" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | placeholder="请选择" |
| | | style="width: 100%" |
| | | /> |
| | | <el-select |
| | | v-else-if="getType(item) === '是/否选框'" |
| | | v-model="item.value" |
| | | placeholder="请选择" |
| | | clearable |
| | | style="width: 100%" |
| | | > |
| | | <el-option label="是" value="是"/> |
| | | <el-option label="否" value="否"/> |
| | | </el-select> |
| | | <el-select |
| | | v-else-if="getType(item) === '机台选择'" |
| | | v-model="item.value" |
| | | placeholder="请选择" |
| | | clearable |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | | v-for="(item, index) in deviceOptions" |
| | | :key="index" |
| | | :label="item.deviceName" |
| | | :value="item.deviceName" |
| | | ></el-option> |
| | | </el-select> |
| | | <el-input |
| | | v-else |
| | | v-model="item.value" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | <el-form ref="formRef" :model="formData" :rules="rules" :label-width="`${labelWidth}px`"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12" v-for="(item, index) in formData.list" :key="item.id"> |
| | | <el-form-item |
| | | :label="fieldLabel(item)" |
| | | :prop="`list.${index}.value`" |
| | | > |
| | | <el-input-number |
| | | v-if="getType(item) === '数值格式'" |
| | | v-model="item.value" |
| | | :controls="false" |
| | | style="width: 100%" |
| | | placeholder="请输入" |
| | | /> |
| | | <el-date-picker |
| | | v-else-if="getType(item) === '时间格式'" |
| | | v-model="item.value" |
| | | type="datetime" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | placeholder="请选择" |
| | | style="width: 100%" |
| | | /> |
| | | <el-date-picker |
| | | v-else-if="getType(item) === '日期格式'" |
| | | v-model="item.value" |
| | | type="date" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | placeholder="请选择" |
| | | style="width: 100%" |
| | | /> |
| | | <el-select |
| | | v-else-if="getType(item) === '是/否选框'" |
| | | v-model="item.value" |
| | | placeholder="请选择" |
| | | clearable |
| | | style="width: 100%" |
| | | > |
| | | <el-option label="是" value="是"/> |
| | | <el-option label="否" value="否"/> |
| | | </el-select> |
| | | <el-select |
| | | v-else-if="getType(item) === '机台选择'" |
| | | v-model="item.value" |
| | | placeholder="请选择" |
| | | clearable |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | | v-for="(device, deviceIndex) in deviceOptions" |
| | | :key="deviceIndex" |
| | | :label="device.deviceName" |
| | | :value="device.deviceName" |
| | | ></el-option> |
| | | </el-select> |
| | | <el-input |
| | | v-else |
| | | v-model="item.value" |
| | | placeholder="请输入" |
| | | clearable |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </template> |