441 lines
13 KiB
Plaintext
441 lines
13 KiB
Plaintext
<template>
|
||
<view class="admin-page-container">
|
||
<view class="page-card">
|
||
<view class="action-wrap">
|
||
<button class="btn btn-primary" @click="onAdd">添加配送员</button>
|
||
</view>
|
||
|
||
<!-- 表格区域 -->
|
||
<view class="table-wrap">
|
||
<view class="table-header">
|
||
<view class="th" style="flex: 1;">ID</view>
|
||
<view class="th" style="flex: 1.5;">头像</view>
|
||
<view class="th" style="flex: 2;">名称</view>
|
||
<view class="th" style="flex: 2.5;">手机号码</view>
|
||
<view class="th" style="flex: 1.5;">是否显示</view>
|
||
<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.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>
|
||
<view class="td" style="flex: 2;">{{ item.name }}</view>
|
||
<view class="td" style="flex: 2.5;">{{ item.phone }}</view>
|
||
<view class="td" style="flex: 1.5;">
|
||
<switch :checked="item.isshow" color="#1890ff" @change="onToggleShow(item)" />
|
||
</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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<CommonPagination
|
||
v-if="total > 0"
|
||
:total="total"
|
||
:loading="false"
|
||
:currentPage="currentPage"
|
||
:pageSize="pageSize"
|
||
:pageSizeOptionLabels="pageSizeOptionLabels"
|
||
:pageSizeIndex="pageSizeIndex"
|
||
:visiblePages="visiblePages"
|
||
:totalPage="totalPage"
|
||
:jumpPageInput="jumpPageInput"
|
||
@page-size-change="handlePageSizeChange"
|
||
@page-change="handlePageChange"
|
||
@update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
|
||
@jump-page="handleJumpPage"
|
||
/>
|
||
</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, 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 DriverRow = {
|
||
id: string
|
||
avatar: string
|
||
name: string
|
||
phone: string
|
||
isshow: boolean
|
||
addTime: string
|
||
}
|
||
|
||
// ========== 数据状态 ==========
|
||
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)
|
||
const pageSize = ref(15)
|
||
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 = ref(0) // 来自服务端 Content-Range 真实总行数
|
||
const totalPage = computed(() => Math.max(1, Math.ceil(total.value / 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)
|
||
if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
|
||
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) => {
|
||
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
|
||
fetchDrivers(p, pageSize.value)
|
||
}
|
||
}
|
||
// ========== END PAGINATION STATE ==========
|
||
|
||
function onAdd() {
|
||
addDrawerVisible.value = true
|
||
}
|
||
|
||
function onAddSaved() {
|
||
currentPage.value = 1
|
||
fetchDrivers(1, pageSize.value)
|
||
}
|
||
|
||
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 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>
|
||
|
||
<style scoped>
|
||
.admin-page-container {
|
||
/* 使用 Layout 的背景和内边距 */
|
||
padding: 0;
|
||
background-color: transparent;
|
||
min-height: auto;
|
||
}
|
||
|
||
.page-card {
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.action-wrap {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.btn {
|
||
height: 32px;
|
||
line-height: 30px;
|
||
padding: 0 15px;
|
||
font-size: 14px;
|
||
border-radius: 4px;
|
||
border: none;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: #1890ff;
|
||
color: #fff;
|
||
}
|
||
|
||
.table-wrap {
|
||
width: 100%;
|
||
border: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.table-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
background-color: #f8f8f9;
|
||
}
|
||
|
||
.th {
|
||
padding: 12px 10px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #515a6e;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
text-align: center;
|
||
}
|
||
|
||
.tr {
|
||
display: flex;
|
||
flex-direction: row;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.td {
|
||
padding: 12px 10px;
|
||
font-size: 14px;
|
||
color: #515a6e;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.action-btn {
|
||
color: #1890ff;
|
||
font-size: 13px;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.action-btn-del {
|
||
color: #ed4014;
|
||
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>
|