cnhis-design-vue 3.1.23-beta.1 → 3.1.23-beta.12

package/es/components/iho-table/src/plugins/defaultConfigPlugin/index2.js

@@ -14,7 +14,7 @@ function defaultConfigPlugin() {
           showSeq: true,
           selectType: "checkbox",
           columnConfig: { resizable: true },
-          rowConfig: { height: 32, isHover: true, isCurrent: true, keyField: "theUniqueKey" },
+          rowConfig: { height: 48, isHover: true, isCurrent: true, keyField: "theUniqueKey" },
           editConfig: {
             trigger: "click",
             mode: "cell",

package/es/components/iho-table/src/plugins/index.d.ts

@@ -2,3 +2,4 @@ export * from './defaultConfigPlugin';
 export * from './lowCodeFieldAdaptorPlugin';
 export * from './rendererPlugins';
 export * from './rowGroupSettingPlugin';
+export * from './virtualTreePlugin';

package/es/components/iho-table/src/plugins/index.js

@@ -6,6 +6,10 @@ export { colorRendererPlugin } from './rendererPlugins/widgets/colorRendererPlug
 export { seqRendererPlugin } from './rendererPlugins/widgets/seqRendererPlugin.js';
 export { checkRendererPlugin } from './rendererPlugins/widgets/checkRendererPlugin.js';
 export { pictureRendererPlugin } from './rendererPlugins/widgets/pictureRendererPlugin.js';
-export { inputRendererPlugins } from './rendererPlugins/editableWidgets/inputRendererPlugins.js';
+export { inputRendererPlugin } from './rendererPlugins/editableWidgets/inputRendererPlugin.js';
 export { separateRendererPlugins } from './rendererPlugins/editableWidgets/separateRendererPlugin/index.js';
+export { selectRendererPlugin } from './rendererPlugins/editableWidgets/selectRendererPlugin/index.js';
+export { dateRendererPlugin } from './rendererPlugins/editableWidgets/dateRendererPlugin/index.js';
+export { timeRendererPlugin } from './rendererPlugins/editableWidgets/timeRendererPlugin/index.js';
 export { rowGroupSettingPlugin } from './rowGroupSettingPlugin/index2.js';
+export { virtualTreePlugin } from './virtualTreePlugin/index2.js';

package/es/components/iho-table/src/plugins/index2.js

@@ -6,6 +6,10 @@ export { colorRendererPlugin } from './rendererPlugins/widgets/colorRendererPlug
 export { seqRendererPlugin } from './rendererPlugins/widgets/seqRendererPlugin.js';
 export { checkRendererPlugin } from './rendererPlugins/widgets/checkRendererPlugin.js';
 export { pictureRendererPlugin } from './rendererPlugins/widgets/pictureRendererPlugin.js';
-export { inputRendererPlugins } from './rendererPlugins/editableWidgets/inputRendererPlugins.js';
+export { inputRendererPlugin } from './rendererPlugins/editableWidgets/inputRendererPlugin.js';
 export { separateRendererPlugins } from './rendererPlugins/editableWidgets/separateRendererPlugin/index.js';
+export { selectRendererPlugin } from './rendererPlugins/editableWidgets/selectRendererPlugin/index.js';
+export { dateRendererPlugin } from './rendererPlugins/editableWidgets/dateRendererPlugin/index.js';
+export { timeRendererPlugin } from './rendererPlugins/editableWidgets/timeRendererPlugin/index.js';
 export { rowGroupSettingPlugin } from './rowGroupSettingPlugin/index2.js';
+export { virtualTreePlugin } from './virtualTreePlugin/index2.js';

package/es/components/iho-table/src/plugins/lowCodeFieldAdaptorPlugin/index2.js

@@ -1,4 +1,5 @@
-import { pick } from 'lodash-es';
+import { pick, cloneDeep } from 'lodash-es';
+import { toRaw } from 'vue';
 import { HIGHEST_PRIORITY, WIDGET_TYPE } from '../../constants/index2.js';
 import { defineTablePlugin } from '../../hooks/useTablePlugin2.js';
 
@@ -13,21 +14,23 @@ function lowCodeFieldAdaptorPlugin() {
           field: _field.columnName,
           width: _field.colWidth,
           showOverflow: "tooltip",
-          ...pick(_field, ["title"]),
-          context: _field.context || {}
+          ...pick(_field, ["title", "treeNode"])
         };
-        settingObjAdaptor(_field.settingObj, result);
+        settingObjAdaptor(result, _field);
         return result;
       });
     }
   });
 }
-function settingObjAdaptor(settingObj, fieldItem) {
-  if (!settingObj)
+function settingObjAdaptor(fieldItem, lowCodeField) {
+  if (!lowCodeField.settingObj)
     return;
-  fieldItem.editRender = { name: settingObj.attr || "DEFAULT" };
+  fieldItem.editRender = {
+    name: lowCodeField.settingObj.attr || "DEFAULT",
+    props: cloneDeep(toRaw(lowCodeField))
+  };
   fieldItem.editRender.enabled = !Reflect.get(WIDGET_TYPE, fieldItem.editRender.name);
-  fieldItem.visible = settingObj.isHide !== "1";
+  fieldItem.visible = lowCodeField.settingObj.isHide !== "1";
 }
 
 export { lowCodeFieldAdaptorPlugin };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/dateRendererPlugin/editDate.d.ts

@@ -0,0 +1,31 @@
+import { PropType } from 'vue';
+import { IhoTableFieldItem } from '../../../../../../../../es/components/iho-table';
+import { AnyObject } from '../../../../../../../../es/shared/types';
+declare const _default: import("vue").DefineComponent<{
+    column: {
+        type: PropType<IhoTableFieldItem>;
+        required: true;
+    };
+    row: {
+        type: PropType<AnyObject>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    column: {
+        type: PropType<IhoTableFieldItem>;
+        required: true;
+    };
+    row: {
+        type: PropType<AnyObject>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/dateRendererPlugin/editDate.js

@@ -0,0 +1,205 @@
+import { defineComponent, inject, ref, computed, watch, createVNode, mergeProps } from 'vue';
+import { generateTimeFormat } from '../../../../../../../shared/utils/index2.js';
+import { isFunction, isNaN } from 'lodash-es';
+import { NDatePicker, NPopover, NInput } from 'naive-ui';
+import { InjectionIhoTableEmits } from '../../../../constants/index2.js';
+import { useCommon } from '../hooks/useCommon2.js';
+
+var EditDate = defineComponent({
+  name: "EditDate",
+  inheritAttrs: false,
+  components: {
+    NDatePicker
+  },
+  props: {
+    column: {
+      type: Object,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(props, {
+    attrs,
+    emit
+  }) {
+    const globEmit = inject(InjectionIhoTableEmits);
+    const {
+      formRef,
+      isShow
+    } = useCommon();
+    const __value = ref(props.row[props.column.field]);
+    const onConfirm = (value) => {
+      globEmit("formChange", {
+        value,
+        row: props.row,
+        column: props.column,
+        index: props.index
+      });
+    };
+    const {
+      isStartDate = false,
+      isEndDate = false
+    } = attrs;
+    const connectField = attrs.connectField || "";
+    const setDateDisabled = (cur, date) => {
+      if (isStartDate && connectField) {
+        return cur > date;
+      }
+      if (isEndDate && connectField) {
+        return cur < date;
+      }
+      return false;
+    };
+    const isDateDisabled = (ts) => {
+      if (!props.row[connectField])
+        return false;
+      return setDateDisabled(ts, isEndDate ? new Date(`${props.row[connectField].split(" ")[0]} 00:00:00`).getTime() : new Date(props.row[connectField]).getTime());
+    };
+    const isTimeDisabled = (ts) => {
+      const date = new Date(props.row[connectField]);
+      const d = new Date(ts);
+      const h = date.getHours();
+      const m = date.getMinutes();
+      const s = date.getSeconds();
+      const setDisabled = (t1, t2, d1, d2) => {
+        if (isEndDate && d1 > d2)
+          return false;
+        if (isStartDate && d1 < d2)
+          return false;
+        return setDateDisabled(t1, t2);
+      };
+      return {
+        isHourDisabled: (hour) => {
+          if (!props.row[connectField])
+            return false;
+          const d2 = new Date(`${props.row[connectField].split(" ")[0]} 00:00:00`).getTime();
+          const minute = d.getMinutes();
+          const second = d.getSeconds();
+          const d1 = ts - hour * 60 * 60 * 1e3 - minute * 60 * 1e3 - second * 1e3;
+          return setDisabled(hour, h, d1, d2);
+        },
+        isMinuteDisabled: (minute) => {
+          if (!props.row[connectField])
+            return false;
+          const d2 = new Date(`${props.row[connectField].split(" ")[0]} ${h}:00:00`).getTime();
+          const second = d.getSeconds();
+          const d1 = ts - minute * 60 * 1e3 - second * 1e3;
+          return setDisabled(minute, m, d1, d2);
+        },
+        isSecondDisabled: (second) => {
+          if (!props.row[connectField])
+            return false;
+          const d2 = new Date(`${props.row[connectField].split(" ")[0]} ${h}:${m}:00`).getTime();
+          const d1 = ts - second * 1e3;
+          return setDisabled(second, s, d1, d2);
+        }
+      };
+    };
+    function customDateDisabledDecorator(customDateDisabled) {
+      if (!isFunction(customDateDisabled))
+        return null;
+      return (ts) => {
+        return customDateDisabled(ts, props.row);
+      };
+    }
+    function getFormatDate(str) {
+      if (!str)
+        return "";
+      const d = new Date(str);
+      const month = `00${d.getMonth() + 1}`.slice(-2);
+      const day = `00${d.getDate()}`.slice(-2);
+      const valueFormat = formatConfig.value.valueFormat;
+      const format = valueFormat.includes("/") ? "/" : valueFormat.includes(".") ? "." : "-";
+      let date = `${d.getFullYear()}${format}${month}${format}${day}`;
+      const dTime = d.getTime();
+      const connectFieldTime = new Date(props.row[connectField]).getTime();
+      if (props.row[connectField] && (isStartDate && dTime > connectFieldTime || isEndDate && dTime < connectFieldTime)) {
+        date = "";
+      }
+      return date;
+    }
+    function onBlur() {
+      let date = __value.value;
+      if (isNaN(new Date(date).getTime())) {
+        if (/^\d{8}$/.test(date)) {
+          const dateNew = `${date.slice(0, 4)} ${date.slice(4, 6)} ${date.slice(6)}`;
+          date = "";
+          if (!isNaN(new Date(dateNew).getTime())) {
+            date = getFormatDate(dateNew);
+          }
+        } else {
+          date = "";
+        }
+      } else {
+        date = getFormatDate(date);
+      }
+      props.row[props.column.field] = __value.value = date || void 0;
+      onConfirm(__value.value);
+    }
+    const formatConfig = computed(() => {
+      const valueFormat = attrs.valueFormat || "yyyy-MM-dd HH:mm:ss";
+      return {
+        valueFormat,
+        format: valueFormat,
+        timePickerProps: {
+          format: generateTimeFormat(valueFormat)
+        }
+      };
+    });
+    const dateConfig = {
+      type: attrs.type || "datetime",
+      clearable: true,
+      placeholder: attrs.placeholder || "\u8BF7\u9009\u62E9",
+      ...attrs,
+      ...formatConfig.value,
+      isDateDisabled: customDateDisabledDecorator(attrs.isDateDisabled) || isDateDisabled,
+      onUpdateFormattedValue: onConfirm
+    };
+    if (dateConfig.type.includes("time")) {
+      dateConfig.isTimeDisabled = customDateDisabledDecorator(attrs.isTimeDisabled) || isTimeDisabled;
+    }
+    watch(() => props.row[props.column.field], (value) => {
+      __value.value = value;
+    });
+    return () => (attrs == null ? void 0 : attrs.isPopover) ? createVNode(NPopover, mergeProps({
+      "show": isShow.value,
+      "trigger": "click",
+      "showArrow": false,
+      "placement": "bottom-start",
+      "style": "padding: 0"
+    }, attrs, {
+      "onClickoutside": () => isShow.value = false
+    }), {
+      trigger: () => createVNode(NInput, {
+        "ref": formRef,
+        "clearable": true,
+        "value": __value.value,
+        "onUpdate:value": ($event) => __value.value = $event,
+        "onBlur": onBlur,
+        "onClick": () => isShow.value = true
+      }, null),
+      default: () => createVNode(NDatePicker, mergeProps({
+        "panel": true,
+        "show": isShow.value,
+        "onUpdate:show": ($event) => isShow.value = $event,
+        "formattedValue": props.row[props.column.field],
+        "onUpdate:formattedValue": ($event) => props.row[props.column.field] = $event
+      }, dateConfig), null)
+    }) : createVNode(NDatePicker, mergeProps({
+      "ref": formRef,
+      "show": isShow.value,
+      "onUpdate:show": ($event) => isShow.value = $event,
+      "formattedValue": props.row[props.column.field],
+      "onUpdate:formattedValue": ($event) => props.row[props.column.field] = $event
+    }, dateConfig), null);
+  }
+});
+
+export { EditDate as default };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/dateRendererPlugin/index.d.ts

@@ -0,0 +1 @@
+export declare function dateRendererPlugin(): import("../../../../../../../../es/components/iho-table").TablePlugin;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/dateRendererPlugin/index.js

@@ -0,0 +1,39 @@
+import { createVNode, mergeProps } from 'vue';
+import '../../../../../index2.js';
+import { EDITABLE_WIDGET_TYPE } from '../../../../constants/index2.js';
+import EditDate from './editDate.js';
+import { defineTablePlugin } from '../../../../hooks/useTablePlugin2.js';
+
+function dateRendererPlugin() {
+  const pluginName = "dateRendererPlugin";
+  return defineTablePlugin({
+    name: pluginName,
+    vxe(instance) {
+      instance.renderer.add(EDITABLE_WIDGET_TYPE.DATE, {
+        renderCell({
+          props
+        }, {
+          row,
+          column
+        }) {
+          return [createVNode("span", null, [row[column.field]])];
+        },
+        renderEdit({
+          props
+        }, {
+          row,
+          column,
+          $rowIndex
+        }) {
+          return [createVNode(EditDate, mergeProps((props == null ? void 0 : props.componentProps) || {}, {
+            "column": column,
+            "row": row,
+            "index": $rowIndex
+          }), null)];
+        }
+      });
+    }
+  });
+}
+
+export { dateRendererPlugin };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/hooks/useCommon.d.ts

@@ -0,0 +1,4 @@
+export declare const useCommon: () => {
+    formRef: import("vue").Ref<HTMLElement | null>;
+    isShow: import("vue").Ref<boolean>;
+};

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/hooks/useCommon.js

@@ -0,0 +1 @@
+export { useCommon } from './useCommon2.js';

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/hooks/useCommon2.js

@@ -0,0 +1,17 @@
+import { ref, onMounted } from 'vue';
+
+const useCommon = () => {
+  const formRef = ref(null);
+  const isShow = ref(false);
+  onMounted(() => {
+    var _a;
+    (_a = formRef.value) == null ? void 0 : _a.focus();
+    isShow.value = true;
+  });
+  return {
+    formRef,
+    isShow
+  };
+};
+
+export { useCommon };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/index.d.ts

@@ -1,2 +1,5 @@
-export * from './inputRendererPlugins';
+export * from './inputRendererPlugin';
 export * from './separateRendererPlugin';
+export * from './selectRendererPlugin';
+export * from './dateRendererPlugin';
+export * from './timeRendererPlugin';

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/index.js

@@ -1,2 +1,5 @@
-export { inputRendererPlugins } from './inputRendererPlugins.js';
+export { inputRendererPlugin } from './inputRendererPlugin.js';
 export { separateRendererPlugins } from './separateRendererPlugin/index.js';
+export { selectRendererPlugin } from './selectRendererPlugin/index.js';
+export { dateRendererPlugin } from './dateRendererPlugin/index.js';
+export { timeRendererPlugin } from './timeRendererPlugin/index.js';

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/inputRendererPlugin.d.ts

@@ -0,0 +1 @@
+export declare function inputRendererPlugin(): import("../../../../../../../es/components/iho-table").TablePlugin;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/{inputRendererPlugins.js → inputRendererPlugin.js}

@@ -1,15 +1,15 @@
 import { createVNode, inject } from 'vue';
 import { NInput } from 'naive-ui';
 import '../../../../index2.js';
-import { INPUT_TYPE, InjectionIhoTableEmits } from '../../../constants/index2.js';
+import { EDITABLE_WIDGET_TYPE, InjectionIhoTableEmits } from '../../../constants/index2.js';
 import { defineTablePlugin } from '../../../hooks/useTablePlugin2.js';
 
-function inputRendererPlugins() {
+function inputRendererPlugin() {
   const pluginName = "inputRendererPlugins";
   return defineTablePlugin({
     name: pluginName,
     vxe(instance) {
-      instance.renderer.add(INPUT_TYPE.INPUT, {
+      instance.renderer.add(EDITABLE_WIDGET_TYPE.INPUT, {
         renderCell(renderOpts, {
           row,
           column
@@ -41,4 +41,4 @@ function inputRendererPlugins() {
   });
 }
 
-export { inputRendererPlugins };
+export { inputRendererPlugin };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/editSelect.d.ts

@@ -0,0 +1,31 @@
+import { PropType } from 'vue';
+import { IhoTableFieldItem } from '../../../../../../../../es/components/iho-table';
+import { AnyObject } from '../../../../../../../../es/shared/types';
+declare const _default: import("vue").DefineComponent<{
+    column: {
+        type: PropType<IhoTableFieldItem>;
+        required: true;
+    };
+    row: {
+        type: PropType<AnyObject>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    column: {
+        type: PropType<IhoTableFieldItem>;
+        required: true;
+    };
+    row: {
+        type: PropType<AnyObject>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/editSelect.js

@@ -0,0 +1,60 @@
+import { defineComponent, inject, createVNode, mergeProps } from 'vue';
+import { NSelect } from 'naive-ui';
+import { InjectionIhoTableEmits } from '../../../../constants/index2.js';
+import { useCommon } from '../hooks/useCommon2.js';
+
+var EditSelect = defineComponent({
+  name: "EditSelect",
+  inheritAttrs: false,
+  components: {
+    NSelect
+  },
+  props: {
+    column: {
+      type: Object,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(props, {
+    attrs,
+    slots,
+    emit
+  }) {
+    const globEmit = inject(InjectionIhoTableEmits);
+    const {
+      formRef,
+      isShow
+    } = useCommon();
+    function onUpdateValue(value) {
+      globEmit("formChange", {
+        value,
+        row: props.row,
+        column: props.column,
+        index: props.index
+      });
+    }
+    return () => createVNode(NSelect, mergeProps({
+      "ref": formRef,
+      "show": isShow.value,
+      "onUpdate:show": ($event) => isShow.value = $event
+    }, attrs, {
+      "value": props.row[props.column.field],
+      "onUpdate:value": ($event) => props.row[props.column.field] = $event,
+      "consistentMenuWidth": false,
+      "clearable": true,
+      "filterable": true,
+      "placeholder": attrs.placeholder || "\u8BF7\u9009\u62E9",
+      "onUpdateValue": onUpdateValue
+    }), null);
+  }
+});
+
+export { EditSelect as default };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/index.d.ts

@@ -0,0 +1 @@
+export declare function selectRendererPlugin(): import("../../../../../../../../es/components/iho-table").TablePlugin;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/index.js

@@ -0,0 +1,40 @@
+import { createVNode, mergeProps } from 'vue';
+import '../../../../../index2.js';
+import { EDITABLE_WIDGET_TYPE } from '../../../../constants/index2.js';
+import EditSelect from './editSelect.js';
+import { getDefaultValue } from './selectUtils2.js';
+import { defineTablePlugin } from '../../../../hooks/useTablePlugin2.js';
+
+function selectRendererPlugin() {
+  const pluginName = "selectRendererPlugin";
+  return defineTablePlugin({
+    name: pluginName,
+    vxe(instance) {
+      instance.renderer.add(EDITABLE_WIDGET_TYPE.SELECT, {
+        renderCell({
+          props
+        }, {
+          row,
+          column
+        }) {
+          return [createVNode("span", null, [getDefaultValue(row, props)])];
+        },
+        renderEdit({
+          props
+        }, {
+          row,
+          column,
+          $rowIndex
+        }) {
+          return [createVNode(EditSelect, mergeProps((props == null ? void 0 : props.componentProps) || {}, {
+            "column": column,
+            "row": row,
+            "index": $rowIndex
+          }), null)];
+        }
+      });
+    }
+  });
+}
+
+export { selectRendererPlugin };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/selectUtils.d.ts

@@ -0,0 +1,2 @@
+import { LowCodeTableFieldItem } from '../../../../../../../../es/components/iho-table/src/types';
+export declare function getDefaultValue(row: any, item: LowCodeTableFieldItem | any): any;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/selectUtils.js

@@ -0,0 +1 @@
+export { getDefaultValue } from './selectUtils2.js';

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/selectUtils2.js

@@ -0,0 +1,20 @@
+function getDefaultValue(row, item) {
+  var _a;
+  const value = row[item.columnName];
+  if (Array.isArray(value))
+    return (_a = value.map((v) => getValue(v))) == null ? void 0 : _a.join(",");
+  return getValue(value);
+  function getValue(value2) {
+    var _a2, _b;
+    const findValue = (options) => {
+      var _a3;
+      return ((_a3 = options == null ? void 0 : options.find((v) => v.value == value2)) == null ? void 0 : _a3.label) || value2 || "";
+    };
+    if (item.formatMap) {
+      return row[(_a2 = item.formatMap) == null ? void 0 : _a2.label];
+    }
+    return findValue(((_b = item.componentProps) == null ? void 0 : _b.options) || []);
+  }
+}
+
+export { getDefaultValue };