diff --git a/web/src/views/xg/xsjcxx/xsqj/dialog.vue b/web/src/views/xg/xsjcxx/xsqj/dialog.vue index 1a591cdd..ffa293c5 100644 --- a/web/src/views/xg/xsjcxx/xsqj/dialog.vue +++ b/web/src/views/xg/xsjcxx/xsqj/dialog.vue @@ -118,16 +118,25 @@ - + - + + @@ -224,6 +233,61 @@ + + + +
+
+ + 关闭 + +
+
+
+ + + {{ form.leaveLocation }} + +
+
+
+ + +
+

位置解析：

+

+ 纬度：{{ parsedLocation.latitude }}
+ 经度：{{ parsedLocation.longitude }} +

+

+ 位置描述：{{ parsedLocation.address }} +

+
+ +
+
🗺️
+

地图显示区域

+ （可集成百度地图、高德地图等） +
+
+
+
+
+ + @@ -233,7 +297,7 @@ import { ref, computed, onMounted, reactive, toRefs, nextTick, getCurrentInstanc import ElMessage from 'element-plus/es/components/message/index'; import ElMessageBox from 'element-plus/es/components/message-box/index'; import ElLoading from 'element-plus/es/components/loading/index'; -import { UploadFilled, Document, Loading, Download, Delete } from '@element-plus/icons-vue'; +import { UploadFilled, Document, Loading, Download, Delete, LocationFilled } from '@element-plus/icons-vue'; import { getToken } from '@/utils/auth'; import ImagePreview from '@/components/ImagePreview/index.vue'; import request from '@/utils/request'; @@ -362,6 +426,48 @@ const dialogVisible = reactive({ title: '流程定义' }); +// 地图弹窗状态 +const mapDialogVisible = ref(false); + +// 解析后的位置信息 +const parsedLocation = computed(() => { + if (!form.leaveLocation || form.leaveLocation.trim() === '') { + return null; + } + + const location = form.leaveLocation.trim(); + + // 尝试解析经纬度格式: "纬度: xxx, 经度: xxx" + const coordsRegex = /纬度:\s*([\d.-]+),\s*经度:\s*([\d.-]+)/; + const coordsMatch = location.match(coordsRegex); + + if (coordsMatch) { + return { + type: 'coordinates', + latitude: parseFloat(coordsMatch[1]), + longitude: parseFloat(coordsMatch[2]) + }; + } + + // 尝试解析简单经纬度格式: "lat,lng" 或 "lat, lng" + const simpleRegex = /^([\d.-]+),\s*([\d.-]+)$/; + const simpleMatch = location.match(simpleRegex); + + if (simpleMatch) { + return { + type: 'coordinates', + latitude: parseFloat(simpleMatch[1]), + longitude: parseFloat(simpleMatch[2]) + }; + } + + // 其他情况当作地址处理 + return { + type: 'address', + address: location + }; +}); + //提交组件 const submitVerifyRef = ref>(); //审批记录组件 @@ -988,6 +1094,51 @@ const cancel = () => { emit('cancel'); }; +// 打开地图定位弹窗 +const openLocationMap = () => { + if (!form.leaveLocation || form.leaveLocation.trim() === '') { + ElMessage.warning('暂无位置信息可显示'); + return; + } + mapDialogVisible.value = true; +}; + +// 关闭地图弹窗 +const closeMapDialog = () => { + mapDialogVisible.value = false; +}; + +// 在外部地图中查看 +const openExternalMap = () => { + if (!parsedLocation.value || parsedLocation.value.type !== 'coordinates') { + ElMessage.warning('无法获取有效的坐标信息'); + return; + } + + const { latitude, longitude } = parsedLocation.value; + + // 提供多种地图选择 + ElMessageBox.confirm('选择要使用的地图服务：', '打开外部地图', { + confirmButtonText: '百度地图', + cancelButtonText: '高德地图', + type: 'info', + distinguishCancelAndClose: true + }) + .then(() => { + // 百度地图 + const baiduUrl = `https://api.map.baidu.com/marker?location=${latitude},${longitude}&title=请假位置&content=${encodeURIComponent(form.leaveLocation)}&output=html&src=webapp`; + window.open(baiduUrl, '_blank'); + }) + .catch((action) => { + if (action === 'cancel') { + // 高德地图 + const gaodeUrl = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=请假位置&src=webapp`; + window.open(gaodeUrl, '_blank'); + } + // 如果是 close，则不执行任何操作 + }); +}; + // 监听 isLeaveSchool 字段变化，更新销假状态 // watch( // () => form.isLeaveSchool, @@ -1640,4 +1791,93 @@ onMounted(() => { :deep(.el-card .el-card__header) { border-bottom: 0px !important; } + +/* 地图弹窗样式 */ +.map-container { + min-height: 500px; + max-height: 70vh; + overflow-y: auto; +} + +.no-location-tip { + display: flex; + align-items: center; + justify-content: center; + min-height: 300px; +} + +.location-info { + padding: 16px; +} + +.location-text { + margin-bottom: 16px; + text-align: center; +} + +.location-text .el-tag { + padding: 8px 16px; + font-size: 14px; + font-weight: 500; +} + +.location-text .el-icon { + margin-right: 8px; +} + +.map-placeholder { + margin-top: 16px; +} + +.map-tips { + margin-bottom: 16px; +} + +.coordinates-display { + margin: 16px 0; + padding: 12px; + background: #f8f9fa; + border-radius: 6px; + border-left: 4px solid #409eff; +} + +.coordinates-display p { + margin: 8px 0; + line-height: 1.5; +} + +.coordinates-display strong { + color: #303133; + font-weight: 600; +} + +.mock-map { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 200px; + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + border: 2px dashed #d0d7de; + border-radius: 8px; + color: #666; + text-align: center; + margin-top: 16px; +} + +.map-icon { + font-size: 48px; + margin-bottom: 8px; +} + +.mock-map p { + margin: 4px 0; + font-size: 16px; + font-weight: 500; +} + +.mock-map small { + color: #999; + font-size: 12px; +} diff --git a/web/src/views/xg/xsjcxx/xsqj/index.vue b/web/src/views/xg/xsjcxx/xsqj/index.vue index f082e9b0..785cf52a 100644 --- a/web/src/views/xg/xsjcxx/xsqj/index.vue +++ b/web/src/views/xg/xsjcxx/xsqj/index.vue @@ -238,20 +238,18 @@ --> - +