Browse Source

✨ feat: 乐跑记录页接入类型展示与 public_id 详情跳转

管理端与用户端记录列表支持类型展示并改为优先使用 public_id 打开详情,用户页同时将类型替换原“我的记录”标识位。

Made-with: Cursor
Pchen0 1 month ago
parent
commit
f980aedf79

+ 19 - 2
src/pages/admin/lepaoRecords/lepaoRecords.vue

@@ -106,6 +106,13 @@
             slotName: 'name-filter',
             icon: () => h(IconSearch)
           }"></a-table-column>
+          <a-table-column title="乐跑类型" :width="120" ellipsis tooltip>
+            <template #cell="{ record }">
+              <a-tag :color="record.run_mode === 'manual' ? 'orangered' : 'arcoblue'">
+                {{ record.run_mode === 'manual' ? '手动乐跑' : '自动乐跑' }}
+              </a-tag>
+            </template>
+          </a-table-column>
           <a-table-column title="状态" ellipsis tooltip :width="230">
             <template #cell="{ record }">
               <div class="state">
@@ -146,7 +153,7 @@
           </a-table-column>
           <a-table-column title="" :width="100" fixed="right">
             <template #cell="{ record }">
-              <a-button @click="$router.push(`/admin/lepaoRecords/${record.id}`)">查看详情</a-button>
+              <a-button @click="openDetail(record)">查看详情</a-button>
             </template>
           </a-table-column>
         </template>
@@ -158,13 +165,23 @@
 
 <script setup>
 import { ref, reactive, onMounted, h } from 'vue'
+import { useRouter } from 'vue-router'
 import { adminLepaoRecords } from '@/api/lepao'
-import { Notification } from '@arco-design/web-vue'
+import { Notification, Message } from '@arco-design/web-vue'
 import { IconSearch } from '@arco-design/web-vue/es/icon'
 import { getSemesterTimestamps } from '@/utils/util'
 
 const data = ref([])
 const loading = ref(false)
+const router = useRouter()
+
+const openDetail = (record) => {
+  const key = record.public_id || record.id
+  if (!key) {
+    return Message.warning('该记录缺少可用标识,无法打开详情')
+  }
+  return router.push(`/admin/lepaoRecords/${encodeURIComponent(String(key))}`)
+}
 
 const queryData = reactive({
   name: '',

+ 8 - 2
src/pages/admin/lepaoRecords/recordDetail.vue

@@ -23,17 +23,22 @@ import { useRoute } from 'vue-router'
 import MapContainer from '@/components/Map/MapContainer.vue'
 
 const route = useRoute()
+const uuidLike = /^[0-9a-fA-F-]{16,}$/
 
 const loading = ref(false)
 const showMap = ref(false)
 const data = ref({})
 const info = ref([])
 
-const GetRecordDetail = async (id) => {
+const GetRecordDetail = async (routeId) => {
     try {
         loading.value = true
         showMap.value = false
-        const res = await adminGetRecordDetail({ id })
+        const raw = decodeURIComponent(String(routeId || ''))
+        const payload = uuidLike.test(raw)
+            ? { public_id: raw }
+            : { id: raw }
+        const res = await adminGetRecordDetail(payload)
         if (!res || res.code !== 0)
             return Notification.error({
                 title: '获取路径数据失败!',
@@ -46,6 +51,7 @@ const GetRecordDetail = async (id) => {
         info.value = [
             { label: '账号名称', value: res.data.name },
             { label: '乐跑账号', value: res.data.lepao_account },
+            { label: '乐跑类型', value: res.data.run_mode === 'manual' ? '手动乐跑' : '自动乐跑' },
             { label: '跑区名称', value: res.data.result.pass_tit },
             { label: '路线ID', value: res.data.path_id },
             { label: '记录时间', value: stramptoTime(res.data.time) },

+ 15 - 4
src/pages/lepao/lepaoRecords/index.vue

@@ -76,10 +76,11 @@
         </template>
 
         <template #columns>
-          <a-table-column :width="80">
+          <a-table-column :width="100">
             <template #cell="{ record }">
               <div>
-                <a-tag color="arcoblue" v-if="record.uuid === user.uuid" size="small">我的记录</a-tag>
+                <a-tag color="orangered" v-if="record.uuid === user.uuid && record.run_mode === 'manual'" size="small">手动乐跑</a-tag>
+                <a-tag color="arcoblue" v-else-if="record.uuid === user.uuid" size="small">自动乐跑</a-tag>
                 <a-tag color="orangered" size="small" v-else>关联记录</a-tag>
               </div>
             </template>
@@ -143,7 +144,7 @@
           </a-table-column>
           <a-table-column title="" :width="100" fixed="right">
             <template #cell="{ record }">
-              <a-button @click="$router.push(`/lepao/recordDetail/${record.id}`)">查看详情</a-button>
+              <a-button @click="openDetail(record)">查看详情</a-button>
             </template>
           </a-table-column>
         </template>
@@ -155,14 +156,16 @@
 
 <script setup>
 import { ref, reactive, onMounted, h } from 'vue'
+import { useRouter } from 'vue-router'
 import { lepaoRecords } from '@/api/lepao'
-import { Notification } from '@arco-design/web-vue'
+import { Notification, Message } from '@arco-design/web-vue'
 import { IconSearch } from '@arco-design/web-vue/es/icon'
 import { useUserStore } from '@/store/modules/user'
 import { useRoute } from 'vue-router'
 import { getNotice, getSemesterTimestamps } from '@/utils/util'
 
 const notice = ref('')
+const router = useRouter()
 
 const GetNotice = async () => {
   const { path } = useRoute()
@@ -235,6 +238,14 @@ const getRecords = async () => {
   }
 }
 
+const openDetail = (record) => {
+  const key = record.public_id || record.id
+  if (!key) {
+    return Message.warning('该记录缺少可用标识,无法打开详情')
+  }
+  return router.push(`/lepao/recordDetail/${encodeURIComponent(String(key))}`)
+}
+
 // 分页 - 页码变化
 const handlePageChange = (page) => {
   pagination.current = page

+ 8 - 2
src/pages/lepao/lepaoRecords/recordDetail.vue

@@ -23,17 +23,22 @@ import { useRoute } from 'vue-router'
 import MapContainer from '@/components/Map/MapContainer.vue'
 
 const route = useRoute()
+const uuidLike = /^[0-9a-fA-F-]{16,}$/
 
 const loading = ref(false)
 const showMap = ref(false)
 const data = ref({})
 const info = ref([])
 
-const getRecordDetail = async (id) => {
+const getRecordDetail = async (routeId) => {
     try {
         loading.value = true
         showMap.value = false
-        const res = await GetRecordDetail({ id })
+        const raw = decodeURIComponent(String(routeId || ''))
+        const payload = uuidLike.test(raw)
+            ? { public_id: raw }
+            : { id: raw }
+        const res = await GetRecordDetail(payload)
         if (!res || res.code !== 0)
             return Notification.error({
                 title: '获取路径数据失败!',
@@ -46,6 +51,7 @@ const getRecordDetail = async (id) => {
         info.value = [
             { label: '账号名称', value: res.data.name },
             { label: '乐跑账号', value: res.data.lepao_account },
+            { label: '乐跑类型', value: res.data.run_mode === 'manual' ? '手动乐跑' : '自动乐跑' },
             { label: '跑区名称', value: res.data.result.pass_tit },
             { label: '记录时间', value: stramptoTime(res.data.time) },
             { label: '开始时间', value: stramptoTime(res.data.result.start_time * 1000) },