index.vue

<template>
  <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">
        <el-table-self
          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"
import { getFollowCheck,getFollowUncheck } from "@/api/followup"
export default {
  components: {
    CustomsTable,
  },
  mixins: [paginationMixin],
  data() {
    return {
      type: "0",
      auditStatus: "0",
      listLoading: false,
      tableData: [
        {
          "unionName": "合肥高新附院",
          "unionId": "2",
          "reportTime": "2023-02-09 10:27:22",
          "unCheckNums": 7,
          "checkNums": 0
        }
      ],
    }
  },
  watch: {
    auditStatus(val) {
      sessionStorage.setItem('audit-status',val)
      switch (this.type) {
        case "1":
          this.handleSearch()
          break
      }
      console.log('status',val)
    },
    type(val) {
      console.log('type',val)
      sessionStorage.setItem('audit-type',val)
      switch (val) {
        case "1":
          this.handleSearch()
          break
      }
    },
  },
  computed:{
    columns(){
      const unCkeckColumns = [
        {
          label: "医联体",
          minWidth: 120,
          value: "unionName",
        },
        {
          label: "已审核（例）",
          minWidth: 120,
          value: "checkNums",
        },
        {
          label: "待审核（例）备份",
          minWidth: 120,
          value: "unCheckNums",
        },
        {
          label: "最新上报时间",
          minWidth: 120,
          value: "reportTime",
        },
        {
          label: "操作",
          width: 220,
          fixed: "right",
          operType: "button",
          operations: [
            {
              func: this.auditHandle,
              label: "审核",
              type: "text",
            },
          ],
        },
      ]
      const checkColumns = [
        {
          label: "筛查编号",
          minWidth: 120,
          value: "unionId",
        },
        {
          label: "医联体",
          minWidth: 120,
          value: "unionName",
        },
        {
          label: "姓名",
          minWidth: 120,
          formatter: (row) => {
            return row.name ? row.name : "--"
          },
          value: "name",
        },
        {
          label: "年龄",
          minWidth: 120,
          value: "age",
          formatter: (row) => {
            return row.age ? row.age : "--"
          },
        },
        {
          label: "风险评估",
          minWidth: 120,
          value: "checkNums",
        },
        {
          label: "审核状态",
          minWidth: 120,
          value: "unCheckNums",
        },
        {
          label: "上报时间",
          minWidth: 120,
          value: "reportTime",
        },
        {
          label: "操作",
          width: 220,
          fixed: "right",
          operType: "button",
          operations: [
            {
              func: this.auditHandle,
              label: "审核",
              type: "text",
            },
          ],
        },
      ]
      return this.auditStatus == "1" ? checkColumns:unCkeckColumns
    }
  },
  mounted() {
    if(sessionStorage.getItem('audit-status') || sessionStorage.getItem('audit-type') ){
      this.auditStatus = sessionStorage.getItem('audit-status') || "0"
      this.type = sessionStorage.getItem('audit-type') || "0"
    }
    else{
      this.handleSearch()
    }  
  },
  methods: {
    handleClick() {
      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) {
      if (this.type == "1") {
        this.$router.push({
          path: "/followaudit",
          query: {
            unionId: data['unionId'],
            unionName:data['unionName']
          },
        })
      } else {
        this.$router.push({
          path: "/auditdetail",
          query: {
            id: i,
          },
        })
      }
    },
    async handleSearch() {
      let params = {
        pageSize:this.pageSize,
        pageNum:this.pageIndex
      }
      let res
      switch (this.auditStatus) {
        case "0":
          res = await getFollowUncheck(params) //待审核
          break;
        case "1":
          res = await getFollowCheck(params) //已审核
          break;
      }
      this.tableData = res.data.records //调试注释
      this.total= res.data.total
    },
  },
}
</script>
<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>