Skip to content

A
agcs2.0-web
Commit 68dc061f authored by miaojiale's avatar miaojiale
Browse files
Options

开发随访查询

parent 44fcec04
Hide whitespace changes
Inline Side-by-side
Showing with 822 additions and 63 deletions
src/components/CustomTable/index.vue 0 → 100644
View file @ 68dc061f
<template>
<div id="customTable">
<Table
:columns="tableHeader"
:height="600"
:data="tableData"
:loading="loading"
></Table>
<div style="margin: 10px">
<Page
:total="page.total"
:current="page.current"
show-elevator
:page-size="page.size"
show-sizer
show-total
class="fr"
@on-change="changePage"
@on-page-size-change="changePageSize"
></Page>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex"
export default {
props: {
tableHeader: {
type: Array,
default: () => [],
},
tableData: {
type: Array,
default: () => [],
},
page: {
type: Object,
default: () => {},
},
},
data() {
return {
loading: false,
fontSize: ["12px", "14px", "16px"],
}
},
computed: {
...mapGetters({
fontIndex: "table/fontIndex",
}),
},
watch: {
fontIndex: {
handler(v) {
this.$nextTick(() => {
document.querySelector(".ivu-table").style.fontSize = this.fontSize[
this.fontIndex
]
})
},
immediate: true,
deep: true,
},
},
mounted() {},
methods: {
changePage(v) {
this.loading = true
// this.current = v
let obj = {
type: "current",
value: v,
}
this.$emit("changePage", obj)
},
changePageSize(v) {
let obj = {
type: "size",
value: v,
}
this.$emit("changePage", obj)
},
},
}
</script>
<style lang="scss" scoped>
#customTable {
margin-top: 20px;
width: 100%;
// background: pink;
flex: 1;
}
::v-deep {
.ivu-table-wrapper {
border-color: #eff0f3;
.ivu-table-header,
.ivu-table-fixed-header {
thead {
height: 60px;
background: #f6f6f6;
}
}
}
.ivu-page-item-active {
background: #1890ff;
a {
color: #fff;
}
}
.ivu-page-options {
// display: flex;
.ivu-select-selection {
border-radius: 6px;
border: 1px solid #d9d9d9;
}
}
.ivu-page-options-elevator {
// display: flex;
input {
width: 50px;
}
}
}
</style>
src/config/permission.js
View file @ 68dc061f
...@@ -28,9 +28,8 @@ router.beforeResolve(async (to, from, next) => { ...@@ -28,9 +28,8 @@ router.beforeResolve(async (to, from, next) => {
if (!loginInterception) hasToken = true if (!loginInterception) hasToken = true
if (hasToken) { if (hasToken) {
if (to.path === "/home") { if (to.path === "/home") {
next({ next()
path: "/", // { path: "/" }
})
if (progressBar) VabProgress.done() if (progressBar) VabProgress.done()
} else if (routesWhiteList.indexOf(to.path) !== -1) { } else if (routesWhiteList.indexOf(to.path) !== -1) {
next() next()
...@@ -49,6 +48,7 @@ router.beforeResolve(async (to, from, next) => { ...@@ -49,6 +48,7 @@ router.beforeResolve(async (to, from, next) => {
accessRoutes = await store.dispatch("routes/setAllRoutes", menulist) accessRoutes = await store.dispatch("routes/setAllRoutes", menulist)
} }
router.addRoutes(accessRoutes) router.addRoutes(accessRoutes)
console.log(router)
if (accessRoutes.length === 1) { if (accessRoutes.length === 1) {
Message({ Message({
message: "暂无菜单权限，请联系管理员", message: "暂无菜单权限，请联系管理员",
......
src/layouts/components/Avatar/index.vue
View file @ 68dc061f
...@@ -53,7 +53,7 @@ export default { ...@@ -53,7 +53,7 @@ export default {
async () => { async () => {
const fullPath = this.$route.fullPath const fullPath = this.$route.fullPath
await this.$store.dispatch("user/logout") await this.$store.dispatch("user/logout")
this.$router.push(`/login?redirect=${fullPath}`) this.$router.push(`/home?redirect=${fullPath}`)
} }
) )
}, },
......
src/layouts/components/NavBar/index.vue
View file @ 68dc061f
...@@ -4,9 +4,40 @@ ...@@ -4,9 +4,40 @@
<vab-remix-icon class="logo" icon-class="logo" /> <vab-remix-icon class="logo" icon-class="logo" />
<span class="hidden-xs-only">无症状人群胃癌筛查随访数据中心</span> <span class="hidden-xs-only">无症状人群胃癌筛查随访数据中心</span>
</div> </div>
<div class="right-panel"> <div class="userInfo">
<error-log></error-log> <error-log></error-log>
<avatar></avatar> <!-- <avatar></avatar> -->
<div class="fontSelect">
<div
v-for="(item, index) in fontList"
:key="index"
:class="['font', index == fontIndex ? 'active' : '']"
@click="changeFont(index)"
>
<div class="label">
{{ item.label }}
</div>
</div>
</div>
<div
v-if="[0, 1, 2].includes(curSelectedIndex)"
class="community"
@click="openModalFlag"
>
<img src="~@/assets/img/DataCenter/shift.png" alt="" />
{{ screeningList[curSelectedIndex].title }}
</div>
<div class="user">
<img src="~@/assets/img/DataCenter/user.png" alt="" />
<avatar></avatar>
</div>
<Badge :count="messageCount" :class-name="'badge'">
<div class="user">
<img src="~@/assets/img/DataCenter/message.png" alt="" />
消息
</div>
</Badge>
</div> </div>
</div> </div>
</template> </template>
...@@ -31,10 +62,37 @@ export default { ...@@ -31,10 +62,37 @@ export default {
FullScreenBar, FullScreenBar,
ThemeBar, ThemeBar,
}, },
props: {
curSelectedIndex: {
type: Number,
default: -1,
},
},
data() { data() {
return { return {
pulse: false, pulse: false,
isDot: true, isDot: true,
messageCount: 10,
screeningList: [
{
title: "社区筛查",
src: require("@/assets/img/DataCenter/shequ.png"),
},
{
title: "医院筛查",
src: require("@/assets/img/DataCenter/yiyuan.png"),
},
{
title: "体检筛查",
src: require("@/assets/img/DataCenter/tijian.png"),
},
],
fontList: [
{ fontSize: "12px", label: "A-" },
{ fontSize: "14px", label: "A" },
{ fontSize: "16px", label: "A+" },
],
fontIndex: localStorage.getItem("fontIndex") || 1,
} }
}, },
computed: { computed: {
...@@ -46,6 +104,8 @@ export default { ...@@ -46,6 +104,8 @@ export default {
feedBackNumber: "user/feedBackNumber", feedBackNumber: "user/feedBackNumber",
}), }),
}, },
created() {},
mounted() {},
methods: { methods: {
handleCollapse() { handleCollapse() {
this.$store.dispatch("settings/changeCollapse") this.$store.dispatch("settings/changeCollapse")
...@@ -60,6 +120,14 @@ export default { ...@@ -60,6 +120,14 @@ export default {
this.pulse = false this.pulse = false
}, 1000) }, 1000)
}, },
openModalFlag() {
this.$emit("openModalFlag")
},
changeFont(i) {
this.fontIndex = i
this.$store.commit("table/setFontIndex", i)
localStorage.setItem("fontIndex", i)
},
}, },
} }
</script> </script>
...@@ -104,63 +172,121 @@ export default { ...@@ -104,63 +172,121 @@ export default {
} }
} }
} }
.userInfo {
.right-panel {
display: flex; display: flex;
align-content: center;
align-items: center; align-items: center;
justify-content: flex-end; padding-right: 40px;
height: 74px; .fontSelect {
display: flex;
::v-deep { margin-right: 20px;
.user-avatar { .font {
margin-top: 2px; width: 40px;
margin-right: 5px; height: 40px;
font-weight: 600; background: #4e68ff;
cursor: pointer; border-radius: 4px;
} border: 1px solid #ffffff;
text-align: center;
.user-name { line-height: 40px;
position: relative;
margin-right: 35px;
margin-left: 5px;
font-weight: 600;
cursor: pointer;
}
.user-name + i {
position: absolute;
top: 4px;
right: 15px;
}
svg {
width: 1em;
height: 1em;
margin-right: 20px;
font-size: $base-font-size-big;
color: $base-color-gray;
cursor: pointer; cursor: pointer;
fill: $base-color-gray; margin-left: 20px;
} }
.active {
button { box-sizing: border-box;
svg { background: #ffffff;
margin-right: 0; height: 40px;
color: $base-color-white; color: #4e68ff;
cursor: pointer; padding: 1px;
fill: $base-color-white; .label {
height: 36px;
border: 1px solid #4e68ff;
} }
} }
}
.el-badge { .community {
margin-right: 20px; width: 106px;
padding: 0 5px; height: 30px;
svg { background: rgba(255, 255, 255, 0.1);
margin-right: 0px; color: #fff;
} display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
img {
margin-right: 4px;
width: 18px;
height: 18px;
}
}
.user {
margin-left: 40px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: #fff;
img {
margin-right: 4px;
width: 18px;
height: 18px;
} }
} }
} }
// .right-panel {
// display: flex;
// align-content: center;
// align-items: center;
// justify-content: flex-end;
// height: 74px;
// ::v-deep {
// .user-avatar {
// margin-top: 2px;
// margin-right: 5px;
// font-weight: 600;
// cursor: pointer;
// }
// .user-name {
// position: relative;
// margin-right: 35px;
// margin-left: 5px;
// font-weight: 600;
// cursor: pointer;
// }
// .user-name + i {
// position: absolute;
// top: 4px;
// right: 15px;
// }
// svg {
// width: 1em;
// height: 1em;
// margin-right: 20px;
// font-size: $base-font-size-big;
// color: $base-color-gray;
// cursor: pointer;
// fill: $base-color-gray;
// }
// button {
// svg {
// margin-right: 0;
// color: $base-color-white;
// cursor: pointer;
// fill: $base-color-white;
// }
// }
// .el-badge {
// margin-right: 20px;
// padding: 0 5px;
// svg {
// margin-right: 0px;
// }
// }
// }
// }
} }
</style> </style>
src/layouts/index.vue
View file @ 68dc061f
...@@ -32,7 +32,10 @@ ...@@ -32,7 +32,10 @@
}" }"
> >
<div :class="header === 'fixed' ? 'fixed-header' : ''"> <div :class="header === 'fixed' ? 'fixed-header' : ''">
<nav-bar></nav-bar> <nav-bar
:cur-selected-index="curSelectedIndex"
@openModalFlag="openModalFlag"
></nav-bar>
</div> </div>
<side-bar></side-bar> <side-bar></side-bar>
<div class="vab-main" :class="collapse ? 'is-collapse-main' : ''"> <div class="vab-main" :class="collapse ? 'is-collapse-main' : ''">
...@@ -40,6 +43,51 @@ ...@@ -40,6 +43,51 @@
</div> </div>
</div> </div>
<back-to-top transition-name="fade"></back-to-top> <back-to-top transition-name="fade"></back-to-top>
<Modal
v-model="modalFlag"
:mask-closable="false"
:closable="false"
footer-hide
width="70%"
:styles="{ minWidth: '1008px' }"
>
<div class="modalContent">
<div class="title">请选择您的筛查填报场景</div>
<ul class="list">
<li
v-for="(item, index) in screeningList"
:key="index"
@click="selectedIndex = index"
>
<div class="screeningItem">
<div class="circle">
<img
v-if="selectedIndex !== index"
src="~@/assets/img/DataCenter/circle.png"
alt=""
srcset=""
/>
<img
v-if="selectedIndex == index"
src="~@/assets/img/DataCenter/selected.png"
alt=""
srcset=""
/>
</div>
<div class="itemTitle">{{ item.title }}</div>
</div>
<div class="ItemIamge">
<img :src="item.src" alt="" />
</div>
</li>
</ul>
<div class="submit">
<Button type="primary" class="btn" @click="setSelectedIndex"
>保存</Button
>
</div>
</div>
</Modal>
</div> </div>
</template> </template>
...@@ -68,7 +116,25 @@ export default { ...@@ -68,7 +116,25 @@ export default {
}, },
mixins: [Media], mixins: [Media],
data() { data() {
return {} return {
modalFlag: false,
screeningList: [
{
title: "社区筛查",
src: require("@/assets/img/DataCenter/shequ.png"),
},
{
title: "医院筛查",
src: require("@/assets/img/DataCenter/yiyuan.png"),
},
{
title: "体检筛查",
src: require("@/assets/img/DataCenter/tijian.png"),
},
],
selectedIndex: 0,
curSelectedIndex: "",
}
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
...@@ -84,7 +150,18 @@ export default { ...@@ -84,7 +150,18 @@ export default {
} }
}, },
}, },
created() {
this.selectedIndex = localStorage.getItem("selectedIndex") || ""
this.curSelectedIndex = this.selectedIndex ? this.selectedIndex - 0 : -1
},
mounted() { mounted() {
if (!this.selectedIndex) {
this.modalFlag = true
this.selectedIndex = 0
} else {
this.selectedIndex = this.selectedIndex - 0
this.curSelectedIndex = this.selectedIndex ? this.selectedIndex : -1
}
this.$nextTick(() => { this.$nextTick(() => {
window.addEventListener( window.addEventListener(
"storage", "storage",
...@@ -100,6 +177,15 @@ export default { ...@@ -100,6 +177,15 @@ export default {
...mapActions({ ...mapActions({
handleFoldSideBar: "settings/foldSideBar", handleFoldSideBar: "settings/foldSideBar",
}), }),
setSelectedIndex() {
console.log(this.selectedIndex)
this.curSelectedIndex = this.selectedIndex
localStorage.setItem("selectedIndex", this.selectedIndex)
this.modalFlag = false
},
openModalFlag() {
this.modalFlag = true
},
}, },
} }
</script> </script>
...@@ -238,4 +324,61 @@ export default { ...@@ -238,4 +324,61 @@ export default {
height: calc(100vh - 90px); height: calc(100vh - 90px);
} }
} }
.modalContent {
padding: 60px;
.title {
text-align: center;
height: 30px;
font-size: 24px;
font-family: AlibabaPuHuiTiM;
color: #333333;
line-height: 30px;
margin-bottom: 60px;
}
.list {
display: flex;
justify-content: space-between;
li {
cursor: pointer;
}
.screeningItem {
display: flex;
.circle {
width: 26px;
height: 26px;
margin-right: 12px;
img {
width: 100%;
height: 100%;
}
}
.itemTitle {
height: 24px;
font-size: 18px;
font-family: AlibabaPuHuiTiM;
color: #333333;
font-weight: bold;
line-height: 24px;
}
}
.ItemIamge {
width: 268px;
height: 180px;
margin-top: 14px;
img {
width: 100%;
height: 100%;
}
}
}
.submit {
margin-top: 60px;
text-align: center;
.btn {
width: 100px;
height: 32px;
}
}
}
</style> </style>
src/router/index.js
View file @ 68dc061f
...@@ -9,7 +9,7 @@ export const constantRoutes = [ ...@@ -9,7 +9,7 @@ export const constantRoutes = [
{ {
path: "/home", path: "/home",
name: "Home", name: "Home",
redirect: "/home", // redirect: "/home",
component: layout, component: layout,
children: [ children: [
{ {
......
src/store/modules/table.js 0 → 100644
View file @ 68dc061f
const state = {
fontIndex: localStorage.getItem("fontIndex") || 1,
}
const getters = {
fontIndex: (state) => state.fontIndex,
}
const mutations = {
setFontIndex(state, fontIndex) {
state.fontIndex = fontIndex
},
}
const actions = {}
export default {
state,
getters,
mutations,
actions,
}
src/views/dataoverview/index.vue
View file @ 68dc061f
<template> <template>
<div>数据概览</div> <div class="dataCenter">
<div class="header">
<div
v-for="(item, index) in headList"
:key="index"
:class="['btn', selectedIndex == index ? 'active' : '']"
@click="setSelectedIndex(index)"
>
{{ item }}
</div>
</div>
<custom-table
ref="customTable"
:table-header="tableHeader"
:table-data="tableData"
:page="page"
@changePage="changePage"
></custom-table>
</div>
</template> </template>
<script> <script>
import CustomTable from "@/components/CustomTable"
export default { export default {
// 数据概览
name: "",
components: {
CustomTable,
},
data() { data() {
return {} return {
selectedIndex: sessionStorage.getItem("homeSelectedIndex") - 0 || 0,
headList: ["社区筛查", "医院筛查", "体检筛查"],
tableHeader: [
{
title: "医联体",
minWidth: 40,
key: "name",
align: "center",
},
{
title: "累计上报量",
minWidth: 60,
key: "1",
align: "center",
},
{
title: "最近一季度上报量",
minWidth: 96,
key: "2",
align: "center",
},
{
title: "累计审核合格量",
minWidth: 84,
key: "3",
align: "center",
},
{
title: "高风险",
minWidth: 30,
key: "4",
align: "center",
},
{
title: "中风险",
minWidth: 30,
key: "5",
align: "center",
},
{
title: "低风险",
minWidth: 30,
key: "6",
align: "center",
},
{
title: "胃癌",
minWidth: 30,
key: "7",
align: "center",
},
{
title: "早期胃癌",
minWidth: 40,
key: "8",
align: "center",
},
{
title: "食道癌",
minWidth: 30,
key: "9",
align: "center",
},
],
tableData: [
{
name: "1",
1: 2,
},
],
page: {
current: 1,
size: 10,
total: 20,
},
}
}, },
methods: {},
mounted() {},
watch: {}, watch: {},
mounted() {},
methods: {
setSelectedIndex(i) {
console.log(this.selectedIndex)
this.selectedIndex = i
sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
},
changePage(v) {
this.page[v.type] = v.value
console.log(this.page)
this.$refs.customTable.loading = false
},
},
} }
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.dataCenter {
padding: 24px;
height: 100%;
display: flex;
flex-direction: column;
.header {
display: flex;
.btn {
cursor: pointer;
width: 112px;
height: 48px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #dddddd;
font-size: 16px;
font-family: AlibabaPuHuiTiM;
color: #000;
text-align: center;
line-height: 48px;
margin-right: 24px;
}
.active {
background: #4e68ff;
border: none;
color: #ffffff;
}
}
}
</style>
src/views/followupquery/index.vue 0 → 100644
View file @ 68dc061f
<template>
<div class="screeningSearch">
<div class="top">
<div class="keyword">
<div class="label">关键词：</div>
<Input
v-model="keyword"
placeholder="请输入医联体/姓名/身份证"
clearable
style="width: 224px"
/>
<Button class="btn">搜索</Button>
</div>
<div
class="tobeModified"
:style="{ backgroundColor: modifiedFlag ? '#4E68FF' : '#fff' }"
@click="changeModified"
>
<Icon
:style="{ color: modifiedFlag ? '#fff' : '#d9d9d9' }"
type="md-checkmark"
class="check"
/>
<span :style="{ color: modifiedFlag ? '#fff' : '#000' }"
>待修改（{{ tobeModified }}）</span
>
</div>
</div>
<div class="bot">
<custom-table
ref="customTable"
:table-header="tableHeader"
:table-data="tableData"
:page="page"
@changePage="changePage"
></custom-table>
</div>
</div>
</template>
<script>
import CustomTable from "@/components/CustomTable"
export default {
components: {
CustomTable,
},
data() {
return {
keyword: "",
modifiedFlag: false,
tobeModified: 20,
tableHeader: [
{
title: "医联体",
key: "name",
align: "center",
width: 100,
},
{
title: "姓名",
width: 100,
key: "1",
align: "center",
},
{
title: "性别",
width: 100,
key: "2",
align: "center",
},
{
title: "身份证",
width: 160,
key: "3",
align: "center",
},
{
title: "年龄",
width: 100,
align: "center",
},
{
title: "筛查时间",
width: 100,
key: "5",
align: "center",
},
{
title: "风险评估结果",
width: 180,
key: "6",
align: "center",
},
{
title: "上次随访时间",
width: 180,
key: "7",
align: "center",
},
{
title: "筛查审核状态",
width: 180,
key: "8",
align: "center",
},
{
title: "操作",
width: 140,
key: "action",
fixed: "right",
ellipsis: true,
align: "center",
render: (h, params) => {
return h(
"a",
{
on: {
click: () => {
console.log(params.row)
},
},
},
"修改"
)
},
},
],
tableData: [
{
name: "1",
1: 2,
},
],
page: {
current: 1,
size: 10,
total: 20,
},
}
},
watch: {},
mounted() {},
methods: {
changeModified() {
this.modifiedFlag = !this.modifiedFlag
},
setSelectedIndex(i) {
console.log(this.selectedIndex)
this.selectedIndex = i
sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
},
changePage(v) {
this.page[v.type] = v.value
console.log(this.page)
this.$refs.customTable.loading = false
},
},
}
</script>
<style lang="scss" scoped>
.screeningSearch {
.top {
width: 100%;
height: 72px;
padding: 0 116px 0 44px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #f6f6f6;
.keyword {
display: flex;
align-items: center;
.btn {
width: 80px;
height: 32px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #4e68ff;
font-size: 14px;
color: #4e68ff;
margin-left: 40px;
}
}
.tobeModified {
// width: 134px;
height: 32px;
background: #ffffff;
border-radius: 4px;
padding: 16px 8px;
border: 1px solid #d9d9d9;
display: flex;
align-items: center;
cursor: pointer;
.check {
font-size: 18px;
margin-right: 8px;
}
span {
font-size: 16px;
font-family: AlibabaPuHuiTiR;
color: #333333;
}
}
}
.bot {
padding: 0 24px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment