fhrons-mobile-next 2.0.0 → 2.0.1

package/packages/autoGraph/index.vue

@@ -0,0 +1,472 @@
+<template>
+	<div id="Autograph" class="ps-r">
+		<!-- 横屏 -->
+		<div v-if="showLandscape" class="landscape pd20 border-box resolve-ios">
+			<vue-esign id="myCanvas" ref="esign" class="my-canvas border-radius8 full-content" :width="canvasWidth" :height="canvasHeight" :is-crop="isCrop" :line-width="lineWidth" :line-color="lineColor" :bg-color.sync="bgColor" @getStrokeCount="(val)=>$emit('getStrokeCount',val)">
+				<!-- 全屏按钮 -->
+				<template slot="fullscreen">
+					<button v-show="!imgUrl" class="verticalscape-btn-item ft14" round size="mini" @click.prevent.stop="backClick">
+						<i class="iconfont icon-shuping ft16 c-7f808a"></i>
+						{{ $t("autograph.index.d1ck6g") }}
+					</button>
+				</template>
+				<!-- 遮罩层 -->
+				<template slot="cover">
+					<div v-show="showCover" class="cover ps-a border-radius8 full-content" />
+				</template>
+				<!-- 背景 -->
+				<template slot="background">
+					<div class="ps-a top0 full-content flex-center z-index-1 watermark">
+						<div class="ta-c c-e8e8e8 ft32 line-height36 fw-500">
+							<p class="mg0">{{$t('autograph.index.2spt3x')}}</p>
+							<p class="mg0">{{$t('autograph.index.uc44d7')}}</p>
+						</div>
+					</div>
+				</template>
+			</vue-esign>
+		</div>
+		<!-- 竖屏 -->
+		<div v-else>
+			<!--  content-width -->
+			<vue-esign id="myCanvas" ref="esign" class="mtb20 border-radius8" :class="[esignClass]" :width="width" :height="height ? height : width / ratio" :is-crop="isCrop" :line-width="lineWidth" :line-color="lineColor" :bg-color.sync="bgColor" @getStrokeCount="(val)=>$emit('getStrokeCount',val)">
+				<!-- 全屏按钮 -->
+				<template v-if="fullscreen" slot="fullscreen">
+					<button v-show="!imgUrl" class="landscape-btn-item ft14" round size="mini" @click.prevent.stop="landspaceClick">
+						{{ $t("team.vueorg.25kc2t") }}
+						<i class="iconfont icon-hengping ft16 c-7f808a"></i>
+					</button>
+				</template>
+				<!-- 遮罩层 -->
+				<template slot="cover">
+					<div v-show="showCover" class="cover ps-a border-radius8 full-content" />
+				</template>
+				<!-- 背景 -->
+				<template v-if="showBgText" slot="background">
+					<div class="ps-a top0 full-content flex-center z-index-1">
+						<div class="ta-c c-e8e8e8 ft24 line-height36 fw-500">
+							<p v-if="bgText" class="mg0">{{ bgText }}</p>
+							<div>
+								<p class="mg0">{{$t('autograph.index.2spt3x')}}</p>
+								<p class="mg0">{{$t('autograph.index.uc44d7')}}</p>
+							</div>
+						</div>
+					</div>
+				</template>
+				<!-- 回显图 -->
+				<template slot="backView">
+					<img v-if="judgeEmpty(imgUrl)" class="cover ps-a border-radius8 full-content" :src="imgUrl" alt="" />
+				</template>
+			</vue-esign>
+		</div>
+		<!-- 按钮组 -->
+		<div class="btn-list flex-center-end" :class="showLandscape ? 'btn-landscape' : ''">
+			<van-button v-if="showLandscape" class="btn-item" :disabled="backBtnDisabled" round size="mini" @click="backClick">{{ backText }}</van-button>
+			<van-button class="btn-item" round size="mini" :disabled="resetBtnDisabled" @click="handleReset">{{ resetText }}</van-button>
+			<van-button class="btn-item fw-500" round :color="originColor ? '#158CFF' : ''" :loading="judgeEmpty(loadingText) && showLandscape" type="info" :disabled="confirmBtnDisabled" size="mini" :loading-text="loadingText" @click="handleGenerate">{{ confirmText }}</van-button>
+		</div>
+	</div>
+</template>
+
+<script>
+import { dataURLtoFile, getRootFontSize, notEmpty } from "../../assets/js/func";
+// import upload, { compressFile } from "../../assets/js/upload";
+import vueEsign from "./VueEsign.vue";
+export default {
+	// 组件名称
+	name: "AutoGraph",
+	components: { vueEsign },
+	// 组件参数 接收来自父组件的数据
+	props: {
+		imgUrl: {
+			// 需要回显图片时的图片地址
+			type: String,
+			default: () => "",
+		},
+		originColor: {
+			// 确认按钮是否使用默认的蓝色
+			type: Boolean,
+			default: false,
+		},
+		width: {
+			type: Number,
+			default: 800,
+		},
+		height: {
+			type: Number,
+			default: 300,
+		},
+		ratio: {
+			type: Number,
+			default: 16 / 9,
+		},
+		confirmText: {
+			type: String,
+			default: function () {
+				return this.$t("productcomponents.compareproup.tg417c");
+			},
+		},
+		resetText: {
+			type: String,
+			default: function () {
+				return this.$t("database.database.5t6384");
+			},
+		},
+		backText: {
+			type: String,
+			default: function () {
+				return this.$t("orderfind.creatfind.3ss7pp");
+			},
+		},
+		fullscreen: {
+			type: Boolean,
+			default: function () {
+				return true;
+			},
+		},
+		showBgText: {
+			type: Boolean,
+			default: function () {
+				return true;
+			},
+		},
+		bgText: {
+			type: String,
+			default: () => "",
+		},
+	},
+	// 组件状态值
+	data() {
+		return {
+			rem: getRootFontSize(),
+			lineWidth: 3,
+			lineColor: "#000000",
+			bgColor: "rgba(0,0,0,0)",
+			resultImg: "",
+			isCrop: false,
+			confirmBtnDisabled: true,
+			backBtnDisabled: false,
+			resetBtnDisabled: false,
+			showWaterMark: true, //  是否展示水印
+			showCover: false,
+			// 横屏
+			showLandscape: false,
+			loadingText: "",
+			canvasWidth: 286,
+			canvasHeight: 619,
+			screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
+			screenHeight: document.documentElement.clientHeight || document.body.clientHeight,
+			isTranslateImg: false,
+			eventName: "touchstart",
+			esignClass: "",
+		};
+	},
+	// 侦听器
+	watch: {
+		imgUrl: {
+			handler(newVal, oldVal) {
+				if (newVal) {
+					this.showCover = true;
+					this.landscapeBtnDisabled = true;
+				}
+			},
+		},
+		screenWidth(val) {
+			this.canvasWidth = parseInt(val) - (89 / 37.5) * this.rem;
+		},
+		screenHeight(val) {
+			this.canvasHeight = parseInt(val) - (48 / 37.5) * this.rem;
+		},
+	},
+	mounted() {
+		this.eventName = this.$globalData.isWeb() ? "mousedown" : "touchstart";
+		this.addEvent(this.eventName);
+
+		// 计算已渲染的签名区域的宽度
+		this.esignClass = this.$refs.esign.$el.clientWidth > this.width ? "content-width" : "";
+	},
+	beforeDestroy() {
+		window.removeEventListener(this.eventName, this.resetMarkClick);
+	},
+	// 组件方法
+	methods: {
+		addEvent(eventName) {
+			this.$refs.esign.$el.addEventListener(eventName, this.resetMarkClick);
+		},
+		judgeEmpty(val) {
+			return notEmpty(val);
+		},
+		resetMarkClick() {
+			if (this.showCover) return;
+			// debugger
+			this.setStatus(false);
+		},
+		setStatus(status) {
+			this.showWaterMark = status;
+			this.confirmBtnDisabled = status;
+		},
+		// 点击返回
+		backClick() {
+			this.showLandscape = false;
+			this.setStatus(true);
+			this.$nextTick(() => {
+				this.$refs.esign.$el.addEventListener(this.eventName, this.resetMarkClick);
+			});
+			this.showCover = notEmpty(this.imgUrl);
+			if (notEmpty(this.imgUrl)) {
+				this.isTranslateImg = true;
+			}
+		},
+		// 点击此处签名
+		markClick() {
+			this.showWaterMark = false;
+		},
+		handleReset() {
+			if (this.$refs.esign) {
+				this.$refs.esign.reset();
+			}
+			this.isTranslateImg = false;
+			this.showWaterMark = true;
+			this.confirmBtnDisabled = true;
+			this.showCover = false;
+			this.$emit("handleSignImgUrl", "", "reset");
+		},
+		handleGenerate() {
+			this.$loading(this.$t("commonpage.autograph.idx683"));
+			this.$refs.esign
+				.generate()
+				.then(async (res) => {
+					if (this.showLandscape) res = await this.rotateBase64Img(res, -90);
+					const blob = dataURLtoFile(res);
+					let file = new window.File([blob], `${new Date().valueOf()}.jpg`, {
+						type: blob.type,
+					});
+					file = await FHCommon.compressFile(file);
+					// this.$loading('上传图片中...');
+					this.loadingText = this.$t("aqcomponents.copyimage.6v3rh2");
+					this.setBtnDisabledStatus(true);
+					// return;
+					try {
+						const data = await FHCommon.upload({ file });
+						console.log(axios.interceptors.request);
+						console.log(data);
+						// 上传成功
+						this.$loading(false);
+						this.loadingText = "";
+						this.confirmBtnDisabled = true;
+						this.showCover = true;
+						this.setBtnDisabledStatus(false);
+						// 提交图片到父页面
+						this.$emit("handleSignImgUrl", data, "handle");
+					} catch (err) {
+						this.setBtnDisabledStatus(false);
+						this.confirmBtnDisabled = false;
+						this.$loading(false);
+						this.loadingText = "";
+						this.$toast(this.$t('autograph.index.2lkog6'));
+					}
+				})
+				.catch((err) => {
+					this.$loading(false);
+					this.$toast(err); // 画布没有签字时会执行这里 'Not Signned'
+				});
+		},
+		landspaceClick() {
+			this.showLandscape = true;
+			this.showCover = false;
+			this.canvasWidth = parseInt(this.screenWidth - 56 - 20); // 横屏的签名区域宽度是设备宽度减去左右padding
+			this.canvasHeight = parseInt(this.screenHeight - 20 * 2); // 横屏高度等于设备高度减去上下padding
+			this.setStatus(true);
+			this.showWaterMark = false;
+			this.$nextTick(() => {
+				this.$refs.esign.$el.addEventListener(this.eventName, this.resetMarkClick);
+			});
+		},
+		setBtnDisabledStatus(status) {
+			this.resetBtnDisabled = status;
+			this.backBtnDisabled = status;
+		},
+		rotateBase64Img(src, edg) {
+			return new Promise((resolve, reject) => {
+				const canvas = document.createElement("canvas");
+				const ctx = canvas.getContext("2d");
+
+				let imgW; // 图片宽度
+				let imgH; // 图片高度
+				let size; // canvas初始大小
+
+				if (edg % 90 !== 0) {
+					console.error(this.$t("commonpage.autograph.06tb77"));
+					throw this.$t("commonpage.autograph.06tb77");
+				}
+				edg < 0 && (edg = (edg % 360) + 360);
+				const quadrant = (edg / 90) % 4; // 旋转象限
+				const cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 }; // 裁剪坐标
+
+				const image = new Image();
+				image.crossOrigin = "anonymous";
+				image.src = src;
+
+				image.onload = function () {
+					imgW = image.width;
+					imgH = image.height;
+					size = imgW > imgH ? imgW : imgH;
+
+					canvas.width = size * 2;
+					canvas.height = size * 2;
+					switch (quadrant) {
+						case 0:
+							cutCoor.sx = size;
+							cutCoor.sy = size;
+							cutCoor.ex = size + imgW;
+							cutCoor.ey = size + imgH;
+							break;
+						case 1:
+							cutCoor.sx = size - imgH;
+							cutCoor.sy = size;
+							cutCoor.ex = size;
+							cutCoor.ey = size + imgW;
+							break;
+						case 2:
+							cutCoor.sx = size - imgW;
+							cutCoor.sy = size - imgH;
+							cutCoor.ex = size;
+							cutCoor.ey = size;
+							break;
+						case 3:
+							cutCoor.sx = size;
+							cutCoor.sy = size - imgW;
+							cutCoor.ex = size + imgH;
+							cutCoor.ey = size + imgW;
+							break;
+					}
+
+					ctx.translate(size, size);
+					ctx.rotate((edg * Math.PI) / 180);
+					ctx.drawImage(image, 0, 0);
+
+					const imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
+					if (quadrant % 2 === 0) {
+						canvas.width = imgW;
+						canvas.height = imgH;
+					} else {
+						canvas.width = imgH;
+						canvas.height = imgW;
+					}
+					ctx.putImageData(imgData, 0, 0);
+					resolve(canvas.toDataURL());
+				};
+			});
+		},
+	},
+};
+</script>
+<style scoped lang="less">
+#Autograph {
+	.btn-list {
+		.btn-item {
+			min-width: 68px;
+			height: 24px;
+			margin-left: 0.3rem;
+		}
+	}
+
+	// 签名区域
+	#myCanvas {
+		display: block;
+		box-sizing: border-box;
+		background-color: transparent;
+		z-index: 2;
+	}
+
+	.watermark {
+		transform: rotate(90deg);
+	}
+
+	.cover {
+		left: 0;
+		top: 0;
+		background-color: rgba(224, 224, 224, 0.5);
+	}
+
+	.landscape-btn-item {
+		font-size: 14px;
+		line-height: 20px;
+		position: absolute;
+		right: 12px;
+		top: 17px;
+		z-index: 5;
+		background: transparent;
+	}
+
+	.verticalscape-btn-item {
+		position: absolute;
+		font-size: 14px;
+		transform: rotate(90deg);
+		bottom: 24px;
+		right: -8px;
+	}
+
+	.hengping-icon {
+		width: 16px;
+		height: 16px;
+		position: relative;
+		top: -2px;
+		margin-left: 5px;
+	}
+
+	.landscape {
+		position: fixed;
+		width: 100vw;
+		height: 100vh;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 9999;
+		background: #fff;
+		padding-left: 56px;
+	}
+
+	.resolve-ios {
+		-webkit-transform: translateZ(1px);
+		-moz-transform: translateZ(1px);
+		-o-transform: translateZ(1px);
+		transform: translateZ(1px);
+	}
+
+	.my-canvas {
+		margin-left: 0;
+	}
+
+	// .landscape .cover {
+	//     margin-left: 49px + 20px;
+	//     margin-top: 20px;
+	// }
+
+	.btn-landscape,
+	.mark-landscape {
+		position: fixed;
+		left: -80px;
+		z-index: 99999;
+		bottom: 133px;
+		-webkit-transform: translateZ(1px) rotate(90deg);
+		-moz-transform: translateZ(1px) rotate(90deg);
+		-o-transform: translateZ(1px) rotate(90deg);
+		transform: translateZ(1px) rotate(90deg);
+	}
+
+	.mark-landscape {
+		transform: rotate(90deg);
+		top: calc(50% - 0.4rem);
+		left: 0px !important;
+		transform-origin: calc(100vw - 40px) 20px;
+		width: calc(100vh - 40px) !important;
+		height: 2.4rem;
+		line-height: 2.4rem;
+	}
+
+	.border-radius8 {
+		border-radius: 8px;
+	}
+}
+</style>

package/packages/commonForm/CommonAsyncAreaPicker.vue

@@ -0,0 +1,223 @@
+<!-- 功能：功能描述; 作者：LZJ; 时间：2021年11月11日 20:39:12-->
+<template>
+	<div id="CommonAsyncAreaPicker">
+		<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' : '']" :input-align="item.inputAlign || 'right'" 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.rightIcon ? item.rightIcon : 'arrow'" :label="item.title" :name="item.prop" :rules="item.rule" :value="value" :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-picker :value-key="addressValueKey" show-toolbar :confirm-button-text="$t('productcomponents.compareproup.tg417c')" :cancel-button-text="$t('dataenrichcompoentns.basicinfoform.434f5b')" :title="item.pickerTitle" :columns="addressSlots" @change="onAddressChange" @confirm="(value, pIdx) => onConfirm(value, pIdx, index, item, model)" @cancel="showPop = false" />
+		</van-popup>
+	</div>
+</template>
+
+<script>
+export default {
+	// 组件名称
+	name: "CommonAsyncAreaPicker",
+	// 局部注册的组件
+	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 {
+			addressValueKey: "areaName",
+			// addressSlots: [],
+			value: "",
+			showPop: false,
+			currentCode: "",
+			provinces: [],
+			cities: [],
+			countries: [],
+			provinceIndex: 0,
+			cityIndex: 0,
+			countryIndex: 0,
+			loaded: false,
+		};
+	},
+	computed: {
+		provinceCity() {
+			const { province = "", city = "", country = "", district = "" } = this.model;
+			return { province, city, country: country || district };
+		},
+		/**
+		 * // deepLevel由数据源带出，表示选择的省市区级别，目前有三个级别
+		 * 1、只选省级
+		 * 2、只选省市级
+		 * 3、全部选择，包括省市区三级
+		 */
+		deepLevel() {
+			return this.item.deepLevel;
+		},
+		addressSlots() {
+			const result = [
+				{
+					values: this.provinces,
+					className: "slot1",
+					textAlign: "center",
+					defaultIndex: this.provinceIndex || 0,
+				},
+			];
+			if (this.deepLevel > 1) {
+				result.push({
+					values: this.cities,
+					className: "slot2",
+					textAlign: "center",
+					defaultIndex: this.cityIndex || 0,
+				});
+				if (this.deepLevel > 2) {
+					result.push({
+						values: this.countries,
+						className: "slot3",
+						textAlign: "center",
+						defaultIndex: this.countryIndex || 0,
+					});
+				}
+			}
+			return result;
+		},
+	},
+	watch: {
+		provinceCity: {
+			handler(newVal, oldVal) {
+				if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) this.getDefaultData(newVal);
+			},
+			deep: true,
+			immediate: true,
+		},
+	},
+	methods: {
+		// 分级查询省市
+		queryAsyncArea(params, dynamicSaaS) {
+			if (dynamicSaaS) {
+				return axios.post(`/funapi/user/V1/queryExhibitionArea`, { saasId: dynamicSaaS });
+			}
+			return axios.get(`/funapi/config/sysArea/list/${params}`);
+		},
+		async getDefaultData(model) {
+			const { dynamicSaaS } = this.item;
+			this.loaded = "loading";
+			let { province = "", city = "", country = "" } = model;
+			let cbParam = {};
+			const value = [];
+			const pIdx = [];
+			try {
+				const provinces = (this.provinces = await this.queryAsyncArea("0", dynamicSaaS));
+				this.provinceIndex = provinces.findIndex((pvc) => pvc.areaCode === province);
+				value.push(provinces[this.provinceIndex]);
+				pIdx.push(this.provinceIndex);
+				if (this.deepLevel > 1) {
+					province = province || provinces[0].areaCode;
+					const cities = (this.cities = await this.queryAsyncArea(province));
+					this.cityIndex = cities.findIndex((ct) => ct.areaCode === city);
+					value.push(cities[this.cityIndex]);
+					pIdx.push(this.cityIndex);
+					if (this.deepLevel > 2) {
+						city = city || cities[0].areaCode;
+						const countries = (this.countries = await this.queryAsyncArea(city));
+						this.countryIndex = countries.findIndex((cty) => cty.areaCode === country);
+						value.push(countries[this.countryIndex]);
+						pIdx.push(this.countryIndex);
+					} else {
+						this.loaded = true;
+					}
+				} else {
+					this.loaded = true;
+				}
+				cbParam = Object.assign(cbParam, {
+					value,
+					pIdx,
+					index: this.index,
+					item: this.item,
+					model: this.model,
+				});
+				// 如果省级数据都没有就不触发onConfirmPicker了
+				if (value[0]) this.$emit("onConfirmPicker", cbParam);
+			} catch (err) {
+				console.log(err);
+			}
+		},
+		onConfirm(value, pIdx, index, item, model) {
+			const obj = {
+				value,
+				pIdx,
+				index,
+				item,
+				model,
+			};
+			// 异地增员选中不可选地区时做出拦截
+			const noSelectVal = value.find((val) => val["noSelect"] === "1");
+			if (noSelectVal) {
+				this.$toast(this.$t("commonform.commonasyncareapicker.ws0srk"));
+				return;
+			}
+			this.value = value;
+			this.showPop = false;
+			this.$emit("onConfirmPicker", obj);
+		},
+		// 选择地址的时候
+		onAddressChange(picker, values, index) {
+			const targetCode = values[index].areaCode; // 省级编码
+			if (index === 0) {
+				this.queryAsyncArea(targetCode).then((res) => {
+					picker.setColumnValues(index + 1, res);
+					if (index + 1 < this.deepLevel) {
+						this.queryAsyncArea(res[0].areaCode).then((res1) => {
+							picker.setColumnValues(index + 2, res1);
+						});
+					}
+				});
+			}
+			if (index === 1) {
+				this.queryAsyncArea(targetCode).then((res1) => {
+					picker.setColumnValues(index + 1, res1);
+				});
+			}
+		},
+		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>