Prechádzať zdrojové kódy

流程提交二次确认、日期时间选择控件针对选完后华为会返回上一页的问题进行优化

ouyj 1 mesiac pred
rodič
commit
300235a46e

+ 1 - 0
components/processForms/contract-form.vue

@@ -428,6 +428,7 @@
                   type="date"
                   placeholder="选择付款时间"
                   style="display: inline-block;"
+                  @click.native.stop
                   @change="(e) => onPayTimeChange(item, e)"
               />
               <text v-if="!isSeModel" class="detail-value">{{ item.payTime || '-' }}</text>

+ 3 - 1
pages/mine/edit/edit.vue

@@ -29,7 +29,7 @@
 		<view class="input-group">
 			<text class="title">用户生日:</text>
 			<view class="example-body">
-				<uni-datetime-picker type="date" :clear-icon="false" v-model="userInfo.birthday" @maskClick="maskClick" />
+				<uni-datetime-picker type="date" :clear-icon="false" v-model="userInfo.birthday" @maskClick="maskClick" @click.native.stop />
 			</view>
 		</view>
 		
@@ -196,6 +196,8 @@
 	::v-deep .uni-calendar__content {
 		margin: -20px;
 		margin-top: 20px;
+		// 防止鸿蒙系统上日期选择器误触发返回
+		pointer-events: auto;
 		.uni-calendar__header {
 			.uni-calendar__header-text {
 				font-size: calc(14px + .5*(1rem - 16px)) !important;

+ 11 - 3
pages/process/detail/index.vue

@@ -68,19 +68,25 @@
 										@change="changeDataCheckBox($event,elem)"></uni-data-checkbox>
 									<!-- 开始时间选择器 -->
 									<uni-datetime-picker :end="formElements[elem.endElemIndex].defaultValue"
+										@click.native.stop
 										@change="setTimeRange(elem)"
 										v-else-if="'9' == elem.type && undefined != elem.endElemIndex"
 										v-model="elem.defaultValue" :clear-icon="false" type="datetime" />
 									<!-- 结束时间选择器 -->
 									<uni-datetime-picker :start="formElements[elem.startElemIndex].defaultValue"
+										@click.native.stop
 										@change="setTimeRange(elem)"
 										v-else-if="'9' == elem.type && undefined != elem.startElemIndex"
 										v-model="elem.defaultValue" :clear-icon="false" type="datetime" />
 									<!-- 年月日 时分秒 -->
-									<uni-datetime-picker v-else-if="'9' == elem.type" v-model="elem.defaultValue"
+									<uni-datetime-picker v-else-if="'9' == elem.type" 
+										@click.native.stop
+										v-model="elem.defaultValue"
 										type="datetime" />
 									<!-- 年月日 -->
-									<uni-datetime-picker v-else-if="'3' == elem.type" v-model="elem.defaultValue"
+									<uni-datetime-picker v-else-if="'3' == elem.type" 
+										@click.native.stop
+										v-model="elem.defaultValue"
 										type="date" />
 									<!-- 审批签字板 -->
 									<view v-else-if="'13' == elem.type">
@@ -1617,7 +1623,9 @@
 	::v-deep .uni-calendar__content {
 		margin: -20px;
 		margin-top: 20px;
-
+		// 防止鸿蒙系统上日期选择器误触发返回
+		pointer-events: auto;
+	
 		.uni-calendar__header {
 			.uni-calendar__header-text {
 				font-size: calc(14px + .5*(1rem - 16px)) !important;

+ 1 - 1
pages/process/index.vue

@@ -35,7 +35,7 @@
 					<!-- 时间范围搜索 -->
 					<uni-col v-else-if="2 == searchItem" :xs="16" :sm="18">
 						<view class="datetime_picker_container">
-							<uni-datetime-picker type="daterange" @change="datetimePickerChange" @clear="cancelSearch"
+							<uni-datetime-picker type="daterange" @click.native.stop @change="datetimePickerChange" @clear="cancelSearch"
 								:border="false" />
 						</view>
 					</uni-col>

+ 1 - 1
pages/tabbar-process/index.vue

@@ -35,7 +35,7 @@
 					<!-- 时间范围搜索 -->
 					<uni-col v-else-if="2 == searchItem" :xs="16" :sm="18">
 						<view class="datetime_picker_container">
-							<uni-datetime-picker type="daterange" @change="datetimePickerChange" @clear="cancelSearch"
+							<uni-datetime-picker type="daterange" @click.native.stop @change="datetimePickerChange" @clear="cancelSearch"
 								:border="false" />
 						</view>
 					</uni-col>

+ 1 - 0
pages/work/contract/start.vue

@@ -210,6 +210,7 @@
                   type="date"
                   placeholder="选择付款时间"
                   style="display: inline-block;"
+                  @click.native.stop
                   @confirm="(e) => onPayTimeConfirm(item, e)"
               />
             </view>

+ 38 - 17
pages/work/edit/index.vue

@@ -67,24 +67,30 @@
 							<!-- 开始时间选择器 -->
 							<uni-datetime-picker :end="formElements[elem.endElemIndex].defaultValue"
 								@change="setTimeRange(elem)"
+								@click.native.stop
 								v-else-if="'9' == elem.type && undefined != elem.endElemIndex"
 								v-model="elem.defaultValue" :clear-icon="false" type="datetime" />
 							<!-- 结束时间选择器 -->
 							<uni-datetime-picker :start="formElements[elem.startElemIndex].defaultValue"
 								@change="setTimeRange(elem)"
+								@click.native.stop
 								v-else-if="'9' == elem.type && undefined != elem.startElemIndex"
 								v-model="elem.defaultValue" :clear-icon="false" type="datetime" />
 							<!-- 其他时间选择器 -->
 							<!-- 年月日 时分秒 -->
 							<uni-datetime-picker v-else-if="'9' == elem.type && BUKA_MODELID != processInfo.modelId"
+								@click.native.stop
 								v-model="elem.defaultValue" type="datetime" />
 							<!-- 补卡流程专用 -->
 							<uni-datetime-picker v-else-if="'9' == elem.type && BUKA_MODELID == processInfo.modelId"
+								@click.native.stop
 								v-model="elem.defaultValue" type="datetime"
 								:start="`${formElements[0].defaultValue} 00:00:00`"
 								:end="`${formElements[0].defaultValue} 23:59:59`" @change="bukaTimeChange" />
 							<!-- 年月日 -->
-							<uni-datetime-picker v-else-if="'3' == elem.type" v-model="elem.defaultValue" type="date" />
+							<uni-datetime-picker v-else-if="'3' == elem.type" 
+								@click.native.stop
+								v-model="elem.defaultValue" type="date" />
 							<!-- 签名 -->
 							<view v-else-if="'13' == elem.type">
 								<view v-if="elem.defaultValue == ''">
@@ -190,8 +196,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, computed, nextTick } from 'vue'
-import { onLoad } from '@dcloudio/uni-app'
+import { onMounted, reactive, ref, computed, nextTick, onUnmounted } from 'vue'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
 import { useUserStore } from '@/store/user.js'
 import $modal from '@/plugins/modal.js'
 import $tab from '@/plugins/tab.js'
@@ -228,6 +234,10 @@ const bukaObj = ref({
 	bukaType: '',
 	bukaTime: ''
 })
+
+// 防止时间选择器误触发返回
+const isDatePickerShowing = ref(false)
+
 onLoad((options) => {
 	const { modelName, modelId, control, bukaDate, bukaType } = options
 	processInfo.modelName = modelName
@@ -912,21 +922,30 @@ function submitProcess() { // 提交表单
 			$modal.msgError('请上传附件')
 			return
 		}
-		submitProcessForm(userStore.user, processInfo, seqs).then(res => {
-			if (res.returnMsg.includes('提交失败')) {
-				// 启用提交按钮
+		
+		// 二次确认
+		$modal.confirm('', '确认提交该流程?')
+			.then(() => {
+				submitProcessForm(userStore.user, processInfo, seqs).then(res => {
+					if (res.returnMsg.includes('提交失败')) {
+						// 启用提交按钮
+						button_state.value = true
+						$modal.msgError(res.returnMsg)
+					} else {
+						$modal.msgSuccess(res.returnMsg)
+						// 通知列表刷新数据
+						uni.$emit('ReloadProcessData');
+						setTimeout(() => {
+							// 返回上一页
+							$tab.navigateBack();
+						}, 1000)
+					}
+				})
+			})
+			.catch(() => {
+				// 用户取消,恢复按钮状态
 				button_state.value = true
-				$modal.msgError(res.returnMsg)
-			} else {
-				$modal.msgSuccess(res.returnMsg)
-				// 通知列表刷新数据
-				uni.$emit('ReloadProcessData');
-				setTimeout(() => {
-					// 返回上一页
-					$tab.navigateBack();
-				}, 1000)
-			}
-		})
+			})
 	}).catch(err => {
 		button_state.value = true
 		$modal.msgError('表单填写错误')
@@ -1175,6 +1194,8 @@ function submitProcess() { // 提交表单
 ::v-deep .uni-calendar__content {
 	margin: -20px;
 	margin-top: 20px;
+	// 防止鸿蒙系统上日期选择器误触发返回
+	pointer-events: auto;
 
 	.uni-calendar__header {
 		.uni-calendar__header-text {