index.vue

<template>
  <div class="screeningSearch">
    <div class="top">
      <form-components :forms="formList"></form-components>
    </div>
    <div class="bot">
      <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>
</template>
<script>
import FormComponents from "@/components/FormComponents"
import CustomsTable from "@/components/CustomsTable"
import paginationMixin from "@/components/TabComponents/mixin"
export default {
  components: {
    FormComponents,
    CustomsTable,
  },
  mixins: [paginationMixin],
  data() {
    return {
      listLoading: false,
      keyword: "",
      modifiedFlag: false,
      columns: [
        {
          label: "医联体",
          minWidth: 120,
          value: "groupName",
        },
        {
          label: "姓名",
          minWidth: 120,
          value: "name",
        },
        {
          label: "性别",
          minWidth: 120,
          value: "sex",
        },

        {
          label: "身份证",
          minWidth: 120,
          value: "idCard",
        },

        {
          label: "年龄",
          minWidth: 120,
          value: "age",
        },

        {
          label: "筛查时间",
          minWidth: 120,
          value: "screenTime",
        },

        {
          label: "风险评估结果",
          minWidth: 120,
          value: "result",
        },
        {
          label: "上次随访时间",
          minWidth: 120,
          value: "targetFieldCode",
        },
        {
          label: "筛查审核状态",
          minWidth: 180,
          value: "createTime",
        },
        {
          label: "操作",
          width: 220,
          fixed: "right",
          operType: "button",
          operations: [
            {
              func: this.rowOpration,
              formatter(row) {
                return {
                  label: "查询",
                  type: "text",
                }
              },
            },
          ],
        },
      ],
      tableData: [
        {
          groupName: "第一个",
        },

        {
          groupName: "第一个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第十个",
        },
        {
          groupName: "第一个",
        },

        {
          groupName: "第一个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第十个",
        },
        {
          groupName: "第一个",
        },
        {
          groupName: "第er一个",
        },
      ],
      formList: [
        {
          type: "select",
          label: "筛查时间",
          prop: "screeningTime",
          placeholder: "请选择时间",
          rules: [],
          opts: [{ label: "123", value: "1" }],
        },
        {
          type: "select",
          label: "随访审核状态",
          prop: "screeningStatus",
          placeholder: "请选择随访状态",
          rules: [],
          opts: [{ label: "123", value: "1" }],
        },
        {
          type: "select",
          label: "随访进度",
          prop: "screeningProgress",
          placeholder: "请选择随访进度",
          rules: [],
          opts: [{ label: "123", value: "1" }],
        },
        {
          type: "select",
          label: "计划随访时间",
          prop: "planScreeningTime",
          placeholder: "请选择计划随访时间",
          rules: [],
          opts: [{ label: "123", value: "1" }],
        },
        {
          type: "input",
          label: "关键词",
          prop: "keyWord",
          placeholder: "请输入医联体/姓名/身份证",
          rules: [],
        },
        {
          type: "btn",
          list: [
            {
              btnType: "button",
              type: "",
              style: {
                width: "80px",
                height: "32px",
                borderRadius: "4px",
                fontSize: "14px",
                marginLeft: "40px",
              },
              btnText: "查询",
              func: () => {
                this.onSearch()
              },
            },
            {
              btnType: "tobeModified",
              tobeModified: 20,
            },
          ],
        },
      ],
    }
  },
  watch: {},
  mounted() {
    this.total = 20
  },
  methods: {
    changeModified() {
      this.modifiedFlag = !this.modifiedFlag
    },
    setSelectedIndex(i) {
      console.log(this.selectedIndex)
      this.selectedIndex = i
      sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
    },
    handleSizeChange(v) {
      console.log(v)
    },
    onSearch() {
      console.log(123456)
    },
    rowOpration(row, index) {
      console.log(row, index)
    },
  },
}
</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;
  }
  .bot {
    padding: 0 24px;
  }
}
</style>