fhrons-mobile-next 2.0.0 → 2.0.2

package/packages/commonForm/CommonForm.vue

@@ -0,0 +1,786 @@
+<!-- 功能：公共表单; 作者：LZJ; 时间：2021年08月10日 09:35:21-->
+<template>
+	<div id="CommonForm" class="common-form">
+		<van-form :ref="`form${formIndex}`" :show-error-message="formData.showErrorMessage !== false" :show-error="formData.showErrorMessage !== false" :scroll-to-error="scrollToError">
+			<div v-for="(item, index) in cellData" :key="`cell${index}${item.prop}${item.required || ''}`" class="data-cell">
+				<!-- 输入框（包含右边有验证码等按钮类型） -->
+				<div v-if="item.type === 'text' || item.type === 'tel' || item.type === 'digit' || item.type === 'fuzzyMatching'" :class="item.subLabel ? ' cell-sub-label' : ''">
+					<van-field :ref="item['prop']" v-model="model[item['prop']]" :class="[item.class, underLine ? 'underLine' : '']" class="field-text" :readonly="item.readOnly" :label-class="item.labelClass" :label-width="item.labelWidth" :input-align="item.inputAlign || 'right'" :required="item.required" :type="item.type" :rules="fetchRules(item)" :label="item.title" :name="item.prop" :maxlength="item.maxlength" :placeholder="item.placeholder || $t('customerdetail.customeranalysis.xd8243')" :clearable="true" @input="fieldChange($event, item, model)" @blur="inputBlur(item, model, index)" @focus="fieldFocus($event, item, model)" @click="fieldClick($event, item)" @clear="handleClear">
+						<template #label>
+							<div class="flex-column-start">
+								<p class="flex-start mtb0">
+									<span v-if="(item.rule && item.rule[0].required) || item.required" class="c-ff5c5c ft14 line-height21">*</span>
+									<span @click="leftBtnClick(model, item, index)">
+										<i v-if="item.leftStartIcon" class="iconfont" :class="[item.leftStartIcon]" />
+										{{ item.title }}
+										<i v-if="item.leftEndIcon" class="iconfont" :class="[item.leftEndIcon]" />
+									</span>
+								</p>
+								<p v-if="item.subLabel" :class="item.subLabelClass" class="c-c8c9cc nowrap mt8 mb0">{{ item.subLabel }}</p>
+							</div>
+						</template>
+						<template v-if="item.rightBtnName || item.rightStartIcon || item.rightEndIcon" #button>
+							<UploadFile v-if="item.rightUpload" :upload-file-id="`bankCard${index}`" class="file-btn" :upload-obj="item.uploadObj" :delete-flag="false" @photoChanged="fileChanged(arguments, item, model)">
+                                <span v-if="item.needBar" class="right-parting-line ml4 mr12" />
+                                <div @click="rightBtnClick(model, item, index)" class="flex-start-center">
+                                    <i v-if="item.rightStartIcon" :class="['iconfont', item.rightStartIcon]"></i>
+                                    <span v-if="item.rightBtnName" :class="item.rightBtnClass || 'theme-color'">{{ item.rightBtnName }}</span>
+                                    <i v-if="item.rightEndIcon" :class="['iconfont', item.rightEndIcon ]"></i>
+                                </div>
+							</UploadFile>
+							<div v-else class="flex-start-center">
+                                <span v-if="item.needBar" class="right-parting-line ml4 mr12" />
+                                <div @click="rightBtnClick(model, item, index)" class="flex-start-center">
+                                    <i v-if="item.rightStartIcon" :class="['iconfont', item.rightStartIcon]"></i>
+                                    <span v-if="item.rightBtnName" :class="item.rightBtnClass || 'theme-color'">{{ item.rightBtnName }}</span>
+                                    <i v-if="item.rightEndIcon" :class="['iconfont', item.rightEndIcon ]"></i>
+                                </div>
+							</div>
+						</template>
+						<template v-else-if="item.showRecommend" #extra>
+							<div class="fuzzy-wrapper ps-a bgc-ffffff br8 pl12 over-hidden">
+								<p v-for="(fuzzyTwig, fuzzyIndex) in item.fuzzyMatchingContent" :key="fuzzyIndex" class="ptb12 single-fuzzy ft14 fw-400 c-23242e line-height21 text-ellipsis" @click.stop.prevent="handleClickFuzzyTwig(fuzzyTwig, fuzzyIndex)">{{ fuzzyTwig }}</p>
+							</div>
+						</template>
+					</van-field>
+				</div>
+				<div v-else-if="item.type === 'phoneNum'" class="flex-start" :class="[item.rightBtnName?'phone-num-btn':'phone-num']">
+					<AreaMobile style="padding: 0" :class="[item.readOnly ? 'no-click ' : '','area-mobile']" showLabel :ref="`phoneNum${item.prop}`" :dialling-code="model['diallingCode']" @getArea="(area) => fieldChange(area, Object.assign(item, { area }), model, index)">
+						<template slot="widget">
+							<van-field :ref="item['prop']" :maxlength="areaMaxLength" v-model="model[item['prop']]" :class="[item.class, underLine ? 'underLine' : '']" class="field-text" :readonly="item.readOnly" :label-class="item.labelClass" :label-width="item.labelWidth" :input-align="item.inputAlign || 'right'" :required="item.required" type="digit" :rules="fetchRules(item)" :name="item.prop" :placeholder="item.placeholder || $t('customerdetail.customeranalysis.xd8243')" :clearable="true" @input="fieldChange($event, item, model,index);adjustWidth(item,'input')" @clear="adjustWidth(item,'clear')" @blur="inputBlur(item, model,index);adjustWidth(item,'blur')" @focus="fieldFocus($event, item, model);adjustWidth(item,'focus')" @click="fieldClick($event, item)">
+								<template #label>
+									<p class="flex-start mtb0">
+										<span v-if="(item.rule && item.rule[0].required) || item.required" class="c-ff5c5c ft14 line-height21">*</span>
+										<span>{{ item.title }}</span>
+                                        <span ref="nosee" class="nosee ps-a">{{ model[item['prop']] || item.placeholder || $t('customerdetail.customeranalysis.xd8243') }}</span>
+									</p>
+								</template>
+								<template v-if="item.rightBtnName" #button>
+									<div class="flex-start-center">
+                                        <span v-if="item.needBar" class="right-parting-line ml4 mr12" />
+                                        <div @click="rightBtnClick(model, item, index)" class="flex-start-center">
+                                            <i v-if="item.rightStartIcon" :class="['iconfont', item.rightStartIcon]"></i>
+                                            <span v-if="item.rightBtnName" :class="item.rightBtnClass || 'theme-color'">{{ item.rightBtnName }}</span>
+                                            <i v-if="item.rightEndIcon" :class="['iconfont', item.rightEndIcon ]"></i>
+                                        </div>
+                                    </div>
+								</template>
+							</van-field>
+						</template>
+					</AreaMobile>
+				</div>
+				<!-- 带百分比完善度的跳转 应用场景 入司第二步-->
+				<van-field v-else-if="item.type === 'link'" :ref="item['prop']" v-model="model[item['prop']]" :class="[item.class, underLine ? 'underLine' : '']" class="field-text link-text theme-input-placeholder" :readonly="item.readOnly" :label-class="item.labelClass" :label-width="item.labelWidth" :input-align="item.inputAlign || 'right'" :required="item.required" :type="item.popType" :rules="fetchRules(item)" :label="item.title" :name="item.prop" :maxlength="item.maxlength" :disabled="item.disabled" :rows="item.rows" autosize :placeholder="item.placeholder || $t('customerdetail.customeranalysis.xd8243')" :clearable="true" @input="fieldChange($event, item, model, index)" @blur="inputBlur(item, model, index)" @focus="fieldFocus($event, item)" @click="fieldClick($event, item)">
+					<template #label>
+						<span v-if="(item.rule && item.rule[0].required) || item.required" class="c-ff5c5c ft14 line-height21">*</span>
+						<span>{{ item.title }}</span>
+						<!-- subtitle -->
+						<span v-if="item.subLabel" class="theme-color ml10">{{ item.subLabel }}{{ model[item.prop] || 0 }}%</span>
+					</template>
+					<template v-if="item.rightEndIcon" #button>
+						<span>
+							<span :class="[model[item.prop] >= 100 ? 'c-7f808a' : 'theme-color', 'ft14 line-height21']">{{ item.rightBtnName }}</span>
+							<i class="iconfont fw-500 ft14 ps-r" :class="[item.rightEndIcon]" />
+						</span>
+					</template>
+					<template #input>
+						<span class="ft14 line-height21" :class="[!item.subLabel && !model[item.prop] ? 'theme-color' : '']">{{ item.subLabel ? "" : model[item.prop] ? model[item.prop] : item.placeholder }}</span>
+					</template>
+				</van-field>
+				<!-- 数字键盘输入框 -->
+				<!-- 多行输入 -->
+				<van-field
+					v-else-if="item.type === 'textarea'"
+					:ref="item['prop']"
+					v-model="model[item['prop']]"
+					:class="[item.class, item.nowrap ? 'pd0' : '', item.nowrap ? '' : 'flex-column', item.underLine ? 'underLine' : '', model[item['prop']] && model[item['prop']].length >= item.maxlength ? 'van-field__word-num-red' : '']"
+					class="field-textarea"
+					:name="item.prop"
+					:label="item.title"
+					:label-class="item.labelClass"
+					:label-width="item.nowrap ? '' : '80vw'"
+					:required="item.required"
+					:clearable="item.clearable"
+					type="textarea"
+					autosize
+					:rules="item.rule"
+					:rows="item.rows || 2"
+					:input-align="item.inputAlign || 'right'"
+					:maxlength="item.maxlength"
+					:placeholder="item.placeholder || $t('customerdetail.customeranalysis.xd8243')"
+					:readonly="item.readOnly"
+					:show-word-limit="item.wordLimit"
+					@input="fieldChange($event, item, model, index)"
+					@focus="fieldFocus($event, item)"
+					@click="fieldClick($event, item, index)"
+				>
+					<template #label>
+						<span v-if="(item.rule && item.rule[0].required) || item.required" class="c-ff5c5c ft14 line-height21">*</span>
+						<span>{{ item.title }}</span>
+					</template>
+				</van-field>
+				<!-- 上传 -->
+				<van-field v-else-if="item.type === 'uploader'" :rules="item.rule" :required="item.required" :name="item.prop" :class="[item.class ? item.class:'flex-column', underLine ? 'underLine' : '', item.required ? 'required' : '']" class="uploader" :label-width="item.labelWidth">
+					<template v-if="item.title" #label>
+						<p class="c-555661 ft14 upload-title line-height14"><span v-if="(item.rule && item.rule[0].required) || item.required" class="c-ff5c5c ft14 line-height21">*</span>{{ item.title }}</p>
+						<p v-if="item.type === 'uploader'" class="c-c8c9cc ft12 mb15 line-height12">{{ item.subLabel }}</p>
+					</template>
+					<template #input>
+						<!-- 上传图片 -->
+						<van-uploader :ref="`uploaderDom${index}`" v-model="model[item['prop']]" :multiple="item.multiple" :max-count="item.maxCount" :rules="item.rule" :upload-icon="item.uploadIcon || ' iconfont icon-tianjia ft24 c-7f808a'" :after-read="(file) => afterRead(file, item, model, index)" :max-size="item.maxSize * 1000 * 1024" @click-preview="(file, name) => handlePreview(item, file, name, model, index)" @delete="(file, name) => deleteFile(item, file, name, model, index)" @oversize="$toast($t('commonform.commonform.lldfqi', [item.maxSize]))" />
+						<!-- deleteFile($event, item, model, index) -->
+					</template>
+				</van-field>
+				<div v-else-if="item.type === 'selectDate'">
+					<CommonYearMonthPicker v-if="item.popType === 'year-month'" :class="[item.class, underLine ? 'underLine' : '']" :under-line="underLine" :item="item" :model="model" :index="index" :cell-data="cellData" @onConfirmPicker="onConfirmPicker" @pickerFieldChange="pickerFieldChange" />
+					<CommonDatePicker v-else-if="item.popType === 'date'" :class="[item.class, underLine ? 'underLine' : '']" :under-line="underLine" :item="item" :model="model" :index="index" :cell-data="cellData" @onConfirmPicker="onConfirmPicker" @pickerFieldChange="pickerFieldChange" />
+					<CommonFullTimePicker v-else-if="item.popType === 'fulldate'" :class="[item.class, underLine ? 'underLine' : '']" :under-line="underLine" :item="item" :model="model" :index="index" :cell-data="cellData" @onConfirmPicker="onConfirmPicker" @pickerFieldChange="pickerFieldChange" />
+				</div>
+				<CommonAsyncAreaPicker v-else-if="item.type === 'asyncSelectArea'" :class="[item.class, underLine ? 'underLine' : '']" :under-line="underLine" :item="item" :model="model" :index="index" :cell-data="cellData" @onConfirmPicker="onConfirmPicker" @pickerFieldChange="pickerFieldChange" @areaHandleAddressData="areaHandleAddressData" />
+				<CommonSinglePicker v-else-if="item.type === 'selectSinglePicker'" :class="[item.class, underLine ? 'underLine' : '']" :under-line="underLine" :item="item" :model="model" :index="index" :cell-data="cellData" @onConfirmPicker="onConfirmPicker" @pickerFieldChange="pickerFieldChange" />
+				<van-field v-else-if="item.type === 'singleTag' || item.type === 'multiTag' || item.type === 'singleTagAndNum' || item.type === 'singleMutexTag'" v-model="model[item.prop]" :required="item.required" :name="item.prop" :label="item.title" :label-class="item.labelClass" :label-width="item.labelWidth" :class="[item.class, underLine ? 'underLine' : '', item.subLabelClass ? item.subLabelClass : '', 'pd12']" :input-align="item.inputAlign || 'right'" :rules="item.rule">
+					<template #label>
+						<div class="flex-start">
+							<p class="mtb0 c-555661 ft14"><span v-if="(item.rule && item.rule[0].required) || item.required" class="c-ff5c5c ft14 line-height21">*</span>{{ item.title }}</p>
+							<p v-if="item.subLabel" class="c-c8c9cc ft12 mt12 mb10">{{ item.subLabel }}</p>
+						</div>
+					</template>
+					<template #input>
+						<!-- 单选标签 -->
+						<div v-if="item.type === 'singleTag' || item.type === 'singleMutexTag'" direction="horizontal" class="line-feed" :class="item.singleTagClass">
+							<span v-for="(singleTag, singleTagIdx) in item.options" :key="`singleTag${singleTagIdx}`" class="br12" :class="[item.singleTagClass === 'cientsex' ? 'cient-btn' : 'radio-btn', singleTag.isChecked ? 'checked-btn theme-color' : singleTag.disabled ? 'border-line c-c8c9cc' : 'normal-btn', singleTagIdx === item.options.length - 1 ? '' : 'mr12', item.options.length > 3 ? '' : '']" :disabled="singleTag.disabled" @click.stop.prevent="singleTagClick(index, singleTagIdx, model, item.prop, item)">
+								<span class="nowrap">{{ singleTag.name }}</span>
+							</span>
+						</div>
+						<!-- 多选标签 -->
+						<div v-else-if="item.type === 'multiTag'" direction="horizontal" class="line-feed" :class="item.multiTagClass">
+							<span v-for="(multiTag, multiTagIdx) in item.options" :key="`multiTag${multiTagIdx}`" class="br12 radio-btn mr10" :class="multiTag.isChecked ? 'checked-btn theme-color' : 'normal-btn'" @click.stop.prevent="multiTagClick(index, multiTagIdx, model, item.prop, item)">{{ multiTag.name }}</span>
+						</div>
+						<!-- 单选标签加数字 -->
+						<div v-else-if="item.type === 'singleTagAndNum'" direction="horizontal" class="line-feed" :class="item.singleTagClass">
+							<div v-for="(singleTag, singleTagIdx) in item.options" :key="`singleTag${singleTagIdx}`" class="flex-column-center-center" @click.stop.prevent="singleTagClick(index, singleTagIdx, model, item.prop, item)">
+								<span class="br12 radio-btn mr10" :class="singleTag.isChecked ? 'checked-btn theme-color' : 'normal-btn'" :disabled="item.disabled">
+									<span>{{ singleTag.name }}</span>
+								</span>
+								<span class="bgc-5f9 br8 ft10 c-c8c9cc line-height16 mt6 ta-c width-24 inline-block">{{ `0${singleTagIdx + 1}` }}</span>
+							</div>
+						</div>
+					</template>
+				</van-field>
+				<van-field v-else :name="item.prop" :label="item.title" :label-class="item.labelClass" :label-width="item.labelWidth" :class="[item.class, underLine ? 'underLine' : '', item.subLabelClass ? item.subLabelClass : '']" :input-align="item.inputAlign || 'right'" :required="item.required" :rules="item.rule">
+					<template #label>
+						<div class="flex-column-start">
+							<p class="mtb0 c-555661 ft14"><span v-if="(item.rule && item.rule[0].required) || item.required" class="c-ff5c5c ft14 line-height21">*</span>{{ item.title }}</p>
+							<p v-if="item.subLabel" class="c-c8c9cc ft12 mt12 mb10">{{ item.subLabel }}</p>
+						</div>
+					</template>
+					<template #input>
+						<!-- 多选 -->
+						<van-checkbox-group v-if="item.type === 'checkbox'" :ref="item['prop']" v-model="model[item['prop']]" direction="horizontal" icon-size="16px" :disabled="item.disabled" @input="fieldChange($event, item, model, index)">
+							<van-checkbox v-for="(check, checkIdx) in item.options" :key="`checkbox${checkIdx}`" :name="check.value"
+								>{{ check.name }}
+								<template #icon="props">
+									<i class="iconfont ft16 c-c8c9cc" :class="props.checked ? 'icon-dianxuangouxuan theme-color' : 'icon-dianxuan'" />
+								</template>
+							</van-checkbox>
+						</van-checkbox-group>
+						<!-- 单选项 -->
+						<van-radio-group v-else-if="item.type === 'radio'" :ref="item['prop']" v-model="model[item['prop']]" direction="horizontal" @input.stop.prevent="fieldChange($event, item, model, index)">
+							<van-radio v-for="(radio, radioIdx) in item.options" :key="`radio${radioIdx}`" :name="radio.name"
+								>{{ radio.name }} <template #icon="props"> <i class="iconfont ft16 c-c8c9cc" :class="props.checked ? 'icon-dianxuangouxuan theme-color' : 'icon-dianxuan'" /> </template
+							></van-radio>
+						</van-radio-group>
+						<!-- 步进器 -->
+						<div v-else-if="item.type === 'stepper'" class="flex-end" :class="item.onlyClass">
+							<van-stepper :ref="item['prop']" v-model="model[item['prop']]" :button-size="item.buttonZize" :decimal-length="item.decimalLength || '0'" :max="item.max || '9999'" :input-width="item.width || '100px'" /><span v-if="item.unit" class="pl8">{{ item.unit }}</span>
+						</div>
+						<!-- 评分 -->
+						<van-rate v-else-if="item.type === 'rate'" :ref="item['prop']" v-model="model[item['prop']]" />
+						<!-- 滑块 -->
+						<van-slider v-else-if="item.type === 'slider'" :ref="item['prop']" v-model="model[item['prop']]" @change="fieldChange($event, item, model, index)" />
+						<!-- 开关 -->
+						<van-switch v-else-if="item.type === 'switch'" :ref="item['prop']" v-model="model[item['prop']]" size="20" @change="fieldChange($event, item, model, index)" />
+					</template>
+				</van-field>
+				<van-calendar v-if="item.type === 'select' && item.popType === 'calendar'" v-model="item['showPop']" :min-date="new Date(2010, 0, 1)" :max-date="new Date()" :type="item['popItemType']" @confirm="(value, pIdx) => onConfirm(value, pIdx, index, item, model)" @cancel="showPopView(index, false)" />
+                <slot v-else-if="item.type === 'customWidget'" :name="item.prop"></slot>
+			</div>
+			<div v-if="hasSubmit" style="margin: 16px">
+				<van-button round block type="info" native-type="submit">{{ $t("applyprocess.examine.j16189") }}</van-button>
+			</div>
+		</van-form>
+	</div>
+</template>
+
+<script>
+import { isEmpty, verifyRule } from "../../assets/js/func";
+import { getStorage } from "../../assets/js/storage";
+import AreaMobile from "../areaMobile/index.vue";
+import UploadFile from "../uploadFile/index.vue";
+import CommonAsyncAreaPicker from "./CommonAsyncAreaPicker.vue";
+import CommonDatePicker from "./CommonDatePicker.vue";
+import CommonFullTimePicker from "./CommonFullTimePicker.vue";
+import CommonSinglePicker from "./CommonSinglePicker.vue";
+import CommonYearMonthPicker from "./CommonYearMonthPicker.vue";
+export default {
+	// 组件名称
+	name: "CommonForm",
+	// 局部注册的组件
+	components: {
+		CommonYearMonthPicker,
+		CommonAsyncAreaPicker,
+		CommonDatePicker,
+		CommonFullTimePicker,
+		CommonSinglePicker,
+		UploadFile,
+		AreaMobile,
+	},
+	// 组件参数 接收来自父组件的数据
+	props: {
+		dataArr: {
+			type: Array,
+			default: () => [],
+			required: true,
+		},
+		form: {
+			type: Object,
+			default: () => {},
+			required: true,
+		},
+		hasSubmit: {
+			type: Boolean,
+			default: true,
+		},
+		underLine: {
+			type: Boolean,
+			default: false,
+		},
+		formIndex: {
+			type: Number,
+			default: () => null,
+		},
+		formData: {
+			type: Object,
+			default: () => {
+				return {};
+			},
+		},
+		scrollToError: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	// 组件状态值
+	data() {
+		return {
+			cellData: this.dataArr,
+			showPop: false,
+			model: this.form,
+			areaMaxLength: 11,
+		};
+    },
+    computed: {
+        phoneNumList () {
+            return this.dataArr.filter(item=>item.type === 'phoneNum')
+            
+        }  
+    },
+	// 侦听器
+	watch: {
+		dataArr: {
+			immediate: true,
+			deep: true,
+			handler(newVal) {
+				const temp = newVal.filter((item) => item.show !== false);
+                this.$set(this,'cellData',temp)
+			},
+		},
+		form: {
+			immediate: true,
+			deep: true,
+			handler(newVal) {
+				this.model = newVal;
+			},
+        },
+        phoneNumList: {
+            deep:true,
+            handler (newVal, oldVal) {
+                console.log(newVal,oldVal,this.$refs)
+                // debugger
+                this.$nextTick(_=> {
+                    this.initPhoneNum()
+                })
+            }
+            
+        }
+	},
+    mounted () {
+        this.initPhoneNum()
+    },
+    methods: {
+        initPhoneNum () {
+            this.phoneNumList.forEach(item => {
+                this.adjustWidth(item);
+            })
+        },
+        // 调整输入框宽度
+        adjustWidth(item = {}, method) {
+            const inputer = this.$refs[`phoneNum${item.prop}`][0].$el.querySelector('input');
+            const span = this.$refs.nosee[0];
+            span.textContent = this.model[item['prop']] || item.placeholder || this.$t('customerdetail.customeranalysis.xd8243');
+
+            let width = span.offsetWidth;
+
+            inputer.style.width = width + 'px';
+            const { inputAlign } = item
+            // const align = inputAlign === 'left'?'start':inputAlign==='right'?'end':inputAlign
+            this.setPhoneNumPosition(item,inputAlign);
+        },
+		// 重新调整区号控件的定位位置
+        setPhoneNumPosition (item, align) {
+            const areaCom = this.$refs[`phoneNum${item.prop}`][0];
+            if (!areaCom) return;
+            this.areaMaxLength = areaCom.areaItem.maxlength;
+            const areaDom = areaCom.$el.querySelector('.phone-num-widget');
+            if (isEmpty(areaDom)) return;
+            const inputer = areaCom.$el.querySelector('input');
+            const container = areaCom.$el.querySelector('.van-field__body');
+            if (align === 'left') {
+                inputer.style.marginRight = 'auto'
+            } else if (align === 'center') {
+                areaDom.style.marginLeft = 'auto'
+                inputer.style.marginRight = 'auto'
+            } else if (align === 'right') {
+                areaDom.style.marginLeft = 'auto'
+                inputer.style.marginRight = 'unset'
+            }
+            
+            // container.style.justifyContent = align
+            if (container.contains(areaDom))return
+            areaDom.style.color = '#323233';
+            areaDom.style.marginRight = '4px';
+            container.insertBefore(areaDom, inputer);
+            areaDom.style.visibility = 'visible'
+            areaDom.style.position = 'unset'
+        },
+        
+		handleClear() {
+			console.log(arguments);
+		},
+		judgeEmpty() {
+			return !isEmpty();
+		},
+		fetchRules(item) {
+			if (item.ruleType) {
+				const valid = [
+					{
+						required: item.required,
+						validator: (value) => {
+							return verifyRule(item.ruleType).test(value) || (!item.required && value === "");
+						},
+						message: item.message || this.$t("utils.mockdata.6tme0h"),
+						trigger: item.trigger || "onBlur",
+					},
+				];
+				if (item.rule) {
+					return [...valid, ...item.rule];
+				}
+				return valid;
+			}
+			return item.rule || null;
+		},
+		areaHandleAddressData(obj) {
+			const { value, prop, model } = obj;
+			this.handleAddressData(value, prop, model);
+		},
+		handleAddressData(value, prop, model) {
+			if (!value[0] || !value[0].areaCode) {
+				model[prop] = "";
+				return;
+			}
+			// 这里value的长度必定是2
+			const provinceName = value[0].areaName;
+			const provinceCode = value[0].areaCode;
+			const cityName = value[1].areaName;
+			const cityCode = value[1].areaCode;
+			const districtName = value[2]?.areaName;
+			const districtCode = value[2]?.areaCode;
+			const arr = ["province", "provinceName", "city", "cityName", "homeProvince", "homeProvinceName", "homeCity", "homeCityName"];
+			arr.forEach((item) => {
+				if (Object.keys(model).findIndex((key) => key === item) !== -1) {
+					if (item === "province" || item === "homeProvince") {
+						model[item] = provinceCode;
+					} else if (item === "provinceName" || item === "homeProvinceName") {
+						model[item] = provinceName;
+					} else if (item === "city" || item === "homeCity") {
+						model[item] = cityCode;
+					} else if (item === "cityName" || item === "homeCityName") {
+						model[item] = cityName;
+					}
+					model[prop] = `${provinceName}-${cityName}`;
+				} else {
+					if (value.length > 2) {
+						model[prop] = `${provinceName}-${cityName}-${districtName}`;
+						model["district"] = districtCode;
+					} else {
+						model[prop] = `${provinceName}-${cityName}`;
+					}
+					model["province"] = provinceCode;
+					model["city"] = cityCode;
+				}
+			});
+		},
+		onConfirmPicker(obj) {
+			const { value, pIdx, index, item, model } = obj;
+			this.onConfirm(value, pIdx, index, item, model);
+		},
+		onConfirm(value, pIdx, index, item, model) {
+			const prop = this.cellData[index].prop;
+			if (item.popType === "area") {
+				this.handleAddressData(value, prop, model);
+			} else if (item.popType === "picker") {
+				model[prop] = value[item.valueKey || "text"] === this.$t("financialinfo.carinfo.42bfwl") ? null : value[item.valueKey || "text"];
+				// debugger
+				if (item.popTypeOther === "cient") {
+					model["identityType"] = value.value;
+				} else {
+					model[item["prop"] + "Value"] = value.value;
+				}
+			} else if (item.popType === "calendar") {
+				if (item["popItemType"] === "range") {
+					const [start, end] = value;
+					model[prop] = `${this.$dayjs(start).format("YYYY-MM")} - ${this.$dayjs(end).format("YYYY-MM")}`;
+				} else if (isEmpty(item["popItemType"])) {
+					model[prop] = this.$dayjs(value).format("YYYY/MM/DD");
+				}
+			} else if (item.popType === "year-month") {
+				model[prop] = `${this.$dayjs(value).format("YYYY-MM")}`;
+			} else {
+				if (item["popItemType"] === "datetime") {
+					this.model[prop] = this.$dayjs(value).format("YYYY-MM-DD HH:mm");
+				} else {
+					this.model[prop] = this.$dayjs(value).format("YYYY-MM-DD");
+				}
+			}
+			this.cellData[index]["showPop"] = false;
+			this.fieldChange(value, item, model, index, this.cellData);
+			// this.$emit('fieldChange', formObj);
+		},
+		showPopView(index, isShow) {
+			this.cellData[index]["showPop"] = false;
+			this.$forceUpdate();
+		},
+        rightBtnClick (model, item, index) {
+            const obj = {
+                model: model,
+                item: item,
+                inD: index
+            };
+			this.$emit("rightBtnClick", obj);
+		},
+		singleTagClick(index, singleTagIdx, model, prop, item) {
+			if (item.readOnly) {
+				if (item.message) {
+					this.$toast(item.message);
+				}
+				return;
+			}
+			const options = item.options || [];
+			if (item.type === "singleMutexTag") {
+				const checkIndex = options.findIndex((single) => single.isChecked);
+				if (singleTagIdx === checkIndex) return;
+			}
+			options.forEach((singleTag, sIndex) => {
+				this.$set(singleTag, "isChecked", sIndex === singleTagIdx ? !singleTag["isChecked"] : false);
+			});
+			const val = options[singleTagIdx]["isChecked"] ? options[singleTagIdx].value : "";
+			model[prop] = val;
+			this.fieldChange(val, item, model, this.cellData, index);
+		},
+		multiTagClick(index, multiTagIdx, model, prop, item) {
+			const options = item.options || [];
+			const checkedArr = options.filter((item) => item.isChecked);
+			if (checkedArr.length >= item.maxCheckedLen && !options[multiTagIdx]["isChecked"]) return;
+			this.$set(options[multiTagIdx], "isChecked", !options[multiTagIdx]["isChecked"]);
+			this.$set(item, "options", options);
+			this.$set(this.cellData, index, item);
+			const val = options[multiTagIdx].value || "";
+			const arr = [];
+			options.map((item) => {
+				if (item.isChecked) {
+					arr.push(item.value);
+				}
+			});
+			this.model[prop] = arr.join();
+			this.fieldChange(val, item, model);
+		},
+		pickerFieldChange(obj) {
+			const { val, item, model, allDataArr } = obj;
+			this.fieldChange(val, item, model, allDataArr);
+		},
+		// filed内容发生改变
+        fieldChange (val, item, model, index) {
+			// 点击相对应的选项的时候，需要更改数据源
+			const formObj = {
+				item,
+				prop: item.prop,
+				val,
+				model,
+				allDataArr: this.cellData,
+				formIdx: this.formIndex,
+				index,
+			};
+			this.$emit("fieldChange", formObj);
+		},
+		afterRead(file, item, model, index) {
+			// 区分单张和多张
+			let uploadList = [];
+			file = Array.isArray(file) ? file : [file];
+			uploadList = file.map((i) => {
+				i.status = "uploading";
+				i.message = this.$t("workorder.uploadfile.224534");
+				console.log(i);
+				return FHCommon.upload({ file: i });
+			});
+			Promise.allSettled(uploadList)
+				.then((res) => {
+					console.log(res);
+					// 回显上传状态
+					file.forEach((i, index) => {
+						i.status = res[index].status === "rejected" ? "failed" : "done";
+						i.message = res[index].status === "rejected" ? this.$t("aqcomponents.offline.u15l63") : this.$t("componentsfile.uploadfile.7b44sh");
+					});
+					const formObj = {
+						item: item,
+						prop: item.prop,
+						val: res.map((item) => item.value),
+						model,
+                        index,
+                        file
+                    };
+					this.$emit("fieldChange", formObj);
+				})
+				.catch((err) => {
+					console.log(err);
+				});
+		},
+		handlePreview(item, file, name, model, index) {
+			const obj = {
+				item,
+				val: file,
+				name,
+				model,
+				domIndex: index,
+				formIdx: this.formIndex,
+			};
+			this.$emit("handlePreview", obj);
+		},
+		// 删除上传的图片
+		deleteFile(item, file, name, model, index) {
+			val.status = "delete";
+			const formObj = {
+				prop: item.prop,
+				val: val,
+				model,
+				index,
+				item,
+			};
+			this.$emit("fieldChange", formObj);
+		},
+		// 选择完银行卡图片
+		fileChanged(result, item, model) {
+			this.$emit("fileChanged", { result: result[0], item, model });
+		},
+		// 输入框失焦事件
+		inputBlur(item, model, index) {
+			if (!item.canBlur) return;
+			this.$emit("inputBlur", { item, model, index });
+		},
+		// 获取焦点
+		fieldFocus(event, item, model) {
+			this.$emit("fieldFocus", { event, item, model });
+		},
+		// 输入框点击事件
+		fieldClick(event, item, index, isShow) {
+			if (item.type === "text" || item.type === "fuzzyMatching") {
+				if (item.readOnly && item.message) {
+					this.$toast(item.message);
+				}
+				this.$emit("fieldClick", { item, index });
+			} else if (item.type === "select" || item.type === "selectDate") {
+				this.cellData[index]["showPop"] = isShow;
+				this.$forceUpdate();
+			} else if (item.type === "link") {
+				if (item.readOnly) {
+					event.preventDefault();
+					event.stopPropagation();
+					return;
+				}
+				this.$emit("fieldClick", { event, item, index, isShow });
+				return;
+			} else if (item.type === "textarea") {
+				if (item.readOnly) {
+					this.$emit("fieldClick", { item, index });
+				}
+			} else {
+				this.$emit("fieldClick", { event, item });
+			}
+		},
+		handleClickFuzzyTwig(twig, index) {
+			const obj = {
+				twig: twig,
+				index: index,
+			};
+			this.$emit("handleClickFuzzyTwig", obj);
+		},
+		leftBtnClick(model, item, index) {
+			const obj = {
+				model: model,
+				item: item,
+				inD: index,
+			};
+			this.$emit("leftBtnClick", obj);
+		},
+	},
+};
+</script>
+
+<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
+<style scoped lang="less">
+#CommonForm {
+	.only_class {
+		.van-stepper {
+			border-radius: 14px;
+			border: 0.5px solid #c8c9cc;
+			overflow: hidden;
+
+			.van-stepper__minus {
+				border-radius: 14px 0px 0px 14px;
+			}
+
+			.van-stepper__plus {
+				border-radius: 0px 14px 14px 0px;
+			}
+
+			/deep/ .van-stepper__input {
+				margin: 0px !important;
+				border-left: 0.5px solid #c8c9cc;
+				border-right: 0.5px solid #c8c9cc;
+				font-weight: 500;
+			}
+
+			.van-stepper__minus::after,
+			.van-stepper__minus::before,
+			.van-stepper__plus::after,
+			.van-stepper__plus::before {
+				transform: translate(-50%, -50%) scale(0.8);
+			}
+		}
+	}
+	.line-feed {
+		display: flex;
+		white-space: normal;
+		.radio-btn,
+		.cient-btn {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			min-width: 60px;
+			border-radius: 14px;
+			line-height: 28px;
+			height: 28px;
+			font-size: 12px;
+			box-sizing: border-box;
+			position: relative;
+			width: max-content;
+			padding: 0 12px;
+		}
+		.radio-btn[disabled] {
+			color: #c8c9cc;
+			pointer-events: none;
+		}
+		.cient-btn[disabled] {
+			pointer-events: none;
+		}
+		.checked-btn {
+			font-weight: 500;
+		}
+	}
+
+	.upload-title {
+		margin-bottom: 14.5px;
+	}
+	.flex-column {
+		.line-feed {
+			width: 100%;
+		}
+	}
+	.checked-btn {
+		border: 0.5px solid;
+	}
+
+	.normal-btn {
+		border: 0.5px solid #c9c9cc;
+		color: #555661;
+	}
+	.right-parting-line {
+		display: block;
+		top: 3px;
+		left: 50%;
+		content: "";
+		width: 1px;
+		height: 16px;
+		background-color: #c8c9cc;
+	}
+	.fuzzy-wrapper {
+		width: 251px;
+		height: 225px;
+		z-index: 9;
+		box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
+		top: 52.5px;
+		right: 0;
+		.single-fuzzy {
+			&:not(:last-of-type) {
+				position: relative;
+				&::after {
+					position: absolute;
+					left: 0;
+					bottom: 0;
+					display: block;
+					content: "";
+					width: calc(100% - 12px);
+					height: 0.5px;
+					background-color: #e8e8e8;
+					border-bottom: 0.5px solid #e8e8e8;
+					pointer-events: none;
+					transform: scaleY(0.5);
+				}
+			}
+		}
+	}
+	.lineHeight-initial {
+		line-height: initial;
+	}
+	.nosee{
+        visibility: hidden;
+    }
+    .phone-num-btn{
+        /deep/ .van-icon-clear{
+            margin-right: 0;
+            padding-right: 0;
+        }
+    }
+    .phone-num{
+        /deep/ .van-icon-clear{
+            position: absolute;
+            right: 12px;
+        }
+    }
+    .area-mobile{
+        /deep/ .phone-num-widget{
+            visibility: hidden;
+            position: absolute;
+        }
+    }
+}   
+</style>