refactor: centralize city management logic into composables for cleaner code and reusability

杨刚
1 parent 32f52c2c
Showing 14 changed files with 262 additions and 168 deletions
src/api/index.ts
src/composables/useRoleCityList.ts
src/composables/useRoleSelectedCity.ts
src/layouts/MainLayout.vue
src/views/config/FeePlanList.vue
src/views/delivery/DeliveryOrderList.vue
src/views/dispatch/DispatchRuleList.vue
src/views/merchant/StoreList.vue
src/views/open/OpenAppList.vue
src/views/open/OpenMockDelivery.vue
src/views/order/OrderList.vue
src/views/rider/RiderEvaluateList.vue
src/views/rider/RiderList.vue
src/views/substation/SubstationList.vue
@@ -117,6 +117,10 @@ export const riderApi = {
   orderList: (params: any) => request.get('/api/admin/rider/order/list', { params }),
   // 配送订单列表（外部系统推入的）
   deliveryOrderList: (params: any) => request.get('/api/admin/rider/order/delivery/list', { params }),
+  deliveryOrderDetail: (orderId: number) =>
+    request.get('/api/admin/rider/order/delivery/detail', { params: { orderId } }),
+  deliveryOrderCancel: (orderId: number) =>
+    request.post('/api/admin/rider/order/delivery/cancel', null, { params: { orderId } }),
 }
 export const riderLevelApi = {
+import { computed, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { cityApi } from '@/api'
+import { useAuthStore } from '@/stores/auth'
+
+export type CityOption = {
+  id: number
+  name: string
+  [key: string]: any
+}
+
+export function useRoleCityList() {
+  const auth = useAuthStore()
+  const { isAdmin, user } = storeToRefs(auth)
+  const cityList = ref<CityOption[]>([])
+  const managedCityId = computed<number | undefined>(() => user.value?.cityId)
+  const managedCityName = computed(() => user.value?.cityName || '')
+
+  function buildManagedCityList() {
+    return managedCityId.value
+      ? [{ id: managedCityId.value, name: managedCityName.value || `租户#${managedCityId.value}` }]
+      : []
+  }
+
+  async function loadCities() {
+    if (!isAdmin.value) {
+      cityList.value = buildManagedCityList()
+      return
+    }
+    const res: any = await cityApi.openList()
+    cityList.value = Array.isArray(res?.data) ? res.data : []
+  }
+
+  function getCityName(cityId?: number) {
+    const city = cityList.value.find(item => item.id === cityId)
+    return city?.name || (cityId ? `租户#${cityId}` : '-')
+  }
+
+  return {
+    isAdmin,
+    managedCityId,
+    managedCityName,
+    cityList,
+    loadCities,
+    getCityName,
+  }
+}
+import { computed, ref } from 'vue'
+import { useRoleCityList } from '@/composables/useRoleCityList'
+
+export function useRoleSelectedCity() {
+  const {
+    isAdmin,
+    managedCityId,
+    managedCityName,
+    cityList,
+    loadCities: loadRoleCities,
+    getCityName,
+  } = useRoleCityList()
+  const selectedCityId = ref<number | undefined>()
+
+  function resolveSelectedCity(initialCityId?: number) {
+    if (!isAdmin.value) {
+      selectedCityId.value = managedCityId.value
+      return
+    }
+    if (initialCityId && cityList.value.some(item => item.id === initialCityId)) {
+      selectedCityId.value = initialCityId
+      return
+    }
+    if (selectedCityId.value && cityList.value.some(item => item.id === selectedCityId.value)) {
+      return
+    }
+    selectedCityId.value = cityList.value[0]?.id
+  }
+
+  async function loadCities(initialCityId?: number) {
+    await loadRoleCities()
+    resolveSelectedCity(initialCityId)
+  }
+
+  const currentCityName = computed(() =>
+    selectedCityId.value ? getCityName(selectedCityId.value) : managedCityName.value || ''
+  )
+
+  return {
+    isAdmin,
+    cityList,
+    selectedCityId,
+    currentCityName,
+    loadCities,
+  }
+}
@@ -88,7 +88,7 @@
               <span class="profile-avatar">{{ avatarText }}</span>
               <span class="profile-copy">
                 <strong>{{ auth.user?.userNickname || '管理员' }}</strong>
-                <small>{{ auth.user?.role === 'admin' ? '超级管理员' : '分站管理员' }}</small>
+                <small>{{ auth.isAdmin ? '超级管理员' : '分站管理员' }}</small>
               </span>
               <down-outlined />
             </a-button>
@@ -424,11 +424,11 @@
 </template>
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { message } from 'ant-design-vue'
-import { adminFeePlanApi, cityApi } from '@/api'
-import { useAuthStore } from '@/stores/auth'
+import { adminFeePlanApi } from '@/api'
+import { useRoleSelectedCity } from '@/composables/useRoleSelectedCity'
 type TimePeriodForm = {
   startText: string
@@ -450,12 +450,13 @@ type PieceRuleForm = {
 }
 const route = useRoute()
-const auth = useAuthStore()
-const isAdmin = computed(() => auth.user?.role === 'admin')
-const managedCityId = computed<number | undefined>(() => auth.user?.cityId)
-const cityList = ref<any[]>([])
-const selectedCityId = ref<number | undefined>()
-const currentCityName = computed(() => cityList.value.find(item => item.id === selectedCityId.value)?.name || auth.user?.cityName || '')
+const {
+  isAdmin,
+  cityList,
+  selectedCityId,
+  currentCityName,
+  loadCities,
+} = useRoleSelectedCity()
 const config = ref<any>(null)
 const planList = ref<any[]>([])
@@ -478,22 +479,9 @@ const previewForm = reactive({
   serviceTime: '',
 })
-async function loadCities() {
-  if (isAdmin.value) {
-    const res: any = await cityApi.openList()
-    cityList.value = Array.isArray(res?.data) ? res.data : []
-    const queryCityId = Number(route.query.cityId || 0) || undefined
-    if (queryCityId && cityList.value.some(item => item.id === queryCityId)) {
-      selectedCityId.value = queryCityId
-    }
-    if (!selectedCityId.value && cityList.value.length) {
-      selectedCityId.value = cityList.value[0].id
-    }
-  } else {
-    selectedCityId.value = managedCityId.value
-    cityList.value = selectedCityId.value ? [{ id: selectedCityId.value, name: auth.user?.cityName || `租户#${selectedCityId.value}` }] : []
-  }
-
+async function loadFeePlanCities() {
+  const queryCityId = Number(route.query.cityId || 0) || undefined
+  await loadCities(queryCityId)
   if (selectedCityId.value) {
     await loadPlanList(selectedCityId.value)
   }
@@ -833,7 +821,7 @@ function deepClone&lt;T&gt;(value: T): T {
   return JSON.parse(JSON.stringify(value))
 }
-onMounted(loadCities)
+onMounted(loadFeePlanCities)
 </script>
 <style scoped>
@@ -3,6 +3,10 @@
     <a-card title="配送订单" :bordered="false" class="list-table-card">
       <div class="list-toolbar">
         <div class="list-toolbar-left">
+          <a-select v-if="isAdmin" v-model:value="filterCityId" placeholder="租户" allowClear class="list-filter" @change="handleAdminCityChange">
+            <a-select-option v-for="item in cityList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+          </a-select>
+          <a-input v-if="isAdmin" v-model:value="filterAppKey" placeholder="接入方 AppKey" class="list-search appkey-search" @pressEnter="loadList" />
           <a-select v-model:value="filterStatus" placeholder="状态" allowClear class="list-filter" @change="loadList">
             <a-select-option :value="2">待接单</a-select-option>
             <a-select-option :value="3">已接单</a-select-option>
@@ -12,33 +16,37 @@
           </a-select>
           <a-input-search v-model:value="keyword" placeholder="外部订单号" @search="loadList" class="list-search" />
         </div>
-        <div class="list-toolbar-right">
-          <a-button type="primary" @click="queryByNo" :loading="querying">查询</a-button>
-        </div>
       </div>
       <a-table :dataSource="list" :columns="columns" :loading="loading" rowKey="id" :pagination="false">
         <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'cityName'">
+            {{ getCityName(record.cityId) }}
+          </template>
           <template v-if="column.key === 'status'">
             <a-tag :color="statusColor[record.status]">{{ statusMap[record.status] }}</a-tag>
           </template>
           <template v-if="column.key === 'action'">
-            <a-popconfirm v-if="record.status === 2" title="确认取消该配送订单？" @confirm="cancelOrder(record)">
-              <a style="color:red">取消</a>
-            </a-popconfirm>
-            <span v-else>-</span>
+            <a-space>
+              <a @click="openDetail(record)">详情</a>
+              <a-popconfirm v-if="record.status === 2 && canOperate" title="确认取消该配送订单？" @confirm="cancelOrder(record)">
+                <a style="color:red">取消</a>
+              </a-popconfirm>
+              <span v-else-if="isAdmin && record.status === 2 && !canOperate">选择租户后可取消</span>
+            </a-space>
           </template>
         </template>
       </a-table>
     </a-card>
-    <a-modal v-model:open="queryVisible" title="配送订单详情" :footer="null">
+    <a-modal v-model:open="queryVisible" title="配送订单详情" :footer="null" :confirmLoading="detailLoading">
       <div v-if="queryResult" class="soft-page-stack">
         <div class="soft-note-card">
-          <strong>订单查询结果</strong>
-          <p>这里展示开放平台配送单的核心状态和计费结果，适合按外部订单号快速核对。</p>
+          <strong>配送订单详情</strong>
+          <p>这里展示后台可查看的配送单核心状态和计费结果，便于运营快速核对。</p>
         </div>
         <a-descriptions :column="1" bordered size="small">
           <a-descriptions-item label="配送订单ID">{{ queryResult.deliveryOrderId }}</a-descriptions-item>
+          <a-descriptions-item label="配送订单号">{{ queryResult.orderNo }}</a-descriptions-item>
           <a-descriptions-item label="外部订单号">{{ queryResult.outOrderNo }}</a-descriptions-item>
           <a-descriptions-item label="状态">{{ statusMap[queryResult.status] }}</a-descriptions-item>
           <a-descriptions-item label="配送费">¥{{ queryResult.totalFee }}</a-descriptions-item>
@@ -51,17 +59,22 @@
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
-import { deliveryOrderApi, riderApi } from '@/api'
+import { riderApi } from '@/api'
+import { useRoleCityList } from '@/composables/useRoleCityList'
 const loading = ref(false)
-const querying = ref(false)
+const detailLoading = ref(false)
 const list = ref<any[]>([])
+const filterCityId = ref<number | undefined>()
+const filterAppKey = ref('')
 const filterStatus = ref<number | undefined>()
 const keyword = ref('')
 const queryVisible = ref(false)
 const queryResult = ref<any>(null)
+const { isAdmin, cityList, loadCities, getCityName } = useRoleCityList()
+const canOperate = computed(() => !isAdmin.value || !!filterCityId.value)
 const statusMap: Record<number, string> = {
   2: '待接单', 3: '已接单', 4: '配送中', 6: '已完成', 7: '退款申请',
@@ -72,20 +85,31 @@ const statusColor: Record&lt;number, string&gt; = {
   7: 'orange', 8: 'green', 9: 'red', 10: 'red'
 }
-const columns = [
-  { title: 'ID', dataIndex: 'id', width: 80 },
-  { title: '外部订单号', dataIndex: 'outOrderNo' },
-  { title: '接入方', dataIndex: 'appKey', ellipsis: true },
-  { title: '收件人', dataIndex: 'recipName' },
-  { title: '配送费', dataIndex: 'moneyDelivery' },
-  { title: '状态', key: 'status' },
-  { title: '操作', key: 'action' },
-]
+const columns = computed(() => {
+  const base = [
+    { title: 'ID', dataIndex: 'id', width: 80 },
+    { title: '外部订单号', dataIndex: 'outOrderNo' },
+    { title: '接入方', dataIndex: 'appKey', ellipsis: true },
+    { title: '收件人', dataIndex: 'recipName' },
+    { title: '配送费', dataIndex: 'moneyDelivery' },
+    { title: '状态', key: 'status' },
+    { title: '操作', key: 'action' },
+  ]
+  if (!isAdmin.value) {
+    return base
+  }
+  return [
+    { title: '租户', key: 'cityName' },
+    ...base,
+  ]
+})
 async function loadList() {
   loading.value = true
   try {
     const res: any = await riderApi.deliveryOrderList({
+      cityId: filterCityId.value,
+      appKey: filterAppKey.value || undefined,
       status: filterStatus.value,
       outOrderNo: keyword.value || undefined,
       page: 1
@@ -94,21 +118,36 @@ async function loadList() {
   } finally { loading.value = false }
 }
-async function queryByNo() {
-  if (!keyword.value) { message.warning('请输入外部订单号'); return }
-  querying.value = true
+function handleAdminCityChange() {
+  if (!filterCityId.value) {
+    queryVisible.value = false
+    queryResult.value = null
+  }
+  loadList()
+}
+
+async function openDetail(record: any) {
+  detailLoading.value = true
+  queryResult.value = null
+  queryVisible.value = true
   try {
-    const res: any = await deliveryOrderApi.query(keyword.value)
+    const res: any = await riderApi.deliveryOrderDetail(record.id)
     queryResult.value = res.data
-    queryVisible.value = true
-  } finally { querying.value = false }
+  } finally { detailLoading.value = false }
 }
 async function cancelOrder(record: any) {
-  await deliveryOrderApi.cancel(record.outOrderNo)
+  await riderApi.deliveryOrderCancel(record.id)
   message.success('取消成功')
+  if (queryVisible.value && queryResult.value?.deliveryOrderId === record.id) {
+    queryVisible.value = false
+    queryResult.value = null
+  }
   loadList()
 }
-onMounted(loadList)
+onMounted(async () => {
+  await loadCities()
+  await loadList()
+})
 </script>
@@ -237,15 +237,16 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
 import { message } from 'ant-design-vue'
-import { cityApi, dispatchRuleApi } from '@/api'
-import { useAuthStore } from '@/stores/auth'
-
-const auth = useAuthStore()
-const isAdmin = computed(() => auth.user?.role === 'admin')
-const managedCityId = computed<number | undefined>(() => auth.user?.cityId)
-const cityList = ref<any[]>([])
-const selectedCityId = ref<number | undefined>()
-const currentCityName = computed(() => cityList.value.find(item => item.id === selectedCityId.value)?.name || auth.user?.cityName || '')
+import { dispatchRuleApi } from '@/api'
+import { useRoleSelectedCity } from '@/composables/useRoleSelectedCity'
+
+const {
+  isAdmin,
+  cityList,
+  selectedCityId,
+  currentCityName,
+  loadCities,
+} = useRoleSelectedCity()
 const templateList = ref<any[]>([])
 const selectedTemplateId = ref<number | null>(null)
 const loadingTemplates = ref(false)
@@ -291,18 +292,8 @@ const autoDispatchChecked = computed({
 const editorVisible = computed(() => !!form.id || creatingNew.value)
-async function loadCities() {
-  if (isAdmin.value) {
-    const res: any = await cityApi.openList()
-    cityList.value = res.data || []
-    if (!selectedCityId.value && cityList.value.length) {
-      selectedCityId.value = cityList.value[0].id
-    }
-  } else {
-    selectedCityId.value = managedCityId.value
-    cityList.value = selectedCityId.value ? [{ id: selectedCityId.value, name: auth.user?.cityName || `租户#${selectedCityId.value}` }] : []
-  }
-
+async function loadDispatchCities() {
+  await loadCities()
   if (selectedCityId.value) {
     await loadTemplates()
   }
@@ -497,7 +488,7 @@ function resetForm() {
   selectedTemplateId.value = null
 }
-onMounted(loadCities)
+onMounted(loadDispatchCities)
 </script>
 <style scoped>
@@ -107,12 +107,12 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
-import { merchantApi, cityApi } from '@/api'
+import { merchantApi } from '@/api'
+import { useRoleCityList } from '@/composables/useRoleCityList'
 const loading = ref(false)
 const saving = ref(false)
 const list = ref<any[]>([])
-const cityList = ref<any[]>([])
 const keyword = ref('')
 const filterCityId = ref<number | undefined>()
 const modalVisible = ref(false)
@@ -121,6 +121,7 @@ const editingId = ref&lt;number | null&gt;(null)
 const currentStoreId = ref(0)
 const form = reactive<any>({ name: '', cityId: undefined, address: '', lng: '', lat: '', shippingType: 1, automaticOrder: 0, accountMobile: '', about: '', outStoreId: '' })
 const feeForm = reactive({ freeShipping: 0, upToSend: 0 })
+const { cityList, loadCities, getCityName } = useRoleCityList()
 const columns = [
   { title: 'ID', dataIndex: 'id', width: 80 },
@@ -142,16 +143,6 @@ async function loadList() {
   } finally { loading.value = false }
 }
-async function loadCities() {
-  const res: any = await cityApi.openList()
-  cityList.value = res.data
-}
-
-function getCityName(cityId?: number) {
-  const city = cityList.value.find(item => item.id === cityId)
-  return city?.name || (cityId ? `租户#${cityId}` : '-')
-}
-
 function openAdd() {
   editingId.value = null
   Object.assign(form, { name: '', cityId: undefined, address: '', lng: '', lat: '', shippingType: 1, automaticOrder: 0, accountMobile: '', about: '', outStoreId: '' })
@@ -103,19 +103,20 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 import { message, Modal } from 'ant-design-vue'
-import { openApi, cityApi } from '@/api'
+import { openApi } from '@/api'
+import { useRoleCityList } from '@/composables/useRoleCityList'
 const loading = ref(false)
 const saving = ref(false)
 const list = ref<any[]>([])
 const logs = ref<any[]>([])
-const cityList = ref<any[]>([])
 const addVisible = ref(false)
 const webhookVisible = ref(false)
 const logsVisible = ref(false)
 const currentAppId = ref(0)
 const addForm = reactive({ appName: '', cityId: undefined as number | undefined, remark: '' })
 const webhookForm = reactive({ webhookUrl: '', webhookEvents: '' })
+const { cityList, loadCities, getCityName } = useRoleCityList()
 const columns = [
   { title: 'ID', dataIndex: 'id', width: 80 },
@@ -145,16 +146,6 @@ async function loadList() {
   } finally { loading.value = false }
 }
-async function loadCities() {
-  const res: any = await cityApi.openList()
-  cityList.value = res.data
-}
-
-function getCityName(cityId?: number) {
-  const city = cityList.value.find(item => item.id === cityId)
-  return city?.name || (cityId ? `租户#${cityId}` : '-')
-}
-
 function openAdd() {
   Object.assign(addForm, { appName: '', cityId: undefined, remark: '' })
   addVisible.value = true
@@ -270,7 +270,8 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { message } from 'ant-design-vue'
-import { cityApi, deliveryApi, openApi } from '@/api'
+import { deliveryApi, openApi } from '@/api'
+import { useRoleCityList } from '@/composables/useRoleCityList'
 type OpenAppItem = {
   id: number
@@ -288,11 +289,11 @@ type DeliveryItem = {
 }
 const appList = ref<OpenAppItem[]>([])
-const cityList = ref<any[]>([])
 const saving = ref(false)
 const calcLoading = ref(false)
 const feeResult = ref<any>(null)
 const result = ref<any>(null)
+const { loadCities, getCityName } = useRoleCityList()
 const statusMap: Record<number, string> = {
   2: '待接单',
@@ -332,10 +333,7 @@ function createDefaultForm() {
 const form = reactive(createDefaultForm())
 const selectedApp = computed(() => appList.value.find(item => item.id === form.appId))
-const selectedTenantName = computed(() => {
-  const city = cityList.value.find(item => item.id === selectedApp.value?.cityId)
-  return city?.name || ''
-})
+const selectedTenantName = computed(() => getCityName(selectedApp.value?.cityId))
 function generateOutOrderNo() {
   return `MOCK${Date.now()}`
@@ -451,11 +449,6 @@ async function loadApps() {
   appList.value = Array.isArray(res?.data) ? res.data.filter((item: OpenAppItem) => item.status === 1) : []
 }
-async function loadCities() {
-  const res: any = await cityApi.openList()
-  cityList.value = Array.isArray(res?.data) ? res.data : []
-}
-
 async function handleSubmit() {
   if (!form.appId) {
     message.error('请选择开放应用')
@@ -3,6 +3,9 @@
     <a-card title="订单管理" :bordered="false" class="list-table-card">
       <div class="list-toolbar">
         <div class="list-toolbar-left">
+          <a-select v-if="isAdmin" v-model:value="filterCityId" placeholder="租户" allowClear class="list-filter" @change="handleAdminCityChange">
+            <a-select-option v-for="item in cityList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+          </a-select>
           <a-select v-model:value="filterStatus" placeholder="订单状态" allowClear class="list-filter" @change="loadList">
             <a-select-option :value="2">已支付</a-select-option>
             <a-select-option :value="3">已接单</a-select-option>
@@ -21,6 +24,9 @@
       </div>
       <a-table :dataSource="list" :columns="columns" :loading="loading" rowKey="id" :pagination="false">
         <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'cityName'">
+            {{ cityList.find(item => item.id === record.cityId)?.name || `租户#${record.cityId}` }}
+          </template>
           <template v-if="column.key === 'status'">
             <a-tag :color="statusColor[record.status]">{{ statusMap[record.status] }}</a-tag>
           </template>
@@ -32,8 +38,8 @@
           </template>
           <template v-if="column.key === 'action'">
             <a-space>
-              <a @click="openDesignate(record)" v-if="record.status === 2">指派骑手</a>
-              <template v-if="record.isTrans === 2 && record.status === 4">
+              <a @click="openDesignate(record)" v-if="record.status === 2 && canOperate">指派骑手</a>
+              <template v-if="record.isTrans === 2 && record.status === 4 && canOperate">
                 <a-popconfirm title="通过转单申请？" @confirm="handleTrans(record.id, 1)">
                   <a style="color:green">通过转单</a>
                 </a-popconfirm>
@@ -41,7 +47,8 @@
                   <a style="color:red">拒绝转单</a>
                 </a-popconfirm>
               </template>
-              <a v-if="record.status === 7" @click="openRefund(record)">查看退款</a>
+              <a v-if="record.status === 7 && canOperate" @click="openRefund(record)">查看退款</a>
+              <span v-if="isAdmin && !canOperate">选择租户后可操作</span>
             </a-space>
           </template>
         </template>
@@ -54,6 +61,7 @@
           <strong>指派说明</strong>
           <p>这里只展示当前订单可指派的骑手候选，列表中会带出手机号和在线/休息状态，避免只能靠 ID 操作。</p>
         </div>
+        <a-alert v-if="isAdmin" type="info" show-icon message="平台管理员当前正在所选租户上下文中操作。" />
         <a-form layout="vertical">
           <a-form-item label="选择骑手">
             <a-select
@@ -119,13 +127,15 @@
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
 import { riderApi, refundApi } from '@/api'
+import { useRoleCityList } from '@/composables/useRoleCityList'
 const loading = ref(false)
 const saving = ref(false)
 const list = ref<any[]>([])
+const filterCityId = ref<number | undefined>()
 const filterStatus = ref<number | undefined>()
 const filterTrans = ref<number | undefined>()
 const keyword = ref('')
@@ -139,6 +149,8 @@ const designateRiderId = ref&lt;number | undefined&gt;()
 const designateCandidates = ref<any[]>([])
 const refundRecord = ref<any>(null)
 const currentRefundRecordId = ref(0)
+const { isAdmin, cityList, loadCities } = useRoleCityList()
+const canOperate = computed(() => !isAdmin.value || !!filterCityId.value)
 const statusMap: Record<number, string> = {
   1: '待支付', 2: '已支付', 3: '已接单', 4: '服务中',
@@ -149,20 +161,30 @@ const statusColor: Record&lt;number, string&gt; = {
   6: 'green', 7: 'orange', 8: 'green', 9: 'red', 10: 'red'
 }
-const columns = [
-  { title: 'ID', dataIndex: 'id', width: 80 },
-  { title: '订单号', dataIndex: 'orderNo', ellipsis: true },
-  { title: '状态', key: 'status' },
-  { title: '骑手ID', dataIndex: 'riderId' },
-  { title: '转单', key: 'isTrans' },
-  { title: '配送费', dataIndex: 'moneyDelivery' },
-  { title: '操作', key: 'action' },
-]
+const columns = computed(() => {
+  const base = [
+    { title: 'ID', dataIndex: 'id', width: 80 },
+    { title: '订单号', dataIndex: 'orderNo', ellipsis: true },
+    { title: '状态', key: 'status' },
+    { title: '骑手ID', dataIndex: 'riderId' },
+    { title: '转单', key: 'isTrans' },
+    { title: '配送费', dataIndex: 'moneyDelivery' },
+    { title: '操作', key: 'action' },
+  ]
+  if (!isAdmin.value) {
+    return base
+  }
+  return [
+    { title: '租户', dataIndex: 'cityName', key: 'cityName' },
+    ...base,
+  ]
+})
 async function loadList() {
   loading.value = true
   try {
     const res: any = await riderApi.orderList({
+      cityId: filterCityId.value,
       status: filterStatus.value,
       isTrans: filterTrans.value,
       keyword: keyword.value,
@@ -172,6 +194,15 @@ async function loadList() {
   } finally { loading.value = false }
 }
+function handleAdminCityChange() {
+  if (!filterCityId.value) {
+    designateVisible.value = false
+    refundVisible.value = false
+    rejectVisible.value = false
+  }
+  loadList()
+}
+
 async function openDesignate(record: any) {
   designateOrderId.value = record.id
   designateRiderId.value = undefined
@@ -230,5 +261,8 @@ async function handleRefund(status: number) {
   } finally { saving.value = false }
 }
-onMounted(loadList)
+onMounted(async () => {
+  await loadCities()
+  await loadList()
+})
 </script>
@@ -31,13 +31,14 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { cityApi, riderApi } from '@/api'
+import { riderApi } from '@/api'
+import { useRoleCityList } from '@/composables/useRoleCityList'
 const loading = ref(false)
 const list = ref<any[]>([])
-const cityList = ref<any[]>([])
 const filterRiderId = ref<number | undefined>()
 const filterType = ref(0)
+const { loadCities, getCityName } = useRoleCityList()
 const columns = [
   { title: 'ID', dataIndex: 'id', width: 80 },
@@ -47,16 +48,6 @@ const columns = [
   { title: '租户', key: 'cityId' },
 ]
-async function loadCities() {
-  const res: any = await cityApi.openList()
-  cityList.value = Array.isArray(res?.data) ? res.data : []
-}
-
-function getCityName(cityId?: number) {
-  const city = cityList.value.find(item => item.id === cityId)
-  return city?.name || (cityId ? `租户#${cityId}` : '-')
-}
-
 async function loadList() {
   if (!filterRiderId.value) return
   loading.value = true
@@ -121,16 +121,14 @@
 </template>
 <script setup lang="ts">
-import { computed, reactive, ref, onMounted } from 'vue'
+import { reactive, ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
-import { cityApi, riderApi, riderLevelApi } from '@/api'
-import { useAuthStore } from '@/stores/auth'
+import { riderApi, riderLevelApi } from '@/api'
+import { useRoleCityList } from '@/composables/useRoleCityList'
-const auth = useAuthStore()
 const loading = ref(false)
 const saving = ref(false)
 const list = ref<any[]>([])
-const cityList = ref<any[]>([])
 const levelOptions = ref<any[]>([])
 const filterStatus = ref<number | undefined>()
 const keyword = ref('')
@@ -146,7 +144,7 @@ const levelSaving = ref(false)
 const levelTargetId = ref<number>(0)
 const levelTargetName = ref('')
 const selectedLevelId = ref<number>(0)
-const isAdmin = computed(() => auth.user?.role === 'admin')
+const { isAdmin, cityList, loadCities, getCityName } = useRoleCityList()
 const statusMap: Record<number, string> = { 0: '已拒绝', 1: '已通过', 2: '待审核' }
@@ -172,11 +170,6 @@ function getWorkStatus(record: any) {
   return record.isRest === 1 ? 1 : 0
 }
-function getCityName(cityId?: number) {
-  const city = cityList.value.find(item => item.id === cityId)
-  return city?.name || (cityId ? `租户#${cityId}` : '-')
-}
-
 async function loadList() {
   loading.value = true
   try {
@@ -188,11 +181,6 @@ async function loadList() {
   } finally { loading.value = false }
 }
-async function loadCities() {
-  const res: any = await cityApi.openList()
-  cityList.value = Array.isArray(res?.data) ? res.data : []
-}
-
 function openAdd() {
   Object.assign(form, {
     cityId: undefined,
@@ -97,17 +97,18 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
-import { cityApi, substationApi, systemRoleApi } from '@/api'
+import { substationApi, systemRoleApi } from '@/api'
+import { useRoleCityList } from '@/composables/useRoleCityList'
 const loading = ref(false)
 const saving = ref(false)
 const list = ref<any[]>([])
-const cityList = ref<any[]>([])
 const roleOptions = ref<any[]>([])
 const keyword = ref('')
 const modalVisible = ref(false)
 const editingId = ref<number | null>(null)
 const form = reactive({ cityId: undefined, roleId: undefined, userLogin: '', userNickname: '', mobile: '', userPass: '' })
+const { cityList, loadCities, getCityName } = useRoleCityList()
 const columns = [
   { title: 'ID', dataIndex: 'id', width: 80 },
@@ -125,11 +126,6 @@ function getRoleName(roleId?: number) {
   return role?.name || (roleId ? `角色#${roleId}` : '-')
 }
-function getCityName(cityId?: number) {
-  const city = cityList.value.find(item => item.id === cityId)
-  return city?.name || (cityId ? `租户#${cityId}` : '-')
-}
-
 async function loadList() {
   loading.value = true
   try {
@@ -138,11 +134,6 @@ async function loadList() {
   } finally { loading.value = false }
 }
-async function loadCities() {
-  const res: any = await cityApi.openList()
-  cityList.value = res.data
-}
-
 async function loadRoles() {
   const res: any = await systemRoleApi.list()
   roleOptions.value = Array.isArray(res?.data) ? res.data.filter((item: any) => item.roleScope === 'SUBSTATION') : []