@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/esm/components/EditMultiLangForm.tpl

@@ -0,0 +1,366 @@
+import ProForm, { ModalForm, ProFormText } from '@ant-design/pro-form';
+import { EditableProTable, ProColumns } from '@ant-design/pro-table';
+import { useIntl } from '@umijs/max';
+import { Form, Spin } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { batchSave, batchSaveI18n, queryI18nData, queryLangInfoList } from '../services';
+import { EditMultiLangFormProps, LangInfoItem } from '../types';
+
+type DataSourceType = {
+  langInfoId: React.Key;
+  lang?: string;
+  value?: string;
+};
+
+/**
+ * 设置多语言
+ */
+const defaultData: DataSourceType[] = [
+  {
+    langInfoId: -1,
+    lang: 'en_US',
+    value: '',
+  },
+  {
+    langInfoId: -2,
+    lang: 'th_TH',
+    value: '',
+  },
+  {
+    langInfoId: -3,
+    lang: 'zh_CN',
+    value: '',
+  },
+  {
+    langInfoId: -4,
+    lang: 'zh_TW',
+    value: '',
+  },
+];
+
+/**
+ * 多语言处理组件
+ * @param props
+ * @returns
+ */
+const EditMultiLangForm: React.FC<EditMultiLangFormProps> = (props) => {
+  const { version = 'v1' } = props;
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm();
+
+  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() => defaultData.map((item) => item.langInfoId));
+
+  /**
+   * 数据源
+   */
+  const [dataSource, setDataSource] = useState<DataSourceType[]>(() => [...defaultData]);
+
+  /**
+   * 加载中标识
+   */
+  const [loading, setLoading] = useState<boolean>(false);
+  // 处理表格表单缓存问题
+  const [tableKey, setTableKey] = useState<number>(0);
+
+  useEffect(() => {
+    if (form && !props.modalFormVisible) {
+      form.resetFields();
+      // 清理数据状态，避免缓存问题
+      setDataSource(() => [...defaultData]);
+      setEditableRowKeys(() => defaultData.map((item) => item.langInfoId));
+      setTableKey((prev) => prev + 1);
+    }
+  }, [props.modalFormVisible]);
+
+  /**
+   * 请求数据
+   */
+  async function fetchData() {
+    if (!props.values) return;
+
+    // 深度拷贝defaultData，避免修改原始对象
+    const list: DataSourceType[] = defaultData.map((item) => ({
+      langInfoId: item.langInfoId,
+      lang: item.lang,
+      value: item.value,
+    }));
+
+    /**
+     * 加载中
+     */
+    setLoading(true);
+
+    /**
+     * 请求后台API设置的多语言
+     */
+    const queryList = props.queryLangInfoList ?? queryLangInfoList;
+    const result = await queryList({ ...props.values });
+
+    if (result && result.code === 200) {
+      for (let j = 0; j < list.length; j++) {
+        for (let i = 0; i < result.rows.length; i++) {
+          if (result.rows[i].lang === list[j].lang) {
+            list[j].langInfoId = result.rows[i].langInfoId;
+            list[j].value = result.rows[i].value;
+          }
+        }
+      }
+
+      setDataSource(list);
+      setEditableRowKeys(list.map((item) => item.langInfoId));
+    }
+
+    /**
+     * 加载中
+     */
+    setLoading(false);
+  }
+
+  /**
+ * 请求数据
+ */
+  async function fetchDataV2() {
+    if (!props.values) return;
+
+    /**
+     * 加载中
+     */
+    setLoading(true);
+
+    /**
+     * 请求后台API设置的多语言
+     */
+    const queryList = props.queryLangInfoList ?? queryI18nData;
+    const result = await queryList({ 
+      tableName: props.values.tableName,
+      columnName: props.values.columnName,
+      dataId: props.values.recordId,
+     });
+    const i18nJson = result?.data?.i18nJson;
+
+    if (result?.code === 200 && i18nJson) {
+      const newList = dataSource.map((item, idx) => {
+        return {
+          ...item,
+          value: i18nJson[item.lang]?.dic_name,
+          langInfoId: new Date().getTime() + idx,
+        };
+      });
+
+      setDataSource([...newList]);
+      setEditableRowKeys(newList.map((item) => item.langInfoId));
+    }
+
+    /**
+     * 加载中
+     */
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    if (props.values) {
+      form.setFieldsValue({
+        ...props.values,
+      });
+
+      if (version === 'v1') {
+        fetchData();
+      } else {
+        fetchDataV2();
+      }
+    }
+  }, [props.values]);
+
+  const columns: ProColumns<DataSourceType>[] = [
+    {
+      title: formatMessage({
+        id: 'cfmmUI.multilang.column.lang',
+        defaultMessage: '语言',
+      }),
+      key: 'lang',
+      dataIndex: 'lang',
+      valueType: 'select',
+
+      editable: () => {
+        return false;
+      },
+      valueEnum: {
+        en_US: {
+          text: formatMessage({
+            id: 'cfmmUI.multilang.column.lang.en_US',
+            defaultMessage: '英语',
+          }),
+        },
+        th_TH: {
+          text: formatMessage({
+            id: 'cfmmUI.multilang.column.lang.th_TH',
+            defaultMessage: '泰语',
+          }),
+        },
+        zh_CN: {
+          text: formatMessage({
+            id: 'cfmmUI.multilang.column.lang.zh_CN',
+            defaultMessage: '简体中文',
+          }),
+        },
+        zh_TW: {
+          text: formatMessage({
+            id: 'cfmmUI.multilang.column.lang.zh_TW',
+            defaultMessage: '繁體中文',
+          }),
+        },
+      },
+    },
+    {
+      title: formatMessage({
+        id: 'cfmmUI.multilang.column.value',
+        defaultMessage: '内容',
+      }),
+      dataIndex: 'value',
+    },
+  ];
+
+  /**
+   * 提交方法
+   */
+  const handleSubmit = async () => {
+    if (!props.values) return;
+    /**
+     * 加载中
+     */
+    setLoading(true);
+
+    let data: LangInfoItem[] = [];
+
+    let onSave = props.batchSave ? props.batchSave : batchSave;
+
+    if (version === 'v1') {
+      data = new Array(dataSource.length);
+
+      for (let i = 0; i < dataSource.length; i++) {
+        data[i] = {
+          tableName: props.values.tableName,
+          columnName: props.values.columnName,
+          recordId: props.values.recordId,
+          langInfoId: Number(dataSource[i].langInfoId) > 0 ? Number(dataSource[i].langInfoId) : 0,
+          lang: dataSource[i].lang,
+          value: dataSource[i].value,
+        };
+      }
+    } else {
+      data = dataSource.map(item => ({
+        lang: item.lang,
+        value: item.value,
+        dataId: props.values!.recordId,
+        tableName: props.values!.tableName,
+        columnName: props.values!.columnName,
+      }))
+      onSave = batchSaveI18n;
+    }
+
+    const result = await onSave(data);
+
+    // 返回数据处理
+    if (result && result.code === 200) {
+      props.setModalFormVisible(false);
+
+      //修改完成后，需要调用回调函数（大部分情况是需要刷新表格，如果不存在则不需要）
+      if (props.onAfterSubmit) {
+        props.onAfterSubmit();
+      }
+    }
+
+    /**
+     * 加载中
+     */
+    setLoading(false);
+  };
+
+  return (
+    <ModalForm
+      form={form}
+      width={800}
+      title={formatMessage({
+        id: 'cfmmUI.multilang.edit.form.title',
+        defaultMessage: '编辑多语言',
+      })}
+      open={props.modalFormVisible}
+      onOpenChange={props.setModalFormVisible}
+      onFinish={handleSubmit}
+      //关闭弹窗清除数据
+      modalProps={{
+        destroyOnHidden: true,
+        forceRender: true,
+      }}
+    >
+      <ProForm.Group>
+        <ProFormText
+          width="sm"
+          name="tableName"
+          disabled
+          tooltip={formatMessage({
+            id: 'cfmmUI.multilang.column.tableName.tooltip',
+            defaultMessage: '列名称',
+          })}
+          label={formatMessage({
+            id: 'cfmmUI.multilang.column.tableName',
+            defaultMessage: '表名称',
+          })}
+        />
+
+        <ProFormText
+          width="sm"
+          name="columnName"
+          disabled
+          tooltip={formatMessage({
+            id: 'cfmmUI.multilang.column.columnName.tooltip',
+            defaultMessage: '列名称',
+          })}
+          label={formatMessage({
+            id: 'cfmmUI.multilang.column.columnName',
+            defaultMessage: '列名称',
+          })}
+        />
+
+        <ProFormText
+          width="sm"
+          name="recordId"
+          disabled
+          tooltip={formatMessage({
+            id: 'cfmmUI.multilang.column.recordId.tooltip',
+            defaultMessage: '列名称',
+          })}
+          label={formatMessage({
+            id: 'cfmmUI.multilang.column.recordId',
+            defaultMessage: '记录ID',
+          })}
+        />
+      </ProForm.Group>
+
+      <Spin spinning={loading}>
+        {/* 多语言编辑表格 */}
+        <EditableProTable<DataSourceType>
+          key={tableKey}
+          columns={columns}
+          rowKey="langInfoId"
+          value={dataSource}
+          onChange={setDataSource as any}
+          recordCreatorProps={false}
+          editable={{
+            type: 'multiple',
+            editableKeys,
+            actionRender: () => {
+              return [];
+            },
+            onValuesChange: (record, recordList) => {
+              setDataSource(recordList);
+            },
+            onChange: setEditableRowKeys,
+          }}
+        />
+      </Spin>
+    </ModalForm>
+  );
+};
+
+export default React.memo(EditMultiLangForm);

package/dist/esm/components/ExportPageWrapper.tpl

@@ -0,0 +1,224 @@
+import { DownloadOutlined } from '@ant-design/icons';
+import { ProFormRadio, ProFormSelect, ProFormText } from '@ant-design/pro-components';
+import { useIntl, useModel } from '@umijs/max';
+import { FloatButton, Form, Modal } from 'antd';
+import dayjs from 'dayjs';
+import React, { useEffect, useRef, useState } from 'react';
+import { usePageExport } from '../hooks/usePageExport';
+import { ExportPageFormValues, ExportPageOptions, ExportPageProps } from '../types';
+
+const initialValues: Omit<ExportPageFormValues, 'filename'> = {
+  exportType: 'pdf',
+  quality: 1,
+  imageType: 'image/png',
+  actionType: 'export',
+};
+
+const ExportPageWrapper: React.FC<ExportPageProps> = (props) => {
+  const { filename, pageWaterMarkText, showExportButton, floatButtonProps, exportPageOptions } = props;
+
+  const { formatMessage } = useIntl();
+  const { currentUser } = window.__POWERED_BY_QIANKUN__ ? useModel('@@qiankunStateFromMaster') : useModel('user');
+  const { onExportPDF, onPreviewPDF, onExportImage, onPreviewImage, loading } = usePageExport();
+  const exportRef = useRef<HTMLDivElement>(null);
+  const [form] = Form.useForm<ExportPageFormValues>();
+
+  const [exportLoading, setExportLoading] = useState<boolean>(false);
+  // 根据PDFWaterMark属性初始化tempWaterMark
+  const [tempWaterMark, setTempWaterMark] = useState<string | undefined>(currentUser.userName);
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [exportType, setExportType] = useState<ExportPageFormValues['exportType']>(initialValues.exportType);
+  const [imageType, setImageType] = useState<ExportPageFormValues['imageType']>(initialValues.imageType);
+
+  const handleImageTypeChange = (value: ExportPageFormValues['imageType']) => {
+    setImageType(value);
+    if (value === 'image/png') {
+      form.setFieldsValue({
+        quality: 1,
+      });
+    }
+  };
+
+  const handleFinish = (values: ExportPageFormValues) => {
+    if (loading || exportLoading) return; // 防止重复点击
+
+    setExportLoading(true);
+    setTempWaterMark(pageWaterMarkText ?? `${currentUser.userName} - ${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
+
+    const concatOptions: ExportPageOptions = {
+      ...exportPageOptions,
+      filename: values.filename,
+      imageType: values.imageType,
+      quality: values.quality,
+    };
+
+    setTimeout(() => {
+      if (!exportRef.current) return;
+      let actionFn;
+      if (values.exportType === 'pdf') {
+        actionFn = values.actionType === 'export' ? onExportPDF : onPreviewPDF;
+      } else {
+        actionFn = values.actionType === 'export' ? onExportImage : onPreviewImage;
+      }
+      actionFn(exportRef.current, {
+        ...concatOptions,
+      }).finally(() => {
+        // 导出完成后恢复原始水印
+        setTempWaterMark(currentUser.userName);
+        setExportLoading(false);
+      });
+    }, 100); // 小延迟确保水印渲染
+  };
+
+  // 将tempWaterMark传递给children
+  const renderChildren = () => {
+    if (!props.children) return null;
+
+    // 如果children是React元素，使用cloneElement传递props
+    if (React.isValidElement(props.children)) {
+      return React.cloneElement(props.children as any, {
+        tempWaterMark,
+        ...(props.children.props || {}),
+      });
+    }
+
+    // 如果是数组或其他类型，遍历处理
+    if (Array.isArray(props.children)) {
+      return React.Children.map(props.children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child as any, {
+            tempWaterMark,
+            ...(child.props || {}),
+          });
+        }
+        return child;
+      });
+    }
+
+    return props.children;
+  };
+
+  useEffect(() => {
+    if (showModal && (exportPageOptions || filename)) {
+      form.setFieldsValue({
+        filename,
+        ...exportPageOptions,
+      });
+    }
+  }, [form, exportPageOptions, filename, showModal]);
+
+  return (
+    <>
+      <div ref={exportRef}>{renderChildren()}</div>
+      {showExportButton ? (
+        <FloatButton
+          icon={<DownloadOutlined />}
+          tooltip={<>{formatMessage({ id: 'cfmmUI.common.button.export' })} PDF</>}
+          onClick={() => setShowModal(true)}
+          {...floatButtonProps}
+        />
+      ) : null}
+      {showModal && (
+        <Modal
+          title={formatMessage({ id: 'cfmmUI.common.button.export' }) + ' PDF'}
+          open={showModal}
+          onCancel={() => setShowModal(false)}
+          okButtonProps={{ autoFocus: true, loading: exportLoading, htmlType: 'submit' }}
+          modalRender={(dom) => (
+            <Form layout="horizontal" form={form} initialValues={initialValues} clearOnDestroy onFinish={handleFinish}>
+              {dom}
+            </Form>
+          )}
+        >
+          <ProFormText
+            name="filename"
+            label={formatMessage({ id: 'cfmmUI.File.column.name', defaultMessage: '文件名称' })}
+            rules={[{ required: true }]}
+          ></ProFormText>
+          <ProFormRadio.Group
+            fieldProps={{
+              optionType: 'button',
+              buttonStyle: 'solid',
+              onChange: (e) => setExportType(e.target.value),
+            }}
+            name="exportType"
+            label={formatMessage({ id: 'cfmmUI.File.column.exportType', defaultMessage: '导出类型' })}
+            rules={[{ required: true }]}
+            options={[
+              { label: 'PDF', value: 'pdf' },
+              { label: formatMessage({ id: 'cfmmUI.File.exportType.image', defaultMessage: '图片' }), value: 'image' },
+            ]}
+          />
+          <ProFormRadio.Group
+            fieldProps={{
+              optionType: 'button',
+              buttonStyle: 'solid',
+            }}
+            name="actionType"
+            rules={[{ required: true }]}
+            label={formatMessage({ id: 'cfmmUI.File.column.actionType', defaultMessage: '操作类型' })}
+            options={[
+              { label: formatMessage({ id: 'cfmmUI.common.button.export', defaultMessage: '导出' }), value: 'export' },
+              {
+                label: formatMessage({ id: 'cfmmUI.common.button.preview', defaultMessage: '预览' }),
+                value: 'preview',
+              },
+            ]}
+          />
+          {exportType === 'image' && (
+            <ProFormRadio.Group
+              name="imageType"
+              label={formatMessage({ id: 'cfmmUI.File.column.imageType', defaultMessage: '图片格式' })}
+              fieldProps={{
+                optionType: 'button',
+                buttonStyle: 'solid',
+                onChange: (e) => handleImageTypeChange(e.target.value),
+              }}
+              rules={[{ required: true }]}
+              options={[
+                { label: 'PNG', value: 'image/png' },
+                { label: 'JPEG', value: 'image/jpeg' },
+              ]}
+            />
+          )}
+          <ProFormSelect
+            name="quality"
+            label={formatMessage({ id: 'cfmmUI.File.column.quality', defaultMessage: '压缩质量' })}
+            rules={[{ required: true }]}
+            fieldProps={{
+              allowClear: false,
+              disabled: exportType === 'image' && imageType === 'image/png',
+            }}
+            tooltip={
+              <>
+                <div>
+                  {formatMessage({
+                    id: 'cfmmUI.File.export.quality.tips',
+                    defaultMessage: '压缩质量越高，图片越清晰，文件体积越大',
+                  })}
+                </div>
+                <div>
+                  {formatMessage({ id: 'cfmmUI.File.export.quality.png.tips', defaultMessage: 'PNG格式不支持压缩' })}
+                </div>
+              </>
+            }
+            options={[
+              { label: '100%', value: 1 },
+              { label: '90%', value: 0.9 },
+              { label: '80%', value: 0.8 },
+              { label: '70%', value: 0.7 },
+              { label: '60%', value: 0.6 },
+              { label: '50%', value: 0.5 },
+              { label: '40%', value: 0.4 },
+              { label: '30%', value: 0.3 },
+              { label: '20%', value: 0.2 },
+              { label: '10%', value: 0.1 },
+            ]}
+          />
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default React.memo(ExportPageWrapper);

package/dist/esm/components/FlieListModal.tpl

@@ -0,0 +1,79 @@
+import MyUpload from './MyUpload';
+import { useIntl } from '@umijs/max';
+import { Modal } from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import { FlieListModalProps, FileListType } from '../types';
+
+/**
+ *
+ * @param open  控制弹窗显示
+ * @param title   弹窗标题
+ * @param uploadType 上传文件类型
+ * @param removeConfirmTitle      删除确认弹窗标题
+ * @param removeConfirmContent    删除确认弹窗内容
+ * @param list
+ * @param onCancel      关闭弹窗事件函数
+ * @param onOk          提交事件函数
+ */
+const UploadFlieListModal = (props: FlieListModalProps) => {
+  const {
+    list,
+    open,
+    title,
+    bucketName,
+    uploadType = 'drag',
+    removeConfirmTitle,
+    removeConfirmContent,
+    onCancel,
+    onOk,
+  } = props;
+  const { formatMessage } = useIntl();
+  const [fileList, setFileList] = useState<FileListType[]>(list || []);
+
+  const init = () => {
+    setFileList([]);
+  };
+
+  const handleChange = useCallback((list: FileListType[]) => {
+    setFileList(list);
+  }, []);
+
+  // 取消按钮事件
+  const handleCancel = useCallback(() => {
+    init();
+    onCancel?.();
+  }, []);
+
+  // 确认后将文件id列表传给外部组件
+  const handleOk = useCallback(() => {
+    onOk(fileList, init);
+  }, [fileList]);
+
+  // 设置默认值
+  useEffect(() => {
+    setFileList(list || []);
+  }, [list]);
+
+  return (
+    <Modal
+      title={title ? title : formatMessage({ id: 'cfmmUI.File.upload.file', defaultMessage: '上传文件' })}
+      destroyOnHidden
+      maskClosable={false}
+      width={800}
+      open={open}
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <MyUpload
+        bucketName={bucketName}
+        uploadType={uploadType}
+        removeConfirmTitle={removeConfirmTitle}
+        removeConfirmContent={removeConfirmContent}
+        onChange={handleChange}
+        defautlFileList={fileList}
+      />
+    </Modal>
+  );
+};
+
+export default React.memo(UploadFlieListModal);