eln_web/src/components/Template/StepFormPackage.vue

<template>
    <div>
        <div v-for="(item, index) in formConfig" :key="index" class="step-form-package">
            <div v-for="(sItem, key) in item.config" class="step-item" :key="key">
                <template v-if="sItem.type === 'input'">
                    <HandleFormItem class="step-row" :field-item-label="fieldItemLabel" @blur="onBlur(key, $event)"
                        :item="sItem" v-model="formFields[key]" :field-key="prefixKey + '_' + key"
                        @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
                        :orange-bg="orangeBgFields[key]" />
                </template>
                <template v-else-if="sItem.type === 'inputNumber'">
                    <HandleFormItem class="step-row" :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                        type="inputNumber" @blur="onBlur(key, $event)" :item="sItem"
                        @input="onInputNumberChange(key, $event)" v-model="formFields[key]" @copy="onCopy(sItem, key)"
                        :error="errors[key]" @update:error="errors[key] = false" :orange-bg="orangeBgFields[key]" />
                </template>
                <template v-else-if="sItem.type === 'select'">
                    <HandleFormItem class="step-row" :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                        type="select" @blur="onBlur(key, $event)" :item="sItem" v-model="formFields[key]"
                        @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
                        :orange-bg="orangeBgFields[key]" />
                </template>
                <!-- 仪器 -->
                <template v-else-if="sItem.type === 'instrument'">
                    <HandleFormItem class="step-row" :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                        type="clickable" @clickable="handleClickInstrument(key,'instrument')" :error="errors[key]"
                        @update:error="errors[key] = false" @resetRecord="resetRecord(key)" :item="getClickableItem(sItem)"
                        :value="formFields[key]" />
                </template>
                <!-- 仪器 -->
                <template v-else-if="sItem.type === 'regent'">
                    <HandleFormItem class="step-row" :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                        type="clickable" @clickable="handleClickInstrument(key,'regent')" :error="errors[key]"
                        @update:error="errors[key] = false" @resetRecord="resetRecord(key)" :item="getClickableItem(sItem)"
                        :value="formFields[key]" />
                </template>
                <template v-else-if="sItem.type === 'text'">
                    <span>{{ sItem.label }}</span>
                </template>
                <template v-else-if="sItem.type === 'span'">
                    <span>{{ formFields[key] }}</span>
                </template>
            </div>
        </div>
    
    </div>
</template>

<script>
import HandleFormItem from '@/components/Template/HandleFormItem.vue'
import formPackageMixins from '@/components/Template/mixins/formPackageMixins.js'
import { isShowOther } from "@/utils/formPackageCommon.js";
import { EventBus } from "@/utils/eventBus";
import { getuuid } from "@/utils/index.js";
export default {
    inject: ['templateFillType','templateData'],
    components: {
        HandleFormItem,
    },
    mixins: [formPackageMixins],
    props: {
        formConfig: {
            type: Array,
            default: []
        },
        formData: {
            type: Object,
            value: () => ({})
        },
        //主要标识当前表单属于哪个模块，用于传给后端
        fieldItemLabel: {
            type: String,
            default: "",
        },
        prefixKey: {
            type: String,
            default: ""
        }
    },
    mounted() {
        EventBus.$on("onReagentSubmit",this.onReagentSubmit)
    },
    unmounted() {
        EventBus.$off("onReagentSubmit",this.onReagentSubmit)
    },
    data() {
        return {
            formFields: {},//表单绑定字段
            allFieldsConfig: {},//包含config的所有字段,主要用于校验表单是否填写
            errors: {},//存储表单错误信息，用于标红提示
            orangeBgFields: {},// 存储需要橙色背景的字段
            isShowOther,
            currentClickKey: "",//当前点击的字段key
            uuid:getuuid(),
        }
    },
    methods: {
        // 处理选择试剂提交
        onReagentSubmit(data){
            if(data.uuid !== this.uuid) return;
            this.formFields[this.currentClickKey] = data.selectedId;
        },
        getClickableItem(sItem) {
            return {
                ...sItem,
                type:"clickable"
            }
        },
        handleClickInstrument(key,type) {
            this.currentClickKey = key;
            if(type === 'regent'){
                EventBus.$emit("showSelectReagentDialog",{
                    studyFormId:this.templateData.id,
                    uuid:this.uuid,
                })  
            }else if(type === 'instrument'){
                EventBus.$emit("showSelectInstrumentDialog",{
                    studyFormId:this.templateData.id,
                    uuid:this.uuid,
                })  
            }
        },
        onSelectReagentSubmit(reagent){
            this.formFields[this.currentClickKey] = reagent
        },
    }
}
</script>

<style lang="scss" scoped>
.step-form-package {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.step-row {
    min-width: 180px;
}

.step-item {
    display: flex;
    align-items: center;
    margin-left: 5px;
}
</style>