leaser_front/src/views/setting/system/index.vue

<template>
  <div class="setting_user_list">
    <Breadcrumb :items="['menu.setting', 'menu.setting.system']" />
    <a-row :gutter="12">
      <a-col flex="310px">
        <a-card
          class="full_height"
          :bordered="false"
          :title="$t('menu.setting.system')"
        >
          <ul class="system_setting_list">
            <li
              v-for="item in systemSettingList"
              :key="item.id"
              :class="[
                'system_setting_item',
                { active: currentActive === item.id },
              ]"
              @click="handleChooseSystemItem(item.id)"
            >
              <component :is="item.icon" class="mr-2" />
              <p class="name">{{ item.name }}</p>
            </li>
          </ul>
        </a-card>
      </a-col>
      <a-col flex="auto">
        <organization v-if="currentActive === 4" />
        <div v-else>开发中{{ currentActive }}</div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { useRoute } from 'vue-router';
  import {
    IconSettings,
    IconSafe,
    IconPaste,
    IconFullscreen,
    IconTiktokColor,
  } from '@arco-design/web-vue/es/icon';
  import organization from './organization.vue';
  // import { CreateDepartmentParams, createDepartment, getDepartmentList, DepartmentItem } from '@/api/setting'
  const { t } = useI18n();
  const route = useRoute();
  const currentActive = ref(1);

  // 监听路由query参数中的active参数
  watch(
    () => route.query.active,
    (newActive) => {
      if (newActive) {
        const activeValue = parseInt(newActive as string, 10);
        if (!Number.isNaN(activeValue)) {
          currentActive.value = activeValue;
        }
      }
    },
    { immediate: true }
  );

  const systemSettingList = [
    { id: 1, name: t('general-setting'), icon: IconSettings },
    { id: 2, name: t('security-setting'), icon: IconSafe },
    { id: 3, name: t('company-info'), icon: IconPaste },
    { id: 4, name: t('organization'), icon: IconFullscreen },
    { id: 5, name: t('appearance-setting'), icon: IconTiktokColor },
  ];
  const handleChooseSystemItem = (id: number) => {
    currentActive.value = id;
  };

  // watch()
</script>

<style lang="less" scoped>
  .setting_user_list {
    .system_setting_list {
      .system_setting_item {
        cursor: pointer;
        padding: 8px;
        width: 100%;

        &.active {
          background-color: #efefef;
        }

        display: flex;
        align-items: center;

        .name {
          margin-left: 12px;
        }
      }
    }
  }
</style>