cnhis-design-vue 2.1.150 → 2.1.151

package/package.json

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

package/packages/scale-view/directive/drag-move.js

@@ -0,0 +1,132 @@
+const findparent = (el, name) => {
+  let parent = el.parentElement;
+  let pcname = parent.className || '';
+  while (parent && !pcname.includes(name)) {
+    parent = parent.parentElement;
+    if (parent) pcname = parent.className || '';
+  }
+  return parent;
+};
+
+const initSetDom = (dragDom, pDom) => {
+  const screenWidth = pDom?.clientWidth || document.body.clientWidth; // body当前宽度
+
+  const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
+
+  const iL = screenWidth - dragDomWidth;
+
+  dragDom.style.cssText += `position: absolute;left:${iL}px;top:0 px;right:unset;`;
+};
+
+// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+const sty = (function() {
+  if (document.body.currentStyle) {
+    // 在ie下兼容写法
+    return (dom, attr) => dom.currentStyle[attr];
+  }
+  return (dom, attr) => getComputedStyle(dom, null)[attr];
+})();
+
+const maskStyle = 'position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 2999;width: 100%;height: 100%;';
+
+const mouseMove = (e, config) => {
+  const { dragDom, minDragDomLeft, maxDragDomLeft, disX, disY, minDragDomTop, maxDragDomTop, styL, styT } = config || {};
+  // 通过事件委托，计算移动的距离
+  let left = e.clientX - disX;
+  let top = e.clientY - disY;
+  // 边界处理
+  if (-left > minDragDomLeft) {
+    left = -minDragDomLeft;
+  } else if (left > maxDragDomLeft) {
+    left = maxDragDomLeft;
+  }
+
+  if (-top > minDragDomTop) {
+    top = -minDragDomTop;
+  } else if (top > maxDragDomTop) {
+    top = maxDragDomTop;
+  }
+
+  // 移动当前元素
+  dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
+};
+
+const mouseUp = () => {
+  const iframeFix = document.getElementsByClassName('scale-countdown-iframeFix')[0];
+  iframeFix && document.body.removeChild(iframeFix);
+  document.onmousemove = null;
+  document.onmouseup = null;
+};
+
+const dragMethod = obj => {
+  const { el, containerName, targetName, contentName } = obj;
+  const pDom = findparent(el, containerName);
+
+  const dialogHeaderEl = pDom.querySelector(`.${targetName}`);
+  const dragDom = pDom.querySelector(`.${contentName}`);
+  // 初始化定位
+  initSetDom(dragDom, pDom);
+
+  dialogHeaderEl.style.cssText += ';cursor:move;';
+
+  dialogHeaderEl.onmousedown = e => {
+    const dialogMask = document.createElement('div');
+    dialogMask.className = 'scale-countdown-iframeFix';
+    dialogMask.setAttribute('style', maskStyle);
+    document.body.appendChild(dialogMask);
+
+    // 鼠标按下，计算当前元素距离可视区的距离
+    const disX = e.clientX - dialogHeaderEl.offsetLeft;
+    const disY = e.clientY - dialogHeaderEl.offsetTop;
+    const screenWidth = pDom?.clientWidth || document.body.clientWidth; // body当前宽度
+    const screenHeight = pDom?.clientHeight || document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
+
+    const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
+    const dragDomheight = dragDom.offsetHeight; // 对话框高度
+
+    const minDragDomLeft = dragDom.offsetLeft;
+    const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
+
+    const minDragDomTop = dragDom.offsetTop;
+    const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
+
+    // 获取到的值带px 正则匹配替换
+    let styL = sty(dragDom, 'left');
+    // 为兼容ie
+    if (styL === 'auto') styL = '0px';
+    let styT = sty(dragDom, 'top');
+
+    // console.log(styL)
+    // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+    if (styL.includes('%')) {
+      styL = +screenWidth * (+styL.replace(/%/g, '') / 100);
+      styT = +screenHeight * (+styT.replace(/%/g, '') / 100);
+    } else {
+      styL = +styL.replace(/px/g, '');
+      styT = +styT.replace(/px/g, '');
+    }
+
+    document.onmousemove = e => mouseMove(e, { dragDom, minDragDomLeft, maxDragDomLeft, disX, disY, minDragDomTop, maxDragDomTop, styL, styT });
+
+    document.onmouseup = mouseUp;
+    return false;
+  };
+};
+
+// 拖拽的指令
+export default {
+  bind: function(el, binding, vnode) {
+    // 自定义属性，判断是否可拖拽
+    if (!binding.value) return;
+    const { target, container, content, isDrag } = binding.value || {};
+    if (!isDrag) return;
+
+    const containerName = container || 'r-scale-v3'; // 容器dom
+    const targetName = target || 'evaluateCountdown-wrap'; // 触发dom
+    const contentName = content || 'c-evaluateCountdown-v2'; // 移动dom
+
+    setTimeout(() => {
+      dragMethod({ el, containerName, targetName, contentName });
+    }, 50);
+  }
+};

package/packages/scale-view/evaluateCountdown.vue

@@ -1,21 +1,29 @@
 <template>
-  <div class="evaluateCountdown" :class="{ 'evaluateCountdown-hasTime': showEvaluateCountdown }">
-    <div v-if="showEvaluateCountdown" class="countdown" :class="{ 'countdown-red': countdownRed }">
-      <span>{{ countdownStr }}</span>
-      <svg-icon icon-class="zhongtai-zujianliebiao-gongzuoshijian"></svg-icon>
-    </div>
-    <div class="answered-wrap">
-      答题情况： {{ setAnswered }}/<span>{{ totalLen }}</span>
+  <div
+    class="evaluateCountdown c-evaluateCountdown-v2"
+    v-drag-move="dragSetting" 
+    :class="{ 'evaluateCountdown-hasTime': showEvaluateCountdown }"
+  >
+    <div class="evaluateCountdown-wrap">
+      <div v-if="showEvaluateCountdown" class="countdown" :class="{ 'countdown-red': countdownRed }">
+        <span>{{ countdownStr }}</span>
+        <svg-icon icon-class="zhongtai-zujianliebiao-gongzuoshijian"></svg-icon>
+      </div>
+      <div class="answered-wrap">
+        答题情况： {{ setAnswered }}/<span>{{ totalLen }}</span>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import evaluate from "./mixin/evaluate";
 import moment from 'moment';
+import dragMove from './directive/drag-move'
 export default {
   name: "evaluateCountdown",
   mixins: [evaluate],
   components: {},
+  directives: { dragMove },
   props: [
     "formArray",
     "evaluateResultConfig",
@@ -27,7 +35,8 @@ export default {
   data() {
     return {
       source: "countdown",
-      setAnswered: 0
+      setAnswered: 0,
+      dragSetting: { isDrag: true }
     };
   },
 
@@ -103,30 +112,23 @@ export default {
   background: #f2f2f4;
   border-radius: 8px;
   color: #212121;
-  z-index: 1;
+  z-index: 2;
   text-align: center;
+  user-select: none;
   &.evaluateCountdown-hasTime {
 
-    &:hover {
-      padding: 8px 32px;
-      background: #f1f1f4;
-      .countdown {
-        line-height: 40px;
-        font-size: 26px;
-        span {
-          line-height: unset;
-        }
-        svg {
-          display: none;
-        }
+    padding: 8px 32px;
+    background: #f1f1f4;
+    .countdown {
+      line-height: 40px;
+      font-size: 26px;
+      span {
+        line-height: unset;
       }
-      .answered-wrap {
-        display: block;
+      svg {
+        display: none;
       }
     }
-    .answered-wrap {
-      display: none;
-    }
   }
   .countdown {
     display: flex;

package/packages/scale-view/evaluatePage.vue

@@ -39,12 +39,13 @@
   </div>
 </template>
 <script>
+import { Button } from 'ant-design-vue'
 import evaluate from "./mixin/evaluate";
 import moment from 'moment';
 export default {
   name: "evaluatePage",
   mixins: [evaluate],
-  components: {},
+  components: {[Button.name]: Button,},
   props: ["formArray", "evaluateResultConfig", "evaluateResultSetting", "isFinished", "maxScore"],
   data() {
     return {

package/packages/scale-view/scaleView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="r-scale">
+  <div class="r-scale r-scale-v3">
     <slot v-if="spinning">
       <a-spin :indicator="indicator" tip="加载中..." />
     </slot>

package/src/utils/time-domain.js

@@ -89,6 +89,27 @@ const timeDomain = {
       .endOf('week');
     return [start, end];
   },
+  PAST_WEEK() {
+    const start = moment()
+      .add(-7, 'days')
+      .startOf('days');
+    const end = moment().endOf('days');
+    return [start, end];
+  },
+  PAST_MONTH() {
+    const start = moment()
+      .add(-30, 'days')
+      .startOf('days');
+    const end = moment().endOf('days');
+    return [start, end];
+  },
+  PAST_HALF_YEAR() {
+    const start = moment()
+      .add(-182, 'days')
+      .startOf('days');
+    const end = moment().endOf('days');
+    return [start, end];
+  },
 
   THIS_QUARTER() {
     const start = moment().startOf('quarter');