|
|
|
|
@ -0,0 +1,331 @@
|
|
|
|
|
<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.fullTextSearch"
|
|
|
|
|
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>
|
|
|
|
|
<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.PrescriptionContent"
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="task-name">
|
|
|
|
|
<span class="task-name-text">功能主治：</span>
|
|
|
|
|
<div class="task-input">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryCondition.majorFunction"
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<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="time-interval">
|
|
|
|
|
<div class="interval-text">
|
|
|
|
|
批号有效期：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="interval-select">
|
|
|
|
|
<div class="star-time">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="queryCondition.startTime"
|
|
|
|
|
type="datetime"
|
|
|
|
|
align="right"
|
|
|
|
|
:clearable="false"
|
|
|
|
|
format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
|
placeholder="请选择开始时间"
|
|
|
|
|
>
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
<!-- <i class="el-icon-date data_icon"></i> -->
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <i class="el-icon-sort-up"></i> -->
|
|
|
|
|
<div class="symbol">~</div>
|
|
|
|
|
<div class="end-time">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="queryCondition.endTime"
|
|
|
|
|
type="datetime"
|
|
|
|
|
align="right"
|
|
|
|
|
:clearable="false"
|
|
|
|
|
format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
|
placeholder="请选择结束时间"
|
|
|
|
|
>
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
<i class="el-icon-date data_icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="task-name">
|
|
|
|
|
<span class="task-name-text">产品标签：</span>
|
|
|
|
|
<div class="task-checkbox">
|
|
|
|
|
<el-checkbox-group v-model="queryCondition.checkList">
|
|
|
|
|
<el-checkbox label="全部"></el-checkbox>
|
|
|
|
|
<el-checkbox label="百年产品"></el-checkbox>
|
|
|
|
|
<el-checkbox label="疗效显著"></el-checkbox>
|
|
|
|
|
<el-checkbox label="无刺激"></el-checkbox>
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="task-name">
|
|
|
|
|
<span class="task-name-text">产品筛选：</span>
|
|
|
|
|
<div class="task-checkbox">
|
|
|
|
|
<el-checkbox-group v-model="queryCondition.checkListTwo">
|
|
|
|
|
<el-checkbox label="全部"></el-checkbox>
|
|
|
|
|
<el-checkbox :label="'药品' + drugnum"></el-checkbox>
|
|
|
|
|
<el-checkbox label="医疗器械"></el-checkbox>
|
|
|
|
|
<el-checkbox label="化妆品"></el-checkbox>
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
drugnum:"(20)",
|
|
|
|
|
activeName: "first",
|
|
|
|
|
queryCondition:{
|
|
|
|
|
fullTextSearch:"", // 全文检索
|
|
|
|
|
firmName:"", // 企业名称
|
|
|
|
|
approvalNumber:"", // 批准文号
|
|
|
|
|
taskName:"", // 产品名称
|
|
|
|
|
PrescriptionContent:"", // 处方内容
|
|
|
|
|
majorFunction:"", // 功能主治
|
|
|
|
|
startTime:"", // 开始日期
|
|
|
|
|
endTime:"", // 结束日期
|
|
|
|
|
checkList:[],
|
|
|
|
|
checkListTwo:[],
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {},
|
|
|
|
|
methods: {},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.container {
|
|
|
|
|
height: 100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
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 {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.middle-box {
|
|
|
|
|
margin: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main {
|
|
|
|
|
height: calc(100% - 40px);
|
|
|
|
|
}
|
|
|
|
|
.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: rgba(255, 255, 255, 0.9);
|
|
|
|
|
box-shadow: 0px 0px 12px 0px rgba(194, 212, 226, 0.64);
|
|
|
|
|
border-radius: vw(10);
|
|
|
|
|
min-height: 90vh;
|
|
|
|
|
// padding-top: 3px;
|
|
|
|
|
// padding-left: 15px;
|
|
|
|
|
}
|
|
|
|
|
.screen {
|
|
|
|
|
padding: 15px 0 26px 28px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.task-name {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
.task-name-text {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #6a6c6f;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
// margin-right: vw(10);
|
|
|
|
|
}
|
|
|
|
|
.task-input {
|
|
|
|
|
width: 251px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
::v-deep .el-input {
|
|
|
|
|
width: 251px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input__inner {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
// color: #B1B6BF;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.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;
|
|
|
|
|
// line-height: 50px;
|
|
|
|
|
// margin-right: vw(10);
|
|
|
|
|
}
|
|
|
|
|
.interval-select {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border: 1px solid #dbe0e8;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
.star-time,
|
|
|
|
|
.end-time {
|
|
|
|
|
position: relative;
|
|
|
|
|
.data_icon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
right: 17px;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
color: #c0c4cc;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input__prefix {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input {
|
|
|
|
|
width: 243px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input__inner {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
// color: #B1B6BF;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
border: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.symbol {
|
|
|
|
|
background: rgba(219, 224, 232, 0.5);
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #292f38;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
