jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/index.vue

<template>
  <div class='BusinessDataManagement'>
    <Tabs :panels="panels" :default-active="activeName" @select="handleSelect" />

    <!-- 搜索栏 -->
    <div class="filter">
      <div>
        <template v-if="activeName === 'DutyOfficer'">
          <ButtonGradient>
            <template #prefix>
              <img src="@screen/images/import.svg" />
            </template>
            机构值班表
          </ButtonGradient>
          <ButtonGradient>
            <template #prefix>
              <img src="@screen/images/import.svg" />
            </template>
            应急机构
          </ButtonGradient>
          <ButtonGradient>
            <template #prefix>
              <img src="@screen/images/export.svg" />
            </template>
            上传
          </ButtonGradient>
          <ButtonGradient>
            <template #prefix>
              <img src="@screen/images/insert.svg" />
            </template>
            新增
          </ButtonGradient>
        </template>
        <template v-else>
          <ButtonGradient>
            <template #prefix>
              <img src="@screen/images/insert.svg" />
            </template>
            新增
          </ButtonGradient>
          <ButtonGradient>
            <template #prefix>
              <img src="@screen/images/export.svg" />
            </template>
            导出
          </ButtonGradient>
          <ButtonGradient>
            <template #prefix>
              <img src="@screen/images/refresh.svg" />
            </template>
            刷新
          </ButtonGradient>
        </template>
      </div>

      <InputSearch style="width: 402px;" />
    </div>

    <!-- 内容 -->
    <div class="body">
      <Transition name="fade">
        <component :is="activeName" class="content" />
      </Transition>
    </div>

    <!-- 分页 -->
    <div class="footer">
      <Pagination :total="90" />
    </div>
  </div>
</template>

<script>
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
import Tabs from '@screen/components/Tabs/index.vue';
// import Card from '@screen/components/Card/index.vue';
import Pagination from '@screen/components/Pagination.vue';
import InputSearch from '@screen/components/InputSearch/index.vue';

import DutyOfficer from "./views/dutyOfficer/index.vue";
import EmergencyAgencies from "./views/emergencyAgencies/index.vue";
import JurisdictionalManagement from "./views/jurisdictionalManagement/index.vue";
import FirstResponders from "./views/firstResponders/index.vue";

export default {
  name: 'BusinessDataManagement',
  components: {
    ButtonGradient,
    Tabs,
    Pagination,
    // Card,
    InputSearch,

    DutyOfficer,
    EmergencyAgencies,
    FirstResponders,
    JurisdictionalManagement
  },
  data() {
    return {
      activeName: "FirstResponders",
      panels: [
        {
          label: "应急人员",
          key: "FirstResponders"
        },
        {
          label: "应急机构",
          key: "EmergencyAgencies"
        },
        {
          label: "值班人员",
          key: "DutyOfficer"
        },
        {
          label: "辖段管理",
          key: "JurisdictionalManagement"
        },
      ]
    }
  },
  methods: {
    handleSelect(activeName) {
      this.activeName = activeName;
    }
  }
}
</script>

<style lang='scss' scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity .24s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.BusinessDataManagement {
  padding: 21px;

  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 6;
  width: 100%;
  height: 100%;

  .filter {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    >div {
      display: flex;
      gap: 6px;
    }
  }

  .body {
    flex: 1;
    position: relative;
    overflow: hidden;

    .content {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }

  .footer {
    margin-top: 15px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>