cnhis-design-vue 2.1.81 → 2.1.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cnhis-design-vue",
-  "version": "2.1.81",
+  "version": "2.1.83",
   "description": "前端业务UI库",
   "keyword": "cnhis-design-vue vue cnhis",
   "homepage": "http://dv.cnhis.com/",

package/packages/fabric-chart/src/FabricChart.vue

@@ -5,7 +5,15 @@
       <fabric-grid></fabric-grid>
       <fabric-scale-value v-if="hasTable" :templateData="templateData"></fabric-scale-value>
       <fabric-lines v-if="hasTopTable" ref="lines" :linesObj="templateData.top" v-on="$listeners"></fabric-lines>
-      <fabric-polylines ref="polylines" v-if="hasTable" :polyline="polylines" :other="templateData.left.other || {}" @pointOperation="pointOperation" v-on="$listeners"></fabric-polylines>
+      <fabric-polylines
+        ref="polylines"
+        v-if="hasTable"
+        :polyline="polylines"
+        :other="templateData.left.other || {}"
+        :timeRangeStyle="templateData.timeRangeStyle || {}"
+        @pointOperation="pointOperation"
+        v-on="$listeners"
+      ></fabric-polylines>
     </fabric-canvas>
   </div>
 </template>
@@ -76,6 +84,9 @@ export default create({
     this.canvasWidth = `${this.templateData.canvasWidth}px` || '1000px';
   },
   methods: {
+    setTimeRange(enabled) {
+      this.$refs.polylines.timeRangeData.enabled = enabled;
+    },
     pointOperation(type, value) {
       switch (type) {
         case 'add':

package/packages/fabric-chart/src/fabric-chart/FabricCanvas.vue

@@ -329,6 +329,7 @@ export default {
   },
   destroyed() {
     this.canvas.clear();
+    this.canvas.off();
     this.canvas = null;
     // this.canvas.dispose();
   }

package/packages/fabric-chart/src/fabric-chart/FabricPolylines.vue

@@ -65,7 +65,8 @@ export default {
     other: {
       type: Object,
       default: () => {}
-    }
+    },
+    timeRangeStyle: { type: Object }
   },
   components: {
     MouseRightClick,
@@ -87,7 +88,13 @@ export default {
       polylinePointList: [], // 缓存折线项目节点
       isMovingToOtherTarget: false,
       interval: null,
-      flickerablePoints: [] // 记录需要闪烁的节点
+      flickerablePoints: [], // 记录需要闪烁的节点
+      timeRangeData: {
+        enabled: false, // 是否开启
+        line1: null,
+        line2: null,
+        rect: null
+      }
     };
   },
   computed: {
@@ -126,6 +133,17 @@ export default {
     createEvent() {
       this.canvas.on('mouse:up', event => {
         if (event.button === 3) {
+          // 取消时间范围选区状态
+          if (this.timeRangeData.enabled) {
+            Object.keys(this.timeRangeData).forEach(key => {
+              if (['enabled'].includes(key)) this.timeRangeData[key] = false;
+              if (['line1', 'line2', 'rect'].includes(key)) {
+                this.timeRangeData[key] && this.canvas.remove(this.timeRangeData[key]);
+                this.timeRangeData[key] = null;
+              }
+            });
+            return;
+          }
           const { x, y } = event.pointer;
           if (this.isGridLimit(x, y)) {
             this.activeEvent = event;
@@ -133,6 +151,7 @@ export default {
             this.isAddEventListenerContextmenu = true;
           }
         }
+
         // 左键松开鼠标-批量删除
         this.isSelectArea = false;
         if (event.button === 1 && !event.target && this.selectArea) {
@@ -147,7 +166,46 @@ export default {
       });
       let selectAreaOrigin = { left: 0, top: 0 };
       this.canvas.on('mouse:down', event => {
-        if (event.button === 1 && !event.target) {
+        if (event.button !== 1) return;
+
+        // 处理时间范围选区
+        const { enabled, line1, line2, rect } = this.timeRangeData;
+        const { originY, endY, xScaleCellList } = this.propItems;
+        if (enabled) {
+          const left = xScaleCellList
+            .map(item => item.x)
+            .reduce((pre, curr) => {
+              return Math.abs(pre - event.pointer.x) > Math.abs(curr - event.pointer.x) ? curr : pre;
+            });
+          if (line1 && !line1.__fixed) {
+            line1.__fixed = true;
+            line1.setCoords().set({ x1: left, x2: left });
+          } else if (line2 && !line2.__fixed) {
+            line2.__fixed = true;
+            line2.setCoords().set({ x1: left, x2: left });
+            const [startLeft, endLeft] = [line1.x1, line2.x1].sort((a, b) => a - b);
+            this.timeRangeData.rect && this.canvas.remove(this.timeRangeData.rect);
+            this.timeRangeData.rect = new this.fabric.Rect({
+              ...defaultVaule.style,
+              fill: '#CAF982',
+              opacity: 0.4,
+              left: startLeft,
+              top: line1.y1,
+              width: endLeft - startLeft,
+              height: endY - originY,
+              ...(this.timeRangeStyle.rect || {})
+            });
+            this.canvas.add(this.timeRangeData.rect);
+
+            this.$emit('timeRangeChange', {
+              start: this.getXValue(startLeft),
+              end: this.getXValue(endLeft)
+            });
+          }
+          return;
+        }
+
+        if (!event.target) {
           this.isSelectArea = true;
           selectAreaOrigin.left = event.pointer.x;
           selectAreaOrigin.top = event.pointer.y;
@@ -155,6 +213,7 @@ export default {
       });
       this.canvas.on('mouse:move', event => {
         this.isSelectArea && this.createSelectArea(event, selectAreaOrigin);
+        this.setTimeRange(event.pointer);
       });
     },
     handleMoving(event) {
@@ -209,7 +268,30 @@ export default {
         ponits: [selectAreaOrigin.left, selectAreaOrigin.top, event.pointer.x, event.pointer.y]
       });
       this.canvas.add(this.selectArea);
-      // this.canvas.renderAll();
+    },
+    createTimeRangeLine(line, pointer) {
+      const { originY, endY } = this.propItems;
+      const { x, y } = pointer;
+      this.timeRangeData[line] && this.canvas.remove(this.timeRangeData[line]);
+      this.timeRangeData[line] = this.drawLine([x, originY, x, endY], {
+        stroke: '#4b790287',
+        strokeWidth: 3,
+        ...(this.timeRangeStyle.line || {})
+      });
+      this.canvas.add(this.timeRangeData[line]);
+    },
+    setTimeRange(pointer) {
+      const { enabled, line1, line2 } = this.timeRangeData;
+      const { x, y } = pointer;
+      if (!enabled || !this.isGridLimit(x, y)) return;
+
+      // 使用setCoords().set({ x1: x, x2: x })方法更改其坐标会产生很明显的卡顿现象，可能是canvas.on('mouse:move')抛出的事件节流了
+
+      if (!line1?.__fixed) {
+        this.createTimeRangeLine('line1', pointer);
+      } else if (!line2?.__fixed) {
+        this.createTimeRangeLine('line2', pointer);
+      }
     },
     // 每一个折线类别
     createPolyline(polylineType, polylineTypeId) {
@@ -1012,16 +1094,15 @@ export default {
     // 折线点移动时 setCoords()方法手动更新相关联的线坐标
     pointMoveUpdateLine(point) {
       if (point.line1) {
-        point.line1.setCoords();
-        point.line1.set({ x2: point.left, y2: point.top });
+        point.line1.setCoords().set({ x2: point.left, y2: point.top });
       }
       if (point.line2) {
-        point.line2.setCoords();
-        point.line2.set({ x1: point.left, y1: point.top });
+        point.line2.setCoords().set({ x1: point.left, y1: point.top });
       }
     },
     // 打开右键菜单
     openRightModal() {
+      if (this.timeRangeData.enabled) return;
       const { clientX, pageX, clientY, pageY } = this.activeEvent.e;
       this.rightPos = {
         clientX: clientX ?? pageX,

package/packages/fabric-chart/src/fabric-chart/FabricTextGroup.vue

@@ -127,6 +127,8 @@ export default {
     },
     // 打开右键菜单
     openRightModal() {
+      // 一下方法不会生效，因为，polylines组件中timeRangeData.enabled设置为false操作晚于当前操作，需换一种方式
+      // if (this.$parent.$children.find(children => /polylines/.test(children.$vnode.tag))?.componentInstance?.timeRangeData?.enabled) return;
       const { clientX, pageX, clientY, pageY } = this.activeEvent.e;
       this.rightPos = {
         clientX: clientX ?? pageX,

package/packages/table-filter/src/components/render-widget/components/Select.vue

@@ -1,8 +1,16 @@
 <template>
-   <Select v-bind="$attrs" v-on="$listeners" v-model="valueCp" :maxTagCount="maxTagCount" :maxTagPlaceholder="maxTagPlaceholder"></Select>
+  <Select
+    v-bind="$attrs"
+    v-on="$listeners"
+    v-model="valueCp"
+    :maxTagCount="maxTagCount"
+    :maxTagPlaceholder="maxTagPlaceholder"
+    :filterOption="filterOption"
+  ></Select>
 </template>
 
 <script>
+import utils from '@/utils/utils-map';
 import { Select } from 'ant-design-vue';
 
 export default {
@@ -43,6 +51,9 @@ export default {
       const { alias, title } = this.componentCfg;
       const len = this.value.length || 0;
       return this.value.length > 1 ? `已选${len}个${alias || title}` : "";
+    },
+    filterOption(...arg) {
+      return utils.filterOption(...arg);
     }
   },
 }

package/packages/table-filter/src/mixins/mixins.js

@@ -73,7 +73,11 @@ export const filterApiFn = {
       try {
         // TODO: 判断 fn 是异步函数还是同步
         const filterApiConfig = this.isOut ? this.filterApiConfigOutSearch : this?.filterApiConfig || {};
-        const fn = filterApiConfig[key] || null;
+        let fn = filterApiConfig[key] || null;
+        // BaseSearch中
+        if (this.isOut && !fn) {
+          fn = this.filterApiConfig?.[key];
+        }
         if (typeof fn === 'function') {
           let res = await fn(params, config);
           return Promise.resolve(res);