Lvtianfang
杜函宇 2 years ago
parent a6a3d7c679
commit 0381821f8e

@ -61,6 +61,7 @@ export const constantRoutes = [
component: () => import("@/views/error/401"),
hidden: true,
},
{
path: '',
component: () => import("@/views/index"),
@ -74,67 +75,103 @@ export const constantRoutes = [
component: () => import("@/views/administrative/index"),
meta: { title: "行政审批", icon: "netWork" },
},
]
},
{
path: '/A',
component: () => import("@/views/index"),
redirect: "enterpriseMsg",
isDiy: true,
children: [
{
path: 'enterpriseMsg',
path: '/enterpriseMsg',
name: "企业档案",
icon: require("@/assets/images/tree4.svg"),
component: () => import("@/views/enterpriseMsg/index"),
meta: { title: "企业档案", icon: "netWork" },
},
]
},
{
path: '/B',
component: () => import("@/views/index"),
redirect: "logout",
isDiy: true,
children: [
{
path: "logout",
path: "/logout",
name: "依法注销",
icon: require("@/assets/images/tree4.svg"),
component: () => import("@/views/logout/index"),
meta: { title: "依法注销", icon: "netWork" },
},
]
},
{
path: '/productsMsg',
component: () => import("@/views/index"),
redirect: "drugArchives",
isDiy: true,
children: [
{
path: "drugArchives",
name: "药品档案",
name: "产品档案",
icon: require("@/assets/images/tree4.svg"),
component: () => import("@/views/productsMsg/components/drugArchives.vue"),
meta: { title: "药品档案", icon: "netWork" },
},
{
path: "cosmeticsArchives",
name: "化妆品档案",
icon: require("@/assets/images/tree4.svg"),
component: () => import("@/views/productsMsg/components/cosmeticsArchives.vue"),
meta: { title: "化妆品档案", icon: "netWork" },
},
{
path: "health",
name: "医疗器械档案",
icon: require("@/assets/images/tree4.svg"),
component: () => import("@/views/productsMsg/components/health.vue"),
meta: { title: "医疗器械档案", icon: "netWork" },
},
component: () => import("@/views/productsMsg/index"),
meta: { title: "产品档案", icon: "netWork" },
}
]
},
// {
// path: '',
// component: () => import("@/views/index"),
// redirect: "/administrative",
// isDiy: true,
// children: [
// {
// path: "/administrative",
// name: "行政审批",
// icon: require("@/assets/images/tree4.svg"),
// component: () => import("@/views/administrative/index"),
// meta: { title: "行政审批", icon: "netWork" },
// },
// ]
// },
// {
// path: '/A',
// component: () => import("@/views/index"),
// redirect: "enterpriseMsg",
// isDiy: true,
// children: [
// {
// path: 'enterpriseMsg',
// name: "企业档案",
// icon: require("@/assets/images/tree4.svg"),
// component: () => import("@/views/enterpriseMsg/index"),
// meta: { title: "企业档案", icon: "netWork" },
// },
// ]
// },
// {
// path: '/B',
// component: () => import("@/views/index"),
// redirect: "logout",
// isDiy: true,
// children: [
// {
// path: "logout",
// name: "依法注销",
// icon: require("@/assets/images/tree4.svg"),
// component: () => import("@/views/logout/index"),
// meta: { title: "依法注销", icon: "netWork" },
// },
// ]
// },
// {
// path: '/productsMsg',
// component: () => import("@/views/index"),
// redirect: "drugArchives",
// isDiy: true,
// children: [
// {
// path: "drugArchives",
// name: "药品档案",
// icon: require("@/assets/images/tree4.svg"),
// component: () => import("@/views/productsMsg/components/drugArchives.vue"),
// meta: { title: "药品档案", icon: "netWork" },
// },
// {
// path: "cosmeticsArchives",
// name: "化妆品档案",
// icon: require("@/assets/images/tree4.svg"),
// component: () => import("@/views/productsMsg/components/cosmeticsArchives.vue"),
// meta: { title: "化妆品档案", icon: "netWork" },
// },
// {
// path: "health",
// name: "医疗器械档案",
// icon: require("@/assets/images/tree4.svg"),
// component: () => import("@/views/productsMsg/components/health.vue"),
// meta: { title: "医疗器械档案", icon: "netWork" },
// },
// ]
// },
//可以按着若依的思路来写,把菜单全部都设置成一级路由,然后有下拉选择框的去进行区别判断设置成二级子路由
];

@ -1,6 +1,21 @@
<template>
<div class="container">
<div class="left">
<div class="right-content">
<div class="name-content">
<div class="drug-name">
<span class="name">药品通用名称 : </span>
<span class="tag">健母宝经典修护精华液</span>
<div class="info-Tag">
<div>10年老企</div>
<div>高风险企业</div>
</div>
</div>
<div class="close-icon">
<i class="el-icon-close" size="50"></i>
</div>
</div>
</div>
<!-- <div class="left">
<div class="left-grids">
<gridsTitle title="检查人员组成" />
<div class="main">
@ -45,7 +60,7 @@
<LevelPie />
</div>
</div>
</div>
</div> -->
</div>
</template>
@ -86,6 +101,7 @@ export default {
display: flex;
align-items: center;
background: #f2f2f2;
padding: 10px;
& > div {
flex: 1;
height: 100%;
@ -119,5 +135,59 @@ export default {
.main {
height: calc(100% - 40px);
}
.right-content {
background-color: #fff;
.name-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #F2F3F5;
.drug-name {
display: flex;
align-items: center;
font-size: 18px;
font-family: Source Han Sans SC-Bold, Source Han Sans SC;
font-weight: bold;
color: #323233;
.name {
}
.tag {
color: #1349C5;
margin-left: 4px;
}
.info-Tag {
// margin-top: vh(9);
margin-left: 12px;
display: flex;
align-items: center;
font-size: 12px;
font-family: Source Han Sans CN;
font-weight: 400;
div {
padding: 4px 11px;
margin-right: 10px;
background: #DDEBFA;
border-radius: 4px;
color: #1E80EB;
&:last-child {
margin-right: 0;
background: #FDEBEB;
border-radius: 4px;
color: #E42424;
}
}
}
}
.close-icon {
cursor: pointer;
i {
font-size: 25px;
}
}
}
}
}
</style>

@ -88,7 +88,7 @@ export default {
meta: { title: "行政审批", icon: "netWork" },
},
{
path: "/A/enterpriseMsg",
path: "/enterpriseMsg",
name: "企业档案",
icon: require("@/assets/images/tree4.svg"),
component: () => import("@/views/enterpriseMsg/index"),
@ -101,35 +101,35 @@ export default {
component: () => import("@/views/index"),
redirect: "drugArchives",
isDiy: true,
children: [
{
path: "/productsMsg/drugArchives",
name: "药品档案",
icon: require("@/assets/images/tree4.svg"),
component: () =>
import("@/views/productsMsg/components/drugArchives.vue"),
meta: { title: "药品档案", icon: "netWork" },
},
{
path: "/productsMsg/cosmeticsArchives",
name: "化妆品档案",
icon: require("@/assets/images/tree4.svg"),
component: () =>
import("@/views/productsMsg/components/cosmeticsArchives.vue"),
meta: { title: "化妆品档案", icon: "netWork" },
},
{
path: "/productsMsg/health",
name: "医疗器械档案",
icon: require("@/assets/images/tree4.svg"),
component: () =>
import("@/views/productsMsg/components/health.vue"),
meta: { title: "医疗器械档案", icon: "netWork" },
},
],
// children: [
// {
// path: "/productsMsg/drugArchives",
// name: "",
// icon: require("@/assets/images/tree4.svg"),
// component: () =>
// import("@/views/productsMsg/components/drugArchives.vue"),
// meta: { title: "", icon: "netWork" },
// },
// {
// path: "/productsMsg/cosmeticsArchives",
// name: "",
// icon: require("@/assets/images/tree4.svg"),
// component: () =>
// import("@/views/productsMsg/components/cosmeticsArchives.vue"),
// meta: { title: "", icon: "netWork" },
// },
// {
// path: "/productsMsg/health",
// name: "",
// icon: require("@/assets/images/tree4.svg"),
// component: () =>
// import("@/views/productsMsg/components/health.vue"),
// meta: { title: "", icon: "netWork" },
// },
// ],
},
{
path: "/B/logout",
path: "/logout",
name: "依法注销",
icon: require("@/assets/images/tree4.svg"),
component: () => import("@/views/logout/index"),

@ -1,3 +1,332 @@
<template>
<div> 3333</div>
</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>
Loading…
Cancel
Save