cnhis-design-vue 2.1.78 → 2.1.80

package/packages/fabric-chart/src/mixins/fabricCommon.js

@@ -1,81 +1,81 @@
-export default {
-  name: 'fabric-common',
-  inject: ['$canvas', '$group', '$propItems', '$fabric'],
-  computed: {
-    canvas() {
-      return this.$canvas();
-    },
-    group() {
-      return this.$group();
-    },
-    fabric() {
-      const fabric = this.$fabric();
-      fabric.boundsOfCurveCache = false;
-      fabric.Object.objectCaching = false;
-      return fabric;
-    },
-    propItems() {
-      return this.$propItems();
-    }
-  },
-  watch: {
-    canvas: {
-      handler(value) {
-        if (value) {
-          this.$nextTick(() => {
-            this.init?.();
-          });
-        }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    getXValue(left) {
-      const { xScaleCellList, originX, endX, xScaleList } = this.propItems;
-      let time;
-      if (left === endX) {
-        time = xScaleList[xScaleList.length - 1];
-      } else if (left === originX) {
-        time = xScaleList[0];
-      } else {
-        let index = xScaleCellList.findIndex(v => v.x >= left);
-        !~index && (index = xScaleCellList.length);
-        const obj = xScaleCellList[index - 1];
-        time = obj.time + (left - obj.x) * obj.xScaleTime;
-      }
-      let d = new Date(time);
-      const month = `00${d.getMonth() + 1}`.slice(-2);
-      const day = `00${d.getDate()}`.slice(-2);
-      const hours = `00${d.getHours()}`.slice(-2);
-      const minute = `00${d.getMinutes()}`.slice(-2);
-      return `${d.getFullYear()}-${month}-${day} ${hours}:${minute}`;
-    },
-    // 根据时间戳计算x轴坐标
-    cumputedX(value) {
-      if (!value) {
-        return '';
-      }
-      const { xScaleList, xScaleCellList, originX, endX, canvasWidth } = this.propItems;
-      const time = new Date(value).getTime();
-      const minScale = Math.min(...xScaleList);
-      const maxScale = Math.max(...xScaleList);
-      if (time < minScale) return 0;
-      if (time > maxScale) return canvasWidth;
-      if (time === minScale) return originX;
-      if (time === maxScale) return endX;
-      let index = xScaleCellList.findIndex(v => v.time >= time);
-      !~index && (index = xScaleCellList.length);
-      const obj = xScaleCellList[index - 1];
-      return obj.x + (time - obj.time) / obj.xScaleTime;
-    },
-    isGridLimit(x, y) {
-      const { originX, originY, endX, endY } = this.propItems;
-      return x >= originX && x <= endX && y >= originY && y <= endY;
-    },
-    isTopTreeAndGridLimit(x, y) {
-      const { endX, endYTop, originYTop } = this.propItems;
-      return x >= 0 && x <= endX && y >= originYTop && y <= endYTop;
-    }
-  }
-};
+export default {
+  name: 'fabric-common',
+  inject: ['$canvas', '$group', '$propItems', '$fabric'],
+  computed: {
+    canvas() {
+      return this.$canvas();
+    },
+    group() {
+      return this.$group();
+    },
+    fabric() {
+      const fabric = this.$fabric();
+      fabric.boundsOfCurveCache = false;
+      fabric.Object.objectCaching = false;
+      return fabric;
+    },
+    propItems() {
+      return this.$propItems();
+    }
+  },
+  watch: {
+    canvas: {
+      handler(value) {
+        if (value) {
+          this.$nextTick(() => {
+            this.init?.();
+          });
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getXValue(left) {
+      const { xScaleCellList, originX, endX, xScaleList } = this.propItems;
+      let time;
+      if (left === endX) {
+        time = xScaleList[xScaleList.length - 1];
+      } else if (left === originX) {
+        time = xScaleList[0];
+      } else {
+        let index = xScaleCellList.findIndex(v => v.x >= left);
+        !~index && (index = xScaleCellList.length);
+        const obj = xScaleCellList[index - 1];
+        time = obj.time + (left - obj.x) * obj.xScaleTime;
+      }
+      let d = new Date(time);
+      const month = `00${d.getMonth() + 1}`.slice(-2);
+      const day = `00${d.getDate()}`.slice(-2);
+      const hours = `00${d.getHours()}`.slice(-2);
+      const minute = `00${d.getMinutes()}`.slice(-2);
+      return `${d.getFullYear()}-${month}-${day} ${hours}:${minute}`;
+    },
+    // 根据时间戳计算x轴坐标
+    cumputedX(value) {
+      if (!value) {
+        return '';
+      }
+      const { xScaleList, xScaleCellList, originX, endX, canvasWidth } = this.propItems;
+      const time = new Date(value).getTime();
+      const minScale = Math.min(...xScaleList);
+      const maxScale = Math.max(...xScaleList);
+      if (time < minScale) return 0;
+      if (time > maxScale) return canvasWidth;
+      if (time === minScale) return originX;
+      if (time === maxScale) return endX;
+      let index = xScaleCellList.findIndex(v => v.time >= time);
+      !~index && (index = xScaleCellList.length);
+      const obj = xScaleCellList[index - 1];
+      return obj.x + (time - obj.time) / obj.xScaleTime;
+    },
+    isGridLimit(x, y) {
+      const { originX, originY, endX, endY } = this.propItems;
+      return x >= originX && x <= endX && y >= originY && y <= endY;
+    },
+    isTopTreeAndGridLimit(x, y) {
+      const { endX, endYTop, originYTop } = this.propItems;
+      return x >= 0 && x <= endX && y >= originYTop && y <= endYTop;
+    }
+  }
+};

package/packages/fabric-chart/src/mixins/fabricObject.js

@@ -1,193 +1,193 @@
-import fabricCommon from "./fabricCommon.js"
-// 设置需要监听的事件，面前只监听mouseup事件
-const OBJECT_EVENTS = [
-  'mouseup',
-];
-
-// 通过交互更改的Props，需要通过prop.sync使用
-const EMIT_PROPS = ['angle', 'height', 'left', 'originX', 'originY', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top', 'width'];
-
-// 更改后需要渲染的Props
-const REQUIRE_RENDER = ['angle', 'height', 'left', 'originX', 'originY', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top', 'width', 'visible'];
-
-// 监视结构对象（项目），使用.sync发出更新
-const watchEmitProp = (key, deep) => ({
-  handler(newValue) {
-    // 如果Props已经引起了更新，则不必再提醒更新
-    if (this.$props[key] === newValue) {
-      return;
-    }
-    this.$emit('update:' + key, newValue);
-  },
-  deep
-});
-// 监视Props并使用更改后的值更新项目
-const watchProp = (key, deep) => ({
-  handler(newValue) {
-    // 如果Props没有引起更新，则不会更新画布
-    if (typeof this.item == 'undefined') {
-      return;
-    }
-    if (key === 'id') {
-      this.item.id = newValue;
-      return;
-    }
-    if (this.item.get(key) === newValue) {
-      return;
-    }
-    this.item.set(key, newValue);
-    if (REQUIRE_RENDER.includes(key)) {
-      this.canvas.renderAll();
-    }
-  },
-  deep
-});
-
-export default {
-  name: 'fabric-object',
-  inheritAttrs: false,
-  mixins: [fabricCommon],
-  props: {
-    id: { type: [Number, String], required: true },
-    width: Number,
-    height: Number,
-    padding: { type: Number, default: 0 }, // 对象及其控制边界之间的填充（以像素为单位）
-    left: Number,
-    top: Number,
-    opacity: Number,
-    visible: { type: Boolean, default: true },
-
-    paintFirst: { type: String, default: 'fill' }, // 确定是先绘制还是先填充
-    fill: { type: String, default: '#000000' },
-    stroke:  { type: String, default: '#000000' },
-    strokeWidth: Number,
-    strokeDashArray: Array,
-    strokeDashOffset: Number,
-    strokeLineCap: String,
-    strokeLineJoin: String,
-    strokeMiterLimit: Number,
-    strokeUniform: { type: Boolean, default: false },
-
-    selectable: { type: Boolean, default: true },
-    selectionBackgroundColor: { type: String, default: '' },
-    evented: { type: Boolean, default: true },
-
-    hasBorders: { type: Boolean, default: false }, // 选中后
-    hasControls: { type: Boolean, default: false }, // 设置为false时，不显示对象的控件，并且不能用于操作对象，但不影响调用 event
-
-    backgroundColor: String,
-    borderColor: String,
-    excludeFromExport: { type: Boolean, default: false },
-    hoverCursor: String,
-    includeDefaultValues: { type: Boolean, default: true }, // 当为 false 时，默认对象的值不包括在其序列化中
-    lockMovementX: { type: Boolean, default: false }, // true 锁定 x 方向移动
-    lockMovementY: { type: Boolean, default: false }, // true 锁定 y 方向移动
-    lockRotation: { type: Boolean, default: false }, // true 锁定旋转
-    lockScalingFlip: { type: Boolean, default: false }, // true 负值无法反转
-    lockScalingX: { type: Boolean, default: false }, // true 锁定 x 方向缩放
-    lockScalingY: { type: Boolean, default: false }, // true 锁定 y 方向缩放
-    lockSkewingX: { type: Boolean, default: false }, // true 锁定 x 方向倾斜
-    lockSkewingY: { type: Boolean, default: false }, // true 锁定 y 方向倾斜
-    objectCaching: { type: Boolean, default: false },
-    originX: { type: String, default: 'center' },
-    originY: { type: String, default: 'center' },
-    perPixelTargetFind: { type: Boolean, default: false },
-    rotatingPointOffset: Number
-  },
-  provide() {
-    return {
-      $item: () => this.item
-    };
-  },
-  computed: {
-    definedProps() {
-      const obj = { ...this.$props };
-      Object.keys(obj).forEach(key => {
-        if (obj[key] === undefined) {
-          delete obj[key];
-        }
-      });
-      return obj;
-    },
-    parentType() {
-      if (this.group) {
-        return 'group';
-      }
-      return 'canvas';
-    },
-    parentItem() {
-      if (this.parentType == 'canvas') {
-        return this.canvas;
-      }
-      if (this.parentType == 'group') {
-        return this.group;
-      }
-    },
-    item() {
-      if (this.parentItem) {
-        let canvasObj = this.canvas.getObjects();
-        let res = [];
-        this.transverseCanvasObjects(canvasObj, 'id', this.id, res);
-        return res[0];
-      }
-    }
-  },
-  methods: {
-    transverseCanvasObjects(objects, attr, val, objectList) {
-      for (let i in objects) {
-        // 在组内查看，除非它是您要搜索的组对象
-        if (objects[i]['type'] == 'group' && objects[i][attr] !== val) {
-          this.transverseCanvasObjects(objects[i].getObjects(), attr, val, objectList);
-        } else if (objects[i][attr] == val) {
-          objectList.push(objects[i]);
-        }
-      }
-    },
-    /**
-     * 创建事件
-     */
-    createEvents() {
-      OBJECT_EVENTS.forEach(event => {
-        this.item.on(event, e => {
-          this.$emit(event, { id: this.id, ...e });
-        });
-      });
-    },
-    createWatchers() {
-      this.createFabricItemWatchers();
-      this.createPropWatchers();
-    },
-    createFabricItemWatchers() {
-      EMIT_PROPS.forEach(prop => {
-        this.$watch('item.' + prop, watchEmitProp(prop, true));
-      });
-    },
-    createPropWatchers() {
-      Object.keys(this.$props).forEach(key => {
-        // 自定义监听校验 确保mixin不会重复生成
-        if (typeof this.customWatch !== typeof undefined) {
-          if (this.customWatch.includes(key)) {
-            return;
-          }
-        }
-        this.$watch(key, watchProp(key, true));
-      });
-    }
-  },
-  beforeDestroy() {
-    OBJECT_EVENTS.forEach(event => {
-      if (this.item) {
-        this.item.off(event);
-      }
-    });
-    if (this.parentType == 'group') {
-      if (this.group) {
-        this.group.removeWithUpdate(this.item);
-      }
-    } else {
-      if (this.canvas) {
-        this.canvas.remove(this.item);
-      }
-    }
-  }
-};
+import fabricCommon from "./fabricCommon.js"
+// 设置需要监听的事件，面前只监听mouseup事件
+const OBJECT_EVENTS = [
+  'mouseup',
+];
+
+// 通过交互更改的Props，需要通过prop.sync使用
+const EMIT_PROPS = ['angle', 'height', 'left', 'originX', 'originY', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top', 'width'];
+
+// 更改后需要渲染的Props
+const REQUIRE_RENDER = ['angle', 'height', 'left', 'originX', 'originY', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top', 'width', 'visible'];
+
+// 监视结构对象（项目），使用.sync发出更新
+const watchEmitProp = (key, deep) => ({
+  handler(newValue) {
+    // 如果Props已经引起了更新，则不必再提醒更新
+    if (this.$props[key] === newValue) {
+      return;
+    }
+    this.$emit('update:' + key, newValue);
+  },
+  deep
+});
+// 监视Props并使用更改后的值更新项目
+const watchProp = (key, deep) => ({
+  handler(newValue) {
+    // 如果Props没有引起更新，则不会更新画布
+    if (typeof this.item == 'undefined') {
+      return;
+    }
+    if (key === 'id') {
+      this.item.id = newValue;
+      return;
+    }
+    if (this.item.get(key) === newValue) {
+      return;
+    }
+    this.item.set(key, newValue);
+    if (REQUIRE_RENDER.includes(key)) {
+      this.canvas.renderAll();
+    }
+  },
+  deep
+});
+
+export default {
+  name: 'fabric-object',
+  inheritAttrs: false,
+  mixins: [fabricCommon],
+  props: {
+    id: { type: [Number, String], required: true },
+    width: Number,
+    height: Number,
+    padding: { type: Number, default: 0 }, // 对象及其控制边界之间的填充（以像素为单位）
+    left: Number,
+    top: Number,
+    opacity: Number,
+    visible: { type: Boolean, default: true },
+
+    paintFirst: { type: String, default: 'fill' }, // 确定是先绘制还是先填充
+    fill: { type: String, default: '#000000' },
+    stroke:  { type: String, default: '#000000' },
+    strokeWidth: Number,
+    strokeDashArray: Array,
+    strokeDashOffset: Number,
+    strokeLineCap: String,
+    strokeLineJoin: String,
+    strokeMiterLimit: Number,
+    strokeUniform: { type: Boolean, default: false },
+
+    selectable: { type: Boolean, default: true },
+    selectionBackgroundColor: { type: String, default: '' },
+    evented: { type: Boolean, default: true },
+
+    hasBorders: { type: Boolean, default: false }, // 选中后
+    hasControls: { type: Boolean, default: false }, // 设置为false时，不显示对象的控件，并且不能用于操作对象，但不影响调用 event
+
+    backgroundColor: String,
+    borderColor: String,
+    excludeFromExport: { type: Boolean, default: false },
+    hoverCursor: String,
+    includeDefaultValues: { type: Boolean, default: true }, // 当为 false 时，默认对象的值不包括在其序列化中
+    lockMovementX: { type: Boolean, default: false }, // true 锁定 x 方向移动
+    lockMovementY: { type: Boolean, default: false }, // true 锁定 y 方向移动
+    lockRotation: { type: Boolean, default: false }, // true 锁定旋转
+    lockScalingFlip: { type: Boolean, default: false }, // true 负值无法反转
+    lockScalingX: { type: Boolean, default: false }, // true 锁定 x 方向缩放
+    lockScalingY: { type: Boolean, default: false }, // true 锁定 y 方向缩放
+    lockSkewingX: { type: Boolean, default: false }, // true 锁定 x 方向倾斜
+    lockSkewingY: { type: Boolean, default: false }, // true 锁定 y 方向倾斜
+    objectCaching: { type: Boolean, default: false },
+    originX: { type: String, default: 'center' },
+    originY: { type: String, default: 'center' },
+    perPixelTargetFind: { type: Boolean, default: false },
+    rotatingPointOffset: Number
+  },
+  provide() {
+    return {
+      $item: () => this.item
+    };
+  },
+  computed: {
+    definedProps() {
+      const obj = { ...this.$props };
+      Object.keys(obj).forEach(key => {
+        if (obj[key] === undefined) {
+          delete obj[key];
+        }
+      });
+      return obj;
+    },
+    parentType() {
+      if (this.group) {
+        return 'group';
+      }
+      return 'canvas';
+    },
+    parentItem() {
+      if (this.parentType == 'canvas') {
+        return this.canvas;
+      }
+      if (this.parentType == 'group') {
+        return this.group;
+      }
+    },
+    item() {
+      if (this.parentItem) {
+        let canvasObj = this.canvas.getObjects();
+        let res = [];
+        this.transverseCanvasObjects(canvasObj, 'id', this.id, res);
+        return res[0];
+      }
+    }
+  },
+  methods: {
+    transverseCanvasObjects(objects, attr, val, objectList) {
+      for (let i in objects) {
+        // 在组内查看，除非它是您要搜索的组对象
+        if (objects[i]['type'] == 'group' && objects[i][attr] !== val) {
+          this.transverseCanvasObjects(objects[i].getObjects(), attr, val, objectList);
+        } else if (objects[i][attr] == val) {
+          objectList.push(objects[i]);
+        }
+      }
+    },
+    /**
+     * 创建事件
+     */
+    createEvents() {
+      OBJECT_EVENTS.forEach(event => {
+        this.item.on(event, e => {
+          this.$emit(event, { id: this.id, ...e });
+        });
+      });
+    },
+    createWatchers() {
+      this.createFabricItemWatchers();
+      this.createPropWatchers();
+    },
+    createFabricItemWatchers() {
+      EMIT_PROPS.forEach(prop => {
+        this.$watch('item.' + prop, watchEmitProp(prop, true));
+      });
+    },
+    createPropWatchers() {
+      Object.keys(this.$props).forEach(key => {
+        // 自定义监听校验 确保mixin不会重复生成
+        if (typeof this.customWatch !== typeof undefined) {
+          if (this.customWatch.includes(key)) {
+            return;
+          }
+        }
+        this.$watch(key, watchProp(key, true));
+      });
+    }
+  },
+  beforeDestroy() {
+    OBJECT_EVENTS.forEach(event => {
+      if (this.item) {
+        this.item.off(event);
+      }
+    });
+    if (this.parentType == 'group') {
+      if (this.group) {
+        this.group.removeWithUpdate(this.item);
+      }
+    } else {
+      if (this.canvas) {
+        this.canvas.remove(this.item);
+      }
+    }
+  }
+};

package/packages/fabric-chart/src/mixins/type.js

@@ -1,6 +1,6 @@
-export const isNumber = num => {
-  return typeof num === 'number' && Number.isFinite(num);
-};
-export const isObject = obj => {
-  return Object.prototype.toString.call(obj) === '[object Object]';
+export const isNumber = num => {
+  return typeof num === 'number' && Number.isFinite(num);
+};
+export const isObject = obj => {
+  return Object.prototype.toString.call(obj) === '[object Object]';
 };

package/packages/fabric-chart/src/utils/bus.js

@@ -1,2 +1,2 @@
-import Vue from 'vue';
-export default new Vue();
+import Vue from 'vue';
+export default new Vue();

package/packages/form/index.js

@@ -1,16 +1,16 @@
-// 导入组件
-import Base from '../base';
-import Form from './src/Form';
-import Item from './src/Item';
-
-// 为组件提供 install 安装方法，供按需引入
-Form.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Form.name, Form);
-  Vue.component(Item.name, Item);
-  // 这里与antd源码冲突了
-  // Vue.prototype.$form = Form;
-};
-
-// 默认导出组件
-export default Form;
+// 导入组件
+import Base from '../base';
+import Form from './src/Form';
+import Item from './src/Item';
+
+// 为组件提供 install 安装方法，供按需引入
+Form.install = function(Vue) {
+  Vue.use(Base);
+  Vue.component(Form.name, Form);
+  Vue.component(Item.name, Item);
+  // 这里与antd源码冲突了
+  // Vue.prototype.$form = Form;
+};
+
+// 默认导出组件
+export default Form;

package/packages/form/src/Form.jsx

@@ -1,11 +1,11 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Form } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'form',
-  extends: Form
-});
+/**
+ * @author pengpeng
+ * @desc 全继承antd组件，后期再扩展
+ * @time 2021-05-13
+ */
+import { Form } from 'ant-design-vue';
+import create from '@/core/create';
+export default create({
+  name: 'form',
+  extends: Form
+});

package/packages/form/src/Item.jsx

@@ -1,11 +1,11 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Form } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'form-item',
-  extends: Form.Item
-});
+/**
+ * @author pengpeng
+ * @desc 全继承antd组件，后期再扩展
+ * @time 2021-05-13
+ */
+import { Form } from 'ant-design-vue';
+import create from '@/core/create';
+export default create({
+  name: 'form-item',
+  extends: Form.Item
+});