sl-sfy-safety/src/views/auth/dept/dept.vue

<template>
  <PageWrapper>
    <div class="search"
      ><span class="searchLabel"> 搜索：</span><el-input v-model="searchKey" placeholder="请输入关键字进行搜索" />
    </div>
    <el-table :data="filterData" row-key="id" :tree-props="treeProps" default-expand-all>
      <el-table-column label="组织名称">
        <template #default="{ row }">
          {{ `${row.deptName} (${row.userCount})` }}
        </template>
      </el-table-column>
    </el-table>

    <CreateDrawer
      ref="createDrawerRef"
      :title="drawerTitle"
      :deptList="tableData"
      :data-source="currentDept"
      :width="450"
      @change="reloadTable"
    />
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { computed, onMounted, reactive, ref } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import { getAllDepartments } from '@/api/auth/dept';
  import CreateDrawer from './CreateDrawer.vue';
  import type { DeptTree, DeptTreeItem } from '@/types/dept/type';
  import { filterTree } from '@/utils/tree';

  const tableData = ref<DeptTree[]>([]);
  const treeProps = reactive({
    checkStrictly: false,
  });
  const createDrawerRef = ref();
  const searchKey = ref('');
  const drawerTitle = ref('添加部门');
  const currentDept = ref<DeptTreeItem>({
    id: null,
    deptName: '',
    parentId: null,
    orderNum: undefined,
    createdBy: 0,
    updatedBy: 0,
    createdAt: '',
    updatedAt: '',
    isDeleted: 0,
    tenantId: 0,
    userCount: 0,
  });

  const loadDataTable = async () => {
    const result = await getAllDepartments();
    tableData.value = result;
  };

  const filterData = computed(() => {
    if (!searchKey.value) {
      return tableData.value;
    }
    return filterTree({ nodes: tableData.value, value: searchKey.value, key: 'deptName' });
  });

  function reloadTable() {
    loadDataTable();
  }

  onMounted(() => {
    loadDataTable();
  });
</script>
<style scoped>
  .el-space--horizontal {
    align-items: center;
    gap: 0px 20px;
  }

  .el-tooltip__trigger {
    width: 16px;
  }

  .tooltip__password {
    color: var(--el-color-primary);
  }

  .box-item {
    position: absolute;
    top: 0;
    right: 0;
  }

  .el-space__item:hover {
    cursor: pointer;
  }
  .search {
    margin: 20px;
    width: 300px;
    display: flex;
    .searchLabel {
      width: 65px;
    }
  }
</style>