vue3实现部门的管理

2023-12-30 00:57:21

前言

在现代企业中，组织架构是不可或缺的一部分，它定义了公司的结构、职责和汇报关系。部门作为组织架构中的基本单元，其维护和管理尤为重要。本文将使用vue3构建一个部门管理系统，实现部门信息的增删改查和拖拽排序功能。

构建部门数据模型

首先，我们需要定义一个部门数据模型，它将包含部门的基本信息，如部门名称、上级部门、排序等。

export interface Department {
  id: number;
  name: string;
  parentId: number;
  level: number;
  sort: number;
  sortAll: number;
  children: Department[];
}

维护部门信息

有了数据模型，我们就可以开始维护部门信息了。我们使用vuex作为状态管理工具，定义一个名为"department"的模块来管理部门数据。

import { defineStore } from 'pinia';
import { Department } from '@/models/department';

export const useDepartmentStore = defineStore('department', {
  state: () => ({
    departments: [] as Department[],
  }),
  getters: {
    getDepartmentById: (state) => (id: number) => state.departments.find((d) => d.id === id),
  },
  actions: {
    addDepartment(department: Department) {
      this.departments.push(department);
    },
    updateDepartment(department: Department) {
      const index = this.departments.findIndex((d) => d.id === department.id);
      if (index !== -1) {
        this.departments[index] = department;
      }
    },
    deleteDepartment(id: number) {
      const index = this.departments.findIndex((d) => d.id === id);
      if (index !== -1) {
        this.departments.splice(index, 1);
      }
    },
  },
});

内置类型转换

为了简化操作，我们将内置类型转换功能。当用户输入非数字类型的值时，系统会自动将其转换为数字类型。

export const toNumber = (value: string) => {
  return parseInt(value, 10) || 0;
};

自动设置字段

我们还可以自动设置一些字段，如parentID、level、sort和sortAll。

export const setFields = (department: Department, parentId: number = 0) => {
  department.parentId = parentId;
  department.level = parentId === 0 ? 0 : 1 + this.getDepartmentById(parentId).level;
  department.sort = 0;
  department.sortAll = `${department.parentId}.${department.sort}`;
};

扩展性

为了提高系统的可扩展性，我们提供了一个扩展机制，允许用户添加自定义字段和方法。

export const extendDepartment = (department: Department, customFields: any) => {
  Object.assign(department, customFields);
};

拖拽排序

最后，我们实现拖拽排序功能。我们使用vue-draggable-resizable组件来实现这一功能。

<template>
  <draggable-resizable
    v-model="departments"
    :group="group"
    :item-key="department => department.id"
    @end="handleEnd"
  >
    <template #item="{ element, index }">
      <div class="item">
        {{ department.name }}
      </div>
    </template>
  </draggable-resizable>
</template>

<script>
import { ref } from 'vue';
import { DraggableResizable } from 'vue-draggable-resizable';
import { setFields, useDepartmentStore } from '@/store/department';

export default {
  components: { DraggableResizable },
  setup() {
    const departmentStore = useDepartmentStore();
    const departments = ref(departmentStore.departments);
    const group = 'departments';

    const handleEnd = (e) => {
      // 更新排序
      departments.value.forEach((d, i) => {
        d.sort = i;
        d.sortAll = `${d.parentId}.${d.sort}`;
        departmentStore.updateDepartment(d);
      });
    };

    return {
      departments,
      group,
      handleEnd,
    };
  },
};
</script>