sl-sfy-safety/src/views/datamanager/alertformdata/AlertformData.vue

<template>
  <div class="container-box">
    <div class="control-btn" v-if="hasPermisson()">
      <div
        class="btn"
        :class="{ 'btn-active': activeName === 'default' }"
        @click="activeName = 'default'"
        >默认数据</div
      >

      <div class="btn" :class="{ 'btn-active': activeName === 'show' }" @click="activeName = 'show'"
        >展示数据</div
      >
    </div>

    <div style="margin-bottom: 10px; display: flex" v-show="activeName === 'default'">
      <div style="line-height: 33px">预审后生效模式：</div>
      <el-switch :model-value="devMode" @change="switchDevMode" />
    </div>

    <Default class="content-box" v-if="activeName === 'default'" />
    <Show class="content-box" v-else />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import Default from './components/default/Default.vue';
  import Show from './components/show/Show.vue';
  import { useUserStore } from '@/store/modules/user';
  import { getDevMode, switchDevMode as SDM } from '@/api/datamanagement/getDevMode';

  const devMode = ref(true);
  getDevMode().then((res) => {
    devMode.value = res;
  });

  const switchDevMode = () => {
    SDM();
    devMode.value = !devMode.value;
  };

  const activeName = ref('default');

  const userStore = useUserStore();
  const hasPermisson = () => {
    return userStore.checkPermission('question_mock_edit_admin');
  };
</script>

<style scoped lang="scss">
  .container-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 90px);
    padding: 21px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
  }

  .control-btn {
    display: flex;
    margin-bottom: 20px;

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 188px;
      height: 38px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.88);
      border: 1px solid #d9d9d9;
      background: rgba(0, 0, 0, 0.02);
      cursor: pointer;
    }

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

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

    .btn-active {
      font-weight: 500;
      color: #1890ff;
      border: 1px solid #1890ff;
      background-color: rgba(24, 144, 255, 0.15);
    }
  }

  .content-box {
    flex: 1;
  }
</style>