feat: 设置模块用户列表功能90%

2025-07-06 00:12:32 +08:00
parent 1cfa0b6e4c
commit 293beb9f5d
17 changed files with 1758 additions and 147 deletions
@@ -1,7 +1,7 @@
 <template>
  <a-modal
    :visible="visible"
-    :title="isEdit ? '编辑部门' : '新增部门'"
+    :title="isEdit ? $t('edit-department') : $t('add-department')"
    unmount-on-close
    @ok="handleSubmit"
    @cancel="handleCancel"
@@ -14,36 +14,48 @@
      layout="vertical"
    >
      <!-- 部门名称 -->
-      <a-form-item :label="t('department-name')" field="name" required>
-        <a-input v-model="form.name" placeholder="请输入部门名称" />
+      <a-form-item :label="$t('department-name')" field="name" required>
+        <a-input
+          v-model="form.name"
+          :placeholder="
+            $t('please.enter', { placeholder: $t('department-name') })
+          "
+        />
      </a-form-item>

      <!-- 所属部门 -->
-      <a-form-item :label="t('belongto-department')" field="parent_id" required>
+      <a-form-item
+        :label="$t('belongto-department')"
+        field="parent_id"
+        required
+      >
        <a-tree-select
          v-model="form.parent_id"
          :data="departmentListData"
          :field-names="{ key: 'id', title: 'name', children: 'children' }"
-          placeholder="请选择所属部门"
+          :placeholder="
+            $t('please.select', { placeholder: $t('belongto-department') })
+          "
          allow-clear
        />
      </a-form-item>

      <!-- 部门主管 -->
-      <a-form-item :label="t('department-head')" field="user_id">
+      <a-form-item :label="$t('department-head')" field="user_id">
        <a-select
          v-model="form.user_id"
          :options="props.userListData"
-          placeholder="请选择部门主管"
+          :placeholder="
+            $t('please.select', { placeholder: $t('department-head') })
+          "
          allow-clear
        />
      </a-form-item>
-
      <!-- 备注 -->
-      <a-form-item :label="t('remark')" field="remark">
+      <a-form-item :label="$t('remark')" field="remark">
        <a-textarea
          v-model="form.remark"
-          placeholder="请输入备注"
+          :placeholder="$t('please.enter', { placeholder: $t('remark') })"
          allow-clear
        />
      </a-form-item>
@@ -75,17 +87,26 @@
    user_id?: number;
    remark?: string;
  }
+
+  interface TreeNode {
+    id: string | number;
+    name: string;
+    children?: TreeNode[];
+  }
+
  const props = defineProps<{
    visible: boolean;
    isEdit: boolean;
    record?: DepartmentItem | null;
-    departmentListData: any[]; // 新增
+    departmentListData: TreeNode[]; // 修复类型
    userListData: UserList;
  }>();
+
  const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void;
    (e: 'submitted'): void;
  }>();
+
  //  表单数据
  const formRef = ref<FormInstance>();
  const form = reactive<DepartmentForm>({
@@ -99,7 +120,12 @@
  const { t } = useI18n();
  //  校验规则
  const rules = {
-    name: [{ required: true, message: '请输入部门名称' }],
+    name: [
+      {
+        required: true,
+        message: t('please.enter', { placeholder: t('department') }),
+      },
+    ],
    parent_id: [{ required: true, message: '请选择所属部门' }],
  };

@@ -33,8 +33,9 @@
 </template>

 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
  import { useI18n } from 'vue-i18n';
+  import { useRoute } from 'vue-router';
  import {
    IconSettings,
    IconSafe,
@@ -45,7 +46,23 @@
  import organization from './organization.vue';
  // import { CreateDepartmentParams, createDepartment, getDepartmentList, DepartmentItem } from '@/api/setting'
  const { t } = useI18n();
-  const currentActive = ref(4);
+  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 },
@@ -56,6 +73,8 @@
  const handleChooseSystemItem = (id: number) => {
    currentActive.value = id;
  };
+
+  // watch()
 </script>

 <style lang="less" scoped>
@@ -93,9 +93,9 @@
 </template>

 <script lang="ts" setup>
-  import { reactive, ref, watch, onMounted } from 'vue';
+  import { ref, watch, onMounted } from 'vue';
  import { useI18n } from 'vue-i18n';
-  import useDepartmentList from '@/views/setting/composables/useDepartmentList';
+  import useDepartmentList from '@/composables/useDepartmentList';
  import {
    DepartmentItem,
    getAllUserList,
@@ -114,9 +114,10 @@
    getDepartmentListData,
    getDepartmentDetailData,
  } = useDepartmentList();
-  const emit = defineEmits(['onSelectTree']);
+
  const expandedKeys = ref<(string | number)[]>([]);
  const { t } = useI18n();
+
  watch(
    allDepartmentKeys,
    (val) => {
@@ -129,7 +130,14 @@
  const isEdit = ref<boolean>(false);
  const departmentDetailInfo = ref<DepartmentItem | null>(null);

-  const resetEditIcon = (nodes: any[]) => {
+  interface TreeNode {
+    id: string | number;
+    isShowEditIcon?: boolean;
+    children?: TreeNode[];
+    level?: number;
+  }
+
+  const resetEditIcon = (nodes: TreeNode[]) => {
    nodes.forEach((node) => {
      node.isShowEditIcon = false;
      if (node.children && node.children.length > 0) {
@@ -137,21 +145,26 @@
      }
    });
  };
-  const currentNode = ref<any>(null);
-  const onSelect = debounce(async (_: (string | number)[], event: any) => {
-    const { node } = event;
-    if (node.id === currentNode.value?.id) return;
-    currentNode.value = node;
-    // 递归重置所有节点的 isShowEditIcon
-    resetEditIcon(departmentListData.value);
-    // 只设置当前节点
-    if (currentNode.value.level !== 1) {
-      node.isShowEditIcon = true;
-    }
-    departmentDetailInfo.value = await getDepartmentDetailData(
-      currentNode.value.id
-    );
-  }, 300);
+
+  const currentNode = ref<TreeNode | null>(null);
+
+  const onSelect = debounce(
+    async (_: (string | number)[], event: { node: TreeNode }) => {
+      const { node } = event;
+      if (node.id === currentNode.value?.id) return;
+      currentNode.value = node;
+      // 递归重置所有节点的 isShowEditIcon
+      resetEditIcon(departmentListData.value);
+      // 只设置当前节点
+      if (currentNode.value.level !== 1) {
+        node.isShowEditIcon = true;
+      }
+      departmentDetailInfo.value = await getDepartmentDetailData(
+        Number(currentNode.value.id)
+      );
+    },
+    300
+  );

  // 所有用户数据
  const allUserList = ref<UserList>([]);
@@ -162,39 +175,43 @@
      const { code, data } = await getAllUserList({
        keyword: userKeyword.value,
      });
-      if (code === 200 && data?.length) {
-        allUserList.value = data;
+      if (code === 200) {
+        const { user } = data;
+        allUserList.value = Array.isArray(user) ? user : [];
      }
    } catch (error) {
-      console.error('获取所以用户数据失败：', error);
+      // 处理错误
    }
  };

  const handleAdd = () => {
-    showModal.value = true;
    isEdit.value = false;
+    departmentDetailInfo.value = null;
+    showModal.value = true;
  };
+
  const handleEdit = () => {
    showModal.value = true;
    isEdit.value = true;
  };
-  const handleDelete = async (item) => {
+
+  const handleDelete = async (item: { id: string | number }) => {
    const { id } = item;
    try {
-      const { code, message } = await delDepartment(id);
+      const { code, message } = await delDepartment(Number(id));
      if (code === 200) {
        Message.success(message);
        getDepartmentListData();
      }
    } catch (error) {
-      console.log('删除失败：', error);
+      // 处理错误
    }
  };

-  const handleMoveUp = async (item) => {
+  const handleMoveUp = async (item: { id: string | number }) => {
    const { id } = item;
    try {
-      const { code, message } = await departmentSetUp(id);
+      const { code, message } = await departmentSetUp(Number(id));
      if (code === 200) {
        Message.success(message);
        getDepartmentListData();
@@ -202,13 +219,14 @@
        Message.info(message);
      }
    } catch (error) {
-      console.log('向上移动失败：', error);
+      // 处理错误
    }
  };
-  const handleMoveDown = async (item) => {
+
+  const handleMoveDown = async (item: { id: string | number }) => {
    const { id } = item;
    try {
-      const { code, message } = await departmentSetDown(id);
+      const { code, message } = await departmentSetDown(Number(id));
      if (code === 200) {
        Message.success(message);
        getDepartmentListData();
@@ -216,7 +234,7 @@
        Message.info(message);
      }
    } catch (error) {
-      console.log('向下移动失败：', error);
+      // 处理错误
    }
  };