cnhis-design-vue 2.1.18 → 2.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cnhis-design-vue",
-  "version": "2.1.18",
+  "version": "2.1.21",
   "description": "前端业务UI库",
   "keyword": "cnhis-design-vue vue cnhis",
   "homepage": "http://dv.cnhis.com/",
@@ -104,4 +104,4 @@
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   }
-}
+}

package/packages/big-table/src/BigTable.vue

@@ -1965,25 +1965,26 @@ export default create({
      * 删除选中scan数据
      */
     confirmScanMulti(params) {
-      let { row, $rowIndex } = params || {};
+      let { row, rowIndex } = params || {};
       if (!row) return;
-      this.$emit('scanMultiRemove', $rowIndex, params);
+      this.$emit('scanMultiRemove', rowIndex, params);
       let vxeTable = this.$refs.xGrid;
       vxeTable.remove(row);
     },
     // 表格渲染逻辑
     formatter(params, col) {
-      let { row, column, $rowIndex } = params;
+      // 用rowIndex替换$rowIndex, 如果开启了虚拟滚动$rowIndex 下标会有问题
+      let { row, column, rowIndex } = params;
       let own = column?._own || column?.own || col;
       let attrType = own?.attrType || '';
       let fieldType = own?.fieldType || '';
       // 批量行编辑
-      let formUnionItem = this.showEditForm(row, column, $rowIndex);
+      let formUnionItem = this.showEditForm(row, column, rowIndex);
       if (formUnionItem) {
-        let dynamicProps = this.initBatchDynamicProps(formUnionItem, row, column, $rowIndex);
+        let dynamicProps = this.initBatchDynamicProps(formUnionItem, row, column, rowIndex);
         if (dynamicProps) {
           return [
-            <EditForm class={`js-inlineEditForm`} key={row[this.primaryKey] + $rowIndex + column.property} data-key={row[this.primaryKey] + $rowIndex + column.property} {...dynamicProps}></EditForm>
+            <EditForm class={`js-inlineEditForm`} key={row[this.primaryKey] + rowIndex + column.property} data-key={row[this.primaryKey] + rowIndex + column.property} {...dynamicProps}></EditForm>
           ];
         }
       }
@@ -2058,12 +2059,12 @@ export default create({
         if (this.rowBtnAutoLayout && !this.isRowEditing) {
           // 行内列表按钮改为自适应。
           let filterList = Array.isArray(row.btnList) ? row.btnList.filter(btn => btn.isShow == '1' && btn.type != 'LINK') : [];
-          return [<AutoLayoutButton btnList={filterList} row={row} index={$rowIndex} on-clickBtn={(...arg) => this.clickBtn(...arg)} />];
+          return [<AutoLayoutButton btnList={filterList} row={row} index={rowIndex} on-clickBtn={(...arg) => this.clickBtn(...arg)} />];
         }
         // 行编辑
-        const inlineBtnList = this.generateInlineBtnList(row, $rowIndex);
-        const tileBtnList = this.getTileBtnList(row, $rowIndex);
-        const foldBtnList = this.getFoldBtnList(row, $rowIndex);
+        const inlineBtnList = this.generateInlineBtnList(row, rowIndex);
+        const tileBtnList = this.getTileBtnList(row, rowIndex);
+        const foldBtnList = this.getFoldBtnList(row, rowIndex);
         return [
           <span>
             {this.rowBtnAutoLayout ? null : tileBtnList}
@@ -2082,12 +2083,12 @@ export default create({
               disabled = true;
             }
           }
-          return this.getBtnLinkSwitch(row, own, disabled || this.isTableEdit, $rowIndex);
+          return this.getBtnLinkSwitch(row, own, disabled || this.isTableEdit, rowIndex);
         } else {
-          return this.getField(row, own, $rowIndex, true);
+          return this.getField(row, own, rowIndex, true);
         }
       } else {
-        return this.getField(row, own, $rowIndex, false);
+        return this.getField(row, own, rowIndex, false);
       }
     },
     handleImgArr(imgs, type) {
@@ -2248,7 +2249,7 @@ export default create({
       // 嵌套表与主表click切换时需要清除上次的选中
       this.isAboutNestTable && this.$emit('resetNestLastClickTable', table);
 
-      let { row, $event = {}, $rowIndex } = data;
+      let { row, $event = {}, rowIndex } = data;
       // 点击主表格展开行按钮 不需要触发选中行
       let { className } = $event.target || {};
       if (className && vexutils.isString(className) && className.includes('vxe-table--expand-btn')) return;
@@ -2272,7 +2273,7 @@ export default create({
         const value = this.getRowClassName({ row }) == 'single--checked' ? [] : [row];
         this.$set(this, 'checkedRows', value);
         this.pubCheckChange(value);
-        this.$emit('handlerClickRow', row, $rowIndex);
+        this.$emit('handlerClickRow', row, rowIndex);
         return;
       }
       this.visibleCheckAllWrap = false;
@@ -2337,7 +2338,7 @@ export default create({
       if (rowLen > 1) {
         this.selectType != 'radio' && table.setCheckboxRow([row], true);
         this.isTree != 0 && this.selectType != 'radio' && this.pubCheckChange(newRow);
-        this.selectType != 'radio' && this.$emit('handlerClickRow', row, $rowIndex);
+        this.selectType != 'radio' && this.$emit('handlerClickRow', row, rowIndex);
       } else {
         setChecked = !setChecked;
         if (!setChecked) {
@@ -2351,7 +2352,7 @@ export default create({
         this.selectType != 'radio' && table.setCheckboxRow([row], setChecked);
       }
       if (this.isTree != 0) {
-        setChecked && this.$emit('handlerClickRow', row, $rowIndex);
+        setChecked && this.$emit('handlerClickRow', row, rowIndex);
         return;
       }
 
@@ -2364,7 +2365,7 @@ export default create({
       }
       this.setCurrentCheckedLength();
       this.lastPageIndex = this.pageVO.pageIndex;
-      setChecked && this.$emit('handlerClickRow', row, $rowIndex);
+      setChecked && this.$emit('handlerClickRow', row, rowIndex);
     },
     /**
      * 单选行数据 树结构 扁平化处理
@@ -2834,7 +2835,7 @@ export default create({
     },
     // 单选
     radioOnChange(rowData = {}) {
-      let { data, row, $rowIndex } = rowData;
+      let { data, row, rowIndex } = rowData;
       this.$emit('selectionChange', [{ ...row }]);
       this.isradioChange = true;
     },

package/packages/fabric-chart/src/components/TimeScaleValue.vue

@@ -83,11 +83,7 @@ export default {
         const newOriginY = originY - spaceHeight;
         const { xScalevalue } = this.$attrs.templateData.top || {};
         const popupTop = xScalevalue?.popupTop || 0;
-        if (top + newOriginY < popupTop) {
-          this.isShow = true;
-        } else {
-          this.isShow = false;
-        }
+        this.isShow = top + newOriginY < popupTop ? true : false;
       }
     }
   },

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

@@ -55,7 +55,9 @@ export default {
       activeEvent: null, // 当前可右键活动的对象
       addPointList: [], // 快速新增的节点list
       isSelectArea: false, // 是否正在选区
-      selectArea: null // 选区矩形对象
+      selectArea: null, // 选区矩形对象
+      currentDelPoint: null, // 缓存当前可批量删除的项目线段上的点
+      polylinePointList: [] // 缓存折线项目节点
     };
   },
   computed: {
@@ -69,6 +71,7 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.drawPolylineTitle();
+      this.polylinePointList = [];
       this.polyline.forEach((polylineType, polylineTypeId) => {
         this.createPolyline(polylineType, polylineTypeId);
       });
@@ -95,7 +98,10 @@ export default {
           const points = this.selectArea.ponits;
           const delList = this.getAreaPonits(points);
           delList.length === 0 && this.removeSelectArea();
-          delList.length > 0 && this.selectArea && this.$emit('pointOperation', 'delete', delList);
+          if (delList.length > 0 && this.selectArea) {
+            this.$emit('pointOperation', 'delete', delList);
+            this.currentDelPoint = null;
+          }
         }
       });
       let selectAreaOrigin = { left: 0, top: 0 };
@@ -118,7 +124,14 @@ export default {
         const { id, left, top } = obj;
         const isArea = left >= x1 && left <= x2 && top >= y1 && top <= y2;
         if (id && /_polyline(Point)_/.test(id) && !id.includes('isTitle') && isArea) {
-          delList.push(this.getDataById(id));
+          if (this.currentDelPoint) {
+            const { polylineIndex } = this.currentDelPoint;
+            if (polylineIndex == obj.polylineIndex) {
+              delList.push(this.getDataById(id));
+            }
+          } else {
+            delList.push(this.getDataById(id));
+          }
         }
       });
       return delList;
@@ -189,32 +202,20 @@ export default {
 
       // 配置左侧title图标（但不是折线项目）
       if (this.other?.list && Array.isArray(this.other.list)) {
+        const otherList = this.other.list.map(v => {
+          return {
+            title: v.name,
+            type: v.type,
+            pointAttr: v,
+            isAdd: false,
+            polylineTypeId: -1,
+            polylineIndex: -1
+          };
+        });
         if (this.other.position && this.other.position === 'top') {
-          leftTitleList.push(
-            ...this.other.list.map(v => {
-              return {
-                title: v.name,
-                type: v.type,
-                pointAttr: v,
-                isAdd: false,
-                polylineTypeId: -1,
-                polylineIndex: -1
-              };
-            })
-          );
+          leftTitleList.push(...otherList);
         } else {
-          leftTitleList.unshift(
-            ...this.other.list.map(v => {
-              return {
-                title: v.name,
-                type: v.type,
-                pointAttr: v,
-                isAdd: false,
-                polylineTypeId: -1,
-                polylineIndex: -1
-              };
-            })
-          );
+          leftTitleList.unshift(...otherList);
         }
       }
 
@@ -421,30 +422,29 @@ export default {
       const list = polyline.list;
       const pointList = [];
       let lineList = [];
-
-      list.forEach((linePoints, index) => {
-        // 当前点
-        let points = null;
+      const _this = this;
+      function getPointer(point) {
         let isInit = false;
-        if (isEffectiveNode(linePoints)) {
-          const x = this.cumputedX(linePoints.time);
-          const y = this.cumputedY(polylineType, linePoints.value);
+        let points = null;
+        if (isEffectiveNode(point) && _this.isLimit(point.time)) {
+          const x = _this.cumputedX(point.time);
+          const y = _this.cumputedY(polylineType, point.value);
           isInit = y < originY || y > endY;
-          if (this.isLimit(linePoints.time)) points = [x, y < originY ? originY : y > endY ? endY : y];
+          points = [x, y < originY ? originY : y > endY ? endY : y];
         }
+        return { isInit, points };
+      }
+      list.forEach((linePoints, index) => {
+        // 当前点
+        let { points, isInit } = getPointer(linePoints);
 
         // 下一个点
         const nextPoints = list[index + 1];
-        let nextPoint = null;
-        if (isEffectiveNode(nextPoints)) {
-          const nextX = this.cumputedX(nextPoints.time);
-          const nextY = this.cumputedY(polylineType, nextPoints.value);
-          if (this.isLimit(nextPoints.time)) nextPoint = [nextX, nextY < originY ? originY : nextY > endY ? endY : nextY];
-        }
+        let { points: nextPoint } = getPointer(nextPoints);
+
         let line;
         let point;
         let previousLine;
-
         line = points && nextPoint ? this.drawLine([...points, ...nextPoint], { polylineIndex, polylineTypeId, lineIndex: index, ...lineAttr }) : null;
         previousLine = lineList[index - 1];
         const pointOthers = { polylineTypeId, polylineIndex, pointIndex: index, ...pointAttr, lineAttr };
@@ -455,7 +455,31 @@ export default {
         lineList.push(line);
         point && pointList.push(point);
       });
+
       Promise.all(pointList).then(res => {
+        const polylineObj = this.polylinePointList.find(v => v.polylineTypeId == polylineTypeId && v.polylineIndex == polylineIndex);
+        const pointerList = res.map(v => v.left);
+        if (polylineObj) {
+          Object.assign(polylineObj, {
+            pointerList,
+            pointList: res
+          });
+          polylineObj.pointerList = pointerList;
+        } else {
+          this.polylinePointList.push({
+            polylineTypeId,
+            polylineIndex,
+            pointerList,
+            pointStyle: {
+              fill: res[0].fill,
+              stroke: res[0].stroke
+            },
+            lineStyle: {
+              stroke: lineAttr.stroke
+            },
+            pointList: res
+          });
+        }
         lineList = lineList.filter(v => v);
         let prevPoint = null;
         res = res.filter(v => {
@@ -510,19 +534,7 @@ export default {
       line2 && (point.line2 = line2);
       point.on('mouseover', () => {
         this.showDrapPopup(point);
-        // 将当条线段以及点层级置顶
-        // 线段不能先置顶，会挡住其他线段上的点
-        // this.canvas.forEachObject(obj => {
-        //   if (this.isOnePolyLine(obj, point.polylineTypeId, point.polylineIndex)) {
-        //     obj.line1 && this.canvas.bringToFront(obj.line1);
-        //     obj.line2 && this.canvas.bringToFront(obj.line2);
-        //   }
-        // });
-        this.canvas.forEachObject(obj => {
-          if (this.isOnePolyLine(obj, point.polylineTypeId, point.polylineIndex)) {
-            this.canvas.bringToFront(obj);
-          }
-        });
+        this.pointToFront(point);
       });
       point.on('mouseout', () => {
         this.isDropVisible = false;
@@ -530,7 +542,7 @@ export default {
       // 折线点移动中 实时更新相关联的线的坐标
       if (this.eventStyle.evented) {
         point.on('moving', () => {
-          this.pointMoveLimit(point);
+          this.pointMoveLimit(point, false);
           this.pointMoveUpdateLine(point);
           this.addPoint(point, left, top);
           this.canvas.renderAll();
@@ -543,6 +555,13 @@ export default {
             this.setEmitFunction(point);
           }
         });
+        point.on('mouseup', event => {
+          const { button, isClick } = event;
+          if (button == 1 && isClick) {
+            // 可配置批量删除当前项目上的点了
+            this.currentDelPoint = point;
+          }
+        });
       }
 
       // 超出表格最高或最低值则需要触发pointChange事件并且不能更新视图，否则连接节点判断不会成功
@@ -560,29 +579,32 @@ export default {
       if (this.addPointList.length === 0) {
         this.$emit('pointChange', data);
       } else {
-        const last = this.addPointList[this.addPointList.length - 1];
+        const lastPoint = this.addPointList.at(-1);
+        const position = this.polyline[point.polylineTypeId].position;
         // 如果是重合/连线节点
         if (point.get('scaleX') !== point.scale) {
-          const value = {
-            ...last,
+          this.addPointList.splice(-1, 1, {
+            ...lastPoint,
             value: {
-              time: this.getXValue(point.nextPoint.left),
-              value: this.getYValue(this.polyline[point.polylineTypeId].position, point.nextPoint.top)
-            }
-          };
-          if (last.left === point.left) {
-            this.addPointList.splice(-1, 1, value);
-          } else {
-            this.addPointList.push(value);
-            const [lastPoint, prePoint, ...list] = JSON.parse(JSON.stringify(this.addPointList)).reverse();
-            if (prePoint.value.time == lastPoint.value.time) {
-              this.addPointList.splice(-2, 1);
+              time: this.getXValue(this._concatPoint?.left),
+              value: this.getYValue(position, this._concatPoint?.top)
             }
-          }
+          });
+          this.addPointList.forEach(v => Object.assign(v, { isConcat: true, concatIndex: this._concatIndex }));
+        } else if (point.line2 || (point.nextPoint && lastPoint.left >= point.nextPoint.left)) {
+          // 1、存在右连线 2、无右侧连线，并且存在下一个节点的情况
+          this.addPointList = [];
+          this.repaintPolyline(position, point.polylineIndex);
+          return;
         }
+        !point.line2 && this.addPointList.splice(0, 1);
         !point.id.includes('isTitle') && this.removePolyline(point.id);
-        this.$emit('pointOperation', 'increasePointBatch', this.addPointList);
-        this.addPointList = [];
+        if (this.addPointList.length > 0) {
+          this.$emit('pointOperation', 'increasePointBatch', this.addPointList);
+          this.addPointList = [];
+        } else {
+          this.repaintPolyline(position, point.polylineIndex);
+        }
       }
     },
     // 设置批量新增数据
@@ -594,7 +616,7 @@ export default {
       this.addPointList.push(data);
     },
     /**
-     * @description: 滑动批量新增节点
+     * @description: 拖动批量新增节点
      * @param {*} point 拖动的最后一个节点
      * @param {*} originLeft 拖动的源节点的left值
      * @param {*} originTop 拖动的源节点的top值
@@ -614,8 +636,11 @@ export default {
       const residue = (left - originLeft) % spaceWidth;
 
       const condition = residue > spaceWidth - n || residue < n;
+      const conditionNoLine2 = !point.line2 && left > originLeft;
+      const conditionHasLine2 = point.line2 && left > originLeft + spaceWidth;
 
-      if (!point.line2 && left > originLeft && condition) {
+      // if (!point.line2 && left > originLeft && condition) {
+      if (condition && (conditionNoLine2 || conditionHasLine2)) {
         if (residue > spaceWidth - n) left = left - residue + spaceWidth;
         if (residue < n) left = left - residue;
         point.set({
@@ -652,8 +677,15 @@ export default {
 
         // const i = Math.floor((left - originLeft) / spaceWidth);
         // 复制点和线
-        if (left > originLeft) {
-          point.line1 && this.removePolyline(point.line1.id);
+        if (conditionNoLine2 || conditionHasLine2) {
+          // point.line1 && this.removePolyline(point.line1.id);
+          point.line1?.set({
+            stroke: 'transparent'
+          });
+          conditionHasLine2 &&
+            point.line2?.set({
+              stroke: 'transparent'
+            });
           // if (i === 1) {
           this.addPointList.length == 0 && (await this.clonePoint(point, [point.line1 ? point.line1.x1 : originLeft, point.line1 ? point.line1.y1 : originTop, originLeft, originTop]));
           // }
@@ -674,25 +706,76 @@ export default {
       }
 
       // 断点相连
-      if (point.nextPoint && left >= point.nextPoint.left - n && top <= point.nextPoint.top + n && top >= point.nextPoint.top - n) {
-        point.set({
-          left: point.nextPoint.get('left'),
-          top: point.nextPoint.get('top'),
-          scaleX: point.scale === 1 ? 2.5 : 0.1,
-          scaleY: point.scale === 1 ? 2.5 : 0.1
-        });
-      } else if (point.nextPoint) {
-        point.set({
-          scaleX: point.scale,
-          scaleY: point.scale
+      function concatPoint(target) {
+        const { left: targetLeft, top: targetTop } = target;
+        point.setCoords();
+        if (left >= targetLeft - n && left <= targetLeft + n && top <= targetTop + n && top >= targetTop - n) {
+          point.set({
+            left: targetLeft,
+            top: targetTop,
+            scaleX: point.scale === 1 ? 2.5 : 0.1,
+            scaleY: point.scale === 1 ? 2.5 : 0.1
+          });
+        } else {
+          point.set({
+            scaleX: point.scale,
+            scaleY: point.scale
+          });
+        }
+      }
+
+      // 检查是否显示重合连线放大节点的标识
+      // if (conditionHasLine2) {
+      if (point.nextPoint) {
+        const { polylineTypeId, polylineIndex } = point;
+        const polylineObj = this.polylinePointList.find(v => v.polylineTypeId == polylineTypeId && v.polylineIndex == polylineIndex);
+        this._concatIndex = polylineObj?.pointerList.findIndex(v => v + n > left && v > originLeft);
+        if (!~this._concatIndex) {
+          point.set({
+            scaleX: point.scale,
+            scaleY: point.scale
+          });
+        } else {
+          concatPoint(polylineObj?.pointList[this._concatIndex]);
+        }
+        this._concatPoint = polylineObj?.pointList?.[this._concatIndex] || null;
+        polylineObj?.pointerList.forEach((v, i) => {
+          const obj = polylineObj?.pointList[i];
+          if (v > originLeft && v < left) {
+            const { fill, stroke } = polylineObj.pointStyle;
+            const setColor = color => {
+              return color && (color !== '#fff' || color !== 'transparent') ? '#999' : color;
+            };
+            // 此处需要递归遍历group节点的所有子节点，然后更改其颜色
+            // 待完善
+            obj.set({ fill: setColor(fill), stroke: setColor(stroke) });
+            // obj.line2?.set({ fill: setColor(fill), stroke: setColor(stroke) });
+          } else {
+            obj.set(polylineObj.pointStyle);
+            // obj.line2?.set(polylineObj.lineStyle);
+          }
         });
       }
+
+      // } else {
+      //   point.nextPoint && concatPoint(point.nextPoint);
+      // }
+
       // 如果往回拖动则删除经过的已存在的节点
       if (startLength > 0 && currentLeft <= this.addPointList[startLength - 1].left) {
         this.removePolyline('increasePointBatch', left);
         this.addPointList = this.addPointList.filter(v => v.left < left);
         const endLength = this.addPointList.length;
-        if (endLength === 0) this.removePolyline('increasePointBatch', originLeft);
+        if (endLength === 0) {
+          point.line1?.set({
+            stroke: point.stroke
+          });
+          conditionHasLine2 &&
+            point.line2?.set({
+              stroke: point.stroke
+            });
+          this.removePolyline('increasePointBatch', originLeft);
+        }
         if (endLength > 0) {
           point.set({
             prePoints: [this.addPointList[endLength - 1].left, this.addPointList[endLength - 1].top]
@@ -716,7 +799,9 @@ export default {
             idClone: 'increasePointBatch',
             id: '_polylinePoint_' + new Date().getTime(), // 此id必须，用于remove节点的时候
             polylineTypeId,
-            polylineIndex: point.polylineIndex
+            polylineIndex: point.polylineIndex,
+            scaleX: point.scale,
+            scaleY: point.scale
           });
           clonedObj.hasControls = clonedObj.hasBorders = false;
           point.set({
@@ -894,6 +979,15 @@ export default {
       if (obj.id && /_polyline(Point|Line)_/.test(obj.id) && !obj.id.includes('isTitle') && isPolyLine) return true;
       return;
     },
+    // 将当条线段以及点层级置顶
+    // 线段不能先置顶，会挡住其他线段上的点
+    pointToFront(point) {
+      this.canvas.forEachObject(obj => {
+        if (this.isOnePolyLine(obj, point.polylineTypeId, point.polylineIndex)) {
+          this.canvas.bringToFront(obj);
+        }
+      });
+    },
     removePolyline(id, left, position, polylineIndex) {
       // 根据id或者idClone删除
       if (id) {
@@ -944,6 +1038,7 @@ export default {
         if (this.polyline.length) {
           this.removePolyline();
         }
+        this.polylinePointList = [];
         this.polyline.forEach((polylineType, polylineTypeId) => {
           this.createPolyline(polylineType, polylineTypeId);
         });