@ttkj/avue 2.10.11 → 2.10.13

package/types/global-component/image-cropper.d.ts

@@ -0,0 +1,142 @@
+/**
+ * 图片裁剪
+ * @see https://github.com/xyxiao001/vue-cropper
+ */
+export declare class CropperImage {
+  /**
+   * 图片缩放
+   * @private
+   */
+  changeScale: (num: number) => void;
+  /**
+   * 向左旋转
+   * @private
+   */
+  rotateLeft: () => void;
+  /**
+   * 向右旋转
+   * @private
+   */
+  rotateRight: () => void;
+  /** 提交 */
+  submit: () => void;
+  /**
+   * 取消并关闭
+   * @param done el-dialog中before-close的done，用于关闭Dialog
+   * @private
+   */
+  cancel: (done: () => void) => void;
+}
+
+/** 图片裁剪配置项 */
+export interface ImageCropperOption {
+  /**
+   * 裁剪图片的地址
+   */
+  img: string | Blob;
+  /**
+   * 裁剪生成图片的质量
+   * @description 可选值: 0.1 ~ 1
+   * @default 1
+   */
+  outputSize: number;
+  /**
+   * 裁剪生成图片的格式
+   * @default 'jpeg'
+   */
+  outputType: 'jpeg' | 'png' | 'webp';
+  /**
+   * 裁剪框的大小信息
+   * @default true
+   */
+  info: boolean;
+  /**
+   * 图片是否允许滚轮缩放
+   * @default true
+   */
+  canScale: boolean;
+  /**
+   * 是否默认生成截图框
+   * @default false
+   */
+  autoCrop: boolean;
+  /**
+   * 默认生成截图框宽度
+   * @description 可选值: 0 ~ max
+   * @default 容器的80%
+   */
+  autoCropWidth: number;
+  /**
+   * 默认生成截图框高度
+   * @description 可选值: 0 ~ max
+   * @default 容器的80%
+   */
+  autoCropHeight: number;
+  /**
+   * 是否开启截图框宽高固定比例
+   * @default false
+   */
+  fixed: boolean;
+  /**
+   * 截图框的宽高比例
+   * @description 可选值: [ 宽度 , 高度 ]
+   */
+  fixedNumber: number[];
+  /**
+   * 是否输出原图比例的截图
+   * @default false
+   */
+  full: boolean;
+  /**
+   * 固定截图框大小
+   * @default false
+   */
+  fixedBox: false;
+  /**
+   * 上传图片是否可以移动
+   * @default true
+   */
+  canMove: boolean;
+  /**
+   * 截图框能否拖动
+   * @default true
+   */
+  canMoveBox: boolean;
+  /**
+   * 上传图片按照原始比例渲染
+   * @default false
+   */
+  original: boolean;
+  /**
+   * 截图框是否被限制在图片里面
+   * @default false
+   */
+  centerBox: boolean;
+  /**
+   * 是否按照设备的dpr 输出等比例图片
+   * @default true
+   */
+  high: boolean;
+  /**
+   * true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+   * @default false
+   */
+  infoTrue: boolean;
+  /**
+   * 限制图片最大宽度和高度
+   * @description 可选值: 0 ~ max
+   * @default 2000
+   */
+  maxImgSize: number;
+  /**
+   * 图片根据截图框输出比例倍数
+   * @description 可选值: 0 ~ max(建议不要太大不然会卡死的呢)
+   * @default 1
+   */
+  enlarge: number;
+  /**
+   * 图片默认渲染方式
+   * @default 'contain'
+   */
+  mode: 'contain' | 'cover' | '100px' | '100%' | 'auto';
+}

package/types/global-component/image-preview.d.ts

@@ -0,0 +1,52 @@
+/** 图片预览 */
+export declare class ImagePreview {
+  /** 打印 */
+  handlePrint: () => void;
+  /** 逆时针旋转90° */
+  handlePrev: () => void;
+  /** 顺时针旋转90° */
+  handleNext: () => void;
+  /** 缩小 */
+  subScale: () => void;
+  /** 放大 */
+  addScale: () => void;
+  /** 关闭预览 */
+  close: () => void;
+}
+
+/** 预览内容的配置 */
+export interface ImagePreviewData {
+  /**
+   * 图片URL
+   * @description 支持图片视频
+   */
+  url: string;
+  /** url不是图片和视频时生效 */
+  name?: string;
+}
+
+/** 图片预览方法 */
+export interface ImagePreviewFn {
+  (
+    /** 图片数组 */
+    data: ImagePreviewData[] = [],
+    /** 默认打开序号 */
+    index = 0,
+    ops: Record<{
+      /**
+       * 点击modal时是否关闭
+       * @default false
+       */
+      closeOnClickModal: boolean;
+      /** 关闭前执行事件 */
+      beforeClose: (data: ImagePreviewData[], index: number) => void;
+      /** 点击事件 */
+      click: (item: ImagePreviewData, index: number) => void;
+      /**
+       * 是否显示modal
+       * @default true
+       */
+      modal: boolean;
+    }> = {}
+  ): ImagePreview;
+}

package/types/global-component/watermark.d.ts

@@ -0,0 +1,37 @@
+import { AvueAlignment } from '../global';
+
+/** 水印 */
+export declare class WaterMark {
+  /** 唯一编号 */
+  CONTAINERID: string;
+  /** 配置项 */
+  option: Required<WaterMarkOption>;
+  /** 是否不监听水印 */
+  isOberserve: boolean;
+  /** 画水印 */
+  drawCanvas: () => void;
+  /** 水印视图监听 */
+  parentObserver: () => void;
+  /** 水印重置 */
+  Repaint: () => void;
+  /** 移除水印 */
+  remove: () => void;
+}
+
+/** 水印配置项 */
+export interface WaterMarkOption {
+  /** 水印文字 */
+  text: string;
+  /** 水印字体font, 默认: 30px 黑体 */
+  font?: string;
+  /** 水印canvas宽度, 默认: 500 */
+  canvasWidth?: number;
+  /** 水印canvas高度, 默认: 200 */
+  canvasHeight?: number;
+  /** 水印文字对齐方式, 默认: 'center' */
+  textAlign?: AvueAlignment;
+  /** 水印文字样式, 默认: 'rgba(100,100,100,0.15)' */
+  textStyle?: string;
+  /** 水印文字旋转角度, 默认: -20 */
+  degree?: number;
+}

package/types/global.d.ts

@@ -0,0 +1,315 @@
+import Vue from 'vue';
+import { ButtonType } from 'element-ui/types/button';
+
+import { DialogFormPlugin } from './global-component/dialog-form';
+import { CropperImage, ImageCropperOption } from './global-component/image-cropper';
+import { ImagePreviewFn } from './global-component/image-preview';
+import { Export } from './global-component/export';
+import { WaterMark, WaterMarkOption } from './global-component/watermark';
+import { AvueCrudColumn } from './crud/column';
+import { AvueFormColumn } from './form/column';
+
+/** Avue组件公共定义 */
+export declare class AvueComponent extends Vue {
+  /** 将组件注册到Vue中 */
+  static install(vue: typeof Vue): void;
+}
+
+/** 组件尺寸，仅对ElementUI支持的组件有效(button, input) */
+export type AvueComponentSize = 'medium' | 'small' | 'mini';
+
+/** 对齐方式 */
+export type AvueAlignment = 'left' | 'center' | 'right';
+
+/** 菜单类型 */
+export type AvueMenuType = 'button' | 'text' | 'icon' | 'menu';
+
+/**
+ * 对象定义
+ */
+export declare type Obj<T = any> = Record<string, T> & Object;
+
+/** log日志类型 */
+type LogType = 'primary' | 'success' | 'warning' | 'danger' | 'text';
+
+/** 字典Props配置 */
+export interface DicProps {
+  /** 行主键, 默认: 'id' */
+  rowKey: string;
+  /** 行上级主键, 默认: 'parentId' */
+  rowParentKey: string;
+  /** 节点主键, 默认: 'id' */
+  nodeKey: string;
+  /** 名称属性值, 默认: 'label' */
+  label: string;
+  /** 值属性值, 默认: 'value' */
+  value: string;
+  /** 降序, 默认: 'desc' */
+  desc: string;
+  /** 分组, 默认: 'groups' */
+  groups: string;
+  /** 标题, 默认: 'title' */
+  title: string;
+  /** 是否为叶子节点, 默认: 'leaf' */
+  leaf: string;
+  /** 子属性值, 默认: 'children' */
+  children: string;
+  /** 是否有子节点, 默认: 'hasChildren' */
+  hasChildren: string;
+  /** label文字, 默认: '名称' */
+  labelText: string;
+  /** 禁用, 默认: 'disabled' */
+  disabled: string;
+}
+
+/** 接口请求Props配置 */
+export interface DicHttpProps {
+  /** 文件名Key, 默认: 'name' */
+  name: string;
+  /** 文件路径Key, 默认: 'url' */
+  url: string;
+  /** 文件上传时的文件字段名Key, 默认: 'file' */
+  fileName: string;
+  /** 返回的数据格式, 默认: '' */
+  res: string;
+  /** 文件路径前缀, 默认: '' */
+  home: string;
+}
+
+// window属性扩展
+declare global {
+  interface Window {
+    /** 日志 */
+    $Log: {
+      /**
+       * @description 打印一个 [ title | text ] 样式的信息
+       * @param {String} title title text
+       * @param {String} info info text
+       * @param {String} type style
+       */
+      capsule: (title: string, info: string, type?: ButtonType) => void;
+      /**
+       * @description 打印彩色文字
+       */
+      colorful: (text: string) => void;
+      /**
+       * @description 打印 default 样式的文字
+       */
+      default: (text: string) => void;
+      /**
+       * @description 打印 primary 样式的文字
+       */
+      primary: (text: string) => void;
+      /**
+       * @description 打印 success 样式的文字
+       */
+      success: (text: string) => void;
+      /**
+       * @description 打印 warning 样式的文字
+       */
+      warning: (text: string) => void;
+      /**
+       * @description 打印 danger 样式的文字
+       */
+      danger: (text: string) => void;
+    };
+  }
+}
+
+// 全局方法定义
+declare module 'vue/types/vue' {
+  interface Vue {
+    /**
+     * 弹窗表单
+     * @since 2.9.0
+     */
+    $DialogForm: DialogFormPlugin;
+    /**
+     * 图片裁剪
+     * @since 2.9.9
+     */
+    $ImageCropper: (params: ImageCropperOption) => CropperImage;
+    /**
+     * 预览
+     * @param data 需要预览的数组
+     * @param {string} data[].url 需要预览的地址
+     * @param {string} [data[].name] url不是图片和视频时生效
+     * @param {number} index 默认打开序号
+     * @param {object} ops 其他配置
+     * @param {boolean} [ops.closeOnClickModal = false] 点击modal时是否关闭
+     * @param {Function} [ops.beforeClose] 关闭前执行事件
+     * @param {Function} [ops.click] 点击事件
+     * @param {boolean} [ops.modal = true] 是否显示modal
+     * @since 2.9.0
+     */
+    $ImagePreview: ImagePreviewFn;
+    /**
+     * 从对象数组查找符合条件的对象
+     * @param list 对象数组
+     * @param value 查找的关键词
+     * @param [key] 关键词对应的属性名
+     * @since 2.10.10
+     */
+    findObject: <T = Obj>(
+      /** 对象数组 */
+      list: T[],
+      /** 查找的关键词 */
+      value: string,
+      /** 关键词对应的属性名 */
+      key = 'prop'
+    ) => T;
+    /**
+     * 打印
+     * @description 打印方法在2.8.7重写，配置项与之前不同
+     * @since 2.8.7
+     */
+    $Print: (dom: HTMLElement | Vue | string, option?: { noPrint?: string }) => void;
+    /**
+     * 导出相关
+     * @since 2.8.8
+     */
+    $Export: Export;
+    /**
+     * excel导出
+     * @deprecated 2.8.8
+     */
+    $export: (options: {
+      /** excel标题 */
+      title: string;
+      /** 数据列配置 */
+      columns: {
+        /** 列名称 */
+        label: string;
+        /** 列ID */
+        prop: string;
+      }[];
+      /** 数据 */
+      data: Obj[];
+    }) => void;
+    /** 全局水印 */
+    watermark: (options: WaterMarkOption) => WaterMark;
+    /**
+     * 文件下载
+     * @param url 下载地址
+     */
+    downFile: (url: string) => void;
+    /**
+     * 加载外部链接
+     * @param type 链接类型，可选值为css和js
+     */
+    loadScript: (type: 'css' | 'js', url: string) => Promise;
+    /** 对象深拷贝 */
+    deepClone: <T extends Obj | Obj[]>(data: T) => T;
+    /**
+     * 设置css像素方法
+     * @param num css像素，数字默认加px属性
+     * @param defaultValue 默认值，当num为空时生效
+     */
+    setPx: (num: unknown, defaultValue = '') => string;
+    /**
+     * 判断对象、数组、字符串是否为空
+     */
+    validatenull: <T = unknown>(v: T | undefined | null) => v is undefined | null;
+    /**
+     * 根据对象属性在数组中找到符合的下标返回，没有则为-1
+     * @param arr 对象数组
+     * @param value 数组项对象的某个属性值
+     * @param key 数组项对象的属性名，默认为value
+     */
+    findArray: (arr: Obj[], value: any, key = 'value') => number;
+    /**
+     * 判断是否包含权限
+     * @param valid 是否包含权限
+     * @param defaultValid 默认是否包含
+     */
+    vaildData: <T = boolean>(valid?: T, defaultValid: boolean) => boolean;
+    /**
+     * 将表单项所层列表转换为一层列
+     * @since 2.10.10
+     */
+    flattenColumns: <T = AvueCrudColumn | AvueFormColumn>(list: T[]) => T[];
+    /**
+     * 获取所有表单项
+     * @description 过滤基础类型和容器类型组件
+     * @since 2.10.10
+     */
+    findFormColumns: <T = AvueCrudColumn | AvueFormColumn>(list: T[]) => T[];
+    /**
+     * 比较两个值是否相等
+     * @description 比较两个值在内容上是否相等(不仅限指针相等)，仅针对基本类型
+     * @since 2.10.10
+     */
+    valueEquals: (a: any, b: any) => boolean;
+    /** 日志打印，可以打印不同颜色和标注的日志 */
+    $Log: {
+      /**
+       * 打印一个 [ title | text ] 样式的信息
+       * @param title 标题
+       * @param info 信息
+       * @param type style
+       */
+      capsule: (title: string, info: string, type: LogType = 'primary') => void;
+      /**
+       * 打印彩色文字
+       */
+      colorful: (
+        textArr: {
+          /** 日志内容 */
+          text: string;
+          /** 日志类型 */
+          type: LogType = 'primary';
+        }[]
+      ) => void;
+      /**
+       * 打印 default 样式的文字
+       * @param text 日志文字
+       */
+      default: (text: string) => void;
+      /**
+       * 打印 primary 样式的文字
+       * @param text 日志文字
+       */
+      primary: (text: string) => void;
+      /**
+       * 打印 success 样式的文字
+       * @param text 日志文字
+       */
+      success: (text: string) => void;
+      /**
+       * 打印 warning 样式的文字
+       * @param text 日志文字
+       */
+      warning: (text: string) => void;
+      /**
+       * 打印 danger 样式的文字
+       * @param text 日志文字
+       */
+      danger: (text: string) => void;
+    };
+    /**
+     * 复制文本到剪切板
+     * @param text 需要复制的文本
+     */
+    $Clipboard: (option: { text: string }) => Promise<void>;
+    /**
+     * 查找节点
+     * @param {object[]} list 需要查找的对象数组
+     * @param {object} props 搜索配置
+     * @param {string} [props.value='value'] 搜索值对应的字段
+     * @param {string} [props.children='children'] 子节点
+     * @param {any} value 被搜索的值
+     * @returns {object | undefined} 节点
+     * @since 2.10.10
+     */
+    findNode: (list?: Obj[], props?: Partial<DicProps>, value?: any) => Obj | undefined;
+    /**
+     * 获取当前表单项值的label
+     * @param row 表单数据
+     * @param column 表单项配置
+     * @param option 表单配置
+     * @param dic DIC配置
+     * @since 2.10.10
+     */
+    getLabel: (row?: Obj, column?: Obj, option?: Obj, dic?: Obj[]) => string;
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './avue';
+
+import * as Avue from './avue';
+export default Avue;