cnhis-design-vue 3.1.1 → 3.1.4-beta.1

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

@@ -1,96 +0,0 @@
-<script lang="tsx">
-import { defineComponent, ref, reactive } from 'vue'
-import { NSelect } from 'naive-ui'
-import vexutils from '@/utils/vexutils.js'
-
-export default 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: [] as any,
-      loading: false,
-      keyword: '',
-      config: {} as any
-    })
-
-    const setOptions = async () => {
-      if (props.col.options) {
-        state.options = JSON.parse(JSON.stringify(props.col.options))
-      } else {
-        // 此处需要缓存第一次请求到的options,不需要每次都请求,
-        // 此处的row参数应当是selectTable的row
-        const optionsName = `${props.col.columnName}_options`
-        const obj = {
-          keyword: state.keyword,
-          row: props.row, 
-          column: props.col, 
-          index: props.index
-        }
-        // state.options = props.row[optionsName] || await props.col.queryOptions(obj)
-        state.options = await props.col.queryOptions(obj)
-        state.loading = false
-        // if (!props.row[optionsName]) {
-          emit('setOptions', state.options)
-        // }
-      }
-    }
-    
-    let selectSearch = (value: string) => {
-      state.keyword = value
-      state.loading = true
-      setOptions()
-    }
-    selectSearch = vexutils.debounce(selectSearch, 800)
-    const onUpdateValue = (value: any[] | string | number | null) => {
-      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 () => [
-      <NSelect
-        {...attrs} 
-        {...state.config}
-        options={state.options}
-        consistentMenuWidth={false}
-        clearable
-        filterable
-        to={false}
-        placeholder="请选择"
-        loading={state.loading}
-        onUpdateValue={onUpdateValue}
-      />
-    ]
-  }
-})
-</script>
-<style lang="less" scoped></style>

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

@@ -1,574 +0,0 @@
-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
-  };
-}