vome-core 0.3.8 → 0.3.9

package/dist/admin/components/vm-dept-tree.vue

@@ -69,42 +69,22 @@
     </div>
   </vm-aside>
 
-  <Dialog v-model:open="formOpen">
-    <DialogContent class="vm-dept-tree__dialog">
-      <DialogHeader>
-        <DialogTitle>{{ formMode === 'add' ? '新增部门' : '编辑部门' }}</DialogTitle>
-      </DialogHeader>
-      <div class="vm-dept-tree__form">
-        <div class="vm-dept-tree__field">
-          <Label>上级部门</Label>
-          <Input :model-value="parentName" disabled />
-        </div>
-        <div class="vm-dept-tree__field">
-          <Label>名称 <span class="vm-dept-tree__req">*</span></Label>
-          <Input v-model="form.name" placeholder="部门名称" />
-        </div>
-        <div class="vm-dept-tree__field">
-          <Label>排序</Label>
-          <Input v-model="form.orderNum" type="number" placeholder="0" />
-        </div>
-      </div>
-      <DialogFooter>
-        <Button variant="outline" :disabled="submitting" @click="formOpen = false">
-          取消
-        </Button>
-        <Button :disabled="submitting" @click="submitForm">
-          {{ submitting ? '保存中…' : '确定' }}
-        </Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
+  <vm-form-dialog
+    v-model:open="formOpen"
+    v-model="formData"
+    :title="formMode === 'add' ? '新增部门' : '编辑部门'"
+    :items="dialogItems"
+    @submit="onFormSubmit"
+  />
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { toast } from 'vue-sonner'
 import { flattenTree } from '../lib/tree'
 import { vmConfirm } from '../crud/confirm'
+import { mergeByProp } from '../crud/auto-fields'
+import type { CrudFormItem } from '../../../typings/admin/comm/crud'
+import type { VmFormDialogSubmitHelpers } from './vm-form-dialog.vue'
 
 defineOptions({ name: 'vm-dept-tree' })
 
@@ -127,6 +107,13 @@ type FlatRow = {
   orderNum: number
 }
 
+export type DeptFormPayload = {
+  name: string
+  orderNum: number
+  parentId: number | null
+  id?: number
+} & Record<string, unknown>
+
 const props = withDefaults(
   defineProps<{
     /** 已是树形结构的部门数据 */
@@ -140,6 +127,11 @@ const props = withDefaults(
     canUpdate?: boolean
     canDelete?: boolean
     canRestore?: boolean
+    /**
+     * 追加/覆盖表单字段（CrudFormItem）；与内置「上级/名称/排序」合并，同 prop 以传入为准。
+     * 任意控件：`component: { name: 'vm-select', props: {…} }`
+     */
+    formItems?: CrudFormItem[]
   }>(),
   {
     data: () => [],
@@ -151,6 +143,7 @@ const props = withDefaults(
     canUpdate: false,
     canDelete: false,
     canRestore: false,
+    formItems: () => [],
   },
 )
 
@@ -158,19 +151,17 @@ const emit = defineEmits<{
   'update:modelValue': [v: number | null]
   change: [v: number | null, meta: { name: string; ids: number[] }]
   refresh: []
-  add: [payload: { name: string; orderNum: number; parentId: number | null }]
-  update: [payload: { id: number; name: string; orderNum: number; parentId: number | null }]
+  add: [payload: DeptFormPayload]
+  update: [payload: DeptFormPayload]
   delete: [payload: { id: number }]
   restore: [payload: { id: number }]
   forceDelete: [payload: { id: number }]
 }>()
 
-const submitting = ref(false)
 const expanded = ref(new Set<number>())
 const formOpen = ref(false)
 const formMode = ref<'add' | 'edit'>('add')
-const form = ref({ id: 0, name: '', orderNum: '0', parentId: null as number | null })
-const parentName = ref('顶级')
+const formData = ref<Record<string, unknown>>({})
 const trashBusyId = ref<number | null>(null)
 
 const canManage = computed(
@@ -178,6 +169,33 @@ const canManage = computed(
 )
 const canTrashOps = computed(() => props.canRestore || props.canDelete)
 
+const builtinFormItems = computed((): CrudFormItem[] => [
+  {
+    prop: 'parentLabel',
+    label: '上级部门',
+    span: 24,
+    disabled: true,
+  },
+  {
+    prop: 'name',
+    label: '名称',
+    span: 24,
+    required: true,
+    placeholder: '部门名称',
+  },
+  {
+    prop: 'orderNum',
+    label: '排序',
+    span: 24,
+    type: 'number',
+    value: 0,
+  },
+])
+
+const dialogItems = computed(() =>
+  mergeByProp(builtinFormItems.value, props.formItems || []),
+)
+
 const idNameMap = computed(() => {
   const map = new Map<number, string>()
   const walk = (list: DeptTreeNode[]) => {
@@ -272,46 +290,51 @@ watch(
   },
 )
 
+function parentLabelOf(parentId: number | null) {
+  return parentId == null ? '顶级' : idNameMap.value.get(parentId) || String(parentId)
+}
+
 function openAdd(parentId: number | null) {
   formMode.value = 'add'
-  form.value = { id: 0, name: '', orderNum: '0', parentId }
-  parentName.value =
-    parentId == null ? '顶级' : idNameMap.value.get(parentId) || String(parentId)
+  formData.value = {
+    id: 0,
+    name: '',
+    orderNum: 0,
+    parentId,
+    parentLabel: parentLabelOf(parentId),
+  }
   formOpen.value = true
 }
 
 function openEdit(row: FlatRow) {
   formMode.value = 'edit'
-  form.value = {
+  formData.value = {
     id: row.id,
     name: row.label,
-    orderNum: String(row.orderNum ?? 0),
+    orderNum: row.orderNum ?? 0,
     parentId: row.parentId,
+    parentLabel: parentLabelOf(row.parentId),
   }
-  parentName.value =
-    row.parentId == null ? '顶级' : idNameMap.value.get(row.parentId) || String(row.parentId)
   formOpen.value = true
 }
 
-function submitForm() {
-  const name = form.value.name.trim()
-  if (!name) {
-    toast.error('请填写部门名称')
-    return
-  }
-  submitting.value = true
-  const payload = {
-    name,
-    orderNum: Number(form.value.orderNum || 0),
-    parentId: form.value.parentId,
+function onFormSubmit(data: Record<string, unknown>, helpers: VmFormDialogSubmitHelpers) {
+  const { parentLabel: _pl, ...rest } = data
+  const payload: DeptFormPayload = {
+    ...rest,
+    name: String(data.name ?? '').trim(),
+    orderNum: Number(data.orderNum ?? 0),
+    parentId:
+      data.parentId == null || data.parentId === ''
+        ? null
+        : Number(data.parentId),
   }
   if (formMode.value === 'add') {
     emit('add', payload)
   } else {
-    emit('update', { ...payload, id: form.value.id })
+    emit('update', { ...payload, id: Number(data.id) })
   }
-  formOpen.value = false
-  submitting.value = false
+  helpers.close()
 }
 
 async function remove(row: FlatRow) {
@@ -469,22 +492,4 @@ defineExpose({ idNameMap })
     }
   }
 }
-
-.vm-dept-tree__dialog {
-  width: min(420px, calc(100vw - 32px));
-}
-
-.vm-dept-tree__form {
-  display: grid;
-  gap: 12px;
-}
-
-.vm-dept-tree__field {
-  display: grid;
-  gap: 6px;
-}
-
-.vm-dept-tree__req {
-  color: var(--destructive);
-}
 </style>