cnhis-design-vue 3.1.8-beta.5 → 3.1.8-beta.8

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

@@ -1 +1,114 @@
-export { default } from './edit-date2.mjs';
+import { defineComponent, createVNode, mergeProps } from 'vue';
+import { NDatePicker } from 'naive-ui';
+
+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,
+    slots,
+    emit
+  }) {
+    const onConfirm = (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);
+        }
+      };
+    };
+    const config = {
+      type: props.col.type || "datetime",
+      clearable: props.col.clearable || true,
+      disabled: props.col.disabled || false,
+      valueFormat: props.col.valueFormat || "yyyy-MM-dd HH:mm:ss",
+      isDateDisabled: props.col.isDateDisabled || isDateDisabled,
+      placeholder: props.col.placeholder || "\u8BF7\u9009\u62E9"
+    };
+    if (config.type.includes("time")) {
+      config.isTimeDisabled = props.col.isTimeDisabled || isTimeDisabled;
+    }
+    return () => createVNode(NDatePicker, mergeProps(attrs, config, {
+      "onUpdateFormattedValue": onConfirm
+    }), null);
+  }
+});
+
+export { EditDate as default };

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

@@ -1 +1,54 @@
-export { default } from './edit-input2.mjs';
+import { defineComponent, createVNode, mergeProps } from 'vue';
+import { NInput, NInputNumber } from 'naive-ui';
+
+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,
+    slots,
+    emit
+  }) {
+    const onUpdateValue = (value) => {
+      emit("formChange", {
+        value,
+        row: props.row,
+        column: props.col,
+        index: props.index
+      });
+    };
+    const config = {
+      placeholder: props.col.placeholder || "\u8BF7\u8F93\u5165"
+    };
+    return () => props.type === "input" ? createVNode(NInput, mergeProps(attrs, config, {
+      "onUpdateValue": onUpdateValue
+    }), null) : createVNode(NInputNumber, mergeProps(attrs, config, {
+      "onUpdateValue": onUpdateValue
+    }), null);
+  }
+});
+
+export { EditInput as default };

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

@@ -1 +1,148 @@
-export { default } from './edit-select-table2.mjs';
+import { defineComponent, reactive, createVNode } from 'vue';
+import { NSelect, NPagination, NEmpty, NSpin, NSpace } from 'naive-ui';
+import CGrid from 'cnhis-design-vue/es/packages/grid';
+import vexutils from 'cnhis-design-vue/es/src/utils/vexutils';
+
+var editSelectTable = defineComponent({
+  name: "EditSelectTable",
+  inheritAttrs: false,
+  components: {
+    NSelect,
+    CGrid,
+    NPagination,
+    NEmpty,
+    NSpin,
+    NSpace
+  },
+  props: {
+    row: {
+      type: Object,
+      default: {}
+    },
+    col: {
+      type: Object,
+      default: {}
+    },
+    value: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:value", "clickSelectTable"],
+  setup(props, {
+    attrs,
+    slots,
+    emit
+  }) {
+    const state = reactive({
+      value: props.value,
+      row: JSON.parse(JSON.stringify(props.row)),
+      page: 1,
+      pageCount: 0,
+      keyword: "",
+      data: [],
+      columns: JSON.parse(JSON.stringify(props.col.tableColumn)),
+      loading: false,
+      show: true
+    });
+    const selectTableFocus = () => {
+      state.show = true;
+      state.page = 1;
+      state.keyword = "";
+      state.pageCount = 0;
+      querySelectTableList();
+    };
+    const querySelectTableList = async () => {
+      state.loading = true;
+      const obj = {
+        page: state.page,
+        keyword: state.keyword
+      };
+      const {
+        data,
+        pageCount
+      } = await props.col.querySelectTableList(obj);
+      state.data = data;
+      state.pageCount = pageCount;
+      state.loading = false;
+    };
+    let selectTableSearch = (value) => {
+      state.keyword = value;
+      querySelectTableList();
+    };
+    selectTableSearch = vexutils.debounce(selectTableSearch, 800);
+    selectTableSearch("");
+    const getSelectTableGrid = () => {
+      const config = {
+        border: "outer",
+        resizable: true,
+        autoResize: true,
+        showOverflow: true,
+        showHeaderOverflow: true,
+        highlightHoverRow: true,
+        highlightCurrentRow: true,
+        maxHeight: props.col.tableHeight || 200,
+        align: "center",
+        columns: state.columns,
+        data: state.data,
+        onCellClick
+      };
+      return createVNode(CGrid, config, {
+        empty: () => createVNode(NEmpty, {
+          "description": "\u65E0\u6570\u636E"
+        }, null)
+      });
+    };
+    const onCellClick = (data) => {
+      const {
+        row
+      } = data;
+      emit("clickSelectTable", row);
+      state.show = false;
+    };
+    const getPagination = () => {
+      const pagination = () => {
+        return createVNode(NPagination, {
+          "page": state.page,
+          "onUpdate:page": ($event) => state.page = $event,
+          "pageCount": state.pageCount,
+          "onUpdatePage": (page) => querySelectTableList()
+        }, null);
+      };
+      return createVNode(NSpace, {
+        "justify": "space-between",
+        "align": "center",
+        "style": "margin-top: 5px"
+      }, {
+        default: () => [`\u5171${state.pageCount}\u6761`, pagination()]
+      });
+    };
+    return () => [createVNode(NSelect, {
+      "class": "form-select-table",
+      "placeholder": "\u8BF7\u9009\u62E9",
+      "options": [],
+      "consistentMenuWidth": false,
+      "clearable": true,
+      "filterable": true,
+      "to": false,
+      "show": state.show,
+      "loading": state.loading,
+      "onFocus": selectTableFocus,
+      "onBlur": () => state.show = false,
+      "onSearch": selectTableSearch
+    }, {
+      action: () => state.loading ? createVNode(NSpace, {
+        "justify": "center"
+      }, {
+        default: () => createVNode(NSpin, {
+          "style": {
+            margin: "80px auto"
+          },
+          "size": "small"
+        }, null)
+      }) : [getSelectTableGrid(), state.pageCount ? getPagination() : null]
+    })];
+  }
+});
+
+export { editSelectTable as default };

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

@@ -1 +1,89 @@
-export { default } from './edit-select2.mjs';
+import { defineComponent, reactive, createVNode, mergeProps } from 'vue';
+import { NSelect } from 'naive-ui';
+import vexutils from 'cnhis-design-vue/es/src/utils/vexutils';
+
+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 state = reactive({
+      options: [],
+      loading: false,
+      keyword: "",
+      config: {}
+    });
+    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 = vexutils.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(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/packages/big-table/src/hooks/useBatchEditing.mjs

@@ -1 +1,289 @@
-export { useBatchEditing } from './useBatchEditing2.mjs';
+import { computed, watch } from 'vue';
+
+const useBatchEditing = (props, state, emit, xGrid) => {
+  let _batchFieldList = [];
+  const allSelectedLength = computed(() => {
+    var _a;
+    return (_a = state.checkedRows) == null ? void 0 : _a.length;
+  });
+  watch(() => props.isBatchEditing, (val) => {
+    if (!val || props.isNestTable)
+      return false;
+    if (state.isTree != 0 || !props.isMatchComponent)
+      return false;
+    if (!checkOperateCurrentTable()) {
+      resetBatchOperationRowStatus();
+      return false;
+    }
+    hideSelectCloumns();
+    handleClickBatchEditBtnByInline();
+  });
+  watch(() => props.isBatchSave, (val) => {
+    if (!val || props.isNestTable)
+      return false;
+    if (state.isTree != 0 || !props.isMatchComponent)
+      return false;
+    if (!checkOperateCurrentTable())
+      return false;
+    handleClickBatchSaveBtnByInline();
+  });
+  watch(() => props.isBatchCancel, (val) => {
+    if (!val || props.isNestTable)
+      return false;
+    if (state.isTree != 0 || !props.isMatchComponent)
+      return false;
+    if (!checkOperateCurrentTable())
+      return false;
+    handleClickBatchCancelBtnByInline();
+  });
+  watch(() => props.isBatchCancel, (val) => {
+    if (!val || props.isNestTable)
+      return false;
+    if (state.isTree != 0 || !props.isMatchComponent)
+      return false;
+    if (!checkOperateCurrentTable())
+      return false;
+    handleClickBatchCancelBtnByInline();
+  });
+  const checkOperateCurrentTable = () => {
+    var _a;
+    if (props.isNestTable)
+      return false;
+    let id = props.inlineEditCurrentOperateBtnId;
+    let find = (_a = props.btnList) == null ? void 0 : _a.find((item) => {
+      var _a2, _b;
+      return ((_b = (_a2 = item == null ? void 0 : item.settingObj) == null ? void 0 : _a2[0]) == null ? void 0 : _b.obj_id) === id;
+    });
+    return !!find;
+  };
+  const setRowStatus = (vxeTable, rowIndex, value) => {
+    if (!vxeTable)
+      return false;
+    let tableWrap = [
+      vxeTable.querySelector(".vxe-table--main-wrapper"),
+      vxeTable.querySelector(".vxe-table--fixed-left-wrapper"),
+      vxeTable.querySelector(".vxe-table--fixed-right-wrapper"),
+      vxeTable.querySelector(".vxe-table--body-wrapper")
+    ].filter((item) => item);
+    let rowWrap = [];
+    tableWrap.forEach((table) => {
+      let row = [...table.querySelectorAll(".vxe-body--row")];
+      rowWrap.push(row[rowIndex]);
+    });
+    rowWrap = rowWrap.filter((item) => item);
+    let height = value ? `${value}px` : value;
+    let lineHeight = value ? `${value - 10}px` : value;
+    rowWrap.forEach((wrap) => {
+      let rowItemWrap = [...wrap.querySelectorAll(".vxe-cell")];
+      rowItemWrap.push(...[...wrap.querySelectorAll(".vxe-body--column")]);
+      rowItemWrap.forEach((dom) => {
+        dom.style.setProperty("height", height, "important");
+        dom.style.lineHeight = lineHeight;
+        if (height) {
+          dom.style.backgroundColor = "#EFF5FF";
+          setTimeout(() => {
+            dom.title = "";
+          }, 1e3);
+        } else {
+          dom.style.backgroundColor = null;
+        }
+      });
+    });
+  };
+  const resetBatchOperationRowStatus = () => {
+    if (state.isTree != 0)
+      return false;
+    const vxeTable = xGrid.value;
+    let { tableData } = vxeTable.getTableData();
+    vxeTable.clearActived();
+    vxeTable.resetColumn();
+    tableData.forEach((row, index) => {
+      setRowStatus(vxeTable.$el, index, null);
+      row["__isInlineEditing"] = false;
+      row["__isDisableInlineEdit"] = false;
+    });
+  };
+  const hideSelectCloumns = () => {
+    var _a;
+    const vxeTable = xGrid.value;
+    let findSelectCloumns = (_a = vxeTable.getColumns()) == null ? void 0 : _a.find((item) => item.type === state.selectType);
+    findSelectCloumns && vxeTable.hideColumn(findSelectCloumns);
+  };
+  const checkListFormUnionSettingParamsList = () => {
+    var _a, _b, _c;
+    if (!((_b = (_a = props.listFormUnionSetting) == null ? void 0 : _a.paramsList) == null ? void 0 : _b.length)) {
+      window.$message.warning("\u53EF\u7F16\u8F91\u884C\u9700\u8981\u8BBE\u7F6E\u5173\u8054\u8868\u5355\u5B57\u6BB5\uFF0C\u8BBE\u7F6E\u540E\u8BF7\u91CD\u8BD5\uFF01");
+      emit("resetInlineEditAll", false);
+      emit("triggerSpinning", false);
+      return false;
+    }
+    let find = (_c = props.fieldListOriginal) == null ? void 0 : _c.find((item) => item.isEdit == 1);
+    if (!find) {
+      window.$message.warning("\u6CA1\u6709\u8BBE\u7F6E\u53EF\u7F16\u8F91\u5B57\u6BB5\uFF0C\u8BF7\u8054\u7CFB\u7BA1\u7406\u5458");
+      emit("resetInlineEditAll", false);
+      emit("triggerSpinning", false);
+      return false;
+    }
+    return true;
+  };
+  const resetStoreInlineOperationStatus = () => {
+    if (state.isTree != 0)
+      return false;
+    state.isSaveForm = false;
+  };
+  const getInlineOpreateRow = () => {
+    const vxeTable = xGrid.value;
+    if (props.isInlineAdding) {
+      let { tableData } = vxeTable.getTableData();
+      return {
+        row: tableData[0],
+        rowIndex: 0
+      };
+    }
+    if (state.showButtonTop == 0) {
+      let { row: row2, index: rowIndex } = state.currentClickBtnInfo || {};
+      return {
+        row: row2,
+        rowIndex
+      };
+    }
+    let row = props.clickRowData;
+    for (var i = 0; i < props.oldtableData.length; i++) {
+      let item = props.oldtableData[i];
+      if (item[props.primaryKey] === row[props.primaryKey])
+        break;
+    }
+    return {
+      row,
+      rowIndex: i
+    };
+  };
+  const setAllRowInlineStatus = (disabled = false) => {
+    const vxeTable = xGrid.value;
+    let { tableData } = vxeTable.getTableData();
+    tableData.forEach((row) => {
+      row["__isInlineEditing"] = false;
+      row["__isDisableInlineEdit"] = disabled;
+    });
+  };
+  const recordClickBtnInfo = (row, index) => {
+    state.currentClickBtnInfo = {
+      row,
+      index
+    };
+  };
+  const resetOperationRowStatus = () => {
+    if (state.isTree != 0)
+      return false;
+    const vxeTable = xGrid.value;
+    let { row, rowIndex } = getInlineOpreateRow();
+    if (!row)
+      return false;
+    if (row == null ? void 0 : row.__isInsertRow) {
+      vxeTable.remove(row);
+    }
+    vxeTable.clearActived().then(() => {
+      row && vxeTable.revertData(row);
+      setRowStatus(vxeTable.$el, rowIndex, null);
+      vxeTable.resetColumn();
+      setAllRowInlineStatus();
+      recordClickBtnInfo();
+    });
+  };
+  const handleClickCancelBtnByInline = async () => {
+    const vxeTable = xGrid.value;
+    setRowStatus(vxeTable.$el, 0, null);
+    resetStoreInlineOperationStatus();
+    await vxeTable.reloadData(state.originFormatList);
+    resetOperationRowStatus();
+    emit("handleClickBtnByInline", {
+      type: "CANCEL"
+    });
+  };
+  const getBatchOpreateRows = () => {
+    const vxeTable = xGrid.value;
+    let arr = state.checkedRows;
+    let { tableData } = vxeTable.getTableData();
+    if (props.isEditAllRow) {
+      arr = tableData;
+    }
+    arr.forEach((item, i) => {
+      let rowIndex = i;
+      if (!props.isEditAllRow) {
+        let matchIndex = tableData.findIndex((v) => v[props.primaryKey] == item[props.primaryKey]);
+        if (matchIndex > -1) {
+          rowIndex = matchIndex;
+        }
+      }
+      setRowStatus(vxeTable.$el, rowIndex, "66");
+      item["__isInlineEditing"] = true;
+    });
+  };
+  const handleClickBatchEditBtnByInline = async () => {
+    if (!checkListFormUnionSettingParamsList()) {
+      handleClickCancelBtnByInline();
+      return false;
+    }
+    let arr = state.checkedRows;
+    const vxeTable = xGrid.value;
+    let { tableData } = vxeTable.getTableData();
+    if (props.isEditAllRow) {
+      arr = tableData;
+    }
+    await vxeTable.loadData(arr);
+    await props.resetInlineBatchEdit();
+    setAllRowInlineStatus(true);
+    getBatchOpreateRows();
+  };
+  const handleEditFormLength = () => {
+    let fieldLength = _batchFieldList.length;
+    if (!fieldLength)
+      return;
+    if (props.isInlineAdding) {
+      return fieldLength;
+    }
+    let rowLen = allSelectedLength.value;
+    const vxeTable = xGrid.value;
+    let { tableData } = vxeTable.getTableData();
+    if (props.isEditAllRow) {
+      rowLen = tableData.length;
+    }
+    if (!rowLen)
+      return;
+    return fieldLength * rowLen;
+  };
+  const handleClickBatchSaveBtnByInline = () => {
+    if (props.spinning)
+      return false;
+    emit("resetBatchEditDoneStatus");
+    let formDom = document.querySelectorAll(".js-inlineEditForm");
+    let sliceLen = handleEditFormLength();
+    formDom = [...formDom].slice(0, sliceLen);
+    formDom.forEach((item) => {
+      item.__vue__.handleSubmitForm();
+    });
+  };
+  const handleClickBatchCancelBtnByInline = async () => {
+    state.isSaveForm = false;
+    emit("resetInlineEditAll", false);
+    const vxeTable = xGrid.value;
+    await vxeTable.reloadData(state.originFormatList);
+    resetBatchOperationRowStatus();
+  };
+  return {
+    allSelectedLength,
+    checkOperateCurrentTable,
+    setRowStatus,
+    resetBatchOperationRowStatus,
+    checkListFormUnionSettingParamsList,
+    handleClickCancelBtnByInline,
+    setAllRowInlineStatus,
+    hideSelectCloumns,
+    handleEditFormLength,
+    getInlineOpreateRow,
+    resetOperationRowStatus,
+    recordClickBtnInfo
+  };
+};
+
+export { useBatchEditing };