|
|
|
|
@ -8,17 +8,17 @@
|
|
|
|
|
<span>药品信息查询</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-form :inline="true" :model="queryForm" size="small" class="search-form">
|
|
|
|
|
<el-form :inline="true" :model="filterQuery" size="small" class="search-form">
|
|
|
|
|
<el-form-item class="search-item">
|
|
|
|
|
<el-input v-model="queryForm.traceCode" placeholder="请输入药品追溯码" clearable @keyup.enter.native="handleSearch"
|
|
|
|
|
<el-input v-model="filterQuery.code" 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"
|
|
|
|
|
<el-input v-model="filterQuery.cpmctymc" placeholder="请输入药品名称" clearable @keyup.enter.native="handleSearch"
|
|
|
|
|
prefix-icon="el-icon-medicine-box"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item class="search-item">
|
|
|
|
|
<el-input v-model="queryForm.batchNo" placeholder="请输入批号" clearable @keyup.enter.native="handleSearch"
|
|
|
|
|
<el-input v-model="filterQuery.batchNo" placeholder="请输入批号" clearable @keyup.enter.native="handleSearch"
|
|
|
|
|
prefix-icon="el-icon-tickets"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item class="search-actions">
|
|
|
|
|
@ -28,37 +28,37 @@
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-card>
|
|
|
|
|
<!-- 药品基本信息 -->
|
|
|
|
|
<transition name="fade-transform" mode="out-in">
|
|
|
|
|
<el-card class="box-card info-card" v-if="drugInfo && drugInfo.nameCode" key="info-card">
|
|
|
|
|
<transition name="fade-transform" mode="out-in" v-if="showDrugInfo">
|
|
|
|
|
<el-card class="box-card info-card" key="info-card">
|
|
|
|
|
<div slot="header" class="clearfix">
|
|
|
|
|
<span><i class="el-icon-medicine-box"></i> 药品基本信息</span>
|
|
|
|
|
<i class="el-icon-medicine-box" style="font-weight: bold; ">药品基本信息</i>
|
|
|
|
|
</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.ggxh || '-' }}</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-item label="计量单位">{{ drugInfo.measname || '-' }}</el-descriptions-item>-->
|
|
|
|
|
</el-descriptions>
|
|
|
|
|
</el-card>
|
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
|
|
<!-- 追溯记录 -->
|
|
|
|
|
<transition name="fade-transform" mode="out-in">
|
|
|
|
|
<div class="trace-container" v-if="orderRecords.length > 0" key="trace-container">
|
|
|
|
|
<transition name="fade-transform" mode="out-in" v-if="showorderRecords">
|
|
|
|
|
<div class="trace-container" key="trace-container">
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<el-col :span="16">
|
|
|
|
|
<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>
|
|
|
|
|
<i class="el-icon-document" style="font-weight: bold; ">追溯记录</i>
|
|
|
|
|
</div>
|
|
|
|
|
<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>
|
|
|
|
|
<el-table-column prop="busTypeName" label="单据类型" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="createTime" label="单据时间" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="fromCorpName" label="往来单位" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="deptName" label="部门" align="center"></el-table-column>
|
|
|
|
|
@ -76,7 +76,7 @@
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-card class="box-card flow-card">
|
|
|
|
|
<div slot="header" class="clearfix">
|
|
|
|
|
<span><i class="el-icon-share"></i> 流通流程</span>
|
|
|
|
|
<i class="el-icon-share" style="font-weight: bold; ">流通流程</i>
|
|
|
|
|
</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"
|
|
|
|
|
@ -91,22 +91,25 @@
|
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
|
|
<!-- 明细记录 -->
|
|
|
|
|
<transition name="fade-transform" mode="out-in">
|
|
|
|
|
<el-card class="box-card detail-card" v-if="showOrderDetail" key="detail-card">
|
|
|
|
|
<transition name="fade-transform" mode="out-in" v-if="showOrderDetails">
|
|
|
|
|
<el-card class="box-card detail-card" 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">
|
|
|
|
|
<i class="el-icon-close"></i>
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button style="float: right; padding: 3px 0" type="text" @click="colseOrderClick"><i class="el-icon-close"></i></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="detail-header" v-if="currentOrder">
|
|
|
|
|
<div slot="header" class="clearfix">
|
|
|
|
|
<i class="el-icon-tickets" style="margin-bottom: 15px;font-weight: bold; ">单据明细</i>
|
|
|
|
|
<!--<el-button style="float: right; padding: 3px 0" type="text" @click="showOrderDetail = false">-->
|
|
|
|
|
<!-- <i class="el-icon-close"></i>-->
|
|
|
|
|
<!--</el-button>-->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="detail-header" >
|
|
|
|
|
<div class="detail-info">
|
|
|
|
|
<span class="detail-label">单据号：</span>
|
|
|
|
|
<span class="detail-value">{{ currentOrder.billNo }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="detail-info">
|
|
|
|
|
<span class="detail-label">单据类型：</span>
|
|
|
|
|
<span class="detail-value">{{ currentOrder.billTypeName }}</span>
|
|
|
|
|
<span class="detail-value">{{ currentOrder.busTypeName }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="detail-info">
|
|
|
|
|
<span class="detail-label">单据时间：</span>
|
|
|
|
|
@ -118,14 +121,15 @@
|
|
|
|
|
<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>
|
|
|
|
|
<el-table-column prop="coName" label="产品名称" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="spec" label="规格" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="cpmctymc" label="产品名称" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="prepnSpec" label="制剂规格" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="ggxh" label="包装规格" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="batchNo" label="批号" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="productDate" label="生产日期" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="expireDate" label="有效期至" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="count" label="数量" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="measname" label="单位" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="manufacturer" label="生产厂家" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="packUnit" label="单位" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="manufactory" label="生产厂家" align="center"></el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="empty-data" v-if="orderDetails.length === 0 && !detailLoading">
|
|
|
|
|
<el-empty description="暂无明细数据"></el-empty>
|
|
|
|
|
@ -134,10 +138,9 @@
|
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
|
|
<!-- 无数据提示 -->
|
|
|
|
|
<transition name="fade-transform" mode="out-in">
|
|
|
|
|
<el-empty v-if="!tableLoading && (!drugInfo || !drugInfo.nameCode)" description="未查询到相关追溯记录" class="custom-empty"
|
|
|
|
|
<transition name="fade-transform" mode="out-in" v-if="noData">
|
|
|
|
|
<el-empty :description="dataLog" class="custom-empty"
|
|
|
|
|
key="empty-state">
|
|
|
|
|
<el-button type="primary" @click="resetForm">重新查询</el-button>
|
|
|
|
|
</el-empty>
|
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
|
|
@ -153,12 +156,17 @@ export default {
|
|
|
|
|
// 折叠面板激活项
|
|
|
|
|
activeNames: ['1', '2', '3'],
|
|
|
|
|
// 查询表单
|
|
|
|
|
queryForm: {
|
|
|
|
|
traceCode: '',
|
|
|
|
|
drugName: '',
|
|
|
|
|
filterQuery: {
|
|
|
|
|
code: '',
|
|
|
|
|
cpmctymc: '',
|
|
|
|
|
batchNo: '',
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 50
|
|
|
|
|
limit: 20
|
|
|
|
|
},
|
|
|
|
|
orderDetailQuery: {
|
|
|
|
|
billNo:'',
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 20
|
|
|
|
|
},
|
|
|
|
|
// 表格加载状态
|
|
|
|
|
tableLoading: false,
|
|
|
|
|
@ -168,31 +176,38 @@ export default {
|
|
|
|
|
nameCode: '',
|
|
|
|
|
cpmctymc: '',
|
|
|
|
|
prepnSpec: '',
|
|
|
|
|
bzgg: '',
|
|
|
|
|
ggxh: '',
|
|
|
|
|
manufactory: '',
|
|
|
|
|
zczbhhzbapzbh: '',
|
|
|
|
|
packMatrial: '',
|
|
|
|
|
measname: ''
|
|
|
|
|
},
|
|
|
|
|
showDrugInfo: false,
|
|
|
|
|
showorderRecords: false,
|
|
|
|
|
showOrderDetails: false,
|
|
|
|
|
noData : true,
|
|
|
|
|
dataLog: " 请查询相关追溯记录",
|
|
|
|
|
// 单据记录
|
|
|
|
|
orderRecords: [],
|
|
|
|
|
// 单据明细
|
|
|
|
|
orderDetails: [],
|
|
|
|
|
// 是否显示明细
|
|
|
|
|
showOrderDetail: false,
|
|
|
|
|
// 当前选中的单据
|
|
|
|
|
currentOrder: null
|
|
|
|
|
currentOrder: {
|
|
|
|
|
billNo: "",
|
|
|
|
|
busTypeName:"",
|
|
|
|
|
createTime:""
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
beforeCreate() {
|
|
|
|
|
// 确保在组件创建前就初始化数据
|
|
|
|
|
if (!this.queryForm) {
|
|
|
|
|
this.$set(this, 'queryForm', {
|
|
|
|
|
traceCode: '',
|
|
|
|
|
drugName: '',
|
|
|
|
|
if (!this.filterQuery) {
|
|
|
|
|
this.$set(this, 'filterQuery', {
|
|
|
|
|
code: '',
|
|
|
|
|
cpmctymc: '',
|
|
|
|
|
batchNo: '',
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 50
|
|
|
|
|
limit: 20
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -223,93 +238,65 @@ export default {
|
|
|
|
|
|
|
|
|
|
// 搜索
|
|
|
|
|
handleSearch() {
|
|
|
|
|
if (!this.queryForm.traceCode && !this.queryForm.drugName && !this.queryForm.batchNo) {
|
|
|
|
|
if (!this.filterQuery.code && !this.filterQuery.cpmctymc && !this.filterQuery.batchNo) {
|
|
|
|
|
this.$message.warning('请至少输入一个查询条件')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.tableLoading = true
|
|
|
|
|
this.drugInfo = {
|
|
|
|
|
nameCode: '',
|
|
|
|
|
cpmctymc: '',
|
|
|
|
|
prepnSpec: '',
|
|
|
|
|
bzgg: '',
|
|
|
|
|
manufactory: '',
|
|
|
|
|
zczbhhzbapzbh: '',
|
|
|
|
|
packMatrial: '',
|
|
|
|
|
measname: ''
|
|
|
|
|
}
|
|
|
|
|
// this.tableLoading = true
|
|
|
|
|
this.orderRecords = []
|
|
|
|
|
this.orderDetails = []
|
|
|
|
|
this.showOrderDetail = false
|
|
|
|
|
this.currentOrder = {}
|
|
|
|
|
this.showDrugInfo = false
|
|
|
|
|
this.showorderRecords = false
|
|
|
|
|
this.showOrderDetails = false
|
|
|
|
|
|
|
|
|
|
// 查询药品信息
|
|
|
|
|
this.queryDrugInfo()
|
|
|
|
|
|
|
|
|
|
// 查询单据记录
|
|
|
|
|
this.queryOrderRecords()
|
|
|
|
|
// this.queryOrderRecords()
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 查询药品信息
|
|
|
|
|
queryDrugInfo() {
|
|
|
|
|
if (!this.queryForm) return
|
|
|
|
|
|
|
|
|
|
getDrugInfo({
|
|
|
|
|
nameCode: this.queryForm.traceCode,
|
|
|
|
|
drugName: this.queryForm.drugName,
|
|
|
|
|
batchNo: this.queryForm.batchNo,
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 1
|
|
|
|
|
}).then(response => {
|
|
|
|
|
if (response.code === 20000 && response.data.list && response.data.list.length > 0) {
|
|
|
|
|
getDrugInfo(this.filterQuery).then(response => {
|
|
|
|
|
if (response.code === 20000 && response.data.list.length > 0) {
|
|
|
|
|
this.showDrugInfo = true
|
|
|
|
|
this.showorderRecords = true
|
|
|
|
|
this.noData = false
|
|
|
|
|
this.drugInfo = response.data.list[0]
|
|
|
|
|
|
|
|
|
|
// this.orderRecords.push( this.drugInfo.order);
|
|
|
|
|
response.data.list.forEach(item => {
|
|
|
|
|
this.orderRecords.push(item.order);
|
|
|
|
|
})
|
|
|
|
|
// orderRecords
|
|
|
|
|
// this.currentOrder
|
|
|
|
|
} else {
|
|
|
|
|
this.showDrugInfo = false
|
|
|
|
|
this.showorderRecords = false
|
|
|
|
|
this.noData = true
|
|
|
|
|
this.drugInfo = {}
|
|
|
|
|
this.dataLog = "未查询到相关追溯记录"
|
|
|
|
|
}
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
this.drugInfo = {}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 查询单据记录
|
|
|
|
|
queryOrderRecords() {
|
|
|
|
|
if (!this.queryForm) {
|
|
|
|
|
this.tableLoading = false
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getOrderRecords({
|
|
|
|
|
traceCode: this.queryForm.traceCode,
|
|
|
|
|
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) {
|
|
|
|
|
this.orderRecords = response.data.list || []
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(response.message || '查询失败')
|
|
|
|
|
this.orderRecords = []
|
|
|
|
|
}
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
this.tableLoading = false
|
|
|
|
|
this.orderRecords = []
|
|
|
|
|
})
|
|
|
|
|
colseOrderClick(){
|
|
|
|
|
this.showOrderDetails = false
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 查看单据明细
|
|
|
|
|
viewOrderDetail(row) {
|
|
|
|
|
this.currentOrder = row
|
|
|
|
|
this.detailLoading = true
|
|
|
|
|
this.showOrderDetail = true
|
|
|
|
|
|
|
|
|
|
getOrderDetails({
|
|
|
|
|
orderIdFk: row.billNo,
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 100
|
|
|
|
|
}).then(response => {
|
|
|
|
|
this.orderDetailQuery.billNo = row.billNo
|
|
|
|
|
getOrderDetails(this.orderDetailQuery).then(response => {
|
|
|
|
|
this.detailLoading = false
|
|
|
|
|
if (response.code === 20000) {
|
|
|
|
|
this.showOrderDetails = true
|
|
|
|
|
this.orderDetails = response.data.list || []
|
|
|
|
|
if (this.orderDetails.length === 0) {
|
|
|
|
|
this.$message.info('该单据暂无明细记录')
|
|
|
|
|
@ -326,17 +313,27 @@ export default {
|
|
|
|
|
|
|
|
|
|
// 重置表单
|
|
|
|
|
resetForm() {
|
|
|
|
|
this.queryForm = {
|
|
|
|
|
traceCode: '',
|
|
|
|
|
drugName: '',
|
|
|
|
|
this.filterQuery = {
|
|
|
|
|
code: '',
|
|
|
|
|
cpmctymc: '',
|
|
|
|
|
batchNo: '',
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 50
|
|
|
|
|
limit: 20
|
|
|
|
|
}
|
|
|
|
|
this.drugInfo = {}
|
|
|
|
|
this.currentOrder = {}
|
|
|
|
|
this.orderRecords = []
|
|
|
|
|
this.orderDetails = []
|
|
|
|
|
this.showOrderDetail = false
|
|
|
|
|
this.showDrugInfo = false
|
|
|
|
|
this.showorderRecords = false
|
|
|
|
|
this.showOrderDetails = false
|
|
|
|
|
this.noData = true
|
|
|
|
|
this.orderDetailQuery = {
|
|
|
|
|
billNo:'',
|
|
|
|
|
page: 1,
|
|
|
|
|
limit: 20
|
|
|
|
|
}
|
|
|
|
|
this.dataLog = " 请查询相关追溯记录"
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 格式化日期
|
|
|
|
|
@ -353,20 +350,12 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// 防止拖拽文件到页面
|
|
|
|
|
document.body.ondrop = function (event) {
|
|
|
|
|
event.preventDefault()
|
|
|
|
|
event.stopPropagation()
|
|
|
|
|
}
|
|
|
|
|
// // 防止拖拽文件到页面
|
|
|
|
|
// document.body.ondrop = function (event) {
|
|
|
|
|
// event.preventDefault()
|
|
|
|
|
// event.stopPropagation()
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// 如果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()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
yewj
3 weeks ago