You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
591 lines
31 KiB
591 lines
31 KiB
<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' || sItem.type === 'datePicker'" class="flex1">
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
|
|
:type="sItem.type" :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" 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 ml-10">
|
|
<div class="other-title" v-if="isShowOtherLabel(sItem)">{{ 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>
|
|
<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="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 v-else-if="sItem.type === 'radioAndOther'" class="item-center">
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
|
|
type="radio" :error="errors[key]" @update:error="errors[key] = false"
|
|
@change="(e, type) => onSelectChange(key, e, type)" :item="sItem"
|
|
:value="formFields[key]" />
|
|
<div v-show="isShowOtherByRadioAndOther(formFields[key], sItem)" class="flex1 ml-10">
|
|
<HandleFormItem :field-item-label="fieldItemLabel"
|
|
:field-key="prefixKey + '_' + sItem.otherCode" @blur="onBlur(key, $event)"
|
|
:item="getRadioOtherItem(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 v-else-if="sItem.type === 'fqyq'" class="flex1"
|
|
:class="{ 'form-error-border': errors[key] }">
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
|
|
type="fqyq" :item="sItem" :value="formFields[key]"
|
|
@change="(e) => onFqyqChange(key, e)" :error="errors[key]"
|
|
@update:error="errors[key] = false" />
|
|
</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 ml-10">
|
|
<div class="other-title" v-if="isShowOtherLabel(sItem)">{{ 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>
|
|
<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 ml-10">
|
|
<div class="other-title" v-if="isShowOtherLabel(sItem)">{{ 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 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)" />
|
|
<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="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" :class="sItem.span == 1 ? 'full-row' : ''">
|
|
<div class="form-title mr-20 checkboxList-title">{{ $t(sItem.label) }}</div>
|
|
<div class="flex flex1">
|
|
<HandleFormItem
|
|
v-if="sItem.type === 'checkboxTree'"
|
|
:field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
|
|
:type="sItem.type" :item="sItem" :value="formFields[key]"
|
|
@change="(e) => onAttachmentChange(key, e)"
|
|
:error="errors[key]" @update:error="errors[key] = false"
|
|
:orange-bg="orangeBgFields[key]" />
|
|
<HandleFormItem v-else-if="sItem.type === 'textarea'" :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]" />
|
|
<HandleFormItem v-else-if="sItem.type === 'input'" :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
|
|
@blur="onBlur(key, $event)" type="input" :item="sItem" v-model="formFields[key]"
|
|
@copy="onCopy(sItem, key)" :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, isShowOtherByRadioAndOther } 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,
|
|
isShowOtherByRadioAndOther,
|
|
isRegent
|
|
};
|
|
},
|
|
methods: {
|
|
onBeforeReagentSubmit(data, callback, key) {
|
|
this.$emit('beforeReagentSubmit', { selectData: data, callback, key, formFields: this.formFields })
|
|
},
|
|
// 点击按钮
|
|
handleClickButton(e, item, val, data) {
|
|
if(!item.isClearForm){
|
|
this.formFields[item.subKey] = val;
|
|
}
|
|
this.$emit("clickButton", item, data)
|
|
},
|
|
// 获取按钮项
|
|
getButtonItem(sItem) {
|
|
return {
|
|
...sItem,
|
|
key: sItem.subKey,
|
|
fillType: sItem.subFillType || sItem.fillType
|
|
}
|
|
},
|
|
// 处理fqyq变化
|
|
onFqyqChange(key, e) {
|
|
console.log(e, key, 'fqyq');
|
|
this.formFields[key] = e;
|
|
},
|
|
//是否显示其他输入框的标题
|
|
isShowOtherLabel(sItem){
|
|
if (sItem.hasOwnProperty("showOtherLabel")) {
|
|
return sItem.showOtherLabel
|
|
}
|
|
return true
|
|
},
|
|
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.form-error-border {
|
|
box-shadow: 0 0 6px #ffc3c3;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
border: 1px solid #ff5d5d;
|
|
}
|
|
.checkboxList-title{
|
|
width: 120px;
|
|
text-align: center;
|
|
}
|
|
</style>
|