eln_web/src/components/Template/BaseInfoFormPackage.vue

<template>
    <div>
        <LineLabel v-if="label" :label="label" />
        <div v-for="(item, index) in formConfig" :key="index">
            <template v-if="item.type === 'cardItem'">
                <div class="grid-container">
                    <div v-for="(sItem, key) in item.config" class="form-item"
                        :class="sItem.span == 1 ? 'full-row' : ''" :key="key">
                        <template v-if="sItem.type === 'input'">
                            <div class="form-title">{{ $t(sItem.label) }}</div>
                            <HandleFormItem :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'">
                            <div class="form-title">{{ $t(sItem.label) }}</div>
                            <HandleFormItem :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>
                    </div>
                </div>
            </template>
            <template v-else-if="item.type === 'conditionItem'">
                <div class="form-item ">
                    <div class="form-title fs-16" v-if="item.label">{{ $t(item.label) }}</div>
                    <div v-for="(sItem, key) in item.config" class="c-Item  grid-container">
                        <div class="p-r-20">
                            <div class="form-title">{{ $t(sItem.label) }}</div>
                            <div class="flex flex1">
                                <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                    type="select" :item="sItem" v-model="formFields[key]" @copy="onCopy(sItem, key)"
                                    @change="(e, type) => onSelectChange(key, e, type)" :error="errors[key]"
                                    @update:error="errors[key] = false" :orange-bg="orangeBgFields[key]" />

                            </div>
                        </div>
                        <div class="p-l-20">
                            <div v-show="isShowOther(formFields[key])">
                                <div class="form-title">{{ sItem.otherLabel ? $t(sItem.otherLabel) :
                                    $t("template.common.other") }}</div>
                                <div class="flex flex1">
                                    <HandleFormItem :field-item-label="fieldItemLabel"
                                        :field-key="prefixKey + '_' + sItem.otherCode" @blur="onBlur(key, $event)"
                                        :item="getOtherItem(sItem)" v-model="formFields[sItem.otherCode]"
                                        @copy="onCopy(sItem, key)" :error="errors[sItem.otherCode]"
                                        @update:error="errors[sItem.otherCode] = false" />
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </template>
            <template v-else-if="item.type === 'attachment'">
                <div class="form-item ">
                    <div class="form-title fs-16" v-if="item.label">{{ $t(item.label) }}</div>
                    <div v-for="(sItem, key) in item.config" class="c-Item  grid-container">
                        <div class="p-r-20">
                            <div class="form-title">{{ $t(sItem.label) }}</div>
                            <div class="flex flex1">
                                <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                    type="attachment" :item="sItem" :value="formFields[key]" @copy="onCopy(sItem, key)"
                                    @change="(e) => onAttachmentChange(key, e)" :error="errors[key]"
                                    @update:error="errors[key] = false" :orange-bg="orangeBgFields[key]" />
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else-if="item.type === 'cellItem'">
                <div class="form-item ">
                    <div class="form-title fs-16" v-if="item.label">{{ $t(item.label) }}</div>
                    <div class="grid-container gap2">
                        <div v-for="(sItem, key) in item.config" class="c-Item" :class="getSpanClass(sItem)" :key="key">
                            <div class="form-title" v-if="sItem.label">{{ $t(sItem.label) }}</div>
                            <div v-if="sItem.type === 'dateTime'" class="flex1">
                                <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                    type="dateTime" :item="sItem" v-model="formFields[key]" @copy="onCopy(sItem, key)"
                                    :error="errors[key]" @update:error="errors[key] = false"
                                    :orange-bg="orangeBgFields[key]" />
                            </div>
                            <div v-else-if="sItem.type === 'select'">
                                <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                    type="select" :item="sItem" v-model="formFields[key]" @copy="onCopy(sItem, key)"
                                    @change="(e, type) => onSelectChange(key, e, type)" :error="errors[key]"
                                    @update:error="errors[key] = false" :orange-bg="orangeBgFields[key]" />
                            </div>
                            <div v-else-if="sItem.type === 'input'" class="item-center">
                                <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                    @blur="onBlur(key, $event)" :item="sItem" v-model="formFields[key]"
                                    @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
                                    :ref = "key"
                                    :orange-bg="orangeBgFields[key]" />
                                <span v-if="sItem.subType === 'text'" class="sub-text">{{ $t(sItem.subText) }}</span>
                                <HandleFormItem  class="ml-10" v-else-if="sItem.subType === 'button'" type="button" :item="getButtonItem(sItem)"
                                    :value="formFields[sItem.subKey]"
                                    @clickButton="(e,val,data) => handleClickButton(e, sItem,val,data)" />

                            </div>
                            <div v-else-if="sItem.type === 'textarea'">
                                <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                    @blur="onBlur(key, $event)" type="textarea" :item="sItem" v-model="formFields[key]"
                                    @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
                                    :orange-bg="orangeBgFields[key]" />
                            </div>
                            <div v-else-if="sItem.type === 'clickable'" class="flex1">
                                <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                    type="clickable" @clickable="handleClickable(sItem, key)" :error="errors[key]"
                                    @update:error="errors[key] = false" @resetRecord="resetRecord(key)" :item="sItem"
                                    :value="formFields[key]" />
                            </div>
                            <div v-else-if="sItem.type === 'checkboxList'" class="flex1">
                                <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                    type="checkboxList" :item="sItem" :value="formFields[key]"
                                    @copy="onCopy(sItem, key)" @change="(e) => onAttachmentChange(key, e)"
                                    :error="errors[key]" @update:error="errors[key] = false"
                                    :orange-bg="orangeBgFields[key]" />
                            </div>
                            <div v-else-if="isRegent(sItem)" class="flex1">
                                <HandleFormItem
                                    @beforeReagentSubmit="(data, callback) => onBeforeReagentSubmit(data, callback, key)"
                                    :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" :type="sItem.type"
                                    sourceFrom="baseInfoFormPackage" :error="errors[key]"
                                    @update:error="errors[key] = false"
                                    @onRegentSubmit="(data, inputValue) => onRegentSubmit(data, inputValue, key, sItem)"
                                    :item="sItem" :value="formFields[key]" />
                            </div>


                        </div>
                    </div>

                </div>
            </template>
            <template v-else-if="item.type === 'step'">
                <div class="grid-container gap2">
                    <div v-for="(sItem, key) in item.config" class="c-Item flex item-center"
                        :class="getSpanClass(sItem)" :key="key">
                        <div class="step-form-title"
                            :style="{ 'width': sItem.labelWidth ? sItem.labelWidth + 'px' : '150px' }" v-if="sItem.label">
                            {{ $t(sItem.label) }}</div>
                        <div v-if="sItem.type === 'dateTime'" class="flex1">
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                type="dateTime" :item="sItem" v-model="formFields[key]" @copy="onCopy(sItem, key)"
                                :error="errors[key]" @update:error="errors[key] = false"
                                :orange-bg="orangeBgFields[key]" />
                        </div>
                        <div v-else-if="sItem.type === 'select'" class="flex flex1">
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                type="select" :item="sItem" style="width: auto;flex:1" v-model="formFields[key]"
                                @copy="onCopy(sItem, key)" @change="(e, type) => onSelectChange(key, e, type)"
                                :error="errors[key]" @update:error="errors[key] = false"
                                :orange-bg="orangeBgFields[key]" />
                            <div v-show="isShowOther(formFields[key])" class="flex flex1">
                                <div class="other-title">{{ sItem.otherLabel ? $t(sItem.otherLabel) :
                                    $t("template.common.other") }}</div>
                                <div class="flex">
                                    <HandleFormItem :field-item-label="fieldItemLabel"
                                        :field-key="prefixKey + '_' + sItem.otherCode" @blur="onBlur(key, $event)"
                                        :item="getOtherItem(sItem)" v-model="formFields[sItem.otherCode]"
                                        @copy="onCopy(sItem, key)" :error="errors[sItem.otherCode]"
                                        @update:error="errors[sItem.otherCode] = false"
                                        :orange-bg="orangeBgFields[sItem.otherCode]" />
                                </div>
                            </div>
                        </div>
                        <div v-else-if="sItem.type === 'input'" class="flex flex1">
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                @blur="onBlur(key, $event)" class="flex1" :item="sItem" v-model="formFields[key]"
                                @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
                                :orange-bg="orangeBgFields[key]" />
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + sItem.subKey"
                                class="ml-10" v-if="sItem.subType === 'select'" type="select" :item="getSubItem(sItem)"
                                v-model="formFields[sItem.subKey]" @copy="onCopy(sItem, key)"
                                @change="(e, type) => onSelectChange(sItem.subKey, e, type)" :error="errors[sItem.subKey]"
                                @update:error="errors[sItem.subKey] = false"
                                :orange-bg="orangeBgFields[sItem.subKey]" />
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + sItem.subKey"
                                class="ml-10" v-if="sItem.subType === 'input'" type="input" :item="getSubItem(sItem)"
                                v-model="formFields[sItem.subKey]" @copy="onCopy(sItem, key)"
                                :error="errors[sItem.subKey]" @blur="onBlur(sItem.subKey, $event)"
                                @update:error="errors[sItem.subKey] = false"
                                :orange-bg="orangeBgFields[sItem.subKey]" />
                            <div class="ml-10 item-span" v-else-if="sItem.subType === 'span'">{{
                                formFields[sItem.subKey] }}</div>
                            <span v-else-if="sItem.subType === 'text'" class="sub-text">{{ $t(sItem.subText) }}</span>
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + sItem.subKey"
                                class="ml-10" v-else-if="sItem.subType === 'clickable'" type="clickable"
                                @clickable="handleClickable(sItem, sItem.subKey)" :item="getClickableItem(sItem)"
                                :error="errors[sItem.subKey]" @update:error="errors[sItem.subKey] = false"
                                @resetRecord="resetRecord(sItem.subKey)" :value="formFields[sItem.subKey]" />
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + sItem.subKey"
                                class="ml-10" v-else-if="isRegent(sItem, 'subType')" :type="sItem.subType"
                                :item="getRegentItem(sItem, 'subType')" sourceFrom="baseInfoFormPackage"
                                @beforeReagentSubmit="(data, callback) => onBeforeReagentSubmit(data, callback, sItem.subKey)"
                                @onRegentSubmit="(data, inputValue) => onRegentSubmit(data, inputValue, sItem.subKey, sItem)"
                                :error="errors[sItem.subKey]" @update:error="errors[sItem.subKey] = false"
                                :value="formFields[sItem.subKey]" />
                            <div v-show="isShowOther(formFields[sItem.subKey])" class="flex flex1">
                                <div class="other-title">{{ sItem.otherLabel ? $t(sItem.otherLabel) :
                                    $t("template.common.other") }}</div>
                                <div class="flex flex1">
                                    <HandleFormItem :field-item-label="fieldItemLabel"
                                        :field-key="prefixKey + '_' + sItem.otherCode" @blur="onBlur(key, $event)"
                                        :item="getOtherItem(sItem)" v-model="formFields[sItem.otherCode]"
                                        @copy="onCopy(sItem, key)" :error="errors[sItem.otherCode]"
                                        @update:error="errors[sItem.otherCode] = false"
                                        :orange-bg="orangeBgFields[sItem.otherCode]" />
                                </div>
                            </div>
                            <!-- <div class="clickable" :class="getFillType(sItem.subFillType)" v-else-if = "sItem.subType ==='clickable'" @click="handleClickable(sItem,$event)">
                                <span v-if="formFields[sItem.subKey]">{{ formFields[sItem.subKey] }}</span>
                                <span v-else class="default-placeholder-text">请选择</span>
                            </div> -->
                        </div>
                        <div v-else-if="sItem.type === 'inputNumber'" class="flex flex1">
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                type="inputNumber" @blur="onBlur(key, $event)" class="flex1" :item="sItem"
                                @input="onInputNumberChange(key, $event)" :value="formFields[key]"
                                @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
                                :orange-bg="orangeBgFields[key]" />
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + sItem.subKey"
                                class="ml-10" v-if="sItem.subType === 'select'" type="select" :item="getSubItem(sItem)"
                                v-model="formFields[sItem.subKey]" @copy="onCopy(sItem, key)"
                                @change="(e, type) => onSelectChange(sItem.subKey, e, type)" :error="errors[sItem.subKey]"
                                @update:error="errors[sItem.subKey] = false"
                                :orange-bg="orangeBgFields[sItem.subKey]" />
                            <div class="ml-10 item-span" v-else-if="sItem.subType === 'span'">{{
                                formFields[sItem.subKey] }}</div>
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + sItem.subKey"
                                class="ml-10" v-else-if="sItem.subType === 'clickable'"
                                @clickable="handleClickable(sItem, sItem.subKey)" :error="errors[sItem.subKey]"
                                type="clickable" @update:error="errors[sItem.subKey] = false"
                                @resetRecord="resetRecord(sItem.subKey)" :item="getClickableItem(sItem)"
                                :value="formFields[sItem.subKey]" />
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + sItem.subKey"
                                class="ml-10" v-else-if="isRegent(sItem, 'subType')" sourceFrom="baseInfoFormPackage"
                                :error="errors[sItem.subKey]" :type="sItem.subType"
                                @beforeReagentSubmit="(data, callback) => onBeforeReagentSubmit(data, callback, sItem.subKey)"
                                @onRegentSubmit="(data, inputValue) => onRegentSubmit(data, inputValue, sItem.subKey, sItem)"
                                :item="getRegentItem(sItem, 'subType')" :value="formFields[sItem.subKey]" />
                        </div>
                        <div v-else-if="sItem.type === 'clickable'" class="flex flex1">
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                type="clickable" @clickable="handleClickable(sItem, key)" :error="errors[key]"
                                @update:error="errors[key] = false" @resetRecord="resetRecord(key)" :item="sItem"
                                :value="formFields[key]" />
                        </div>
                        <div v-else-if="sItem.type === 'checkboxList'" class="flex flex1">
                            <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                type="checkboxList" :item="sItem" :value="formFields[key]" @copy="onCopy(sItem, key)"
                                @change="(e) => onAttachmentChange(key, e)" :error="errors[key]"
                                @update:error="errors[key] = false" :orange-bg="orangeBgFields[key]" />
                        </div>
                        <div v-else-if="isRegent(sItem)" class="flex item-center flex1">
                            <HandleFormItem :field-item-label="fieldItemLabel" sourceFrom="baseInfoFormPackage"
                                @beforeReagentSubmit="(data, callback) => onBeforeReagentSubmit(data, callback, key)"
                                @onRegentSubmit="(data, inputValue) => onRegentSubmit(data, inputValue, key, sItem)"
                                :field-key="prefixKey + '_' + key" :type="sItem.type" :error="errors[key]"
                                @update:error="errors[key] = false" :item="getRegentItem(sItem)"
                                :value="formFields[key]" />
                            <span v-if="sItem.subType === 'text'" class="sub-text">{{ $t(sItem.subText) }}</span>

                        </div>
                    </div>
                </div>
            </template>
            <template v-else-if="item.type === 'checkboxList'">
                <div class="form-item ">
                    <div class="form-title fs-16" v-if="item.label">{{ $t(item.label) }}</div>
                    <div v-for="(sItem, key) in item.config" class="c-Item  grid-container">
                        <div class="p-r-20 item-center">
                            <div class="form-title mr-20">{{ $t(sItem.label) }}</div>
                            <div class="flex flex1">
                                <HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
                                    type="checkboxList" :item="sItem" :value="formFields[key]"
                                    @copy="onCopy(sItem, key)" @change="(e) => onAttachmentChange(key, e)"
                                    :error="errors[key]" @update:error="errors[key] = false"
                                    :orange-bg="orangeBgFields[key]" />
                            </div>
                        </div>
                    </div>
                </div>

            </template>

        </div>
    </div>
</template>

<script>
import HandleFormItem from "./HandleFormItem.vue";
import LineLabel from "./LineLabel.vue";
import { isShowOther } from "@/utils/formPackageCommon.js";
import { isRegent } from "@/utils/index.js";

import formPackageMixins from '@/components/Template/mixins/formPackageMixins.js'
export default {
    inject: ['templateFillType'],
    components: {
        HandleFormItem,
        LineLabel
    },
    mixins: [formPackageMixins],
    props: {
        label: {//当前表单的标题
            type: String,
            default: "",
        },
        formConfig: {
            type: Array,
            value: () => [],
        },
        formData: {
            type: Object,
            value: () => ({})
        },
        //主要标识当前表单属于哪个模块，用于传给后端
        fieldItemLabel: {
            type: String,
            default: "",
        },
        //循环组件的情况下需要用这个来区分字段
        prefixKey: {
            type: String,
            default: "",
        }
    },
    data() {
        return {
            formFields: {},//表单绑定字段
            allFieldsConfig: {},//包含config的所有字段,主要用于校验表单是否填写
            errors: {},//存储表单错误信息，用于标红提示
            orangeBgFields: {},// 存储需要橙色背景的字段
            oldFormFields: {},// 存储旧的表单数据，用于比较变化
            isShowOther,
            isRegent
        };
    },
    methods: {
        onBeforeReagentSubmit(data, callback, key) {
            this.$emit('beforeReagentSubmit', { selectData: data, callback, key, formFields: this.formFields })
        },
        // 点击按钮
        handleClickButton(e, item,val,data) {
            this.formFields[item.subKey] = val;
            this.$emit("clickButton", item,data)
        },
        // 获取按钮项
        getButtonItem(sItem) {
            return {
                ...sItem,
                key: sItem.subKey,
                fillType: sItem.subFillType || sItem.fillType
            }
        },
    }
}
</script>

<style lang="scss">
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 默认2列 */
    gap: 0 20px;
    /* 防止网格容器被分割到不同页面 */
    page-break-inside: avoid;
    break-inside: avoid;
}

.gap2 {
    gap: 0 48px;
}

.w-100 {
    width: 100%;
}

.form-item {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin-top: 20px;
    padding: 20px;
    border-radius: 5px 5px;
    page-break-inside: avoid;
}

/* 或者使用 span 语法 */
.full-row {
    grid-column: span 2;
}

.three-row {
    grid-column: span 3;
}


.c-Item {
    //  &:not(:last-child) {
    //     margin-bottom: 16px;
    //  }
    page-break-inside: avoid;
    padding: 8px 0px;
}

.eo {
    &:nth-child(even) {
        padding-left: 20px;
    }

    &:nth-child(odd) {
        padding-right: 20px;
    }
}

.default-placeholder-text {
    color: #C0C4CC;
}

.form-title {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: normal;
    color: #606266;
}

.step-form-title {
    font-size: 14px;
    font-weight: normal;
    color: #606266;
    width: 150px;
    text-align: right;
    padding-right: 10px;
}

.p-r-20 {
    padding-right: 20px;
}

.p-l-20 {
    padding-left: 20px;
}

.fs-16 {
    font-size: 0.96rem;
    font-weight: bold;
    color: #464647
}

.flex1 {
    flex: 1;
}

.flex {
    display: flex;
}

.other-title {
    width: 50px;
    text-align: right;
    margin: 0 10px;
    font-size: 14px;
    font-weight: normal;
    color: #606266;
}

.mr-24 {
    margin-right: 24px;
}

.sub-select {
    width: 100px;
    margin-left: 10px;
}

.orange-border {
    border-color: #f9c588;
}

.green-border {
    border-color: green;
}

.blue-border {
    border-color: #4ea2ff;
}

.ml-10 {
    margin-left: 10px;
}

.item-span {
    color: #606266;
    font-size: 14px;
}

.item-center {
    display: flex;
    align-items: center;
}

.ml-5 {
    margin-left: 5px;
}

.sub-text {
    color: #606266;
    font-size: 14px;
    margin-left: 5px;
}

.mr-20 {
    margin-right: 20px;
}
</style>