cx-chat 0.0.1

package/src/views/page-menus/business-rules/modal/detail-modal.tsx

@@ -0,0 +1,186 @@
+import { Form } from 'antd'
+import dayjs from 'dayjs'
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { getBusinessRulesTermDetailAPI } from '@/api/menus/business-rules'
+import { getDepartmentTreeAPI } from '@/api/system/department'
+import { CxModal, CxTag, useCxModal } from '@cx-ui'
+
+type OpenPayload = {
+  opeType?: string
+  opeId?: string | number
+  data?: any
+}
+
+type Props = {
+  onCancel?: () => void
+}
+
+function unwrapTree(res: unknown): any[] {
+  const body = (res as any)?.data?.data ?? (res as any)?.data ?? res
+  if (Array.isArray(body)) return body
+  if (body && typeof body === 'object' && Array.isArray((body as any).children)) {
+    return [(body as any)]
+  }
+  return []
+}
+
+function idToNameMap(nodes: any[]): Map<string, string> {
+  const m = new Map<string, string>()
+  const walk = (list: any[]) => {
+    for (const n of list) {
+      const id = n?.id ?? n?.key
+      if (id != null && id !== '') {
+        m.set(String(id), String(n?.name ?? n?.label ?? n?.title ?? id))
+      }
+      if (Array.isArray(n?.children) && n.children.length) walk(n.children)
+    }
+  }
+  walk(nodes)
+  return m
+}
+
+/** 术语详情弹窗 */
+const DetailModal = forwardRef<
+  { close: () => void; open: (payload?: OpenPayload) => void },
+  Props
+>(function DetailModal(props, ref) {
+  const { onCancel } = props
+  const { t } = useTranslation()
+
+  const [fetchId, setFetchId] = useState<string | null>(null)
+  const [detail, setDetail] = useState<any | null>(null)
+  const [idNames, setIdNames] = useState<Map<string, string>>(() => new Map())
+  const [loading, setLoading] = useState(false)
+
+  const modal = useCxModal({
+    onOpen: (payload) => {
+      const id = payload?.opeId ?? payload?.data?.id
+      setFetchId(id != null && String(id) !== '' ? String(id) : null)
+      setDetail(null)
+    },
+    onClose: () => {
+      setFetchId(null)
+      setDetail(null)
+      onCancel?.()
+    },
+  })
+
+  const { isOpen, close } = modal
+
+  useEffect(() => {
+    if (!isOpen || !fetchId) return
+    let cancelled = false
+    ;(async () => {
+      setLoading(true)
+      try {
+        const [dRes, treeRes] = await Promise.all([
+          getBusinessRulesTermDetailAPI(fetchId),
+          getDepartmentTreeAPI(),
+        ])
+        if (cancelled) return
+        const raw = (dRes as any)?.data?.data ?? (dRes as any)?.data
+        setDetail(raw)
+        setIdNames(idToNameMap(unwrapTree(treeRes)))
+      } catch {
+        if (!cancelled) setDetail(null)
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [isOpen, fetchId])
+
+  const title = useMemo(() => t('menus.business_rules.detail'), [t])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  const record = detail
+  const departmentIds: string[] = Array.isArray(record?.departmentIds)
+    ? record.departmentIds.map((x: any) => String(x))
+    : []
+  const createTimeStr = record?.createTime
+    ? dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')
+    : '-'
+
+  return (
+    <CxModal
+      isOpen={isOpen}
+      modalConfig={{ width: 640 }}
+      opeType="detail"
+      submitting={loading}
+      title={title}
+      onClose={close}
+      actions={[]}
+    >
+      {loading && !record ? (
+        <div className="py-8 text-center text-sm text-gray-500">{t('common.loading')}</div>
+      ) : !record ? (
+        <div className="py-8 text-center text-sm text-gray-500">
+          {t('menus.business_rules.detail_load_failed')}
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2">
+          <Form.Item label={t('menus.business_rules.fields.term')} className="!mb-0">
+            <div className="text-sm text-gray-900 dark:text-gray-100">{record?.term ?? '-'}</div>
+          </Form.Item>
+
+          <Form.Item label={t('menus.business_rules.fields.create_time')} className="!mb-0">
+            <div className="text-sm text-gray-900 dark:text-gray-100">{createTimeStr}</div>
+          </Form.Item>
+
+          <Form.Item label={t('menus.business_rules.col_audit_status')} className="!mb-0">
+            <div className="text-sm text-gray-900 dark:text-gray-100">
+              {record?.auditStatus == null ? (
+                <span className="text-gray-400">-</span>
+              ) : (
+                <CxTag.Enum value={Number(record.auditStatus)} enumKey="auditStatus" />
+              )}
+            </div>
+          </Form.Item>
+
+          <Form.Item label={t('common.status')} className="!mb-0">
+            <div className="text-sm text-gray-900 dark:text-gray-100">
+              {record?.status == null ? '-' : <CxTag.Enabled value={record.status} />}
+            </div>
+          </Form.Item>
+
+          <Form.Item
+            label={t('menus.business_rules.fields.definition')}
+            className="!mb-0 md:col-span-2"
+          >
+            <div className="whitespace-pre-wrap break-words text-sm text-gray-900 dark:text-gray-100">
+              {record?.definition ?? '-'}
+            </div>
+          </Form.Item>
+
+          <Form.Item label={t('menus.business_rules.fields.scope')} className="!mb-0 md:col-span-2">
+            {departmentIds.length ? (
+              <div className="flex flex-wrap gap-2">
+                {departmentIds.map((did) => (
+                  <CxTag key={did} color="blue">
+                    {idNames.get(did) ?? did}
+                  </CxTag>
+                ))}
+              </div>
+            ) : (
+              <div className="text-sm text-gray-900 dark:text-gray-100">-</div>
+            )}
+          </Form.Item>
+        </div>
+      )}
+    </CxModal>
+  )
+})
+
+export default DetailModal

package/src/views/page-menus/business-rules/modal/scope-modal.tsx

@@ -0,0 +1,272 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Spin } from 'antd'
+
+import {
+  getBusinessRuleScopeAPI,
+  updateBusinessRulesTermScopeAPI,
+} from '@/api/menus/business-rules'
+import { getDepartmentTreeAPI } from '@/api/system/department'
+import { normalizeTreeAPIResult } from '@/components/table-view/components/tree-api-normalize'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import { CxModal, CxTree, useCxModal } from '@cx-ui'
+
+type OpenPayload = {
+  opeType?: string
+  data?: any
+}
+
+type Props = {
+  onCancel?: () => void
+  onOk?: (values: any) => void | Promise<void>
+}
+
+/** 与部门管理 / ListPageView 左侧树一致 */
+const DEPT_TREE_FIELD_NAMES = {
+  id: 'id',
+  label: 'name',
+  children: 'children',
+} as const
+
+const SCOPE_MODAL_WIDTH = 640
+const SCOPE_MODAL_HEIGHT = 'min(85dvh, 85vh)'
+
+const scopeModalShellStyles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+    height: SCOPE_MODAL_HEIGHT,
+    maxHeight: SCOPE_MODAL_HEIGHT,
+  },
+  body: {
+    flex: '1 1 0%',
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+  },
+}
+
+function unwrapScopeIds(res: unknown): string[] {
+  const body = (res as any)?.data?.data ?? (res as any)?.data
+  if (Array.isArray(body)) return body.map((x) => String(x))
+  return []
+}
+
+function collectAllTreeNodeKeys(
+  nodes: any[] | undefined,
+  idKey: string,
+  childrenKey: string,
+): (string | number)[] {
+  const keys: (string | number)[] = []
+  const walk = (list: any[]) => {
+    for (const n of list) {
+      const id = n?.[idKey]
+      if (id !== undefined && id !== null) keys.push(id)
+      const children = n?.[childrenKey]
+      if (Array.isArray(children) && children.length) walk(children)
+    }
+  }
+  if (Array.isArray(nodes)) walk(nodes)
+  return keys
+}
+
+function normalizeTreeIdsToString(
+  nodes: any[] | undefined,
+  idKey: string,
+  childrenKey: string,
+): any[] {
+  if (!Array.isArray(nodes)) return []
+  return nodes.map((n) => {
+    const id = n?.[idKey]
+    const children = n?.[childrenKey]
+    return {
+      ...n,
+      [idKey]: id != null ? String(id) : id,
+      [childrenKey]: Array.isArray(children)
+        ? normalizeTreeIdsToString(children, idKey, childrenKey)
+        : children,
+    }
+  })
+}
+
+const ScopeModal = forwardRef<
+  { close: () => void; open: (payload?: OpenPayload) => void },
+  Props
+>(function ScopeModal(props, ref) {
+  const { onCancel, onOk } = props
+  const { t } = useTranslation()
+  const { submitting, handleSubmit } = useModalSubmit()
+  const [record, setRecord] = useState<any>(null)
+  const [treeData, setTreeData] = useState<any[]>([])
+  const [expandedKeys, setExpandedKeys] = useState<Set<string | number>>(new Set())
+  const [departmentIds, setDepartmentIds] = useState<string[]>([])
+  const [scopeLoadState, setScopeLoadState] = useState('')
+
+  const idKey = DEPT_TREE_FIELD_NAMES.id
+  const childrenKey = DEPT_TREE_FIELD_NAMES.children
+
+  const loadScopeAndTree = useCallback(async (businessRuleId: string) => {
+    setScopeLoadState('loading')
+    const [scopeRes, treeRes] = await Promise.all([
+      getBusinessRuleScopeAPI(businessRuleId),
+      getDepartmentTreeAPI(),
+    ])
+    const raw = normalizeTreeAPIResult(treeRes)
+    const normalized = normalizeTreeIdsToString(
+      Array.isArray(raw) ? raw : [],
+      idKey,
+      childrenKey,
+    )
+    setTreeData(normalized)
+    if (normalized.length) {
+      setExpandedKeys(new Set(collectAllTreeNodeKeys(normalized, idKey, childrenKey)))
+    } else {
+      setExpandedKeys(new Set())
+    }
+    const ids = unwrapScopeIds(scopeRes).map((x) => String(x))
+    setDepartmentIds(ids)
+    setScopeLoadState('done')
+  }, [childrenKey, idKey])
+
+  const modal = useCxModal({
+    onOpen: (payload) => {
+      const r = payload?.data ?? null
+      setRecord(r)
+      setTreeData([])
+      setDepartmentIds([])
+      setExpandedKeys(new Set())
+      const id = r?.id != null ? String(r.id) : ''
+      if (!id) {
+        setScopeLoadState('error')
+        return
+      }
+      setScopeLoadState('loading')
+      void loadScopeAndTree(id).catch(() => {
+        setScopeLoadState('error')
+        setDepartmentIds([])
+      })
+    },
+    onClose: () => {
+      setRecord(null)
+      setTreeData([])
+      setDepartmentIds([])
+      setScopeLoadState('')
+      onCancel?.()
+    },
+  })
+
+  const { isOpen, close: hideModal } = modal
+
+  const title = useMemo(() => t('menus.business_rules.actions.scope'), [t])
+
+  const close = () => {
+    hideModal()
+    setRecord(null)
+    setTreeData([])
+    setDepartmentIds([])
+    setScopeLoadState('')
+    onCancel?.()
+  }
+
+  const toggleExpand = useCallback((key: string | number, e?: React.MouseEvent) => {
+    if (e) e.stopPropagation()
+    setExpandedKeys((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+  }, [])
+
+  const onTreeCheck = useCallback((key: string | number, checked: boolean) => {
+    const k = String(key)
+    setDepartmentIds((prev) => {
+      const s = new Set(prev.map(String))
+      if (checked) s.add(k)
+      else s.delete(k)
+      return Array.from(s)
+    })
+  }, [])
+
+  const renderDeptLabel = useCallback((node: any) => {
+    return String(node?.[DEPT_TREE_FIELD_NAMES.label] ?? node?.name ?? node?.label ?? '-')
+  }, [])
+
+  const onOkClick = async () => {
+    if (scopeLoadState === 'loading' || !record?.id) return
+    const result = await handleSubmit({
+      opeType: 'edit',
+      validate: async () => ({ departmentIds }),
+      editAPI: updateBusinessRulesTermScopeAPI,
+      transform: (values) => ({
+        id: record.id,
+        departmentIds: values.departmentIds ?? [],
+      }),
+      onSuccess: async ({ payload }) => {
+        await onOk?.(payload)
+      },
+    })
+    if (result) close()
+  }
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  const bodyLoading = scopeLoadState === 'loading'
+
+  return (
+    <CxModal
+      isOpen={isOpen}
+      opeType="edit"
+      submitting={submitting || bodyLoading}
+      title={title}
+      onClose={close}
+      onSubmit={onOkClick}
+      modalConfig={{
+        width: SCOPE_MODAL_WIDTH,
+        styles: {
+          ...scopeModalShellStyles,
+        },
+        rootClassName: 'cx-modal-content-fill',
+      }}
+    >
+      <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
+        {bodyLoading ? (
+          <div className="flex flex-1 items-center justify-center py-16">
+            <Spin size="large" />
+          </div>
+        ) : (
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+            <div className="min-h-0 flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800/30">
+              <div className="h-full min-h-[320px] overflow-y-auto p-2 custom-scrollbar">
+                <CxTree
+                  treeData={treeData}
+                  fieldNames={{ id: idKey, children: childrenKey }}
+                  expandedKeys={expandedKeys}
+                  selectedKey={null}
+                  onSelect={() => {}}
+                  onToggleExpand={toggleExpand}
+                  checkable
+                  checkedKeys={departmentIds}
+                  onCheck={onTreeCheck}
+                  renderLabel={renderDeptLabel}
+                  emptyText={t('common.no_data')}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </CxModal>
+  )
+})
+
+export default ScopeModal

package/src/views/page-menus/business-rules/modal/submit-modal.tsx

@@ -0,0 +1,142 @@
+import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import {
+  addBusinessRulesTermAPI,
+  editBusinessRulesTermAPI,
+} from '@/api/menus/business-rules'
+import { CxForm, CxFormItem, CxInput, CxModal, useCxModal } from '@cx-ui'
+
+type OpenPayload = {
+  opeType?: string
+  opeId?: string | number
+  data?: any
+}
+
+type Props = {
+  onCancel?: () => void
+  onOk?: (values: any) => void | Promise<void>
+}
+
+/** 新增/编辑术语弹窗 */
+const SubmitModal = forwardRef<{ close: () => void; open: (payload?: OpenPayload) => void }, Props>(
+  function SubmitModal(props, ref) {
+    const { onCancel, onOk } = props
+    const { t } = useTranslation()
+    const [opeId, setOpeId] = useState<string | number | undefined>(undefined)
+
+    const modal = useCxModal({
+      onOpen: (payload) => {
+        setOpeId(payload?.opeId)
+        form.resetFields()
+        const type = payload?.opeType ?? 'add'
+        if (type === 'edit' && payload?.data) {
+          form.setFieldsValue({
+            term: payload.data.term,
+            definition: payload.data.definition,
+          })
+        }
+      },
+      onClose: () => {
+        setOpeId(undefined)
+        onCancel?.()
+      },
+    })
+
+    const { isOpen, close: hideModal, form, opeType } = modal
+    const { submitting, handleSubmit } = useModalSubmit()
+
+    const title = useMemo(
+      () =>
+        opeType === 'add'
+          ? t('menus.business_rules.add')
+          : t('menus.business_rules.edit'),
+      [opeType, t],
+    )
+
+    const close = () => {
+      hideModal()
+      form.resetFields()
+      setOpeId(undefined)
+      onCancel?.()
+    }
+
+    const onOkClick = async () => {
+      const result = await handleSubmit({
+        opeType,
+        validate: () => form.validateFields(),
+        addAPI: addBusinessRulesTermAPI,
+        editAPI: editBusinessRulesTermAPI,
+        transform: (values) => ({
+          ...(opeType === 'edit' ? { id: opeId } : {}),
+          term: values.term,
+          definition: values.definition,
+        }),
+        onSuccess: async ({ payload }) => {
+          await onOk?.(payload)
+        },
+      })
+      if (result) close()
+    }
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        open: modal.open,
+        close,
+      }),
+      [modal.open],
+    )
+
+    return (
+      <CxModal
+        isOpen={isOpen}
+        modalConfig={{ width: 640 }}
+        opeType={opeType}
+        submitting={submitting}
+        title={title}
+        onClose={close}
+        onSubmit={onOkClick}
+      >
+        <CxForm
+          form={form}
+          layout="vertical"
+          initialValues={{ term: '', definition: '' }}
+        >
+          <CxFormItem
+            label={t('menus.business_rules.fields.term')}
+            name="term"
+            rules={[
+              { required: true, message: t('menus.business_rules.rules.term_required') },
+              { whitespace: true, message: t('menus.business_rules.rules.term_required') },
+            ]}
+          >
+            <CxInput placeholder={t('menus.business_rules.placeholders.term')} />
+          </CxFormItem>
+          <CxFormItem
+            label={t('menus.business_rules.fields.definition')}
+            name="definition"
+            rules={[
+              {
+                required: true,
+                message: t('menus.business_rules.rules.definition_required'),
+              },
+              {
+                whitespace: true,
+                message: t('menus.business_rules.rules.definition_required'),
+              },
+            ]}
+          >
+            <CxInput.Textarea
+              rows={5}
+              placeholder={t('menus.business_rules.placeholders.definition')}
+            />
+          </CxFormItem>
+        </CxForm>
+      </CxModal>
+    )
+  },
+)
+
+export default SubmitModal