cnhis-design-vue 2.1.128 → 2.1.130

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

@@ -14,6 +14,8 @@ import DropPopup from '../components/DropPopup';
 import MouseRightClick from '../components/MouseRightClick';
 import eventCommon from '../mixins/eventCommon';
 import Bus from '../utils/bus';
+import { cloneDeep } from 'lodash';
+import { sortByTime } from '../utils';
 
 const rightClickNode = [
   { name: '修改', type: 'edit' },
@@ -65,6 +67,8 @@ export default {
     }
   },
   data() {
+    this.markData = sortByTime(cloneDeep(this.templateData.bottom?.list));
+    this.markObjs = [];
     return {
       leftStartX: 0,
       isDropVisible: false,
@@ -101,7 +105,7 @@ export default {
       // this.canvas.renderAll();
       if (this.templateData.bottom) {
         this.drawExtracorporealCirculation();
-        this.drawBottomTextDataGroup(this.templateData.bottom);
+        this.drawBottomTextDataGroup();
       }
     },
     drawBorder() {
@@ -322,29 +326,33 @@ export default {
             };
             const left = this.computedX(v.time);
             title.dataList.push(left);
-            const icon = await this.createPoint(_icon.type, {
-              originX: 'center',
-              left,
-              ...item.style,
-              ...(item.style ? { stroke: item.style.fill } : {}),
-              ...(_icon.style || {}),
-              ...commonOptions
-            });
+            const icon =
+              !Reflect.has(_icon, 'show') || _icon.show
+                ? await this.createPoint(_icon.type, {
+                    originX: 'center',
+                    left,
+                    ...item.style,
+                    ...(item.style ? { stroke: item.style.fill } : {}),
+                    ...(_icon.style || {}),
+                    ...commonOptions
+                  })
+                : null;
+            const iconHalfWidth = icon ? icon.width / 2 : 0;
             const text = new this.fabric.Text(String(v.value), {
               ...defaultVaule.style,
               ...defaultVaule.textStyle,
               ...item.style,
-              left: left + icon.width / 2,
+              left: left + iconHalfWidth,
               name: v.value,
               ...commonOptions
             });
-            const groupObj = new this.fabric.Group([icon, text], {
+            const groupObj = new this.fabric.Group(icon ? [icon, text] : [text], {
               id: `${index}_${i}_other_${Date.now()}`,
               lockMovementY: true,
               ...commonOptions,
               ...this.eventStyle,
               realLeft: left,
-              iconHalfWidth: icon.width / 2
+              iconHalfWidth
             });
             if (prevPoint) {
               prevPoint.nextPoint = groupObj;
@@ -455,23 +463,19 @@ export default {
       return time >= minTime && time <= maxTime;
     },
     removeMark() {
-      this.canvas.forEachObject(obj => {
-        if (obj.type && obj.type === 'mark') {
-          this.canvas.remove(obj);
-        }
-      });
+      this.markObjs.forEach(obj => this.canvas.remove(obj));
     },
-    // 底部标记
-    drawBottomTextDataGroup(obj) {
+    drawTopTotalLineAndTitle() {
+      const { bottom: obj, left: leftData } = this.templateData;
       const { endX, originX, endY, topTotal, markHeight } = this.propItems;
-      if (!markHeight || !obj.list) {
+      if (!topTotal.width) {
         return;
       }
 
-      topTotal.width && this.canvas.add(this.drawLine([endX, endY - 1, endX, endY + markHeight], { ...this.defaultRectStyle }));
-      topTotal.width && this.canvas.add(this.drawLine([originX, endY + markHeight, endX, endY + markHeight], { ...this.defaultRectStyle }));
-      // const textList = [];
-      const marginLeft = this.templateData.left.leftYScalevalue.spaceGridNumber || defaultVaule.spaceGridNumber;
+      const line1 = this.drawLine([endX, endY - 1, endX, endY + markHeight], { ...this.defaultRectStyle });
+      const line2 = this.drawLine([originX, endY + markHeight, endX, endY + markHeight], { ...this.defaultRectStyle });
+
+      const marginLeft = leftData.leftYScalevalue.spaceGridNumber || defaultVaule.spaceGridNumber;
       const left = originX - marginLeft * 4; // 默认减去4倍的左边距，防止最左边的数据与名称显示重合了
       const title = new this.fabric.Text(String(obj.title), {
         ...defaultVaule.style,
@@ -483,43 +487,75 @@ export default {
         top: endY + markHeight / 2,
         type: 'mark'
       });
-      this.canvas.add(title);
-      // textList.push(title);
+      this.markObjs.push(title, line1, line2);
+      this.canvas.add(title, line1, line2);
+    },
+    // 底部标记
+    drawBottomTextDataGroup() {
+      const { bottom: obj } = this.templateData;
+      const { originX, endY, markHeight, xCellWidth } = this.propItems;
+      if (!markHeight || !this.markData?.length) {
+        return;
+      }
+      if (this.markObjs.length) {
+        [...this.markObjs].forEach(obj => this.canvas.remove(obj));
+        this.markObjs = [];
+      }
+
+      this.drawTopTotalLineAndTitle();
+
       const _endY = this.extracorporealCirculationHeight ? endY + this.extracorporealCirculationHeight : endY;
       const baseY = _endY + 2; // 目前固定10像素的下边距
       const baseYLimit = endY - 2; // 目前固定10像素的上边距
       const lineHeightText = (obj.style?.fontSize || 12) + 2;
       const lineHeightImg = (obj.iconStyle?.height || 12) + 2;
       const lineHeightSeq = (obj.seqStyle?.circle?.radius || 9) * 2 + 2;
+      let prevLeft = originX;
+      let prevCondition;
+      const pointerObj = {};
 
-      const setTop = (lineHeight, i, condition) => {
+      const setTop = (item, lineHeight, i, condition) => {
+        let _lineHeight = lineHeight;
+        if (item.desc && obj.showDesc) {
+          _lineHeight = lineHeight + lineHeightText;
+        }
         if (!~condition.limitIndex) {
-          condition.y += i === 0 ? lineHeight / 2 : lineHeight;
-          if (condition.y >= endY + markHeight - lineHeight / 2) {
+          condition.y += i === 0 ? _lineHeight / 2 : _lineHeight;
+          if (condition.y >= endY + markHeight - _lineHeight / 2) {
             condition.limitIndex++;
             if (condition.limitIndex === 0) {
               condition.y = baseYLimit;
-              condition.y -= lineHeight / 2;
+              condition.y -= _lineHeight / 2;
             }
           }
         } else {
-          condition.y -= lineHeight;
+          condition.y -= _lineHeight;
         }
-        return condition.y;
+        const y = condition.y;
+        let y1,
+          y2 = y;
+        if (item.desc && obj.showDesc) {
+          y1 = y + _lineHeight / 2 - lineHeight - lineHeightText / 2;
+          y2 = y + _lineHeight / 2 - lineHeight / 2;
+        }
+        return { y1, y2 };
       };
-      obj.list.forEach((item, index) => {
+      this.markData.forEach((item, index) => {
         const condition = {
           limitIndex: -1, // 标志点是否往上排列的标志，大于-1则表示需要往上排列
           y: baseY
         };
         const x = this.computedX(item[0]);
+        // 相隔小于或等于一个小格的宽度就继承上个时间标记的高度继续计算定位，即错位显示
+        const prevHasBelowShow = pointerObj[`x_${prevLeft}`]?.some(o => o > endY);
+        if (x - prevLeft <= xCellWidth && prevHasBelowShow) {
+          Object.assign(condition, prevCondition);
+        }
         if (this.isLimit(item[0])) {
           const pointList = [];
+          pointerObj[`x_${x}`] = [];
           item[1].forEach(async (v, i) => {
             const common = {
-              left: x,
-              originX: 'center',
-              originY: 'center',
               data: v.data || {},
               other: v.other || {},
               time: item[0],
@@ -528,29 +564,37 @@ export default {
               objectCaching: false
             };
 
+            let conditionRes;
             if (this.isObject(v) && !v.value) {
-              common.top = setTop(lineHeightImg, i, condition);
-              const option = {
-                ...obj.iconStyle,
-                ...v,
-                ...common
-              };
-              pointList.push(this.drawMarkPoint(v, option, obj));
+              conditionRes = setTop(v, lineHeightImg, i, condition);
+              pointList.push(this.drawMarkPoint(v, common, obj, conditionRes, x));
             } else if (v.value) {
               if (v.seq) {
-                common.top = setTop(lineHeightSeq, i, condition);
-                pointList.push(this.drawMarkPoint(v, common, obj));
+                conditionRes = setTop(v, lineHeightSeq, i, condition);
+                pointList.push(this.drawMarkPoint(v, common, obj, conditionRes, x));
               } else {
-                common.top = setTop(lineHeightText, i, condition);
-                pointList.push(this.drawMarkPoint(v, common, obj));
+                conditionRes = setTop(v, lineHeightText, i, condition);
+                pointList.push(this.drawMarkPoint(v, common, obj, conditionRes, x));
               }
             }
+            pointerObj[`x_${x}`].push(conditionRes.y2);
+          });
+          prevLeft = x;
+          prevCondition = condition;
+          Promise.all(pointList).then(res => {
+            this.markObjs.push(...res);
+            this.canvas.add(...res);
           });
-          Promise.all(pointList).then(res => this.canvas.add(...res));
         }
       });
     },
-    async drawMarkPoint(v, option, obj) {
+    async drawMarkPoint(v, option, obj, { y1, y2 }, x) {
+      const positionObj = {
+        left: x,
+        originX: 'center',
+        originY: 'center',
+        top: y2
+      };
       let point;
       const eventStyle = !this.eventStyle.evented
         ? {
@@ -565,6 +609,9 @@ export default {
         }
         point = await this.createPoint(v?.url || v?.iconClassName ? 'img' : v.type, {
           ele: ele || '',
+          ...positionObj,
+          ...obj.iconStyle,
+          ...v,
           ...option,
           ...eventStyle
         });
@@ -572,6 +619,7 @@ export default {
         if (v.seq) {
           // 标记增加序号
           const circle = await this.createPoint('circle', {
+            ...positionObj,
             ...option,
             radius: 5,
             strokeWidth: 1,
@@ -581,10 +629,12 @@ export default {
           });
           const text = new this.fabric.Text(String(v.value), {
             ...defaultVaule.textStyle,
+            ...positionObj,
             ...option,
             ...(obj.seqStyle?.text || {})
           });
           point = await new this.fabric.Group([circle, text], {
+            ...positionObj,
             ...option,
             ...eventStyle
           });
@@ -592,11 +642,27 @@ export default {
           point = await new this.fabric.Text(String(v.value), {
             ...defaultVaule.textStyle,
             ...obj.style,
+            ...positionObj,
             ...option,
             ...eventStyle
           });
         }
       }
+      if (y1) {
+        const descPoint = new this.fabric.Text(String(v.desc), {
+          ...defaultVaule.textStyle,
+          ...positionObj,
+          ...option,
+          ...obj.style,
+          top: y1
+        });
+        point = await new this.fabric.Group([descPoint, point], {
+          ...option,
+          left: x,
+          originX: 'center',
+          ...eventStyle
+        });
+      }
 
       point.hasControls = point.hasBorders = false;
       this.pointEvent(point);
@@ -620,9 +686,31 @@ export default {
             newVal: this.getXValue(point.left)
           };
           this.$emit('markChange', value);
+          this.updateMarkData(value);
+          this.drawBottomTextDataGroup();
+          this.canvas.discardActiveObject();
         });
       }
     },
+    updateMarkData({ data, newVal }) {
+      const id = data.id;
+      let listIndex, index;
+      listIndex = this.markData.findIndex(v => {
+        const i = v[1].findIndex(k => k.data?.id === id);
+        i > -1 && (index = i);
+        return i > -1;
+      });
+      const obj = this.markData[listIndex][1].splice(index, 1)[0];
+      const newIndex = this.markData.findIndex(v => v[0] === newVal);
+      if (!~newIndex) {
+        this.markData.push([newVal, [obj]]);
+      } else {
+        this.markData[newIndex][1].push(obj);
+      }
+      const emptyIndex = this.markData.findIndex(v => v[1].length === 0);
+      !!~emptyIndex && this.markData.splice(emptyIndex, 1);
+      sortByTime(this.markData);
+    },
     moveLimit(point) {
       point.setCoords();
       const { originX, endX, originY, endY, markHeight } = this.propItems;

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

@@ -155,13 +155,9 @@ export default {
           this.$emit('extracorporealCirculationChange', params);
           const { index, key, data } = params;
           this.extracorporealCirculation.list[index][key] = data;
-          this.drawExtracorporealCirculation(this.extracorporealCirculation);
+          this.drawExtracorporealCirculation();
           this.canvas.discardActiveObject();
-          this.canvas.forEachObject(obj => {
-            if (obj.type && obj.type === 'mark') {
-              obj.bringForward();
-            }
-          });
+          this.markObjs.forEach(obj => obj.bringForward());
         });
       }
     },

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

@@ -9,7 +9,7 @@ export function getTangent(angle) {
   return +Math.tan((angle * Math.PI) / 180);
 }
 
-function nearlyEqual(v1, v2) {
+export function nearlyEqual(v1, v2) {
   return Math.abs(v1 - v2) <= 0.0001;
 }
 
@@ -79,3 +79,11 @@ export function getIntersectionPoint(a, b, c, d) {
   // 否则不相交
   return false;
 }
+
+export function sortByTime(list = []) {
+  list.sort((a, b) => {
+    return Date.parse(a[0]) - Date.parse(b[0]);
+  });
+
+  return list;
+}

package/packages/full-calendar/src/FullCalendar.vue

@@ -473,7 +473,7 @@ export default create({
 });
 </script>
 <style lang="less" scoped>
-@primary-color: #2d7aff;
+@main-color: #2563f4;
 
 .c-full-calendar {
   position: relative;
@@ -527,7 +527,7 @@ export default create({
         align-items: center;
         flex: 0 0 66px;
         padding: 0 5px;
-        background: #f7f7f7;
+        background: #fff;
         .header-left {
           color: #212121;
           span {
@@ -543,19 +543,19 @@ export default create({
             border: 1px solid #d9d9d9;
             cursor: pointer;
             &:hover {
-              color: #2d7aff;
+              color: @main-color;
               background: rgba(36, 116, 255, 0.1);
               border-color: rgba(36, 116, 255, 0.2);
               i {
-                color: #2d7aff;
+                color: @main-color;
               }
             }
             &:active {
-              color: #2d7aff;
+              color: @main-color;
               background: rgba(36, 116, 255, 0.2);
-              border-color: #2d7aff;
+              border-color: @main-color;
               i {
-                color: #2d7aff;
+                color: @main-color;
               }
             }
             &.disabled {
@@ -580,7 +580,7 @@ export default create({
               box-shadow: 1px 0 0 0 rgba(36, 116, 255, 0.2);
             }
             &:active {
-              box-shadow: 1px 0 0 0 #2d7aff;
+              box-shadow: 1px 0 0 0 @main-color;
             }
           }
           .btn-next {
@@ -629,6 +629,10 @@ export default create({
         overflow-y: auto;
         box-sizing: border-box;
 
+        .fc-timegrid-divider {
+          display: none;
+        }
+
         .fc-header-toolbar {
           margin-bottom: 0;
         }
@@ -641,6 +645,7 @@ export default create({
 
         .fc-col-header-cell-cushion {
           font-weight: normal;
+          color: @main-color;
           & > span {
             padding: 10px 0;
             display: inline-block;
@@ -716,9 +721,9 @@ export default create({
           }
         }
         .fc-day-today .week-header {
-          color: @primary-color;
+          color: @main-color;
           .week-day {
-            color: @primary-color;
+            color: @main-color;
           }
         }
 
@@ -755,7 +760,7 @@ export default create({
             background-color: #f2f7ff;
             .fc-daygrid-day-number {
               color: #fff;
-              background-color: #2d7aff;
+              background-color: @main-color;
               border-radius: 50%;
             }
           }

package/packages/full-calendar/src/components/ListTag.vue

@@ -113,6 +113,8 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+@main-color: #2563f4;
+
 .list-tag {
   width: 100%;
   height: 100%;
@@ -136,19 +138,19 @@ export default {
         }
         &.active {
           .list-day {
-            color: @primary-color;
+            color: @main-color;
             background: rgba(36, 116, 255, 0.1);
           }
         }
         &.curday {
           .list-day {
             color: #fff;
-            background: @primary-color;
+            background: @main-color;
             &:hover {
-              background: @primary-color;
+              background: @main-color;
             }
           }
-          color: @primary-color;
+          color: @main-color;
         }
         .list-day {
           width: 36px;

package/packages/grid/src/grid.js

@@ -6,10 +6,9 @@
 import Vue from 'vue';
 import 'xe-utils';
 import VXETable from 'vxe-table';
-import VXETablePluginAntd from 'vxe-table-plugin-antd'
+import VXETablePluginAntd from 'vxe-table-plugin-antd';
 import Grid from 'vxe-table/lib/grid';
-// import 'vxe-table/lib/style.css';
-import 'vxe-table-plugin-antd/dist/style.css'
+import 'vxe-table-plugin-antd/dist/style.css';
 
 VXETable.use(VXETablePluginAntd);
 import create from '@/core/create';

package/packages/table-filter/src/base-search-com/BaseSearch.vue

@@ -234,8 +234,12 @@
               <!-- 平铺按钮列表 -->
               <template v-for="(item, j) in rowTileBtnList">
                 <!-- v-if="item.type == 'ADD'" -->
-                <li ref="rowTileBtnItem" class="rowTileBtn-item 123" :key="item.sid" v-if="showLi(item)" :data-key="item.sid" data-source="rowTile">
-                  <template v-if="item.type == 'ADD' || item.type == 'BATCH'">
+                <li ref="rowTileBtnItem" class="rowTileBtn-item" :key="item.sid" v-if="showLi(item)" :data-key="item.sid" data-source="rowTile">
+                  <template v-if="isFrontendComponent(item) && !item.isHide">
+                    <!-- 读卡 -->
+                    <slot name="frontendComponent" v-bind="$attrs" :curBtn="item"></slot>
+                  </template>
+                  <template v-else-if="item.type == 'ADD' || item.type == 'BATCH'">
                     <a-button
                       v-preventReClick="preventReTime"
                       v-show="visibleBtn(item) && !item.isHide"
@@ -314,7 +318,13 @@
                 <a-dropdown overlayClassName="baseSearch-fold-dropdown" v-show="!isInlineOperating">
                   <a-menu slot="overlay">
                     <template v-for="(b, j) in rowFoldBtnList">
-                      <a-menu-item v-show="visibleBtn(b)" :key="b.sid" class="dropdown-btn" v-if="showLiAdd(b)" @click="showDrawer(b, j)">
+                      <template v-if="isFrontendComponent(b)">
+                        <a-sub-menu v-if="visibleBtn(b)" :title="b.alias || b.name" :key="b.sid">
+                          <!-- 读卡 -->
+                          <slot name="frontendComponent" v-bind="$attrs" comType="submenu" :curBtn="b"></slot>
+                        </a-sub-menu>
+                      </template>
+                      <a-menu-item v-show="visibleBtn(b)" :key="b.sid" class="dropdown-btn" v-else-if="showLiAdd(b)" @click="showDrawer(b, j)">
                         {{ b.alias || b.name }}
                         <getBtnIcon :data="b" :btnObj="btnObj" />
                       </a-menu-item>
@@ -340,7 +350,13 @@
                       <a-menu-item-group :key="key" v-if="showRowFoldBtnList(value.list)">
                         <template slot="title"></template>
                         <template v-for="(b, j) in value.list">
-                          <a-menu-item v-show="visibleBtn(b)" :key="b.sid" class="dropdown-btn" v-if="b.type == 'ADD'" @click="showDrawer(b, j)">
+                          <template v-if="isFrontendComponent(b)">
+                            <a-sub-menu v-if="visibleBtn(b)" :title="b.alias || b.name" :key="b.sid">
+                              <!-- 读卡 -->
+                              <slot name="frontendComponent" v-bind="$attrs" comType="submenu" :curBtn="b"></slot>
+                            </a-sub-menu>
+                          </template>
+                          <a-menu-item v-show="visibleBtn(b)" :key="b.sid" class="dropdown-btn" v-else-if="b.type == 'ADD'" @click="showDrawer(b, j)">
                             {{ b.alias || b.name }}
                             <getBtnIcon :data="b" :btnObj="btnObj" />
                           </a-menu-item>
@@ -930,6 +946,13 @@ export default create({
       this.tabIndex = index;
       if (index !== -1) this.$emit('tabClick', this.tabConditionList[index]);
     },
+    isFrontendComponent(item){
+      if(item.type !== 'ADD') return false;
+      if(Array.isArray(item.settingObj)) {
+        return item.settingObj[0]?.trigger_type === 'FRONTEND_COMPONENT'
+      }
+      return item.settingObj?.trigger_type === 'FRONTEND_COMPONENT'
+    },
     pageResize(obj) {
       if (this.resizeFlag || this.visibleInlineOperateBtn || this.isRowEditing) return;
       let baseLeft = this.$refs['baseLeft'];

package/packages/table-filter/src/components/render-widget/enums.js

@@ -17,20 +17,43 @@ export const WidgetTypeEnums = {
 export const DatePresetValEnums = {
   CUSTOM: 'CUSTOM', // 自定义输入，特殊处理
 
-  NOW: 'NOW',
-  TODAY: 'TODAY',
-  TODAY_START: 'TODAY_START',
-  TODAY_END: 'TODAY_END',
-  TOMORROW: 'TOMORROW',
-  TOMORROW_START: 'TOMORROW_START',
-  TOMORROW_END: 'TOMORROW_END',
-  YESTERDAY: 'YESTERDAY',
-  YESTERDAY_START: 'YESTERDAY_START',
-  YESTERDAY_END: 'YESTERDAY_END',
-
-  WEEK_START: 'THIS_WEEK_START',
-  WEEK_END: 'THIS_WEEK_END',
-
-  MONTH_START: 'THIS_MONTH_START',
-  MONTH_END: 'THIS_MONTH_END'
+  NOW: 'NOW', // 当前
+  TODAY: 'TODAY', // 今天
+  TODAY_START: 'TODAY_START', // 今天初
+  TODAY_END: 'TODAY_END', // 今天未
+
+  TOMORROW: 'TOMORROW', // 明天
+  TOMORROW_START: 'TOMORROW_START', // 明天初
+  TOMORROW_END: 'TOMORROW_END', // 明天未
+
+  YESTERDAY: 'YESTERDAY', // 昨天
+  YESTERDAY_START: 'YESTERDAY_START', // 昨天初
+  YESTERDAY_END: 'YESTERDAY_END', // 昨天未
+
+  THIS_WEEK: 'THIS_WEEK', // 本周
+  WEEK_START: 'THIS_WEEK_START', // 本周初
+  WEEK_END: 'THIS_WEEK_END', // 本周未
+  NEXT_WEEK: 'NEXT_WEEK', // 下周
+  LAST_WEEK: 'LAST_WEEK', // 上周
+  PAST_WEEK: 'PAST_WEEK', // 近一周(7天)
+
+  THIS_MONTH: 'THIS_MONTH', // 本月
+  MONTH_START: 'THIS_MONTH_START', // 本月初
+  MONTH_END: 'THIS_MONTH_END', // 本月未
+  NEXT_MONTH: 'NEXT_MONTH', // 下月
+  LAST_MONTH: 'LAST_MONTH', // 上月
+  PAST_MONTH: 'PAST_MONTH', // 近一个月(30天)
+
+  THIS_QUARTER: 'THIS_QUARTER', // 本季度
+  NEXT_QUARTER: 'NEXT_QUARTER', // 上季度
+  LAST_QUARTER: 'LAST_QUARTER', // 下季度
+  QUARTER_START: 'THIS_QUARTER_START', // 季度初
+  QUARTER_END: 'THIS_QUARTER_END', // 季度未
+
+  THIS_YEAR: 'THIS_YEAR', // 今年
+  YEAR_START: 'THIS_YEAR_START', // 今年初
+  YEAR_END: 'THIS_YEAR_END', // 今年未
+  NEXT_YEAR: 'NEXT_YEAR', // 明年
+  LAST_YEAR: 'LAST_YEAR', // 去年
+  PAST_HALF_YEAR: 'PAST_HALF_YEAR' // 近半年(182天)
 };