feat: 对接系统配置中的组织架构90%

2025-06-28 00:10:30 +08:00
parent c5c61f0573
commit f6e4159889
16 changed files with 901 additions and 49 deletions
@@ -1,3 +1,82 @@
 <template>
-    <div>帅哥kilo</div>
+  <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 } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  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 currentActive = ref(4);
+  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;
+  };
+</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>