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

Merge branch 'lijinlong' of http://39.101.188.84:8000/suzhou-jichuang-lanhai/LiaoNingDangAn

Browse Source
Lvtianfang
杜函宇 2 years ago
parent 774e910736 0a630395b2
commit a295c44a1e
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
}); });

596
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">
<el-tabs <div class="headerText">
v-model="activeName" <div class="searchP">查询条件</div>
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> </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>
<div class="task-name"> <el-row>
<span class="task-name-text">剂型：</span> <el-col :span="7">
<div class="task-input"> <el-form-item label="生产企业">
<el-select v-model="queryCondition.dosageForm" placeholder="请选择"> <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 <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
>
</el-option> </el-option>
</el-select> </el-select> </el-form-item
</div> ></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>
<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>
<div class="tabsBottom">
<div class="foot-main">
<div class="headerText">
<div class="searchP">药品列表</div>
</div> </div>
</el-tab-pane> <section class="table-box">
</el-tabs> <div class="table-item">
<div class="tabsTwo" :style="tabsTwoStyle">
<el-tabs
v-model="activeName"
style="color: #edeef0"
>
<el-tab-pane label="产品列表" name="first">
<div class="mytable">
<el-table <el-table
ref="multipleTable" v-loading="loading"
:data="tableData" :data="tableData"
tooltip-effect="dark"
border border
style="width: 100%" height="340"
:stripe="false"
> >
<el-table-column <el-table-column
type="index"
label="序号" label="序号"
width="50"> width="50"
<template slot-scope="scope">{{ scope.row.date }}</template> align="center"
</el-table-column> />
<el-table-column <el-table-column label="产品名称" align="center">
prop="name" <template slot-scope="scope">
label="产品名称" {{ scope.row.yptymc }}
> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="批准文号" align="center">
prop="approvalNumber" <template slot-scope="scope">
label="批准文号" {{ scope.row.yppzwh }}
show-overflow-tooltip> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="药品分类" align="center" width="70">
prop="type" <template slot-scope="scope">
label="药品分类" {{ scope.row.ypfl }}
show-overflow-tooltip> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="剂型" align="center" width="70">
prop="dosageForm" <template slot-scope="scope">
label="剂型" {{ scope.row.jx }}
show-overflow-tooltip> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="生产企业" align="center">
prop="firmName" <template slot-scope="scope">
label="生产企业" {{ scope.row.ypscqymc }}
show-overflow-tooltip> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="address"
label="操作" label="操作"
width="100" class-name="small-padding fixed-width"
width="140"
align="center"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<div class="button">
<el-button <el-button
size="mini" size="mini"
type="primary"
class="xiangqing"
plain plain
@click="handleEdit(scope.$index, scope.row)" type="primary"
@click="toDetail(scope.row)"
>查看</el-button >查看</el-button
> >
</div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </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>
</div> </section>
</el-tab-pane> <pagination
</el-tabs> v-show="total > 0"
:total="total"
:page="form1.current"
:limit="form1.size"
@pagination="getPagination"
:current-page.sync="form1.current"
></pagination>
</div> </div>
</div> </div>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
components: { components: {},
},
data() { data() {
return { return {
drugnum:"(20)", //===========
activeName: "first", loading: false,
queryCondition:{ tableData: [],
firmName:"", // 企业名称 total: 0,
approvalNumber:"", // 批准文号 options: [],
taskName:"", // 产品名称 form1: {
dosageForm:'', // 剂型 types: "",
drugClassification:'', // 药品分类 ypfl: "",
}, name: "",
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() { mounted() {},
document.getElementsByClassName( created() {
"el-pagination__jump" this.chinaCosmetics(1);
)[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'
})
}, },
methods: { methods: {
currentChange(val){ //去内嵌页面
toDetail(e) {
console.log(e);
}, },
sizeChange(val){ //搜索
searchList() {
this.form1.current = 1
this.chinaCosmetics();
}, },
// 详情 getPagination(e) {
handleEdit(index,row){ console.log(e);
console.log(index) this.form1.current = e.page;
this.$router.push({name:'productInfo'}) 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-select {
width: 100% !important;
}
.container { .container {
height: 100%; height: 100%;
box-sizing: border-box; // overflow: auto;
display: flex;
align-items: center;
background: #f2f2f2; background: #f2f2f2;
// padding: 10px;
& > div { .headerText {
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 {
width: 100%; width: 100%;
border-radius: 8px; padding: 10px 20px;
flex: 1; border-bottom: 1px solid #f2f3f5;
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; 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 { .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%; width: 100%;
height: 100%; height: 30%;
font-size: 16px; background: #fff;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 50px;
padding-left: 15px;
}
} }
} }
.checkbox-group-name { //===================
width: 695px; ::v-deep .el-button--medium {
padding: 8px;
} }
.btn{ .footBox {
width: 100%; width: 100%;
display: flex; text-align: center;
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;
} }
.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 { .pagination {
margin-top: 17px;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
// padding-bottom: vh(20); padding: 15px 20px;
::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> </style>
Write Preview
Loading…
Cancel
Save