11
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
node_modules
|
||||
dist
|
||||
dist.zip
|
||||
*.local
|
||||
.DS_Store
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
@@ -0,0 +1,62 @@
|
||||
# 智慧医院移动手持端 (smart_hospital_mobile)
|
||||
|
||||
模拟医院 PDA 手持机的 Web App，配合 RFID 标签完成物资的**出入库盘点**与**借用归还**管理。
|
||||
|
||||
> 移动端 Web 应用，无需调起摄像头，扫码仅模拟 RFID 手持机一键读取。
|
||||
|
||||
## 技术栈
|
||||
|
||||
- Vue 3 + TypeScript + Vite
|
||||
- Vue Router（Hash 模式，可 file:// 离线打开）
|
||||
- Pinia（带 localStorage 持久化）
|
||||
- Element Plus（移动端样式适配）
|
||||
|
||||
## 功能
|
||||
|
||||
| 模块 | 说明 |
|
||||
|------|------|
|
||||
| 首页 | 物资总览、快捷入口、待归还、最近操作 |
|
||||
| 物资管理 | 列表 + 搜索 + 多维筛选 + 详情 |
|
||||
| 出入库盘点 | 一键扫码入库 / 出库，自动更新库存 |
|
||||
| 借用管理 | 扫码识别自动判断借用或归还流程 |
|
||||
| 操作记录 | 全部历史记录，按类型筛选 |
|
||||
| 个人中心 | 设备信息、数据重置 |
|
||||
|
||||
## 启动
|
||||
|
||||
```bash
|
||||
cd smart_hospital_mobile
|
||||
npm install
|
||||
npm run dev # 开发服：http://localhost:5174
|
||||
npm run build # 生产构建（输出 dist/）
|
||||
npm run preview # 预览 dist
|
||||
```
|
||||
|
||||
构建产物 `dist/` 可直接用 `file://` 协议或静态服务器打开。
|
||||
|
||||
## 演示数据
|
||||
|
||||
首次打开自动生成 12 个物资 + 6 条历史操作，全部带 RFID 标签号：
|
||||
|
||||
- 医疗器械：心电监护仪、除颤仪、便携式呼吸机...
|
||||
- 设备：输液泵、轮椅、担架...
|
||||
- 仪器：B 超机、心电图机、血压计...
|
||||
- 耗材：口罩、注射器...
|
||||
|
||||
所有操作（入库/出库/借用/归还）会即时写入 localStorage，刷新页面不丢失。
|
||||
在"我的 → 重置演示数据"可恢复初始状态。
|
||||
|
||||
## 路由
|
||||
|
||||
```
|
||||
/ → /home
|
||||
/home 首页
|
||||
/material 物资列表
|
||||
/material/detail/:id 物资详情
|
||||
/inventory 出入库入口
|
||||
/inventory/scan?mode=... 扫码出入库（mode: inbound | outbound）
|
||||
/borrow 借用列表
|
||||
/borrow/scan 扫码借用/归还
|
||||
/history 操作记录
|
||||
/profile 个人中心
|
||||
```
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text x='50%' y='55%' font-size='80' text-anchor='middle' dominant-baseline='middle'>📱</text></svg>" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#1989fa" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<title>智慧医院移动手持端</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+1589
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "smart-hospital-mobile",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"description": "医院物资管理移动手持端 - RFID 扫码出入库借用",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview --port 5174"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"element-plus": "^2.13.7",
|
||||
"pinia": "^3.0.4",
|
||||
"vue": "^3.5.32",
|
||||
"vue-router": "^4.6.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.12.2",
|
||||
"@vitejs/plugin-vue": "^6.0.6",
|
||||
"@vue/tsconfig": "^0.9.1",
|
||||
"typescript": "~6.0.2",
|
||||
"vite": "^8.0.10",
|
||||
"vue-tsc": "^3.2.7"
|
||||
}
|
||||
}
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, provide } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ArrowLeft, User } from '@element-plus/icons-vue'
|
||||
import TabBar from './components/TabBar.vue'
|
||||
import { Toast } from './composables/useToast'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const showTabBar = computed(() => route.meta?.hideTabBar !== true)
|
||||
const showBack = computed(() => route.meta?.hideTabBar === true)
|
||||
const pageTitle = computed(() => (route.meta?.title as string) || '智慧医院')
|
||||
|
||||
const currentUser = ref({ name: '张三', role: '库管员' })
|
||||
|
||||
function goProfile() {
|
||||
router.push('/profile')
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
if (window.history.length > 1) {
|
||||
router.back()
|
||||
} else {
|
||||
router.push('/home')
|
||||
}
|
||||
}
|
||||
|
||||
provide('currentUser', currentUser)
|
||||
|
||||
onMounted(() => {
|
||||
console.log('Mobile app initialized')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mobile-app">
|
||||
<header class="mobile-header">
|
||||
<div v-if="showBack" class="back-btn" @click="goBack" aria-label="返回">
|
||||
<el-icon :size="20"><ArrowLeft /></el-icon>
|
||||
</div>
|
||||
<div v-else style="width: 28px"></div>
|
||||
<div class="title">{{ pageTitle }}</div>
|
||||
<div class="header-action" @click="goProfile">
|
||||
<el-icon><User /></el-icon>
|
||||
<span>{{ currentUser.name }}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mobile-content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="slide" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</main>
|
||||
|
||||
<TabBar v-if="showTabBar" />
|
||||
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.slide-enter-from {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-leave-to {
|
||||
transform: translateX(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
margin-right: 4px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.back-btn:active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
rfid?: string
|
||||
scanning?: boolean
|
||||
showModeTabs?: boolean
|
||||
mode?: 'inbound' | 'outbound' | 'borrow' | 'return'
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
rfid: '',
|
||||
scanning: false,
|
||||
showModeTabs: false,
|
||||
mode: 'inbound',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'scan'): void
|
||||
(e: 'mode-change', m: 'inbound' | 'outbound' | 'borrow' | 'return'): void
|
||||
}>()
|
||||
|
||||
const internalMode = ref(props.mode)
|
||||
|
||||
const modeList = [
|
||||
{ value: 'inbound', label: '入库' },
|
||||
{ value: 'outbound', label: '出库' },
|
||||
{ value: 'borrow', label: '借用' },
|
||||
{ value: 'return', label: '归还' },
|
||||
] as const
|
||||
|
||||
function handleScan() {
|
||||
emit('scan')
|
||||
}
|
||||
|
||||
function switchMode(m: 'inbound' | 'outbound' | 'borrow' | 'return') {
|
||||
internalMode.value = m
|
||||
emit('mode-change', m)
|
||||
}
|
||||
|
||||
const displayRfid = computed(() => {
|
||||
if (props.scanning) return '扫描中…'
|
||||
return props.rfid || '请按下扫码键'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="scan-zone">
|
||||
<div v-if="showModeTabs" class="scan-mode-tabs">
|
||||
<div
|
||||
v-for="m in modeList"
|
||||
:key="m.value"
|
||||
class="scan-mode-tab"
|
||||
:class="{ active: internalMode === m.value }"
|
||||
@click="switchMode(m.value)"
|
||||
>
|
||||
{{ m.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scan-title">RFID 标签识别</div>
|
||||
<div class="scan-rfid">{{ displayRfid }}</div>
|
||||
|
||||
<button class="scan-btn-big" :class="{ scanning }" @click="handleScan">
|
||||
<el-icon class="icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M448 192l-32 128H256l128 384-96 128h128l96-128h128l96 128h128l-96-128 128-384H768l-32-128H448zM384 416h384l-32 192h-320l-32-192z"
|
||||
/>
|
||||
</svg>
|
||||
</el-icon>
|
||||
<span>{{ scanning ? '扫描中…' : '扫码' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const tabs = [
|
||||
{ name: 'home', path: '/home', label: '首页', icon: '🏠' },
|
||||
{ name: 'material', path: '/material', label: '物资', icon: '📦' },
|
||||
{ name: 'inventory', path: '/inventory', label: '出入库', icon: '📥' },
|
||||
{ name: 'borrow', path: '/borrow', label: '借用', icon: '🤝' },
|
||||
{ name: 'history', path: '/history', label: '记录', icon: '📋' },
|
||||
]
|
||||
|
||||
const active = computed(() => route.path)
|
||||
|
||||
function go(path: string) {
|
||||
if (route.path !== path) router.push(path)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="mobile-tabbar">
|
||||
<div
|
||||
v-for="t in tabs"
|
||||
:key="t.name"
|
||||
class="tab-item"
|
||||
:class="{ active: active.startsWith(t.path) }"
|
||||
@click="go(t.path)"
|
||||
>
|
||||
<div class="icon">{{ t.icon }}</div>
|
||||
<div class="label">{{ t.label }}</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 单例 Toast 状态
|
||||
const visible = ref(false)
|
||||
const message = ref('')
|
||||
const type = ref<'default' | 'success' | 'warning' | 'error'>('default')
|
||||
let timer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function show(msg: string, t: 'default' | 'success' | 'warning' | 'error' = 'default', duration = 1600) {
|
||||
message.value = msg
|
||||
type.value = t
|
||||
visible.value = true
|
||||
if (timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => {
|
||||
visible.value = false
|
||||
}, duration)
|
||||
}
|
||||
|
||||
export function useToast() {
|
||||
return {
|
||||
show,
|
||||
success: (msg: string) => show(msg, 'success'),
|
||||
warning: (msg: string) => show(msg, 'warning'),
|
||||
error: (msg: string) => show(msg, 'error'),
|
||||
}
|
||||
}
|
||||
|
||||
// 单例组件渲染用
|
||||
export const ToastState = {
|
||||
visible,
|
||||
message,
|
||||
type,
|
||||
}
|
||||
|
||||
// 渲染组件
|
||||
import { defineComponent, h } from 'vue'
|
||||
|
||||
export const Toast = defineComponent({
|
||||
name: 'Toast',
|
||||
setup() {
|
||||
return () => {
|
||||
if (!ToastState.visible.value) return null
|
||||
const t = ToastState.type.value
|
||||
const cls = t === 'default' ? '' : t
|
||||
return h('div', { class: `toast ${cls}` }, ToastState.message.value)
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,355 @@
|
||||
// 物资类型定义
|
||||
export type MaterialStatus = 'in_stock' | 'borrowed' | 'maintenance'
|
||||
export type MaterialCategory =
|
||||
| 'medical_device'
|
||||
| 'consumable'
|
||||
| 'equipment'
|
||||
| 'instrument'
|
||||
| 'office'
|
||||
|
||||
export interface Material {
|
||||
id: string
|
||||
rfid: string // RFID 标签号
|
||||
code: string // 物资编号
|
||||
name: string
|
||||
category: MaterialCategory
|
||||
spec: string // 规格型号
|
||||
unit: string // 单位
|
||||
manufacturer: string
|
||||
warehouse: string // 仓库
|
||||
location: string // 位置
|
||||
status: MaterialStatus
|
||||
stock: number // 库存
|
||||
borrower?: string
|
||||
borrowTime?: string
|
||||
expectedReturn?: string
|
||||
borrowReason?: string
|
||||
lastUpdate: string
|
||||
}
|
||||
|
||||
// 出入库记录
|
||||
export type OpType = 'inbound' | 'outbound' | 'borrow' | 'return'
|
||||
|
||||
export interface Operation {
|
||||
id: string
|
||||
type: OpType
|
||||
rfid: string
|
||||
materialId: string
|
||||
materialName: string
|
||||
quantity: number
|
||||
operator: string
|
||||
department?: string
|
||||
reason?: string
|
||||
time: string
|
||||
}
|
||||
|
||||
const CATEGORY_LABELS: Record<MaterialCategory, string> = {
|
||||
medical_device: '医疗器械',
|
||||
consumable: '耗材',
|
||||
equipment: '设备',
|
||||
instrument: '仪器',
|
||||
office: '办公',
|
||||
}
|
||||
|
||||
export const categoryLabels = CATEGORY_LABELS
|
||||
|
||||
const STATUS_LABELS: Record<MaterialStatus, string> = {
|
||||
in_stock: '在库',
|
||||
borrowed: '已借出',
|
||||
maintenance: '维修中',
|
||||
}
|
||||
|
||||
export const statusLabels = STATUS_LABELS
|
||||
|
||||
const OP_LABELS: Record<OpType, string> = {
|
||||
inbound: '入库',
|
||||
outbound: '出库',
|
||||
borrow: '借用',
|
||||
return: '归还',
|
||||
}
|
||||
|
||||
export const opLabels = OP_LABELS
|
||||
|
||||
export const opIcons: Record<OpType, string> = {
|
||||
inbound: '📥',
|
||||
outbound: '📤',
|
||||
borrow: '🤝',
|
||||
return: '↩️',
|
||||
}
|
||||
|
||||
// 模拟物资数据（每个都有 RFID 标签）
|
||||
export const initialMaterials: Material[] = [
|
||||
{
|
||||
id: 'M001',
|
||||
rfid: 'RFID-A001-2401',
|
||||
code: 'WS-2024-0001',
|
||||
name: '心电监护仪',
|
||||
category: 'medical_device',
|
||||
spec: 'PM-9000',
|
||||
unit: '台',
|
||||
manufacturer: '迈瑞医疗',
|
||||
warehouse: '中心仓库',
|
||||
location: 'A-01-03',
|
||||
status: 'in_stock',
|
||||
stock: 5,
|
||||
lastUpdate: '2026-07-28 14:23',
|
||||
},
|
||||
{
|
||||
id: 'M002',
|
||||
rfid: 'RFID-A002-2402',
|
||||
code: 'WS-2024-0002',
|
||||
name: '除颤仪',
|
||||
category: 'medical_device',
|
||||
spec: 'HeartStart MRx',
|
||||
unit: '台',
|
||||
manufacturer: '飞利浦',
|
||||
warehouse: '中心仓库',
|
||||
location: 'A-01-05',
|
||||
status: 'in_stock',
|
||||
stock: 3,
|
||||
lastUpdate: '2026-07-29 09:15',
|
||||
},
|
||||
{
|
||||
id: 'M003',
|
||||
rfid: 'RFID-A003-2403',
|
||||
code: 'WS-2024-0003',
|
||||
name: '便携式呼吸机',
|
||||
category: 'equipment',
|
||||
spec: 'Oxylog 3000',
|
||||
unit: '台',
|
||||
manufacturer: '德尔格',
|
||||
warehouse: '急救仓库',
|
||||
location: 'B-02-01',
|
||||
status: 'borrowed',
|
||||
stock: 2,
|
||||
borrower: '急诊科',
|
||||
borrowTime: '2026-07-30 08:20',
|
||||
expectedReturn: '2026-07-31 18:00',
|
||||
borrowReason: '急诊抢救使用',
|
||||
lastUpdate: '2026-07-30 08:20',
|
||||
},
|
||||
{
|
||||
id: 'M004',
|
||||
rfid: 'RFID-A004-2404',
|
||||
code: 'WS-2024-0004',
|
||||
name: '一次性医用口罩',
|
||||
category: 'consumable',
|
||||
spec: 'N95 折叠式',
|
||||
unit: '盒',
|
||||
manufacturer: '3M',
|
||||
warehouse: '耗材仓库',
|
||||
location: 'C-03-12',
|
||||
status: 'in_stock',
|
||||
stock: 120,
|
||||
lastUpdate: '2026-07-30 11:00',
|
||||
},
|
||||
{
|
||||
id: 'M005',
|
||||
rfid: 'RFID-A005-2405',
|
||||
code: 'WS-2024-0005',
|
||||
name: '血糖仪',
|
||||
category: 'instrument',
|
||||
spec: 'Accu-Chek Active',
|
||||
unit: '台',
|
||||
manufacturer: '罗氏',
|
||||
warehouse: '中心仓库',
|
||||
location: 'A-02-08',
|
||||
status: 'in_stock',
|
||||
stock: 8,
|
||||
lastUpdate: '2026-07-25 16:40',
|
||||
},
|
||||
{
|
||||
id: 'M006',
|
||||
rfid: 'RFID-A006-2406',
|
||||
code: 'WS-2024-0006',
|
||||
name: '输液泵',
|
||||
category: 'equipment',
|
||||
spec: 'Infusomat Space',
|
||||
unit: '台',
|
||||
manufacturer: '贝朗',
|
||||
warehouse: '中心仓库',
|
||||
location: 'A-02-12',
|
||||
status: 'borrowed',
|
||||
stock: 6,
|
||||
borrower: 'ICU',
|
||||
borrowTime: '2026-07-29 14:00',
|
||||
expectedReturn: '2026-08-02 14:00',
|
||||
borrowReason: 'ICU 病房常规使用',
|
||||
lastUpdate: '2026-07-29 14:00',
|
||||
},
|
||||
{
|
||||
id: 'M007',
|
||||
rfid: 'RFID-A007-2407',
|
||||
code: 'WS-2024-0007',
|
||||
name: 'B 超机',
|
||||
category: 'instrument',
|
||||
spec: 'DC-80',
|
||||
unit: '台',
|
||||
manufacturer: '迈瑞',
|
||||
warehouse: '影像仓库',
|
||||
location: 'D-01-01',
|
||||
status: 'in_stock',
|
||||
stock: 2,
|
||||
lastUpdate: '2026-07-22 10:10',
|
||||
},
|
||||
{
|
||||
id: 'M008',
|
||||
rfid: 'RFID-A008-2408',
|
||||
code: 'WS-2024-0008',
|
||||
name: '轮椅',
|
||||
category: 'equipment',
|
||||
spec: '折叠式 H-060',
|
||||
unit: '台',
|
||||
manufacturer: '互邦',
|
||||
warehouse: '康复仓库',
|
||||
location: 'E-01-04',
|
||||
status: 'in_stock',
|
||||
stock: 15,
|
||||
lastUpdate: '2026-07-26 13:20',
|
||||
},
|
||||
{
|
||||
id: 'M009',
|
||||
rfid: 'RFID-A009-2409',
|
||||
code: 'WS-2024-0009',
|
||||
name: '心电图机',
|
||||
category: 'instrument',
|
||||
spec: 'ECG-1250',
|
||||
unit: '台',
|
||||
manufacturer: '光电',
|
||||
warehouse: '中心仓库',
|
||||
location: 'A-01-10',
|
||||
status: 'maintenance',
|
||||
stock: 1,
|
||||
lastUpdate: '2026-07-20 09:00',
|
||||
},
|
||||
{
|
||||
id: 'M010',
|
||||
rfid: 'RFID-A010-2410',
|
||||
code: 'WS-2024-0010',
|
||||
name: '一次性注射器',
|
||||
category: 'consumable',
|
||||
spec: '5ml 带针',
|
||||
unit: '盒',
|
||||
manufacturer: '威高',
|
||||
warehouse: '耗材仓库',
|
||||
location: 'C-03-15',
|
||||
status: 'in_stock',
|
||||
stock: 240,
|
||||
lastUpdate: '2026-07-30 10:30',
|
||||
},
|
||||
{
|
||||
id: 'M011',
|
||||
rfid: 'RFID-A011-2411',
|
||||
code: 'WS-2024-0011',
|
||||
name: '担架',
|
||||
category: 'equipment',
|
||||
spec: '折叠铝合金',
|
||||
unit: '台',
|
||||
manufacturer: '安保',
|
||||
warehouse: '急救仓库',
|
||||
location: 'B-01-02',
|
||||
status: 'in_stock',
|
||||
stock: 4,
|
||||
lastUpdate: '2026-07-18 15:00',
|
||||
},
|
||||
{
|
||||
id: 'M012',
|
||||
rfid: 'RFID-A012-2412',
|
||||
code: 'WS-2024-0012',
|
||||
name: '血压计',
|
||||
category: 'instrument',
|
||||
spec: 'M-300A',
|
||||
unit: '台',
|
||||
manufacturer: '欧姆龙',
|
||||
warehouse: '中心仓库',
|
||||
location: 'A-02-05',
|
||||
status: 'in_stock',
|
||||
stock: 12,
|
||||
lastUpdate: '2026-07-27 11:30',
|
||||
},
|
||||
]
|
||||
|
||||
// 初始操作记录
|
||||
export const initialOperations: Operation[] = [
|
||||
{
|
||||
id: 'OP001',
|
||||
type: 'borrow',
|
||||
rfid: 'RFID-A003-2403',
|
||||
materialId: 'M003',
|
||||
materialName: '便携式呼吸机',
|
||||
quantity: 1,
|
||||
operator: '李护士',
|
||||
department: '急诊科',
|
||||
reason: '急诊抢救使用',
|
||||
time: '2026-07-30 08:20',
|
||||
},
|
||||
{
|
||||
id: 'OP002',
|
||||
type: 'inbound',
|
||||
rfid: 'RFID-A004-2404',
|
||||
materialId: 'M004',
|
||||
materialName: '一次性医用口罩',
|
||||
quantity: 50,
|
||||
operator: '王库管',
|
||||
reason: '月度补货',
|
||||
time: '2026-07-30 11:00',
|
||||
},
|
||||
{
|
||||
id: 'OP003',
|
||||
type: 'borrow',
|
||||
rfid: 'RFID-A006-2406',
|
||||
materialId: 'M006',
|
||||
materialName: '输液泵',
|
||||
quantity: 1,
|
||||
operator: '陈医生',
|
||||
department: 'ICU',
|
||||
reason: 'ICU 病房常规使用',
|
||||
time: '2026-07-29 14:00',
|
||||
},
|
||||
{
|
||||
id: 'OP004',
|
||||
type: 'outbound',
|
||||
rfid: 'RFID-A010-2410',
|
||||
materialId: 'M010',
|
||||
materialName: '一次性注射器',
|
||||
quantity: 30,
|
||||
operator: '王库管',
|
||||
department: '门诊部',
|
||||
time: '2026-07-30 10:30',
|
||||
},
|
||||
{
|
||||
id: 'OP005',
|
||||
type: 'inbound',
|
||||
rfid: 'RFID-A008-2408',
|
||||
materialId: 'M008',
|
||||
materialName: '轮椅',
|
||||
quantity: 5,
|
||||
operator: '赵采购',
|
||||
reason: '新增采购',
|
||||
time: '2026-07-26 13:20',
|
||||
},
|
||||
{
|
||||
id: 'OP006',
|
||||
type: 'return',
|
||||
rfid: 'RFID-A005-2405',
|
||||
materialId: 'M005',
|
||||
materialName: '血糖仪',
|
||||
quantity: 1,
|
||||
operator: '李护士',
|
||||
department: '内科',
|
||||
time: '2026-07-25 16:40',
|
||||
},
|
||||
]
|
||||
|
||||
// 工具：根据 RFID 查找物资
|
||||
export function findMaterialByRfid(materials: Material[], rfid: string): Material | undefined {
|
||||
return materials.find((m) => m.rfid === rfid)
|
||||
}
|
||||
|
||||
export function getMaterialStatusLabel(status: MaterialStatus): string {
|
||||
return STATUS_LABELS[status]
|
||||
}
|
||||
|
||||
export function getCategoryLabel(category: MaterialCategory): string {
|
||||
return CATEGORY_LABELS[category]
|
||||
}
|
||||
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
||||
declare module '*.css'
|
||||
declare module '*.scss'
|
||||
declare module '*.svg'
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
import 'element-plus/dist/index.css'
|
||||
import router from './router'
|
||||
import App from './App.vue'
|
||||
import './styles/main.css'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.use(ElementPlus, { locale: zhCn })
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,67 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/home',
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
name: 'home',
|
||||
component: () => import('../views/home/index.vue'),
|
||||
meta: { title: '智慧医院移动端' },
|
||||
},
|
||||
{
|
||||
path: '/material',
|
||||
name: 'material',
|
||||
component: () => import('../views/material/index.vue'),
|
||||
meta: { title: '物资管理' },
|
||||
},
|
||||
{
|
||||
path: '/material/detail/:id',
|
||||
name: 'material-detail',
|
||||
component: () => import('../views/material/detail.vue'),
|
||||
meta: { title: '物资详情', hideTabBar: true },
|
||||
},
|
||||
{
|
||||
path: '/inventory',
|
||||
name: 'inventory',
|
||||
component: () => import('../views/inventory/index.vue'),
|
||||
meta: { title: '出入库盘点' },
|
||||
},
|
||||
{
|
||||
path: '/inventory/scan',
|
||||
name: 'inventory-scan',
|
||||
component: () => import('../views/inventory/scan.vue'),
|
||||
meta: { title: '扫码出入库', hideTabBar: true },
|
||||
},
|
||||
{
|
||||
path: '/borrow',
|
||||
name: 'borrow',
|
||||
component: () => import('../views/borrow/index.vue'),
|
||||
meta: { title: '借用管理' },
|
||||
},
|
||||
{
|
||||
path: '/borrow/scan',
|
||||
name: 'borrow-scan',
|
||||
component: () => import('../views/borrow/scan.vue'),
|
||||
meta: { title: '扫码借用', hideTabBar: true },
|
||||
},
|
||||
{
|
||||
path: '/history',
|
||||
name: 'history',
|
||||
component: () => import('../views/history/index.vue'),
|
||||
meta: { title: '操作记录' },
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'profile',
|
||||
component: () => import('../views/profile/index.vue'),
|
||||
meta: { title: '我的', hideTabBar: true },
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,210 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import {
|
||||
initialMaterials,
|
||||
initialOperations,
|
||||
findMaterialByRfid,
|
||||
type Material,
|
||||
type Operation,
|
||||
type OpType,
|
||||
} from '../data/mockData'
|
||||
|
||||
const LS_KEY_MATERIAL = 'shm:materials'
|
||||
const LS_KEY_OPS = 'shm:operations'
|
||||
|
||||
function load<T>(key: string, fallback: T): T {
|
||||
try {
|
||||
const raw = localStorage.getItem(key)
|
||||
if (!raw) return fallback
|
||||
return JSON.parse(raw) as T
|
||||
} catch {
|
||||
return fallback
|
||||
}
|
||||
}
|
||||
|
||||
function save<T>(key: string, data: T) {
|
||||
localStorage.setItem(key, JSON.stringify(data))
|
||||
}
|
||||
|
||||
export const useHospitalStore = defineStore('hospital', () => {
|
||||
// 物资列表
|
||||
const materials = ref<Material[]>(load(LS_KEY_MATERIAL, initialMaterials))
|
||||
// 操作记录
|
||||
const operations = ref<Operation[]>(load(LS_KEY_OPS, initialOperations))
|
||||
|
||||
function persistMaterials() {
|
||||
save(LS_KEY_MATERIAL, materials.value)
|
||||
}
|
||||
function persistOps() {
|
||||
save(LS_KEY_OPS, operations.value)
|
||||
}
|
||||
|
||||
// 统计
|
||||
const stats = computed(() => ({
|
||||
total: materials.value.length,
|
||||
inStock: materials.value.filter((m) => m.status === 'in_stock').length,
|
||||
borrowed: materials.value.filter((m) => m.status === 'borrowed').length,
|
||||
maintenance: materials.value.filter((m) => m.status === 'maintenance').length,
|
||||
}))
|
||||
|
||||
const borrowedList = computed(() =>
|
||||
materials.value.filter((m) => m.status === 'borrowed'),
|
||||
)
|
||||
|
||||
// 根据 RFID 模拟扫码
|
||||
function scanRfid(rfid?: string): Material | undefined {
|
||||
if (rfid) return findMaterialByRfid(materials.value, rfid)
|
||||
// 未指定 RFID 时，随机返回一个物资（模拟真实手持机扫码不一定能扫到任意标签）
|
||||
const list = materials.value
|
||||
return list[Math.floor(Math.random() * list.length)]
|
||||
}
|
||||
|
||||
function findById(id: string): Material | undefined {
|
||||
return materials.value.find((m) => m.id === id)
|
||||
}
|
||||
|
||||
function findByRfid(rfid: string): Material | undefined {
|
||||
return findMaterialByRfid(materials.value, rfid)
|
||||
}
|
||||
|
||||
// 通用添加操作记录
|
||||
function recordOp(
|
||||
type: OpType,
|
||||
material: Material,
|
||||
quantity: number,
|
||||
operator: string,
|
||||
extras: { department?: string; reason?: string } = {},
|
||||
) {
|
||||
const op: Operation = {
|
||||
id: 'OP' + Date.now().toString(36).toUpperCase(),
|
||||
type,
|
||||
rfid: material.rfid,
|
||||
materialId: material.id,
|
||||
materialName: material.name,
|
||||
quantity,
|
||||
operator,
|
||||
department: extras.department,
|
||||
reason: extras.reason,
|
||||
time: formatNow(),
|
||||
}
|
||||
operations.value.unshift(op)
|
||||
persistOps()
|
||||
}
|
||||
|
||||
// 入库
|
||||
function doInbound(material: Material, quantity: number, operator: string, reason?: string) {
|
||||
material.stock += quantity
|
||||
material.status = 'in_stock'
|
||||
material.lastUpdate = formatNow()
|
||||
if (material.borrower) {
|
||||
material.borrower = undefined
|
||||
material.borrowTime = undefined
|
||||
material.expectedReturn = undefined
|
||||
material.borrowReason = undefined
|
||||
}
|
||||
recordOp('inbound', material, quantity, operator, { reason })
|
||||
persistMaterials()
|
||||
}
|
||||
|
||||
// 出库
|
||||
function doOutbound(
|
||||
material: Material,
|
||||
quantity: number,
|
||||
operator: string,
|
||||
department?: string,
|
||||
) {
|
||||
if (material.status !== 'in_stock') {
|
||||
throw new Error('物资不在库，无法出库')
|
||||
}
|
||||
if (material.stock < quantity) {
|
||||
throw new Error('库存不足')
|
||||
}
|
||||
material.stock -= quantity
|
||||
if (material.stock === 0) {
|
||||
// 单台设备出库后视为已借出（移动设备按整台管理）
|
||||
material.status = 'borrowed'
|
||||
material.borrower = department || '外借'
|
||||
material.borrowTime = formatNow()
|
||||
material.expectedReturn = formatNowPlus(7)
|
||||
}
|
||||
material.lastUpdate = formatNow()
|
||||
recordOp('outbound', material, quantity, operator, { department })
|
||||
persistMaterials()
|
||||
}
|
||||
|
||||
// 借用
|
||||
function doBorrow(
|
||||
material: Material,
|
||||
borrower: string,
|
||||
reason: string,
|
||||
days: number,
|
||||
operator: string,
|
||||
) {
|
||||
if (material.status !== 'in_stock') {
|
||||
throw new Error('仅在库物资可借用')
|
||||
}
|
||||
material.status = 'borrowed'
|
||||
material.borrower = borrower
|
||||
material.borrowTime = formatNow()
|
||||
material.expectedReturn = formatNowPlus(days)
|
||||
material.borrowReason = reason
|
||||
material.lastUpdate = formatNow()
|
||||
recordOp('borrow', material, 1, operator, {
|
||||
department: borrower,
|
||||
reason,
|
||||
})
|
||||
persistMaterials()
|
||||
}
|
||||
|
||||
// 归还
|
||||
function doReturn(material: Material, operator: string) {
|
||||
if (material.status !== 'borrowed') {
|
||||
throw new Error('物资不在借用状态')
|
||||
}
|
||||
const department = material.borrower
|
||||
material.status = 'in_stock'
|
||||
material.borrower = undefined
|
||||
material.borrowTime = undefined
|
||||
material.expectedReturn = undefined
|
||||
material.borrowReason = undefined
|
||||
material.lastUpdate = formatNow()
|
||||
recordOp('return', material, 1, operator, { department })
|
||||
persistMaterials()
|
||||
}
|
||||
|
||||
// 重置（演示用）
|
||||
function reset() {
|
||||
materials.value = JSON.parse(JSON.stringify(initialMaterials))
|
||||
operations.value = JSON.parse(JSON.stringify(initialOperations))
|
||||
persistMaterials()
|
||||
persistOps()
|
||||
}
|
||||
|
||||
return {
|
||||
materials,
|
||||
operations,
|
||||
stats,
|
||||
borrowedList,
|
||||
scanRfid,
|
||||
findById,
|
||||
findByRfid,
|
||||
doInbound,
|
||||
doOutbound,
|
||||
doBorrow,
|
||||
doReturn,
|
||||
reset,
|
||||
}
|
||||
})
|
||||
|
||||
function formatNow(): string {
|
||||
const d = new Date()
|
||||
const pad = (n: number) => n.toString().padStart(2, '0')
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
|
||||
}
|
||||
|
||||
function formatNowPlus(days: number): string {
|
||||
const d = new Date()
|
||||
d.setDate(d.getDate() + days)
|
||||
const pad = (n: number) => n.toString().padStart(2, '0')
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} 18:00`
|
||||
}
|
||||
@@ -0,0 +1,721 @@
|
||||
/* ====== 全局基础 ====== */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue',
|
||||
Helvetica, 'Microsoft YaHei', sans-serif;
|
||||
background: #f5f6f8;
|
||||
color: #323233;
|
||||
font-size: 14px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* 移动端安全区适配 */
|
||||
:root {
|
||||
--safe-area-top: env(safe-area-inset-top);
|
||||
--safe-area-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* ====== App 框架 ====== */
|
||||
.mobile-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: #f5f6f8;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
background: linear-gradient(135deg, #1989fa, #1677d4);
|
||||
color: #fff;
|
||||
padding: calc(var(--safe-area-top) + 12px) 16px 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2px 6px rgba(25, 137, 250, 0.2);
|
||||
}
|
||||
|
||||
.mobile-header .title {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.mobile-header .header-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 13px;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.mobile-content {
|
||||
flex: 1;
|
||||
padding: 12px 12px calc(var(--safe-area-bottom) + 70px);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.mobile-tabbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
padding-bottom: var(--safe-area-bottom);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.tab-item .icon {
|
||||
font-size: 22px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.tab-item .label {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ====== 通用卡片 ====== */
|
||||
.m-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.m-card-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #323233;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.m-card-title .extra {
|
||||
font-size: 12px;
|
||||
color: #1989fa;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* ====== 物资卡片 ====== */
|
||||
.material-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.material-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #e8f3ff, #c8e1ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.material-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.material-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #323233;
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.material-meta {
|
||||
font-size: 12px;
|
||||
color: #969799;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.material-meta .sep {
|
||||
color: #dcdee0;
|
||||
}
|
||||
|
||||
.material-rfid {
|
||||
font-family: 'SF Mono', Monaco, Consolas, monospace;
|
||||
font-size: 11px;
|
||||
color: #1989fa;
|
||||
background: #f0f8ff;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ====== 状态标签 ====== */
|
||||
.status-tag {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-tag.in_stock {
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.status-tag.borrowed {
|
||||
background: #fff3e0;
|
||||
color: #e65100;
|
||||
}
|
||||
|
||||
.status-tag.inbound {
|
||||
background: #e3f2fd;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
.status-tag.outbound {
|
||||
background: #fce4ec;
|
||||
color: #c2185b;
|
||||
}
|
||||
|
||||
.status-tag.maintenance {
|
||||
background: #f3e5f5;
|
||||
color: #6a1b9a;
|
||||
}
|
||||
|
||||
/* ====== 扫码大按钮 ====== */
|
||||
.scan-zone {
|
||||
background: linear-gradient(135deg, #1989fa, #4ba8ff);
|
||||
border-radius: 14px;
|
||||
padding: 28px 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 4px 14px rgba(25, 137, 250, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scan-zone::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
|
||||
animation: pulse 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.scan-zone .scan-title {
|
||||
font-size: 14px;
|
||||
opacity: 0.95;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.scan-zone .scan-rfid {
|
||||
font-family: 'SF Mono', Monaco, Consolas, monospace;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.scan-btn-big {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #fff;
|
||||
color: #1989fa;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
padding: 14px 32px;
|
||||
border-radius: 30px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.scan-btn-big:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.scan-btn-big.scanning {
|
||||
background: #fff3e0;
|
||||
color: #e65100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.scan-btn-big.scanning .icon {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.scan-mode-tabs {
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 24px;
|
||||
padding: 4px;
|
||||
margin: 0 auto 16px;
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.scan-mode-tab {
|
||||
padding: 6px 16px;
|
||||
font-size: 13px;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.scan-mode-tab.active {
|
||||
background: #fff;
|
||||
color: #1989fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ====== 快捷功能 ====== */
|
||||
.quick-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.quick-item {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px 8px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.quick-item:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.quick-item .icon {
|
||||
font-size: 26px;
|
||||
margin-bottom: 6px;
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.quick-item .label {
|
||||
font-size: 12px;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
/* ====== 数据条 ====== */
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #1989fa;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: #969799;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ====== 搜索框 ====== */
|
||||
.m-search {
|
||||
background: #fff;
|
||||
border-radius: 22px;
|
||||
padding: 9px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.m-search input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
background: transparent;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
.m-search input::placeholder {
|
||||
color: #c8c9cc;
|
||||
}
|
||||
|
||||
/* ====== 筛选条 ====== */
|
||||
.m-filter {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.m-filter::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 14px;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
color: #646566;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.filter-chip.active {
|
||||
background: #e8f3ff;
|
||||
color: #1989fa;
|
||||
border-color: #1989fa;
|
||||
}
|
||||
|
||||
/* ====== 列表行 ====== */
|
||||
.list-item {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.list-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-icon.inbound {
|
||||
background: #e3f2fd;
|
||||
}
|
||||
|
||||
.list-icon.outbound {
|
||||
background: #fce4ec;
|
||||
}
|
||||
|
||||
.list-icon.borrow {
|
||||
background: #fff3e0;
|
||||
}
|
||||
|
||||
.list-icon.return {
|
||||
background: #e8f5e9;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #323233;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.list-sub {
|
||||
font-size: 12px;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
.list-arrow {
|
||||
color: #c8c9cc;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* ====== 弹窗 ====== */
|
||||
.detail-modal {
|
||||
background: #fff;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 20px 16px calc(var(--safe-area-bottom) + 20px);
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.detail-modal .modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.detail-modal .modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-modal .modal-close {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 14px;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.detail-row .label {
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
.detail-row .value {
|
||||
color: #323233;
|
||||
font-weight: 500;
|
||||
max-width: 60%;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.detail-row .value.rfid {
|
||||
font-family: 'SF Mono', Monaco, Consolas, monospace;
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.2s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.modal-actions button {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #1989fa;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background: #f5f5f5;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #ff9800;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: #07c160;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ====== 空状态 ====== */
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
.empty .icon {
|
||||
font-size: 60px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.empty .text {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ====== Toast 自定义 ====== */
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0, 0, 0, 0.78);
|
||||
color: #fff;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
animation: toastIn 0.25s ease-out;
|
||||
max-width: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toast.success {
|
||||
background: rgba(7, 193, 96, 0.92);
|
||||
}
|
||||
|
||||
.toast.warning {
|
||||
background: rgba(255, 152, 0, 0.92);
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
background: rgba(255, 68, 68, 0.92);
|
||||
}
|
||||
|
||||
@keyframes toastIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ====== Element Plus 适配 ====== */
|
||||
.el-message-box {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
.el-textarea__inner {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 隐藏桌面滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useHospitalStore } from '../../stores/hospital'
|
||||
import { statusLabels } from '../../data/mockData'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useHospitalStore()
|
||||
|
||||
const tab = ref<'borrowed' | 'history'>('borrowed')
|
||||
|
||||
const borrowedList = computed(() =>
|
||||
store.materials.filter((m) => m.status === 'borrowed'),
|
||||
)
|
||||
|
||||
function goScan() {
|
||||
router.push('/borrow/scan')
|
||||
}
|
||||
|
||||
function goDetail(id: string) {
|
||||
router.push(`/material/detail/${id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="borrow-page">
|
||||
<div class="m-card" style="padding: 0; overflow: hidden">
|
||||
<div
|
||||
style="
|
||||
background: linear-gradient(135deg, #ff9800, #ff6d00);
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
"
|
||||
@click="goScan"
|
||||
>
|
||||
<div style="font-size: 36px; margin-bottom: 8px">🤝</div>
|
||||
<div style="font-size: 16px; font-weight: 600">扫码借用 / 归还</div>
|
||||
<div style="font-size: 12px; opacity: 0.9; margin-top: 4px">
|
||||
按下扫码键扫描 RFID 标签
|
||||
</div>
|
||||
<button
|
||||
style="
|
||||
margin-top: 14px;
|
||||
background: #fff;
|
||||
color: #ff9800;
|
||||
border: none;
|
||||
padding: 10px 28px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
立即扫码
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-card">
|
||||
<div class="m-card-title">
|
||||
<span style="display: flex; gap: 16px; align-items: center">
|
||||
<span
|
||||
:style="{
|
||||
fontSize: '15px',
|
||||
color: tab === 'borrowed' ? '#1989fa' : '#646566',
|
||||
borderBottom: tab === 'borrowed' ? '2px solid #1989fa' : '2px solid transparent',
|
||||
paddingBottom: '4px',
|
||||
}"
|
||||
@click="tab = 'borrowed'"
|
||||
>
|
||||
借用中 ({{ borrowedList.length }})
|
||||
</span>
|
||||
<span
|
||||
:style="{
|
||||
fontSize: '15px',
|
||||
color: tab === 'history' ? '#1989fa' : '#646566',
|
||||
borderBottom: tab === 'history' ? '2px solid #1989fa' : '2px solid transparent',
|
||||
paddingBottom: '4px',
|
||||
}"
|
||||
@click="tab = 'history'; $router.push('/history')"
|
||||
>
|
||||
历史记录
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="borrowedList.length === 0" class="empty" style="padding: 30px 20px">
|
||||
<div class="icon">📋</div>
|
||||
<div class="text">当前无借用中物资</div>
|
||||
<div style="font-size: 12px; color: #969799; margin-top: 8px">
|
||||
点击上方扫码按钮开始借用
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="m in borrowedList"
|
||||
:key="m.id"
|
||||
class="list-item"
|
||||
@click="goDetail(m.id)"
|
||||
>
|
||||
<div class="list-icon borrow">🤝</div>
|
||||
<div class="list-content">
|
||||
<div class="list-title">{{ m.name }}</div>
|
||||
<div class="list-sub">
|
||||
{{ m.borrower }} · 借于 {{ m.borrowTime }}
|
||||
</div>
|
||||
<div class="list-sub" style="color: #ff9800">
|
||||
预计归还：{{ m.expectedReturn }}
|
||||
</div>
|
||||
</div>
|
||||
<span class="status-tag borrowed">{{ statusLabels[m.status] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,234 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useHospitalStore } from '../../stores/hospital'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
import ScanButton from '../../components/ScanButton.vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import type { Material } from '../../data/mockData'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useHospitalStore()
|
||||
const toast = useToast()
|
||||
|
||||
// 如果是归还流程，从 query 携带的 materialId 预设
|
||||
const preselectId = ref((route.query.id as string) || '')
|
||||
|
||||
const scanning = ref(false)
|
||||
const currentRfid = ref('')
|
||||
const currentMaterial = ref<Material | undefined>()
|
||||
|
||||
const borrower = ref('')
|
||||
const reason = ref('')
|
||||
const days = ref(7)
|
||||
|
||||
// 如果传入了 id，先根据 id 找到物资
|
||||
onMounted(() => {
|
||||
if (preselectId.value) {
|
||||
const m = store.findById(preselectId.value)
|
||||
if (m) {
|
||||
currentMaterial.value = m
|
||||
currentRfid.value = m.rfid
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function doScan() {
|
||||
if (scanning.value) return
|
||||
scanning.value = true
|
||||
currentRfid.value = '扫描中…'
|
||||
setTimeout(() => {
|
||||
const mat = store.scanRfid()
|
||||
scanning.value = false
|
||||
if (mat) {
|
||||
currentRfid.value = mat.rfid
|
||||
currentMaterial.value = mat
|
||||
if (mat.status === 'in_stock') {
|
||||
toast.success(`识别到：${mat.name}（可借用）`)
|
||||
} else if (mat.status === 'borrowed') {
|
||||
toast.success(`识别到：${mat.name}（可归还）`)
|
||||
} else {
|
||||
toast.warning(`该物资当前维修中，无法操作`)
|
||||
}
|
||||
} else {
|
||||
currentRfid.value = '未识别'
|
||||
toast.error('未识别到 RFID 标签')
|
||||
}
|
||||
}, 800)
|
||||
}
|
||||
|
||||
const isReturn = computed(() => currentMaterial.value?.status === 'borrowed')
|
||||
const isInStock = computed(() => currentMaterial.value?.status === 'in_stock')
|
||||
|
||||
async function doBorrow() {
|
||||
if (!currentMaterial.value) return
|
||||
if (!borrower.value.trim()) {
|
||||
toast.warning('请填写借用方')
|
||||
return
|
||||
}
|
||||
const mat = currentMaterial.value
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认借用 ${mat.name} 给 ${borrower.value}？\n借用天数：${days.value} 天`,
|
||||
'借用确认',
|
||||
{ confirmButtonText: '确认借用', cancelButtonText: '取消' },
|
||||
)
|
||||
store.doBorrow(mat, borrower.value.trim(), reason.value || '业务借用', days.value, '当前用户')
|
||||
toast.success('借用成功')
|
||||
reset()
|
||||
} catch (e: any) {
|
||||
if (e?.message) toast.error(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function doReturn() {
|
||||
if (!currentMaterial.value) return
|
||||
const mat = currentMaterial.value
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认归还 ${mat.name}？\n借出方：${mat.borrower}`,
|
||||
'归还确认',
|
||||
{ confirmButtonText: '确认归还', cancelButtonText: '取消' },
|
||||
)
|
||||
store.doReturn(mat, '当前用户')
|
||||
toast.success('归还成功')
|
||||
reset()
|
||||
} catch (e: any) {
|
||||
if (e?.message) toast.error(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
currentMaterial.value = undefined
|
||||
currentRfid.value = ''
|
||||
borrower.value = ''
|
||||
reason.value = ''
|
||||
days.value = 7
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="scan-page">
|
||||
<ScanButton
|
||||
:rfid="currentRfid"
|
||||
:scanning="scanning"
|
||||
:show-mode-tabs="false"
|
||||
:mode="isReturn ? 'return' : 'borrow'"
|
||||
@scan="doScan"
|
||||
/>
|
||||
|
||||
<div v-if="!currentMaterial" class="m-card">
|
||||
<div class="m-card-title"><span>🤝 借用归还说明</span></div>
|
||||
<div style="font-size: 13px; color: #646566; line-height: 1.8">
|
||||
• 扫描物资 RFID 标签，系统自动识别借用/归还<br />
|
||||
• <b style="color: #1989fa">在库</b>物资：填写借用方后可借出<br />
|
||||
• <b style="color: #ff9800">已借出</b>物资：可直接确认归还<br />
|
||||
• 维修中物资不可借用<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="m-card">
|
||||
<div class="m-card-title">
|
||||
<span>物资信息</span>
|
||||
<span :class="['status-tag', currentMaterial.status]">
|
||||
{{
|
||||
currentMaterial.status === 'in_stock'
|
||||
? '在库'
|
||||
: currentMaterial.status === 'borrowed'
|
||||
? '已借出'
|
||||
: '维修中'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<span class="label">物资名称</span>
|
||||
<span class="value">{{ currentMaterial.name }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">RFID</span>
|
||||
<span class="value rfid">{{ currentMaterial.rfid }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">规格</span>
|
||||
<span class="value">{{ currentMaterial.spec }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">仓库/位置</span>
|
||||
<span class="value">{{ currentMaterial.warehouse }} / {{ currentMaterial.location }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="isReturn"
|
||||
style="
|
||||
margin-top: 14px;
|
||||
padding: 12px;
|
||||
background: #fff7e6;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
"
|
||||
>
|
||||
<div>借出方：<b>{{ currentMaterial.borrower }}</b></div>
|
||||
<div style="margin-top: 4px">借出时间：{{ currentMaterial.borrowTime }}</div>
|
||||
<div style="margin-top: 4px">预计归还：{{ currentMaterial.expectedReturn }}</div>
|
||||
<div v-if="currentMaterial.borrowReason" style="margin-top: 4px">
|
||||
借用原因：{{ currentMaterial.borrowReason }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isInStock" style="margin-top: 14px">
|
||||
<div style="font-size: 13px; color: #646566; margin-bottom: 6px">
|
||||
借用方 <span style="color: #ff4d4f">*</span>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="borrower"
|
||||
placeholder="如：急诊科、内科"
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="isInStock" style="margin-top: 14px">
|
||||
<div style="font-size: 13px; color: #646566; margin-bottom: 6px">借用天数</div>
|
||||
<el-input-number
|
||||
v-model="days"
|
||||
:min="1"
|
||||
:max="365"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="isInStock" style="margin-top: 14px">
|
||||
<div style="font-size: 13px; color: #646566; margin-bottom: 6px">借用原因</div>
|
||||
<el-input
|
||||
v-model="reason"
|
||||
placeholder="业务用途说明"
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn-default" @click="cancel">返回</button>
|
||||
<button
|
||||
v-if="isReturn"
|
||||
class="btn-success"
|
||||
@click="doReturn"
|
||||
>
|
||||
确认归还
|
||||
</button>
|
||||
<button
|
||||
v-if="isInStock"
|
||||
class="btn-warning"
|
||||
@click="doBorrow"
|
||||
>
|
||||
确认借用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useHospitalStore } from '../../stores/hospital'
|
||||
import { opIcons, opLabels } from '../../data/mockData'
|
||||
|
||||
const store = useHospitalStore()
|
||||
|
||||
const typeFilters = [
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: 'inbound', label: '入库' },
|
||||
{ value: 'outbound', label: '出库' },
|
||||
{ value: 'borrow', label: '借用' },
|
||||
{ value: 'return', label: '归还' },
|
||||
]
|
||||
const active = ref('all')
|
||||
|
||||
const filtered = computed(() => {
|
||||
if (active.value === 'all') return store.operations
|
||||
return store.operations.filter((o) => o.type === active.value)
|
||||
})
|
||||
|
||||
const today = computed(() => {
|
||||
const d = new Date()
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
||||
})
|
||||
|
||||
function isToday(time: string) {
|
||||
return time.startsWith(today.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="history-page">
|
||||
<!-- 筛选 -->
|
||||
<div class="m-filter">
|
||||
<div
|
||||
v-for="f in typeFilters"
|
||||
:key="f.value"
|
||||
class="filter-chip"
|
||||
:class="{ active: active === f.value }"
|
||||
@click="active = f.value"
|
||||
>
|
||||
{{ f.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="filtered.length === 0" class="empty">
|
||||
<div class="icon">📭</div>
|
||||
<div class="text">暂无操作记录</div>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="m-card" v-for="op in filtered" :key="op.id" style="padding: 12px">
|
||||
<div style="display: flex; gap: 12px">
|
||||
<div :class="['list-icon', op.type]" style="width: 40px; height: 40px; font-size: 18px">
|
||||
{{ opIcons[op.type] }}
|
||||
</div>
|
||||
<div style="flex: 1; min-width: 0">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<span style="font-size: 14px; font-weight: 600">
|
||||
{{ opLabels[op.type] }} · {{ op.materialName }}
|
||||
</span>
|
||||
<span
|
||||
v-if="isToday(op.time)"
|
||||
style="font-size: 10px; background: #ffeceb; color: #ff4d4f; padding: 1px 6px; border-radius: 8px"
|
||||
>
|
||||
今日
|
||||
</span>
|
||||
</div>
|
||||
<div style="font-size: 12px; color: #969799; margin-top: 4px">
|
||||
RFID: <span style="font-family: monospace; color: #1989fa">{{ op.rfid }}</span>
|
||||
</div>
|
||||
<div style="font-size: 12px; color: #646566; margin-top: 4px">
|
||||
数量 {{ op.quantity }} · 操作员 {{ op.operator }}
|
||||
</div>
|
||||
<div v-if="op.department || op.reason" style="font-size: 12px; color: #646566; margin-top: 2px">
|
||||
<span v-if="op.department">科室：{{ op.department }}</span>
|
||||
<span v-if="op.reason" style="margin-left: 8px">备注：{{ op.reason }}</span>
|
||||
</div>
|
||||
<div style="font-size: 11px; color: #c8c9cc; margin-top: 4px">
|
||||
{{ op.time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,130 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useHospitalStore } from '../../stores/hospital'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
import { opIcons, opLabels } from '../../data/mockData'
|
||||
import ScanButton from '../../components/ScanButton.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useHospitalStore()
|
||||
const toast = useToast()
|
||||
|
||||
const recentOps = computed(() => store.operations.slice(0, 5))
|
||||
|
||||
const quickLinks = [
|
||||
{ icon: '📦', label: '物资', path: '/material' },
|
||||
{ icon: '📥', label: '入库', path: '/inventory/scan?mode=inbound' },
|
||||
{ icon: '📤', label: '出库', path: '/inventory/scan?mode=outbound' },
|
||||
{ icon: '🤝', label: '借用', path: '/borrow' },
|
||||
]
|
||||
|
||||
function go(path: string) {
|
||||
router.push(path)
|
||||
}
|
||||
|
||||
function quickScan() {
|
||||
// 直接进入入库扫码
|
||||
router.push('/inventory/scan?mode=inbound')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<ScanButton :rfid="'手持端就绪'" @scan="quickScan" />
|
||||
|
||||
<!-- 数据概览 -->
|
||||
<div class="m-card">
|
||||
<div class="m-card-title">
|
||||
<span>📊 物资总览</span>
|
||||
<span class="extra" @click="go('/material')">查看全部</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">{{ store.stats.total }}</div>
|
||||
<div class="stat-label">总物资</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num" style="color: #07c160">{{ store.stats.inStock }}</div>
|
||||
<div class="stat-label">在库</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num" style="color: #ff9800">{{ store.stats.borrowed }}</div>
|
||||
<div class="stat-label">借出</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num" style="color: #9c27b0">{{ store.stats.maintenance }}</div>
|
||||
<div class="stat-label">维修</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷功能 -->
|
||||
<div class="m-card">
|
||||
<div class="m-card-title"><span>⚡ 快捷功能</span></div>
|
||||
<div class="quick-grid">
|
||||
<div
|
||||
v-for="q in quickLinks"
|
||||
:key="q.path"
|
||||
class="quick-item"
|
||||
@click="go(q.path)"
|
||||
>
|
||||
<div class="icon">{{ q.icon }}</div>
|
||||
<div class="label">{{ q.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待归还 -->
|
||||
<div class="m-card">
|
||||
<div class="m-card-title">
|
||||
<span>⏰ 待归还物资</span>
|
||||
<span class="extra" @click="go('/borrow')">查看全部</span>
|
||||
</div>
|
||||
<div v-if="store.borrowedList.length === 0" class="empty" style="padding: 20px">
|
||||
<div class="text">暂无借用记录</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="m in store.borrowedList.slice(0, 3)"
|
||||
:key="m.id"
|
||||
class="list-item"
|
||||
@click="go(`/material/detail/${m.id}`)"
|
||||
>
|
||||
<div class="list-icon borrow">🤝</div>
|
||||
<div class="list-content">
|
||||
<div class="list-title">{{ m.name }}</div>
|
||||
<div class="list-sub">
|
||||
借出方：{{ m.borrower }} · 归还：{{ m.expectedReturn }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-arrow">›</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近操作 -->
|
||||
<div class="m-card">
|
||||
<div class="m-card-title">
|
||||
<span>📝 最近操作</span>
|
||||
<span class="extra" @click="go('/history')">全部记录</span>
|
||||
</div>
|
||||
<div v-if="recentOps.length === 0" class="empty" style="padding: 20px">
|
||||
<div class="text">暂无操作记录</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="op in recentOps"
|
||||
:key="op.id"
|
||||
class="list-item"
|
||||
>
|
||||
<div :class="['list-icon', op.type]">{{ opIcons[op.type] }}</div>
|
||||
<div class="list-content">
|
||||
<div class="list-title">
|
||||
{{ opLabels[op.type] }} · {{ op.materialName }}
|
||||
</div>
|
||||
<div class="list-sub">
|
||||
{{ op.time }} · {{ op.operator }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useHospitalStore } from '../../stores/hospital'
|
||||
import { opIcons, opLabels } from '../../data/mockData'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useHospitalStore()
|
||||
|
||||
const recentInbound = () =>
|
||||
store.operations.filter((o) => o.type === 'inbound' || o.type === 'outbound').slice(0, 5)
|
||||
|
||||
function go(path: string) {
|
||||
router.push(path)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="inventory-page">
|
||||
<div class="m-card">
|
||||
<div class="m-card-title"><span>📦 出入库操作</span></div>
|
||||
<div class="quick-grid" style="grid-template-columns: 1fr 1fr">
|
||||
<div class="quick-item" style="padding: 20px 8px" @click="go('/inventory/scan?mode=inbound')">
|
||||
<div class="icon" style="font-size: 36px">📥</div>
|
||||
<div class="label" style="font-size: 14px; font-weight: 600">扫码入库</div>
|
||||
<div style="font-size: 11px; color: #969799; margin-top: 4px">扫描 RFID 入库</div>
|
||||
</div>
|
||||
<div class="quick-item" style="padding: 20px 8px" @click="go('/inventory/scan?mode=outbound')">
|
||||
<div class="icon" style="font-size: 36px">📤</div>
|
||||
<div class="label" style="font-size: 14px; font-weight: 600">扫码出库</div>
|
||||
<div style="font-size: 11px; color: #969799; margin-top: 4px">扫描 RFID 出库</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-card">
|
||||
<div class="m-card-title">
|
||||
<span>📊 库存概览</span>
|
||||
<span class="extra" @click="go('/material')">详情</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat-item">
|
||||
<div class="stat-num">{{ store.stats.total }}</div>
|
||||
<div class="stat-label">物资数</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num" style="color: #07c160">{{ store.stats.inStock }}</div>
|
||||
<div class="stat-label">在库</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num" style="color: #ff9800">{{ store.stats.borrowed }}</div>
|
||||
<div class="stat-label">出库中</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-card">
|
||||
<div class="m-card-title">
|
||||
<span>📝 最近出入库</span>
|
||||
<span class="extra" @click="go('/history')">全部</span>
|
||||
</div>
|
||||
<div v-if="recentInbound().length === 0" class="empty" style="padding: 20px">
|
||||
<div class="text">暂无出入库记录</div>
|
||||
</div>
|
||||
<div v-for="op in recentInbound()" :key="op.id" class="list-item">
|
||||
<div :class="['list-icon', op.type]">{{ opIcons[op.type] }}</div>
|
||||
<div class="list-content">
|
||||
<div class="list-title">{{ opLabels[op.type] }} · {{ op.materialName }}</div>
|
||||
<div class="list-sub">
|
||||
数量 {{ op.quantity }} · {{ op.time }} · {{ op.operator }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-card">
|
||||
<div class="m-card-title"><span>💡 盘点说明</span></div>
|
||||
<div style="font-size: 13px; color: #646566; line-height: 1.7">
|
||||
1. 选择入库或出库模式<br />
|
||||
2. 靠近 RFID 标签按下扫码键<br />
|
||||
3. 确认物资信息后填写数量<br />
|
||||
4. 提交后系统自动更新库存<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,211 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useHospitalStore } from '../../stores/hospital'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
import ScanButton from '../../components/ScanButton.vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import type { Material } from '../../data/mockData'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useHospitalStore()
|
||||
const toast = useToast()
|
||||
|
||||
type Mode = 'inbound' | 'outbound'
|
||||
const mode = ref<Mode>(((route.query.mode as Mode) || 'inbound') as Mode)
|
||||
const scanning = ref(false)
|
||||
const currentRfid = ref('')
|
||||
const currentMaterial = ref<Material | undefined>()
|
||||
const quantity = ref(1)
|
||||
const department = ref('')
|
||||
const reason = ref('')
|
||||
const showDetail = ref(false)
|
||||
|
||||
const modeLabel = computed(() => (mode.value === 'inbound' ? '入库' : '出库'))
|
||||
|
||||
function switchMode(m: 'inbound' | 'outbound') {
|
||||
mode.value = m
|
||||
currentMaterial.value = undefined
|
||||
currentRfid.value = ''
|
||||
showDetail.value = false
|
||||
}
|
||||
|
||||
function doScan() {
|
||||
if (scanning.value) return
|
||||
scanning.value = true
|
||||
currentRfid.value = '扫描中…'
|
||||
// 模拟扫码耗时
|
||||
setTimeout(() => {
|
||||
const mat = store.scanRfid()
|
||||
scanning.value = false
|
||||
if (mat) {
|
||||
currentRfid.value = mat.rfid
|
||||
currentMaterial.value = mat
|
||||
showDetail.value = true
|
||||
// 检查状态
|
||||
if (mode.value === 'outbound' && mat.status !== 'in_stock') {
|
||||
toast.warning(`该物资当前为「${mat.status === 'borrowed' ? '借出' : '维修'}」状态`)
|
||||
}
|
||||
} else {
|
||||
currentRfid.value = '未识别到标签'
|
||||
toast.error('未识别到 RFID 标签，请靠近重试')
|
||||
}
|
||||
}, 800)
|
||||
}
|
||||
|
||||
async function doSubmit() {
|
||||
if (!currentMaterial.value) return
|
||||
const mat = currentMaterial.value
|
||||
try {
|
||||
if (mode.value === 'inbound') {
|
||||
await ElMessageBox.confirm(
|
||||
`确认入库 ${mat.name} × ${quantity.value}？`,
|
||||
'入库确认',
|
||||
{ confirmButtonText: '确认入库', cancelButtonText: '取消' },
|
||||
)
|
||||
store.doInbound(mat, quantity.value, '当前用户', reason.value || '日常入库')
|
||||
toast.success('入库成功')
|
||||
} else {
|
||||
if (!department.value.trim()) {
|
||||
toast.warning('请填写领用科室')
|
||||
return
|
||||
}
|
||||
await ElMessageBox.confirm(
|
||||
`确认出库 ${mat.name} × ${quantity.value} 给 ${department.value}？`,
|
||||
'出库确认',
|
||||
{ confirmButtonText: '确认出库', cancelButtonText: '取消' },
|
||||
)
|
||||
store.doOutbound(mat, quantity.value, '当前用户', department.value.trim())
|
||||
toast.success('出库成功')
|
||||
}
|
||||
// 重置
|
||||
currentMaterial.value = undefined
|
||||
currentRfid.value = ''
|
||||
quantity.value = 1
|
||||
department.value = ''
|
||||
reason.value = ''
|
||||
showDetail.value = false
|
||||
} catch (e: any) {
|
||||
if (e?.message) toast.error(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
currentMaterial.value = undefined
|
||||
currentRfid.value = ''
|
||||
showDetail.value = false
|
||||
}
|
||||
|
||||
function closeAndExit() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 自动触发一次扫描（演示效果）
|
||||
// doScan()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="scan-page">
|
||||
<ScanButton
|
||||
:rfid="currentRfid"
|
||||
:scanning="scanning"
|
||||
:mode="mode"
|
||||
:show-mode-tabs="true"
|
||||
@scan="doScan"
|
||||
@mode-change="(m) => m === 'inbound' || m === 'outbound' ? switchMode(m) : null"
|
||||
/>
|
||||
|
||||
<div v-if="!currentMaterial" class="m-card">
|
||||
<div class="m-card-title"><span>📋 操作说明</span></div>
|
||||
<div style="font-size: 13px; color: #646566; line-height: 1.8">
|
||||
• 切换上方模式：<b>入库</b> 或 <b>出库</b><br />
|
||||
• 按下 <b>扫码</b> 按钮模拟手持机读取 RFID 标签<br />
|
||||
• 读取成功后核对物资信息并提交<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="m-card">
|
||||
<div class="m-card-title">
|
||||
<span>{{ modeLabel }}确认</span>
|
||||
<span class="status-tag" :class="currentMaterial.status">
|
||||
{{ currentMaterial.status === 'in_stock' ? '在库' : currentMaterial.status === 'borrowed' ? '已借出' : '维修中' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<span class="label">物资名称</span>
|
||||
<span class="value">{{ currentMaterial.name }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">RFID</span>
|
||||
<span class="value rfid">{{ currentMaterial.rfid }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">规格</span>
|
||||
<span class="value">{{ currentMaterial.spec }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">仓库/位置</span>
|
||||
<span class="value">{{ currentMaterial.warehouse }} / {{ currentMaterial.location }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">当前库存</span>
|
||||
<span class="value">{{ currentMaterial.stock }} {{ currentMaterial.unit }}</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 14px">
|
||||
<div style="font-size: 13px; color: #646566; margin-bottom: 6px">
|
||||
{{ modeLabel }}数量
|
||||
</div>
|
||||
<el-input-number
|
||||
v-model="quantity"
|
||||
:min="1"
|
||||
:max="9999"
|
||||
size="large"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="mode === 'outbound'" style="margin-top: 14px">
|
||||
<div style="font-size: 13px; color: #646566; margin-bottom: 6px">
|
||||
领用科室 <span style="color: #ff4d4f">*</span>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="department"
|
||||
placeholder="如：急诊科、ICU"
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="mode === 'inbound'" style="margin-top: 14px">
|
||||
<div style="font-size: 13px; color: #646566; margin-bottom: 6px">
|
||||
入库备注（可选）
|
||||
</div>
|
||||
<el-input
|
||||
v-model="reason"
|
||||
placeholder="如：月度补货"
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn-default" @click="cancel">取消</button>
|
||||
<button
|
||||
:class="mode === 'inbound' ? 'btn-primary' : 'btn-warning'"
|
||||
@click="doSubmit"
|
||||
>
|
||||
确认{{ modeLabel }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.scan-page {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useHospitalStore } from '../../stores/hospital'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
import {
|
||||
categoryLabels,
|
||||
statusLabels,
|
||||
} from '../../data/mockData'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useHospitalStore()
|
||||
const toast = useToast()
|
||||
|
||||
const id = computed(() => route.params.id as string)
|
||||
const material = computed(() => store.findById(id.value))
|
||||
|
||||
const showModal = ref(false)
|
||||
|
||||
function goBack() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
function openBorrow() {
|
||||
if (!material.value) return
|
||||
if (material.value.status !== 'in_stock') {
|
||||
toast.warning('该物资不在库，无法借用')
|
||||
return
|
||||
}
|
||||
router.push(`/borrow/scan?id=${material.value.id}`)
|
||||
}
|
||||
|
||||
async function doReturn() {
|
||||
if (!material.value) return
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认归还 ${material.value.name}？`,
|
||||
'归还确认',
|
||||
{ confirmButtonText: '确认归还', cancelButtonText: '取消' },
|
||||
)
|
||||
store.doReturn(material.value, '当前用户')
|
||||
toast.success('已归还')
|
||||
showModal.value = false
|
||||
} catch {
|
||||
// 用户取消
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="material" class="detail-page">
|
||||
<div class="m-card">
|
||||
<div style="display: flex; gap: 14px; align-items: center">
|
||||
<div class="material-icon" style="width: 64px; height: 64px; font-size: 32px">
|
||||
📦
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<div style="font-size: 17px; font-weight: 600">{{ material.name }}</div>
|
||||
<div style="font-size: 12px; color: #969799; margin-top: 4px">
|
||||
{{ categoryLabels[material.category] }} · {{ material.spec }}
|
||||
</div>
|
||||
<span :class="['status-tag', material.status]" style="margin-top: 6px">
|
||||
{{ statusLabels[material.status] }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-card">
|
||||
<div class="m-card-title"><span>基本信息</span></div>
|
||||
<div class="detail-row">
|
||||
<span class="label">RFID 标签</span>
|
||||
<span class="value rfid">{{ material.rfid }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">物资编号</span>
|
||||
<span class="value">{{ material.code }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">规格型号</span>
|
||||
<span class="value">{{ material.spec }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">单位</span>
|
||||
<span class="value">{{ material.unit }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">生产厂商</span>
|
||||
<span class="value">{{ material.manufacturer }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">所属仓库</span>
|
||||
<span class="value">{{ material.warehouse }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">存放位置</span>
|
||||
<span class="value">{{ material.location }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">库存数量</span>
|
||||
<span class="value">{{ material.stock }} {{ material.unit }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">最近更新</span>
|
||||
<span class="value">{{ material.lastUpdate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="material.status === 'borrowed'" class="m-card">
|
||||
<div class="m-card-title"><span>借用信息</span></div>
|
||||
<div class="detail-row">
|
||||
<span class="label">借出方</span>
|
||||
<span class="value">{{ material.borrower }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">借出时间</span>
|
||||
<span class="value">{{ material.borrowTime }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">预计归还</span>
|
||||
<span class="value" style="color: #ff9800">{{ material.expectedReturn }}</span>
|
||||
</div>
|
||||
<div v-if="material.borrowReason" class="detail-row">
|
||||
<span class="label">借用原因</span>
|
||||
<span class="value">{{ material.borrowReason }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px; display: flex; gap: 10px; justify-content: center">
|
||||
<div
|
||||
v-if="material.status === 'in_stock'"
|
||||
class="btn-warning"
|
||||
style="flex: 1; padding: 14px 0; border-radius: 22px; text-align: center; cursor: pointer; color: #fff; font-weight: 600; font-size: 15px"
|
||||
@click="openBorrow"
|
||||
>
|
||||
借用此物资
|
||||
</div>
|
||||
<div
|
||||
v-if="material.status === 'borrowed'"
|
||||
class="btn-success"
|
||||
style="flex: 1; padding: 14px 0; border-radius: 22px; text-align: center; cursor: pointer; color: #fff; font-weight: 600; font-size: 15px"
|
||||
@click="doReturn"
|
||||
>
|
||||
归还
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" v-if="showModal" @click="closeModal"></div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty">
|
||||
<div class="icon">❓</div>
|
||||
<div class="text">物资不存在</div>
|
||||
<el-button type="primary" @click="goBack" style="margin-top: 16px">返回</el-button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,127 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useHospitalStore } from '../../stores/hospital'
|
||||
import { categoryLabels, statusLabels } from '../../data/mockData'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useHospitalStore()
|
||||
|
||||
const search = ref('')
|
||||
const activeCategory = ref<string>('all')
|
||||
const activeStatus = ref<string>('all')
|
||||
|
||||
const categoryFilters = [
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: 'medical_device', label: '医疗器械' },
|
||||
{ value: 'equipment', label: '设备' },
|
||||
{ value: 'instrument', label: '仪器' },
|
||||
{ value: 'consumable', label: '耗材' },
|
||||
{ value: 'office', label: '办公' },
|
||||
]
|
||||
|
||||
const statusFilters = [
|
||||
{ value: 'all', label: '全部状态' },
|
||||
{ value: 'in_stock', label: '在库' },
|
||||
{ value: 'borrowed', label: '借出' },
|
||||
{ value: 'maintenance', label: '维修' },
|
||||
]
|
||||
|
||||
const filtered = computed(() => {
|
||||
const kw = search.value.trim().toLowerCase()
|
||||
return store.materials.filter((m) => {
|
||||
if (activeCategory.value !== 'all' && m.category !== activeCategory.value) return false
|
||||
if (activeStatus.value !== 'all' && m.status !== activeStatus.value) return false
|
||||
if (kw) {
|
||||
return (
|
||||
m.name.toLowerCase().includes(kw) ||
|
||||
m.code.toLowerCase().includes(kw) ||
|
||||
m.rfid.toLowerCase().includes(kw) ||
|
||||
m.spec.toLowerCase().includes(kw)
|
||||
)
|
||||
}
|
||||
return true
|
||||
})
|
||||
})
|
||||
|
||||
function openDetail(id: string) {
|
||||
router.push(`/material/detail/${id}`)
|
||||
}
|
||||
|
||||
const categoryIcon: Record<string, string> = {
|
||||
medical_device: '🩺',
|
||||
equipment: '🛏️',
|
||||
instrument: '🔬',
|
||||
consumable: '🧤',
|
||||
office: '📎',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="material-page">
|
||||
<!-- 搜索 -->
|
||||
<div class="m-search">
|
||||
<el-icon><svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor"><path d="M448 768A320 320 0 1 1 448 128a320 320 0 0 1 0 640zm192-64l224 224-64 64-224-224z"/></svg></el-icon>
|
||||
<input
|
||||
v-model="search"
|
||||
placeholder="搜索名称 / 编号 / RFID"
|
||||
type="search"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 类别 -->
|
||||
<div class="m-filter">
|
||||
<div
|
||||
v-for="f in categoryFilters"
|
||||
:key="f.value"
|
||||
class="filter-chip"
|
||||
:class="{ active: activeCategory === f.value }"
|
||||
@click="activeCategory = f.value"
|
||||
>
|
||||
{{ f.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态 -->
|
||||
<div class="m-filter">
|
||||
<div
|
||||
v-for="f in statusFilters"
|
||||
:key="f.value"
|
||||
class="filter-chip"
|
||||
:class="{ active: activeStatus === f.value }"
|
||||
@click="activeStatus = f.value"
|
||||
>
|
||||
{{ f.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<div v-if="filtered.length === 0" class="empty">
|
||||
<div class="icon">📭</div>
|
||||
<div class="text">未找到匹配的物资</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="m in filtered"
|
||||
:key="m.id"
|
||||
class="material-card"
|
||||
@click="openDetail(m.id)"
|
||||
>
|
||||
<div class="material-icon">{{ categoryIcon[m.category] || '📦' }}</div>
|
||||
<div class="material-info">
|
||||
<div class="material-name">{{ m.name }}</div>
|
||||
<div class="material-meta">
|
||||
<span>{{ m.code }}</span>
|
||||
<span class="sep">·</span>
|
||||
<span>{{ m.spec }}</span>
|
||||
</div>
|
||||
<div class="material-meta">
|
||||
<span class="material-rfid">{{ m.rfid }}</span>
|
||||
<span class="sep">·</span>
|
||||
<span>{{ m.warehouse }}/{{ m.location }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span :class="['status-tag', m.status]">{{ statusLabels[m.status] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,125 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useHospitalStore } from '../../stores/hospital'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useHospitalStore()
|
||||
const toast = useToast()
|
||||
|
||||
function resetData() {
|
||||
if (confirm('确认重置所有数据？此操作不可撤销。')) {
|
||||
store.reset()
|
||||
toast.success('数据已重置')
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="profile-page">
|
||||
<div class="m-card" style="text-align: center; padding: 24px 16px">
|
||||
<div
|
||||
style="
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #1989fa, #4ba8ff);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
"
|
||||
>
|
||||
👤
|
||||
</div>
|
||||
<div style="font-size: 18px; font-weight: 600; margin-top: 12px">张三</div>
|
||||
<div style="font-size: 12px; color: #969799; margin-top: 4px">库管员 · 工号 10086</div>
|
||||
</div>
|
||||
|
||||
<div class="m-card">
|
||||
<div class="m-card-title"><span>📱 设备信息</span></div>
|
||||
<div class="detail-row">
|
||||
<span class="label">手持机型号</span>
|
||||
<span class="value">PDA-RFID-V3</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">RFID 频段</span>
|
||||
<span class="value">UHF 860-960 MHz</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">设备状态</span>
|
||||
<span class="value" style="color: #07c160">● 在线</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">电量</span>
|
||||
<span class="value">87%</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">软件版本</span>
|
||||
<span class="value">v1.0.0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-card" style="padding: 0; overflow: hidden">
|
||||
<div class="list-item" style="border-radius: 0">
|
||||
<div class="list-icon inbound">📦</div>
|
||||
<div class="list-content">
|
||||
<div class="list-title">物资总数</div>
|
||||
</div>
|
||||
<div style="font-size: 18px; font-weight: 600; color: #1989fa">
|
||||
{{ store.stats.total }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item" style="border-radius: 0">
|
||||
<div class="list-icon outbound">📤</div>
|
||||
<div class="list-content">
|
||||
<div class="list-title">已借出</div>
|
||||
</div>
|
||||
<div style="font-size: 18px; font-weight: 600; color: #ff9800">
|
||||
{{ store.stats.borrowed }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item" style="border-radius: 0">
|
||||
<div class="list-icon return">📝</div>
|
||||
<div class="list-content">
|
||||
<div class="list-title">操作记录</div>
|
||||
</div>
|
||||
<div style="font-size: 18px; font-weight: 600; color: #646566">
|
||||
{{ store.operations.length }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-card">
|
||||
<div class="m-card-title"><span>⚙️ 系统</span></div>
|
||||
<div
|
||||
class="list-item"
|
||||
style="border-radius: 0; cursor: pointer"
|
||||
@click="resetData"
|
||||
>
|
||||
<div class="list-icon" style="background: #fce4ec">🔄</div>
|
||||
<div class="list-content">
|
||||
<div class="list-title">重置演示数据</div>
|
||||
<div class="list-sub">清除本地数据并恢复初始状态</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item" style="border-radius: 0">
|
||||
<div class="list-icon" style="background: #f3e5f5">📖</div>
|
||||
<div class="list-content">
|
||||
<div class="list-title">使用说明</div>
|
||||
</div>
|
||||
<div class="list-arrow">›</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; font-size: 12px; color: #c8c9cc; padding: 20px">
|
||||
智慧医院物资管理移动端 v1.0.0
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
{"root":["./src/env.d.ts","./src/main.ts","./src/composables/usetoast.ts","./src/data/mockdata.ts","./src/router/index.ts","./src/stores/hospital.ts","./src/app.vue","./src/components/scanbutton.vue","./src/components/tabbar.vue","./src/views/borrow/index.vue","./src/views/borrow/scan.vue","./src/views/history/index.vue","./src/views/home/index.vue","./src/views/inventory/index.vue","./src/views/inventory/scan.vue","./src/views/material/detail.vue","./src/views/material/index.vue","./src/views/profile/index.vue"],"version":"6.0.3"}
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
declare const _default: import("vite").UserConfig;
|
||||
export default _default;
|
||||
@@ -0,0 +1,11 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
// 移动端 Web App 配置
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
base: './',
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5174,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// 移动端 Web App 配置
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
base: './',
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5174,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user