取货位置和放货位置增加地图点击选择

2025-03-03 14:53:06 +08:00 · 2025-03-03 14:53:06 +08:00 · 3cb31edb2e
commit 3cb31edb2e
parent 631ced8dcb
5 changed files with 308 additions and 145 deletions
--- a/src/views/mapPage/components/locationSelectionDialog.vue
+++ b/src/views/mapPage/components/locationSelectionDialog.vue
@ -1,12 +1,27 @@
 <template>
-  <Dialog
+  <el-dialog
    v-model="dialogFormVisible"
-    title="库区选择"
+    :show-close="false"
    width="1200"
    class="location-selection-dialog"
-    :fullscreen="false"
    top="4vh"
  >
+    <template #header="{ close, titleId }">
+      <div class="my-header">
+        <div class="left-header">
+          <div :id="titleId" class="ml-4">位置选择</div>
+          <div class="ml-4">
+            <el-cascader
+              v-model="cascaderValue"
+              :options="cascaderList"
+              @change="handleChange"
+              class="!w-140px"
+            />
+          </div>
+        </div>
+        <el-icon @click="close" class="mr-4"><Close /></el-icon>
+      </div>
+    </template>
    <div class="location-selection-dialog-map">
      <div
        class="location-selection-map"
@ -92,7 +107,7 @@
      <el-button style="width: 90px" @click="dialogFormVisible = false">取消</el-button>
      <el-button style="width: 90px" type="primary" @click="submitAddForm"> 确定 </el-button>
    </div>
-  </Dialog>
+  </el-dialog>
 </template>

 <script setup>
@ -132,23 +147,67 @@ const imgBgObj = reactive({
  showWidth: 1150,
  showHeight: 0
 })
+const cascaderList = ref()
+const cascaderValue = ref([])
 const getMapList = async () => {
+  // 先获取所有的地图
+  let res = await MapApi.getPositionMapGetMap()
+  cascaderList.value = Object.keys(res).map((floor) => {
+    return {
+      value: parseInt(floor),
+      label: `${floor}楼`,
+      children: res[floor].map((item) => {
+        return {
+          value: item.id, //mapId
+          label: item.area
+        }
+      })
+    }
+  })
+
+  //如果传了地图id
  if (props.positionMapId) {
-    let res = await MapApi.getPositionMap(props.positionMapId)
-    let yamlJson = JSON.parse(res.yamlJson)
-    imgBgObj.positionMapId = res.id
-    imgBgObj.floor = res.floor
-    imgBgObj.area = res.area
-    imgBgObj.width = yamlJson.width
-    imgBgObj.height = yamlJson.height
-    imgBgObj.origin = yamlJson.origin
-    imgBgObj.resolution = yamlJson.resolution
-    imgBgObj.showHeight = (imgBgObj.showWidth * imgBgObj.height) / imgBgObj.width
+    let item = findDataById(res, props.positionMapId)
+    cascaderValue.value = [item.floor, item.id]
  } else {
+    cascaderValue.value = [cascaderList.value[0].value, cascaderList.value[0].children[0].value]
  }

-  getMapData()
-  getAllNodeList()
+  getPositionMap()
+}
+
+const getPositionMap = async () => {
+  let res = await MapApi.getPositionMap(cascaderValue.value[1])
+  let yamlJson = JSON.parse(res.yamlJson)
+  imgBgObj.positionMapId = res.id
+  imgBgObj.floor = res.floor
+  imgBgObj.area = res.area
+  imgBgObj.width = yamlJson.width
+  imgBgObj.height = yamlJson.height
+  imgBgObj.origin = yamlJson.origin
+  imgBgObj.resolution = yamlJson.resolution
+  imgBgObj.showHeight = (imgBgObj.showWidth * imgBgObj.height) / imgBgObj.width
+  await getMapData()
+  await getAllNodeList()
+}
+
+const findDataById = (obj, id) => {
+  // 遍历 obj 的每一层
+  for (const floor in obj) {
+    // 遍历当前楼层的每个区域
+    for (const item of obj[floor]) {
+      // 如果找到匹配的 id，返回该数据
+      if (item.id === id) {
+        return item
+      }
+    }
+  }
+  // 如果没有找到，返回 null
+  return null
+}
+
+const handleChange = (list) => {
+  getPositionMap()
 }

 //调转换成png的接口
@ -256,9 +315,20 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
  padding: 0px;
  position: relative;

-  .el-dialog__footer {
-    padding: 10px 20px 20px 0;
-    border-top: none !important;
+  .my-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 58px;
+    padding: 0;
+    margin-right: 0 !important;
+    border-bottom: 1px solid var(--el-border-color);
+
+    .left-header {
+      display: flex;
+      align-items: center;
+    }
  }

  .location-selection-dialog-map {
--- a/src/views/mapPage/realTimeMap/components/createTaskDialog.vue
+++ b/src/views/mapPage/realTimeMap/components/createTaskDialog.vue
@ -306,7 +306,6 @@ const chooseLocation = (type) => {
 }
 //成功选择库位
 const locationSelectionDialogSuccess = (item) => {
-  console.log(item)
  if (chooseLocationType.value == 'take') {
    //取货
    if (locationTypeNumber.value == 1) {
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@ -2302,7 +2302,7 @@ const removeEventListener = () => {

 const router = useRouter()
 onBeforeRouteLeave((to, from) => {
-  if (to.fullPath == '/mapPage/realTimeMap') {
+  if (to.path == '/mapPage/realTimeMap' && to.query.mapId != imgBgObj.positionMapId) {
    router.replace({
      name: 'MapPageRealTimeMap',
      query: {
--- a/src/views/mapPage/realTimeMap/index.vue
+++ b/src/views/mapPage/realTimeMap/index.vue
@ -23,7 +23,7 @@
  </div>

  <!-- 新建任务的弹窗 -->
-  <createTaskDialog ref="createTaskDialogRef" :positionMapId="mapInfo.id" />
+  <createTaskDialog v-if="mapValue.length" ref="createTaskDialogRef" :positionMapId="mapValue[2]" />
 </template>

 <script setup>
@ -112,29 +112,22 @@ const getList = async () => {
  }

  list.value = mapList
+
+  if (query.mapId) {
+    let item = findDataById(data, Number(query.mapId))
+    mapValue.value = [String(item.floor), Number(item.id)]
+  }
+
  if (mapValue.value.length) {
    handleChangeMap(mapValue.value)
  } else {
    mapValue.value = [list.value[0].value, list.value[0].children[0].value]
-    mapInfo.value = list.value[0].children[0]
-      ? JSON.parse(JSON.stringify(list.value[0].children[0]))
-      : {
-          mapId: '',
-          floor: '',
-          area: ''
-        }
-    indexPageRef.value.getMapData(mapInfo.value)
+    indexPageRef.value.getMapData(JSON.parse(JSON.stringify(list.value[0].children[0])))
  }
 }
 const handleChangeMap = async (e) => {
-  mapInfo.value = findChildrenByValues(list.value, e)
-    ? findChildrenByValues(list.value, e)
-    : {
-        mapId: '',
-        floor: '',
-        area: ''
-      }
-  indexPageRef.value.getMapData(mapInfo.value)
+  let item = findChildrenByValues(list.value, e)
+  indexPageRef.value.getMapData(item)
 }
 //新建任务
 const createTaskDialogRef = ref()
@ -161,20 +154,28 @@ const editMap = () => {
  router.push({
    name: 'editMapPageRealTimeMap',
    query: {
-      mapId: mapInfo.value.id
+      mapId: mapValue.value[1]
    }
  })
 }

-//传输地图信息
-const mapInfo = ref({})
+const findDataById = (obj, id) => {
+  // 遍历 obj 的每一层
+  for (const floor in obj) {
+    // 遍历当前楼层的每个区域
+    for (const item of obj[floor]) {
+      // 如果找到匹配的 id，返回该数据
+      if (item.id === id) {
+        return item
+      }
+    }
+  }
+  // 如果没有找到，返回 null
+  return null
+}

 const { query } = useRoute() // 查询参数
-onMounted(async () => {
-  if (query.mapId) {
-    let res = await MapApi.getPositionMap(query.mapId)
-    mapInfo.value = res
-  }
+onMounted(() => {
  getList()
 })
 </script>
--- a/src/views/mapPage/taskManagement/createTask.vue
+++ b/src/views/mapPage/taskManagement/createTask.vue
@ -169,8 +169,8 @@
                    <el-option label="移动" :value="4" />
                    <el-option label="仅取货" :value="5" />
                    <el-option label="仅放货" :value="6" />
-                    <el-option label="扫描码" :value="7" />
-                    <el-option label="检测托盘类型" :value="8" />
+                    <!-- <el-option label="扫描码" :value="7" />
+                    <el-option label="检测托盘类型" :value="8" /> -->
                  </el-select>
                </el-form-item>
              </el-col>
@ -203,27 +203,36 @@
                    :prop="`taskDetailList[${index}].takeId`"
                    :rules="{ required: true, message: '取货位置不能为空', trigger: 'change' }"
                  >
-                    <el-select
-                      :disabled="!detailItem.takeType"
-                      v-model="detailItem.takeId"
-                      filterable
-                      remote
-                      reserve-keyword
-                      placeholder="请输入取货位置"
-                      :remote-method="
-                        (query) => {
-                          takeRemoteMethod(query, detailItem)
-                        }
-                      "
-                      :loading="loading"
-                    >
-                      <el-option
-                        v-for="item in detailItem.takeList"
-                        :key="item.id"
-                        :label="item.locationNo"
-                        :value="item.id"
-                      />
-                    </el-select>
+                    <div style="width: 100%; display: flex; align-items: center">
+                      <el-select
+                        :disabled="!detailItem.takeType"
+                        v-model="detailItem.takeId"
+                        filterable
+                        remote
+                        reserve-keyword
+                        placeholder="请输入取货位置"
+                        :remote-method="
+                          (query) => {
+                            takeRemoteMethod(query, detailItem)
+                          }
+                        "
+                        :loading="loading"
+                      >
+                        <el-option
+                          v-for="item in detailItem.takeList"
+                          :key="item.id"
+                          :label="item.locationNo"
+                          :value="item.id"
+                        />
+                      </el-select>
+                      <el-icon
+                        class="ml-2"
+                        size="20"
+                        color="#00329F"
+                        @click="chooseLocation('take', detailItem, index)"
+                        ><Location />
+                      </el-icon>
+                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
@ -253,27 +262,36 @@
                    :prop="`taskDetailList[${index}].releaseId`"
                    :rules="{ required: true, message: '放货位置不能为空', trigger: 'change' }"
                  >
-                    <el-select
-                      :disabled="!detailItem.releaseType"
-                      v-model="detailItem.releaseId"
-                      filterable
-                      remote
-                      reserve-keyword
-                      placeholder="请输入放货位置"
-                      :remote-method="
-                        (query) => {
-                          releaseRemoteMethod(query, detailItem)
-                        }
-                      "
-                      :loading="loading"
-                    >
-                      <el-option
-                        v-for="item in detailItem.releaseList"
-                        :key="item.id"
-                        :label="item.locationNo"
-                        :value="item.id"
-                      />
-                    </el-select>
+                    <div style="width: 100%; display: flex; align-items: center">
+                      <el-select
+                        :disabled="!detailItem.releaseType"
+                        v-model="detailItem.releaseId"
+                        filterable
+                        remote
+                        reserve-keyword
+                        placeholder="请输入放货位置"
+                        :remote-method="
+                          (query) => {
+                            releaseRemoteMethod(query, detailItem)
+                          }
+                        "
+                        :loading="loading"
+                      >
+                        <el-option
+                          v-for="item in detailItem.releaseList"
+                          :key="item.id"
+                          :label="item.locationNo"
+                          :value="item.id"
+                        />
+                      </el-select>
+                      <el-icon
+                        class="ml-2"
+                        size="20"
+                        color="#00329F"
+                        @click="chooseLocation('release', detailItem, index)"
+                        ><Location />
+                      </el-icon>
+                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
@ -442,27 +460,36 @@
                    :prop="`taskDetailList[${index}].takeId`"
                    :rules="{ required: true, message: '取货位置不能为空', trigger: 'change' }"
                  >
-                    <el-select
-                      :disabled="!detailItem.takeType"
-                      v-model="detailItem.takeId"
-                      filterable
-                      remote
-                      reserve-keyword
-                      placeholder="请输入取货位置"
-                      :remote-method="
-                        (query) => {
-                          takeRemoteMethod(query, detailItem)
-                        }
-                      "
-                      :loading="loading"
-                    >
-                      <el-option
-                        v-for="item in detailItem.takeList"
-                        :key="item.id"
-                        :label="item.locationNo"
-                        :value="item.id"
-                      />
-                    </el-select>
+                    <div style="width: 100%; display: flex; align-items: center">
+                      <el-select
+                        :disabled="!detailItem.takeType"
+                        v-model="detailItem.takeId"
+                        filterable
+                        remote
+                        reserve-keyword
+                        placeholder="请输入取货位置"
+                        :remote-method="
+                          (query) => {
+                            takeRemoteMethod(query, detailItem)
+                          }
+                        "
+                        :loading="loading"
+                      >
+                        <el-option
+                          v-for="item in detailItem.takeList"
+                          :key="item.id"
+                          :label="item.locationNo"
+                          :value="item.id"
+                        />
+                      </el-select>
+                      <el-icon
+                        class="ml-2"
+                        size="20"
+                        color="#00329F"
+                        @click="chooseLocation('take', detailItem, index)"
+                        ><Location />
+                      </el-icon>
+                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
@ -508,34 +535,43 @@
                  </el-form-item>
                </el-col>
                <el-col :span="12">
-                  <el-form-item
-                    required
-                    label="放货位置"
-                    :prop="`taskDetailList[${index}].releaseId`"
-                    :rules="{ required: true, message: '放货位置不能为空', trigger: 'change' }"
-                  >
-                    <el-select
-                      :disabled="!detailItem.releaseType"
-                      v-model="detailItem.releaseId"
-                      filterable
-                      remote
-                      reserve-keyword
-                      placeholder="请输入放货位置"
-                      :remote-method="
-                        (query) => {
-                          releaseRemoteMethod(query, detailItem)
-                        }
-                      "
-                      :loading="loading"
+                  <div style="width: 100%; display: flex; align-items: center">
+                    <el-form-item
+                      required
+                      label="放货位置"
+                      :prop="`taskDetailList[${index}].releaseId`"
+                      :rules="{ required: true, message: '放货位置不能为空', trigger: 'change' }"
                    >
-                      <el-option
-                        v-for="item in detailItem.releaseList"
-                        :key="item.id"
-                        :label="item.locationNo"
-                        :value="item.id"
-                      />
-                    </el-select>
-                  </el-form-item>
+                      <el-select
+                        :disabled="!detailItem.releaseType"
+                        v-model="detailItem.releaseId"
+                        filterable
+                        remote
+                        reserve-keyword
+                        placeholder="请输入放货位置"
+                        :remote-method="
+                          (query) => {
+                            releaseRemoteMethod(query, detailItem)
+                          }
+                        "
+                        :loading="loading"
+                      >
+                        <el-option
+                          v-for="item in detailItem.releaseList"
+                          :key="item.id"
+                          :label="item.locationNo"
+                          :value="item.id"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-icon
+                      class="ml-2"
+                      size="20"
+                      color="#00329F"
+                      @click="chooseLocation('release', detailItem, index)"
+                      ><Location />
+                    </el-icon>
+                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="24">
@ -554,7 +590,7 @@
              </el-row>
            </div>
            <!-- 扫描码 -->
-            <div v-if="detailItem.taskType === 7">
+            <!-- <div v-if="detailItem.taskType === 7">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item
@ -604,9 +640,9 @@
                  </el-form-item>
                </el-col>
              </el-row>
-            </div>
+            </div> -->
            <!-- 检测托盘类型 -->
-            <div v-if="detailItem.taskType === 8">
+            <!-- <div v-if="detailItem.taskType === 8">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item
@ -656,13 +692,17 @@
                  </el-form-item>
                </el-col>
              </el-row>
-            </div>
+            </div> -->
          </div>
        </div>
      </el-card>
    </el-form>

-    <locationSelectionDialog :positionMapId="null" />
+    <locationSelectionDialog
+      :positionMapId="null"
+      ref="locationSelectionDialogRef"
+      @locationSelectionDialogSuccess="locationSelectionDialogSuccess"
+    />
  </div>
 </template>

@ -1036,7 +1076,6 @@ const releaseTypeChange = (item) => {
 //提交表单
 const formRef = ref()
 const formLoading = ref(false)
-//校验数组的

 const submit = async () => {
  await formRef.value.validate(async (valid, fields) => {
@ -1056,6 +1095,59 @@ const submit = async () => {
  })
 }

+//打卡地图选择放货和取货位置
+//选择库位
+const locationSelectionDialogRef = ref()
+const chooseLocationType = ref('') //放货还是取货
+const locationTypeNumber = ref(1) //1库位 2线库 3区域
+const currentItemIndex = ref(0) // 选择的是哪一项
+const chooseLocation = (type, item, index) => {
+  chooseLocationType.value = type
+  currentItemIndex.value = index
+  if (type == 'take') {
+    //取货
+    locationTypeNumber.value = item.takeType
+  } else {
+    //放货
+    locationTypeNumber.value = item.releaseType
+  }
+  locationSelectionDialogRef.value.open(locationTypeNumber.value)
+}
+//成功选择库位
+const locationSelectionDialogSuccess = (item) => {
+  if (chooseLocationType.value == 'take') {
+    //取货
+    if (locationTypeNumber.value == 1) {
+      // 1库位
+      takeRemoteMethod(item.locationNo, formData.value.taskDetailList[currentItemIndex.value])
+      formData.value.taskDetailList[currentItemIndex.value].takeId = item.id
+    } else if (locationTypeNumber.value == 2) {
+      // 2线库
+      takeRemoteMethod(item.laneName, formData.value.taskDetailList[currentItemIndex.value])
+      formData.value.taskDetailList[currentItemIndex.value].takeId = item.laneId
+    } else {
+      // 3区域
+      takeRemoteMethod(item.areaName, formData.value.taskDetailList[currentItemIndex.value])
+      formData.value.taskDetailList[currentItemIndex.value].takeId = item.areaId
+    }
+  } else if (chooseLocationType.value == 'release') {
+    //放货
+    if (locationTypeNumber.value == 1) {
+      // 1库位
+      releaseRemoteMethod(item.locationNo, formData.value.taskDetailList[currentItemIndex.value])
+      formData.value.taskDetailList[currentItemIndex.value].releaseId = item.id
+    } else if (locationTypeNumber.value == 2) {
+      // 2线库
+      releaseRemoteMethod(item.laneName, formData.value.taskDetailList[currentItemIndex.value])
+      formData.value.taskDetailList[currentItemIndex.value].releaseId = item.laneId
+    } else {
+      // 3区域
+      releaseRemoteMethod(item.areaName, formData.value.taskDetailList[currentItemIndex.value])
+      formData.value.taskDetailList[currentItemIndex.value].releaseId = item.areaId
+    }
+  }
+}
+
 /** 初始化 **/
 onMounted(() => {
  getTaskNo()
@ -1099,12 +1191,13 @@ onMounted(() => {
  .task-list {
    display: flex;
    flex-wrap: wrap;
+    justify-content: space-between;
    padding: 6px 0 0 0;

    .task-item {
      border: 1px solid #e2e7f5;
      box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
-      width: 47%;
+      width: 48%;
      padding: 20px 20px 10px 20px;
      border-radius: 4px;
      margin: 0 11px 24px 11px;