cx-chat 0.0.1

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

@@ -0,0 +1,650 @@
+import { getMenuTreeAPI } from '@/api/system/menu'
+import {
+  addPermissionAPI,
+  editPermissionAPI,
+  getPermissionDetailAPI,
+} from '@/api/system/permission'
+import { useAuth } from '@/contexts/AuthContext'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import { ENUM_DATA } from '@/meta'
+import type { DictOptionItem } from '@/meta/index-dict'
+import { DICT_DATA, DICT_KEY, loadCommonDictData } from '@/meta/index-dict'
+import type { MenuTreeItem } from '@/types/menu'
+import {
+  findMenuCodeInTree,
+  mapMenuTreeForPermissionBindSelect,
+} from '@/utils/menuI18n'
+import type { PermissionCrudCopyVariant } from '@/utils/permission-crud'
+import {
+  getEffectiveCodeSuffix,
+  inferCrudFromSuffix,
+  toPermissionCrudSlice,
+} from '@/utils/permission-crud'
+import { QuestionCircleOutlined } from '@ant-design/icons'
+import {
+  CxForm,
+  CxFormItem,
+  CxInput,
+  CxInputNumber,
+  CxModal,
+  CxSelect,
+  CxSwitch,
+  CxTreeSelect,
+  useCxModal,
+} from '@cx-ui'
+import { Col, Form, Input, Radio, Row, Tooltip } from 'antd'
+import type { FormInstance, Rule } from 'antd/es/form'
+import type { TFunction } from 'i18next'
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import './submit-modal.less'
+
+interface PermissionModalProps {
+  onOk?: (values: any) => void | Promise<void>
+  onCancel?: () => void
+}
+
+type ModalMode = 'add' | 'edit'
+
+type OpenPayload = {
+  opeType?: ModalMode
+  opeId?: number | string
+  record?: any
+  menuId?: string
+  /** 从列表行打开新增：回显行数据；带 variant 时按「复制为×」改写标题/方法/编码后缀，省略 variant 则为仅复制原样回显 */
+  copyOpen?: {
+    record: any
+    variant?: PermissionCrudCopyVariant
+  }
+}
+
+function emptyPermissionFormValues() {
+  return {
+    menuId: '',
+    title: '',
+    code: '',
+    codePreset: undefined as string | undefined,
+    codeCustom: '',
+    description: '',
+    path: '',
+    httpMethod: 'POST',
+    apiType: 1,
+    noLoginStatus: 0,
+    logStatus: 1,
+    sortOrder: 0,
+  }
+}
+
+function buildPermissionFormRules(t: TFunction): {
+  apiType: Rule[]
+  menuId: Rule[]
+  title: Rule[]
+  code: Rule[]
+  httpMethod: Rule[]
+  path: Rule[]
+  sortOrder: Rule[]
+} {
+  return {
+    apiType: [{ required: true, message: t('system.permission.api_type_required') }],
+    menuId: [{ required: true, message: t('system.permission.menu_required') }],
+    title: [{ required: true, message: t('system.permission.title_required') }],
+    code: [{ required: true, message: t('system.permission.code_required') }],
+    httpMethod: [{ required: true, message: t('system.permission.http_method_required') }],
+    path: [{ required: true, message: t('system.permission.path_required') }],
+    sortOrder: [{ required: true, message: t('common.sort_order_required') }],
+  }
+}
+
+function normalizePermissionDetail(raw: any) {
+  if (raw?.data?.data) return raw.data.data
+  if (raw?.data) return raw.data
+  return raw || {}
+}
+
+/** 完整权限编码 → 表单仅保留首个 `:` 之后的片段（前缀为菜单 code，提交时再拼回） */
+function splitPermissionCodeSuffix(full: unknown): string {
+  if (full == null) return ''
+  const s = String(full)
+  const i = s.indexOf(':')
+  if (i < 0) return s
+  return s.slice(i + 1)
+}
+
+/** 将接口/列表回显的编码后缀拆到「字典下拉 + 可选输入框」；整段在字典里则只填下拉 */
+function initPermissionCodeFields(form: FormInstance, suffix: unknown) {
+  const s = String(suffix ?? '').trim()
+  const dictSet = new Set(
+    DICT_DATA[DICT_KEY.permission].option.map((o) => String(o.value)),
+  )
+  if (s && dictSet.has(s)) {
+    form.setFieldsValue({ codePreset: s, codeCustom: '', code: s })
+  } else if (s) {
+    form.setFieldsValue({ codePreset: undefined, codeCustom: s, code: s })
+  } else {
+    form.setFieldsValue({ codePreset: undefined, codeCustom: '', code: '' })
+  }
+}
+
+function mapDetailToForm(detail: any) {
+  const anonymous = detail?.anonymous
+  const noLoginFallback =
+    anonymous === true ? 1 : anonymous === false ? 0 : undefined
+  return {
+    menuId: String(detail?.menuId ?? ''),
+    title: detail?.title ?? detail?.name ?? '',
+    code: splitPermissionCodeSuffix(detail?.code ?? ''),
+    description: detail?.description ?? '',
+    path: detail?.path ?? detail?.apiPath ?? '',
+    httpMethod: detail?.httpMethod ?? detail?.method ?? 'POST',
+    apiType: Number(detail?.apiType ?? 1),
+    noLoginStatus: Number(
+      detail?.noLoginStatus ?? noLoginFallback ?? 0,
+    ),
+    logStatus: Number(detail?.logStatus ?? 1),
+    sortOrder: Number(detail?.sortOrder ?? 0),
+  }
+}
+
+/** 记录日志等：1=开，0=关 */
+const switchCheckedProps = {
+  valuePropName: 'checked' as const,
+  getValueFromEvent: (checked: boolean) => (checked ? 1 : 0),
+  getValueProps: (v: unknown) => ({ checked: Number(v) === 1 }),
+}
+
+/**
+ * noLoginStatus 字段语义不变：0=需登录（需要认证），1=可匿名。
+ * 开关展示「需要认证」：打开=0，关闭=1。
+ */
+const noLoginStatusSwitchProps = {
+  valuePropName: 'checked' as const,
+  getValueFromEvent: (checked: boolean) => (checked ? 0 : 1),
+  getValueProps: (v: unknown) => ({ checked: Number(v) === 0 }),
+}
+
+function normalizeMenuTreeResult(raw: unknown): MenuTreeItem[] {
+  const r = raw as { data?: unknown } | null | undefined
+  if (Array.isArray(raw)) return raw as MenuTreeItem[]
+  if (Array.isArray(r?.data)) return r.data as MenuTreeItem[]
+  const d = r?.data as { data?: unknown } | undefined
+  if (Array.isArray(d?.data)) return d.data as MenuTreeItem[]
+  return []
+}
+
+const SubmitModal = forwardRef<any, PermissionModalProps>(function SubmitModal(
+  _props,
+  ref,
+) {
+  const { onOk, onCancel } = _props
+  const { t } = useTranslation()
+  const { commonDictRevision } = useAuth()
+  const [menuTreeData, setMenuTreeData] = useState<MenuTreeItem[]>([])
+
+  /** 编码「提交态」快照：字典 onChange、自定义 onBlur 后与上次比较，用于同步名称/方法 */
+  const suffixSyncBaselineRef = useRef('')
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const nextType = payload.opeType === 'edit' ? 'edit' : 'add'
+      const nextOpeId = payload.opeId ?? payload.data?.id
+      const record = payload.data
+      const { form, opeType, setOpeId } = modal
+      
+      void loadCommonDictData()
+
+      let tree: MenuTreeItem[] = []
+      try {
+        const treeRes = await getMenuTreeAPI()
+        tree = normalizeMenuTreeResult(treeRes)
+      } catch {
+        tree = []
+      }
+      setMenuTreeData(tree)
+
+      const defaultMenuId = String(
+        payload.menuId ??
+          record?.menuId ??
+          '',
+      )
+
+      if (nextType === 'edit' && nextOpeId) {
+        setOpeId(nextOpeId)
+        try {
+          const detailRes = await getPermissionDetailAPI(nextOpeId)
+          const detail = normalizePermissionDetail(detailRes)
+          form.resetFields()
+          const fv = mapDetailToForm(detail)
+          form.setFieldsValue(fv)
+          initPermissionCodeFields(form, fv.code)
+        } catch {
+          form.resetFields()
+          const fv = mapDetailToForm(record || {})
+          form.setFieldsValue(fv)
+          initPermissionCodeFields(form, fv.code)
+        }
+      } else if (nextType === 'edit' && record) {
+        setOpeId(record?.id)
+        form.resetFields()
+        const fv = mapDetailToForm(record)
+        form.setFieldsValue(fv)
+        initPermissionCodeFields(form, fv.code)
+      } else if (nextType === 'add' && payload.copyOpen) {
+        setOpeId(undefined)
+        form.resetFields()
+        const { data: src, variant } = payload.copyOpen
+        const base = mapDetailToForm(src)
+        const menuIdResolved =
+          String(base.menuId ?? '').trim() ||
+          String(src?.menuId ?? defaultMenuId ?? '')
+        if (variant) {
+          const crud = toPermissionCrudSlice(
+            {
+              title: String(base.title ?? ''),
+              httpMethod: String(base.httpMethod ?? 'POST'),
+              codeSuffix: String(base.code ?? ''),
+            },
+            variant,
+          )
+          form.setFieldsValue({
+            ...emptyPermissionFormValues(),
+            ...base,
+            title: crud.title,
+            httpMethod: crud.httpMethod,
+            code: crud.codeSuffix,
+            menuId: menuIdResolved,
+          })
+          initPermissionCodeFields(form, crud.codeSuffix)
+          // 复制为×后，立即更新基线，避免首次打开时误触发同步
+          suffixSyncBaselineRef.current = crud.codeSuffix
+        } else {
+          form.setFieldsValue({
+            ...emptyPermissionFormValues(),
+            ...base,
+            menuId: menuIdResolved,
+          })
+          initPermissionCodeFields(form, base.code)
+          // 仅复制时，基线设为原始后缀
+          const rawSuffix = splitPermissionCodeSuffix(src?.code ?? '')
+          suffixSyncBaselineRef.current = rawSuffix
+        }
+      } else {
+        setOpeId(undefined)
+        form.resetFields()
+        const def = DICT_DATA[DICT_KEY.permission].defaultValue
+        form.setFieldsValue({
+          ...emptyPermissionFormValues(),
+          menuId: defaultMenuId,
+          ...(def && { codePreset: def, codeCustom: '', code: def }),
+        })
+        suffixSyncBaselineRef.current = def || ''
+      }
+    },
+    onClose: () => {
+      setMenuTreeData([])
+      suffixSyncBaselineRef.current = ''
+      onCancel?.()
+    },
+  })
+  
+  const { isOpen, close, form, opeType, opeId } = modal
+  const menuIdWatched = Form.useWatch('menuId', form)
+  const codePresetWatched = Form.useWatch('codePreset', form)
+  const codeCustomWatched = Form.useWatch('codeCustom', form)
+  const hasMenu = useMemo(
+    () => menuIdWatched != null && String(menuIdWatched).trim() !== '',
+    [menuIdWatched],
+  )
+
+  const permissionDictOptions = useMemo(
+    () => DICT_DATA[DICT_KEY.permission].option,
+    [commonDictRevision],
+  )
+
+  /** 字典晚于弹窗打开时到达：补全新增默认值，并重新按字典拆分编辑/复制态编码 */
+  useEffect(() => {
+    if (!isOpen) return
+    if (opeType === 'add') {
+      const def = DICT_DATA[DICT_KEY.permission].defaultValue
+      // 普通新增：字段都为空时设置默认值
+      const preset = form.getFieldValue('codePreset')
+      const custom = String(form.getFieldValue('codeCustom') ?? '').trim()
+      const code = String(form.getFieldValue('code') ?? '').trim()
+      if (!preset && !custom && !code && def) {
+        form.setFieldsValue({ codePreset: def, codeCustom: '', code: def })
+        suffixSyncBaselineRef.current = def
+        return
+      }
+      // 复制新增：字典加载后重新拆分编码后缀
+      if (code && !preset && !custom) {
+        initPermissionCodeFields(form, code)
+        suffixSyncBaselineRef.current = code
+      }
+      return
+    }
+    if (opeType === 'edit') {
+      const suffix = getEffectiveCodeSuffix(
+        form.getFieldValue('codeCustom'),
+        form.getFieldValue('codePreset'),
+      )
+      initPermissionCodeFields(form, suffix)
+      suffixSyncBaselineRef.current = suffix
+    }
+  }, [commonDictRevision, form, isOpen, opeType])
+
+  const handlePermissionSuffixCommitted = useCallback(() => {
+    if (!hasMenu) return
+    const next = getEffectiveCodeSuffix(
+      form.getFieldValue('codeCustom'),
+      form.getFieldValue('codePreset'),
+    )
+    const prev = suffixSyncBaselineRef.current
+    if (next === prev) return
+    const opPrev = inferCrudFromSuffix(prev)
+    const opNext = inferCrudFromSuffix(next)
+    suffixSyncBaselineRef.current = next
+    if (opNext == null || opNext === opPrev) return
+    const out = toPermissionCrudSlice(
+      {
+        title: String(form.getFieldValue('title') ?? ''),
+        httpMethod: String(form.getFieldValue('httpMethod') ?? 'POST'),
+        codeSuffix: next,
+      },
+      opNext,
+    )
+    // 同步更新标题、方法、编码后缀到字典下拉框
+    form.setFieldsValue({
+      title: out.title,
+      httpMethod: out.httpMethod,
+      codePreset: out.codeSuffix,
+      codeCustom: '',
+    })
+  }, [form, hasMenu])
+
+  const menuCodePrefix = useMemo(
+    () => findMenuCodeInTree(menuTreeData, menuIdWatched),
+    [menuTreeData, menuIdWatched],
+  )
+  const [permissionCodeSelectOptions, setPermissionCodeSelectOptions] = useState<
+    { name: string; value: string }[]
+  >([])
+  const codeCustomHasOverride = useMemo(
+    () => String(codeCustomWatched ?? '').trim() !== '',
+    [codeCustomWatched],
+  )
+
+  const effectiveCodeSuffix = useMemo(
+    () => getEffectiveCodeSuffix(codeCustomWatched, codePresetWatched),
+    [codePresetWatched, codeCustomWatched],
+  )
+
+  const fullPermissionCodePreview = useMemo(() => {
+    if (!effectiveCodeSuffix) return ''
+    return menuCodePrefix
+      ? `${menuCodePrefix}:${effectiveCodeSuffix}`
+      : effectiveCodeSuffix
+  }, [effectiveCodeSuffix, menuCodePrefix])
+
+  /** 输入框有值优先，否则用字典选中项；写回 code 供校验与提交 */
+  useEffect(() => {
+    if (!hasMenu) return
+    form.setFieldValue(
+      'code',
+      getEffectiveCodeSuffix(codeCustomWatched, codePresetWatched),
+    )
+  }, [hasMenu, codePresetWatched, codeCustomWatched, form])
+
+  const { submitting, handleSubmit } = useModalSubmit<any, any>()
+  const permissionRules = useMemo(() => buildPermissionFormRules(t), [t])
+
+  const menuTreeSelectData = useMemo(
+    () => mapMenuTreeForPermissionBindSelect(menuTreeData),
+    [menuTreeData],
+  )
+
+  /** 未选菜单时不能选「扩展」：强制回到基础（1） */
+  useEffect(() => {
+    if (!hasMenu) {
+      const cur = form.getFieldValue('apiType')
+      if (Number(cur) === 2) {
+        form.setFieldValue('apiType', 1)
+      }
+    }
+  }, [hasMenu, form])
+
+  const modalTitle = useMemo(
+    () =>
+      opeType === 'edit'
+        ? t('system.permission.edit')
+        : t('system.permission.add'),
+    [opeType, t],
+  )
+
+  useImperativeHandle(ref, () => ({
+    open: modal.open,
+    close,
+  }), [modal.open, close])
+
+  const buildPayload = (values: any) => {
+    const mc = findMenuCodeInTree(menuTreeData, values.menuId)
+    const suffix = String(values.code ?? '').trim()
+    const fullCode = mc ? `${mc}:${suffix}` : suffix
+    return {
+    apiType: Number(values.apiType ?? 1),
+    title: values.title,
+    code: fullCode,
+    httpMethod: values.httpMethod,
+    path: values.path,
+    noLoginStatus: Number(values.noLoginStatus ?? 0),
+    logStatus: Number(values.logStatus ?? 0),
+    sortOrder: Number(values.sortOrder ?? 0),
+    description: values.description?.trim() || undefined,
+    menuId: String(values.menuId ?? ''),
+    ...(opeType === 'edit' && opeId != null ? { id: opeId } : {}),
+    }
+  }
+
+  const onOkClick = async () => {
+    if (opeType === 'detail') return
+    const result = await handleSubmit({
+      opeType,
+      validate: () => form.validateFields(),
+      addAPI: addPermissionAPI,
+      editAPI: (payload) => editPermissionAPI(payload),
+      transform: (values) => buildPayload(values),
+      // successMessage: {
+      //   add: t('system.permission.add_success'),
+      //   edit: t('system.permission.edit_success'),
+      // },
+      onSuccess: async ({ payload }) => {
+        await onOk?.(payload)
+      },
+    })
+    if (result) close()
+  }
+
+  return (
+    <CxModal
+      title={modalTitle}
+      isOpen={isOpen}
+      onClose={close}
+      modalConfig={{ width: 680 }}
+      opeType={opeType}
+      submitting={submitting}
+      onSubmit={onOkClick}>
+      <CxForm
+        className="permission-submit-modal-form"
+        form={form}
+        rules={permissionRules}
+        layout="vertical"
+        initialValues={emptyPermissionFormValues()}>
+        <CxFormItem
+          label={t('system.permission.belong_menu')}
+          name="menuId">
+          <CxTreeSelect
+            treeData={menuTreeSelectData}
+            placeholder={t('system.permission.menu_select_placeholder')}
+            allowClear
+            showSearch
+            treeDefaultExpandAll
+            treeNodeFilterProp="title"
+          />
+        </CxFormItem>
+        <CxFormItem
+          className="permission-submit-modal-code"
+          label={t('system.permission.code')}
+          required
+          extra={
+            hasMenu && fullPermissionCodePreview ? (
+              <span className="inline-flex flex-wrap items-center gap-x-1 text-xs text-gray-500 dark:text-gray-400">
+                <span className="inline-flex items-center gap-0.5">
+                  {t('system.permission.code_full_preview')}
+                  <Tooltip
+                    title={t('system.permission.code_full_preview_hint')}
+                    placement="top">
+                    <QuestionCircleOutlined
+                      className="cursor-help text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+                      aria-label={t('system.permission.code_full_preview_hint')}
+                    />
+                  </Tooltip>
+                </span>
+                <span>：</span>
+                <code className="max-w-full break-all rounded bg-gray-100 px-1.5 py-0.5 font-mono text-gray-800 dark:bg-gray-800 dark:text-gray-100">
+                  {fullPermissionCodePreview}
+                </code>
+              </span>
+            ) : null
+          }>
+          <div className="permission-submit-modal-code-fields w-full max-w-full">
+            <Row className="w-full max-w-full" gutter={0} wrap={false}>
+              <Col
+                span={12}
+                className={
+                  codeCustomHasOverride
+                    ? 'permission-submit-modal-code-col permission-submit-modal-code-col--dict-muted'
+                    : 'permission-submit-modal-code-col'
+                }>
+                {/*
+                  CxSelect + 数据字典范例：DICT_DATA[DICT_KEY.permission].option（键合法可写 DICT_KEY.permission），fieldNames 对齐 { value, name }；
+                  optionRender 下拉、labelRender 收起（此处仅 value）；字典由登录/打开时 void 触发，commonDictRevision 驱动刷新。
+                */}
+                <CxFormItem name="codePreset" noStyle>
+                  <CxSelect.Large
+                    className={`w-full min-w-0${codeCustomHasOverride ? ' permission-code-select-looks-disabled' : ''}`}
+                    disabled={!hasMenu}
+                    prefix={
+                      menuCodePrefix ? (
+                        <span className="max-w-[45%] shrink-0 truncate font-mono text-gray-600 dark:text-gray-300">
+                          {menuCodePrefix}:
+                        </span>
+                      ) : undefined
+                    }
+                    placeholder={t('system.permission.code_dict_select_placeholder')}
+                    options={permissionDictOptions}
+                    fieldNames={{ label: 'name', value: 'value' }}
+                    optionRender={(ori) => {
+                      const o = ori.data as DictOptionItem
+                      return `${o.value}（${o.name}）`
+                    }}
+                    labelRender={(item) => String(item.value)}
+                    onChange={(v) => {
+                      form.setFieldsValue({
+                        codePreset: v,
+                        codeCustom: '',
+                      })
+                      handlePermissionSuffixCommitted()
+                    }}
+                  />
+                </CxFormItem>
+              </Col>
+              <Col span={12} className="permission-submit-modal-code-col">
+                <CxFormItem name="codeCustom" noStyle>
+                  <CxInput.Large
+                    className="w-full min-w-0"
+                    disabled={!hasMenu}
+                    placeholder={t('system.permission.code_input_override_placeholder')}
+                    onBlur={() => {
+                      handlePermissionSuffixCommitted()
+                    }}
+                  />
+                </CxFormItem>
+              </Col>
+            </Row>
+            <Form.Item name="code" hidden rules={permissionRules.code}>
+              <Input />
+            </Form.Item>
+          </div>
+        </CxFormItem>
+        <CxFormItem
+          label={t('system.permission.title')}
+          name="title">
+          <CxInput.Large placeholder={t('system.permission.title_placeholder')} />
+        </CxFormItem>
+        <CxFormItem
+          label={t('system.permission.path')}
+          name="path">
+          <CxInput.Large placeholder={t('system.permission.path_placeholder')} />
+        </CxFormItem>
+        <CxFormItem
+          label={t('system.permission.http_method')}
+          name="httpMethod">
+          <CxSelect.Large options={ENUM_DATA.httpMethod.option} />
+        </CxFormItem>
+        <CxFormItem
+          label={t('system.permission.api_type')}
+          name="apiType"
+          extra={
+            !hasMenu ? (
+              <span className="text-xs text-gray-500 dark:text-gray-400">
+                {t('system.permission.api_type_menu_hint')}
+              </span>
+            ) : null
+          }>
+          <Radio.Group className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:gap-x-6 sm:gap-y-2">
+            {ENUM_DATA.permissionApiType.option.map((o) => (
+              <Radio
+                key={String(o.value)}
+                value={o.value}
+                disabled={!hasMenu && Number(o.value) === 2}>
+                {t(o.label)}
+              </Radio>
+            ))}
+          </Radio.Group>
+        </CxFormItem>
+        <CxFormItem
+          label={t('system.permission.no_login_status')}
+          name="noLoginStatus"
+          {...noLoginStatusSwitchProps}>
+          <CxSwitch />
+        </CxFormItem>
+        <CxFormItem
+          label={t('system.permission.log_status')}
+          name="logStatus"
+          {...switchCheckedProps}>
+          <CxSwitch />
+        </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.permission.sort_order_placeholder')}
+          />
+        </CxFormItem>
+      </CxForm>
+    </CxModal>
+  )
+})
+
+export default SubmitModal