easydo-zcgx-web/src/views/home/index.vue

<template>
    <img class="home-bg" src="/homeBg.png" />

    <div class="home-container">
        <el-form @submit.prevent @keyup.enter="name && toDomain({ name })">
            <el-form-item>
                <el-input v-model="name" size="large" clearable placeholder="搜索">
                    <template #suffix>
                        <el-button link icon="search" @click="name && toDomain({ name })"></el-button>
                    </template>
                </el-input>
            </el-form-item>
            <!-- <el-form-item label="热搜词:">
                <el-tag type="warning">政策</el-tag>
            </el-form-item> -->
        </el-form>

        <el-card class="home-container__tabs-card">
            <el-tabs class="left-tabs" v-model="params.zcLevel" tab-position="left" @tab-change="reloadTable">
                <el-tab-pane v-for="item in levelDic" :key="item" :label="item.slice(0, -1)" :name="item"></el-tab-pane>
            </el-tabs>

            <el-card shadow="never">
                <template #header>
                    <el-tabs v-model="params.inWhType" @tab-change="reloadTable">
                        <el-tab-pane v-for="item in storageTypeDic" :key="item.value" :label="item.label" :name="item.value"></el-tab-pane>
                    </el-tabs>
                </template>
                <el-table v-loading="loading" row-key="id" header-cell-class-name="tjm_card_table_header" height="300px" :data="tableData" border @row-click="table_detail">
                    <template v-for="(item, index) in columns" :key="index">
                        <el-table-column :label="item.label" :prop="item.props" min-width="100" show-overflow-tooltip>
                            <template #default="scope">{{ columnFormat(scope.row, item.props) }}</template>
                        </el-table-column>
                    </template>
                </el-table>
            </el-card>
        </el-card>

        <el-card class="home-container__domain">
            <template #header>{{ domainTitle }}</template>
            <el-row>
                <el-col v-for="zcType in typeDic" :key="zcType" :span="8">
                    <el-button @click="toDomain({ zcType, inWhType: params.inWhType })">{{ zcType }}</el-button>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import Share from "@/api/policy/share";
import { levelDic, typeDic } from "@/views/policyShare/main";
import { columns, storageTypeDic } from "./main";

export default {
    data() {
        return {
            columns, levelDic, typeDic, storageTypeDic,
            name: "", // 筛选字段 -- 名称

            loading: false,
            params: {
                page: 1,
                size: 10,
                status: "done",
                zcLevel: levelDic[0],
                inWhType: storageTypeDic[0].value
            },
            tableData: []
        }
    },

    computed: {
        domainTitle() {
            return storageTypeDic.find(s => s.value == this.params.inWhType).title
        }
    },

    mounted() {
        this.reloadTable();
    },

    methods: {
        columnFormat(row, props) {
            if (props == "createTime") return row[props].split(" ")[0];
            if (props == "status") return statusDic[row[props]] || "";
            if (props == "isInWh") return whetherDic[row[props]] || "";
            return row[props];
        },

        reloadTable() {
            this.loading = true;
            Share.get(this.params).then(res => {
                this.loading = false;
                if (res.code === 200) this.tableData = res.data.records;
                else ElMessage.error(res.msg);
            }).catch(() => this.loading = false);
        },

        toDomain(query) {
            this.$router.push({ path: "/publicDomain", query })
        },

        table_detail({ id }) {
            this.$router.push({ path: "/policyDetail", query: { id } });
        }
    }
}
</script>

<style lang="scss" scoped>
.home-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.home-container {
  position: relative;
  z-index: 100;
  padding: 15px 20px;

  .el-tabs :deep {
    .el-tabs__active-bar {
      display: none;
    }

    .el-tabs__item.is-active {
      background: var(--el-color-primary);
      color: #fff;
    }

    .el-tabs__content {
      display: none;
    }
  }

  .home-container__tabs-card > :deep(.el-card__body) {
    display: flex;
    background: #fff;

    .el-tabs.el-tabs--left {
      margin-top: 40px;

      .el-tabs__header {
        justify-content: flex-start;
        margin-right: 1px;

        .el-tabs__nav-wrap::after {
          width: 1px;
        }
      }
    }

    > .el-card {
      flex-basis: 100%;
      border: none;
      border-radius: 0;

      .el-card__header {
        padding: 0;
        border: none;

        .el-tabs.el-tabs--top .el-tabs__header {
          margin-bottom: 1px;

          .el-tabs__nav-wrap::after {
            height: 1px;
          }

          .el-tabs__item {
            padding: 0 20px;
          }
        }
      }

      .el-card__body {
        padding-right: 0;
        padding-bottom: 0;

        .el-table .el-table__header tr th {
          background: #f4f4f4;
          color: #333333;
        }
      }
    }
  }

  .home-container__domain {
    margin-top: 18px;

    :deep(.el-card__header) {
      position: relative;
      border-bottom: none;
      text-align: center;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20px;
        width: calc(100% - 40px);
        height: 1px;
        background: var(--el-card-border-color);
      }
    }

    :deep(.el-card__body) {
      text-align: center;
      padding-top: calc(var(--el-card-padding) + 10px);
      padding-bottom: calc(var(--el-card-padding) - 10px);

      .el-col {
        margin-bottom: calc(var(--el-card-padding) + 10px);

        .el-button {
          --el-button-border-color: var(--el-text-color-primary);
          --el-button-text-color: var(--el-text-color-primary);
          padding: 30px 40px;
        }
      }
    }
  }
}
</style>