suzhou-jichuang-lanhai
/
LiaoNingDangAn
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新了药品

Browse Source
Lvtianfang
李劲龙 2 years ago
parent 3a630cf7bb
commit 0a630395b2
3 changed files with 256 additions and 491 deletions
Show Stats Download Patch File Download Diff File

8
src/api/archives/cosmetics.js
Unescape View File

@ -46,4 +46,12 @@ export default {
params: query,
});
},
//分页条件查询药品批件数据
vRdgYpwhGxwz(query) {
return request({
url: "/pharmaceuticals/vRdgYpwhGxwz",
method: "GET",
params: query,
});
},
}

3
src/main.js
Unescape View File

@ -127,8 +127,11 @@ L.Icon.Default.mergeOptions({
*
* Currently MockJs will be used in the production environment,
* please remove it before going online! ! !
*
*/
Vue.use(Element, {
size: Cookies.get("size") || "medium", // set element-ui default size
});

596
src/views/productsMsg/index.vue
Unescape View File

@ -1,506 +1,260 @@
<template>
<div class="container">
<div class="right-content">
<div class="tabs">
<el-tabs
v-model="activeName"
style="color: #edeef0"
>
<el-tab-pane label="查询条件" name="first">
<div class="screen">
<div class="task-name">
<span class="task-name-text">产品名称：</span>
<div class="task-input">
<el-input
v-model="queryCondition.taskName"
placeholder="请输入内容"
></el-input>
</div>
</div>
<div class="task-name">
<span class="task-name-text">药品分类：</span>
<div class="task-input">
<el-select v-model="queryCondition.drugClassification" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="task-name">
<span class="task-name-text">批准文号：</span>
<div class="task-input">
<el-input
v-model="queryCondition.approvalNumber"
placeholder="请输入内容"
></el-input>
</div>
</div>
<div class="task-name">
<span class="task-name-text">生产企业：</span>
<div class="task-input">
<el-input
v-model="queryCondition.firmName"
placeholder="请输入内容"
></el-input>
<div class="headerText">
<div class="searchP">查询条件</div>
</div>
<el-form ref="form1" :model="form1" label-width="80px">
<div style="margin-top: 10px">
<el-row>
<el-col :span="7">
<el-form-item label="产品名称">
<el-input v-model="form1.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="药品分类">
<el-input v-model="form1.ypfl"></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="批准文号">
<el-input v-model="form1.name"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div class="task-name">
<span class="task-name-text">剂型：</span>
<div class="task-input">
<el-select v-model="queryCondition.dosageForm" placeholder="请选择">
<el-row>
<el-col :span="7">
<el-form-item label="生产企业">
<el-input v-model="form1.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="剂型">
<el-select v-model="form1.types" placeholder="请选择剂型">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-select> </el-form-item
></el-col>
</el-row>
</el-form>
<div class="footBox">
<el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
<el-button type="primary" icon="el-icon-search" @click="searchList"
>查询</el-button
>
</div>
<div class="btn">
<el-button size="mini" icon="el-icon-refresh-left">重置</el-button>
<el-button size="mini" type="primary" icon="el-icon-search">查询</el-button>
</div>
<div class="tabsBottom">
<div class="foot-main">
<div class="headerText">
<div class="searchP">药品列表</div>
</div>
</el-tab-pane>
</el-tabs>
<div class="tabsTwo" :style="tabsTwoStyle">
<el-tabs
v-model="activeName"
style="color: #edeef0"
>
<el-tab-pane label="产品列表" name="first">
<div class="mytable">
<section class="table-box">
<div class="table-item">
<el-table
ref="multipleTable"
v-loading="loading"
:data="tableData"
tooltip-effect="dark"
border
style="width: 100%"
height="340"
:stripe="false"
>
<el-table-column
type="index"
label="序号"
width="50">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="产品名称"
>
width="50"
align="center"
/>
<el-table-column label="产品名称" align="center">
<template slot-scope="scope">
{{ scope.row.yptymc }}
</template>
</el-table-column>
<el-table-column
prop="approvalNumber"
label="批准文号"
show-overflow-tooltip>
<el-table-column label="批准文号" align="center">
<template slot-scope="scope">
{{ scope.row.yppzwh }}
</template>
</el-table-column>
<el-table-column
prop="type"
label="药品分类"
show-overflow-tooltip>
<el-table-column label="药品分类" align="center" width="70">
<template slot-scope="scope">
{{ scope.row.ypfl }}
</template>
</el-table-column>
<el-table-column
prop="dosageForm"
label="剂型"
show-overflow-tooltip>
<el-table-column label="剂型" align="center" width="70">
<template slot-scope="scope">
{{ scope.row.jx }}
</template>
</el-table-column>
<el-table-column
prop="firmName"
label="生产企业"
show-overflow-tooltip>
<el-table-column label="生产企业" align="center">
<template slot-scope="scope">
{{ scope.row.ypscqymc }}
</template>
</el-table-column>
<el-table-column
prop="address"
label="操作"
width="100"
class-name="small-padding fixed-width"
width="140"
align="center"
>
<template slot-scope="scope">
<div class="button">
<el-button
size="mini"
type="primary"
class="xiangqing"
plain
@click="handleEdit(scope.$index, scope.row)"
type="primary"
@click="toDetail(scope.row)"
>查看</el-button
>
</div>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<!-- <span class="custom"
>共{{ total }}条，显示{{
total == 0
? "0"
: queryCondition.current == 1
? "1"
: queryCondition.size * (queryCondition.current - 1) + 1
}}-{{ numberMap() }}条</span
> -->
<span class="custom">
共100条，显示1-10条
</span>
<el-pagination
background
:page-sizes="[10, 15]"
:total="total"
layout=" prev, pager, next, sizes, jumper"
@current-change="currentChange"
@size-change="sizeChange"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
>
</el-pagination>
</div>
</div>
</el-tab-pane>
</el-tabs>
</section>
<pagination
v-show="total > 0"
:total="total"
:page="form1.current"
:limit="form1.size"
@pagination="getPagination"
:current-page.sync="form1.current"
></pagination>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {
},
components: {},
data() {
return {
drugnum:"(20)",
activeName: "first",
queryCondition:{
firmName:"", // 企业名称
approvalNumber:"", // 批准文号
taskName:"", // 产品名称
dosageForm:'', // 剂型
drugClassification:'', // 药品分类
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
tableData: [{
date: '1',
name: '辽-xxxx',
type:"药品",
approvalNumber:"12421432143214321",
firmName:"XXX有限公司",
}, {
date: '2',
name: '辽-aaaa',
type:"医疗器械",
approvalNumber:"12421432143214321",
firmName:"XXX有限公司",
}, {
date: '3',
name: '辽-zzzz',
type:"化妆品",
approvalNumber:"12421432143214321",
firmName:"XXX有限公司",
}, {
date: '4',
name: '辽-qqqq',
type:"药品",
approvalNumber:"12421432143214321",
firmName:"XXX有限公司",
}, {
date: '5',
name: '辽-xxxx',
type:"医疗器械",
approvalNumber:"12421432143214321",
firmName:"XXX有限公司",
}, {
date: '6',
name: '辽-aaaa',
type:"化妆品",
approvalNumber:"12421432143214321",
firmName:"XXX有限公司",
}, {
date: '7',
name: '辽-zzzz',
type:"药品",
approvalNumber:"12421432143214321",
firmName:"XXX有限公司",
}, {
date: '8',
name: '辽-qqqq',
type:"医疗器械",
approvalNumber:"12421432143214321",
firmName:"XXX有限公司",
}, {
date: '9',
name: '辽-xxxx',
type:"化妆品",
approvalNumber:"12421432143214321",
firmName:"XXX有限公司",
}, {
date: '10',
name: '辽-aaaa',
type:"药品",
approvalNumber:"12421432143214321",
firmName:"XXX有限公司",
}],
tabsTwoStyle:{
height:''
//===========
loading: false,
tableData: [],
total: 0,
options: [],
form1: {
types: "",
ypfl: "",
name: "",
size: 10,
current: 1,
},
total:100,
currentPage:1,
pageSize:10,
};
},
mounted() {
document.getElementsByClassName(
"el-pagination__jump"
)[0].childNodes[0].nodeValue = "跳至";
this.$nextTick(()=>{
let dom = document.getElementsByClassName('tabsTwo');
let height = dom[0].getBoundingClientRect();
// let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let relativeHeight = windowHeight - height.top
this.tabsTwoStyle.height = relativeHeight + 'px'
})
mounted() {},
created() {
this.chinaCosmetics(1);
},
methods: {
currentChange(val){
//去内嵌页面
toDetail(e) {
console.log(e);
},
sizeChange(val){
//搜索
searchList() {
this.form1.current = 1
this.chinaCosmetics();
},
// 详情
handleEdit(index,row){
console.log(index)
this.$router.push({name:'productInfo'})
getPagination(e) {
console.log(e);
this.form1.current = e.page;
this.form1.size = e.limit;
this.chinaCosmetics();
},
// 编辑
handleView(index,row){
//重置
reset() {
this.form1 = {
name: "",
ypfl: "",
size: 10,
current: 1,
};
},
//国产化妆品
async chinaCosmetics() {
this.loading = true;
let msg1 = await this.$api.cosmetics.vRdgYpwhGxwz(this.form1);
console.log(msg1);
this.tableData = msg1.data.records;
this.total = msg1.data.total;
this.form1.size = msg1.data.size;
this.form1.current = msg1.data.current;
this.loading = false;
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-select {
width: 100% !important;
}
.container {
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
// overflow: auto;
background: #f2f2f2;
// padding: 10px;
& > div {
flex: 1;
height: 100%;
}
& > div:nth-child(2) {
flex: 2;
margin: 0 10px;
}
.middle {
height: 100%;
background: #ffff;
border-radius: 8px;
overflow: hidden;
}
.left,
.right {
display: flex;
flex-direction: column;
align-items: center;
& > div {
.headerText {
width: 100%;
border-radius: 8px;
flex: 1;
background: #ffffff;
}
}
.right-content {
background-color: #fff;
::v-deep .el-tabs__header{
margin: 0;
.el-tabs__nav-scroll {
padding-left: 15px;
padding-top: 3px;
}
.el-tabs__item {
font-size: 18px;
font-family: Source Han Sans SC-Bold, Source Han Sans SC;
font-weight: bold;
padding: 10px 20px;
border-bottom: 1px solid #f2f3f5;
color: #323233;
font-size: 20px;
font-weight: bold;
.searchP {
position: relative;
cursor: pointer;
&::before {
content: "";
width: 78px;
height: 3px;
background: #1349c5;
position: absolute;
bottom: -10px;
}
.el-tabs__active-bar {
background-color: #1349C5;
height: 2px;
border-radius: 0px 0px 0px 0px;
}
}
.tabs {
background: #F2F2F2 ;
box-shadow: 0px 0px 12px 0px rgba(194, 212, 226, 0.64);
border-radius: vw(10);
min-height: 88vh;
// padding-top: 3px;
// padding-left: 15px;
::v-deep .el-tabs {
background-color: #fff;
}
}
.screen {
padding: 15px 0 26px 28px;
display: flex;
flex-wrap: wrap;
align-items: center;
.task-name {
display: flex;
align-items: center;
margin-right: 100px;
.task-name-text {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #6a6c6f;
line-height: 50px;
display: inline-block;
width: 80px;
text-align: right;
// margin-right: vw(10);
}
.task-input {
width: 351px;
height: 32px;
::v-deep .el-input {
width: 351px !important;
height: 32px;
margin-left: 0 !important;
}
::v-deep .el-input__inner {
width: 100%;
height: 100%;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 50px;
padding-left: 15px;
}
height: 30%;
background: #fff;
}
}
.checkbox-group-name {
width: 695px;
//===================
::v-deep .el-button--medium {
padding: 8px;
}
.btn{
.footBox {
width: 100%;
display: flex;
justify-content: center;
}
.time-interval {
display: flex;
align-items: center;
margin-right: 20px;
.interval-text {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #6a6c6f;
}
}
}
.tabsTwo {
margin: 10px 0;
overflow-y: scroll;
// padding: 10px 0;
padding-bottom: 20px;
background-color: #fff;
.mytable {
width: 99%;
margin: 10px auto;
::v-deep .el-table td {
height: 40px;
padding: 0;
}
::v-deep .el-table th {
height: 40px;
padding: 0;
font-size: 14px;
font-family: Source Han Sans SC-Medium, Source Han Sans SC;
font-weight: bold;
color: #292f38;
line-height: 36px;
}
.button {
display: flex;
align-items: center;
.xiangqing {
height: 23px;
padding: 3px 10px;
border-radius: 4px;
line-height: 20px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 5px;
background: #EBF5FF;
border: 1px solid #A1CBF8;
::v-deep span {
display: inline-block;
color: #0E7CF4;
text-align: center;
}
.tabsBottom {
height: 70%;
padding-top: 10px;
.foot-main {
height: 100%;
// min-height: 600px;
width: 100%;
background: white;
}
.bianji {
height: 23px;
padding: 3px;
border-radius: 4px;
line-height: 20px;
display: flex;
justify-content: center;
align-items: center;
background: #FFEFE3;
border: 1px solid #FFC89F;
::v-deep span {
display: inline-block;
color: #F88129;
}
.exportBtn {
padding: 10px 20px;
}
.table-box {
padding: 0 20px;
.table-item {
}
}
.pagination {
margin-top: 17px;
display: flex;
align-items: center;
justify-content: space-between;
// padding-bottom: vh(20);
::v-deep .el-pagination__jump {
margin: 0;
}
.custom {
font-size: 14px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #292f38;
line-height: 18px;
}
}
}
.tabsTwo::-webkit-scrollbar {display:none}
}
padding: 15px 20px;
}
</style>
Write Preview
Loading…
Cancel
Save