sl-sfy-safety/src/views/security-confidentiality/overview/components/RegulationAndNotice.vue

<template>
  <div class="outer-person-container">
    <div class="container-title">
      <span class="line"></span>
      <span class="title">管理规定与通知</span>
    </div>
    <div class="tab-content">
      <el-tabs v-model="activeName">
        <el-tab-pane label="保卫" name="security">
          <div class="item-content">
            <div class="regulation-item" v-for="item in securityRegulationData" :key="item.id">
              <div class="round" @click="handleItemRedirect(item)"> </div>
              <div class="item-name" @click="handleItemRedirect(item)">{{ item.name }}</div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="保密" name="confidentiality">
          <div class="item-content">
            <div class="regulation-item" v-for="item in confidentialityRegulationData" :key="item.id">
              <div class="round" @click="handleItemRedirect(item)"> </div>
              <div class="item-name" @click="handleItemRedirect(item)">{{ item.name }}</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="more">
      <span class="more-text" @click="handleMoreRedirect">更多</span>
      <el-icon class="more-icon" @click="handleMoreRedirect"><DArrowRight /></el-icon>

      <!-- <img
        style="cursor: pointer"
        @click="handleMoreRedirect"
        src="@/assets/images/security-confidientiality/overview-more.png"
        alt=""
      /> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onUnmounted, ref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import type { RegulationItem } from '../types';
  import { ElIcon } from 'element-plus';
  import { DArrowRight } from '@element-plus/icons-vue';
  import { getSecurityOverview, getConfidentialityOverview } from '@/api/security-confidentiality-overview';

  const router = useRouter();
  const activeName = ref(sessionStorage.getItem('security-confidentiality-overview-active') || 'security');

  const securityRegulationData = ref<RegulationItem[]>([]);
  const confidentialityRegulationData = ref<RegulationItem[]>([]);

  async function getSecurityRegulationData() {
    const res = await getSecurityOverview();
    if (!res) return [];
    return res.length > 4 ? res.slice(0, 4) : res;
  }

  async function getConfidentialityRegulationData() {
    const res = await getConfidentialityOverview();
    if (!res) return [];
    return res.length > 4 ? res.slice(0, 4) : res;
  }

  onUnmounted(() => {
    sessionStorage.setItem('security-confidentiality-overview-active', activeName.value);
  });

  watch(
    () => activeName.value,
    async (val) => {
      if (val === 'security') {
        securityRegulationData.value = await getSecurityRegulationData();
      } else if (val === 'confidentiality') {
        confidentialityRegulationData.value = await getConfidentialityRegulationData();
      }
    },
    {
      immediate: true,
    },
  );

  function handleItemRedirect(item: RegulationItem) {
    sessionStorage.setItem(`${activeName.value}-regulation-active`, 'regulation');
    if (item.managementType === 1) {
      router.push({
        path: `/security-confidentiality/${activeName.value}-regulation-notice`,
      });
    } else if (item.managementType === 2) {
      router.push({
        path: `/security-confidentiality/${activeName.value}-regulation-notice-item`,
        query: { id: item.id, operate: 'notice-view' },
      });
    }
  }
  function handleMoreRedirect() {
    sessionStorage.setItem(`${activeName.value}-regulation-active`, 'regulation');
    router.push({
      path: `/security-confidentiality/${activeName.value}-regulation-notice`,
    });
  }
</script>

<style scoped lang="scss">
  .container-title {
    height: 24px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #000000;

    .line {
      width: 3px;
      height: 16px;
      background: #1777ff;
      margin-right: 10px;
    }

    .title {
      margin-right: 12px;
    }
  }

  .outer-person-container {
    width: 100%;
    height: 100%;
    padding-top: 14px;
  }
  .tab-content {
    height: calc(100% - 50px);
    padding: 0 10px;
  }
  .regulation-item {
    padding: 7px 0;
    display: flex;
    align-items: center;
  }
  .round {
    width: 6px;
    height: 6px;
    background: #1777ff;
    border-radius: 50%;
    margin-right: 6px;
    cursor: pointer;
  }
  .item-name {
    max-width: calc(100% - 12px);
    color: rgba($color: #000000, $alpha: 0.85);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  .item-name:hover {
    color: #1777ff;
  }
  .more {
    width: 50px;
    font-size: 12px;
    display: flex;
    align-items: center;
    float: inline-end;
    color: #007bff;
  }
  .more:hover {
    color: #94c1ff;
  }
  .more-text {
    cursor: pointer;
    padding-right: 5px;
  }

  .more-icon {
    cursor: pointer;
  }

  :deep(.el-tabs__header) {
    margin: 0;
  }
  :deep(.el-tabs__item) {
    font-size: 14px !important;
  }

  :deep(.el-tabs__active-bar) {
    bottom: 5px;
    height: 3px;
    width: 16px !important;
    margin-left: 6px;
  }
</style>