sl-sfy-safety/src/views/message/reportmessage/ReportMessage.vue

<template>
  <div class="report-message">
    <div class="flex reportmessage-head-tabs" v-if="!hideReportMessageTabs">
      <div
        class="flex justify-center items-center tab-item"
        :class="{ 'tab-item-active': type === item.value }"
        @click="switchTable(item.value)"
        v-for="item in typeName"
        :key="item.value"
      >
        {{ item.label }}
      </div>
    </div>
    <Form />
  </div>
</template>

<script setup lang="ts">
  import Form from './components/Form.vue';
  import { typeName } from '@/views/message/constant';
  import { storeToRefs } from 'pinia';
  import useFormList from './store/useFormList';
  import { computed } from 'vue';
  import { useGlobSetting } from '@/hooks/setting';
  const formStore = useFormList();
  const { type } = storeToRefs(formStore);
  const switchTable = (value) => {
    type.value = value;
  };

  const { hideReportMessageTabs } = useGlobSetting();
</script>

<style scoped lang="scss">
  .report-message {
    height: calc(100vh - 64px - 18px);
    background-color: rgba(255, 255, 255, 1);
    padding: 21px;
  }
  .reportmessage-head {
    height: 56px;

    &-tabs {
      margin: 18px 0;

      .tab-item {
        width: 188px;
        height: 38px;
        background: #fafafa;
        border: 1px solid #d9d9d9;
        cursor: pointer;

        &-active {
          color: rgba(22, 119, 255, 1);
          background: #e2eefe;
          border: 1px solid #1890ff;
        }
      }

      :first-child {
        border-radius: 8px 0px 0px 8px;
      }

      :last-child {
        border-radius: 0px 8px 8px 0px;
      }
    }
  }
</style>