<script setup lang="ts">
|
import {computed, reactive, ref, watch} from "vue";
|
|
defineOptions({
|
name: "ProductionRecordForm"
|
});
|
|
const props = defineProps({
|
list: {
|
type: Array,
|
default() {
|
return [];
|
}
|
},
|
labelWidth: {
|
type: Number,
|
default: 120
|
}
|
});
|
|
const formRef = ref();
|
const formData = reactive({
|
list: [] as any[],
|
});
|
|
const fieldLabel = (item: any) => {
|
if (!item.unit || item.unit === "/") {
|
return item.parameterItem;
|
}
|
return `${item.parameterItem}（${item.unit}）`;
|
};
|
|
const getType = (item: any) => item.type || "文本格式";
|
|
const rules = computed(() => {
|
const result: Record<string, any[]> = {};
|
formData.list.forEach((item, index) => {
|
if (String(item.isRequired) === "1") {
|
result[`list.${index}.value`] = [{required: true, message: `请输入${item.parameterItem}`, trigger: "blur"}];
|
}
|
});
|
return result;
|
});
|
|
const initData = () => {
|
formData.list = props.list || [];
|
formData.list.forEach(item => {
|
if (item.value === undefined) {
|
item.value = null;
|
}
|
});
|
};
|
|
const submitData = async () => {
|
const valid = await formRef.value.validate().catch(() => false)
|
|
if (valid) {
|
return formData.list
|
} else {
|
return null
|
}
|
}
|
|
watch(
|
() => props.list,
|
() => {
|
initData();
|
},
|
{immediate: true, deep: true}
|
);
|
|
defineExpose({
|
submitData
|
})
|
</script>
|
|
<template>
|
<el-form ref="formRef" :model="formData" :rules="rules" :label-width="`${labelWidth}px`">
|
<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-input
|
v-else
|
v-model="item.value"
|
placeholder="请输入"
|
clearable
|
/>
|
</el-form-item>
|
</el-form>
|
</template>
|
