create-windy 0.6.21 → 0.7.0

package/template/apps/web/src/pages/system/components/department/DepartmentOrganizationForm.vue

@@ -8,7 +8,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { listSystemResource, type SystemRecord } from "@/services/system-api";
+import {
+  previewDepartmentTransition,
+  type SystemRecord,
+} from "@/services/system-api";
+
+import PagedSelectionList from "../PagedSelectionList.vue";
+import { departmentOptions, loadSelectionRecords } from "../selection-options";
 
 const props = defineProps<{
   item?: SystemRecord;
@@ -27,34 +33,65 @@ const transitionTargetId = shallowRef<string>();
 const isRoot = computed(() => Boolean(props.item && !props.item.parentId));
 const isDisabling = computed(
   () =>
-    props.item?.status === "active" &&
+    Boolean(props.item) &&
+    props.item?.status !== "disabled" &&
     form.value.status === "disabled" &&
     !isRoot.value,
 );
 const parentOptions = computed(() =>
-  departments.value.filter(
-    (department) =>
-      department.id !== props.item?.id &&
-      !isDescendant(department.id, props.item?.id),
-  ),
+  departmentOptions(departments.value, props.item?.id),
+);
+const baseline = shallowRef("");
+const dirty = computed(
+  () =>
+    JSON.stringify([form.value, transitionTargetId.value]) !== baseline.value,
 );
-const migrationOptions = computed(() =>
-  departments.value.filter(
-    (department) =>
-      department.id !== props.item?.id &&
-      !isDescendant(department.id, props.item?.id),
+const preview = shallowRef<{
+  childDepartmentCount: number;
+  userCount: number;
+  roleCount: number;
+}>();
+const requiresTarget = computed(() =>
+  Boolean(
+    preview.value &&
+    preview.value.childDepartmentCount +
+      preview.value.userCount +
+      preview.value.roleCount >
+      0,
   ),
 );
+const previewLoading = shallowRef(false);
+const previewError = shallowRef("");
+function markSaved() {
+  baseline.value = JSON.stringify([form.value, transitionTargetId.value]);
+}
+watch(isDisabling, async (value) => {
+  preview.value = undefined;
+  previewError.value = "";
+  if (!value || !props.item) return;
+  previewLoading.value = true;
+  try {
+    preview.value = await previewDepartmentTransition(props.item.id);
+  } catch (cause) {
+    previewError.value = cause instanceof Error ? cause.message : String(cause);
+  } finally {
+    previewLoading.value = false;
+  }
+});
 
 watch(
   () => [props.item, props.defaults] as const,
   () => {
-    form.value = {
-      ...props.defaults,
-      ...(props.item || {}),
-      status: props.item?.status || props.defaults.status || "active",
-    };
+    const source = { ...props.defaults, ...(props.item || {}) };
+    form.value = Object.fromEntries(
+      ["code", "name", "parentId", "order", "status"].map((key) => [
+        key,
+        source[key],
+      ]),
+    );
+    form.value.status ||= "active";
     transitionTargetId.value = undefined;
+    markSaved();
   },
   { immediate: true },
 );
@@ -65,13 +102,7 @@ async function loadDepartments() {
   loading.value = true;
   error.value = "";
   try {
-    const result = await listSystemResource("departments", {
-      page: 1,
-      pageSize: 100,
-      status: "active",
-      sort: "order,name",
-    });
-    departments.value = result.items;
+    departments.value = await loadSelectionRecords("departments", false);
   } catch (currentError) {
     error.value =
       currentError instanceof Error
@@ -87,6 +118,31 @@ function update(key: string, value: unknown) {
 }
 
 function submit() {
+  error.value = "";
+  if (
+    !String(form.value.code || "").trim() ||
+    !String(form.value.name || "").trim() ||
+    (!isRoot.value && !form.value.parentId)
+  ) {
+    error.value = "请填写部门编码、名称并选择上级部门。";
+    return;
+  }
+  if (
+    !Number.isInteger(Number(form.value.order)) ||
+    Number(form.value.order) < 0
+  ) {
+    error.value = "排序须为非负整数。";
+    return;
+  }
+  if (
+    isDisabling.value &&
+    (!preview.value ||
+      (requiresTarget.value && !transitionTargetId.value) ||
+      previewLoading.value)
+  ) {
+    error.value = "请等待影响预览加载成功；存在关联数据时须选择迁移目标。";
+    return;
+  }
   emit("submit", {
     ...form.value,
     ...(isDisabling.value
@@ -95,22 +151,13 @@ function submit() {
   });
 }
 
-function isDescendant(candidateId: string, ancestorId: unknown): boolean {
-  if (typeof ancestorId !== "string") return false;
-  const byId = new Map(
-    departments.value.map((department) => [department.id, department]),
-  );
-  const visited = new Set<string>();
-  let current = byId.get(candidateId);
-  while (typeof current?.parentId === "string" && !visited.has(current.id)) {
-    visited.add(current.id);
-    if (current.parentId === ancestorId) return true;
-    current = byId.get(current.parentId);
-  }
-  return false;
-}
-
-defineExpose({ submit });
+defineExpose({
+  submit,
+  markSaved,
+  get dirty() {
+    return dirty.value;
+  },
+});
 </script>
 
 <template>
@@ -131,35 +178,18 @@ defineExpose({ submit });
         @update:model-value="update('name', String($event))"
       />
     </label>
-    <label class="grid gap-2 text-sm font-medium">
+    <div class="grid gap-2 text-sm font-medium">
       <span>上级部门</span>
-      <Select
-        :model-value="typeof form.parentId === 'string' ? form.parentId : ''"
-        :disabled="loading || isRoot"
-        @update:model-value="update('parentId', String($event))"
-      >
-        <SelectTrigger class="w-full" aria-label="上级部门">
-          <SelectValue
-            :placeholder="
-              isRoot
-                ? '平台唯一根组织'
-                : loading
-                  ? '正在加载…'
-                  : '请选择上级部门'
-            "
-          />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem
-            v-for="department in parentOptions"
-            :key="department.id"
-            :value="department.id"
-          >
-            {{ String(department.name || department.code) }}
-          </SelectItem>
-        </SelectContent>
-      </Select>
-    </label>
+      <p v-if="isRoot" class="text-sm text-muted-foreground">平台唯一根组织</p>
+      <PagedSelectionList
+        v-else
+        :items="parentOptions"
+        :model-value="typeof form.parentId === 'string' ? [form.parentId] : []"
+        label="上级部门"
+        :disabled="loading"
+        @update:model-value="update('parentId', $event[0])"
+      />
+    </div>
     <label class="grid gap-2 text-sm font-medium">
       <span>排序</span>
       <Input
@@ -185,26 +215,32 @@ defineExpose({ submit });
         </SelectContent>
       </Select>
     </label>
-    <label v-if="isDisabling" class="grid gap-2 text-sm font-medium">
+    <div v-if="isDisabling" class="grid gap-2 text-sm font-medium">
       <span>关联数据迁移至</span>
-      <Select v-model="transitionTargetId">
-        <SelectTrigger class="w-full" aria-label="关联数据迁移目标">
-          <SelectValue placeholder="请选择启用部门" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem
-            v-for="department in migrationOptions"
-            :key="department.id"
-            :value="department.id"
-          >
-            {{ String(department.name || department.code) }}
-          </SelectItem>
-        </SelectContent>
-      </Select>
+      <p v-if="previewLoading" class="text-sm text-muted-foreground">
+        正在读取迁移影响…
+      </p>
+      <p v-else-if="previewError" class="text-sm text-destructive">
+        {{ previewError }}
+      </p>
+      <p v-else-if="preview" class="text-sm">
+        将迁移 {{ preview.childDepartmentCount }} 个直属下级部门、{{
+          preview.userCount
+        }}
+        个账号归属、{{ preview.roleCount }} 个角色数据范围。
+      </p>
+      <PagedSelectionList
+        :items="parentOptions"
+        :model-value="transitionTargetId ? [transitionTargetId] : []"
+        label="关联数据迁移目标"
+        clearable
+        :disabled="loading || previewLoading || !preview"
+        @update:model-value="transitionTargetId = $event[0]"
+      />
       <span class="text-xs font-normal text-muted-foreground">
-        下级部门、用户归属和角色自定义部门范围会一起迁移。
+        下级部门、用户归属和角色自定义部门范围会一起迁移；没有关联数据时可直接停用。
       </span>
-    </label>
+    </div>
     <p v-if="error" class="text-sm text-destructive">{{ error }}</p>
   </div>
 </template>

package/template/apps/web/src/pages/system/components/department/DepartmentOrganizationForm.webtest.ts

@@ -0,0 +1,57 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { Select } from "@/components/ui/select";
+import DepartmentOrganizationForm from "./DepartmentOrganizationForm.vue";
+
+const api = vi.hoisted(() => ({
+  listSystemResource: vi.fn(),
+  previewDepartmentTransition: vi.fn(),
+}));
+vi.mock("@/services/system-api", () => api);
+afterEach(() => vi.clearAllMocks());
+
+describe("部门停用预览", () => {
+  test.each([0, 1])(
+    "关联账号数 %s 时按预览决定是否要求迁移目标",
+    async (userCount) => {
+      api.listSystemResource.mockResolvedValue({
+        items: [{ id: "root", name: "总部", status: "active" }],
+        page: 1,
+        pageSize: 10,
+        total: 1,
+      });
+      api.previewDepartmentTransition.mockResolvedValue({
+        childDepartmentCount: 0,
+        userCount,
+        roleCount: 0,
+      });
+      const wrapper = mount(DepartmentOrganizationForm, {
+        props: {
+          defaults: {},
+          item: {
+            id: "dept",
+            code: "sales",
+            name: "销售部",
+            parentId: "root",
+            status: "active",
+            order: 10,
+          },
+        },
+      });
+      await flushPromises();
+      wrapper.getComponent(Select).vm.$emit("update:modelValue", "disabled");
+      await flushPromises();
+      (wrapper.vm as unknown as { submit(): void }).submit();
+      if (userCount) {
+        expect(wrapper.emitted("submit")).toBeUndefined();
+      } else {
+        expect(wrapper.emitted("submit")?.at(-1)?.[0]).toMatchObject({
+          code: "sales",
+          name: "销售部",
+          status: "disabled",
+        });
+        expect(wrapper.emitted("submit")?.at(-1)?.[0]).not.toHaveProperty("id");
+      }
+    },
+  );
+});

package/template/apps/web/src/pages/system/components/department/DepartmentOrganizationTable.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { computed, shallowRef, watch } from "vue";
+import { ChevronDownIcon, ChevronRightIcon } from "@lucide/vue";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import DataPagination from "@/components/common/DataPagination.vue";
+import type { SystemRecord } from "@/services/system-api";
+
+const props = defineProps<{
+  items: readonly SystemRecord[];
+  keyword: string;
+  loading?: boolean;
+  editable?: boolean;
+  deletable?: boolean;
+}>();
+defineEmits<{
+  edit: [item: SystemRecord];
+  remove: [item: SystemRecord];
+  view: [item: SystemRecord];
+}>();
+const collapsed = shallowRef<ReadonlySet<string>>(new Set());
+const page = shallowRef(1);
+const pageSize = shallowRef(10);
+const hierarchy = computed(() => {
+  const byId = new Map(props.items.map((item) => [item.id, item]));
+  const children = new Map<string, SystemRecord[]>();
+  for (const item of props.items) {
+    const parentId =
+      typeof item.parentId === "string" && byId.has(item.parentId)
+        ? item.parentId
+        : "";
+    const siblings = children.get(parentId) || [];
+    siblings.push(item);
+    children.set(parentId, siblings);
+  }
+  for (const siblings of children.values())
+    siblings.sort(
+      (a, b) =>
+        Number(a.order || 0) - Number(b.order || 0) ||
+        String(a.name).localeCompare(String(b.name), "zh-CN"),
+    );
+  const rows: Array<{
+    item: SystemRecord;
+    depth: number;
+    path: string;
+    hasChildren: boolean;
+  }> = [];
+  const visited = new Set<string>();
+  const keyword = props.keyword.trim().toLocaleLowerCase();
+  function visit(item: SystemRecord, depth: number, path: string[]) {
+    if (visited.has(item.id)) return;
+    visited.add(item.id);
+    const names = [...path, String(item.name || item.code || item.id)];
+    const childItems = children.get(item.id) || [];
+    if (
+      !keyword ||
+      [item.name, item.code, names.join(" / ")].some((value) =>
+        String(value || "")
+          .toLocaleLowerCase()
+          .includes(keyword),
+      )
+    ) {
+      rows.push({
+        item,
+        depth,
+        path: names.join(" / "),
+        hasChildren: childItems.length > 0,
+      });
+    }
+    if (keyword || !collapsed.value.has(item.id))
+      for (const child of childItems) visit(child, depth + 1, names);
+  }
+  for (const item of children.get("") || []) visit(item, 0, []);
+  return rows;
+});
+const visible = computed(() =>
+  hierarchy.value.slice(
+    (page.value - 1) * pageSize.value,
+    page.value * pageSize.value,
+  ),
+);
+watch(
+  () => props.keyword,
+  () => {
+    page.value = 1;
+  },
+);
+watch(
+  () => hierarchy.value.length,
+  (total) => {
+    page.value = Math.min(
+      page.value,
+      Math.max(1, Math.ceil(total / pageSize.value)),
+    );
+  },
+);
+function toggle(id: string) {
+  const next = new Set(collapsed.value);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  collapsed.value = next;
+}
+function setPageSize(size: number) {
+  pageSize.value = size;
+  page.value = 1;
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <p class="text-sm text-muted-foreground">
+        按部门层级展示；展开或收起下级，每页显示 {{ pageSize }} 条。
+      </p>
+      <div class="flex gap-2">
+        <Button variant="outline" size="sm" @click="collapsed = new Set()"
+          >展开全部</Button
+        >
+        <Button
+          variant="outline"
+          size="sm"
+          @click="collapsed = new Set(items.map((item) => item.id))"
+          >收起全部</Button
+        >
+      </div>
+    </div>
+    <div class="overflow-hidden rounded-md border" :aria-busy="loading">
+      <Table>
+        <TableHeader
+          ><TableRow>
+            <TableHead>部门</TableHead><TableHead>编码</TableHead
+            ><TableHead>部门路径</TableHead> <TableHead>直属成员</TableHead
+            ><TableHead>排序</TableHead><TableHead>状态</TableHead
+            ><TableHead class="text-right">操作</TableHead>
+          </TableRow></TableHeader
+        >
+        <TableBody>
+          <TableRow v-if="loading"
+            ><TableCell colspan="7" class="h-24 text-center"
+              >正在加载组织…</TableCell
+            ></TableRow
+          >
+          <TableRow v-else-if="!visible.length"
+            ><TableCell
+              colspan="7"
+              class="h-24 text-center text-muted-foreground"
+              >暂无匹配部门</TableCell
+            ></TableRow
+          >
+          <TableRow v-for="row in visible" v-else :key="row.item.id">
+            <TableCell>
+              <div
+                class="flex items-center gap-1"
+                :style="{ paddingLeft: `${Math.min(row.depth, 8) * 16}px` }"
+              >
+                <Button
+                  v-if="row.hasChildren"
+                  variant="ghost"
+                  size="icon-sm"
+                  :aria-expanded="!collapsed.has(row.item.id)"
+                  :aria-label="`${collapsed.has(row.item.id) ? '展开' : '收起'}${row.item.name}的下级部门`"
+                  :disabled="Boolean(keyword)"
+                  @click="toggle(row.item.id)"
+                >
+                  <ChevronRightIcon
+                    v-if="collapsed.has(row.item.id) && !keyword"
+                  /><ChevronDownIcon v-else />
+                </Button>
+                <span v-else class="w-8" aria-hidden="true" />
+                <span class="font-medium">{{ row.item.name }}</span>
+              </div>
+            </TableCell>
+            <TableCell>{{ row.item.code }}</TableCell
+            ><TableCell class="text-muted-foreground">{{ row.path }}</TableCell>
+            <TableCell>{{ row.item.userCount ?? "—" }}</TableCell
+            ><TableCell>{{ row.item.order ?? "—" }}</TableCell>
+            <TableCell
+              ><Badge variant="secondary">{{
+                row.item.status === "active" ? "启用" : "停用"
+              }}</Badge></TableCell
+            >
+            <TableCell
+              ><div class="flex justify-end gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  @click="
+                    $emit('view', { ...row.item, departmentPath: row.path })
+                  "
+                  >详情</Button
+                >
+                <Button
+                  v-if="editable"
+                  variant="outline"
+                  size="sm"
+                  @click="$emit('edit', row.item)"
+                  >编辑</Button
+                >
+                <Button
+                  v-if="deletable && row.item.parentId"
+                  variant="destructive"
+                  size="sm"
+                  @click="$emit('remove', row.item)"
+                  >删除</Button
+                >
+              </div></TableCell
+            >
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+    <DataPagination
+      v-model:page="page"
+      :page-size="pageSize"
+      :total="hierarchy.length"
+      @update:page-size="setPageSize"
+    />
+  </div>
+</template>

package/template/apps/web/src/pages/system/components/department/DepartmentOrganizationTable.webtest.ts

@@ -0,0 +1,62 @@
+import { describe, expect, test } from "vitest";
+import { mount } from "@vue/test-utils";
+import DepartmentOrganizationTable from "./DepartmentOrganizationTable.vue";
+const items = [
+  {
+    id: "root",
+    name: "总部",
+    code: "root",
+    order: 0,
+    status: "active",
+    userCount: 0,
+  },
+  ...Array.from({ length: 12 }, (_, index) => ({
+    id: `dept_${index}`,
+    parentId: "root",
+    name: `部门${index + 1}`,
+    code: `d${index}`,
+    order: index + 1,
+    status: "active",
+    userCount: index,
+  })),
+];
+describe("部门组织树", () => {
+  test("默认每页10条，后续部门可翻页查看且保留完整路径", async () => {
+    const wrapper = mount(DepartmentOrganizationTable, {
+      props: { items, keyword: "", editable: true, deletable: true },
+    });
+    expect(wrapper.findAll("tbody tr")).toHaveLength(10);
+    expect(wrapper.text()).toContain("总部 / 部门9");
+    await wrapper.get('[data-testid="next-page"]').trigger("click");
+    expect(wrapper.findAll("tbody tr")).toHaveLength(3);
+    expect(wrapper.text()).toContain("总部 / 部门12");
+    const detail = wrapper
+      .findAll("button")
+      .find((button) => button.text() === "详情");
+    await detail?.trigger("click");
+    expect(wrapper.emitted("view")?.[0]?.[0]).toEqual(
+      expect.objectContaining({
+        departmentPath: "总部 / 部门10",
+        userCount: 9,
+      }),
+    );
+    wrapper.unmount();
+  });
+  test("收起层级重新计算分页，搜索能找到隐藏下级，根组织不显示删除", async () => {
+    const wrapper = mount(DepartmentOrganizationTable, {
+      props: { items, keyword: "", editable: true, deletable: true },
+    });
+    await wrapper
+      .get('button[aria-label="收起总部的下级部门"]')
+      .trigger("click");
+    expect(wrapper.findAll("tbody tr")).toHaveLength(1);
+    expect(wrapper.get("tbody").text()).not.toContain("删除");
+    await wrapper.setProps({ keyword: "部门12" });
+    expect(wrapper.findAll("tbody tr")).toHaveLength(1);
+    expect(wrapper.text()).toContain("总部 / 部门12");
+    await wrapper.setProps({ editable: false, deletable: false });
+    expect(wrapper.get("tbody").text()).not.toContain("编辑");
+    expect(wrapper.get("tbody").text()).not.toContain("删除");
+    wrapper.unmount();
+  });
+});