From 3cb31edb2e64c9ae1bc4ccac29bd9d819073e4b8 Mon Sep 17 00:00:00 2001
From: yyy <2605810609@qq.com>
Date: Mon, 3 Mar 2025 14:53:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=96=E8=B4=A7=E4=BD=8D=E7=BD=AE=E5=92=8C?=
 =?UTF-8?q?=E6=94=BE=E8=B4=A7=E4=BD=8D=E7=BD=AE=E5=A2=9E=E5=8A=A0=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E7=82=B9=E5=87=BB=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/locationSelectionDialog.vue    | 108 +++++--
 .../components/createTaskDialog.vue           |   1 -
 src/views/mapPage/realTimeMap/editMap.vue     |   2 +-
 src/views/mapPage/realTimeMap/index.vue       |  51 +--
 .../mapPage/taskManagement/createTask.vue     | 291 ++++++++++++------
 5 files changed, 308 insertions(+), 145 deletions(-)

diff --git a/src/views/mapPage/components/locationSelectionDialog.vue b/src/views/mapPage/components/locationSelectionDialog.vue
index a23f1173..43ffb561 100644
--- 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 {
diff --git a/src/views/mapPage/realTimeMap/components/createTaskDialog.vue b/src/views/mapPage/realTimeMap/components/createTaskDialog.vue
index 1936103d..5e57e43a 100644
--- 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) {
diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index de7a5b54..8f926c08 100644
--- 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: {
diff --git a/src/views/mapPage/realTimeMap/index.vue b/src/views/mapPage/realTimeMap/index.vue
index aafcd4a0..6a929082 100644
--- 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>
diff --git a/src/views/mapPage/taskManagement/createTask.vue b/src/views/mapPage/taskManagement/createTask.vue
index 8cfaa375..a9b4fe4a 100644
--- 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;