|
|
|
@ -1,22 +1,22 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> |
|
|
|
<el-form-item label="兽药批准文号" prop="approvalNumber"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.approvalNumber" |
|
|
|
placeholder="请输入兽药批准文号" |
|
|
|
clearable |
|
|
|
@keyup.enter.native="handleQuery" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="产品批号" prop="batchNumber"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.batchNumber" |
|
|
|
placeholder="请输入产品批号" |
|
|
|
clearable |
|
|
|
@keyup.enter.native="handleQuery" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<!-- <el-form-item label="兽药批准文号" prop="approvalNumber">--> |
|
|
|
<!-- <el-input--> |
|
|
|
<!-- v-model="queryParams.approvalNumber"--> |
|
|
|
<!-- placeholder="请输入兽药批准文号"--> |
|
|
|
<!-- clearable--> |
|
|
|
<!-- @keyup.enter.native="handleQuery"--> |
|
|
|
<!-- />--> |
|
|
|
<!-- </el-form-item>--> |
|
|
|
<!-- <el-form-item label="产品批号" prop="batchNumber">--> |
|
|
|
<!-- <el-input--> |
|
|
|
<!-- v-model="queryParams.batchNumber"--> |
|
|
|
<!-- placeholder="请输入产品批号"--> |
|
|
|
<!-- clearable--> |
|
|
|
<!-- @keyup.enter.native="handleQuery"--> |
|
|
|
<!-- />--> |
|
|
|
<!-- </el-form-item>--> |
|
|
|
<el-form-item label="通用名称" prop="genericName"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.genericName" |
|
|
|
@ -33,14 +33,14 @@ |
|
|
|
@keyup.enter.native="handleQuery" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="规格" prop="specification"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.specification" |
|
|
|
placeholder="请输入规格，如：100ml/瓶" |
|
|
|
clearable |
|
|
|
@keyup.enter.native="handleQuery" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<!-- <el-form-item label="规格" prop="specification">--> |
|
|
|
<!-- <el-input--> |
|
|
|
<!-- v-model="queryParams.specification"--> |
|
|
|
<!-- placeholder="请输入规格，如：100ml/瓶"--> |
|
|
|
<!-- clearable--> |
|
|
|
<!-- @keyup.enter.native="handleQuery"--> |
|
|
|
<!-- />--> |
|
|
|
<!-- </el-form-item>--> |
|
|
|
<el-form-item label="生产厂家" prop="manufacturer"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.manufacturer" |
|
|
|
@ -229,13 +229,13 @@ |
|
|
|
|
|
|
|
<el-table v-loading="loading" :data="vacCategoryList" @selection-change="handleSelectionChange"> |
|
|
|
<el-table-column type="selection" width="55" align="center" /> |
|
|
|
<el-table-column label="疫苗ID" align="center" prop="id" /> |
|
|
|
<el-table-column label="兽药批准文号" align="center" prop="approvalNumber" /> |
|
|
|
<el-table-column label="产品批号" align="center" prop="batchNumber" /> |
|
|
|
<el-table-column label="通用名称" align="center" prop="genericName" /> |
|
|
|
<el-table-column label="商品名称" align="center" prop="tradeName" /> |
|
|
|
<el-table-column label="规格" align="center" prop="specification" /> |
|
|
|
<el-table-column label="生产厂家" align="center" prop="manufacturer" /> |
|
|
|
<!-- <el-table-column label="疫苗ID" align="center" prop="id" />--> |
|
|
|
<el-table-column label="兽药批准文号" align="center" prop="approvalNumber" width="200px"/> |
|
|
|
<el-table-column label="产品批号" align="center" prop="batchNumber" width="120px"/> |
|
|
|
<el-table-column label="通用名称" align="center" prop="genericName" :show-overflow-tooltip="true"/> |
|
|
|
<el-table-column label="商品名称" align="center" prop="tradeName" width="200px"/> |
|
|
|
<!-- <el-table-column label="规格" align="center" prop="specification" width="180"/>--> |
|
|
|
<el-table-column label="生产厂家" align="center" prop="manufacturer" :show-overflow-tooltip="true"/> |
|
|
|
<el-table-column label="生产日期" align="center" prop="manufactureDate" width="180"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span>{{ parseTime(scope.row.manufactureDate, '{y}-{m}-{d}') }}</span> |
|
|
|
@ -246,20 +246,20 @@ |
|
|
|
<span>{{ parseTime(scope.row.expiryDate, '{y}-{m}-{d}') }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="适用动物" align="center" prop="livestockTypes"> |
|
|
|
<el-table-column label="适用动物" align="center" prop="livestockTypes" width="200px"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<dict-tag :options="dict.type.livestock_type" :value="scope.row.livestockTypes ? scope.row.livestockTypes.split(',') : []"/> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="预防疫病" align="center" prop="preventDisease" /> |
|
|
|
<el-table-column label="是否强制免疫" align="center" prop="isMandatory"> |
|
|
|
<!-- <el-table-column label="预防疫病" align="center" prop="preventDisease" width="200px"/>--> |
|
|
|
<el-table-column label="是否强制免疫" align="center" prop="isMandatory" width="200px"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<dict-tag :options="dict.type.is_compulsory_immunity" :value="scope.row.isMandatory"/> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<!-- <el-table-column label="免疫期" align="center" prop="immunePeriod" />--> |
|
|
|
<el-table-column label="用法用量" align="center" prop="dosage" /> |
|
|
|
<el-table-column label="接种途径" align="center" prop="administrationRoute"> |
|
|
|
<!-- <el-table-column label="用法用量" align="center" prop="dosage" />--> |
|
|
|
<el-table-column label="接种途径" align="center" prop="administrationRoute" width="200px"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<dict-tag :options="dict.type.vac_route" :value="scope.row.administrationRoute"/> |
|
|
|
</template> |
|
|
|
@ -286,12 +286,23 @@ |
|
|
|
<!-- </template>--> |
|
|
|
<!-- </el-table-column>--> |
|
|
|
<!-- <el-table-column label="备注" align="center" prop="remark" />--> |
|
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="300"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button |
|
|
|
size="mini" |
|
|
|
type="text" |
|
|
|
icon="el-icon-view" |
|
|
|
@click="handleDetail(scope.row)" |
|
|
|
class="info-btn view-btn" |
|
|
|
> |
|
|
|
详情 |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
size="mini" |
|
|
|
type="text" |
|
|
|
icon="el-icon-edit" |
|
|
|
style="color: #42B983" |
|
|
|
class="info-btn alter-btn" |
|
|
|
@click="handleUpdate(scope.row)" |
|
|
|
v-hasPermi="['system:vacCategory:edit']" |
|
|
|
>修改</el-button> |
|
|
|
@ -299,6 +310,8 @@ |
|
|
|
size="mini" |
|
|
|
type="text" |
|
|
|
icon="el-icon-delete" |
|
|
|
style="color: #f56c6c" |
|
|
|
class="info-btn delete-btn" |
|
|
|
@click="handleDelete(scope.row)" |
|
|
|
v-hasPermi="['system:vacCategory:remove']" |
|
|
|
>删除</el-button> |
|
|
|
@ -306,6 +319,7 @@ |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
|
|
|
|
<div class="pagestyle"> |
|
|
|
<pagination |
|
|
|
v-show="total>0" |
|
|
|
:total="total" |
|
|
|
@ -313,9 +327,10 @@ |
|
|
|
:limit.sync="queryParams.pageSize" |
|
|
|
@pagination="getList" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 添加或修改疫苗类别对话框 --> |
|
|
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> |
|
|
|
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body> |
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
|
|
|
<el-form-item label="兽药批准文号" prop="approvalNumber"> |
|
|
|
<el-input v-model="form.approvalNumber" placeholder="请输入兽药批准文号" /> |
|
|
|
@ -442,6 +457,60 @@ |
|
|
|
<el-button @click="cancel">取 消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<!-- 详情弹窗 --> |
|
|
|
<el-dialog title="疫苗类别详情" :visible.sync="detailViews" width="80%" append-to-body> |
|
|
|
<el-descriptions :column="4" border v-loading="detailLoading" > |
|
|
|
<el-descriptions-item label="兽药批准文号" :span="2"> |
|
|
|
{{ currentDetail.approvalNumber || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="产品批号" :span="2"> |
|
|
|
{{ currentDetail.batchNumber || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="通用名称" :span="2"> |
|
|
|
{{ currentDetail.type || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="商品名称" :span="2"> |
|
|
|
{{ currentDetail.tradeName || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="规格" :span="2"> |
|
|
|
{{ currentDetail.specification || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="生产厂家" :span="2"> |
|
|
|
{{ currentDetail.manufacturer || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="生产日期" :span="2"> |
|
|
|
{{ currentDetail.manufactureDate || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="有效期至" :span="2"> |
|
|
|
{{ currentDetail.expiryDate || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="适用动物" :span="2"> |
|
|
|
{{ currentDetail.livestockTypes || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="是否强制免疫" :span="2"> |
|
|
|
{{ currentDetail.isMandatory || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="免疫期" :span="2"> |
|
|
|
{{ currentDetail.immunePeriod || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="接种途径" :span="2"> |
|
|
|
{{ currentDetail.administrationRoute || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="用法用量" :span="4"> |
|
|
|
{{ currentDetail.dosage || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="贮藏条件" :span="4"> |
|
|
|
{{ currentDetail.storageCondition || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item label="注意事项" :span="4"> |
|
|
|
{{ currentDetail.precautions || '--' }} |
|
|
|
</el-descriptions-item> |
|
|
|
</el-descriptions> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="detailViews = false">关 闭</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -455,6 +524,7 @@ export default { |
|
|
|
return { |
|
|
|
// 遮罩层 |
|
|
|
loading: true, |
|
|
|
detailLoading: true, |
|
|
|
// 选中数组 |
|
|
|
ids: [], |
|
|
|
// 非单个禁用 |
|
|
|
@ -467,10 +537,13 @@ export default { |
|
|
|
total: 0, |
|
|
|
// 疫苗类别表格数据 |
|
|
|
vacCategoryList: [], |
|
|
|
// 当前查看的详情 |
|
|
|
currentDetail: {}, |
|
|
|
// 弹出层标题 |
|
|
|
title: "", |
|
|
|
// 是否显示弹出层 |
|
|
|
open: false, |
|
|
|
detailViews: false, |
|
|
|
// 查询参数 |
|
|
|
queryParams: { |
|
|
|
pageNum: 1, |
|
|
|
@ -595,6 +668,22 @@ export default { |
|
|
|
this.single = selection.length!==1 |
|
|
|
this.multiple = !selection.length |
|
|
|
}, |
|
|
|
/** 详情按钮操作 */ |
|
|
|
handleDetail(row) { |
|
|
|
this.detailViews = true; |
|
|
|
this.detailLoading = true; |
|
|
|
this.currentDetail = {}; |
|
|
|
|
|
|
|
const id = row.id; |
|
|
|
getVacCategory(id).then(response => { |
|
|
|
if (response.code === 200) { |
|
|
|
this.currentDetail = response.data; |
|
|
|
} else { |
|
|
|
this.$modal.msgError("获取详情失败"); |
|
|
|
} |
|
|
|
this.detailLoading = false; |
|
|
|
}); |
|
|
|
}, |
|
|
|
/** 新增按钮操作 */ |
|
|
|
handleAdd() { |
|
|
|
this.reset() |
|
|
|
@ -652,3 +741,127 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
::v-deep .el-descriptions-item__cell{ |
|
|
|
width: 90px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .pagestyle .el-input{ |
|
|
|
width: auto !important; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-descriptions-row th{ |
|
|
|
text-align: center !important;color: #7b7c7f; |
|
|
|
background: #faf7f7; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell { |
|
|
|
border: 1px solid #bcbbbb; |
|
|
|
padding: 12px 10px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
// 操作按钮样式 |
|
|
|
.info-btn { |
|
|
|
padding: 6px 10px; |
|
|
|
border-radius: 4px; |
|
|
|
margin: 0 10px; |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.view-btn:hover { |
|
|
|
background-color: rgb(216, 238, 248); |
|
|
|
transform: translateY(-1px); |
|
|
|
} |
|
|
|
|
|
|
|
.alter-btn:hover{ |
|
|
|
background-color: rgb(230, 255, 238); |
|
|
|
transform: translateY(-1px); |
|
|
|
} |
|
|
|
|
|
|
|
.delete-btn:hover { |
|
|
|
background-color: rgba(245, 108, 108, 0.1); |
|
|
|
transform: translateY(-1px); |
|
|
|
} |
|
|
|
|
|
|
|
// 新增/修改的弹窗 |
|
|
|
::v-deep .el-dialog { |
|
|
|
border-radius: 12px; |
|
|
|
overflow: hidden; |
|
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); |
|
|
|
animation: dialogFadeIn 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-dialog__header { |
|
|
|
background: linear-gradient(135deg, #2c7a4d 0%, #42b983 100%); |
|
|
|
padding: 18px 24px; |
|
|
|
border-bottom: none; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-dialog__title { |
|
|
|
font-size: 17px; |
|
|
|
font-weight: 600; |
|
|
|
color: white; |
|
|
|
letter-spacing: 0.5px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-dialog__headerbtn:hover .el-dialog__close { |
|
|
|
color: #ffd04b; |
|
|
|
transform: rotate(90deg); |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-dialog__body { |
|
|
|
padding: 28px 24px 20px; |
|
|
|
background-color: #f8fafc; |
|
|
|
max-height: 70vh; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-form-item { |
|
|
|
margin-bottom: 20px; |
|
|
|
transition: all 0.3s; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-form-item__label { |
|
|
|
font-weight: 500; |
|
|
|
color: #2d3748; |
|
|
|
font-size: 14px; |
|
|
|
transition: color 0.3s; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-input, |
|
|
|
::v-deep .el-textarea, |
|
|
|
::v-deep .el-select { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-input__inner, |
|
|
|
::v-deep .el-textarea__inner { |
|
|
|
border-radius: 8px; |
|
|
|
border: 1px solid #dcdfe6; |
|
|
|
font-size: 14px; |
|
|
|
transition: all 0.3s; |
|
|
|
background-color: #fcfdfe; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-input__inner:focus, |
|
|
|
::v-deep .el-textarea__inner:focus { |
|
|
|
border-color: #42B983; |
|
|
|
box-shadow: 0 0 0 3px rgb(230, 255, 238); |
|
|
|
background-color: white; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-select .el-input__inner { |
|
|
|
padding-right: 35px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-dialog__footer { |
|
|
|
padding: 20px 24px; |
|
|
|
background-color: #f8fafc; |
|
|
|
border-top: 1px solid #eef2f7; |
|
|
|
border-radius: 0 0 12px 12px; |
|
|
|
} |
|
|
|
</style> |
王妍洁
2 months ago