{"ast":null,"code":"import { ref, reactive, onMounted, computed } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport { useStore } from 'vuex';\nimport { ElMessage, ElMessageBox } from 'element-plus';\nimport { getOrderDetail, updateOrderStatus, cancelOrder } from '@/api/order';\nexport default {\n  __name: 'OrderDetail',\n  setup(__props, {\n    expose: __expose\n  }) {\n    __expose();\n    const route = useRoute();\n    const router = useRouter();\n    const store = useStore();\n    const loading = ref(false);\n    const cancelLoading = ref(false);\n    const updateLoading = ref(false);\n    const statusDialogVisible = ref(false);\n    const order = ref({});\n    const isAdmin = computed(() => {\n      return store.state.userInfo.roles?.includes('ROLE_ADMIN');\n    });\n    const statusForm = reactive({\n      status: ''\n    });\n\n    // 可选的状态列表\n    const availableStatuses = [{\n      value: 1,\n      label: '已接单'\n    }, {\n      value: 2,\n      label: '运输中'\n    }, {\n      value: 3,\n      label: '已完成'\n    }];\n    const getStatusText = status => {\n      const statusMap = {\n        0: '待处理',\n        1: '已接单',\n        2: '运输中',\n        3: '已完成',\n        4: '已取消'\n      };\n      return statusMap[status] || '未知状态';\n    };\n    const getStatusType = status => {\n      const typeMap = {\n        0: 'info',\n        1: 'warning',\n        2: 'warning',\n        3: 'success',\n        4: 'danger'\n      };\n      return typeMap[status] || '';\n    };\n\n    // 加载订单详情\n    const loadOrderDetail = async () => {\n      loading.value = true;\n      try {\n        const res = await getOrderDetail(route.params.id);\n        order.value = res.data;\n      } catch (error) {\n        console.error('加载订单详情失败:', error);\n        ElMessage.error('加载订单详情失败');\n      } finally {\n        loading.value = false;\n      }\n    };\n\n    // 取消订单\n    const handleCancel = async () => {\n      try {\n        await ElMessageBox.confirm('确定要取消该订单吗？', '提示', {\n          type: 'warning'\n        });\n        cancelLoading.value = true;\n        await cancelOrder(order.value.id);\n        ElMessage.success('订单已取消');\n        loadOrderDetail();\n      } catch (error) {\n        if (error !== 'cancel') {\n          console.error('取消订单失败:', error);\n          ElMessage.error('取消订单失败');\n        }\n      } finally {\n        cancelLoading.value = false;\n      }\n    };\n\n    // 打开状态更新对话框\n    const handleUpdateStatus = () => {\n      statusForm.status = '';\n      statusDialogVisible.value = true;\n    };\n\n    // 确认更新状态\n    const confirmUpdateStatus = async () => {\n      if (!statusForm.status) {\n        ElMessage.warning('请选择状态');\n        return;\n      }\n      try {\n        updateLoading.value = true;\n        await updateOrderStatus(order.value.id, statusForm.status);\n        ElMessage.success('状态更新成功');\n        statusDialogVisible.value = false;\n        loadOrderDetail();\n      } catch (error) {\n        console.error('更新状态失败:', error);\n        ElMessage.error('更新状态失败');\n      } finally {\n        updateLoading.value = false;\n      }\n    };\n    onMounted(() => {\n      loadOrderDetail();\n    });\n    const __returned__ = {\n      route,\n      router,\n      store,\n      loading,\n      cancelLoading,\n      updateLoading,\n      statusDialogVisible,\n      order,\n      isAdmin,\n      statusForm,\n      availableStatuses,\n      getStatusText,\n      getStatusType,\n      loadOrderDetail,\n      handleCancel,\n      handleUpdateStatus,\n      confirmUpdateStatus,\n      ref,\n      reactive,\n      onMounted,\n      computed,\n      get useRoute() {\n        return useRoute;\n      },\n      get useRouter() {\n        return useRouter;\n      },\n      get useStore() {\n        return useStore;\n      },\n      get ElMessage() {\n        return ElMessage;\n      },\n      get ElMessageBox() {\n        return ElMessageBox;\n      },\n      get getOrderDetail() {\n        return getOrderDetail;\n      },\n      get updateOrderStatus() {\n        return updateOrderStatus;\n      },\n      get cancelOrder() {\n        return cancelOrder;\n      }\n    };\n    Object.defineProperty(__returned__, '__isScriptSetup', {\n      enumerable: false,\n      value: true\n    });\n    return __returned__;\n  }\n};","map":{"version":3,"names":["ref","reactive","onMounted","computed","useRoute","useRouter","useStore","ElMessage","ElMessageBox","getOrderDetail","updateOrderStatus","cancelOrder","route","router","store","loading","cancelLoading","updateLoading","statusDialogVisible","order","isAdmin","state","userInfo","roles","includes","statusForm","status","availableStatuses","value","label","getStatusText","statusMap","getStatusType","typeMap","loadOrderDetail","res","params","id","data","error","console","handleCancel","confirm","type","success","handleUpdateStatus","confirmUpdateStatus","warning"],"sources":["D:/language/VScode/Front-end logistics/src/views/order/OrderDetail.vue"],"sourcesContent":["<template>\r\n  <div class=\"order-detail\">\r\n    <el-card v-loading=\"loading\">\r\n      <template #header>\r\n        <div class=\"card-header\">\r\n          <span>订单详情</span>\r\n          <el-button @click=\"router.back()\">返回</el-button>\r\n        </div>\r\n      </template>\r\n      \r\n      <el-descriptions :column=\"2\" border>\r\n        <el-descriptions-item label=\"订单编号\">{{ order.orderNo }}</el-descriptions-item>\r\n        <el-descriptions-item label=\"订单状态\">\r\n          <el-tag :type=\"getStatusType(order.status)\">\r\n            {{ getStatusText(order.status) }}\r\n          </el-tag>\r\n        </el-descriptions-item>\r\n        <el-descriptions-item label=\"商品名称\">{{ order.goodsName }}</el-descriptions-item>\r\n        <el-descriptions-item label=\"商品数量\">{{ order.goodsQuantity }}</el-descriptions-item>\r\n        <el-descriptions-item label=\"起始地\">{{ order.startLocation }}</el-descriptions-item>\r\n        <el-descriptions-item label=\"目的地\">{{ order.endLocation }}</el-descriptions-item>\r\n        <el-descriptions-item label=\"创建时间\">{{ order.createTime }}</el-descriptions-item>\r\n        <el-descriptions-item label=\"更新时间\">{{ order.updateTime }}</el-descriptions-item>\r\n      </el-descriptions>\r\n      \r\n      <div class=\"operation-buttons\">\r\n        <!-- 待处理状态可以取消订单 -->\r\n        <el-button \r\n          v-if=\"order.status === 0\"\r\n          type=\"danger\" \r\n          @click=\"handleCancel\"\r\n          :loading=\"cancelLoading\"\r\n        >\r\n          取消订单\r\n        </el-button>\r\n        \r\n        <!-- 管理员可以更新订单状态 -->\r\n        <el-button \r\n          v-if=\"isAdmin && order.status !== 3 && order.status !== 4\"\r\n          type=\"primary\" \r\n          @click=\"handleUpdateStatus\"\r\n          :loading=\"updateLoading\"\r\n        >\r\n          更新状态\r\n        </el-button>\r\n      </div>\r\n      \r\n      <!-- 状态更新对话框 -->\r\n      <el-dialog\r\n        v-model=\"statusDialogVisible\"\r\n        title=\"更新订单状态\"\r\n        width=\"30%\"\r\n      >\r\n        <el-form :model=\"statusForm\">\r\n          <el-form-item label=\"选择状态\">\r\n            <el-select v-model=\"statusForm.status\">\r\n              <el-option\r\n                v-for=\"item in availableStatuses\"\r\n                :key=\"item.value\"\r\n                :label=\"item.label\"\r\n                :value=\"item.value\"\r\n              />\r\n            </el-select>\r\n          </el-form-item>\r\n        </el-form>\r\n        <template #footer>\r\n          <span class=\"dialog-footer\">\r\n            <el-button @click=\"statusDialogVisible = false\">取消</el-button>\r\n            <el-button type=\"primary\" @click=\"confirmUpdateStatus\">\r\n              确认\r\n            </el-button>\r\n          </span>\r\n        </template>\r\n      </el-dialog>\r\n    </el-card>\r\n  </div>\r\n</template>\r\n\r\n<script setup>\r\nimport { ref, reactive, onMounted, computed } from 'vue'\r\nimport { useRoute, useRouter } from 'vue-router'\r\nimport { useStore } from 'vuex'\r\nimport { ElMessage, ElMessageBox } from 'element-plus'\r\nimport { getOrderDetail, updateOrderStatus, cancelOrder } from '@/api/order'\r\n\r\nconst route = useRoute()\r\nconst router = useRouter()\r\nconst store = useStore()\r\n\r\nconst loading = ref(false)\r\nconst cancelLoading = ref(false)\r\nconst updateLoading = ref(false)\r\nconst statusDialogVisible = ref(false)\r\nconst order = ref({})\r\n\r\nconst isAdmin = computed(() => {\r\n  return store.state.userInfo.roles?.includes('ROLE_ADMIN')\r\n})\r\n\r\nconst statusForm = reactive({\r\n  status: ''\r\n})\r\n\r\n// 可选的状态列表\r\nconst availableStatuses = [\r\n  { value: 1, label: '已接单' },\r\n  { value: 2, label: '运输中' },\r\n  { value: 3, label: '已完成' }\r\n]\r\n\r\nconst getStatusText = (status) => {\r\n  const statusMap = {\r\n    0: '待处理',\r\n    1: '已接单',\r\n    2: '运输中',\r\n    3: '已完成',\r\n    4: '已取消'\r\n  }\r\n  return statusMap[status] || '未知状态'\r\n}\r\n\r\nconst getStatusType = (status) => {\r\n  const typeMap = {\r\n    0: 'info',\r\n    1: 'warning',\r\n    2: 'warning',\r\n    3: 'success',\r\n    4: 'danger'\r\n  }\r\n  return typeMap[status] || ''\r\n}\r\n\r\n// 加载订单详情\r\nconst loadOrderDetail = async () => {\r\n  loading.value = true\r\n  try {\r\n    const res = await getOrderDetail(route.params.id)\r\n    order.value = res.data\r\n  } catch (error) {\r\n    console.error('加载订单详情失败:', error)\r\n    ElMessage.error('加载订单详情失败')\r\n  } finally {\r\n    loading.value = false\r\n  }\r\n}\r\n\r\n// 取消订单\r\nconst handleCancel = async () => {\r\n  try {\r\n    await ElMessageBox.confirm('确定要取消该订单吗？', '提示', {\r\n      type: 'warning'\r\n    })\r\n    \r\n    cancelLoading.value = true\r\n    await cancelOrder(order.value.id)\r\n    ElMessage.success('订单已取消')\r\n    loadOrderDetail()\r\n  } catch (error) {\r\n    if (error !== 'cancel') {\r\n      console.error('取消订单失败:', error)\r\n      ElMessage.error('取消订单失败')\r\n    }\r\n  } finally {\r\n    cancelLoading.value = false\r\n  }\r\n}\r\n\r\n// 打开状态更新对话框\r\nconst handleUpdateStatus = () => {\r\n  statusForm.status = ''\r\n  statusDialogVisible.value = true\r\n}\r\n\r\n// 确认更新状态\r\nconst confirmUpdateStatus = async () => {\r\n  if (!statusForm.status) {\r\n    ElMessage.warning('请选择状态')\r\n    return\r\n  }\r\n  \r\n  try {\r\n    updateLoading.value = true\r\n    await updateOrderStatus(order.value.id, statusForm.status)\r\n    ElMessage.success('状态更新成功')\r\n    statusDialogVisible.value = false\r\n    loadOrderDetail()\r\n  } catch (error) {\r\n    console.error('更新状态失败:', error)\r\n    ElMessage.error('更新状态失败')\r\n  } finally {\r\n    updateLoading.value = false\r\n  }\r\n}\r\n\r\nonMounted(() => {\r\n  loadOrderDetail()\r\n})\r\n</script>\r\n\r\n<style scoped>\r\n.order-detail {\r\n  max-width: 1000px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.card-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.operation-buttons {\r\n  margin-top: 20px;\r\n  display: flex;\r\n  gap: 10px;\r\n  justify-content: flex-end;\r\n}\r\n</style> "],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}