plain-design 0.0.97 → 1.0.0-beta.10

package/src/packages/components/$file/index.tsx

@@ -0,0 +1,212 @@
+import {defer} from "plain-utils/utils/defer";
+import {$message} from "../$message";
+import i18n from "../i18n";
+
+export type FileServiceSingleFile = File & { calcSize: number, data?: any }
+export type FileServiceValidator = (file: FileServiceSingleFile) => boolean | undefined
+
+export type FileServiceChooseFileConfig = {
+  multiple?: boolean,                 // 是否多选
+  accept?: string,                    // 选择的文件类型， input组件的accept属性值
+  validator?: FileServiceValidator,   // 自定义校验函数
+  max?: number,                       // 最大文件大小
+}
+
+export type FileServiceUploadErrorEvent = Error & {
+  status: number,
+  method: string,
+  url: string,
+  config: FileServiceUploadConfig,
+}
+
+export type FileServiceUploadConfig = {
+  action: string,                             // 上传地址
+  file: File | File[],                        // 上传的文件
+  filename: string,                           // 上传文件接收的文件名
+  data?: Record<string, string>,               // 上传的额外数据
+  headers?: Record<string, string>,           // 请求头
+  withCredentials?: boolean,                  // 是否带cookies凭证
+  onProgress?: (percent: number, e: ProgressEvent) => void,
+  onSuccess?: (data: string | Record<string, string>) => void,
+  onError?: (e: FileServiceUploadErrorEvent | ProgressEvent) => void,
+}
+
+export const FileServiceDefaultAccept = {
+  // image: 'image/gif, image/jpeg, image/png, image/jpg',
+  image: 'bmp,jpg,jpeg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp,avif'.split(',').map(i => `image/${i}`).join(', '),
+  excel: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+} as Record<string, string>;
+
+export function createFileService() {
+
+  /**
+   * 选择文件
+   * @author  韦胜健
+   * @date    2021/1/1 17:03
+   */
+  const chooseFile = (config?: FileServiceChooseFileConfig) => {
+    config = config || {};
+    const input = getInput();
+
+    /*multiple*/
+    if (config.multiple) {
+      input.setAttribute('multiple', 'multiple');
+    } else {
+      input.removeAttribute('multiple');
+    }
+    /*accept*/
+    if (!!config.accept) {
+      const defaultInputAccept = FileServiceDefaultAccept[config.accept];
+      input.setAttribute('accept', defaultInputAccept || config.accept);
+    } else {
+      input.removeAttribute('accept');
+    }
+    const dfd = defer<FileServiceSingleFile | FileServiceSingleFile[]>();
+
+    if (!!input.__change) {
+      input.value = null as any;
+      input.removeEventListener('change', input.__change);
+    }
+    input.__change = (e) => {
+      const targetFiles = (e as any).target.files as FileServiceSingleFile[];
+      const files = [];
+      for (let i = 0; i < targetFiles.length; i++) {
+        const file = targetFiles[i];
+        file.calcSize = Number((file.size / (1024 * 1024)).toFixed(2));
+        if (!!config!.validator && !config!.validator(file)) return;
+        if (!!config!.max && file.calcSize > config!.max) {
+          return $message.error(
+            i18n('file.oversize', { filename: file.name, filesize: file.calcSize, max: config!.max }).d(`[${file.name}]大小为${file.calcSize}MB，超过最大限制${config!.max}MB`),
+            { time: 5000 });
+        }
+        files.push(file);
+      }
+      dfd.resolve(config!.multiple ? files : files[0]);
+    };
+    input.addEventListener('change', input.__change);
+    input.click();
+
+    return dfd.promise;
+  };
+
+  /**
+   * 选择tupiuan
+   * @author  韦胜健
+   * @date    2021/1/1 17:03
+   */
+  const chooseImage = (multiple?: boolean) => {
+    const config: FileServiceChooseFileConfig = { accept: "image", multiple };
+    return chooseFile(config);
+  };
+
+  /**
+   * 读取文件为base64字符串
+   * @author  韦胜健
+   * @date    2021/1/1 17:04
+   */
+  const readAsDataURL = (file: File) => {
+    const dfd = defer<string | ArrayBuffer | null>();
+    let fr = new FileReader();
+    fr.onloadend = e => dfd.resolve(e.target!.result);
+    fr.onerror = () => dfd.reject();
+    fr.readAsDataURL(file);
+    return dfd.promise;
+  };
+
+  /**
+   * 上传文件
+   * @author  韦胜健
+   * @date    2021/1/1 17:07
+   */
+  const upload = (uploadConfig: FileServiceUploadConfig) => {
+    const xhr = ('XMLHttpRequest' in window ? new XMLHttpRequest() : new (Window as any).ActiveXObject('Microsoft.XMLHTTP')) as XMLHttpRequest;
+    xhr.open('post', uploadConfig.action, true);
+
+    if (!!xhr.upload) {
+      xhr.upload.addEventListener('progress', (e) => {
+        const percent = Number((e.loaded / e.total * 100).toFixed(2));
+        !!uploadConfig.onProgress && uploadConfig.onProgress(percent, e);
+      });
+    }
+
+    if (uploadConfig.withCredentials != null && 'withCredentials' in xhr) {
+      xhr.withCredentials = uploadConfig.withCredentials;
+    }
+
+    if (!!uploadConfig.headers)
+      Object.entries(uploadConfig.headers)
+        .forEach(([key, value]) => xhr.setRequestHeader(key, value));
+
+    xhr.onerror = (e) => !!uploadConfig.onError && uploadConfig.onError(e);
+    xhr.onload = () => {
+      if (xhr.status < 200 || xhr.status > 300) {
+        !!uploadConfig.onError && uploadConfig.onError(getError(uploadConfig, xhr));
+      } else {
+        !!uploadConfig.onSuccess && uploadConfig.onSuccess(getResponseBody(xhr));
+      }
+    };
+    const formData = new FormData();
+    if (!!uploadConfig.data) Object.entries(uploadConfig.data).forEach(([key, value]) => formData.append(key, value));
+    if (Array.isArray(uploadConfig.file)) {
+      uploadConfig.file.forEach(f => formData.append(uploadConfig.filename, f));
+    } else {
+      formData.append(uploadConfig.filename, uploadConfig.file);
+    }
+    xhr.send(formData);
+    return xhr;
+  };
+
+  return {
+    chooseFile,
+    chooseImage,
+    readAsDataURL,
+    upload,
+  };
+}
+
+const getInput = (() => {
+  let input: HTMLInputElement & { __change?: (e: Event) => void };
+  return () => {
+    if (!input) {
+      input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      input.style.display = 'none';
+      document.body.appendChild(input);
+    }
+    return input;
+  };
+})();
+
+function getError(config: FileServiceUploadConfig, xhr: XMLHttpRequest) {
+  let message: string;
+  console.log(xhr);
+  if (!!xhr.response) {
+    message = xhr.response.error || xhr.response;
+  } else if (!!xhr.responseText) {
+    message = xhr.responseText;
+  } else {
+    message = `file to post ${config.action} ${xhr.status}`;
+  }
+
+  const error = new Error(message) as FileServiceUploadErrorEvent;
+  error.status = xhr.status;
+  error.method = 'post';
+  error.url = config.action;
+  error.config = config;
+
+  return error;
+}
+
+function getResponseBody(xhr: XMLHttpRequest) {
+  let result = xhr.responseText || xhr.response;
+  if (!result) return result;
+  try {
+    return JSON.parse(result);
+  } catch (e) {
+    return result;
+  }
+}
+
+export const $file = createFileService();
+
+export default $file;

package/src/packages/components/$image/index.tsx

@@ -0,0 +1,7 @@
+import useImage from "../useImage";
+
+export const $image = useImage().$image;
+
+export default $image;
+
+export type iImageService = typeof $image

package/src/packages/components/$message/image.service.utils.tsx

@@ -0,0 +1,161 @@
+/**
+ * 将url转成image对象
+ * @author  韦胜健
+ * @date    2021/1/21 11:46
+ */
+import {defer} from "plain-utils/utils/defer";
+import $file from "../$file";
+import i18n from "../i18n";
+
+export function urlToImage(url: string) {
+  const dfd = defer<HTMLImageElement>();
+  const image = new Image();
+  image.setAttribute('crossOrigin', 'anonymous');
+  image.onload = () => dfd.resolve(image);
+  image.onerror = dfd.reject;
+  image.src = url;
+  return dfd.promise;
+}
+
+/**
+ * 将image转化为canvas
+ * @author  韦胜健
+ * @date    2021/1/21 11:50
+ */
+export function imageToCanvas(image: HTMLImageElement) {
+  const canvas = document.createElement('canvas') as HTMLCanvasElement;
+  const ctx = canvas.getContext('2d')!;
+  canvas.width = image.width;
+  canvas.height = image.height;
+  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+  return canvas;
+}
+
+/**
+ * 将canvas转化为File对象
+ * @author  韦胜健
+ * @date    2021/1/21 11:50
+ * @param   canvas              画布对象
+ * @param   type                文件类型，比如 image/jpeg
+ * @param   quality             图片压缩质量，0-1
+ * @param   filename            文件名称
+ */
+export function canvasToFile(canvas: HTMLCanvasElement, type: string, quality: number, filename: string) {
+  const dfd = defer<File | null>();
+  canvas.toBlob(blob => {
+    dfd.resolve(!blob ? null : new File([blob], filename));
+  }, type, quality);
+  return dfd.promise;
+}
+
+/**
+ * 将canvas转化为base64
+ * @author  韦胜健
+ * @date    2021/1/21 11:52
+ * @param   type            文件类型
+ * @param   quality         图片压缩质量，0-1
+ */
+export function canvasToDataURL(canvas: HTMLCanvasElement, type: string, quality: number): string {
+  return canvas.toDataURL(type, quality);
+}
+
+
+/**
+ * 将file转化为base64
+ * @author  韦胜健
+ * @date    2021/1/21 11:54
+ */
+export const fileToDataURL = $file.readAsDataURL;
+
+/**
+ * 将dataURL转化为File对象
+ * @author  韦胜健
+ * @date    2021/1/21 11:54
+ */
+export function dataURLToFile(dataUrl: string) {
+  const arr = dataUrl.split(',');
+  const mime = arr[0].match(/:(.*?);/)![1];
+  const bstr = atob(arr[1]);
+  let n = bstr.length, u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime });
+}
+
+/**
+ * 将blob转化为file
+ * @author  韦胜健
+ * @date    2021/1/21 15:19
+ */
+export function blobToFile(blob: Blob, filename: string, option?: FilePropertyBag) {
+  return new File([blob], filename, option);
+}
+
+export const imageCompress = (() => {
+  /**
+   * 根据尺寸压缩图片
+   * @author  韦胜健
+   * @date    2021/1/21 16:11
+   */
+  const compressByMeasure = async (image: HTMLImageElement, config: { maxHeight?: number, maxWidth?: number }, filename: string) => {
+    const canvas = document.createElement('canvas') as HTMLCanvasElement;
+    const ctx = canvas.getContext('2d')!;
+    let height = image.height, width = image.width;
+    if (!!config.maxHeight && height > config.maxHeight) {
+      width = config.maxHeight / height * width;
+      height = config.maxHeight;
+    }
+    if (!!config.maxWidth && width > config.maxWidth) {
+      height = config.maxWidth / width * height;
+      width = config.maxWidth;
+    }
+    canvas.width = width;
+    canvas.height = height;
+    ctx.drawImage(image, 0, 0, width, height);
+    return canvasToFile(canvas, 'image/png', 1, filename);
+  };
+  /**
+   * 根据图片容量大小压缩图片
+   * @author  韦胜健
+   * @date    2021/1/21 16:11
+   */
+  const compressByMaxSize = async (image: HTMLImageElement, maxSize: number, filename: string) => {
+    const max = maxSize * 1000 * 1000;
+    let rate = 1;
+    const canvas = document.createElement('canvas') as HTMLCanvasElement;
+    const ctx = canvas.getContext('2d')!;
+    canvas.height = image.height;
+    canvas.width = image.width;
+    ctx.drawImage(image, 0, 0, image.width, image.height);
+
+    let file = await canvasToFile(canvas, 'image/png', 1, filename);
+    while (!!file && file.size > max && rate > 0.1) {
+      ctx.clearRect(0, 0, image.width * rate, image.height * rate);
+      rate -= 0.3;
+      canvas.height = image.height * rate;
+      canvas.width = image.width * rate;
+      ctx.drawImage(image, 0, 0, image.width * rate, image.height * rate);
+      file = await canvasToFile(canvas, 'image/png', 1, filename);
+    }
+    return file;
+  };
+  return async (url: string, config: { maxSize?: number, maxHeight?: number, maxWidth?: number }): Promise<string | ArrayBuffer | null> => {
+    if (!url) {
+      throw new Error('compress: url is empty!');
+    }
+    /*if (/^https?/.test(url) && url.indexOf('?') === -1) {
+        url += `?timestamp=${DatePicker.now()}`
+    }*/
+    let image = await urlToImage(url);
+    if (!!config.maxHeight || !!config.maxWidth) {
+      let file = await compressByMeasure(image, config, `${i18n('image.compressByImageMeasure').d('根据尺寸压缩图片')}.png`);
+      return !file ? null : fileToDataURL(file);
+    }
+    if (!!config.maxSize) {
+      let file = await compressByMaxSize(image, config.maxSize, `${i18n('image.compressByImageCapacity').d('根据大小压缩图片')}.png`);
+      return !file ? null : fileToDataURL(file);
+    }
+    throw new Error('compress: maxSize, maxHeight, maxWidth is empty!');
+  };
+})();

package/src/packages/components/$message/index.tsx

@@ -0,0 +1,7 @@
+import {useMessage} from "../useMessage";
+
+export const $message = useMessage().$message;
+
+export type iMessageService = typeof $message
+
+export default $message;

package/src/packages/components/$notice/index.tsx

@@ -0,0 +1,7 @@
+import {useNotice} from "../useNotice";
+
+export const $notice = useNotice().$notice;
+
+export type iNoticeService = typeof $notice
+
+export default $notice;

package/src/packages/components/$object/createObjectService.tsx

@@ -0,0 +1,203 @@
+import {PlainObject} from "plain-utils/utils/event";
+import {iObjectServiceDefaultConfig, iObjectServicePickConfig, iObjectServicePickMultipleConfig, iObjectServicePickSingleConfig} from "./object.service.utils";
+import {$dialog} from "../$dialog";
+import {AutoTable} from "../AutoTable";
+import {PlcCheck} from "../Table/standard/PlcCheck/PlcCheck";
+import {reactive} from "plain-design-composition";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {convertRowToSelected, convertSelectedToRow} from "./object.conver";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {defer} from "plain-utils/utils/defer";
+import {$message} from "../$message";
+import {delay} from "plain-utils/utils/delay";
+import {getTableRowHeight} from "../Table/table/utils/table.utils";
+import {iDialogServiceOption} from "../useDialog/dialog.service.utils";
+import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
+import i18n from "../i18n";
+import {ClientZoom} from "../../utils/ClientZoom";
+
+export function createObjectService(defaultConfig: iObjectServiceDefaultConfig) {
+
+  const publicDialogOption: iDialogServiceOption = {
+    title: i18n('base.selectData').d('选择数据'),
+    confirmButton: true,
+    cancelButton: true,
+    maxHeight: ' ',
+    maxWidth: '60vw',
+  };
+
+  function processShowRows(option: TableOptionSpace.iTableOption) {
+    const { clientHeight } = ClientZoom.getClientSize();
+    const availableHeight = clientHeight * 0.8 - 48 - 44 - 40 - 40 - 28;
+    const { bodyRowHeight } = getTableRowHeight(option.config.size, option.config);
+    const showRows = Math.floor(availableHeight / bodyRowHeight) - 1;
+
+    option.config.showRows = showRows;
+    option.pagination.state.size = option.config.showRows;
+    option.pagination.state.pageSizeOptions.indexOf(showRows) === -1 && (option.pagination.state.pageSizeOptions.unshift(showRows));
+    option.fill.state.showRows = showRows;
+  }
+
+  function processPermit(option: TableOptionSpace.iTableOption) {
+    /*clear data*/
+    option.config.loadOnStart = false;
+    option.state.list = [];
+    option.hooks.onPageDataChange.exec(null);
+    /*reset showRow*/
+    processShowRows(option);
+    /*clear filters*/
+    option.filterState.clearAll(false);
+    /*默认不可编辑*/
+    if (!option.config.permit) {option.config.permit = {};}
+    if (!option.config.permit.show) {option.config.permit.show = {};}
+    if (option.config.permit.show.insert == null) {option.config.permit.show.insert = false;}
+    if (option.config.permit.show.update == null) {option.config.permit.show.update = false;}
+    if (option.config.permit.show.delete == null) {option.config.permit.show.delete = false;}
+  }
+
+  /**
+   * 单选
+   * @author  韦胜健
+   * @date    2023.1.24 20:32
+   */
+  function single(serviceConfig: iObjectServicePickSingleConfig): Promise<PlainObject> {
+
+    const dfd = defer<PlainObject>();
+
+    const { effects } = createEffects();
+
+    const config = { ...defaultConfig, ...serviceConfig };
+
+    processPermit(config.option);
+
+    const state = reactive({
+      selected: !config.selected ? undefined : deepcopy(convertRowToSelected(config.selected, config.map))
+    });
+
+    const handler = {
+      handleConfirm: async () => {
+        const { selected } = state;
+        if (!selected) {
+          $message(i18n('base.selectPieceOfData').d('请选择一条数据'));
+          return false;
+        }
+        const flag = config.beforeConfirm?.(selected);
+        if (flag === false) {
+          return false;
+        }
+        const row = convertSelectedToRow(selected, config.map);
+        dfd.resolve(row);
+        close();
+        return;
+      },
+    };
+
+    effects.push(
+      config.option.hooks.onRenderColumns.use({
+        processor: ({ list, render }) => {list.push({ render, key: 'object-check', seq: 0 });},
+        render: () => (
+          <PlcCheck field={config.keyField} v-model={state.selected} multiple={false} toggleOnClickRow/>
+        )
+      })
+    );
+
+    (!config.option.permission.permit.value.show.update || config.option.permission.permit.value.disabled.update) &&
+    effects.push(
+      config.option.hooks.onDblclickRow.use(async () => {
+        await delay();
+        handler.handleConfirm();
+      })
+    );
+
+    const close = $dialog({
+      ...publicDialogOption,
+      onClose: () => {effects.clear();},
+      onOpen: () => config.option.methods.pageMethods.reload(),
+      handleConfirm: handler.handleConfirm,
+      handleCancel: () => config.beforeCancel?.(),
+      render: () => {
+        return (
+          <div>
+            <AutoTable option={config.option}/>
+          </div>
+        );
+      }
+    });
+
+    return dfd.promise;
+  }
+
+  /**
+   * 多选
+   * @author  韦胜健
+   * @date    2023.1.24 20:33
+   */
+  function multiple(serviceConfig: iObjectServicePickMultipleConfig): Promise<PlainObject[]> {
+    const dfd = defer<PlainObject[]>();
+
+    const { effects } = createEffects();
+
+    const config = { ...defaultConfig, ...serviceConfig };
+
+    processPermit(config.option);
+
+    const state = reactive({
+      selected: (!config.selected ? undefined : deepcopy(convertRowToSelected(config.selected, config.map))) as undefined | PlainObject[]
+    });
+
+    effects.push(
+      config.option.hooks.onRenderColumns.use({
+        processor: ({ list, render }) => {list.push({ render, key: 'object-check', seq: 0 });},
+        render: () => (
+          <PlcCheck field={config.keyField} v-model={state.selected} multiple toggleOnClickRow/>
+        )
+      })
+    );
+
+    $dialog({
+      ...publicDialogOption,
+      onClose: () => {effects.clear();},
+      onOpen: () => config.option.methods.pageMethods.reload(),
+      handleConfirm: async () => {
+        const { selected } = state;
+        if (!selected || selected.length === 0) {
+          $message(i18n('base.selectAtLeastOnePieceOfData').d('请至少选择一条数据'));
+          return false;
+        }
+        const flag = config.beforeConfirm?.(selected);
+        if (flag === false) {
+          return false;
+        }
+        const rows = convertSelectedToRow(selected, config.map);
+        dfd.resolve(rows);
+        return;
+      },
+      handleCancel: () => config.beforeCancel?.(),
+      render: () => {
+        return (
+          <div>
+            <AutoTable option={config.option}/>
+          </div>
+        );
+      }
+    });
+
+    return dfd.promise;
+  }
+
+  const service: iObjectServicePicker = (serviceConfig: iObjectServicePickConfig): any =>
+    serviceConfig.multiple ? multiple(serviceConfig) : single(serviceConfig);
+
+  return service;
+}
+
+type iObjectServicePicker =
+  ((config: iObjectServicePickSingleConfig & { clear?: false }) => Promise<PlainObject>)
+  &
+  ((config: iObjectServicePickSingleConfig & { clear: true }) => Promise<PlainObject | null>)
+  &
+  ((config: iObjectServicePickMultipleConfig & { clear?: false }) => Promise<PlainObject[]>)
+  &
+  ((config: iObjectServicePickMultipleConfig & { clear: true }) => Promise<PlainObject[] | null>)
+
+export type iObjectService = ReturnType<typeof createObjectService>

package/src/packages/components/$object/index.ts

@@ -0,0 +1,5 @@
+import {createObjectService} from "./createObjectService";
+
+export {createObjectService};
+
+export default createObjectService;

package/src/packages/components/$object/object.conver.ts

@@ -0,0 +1,56 @@
+import {PlainObject} from "plain-utils/utils/event";
+import {iObjectServicePickPublicConfig} from "./object.service.utils";
+
+/**
+ * 转化器函数类型，将选中行对象经过这个函数计算之后得到的对象，再将这个对象的值assign到绑定行对象上；
+ * 逆转化函数类型也是这个
+ * @author  韦胜健
+ * @date    2022/8/4 14:24
+ */
+export interface iObjectConverter {
+  (data: PlainObject): PlainObject;
+}
+
+/**
+ * 将绑定行对象转化为选择行对象的格式，以判断选择的行对象是否被选中
+ * @author  韦胜健
+ * @date    2022/8/4 17:22
+ */
+export function convertRowToSelected<DATA extends PlainObject | PlainObject[] | null | undefined>(
+  row: DATA,
+  map: undefined | iObjectServicePickPublicConfig['map']
+): DATA {
+  if (!map || row == null) {
+    return row;
+  }
+  const convert = Array.isArray(map)
+    ? map[1]
+    : (row: PlainObject) =>
+      Object.entries(map).reduce((selected, [key, value]) => {
+        selected[value] = row[key];
+        return selected;
+      }, {} as any);
+  return Array.isArray(row) ? row.map((i) => convert(i)) : convert(row);
+}
+
+/**
+ * 将选择行对象转化为绑定行对象，对绑定行对象进行赋值
+ * @author  韦胜健
+ * @date    2022/8/4 17:23
+ */
+export function convertSelectedToRow<DATA extends PlainObject | PlainObject[] | undefined | null>(
+  selected: DATA,
+  map: undefined | iObjectServicePickPublicConfig['map']
+): DATA {
+  if (!map || selected == null) {
+    return selected;
+  }
+  const convert = Array.isArray(map)
+    ? map[0]
+    : (selected: PlainObject) =>
+      Object.entries(map).reduce((row, [key, value]) => {
+        row[key] = selected[value];
+        return row;
+      }, {} as any);
+  return Array.isArray(selected) ? selected.map((i) => convert(i)) : convert(selected);
+}