cnhis-design-vue 2.1.120 → 2.1.122

package/package.json

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

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

@@ -2,7 +2,7 @@
   <div class="c-fabric-chart" :style="{ width: canvasWidth }">
     <fabric-canvas ref="canvasEle" v-bind="$attrs" :templateData="templateData" v-if="rendercanvas">
       <fabric-grid></fabric-grid>
-      <fabric-text-group v-if="hasXScalevalue" :templateData="templateData" v-on="$listeners"></fabric-text-group>
+      <fabric-text-group ref="otherGroups" v-if="hasXScalevalue" :templateData="templateData" v-on="$listeners"></fabric-text-group>
       <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
@@ -113,6 +113,9 @@ export default create({
     repaintLine() {
       this.$refs.lines?.repaintLine();
     },
+    updateExtracorporealCirculation() {
+      this.$refs.otherGroups?.updateExtracorporealCirculation();
+    },
     toDataURL(option) {
       return this.$refs.canvasEle.toDataURL(option);
     },

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

@@ -100,7 +100,7 @@ export default {
       this.drawBorder();
       // this.canvas.renderAll();
       if (this.templateData.bottom) {
-        this.drawExtracorporealCirculation(this.extracorporealCirculation);
+        this.drawExtracorporealCirculation();
         this.drawBottomTextDataGroup(this.templateData.bottom);
       }
     },
@@ -485,7 +485,8 @@ export default {
       });
       this.canvas.add(title);
       // textList.push(title);
-      const baseY = endY + 2; // 目前固定10像素的下边距
+      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;

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

@@ -1,16 +1,23 @@
 import cloneDeep from 'lodash/cloneDeep';
+import vexutils, { moment } from '@/utils/vexutils';
 
 export default {
   name: 'drawExtracorporealCirculation',
   data() {
     this.extracorporealCirculation = cloneDeep(this.templateData.bottom?.extracorporealCirculation);
     this.extracorporealCirculationObjs = [];
+    this.extracorporealCirculationHeight = 0;
     return {};
   },
   components: {},
   methods: {
-    drawExtracorporealCirculation(extracorporealCirculation) {
+    updateExtracorporealCirculation() {
+      this.extracorporealCirculation = cloneDeep(this.templateData.bottom?.extracorporealCirculation);
+      this.drawExtracorporealCirculation();
+    },
+    drawExtracorporealCirculation() {
       const { endX, originX, endY, markHeight, canvasWidth } = this.propItems;
+      const extracorporealCirculation = this.extracorporealCirculation;
       if (!markHeight || !extracorporealCirculation || !extracorporealCirculation.list?.length) {
         return;
       }
@@ -32,19 +39,26 @@ export default {
 
         let prevShadowBox;
         xList.forEach((x, i) => {
+          if (isInvalid(x)) return;
+
           const nextX = xList[i + 1];
           const prevX = xList[i - 1];
           if (isValid(x) || isValid(nextX)) {
             const x1 = isValid(x) ? x : originX;
-            const x2 = isValid(nextX) ? nextX : endX;
+            const x2 = isValid(nextX) ? nextX : isInvalid(nextX) ? null : endX;
             const prevX1 = isValid(prevX) ? prevX : originX;
             const shadowBox = {};
-            if (i < xList.length - 1) {
+            if (i < xList.length - 1 && x2) {
               shadowBox.params = [x1, x2, y2, [0, 2].includes(i) ? extracorporealCirculationStyle : ascendAortaStyle];
               shadowBox.shadowObjs = this.drawShadowBox(...shadowBox.params);
             }
             if (isValid(x)) {
               const key = getKey(i);
+              const currentTime = moment()
+                .clone()
+                .format('YYYY-MM-DD HH:mm');
+              const currentTimeX = this.computedX(currentTime);
+              const limitX2 = x < currentTimeX && isValid(currentTimeX) ? currentTimeX : x;
               const optLine = this.drawOptLine([x, endY, x, y2], {
                 origin: {
                   index,
@@ -53,7 +67,8 @@ export default {
                 },
                 limitX: {
                   x1: i === 0 ? prevEndX ?? originX : prevX1,
-                  x2
+                  x2: x2 || limitX2,
+                  isCurrentTime: !x2 && index === list.length - 1
                 },
                 ...([1, 2, 3].includes(i) ? { leftShadowBox: prevShadowBox } : {}),
                 ...([0, 1, 2].includes(i) ? { rightShadowBox: shadowBox } : {})
@@ -63,7 +78,7 @@ export default {
                 prevLine = optLine;
               }
               if (i === 0 && prevLine) {
-                prevLine.limitX.x2 = shadowBox.params[0];
+                prevLine.limitX.x2 = x1;
               }
             }
             prevShadowBox = shadowBox;
@@ -71,9 +86,16 @@ export default {
         });
       });
 
+      if (this.extracorporealCirculationObjs.length) {
+        this.extracorporealCirculationHeight = height;
+      }
+
       function isValid(x) {
         return x && x > 0 && x < canvasWidth;
       }
+      function isInvalid(x) {
+        return typeof x === 'undefined' || x === '';
+      }
       function getKey(i) {
         switch (i) {
           case 0:
@@ -108,6 +130,14 @@ export default {
       if (this.eventStyle.evented) {
         optLine.on('moving', () => {
           const { left, limitX } = optLine;
+          const { canvasWidth } = this.propItems;
+          const currentTime = moment()
+            .clone()
+            .format('YYYY-MM-DD HH:mm');
+          const currentTimeX = this.computedX(currentTime);
+          if (limitX.isCurrentTime && limitX.x2 < currentTimeX && currentTimeX > 0 && currentTimeX < canvasWidth) {
+            limitX.x2 = currentTimeX;
+          }
           if (left < limitX.x1) {
             optLine.setCoords().set({ x1: limitX.x1, x2: limitX.x1 });
           }

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

@@ -484,8 +484,8 @@ export default create({
   &__mask {
     position: absolute;
     z-index: 1;
-    width: 100%;
-    height: 100%;
+    width: calc(100% - 10px);
+    height: calc(100% - 10px);
     background-color: rgba(0, 0, 0, 0);
   }
   /deep/ .tag-detail-wrpper {
@@ -526,7 +526,7 @@ export default create({
         display: inline-flex;
         align-items: center;
         flex: 0 0 66px;
-        padding: 0 15px;
+        padding: 0 5px;
         background: #f7f7f7;
         .header-left {
           color: #212121;
@@ -537,8 +537,8 @@ export default create({
             font-size: 12px;
           }
           .calendar-quick {
-            height: 34px;
-            line-height: 34px;
+            height: 32px;
+            line-height: 32px;
             padding: 0 14px;
             border: 1px solid #d9d9d9;
             cursor: pointer;
@@ -590,8 +590,8 @@ export default create({
             background: #ffffff; // 12
           }
           .time-title {
-            margin-left: 16px;
-            font-size: 18px;
+            margin-left: 10px;
+            font-size: 16px;
           }
         }
         .header-right {
@@ -601,7 +601,7 @@ export default create({
           .viewshow-wrap {
             display: inline-flex;
             align-items: center;
-            height: 34px;
+            height: 32px;
             padding: 4px;
             color: #212121;
             border-radius: 6px;
@@ -611,7 +611,7 @@ export default create({
               display: inline-flex;
               align-items: center;
               height: 100%;
-              padding: 4px 14px;
+              padding: 4px 10px;
               border-radius: 4px;
               cursor: pointer;
               &.active {
@@ -626,7 +626,7 @@ export default create({
       /deep/ .full-calendar__body {
         width: 100%;
         flex: 1;
-        overflow-y: scroll;
+        overflow-y: auto;
         box-sizing: border-box;
 
         .fc-header-toolbar {
@@ -639,6 +639,14 @@ export default create({
           }
         }
 
+        .fc-col-header-cell-cushion {
+          font-weight: normal;
+          & > span {
+            padding: 10px 0;
+            display: inline-block;
+          }
+        }
+
         .fc-more-popover {
           background: #fff;
           box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
@@ -670,7 +678,6 @@ export default create({
           }
           .fc-daygrid-event {
             margin: 0;
-            margin-bottom: 7px;
           }
         }
 
@@ -691,13 +698,15 @@ export default create({
           display: flex;
           flex-direction: column;
           justify-content: center;
-          height: 71px;
-          padding-top: 4px;
+          height: 60px;
+          padding-top: 3px;
           color: #212121;
           background: #fff;
           box-sizing: border-box;
+          font-weight: normal;
           .week-day {
             font-size: 30px;
+            font-weight: 500;
           }
         }
         .fc-day-past .week-header {
@@ -714,9 +723,9 @@ export default create({
         }
 
         .month-header {
-          height: 71px;
-          line-height: 71px;
-          font-size: 16px;
+          padding: 10px 0;
+          font-size: 14px;
+          font-weight: normal;
           color: #212121;
           background: #fff;
         }
@@ -731,13 +740,12 @@ export default create({
           .fc-daygrid-day-top {
             flex-direction: row;
             .fc-daygrid-day-number {
-              width: 26px;
-              height: 26px;
-              line-height: 26px;
+              width: 18px;
+              height: 18px;
+              line-height: 20px;
               color: #000;
-              font-size: 19px;
+              font-size: 17px;
               text-align: center;
-              padding: 4px;
               overflow: hidden;
               box-sizing: content-box;
               margin: 2px 0 0 2px;

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

@@ -9,7 +9,7 @@
         </div>
         <div class="list-tag__right">
           <div v-for="(item, index) in data.list" :key="index">
-            <tag v-bind="$attrs" v-on="$listeners" :item="item" :title="item.title" :state="data.state" :avatar="item.avatar" :isAllDay="item.isAllDay"></tag>
+            <tag v-bind="$attrs" v-on="$listeners" :item="item" :title="item.title" :state="item.state" :avatar="item.avatar" :isAllDay="item.isAllDay"></tag>
           </div>
         </div>
       </li>

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

@@ -1,9 +1,9 @@
 <template>
   <div :class="['event-tag', 'event-tag-' + viewType, { 'event-tag--active': isActive }, { 'event-tag-allday': isAllDay }]" @click.stop="clickTag" ref="tagRef">
     <div :class="['event-tag__main', statusClass[state]]">
-      <span class="event-tag__main__text-time" v-if="viewType === 'list'">{{ timeRange }}</span>
-      <span class="event-tag__main__text-title">{{ title }}</span>
-      <div :class="['right-operate', { 'right-operate-hasBtn': hasBtns }]">
+      <span :class="['event-tag__main__text-time', state == 2 ? 'text--deleted' : '']" v-if="viewType === 'list'">{{ timeRange }}</span>
+      <span :class="['event-tag__main__text-title', state == 2 ? 'text--deleted' : '']">{{ title }}</span>
+      <div :class="['right-operate', { 'right-operate-hasBtn': hasBtns }]" v-if="state != 2">
         <!-- <img :src="avatar" class="avatar-icon" alt="" /> -->
         <span class="calendar-quick-btn-wrap" v-if="hasBtns">
           <span v-for="btn in btns" :key="btn.type" @click.stop="() => clickListBtn(btn)" class="calendar-quick-btn">
@@ -42,10 +42,10 @@ export default {
       statusClass: ['done', 'undone'],
       isActive: false,
       btns: [
-        {
-          name: '新增',
-          type: 'plus-square'
-        },
+        // {
+        //   name: '新增',
+        //   type: 'plus-square'
+        // },
         {
           name: '编辑',
           type: 'form'
@@ -147,7 +147,7 @@ export default {
   border-color: rgba(130, 130, 130, 0.1);
   box-shadow: 0px 0px 3px 0px rgba(130, 130, 130, 0.3);
   border-radius: 2px;
-  min-height: 20px;
+  min-height: 18px;
 
   .tag-detail-modal {
     display: none;
@@ -261,6 +261,10 @@ export default {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+      &.text--deleted {
+        text-decoration: line-through;
+        color: #7f7f7f;
+      }
     }
     &__text-time {
       flex: 0 0 150px;

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

@@ -2,7 +2,7 @@
   <div class="tag-detail-wrpper">
     <div class="header">
       <p>日程详情</p>
-      <div class="btn-wrap">
+      <div class="btn-wrap" v-if="item.state != 2">
         <span class="btn-item" v-for="btn in btns" :key="btn.type" @click.stop="() => clickListBtn(btn)">
           <a-icon v-if="btn.type === 'close'" :type="btn.type" :style="{ fontSize: '16px' }" />
           <a-tooltip v-else :title="btn.name" overlayClassName="tippy-tooltip">
@@ -50,10 +50,10 @@ export default {
       title: '',
       content: '',
       btns: [
-        {
-          name: '新增',
-          type: 'plus-square'
-        },
+        // {
+        //   name: '新增',
+        //   type: 'plus-square'
+        // },
         {
           name: '编辑',
           type: 'form'