fix: 新增悬停回到工作台功能，组件全局使用。

2024-12-15 21:35:14 +08:00
parent 2014678e14
commit 8581a7c555
42 changed files with 921 additions and 2 deletions
--- a/src/components/my-selectCheckbox/my-selectCheckbox.vue
+++ b/src/components/my-selectCheckbox/my-selectCheckbox.vue
@@ -0,0 +1,760 @@
+<template>
+	<view class="uni-stat__select">
+		<span v-if="label" class="uni-label-text">{{label + '：'}}</span>
+		<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
+			<view class="uni-select" :style="{height:multiple?'100%':' 35px;'}"
+				:class="{'uni-select--disabled':disabled}">
+				<view class="uni-select__input-box" :style="{height:multiple?'100%':'35px;'}" @click="toggleSelector">
+					<view class="" style="display: flex;flex-wrap: wrap;width: 100%;" v-if="multiple&&current.length>0">
+						<view class="tag-calss"
+							v-for="(item,index) in collapseTags?current.slice(0,collapseTagsNum):current"
+							:key="item[dataValue]">
+							<span class="text">{{item[dataKey]}}</span>
+							<view class="" @click.stop="delItem(item)">
+								<uni-icons type="clear" style="margin-left: 4px;" color="#c0c4cc" />
+							</view>
+						</view>
+						<view v-if="current.length>collapseTagsNum&&collapseTags" class="tag-calss">
+							<span class="text">+{{current.length-collapseTagsNum}}</span>
+						</view>
+					</view>
+					<view v-else-if="current&&current.length>0&&!filterable" class="uni-select__input-text">{{current}}
+					</view>
+					<input v-else-if="filterable" class="uni-select__input-text" type="text" style="font-size: 12px;"
+						:placeholder="placeholderOld" v-model="current">
+					<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
+					<uni-icons v-if="current && clear" type="clear" color="#c0c4cc" size="24" @click="clearVal" />
+					<uni-icons v-else :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
+				</view>
+				<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
+				<view class="uni-select__selector" v-if="showSelector">
+					<view class="uni-popper__arrow"></view>
+					<scroll-view scroll-y="true" class="uni-select__selector-scroll">
+						<view class="uni-select__selector-empty" v-if="filterMixinDatacomResData.length === 0">
+							<span>{{emptyTips}}</span>
+						</view>
+						<view v-else class="uni-select__selector-item"
+							style="display: flex;justify-content: space-between;align-items: center;"
+							v-for="(item,index) in filterMixinDatacomResData" :key="index" @click="change(item)">
+							<span
+								:class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</span>
+							<uni-icons v-if="multiple&&currentArr.includes(item[dataValue])" type="checkmarkempty"
+								color="#007aff" />
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * DataChecklist 数据选择器
+	 * @description 通过数据渲染的下拉框组件
+	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
+	 * @property {String} value 默认值
+	 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
+	 * @property {Boolean} clear 是否可以清空已选项
+	 * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
+	 * @property {String} label 左侧标题
+	 * @property {String} placeholder 输入框的提示文字
+	 * @property {Boolean} disabled 是否禁用
+	 * @event {Function} change  选中发生变化触发
+	 */
+
+	export default {
+		name: "my-selectCheckbox",
+		mixins: [uniCloud.mixinDatacom || {}],
+		props: {
+			collapseTagsNum: {
+				type: Number,
+				default: 1
+			},
+			collapseTags: {
+				type: Boolean,
+				default: false
+			},
+			dataKey: {
+				type: [String],
+				default: 'text'
+			},
+			dataValue: {
+				type: [String],
+				default: 'value'
+			},
+			multiple: {
+				type: Boolean,
+				default: false
+			},
+			filterable: {
+				type: Boolean,
+				default: false
+			},
+			localdata: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			// #ifndef VUE3
+			value: {
+				type: [String, Number, Array],
+				default: ''
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				type: [String, Number, Array],
+				default: ''
+			},
+			// #endif
+			label: {
+				type: String,
+				default: ''
+			},
+			placeholder: {
+				type: String,
+				default: '请选择'
+			},
+			emptyTips: {
+				type: String,
+				default: '无选项'
+			},
+			clear: {
+				type: Boolean,
+				default: true
+			},
+			defItem: {
+				type: Number,
+				default: 0
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
+			format: {
+				type: String,
+				default: ''
+			},
+		},
+		data() {
+			return {
+				showSelector: false,
+				current: [],
+				mixinDatacomResData: [],
+				apps: [],
+				channels: [],
+				cacheKey: "uni-data-select-lastSelectedValue",
+				placeholderOld: "",
+				currentArr: []
+			};
+		},
+		created() {
+			if (this.multiple) {
+				// #ifndef VUE3
+				this.currentArr = this.value || []
+				// #endif
+				// #ifdef VUE3
+				this.currentArr = this.modelValue || []
+				// #endif
+				if (!this.current) {
+					this.current = []
+				}
+				// #ifndef VUE3
+				if (this.value && this.value.length > 0 && this.filterMixinDatacomResData.length > 0) {
+					this.value.forEach(item => {
+						let current = this.filterMixinDatacomResData.find(e =>
+							e[this.dataValue] == item
+						)
+						this.current.push(current)
+					})
+				}
+				// #endif
+				// #ifdef VUE3
+				if (this.modelValue && this.modelValue.length > 0 && this.filterMixinDatacomResData.length > 0) {
+					this.modelValue.forEach(item => {
+						let current = this.filterMixinDatacomResData.find(e =>
+							e[this.dataValue] == item
+						)
+						this.current.push(current)
+					})
+				}
+				// #endif
+
+			} else {
+
+				// #ifndef VUE3
+				if (this.value) {
+					this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
+						e[this.dataValue] == this.value
+					))
+				}
+				// #endif
+				// #ifdef VUE3
+				if (this.modelValue) {
+					this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
+						e[this.dataValue] == this.modelValue
+					))
+				}
+				// #endif
+			}
+			this.placeholderOld = this.placeholder
+			this.debounceGet = this.debounce(() => {
+				this.query();
+			}, 300);
+			if (this.collection && !this.localdata.length) {
+				this.debounceGet();
+			}
+		},
+		computed: {
+			filterMixinDatacomResData() {
+				if (this.filterable && this.current) {
+					return this.mixinDatacomResData.filter(e => e[this.dataKey].includes(this.current))
+				} else {
+					return this.mixinDatacomResData
+				}
+			},
+			typePlaceholder() {
+				const text = {
+					'opendb-stat-app-versions': '版本',
+					'opendb-app-channels': '渠道',
+					'opendb-app-list': '应用'
+				}
+				const common = this.placeholder
+				const placeholder = text[this.collection]
+				return placeholder ?
+					common + placeholder :
+					common
+			},
+			valueCom() {
+				// #ifdef VUE3
+				return this.modelValue;
+				// #endif
+				// #ifndef VUE3
+				return this.value;
+				// #endif
+			}
+		},
+		watch: {
+			localdata: {
+				immediate: true,
+				handler(val, old) {
+					if (Array.isArray(val) && old !== val) {
+						this.mixinDatacomResData = val
+					}
+
+				}
+			},
+			valueCom(val, old) {
+				this.initDefVal()
+			},
+			mixinDatacomResData: {
+				immediate: true,
+				handler(val) {
+					if (val.length) {
+						this.initDefVal()
+					}
+				}
+			},
+			// modelValue(val) {
+			// 	if (this.multiple && val && val.length > 0) {
+			// 		this.currentArr = val
+			// 		if (!this.current) {
+			// 			this.current = []
+			// 		}
+			// 		val.forEach(item => {
+			// 			let current = this.filterMixinDatacomResData.find(e =>
+			// 				e[this.dataValue] == item
+			// 			)
+			// 			this.current.push(current)
+			// 		})
+			// 	} else {
+			// 		if (val) {
+			// 			this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
+			// 				e[this.dataValue] == val
+			// 			))
+			// 		}
+			// 	}
+
+			// },
+			// value(val) {
+			// 	if (this.multiple && val && val.length > 0) {
+			// 		this.currentArr = val
+			// 		if (!this.current) {
+			// 			this.current = []
+			// 		}
+			// 		val.forEach(item => {
+			// 			let current = this.filterMixinDatacomResData.find(e =>
+			// 				e[this.dataValue] == item
+			// 			)
+			// 			this.current.push(current)
+			// 		})
+			// 	} else {
+			// 		if (val) {
+			// 			this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
+			// 				e[this.dataValue] == val
+			// 			))
+			// 		}
+			// 	}
+
+			// }
+		},
+		methods: {
+			debounce(fn, time = 100) {
+				let timer = null
+				return function(...args) {
+					if (timer) clearTimeout(timer)
+					timer = setTimeout(() => {
+						fn.apply(this, args)
+					}, time)
+				}
+			},
+			// 执行数据库查询
+			query() {
+				this.mixinDatacomEasyGet();
+			},
+			// 监听查询条件变更事件
+			onMixinDatacomPropsChange() {
+				if (this.collection) {
+					this.debounceGet();
+				}
+			},
+			initDefVal() {
+				let defValue = ''
+				if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
+					defValue = this.valueCom
+				} else {
+					let strogeValue
+					if (this.collection) {
+						strogeValue = this.getCache()
+					}
+					if (strogeValue || strogeValue === 0) {
+						defValue = strogeValue
+					} else {
+						let defItem = ''
+						if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
+							defItem = this.mixinDatacomResData[this.defItem - 1][this.dataValue]
+						}
+						defValue = defItem
+					}
+					if (defValue || defValue === 0) {
+						this.emit(defValue)
+					}
+				}
+				if (this.multiple) {
+					this.current = []
+					defValue.forEach(item => {
+						let current = this.filterMixinDatacomResData.find(e =>
+							e[this.dataValue] == item
+						)
+						this.current.push(current)
+					})
+				} else {
+					const def = this.mixinDatacomResData.find(item => item[this.dataValue] === defValue)
+					this.current = def ? this.formatItemName(def) : ''
+				}
+			},
+
+			/**
+			 * @param {[String, Number]} value
+			 * 判断用户给的 value 是否同时为禁用状态
+			 */
+			isDisabled(value) {
+				let isDisabled = false;
+
+				this.mixinDatacomResData.forEach(item => {
+					if (item[this.dataValue] === value) {
+						isDisabled = item.disable
+					}
+				})
+
+				return isDisabled;
+			},
+
+			clearVal() {
+				if (this.multiple) {
+					this.current = []
+					this.currentArr = []
+					this.emit([])
+				} else {
+					this.current = ""
+					this.currentArr = []
+					this.emit('')
+				}
+				if (this.collection) {
+					this.removeCache()
+				}
+				this.placeholderOld = this.placeholder
+			},
+			change(item) {
+				if (!item.disable) {
+					this.showSelector = false
+					if (this.multiple) {
+						if (!this.current) {
+							this.current = []
+						}
+						if (!this.currentArr) {
+							this.currentArr = []
+						}
+						if (this.currentArr.includes(item[this.dataValue])) {
+							let index = this.current.findIndex(e => {
+								return e[this.dataValue] == item[this.dataValue]
+							})
+							this.current.splice(index, 1)
+							this.currentArr.splice(index, 1)
+							this.emit(this.current)
+						} else {
+							this.current.push(item)
+							this.currentArr.push(item[this.dataValue])
+							this.emit(this.current)
+						}
+					} else {
+						this.current = this.formatItemName(item)
+						this.emit(item[this.dataValue])
+					}
+				}
+			},
+			delItem(item) {
+				if (this.currentArr.includes(item[this.dataValue])) {
+					let index = this.current.findIndex(e => {
+						return e[this.dataValue] == item[this.dataValue]
+					})
+					this.current.splice(index, 1)
+					this.currentArr.splice(index, 1)
+					this.emit(this.current)
+				}
+			},
+			emit(val) {
+				this.$emit('change', val)
+				if (this.multiple) {
+					this.$emit('input', this.currentArr)
+					this.$emit('update:modelValue', this.currentArr)
+				} else {
+					this.$emit('input', val)
+					this.$emit('update:modelValue', val)
+				}
+				if (this.collection) {
+					this.setCache(val);
+				}
+			},
+			toggleSelector() {
+				if (this.disabled) {
+					return
+				}
+				if (this.filterable && this.current && this.mixinDatacomResData.findIndex(e => {
+						return e[this.dataKey] == this
+							.current
+					}) < 0) {
+					this.current = ""
+				}
+				this.showSelector = !this.showSelector
+				if (this.filterable && this.current && this.showSelector) {
+					this.placeholderOld = this.current
+					this.current = ""
+				} else if (this.filterable && !this.current && !this.showSelector) {
+					if (this.placeholderOld != this.placeholder) {
+						this.current = this.placeholderOld
+					}
+				}
+
+			},
+			formatItemName(item) {
+				if (!item) {
+					return ""
+				}
+				let text = item[this.dataKey]
+				let value = item[this.dataValue]
+				let {
+					channel_code
+				} = item
+				channel_code = channel_code ? `(${channel_code})` : ''
+				if (this.format) {
+					// 格式化输出
+					let str = "";
+					str = this.format;
+					for (let key in item) {
+						str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
+					}
+					return str;
+				} else {
+					return this.collection.indexOf('app-list') > 0 ?
+						`${text}(${value})` :
+						(
+							text ?
+							text :
+							`未命名${channel_code}`
+						)
+				}
+			},
+			// 获取当前加载的数据
+			getLoadData() {
+				return this.mixinDatacomResData;
+			},
+			// 获取当前缓存key
+			getCurrentCacheKey() {
+				return this.collection;
+			},
+			// 获取缓存
+			getCache(name = this.getCurrentCacheKey()) {
+				let cacheData = uni.getStorageSync(this.cacheKey) || {};
+				return cacheData[name];
+			},
+			// 设置缓存
+			setCache(value, name = this.getCurrentCacheKey()) {
+				let cacheData = uni.getStorageSync(this.cacheKey) || {};
+				cacheData[name] = value;
+				uni.setStorageSync(this.cacheKey, cacheData);
+			},
+			// 删除缓存
+			removeCache(name = this.getCurrentCacheKey()) {
+				let cacheData = uni.getStorageSync(this.cacheKey) || {};
+				delete cacheData[name];
+				uni.setStorageSync(this.cacheKey, cacheData);
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-base-color: #6a6a6a !default;
+	$uni-main-color: #333 !default;
+	$uni-secondary-color: #909399 !default;
+	$uni-border-3: #e5e5e5;
+
+
+	/* #ifndef APP-NVUE */
+	@media screen and (max-width: 500px) {
+		.hide-on-phone {
+			display: none;
+		}
+	}
+
+	/* #endif */
+	.uni-stat__select {
+		display: flex;
+		align-items: center;
+		// padding: 15px;
+		cursor: pointer;
+		width: 100%;
+		flex: 1;
+		box-sizing: border-box;
+	}
+
+	.uni-stat-box {
+		width: 100%;
+		flex: 1;
+	}
+
+	.uni-stat__actived {
+		width: 100%;
+		flex: 1;
+		// outline: 1px solid #2979ff;
+	}
+
+	.uni-label-text {
+		font-size: 14px;
+		font-weight: bold;
+		color: $uni-base-color;
+		margin: auto 0;
+		margin-right: 5px;
+	}
+
+	.uni-select {
+		font-size: 14px;
+		border: 0px solid $uni-border-3;
+		box-sizing: border-box;
+		border-radius: 4px;
+		padding: 0 5px;
+		padding-left: 10px;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		user-select: none;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		border-bottom: solid 0px $uni-border-3;
+		width: 100%;
+		flex: 1;
+		height: 35px;
+		min-height: 35px;
+
+		&--disabled {
+			background-color: #f5f7fa;
+			cursor: not-allowed;
+		}
+	}
+
+	.uni-select__label {
+		font-size: 16px;
+		// line-height: 22px;
+		min-height: 35px;
+		height: 35px;
+		padding-right: 10px;
+		color: $uni-secondary-color;
+	}
+
+	.uni-select__input-box {
+		height: 35px;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		align-items: center;
+
+		.tag-calss {
+			font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+			font-weight: 400;
+			-webkit-font-smoothing: antialiased;
+			-webkit-tap-highlight-color: transparent;
+			font-size: 12px;
+			border: 1px solid #d9ecff;
+			border-radius: 4px;
+			white-space: nowrap;
+			height: 39px;
+			padding: 0 4px 0px 8px;
+			line-height: 32px;
+			box-sizing: border-box;
+			margin: 2px 0 2px 6px;
+			display: flex;
+			max-width: 100%;
+			align-items: center;
+			background-color: #f4f4f5;
+			border-color: #e9e9eb;
+			color: #909399;
+
+			.text {
+				font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+				font-weight: 400;
+				-webkit-font-smoothing: antialiased;
+				-webkit-tap-highlight-color: transparent;
+				font-size: 11px;
+				white-space: pre-wrap;
+				line-height: 22px;
+				color: #909399;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+
+	.uni-select__input {
+		flex: 1;
+		font-size: 14px;
+		height: 22px;
+		line-height: 22px;
+	}
+
+	.uni-select__input-plac {
+		font-size: 14px;
+		color: $uni-secondary-color;
+	}
+
+	.uni-select__selector {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+		position: absolute;
+		top: calc(100% + 12px);
+		left: 0;
+		width: 100%;
+		background-color: #FFFFFF;
+		border: 1px solid #EBEEF5;
+		border-radius: 6px;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		z-index: 3;
+		padding: 4px 0;
+	}
+
+	.uni-select__selector-scroll {
+		/* #ifndef APP-NVUE */
+		max-height: 200px;
+		box-sizing: border-box;
+		/* #endif */
+	}
+
+	.uni-select__selector-empty,
+	.uni-select__selector-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		cursor: pointer;
+		/* #endif */
+		line-height: 35px;
+		font-size: 14px;
+		text-align: left;
+		/* border-bottom: solid 1px $uni-border-3; */
+		padding: 0px 10px;
+	}
+
+	.uni-select__selector-item:hover {
+		background-color: #f9f9f9;
+	}
+
+	.uni-select__selector-empty:last-child,
+	.uni-select__selector-item:last-child {
+		/* #ifndef APP-NVUE */
+		border-bottom: none;
+		/* #endif */
+	}
+
+	.uni-select__selector__disabled {
+		opacity: 0.4;
+		cursor: default;
+	}
+
+	/* picker 弹出层通用的指示小三角 */
+	.uni-popper__arrow,
+	.uni-popper__arrow::after {
+		position: absolute;
+		display: block;
+		width: 0;
+		height: 0;
+		border-color: transparent;
+		border-style: solid;
+		border-width: 6px;
+	}
+
+	.uni-popper__arrow {
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+		top: -6px;
+		left: 10%;
+		margin-right: 3px;
+		border-top-width: 0;
+		border-bottom-color: #EBEEF5;
+	}
+
+	.uni-popper__arrow::after {
+		content: " ";
+		top: 1px;
+		margin-left: -6px;
+		border-top-width: 0;
+		border-bottom-color: #fff;
+	}
+
+	.uni-select__input-text {
+		// width: 280px;
+		width: 100%;
+		color: $uni-main-color;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		-o-text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	.uni-select__input-placeholder {
+		color: $uni-base-color;
+		font-size: 16px;
+	}
+
+	.uni-select--mask {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+	}
+</style>
--- a/src/components/suspend/suspend.vue
+++ b/src/components/suspend/suspend.vue
@@ -0,0 +1,78 @@
+<template>
+	<view>
+	  <movable-area class="movable-area">
+		<movable-view class="movable-view" :x="x" :y="y" direction="all">
+		  <view class="newProblem" @click="newProblem">
+			<image src="../../static/images/tabbar/work.png"></image>
+			<!-- <text></text> -->
+		  </view>
+		</movable-view>
+	  </movable-area>
+	</view>
+  </template>
+
+  <script>
+  export default {
+	data() {
+	  return {
+		x: 1000, // x大于默认的值就会在最右边
+		y: 1000
+	  };
+	},
+	computed: {
+
+	},
+	methods: {
+	  // 意见反馈
+	  newProblem() {
+		uni.switchTab({url: `/pages/work/index`})
+	  }
+	}
+  };
+  </script>
+
+  <style lang="less">
+  .movable-area {
+	// 保持在右下角
+	margin-top: 200rpx;
+	margin-left: 100rpx;
+	height: calc(100vh - 300rpx);
+	width: calc(100vw - 150rpx);
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	position: fixed;
+	z-index: 99999999;
+	pointer-events: none; //此处要加，鼠标事件可以渗透
+	.movable-view {
+	  width: 60rpx;
+	  height: 60rpx;
+	  pointer-events: auto; //恢复鼠标事件
+	  .newProblem {
+		width: 60rpx;
+		height: 60rpx;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		align-items: center;
+		background: #ffffff;
+		border-radius: 50%;
+		border: 1px solid #a6a6a6;
+		image {
+		  width: 30rpx;
+		  height: 30rpx;
+		}
+
+		text {
+		  margin-top: 10rpx;
+		  font-size: 16rpx;
+		  font-family: PingFangSC-Semibold, PingFang SC;
+		  font-weight: 600;
+		  color: #000000;
+		}
+	  }
+	}
+  }
+  </style>
+
--- a/src/main.js
+++ b/src/main.js
@@ -9,14 +9,17 @@ import directive from './directive' // directive

 import { useDict } from '@/utils/dict'
 import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'
-
-
+import mySelectCheckbox  from '@/components/my-selectCheckbox/my-selectCheckbox.vue';
+import suspend  from '@/components/suspend/suspend.vue';

 export function createApp() {
  const app = createSSRApp(App)
  app.use(store)
  app.use(uviewPlus)
  app.use(plugins)
+    // 注册全局组件
+    app.component('mySelectCheckbox', mySelectCheckbox);
+    app.component('suspend', suspend);
  directive(app)

  // 全局方法挂载
--- a/src/pages/statistic/accounts/accountDealAnalysis/index.vue
+++ b/src/pages/statistic/accounts/accountDealAnalysis/index.vue
@@ -156,6 +156,8 @@
        </view>
      </u-list>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/accounts/accountsBalance/index.vue
+++ b/src/pages/statistic/accounts/accountsBalance/index.vue
@@ -70,6 +70,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountTypeList" keyName="dictLabel" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue
+++ b/src/pages/statistic/accounts/creditCardDealAnalysis/index.vue
@@ -168,6 +168,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue
+++ b/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue
@@ -212,6 +212,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="typeNameCodeAvailableLimit" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/accounts/debitDealAnalysis/index.vue
+++ b/src/pages/statistic/accounts/debitDealAnalysis/index.vue
@@ -168,6 +168,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/accounts/investDealAnalysis/index.vue
+++ b/src/pages/statistic/accounts/investDealAnalysis/index.vue
@@ -155,6 +155,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/accounts/posAnalysis/index.vue
+++ b/src/pages/statistic/accounts/posAnalysis/index.vue
@@ -120,6 +120,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/bill/creditBillAnalysis/index.vue
+++ b/src/pages/statistic/bill/creditBillAnalysis/index.vue
@@ -146,6 +146,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue
+++ b/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue
@@ -131,6 +131,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue
+++ b/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue
@@ -121,6 +121,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/bill/creditRecordAnalysis/index.vue
+++ b/src/pages/statistic/bill/creditRecordAnalysis/index.vue
@@ -156,6 +156,8 @@
        </view>
      </u-list>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/bill/futuresAnalysis/index.vue
+++ b/src/pages/statistic/bill/futuresAnalysis/index.vue
@@ -121,6 +121,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/bill/investAnalysis/index.vue
+++ b/src/pages/statistic/bill/investAnalysis/index.vue
@@ -122,6 +122,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/bill/onlineLendAnalysis/index.vue
+++ b/src/pages/statistic/bill/onlineLendAnalysis/index.vue
@@ -131,6 +131,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue
+++ b/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue
@@ -121,6 +121,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/statistic/bill/stocksAnalysis/index.vue
+++ b/src/pages/statistic/bill/stocksAnalysis/index.vue
@@ -121,6 +121,8 @@
        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="nameCode" @cancel="handleAccountCancel"
          @confirm="handleAccountConfirm"></u-picker>
    </view>
+    <!-- 悬停按钮返回工作台-->
+    <suspend></suspend>
  </template>
  
  <script setup>
--- a/src/pages/work/accounts/accountDealRecord/list.vue
+++ b/src/pages/work/accounts/accountDealRecord/list.vue
@@ -135,6 +135,8 @@
      <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="typeNameCodeAvailableLimit" @cancel="handleAccountCancel"
        @confirm="handleAccountConfirm"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/accounts/accounts/commonList.vue
+++ b/src/pages/work/accounts/accounts/commonList.vue
@@ -61,6 +61,8 @@
      <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="typeNameCodeAvailableLimit" @cancel="handleAccountCancel"
        @confirm="handleAccountConfirm"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/accounts/accounts/list.vue
+++ b/src/pages/work/accounts/accounts/list.vue
@@ -96,6 +96,8 @@
      <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="typeNameCodeAvailableLimit" @cancel="handleAccountCancel"
        @confirm="handleAccountConfirm"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/accounts/creditTransferRecord/list.vue
+++ b/src/pages/work/accounts/creditTransferRecord/list.vue
@@ -114,6 +114,8 @@
      <u-picker itemHeight="88" :show="showCreditCard" :columns="bankCardLendList" keyName="nameCode" @cancel="handleCreditCardCancel"
        @confirm="handleCreditCardConfirm"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/accounts/debitTransferRecord/list.vue
+++ b/src/pages/work/accounts/debitTransferRecord/list.vue
@@ -103,6 +103,8 @@
      <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="typeNameCodeAvailableLimit" @cancel="handleAccountCancel"
        @confirm="handleAccountConfirm"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/accounts/investAccountDeal/list.vue
+++ b/src/pages/work/accounts/investAccountDeal/list.vue
@@ -112,6 +112,8 @@
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/accounts/investTransferRecord/list.vue
+++ b/src/pages/work/accounts/investTransferRecord/list.vue
@@ -112,6 +112,8 @@
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/accounts/lendTransferRecord/list.vue
+++ b/src/pages/work/accounts/lendTransferRecord/list.vue
@@ -110,6 +110,8 @@
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/accounts/posTransferRecord/list.vue
+++ b/src/pages/work/accounts/posTransferRecord/list.vue
@@ -128,6 +128,8 @@
        <u-picker itemHeight="88" :show="showCreditCard" :columns="bankCardLendList" keyName="nameCode" @cancel="handleCreditCardCancel"
        @confirm="handleCreditCardConfirm"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/base/creditCard/list.vue
+++ b/src/pages/work/base/creditCard/list.vue
@@ -67,6 +67,8 @@
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/base/debitCard/list.vue
+++ b/src/pages/work/base/debitCard/list.vue
@@ -71,6 +71,8 @@
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/base/futures/list.vue
+++ b/src/pages/work/base/futures/list.vue
@@ -58,6 +58,8 @@
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/base/lend/list.vue
+++ b/src/pages/work/base/lend/list.vue
@@ -59,6 +59,8 @@
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/base/posmachine/list.vue
+++ b/src/pages/work/base/posmachine/list.vue
@@ -55,6 +55,8 @@
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/base/stocks/list.vue
+++ b/src/pages/work/base/stocks/list.vue
@@ -50,6 +50,8 @@
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/bill/creditCardBill/list.vue
+++ b/src/pages/work/bill/creditCardBill/list.vue
@@ -81,6 +81,8 @@
      <u-picker itemHeight="88" :show="showCreditCard" :columns="bankCardLendList" keyName="nameCode" @cancel="handleCreditCardCancel"
        @confirm="handleCreditCardConfirm"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/bill/creditInstallmentHistory/list.vue
+++ b/src/pages/work/bill/creditInstallmentHistory/list.vue
@@ -101,6 +101,8 @@
      <u-picker itemHeight="88" :show="showOnlineLend" :columns="bankCardLendList" keyName="nameCode" @cancel="handleOnlineLendCancel"
        @confirm="handleOnlineLendConfirm"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/bill/creditQueryRecord/list.vue
+++ b/src/pages/work/bill/creditQueryRecord/list.vue
@@ -70,6 +70,8 @@
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/bill/futuresBill/list.vue
+++ b/src/pages/work/bill/futuresBill/list.vue
@@ -44,6 +44,8 @@
      <u-picker itemHeight="88" :show="showFutureStocks" :columns="futureStocksBillList" keyName="nameCode" @cancel="handleFutureStocksCancel"
        @confirm="handleFutureStocksConfirm"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/bill/onlineLendHistory/list.vue
+++ b/src/pages/work/bill/onlineLendHistory/list.vue
@@ -101,6 +101,8 @@
      <u-picker itemHeight="88" :show="showOnlineLend" :columns="bankCardLendList" keyName="nameCode" @cancel="handleOnlineLendCancel"
        @confirm="handleOnlineLendConfirm"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/bill/peopleLendHistory/list.vue
+++ b/src/pages/work/bill/peopleLendHistory/list.vue
@@ -68,6 +68,8 @@
      <u-picker itemHeight="88" :show="showOnlineLend" :columns="bankCardLendList" keyName="nameCode" @cancel="handleOnlineLendCancel"
        @confirm="handleOnlineLendConfirm"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/bill/stocksBill/list.vue
+++ b/src/pages/work/bill/stocksBill/list.vue
@@ -44,6 +44,8 @@
      <u-picker itemHeight="88" :show="showFutureStocks" :columns="futureStocksBillList" keyName="nameCode" @cancel="handleFutureStocksCancel"
        @confirm="handleFutureStocksConfirm"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>
--- a/src/pages/work/heartJourney/list.vue
+++ b/src/pages/work/heartJourney/list.vue
@@ -59,6 +59,8 @@
    <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
      @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
  </view>
+  <!-- 悬停按钮返回工作台-->
+  <suspend></suspend>
 </template>

 <script setup>