cx-chat 0.0.1

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

@@ -0,0 +1,263 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react'
+import { Form } from 'antd'
+import {
+  CxButton,
+  CxForm,
+  CxFormItem,
+  CxInput,
+  CxInputNumber,
+  CxModal,
+  CxSwitch,
+  CxTreeSelect,
+  useCxModal,
+} from '@cx-ui'
+import { useTranslation } from 'react-i18next'
+import { getMenuTreeAPI } from '@/api/system/menu'
+import { parseMenuNameJson } from '@/utils/menuI18n'
+import { getIconComponent } from '@/utils/routeConfig'
+import type { MenuTreeItem } from '@/types/menu'
+import {
+  buildMenuFormRules,
+  emptyMenuFormValues,
+  resolveMenuSubmitLevel,
+  useMenuFormSubmit,
+} from '../components/menuFormShared'
+import IconModal from './icon-modal'
+
+interface MenuModalProps {
+  onOk?: (values: any) => void | Promise<void>
+  onCancel?: () => void
+}
+
+type OpenPayload = {
+  parentId?: string
+}
+
+const SubmitModal = forwardRef(function SubmitModal(_props: MenuModalProps, ref) {
+  const { t, i18n } = useTranslation()
+  const menuRules = useMemo(() => buildMenuFormRules(), [i18n.language])
+  const { onOk, onCancel } = _props
+  const [iconModalOpen, setIconModalOpen] = useState(false)
+  const [treeData, setTreeData] = useState<MenuTreeItem[]>([])
+  const [menuLevel, setMenuLevel] = useState(0)
+  const { submitMenuForm, submitting } = useMenuFormSubmit()
+
+  const modal = useCxModal({
+    onOpen: (payload) => {
+      const { form, opeType, setOpeId } = modal
+      const parentId = payload.parentId && payload.parentId !== '0' ? String(payload.parentId) : undefined
+      
+      setOpeId(undefined)
+      form.resetFields()
+      form.setFieldsValue(emptyMenuFormValues())
+      form.setFieldsValue({ parentId })
+      
+      getMenuTreeAPI()
+        .then((res: any) => {
+          const list = normalizeTreeResult(res)
+          setTreeData(list)
+          const lvl = resolveMenuSubmitLevel(parentId ? { parentId } : {}, list)
+          setMenuLevel(lvl)
+        })
+        .catch(() => {
+          setTreeData([])
+          setMenuLevel(0)
+        })
+    },
+    onClose: () => {
+      setIconModalOpen(false)
+      onCancel?.()
+    },
+    onReset: () => {
+      setMenuLevel(0)
+    },
+  })
+  
+  const { isOpen, close, form, opeType } = modal
+
+  const getNodeLabel = (node: MenuTreeItem): string => {
+    const parsed = parseMenuNameJson(node.title ?? '')
+    return parsed?.zh || parsed?.en || node.title || node.code || String(node.id)
+  }
+
+  const watchedIcon = Form.useWatch('icon', form)
+  const IconPreview = getIconComponent(
+    watchedIcon ? String(watchedIcon) : undefined,
+  )
+  const showRouteFields = menuLevel >= 2
+  const showFullDisplayField = menuLevel === 1
+
+  const toParentTreeOptions = (nodes: MenuTreeItem[] = [], depth = 0): any[] =>
+    (nodes || [])
+      .filter((node) => {
+        const levelNum = Number(node.level)
+        const effectiveLevel = Number.isFinite(levelNum) ? levelNum : depth
+        // 父级仅一级、二级（不含三级）；二级之间可互选为父级
+        return effectiveLevel <= 1
+      })
+      .map((node) => ({
+        title: getNodeLabel(node),
+        value: node.id,
+        key: node.id,
+        children: toParentTreeOptions(node.children || [], depth + 1),
+      }))
+
+  const normalizeTreeResult = (raw: any): MenuTreeItem[] => {
+    if (Array.isArray(raw)) return raw
+    if (Array.isArray(raw?.data)) return raw.data
+    if (Array.isArray(raw?.data?.data)) return raw.data.data
+    return []
+  }
+
+  const onSubmit = async () => {
+    if (opeType === 'detail') return
+    const result = await submitMenuForm({
+      opeType,
+      form,
+      getLevel: () => menuLevel,
+      onSuccess: async (ctx) => {
+        await onOk?.(ctx.payload)
+      },
+    })
+    if (result) {
+      close()
+    }
+  }
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  return (
+    <>
+      {/* 新增菜单 */}
+      <CxModal
+        title={t('system.menu.add')}
+        isOpen={isOpen}
+        onClose={close}
+        opeType={opeType}
+        submitting={submitting}
+        onSubmit={onSubmit}>
+        <CxForm
+          form={form}
+          rules={menuRules}
+          layout="vertical"
+          initialValues={emptyMenuFormValues()}
+        >
+            <CxFormItem label={t('system.menu.parent_menu')} name="parentId">
+              <CxTreeSelect
+                treeData={toParentTreeOptions(treeData)}
+                placeholder={t('system.menu.parent_menu_placeholder')}
+                allowClear
+                treeDefaultExpandAll
+                treeNodeFilterProp="title"
+                onChange={(value) => {
+                  const pid =
+                    value !== undefined && value !== null && value !== ''
+                      ? String(value)
+                      : undefined
+                  const lvl = resolveMenuSubmitLevel(
+                    pid !== undefined ? { parentId: pid } : {},
+                    treeData,
+                  )
+                  setMenuLevel(lvl)
+                }}
+              />
+            </CxFormItem>
+
+            <CxFormItem label={t('system.menu.code')} name="code">
+              <CxInput.Large placeholder={t('system.menu.code_placeholder')} />
+            </CxFormItem>
+
+            <CxFormItem label={t('system.menu.title_zh_label')} name="titleZh">
+              <CxInput.Large placeholder={t('system.menu.title_placeholder_zh')} />
+            </CxFormItem>
+
+            <CxFormItem label={t('system.menu.title_en_label')} name="titleEn">
+              <CxInput.Large placeholder={t('system.menu.title_placeholder_en')} />
+            </CxFormItem>
+
+            <CxFormItem label={t('system.menu.icon')}>
+              <div className="menu-icon-field">
+                <CxFormItem name="icon" noStyle>
+                  <CxInput.Large
+                    placeholder={t('system.menu.icon_placeholder')}
+                    suffix={
+                      <span className="menu-icon-input__suffix" aria-hidden>
+                        {IconPreview ? <IconPreview size={16} /> : null}
+                      </span>
+                    }
+                  />
+                </CxFormItem>
+                <CxButton type="default" height={42} onClick={() => setIconModalOpen(true)}>
+                  {t('system.menu.pick_icon')}
+                </CxButton>
+              </div>
+            </CxFormItem>
+
+            <CxFormItem label={t('common.description')} name="description">
+              <CxInput.Large placeholder={t('common.description_placeholder')} />
+            </CxFormItem>
+
+            <CxFormItem label={t('common.sort_order')} name="sortOrder">
+              <CxInputNumber.Large min={0} precision={0} placeholder={t('system.menu.sort_order_placeholder')} />
+            </CxFormItem>
+
+            {showRouteFields && (
+              <>
+                <CxFormItem label={t('system.menu.path')} name="path">
+                  <CxInput.Large placeholder={t('system.menu.path_placeholder')} />
+                </CxFormItem>
+                <CxFormItem label={t('system.menu.component')} name="component">
+                  <CxInput.Large placeholder={t('system.menu.component_placeholder')} />
+                </CxFormItem>
+              </>
+            )}
+
+            {showFullDisplayField && (
+              <CxFormItem
+                label={t('system.menu.full_display')}
+                name="fullDisplay"
+                valuePropName="checked"
+                getValueFromEvent={(checked: boolean) => (checked ? 1 : 0)}
+                getValueProps={(v: unknown) => ({ checked: Number(v) === 1 })}
+              >
+                <CxSwitch />
+              </CxFormItem>
+            )}
+
+            <CxFormItem
+              label={t('system.menu.enable_switch')}
+              name="status"
+              valuePropName="checked"
+              getValueFromEvent={(checked: boolean) => (checked ? 1 : 0)}
+              getValueProps={(v: unknown) => ({ checked: Number(v) === 1 })}
+            >
+              <CxSwitch />
+            </CxFormItem>
+        </CxForm>
+        <IconModal
+          isOpen={iconModalOpen}
+          onClose={() => setIconModalOpen(false)}
+          selectedIcon={watchedIcon ? String(watchedIcon) : undefined}
+          onOk={(iconName) => {
+            form.setFieldsValue({ icon: iconName })
+            setIconModalOpen(false)
+          }}
+        />
+      </CxModal>
+    </>
+  )
+})
+
+export default SubmitModal