增加页面

src/views/audit-qualitycontrol/healthcheckup.vue

 <template>
-  <div>体检</div>
+  <div class="audit-qualitycontrol">
+    <div class="aq-top-tab">
+      <el-tabs v-model="type" @tab-click="handleClick">
+        <el-tab-pane label="筛查病例数据" name="0"></el-tab-pane>
+        <el-tab-pane label="随访病例数据" name="1"></el-tab-pane>
+      </el-tabs>
+    </div>
+    <div class="aq-bot-table">
+      <div class="table-top-tab">
+        <el-tabs v-model="auditStatus" type="card" @tab-click="handleClick">
+          <el-tab-pane label="待审核" name="0"></el-tab-pane>
+          <el-tab-pane label="已审核" name="1"></el-tab-pane>
+        </el-tabs>
+        <div v-show="auditStatus == 1" class="keyExplain">
+          字段说明<img src="~@/assets/img/DataCenter/question.png" alt="" />
+        </div>
+      </div>
+      <div class="bot-table">
+        <customs-table
+          ref="table"
+          :table-data="tableData"
+          :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>
+  </div>
 </template>
 <script>
+import CustomsTable from "@/components/CustomsTable"
+import paginationMixin from "@/components/TabComponents/mixin"
 export default {
+  components: {
+    CustomsTable,
+  },
+  mixins: [paginationMixin],
   data() {
-    return {}
+    return {
+      type: "0",
+      auditStatus: "0",
+      listLoading: false,
+      columns: [
+        {
+          label: "医联体",
+          minWidth: 120,
+          value: "title",
+        },
+        {
+          label: "已审核（例）",
+          minWidth: 120,
+          value: "file",
+        },
+        {
+          label: "待审核（例）备份",
+          minWidth: 120,
+          value: "uploadTime",
+        },
+        {
+          label: "最新上报时间",
+          minWidth: 120,
+          value: "editTime",
+        },
+        {
+          label: "操作",
+          width: 220,
+          fixed: "right",
+          operType: "button",
+          operations: [
+            {
+              func: this.auditHandle,
+              label: "审核",
+              type: "text",
+            },
+          ],
+        },
+      ],
+      tableData: [
+        {
+          title: "第一个",
+          isOpen: true,
+        },
+      ],
+    }
   },
-  methods: {},
-  mounted() {},
   watch: {},
+  mounted() {},
+  methods: {
+    handleClick() {
+      console.log("type:" + this.type, "auditStatus" + this.auditStatus)
+      if (this.auditStatus == 1) {
+        this.columns[this.columns.length - 1].operations[0].label =
+          "修改审核意见"
+      } else {
+        this.columns[this.columns.length - 1].operations[0].label = "审核"
+      }
+    },
+    auditHandle(data, i) {
+      console.log(data, i)
+    },
+  },
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.audit-qualitycontrol {
+  padding: 20px 0;
+  .table-top-tab {
+    margin-bottom: 15px;
+    position: relative;
+    .keyExplain {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      right: 0;
+      top: 10%;
+      font-size: 16px;
+      font-family: AlibabaPuHuiTiR;
+      color: #999999;
+      img {
+        width: 18px;
+        height: 18px;
+        margin-left: 5px;
+        transform: translateY(1px);
+      }
+    }
+  }
+  .aq-bot-table {
+    padding: 20px;
+    ::v-deep {
+      .el-tabs__nav {
+        border: none;
+      }
+      .el-tabs__item {
+        margin-right: 10px;
+        border: 1px solid #e4e7ed;
+        border-radius: 5px 5px 0 0;
+      }
+      .is-active {
+        background: #4e68ff;
+        color: #fff;
+      }
+    }
+  }
+}
+::v-deep {
+  .el-tabs__item {
+    padding-left: 20px !important;
+    font-size: 18px;
+    font-family: AlibabaPuHuiTiM;
+  }
+  .is-active {
+    color: #4e68ff;
+  }
+}
+</style>

src/views/audit-qualitycontrol/hospital.vue

 <template>
-  <div>医院质控</div>
+  <div class="audit-qualitycontrol">
+    <div class="aq-top-tab">
+      <el-tabs v-model="type" @tab-click="handleClick">
+        <el-tab-pane label="筛查病例数据" name="0"></el-tab-pane>
+        <el-tab-pane label="随访病例数据" name="1"></el-tab-pane>
+      </el-tabs>
+    </div>
+    <div class="aq-bot-table">
+      <div class="table-top-tab">
+        <el-tabs v-model="auditStatus" type="card" @tab-click="handleClick">
+          <el-tab-pane label="待审核" name="0"></el-tab-pane>
+          <el-tab-pane label="已审核" name="1"></el-tab-pane>
+        </el-tabs>
+        <div v-show="auditStatus == 1" class="keyExplain">
+          字段说明<img src="~@/assets/img/DataCenter/question.png" alt="" />
+        </div>
+      </div>
+      <div class="bot-table">
+        <customs-table
+          ref="table"
+          :table-data="tableData"
+          :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>
+  </div>
 </template>
 <script>
+import CustomsTable from "@/components/CustomsTable"
+import paginationMixin from "@/components/TabComponents/mixin"
 export default {
+  components: {
+    CustomsTable,
+  },
+  mixins: [paginationMixin],
   data() {
-    return {}
+    return {
+      type: "0",
+      auditStatus: "0",
+      listLoading: false,
+      columns: [
+        {
+          label: "医联体",
+          minWidth: 120,
+          value: "title",
+        },
+        {
+          label: "已审核（例）",
+          minWidth: 120,
+          value: "file",
+        },
+        {
+          label: "待审核（例）备份",
+          minWidth: 120,
+          value: "uploadTime",
+        },
+        {
+          label: "最新上报时间",
+          minWidth: 120,
+          value: "editTime",
+        },
+        {
+          label: "操作",
+          width: 220,
+          fixed: "right",
+          operType: "button",
+          operations: [
+            {
+              func: this.auditHandle,
+              label: "审核",
+              type: "text",
+            },
+          ],
+        },
+      ],
+      tableData: [
+        {
+          title: "第一个",
+          isOpen: true,
+        },
+      ],
+    }
   },
-  methods: {},
-  mounted() {},
   watch: {},
+  mounted() {},
+  methods: {
+    handleClick() {
+      console.log("type:" + this.type, "auditStatus" + this.auditStatus)
+      if (this.auditStatus == 1) {
+        this.columns[this.columns.length - 1].operations[0].label =
+          "修改审核意见"
+      } else {
+        this.columns[this.columns.length - 1].operations[0].label = "审核"
+      }
+    },
+    auditHandle(data, i) {
+      console.log(data, i)
+    },
+  },
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.audit-qualitycontrol {
+  padding: 20px 0;
+  .table-top-tab {
+    margin-bottom: 15px;
+    position: relative;
+    .keyExplain {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      right: 0;
+      top: 10%;
+      font-size: 16px;
+      font-family: AlibabaPuHuiTiR;
+      color: #999999;
+      img {
+        width: 18px;
+        height: 18px;
+        margin-left: 5px;
+        transform: translateY(1px);
+      }
+    }
+  }
+  .aq-bot-table {
+    padding: 20px;
+    ::v-deep {
+      .el-tabs__nav {
+        border: none;
+      }
+      .el-tabs__item {
+        margin-right: 10px;
+        border: 1px solid #e4e7ed;
+        border-radius: 5px 5px 0 0;
+      }
+      .is-active {
+        background: #4e68ff;
+        color: #fff;
+      }
+    }
+  }
+}
+::v-deep {
+  .el-tabs__item {
+    padding-left: 20px !important;
+    font-size: 18px;
+    font-family: AlibabaPuHuiTiM;
+  }
+  .is-active {
+    color: #4e68ff;
+  }
+}
+</style>