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

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,9 +147,37 @@ 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 item = findDataById(res, props.positionMapId)
+    cascaderValue.value = [item.floor, item.id]
+  } else {
+    cascaderValue.value = [cascaderList.value[0].value, cascaderList.value[0].children[0].value]
+  }
+
+  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
@@ -144,11 +187,27 @@ const getMapList = async () => {
   imgBgObj.origin = yamlJson.origin
   imgBgObj.resolution = yamlJson.resolution
   imgBgObj.showHeight = (imgBgObj.showWidth * imgBgObj.height) / imgBgObj.width
-  } else {
+  await getMapData()
+  await getAllNodeList()
 }
 
-  getMapData()
+const findDataById = (obj, id) => {
-  getAllNodeList()
+  // 遍历 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 {
+  .my-header {
-    padding: 10px 20px 20px 0;
+    display: flex;
-    border-top: none !important;
+    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 {

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) {

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: {

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]
+    indexPageRef.value.getMapData(JSON.parse(JSON.stringify(list.value[0].children[0])))
-      ? JSON.parse(JSON.stringify(list.value[0].children[0]))
-      : {
-          mapId: '',
-          floor: '',
-          area: ''
-        }
-    indexPageRef.value.getMapData(mapInfo.value)
   }
 }
 const handleChangeMap = async (e) => {
-  mapInfo.value = findChildrenByValues(list.value, e)
+  let item = findChildrenByValues(list.value, e)
-    ? findChildrenByValues(list.value, e)
+  indexPageRef.value.getMapData(item)
-    : {
-        mapId: '',
-        floor: '',
-        area: ''
-      }
-  indexPageRef.value.getMapData(mapInfo.value)
 }
 //新建任务
 const createTaskDialogRef = ref()
@@ -161,20 +154,28 @@ const editMap = () => {
   router.push({
     name: 'editMapPageRealTimeMap',
     query: {
-      mapId: mapInfo.value.id
+      mapId: mapValue.value[1]
     }
   })
 }
 
-//传输地图信息
+const findDataById = (obj, id) => {
-const mapInfo = ref({})
+  // 遍历 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 () => {
+onMounted(() => {
-  if (query.mapId) {
-    let res = await MapApi.getPositionMap(query.mapId)
-    mapInfo.value = res
-  }
   getList()
 })
 </script>

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="7" />
-                    <el-option label="检测托盘类型" :value="8" />
+                    <el-option label="检测托盘类型" :value="8" /> -->
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -203,6 +203,7 @@
                     :prop="`taskDetailList[${index}].takeId`"
                     :rules="{ required: true, message: '取货位置不能为空', trigger: 'change' }"
                   >
+                    <div style="width: 100%; display: flex; align-items: center">
                       <el-select
                         :disabled="!detailItem.takeType"
                         v-model="detailItem.takeId"
@@ -224,6 +225,14 @@
                           :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,6 +262,7 @@
                     :prop="`taskDetailList[${index}].releaseId`"
                     :rules="{ required: true, message: '放货位置不能为空', trigger: 'change' }"
                   >
+                    <div style="width: 100%; display: flex; align-items: center">
                       <el-select
                         :disabled="!detailItem.releaseType"
                         v-model="detailItem.releaseId"
@@ -274,6 +284,14 @@
                           :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,6 +460,7 @@
                     :prop="`taskDetailList[${index}].takeId`"
                     :rules="{ required: true, message: '取货位置不能为空', trigger: 'change' }"
                   >
+                    <div style="width: 100%; display: flex; align-items: center">
                       <el-select
                         :disabled="!detailItem.takeType"
                         v-model="detailItem.takeId"
@@ -463,6 +482,14 @@
                           :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,6 +535,7 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
+                  <div style="width: 100%; display: flex; align-items: center">
                     <el-form-item
                       required
                       label="放货位置"
@@ -536,6 +564,14 @@
                         />
                       </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;