Browse Source

refactor: 移除地图位置标记相关组件和逻辑,简化作业票表单

xieyong 23 hours ago
parent
commit
6333fc250a

+ 3 - 108
src/views/DangerousWorkList/add.vue

@@ -130,25 +130,6 @@
         </el-col>
       </el-row>
 
-      <!-- 作业位置标记(每张底图可分别打点,由后端 map_point 字段单独保存) -->
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="作业位置标记:">
-            <div class="map-marker-field">
-              <map-marker-preview :markers="mapMarkers" />
-              <el-button
-                v-if="!isView"
-                size="mini"
-                icon="el-icon-edit"
-                @click="openMapMarker"
-              >
-                {{ mapMarkers.length ? '重新标记' : '标记位置' }}
-              </el-button>
-            </div>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
       <el-form-item label="作业票模板:">
         <el-input
           v-model="templateName"
@@ -239,7 +220,6 @@
       <el-button @click="cancel">{{ isView ? '关闭' : '取消' }}</el-button>
     </template>
     <releaseRules ref="releaseRulesRef" @success="onReleaseRulesSuccess" />
-    <map-marker-dialog ref="mapMarkerRef" @confirm="onMapMarkerConfirm" />
   </ele-modal>
 </template>
 
@@ -250,8 +230,6 @@
   import personSelect from '@/components/CommomSelect/person-select.vue';
   import experimentationProcessNew from '@/components/releaseRules/experimentationProcessNew.vue';
   import workTicketForm from './components/workTicketForm.vue';
-  import mapMarkerDialog from './components/mapMarkerDialog.vue';
-  import mapMarkerPreview from './components/mapMarkerPreview.vue';
   import areaMixin from '@/mixins/areaMixin';
   import dictMixins from '@/mixins/dictMixins';
   import dictEnum from '@/enum/dict';
@@ -268,15 +246,14 @@
     getProcessInstanceId
   } from './constants';
   import { buildWorkTypeOptions, resolveWorkTypeLabel } from './workTypes';
-  import { parseExtension, parseMapMarkers, buildMapPoint } from './mapMarker';
+  import { parseExtension } from './mapMarker';
   import bpmDetail from '@/views/bpm/processInstance/detail.vue';
   import {
     ticketSave,
     ticketUpdate,
     ticketGetById,
     ticketSubmit,
-    ticketListByWorkId,
-    ticketMapPoint
+    ticketListByWorkId
   } from '@/api/dangerousWork';
   import { listOrganizations, getUserPage } from '@/api/system/organization';
 
@@ -310,8 +287,6 @@
       releaseRules,
       experimentationProcessNew,
       workTicketForm,
-      mapMarkerDialog,
-      mapMarkerPreview,
       bpmDetail
     },
     mixins: [areaMixin, dictMixins],
@@ -336,10 +311,6 @@
         frontendTemplate: null,
         // 未匹配到前端模板时的原始作业票内容(降级展示)
         rawExtension: null,
-        // 作业位置标记(由后端 map_point 字段单独保存)
-        mapMarkers: [],
-        // 作业票未保存时暂存的地图位置标记,保存后补存
-        pendingMarkers: null,
         // 选中的作业票模板(发布规则)
         templateData: {},
         templateName: '',
@@ -648,8 +619,6 @@
         this.templateName = '';
         this.frontendTemplate = null;
         this.rawExtension = null;
-        this.mapMarkers = [];
-        this.pendingMarkers = null;
         this.$refs.experimentationProcessRef?.init('[]');
       },
       // 用作业票详情回填表单
@@ -680,10 +649,6 @@
         // 解析已保存的作业票内容
         const extension = parseExtension(detail.extensionJson);
         this.form.remark = extension.remark || '';
-        // 回显作业位置标记(每张底图一个标记点)
-        this.mapMarkers = parseMapMarkers(
-          detail?.mapPoint ?? detail?.map_point
-        );
         // 按作业类型匹配前端内置模板,匹配到则结构化回显
         const option = this.workTypeList.find(
           (item) => String(item.value) === String(detail.workType)
@@ -718,54 +683,6 @@
           this.$refs.form && this.$refs.form.clearValidate();
         });
       },
-      // 打开地图位置标记弹框
-      openMapMarker() {
-        this.$refs.mapMarkerRef.open(this.mapMarkers);
-      },
-      // 地图位置标记确认:调用后端专用接口保存(整段覆盖)
-      async onMapMarkerConfirm(markers) {
-        const list = markers || [];
-        this.mapMarkers = list;
-        // 作业票还没保存时没有 id,先暂存,等作业票保存后补存
-        if (!this.form.id) {
-          this.pendingMarkers = list;
-          this.$message.success(
-            list.length
-              ? '地图位置已标记,保存作业票后生效'
-              : '已清除地图位置标记'
-          );
-          return;
-        }
-        try {
-          await ticketMapPoint({
-            ticketId: this.form.id,
-            // 没有标记时传 null,后端按空值清除标记
-            mapPoint: buildMapPoint(list)
-          });
-          this.$message.success(
-            list.length ? '地图位置标记成功' : '已清除地图位置标记'
-          );
-        } catch (e) {
-          // 失败提示由响应拦截器统一处理
-        }
-      },
-      // 保存暂存的地图位置标记:新增作业票保存后补存(编辑态标记已即时保存)
-      // 标记保存失败不影响作业票本身的保存/提交,失败提示由响应拦截器统一处理
-      // @param ticketId 作业票 id
-      async flushPendingMarkers(ticketId) {
-        if (!ticketId || !this.pendingMarkers) {
-          return;
-        }
-        try {
-          await ticketMapPoint({
-            ticketId,
-            mapPoint: buildMapPoint(this.pendingMarkers)
-          });
-          this.pendingMarkers = null;
-        } catch (e) {
-          // 忽略:作业票已保存,标记可稍后重新标记
-        }
-      },
       cancel() {
         this.form = { ...defForm };
         this.personList = [];
@@ -773,8 +690,6 @@
         this.templateName = '';
         this.frontendTemplate = null;
         this.rawExtension = null;
-        this.mapMarkers = [];
-        this.pendingMarkers = null;
         this.detailLoading = false;
         this.submitLoading = false;
         this.newTicketId = '';
@@ -875,18 +790,7 @@
             ? ticketUpdate(params)
             : ticketSave(params);
           request
-            .then(async (res) => {
-              // 新增作业票:保存后补存暂存的地图位置标记
-              if (this.pendingMarkers && !this.form.id) {
-                const ticketId = await this.resolveSavedTicketId(res, params);
-                if (ticketId) {
-                  await this.flushPendingMarkers(ticketId);
-                } else {
-                  this.$message.warning(
-                    '作业票已保存,但未获取到作业票ID,地图位置标记未保存,请在作业票列表中重新标记'
-                  );
-                }
-              }
+            .then(() => {
               this.$message.success(this.isEdit ? '保存成功' : '申请成功');
               this.cancel();
               this.$emit('reload');
@@ -962,8 +866,6 @@
               return;
             }
             this.newTicketId = ticketId;
-            // 新增作业票:补存暂存的地图位置标记
-            await this.flushPendingMarkers(ticketId);
           }
           await ticketSubmit({ id: ticketId, processDefinitionKey });
           this.$message.success('提交成功,已发起审批');
@@ -1036,13 +938,6 @@
     line-height: 20px;
   }
 
-  /* 作业位置标记:缩略图与按钮并排 */
-  .map-marker-field {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-  }
-
   /* 未匹配到前端模板时的原始作业票内容 */
   .raw-extension {
     width: 100%;

+ 0 - 150
src/views/DangerousWorkList/components/mapMarkerPreview.vue

@@ -1,150 +0,0 @@
-<!--
-  作业票「地图位置标记」展示组件
-  - 按底图逐个展示缩略图,并在各自的标记位置绘制标记点
-  - 每张底图的缩略图尺寸按原始宽高比换算,保证标记点与底图严格对齐
--->
-<template>
-  <div class="map-marker-preview">
-    <div v-if="!markers.length" class="map-preview-empty">未标记地图位置</div>
-    <div
-      v-for="item in markers"
-      :key="item.mapImageId"
-      class="map-preview-item"
-    >
-      <div class="map-preview-box" :style="getBoxStyle(item)">
-        <img
-          :src="resolveUrl(item.imageUrl)"
-          class="map-preview-image"
-          alt="地图底图"
-          @load="onImageLoad(item, $event)"
-          @error="onImageError(item)"
-        />
-        <div
-          v-if="!errors[item.mapImageId]"
-          class="map-pin"
-          :style="getPinStyle(item)"
-        >
-          <i class="el-icon-location"></i>
-        </div>
-      </div>
-      <div class="map-preview-name">
-        {{ item.mapImageName || `底图${item.mapImageId}` }}
-        <span v-if="errors[item.mapImageId]" class="map-preview-error">
-          (图片加载失败)
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import { resolveMapImageUrl } from '../mapMarker';
-
-  export default {
-    name: 'MapMarkerPreview',
-    props: {
-      // 标记列表 [{ mapImageId, xRate, yRate, mapImageName, imageUrl, ... }]
-      markers: {
-        type: Array,
-        default: () => []
-      },
-      // 缩略图展示宽度(像素)
-      width: {
-        type: Number,
-        default: 240
-      }
-    },
-    data() {
-      return {
-        // 各底图原始尺寸 { [mapImageId]: { width, height } }
-        naturalSizes: {},
-        // 图片加载失败的底图 id
-        errors: {}
-      };
-    },
-    watch: {
-      markers() {
-        this.naturalSizes = {};
-        this.errors = {};
-      }
-    },
-    methods: {
-      // 解析底图图片地址
-      resolveUrl(path) {
-        return resolveMapImageUrl(path);
-      },
-      // 展示容器尺寸:高度按底图宽高比换算,图片铺满容器,标记点位置才不会偏移
-      getBoxStyle(item) {
-        const style = { width: this.width + 'px' };
-        const size = this.naturalSizes[item.mapImageId];
-        if (size?.width && size?.height) {
-          style.height =
-            Math.round((this.width * size.height) / size.width) + 'px';
-        }
-        return style;
-      },
-      // 标记点位置(相对容器的百分比)
-      getPinStyle(item) {
-        return {
-          left: item.xRate * 100 + '%',
-          top: item.yRate * 100 + '%'
-        };
-      },
-      // 图片加载完成后读取原始尺寸
-      onImageLoad(item, event) {
-        this.$set(this.errors, item.mapImageId, false);
-        this.$set(this.naturalSizes, item.mapImageId, {
-          width: event.target.naturalWidth || 0,
-          height: event.target.naturalHeight || 0
-        });
-      },
-      // 图片加载失败
-      onImageError(item) {
-        this.$set(this.errors, item.mapImageId, true);
-      }
-    }
-  };
-</script>
-
-<style lang="scss" scoped>
-  .map-marker-preview {
-    display: flex;
-    gap: 16px;
-    flex-wrap: wrap;
-  }
-  .map-preview-empty {
-    font-size: 13px;
-    color: #c0c4cc;
-    line-height: 20px;
-  }
-  .map-preview-box {
-    position: relative;
-    overflow: hidden;
-    border: 1px solid #ebeef5;
-    border-radius: 4px;
-    background: #f6f7f9;
-  }
-  .map-preview-image {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-  /* 标记点:锚点在标记位置的正下方 */
-  .map-pin {
-    position: absolute;
-    transform: translate(-50%, -100%);
-    color: #f56c6c;
-    font-size: 20px;
-    line-height: 1;
-    pointer-events: none;
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
-  }
-  .map-preview-name {
-    margin-top: 6px;
-    font-size: 12px;
-    color: #909399;
-  }
-  .map-preview-error {
-    color: #f56c6c;
-  }
-</style>