cnhis-design-vue 2.1.52 → 2.1.54

package/package.json

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

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

@@ -98,6 +98,7 @@
         iconOpen: 'iconfont icon-a-xitongtubiaozhediejian',
         iconClose: 'iconfont icon-a-xitongtubiaotianjia'
       }"
+      :row-config="{ isCurrent: true }"
       v-bind="tableAttrs"
     >
       <template v-slot:empty>
@@ -2278,6 +2279,10 @@ export default create({
     },
     // 行双击
     rowdblclick({ row, column }) {
+      // 2022/12/12 方晶晶要求 列表相关项在底部展示时, 去除双击事件, 只触发单击事件
+      if (this.aboutPositionBtm) {
+        return false;
+      }
       if (this.isScanMultiTable || this.isInlineOperating) return false;
       if (vexutils.has(row, GROUP_TITLE_KEY)) return false;
       this.$emit('setNestTableClick', this.isNestTable);
@@ -2292,7 +2297,7 @@ export default create({
       // 嵌套表与主表click切换时需要清除上次的选中
       this.isAboutNestTable && this.$emit('resetNestLastClickTable', table);
 
-      let { row, $event = {}, rowIndex, source } = data;
+      let { row, $event = {}, rowIndex, source, column } = data;
       // 点击主表格展开行按钮 不需要触发选中行
       let { className } = $event.target || {};
       if (className && vexutils.isString(className) && className.includes('vxe-table--expand-btn')) return;
@@ -2319,7 +2324,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, {source});
+        this.$emit('handlerClickRow', row, rowIndex, {source, column});
         return;
       }
       this.visibleCheckAllWrap = false;
@@ -2368,7 +2373,8 @@ export default create({
           }
           this.updateAddCheckedRows(rowVal, true);
           // 需要选中行
-          this.$emit('handlerClickRow', rowVal, rowIndex, {source});
+          this.$emit('handlerClickRow', rowVal, rowIndex, {source, column});
+          this.setTableCurrentRow(table, row)
           return;
         }
         let newTheUniqueKeyArr = [];
@@ -2380,41 +2386,59 @@ export default create({
           rowLen = checkedRow.filter(item => !vexutils.has(item, GROUP_TITLE_KEY)).length;
         }
       }
-      table.setAllCheckboxRow(false);
+
+      // 相关项位于底部，再次点击已选中数据不取消勾选
+      let btmNotClear  = rowLen < 2 && checked
+      !btmNotClear && table.setAllCheckboxRow(false);
       // 全选后/数据大于一条 单击行只剩这一行 取消其他
       // 只有一条选中 单击行 取消选中
       let setChecked = checked;
       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, {source});
+        this.selectType != 'radio' && this.$emit('handlerClickRow', row, rowIndex, {source, column});
       } else {
         setChecked = !setChecked;
         if (!setChecked) {
-          table.clearCurrentRow();
+          !this.aboutPositionBtm && table.clearCurrentRow();
           this.selectType == 'radio' && table.clearRadioRow();
           this.isTree != 0 && this.selectType != 'radio' && this.pubCheckChange([]);
         } else {
           this.selectType == 'radio' && table.setRadioRow(row);
           this.isTree != 0 && this.selectType != 'radio' && this.pubCheckChange(newRow);
         }
-        this.selectType != 'radio' && table.setCheckboxRow([row], setChecked);
+        // 相关项位于底部，再次点击已选中数据不取消勾选
+        let isBtmCheck = this.aboutPositionBtm && !setChecked
+        if (this.selectType != 'radio' && !isBtmCheck) {
+          table.setCheckboxRow([row], setChecked);
+        }
       }
       if (this.isTree != 0) {
-        setChecked && this.$emit('handlerClickRow', row, rowIndex, {source});
+        setChecked && this.$emit('handlerClickRow', row, rowIndex, {source, column});
+        this.setTableCurrentRow(table, row)
         return;
       }
 
       this.setCheckedMehod(setChecked, row);
-      if (setChecked || rowLen > 1 || !rowLen) {
-        this.$set(this, 'checkedRows', [row]);
-      }
-      if (!setChecked && rowLen === 1) {
-        this.$set(this, 'checkedRows', []);
-      }
+
+      // 选中row
+      let curCheckedRow = table.getCheckboxRecords();
+      this.$set(this, 'checkedRows', curCheckedRow);
+
       this.setCurrentCheckedLength();
       this.lastPageIndex = this.pageVO.pageIndex;
       setChecked && this.$emit('handlerClickRow', row, rowIndex, {source});
+      this.setTableCurrentRow(table, row)
+    },
+    setBtmDbClick(row){
+      if(!row) return;
+      let id = row[this.handleRowId]
+      if(!id) return;
+      let table = this.$refs.xGrid;
+      if (!table) return;
+      let curRow = table?.getRowById(id);
+      if(!curRow) return
+      this.handlerClickRow({row: curRow})
     },
     /**
      * 单选行数据 树结构 扁平化处理
@@ -2465,6 +2489,11 @@ export default create({
         return;
       }
       if (this.currentCheckedKeys.includes(row[this.primaryKey])) {
+        // 关项位于底部，再次点击已选中数据不取消勾选，批量及行级按钮要显示 且 重新加载该数据相关项
+        if(this.aboutPositionBtm) {
+          this.$emit('preRowdblclick', row, {}, true, true)
+          return;
+        }
         this.removeCheckedRows([row]);
         return;
       }
@@ -2549,11 +2578,22 @@ export default create({
       this.pubCheckChange(records);
       return true;
     },
+    setTableCurrentRow(table, row) {
+      if(!this.aboutPositionBtm) return
+      setTimeout(() => {
+        table.setCurrentRow(row);
+      }, 30)
+    },
     selectionChange({ checked, row, records }) {
       // HACK: 防止点击多选框时，触发cell-click(行选中)事件
       // $event.stopPropagation、$event.preventDefault，点击多选框列的空白处触发多选事件，无法阻止事件冒泡触发cell-click事件
       let table = this.$refs.xGrid;
-      table.clearCurrentRow();
+
+      // 相关项在底部，只选中一条的情况下，复选框不让去掉
+      if (this.aboutPositionBtm && this.checkedRows?.length === 1 && !checked) {
+        return false;
+      }
+
       this.isTriggerSelectionChange = true;
       setTimeout(() => {
         this.isTriggerSelectionChange = false;
@@ -2562,8 +2602,10 @@ export default create({
       if (this.treeTableSelectionChange(records)) return;
 
       if (checked) {
+        this.setTableCurrentRow(table, row)
         this.addCheckedRows([row]);
       } else {
+        table.clearCurrentRow();
         this.removeCheckedRows([row], true);
       }
 
@@ -2614,7 +2656,7 @@ export default create({
       this.$emit('selectionChangeAll');
     },
     handleCancelAllCheck() {
-      this.$emit('selectionChangeAllCancel');
+      this.$emit('selectionChangeAllCancel', {type: 'cancelAll'});
     },
     setCurrentCheckedLength() {
       let table = this.$refs.xGrid;
@@ -2692,7 +2734,7 @@ export default create({
       let isCheckedByCheckboxRow = vxeTable.isCheckedByCheckboxRow(row);
       // 不冒泡 手动触发方法
       if (!isCheckedByCheckboxRow) {
-        this.handlerClickRow({row, rowIndex: index, source:'linkDetail'})
+        this.handlerClickRow({row, rowIndex: index, source:'linkDetail', column: col})
       }
       e.stopPropagation();
       vxeTable.setCurrentRow(row);

package/packages/big-table/src/utils/bigTableProps.js

@@ -73,11 +73,13 @@ const bigTableProps = {
   isMatchComponent: { type: Boolean, default: true }, // 为了兼容低代码(组件内部)与二次开发平台(vuex)
   asyncCount: Boolean,
   showSettings: { type: Object, default: () => ({}) },
-  filterDomPortal: { // 表头筛选挂载的地方
+  filterDomPortal: {
+    // 表头筛选挂载的地方
     type: String,
-    default: "body"
+    default: 'body'
   },
-  filterTopOffset: { // 表头 top 调节
+  filterTopOffset: {
+    // 表头 top 调节
     type: Number,
     default: 0
   },
@@ -85,15 +87,17 @@ const bigTableProps = {
   defaultEditAllRow: Boolean,
   editTableUid: [String, Number],
   curBatchBtnData: { type: Object, default: () => ({}) },
-  rowBtnAutoLayout:{// 行内按钮自适应布局
+  rowBtnAutoLayout: {
+    // 行内按钮自适应布局
     type: Boolean,
     default: true
   },
-  listCountParams:{ type: Object, default: () => ({}) },
-  tableProps:{
+  listCountParams: { type: Object, default: () => ({}) },
+  tableProps: {
     type: Object,
-    default:()=>({})
-  }
+    default: () => ({})
+  },
+  aboutPositionBtm: { type: Boolean, default: false }
 };
 
 export default bigTableProps;

package/packages/date-picker/index.js

@@ -4,9 +4,11 @@ import DatePicker from './src/DatePicker';
 import MonthPicker from './src/MonthPicker';
 import RangePicker from './src/RangePicker';
 import WeekPicker from './src/WeekPicker';
+import { rewriteAntd } from './src/utils';
 
 // 为组件提供 install 安装方法，供按需引入
 DatePicker.install = function(Vue) {
+  rewriteAntd();
   Vue.use(Base);
   Vue.component(DatePicker.name, DatePicker);
   Vue.component(MonthPicker.name, MonthPicker);

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);
+    };
+  }
+}