cnhis-design-vue 0.3.3-beta → 0.3.6-beta

package/packages/big-table/src/hooks/useBatchEditing.ts

@@ -0,0 +1,574 @@
+import { computed, ref, reactive, watch, onMounted } from 'vue'
+import axios from 'axios'
+
+export const useBatchEditing = (props: any, state: any, emit: any, xGrid: any) => {
+
+  let _batchFieldList: any[] = []
+  let _fieldLength: number = 0
+  
+  const allSelectedLength = computed(() => {
+    return state.checkedRows?.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();
+    }
+  )
+
+  /**
+   * 校验提交
+   */
+  watch(
+    () => props.batchEditDoneNumber,
+    obj => {
+      if (!obj || !Object.keys(obj).length || props.isNestTable) return;
+      if (state.isTree != 0 || !props.isMatchComponent) return false;
+      if (!checkOperateCurrentTable()) return false;
+      submitBatchInlineForm(obj);
+    }
+  )
+
+  const checkOperateCurrentTable = () => {
+    if (props.isNestTable) return false;
+    let id = props.inlineEditCurrentOperateBtnId;
+    let find = props.btnList?.find((item: any) => {
+      return item?.settingObj?.[0]?.obj_id === id;
+    });
+    return !!find;
+  };
+
+  const setRowStatus = (vxeTable: any, rowIndex: number, value: any) => {
+    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: any[] = [];
+    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 = '';
+          }, 1000);
+        } else {
+          dom.style.backgroundColor = null;
+        }
+      });
+    });
+  }
+
+  /**
+     * 重置样式
+     * @param {*} isCancel 保存之后
+     * @returns
+     */
+  const resetBatchOperationRowStatus = () => {
+    if (state.isTree != 0) return false;
+
+    const vxeTable = xGrid.value;
+    let { tableData } = vxeTable.getTableData();
+    vxeTable.clearActived();
+    vxeTable.resetColumn();
+    tableData.forEach((row: any, index: number) => {
+      // row && vxeTable.revertData(row);
+      setRowStatus(vxeTable.$el, index, null);
+      row['__isInlineEditing'] = false;
+      row['__isDisableInlineEdit'] = false;
+    });
+  }
+
+  const hideSelectCloumns = () => {
+    const vxeTable =  xGrid.value
+    let findSelectCloumns = vxeTable.getColumns()?.find((item: any) => item.type === state.selectType);
+    findSelectCloumns && vxeTable.hideColumn(findSelectCloumns);
+  }
+
+  const checkListFormUnionSettingParamsList = () => {
+    if (!props.listFormUnionSetting?.paramsList?.length) {
+      (window as any).$message.warning('可编辑行需要设置关联表单字段，设置后请重试！');
+      emit('resetInlineEditAll', false);
+      emit('triggerSpinning', false);
+      return false;
+    }
+    let find = props.fieldListOriginal?.find((item: any) => item.isEdit == 1);
+    if (!find) {
+      (window as any).$message.warning('没有设置可编辑字段，请联系管理员');
+      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, index: rowIndex } = state.currentClickBtnInfo || {};
+      return {
+        row,
+        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: boolean = false) => {
+    const vxeTable =  xGrid.value
+    let { tableData } = vxeTable.getTableData();
+    tableData.forEach((row : any) => {
+      row['__isInlineEditing'] = false
+      row['__isDisableInlineEdit'] = disabled
+    });
+  }
+
+  const recordClickBtnInfo = (row?: any, index?: number) => {
+    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?.__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'
+    });
+  }
+
+  /**
+     * 设置row 为编辑样式
+     */
+   const getBatchOpreateRows = () => {
+    const vxeTable =  xGrid.value
+    let arr = state.checkedRows;
+    let { tableData } = vxeTable.getTableData();
+    // 全部行编辑
+    if (props.isEditAllRow) {
+      arr = tableData;
+    }
+    // 重置状态时使用
+
+    arr.forEach((item: any, i: number) => {
+      let rowIndex = i;
+      if (!props.isEditAllRow) {
+        let matchIndex = tableData.findIndex((v: any) => 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();
+  }
+
+  /**
+     * 处理需要submit的form个数
+     */
+  const handleEditFormLength = () => {
+    let fieldLength = _batchFieldList.length;
+    if (!fieldLength) return;
+    // 新增
+    if (props.isInlineAdding) {
+      return fieldLength;
+    }
+    let rowLen: number | any = 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: any = document.querySelectorAll('.js-inlineEditForm');
+    let sliceLen = handleEditFormLength();
+    // HACK: vxeTable行内编辑时复制的DOM节点，无需触发提交
+    formDom = [...formDom].slice(0, sliceLen);
+    formDom.forEach((item: any) => {
+      item.__vue__.handleSubmitForm();
+    });
+  }
+
+  /**
+   * 批量取消
+   */
+  const handleClickBatchCancelBtnByInline = async () => {
+    state.isSaveForm = false;
+    emit('resetInlineEditAll', false);
+    const vxeTable =  xGrid.value
+    await vxeTable.reloadData(state.originFormatList);
+    resetBatchOperationRowStatus();
+  }
+
+  /**
+     * 判断每个表单是否校验过
+     * @param {*} obj
+     * @returns
+     */
+  const handleIsBatchDoneAll = (obj: any) => {
+    let fieldLength = _fieldLength;
+    if (!fieldLength) return false;
+    for (let key in obj) {
+      if (obj[key] < fieldLength) return false;
+    }
+    return true;
+  }
+
+  /**
+     * 处理form
+     * @param {*} batchFormData
+     * @returns
+     */
+  const handleSubmitParams = (batchFormData: any) => {
+    let arr = [];
+    for (let key in batchFormData) {
+      // v[this.primaryKey] 可能为数字
+      // key 为字符串 用全等匹配不到 改为 == 
+      let matchItem = props.oldtableData.find((v: any) => v[props.primaryKey] == key);
+      let obj = batchFormData[key];
+      if (matchItem) {
+        obj = Object.assign({}, obj, {
+          [props.primaryKey]: matchItem[props.primaryKey]
+        });
+      }
+      arr.push(obj);
+    }
+    return arr;
+  }
+
+  const savaForm = (formId: any, params: any) => {
+    let url = `/form/editRows/update/${formId}`;
+    return axios({
+      method: 'post',
+      url,
+      headers: { 'Content-Type': 'application/json; charset=utf-8' },
+      data: params
+    });
+  }
+
+  /**
+     * 批量提交form
+     * @param {*} obj
+     * @returns
+    */
+  const submitBatchInlineForm = (obj: any) => {
+    if (props.batchError) {
+      props.resetBatchEditRowStatus();
+      emit('triggerSpinning', false);
+      return;
+    }
+    let isBatchDoneAll = handleIsBatchDoneAll(obj);
+    if (!isBatchDoneAll) {
+      props.resetBatchEditRowStatus();
+      emit('triggerSpinning', false);
+      return;
+    }
+    let { formId } = props.listFormUnionSetting;
+    let params = handleSubmitParams(props.batchFormData);
+    if (!formId || !params) {
+      props.resetBatchEditRowStatus();
+      emit('triggerSpinning', false);
+      return;
+    }
+    if (state.isSaveForm) return false;
+    state.isSaveForm = true;
+    savaForm(formId, params)
+      .then(async ({ data }) => {
+        emit('triggerSpinning', false);
+        if (data.result !== 'SUCCESS') {
+          state.isSaveForm = false;
+          (window as any).$message.error(data.resultMsg);
+          props.resetBatchEditRowStatus();
+          return false;
+        }
+
+        await props.resetInlineBatchEdit();
+        handleClickBatchCancelBtnByInline();
+        emit('pubTableReload');
+      })
+      .finally(() => {
+        state.isSaveForm = false;
+        emit('triggerSpinning', false);
+        props.resetBatchEditRowStatus();
+      });
+  }
+
+  const formatFieldItem = (fieldItem: any) => {
+    return Object.assign({}, fieldItem, {
+      elem_width: '12',
+      is_show: '1'
+    });
+  }
+
+  const handleColumnMap = (batchFieldList: any, paramsList: any) => {
+    let { fieldList = [] } = props.columnConfig;
+    let editColumnMap: any = {};
+    fieldList.forEach((item: any) => {
+      if (item.isShow != 1 || item.isEdit != 1) return;
+      let matchItem = paramsList.find((v: any) => v.tableField === item.columnName);
+      if (!matchItem) return;
+      let fieldItem = batchFieldList?.find((field: any) => {
+        return field.val_key === matchItem.tableField;
+      });
+      if (!fieldItem) return;
+      fieldItem = formatFieldItem(fieldItem);
+      let obj = {
+        columnName: item.columnName,
+        matchItem,
+        fieldItem
+      };
+      editColumnMap[item.columnName] = obj;
+    });
+    return editColumnMap;
+  }
+
+  const handleFieldLength = () => {
+    let { fieldList = [] } = props.columnConfig;
+    let fieldLength = 0;
+    fieldList.forEach((item: any) => {
+      // table中有column隐藏
+      if (item.isShow == 1 && item.isEdit == 1) {
+        let matchItem = _batchFieldList.find(v => v.val_key === item.columnName);
+        if (matchItem) {
+          fieldLength++;
+        }
+      }
+    });
+    return fieldLength;
+  }
+
+  const handleRequestedUniqueKey = (id: any) => {
+    return axios
+      .get('tableList/getPrimaryKey', { params: { tableId: id } })
+      .then(({ data }) => {
+        let result;
+        if (data.result == 'SUCCESS') {
+          const { map = {} } = data;
+          result = map.primaryKey || undefined;
+        } else {
+          result = undefined;
+        }
+        state.cacheUniqueKey[id] = { value: result, status: true };
+        return result;
+      })
+      .catch(err => {
+        console.log(err);
+        state.cacheUniqueKey[id] = { value: undefined, status: true };
+        return undefined;
+      });
+  }
+
+  /**
+     * 获取编辑的field
+     */
+  const handleFieldTheUniqueKey = () => {
+    return new Promise<void>((resolve, reject) => {
+      let { paramsList = [] } = props.listFormUnionSetting || {};
+      let { fieldList = [] } = props.inlineEditFormConfig;
+      fieldList = JSON.parse(JSON.stringify(fieldList));
+      _batchFieldList = [];
+      let batchFieldList = fieldList
+        .map((item: any) => {
+          let matchItem = paramsList.find((v: any) => item.val_key === v.tableField);
+          if (matchItem) {
+            let NOWORDBOOK = item.wordbook && (item?.wordbook?.type || '') != 'WORDBOOK';
+            let id = item.wordbook?.id;
+            if (NOWORDBOOK && id && !state.theUniqueKeyListObj[id]) {
+              state.theUniqueKeyListObj[id] = id;
+            }
+            return item;
+          }
+          return null;
+        })
+        .filter(Boolean);
+      if (!batchFieldList || !batchFieldList.length) return resolve();
+      // 缓存行编辑需要的column配置
+      state.editColumnMap = handleColumnMap(batchFieldList, paramsList);
+      _batchFieldList = batchFieldList;
+      _fieldLength = handleFieldLength();
+      let keyList = Object.keys(state.theUniqueKeyListObj || {});
+      if (!keyList.length) return resolve();
+      keyList.forEach(async item => {
+        await handleRequestedUniqueKey(item);
+      });
+      resolve();
+    });
+  }
+
+  /**
+     * 避免每次点击都查询
+     * 初始化查一次 行编辑 表单search用
+     */
+  // 避免每次点击都查询
+  const handleFormTheUniqueKey = async () => {
+    emit('initInlineEditFormConfig', { listFormUnionSetting: props.listFormUnionSetting, inlineEditFormConfig: props.inlineEditFormConfig });
+    let hasEditRow = props.btnList?.find((item: any) => {
+      let trigger_type = item.settingObj && item.settingObj[0]?.trigger_type;
+      if (item.isShow == 1 && trigger_type == 'EDIT_ROW') return true;
+      return false;
+    });
+    if (!hasEditRow) return;
+    await handleFieldTheUniqueKey();
+  }
+
+  return {
+    allSelectedLength,
+    checkOperateCurrentTable,
+    setRowStatus,
+    resetBatchOperationRowStatus,
+    checkListFormUnionSettingParamsList,
+    handleClickCancelBtnByInline,
+    setAllRowInlineStatus,
+    hideSelectCloumns,
+    handleEditFormLength,
+    getInlineOpreateRow,
+    resetOperationRowStatus,
+    recordClickBtnInfo
+  };
+}