suzhou-jichuang-lanhai
/
LiaoNingDangAn
10
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, 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, * Currently MockJs will be used in the production environment,
* please remove it before going online! ! ! * please remove it before going online! ! !
*
*/ */
Vue.use(Element, { Vue.use(Element, {
size: Cookies.get("size") || "medium", // set element-ui default size size: Cookies.get("size") || "medium", // set element-ui default size
}); });

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

@ -1,506 +1,260 @@
<template> <template>
<div class="container"> <div class="container">
<div class="right-content"> <div class="tabs">
<div class="tabs"> <div class="headerText">
<el-tabs <div class="searchP">查询条件</div>
v-model="activeName" </div>
style="color: #edeef0" <el-form ref="form1" :model="form1" label-width="80px">
> <div style="margin-top: 10px">
<el-tab-pane label="查询条件" name="first"> <el-row>
<div class="screen"> <el-col :span="7">
<div class="task-name"> <el-form-item label="产品名称">
<span class="task-name-text">产品名称：</span> <el-input v-model="form1.name"></el-input>
<div class="task-input"> </el-form-item>
<el-input </el-col>
v-model="queryCondition.taskName" <el-col :span="7">
placeholder="请输入内容" <el-form-item label="药品分类">
></el-input> <el-input v-model="form1.ypfl"></el-input>
</div> </el-form-item>
</div> </el-col>
<div class="task-name"> <el-col :span="7">
<span class="task-name-text">药品分类：</span> <el-form-item label="批准文号">
<div class="task-input"> <el-input v-model="form1.name"></el-input>
<el-select v-model="queryCondition.drugClassification" placeholder="请选择"> </el-form-item>
<el-option </el-col>
v-for="item in options" </el-row>
:key="item.value" </div>
:label="item.label" <el-row>
:value="item.value"> <el-col :span="7">
</el-option> <el-form-item label="生产企业">
</el-select> <el-input v-model="form1.name"></el-input>
</div> </el-form-item>
</div> </el-col>
<div class="task-name"> <el-col :span="7">
<span class="task-name-text">批准文号：</span> <el-form-item label="剂型">
<div class="task-input"> <el-select v-model="form1.types" placeholder="请选择剂型">
<el-input <el-option
v-model="queryCondition.approvalNumber" v-for="item in options"
placeholder="请输入内容" :key="item.value"
></el-input> :label="item.label"
</div> :value="item.value"
</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>
</div>
<div class="task-name">
<span class="task-name-text">剂型：</span>
<div class="task-input">
<el-select v-model="queryCondition.dosageForm" 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="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>
</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">
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
border
style="width: 100%"
> >
<el-table-column </el-option>
label="序号" </el-select> </el-form-item
width="50"> ></el-col>
<template slot-scope="scope">{{ scope.row.date }}</template> </el-row>
</el-table-column> </el-form>
<el-table-column <div class="footBox">
prop="name" <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
label="产品名称" <el-button type="primary" icon="el-icon-search" @click="searchList"
> >查询</el-button
</el-table-column> >
<el-table-column </div>
prop="approvalNumber" </div>
label="批准文号" <div class="tabsBottom">
show-overflow-tooltip> <div class="foot-main">
</el-table-column> <div class="headerText">
<el-table-column <div class="searchP">药品列表</div>
prop="type" </div>
label="药品分类" <section class="table-box">
show-overflow-tooltip> <div class="table-item">
</el-table-column> <el-table
<el-table-column v-loading="loading"
prop="dosageForm" :data="tableData"
label="剂型" border
show-overflow-tooltip> height="340"
</el-table-column> :stripe="false"
<el-table-column >
prop="firmName" <el-table-column
label="生产企业" type="index"
show-overflow-tooltip> label="序号"
</el-table-column> width="50"
<el-table-column align="center"
prop="address" />
label="操作" <el-table-column label="产品名称" align="center">
width="100" <template slot-scope="scope">
> {{ scope.row.yptymc }}
<template slot-scope="scope"> </template>
<div class="button"> </el-table-column>
<el-button <el-table-column label="批准文号" align="center">
size="mini" <template slot-scope="scope">
type="primary" {{ scope.row.yppzwh }}
class="xiangqing" </template>
plain </el-table-column>
@click="handleEdit(scope.$index, scope.row)" <el-table-column label="药品分类" align="center" width="70">
>查看</el-button <template slot-scope="scope">
> {{ scope.row.ypfl }}
</div> </template>
</template> </el-table-column>
</el-table-column> <el-table-column label="剂型" align="center" width="70">
</el-table> <template slot-scope="scope">
<div class="pagination"> {{ scope.row.jx }}
<!-- <span class="custom" </template>
>共{{ total }}条，显示{{ </el-table-column>
total == 0 <el-table-column label="生产企业" align="center">
? "0" <template slot-scope="scope">
: queryCondition.current == 1 {{ scope.row.ypscqymc }}
? "1" </template>
: queryCondition.size * (queryCondition.current - 1) + 1 </el-table-column>
}}-{{ numberMap() }}条</span <el-table-column
> --> label="操作"
<span class="custom"> class-name="small-padding fixed-width"
共100条，显示1-10条 width="140"
</span> align="center"
<el-pagination >
background <template slot-scope="scope">
:page-sizes="[10, 15]" <el-button
:total="total" size="mini"
layout=" prev, pager, next, sizes, jumper" plain
@current-change="currentChange" type="primary"
@size-change="sizeChange" @click="toDetail(scope.row)"
:current-page.sync="currentPage" >查看</el-button
:page-size.sync="pageSize"
> >
</el-pagination> </template>
</div> </el-table-column>
</div> </el-table>
</el-tab-pane>
</el-tabs>
</div> </div>
</div> </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> </div>
</template>
<script>
export default { <script>
components: { export default {
components: {},
data() {
return {
//===========
loading: false,
tableData: [],
total: 0,
options: [],
form1: {
types: "",
ypfl: "",
name: "",
size: 10,
current: 1,
},
};
},
mounted() {},
created() {
this.chinaCosmetics(1);
},
methods: {
//去内嵌页面
toDetail(e) {
console.log(e);
},
//搜索
searchList() {
this.form1.current = 1
this.chinaCosmetics();
}, },
data() { getPagination(e) {
return { console.log(e);
drugnum:"(20)", this.form1.current = e.page;
activeName: "first", this.form1.size = e.limit;
queryCondition:{ this.chinaCosmetics();
firmName:"", // 企业名称 },
approvalNumber:"", // 批准文号 //重置
taskName:"", // 产品名称 reset() {
dosageForm:'', // 剂型 this.form1 = {
drugClassification:'', // 药品分类 name: "",
}, ypfl: "",
options: [{ size: 10,
value: '选项1', current: 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:''
},
total:100,
currentPage:1,
pageSize:10,
}; };
}, },
mounted() { //国产化妆品
document.getElementsByClassName( async chinaCosmetics() {
"el-pagination__jump" this.loading = true;
)[0].childNodes[0].nodeValue = "跳至"; let msg1 = await this.$api.cosmetics.vRdgYpwhGxwz(this.form1);
this.$nextTick(()=>{ console.log(msg1);
let dom = document.getElementsByClassName('tabsTwo'); this.tableData = msg1.data.records;
let height = dom[0].getBoundingClientRect(); this.total = msg1.data.total;
// let windowWidth = window.innerWidth; this.form1.size = msg1.data.size;
let windowHeight = window.innerHeight; this.form1.current = msg1.data.current;
let relativeHeight = windowHeight - height.top this.loading = false;
this.tabsTwoStyle.height = relativeHeight + 'px'
})
}, },
methods: { },
currentChange(val){ };
</script>
}, <style lang="scss" scoped>
sizeChange(val){ ::v-deep .el-select {
width: 100% !important;
}, }
// 详情 .container {
handleEdit(index,row){ height: 100%;
console.log(index) // overflow: auto;
this.$router.push({name:'productInfo'}) background: #f2f2f2;
},
// 编辑
handleView(index,row){
}, .headerText {
}, width: 100%;
}; padding: 10px 20px;
</script> border-bottom: 1px solid #f2f3f5;
color: #323233;
<style lang="scss" scoped> font-size: 20px;
.container { font-weight: bold;
height: 100%; .searchP {
box-sizing: border-box; position: relative;
display: flex; cursor: pointer;
align-items: center; &::before {
background: #f2f2f2; content: "";
// padding: 10px; width: 78px;
& > div { height: 3px;
flex: 1; background: #1349c5;
height: 100%; position: absolute;
} bottom: -10px;
& > 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 {
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;
color: #323233;
}
.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;
}
}
}
.checkbox-group-name {
width: 695px;
}
.btn{
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;
}
}
.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;
}
}
}
}
.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}
}
} }
</style> .tabs {
width: 100%;
height: 30%;
background: #fff;
}
}
//===================
::v-deep .el-button--medium {
padding: 8px;
}
.footBox {
width: 100%;
text-align: center;
}
.tabsBottom {
height: 70%;
padding-top: 10px;
.foot-main {
height: 100%;
// min-height: 600px;
width: 100%;
background: white;
}
}
.exportBtn {
padding: 10px 20px;
}
.table-box {
padding: 0 20px;
.table-item {
}
}
.pagination {
display: flex;
justify-content: space-between;
padding: 15px 20px;
}
</style>

Write Preview
Loading…
Cancel
Save