cx-chat 0.0.1

package/src/views/page-system/department/modal/member-role-modal.tsx

@@ -0,0 +1,128 @@
+import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { updateUserDepartmentRoleAPI } from '@/api/system/department'
+import { useToast } from '@/contexts/ToastContext'
+import { CxForm, CxFormItem, CxModal, CxSelect, useCxModal } from '@cx-ui'
+
+type OpenPayload = {
+  row?: any
+  departmentId?: number | string
+}
+
+type MemberRoleModalSubmitPayload = {
+  row: any
+  role: number
+  departmentId?: number | string
+}
+
+type MemberRoleModalProps = {
+  onOk?: (payload: MemberRoleModalSubmitPayload) => Promise<boolean | void> | boolean | void
+}
+
+/**
+ * 规范化成员角色值，避免弹框打开时下拉值异常。
+ */
+function normalizeMemberRole(role: any): number {
+  if (role === 20 || role === '20') return 20
+  if (role === 30 || role === '30') return 30
+  return 10
+}
+
+const MemberRoleModal = forwardRef(function MemberRoleModal(
+  props: MemberRoleModalProps,
+  ref,
+) {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const { onOk } = props
+  const [currentPayload, setCurrentPayload] = useState<OpenPayload | null>(null)
+  const [role, setRole] = useState<number>(10)
+  const [submitting, setSubmitting] = useState(false)
+
+  const modal = useCxModal({
+    onOpen: (payload: OpenPayload) => {
+      const row = payload?.row
+      setCurrentPayload(payload || null)
+      setRole(normalizeMemberRole(row?.departmentRole))
+    },
+    onClose: () => {
+      setCurrentPayload(null)
+      setRole(10)
+    },
+  })
+
+  const { isOpen, close } = modal
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  const roleOptions = useMemo(
+    () => [
+      { value: 10, label: t('system.department.roles.member') }, // 成员
+      { value: 20, label: t('system.department.roles.manager') }, // 管理员
+      { value: 30, label: t('system.department.roles.owner') }, // 负责人
+    ],
+    [t],
+  )
+
+  /**
+   * 确认设置成员角色并调用更新接口。
+   */
+  const handleConfirm = async () => {
+    const userId = currentPayload?.row?.userId
+    const departmentId = currentPayload?.departmentId
+    if (userId == null || userId === '') return
+    setSubmitting(true)
+    try {
+      const params = {
+        departmentId,
+        userId,
+        departmentRole: role,
+      }
+      await updateUserDepartmentRoleAPI(params)
+      showToast(t('common.operation_success'), 'success') // 操作成功
+      const result = await onOk?.({
+        row: currentPayload?.row,
+        role,
+        departmentId,
+      })
+      if (result === false) return
+      close()
+    } catch (error: any) {
+      showToast(error?.message || t('common.operation_failed'), 'error') // 操作失败
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <CxModal
+      title="设置部门角色"
+      isOpen={isOpen}
+      onClose={close}
+      opeType="edit"
+      onSubmit={handleConfirm}
+      submitting={submitting}
+      modalConfig={{ width: 420 }}
+    >
+      <CxForm layout="vertical">
+        {/* 成员角色 */}
+        <CxFormItem label={t('system.department.fields.role')}>
+          <CxSelect.Large
+            value={role}
+            options={roleOptions}
+            onChange={(value) => setRole(normalizeMemberRole(value))}
+          />
+        </CxFormItem>
+      </CxForm>
+    </CxModal>
+  )
+})
+
+export default MemberRoleModal

package/src/views/page-system/department/modal/submit-modal.tsx

@@ -0,0 +1,265 @@
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { addDepartmentAPI, editDepartmentAPI, getDepartmentDetailAPI, getDepartmentTreeAPI } from '@/api/system/department'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import {
+  CxForm,
+  CxFormItem,
+  CxInput,
+  CxInputNumber,
+  CxModal,
+  CxTreeSelect,
+  useCxModal,
+} from '@cx-ui'
+import { emptyDepartmentFormValues } from '../departmentFormShared'
+
+interface DepartmentSubmitModalProps {
+  onOk?: (values: any) => void | Promise<void>
+  onCancel?: () => void
+}
+
+type ModalMode = 'add' | 'edit'
+type OpenPayload = {
+  opeType?: ModalMode
+  record?: any
+  opeId?: number | string
+}
+
+function normalizeDeptTree(raw: unknown): any[] {
+  if (Array.isArray(raw)) return raw
+  if (raw && typeof raw === 'object' && 'data' in raw) {
+    const d = (raw as { data: unknown }).data
+    if (Array.isArray(d)) return d
+    if (
+      d &&
+      typeof d === 'object' &&
+      d !== null &&
+      'data' in d &&
+      Array.isArray((d as { data: unknown }).data)
+    ) {
+      return (d as { data: any[] }).data
+    }
+  }
+  return []
+}
+
+function findDeptNode(nodes: any[], id: number): any | null {
+  for (const n of nodes) {
+    if (Number(n?.id) === id) return n
+    const found = findDeptNode(n?.children || [], id)
+    if (found) return found
+  }
+  return null
+}
+
+function collectDeptIdsWithDescendants(node: any | null): Set<number> {
+  const ids = new Set<number>()
+  const walk = (n: any) => {
+    if (!n || n.id == null) return
+    ids.add(Number(n.id))
+    for (const c of n.children || []) walk(c)
+  }
+  walk(node)
+  return ids
+}
+
+function toTreeSelectOptions(nodes: any[], forbidden: Set<number>): any[] {
+  if (!Array.isArray(nodes)) return []
+  return nodes
+    .filter((n) => n != null && !forbidden.has(Number(n.id)))
+    .map((n) => ({
+      title: n.name,
+      value: n.id,
+      key: n.id,
+      children: toTreeSelectOptions(n.children || [], forbidden),
+    }))
+}
+
+function normalizeDeptDetail(raw: any): any {
+  if (raw?.data?.data) return raw.data.data
+  if (raw?.data) return raw.data
+  return raw || {}
+}
+
+const SubmitModal = forwardRef<any, DepartmentSubmitModalProps>(function SubmitModal(
+  props,
+  ref,
+) {
+  const { t } = useTranslation()
+  const { onOk, onCancel } = props
+  const [addAsChild, setAddAsChild] = useState(false)
+  const [treeSelectData, setTreeSelectData] = useState<any[]>([])
+  const { submitting, handleSubmit } = useModalSubmit<any, any>()
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const nextType = payload.opeType ?? 'add'
+      const record = payload.data
+      const { form, setOpeId } = modal
+      
+      setOpeId(nextType === 'edit' ? String(payload.opeId) : undefined)
+      setAddAsChild(nextType === 'add' && record?.id != null)
+
+      let tree: any[] = []
+      try {
+        const raw = await getDepartmentTreeAPI()
+        tree = normalizeDeptTree(raw)
+      } catch {
+        tree = []
+      }
+
+      let forbidden = new Set<any>()
+      if (nextType === 'edit' && record?.id != null) {
+        const selfNode = findDeptNode(tree, record.id)
+        forbidden = collectDeptIdsWithDescendants(selfNode)
+      }
+      setTreeSelectData(toTreeSelectOptions(tree, forbidden))
+
+      const resolveParentId = (src: any): any | undefined => {
+        if (src?.parentId != null && src?.parentId !== '') return src.parentId
+        return undefined
+      }
+
+      if (nextType === 'edit') {
+        let detail: any = record || {}
+        const opeId = payload.opeId
+        if (opeId != null && String(opeId) !== '') {
+          try {
+            const detailRes = await getDepartmentDetailAPI({ id: opeId })
+            detail = normalizeDeptDetail(detailRes)
+          } catch {
+            detail = record || {}
+          }
+        }
+
+        const parentFromDetail = resolveParentId(detail)
+        const sortOrderRaw = detail?.sortOrder
+        form.setFieldsValue({
+          name: detail.name || '',
+          code: detail.code || '',
+          description: detail.description || '',
+          parentId: parentFromDetail,
+          sortOrder:
+            sortOrderRaw !== undefined && sortOrderRaw !== null ? Number(sortOrderRaw) : 1,
+        })
+      } else {
+        const defaultParentId =
+          record?.id != null && nextType === 'add' ? record.id : undefined
+        form.setFieldsValue({
+          ...emptyDepartmentFormValues(),
+          parentId: defaultParentId,
+        })
+      }
+    },
+    onClose: () => {
+      setAddAsChild(false)
+      setTreeSelectData([])
+      onCancel?.()
+    },
+  })
+  
+  const { isOpen, close, form, opeType, opeId } = modal
+
+  useImperativeHandle(ref, () => ({
+    open: modal.open,
+    close,
+  }), [modal.open, close])
+
+  const title = useMemo(
+    () => (opeType === 'edit' ? t('system.department.actions.edit') : t('system.department.actions.create')),
+    [opeType, t],
+  )
+
+  const formRules = useMemo(() => ({
+    name: [{ required: true, message: t('system.department.fields.name_required') }],
+  }), [t])
+
+  const onOkClick = async () => {
+    if (opeType === 'detail') return
+    const result = await handleSubmit({
+      opeType,
+      validate: () => form.validateFields(),
+      addAPI: addDepartmentAPI,
+      editAPI: editDepartmentAPI,
+      transform: (values) => ({
+        name: values.name,
+        code: values.code || undefined,
+        description: values.description || undefined,
+        sortOrder: Number(values.sortOrder ?? 1),
+        ...(opeType === 'edit' && opeId ? { id: opeId } : {}),
+        parentId:
+          values.parentId !== undefined &&
+          values.parentId !== null &&
+          values.parentId !== ''
+            ? values.parentId
+            : null,
+         
+      }),
+      onSuccess: async ({ values }) => {
+        await onOk?.(values)
+      },
+    })
+    if (result) {
+      close()
+    }
+  }
+
+  return (
+    <CxModal
+      title={title}
+      isOpen={isOpen}
+      onClose={close}
+      opeType={opeType}
+      submitting={submitting}
+      onSubmit={onOkClick}
+      modalConfig={{ width: 600 }}>
+      <CxForm
+        form={form}
+        rules={formRules}
+        layout="vertical"
+        initialValues={emptyDepartmentFormValues()}>
+        <CxFormItem label={t('system.department.fields.name')} name="name">
+          <CxInput.Large
+            placeholder={t('system.department.fields.name_placeholder') || t('system.department.fields.name')}
+          />
+        </CxFormItem>
+        <CxFormItem label={t('system.department.fields.code')} name="code">
+          <CxInput.Large
+            disabled={opeType === 'edit'}
+            placeholder={t('system.department.fields.code_placeholder') || t('system.department.fields.code')}
+          />
+        </CxFormItem>
+
+        <CxFormItem label={t('system.department.fields.parent')} name="parentId">
+          <CxTreeSelect
+            treeData={treeSelectData}
+            placeholder={t('system.department.fields.parent_placeholder')}
+            allowClear
+            showSearch
+            filterTreeNode={(inputValue, node) =>
+              String((node as any)?.title ?? '')
+                .toLowerCase()
+                .includes(String(inputValue ?? '').toLowerCase())
+            }
+            treeDefaultExpandAll
+          />
+        </CxFormItem>
+        <CxFormItem label={t('common.sort_order')} name="sortOrder">
+          <CxInputNumber.Large
+            min={0}
+            precision={0}
+            placeholder={t('common.sort_order')}
+          />
+        </CxFormItem>
+        <CxFormItem label={t('common.description')} name="description">
+          <CxInput.Textarea placeholder={t('common.description_placeholder')} rows={3} />
+        </CxFormItem>
+      
+        
+      </CxForm>
+    </CxModal>
+  )
+})
+
+export default SubmitModal