cnhis-design-vue 3.1.24-beta.7 → 3.1.24-beta.8

package/es/components/big-table/src/components/edit-form/edit-date.js

@@ -0,0 +1,214 @@
+import { defineComponent, ref, computed, watch, createVNode, mergeProps } from 'vue';
+import { generateTimeFormat } from '../../../../../shared/utils/index.js';
+import { isFunction, isNaN } from 'lodash-es';
+import { NDatePicker, NPopover, NInput } from 'naive-ui';
+import { useCommon } from './useCommon.js';
+
+var EditDate = defineComponent({
+  name: "EditDate",
+  inheritAttrs: false,
+  components: {
+    NDatePicker
+  },
+  props: {
+    col: {
+      type: Object,
+      default: () => ({})
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    index: {
+      type: [Number, Object],
+      default: 0
+    }
+  },
+  emits: ["formChange"],
+  setup(props, {
+    attrs,
+    emit
+  }) {
+    const {
+      formRef,
+      isShow
+    } = useCommon(props, attrs);
+    const __value = ref(attrs.formattedValue);
+    const onConfirm = (value) => {
+      __value.value = value;
+      emit("formChange", {
+        value,
+        row: props.row,
+        column: props.col,
+        index: props.index
+      });
+    };
+    const {
+      isStartDate = false,
+      isEndDate = false,
+      connectField
+    } = props.col;
+    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);
+      }
+      __value.value = date || void 0;
+      emit("formChange", {
+        value: __value.value,
+        row: props.row,
+        column: props.col,
+        index: props.index
+      });
+    }
+    const formatConfig = computed(() => {
+      var _a;
+      const valueFormat = ((_a = props.col.componentProps) == null ? void 0 : _a.valueFormat) || props.col.valueFormat || "yyyy-MM-dd HH:mm:ss";
+      return {
+        valueFormat,
+        format: valueFormat,
+        timePickerProps: {
+          format: generateTimeFormat(valueFormat)
+        }
+      };
+    });
+    const config = {
+      type: props.col.type || props.col.dateType || "datetime",
+      clearable: props.col.clearable || true,
+      disabled: props.col.disabled || false,
+      ...formatConfig.value,
+      isDateDisabled: customDateDisabledDecorator(props.col.isDateDisabled) || isDateDisabled,
+      placeholder: props.col.placeholder || "\u8BF7\u9009\u62E9",
+      ...props.col.componentProps || {}
+    };
+    if (config.type.includes("time")) {
+      config.isTimeDisabled = customDateDisabledDecorator(props.col.isTimeDisabled) || isTimeDisabled;
+    }
+    watch(() => attrs.formattedValue, (value) => {
+      __value.value = value;
+    });
+    return () => {
+      var _a;
+      return ((_a = props.col.componentProps) == null ? void 0 : _a.isPopover) ? createVNode(NPopover, mergeProps({
+        "show": isShow.value,
+        "trigger": "click",
+        "showArrow": false,
+        "placement": "bottom-start",
+        "style": "padding: 0"
+      }, props.col.componentProps || {}, {
+        "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
+        }, attrs, config, {
+          "onUpdateFormattedValue": onConfirm
+        }), null)
+      }) : createVNode(NDatePicker, mergeProps({
+        "ref": formRef,
+        "show": isShow.value,
+        "onUpdate:show": ($event) => isShow.value = $event
+      }, attrs, config, {
+        "onUpdateFormattedValue": onConfirm
+      }), null);
+    };
+  }
+});
+
+export { EditDate as default };

package/es/components/big-table/src/components/edit-form/edit-input.d.ts

@@ -0,0 +1,43 @@
+declare const _default: import("vue").DefineComponent<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    col: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    row: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    index: {
+        type: (NumberConstructor | ObjectConstructor)[];
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "formChange"[], "formChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    col: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    row: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    index: {
+        type: (NumberConstructor | ObjectConstructor)[];
+        default: number;
+    };
+}>> & {
+    onFormChange?: ((...args: any[]) => any) | undefined;
+}, {
+    type: string;
+    row: Record<string, any>;
+    index: number | Record<string, any>;
+    col: Record<string, any>;
+}>;
+export default _default;

package/es/components/big-table/src/components/edit-form/edit-input.js

@@ -0,0 +1,89 @@
+import { defineComponent, ref, watch, createVNode, mergeProps } from 'vue';
+import { NInput, NInputNumber } from 'naive-ui';
+import { useCommon } from './useCommon.js';
+
+var EditInput = defineComponent({
+  name: "EditInput",
+  inheritAttrs: false,
+  components: {
+    NInput,
+    NInputNumber
+  },
+  props: {
+    type: {
+      type: String,
+      default: "input"
+    },
+    col: {
+      type: Object,
+      default: () => ({})
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    index: {
+      type: [Number, Object],
+      default: 0
+    }
+  },
+  emits: ["formChange"],
+  setup(props, {
+    attrs,
+    emit
+  }) {
+    const {
+      formRef
+    } = useCommon(props, attrs);
+    const __value = ref(attrs.value);
+    const commData = {
+      row: props.row,
+      column: props.col,
+      index: props.index
+    };
+    const onUpdateValue = (value) => {
+      emit("formChange", {
+        value,
+        ...commData
+      });
+    };
+    function onBlur() {
+      emit("formChange", {
+        value: __value.value,
+        ...commData,
+        type: "blur"
+      });
+    }
+    const config = {
+      clearable: true,
+      placeholder: props.col.placeholder || "\u8BF7\u8F93\u5165",
+      ...props.col.componentProps || {},
+      onBlur,
+      onKeyup: keyup
+    };
+    function keyup(event) {
+      if (event.key == "Enter") {
+        setTimeout(() => {
+          onBlur();
+        }, 100);
+      }
+    }
+    watch(() => attrs.value, (value) => {
+      __value.value = value;
+    });
+    return () => props.type === "input" ? createVNode(NInput, mergeProps({
+      "ref": formRef
+    }, attrs, config, {
+      "value": __value.value,
+      "onUpdate:value": ($event) => __value.value = $event
+    }), null) : createVNode(NInputNumber, mergeProps({
+      "ref": formRef
+    }, attrs, config, {
+      "value": __value.value,
+      "onUpdate:value": ($event) => __value.value = $event,
+      "onUpdateValue": onUpdateValue
+    }), null);
+  }
+});
+
+export { EditInput as default };

package/es/components/big-table/src/components/edit-form/edit-select-table.d.ts

@@ -0,0 +1,35 @@
+declare const _default: import("vue").DefineComponent<{
+    row: {
+        type: ObjectConstructor;
+        default: {};
+    };
+    col: {
+        type: ObjectConstructor;
+        default: {};
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => JSX.Element[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:value" | "clickSelectTable")[], "update:value" | "clickSelectTable", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    row: {
+        type: ObjectConstructor;
+        default: {};
+    };
+    col: {
+        type: ObjectConstructor;
+        default: {};
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+    onClickSelectTable?: ((...args: any[]) => any) | undefined;
+}, {
+    row: Record<string, any>;
+    value: string;
+    col: Record<string, any>;
+}>;
+export default _default;

package/es/components/big-table/src/components/edit-form/edit-select.d.ts

@@ -0,0 +1,35 @@
+declare const _default: import("vue").DefineComponent<{
+    col: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    row: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    index: {
+        type: (NumberConstructor | ObjectConstructor)[];
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("formChange" | "setOptions")[], "formChange" | "setOptions", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    col: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    row: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    index: {
+        type: (NumberConstructor | ObjectConstructor)[];
+        default: number;
+    };
+}>> & {
+    onFormChange?: ((...args: any[]) => any) | undefined;
+    onSetOptions?: ((...args: any[]) => any) | undefined;
+}, {
+    row: Record<string, any>;
+    index: number | Record<string, any>;
+    col: Record<string, any>;
+}>;
+export default _default;

package/es/components/big-table/src/components/edit-form/edit-select.js

@@ -0,0 +1,102 @@
+import { defineComponent, reactive, createVNode, mergeProps } from 'vue';
+import { NSelect } from 'naive-ui';
+import XEUtils from 'xe-utils';
+import 'moment';
+import { useCommon } from './useCommon.js';
+
+var EditSelect = defineComponent({
+  name: "EditSelect",
+  inheritAttrs: false,
+  components: {
+    NSelect
+  },
+  props: {
+    col: {
+      type: Object,
+      default: () => ({})
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    index: {
+      type: [Number, Object],
+      default: 0
+    }
+  },
+  emits: ["setOptions", "formChange"],
+  setup(props, {
+    attrs,
+    slots,
+    emit
+  }) {
+    const {
+      formRef,
+      isShow
+    } = useCommon(props, attrs);
+    const state = reactive({
+      options: [],
+      loading: false,
+      keyword: "",
+      config: {
+        multiple: props.col.multiple || false,
+        ...props.col.componentProps || {}
+      }
+    });
+    const setOptions = async () => {
+      if (props.col.options) {
+        state.options = JSON.parse(JSON.stringify(props.col.options));
+      } else {
+        `${props.col.columnName}_options`;
+        const obj = {
+          keyword: state.keyword,
+          row: props.row,
+          column: props.col,
+          index: props.index
+        };
+        state.options = await props.col.queryOptions(obj);
+        state.loading = false;
+        emit("setOptions", state.options);
+      }
+    };
+    let selectSearch = (value) => {
+      state.keyword = value;
+      state.loading = true;
+      setOptions();
+    };
+    selectSearch = XEUtils.debounce(selectSearch, 800);
+    const onUpdateValue = (value) => {
+      emit("formChange", {
+        value,
+        row: props.row,
+        column: props.col,
+        index: props.index
+      });
+    };
+    const init = () => {
+      if (props.col.options) {
+        setOptions();
+      } else {
+        state.config.remote = true;
+        state.config.onSearch = selectSearch;
+        selectSearch("");
+      }
+    };
+    init();
+    return () => createVNode(NSelect, mergeProps({
+      "ref": formRef,
+      "show": isShow.value,
+      "onUpdate:show": ($event) => isShow.value = $event
+    }, attrs, state.config, {
+      "options": state.options,
+      "consistentMenuWidth": false,
+      "clearable": true,
+      "filterable": true,
+      "placeholder": props.col.placeholder || "\u8BF7\u9009\u62E9",
+      "loading": state.loading,
+      "onUpdateValue": onUpdateValue
+    }), null);
+  }
+});
+
+export { EditSelect as default };

package/es/components/big-table/src/components/edit-form/edit-separate.js

@@ -0,0 +1,103 @@
+import { defineComponent, ref, watch, onDeactivated, openBlock, createBlock, unref, withCtx, createVNode, withModifiers } from 'vue';
+import script from '../../../../../shared/components/SlotRender/SlotRender.js';
+import { cloneDeep, isObject, isArray } from 'lodash-es';
+import { NPopover, NInput } from 'naive-ui';
+import { useSeparateMap } from '../../hooks/useSeparateRow.js';
+import Separate from '../separate.js';
+import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "edit-separate",
+  props: {
+    col: { type: Object, required: true },
+    row: { type: Object, required: true },
+    index: { type: Number, required: true }
+  },
+  emits: ["formChange"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const popoverRef = ref();
+    const show = ref(false);
+    function setShow(v) {
+      show.value = v;
+    }
+    watch(show, updateShow);
+    const editContent = ref();
+    const { getRowData } = useSeparateMap();
+    async function onShow(target) {
+      var _a;
+      if (!target)
+        return;
+      editContent.value = cloneDeep(target.row[props.col.field]);
+      await new Promise((resolve) => setTimeout(resolve));
+      (_a = popoverRef.value) == null ? void 0 : _a.syncPosition();
+      return;
+    }
+    async function onClose(target) {
+      if (!target)
+        return;
+      const old = target.row[props.col.field];
+      if (!isObject(editContent.value) && !isArray(editContent.value)) {
+        if (old === editContent.value)
+          return;
+      }
+      emit("formChange", {
+        value: editContent.value,
+        row: props.row,
+        column: props.col,
+        index: target.index
+      });
+    }
+    function updateShow(show2) {
+      show2 ? onShow(getRowData(props.row)) : onClose(getRowData(props.row));
+    }
+    const style = {
+      border: "1px solid #f5f5f5",
+      padding: "4px 0 4px 4px",
+      background: "white",
+      "border-radius": "4px"
+    };
+    onDeactivated(() => {
+      onClose(getRowData(props.row));
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NPopover), {
+        ref_key: "popoverRef",
+        ref: popoverRef,
+        trigger: "manual",
+        show: show.value,
+        "onUpdate:show": _cache[3] || (_cache[3] = ($event) => show.value = $event),
+        "show-arrow": false
+      }, {
+        trigger: withCtx(() => [
+          createVNode(Separate, {
+            onClick: _cache[0] || (_cache[0] = withModifiers(($event) => show.value = !show.value, ["stop"])),
+            style,
+            col: __props.col,
+            row: __props.row
+          }, null, 8, ["col", "row"])
+        ]),
+        default: withCtx(() => [
+          __props.col.separateSlot ? (openBlock(), createBlock(unref(script), {
+            key: 0,
+            renderer: __props.col.separateSlot,
+            value: editContent.value,
+            "onUpdate:value": _cache[1] || (_cache[1] = ($event) => editContent.value = $event),
+            "onUpdate:show": setShow,
+            col: __props.col,
+            row: __props.row
+          }, null, 8, ["renderer", "value", "col", "row"])) : (openBlock(), createBlock(unref(NInput), {
+            key: 1,
+            value: editContent.value,
+            "onUpdate:value": _cache[2] || (_cache[2] = ($event) => editContent.value = $event),
+            type: "textarea"
+          }, null, 8, ["value"]))
+        ]),
+        _: 1
+      }, 8, ["show"]);
+    };
+  }
+});
+var EditSeparate = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "edit-separate.vue"]]);
+
+export { EditSeparate as default };