UDI
/
udiwms-vue-frame
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

追溯码查询

Browse Source
20240912_adapter
yewj 3 weeks ago
parent 8db622afa7
commit 4d1de439c1
1 changed files with 205 additions and 153 deletions
Show Stats Download Patch File Download Diff File

358
src/views/biz/DrugTraceQuery.vue
Unescape Escape View File

@ -1,61 +1,46 @@
<template>
<div class="app-container">
<!-- 页面头部 -->
<div class="page-header">
<div class="header-title">
<i class="el-icon-monitor"></i>
<span>药品追溯系统</span>
</div>
<div class="header-info">
<span>安全可靠 · 全程追溯 · 质量保证</span>
</div>
<div class="header-wave"></div>
</div>
<!-- 扫码查询区域 -->
<el-card class="box-card scan-area" :body-style="{padding: '30px 20px'}">
<div class="scan-title">
<i class="el-icon-search pulse-icon"></i>
<span>药品追溯码查询</span>
<el-card class="box-card search-card" :body-style="{ padding: '20px' }">
<div class="search-header">
<div class="search-title">
<i class="el-icon-search"></i>
<span>药品信息查询</span>
</div>
</div>
<el-form :inline="true" :model="queryForm" size="mini">
<el-form-item class="query-form-item">
<el-input
v-model="queryForm.traceCode"
style="width: 600px"
placeholder="请扫描或输入药品追溯码"
clearable
@keyup.enter.native="handleSearch"
class="trace-input"
>
<i slot="prefix" class="el-icon-scan" style="font-size: 20px; color: #1976d2;"></i>
</el-input>
<el-form :inline="true" :model="queryForm" size="small" class="search-form">
<el-form-item class="search-item">
<el-input v-model="queryForm.traceCode" placeholder="请输入药品追溯码" clearable @keyup.enter.native="handleSearch"
prefix-icon="el-icon-scan"></el-input>
</el-form-item>
<el-form-item class="search-item">
<el-input v-model="queryForm.drugName" placeholder="请输入药品名称" clearable @keyup.enter.native="handleSearch"
prefix-icon="el-icon-medicine-box"></el-input>
</el-form-item>
<el-form-item class="query-form-item">
<el-button-group>
<el-button type="primary" icon="el-icon-search" @click="handleSearch" size="mini" class="search-btn">查询
</el-button>
<el-button type="default" icon="el-icon-refresh" @click="resetForm" size="mini">重置</el-button>
</el-button-group>
<el-form-item class="search-item">
<el-input v-model="queryForm.batchNo" placeholder="请输入批号" clearable @keyup.enter.native="handleSearch"
prefix-icon="el-icon-tickets"></el-input>
</el-form-item>
<el-form-item class="search-actions">
<el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 药品基本信息 -->
<transition name="fade-transform" mode="out-in">
<el-card class="box-card info-card" v-if="drugInfo.nameCode" key="info-card">
<el-card class="box-card info-card" v-if="drugInfo && drugInfo.nameCode" key="info-card">
<div slot="header" class="clearfix">
<span><i class="el-icon-medicine-box"></i> 药品基本信息</span>
</div>
<el-descriptions :column="2" border>
<el-descriptions-item label="产品名称">{{ drugInfo.cpmctymc }}</el-descriptions-item>
<el-descriptions-item label="产品标识">{{ drugInfo.nameCode }}</el-descriptions-item>
<el-descriptions-item label="规格">{{ drugInfo.prepnSpec }}</el-descriptions-item>
<el-descriptions-item label="包装规格">{{ drugInfo.bzgg }}</el-descriptions-item>
<el-descriptions-item label="生产厂家">{{ drugInfo.manufactory }}</el-descriptions-item>
<el-descriptions-item label="注册证号">{{ drugInfo.zczbhhzbapzbh }}</el-descriptions-item>
<el-descriptions-item label="包装材料">{{ drugInfo.packMatrial }}</el-descriptions-item>
<el-descriptions-item label="计量单位">{{ drugInfo.measname }}</el-descriptions-item>
<el-descriptions-item label="产品名称">{{ drugInfo.cpmctymc || '-' }}</el-descriptions-item>
<el-descriptions-item label="产品标识">{{ drugInfo.nameCode || '-' }}</el-descriptions-item>
<el-descriptions-item label="制剂规格">{{ drugInfo.prepnSpec || '-' }}</el-descriptions-item>
<el-descriptions-item label="包装规格">{{ drugInfo.bzgg || '-' }}</el-descriptions-item>
<el-descriptions-item label="生产厂家">{{ drugInfo.manufactory || '-' }}</el-descriptions-item>
<el-descriptions-item label="注册证号">{{ drugInfo.zczbhhzbapzbh || '-' }}</el-descriptions-item>
<el-descriptions-item label="计量单位">{{ drugInfo.measname || '-' }}</el-descriptions-item>
</el-descriptions>
</el-card>
</transition>
@ -65,18 +50,12 @@
<div class="trace-container" v-if="orderRecords.length > 0" key="trace-container">
<el-row :gutter="20">
<el-col :span="16">
<el-card class="box-card" :body-style="{padding: '0 0 15px 0'}">
<el-card class="box-card" :body-style="{ padding: '0 0 15px 0' }">
<div slot="header" class="clearfix">
<span><i class="el-icon-document"></i> 追溯记录</span>
</div>
<el-table
v-loading="tableLoading"
:data="orderRecords"
border
stripe
highlight-current-row
style="width: 100%"
>
<el-table v-loading="tableLoading" :data="orderRecords" border stripe highlight-current-row
style="width: 100%">
<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
<el-table-column prop="billNo" label="单据号" align="center"></el-table-column>
<el-table-column prop="billTypeName" label="单据类型" align="center"></el-table-column>
@ -86,12 +65,7 @@
<el-table-column prop="invName" label="库房" align="center"></el-table-column>
<el-table-column label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button
type="text"
size="mini"
@click="viewOrderDetail(scope.row)"
class="detail-btn"
>
<el-button type="text" size="mini" @click="viewOrderDetail(scope.row)" class="detail-btn">
<i class="el-icon-view mr-5"></i>查看明细
</el-button>
</template>
@ -105,12 +79,8 @@
<span><i class="el-icon-share"></i> 流通流程</span>
</div>
<el-steps :active="orderRecords.length" direction="vertical" finish-status="success" class="custom-steps">
<el-step
v-for="(item, index) in orderRecords"
:key="index"
:title="item.billTypeName"
:description="item.createTime + ' ' + item.billNo + ' ' + item.fromCorpName"
class="flow-step">
<el-step v-for="(item, index) in orderRecords" :key="index" :title="item.billTypeName"
:description="item.createTime + ' ' + item.billNo + ' ' + item.fromCorpName" class="flow-step">
<i slot="icon" :class="getStepIcon(item.billTypeName)"></i>
</el-step>
</el-steps>
@ -125,11 +95,7 @@
<el-card class="box-card detail-card" v-if="showOrderDetail" key="detail-card">
<div slot="header" class="clearfix">
<span><i class="el-icon-tickets"></i> 单据明细</span>
<el-button
style="float: right; padding: 3px 0"
type="text"
@click="showOrderDetail = false"
>
<el-button style="float: right; padding: 3px 0" type="text" @click="showOrderDetail = false">
<i class="el-icon-close"></i>
</el-button>
</div>
@ -147,14 +113,8 @@
<span class="detail-value">{{ currentOrder.createTime }}</span>
</div>
</div>
<el-table
v-loading="detailLoading"
:data="orderDetails"
border
stripe
highlight-current-row
style="width: 100%"
>
<el-table v-loading="detailLoading" :data="orderDetails" border stripe highlight-current-row
style="width: 100%">
<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
<el-table-column prop="orderIdFk" label="单据号" align="center"></el-table-column>
<el-table-column prop="nameCode" label="产品标识" align="center"></el-table-column>
@ -175,33 +135,16 @@
<!-- 无数据提示 -->
<transition name="fade-transform" mode="out-in">
<el-empty
v-if="!drugInfo.nameCode && !tableLoading && queryForm.traceCode"
description="未查询到相关追溯记录"
class="custom-empty"
key="empty-state"
>
<el-empty v-if="!tableLoading && (!drugInfo || !drugInfo.nameCode)" description="未查询到相关追溯记录" class="custom-empty"
key="empty-state">
<el-button type="primary" @click="resetForm">重新查询</el-button>
</el-empty>
</transition>
<!-- 页面底部 -->
<div class="page-footer">
<div class="footer-links">
<a href="#">关于我们</a>
<span>|</span>
<a href="#">使用帮助</a>
<span>|</span>
<a href="#">联系客服</a>
</div>
<div class="footer-copyright">
© 2024 药品追溯系统 版权所有
</div>
</div>
</div>
</template>
<script>
import {getOrderRecords, getOrderDetails, getDrugInfo} from '@/api/biz/traceQuery'
import { getOrderRecords, getOrderDetails, getDrugInfo } from '@/api/biz/traceQuery'
export default {
name: 'DrugTraceQuery',
@ -212,6 +155,8 @@ export default {
// 查询表单
queryForm: {
traceCode: '',
drugName: '',
batchNo: '',
page: 1,
limit: 50
},
@ -219,7 +164,16 @@ export default {
tableLoading: false,
detailLoading: false,
// 药品信息
drugInfo: {},
drugInfo: {
nameCode: '',
cpmctymc: '',
prepnSpec: '',
bzgg: '',
manufactory: '',
zczbhhzbapzbh: '',
packMatrial: '',
measname: ''
},
// 单据记录
orderRecords: [],
// 单据明细
@ -230,6 +184,18 @@ export default {
currentOrder: null
}
},
beforeCreate() {
// 确保在组件创建前就初始化数据
if (!this.queryForm) {
this.$set(this, 'queryForm', {
traceCode: '',
drugName: '',
batchNo: '',
page: 1,
limit: 50
})
}
},
methods: {
// 获取步骤图标
getStepIcon(billTypeName) {
@ -257,12 +223,21 @@ export default {
// 搜索
handleSearch() {
if (!this.queryForm.traceCode) {
this.$message.warning('请输入药品追溯码')
if (!this.queryForm.traceCode && !this.queryForm.drugName && !this.queryForm.batchNo) {
this.$message.warning('请至少输入一个查询条件')
return
}
this.tableLoading = true
this.drugInfo = {}
this.drugInfo = {
nameCode: '',
cpmctymc: '',
prepnSpec: '',
bzgg: '',
manufactory: '',
zczbhhzbapzbh: '',
packMatrial: '',
measname: ''
}
this.orderRecords = []
this.orderDetails = []
this.showOrderDetail = false
@ -276,8 +251,12 @@ export default {
// 查询药品信息
queryDrugInfo() {
if (!this.queryForm) return
getDrugInfo({
nameCode: this.queryForm.traceCode,
drugName: this.queryForm.drugName,
batchNo: this.queryForm.batchNo,
page: 1,
limit: 1
}).then(response => {
@ -293,10 +272,17 @@ export default {
// 查询单据记录
queryOrderRecords() {
if (!this.queryForm) {
this.tableLoading = false
return
}
getOrderRecords({
traceCode: this.queryForm.traceCode,
page: this.queryForm.page,
limit: this.queryForm.limit
drugName: this.queryForm.drugName,
batchNo: this.queryForm.batchNo,
page: this.queryForm.page || 1,
limit: this.queryForm.limit || 50
}).then(response => {
this.tableLoading = false
if (response.code === 20000) {
@ -340,7 +326,13 @@ export default {
// 重置表单
resetForm() {
this.queryForm.traceCode = ''
this.queryForm = {
traceCode: '',
drugName: '',
batchNo: '',
page: 1,
limit: 50
}
this.drugInfo = {}
this.orderRecords = []
this.orderDetails = []
@ -367,10 +359,12 @@ export default {
event.stopPropagation()
}
// 如果URL中有追溯码参数，自动查询
const traceCode = this.$route.query.traceCode
if (traceCode) {
this.queryForm.traceCode = traceCode
// 如果URL中有查询参数，自动查询
const { traceCode, drugName, batchNo } = this.$route.query
if (traceCode || drugName || batchNo) {
this.queryForm.traceCode = traceCode || ''
this.queryForm.drugName = drugName || ''
this.queryForm.batchNo = batchNo || ''
this.handleSearch()
}
}
@ -464,69 +458,114 @@ export default {
}
/* 扫码区域样式 */
.scan-area {
text-align: center;
padding: 35px 25px;
background-color: #fff;
.search-card {
margin-bottom: 24px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: none;
}
.search-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.scan-title {
.search-header {
margin-bottom: 20px;
}
.search-title {
display: flex;
align-items: center;
font-size: 18px;
font-weight: 600;
color: #1976d2;
}
.search-title i {
font-size: 22px;
margin-right: 10px;
color: #1976d2;
margin-bottom: 25px;
font-weight: 600;
}
.search-form {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
justify-content: space-between;
}
.scan-title i {
margin-right: 12px;
font-size: 24px;
.search-item {
margin-right: 15px;
margin-bottom: 0;
flex: 1;
min-width: 200px;
max-width: 300px;
}
.query-form-item {
margin: 25px 10px;
display: flex;
justify-content: center;
.search-item .el-input {
width: 100%;
}
.query-form-item .el-input {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
border-radius: 8px;
transition: all 0.3s ease;
.search-item .el-input__inner {
height: 40px;
line-height: 40px;
border-radius: 4px;
border: 1px solid #dcdfe6;
transition: all 0.3s;
}
.query-form-item .el-input:focus-within {
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2);
.search-item .el-input__inner:hover {
border-color: #c0c4cc;
}
.query-form-item .el-input input {
height: 45px;
font-size: 15px;
.search-item .el-input__inner:focus {
border-color: #1976d2;
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}
/* 按钮样式 */
.el-button-group {
margin-left: 15px;
.search-item .el-input__prefix {
left: 10px;
}
.el-button-group .el-button {
border-radius: 8px;
padding: 12px 20px;
transition: all 0.3s ease;
.search-item .el-input__prefix i {
font-size: 16px;
color: #1976d2;
}
.search-actions {
display: flex;
margin-left: auto;
margin-right: 0;
white-space: nowrap;
}
.search-actions .el-button {
padding: 9px 20px;
border-radius: 4px;
font-weight: 500;
height: 45px;
transition: all 0.3s;
}
.el-button-group .el-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
.search-actions .el-button--primary {
background-color: #1976d2;
border-color: #1976d2;
}
.el-button-group .el-button.is-disabled:hover {
transform: none;
box-shadow: none;
.search-actions .el-button--primary:hover {
background-color: #1565c0;
border-color: #1565c0;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}
.search-actions .el-button:not(.el-button--primary) {
margin-left: 10px;
}
.search-actions .el-button:not(.el-button--primary):hover {
background-color: #f5f7fa;
transform: translateY(-1px);
}
/* 信息卡片样式 */
@ -573,7 +612,7 @@ export default {
background-color: #fafafa;
}
.el-table__body tr:hover > td {
.el-table__body tr:hover>td {
background-color: #f0f7ff !important;
}
@ -693,10 +732,12 @@ export default {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
@ -796,14 +837,25 @@ export default {
font-size: 22px;
}
.scan-area {
.search-card {
padding: 20px 15px;
}
.query-form-item .el-input {
width: 100% !important;
.search-form {
flex-direction: column;
}
.search-item {
margin-right: 0;
margin-bottom: 15px;
max-width: 100%;
width: 100%;
}
.search-actions {
margin-left: 0;
width: 100%;
justify-content: flex-end;
}
}
</style>
<script lang="ts">
</script>

Write Preview
Loading…
Cancel
Save