Home-Care/hss-home-service/website/pages/platform/applications.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const apps = ref<any[]>([])
const loading = ref(true)
const ready = ref(false)
const showCreate = ref(false)
const submitting = ref(false)
const form = ref({ patientId: '', serviceType: 'HOME_CARE', channel: 'WECHAT', contactName: '', contactPhone: '', address: '', regionCode: '441402001', notes: '' })
const serviceTypes = [{ v:'HOME_CARE',label:'居家护理' },{ v:'REHABILITATION',label:'康复训练' },{ v:'BATH_ASSIST',label:'助浴服务' },{ v:'ASSESSMENT',label:'能力评估' }]
const channels = ['WECHAT','APP','PHONE','COMMUNITY','HOSPITAL']
const statusMap: Record<string,string> = { DRAFT:'草稿',PENDING_ACCEPTANCE:'待受理',PENDING_ASSESSMENT:'待评估',ASSESSING:'评估中',ASSESSMENT_PASSED:'已评估',RETURNED:'已退回',CANCELLED:'已取消',REVIEWING:'复核中' }
const statusCls: Record<string,string> = { DRAFT:'bg-gray-100',PENDING_ACCEPTANCE:'bg-yellow-50 text-yellow-700',PENDING_ASSESSMENT:'bg-blue-50 text-blue-600',ASSESSING:'bg-indigo-50 text-indigo-600',ASSESSMENT_PASSED:'bg-green-50 text-green-600',RETURNED:'bg-red-50 text-red-600' }

function getAuthHeaders(): Record<string,string> {
  const h: Record<string,string> = { 'Content-Type':'application/json','X-Tenant-Id':'1','X-Org-Id':'1','X-User-Role':'ADMIN','X-User-Id':'1' }
  try { const u = JSON.parse(localStorage.getItem('hss_platform_user')||'{}'); if(u.userRole){h['X-User-Role']=u.userRole;h['X-User-Id']=u.userId} } catch {}
  return h
}

async function apiFetch(path: string, opts: any = {}) {
  const h = { ...getAuthHeaders(), 'Idempotency-Key': 'web-'+Date.now()+'-'+Math.random().toString(36).slice(2,6) }
  return await $fetch('/api/hss' + path, { ...opts, headers: { ...h, ...(opts.headers||{}) } })
}

async function loadApps() {
  try { const res = await apiFetch('/applications?page=1&size=30'); apps.value = res?.data?.records || res?.data || [] } catch {}
}

async function createApp() {
  submitting.value = true
  try { await apiFetch('/applications', { method:'POST', body: JSON.stringify(form.value) }); showCreate.value = false; await loadApps() }
  catch(e: any) { alert(e?.data?.message || e?.message || '创建失败') }
  finally { submitting.value = false }
}

async function doAction(id: number, action: string, body?: any) {
  try { await apiFetch(`/applications/${id}/${action}`, { method:'POST', body: body ? JSON.stringify(body) : undefined }); await loadApps() }
  catch(e: any) { alert(e?.data?.message || e?.message || '操作失败') }
}

onMounted(() => { ready.value = true; loadApps().finally(() => loading.value = false) })
</script>

<template>
  <ClientOnly>
    <div v-if="!ready" class="min-h-screen bg-surface flex items-center justify-center"><p class="text-text-secondary">加载中...</p></div>
    <div v-else class="min-h-screen bg-surface flex">
      <aside class="hidden lg:flex flex-col w-56 bg-white border-r shrink-0">
        <div class="p-4 border-b"><a href="/platform" class="font-bold text-primary text-sm">← 返回工作台</a></div>
        <div class="p-3"><div class="text-xs text-text-secondary">角色: {{ getAuthHeaders()['X-User-Role'] }}</div></div>
      </aside>
      <main class="flex-1 p-4 lg:p-8 overflow-auto">
        <div class="flex items-center justify-between mb-6"><h2 class="text-xl font-bold">服务申请管理</h2><button @click="showCreate=!showCreate" class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary-700">+ 新建申请</button></div>
        <div v-if="showCreate" class="bg-white rounded-2xl shadow-sm border p-6 mb-6 space-y-4">
          <h3 class="font-bold">新建服务申请</h3>
          <div class="grid md:grid-cols-2 gap-4">
            <div><label class="text-xs text-text-secondary block mb-1">服务对象ID</label><input v-model="form.patientId" class="w-full px-3 py-2 border rounded-lg text-sm outline-none focus:border-primary" placeholder="如 2001"/></div>
            <div><label class="text-xs text-text-secondary block mb-1">服务类型</label><select v-model="form.serviceType" class="w-full px-3 py-2 border rounded-lg text-sm outline-none focus:border-primary"><option v-for="s in serviceTypes" :key="s.v" :value="s.v">{{s.label}}</option></select></div>
            <div><label class="text-xs text-text-secondary block mb-1">渠道</label><select v-model="form.channel" class="w-full px-3 py-2 border rounded-lg text-sm outline-none focus:border-primary"><option v-for="c in channels" :key="c" :value="c">{{c}}</option></select></div>
            <div><label class="text-xs text-text-secondary block mb-1">联系人</label><input v-model="form.contactName" class="w-full px-3 py-2 border rounded-lg text-sm outline-none focus:border-primary" placeholder="姓名"/></div>
            <div><label class="text-xs text-text-secondary block mb-1">电话</label><input v-model="form.contactPhone" class="w-full px-3 py-2 border rounded-lg text-sm outline-none focus:border-primary" placeholder="手机号"/></div>
            <div><label class="text-xs text-text-secondary block mb-1">区域</label><input v-model="form.regionCode" class="w-full px-3 py-2 border rounded-lg text-sm outline-none focus:border-primary" placeholder="441402001"/></div>
            <div class="md:col-span-2"><label class="text-xs text-text-secondary block mb-1">地址</label><input v-model="form.address" class="w-full px-3 py-2 border rounded-lg text-sm outline-none focus:border-primary" placeholder="详细地址"/></div>
          </div>
          <div class="flex gap-3"><button @click="createApp" :disabled="submitting" class="px-6 py-2 bg-primary text-white rounded-lg text-sm font-medium disabled:opacity-50">{{submitting?'提交中...':'提交申请'}}</button><button @click="showCreate=false" class="px-6 py-2 border rounded-lg text-sm">取消</button></div>
        </div>
        <div class="bg-white rounded-2xl shadow-sm border overflow-hidden">
          <div v-if="loading" class="p-8 text-center text-text-secondary">加载中...</div>
          <table v-else class="w-full text-sm"><thead><tr class="bg-gray-50 text-left text-xs text-text-secondary"><th class="px-4 py-3">ID</th><th class="px-4 py-3">对象</th><th class="px-4 py-3">类型</th><th class="px-4 py-3">状态</th><th class="px-4 py-3">联系人</th><th class="px-4 py-3">时间</th><th class="px-4 py-3">操作</th></tr></thead>
            <tbody><tr v-for="a in apps" :key="a.id" class="border-t border-gray-50 hover:bg-gray-50">
              <td class="px-4 py-3 font-mono text-xs">#{{a.id}}</td><td class="px-4 py-3">{{a.patientId}}</td><td class="px-4 py-3 text-xs">{{a.serviceType}}</td>
              <td class="px-4 py-3"><span class="px-2 py-0.5 rounded-full text-xs font-medium" :class="statusCls[a.status]||'bg-gray-100'">{{statusMap[a.status]||a.status}}</span></td>
              <td class="px-4 py-3 text-xs">{{a.contactName||'-'}}</td><td class="px-4 py-3 text-xs text-text-secondary">{{a.createdAt?.substring(0,16)||'-'}}</td>
              <td class="px-4 py-3"><div class="flex gap-1 flex-wrap">
                <button v-if="a.status==='DRAFT'" @click="doAction(a.id,'submit')" class="px-2 py-1 bg-blue-50 text-blue-600 rounded text-xs hover:bg-blue-100">提交</button>
                <button v-if="a.status==='PENDING_ACCEPTANCE'" @click="doAction(a.id,'accept')" class="px-2 py-1 bg-green-50 text-green-600 rounded text-xs hover:bg-green-100">受理</button>
                <button v-if="a.status==='PENDING_ACCEPTANCE'" @click="doAction(a.id,'return',{reason:'退回原因'})" class="px-2 py-1 bg-red-50 text-red-600 rounded text-xs hover:bg-red-100">退回</button>
                <button v-if="!['CANCELLED','RETURNED'].includes(a.status)" @click="doAction(a.id,'cancel')" class="px-2 py-1 bg-gray-50 text-gray-500 rounded text-xs hover:bg-gray-100">取消</button>
              </div></td>
            </tr></tbody>
          </table>
        </div>
      </main>
    </div>
  </ClientOnly>
</template>