完成设置模块当中的配送员管理

2026-03-18 16:12:37 +08:00
parent b7c8881e55
commit f1a6c18dfb
8 changed files with 2603 additions and 260 deletions
--- a/pages/mall/admin/setting/delivery/management/index.uvue
+++ b/pages/mall/admin/setting/delivery/management/index.uvue
@@ -16,9 +16,21 @@
          <view class="th" style="flex: 3;">添加时间</view>
          <view class="th" style="flex: 2;">操作</view>
        </view>
+        <!-- 加载中 -->
+        <view v-if="loading" class="table-loading">
+          <text class="table-tip">加载中...</text>
+        </view>
+        <!-- 错误提示 -->
+        <view v-else-if="fetchError !== ''" class="table-error">
+          <text class="table-tip-err">{{ fetchError }}</text>
+        </view>
+        <!-- 空数据 -->
+        <view v-else-if="pagedList.length === 0" class="table-empty">
+          <text class="table-tip">暂无配送员数据</text>
+        </view>
        <view class="table-body">
          <view v-for="item in pagedList" :key="item.id" class="tr">
-            <view class="td" style="flex: 1;">{{ item.id }}</view>
+            <view class="td" style="flex: 1;">{{ item.id.length > 8 ? item.id.substring(0, 8) : item.id }}</view>
            <view class="td" style="flex: 1.5;">
              <image class="avatar" :src="item.avatar" mode="aspectFill" />
            </view>
@@ -29,6 +41,7 @@
            </view>
            <view class="td" style="flex: 3;">{{ item.addTime }}</view>
            <view class="td" style="flex: 2;">
+              <text class="action-btn" @click="onDetail(item)">详情</text>
              <text class="action-btn" @click="onEdit(item)">编辑</text>
              <text class="action-btn-del" @click="onDel(item)">删除</text>
            </view>
@@ -53,14 +66,40 @@
      />
    </view>
  </view>
+
+  <!-- 配送员详情抽屉 -->
+  <DriverDetailDrawer
+    :visible="drawerVisible"
+    :driverId="selectedDriverId"
+    @update:visible="(v: boolean) => { drawerVisible = v }"
+  />
+
+  <!-- 配送员编辑抽屉 -->
+  <DriverEditDrawer
+    :visible="editDrawerVisible"
+    :driverId="selectedEditId"
+    @update:visible="(v: boolean) => { editDrawerVisible = v }"
+    @saved="fetchDrivers(currentPage, pageSize)"
+  />
+
+  <!-- 添加配送员抽屉 -->
+  <DriverAddDrawer
+    :visible="addDrawerVisible"
+    @update:visible="(v: boolean) => { addDrawerVisible = v }"
+    @saved="onAddSaved"
+  />
 </template>

 <script setup lang="uts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
+import supa from '@/components/supadb/aksupainstance.uts'
+import DriverDetailDrawer from './components/DriverDetailDrawer.uvue'
+import DriverEditDrawer from './components/DriverEditDrawer.uvue'
+import DriverAddDrawer from './components/DriverAddDrawer.uvue'

-type CourierItem = {
-  id: number
+type DriverRow = {
+  id: string
  avatar: string
  name: string
  phone: string
@@ -68,31 +107,121 @@ type CourierItem = {
  addTime: string
 }

-// ========== MOCK DATA START ==========
-// TODO: 接真实接口时替换此处 courierList 为 fetchCourierList() 调用
-const courierList = ref<CourierItem[]>([
-  { id: 120, avatar: '/static/logo.png', name: '王明', phone: '13812345678', isshow: true, addTime: '2025-06-29 21:45:19' },
-  { id: 119, avatar: '/static/logo.png', name: '李红', phone: '13987654321', isshow: true, addTime: '2025-06-28 18:40:26' },
-  { id: 118, avatar: '/static/logo.png', name: '张伟', phone: '15800001111', isshow: true, addTime: '2025-06-27 09:00:00' },
-  { id: 117, avatar: '/static/logo.png', name: '刘洋', phone: '15900002222', isshow: false, addTime: '2025-06-26 15:14:40' },
-  { id: 116, avatar: '/static/logo.png', name: '陈娟', phone: '13600003333', isshow: true, addTime: '2025-06-25 10:00:00' },
-  { id: 115, avatar: '/static/logo.png', name: '杨帆', phone: '13700004444', isshow: true, addTime: '2025-06-24 08:30:00' },
-  { id: 114, avatar: '/static/logo.png', name: '赵雷', phone: '18900005555', isshow: false, addTime: '2025-06-23 11:20:00' },
-  { id: 113, avatar: '/static/logo.png', name: '周芳', phone: '13500006666', isshow: true, addTime: '2025-06-22 14:50:00' },
-  { id: 112, avatar: '/static/logo.png', name: '吴勇', phone: '15600007777', isshow: true, addTime: '2025-06-21 16:10:00' },
-  { id: 111, avatar: '/static/logo.png', name: '郑山', phone: '18700008888', isshow: true, addTime: '2025-06-20 09:40:00' },
-  { id: 110, avatar: '/static/logo.png', name: '孙海', phone: '13900009999', isshow: false, addTime: '2025-06-19 13:00:00' },
-  { id: 109, avatar: '/static/logo.png', name: '马琳', phone: '15300010101', isshow: true, addTime: '2025-06-18 07:50:00' },
-  { id: 108, avatar: '/static/logo.png', name: '胡兴', phone: '18600011111', isshow: true, addTime: '2025-06-17 12:00:00' },
-  { id: 107, avatar: '/static/logo.png', name: '高雪', phone: '13200012222', isshow: true, addTime: '2025-06-16 15:30:00' },
-  { id: 106, avatar: '/static/logo.png', name: 'cheshi', phone: '18943652356', isshow: true, addTime: '2025-06-15 21:45:19' },
-  { id: 105, avatar: '/static/logo.png', name: 'dl', phone: '15648569914', isshow: true, addTime: '2025-06-14 18:40:26' },
-  { id: 104, avatar: '/static/logo.png', name: '小牛马', phone: '13548652258', isshow: true, addTime: '2025-06-13 15:14:40' },
-  { id: 103, avatar: '/static/logo.png', name: '小李', phone: '13200013333', isshow: false, addTime: '2025-06-12 10:00:00' },
-  { id: 102, avatar: '/static/logo.png', name: '小刘', phone: '15000014444', isshow: true, addTime: '2025-06-11 09:00:00' },
-  { id: 101, avatar: '/static/logo.png', name: '小王', phone: '13300015555', isshow: true, addTime: '2025-06-10 08:00:00' }
-])
-// ========== MOCK DATA END ==========
+// ========== 数据状态 ==========
+const driverList = ref<DriverRow[]>([])
+const loading = ref(false)
+const fetchError = ref('')
+
+// ========== 详情抽屉 ==========
+const drawerVisible = ref(false)
+const selectedDriverId = ref('')
+
+// ========== 编辑抽屉 ==========
+const editDrawerVisible = ref(false)
+const selectedEditId = ref('')
+
+// ========== 添加抽屉 ==========
+const addDrawerVisible = ref(false)
+
+// ========== 字段映射 ==========
+function formatTime(ts: string): string {
+  if (ts === '' || ts == null) return '—'
+  const tIdx = ts.indexOf('T')
+  if (tIdx > -1) {
+    const date = ts.substring(0, tIdx)
+    const timeFull = ts.substring(tIdx + 1)
+    const dotIdx = timeFull.indexOf('.')
+    const time = dotIdx > -1 ? timeFull.substring(0, dotIdx) : timeFull.substring(0, 8)
+    return date + ' ' + time
+  }
+  return ts
+}
+
+function mapDbRow(row: UTSJSONObject): DriverRow {
+  const id = row.getString('id') ?? ''
+  const realName = row.getString('real_name') ?? '—'
+  const status = row.getNumber('status') ?? 1
+  const createdAt = row.getString('created_at') ?? ''
+  // JOIN 字段来自 ak_users（别名 user_info）
+  let avatar = '/static/logo.png'
+  let phone = '—'
+  const userInfo = row.getJSON('user_info')
+  if (userInfo != null) {
+    const avatarUrl = userInfo.getString('avatar_url') ?? ''
+    if (avatarUrl !== '') avatar = avatarUrl
+    const phoneVal = userInfo.getString('phone') ?? ''
+    if (phoneVal !== '') phone = phoneVal
+  }
+  return {
+    id: id,
+    avatar: avatar,
+    name: realName !== '' ? realName : '—',
+    phone: phone,
+    isshow: status === 1,
+    addTime: formatTime(createdAt)
+  } as DriverRow
+}
+
+// ========== 服务端按页查询 ==========
+// 查询字段说明：
+//   ml_delivery_drivers 本表字段：id, real_name, status, created_at
+//   JOIN ak_users（通过 user_id FK）取：avatar_url, phone
+//   敏感字段（id_card, driver_license, current_lat, current_lng）不纳入查询
+const fetchDrivers = async (page: number, ps: number) => {
+  if (loading.value) return  // 防止并发重复请求
+  loading.value = true
+  fetchError.value = ''
+  try {
+    const offset = (page - 1) * ps
+    // offset 注入 filter，使用 limit+offset URL 参数方案，避免 Range 头 416 问题
+    const offsetFilter = offset > 0 ? `offset=${offset}` : null
+    const res = await supa.select(
+      'ml_delivery_drivers',
+      offsetFilter,
+      {
+        // 只取列表页所需字段，JOIN ak_users 别名为 user_info
+        columns: 'id,real_name,status,created_at,user_info:ak_users!user_id(avatar_url,phone)',
+        limit: ps,
+        order: 'created_at.desc',  // 稳定排序：按创建时间降序
+        count: 'exact'              // 触发 Prefer: count=exact → Content-Range 总行数
+      }
+    )
+    if (res.status >= 200 && res.status < 300 && res.data != null) {
+      driverList.value = (res.data as UTSJSONObject[]).map((row: UTSJSONObject): DriverRow => mapDbRow(row))
+      // 从 Content-Range 响应头解析真实总行数（格式：0-14/total）
+      let totalCount = 0
+      const hdrs = res.headers
+      if (hdrs != null) {
+        let cr: string | null = null
+        if (typeof (hdrs as any).get === 'function') {
+          cr = (hdrs as any).get('content-range') as string | null
+        }
+        if (cr == null) {
+          cr = (hdrs as UTSJSONObject)['content-range'] as string | null
+        }
+        if (cr != null) {
+          const m = /\/(\d+)$/.exec(cr)
+          if (m != null) totalCount = parseInt(m[1] ?? '0')
+        }
+      }
+      // Content-Range 解析失败时：以 offset + 当前页条数 作保守兜底
+      if (totalCount === 0) {
+        totalCount = offset + (Array.isArray(res.data) ? (res.data as UTSJSONObject[]).length : 0)
+      }
+      total.value = totalCount
+    } else {
+      fetchError.value = '加载配送员列表失败，请检查网络或权限配置'
+    }
+  } catch (e) {
+    fetchError.value = '请求异常，请稍后重试'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchDrivers(1, pageSize.value)
+})

 // ========== PAGINATION STATE ==========
 const currentPage = ref(1)
@@ -101,12 +230,9 @@ const jumpPageInput = ref('')
 const pageSizeOptions = [10, 15, 20, 30, 50]
 const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
 const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
-const total = computed(() => courierList.value.length)
+const total = ref(0)  // 来自服务端 Content-Range 真实总行数
 const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
-const pagedList = computed(() => {
-  const start = (currentPage.value - 1) * pageSize.value
-  return courierList.value.slice(start, start + pageSize.value)
-})
+const pagedList = computed(() => driverList.value)  // 服务端已按页返回，直接展示当前页数据
 const visiblePages = computed((): number[] => {
  const t = totalPage.value; const cur = currentPage.value
  if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
@@ -114,32 +240,93 @@ const visiblePages = computed((): number[] => {
  if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
  return [1, -1, cur - 1, cur, cur + 1, -1, t]
 })
-const handlePageChange = (p: number) => { currentPage.value = p }
+const handlePageChange = (p: number) => {
+  if (p < 1 || p > totalPage.value || p === currentPage.value) return
+  currentPage.value = p
+  fetchDrivers(p, pageSize.value)
+}
 const handlePageSizeChange = (e: any) => {
  const idx = Number(e.detail.value)
  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
  currentPage.value = 1
+  fetchDrivers(1, pageSize.value)
 }
 const handleJumpPage = () => {
  const p = parseInt(jumpPageInput.value)
-  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) {
+    currentPage.value = p
+    fetchDrivers(p, pageSize.value)
+  }
 }
 // ========== END PAGINATION STATE ==========

 function onAdd() {
-  console.log('Add courier')
+  addDrawerVisible.value = true
 }

-function onToggleShow(item: CourierItem) {
-  item.isshow = !item.isshow
+function onAddSaved() {
+  currentPage.value = 1
+  fetchDrivers(1, pageSize.value)
 }

-function onEdit(item: CourierItem) {
-  console.log('Edit:', item.name)
+async function onToggleShow(item: DriverRow) {
+  const newIsShow = !item.isshow
+  const newStatus = newIsShow ? 1 : 2  // 1:正常(显示) 2:暂停(不显示)
+  item.isshow = newIsShow  // 乐观更新本地状态
+  try {
+    const res = await supa.from('ml_delivery_drivers')
+      .update({ status: newStatus } as UTSJSONObject)
+      .eq('id', item.id)
+      .execute()
+    if (res.status < 200 || res.status >= 300) {
+      item.isshow = !newIsShow  // 请求失败，回滚本地状态
+      uni.showToast({ title: '状态更新失败', icon: 'none' })
+    }
+  } catch (e) {
+    item.isshow = !newIsShow  // 异常，回滚本地状态
+    uni.showToast({ title: '操作异常，请重试', icon: 'none' })
+  }
 }

-function onDel(item: CourierItem) {
-  console.log('Delete:', item.id)
+function onDetail(item: DriverRow) {
+  selectedDriverId.value = item.id
+  drawerVisible.value = true
+}
+
+function onEdit(item: DriverRow) {
+  selectedEditId.value = item.id
+  editDrawerVisible.value = true
+}
+
+async function doDelete(item: DriverRow) {
+  try {
+    const result = await supa.from('ml_delivery_drivers')
+      .eq('id', item.id)
+      .delete()
+      .execute()
+    if (result.status >= 200 && result.status < 300) {
+      uni.showToast({ title: '删除成功', icon: 'success' })
+      fetchDrivers(currentPage.value, pageSize.value)
+    } else {
+      uni.showToast({ title: '删除失败，请重试', icon: 'none' })
+    }
+  } catch (e) {
+    uni.showToast({ title: '操作异常，请重试', icon: 'none' })
+  }
+}
+
+function onDel(item: DriverRow) {
+  uni.showModal({
+    title: '确认删除',
+    content: '确认删除配送员「' + item.name + '」？该操作不可恢复。',
+    confirmText: '确认删除',
+    confirmColor: '#ff4d4f',
+    success: (res: any) => {
+      if (res.confirm === true) {
+        doDelete(item)
+      }
+    }
+  })
 }
 </script>

@@ -230,4 +417,24 @@ function onDel(item: CourierItem) {
  font-size: 13px;
  cursor: pointer;
 }
+
+.table-loading,
+.table-error,
+.table-empty {
+  padding: 40px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.table-tip {
+  font-size: 14px;
+  color: #999;
+}
+
+.table-tip-err {
+  font-size: 14px;
+  color: #ed4014;
+}
 </style>