开发随访查询

src/components/CustomTable/index.vue

+<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

@@ -28,9 +28,8 @@ router.beforeResolve(async (to, from, next) => {
   if (!loginInterception) hasToken = true
   if (hasToken) {
     if (to.path === "/home") {
-      next({
-        path: "/",
-      })
+      next()
+      // { path: "/" }
       if (progressBar) VabProgress.done()
     } else if (routesWhiteList.indexOf(to.path) !== -1) {
       next()
@@ -49,6 +48,7 @@ router.beforeResolve(async (to, from, next) => {
             accessRoutes = await store.dispatch("routes/setAllRoutes", menulist)
           }
           router.addRoutes(accessRoutes)
+          console.log(router)
           if (accessRoutes.length === 1) {
             Message({
               message: "暂无菜单权限，请联系管理员",

src/layouts/components/Avatar/index.vue

@@ -53,7 +53,7 @@ export default {
         async () => {
           const fullPath = this.$route.fullPath
           await this.$store.dispatch("user/logout")
-          this.$router.push(`/login?redirect=${fullPath}`)
+          this.$router.push(`/home?redirect=${fullPath}`)
         }
       )
     },

src/layouts/components/NavBar/index.vue

@@ -4,9 +4,40 @@
       <vab-remix-icon class="logo" icon-class="logo" />
       <span class="hidden-xs-only">无症状人群胃癌筛查随访数据中心</span>
     </div>
-    <div class="right-panel">
+    <div class="userInfo">
       <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>
 </template>
@@ -31,10 +62,37 @@ export default {
     FullScreenBar,
     ThemeBar,
   },
+  props: {
+    curSelectedIndex: {
+      type: Number,
+      default: -1,
+    },
+  },
   data() {
     return {
       pulse: false,
       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: {
@@ -46,6 +104,8 @@ export default {
       feedBackNumber: "user/feedBackNumber",
     }),
   },
+  created() {},
+  mounted() {},
   methods: {
     handleCollapse() {
       this.$store.dispatch("settings/changeCollapse")
@@ -60,6 +120,14 @@ export default {
         this.pulse = false
       }, 1000)
     },
+    openModalFlag() {
+      this.$emit("openModalFlag")
+    },
+    changeFont(i) {
+      this.fontIndex = i
+      this.$store.commit("table/setFontIndex", i)
+      localStorage.setItem("fontIndex", i)
+    },
   },
 }
 </script>
@@ -104,63 +172,121 @@ export default {
       }
     }
   }
-
-  .right-panel {
+  .userInfo {
     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;
+    padding-right: 40px;
+    .fontSelect {
+      display: flex;
+      margin-right: 20px;
+      .font {
+        width: 40px;
+        height: 40px;
+        background: #4e68ff;
+        border-radius: 4px;
+        border: 1px solid #ffffff;
+        text-align: center;
+        line-height: 40px;
         cursor: pointer;
-        fill: $base-color-gray;
+        margin-left: 20px;
       }
-
-      button {
-        svg {
-          margin-right: 0;
-          color: $base-color-white;
-          cursor: pointer;
-          fill: $base-color-white;
+      .active {
+        box-sizing: border-box;
+        background: #ffffff;
+        height: 40px;
+        color: #4e68ff;
+        padding: 1px;
+        .label {
+          height: 36px;
+          border: 1px solid #4e68ff;
         }
       }
-
-      .el-badge {
-        margin-right: 20px;
-        padding: 0 5px;
-        svg {
-          margin-right: 0px;
-        }
+    }
+    .community {
+      width: 106px;
+      height: 30px;
+      background: rgba(255, 255, 255, 0.1);
+      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>

src/layouts/index.vue

@@ -32,7 +32,10 @@
       }"
     >
       <div :class="header === 'fixed' ? 'fixed-header' : ''">
-        <nav-bar></nav-bar>
+        <nav-bar
+          :cur-selected-index="curSelectedIndex"
+          @openModalFlag="openModalFlag"
+        ></nav-bar>
       </div>
       <side-bar></side-bar>
       <div class="vab-main" :class="collapse ? 'is-collapse-main' : ''">
@@ -40,6 +43,51 @@
       </div>
     </div>
     <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>
 </template>
 
@@ -68,7 +116,25 @@ export default {
   },
   mixins: [Media],
   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: {
     ...mapGetters({
@@ -84,7 +150,18 @@ export default {
       }
     },
   },
+  created() {
+    this.selectedIndex = localStorage.getItem("selectedIndex") || ""
+    this.curSelectedIndex = this.selectedIndex ? this.selectedIndex - 0 : -1
+  },
   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(() => {
       window.addEventListener(
         "storage",
@@ -100,6 +177,15 @@ export default {
     ...mapActions({
       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>
@@ -238,4 +324,61 @@ export default {
     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>

src/router/index.js

@@ -9,7 +9,7 @@ export const constantRoutes = [
   {
     path: "/home",
     name: "Home",
-    redirect: "/home",
+    // redirect: "/home",
     component: layout,
     children: [
       {

src/store/modules/table.js

+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

 <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>
 <script>
+import CustomTable from "@/components/CustomTable"
 export default {
+  // 数据概览
+  name: "",
+  components: {
+    CustomTable,
+  },
   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: {},
+  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>
-<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

+<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>