fhrons-mobile-next 2.0.0 → 2.0.2

package/packages/commonForm/CommonDatePicker.vue

@@ -0,0 +1,152 @@
+<!-- 功能：功能描述; 作者：LZJ; 时间：2021年11月10日 11:46:03-->
+<template>
+	<div id="CommonDatePicker">
+		<van-field v-show="item.show !== false" :ref="item['prop']" v-model="model[item['prop']]" :label-class="item.labelClass" :label-width="item.labelWidth" :class="[item.class, underLine ? 'underLine' : '']" class="field-select" :required="item.required" readonly :type="item.displayType || 'textarea'" :rows="item.displayRows || '1'" :autosize="typeof item.autosize === 'function' ? item.autosize() : true" :right-icon="item.readOnly && item.cientshow ? '' : 'arrow'" :label="item.title" :name="item.prop" :rules="item.rule" :placeholder="item.placeholder || $t('financialinfo.carinfo.42bfwl')" :input-align="item.inputAlign || 'right'" @input="fieldChange($event, item, model)" @click="fieldClick($event, item)">
+			<template #label>
+				<span v-if="item.rule && item.rule[0].required" class="c-ff5c5c ft14 line-height21">*</span>
+				<span class="title">{{ item.title }}</span>
+			</template>
+		</van-field>
+		<van-popup v-model="showPop" round position="bottom" :closeable="true" get-container="#app" class="over-hidden ps-f" :item-height="`${48 / 37.5}rem`" :close-icon="'https://dop-pro-1251973116.file.myqcloud.com/upload/img/funzg/icon_zhankailine.png'" :style="{ height: '40%' }">
+			<van-datetime-picker v-model="modelDate" type="date" :confirm-button-text="$t('productcomponents.compareproup.tg417c')" :cancel-button-text="$t('dataenrichcompoentns.basicinfoform.434f5b')" :title="$t('commonform.commondatepicker.3y9tp1')" :min-date="minDate" :max-date="maxDate" :formatter="formatter" @confirm="(value, pIdx) => onConfirm(value, pIdx, index, item, model)" @cancel="showPop = false" />
+		</van-popup>
+	</div>
+</template>
+
+<script>
+import { getTranslateMonth } from "../../assets/vantLang";
+export default {
+	// 组件名称
+	name: "CommonDatePicker",
+	// 局部注册的组件
+	components: {},
+	// 组件参数 接收来自父组件的数据
+	props: {
+		item: {
+			type: Object,
+			default: () => {},
+		},
+		index: {
+			type: Number,
+			default: 0,
+		},
+		model: {
+			type: Object,
+			default: () => {},
+		},
+		cellData: {
+			type: Array,
+			default: () => [],
+		},
+		underLine: {
+			type: Boolean,
+			default: () => false,
+		},
+	},
+	// 组件状态值
+	data() {
+		return {
+			modelDate: new Date(),
+			showPop: false,
+		};
+	},
+	computed: {
+		maxDate() {
+			if (!this.item.maxDate || this.item.maxDate === "current") return new Date();
+			const a = this.item.maxDate;
+			const timeArr = a.split(",");
+			if (timeArr[2]) {
+				return new Date(+timeArr[0], +timeArr[1], +timeArr[2]);
+			}
+			return new Date(+timeArr[0], +timeArr[1]);
+		},
+		minDate() {
+			if (!this.item.minDate) return new Date("1949/12/1");
+			if (this.item.minDate === "current") return new Date();
+			const a = this.item.minDate || "1949,10";
+			const timeArr = a.split(",");
+			if (timeArr[2]) {
+				return new Date(+timeArr[0], +timeArr[1], +timeArr[2]);
+			}
+			return new Date(+timeArr[0], +timeArr[1]);
+		},
+	},
+	// 侦听器
+	watch: {
+		model: {
+			deep: true,
+			immediate: true,
+			handler(val) {
+				const date = val[this.item["prop"]];
+				if (!date) return;
+				const year = date.substring(0, 4);
+				const month = date.substring(5, 7);
+				const day = date.substring(8, 10);
+				this.modelDate = (date && new Date(year, month - 1, day)) || new Date(+new Date().getFullYear() - 28, 10, 1);
+			},
+		},
+		item: {
+			deep: true,
+			immediate: true,
+			handler(val) {},
+		},
+	},
+	methods: {
+		formatter(type, val) {
+			if (type === "year") {
+				return `${val}`;
+			} else if (type === "month") {
+				return getTranslateMonth(val, "simple");
+			} else if (type === "day") {
+				return `${val}`;
+			}
+			return val;
+		},
+		onConfirm(value, pIdx, index, item, model) {
+			const obj = {
+				value,
+				pIdx,
+				index,
+				item,
+				model,
+			};
+			this.showPop = false;
+			this.$emit("onConfirmPicker", obj);
+		},
+		fieldChange(val, item, model, allDataArr = this.cellData) {
+			const obj = {
+				val,
+				item,
+				model,
+				allDataArr,
+			};
+			this.$emit("pickerFieldChange", obj);
+		},
+		fieldClick(event, item) {
+			if (item.readOnly) {
+				event.preventDefault();
+				event.stopPropagation();
+				if (item.message) {
+					this.$toast(item.message);
+				}
+				return;
+			}
+			if (!item.canClick) {
+				this.showPop = true;
+			}
+		},
+	},
+};
+</script>
+
+<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
+<style scoped lang="less">
+.colorgray {
+	.title {
+		color: #c8c9cc !important;
+	}
+	/deep/ .van-field__control {
+		color: #c8c9cc !important;
+	}
+}
+</style>