Step F8：药品管理（IMP）
This commit is contained in:
Cheng Zhou
@@ -1,13 +1,31 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card><h2>药品管理</h2></el-card>
|
||||
<el-card>
|
||||
<h2>药品管理</h2>
|
||||
<div class="links">
|
||||
<el-button type="primary" plain @click="go('/study/imp/inventory')">库存</el-button>
|
||||
<el-button type="primary" plain @click="go('/study/imp/products')">产品</el-button>
|
||||
<el-button type="primary" plain @click="go('/study/imp/batches')">批次</el-button>
|
||||
<el-button type="primary" plain @click="go('/study/imp/transactions')">交易台账</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const go = (path: string) => router.push(path);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.links {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card class="mb-12">
|
||||
<div class="filters">
|
||||
<el-select v-model="filters.product_id" placeholder="产品" clearable @change="load">
|
||||
<el-option v-for="p in products" :key="p.id" :label="p.name" :value="p.id" />
|
||||
</el-select>
|
||||
<el-select v-model="filters.status" placeholder="状态" clearable @change="load">
|
||||
<el-option v-for="s in statuses" :key="s" :label="s" :value="s" />
|
||||
</el-select>
|
||||
<div class="spacer" />
|
||||
<el-button type="primary" v-if="canEdit" @click="openForm()">新增批次</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<el-table :data="batches" v-loading="loading" style="width: 100%">
|
||||
<el-table-column prop="batch_no" label="批号" />
|
||||
<el-table-column prop="product_id" label="产品">
|
||||
<template #default="scope">
|
||||
{{ productMap[scope.row.product_id] || scope.row.product_id }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="expiry_date" label="失效日期" width="140" />
|
||||
<el-table-column prop="status" label="状态" width="120">
|
||||
<template #default="scope">
|
||||
<el-tag>{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" v-if="canEdit">
|
||||
<template #default="scope">
|
||||
<el-button type="text" size="small" @click.stop="openForm(scope.row)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:current-page="page"
|
||||
:total="total"
|
||||
@current-change="onPageChange"
|
||||
/>
|
||||
</el-card>
|
||||
<ImpBatchForm v-model="showForm" :batch="editing" :products="products" @success="load" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { fetchImpProducts } from "../api/impProducts";
|
||||
import { fetchImpBatches } from "../api/impBatches";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
import ImpBatchForm from "../components/ImpBatchForm.vue";
|
||||
|
||||
const study = useStudyStore();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const products = ref<any[]>([]);
|
||||
const batches = ref<any[]>([]);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const pageSize = 10;
|
||||
const loading = ref(false);
|
||||
const filters = ref({ product_id: "", status: "" });
|
||||
const statuses = ["ACTIVE", "QUARANTINED", "EXPIRED", "CLOSED"];
|
||||
const showForm = ref(false);
|
||||
const editing = ref<any | null>(null);
|
||||
|
||||
const canEdit = computed(() => {
|
||||
const role = auth.user?.role;
|
||||
return role === "ADMIN" || role === "PM" || role === "IMP";
|
||||
});
|
||||
|
||||
const productMap = computed(() =>
|
||||
products.value.reduce<Record<string, string>>((acc, cur) => {
|
||||
acc[cur.id] = cur.name;
|
||||
return acc;
|
||||
}, {})
|
||||
);
|
||||
|
||||
const loadProducts = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
try {
|
||||
const { data } = await fetchImpProducts(study.currentStudy.id);
|
||||
products.value = Array.isArray(data) ? data : data.items || [];
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
};
|
||||
|
||||
const load = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const params: Record<string, any> = { skip: (page.value - 1) * pageSize, limit: pageSize };
|
||||
if (filters.value.product_id) params.product_id = filters.value.product_id;
|
||||
if (filters.value.status) params.status = filters.value.status;
|
||||
const { data } = await fetchImpBatches(study.currentStudy.id, params);
|
||||
if (Array.isArray(data)) {
|
||||
batches.value = data;
|
||||
total.value = data.length;
|
||||
} else {
|
||||
batches.value = data.items || [];
|
||||
total.value = data.total || 0;
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const openForm = (row?: any) => {
|
||||
editing.value = row || null;
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
const onPageChange = (p: number) => {
|
||||
page.value = p;
|
||||
load();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.user && auth.token) {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
}
|
||||
await loadProducts();
|
||||
load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.mb-12 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card class="mb-12">
|
||||
<div class="filters">
|
||||
<el-input v-model="filters.site_id" placeholder="中心ID" clearable @change="load" style="width: 200px" />
|
||||
<el-select v-model="filters.product_id" placeholder="产品" clearable @change="load">
|
||||
<el-option v-for="p in products" :key="p.id" :label="p.name" :value="p.id" />
|
||||
</el-select>
|
||||
<div class="spacer" />
|
||||
<el-button @click="load">刷新</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<el-table :data="rows" v-loading="loading" style="width: 100%">
|
||||
<el-table-column prop="site_id" label="中心" />
|
||||
<el-table-column prop="batch_id" label="批次" />
|
||||
<el-table-column prop="quantity_on_hand" label="结余" width="120" align="right" />
|
||||
<el-table-column prop="updated_at" label="更新时间" width="180" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { fetchImpInventory } from "../api/impInventory";
|
||||
import { fetchImpProducts } from "../api/impProducts";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
|
||||
const study = useStudyStore();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const filters = ref({ site_id: "", product_id: "" });
|
||||
const rows = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
const products = ref<any[]>([]);
|
||||
|
||||
const loadProducts = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
try {
|
||||
const { data } = await fetchImpProducts(study.currentStudy.id);
|
||||
products.value = Array.isArray(data) ? data : data.items || [];
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
};
|
||||
|
||||
const load = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const params: Record<string, any> = {};
|
||||
if (filters.value.site_id) params.site_id = filters.value.site_id;
|
||||
if (filters.value.product_id) params.product_id = filters.value.product_id;
|
||||
const { data } = await fetchImpInventory(study.currentStudy.id, params);
|
||||
if (Array.isArray(data)) {
|
||||
rows.value = data;
|
||||
} else {
|
||||
rows.value = data.items || [];
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "库存加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.user && auth.token) {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
}
|
||||
await loadProducts();
|
||||
load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.mb-12 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" v-if="canEdit" @click="openForm()">新建产品</el-button>
|
||||
</div>
|
||||
<el-card>
|
||||
<el-table :data="products" v-loading="loading" style="width: 100%">
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="form" label="剂型" width="120" />
|
||||
<el-table-column prop="strength" label="规格" width="120" />
|
||||
<el-table-column prop="unit" label="单位" width="80" />
|
||||
<el-table-column prop="is_active" label="启用" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.is_active ? 'success' : 'info'">{{ scope.row.is_active ? "是" : "否" }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" v-if="canEdit">
|
||||
<template #default="scope">
|
||||
<el-button type="text" size="small" @click.stop="openForm(scope.row)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<ImpProductForm v-model="showForm" :product="editing" @success="load" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { fetchImpProducts } from "../api/impProducts";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
import ImpProductForm from "../components/ImpProductForm.vue";
|
||||
|
||||
const study = useStudyStore();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const products = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
const showForm = ref(false);
|
||||
const editing = ref<any | null>(null);
|
||||
|
||||
const canEdit = computed(() => {
|
||||
const role = auth.user?.role;
|
||||
return role === "ADMIN" || role === "PM" || role === "IMP";
|
||||
});
|
||||
|
||||
const load = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await fetchImpProducts(study.currentStudy.id);
|
||||
if (Array.isArray(data)) {
|
||||
products.value = data;
|
||||
} else {
|
||||
products.value = data.items || [];
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const openForm = (row?: any) => {
|
||||
editing.value = row || null;
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.user && auth.token) {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
}
|
||||
load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.toolbar {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card class="mb-12">
|
||||
<div class="filters">
|
||||
<el-input v-model="filters.site_id" placeholder="中心ID" clearable @change="load" style="width: 160px" />
|
||||
<el-input v-model="filters.batch_id" placeholder="批次ID" clearable @change="load" style="width: 160px" />
|
||||
<el-select v-model="filters.tx_type" placeholder="类型" clearable @change="load" style="width: 160px">
|
||||
<el-option v-for="t in txTypes" :key="t" :label="t" :value="t" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="filters.date_from"
|
||||
type="date"
|
||||
placeholder="起始日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="load"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="filters.date_to"
|
||||
type="date"
|
||||
placeholder="截止日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="load"
|
||||
/>
|
||||
<div class="spacer" />
|
||||
<el-button type="primary" v-if="canEdit" @click="showForm = true">新增交易</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<el-table :data="txs" v-loading="loading" style="width: 100%">
|
||||
<el-table-column prop="tx_date" label="日期" width="120" />
|
||||
<el-table-column prop="tx_type" label="类型" width="140" />
|
||||
<el-table-column prop="site_id" label="中心" width="180" />
|
||||
<el-table-column prop="batch_id" label="批次" width="180" />
|
||||
<el-table-column prop="subject_id" label="受试者" width="180" />
|
||||
<el-table-column prop="quantity" label="数量" width="100" align="right" />
|
||||
<el-table-column prop="reference" label="单号/备注" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:current-page="page"
|
||||
:total="total"
|
||||
@current-change="onPageChange"
|
||||
/>
|
||||
</el-card>
|
||||
<ImpTransactionForm v-model="showForm" :batches="batches" @success="load" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { fetchImpTransactions } from "../api/impTransactions";
|
||||
import { fetchImpBatches } from "../api/impBatches";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
import ImpTransactionForm from "../components/ImpTransactionForm.vue";
|
||||
|
||||
const study = useStudyStore();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const filters = ref({ site_id: "", batch_id: "", tx_type: "", date_from: "", date_to: "" });
|
||||
const txTypes = ["RECEIPT", "DISPENSE", "RETURN", "DESTROY", "TRANSFER_IN", "TRANSFER_OUT"];
|
||||
const txs = ref<any[]>([]);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const pageSize = 10;
|
||||
const loading = ref(false);
|
||||
const showForm = ref(false);
|
||||
const batches = ref<any[]>([]);
|
||||
|
||||
const canEdit = computed(() => {
|
||||
const role = auth.user?.role;
|
||||
return role === "ADMIN" || role === "PM" || role === "IMP";
|
||||
});
|
||||
|
||||
const loadBatches = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
try {
|
||||
const { data } = await fetchImpBatches(study.currentStudy.id, { limit: 200 });
|
||||
batches.value = Array.isArray(data) ? data : data.items || [];
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
};
|
||||
|
||||
const load = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const params: Record<string, any> = { skip: (page.value - 1) * pageSize, limit: pageSize };
|
||||
Object.entries(filters.value).forEach(([k, v]) => {
|
||||
if (v) params[k] = v;
|
||||
});
|
||||
const { data } = await fetchImpTransactions(study.currentStudy.id, params);
|
||||
if (Array.isArray(data)) {
|
||||
txs.value = data;
|
||||
total.value = data.length;
|
||||
} else {
|
||||
txs.value = data.items || [];
|
||||
total.value = data.total || 0;
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "交易加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onPageChange = (p: number) => {
|
||||
page.value = p;
|
||||
load();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.user && auth.token) {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
}
|
||||
await loadBatches();
|
||||
load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.mb-12 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user