|
|
@ -10,8 +10,7 @@ |
|
|
<div class="form-title">{{ $t(sItem.label) }}</div> |
|
|
<div class="form-title">{{ $t(sItem.label) }}</div> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" @blur="onBlur(key, $event)" :item="sItem" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" @blur="onBlur(key, $event)" :item="sItem" |
|
|
v-model="formFields[key]" :field-key="prefixKey + '_' + key" @copy="onCopy(sItem, key)" |
|
|
v-model="formFields[key]" :field-key="prefixKey + '_' + key" @copy="onCopy(sItem, key)" |
|
|
:error="errors[key]" @update:error="errors[key] = false" |
|
|
|
|
|
:type="sItem.type" |
|
|
|
|
|
|
|
|
:error="errors[key]" @update:error="errors[key] = false" :type="sItem.type" |
|
|
:orange-bg="orangeBgFields[key]" /> |
|
|
:orange-bg="orangeBgFields[key]" /> |
|
|
</template> |
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
@ -33,7 +32,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-l-20"> |
|
|
<div class="p-l-20"> |
|
|
<div v-show="isShowOther(formFields[key])"> |
|
|
<div v-show="isShowOther(formFields[key])"> |
|
|
<div class="form-title" >{{ sItem.otherLabel ? $t(sItem.otherLabel) : |
|
|
|
|
|
|
|
|
<div class="form-title">{{ sItem.otherLabel ? $t(sItem.otherLabel) : |
|
|
$t("template.common.other") }}</div> |
|
|
$t("template.common.other") }}</div> |
|
|
<div class="flex flex1"> |
|
|
<div class="flex flex1"> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
@ -73,17 +72,18 @@ |
|
|
<div class="form-title" v-if="sItem.label">{{ $t(sItem.label) }}</div> |
|
|
<div class="form-title" v-if="sItem.label">{{ $t(sItem.label) }}</div> |
|
|
<div v-if="sItem.type === 'dateTime' || sItem.type === 'datePicker'" class="flex1"> |
|
|
<div v-if="sItem.type === 'dateTime' || sItem.type === 'datePicker'" class="flex1"> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
<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" |
|
|
|
|
|
|
|
|
: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]" /> |
|
|
:orange-bg="orangeBgFields[key]" /> |
|
|
</div> |
|
|
</div> |
|
|
<div v-else-if="sItem.type === 'select'" class = "flex flex1"> |
|
|
|
|
|
|
|
|
<div v-else-if="sItem.type === 'select'" class="flex flex1"> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
type="select" :item="sItem" v-model="formFields[key]" @copy="onCopy(sItem, key)" |
|
|
type="select" :item="sItem" v-model="formFields[key]" @copy="onCopy(sItem, key)" |
|
|
@change="(e, type) => onSelectChange(key, e, type)" :error="errors[key]" |
|
|
@change="(e, type) => onSelectChange(key, e, type)" :error="errors[key]" |
|
|
@update:error="errors[key] = false" :orange-bg="orangeBgFields[key]" /> |
|
|
@update:error="errors[key] = false" :orange-bg="orangeBgFields[key]" /> |
|
|
<div v-show="isShowOther(formFields[key])" class="flex flex1 ml-10"> |
|
|
<div v-show="isShowOther(formFields[key])" class="flex flex1 ml-10"> |
|
|
<div class="other-title" v-if="isShowOtherLabel(sItem)">{{ sItem.otherLabel ? $t(sItem.otherLabel) : |
|
|
|
|
|
|
|
|
<div class="other-title" v-if="isShowOtherLabel(sItem)">{{ sItem.otherLabel ? |
|
|
|
|
|
$t(sItem.otherLabel) : |
|
|
$t("template.common.other") }}</div> |
|
|
$t("template.common.other") }}</div> |
|
|
<div class="flex flex1"> |
|
|
<div class="flex flex1"> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
@ -95,16 +95,19 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div v-else-if="sItem.type === 'input'||sItem.type === 'textarea' || sItem.type === 'inputNumber'" class="item-center"> |
|
|
|
|
|
|
|
|
<div v-else-if="sItem.type === 'input' || sItem.type === 'textarea' || sItem.type === 'inputNumber'" |
|
|
|
|
|
class="item-center"> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
@blur="onBlur(key, $event)" :item="sItem" v-model="formFields[key]" |
|
|
@blur="onBlur(key, $event)" :item="sItem" v-model="formFields[key]" |
|
|
:type="sItem.type" |
|
|
|
|
|
@copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" |
|
|
|
|
|
:ref="key" :orange-bg="orangeBgFields[key]" /> |
|
|
|
|
|
|
|
|
:type="sItem.type" @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> |
|
|
<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" |
|
|
<HandleFormItem class="ml-10" v-else-if="sItem.subType === 'button'" type="button" |
|
|
:item="getButtonItem(sItem)" :value="formFields[sItem.subKey]" |
|
|
:item="getButtonItem(sItem)" :value="formFields[sItem.subKey]" |
|
|
@clickButton="(e, val, data) => handleClickButton(e, sItem, val, data)" /> |
|
|
|
|
|
|
|
|
@clickButton="(e, val, data) => handleClickButton(e, sItem, val, data,sItem.subKey)" /> |
|
|
|
|
|
<HandleFormItem class="ml-10" v-else-if="sItem.thirdType === 'button'" type="button" |
|
|
|
|
|
:item="getThirdButtonItem(sItem)" :value="formFields[sItem.thirdKey]" |
|
|
|
|
|
@clickButton="(e, val, data) => handleClickButton(e, sItem, val, data,sItem.thirdKey)" /> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div v-else-if="sItem.type === 'clickable'" class="flex1"> |
|
|
<div v-else-if="sItem.type === 'clickable'" class="flex1"> |
|
|
@ -124,8 +127,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
<!-- 勾选某些选项时,出现其他输入框 --> |
|
|
<!-- 勾选某些选项时,出现其他输入框 --> |
|
|
<div v-else-if="sItem.type === 'radioAndOther'" class="item-center" |
|
|
<div v-else-if="sItem.type === 'radioAndOther'" class="item-center" |
|
|
:class="{'form-error-border': errors[key]}" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
:class="{ 'form-error-border': errors[key] }"> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
type="radio" :error="errors[key]" @update:error="errors[key] = false" |
|
|
type="radio" :error="errors[key]" @update:error="errors[key] = false" |
|
|
@change="(e, type) => onSelectChange(key, e, type)" :item="sItem" |
|
|
@change="(e, type) => onSelectChange(key, e, type)" :item="sItem" |
|
|
@ -155,12 +157,14 @@ |
|
|
</template> |
|
|
</template> |
|
|
<div class="flex flex-wrap" v-else-if="item.type === 'explainItem'"> |
|
|
<div class="flex flex-wrap" v-else-if="item.type === 'explainItem'"> |
|
|
<div v-for="(sItem, key) in item.config" :key="key" class="explain-item"> |
|
|
<div v-for="(sItem, key) in item.config" :key="key" class="explain-item"> |
|
|
<div v-if="sItem.type === 'input' || sItem.type === 'textarea' || sItem.type === 'inputNumber'" class="m-r-10"> |
|
|
|
|
|
|
|
|
<div v-if="sItem.type === 'input' || sItem.type === 'textarea' || sItem.type === 'inputNumber'" |
|
|
|
|
|
class="m-r-10"> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
:type="sItem.type" :item="sItem" style="width: auto;flex:1" :style = "{'width': sItem.formWidth ? sItem.formWidth + 'px' : 'auto'}" 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]" /> |
|
|
|
|
|
|
|
|
:type="sItem.type" :item="sItem" style="width: auto;flex:1" |
|
|
|
|
|
:style="{ 'width': sItem.formWidth ? sItem.formWidth + 'px' : 'auto' }" |
|
|
|
|
|
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> |
|
|
<span v-else-if="sItem.type === 'span'" class="explain-title">{{ $t(sItem.label) }}</span> |
|
|
<span v-else-if="sItem.type === 'span'" class="explain-title">{{ $t(sItem.label) }}</span> |
|
|
</div> |
|
|
</div> |
|
|
@ -183,21 +187,22 @@ |
|
|
:error="errors[key]" @update:error="errors[key] = false" |
|
|
:error="errors[key]" @update:error="errors[key] = false" |
|
|
:orange-bg="orangeBgFields[key]" /> |
|
|
:orange-bg="orangeBgFields[key]" /> |
|
|
</div> |
|
|
</div> |
|
|
<div v-else-if="sItem.type === 'select' ||sItem.type === 'radio'" class="flex flex1"> |
|
|
|
|
|
|
|
|
<div v-else-if="sItem.type === 'select' || sItem.type === 'radio'" class="flex flex1"> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
:type="sItem.type" :item="sItem" style="width: auto;flex:1" v-model="formFields[key]" |
|
|
:type="sItem.type" :item="sItem" style="width: auto;flex:1" v-model="formFields[key]" |
|
|
@copy="onCopy(sItem, key)" @change="(e, type) => onSelectChange(key, e, type)" |
|
|
@copy="onCopy(sItem, key)" @change="(e, type) => onSelectChange(key, e, type)" |
|
|
@remoteMethod="(query)=>remoteMethod(query, sItem,key)" |
|
|
|
|
|
:error="errors[key]" @update:error="errors[key] = false" |
|
|
|
|
|
:orange-bg="orangeBgFields[key]" /> |
|
|
|
|
|
<div v-show="isShowOther(formFields[key]) || isShowRadioSelect(formFields[key])" class="flex flex1 ml-10"> |
|
|
|
|
|
<div class="other-title" v-if="isShowOtherLabel(sItem) && isShowOther(formFields[key])">{{ sItem.otherLabel ? $t(sItem.otherLabel) : |
|
|
|
|
|
$t("template.common.other") }}</div> |
|
|
|
|
|
|
|
|
@remoteMethod="(query) => remoteMethod(query, sItem, key)" :error="errors[key]" |
|
|
|
|
|
@update:error="errors[key] = false" :orange-bg="orangeBgFields[key]" /> |
|
|
|
|
|
<div v-show="isShowOther(formFields[key]) || isShowRadioSelect(formFields[key])" |
|
|
|
|
|
class="flex flex1 ml-10"> |
|
|
|
|
|
<div class="other-title" v-if="isShowOtherLabel(sItem) && isShowOther(formFields[key])"> |
|
|
|
|
|
{{ sItem.otherLabel ? $t(sItem.otherLabel) : |
|
|
|
|
|
$t("template.common.other") }}</div> |
|
|
<div class="flex flex1"> |
|
|
<div class="flex flex1"> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
:field-key="prefixKey + '_' + sItem.otherCode" @blur="onBlur(key, $event)" |
|
|
:field-key="prefixKey + '_' + sItem.otherCode" @blur="onBlur(key, $event)" |
|
|
:item="getOtherItem(sItem)" v-model="formFields[sItem.otherCode]" |
|
|
:item="getOtherItem(sItem)" v-model="formFields[sItem.otherCode]" |
|
|
:type = "isShowOther(formFields[key]) ? 'input' : 'select'" |
|
|
|
|
|
|
|
|
:type="isShowOther(formFields[key]) ? 'input' : 'select'" |
|
|
@copy="onCopy(sItem, key)" :error="errors[sItem.otherCode]" |
|
|
@copy="onCopy(sItem, key)" :error="errors[sItem.otherCode]" |
|
|
@update:error="errors[sItem.otherCode] = false" |
|
|
@update:error="errors[sItem.otherCode] = false" |
|
|
:orange-bg="orangeBgFields[sItem.otherCode]" /> |
|
|
:orange-bg="orangeBgFields[sItem.otherCode]" /> |
|
|
@ -206,10 +211,9 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div v-else-if="sItem.type === 'input' || sItem.type === 'inputNumber'" class="flex flex1"> |
|
|
<div v-else-if="sItem.type === 'input' || sItem.type === 'inputNumber'" class="flex flex1"> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key" |
|
|
:type="sItem.type" |
|
|
|
|
|
@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]" /> |
|
|
|
|
|
|
|
|
:type="sItem.type" @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" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
:field-key="prefixKey + '_' + sItem.subKey" class="ml-10" |
|
|
:field-key="prefixKey + '_' + sItem.subKey" class="ml-10" |
|
|
v-if="sItem.subType === 'select'" type="select" :item="getSubItem(sItem)" |
|
|
v-if="sItem.subType === 'select'" type="select" :item="getSubItem(sItem)" |
|
|
@ -227,9 +231,12 @@ |
|
|
<div class="ml-10 item-span" v-else-if="sItem.subType === 'span'">{{ |
|
|
<div class="ml-10 item-span" v-else-if="sItem.subType === 'span'">{{ |
|
|
formFields[sItem.subKey] }}</div> |
|
|
formFields[sItem.subKey] }}</div> |
|
|
<span v-else-if="sItem.subType === 'text'" class="sub-text">{{ $t(sItem.subText) }}</span> |
|
|
<span v-else-if="sItem.subType === 'text'" class="sub-text">{{ $t(sItem.subText) }}</span> |
|
|
<HandleFormItem class="ml-10" v-else-if="sItem.subType === 'button'" type="button" |
|
|
|
|
|
|
|
|
<div v-else-if="sItem.subType === 'button'"> |
|
|
|
|
|
<HandleFormItem class="ml-10" type="button" |
|
|
:item="getButtonItem(sItem)" :value="formFields[sItem.subKey]" |
|
|
:item="getButtonItem(sItem)" :value="formFields[sItem.subKey]" |
|
|
@clickButton="(e, val, data) => handleClickButton(e, sItem, val, data)" /> |
|
|
|
|
|
|
|
|
@clickButton="(e, val, data) => handleClickButton(e, sItem, val, data,sItem.subKey)" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
:field-key="prefixKey + '_' + sItem.subKey" class="ml-10" |
|
|
:field-key="prefixKey + '_' + sItem.subKey" class="ml-10" |
|
|
v-else-if="sItem.subType === 'clickable'" type="clickable" |
|
|
v-else-if="sItem.subType === 'clickable'" type="clickable" |
|
|
@ -244,8 +251,14 @@ |
|
|
@onRegentSubmit="(data, inputValue) => onRegentSubmit(data, inputValue, sItem.subKey, sItem)" |
|
|
@onRegentSubmit="(data, inputValue) => onRegentSubmit(data, inputValue, sItem.subKey, sItem)" |
|
|
:error="errors[sItem.subKey]" @update:error="errors[sItem.subKey] = false" |
|
|
:error="errors[sItem.subKey]" @update:error="errors[sItem.subKey] = false" |
|
|
:value="formFields[sItem.subKey]" /> |
|
|
:value="formFields[sItem.subKey]" /> |
|
|
|
|
|
<div> |
|
|
|
|
|
<HandleFormItem class="ml-10" v-if="sItem.thirdType === 'button'" type="button" |
|
|
|
|
|
:item="getThirdButtonItem(sItem)" :value="formFields[sItem.thirdKey]" |
|
|
|
|
|
@clickButton="(e, val, data) => handleClickButton(e, sItem, val, data,sItem.thirdKey)" /> |
|
|
|
|
|
</div> |
|
|
<div v-show="isShowOther(formFields[sItem.subKey])" class="flex flex1 ml-10"> |
|
|
<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) : |
|
|
|
|
|
|
|
|
<div class="other-title" v-if="isShowOtherLabel(sItem)">{{ sItem.otherLabel ? |
|
|
|
|
|
$t(sItem.otherLabel) : |
|
|
$t("template.common.other") }}</div> |
|
|
$t("template.common.other") }}</div> |
|
|
<div class="flex flex1"> |
|
|
<div class="flex flex1"> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
@ -310,47 +323,47 @@ |
|
|
<span v-if="sItem.subType === 'text'" class="sub-text">{{ $t(sItem.subText) }}</span> |
|
|
<span v-if="sItem.subType === 'text'" class="sub-text">{{ $t(sItem.subText) }}</span> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
:field-key="prefixKey + '_' + sItem.subKey" class="ml-10" |
|
|
:field-key="prefixKey + '_' + sItem.subKey" class="ml-10" |
|
|
v-else-if="sItem.subType === 'input' || sItem.subType === 'inputNumber' || sItem.subType === 'select'" :type="sItem.subType" :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" |
|
|
|
|
|
|
|
|
v-else-if="sItem.subType === 'input' || sItem.subType === 'inputNumber' || sItem.subType === 'select'" |
|
|
|
|
|
:type="sItem.subType" :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]" /> |
|
|
:orange-bg="orangeBgFields[sItem.subKey]" /> |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
<HandleFormItem :field-item-label="fieldItemLabel" |
|
|
:field-key="prefixKey + '_' + sItem.thirdKey" class="ml-10" |
|
|
:field-key="prefixKey + '_' + sItem.thirdKey" class="ml-10" |
|
|
v-if="sItem.thirdType === 'select' || sItem.thirdType === 'input'" :type="sItem.thirdType" :item="getThirdItem(sItem)" |
|
|
|
|
|
v-model="formFields[sItem.thirdKey]" @copy="onCopy(sItem, key)" |
|
|
|
|
|
:error="errors[sItem.thirdKey]" @blur="onBlur(sItem.thirdKey, $event)" |
|
|
|
|
|
@update:error="errors[sItem.thirdKey] = false" |
|
|
|
|
|
|
|
|
v-if="sItem.thirdType === 'select' || sItem.thirdType === 'input'" |
|
|
|
|
|
:type="sItem.thirdType" :item="getThirdItem(sItem)" v-model="formFields[sItem.thirdKey]" |
|
|
|
|
|
@copy="onCopy(sItem, key)" :error="errors[sItem.thirdKey]" |
|
|
|
|
|
@blur="onBlur(sItem.thirdKey, $event)" @update:error="errors[sItem.thirdKey] = false" |
|
|
:orange-bg="orangeBgFields[sItem.thirdKey]" /> |
|
|
:orange-bg="orangeBgFields[sItem.thirdKey]" /> |
|
|
<HandleFormItem class="ml-10" v-if="sItem.fourthType === 'button'" type="button" |
|
|
<HandleFormItem class="ml-10" v-if="sItem.fourthType === 'button'" type="button" |
|
|
:item="getFourthButtonItem(sItem)" :value="formFields[sItem.fourthKey]" |
|
|
|
|
|
@clickButton="(e, val, data) => handleClickButton(e, sItem, val, data)" /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:item="getFourthButtonItem(sItem)" :value="formFields[sItem.fourthKey]" |
|
|
|
|
|
@clickButton="(e, val, data) => handleClickButton(e, sItem, val, data,sItem.fourthKey)" /> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<template v-else-if="item.type === 'checkboxList'"> |
|
|
<template v-else-if="item.type === 'checkboxList'"> |
|
|
<div class="form-item " > |
|
|
|
|
|
|
|
|
<div class="form-item "> |
|
|
<div class="form-title fs-16" v-if="item.label">{{ $t(item.label) }}</div> |
|
|
<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 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="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="form-title mr-20 checkboxList-title">{{ $t(sItem.label) }}</div> |
|
|
<div class="flex flex1"> |
|
|
<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)" |
|
|
|
|
|
|
|
|
<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" |
|
|
:error="errors[key]" @update:error="errors[key] = false" |
|
|
:orange-bg="orangeBgFields[key]" /> |
|
|
: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" |
|
|
|
|
|
|
|
|
<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]" /> |
|
|
: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" |
|
|
|
|
|
|
|
|
<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]" /> |
|
|
:orange-bg="orangeBgFields[key]" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -414,23 +427,23 @@ export default { |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
remoteMethod(query, sItem, key){ |
|
|
|
|
|
|
|
|
remoteMethod(query, sItem, key) { |
|
|
this.$emit('remoteMethod', { query, sItem, key, formFields: this.formFields }) |
|
|
this.$emit('remoteMethod', { query, sItem, key, formFields: this.formFields }) |
|
|
}, |
|
|
}, |
|
|
//是否显示radio后的select |
|
|
//是否显示radio后的select |
|
|
isShowRadioSelect(value){ |
|
|
|
|
|
const arr = ["动物种属","细胞系"]; |
|
|
|
|
|
|
|
|
isShowRadioSelect(value) { |
|
|
|
|
|
const arr = ["动物种属", "细胞系"]; |
|
|
return arr.includes(value) |
|
|
return arr.includes(value) |
|
|
}, |
|
|
}, |
|
|
onBeforeReagentSubmit(data, callback, key) { |
|
|
onBeforeReagentSubmit(data, callback, key) { |
|
|
this.$emit('beforeReagentSubmit', { selectData: data, callback, key, formFields: this.formFields }) |
|
|
this.$emit('beforeReagentSubmit', { selectData: data, callback, key, formFields: this.formFields }) |
|
|
}, |
|
|
}, |
|
|
// 点击按钮 |
|
|
// 点击按钮 |
|
|
handleClickButton(e, item, val, data) { |
|
|
|
|
|
if(!item.isClearForm){ |
|
|
|
|
|
|
|
|
handleClickButton(e, item, val, data,key) { |
|
|
|
|
|
if (!item.isClearForm) { |
|
|
this.formFields[item.subKey] = val; |
|
|
this.formFields[item.subKey] = val; |
|
|
} |
|
|
|
|
|
this.$emit("clickButton", item, data) |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
this.$emit("clickButton", item, data,key,this.formFields) |
|
|
}, |
|
|
}, |
|
|
// 获取按钮项 |
|
|
// 获取按钮项 |
|
|
getButtonItem(sItem) { |
|
|
getButtonItem(sItem) { |
|
|
@ -441,11 +454,21 @@ export default { |
|
|
fillType: sItem.subFillType || sItem.fillType |
|
|
fillType: sItem.subFillType || sItem.fillType |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
// 获取按钮项 |
|
|
|
|
|
getThirdButtonItem(sItem) { |
|
|
|
|
|
return { |
|
|
|
|
|
...sItem, |
|
|
|
|
|
key: sItem.thirdKey, |
|
|
|
|
|
disabled: sItem.thirdDisabled, |
|
|
|
|
|
buttonName: sItem.thirdButtonName, |
|
|
|
|
|
fillType: sItem.thirdFillType || sItem.fillType |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
getFourthButtonItem(sItem) { |
|
|
getFourthButtonItem(sItem) { |
|
|
return { |
|
|
return { |
|
|
...sItem, |
|
|
...sItem, |
|
|
key: sItem.fourthKey, |
|
|
key: sItem.fourthKey, |
|
|
buttonName:sItem.fourthButtonName, |
|
|
|
|
|
|
|
|
buttonName: sItem.fourthButtonName, |
|
|
disabled: sItem.fourthDisabled, |
|
|
disabled: sItem.fourthDisabled, |
|
|
fillType: sItem.fourthFillType || sItem.fillType |
|
|
fillType: sItem.fourthFillType || sItem.fillType |
|
|
} |
|
|
} |
|
|
@ -456,7 +479,7 @@ export default { |
|
|
this.formFields[key] = e; |
|
|
this.formFields[key] = e; |
|
|
}, |
|
|
}, |
|
|
//是否显示其他输入框的标题 |
|
|
//是否显示其他输入框的标题 |
|
|
isShowOtherLabel(sItem){ |
|
|
|
|
|
|
|
|
isShowOtherLabel(sItem) { |
|
|
if (sItem.hasOwnProperty("showOtherLabel")) { |
|
|
if (sItem.hasOwnProperty("showOtherLabel")) { |
|
|
return sItem.showOtherLabel |
|
|
return sItem.showOtherLabel |
|
|
} |
|
|
} |
|
|
@ -548,22 +571,26 @@ export default { |
|
|
.p-r-20 { |
|
|
.p-r-20 { |
|
|
padding-right: 20px; |
|
|
padding-right: 20px; |
|
|
} |
|
|
} |
|
|
.explain-title{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.explain-title { |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
font-weight: normal; |
|
|
font-weight: normal; |
|
|
color: #606266; |
|
|
color: #606266; |
|
|
padding-right: 10px; |
|
|
padding-right: 10px; |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
.explain-item{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.explain-item { |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
padding: 10px 0; |
|
|
padding: 10px 0; |
|
|
} |
|
|
} |
|
|
.flex-wrap{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.flex-wrap { |
|
|
flex-wrap: wrap; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
} |
|
|
.m-r-10{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.m-r-10 { |
|
|
margin-right: 10px; |
|
|
margin-right: 10px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -649,7 +676,8 @@ export default { |
|
|
border-radius: 4px; |
|
|
border-radius: 4px; |
|
|
border: 1px solid #ff5d5d; |
|
|
border: 1px solid #ff5d5d; |
|
|
} |
|
|
} |
|
|
.checkboxList-title{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.checkboxList-title { |
|
|
width: 120px; |
|
|
width: 120px; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
} |
|
|
} |