fhrons-mobile-next 2.0.0 → 2.0.2

package/packages/commonForm/CommonFullTimePicker.vue

@@ -0,0 +1,137 @@
+<!-- 功能：全时间组件;  时间：2021年11月10日 11:46:03-->
+<template>
+	<div id="CommonFullTimePicker">
+		<van-field v-show="item.show !== false" :ref="item['prop']" v-model="model[item['prop']]" :label-class="item.labelClass" :label-width="item.labelWidth" :input-align="item.inputAlign || 'right'" :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 ? '' : 'arrow'" :label="item.title" :name="item.prop" :rules="item.rule" :placeholder="item.placeholder || $t('financialinfo.carinfo.42bfwl')" @input="fieldChange($event, item, model)" @click="clickEvent($event, item)">
+			<template #label>
+				<span v-if="item.rule && item.rule[0].required" class="c-ff5c5c ft14 line-height21">*</span>
+				<span>{{ 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="datetime" :title="$t('commonform.commondatepicker.3y9tp1')" :confirm-button-text="$t('productcomponents.compareproup.tg417c')" :cancel-button-text="$t('dataenrichcompoentns.basicinfoform.434f5b')" :min-date="minDate" :max-date="maxDate" :filter="filter" :formatter="formatter" @confirm="(value, pIdx) => onConfirm(value, pIdx, index, item)" @cancel="showPop = false" />
+		</van-popup>
+	</div>
+</template>
+
+<script>
+import { getTranslateMonth } from "../../assets/vantLang";
+export default {
+	// 组件名称
+	name: "CommonFullTimePicker",
+	// 组件参数 接收来自父组件的数据
+	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) return new Date(new Date().getTime() + 31536000000 * 5);
+			if (this.item?.maxDate === "current") return new Date();
+			const timeArr = this.item.maxDate.split(",");
+			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 subTime = new Date(this.item?.minDate);
+			if (subTime) {
+				return subTime;
+			}
+			const a = this.item?.minDate || "1990,10";
+			const timeArr = a.split(",");
+			return new Date(+timeArr[0], +timeArr[1]);
+		},
+	},
+	// 侦听器
+	watch: {
+		item: {
+			deep: true,
+			immediate: true,
+			handler(val) {
+				const date = val[this.model["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);
+			},
+		},
+	},
+	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);
+		},
+		clickEvent(e, item) {
+			if (item.readOnly) {
+				e.preventDefault();
+				e.stopPropagation();
+				return;
+			}
+			this.showPop = true;
+		},
+		filter(type, options) {
+			const { filterUnit = null } = this.item;
+			if (filterUnit && type === "minute") {
+				options = options.filter((option, index) => option % filterUnit === 0);
+				return options;
+			}
+			return options;
+		},
+	},
+};
+</script>
+
+<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
+<style scoped lang="less"></style>

package/packages/commonForm/CommonSinglePicker.vue

@@ -0,0 +1,121 @@
+<!-- 功能：单选项; 作者：LZJ; 时间：2021年11月10日 11:46:03-->
+<template>
+    <div id="CommonSinglePicker">
+        <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 ? '' : 'arrow'"
+            :label="item.title"
+            :name="item.prop"
+            :rules="item.rule"
+            :input-align="item.inputAlign||'right'"
+            :placeholder="item.placeholder || $t('financialinfo.carinfo.42bfwl')"
+            @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>{{ 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-picker
+                v-if="item.popType === 'picker'"
+                :confirm-button-text="$t('productcomponents.compareproup.tg417c')"
+                :cancel-button-text="$t('dataenrichcompoentns.basicinfoform.434f5b')"
+                show-toolbar
+                :value-key="item.valueKey"
+                :default-index="item.default"
+                :title="item.pickerTitle"
+                :columns="item.options"
+                @confirm="(value, pIdx) => onConfirm(value, pIdx, index, item, model)"
+                @cancel="showPop = false"
+            />
+        </van-popup>
+    </div>
+</template>
+
+<script>
+export default {
+    // 组件名称
+    name: 'CommonSinglePicker',
+    // 组件参数 接收来自父组件的数据
+    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 {
+            showPop: false
+        };
+    },
+    // 侦听器
+    watch: {
+        model: {
+            deep: true,
+            immediate: true,
+            handler(val) {}
+        },
+        item: {
+            deep: true,
+            immediate: true,
+            handler(val) {}
+        }
+    },
+    methods: {
+        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) return;
+            this.showPop = true;
+        }
+    }
+};
+</script>

package/packages/commonForm/CommonYearMonthPicker.vue

@@ -0,0 +1,127 @@
+<!-- 功能：功能描述; 作者：LZJ; 时间：2021年11月10日 11:46:03-->
+<template>
+	<div id="CommonYearMonthPicker">
+		<van-field v-show="item.show !== false" :ref="item['prop']" v-model="model[item['prop']]" :label-class="item.labelClass" :label-width="item.labelWidth" :input-align="item.inputAlign || 'right'" :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 ? '' : 'arrow'" :label="item.title" :name="item.prop" :rules="item.rule" :placeholder="item.placeholder || $t('financialinfo.carinfo.42bfwl')" @input="fieldChange($event, item, model)" @click="clickEvent($event, item)">
+			<template #label>
+				<span v-if="item.rule && item.rule[0].required" class="c-ff5c5c ft14 line-height21">*</span>
+				<span>{{ 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="year-month" :confirm-button-text="$t('productcomponents.compareproup.tg417c')" :cancel-button-text="$t('dataenrichcompoentns.basicinfoform.434f5b')" :title="$t('policypages.myteam.lm1c7u')" :min-date="minDate" :max-date="maxDate" :columns-order="['year', 'month']" :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: "CommonYearMonthPicker",
+	// 组件参数 接收来自父组件的数据
+	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 === "current") return new Date();
+			const timeArr = this.item.maxDate.split(",");
+			return new Date(+timeArr[0], +timeArr[1]);
+		},
+		minDate() {
+			if (this.item.minDate === "current") return new Date();
+			const a = this.item.minDate || "1990,10";
+			const timeArr = a.split(",");
+			return new Date(+timeArr[0], +timeArr[1]);
+		},
+	},
+	// 侦听器
+	watch: {
+		model: {
+			deep: true,
+			immediate: true,
+			handler(val) {
+				const currentDate = val[val.valProp];
+				if (!currentDate) return;
+				const currentYear = currentDate.getFullYear();
+				const currentMonth = currentDate.getMonth() - 1;
+				this.modelDate = new Date(currentYear, currentMonth);
+
+				const date = val[this.item["prop"]];
+				const year = date.substring(0, 4);
+				const month = date.substring(5, 7);
+				this.modelDate = new Date(year, month - 1);
+			},
+		},
+	},
+	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);
+		},
+		clickEvent(e, item) {
+			if (item.readOnly) {
+				e.preventDefault();
+				e.stopPropagation();
+				return;
+			}
+			this.showPop = true;
+		},
+	},
+};
+</script>
+
+<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
+<style scoped lang="less"></style>

package/packages/commonForm/index.js

@@ -0,0 +1,33 @@
+import CommonForm from './CommonForm.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';
+CommonForm.install = (Vue) => {
+    Vue.component(CommonForm.name, CommonForm);
+};
+CommonAsyncAreaPicker.install = (Vue) => {
+    Vue.component(CommonAsyncAreaPicker.name, CommonAsyncAreaPicker);
+};
+CommonDatePicker.install = (Vue) => {
+    Vue.component(CommonDatePicker.name, CommonDatePicker);
+};
+CommonFullTimePicker.install = (Vue) => {
+    Vue.component(CommonFullTimePicker.name, CommonFullTimePicker);
+};
+CommonSinglePicker.install = (Vue) => {
+    Vue.component(CommonSinglePicker.name, CommonSinglePicker);
+};
+CommonYearMonthPicker.install = (Vue) => {
+    Vue.component(CommonYearMonthPicker.name, CommonYearMonthPicker);
+};
+export default CommonForm;
+
+export {
+    CommonAsyncAreaPicker,
+    CommonDatePicker,
+    CommonFullTimePicker,
+    CommonSinglePicker,
+    CommonYearMonthPicker
+}

package/packages/dialog/index.js

@@ -0,0 +1,32 @@
+import Dialog from './index.vue';
+const DialogPlguin = Vue.extend(Dialog);
+const confirm = (options) => {
+    const ReConfirmDom = document.getElementById('CommonCustomDialog');
+    if (ReConfirmDom) {
+        ReConfirmDom.remove();
+    }
+    return new Promise((resolve, reject) => {
+        const confirmDom = new DialogPlguin().$mount();
+        confirmDom.content = {
+            ...options // 传入的
+        };
+        confirmDom.btn1Click = options.btn1Click;
+        confirmDom.btn2Click = options.btn2Click;
+        confirmDom.changeTypeClick = options.changeTypeClick;
+        confirmDom.forkBtnClick = options.forkBtnClick;
+        document.getElementById('app').appendChild(confirmDom.$el);
+        confirmDom.submit = () => {
+            resolve();
+            confirmDom.showDialog = false;
+        };
+        confirmDom.cancle = () => {
+            reject();
+            confirmDom.showDialog = false;
+        };
+    });
+};
+export default {
+    install (Vue) {
+        Vue.prototype.$dialog = confirm;
+    }
+};