From 5dc80d7e0d2d5074a41d8c84f9ba3c5e4ca577a8 Mon Sep 17 00:00:00 2001
From: miaojiale <1123971748@qq.com>
Date: Mon, 28 Nov 2022 15:26:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E5=8E=BB?=
 =?UTF-8?q?=E9=99=A4view-design,=E5=85=BC=E5=AE=B9=E4=B8=8D=E5=90=8C?=
 =?UTF-8?q?=E7=AA=97=E5=8F=A3=E6=AF=94=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |   1 -
 src/components/CustomTable/index.vue    | 127 -------------
 src/components/CustomsTable/index.vue   | 187 +++++++++++++++++++
 src/components/FormComponents/index.vue |   9 +-
 src/components/layout/index.vue         | 156 ++++++++--------
 src/layouts/components/NavBar/index.vue |  62 +------
 src/layouts/index.vue                   |  26 +--
 src/main.js                             |   3 -
 src/views/Home/index.vue                |   8 +-
 src/views/dataoverview/index.vue        | 108 +++++------
 src/views/followupquery/index.vue       | 236 ++++++++++++++----------
 src/views/followupresearch/index.vue    | 158 ++++++----------
 yarn.lock                               |  61 ------
 13 files changed, 540 insertions(+), 602 deletions(-)
 delete mode 100644 src/components/CustomTable/index.vue
 create mode 100644 src/components/CustomsTable/index.vue

diff --git a/package.json b/package.json
index 5b6ea94..9708799 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
     "qrcodejs2": "^0.0.2",
     "qs": "^6.9.4",
     "screenfull": "^5.0.2",
-    "view-design": "^4.7.0",
     "vue": "^2.6.11",
     "vue-count-to": "^1.0.13",
     "vue-router": "^3.3.4",
diff --git a/src/components/CustomTable/index.vue b/src/components/CustomTable/index.vue
deleted file mode 100644
index b6ed112..0000000
--- a/src/components/CustomTable/index.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<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 {
-  th .ivu-table-cell {
-    white-space: nowrap;
-  }
-  .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>
diff --git a/src/components/CustomsTable/index.vue b/src/components/CustomsTable/index.vue
new file mode 100644
index 0000000..1b5638a
--- /dev/null
+++ b/src/components/CustomsTable/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <el-row class="el-table-self">
+    <el-table
+      :max-height="maxHeight || maxTableHeight"
+      :height="tableHeight"
+      ref="selftab"
+      v-loading="listLoading"
+      :data="tableData"
+      :show-overflow-tooltip="true"
+      :highlight-current-row="highLight"
+      :header-row-class-name="headerClass"
+      style="width: 100%"
+    >
+      <template v-for="(column, index) in columns">
+        <template v-if="!column.type && !column.operType">
+          <el-table-column
+            :key="column.value"
+            :show-overflow-tooltip="true"
+            :fixed="column.fixed"
+            :prop="column.value"
+            :label="column.label"
+            :width="column.width"
+            :min-width="column.minWidth"
+            align="center"
+            :sortable="column.sortable"
+            :formatter="column.formatter"
+            :class-name="column.className"
+            :label-class-name="column.labelClassName"
+          >
+            <!-- 表头插槽 -->
+            <template slot="header" slot-scope="scope">
+              <span :style="{ fontSize: fontSize[fontIndex] }">{{
+                column.label
+              }}</span>
+            </template>
+            <!-- 表内容插槽 -->
+            <template slot-scope="scope">
+              <span :style="{ fontSize: fontSize[fontIndex] }">
+                {{ scope.row[column.value] }}</span
+              >
+            </template>
+          </el-table-column>
+        </template>
+        <template v-else>
+          <el-table-column
+            :key="index"
+            :fixed="column.fixed"
+            :prop="column.value"
+            :label="column.label"
+            :sortable="column.sortable"
+            :width="column.width"
+            :min-width="column.minWidth"
+            align="center"
+          >
+            <!-- 表头插槽 -->
+            <template slot="header" slot-scope="scope">
+              <span :style="{ fontSize: fontSize[fontIndex] }">{{
+                column.label
+              }}</span>
+            </template>
+            <!-- 表内容插槽 -->
+            <template slot-scope="scope">
+              <!-- 按钮 -->
+              <template
+                v-if="column.type === 'button' || column.operType === 'button'"
+              >
+                <!-- 按钮数组 -->
+                <template v-for="(op, opIndex) in column.operations">
+                  <el-button
+                    :key="opIndex"
+                    :disabled="
+                      op.formatter ? op.formatter(scope.row).disabled : false
+                    "
+                    :style="{ fontSize: fontSize[fontIndex] }"
+                    :type="
+                      op.formatter
+                        ? op.formatter(scope.row).type
+                        : op.type || ''
+                    "
+                    :icon="op.icon"
+                    @click="op.func(scope.row, scope.$index)"
+                  >
+                    {{
+                      op.formatter
+                        ? op.formatter(scope.row).label
+                        : op.label
+                        ? op.label
+                        : scope.row[column.value]
+                    }}
+                  </el-button>
+                </template>
+              </template>
+              <!-- html -->
+              <template v-if="column.type === 'html'">
+                <div v-html="scope.row[column.value]" class="highlight"></div>
+              </template>
+            </template>
+          </el-table-column>
+        </template>
+      </template>
+    </el-table>
+
+    <!-- 分页 -->
+    <div v-if="pageSize && totalCounts > 0" class="pagination-footer">
+      <!-- <span class="description">{{ description }}</span> -->
+      <el-pagination
+        background
+        :current-page="currentPage"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalCounts"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      ></el-pagination>
+    </div>
+  </el-row>
+</template>
+<script>
+import resize from "../TabComponents/resize.js"
+import { mapGetters } from "vuex"
+export default {
+  props: {
+    tableHeight: Number, // 表格的高度
+    maxHeight: Number, // 表格的最大高度
+    listLoading: Boolean, // table 加载层
+    pageSizes: Array, // 决定每页显示的条数[10,15,20,25]
+    pageSize: Number,
+    totalCount: [Number, String], // 表格数据总数
+    currentPage: { type: Number, default: 1 },
+    highLight: { type: Boolean, default: true },
+    headerClass: { type: String, default: "default" }, // 头部背景色Class名称，默认default
+    columns: Array, // 表格列配置数据,{vlaue:对应数据对象中的属性，label：对应的是标题文字，fixed:列是否固定，width:列宽， sortable：是否可排序，formatter:列格式化， className：对应的是列的样式类名}
+    tableData: Array, // 表格数据
+  },
+  mixins: [resize],
+  data() {
+    return {
+      fontSize: ["12px", "14px", "16px"],
+    }
+  },
+  computed: {
+    ...mapGetters({
+      fontIndex: "table/fontIndex",
+    }),
+    totalCounts() {
+      return this.totalCount - 0
+    },
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    // 切换页面显示条数
+    handleSizeChange(val) {
+      this.$emit("pageSizeChange", val)
+    },
+    // 跳转页码
+    handleCurrentChange(val) {
+      this.$emit("currentPageChange", val)
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.el-table__empty-block {
+  position: relative;
+  min-height: 60px;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}
+
+.el-table__empty-text {
+  position: absolute;
+  left: 50%;
+  width: 110px;
+  height: 110px;
+  top: 50%;
+  line-height: 220px;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  color: #5e7382;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+</style>
diff --git a/src/components/FormComponents/index.vue b/src/components/FormComponents/index.vue
index 5cc4ab9..e54a896 100644
--- a/src/components/FormComponents/index.vue
+++ b/src/components/FormComponents/index.vue
@@ -206,11 +206,10 @@
             :style="{ backgroundColor: modifiedFlag ? '#4E68FF' : '#fff' }"
             @click="changeModified"
           >
-            <Icon
+            <i
               :style="{ color: modifiedFlag ? '#fff' : '#d9d9d9' }"
-              type="md-checkmark"
-              class="check"
-            />
+              class="el-icon-check"
+            ></i>
             <span :style="{ color: modifiedFlag ? '#fff' : '#000' }"
               >待修改（{{ btn.tobeModified }}）</span
             >
@@ -369,7 +368,7 @@ export default {
   display: flex;
   align-items: center;
   cursor: pointer;
-  .check {
+  .el-icon-check {
     font-size: 18px;
     margin-right: 8px;
   }
diff --git a/src/components/layout/index.vue b/src/components/layout/index.vue
index 9aa215f..2d26bd7 100644
--- a/src/components/layout/index.vue
+++ b/src/components/layout/index.vue
@@ -1,73 +1,79 @@
 <template>
   <div style="min-width: 1440px; overflow: overlay">
-    <Layout>
-      <Header class="layout-header">
-        <div class="logotitle">
-          <div class="leftLogo"></div>
-          <div class="rightText">
-            国家消化道早癌防治中心联盟 <br />早期胃癌筛查项目
-          </div>
+    <header class="layout-header">
+      <div class="logotitle">
+        <div class="leftLogo"></div>
+        <div class="rightText">
+          国家消化道早癌防治中心联盟 <br />早期胃癌筛查项目
         </div>
-        <div v-if="!allianceToken" class="login">
-          <div class="login_title text-center">
-            筛查随访数据库登录
-            <Form ref="form" :model="form" :rules="rules" inline>
-              <FormItem prop="username" label="登录名:">
-                <Input
-                  v-model="form.username"
-                  type="text"
-                  placeholder="请输入登录名"
-                >
-                </Input>
-              </FormItem>
-              <FormItem prop="password" label="密码:">
-                <Input
-                  v-model="form.password"
-                  type="password"
-                  placeholder="请输入密码"
-                >
-                </Input>
-              </FormItem>
-              <FormItem>
-                <Button
-                  type="primary"
-                  class="login_button"
-                  :loading="loading"
-                  @click="handleSubmit('form')"
-                  >登录</Button
-                >
-              </FormItem>
-            </Form>
-          </div>
-        </div>
-        <div v-if="allianceToken" class="userInfo">
-          <div class="white"></div>
-          <div class="text">欢迎，LIXid胡</div>
-          <div class="exit" @click="logout">退出</div>
-        </div>
-      </Header>
-      <div class="sider">
-        <Menu mode="horizontal" :active-name="currentRoute" class="siderMenu">
-          <MenuItem
-            v-for="(item, index) in menuList"
-            :key="index"
-            :name="item.route"
-            :to="item.route"
-            style="width: 10%; text-align: center; min-width: 120px"
+      </div>
+      <div v-if="!allianceToken" class="login">
+        <div class="login_title text-center">
+          筛查随访数据库登录
+          <el-form
+            ref="form"
+            label-position="top"
+            :model="form"
+            label-suffix=":"
+            label-width="100%"
+            :rules="rules"
           >
-            {{ item.name }}
-          </MenuItem>
-        </Menu>
+            <el-form-item prop="username" label="登录名">
+              <el-input
+                v-model="form.username"
+                placeholder="请输入登录名"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="password" label="密码">
+              <el-input
+                v-model="form.password"
+                type="password"
+                placeholder="请输入密码"
+              ></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                type="primary"
+                class="login_button"
+                :loading="loading"
+                @click="handleSubmit('form')"
+                >登录</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div v-if="allianceToken" class="userInfo">
+        <div class="white"></div>
+        <div class="text">欢迎，LIXid胡</div>
+        <div class="exit" @click="logout">退出</div>
       </div>
-      <Content style="overflow: hidden; padding: 32px 10%; background: #f3f3f3">
-        <transition name="fade-transform" mode="out-in">
-          <router-view></router-view>
-        </transition>
-      </Content>
-      <Footer class="layout-footer-center text-center"
-        >copyright@ 联盟信息等</Footer
+    </header>
+    <div class="sider">
+      <el-menu
+        mode="horizontal"
+        :default-active="currentRoute"
+        class="siderMenu"
+        router
       >
-    </Layout>
+        <el-menu-item
+          v-for="(item, index) in menuList"
+          :key="index"
+          :index="item.route"
+          style="width: 10%; text-align: center; min-width: 120px"
+        >
+          {{ item.name }}
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <section style="overflow: hidden; padding: 32px 10%; background: #f3f3f3">
+      <transition name="fade-transform" mode="out-in">
+        <router-view></router-view>
+      </transition>
+    </section>
+    <footer class="layout-footer-center text-center">
+      copyright@ 联盟信息等
+    </footer>
   </div>
 </template>
 <script>
@@ -184,7 +190,7 @@ export default {
   background-position: center;
   background-size: cover;
   display: flex;
-  padding-right: 10%;
+  padding: 0 10% 0 5%;
   justify-content: space-between;
   align-items: center;
   .logotitle {
@@ -263,20 +269,14 @@ export default {
   width: 100%;
   height: 108px;
   background: #efefef;
-  line-height: 68px;
+  line-height: 108px;
 }
-::v-deep {
-  .ivu-form {
-    .ivu-form-item {
-      display: block;
-      margin-bottom: 10px;
-    }
-    .ivu-form-item-label {
-      font-size: 14px;
-      font-family: AlibabaPuHuiTiR;
-      color: #333333;
-    }
-  }
+.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
+.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus {
+  background-color: transparent;
+}
+.el-form-item {
+  text-align: left;
 }
 /* fade-transform */
 .fade-transform-leave-active,
diff --git a/src/layouts/components/NavBar/index.vue b/src/layouts/components/NavBar/index.vue
index d90be16..0c89b44 100644
--- a/src/layouts/components/NavBar/index.vue
+++ b/src/layouts/components/NavBar/index.vue
@@ -20,7 +20,7 @@
         </div>
       </div>
       <div
-        v-if="[0, 1, 2].includes(curSelectedIndex)"
+        v-show="curSelectedIndex != -1"
         class="community"
         @click="openModalFlag"
       >
@@ -32,12 +32,12 @@
         <img src="~@/assets/img/DataCenter/user.png" alt="" />
         <avatar></avatar>
       </div>
-      <Badge :count="messageCount" :class-name="'badge'">
+      <el-badge :value="messageCount" :class-name="'badge'">
         <div class="user">
           <img src="~@/assets/img/DataCenter/message.png" alt="" />
           消息
         </div>
-      </Badge>
+      </el-badge>
     </div>
   </div>
 </template>
@@ -234,61 +234,5 @@ export default {
       }
     }
   }
-  // .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>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index bd9ec4f..f051911 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -43,13 +43,13 @@
       </div>
     </div>
     <back-to-top transition-name="fade"></back-to-top>
-    <Modal
-      v-model="modalFlag"
-      :mask-closable="false"
-      :closable="false"
-      footer-hide
+    <el-dialog
+      :title="''"
+      :visible="modalFlag"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
       width="70%"
-      :styles="{ minWidth: '1008px' }"
     >
       <div class="modalContent">
         <div class="title">请选择您的筛查填报场景</div>
@@ -82,12 +82,12 @@
           </li>
         </ul>
         <div class="submit">
-          <Button type="primary" class="btn" @click="setSelectedIndex"
-            >保存</Button
+          <el-button type="primary" class="btn" @click="setSelectedIndex"
+            >保存</el-button
           >
         </div>
       </div>
-    </Modal>
+    </el-dialog>
   </div>
 </template>
 
@@ -324,7 +324,9 @@ export default {
     height: calc(100vh - 90px);
   }
 }
-
+::v-deep .el-dialog__header {
+  display: none;
+}
 .modalContent {
   padding: 60px;
   .title {
@@ -363,8 +365,8 @@ export default {
       }
     }
     .ItemIamge {
-      width: 268px;
-      height: 180px;
+      width: 90%;
+      // height: 180px;
       margin-top: 14px;
       img {
         width: 100%;
diff --git a/src/main.js b/src/main.js
index 22e3e0b..5cc1a49 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,12 +6,9 @@ import store from "./store"
 import router from "./router"
 import "./plugins"
 import "./mixins"
-import iView from "view-design"
-import "view-design/dist/styles/iview.css"
 import "@/assets/style/common.scss"
 // const { mockXHR } = require("../mock/static")
 // mockXHR()
-Vue.use(iView)
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index 581e5b4..7bf6e08 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -5,8 +5,8 @@
         <video :src="videoSrc" controls class="video" />
       </div>
       <div class="right box tabbox">
-        <Tabs :value="curTab">
-          <TabPane
+        <el-tabs v-model="curTab">
+          <el-tab-pane
             v-for="(e, index) in tabList"
             :key="index"
             :label="e.title"
@@ -23,8 +23,8 @@
                 </div>
               </li>
             </ul>
-          </TabPane>
-        </Tabs>
+          </el-tab-pane>
+        </el-tabs>
       </div>
     </div>
     <!-- 数据分析 -->
diff --git a/src/views/dataoverview/index.vue b/src/views/dataoverview/index.vue
index 95ae4b6..d310b4c 100644
--- a/src/views/dataoverview/index.vue
+++ b/src/views/dataoverview/index.vue
@@ -10,87 +10,86 @@
         {{ item }}
       </div>
     </div>
-    <custom-table
-      ref="customTable"
-      :table-header="tableHeader"
+    <customs-table
+      ref="table"
       :table-data="tableData"
-      :page="page"
-      @changePage="changePage"
-    ></custom-table>
+      :columns="columns"
+      :header-class="'newHeader'"
+      :list-loading="listLoading"
+      :current-page="pageIndex"
+      :total-count="total"
+      :page-sizes="pageSizes"
+      :page-size="pageSize"
+      @pageSizeChange="handleSizeChange"
+      @currentPageChange="handleCurrentChange"
+    />
   </div>
 </template>
 <script>
-import CustomTable from "@/components/CustomTable"
+import CustomsTable from "@/components/CustomsTable"
+import paginationMixin from "@/components/TabComponents/mixin"
 export default {
   // 数据概览
   name: "",
   components: {
-    CustomTable,
+    CustomsTable,
   },
+  mixins: [paginationMixin],
   data() {
     return {
+      listLoading: false,
       selectedIndex: sessionStorage.getItem("homeSelectedIndex") - 0 || 0,
       headList: ["社区筛查", "医院筛查", "体检筛查"],
-      tableHeader: [
+      columns: [
         {
-          title: "医联体",
-          minWidth: 40,
-          key: "name",
-          align: "center",
+          label: "医联体",
+          minWidth: 120,
+          value: "name",
         },
         {
-          title: "累计上报量",
-          minWidth: 60,
-          key: "1",
-          align: "center",
+          label: "累计上报量",
+          minWidth: 120,
+          value: "1",
         },
         {
-          title: "最近一季度上报量",
-          minWidth: 96,
-          key: "2",
-          align: "center",
+          label: "最近一季度上报量",
+          minWidth: 120,
+          value: "2",
         },
         {
-          title: "累计审核合格量",
-          minWidth: 84,
-          key: "3",
-          align: "center",
+          label: "累计审核合格量",
+          minWidth: 120,
+          value: "3",
         },
         {
-          title: "高风险",
-          minWidth: 30,
-          key: "4",
-          align: "center",
+          label: "高风险",
+          minWidth: 120,
+          value: "4",
         },
         {
-          title: "中风险",
-          minWidth: 30,
-          key: "5",
-          align: "center",
+          label: "中风险",
+          minWidth: 120,
+          value: "5",
         },
         {
-          title: "低风险",
-          minWidth: 30,
-          key: "6",
-          align: "center",
+          label: "低风险",
+          minWidth: 120,
+          value: "6",
         },
         {
-          title: "胃癌",
-          minWidth: 30,
-          key: "7",
-          align: "center",
+          label: "胃癌",
+          minWidth: 120,
+          value: "7",
         },
         {
-          title: "早期胃癌",
-          minWidth: 40,
-          key: "8",
-          align: "center",
+          label: "早期胃癌",
+          minWidth: 120,
+          value: "8",
         },
         {
-          title: "食道癌",
-          minWidth: 30,
-          key: "9",
-          align: "center",
+          label: "食道癌",
+          minWidth: 120,
+          value: "9",
         },
       ],
       tableData: [
@@ -99,11 +98,6 @@ export default {
           1: 2,
         },
       ],
-      page: {
-        current: 1,
-        size: 10,
-        total: 20,
-      },
     }
   },
   watch: {},
@@ -114,11 +108,6 @@ export default {
       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>
@@ -130,6 +119,7 @@ export default {
   flex-direction: column;
   .header {
     display: flex;
+    margin-bottom: 20px;
     .btn {
       cursor: pointer;
       width: 112px;
diff --git a/src/views/followupquery/index.vue b/src/views/followupquery/index.vue
index 263e5e9..874b503 100644
--- a/src/views/followupquery/index.vue
+++ b/src/views/followupquery/index.vue
@@ -2,133 +2,169 @@
   <div class="screeningSearch">
     <div class="top">
       <form-components :forms="formList"></form-components>
-      <!-- <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"
+      <customs-table
+        ref="table"
         :table-data="tableData"
-        :page="page"
-        @changePage="changePage"
-      ></custom-table>
+        :columns="columns"
+        :header-class="'newHeader'"
+        :list-loading="listLoading"
+        :current-page="pageIndex"
+        :total-count="total"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        @pageSizeChange="handleSizeChange"
+        @currentPageChange="handleCurrentChange"
+      />
     </div>
   </div>
 </template>
 <script>
-import CustomTable from "@/components/CustomTable"
 import FormComponents from "@/components/FormComponents"
+import CustomsTable from "@/components/CustomsTable"
+import paginationMixin from "@/components/TabComponents/mixin"
 export default {
   components: {
-    CustomTable,
     FormComponents,
+    CustomsTable,
   },
+  mixins: [paginationMixin],
   data() {
     return {
+      listLoading: false,
       keyword: "",
       modifiedFlag: false,
-      tableHeader: [
+      columns: [
         {
-          title: "医联体",
-          key: "name",
-          align: "center",
-          width: 100,
+          label: "医联体",
+          minWidth: 120,
+          value: "groupName",
         },
         {
-          title: "姓名",
-          width: 100,
-          key: "1",
-          align: "center",
+          label: "姓名",
+          minWidth: 120,
+          value: "name",
         },
         {
-          title: "性别",
-          minWidth: 60,
-          key: "2",
-          align: "center",
+          label: "性别",
+          minWidth: 120,
+          value: "sex",
         },
+
         {
-          title: "身份证",
-          width: 160,
-          key: "3",
-          align: "center",
+          label: "身份证",
+          minWidth: 120,
+          value: "idCard",
         },
+
         {
-          title: "年龄",
-          minWidth: 60,
-          align: "center",
+          label: "年龄",
+          minWidth: 120,
+          value: "age",
         },
+
         {
-          title: "筛查时间",
-          width: 100,
-          key: "5",
-          align: "center",
+          label: "筛查时间",
+          minWidth: 120,
+          value: "screenTime",
         },
+
         {
-          title: "风险评估结果",
-          width: 180,
-          key: "6",
-          align: "center",
+          label: "风险评估结果",
+          minWidth: 120,
+          value: "result",
         },
         {
-          title: "上次随访时间",
-          width: 180,
-          key: "7",
-          align: "center",
+          label: "上次随访时间",
+          minWidth: 120,
+          value: "targetFieldCode",
         },
         {
-          title: "筛查审核状态",
-          key: "8",
-          minWidth: 140,
-          align: "center",
+          label: "筛查审核状态",
+          minWidth: 180,
+          value: "createTime",
         },
         {
-          title: "操作",
-          width: 140,
-          key: "action",
+          label: "操作",
+          width: 220,
           fixed: "right",
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "a",
-              {
-                on: {
-                  click: () => {
-                    console.log(params.row)
-                  },
-                },
+          operType: "button",
+          operations: [
+            {
+              func: this.rowOpration,
+              formatter(row) {
+                return {
+                  label: " 录入",
+                  type: "text",
+                }
               },
-              "修改"
-            )
-          },
+            },
+          ],
         },
       ],
       tableData: [
         {
-          name: "1",
-          1: 2,
+          groupName: "第一个",
+        },
+
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第十个",
+        },
+        {
+          groupName: "第一个",
+        },
+
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第十个",
+        },
+        {
+          groupName: "第一个",
+        },
+        {
+          groupName: "第er一个",
         },
       ],
       formList: [
@@ -196,15 +232,12 @@ export default {
           ],
         },
       ],
-      page: {
-        current: 1,
-        size: 10,
-        total: 20,
-      },
     }
   },
   watch: {},
-  mounted() {},
+  mounted() {
+    this.total = 20
+  },
   methods: {
     changeModified() {
       this.modifiedFlag = !this.modifiedFlag
@@ -214,14 +247,15 @@ export default {
       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
+    handleSizeChange(v) {
+      console.log(v)
     },
     onSearch() {
       console.log(123456)
     },
+    rowOpration(row, index) {
+      console.log(row, index)
+    },
   },
 }
 </script>
@@ -239,4 +273,14 @@ export default {
     padding: 0 24px;
   }
 }
+::v-deep {
+  .el-table {
+    thead {
+      .newHeader {
+        height: 60px;
+        background: #f6f6f6;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/followupresearch/index.vue b/src/views/followupresearch/index.vue
index 73f89ed..2483046 100644
--- a/src/views/followupresearch/index.vue
+++ b/src/views/followupresearch/index.vue
@@ -2,136 +2,105 @@
   <div class="screeningSearch">
     <div class="top">
       <form-components :forms="formList"></form-components>
-      <!-- <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"
+      <customs-table
+        ref="table"
         :table-data="tableData"
-        :page="page"
-        @changePage="changePage"
-      ></custom-table>
+        :columns="columns"
+        :header-class="'newHeader'"
+        :list-loading="listLoading"
+        :current-page="pageIndex"
+        :total-count="total"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        @pageSizeChange="handleSizeChange"
+        @currentPageChange="handleCurrentChange"
+      />
     </div>
   </div>
 </template>
 <script>
-import CustomTable from "@/components/CustomTable"
 import FormComponents from "@/components/FormComponents"
+import CustomsTable from "@/components/CustomsTable"
+import paginationMixin from "@/components/TabComponents/mixin"
 export default {
   components: {
-    CustomTable,
+    CustomsTable,
     FormComponents,
   },
+  mixins: [paginationMixin],
   data() {
     return {
+      listLoading: false,
       keyword: "",
       modifiedFlag: false,
-      tableHeader: [
+      columns: [
         {
-          title: "医联体",
-          key: "name",
-          align: "center",
-          width: 100,
+          label: "医联体",
+          value: "name",
+          minWidth: 120,
         },
         {
-          title: "姓名",
-          width: 100,
-          key: "1",
-          align: "center",
+          label: "姓名",
+          value: "1",
+          minWidth: 120,
         },
         {
-          title: "性别",
-          minWidth: 60,
-          ellipsis: true,
-          key: "2",
-          align: "center",
+          label: "性别",
+          value: "2",
+          minWidth: 120,
         },
         {
-          title: "身份证",
-          width: 160,
-          key: "3",
-          align: "center",
+          label: "身份证",
+          value: "3",
+          minWidth: 120,
         },
         {
-          title: "年龄",
-          minWidth: 60,
-          align: "center",
+          label: "年龄",
+          minWidth: 120,
         },
         {
-          title: "筛查时间",
-          width: 100,
-          key: "5",
-          align: "center",
+          label: "筛查时间",
+          value: "5",
+          minWidth: 120,
         },
         {
-          title: "风险评估结果",
-          width: 180,
-          key: "6",
-          align: "center",
+          label: "风险评估结果",
+          value: "6",
+          minWidth: 120,
         },
         {
-          title: "上次随访时间",
-          width: 180,
-          key: "7",
-          align: "center",
+          label: "上次随访时间",
+          value: "7",
+          minWidth: 120,
         },
         {
-          title: "随访进度",
-          width: 100,
-          key: "8",
-          align: "center",
+          label: "随访进度",
+          value: "8",
+          minWidth: 120,
         },
         {
-          title: "计划随访时间",
-          width: 140,
-          key: "9",
-          ellipsis: true,
-          align: "center",
+          label: "计划随访时间",
+          value: "9",
+          minWidth: 120,
         },
         {
-          title: "操作",
-          width: 80,
-          key: "action",
-          // fixed: "right",
-          ellipsis: true,
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "a",
-              {
-                on: {
-                  click: () => {
-                    console.log(params.row)
-                  },
-                },
+          label: "操作",
+          width: 220,
+          fixed: "right",
+          operType: "button",
+          operations: [
+            {
+              func: this.rowOpration,
+              formatter(row) {
+                return {
+                  label: " 录入",
+                  type: "text",
+                }
               },
-              "修改"
-            )
-          },
+            },
+          ],
         },
       ],
       tableData: [
@@ -209,11 +178,6 @@ export default {
           ],
         },
       ],
-      page: {
-        current: 1,
-        size: 10,
-        total: 20,
-      },
     }
   },
   watch: {},
diff --git a/yarn.lock b/yarn.lock
index d6fd237..5e5c9c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2042,11 +2042,6 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
-async-validator@^3.3.0:
-  version "3.5.2"
-  resolved "https://registry.npmmirror.com/async-validator/-/async-validator-3.5.2.tgz#68e866a96824e8b2694ff7a831c1a25c44d5e500"
-  integrity sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ==
-
 async-validator@~1.8.1:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
@@ -2203,11 +2198,6 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
-batch-processor@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
-  integrity sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==
-
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -3655,11 +3645,6 @@ deepmerge@^1.2.0, deepmerge@^1.5.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
-deepmerge@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
-  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
-
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -3954,13 +3939,6 @@ electron-to-chromium@^1.3.649:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.704.tgz#894205a237cbe0097d63da8f6d19e605dd13ab51"
   integrity sha512-6cz0jvawlUe4h5AbfQWxPzb+8LzVyswGAWiGc32EJEmfj39HTQyNPkLXirc7+L4x5I6RgRkzua8Ryu5QZqc8cA==
 
-element-resize-detector@^1.2.0:
-  version "1.2.4"
-  resolved "https://registry.npmmirror.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz#3e6c5982dd77508b5fa7e6d5c02170e26325c9b1"
-  integrity sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==
-  dependencies:
-    batch-processor "1.0.0"
-
 element-ui@^2.15.2:
   version "2.15.3"
   resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.15.3.tgz#55108ab82a3bcc646e7b0570871c48ba96300652"
@@ -6271,11 +6249,6 @@ js-base64@^2.1.9:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
   integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
-js-calendar@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.npmmirror.com/js-calendar/-/js-calendar-1.2.3.tgz#a583b0644b4e695ba394f344d103dbcc7a7a7d3e"
-  integrity sha512-dAA1/Zbp4+c5E+ARCVTIuKepXsNLzSYfzvOimiYD4S5eeP9QuplSHLcdhfqFSwyM1o1u6ku6RRRCyaZ0YAjiBw==
-
 js-cookie@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
@@ -6644,11 +6617,6 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.npmmirror.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
-
 lodash.transform@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -8110,11 +8078,6 @@ pnp-webpack-plugin@^1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
-popper.js@^1.14.6:
-  version "1.16.1"
-  resolved "https://registry.npmmirror.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -10318,11 +10281,6 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tinycolor2@^1.4.1:
-  version "1.4.2"
-  resolved "https://registry.npmmirror.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
-  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
-
 title-case@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"
@@ -10774,11 +10732,6 @@ uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-v-click-outside-x@^3.7.1:
-  version "3.7.1"
-  resolved "https://registry.npmmirror.com/v-click-outside-x/-/v-click-outside-x-3.7.1.tgz#aa03eaa0e41e44cb5207dcf86c2d9f0dd64084c1"
-  integrity sha512-WmUgmcIXr9clVpm1AYS/FgHtcDicfnfoxgQCNg4O6vfk9GVnxA0vSqO321ogUo0b7czYTidj7fQENvWFMWOkUg==
-
 v8-compile-cache@^2.0.3, v8-compile-cache@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -10836,20 +10789,6 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-view-design@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.npmmirror.com/view-design/-/view-design-4.7.0.tgz#98c4ec18ed70d1b58157007f8107a77158334846"
-  integrity sha512-WRvVRfsZciN0aJYlz+6b1zxs5G8tLFb4OUKOu+PiN0QyIGmdgWVziEyEmioYtJahQpueWiQpRYGzyxrpz3UkWQ==
-  dependencies:
-    async-validator "^3.3.0"
-    deepmerge "^2.2.1"
-    element-resize-detector "^1.2.0"
-    js-calendar "^1.2.3"
-    lodash.throttle "^4.1.1"
-    popper.js "^1.14.6"
-    tinycolor2 "^1.4.1"
-    v-click-outside-x "^3.7.1"
-
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
-- 
2.22.0