cnhis-design-vue 2.1.51 → 2.1.53

package/packages/date-picker/src/utils/index.js

@@ -0,0 +1,374 @@
+/**
+ * 重写antd的一些方法满足业务需要
+ */
+import { message } from 'ant-design-vue/es';
+import DateInput from 'ant-design-vue/es/vc-calendar/src/date/DateInput.js';
+import TimePickerHeader from 'ant-design-vue/es/vc-time-picker/Header.js';
+import KEYCODE from 'ant-design-vue/es/_util/KeyCode';
+import moment from 'moment';
+
+function checkDateVal(val, type) {
+  const regObj = {
+    YYYYMMDD: /\d{8}/,
+    YYYYMM: /\d{6}/,
+    YYYY: /\d{4}/,
+    'YYYY-MM-DD': /\d{4}-\d\d-\d\d/,
+    'YYYY-MM': /\d{4}-\d\d/
+  };
+  if (regObj[type]) {
+    return regObj[type].test(val);
+  }
+  return false;
+}
+
+function checkTimeVal(val, type) {
+  const regObj = {
+    'HH:mm:ss': /\d\d:\d\d:\d\d/,
+    'HH:mm': /\d\d:\d\d/,
+    HHmmss: /\d\d\d\d\d\d/,
+    HHmm: /\d\d\d\d/,
+    HH: /\d\d/
+  };
+  if (regObj[type]) {
+    return regObj[type].test(val);
+  }
+  return false;
+}
+
+/**
+ *
+ * @param {string} str
+ * @param {string} formatStr
+ * @returns
+ */
+function getHasTimeValue(str, formatStr) {
+  let res = str;
+  let [dateType, timeType] = formatStr.split(' ');
+  let dateTypeStr = dateType.toUpperCase().replace(/-/g, '');
+  let timeTypeStr = timeType.replace(/:/g, '');
+  if (str.length > 8) {
+    let dateValue = str.slice(0, 8);
+    let timeValue = str.slice(8).trim();
+
+    // time 兼容两种输入 HH:mm:ss | HHmmss
+    if (checkDateVal(dateValue, dateTypeStr) && (checkTimeVal(timeValue, timeType) || checkTimeVal(timeValue, timeTypeStr))) {
+      // 使用 moment 的 iso Date 格式转换值
+      dateValue = moment(dateValue, dateTypeStr).format(dateType);
+      // 使用 moment 的 iso time 格式转换值
+      timeValue = timeValue ? moment(timeValue, timeTypeStr).format(timeType) : '';
+      res = `${dateValue} ${timeValue}`;
+    }
+  }
+  return res;
+}
+
+function mendTime(timeVal, timeType, defVal) {
+  let res = timeVal;
+  return res + defVal.slice(0, timeType.length).slice(timeVal.length);
+}
+
+/**
+ * 补全时间
+ * @param {*} str
+ * @param {*} formatStr
+ * @returns
+ */
+function strFormatToDate(str, formatStr) {
+  let res = '';
+  let [dateType, timeType] = formatStr.split(' ');
+  let updateType = dateType.toUpperCase();
+  let dateTypeStr = updateType.replace(/-/g, '');
+  let timeTypeStr = timeType.replace(/:/g, '');
+  let strDateValue = '',
+    strTimeValue = '';
+  let ordinary = false;
+  if (str.length >= 10) {
+    strDateValue = str.slice(0, 10);
+  }
+  // 是否是"YYYY-MM-DD" 格式
+  if (checkDateVal(strDateValue, updateType)) {
+    strTimeValue = str.slice(10).trim();
+    ordinary = true;
+  } else {
+    // 处理“yyyymmdd”的格式
+    if (str.length >= 8) {
+      strDateValue = str.slice(0, 8);
+      strTimeValue = str.slice(8).trim();
+    }
+  }
+
+  // time 兼容两种输入 HH:mm:ss | HHmmss
+  let ff = !checkTimeVal(strTimeValue, timeType) || !checkTimeVal(strTimeValue, timeTypeStr);
+
+  // 日期格式
+  let dateFlag = ordinary || checkDateVal(strDateValue, dateTypeStr);
+
+  if (dateFlag && ff) {
+    if (strTimeValue && ff) {
+      let f = strTimeValue.includes(':') || ordinary;
+      if (f) {
+        strTimeValue = mendTime(strTimeValue, timeType, '00:00:00');
+      } else {
+        strTimeValue = mendTime(strTimeValue, timeTypeStr, '000000');
+      }
+    }
+    if (!strTimeValue) {
+      strTimeValue = '00:00:00';
+    }
+    // 使用 moment 的 iso Date 格式转换值
+    strDateValue = moment(strDateValue, dateTypeStr).format(dateType);
+    // 使用 moment 的 iso time 格式转换值
+    strTimeValue = strDateValue ? moment(strTimeValue, timeTypeStr).format(timeType) : '';
+    res = `${strDateValue} ${strTimeValue}`;
+    // 有解析错误的置空
+    if (res.includes('Invalid date')) {
+      res = '';
+    }
+  }
+
+  return res;
+}
+
+function getHasTimeValue2(str, formatStr) {
+  let res = '';
+  let [dateType, timeType] = formatStr.split(' ');
+  let updateType = dateType.toUpperCase();
+  let dateTypeStr = updateType.replace(/-/g, '');
+  let timeTypeStr = timeType.replace(/:/g, '');
+
+  if (str.length >= 8) {
+    let dateValue = str.slice(0, 8);
+    let timeValue = str.slice(8).trim();
+    let ff = !checkTimeVal(timeValue, timeType) || !checkTimeVal(timeValue, timeTypeStr);
+
+    // time 兼容两种输入 HH:mm:ss | HHmmss
+    if (checkDateVal(dateValue, dateTypeStr) && ff) {
+      if (timeValue && ff) {
+        let f = timeValue.includes(':');
+        if (f) {
+          timeValue = timeValue + '00:00:00'.slice(timeValue.length);
+        } else {
+          timeValue = timeValue + '000000'.slice(timeValue.length);
+        }
+      }
+      if (!timeValue) {
+        timeValue = '00:00:00';
+      }
+      // 使用 moment 的 iso Date 格式转换值
+      dateValue = moment(dateValue, dateTypeStr).format(dateType);
+      // 使用 moment 的 iso time 格式转换值
+      timeValue = timeValue ? moment(timeValue, timeTypeStr).format(timeType) : '';
+      res = `${dateValue} ${timeValue}`;
+    }
+  }
+  return res;
+}
+const extendedIsoRegex = /^\s*((?:[+-]\d{6}|\d{4})-(?:\d\d-\d\d|W\d\d-\d|W\d\d|\d\d\d|\d\d))(?:(T| )(\d\d(?::\d\d(?::\d\d(?:[.,]\d+)?)?)?)([+-]\d\d(?::?\d\d)?|\s*Z)?)?$/;
+
+function sleep() {
+  return new Promise(res => {
+    setTimeout(() => res(), 0);
+  });
+}
+
+const getMomentObjectIfValid = date => {
+  if (moment.isMoment(date) && date.isValid()) {
+    return date;
+  }
+  return false;
+};
+
+function customGetValue(str, formatStr) {
+  let res = '';
+  // 如果有含有“时间”, 自定义拼值
+  if (formatStr && /(HH)|(hh)/.test(formatStr)) {
+    res = strFormatToDate(str, formatStr);
+  } else {
+    let dateTypeStr = formatStr.toUpperCase().replace(/-/g, '');
+    res = checkDateVal(str, dateTypeStr) ? moment(str, dateTypeStr).format(formatStr) : str;
+  }
+  // 如是含有错误解析，重置输出
+  if (res.includes('Invalid date')) {
+    res = '';
+  }
+  return res;
+}
+
+function onInputChange11(e) {
+  const { value: str, composing } = e.target;
+  const { str: oldStr = '' } = this;
+
+  const { disabledDate, format, selectedValue } = this.$props;
+
+  // 没有内容，合法并直接退出
+  if (!str) {
+    this.__emit('change', null);
+    this.setState({
+      invalid: false,
+      str
+    });
+    return;
+  }
+
+  // 不合法直接退出
+  const parsed = moment(str, format, true);
+  if (!parsed.isValid()) {
+    this.setState({
+      invalid: true,
+      str
+    });
+    return;
+  }
+  const value = this.value.clone();
+  value
+    .year(parsed.year())
+    .month(parsed.month())
+    .date(parsed.date())
+    .hour(parsed.hour())
+    .minute(parsed.minute())
+    .second(parsed.second());
+
+  if (!value || (disabledDate && disabledDate(value))) {
+    this.setState({
+      invalid: true,
+      str
+    });
+    return;
+  }
+
+  if (selectedValue !== value || (selectedValue && value && !selectedValue.isSame(value))) {
+    this.setState({
+      invalid: false,
+      str
+    });
+    this.__emit('change', value);
+  }
+}
+
+export function rewriteAntd() {
+  /**
+   * 改写日期弹窗框的 input 元素的 onInputChange 方法，满足格式化 '20221014121517' | '20221014 12:15:17'
+   */
+  /**
+   * TODO: 输入完整的日期格式，光标会移到最后。有可能是 antd 的bug
+   */
+  if (DateInput && DateInput.methods) {
+    DateInput.methods.onInputChange11 = onInputChange11;
+    // 缓存原有的方法
+    DateInput.methods.originalOnInputChange = DateInput.methods.onInputChange;
+    // 重新 onInputChange
+    DateInput.methods.onInputChange = function(e) {
+      // console.log(e.target.selectionStart, "e.target.selectionStart");
+      const { value: str, composing } = e.target;
+      let res = str;
+      const formatStr = this.format;
+      // 如果有含有“时间”, 自定义拼值
+      if (formatStr && /(HH)|(hh)/.test(formatStr)) {
+        res = getHasTimeValue(str, formatStr);
+      } else {
+        let dateTypeStr = this.format.toUpperCase().replace(/-/g, '');
+        res = checkDateVal(str, dateTypeStr) ? moment(str, dateTypeStr).format(this.format) : str;
+      }
+      // 如是含有错误解析，重置输出
+      if (res.includes('Invalid date')) {
+        res = str;
+      }
+      // 调用原来的 onInputChange 方法
+      // 原本是传入事件对象，目前只传入需要的参数
+      this.originalOnInputChange({
+        target: { value: res, composing }
+      });
+      // this.originalOnInputChange(e);
+    };
+
+    /**
+     * 改写 onKeyDown 事件，满足按回车键，不满足的 yyyymmdd: hhmmss 格式的自动补“时间”（hhmmss）
+     * @param {*} event
+     * @returns
+     */
+    DateInput.methods.onKeyDown = async function(event) {
+      const { keyCode, target } = event;
+
+      if (keyCode === KEYCODE.ENTER) {
+        const formatStr = this.format;
+        const tValue = target.value;
+        const pProps = this.$parent.$props;
+        // 回车自动补全“时间”
+        if (tValue && formatStr && /(HH)|(hh)/.test(formatStr) && (!extendedIsoRegex.test(tValue) || checkDateVal(tValue, 'YYYY-MM-DD'))) {
+          // 是否可以自动补全时间
+          let ress = strFormatToDate(tValue, formatStr);
+          if (ress) {
+            this.onInputChange11({
+              target: { value: ress }
+            });
+            await sleep();
+          }
+        }
+        const { disabledDate, value, selectedValue } = this.$props;
+
+        const validateDate = !disabledDate || !disabledDate(value);
+        // if (selectedValue !== value || (selectedValue && value && !selectedValue.isSame(value))) {
+
+        // }
+        let def = getMomentObjectIfValid(pProps.value) || getMomentObjectIfValid(pProps.defaultValue);
+        if (validateDate) {
+          let dateTypeStr = formatStr.toUpperCase().replace(/-/g, '');
+          let f = checkDateVal(tValue, formatStr) || checkDateVal(tValue, dateTypeStr);
+          // 有输入的值，但是格式错误，提示
+          if (tValue && ((!customGetValue(tValue, formatStr) && !extendedIsoRegex.test(tValue) && /(HH)|(hh)/.test(formatStr)) || (['YYYYMMDD', 'YYYYMM', 'YYYY'].includes(dateTypeStr) && !f))) {
+            console.log(tValue, '-----------------');
+            message.error('请输入有效的格式');
+          }
+          if (!selectedValue && !def) {
+            message.error('请输入有效的格式');
+            return false;
+          }
+          if (!selectedValue && def && def.isSame(value)) {
+            this.__emit('select', null);
+            return false;
+          }
+          this.__emit('select', value.clone());
+        }
+        event.preventDefault();
+      }
+    };
+  }
+
+  /**
+   * TimePickerHeader
+   */
+  if (TimePickerHeader && TimePickerHeader.methods) {
+    // 缓存原有的方法
+    TimePickerHeader.methods.originalOnKeyDown = TimePickerHeader.methods.onKeyDown;
+
+    TimePickerHeader.methods.onKeyDown = async function(event) {
+      const { keyCode, target } = event;
+
+      if (keyCode === KEYCODE.ENTER) {
+        const timeType = this.format;
+        const tValue = target.value;
+        let timeValue = tValue;
+        let timeTypeStr = timeType.replace(/:/g, '');
+        // iso time 格式
+        if (checkTimeVal(timeValue, timeTypeStr)) {
+          timeValue = timeValue ? moment(timeValue, timeTypeStr).format(timeType) : '';
+          if (checkTimeVal(timeValue, timeType)) {
+            this.onInputChange({
+              target: { value: timeValue }
+            });
+            await sleep();
+            this.__emit('esc');
+            return;
+          }
+        } else if (checkTimeVal(timeValue, timeType)) {
+          // 满足条件按回车关闭弹窗
+          this.__emit('esc');
+        } else {
+          message.error('请输入有效的时间格式');
+        }
+      }
+
+      this.originalOnKeyDown(event);
+    };
+  }
+}

package/packages/fabric-chart/src/const/defaultVaule.js

@@ -1,59 +1,59 @@
-const data = {
-  style: {
-    evented: false,
-    selectable: false
-  },
-  rectStyle: {
-    fill: 'transparent',
-    stroke: '#999',
-    strokeWidth: 1
-  },
-  textStyle: {
-    fontFamily: '微软雅黑',
-    fontSize: 12,
-    fill: '#000',
-    lineHeight: 1
-  },
-  borderStyle: {
-    stroke: '#999',
-    strokeWidth: 1,
-    selectable: false,
-    evented: false
-  },
-  // 折线图中的点
-  pointStyle: {
-    fill: '#ffffff', // 填充色
-    stroke: '#000000', // 描边色
-    originX: 'center',
-    originY: 'center'
-  },
-  // 折线图中的线
-  lineStyle: {
-    stroke: '#000', // 描边色
-    strokeWidth: 1, // 描边宽度
-    originX: 'center',
-    originY: 'center'
-  },
-  topSpaceHeight: 10, // templateData.top.spaceHeight
-  topSpaceGridNumber: 3, // templateData.top.xScalevalue.spaceGridNumber
-  leftSpaceGridNumber: 2, // templateData.left.leftYScalevalue.spaceGridNumber
-  rightSpaceGridNumber: 2, // templateData.right.rightYScalevalue.spaceGridNumber
-  topTotal: {
-    title: '总量',
-    width: 0,
-    style: {
-      fontFamily: '微软雅黑',
-      fontSize: 12,
-      fill: '#000',
-      lineHeight: 1
-    }
-  },
-  criticalStyle: { // 危急值样式
-    stroke: 'purple', // 颜色 默认 #999
-    strokeWidth: 1, // 线宽 默认 1
-    strokeDashArray: [0, 0] // 实线设置 默认[0, 0]
-  },
-  bottomNumberLeftSpace: 10 // 底部标记的序号与标记之间的距离
-};
-
-export default data;
+const data = {
+  style: {
+    evented: false,
+    selectable: false
+  },
+  rectStyle: {
+    fill: 'transparent',
+    stroke: '#999',
+    strokeWidth: 1
+  },
+  textStyle: {
+    fontFamily: '微软雅黑',
+    fontSize: 12,
+    fill: '#000',
+    lineHeight: 1
+  },
+  borderStyle: {
+    stroke: '#999',
+    strokeWidth: 1,
+    selectable: false,
+    evented: false
+  },
+  // 折线图中的点
+  pointStyle: {
+    fill: '#ffffff', // 填充色
+    stroke: '#000000', // 描边色
+    originX: 'center',
+    originY: 'center'
+  },
+  // 折线图中的线
+  lineStyle: {
+    stroke: '#000', // 描边色
+    strokeWidth: 1, // 描边宽度
+    originX: 'center',
+    originY: 'center'
+  },
+  topSpaceHeight: 10, // templateData.top.spaceHeight
+  topSpaceGridNumber: 3, // templateData.top.xScalevalue.spaceGridNumber
+  leftSpaceGridNumber: 2, // templateData.left.leftYScalevalue.spaceGridNumber
+  rightSpaceGridNumber: 2, // templateData.right.rightYScalevalue.spaceGridNumber
+  topTotal: {
+    title: '总量',
+    width: 0,
+    style: {
+      fontFamily: '微软雅黑',
+      fontSize: 12,
+      fill: '#000',
+      lineHeight: 1
+    }
+  },
+  criticalStyle: { // 危急值样式
+    stroke: 'purple', // 颜色 默认 #999
+    strokeWidth: 1, // 线宽 默认 1
+    strokeDashArray: [0, 0] // 实线设置 默认[0, 0]
+  },
+  bottomNumberLeftSpace: 10 // 底部标记的序号与标记之间的距离
+};
+
+export default data;