追溯码查询

src/views/biz/DrugTraceQuery.vue

@@ -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'}">
+    <el-card class="box-card search-card" :body-style="{ padding: '20px' }">
-      <div class="scan-title">
+      <div class="search-header">
-        <i class="el-icon-search pulse-icon"></i>
+        <div class="search-title">
-        <span>药品追溯码查询</span>
+          <i class="el-icon-search"></i>
+          <span>药品信息查询</span>
+        </div>
       </div>
-      <el-form :inline="true" :model="queryForm" size="mini">
+      <el-form :inline="true" :model="queryForm" size="small" class="search-form">
-        <el-form-item class="query-form-item">
+        <el-form-item class="search-item">
-          <el-input
+          <el-input v-model="queryForm.traceCode" placeholder="请输入药品追溯码" clearable @keyup.enter.native="handleSearch"
-            v-model="queryForm.traceCode"
+            prefix-icon="el-icon-scan"></el-input>
-            style="width: 600px"
+        </el-form-item>
-            placeholder="请扫描或输入药品追溯码"
+        <el-form-item class="search-item">
-            clearable
+          <el-input v-model="queryForm.drugName" placeholder="请输入药品名称" clearable @keyup.enter.native="handleSearch"
-            @keyup.enter.native="handleSearch"
+            prefix-icon="el-icon-medicine-box"></el-input>
-            class="trace-input"
-          >
-            <i slot="prefix" class="el-icon-scan" style="font-size: 20px; color: #1976d2;"></i>
-          </el-input>
         </el-form-item>
-        <el-form-item class="query-form-item">
+        <el-form-item class="search-item">
-          <el-button-group>
+          <el-input v-model="queryForm.batchNo" placeholder="请输入批号" clearable @keyup.enter.native="handleSearch"
-            <el-button type="primary" icon="el-icon-search" @click="handleSearch" size="mini" class="search-btn">查询
+            prefix-icon="el-icon-tickets"></el-input>
-            </el-button>
+        </el-form-item>
-            <el-button type="default" icon="el-icon-refresh" @click="resetForm" size="mini">重置</el-button>
+        <el-form-item class="search-actions">
-          </el-button-group>
+          <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.cpmctymc || '-' }}</el-descriptions-item>
-          <el-descriptions-item label="产品标识">{{ drugInfo.nameCode }}</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.prepnSpec || '-' }}</el-descriptions-item>
-          <el-descriptions-item label="包装规格">{{ drugInfo.bzgg }}</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.manufactory || '-' }}</el-descriptions-item>
-          <el-descriptions-item label="注册证号">{{ drugInfo.zczbhhzbapzbh }}</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.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
+              <el-table v-loading="tableLoading" :data="orderRecords" border stripe highlight-current-row
-                v-loading="tableLoading"
+                style="width: 100%">
-                :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
+                    <el-button type="text" size="mini" @click="viewOrderDetail(scope.row)" class="detail-btn">
-                      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
+                <el-step v-for="(item, index) in orderRecords" :key="index" :title="item.billTypeName"
-                  v-for="(item, index) in orderRecords"
+                  :description="item.createTime + ' ' + item.billNo + ' ' + item.fromCorpName" class="flow-step">
-                  :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
+          <el-button style="float: right; padding: 3px 0" type="text" @click="showOrderDetail = false">
-            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
+        <el-table v-loading="detailLoading" :data="orderDetails" border stripe highlight-current-row
-          v-loading="detailLoading"
+          style="width: 100%">
-          :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
+      <el-empty v-if="!tableLoading && (!drugInfo || !drugInfo.nameCode)" description="未查询到相关追溯记录" class="custom-empty"
-        v-if="!drugInfo.nameCode && !tableLoading && queryForm.traceCode"
+        key="empty-state">
-        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) {
+      if (!this.queryForm.traceCode && !this.queryForm.drugName && !this.queryForm.batchNo) {
-        this.$message.warning('请输入药品追溯码')
+        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,
+        drugName: this.queryForm.drugName,
-        limit: this.queryForm.limit
+        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中有追溯码参数，自动查询
+    // 如果URL中有查询参数，自动查询
-    const traceCode = this.$route.query.traceCode
+    const { traceCode, drugName, batchNo } = this.$route.query
-    if (traceCode) {
+    if (traceCode || drugName || batchNo) {
-      this.queryForm.traceCode = traceCode
+      this.queryForm.traceCode = traceCode || ''
+      this.queryForm.drugName = drugName || ''
+      this.queryForm.batchNo = batchNo || ''
       this.handleSearch()
     }
   }
@@ -464,69 +458,114 @@ export default {
 }
 
 /* 扫码区域样式 */
-.scan-area {
+.search-card {
-  text-align: center;
+  margin-bottom: 24px;
-  padding: 35px 25px;
+  border-radius: 8px;
-  background-color: #fff;
+  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 {
+.search-item {
-  margin-right: 12px;
+  margin-right: 15px;
-  font-size: 24px;
+  margin-bottom: 0;
+  flex: 1;
+  min-width: 200px;
+  max-width: 300px;
 }
 
-.query-form-item {
+.search-item .el-input {
-  margin: 25px 10px;
+  width: 100%;
-  display: flex;
-  justify-content: center;
 }
 
-.query-form-item .el-input {
+.search-item .el-input__inner {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+  height: 40px;
-  border-radius: 8px;
+  line-height: 40px;
-  transition: all 0.3s ease;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  transition: all 0.3s;
 }
 
-.query-form-item .el-input:focus-within {
+.search-item .el-input__inner:hover {
-  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2);
+  border-color: #c0c4cc;
 }
 
-.query-form-item .el-input input {
+.search-item .el-input__inner:focus {
-  height: 45px;
+  border-color: #1976d2;
-  font-size: 15px;
+  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
 }
 
-/* 按钮样式 */
+.search-item .el-input__prefix {
-.el-button-group {
+  left: 10px;
-  margin-left: 15px;
 }
 
-.el-button-group .el-button {
+.search-item .el-input__prefix i {
-  border-radius: 8px;
+  font-size: 16px;
-  padding: 12px 20px;
+  color: #1976d2;
-  transition: all 0.3s ease;
+}
+
+.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 {
+.search-actions .el-button--primary {
-  transform: translateY(-2px);
+  background-color: #1976d2;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-color: #1976d2;
 }
 
-.el-button-group .el-button.is-disabled:hover {
+.search-actions .el-button--primary:hover {
-  transform: none;
+  background-color: #1565c0;
-  box-shadow: none;
+  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 {
+  .search-form {
-    width: 100% !important;
+    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>