@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/cjs/components/MySelect.tpl

@@ -0,0 +1,267 @@
+import { Empty, Select, Spin } from 'antd';
+import React, {
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { useIntl } from '@umijs/max';
+import { debounce } from 'lodash';
+import { MySelectProps } from '../types';
+
+const { Option } = Select;
+
+/**
+ * @param autoSelect 列表只有一项时，直接选中，不需要再次点击
+ * @param showAllList 获取所有数据，不分页
+ * @param localListData 传递给组件的下拉数据
+ * @param backShowList 回显列表
+ * @param request  请求列表数据
+ * @param keyNames  Option组件的参数
+ * @param searchKey  搜索传给后端的key
+ * @param otherSearchValue  根据其他条件查询下拉列表数据
+ * @param selectKey  下拉框选择的值
+ * @param onlyShowName  只显示名称
+ * @param itemRender  自定义渲染
+ * @param valueType  内容类型
+ * @param showDropdown  判断下拉框的显示
+ * @param getSelectList 获取当前选中的原始数据数组
+ * @param dropDownListChange 数据下拉列表变化回调
+ * @param 组件Select的参数
+ */
+const MySelect = <T,>(props: MySelectProps<T>, ref: ForwardedRef<any>) => {
+  const {
+    readonly,
+    mustSearch,
+    autoSelect,
+    showAllList,
+    localListData,
+    onlyShowName,
+    keyNames,
+    showSearch,
+    backShowList = [],
+    valueType = 'key',
+    searchKey = keyNames.code || keyNames.name,
+    selectKey = keyNames.id,
+    otherSearchValue,
+    request,
+    itemRender,
+    showDropdown,
+    getSelectList,
+    pageSize = 20,
+    mode,
+    dropDownListChange,
+    ...reset
+  } = props;
+
+  const { formatMessage } = useIntl();
+  const onLoadRef = useRef<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [getListData, setListData] = useState<T[]>(backShowList);
+  const [allListData, setAllListData] = useState<T[]>(backShowList);
+  const [searchValue, setSearchValue] = useState<{ [key: string]: string | undefined }>();
+
+  const value = useMemo(() => {
+    if (mode === 'multiple' && valueType !== 'object') {
+      return props.value;
+    }
+
+    return typeof props.value === 'object' ? props.value?.id : props.value;
+  }, [props.value, mode]);
+
+  // 显示列表
+  const showList: T[] = useMemo(() => {
+    if ((showSearch && (searchValue?.[searchKey as string] || otherSearchValue)) || backShowList.length === 0) {
+      return getListData;
+    } else {
+      const list = [...backShowList];
+      getListData.forEach((item) => {
+        if (!backShowList.some((v) => item[keyNames.id] === v[keyNames.id])) {
+          list.push(item);
+        }
+      });
+      return list;
+    }
+  }, [backShowList, getListData]);
+
+  // 只读值
+  const readonlyValue = useMemo(() => {
+    if (readonly) {
+      const item = showList.find((item) => item[keyNames.id] === value);
+      if(!item) return '-';
+      
+      if(props.itemRender && !Array.isArray(props.itemRender([item]))) {
+        return props.itemRender([item]);
+      }
+      return keyNames.code && !onlyShowName ? `${item[keyNames.name]}(${item[keyNames.code]})` : item[keyNames.name];
+    }
+    return value;
+  }, [value, showList, keyNames, readonly]);
+
+  const handleSearch = debounce((v: string) => {
+    setSearchValue({ [searchKey]: v });
+  }, 500);
+
+  // 获取数据
+  useImperativeHandle(ref, () => ({}));
+
+  const requestData = async () => {
+    if (mustSearch && !searchValue?.[searchKey as string]) {
+      setListData([]);
+      return [];
+    }
+
+    setLoading(true);
+    setListData([]);
+    let params = showSearch ? { ...searchValue, ...otherSearchValue } : otherSearchValue;
+    // 如果显示全部，则不分页
+    params = showAllList ? params : { pageIndex: 1, pageSize: 20, ...params };
+    const response = await request(params);
+    if (response.rows && response.rows.length > 0) {
+      // 如果有搜索值，则不添加回显值
+      setListData(response.rows);
+
+      const allList = [...allListData];
+      // 如果原有列表没有，则增加，防止getSelectList找不到选择的项
+      response.rows.forEach((item) => {
+        if (!getListData.some((v) => item[keyNames.id] === v[keyNames.id])) {
+          allList.push(item);
+        }
+      });
+      setAllListData(allList);
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (Array.isArray(localListData) && !showSearch) {
+      setListData(localListData);
+      return;
+    }
+
+    requestData();
+  }, [localListData, searchValue, otherSearchValue]);
+
+  // 渲染Option组件
+  const render = useCallback(() => {
+    // 外部自定义渲染
+    if (itemRender) {
+      return itemRender(showList);
+    }
+    // 默认渲染
+    return showList.map((item: any) => {
+      return (
+        <Option key={item[keyNames.id]} value={item[selectKey]} disabled={item.disabled}>
+          {onlyShowName ? item[keyNames.name] : `${item[keyNames.name]}(${item[keyNames.code]})`}
+        </Option>
+      );
+    });
+  }, [showList]);
+
+  // 处理参数
+  const handleChange = (value: React.Key | React.Key[]) => {
+    // 多选
+    if (mode === 'multiple') {
+      const selectList = allListData.filter((item) => (value as React.Key[])?.includes(item[keyNames.id] as React.Key));
+      getSelectList?.(selectList);
+
+      if (valueType === 'key') {
+        return props.onChange?.(value, {});
+      }
+
+      // 多选valueType是object，有异常，暂未适配
+      // 初始回显，如果value已经是需要的格式，则不用做处理
+      // if(Array.isArray(value) && value.length > 0) {
+      //   if(value.some((item) => item.id && item.name && item.code)) {
+      //     return props.onChange?.(value, {});
+      //   }
+      // }
+
+      return props.onChange?.(
+        selectList.map((item) => {
+          return {
+            code: keyNames.code ? item?.[keyNames.code] : undefined,
+            name: item?.[keyNames.name],
+            id: item?.[keyNames.id],
+          };
+        }),
+        {},
+      );
+    }
+
+    // 单选
+    const curItem = allListData.find((item) => item[keyNames.id] === value);
+    getSelectList?.(curItem ? [curItem] : []);
+
+    if (valueType === 'key') {
+      return props.onChange?.(value, {});
+    }
+
+    // 处理需要对象的情况
+    if (valueType === 'object') {
+      return props.onChange?.(
+        {
+          code: keyNames.code ? curItem?.[keyNames.code] : undefined,
+          name: curItem?.[keyNames.name],
+          id: curItem?.[keyNames.id],
+        },
+        {},
+      );
+    }
+  };
+
+  const handleClear = () => {
+    setSearchValue(undefined);
+    props.onClear?.();
+  };
+
+  // 初始化，将字段设置为对象格式
+  useEffect(() => {
+    if (valueType === 'object' && getListData.length > 0 && onLoadRef.current) {
+      onLoadRef.current = false;
+      handleChange(props.value);
+    }
+
+    // 下拉列表数据变化，目前用于列表只有一项时，直接选中，不需要再次点击
+    dropDownListChange?.(getListData);
+    if (autoSelect && getListData.length === 1 && props.onChange && valueType !== 'object') {
+      handleChange(getListData[0][keyNames.id] as React.Key);
+    }
+  }, [getListData]);
+
+  return (
+    <>
+      {readonly ? (
+        <div>
+          {readonlyValue || '-'}
+        </div>
+      ) : (
+        <Select
+          open={showDropdown}
+          placeholder={formatMessage({ id: 'cfmmUI.common.placeholder.select', defaultMessage: '请选择' })}
+          filterOption={false}
+          loading={loading}
+          showSearch={showSearch}
+          onSearch={showSearch ? handleSearch : undefined}
+          notFoundContent={loading ? <Spin size="small" /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
+          mode={mode}
+          {...reset}
+          onChange={handleChange}
+          onClear={handleClear}
+          value={value}
+        >
+          {render()}
+        </Select>
+      )}
+    </>
+  );
+};
+
+export default React.memo(forwardRef(MySelect)) as <T>(
+  props: MySelectProps<T> & { ref?: ForwardedRef<any> },
+) => JSX.Element;

package/dist/cjs/components/MySelectLang.tpl

@@ -0,0 +1,22 @@
+import { getLocale, SelectLang, useModel } from '@umijs/max';
+import React from 'react';
+import { SelectLangProps } from '../types';
+
+const MySelectLang = (props: SelectLangProps) => {
+  const { currentGlobalLang, handleGlobalLangChange } = window.__POWERED_BY_QIANKUN__
+    ? useModel('@@qiankunStateFromMaster')
+    : useModel('global');
+
+  return (
+    <SelectLang
+      key={currentGlobalLang}
+      onItemClick={(e) => {
+        if (getLocale() === e.key) return;
+        handleGlobalLangChange(e.key);
+      }}
+      {...props}
+    />
+  );
+};
+
+export default React.memo(MySelectLang);

package/dist/cjs/components/MySetps.tpl

@@ -0,0 +1,85 @@
+
+import { useIntl } from '@umijs/max';
+import { Button, Steps } from 'antd';
+import React, { useState } from 'react';
+import { MySetpsProps } from '../types';
+import MyFooterToolbar from './MyFooterToolbar';
+
+const MySetps: React.FC<MySetpsProps> = (props) => {
+  const { items = [], submitButtonIndex = items.length - 1, showActionButton, onSubmit, ...stepProps } = props;
+
+  const { formatMessage } = useIntl();
+  const [current, setCurrent] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  // 过滤掉 buttonRender 属性，避免传递给 antd Steps 组件
+  const stepsItems = items.map(({ buttonRender, ...item }) => item);
+
+  const next = () => {
+    setCurrent(current + 1);
+  };
+
+  const prev = () => {
+    setCurrent(current - 1);
+  };
+
+  const submit = async () => {
+    if (loading) return;
+
+    setLoading(true);
+    const res = await onSubmit?.();
+    setLoading(false);
+
+    let success = false;
+
+    if (typeof res === 'boolean') {
+      success = res;
+    } else if (res?.success) {
+      success = res.success;
+    }
+
+    if (success && submitButtonIndex !== items.length - 1) {
+      next();
+    }
+  };
+
+  return (
+    <>
+      <Steps current={current} items={stepsItems} {...stepProps} />
+      <div style={{ marginTop: 24 }}>{stepsItems[current]?.content}</div>
+
+      {showActionButton ? (
+        <MyFooterToolbar extra={false}>
+          {items[current].buttonRender ? (
+            items[current].buttonRender({ current, setCurrent, next, prev, submit, loading })
+          ) : (
+            <>
+              {current > 0 && current - submitButtonIndex <= 0 && (
+                <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
+                  {formatMessage({ id: 'cfmmUI.common.button.prev', defaultMessage: '上一步' })}
+                </Button>
+              )}
+              {current < items.length - 1 && current !== submitButtonIndex && (
+                <Button type="primary" onClick={() => next()}>
+                  {formatMessage({ id: 'cfmmUI.common.button.next', defaultMessage: '下一步' })}
+                </Button>
+              )}
+              {current === items.length - 1 && (
+                <Button onClick={() => setCurrent(0)}>
+                  {formatMessage({ id: 'cfmmUI.common.button.back', defaultMessage: '返回' })}
+                </Button>
+              )}
+              {current === submitButtonIndex && (
+                <Button type="primary" onClick={submit} loading={loading}>
+                  {formatMessage({ id: 'cfmmUI.common.button.submit', defaultMessage: '提交' })}
+                </Button>
+              )}
+            </>
+          )}
+        </MyFooterToolbar>
+      ) : null}
+    </>
+  );
+};
+
+export default React.memo(MySetps);

package/dist/cjs/components/MyTagList.tpl

@@ -0,0 +1,57 @@
+import { Space, Tag, Tooltip } from "antd";
+import React, { useCallback, useMemo } from "react";
+import { MyTagListProps } from "../types";
+
+/**
+ *
+ * @param tagList 标签显示列表
+ * @param tagColor 标签颜色
+ * @param max 显示页面表情最大值
+ * @param tooltipProps  tooltip组件的全部参数
+ */
+const MyTagList = (props: MyTagListProps) => {
+  const { tagList, tooltipProps, max = 3, tagColor = "blue" } = props;
+
+  // 参数归一化
+  const list: string[] = useMemo(() => {
+    if (!tagList) return [];
+    if (typeof tagList === "string") return tagList.split(",");
+    return tagList;
+  }, [tagList]);
+
+  const render = useCallback(() => {
+    //判断是否需要截取和显示省略
+    const showEllipsis = list.length > max;
+    const showMouldList = showEllipsis ? list.slice(0, max) : list;
+
+    return (
+      <Tooltip
+        overlayInnerStyle={list.length > 10 ? { minWidth: "520px" } : undefined}
+        color={"#fff"}
+        title={
+          <Space size={[0, 8]} wrap>
+            {list.map((item) => (
+              <Tag key={item} color={tagColor}>
+                {item}
+              </Tag>
+            ))}
+          </Space>
+        }
+        {...tooltipProps}
+      >
+        {showMouldList.map((mouldCode) => {
+          return (
+            <Tag key={mouldCode} color={tagColor}>
+              {mouldCode}
+            </Tag>
+          );
+        })}
+        {showEllipsis && <Tag color={tagColor}>{"..."}</Tag>}
+      </Tooltip>
+    );
+  }, [list]);
+
+  return render();
+};
+
+export default React.memo(MyTagList);

package/dist/cjs/components/MyUpload.less

@@ -0,0 +1,39 @@
+.proFormUploadButton {
+  position: relative;
+  :global(.ant-upload-list-item-container) {
+    margin-left: 10px;
+    margin-top: -8px;
+  }
+
+  .progress {
+    position: absolute;
+    bottom: -16px;
+    width: 100%;
+  }
+}
+
+.myUpload {
+  .hiddenUploadButton{
+    :global(.ant-upload) {
+      display: none;
+    }
+    :global(.mainAnt-upload) {
+      display: none;
+    }
+
+    :global(.ant-upload-list-item-container) {
+      margin-top: -10px;
+    }
+
+    :global(.mainAnt-upload-list-item-container) {
+      margin-top: -10px;
+    }
+  }
+}
+
+.importNotList {
+  // 不显示上传的文件列表
+  :global(.ant-upload-list) {
+    display: none;
+  }
+}