cnhis-design-vue 3.0.1 → 3.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cnhis-design-vue",
   "private": false,
-  "version": "3.0.1",
+  "version": "3.0.2",
   "main": "es/index.js",
   "module": "es/index.js",
   "scripts": {
@@ -15,17 +15,13 @@
   },
   "peerDependencies": {
     "@vicons/ionicons5": "^0.12.0",
-    "axios": "^0.26.1",
-    "naive-ui": "^2.28.1",
-    "qs": "^6.10.3"
+    "naive-ui": "^2.28.1"
   },
   "dependencies": {
     "@vicons/ionicons5": "^0.12.0",
-    "axios": "^0.26.1",
     "crypto-js": "^4.1.1",
     "moment": "^2.29.1",
     "naive-ui": "^2.28.1",
-    "qs": "^6.10.3",
     "vue": "^3.2.25",
     "vue-router": "^4.0.13",
     "vuedraggable": "^4.1.0",

package/packages/big-table/src/BigTable.vue

@@ -175,8 +175,7 @@ import { useEdit } from './hooks/useEdit';
 import { SettingsSharp, SyncOutline, CopyOutline, CaretDown, CaretForward } from "@vicons/ionicons5";
 import NoData from "./components/NoData.vue";
 import TextOverTooltip from "./components/TextOverTooltip.vue";
-// import SvgIcon from '@/component/svg/index.vue';
-import SvgIcon from './components/svg/index.vue'
+import SvgIcon from '@/component/svg/index.vue';
 import EditSelectTable from './components/edit-form/edit-select-table.vue'
 import EditInput from './components/edit-form/edit-input.vue'
 import EditSelect from './components/edit-form/edit-select.vue'
@@ -272,7 +271,7 @@ const {
   recordClickBtnInfo,
   getInlineOpreateRow
 }: any = useBatchEditing(props, state, emit, xGrid);
-const { initEditTable, activeMethod, deleteRow, onClickSelectTable } = useEdit(props, state, emit, xGrid)
+const { initEditTable, activeMethod, deleteRow, onClickSelectTable, onUpdateInput, getDefaultValue } = useEdit(props, state, emit, xGrid)
 
 const { 
   isAboutNestTable,
@@ -378,8 +377,7 @@ const unBindDocumentClick = () => {
 }
 onMounted(() => {
   bindDocumentClick();
-  // state.tableHeight = handleTableHeight(state, props);
-  state.tableHeight = '520px'
+  state.tableHeight = handleTableHeight(state, props);
 
   // // 子列表在mounted后初始化 直接watch无法触发
   if (!props.isNestTable) return;
@@ -456,7 +454,7 @@ const loadData = async (data: any) => {
   // 还是用loadData较好，树表展开需要在更新数据后保留上一次的状态
   // table.clearSort(); // <-- table.loadData 不会清空sort选项，导致sortChange重复触发
   await table.loadData(formatList);
-  initEditTable()
+  // initEditTable()
 
 
   table.setCurrentRow({});
@@ -520,9 +518,9 @@ const formatColumns = (map: any) => {
   let { isBatchSelect, fieldList = [], showButtonTop, isScanMultiTable, isEdit = false, editConfig = {} } = map;
   if (isEdit) {
     state.editConfig = Object.assign(state.editConfig, editConfig, {
-      mode: 'cell', 
-      autoClear: true,
-      activeMethod
+      // mode: 'cell', 
+      // autoClear: true,
+      // activeMethod
     })
   }
   if (selectType) {
@@ -627,24 +625,6 @@ const formatColumns = (map: any) => {
       type = "";
     }
 
-    const getDefaultValue = (params: any) => {
-      const value = params.row[item.columnName]
-      if (item.formType === 'select') {
-        // console.log('rowrowrow', params.row, value, item)
-        if (item.options) {
-          return item.options.find((v: any) => v.value === value)?.label || ''
-        }
-        if (item.queryOptions) {
-          return value
-          // setTimeout(() => {
-          //   return (params.row[`${col.columnName}_options`]?.find((v: any) => v.value === value)?.label) || ''
-          // }, 1500)
-        }
-        return value
-      } 
-      return value
-    }
-
     const col = Object.assign(item, {
       visible: item.columnName == "operatorColumn" ? showButtonTop == 0 : item.isShow == 1,
       field: item.columnName,
@@ -678,7 +658,7 @@ const formatColumns = (map: any) => {
           if(!isEdit || item.columnName === 'operatorColumn' || !item.isEdit) {
             return formatter(params, item)
           } else {
-            return <span>{getDefaultValue(params)}</span>
+            return <span>{getDefaultValue(params, item)}</span>
           }
         }
       },
@@ -725,30 +705,34 @@ const formatColumns = (map: any) => {
 };
 const formatterEdit = (params: any, col: any) => {
   let { row, column, $rowIndex, rowIndex } = params
-  let formType = column.formType || col.formType
-  if (formType === 'selectTable') {
-    const propsData = {
-      row,
-      col
-    }
-    return <EditSelectTable {...propsData} v-model={[row[col.columnName], 'value']} onClickSelectTable={onClickSelectTable} />
+  let formType = column.formType || col.formType || ''
+  // if (formType === 'selectTable') {
+  //   const propsData = {
+  //     row,
+  //     col
+  //   }
+  //   return <EditSelectTable {...propsData} v-model={[row[col.columnName], 'value']} onClickSelectTable={onClickSelectTable} />
+  // }
+  if (formType === 'custom') {
+    return col.slotFn(params)
+  }
+  const propsData = {
+    col,
+    row,
+    index: $rowIndex
   }
-  if (formType === 'input') {
-    return <EditInput v-model={[row[col.columnName], 'value']} />
+  if (formType === 'input' || formType === 'number') {
+    return <EditInput {...propsData} type={formType} v-model={[row[col.columnName], 'value']} onUpdateInput={onUpdateInput} />
   }
   if (formType === 'select') {
-    const propsData = {
-      col,
-      row
-    } 
     return <EditSelect {...propsData} v-model={[row[col.columnName], 'value']} onSetOptions={(options: any[]) => row[`${col.columnName}_options`] = options} />
   }
 }
-const getEditBtn = (row: any, col: any) => {
+const getEditBtn = (row: any, col: any, index: number) => {
   return col.tileBtnList.map((btn: any) => {
     if (btn.settingObj[0].trigger_type === 'DELETE') {
       return <NPopconfirm
-        onPositiveClick={() => deleteRow(row)}
+        onPositiveClick={() => deleteRow(row, col, index)}
       >
         {{
           trigger: () => <NButton color={btn.settingObj[0].color || '#999'} text>{btn.name}</NButton>,
@@ -842,8 +826,9 @@ const formatter = (params: any, col: any) => {
     return getOrCode(row, own, attrType);
   }
   if (column.property === "operatorColumn") {
-    if (props.columnConfig.isEdit && !row.initRow) {
-      return getEditBtn(row, col)
+    // if (props.columnConfig.isEdit && !row.initRow) {
+    if (props.columnConfig.isEdit) {
+      return getEditBtn(row, col, $rowIndex)
     }
 
     if (state.showButtonTop != 0 || props.isBatchEditing) return;

package/packages/big-table/src/bigTableEmits.ts

@@ -41,7 +41,8 @@ const bigTableEmits: string[] = [
   "selectionChangeLocal",
   "switchBtnOnChange",
   "asyncTableChange",
-  "clickSelectTable"
+  // "clickSelectTable"
+  "updateInput"
 ];
 
 export default bigTableEmits;

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

@@ -1,18 +1,38 @@
 <script lang="tsx">
-import { defineComponent, ref, reactive } from 'vue'
-import { NInput } from 'naive-ui'
+import { defineComponent, ref, reactive, resolveComponent } from 'vue'
+import { NInput, NInputNumber } from 'naive-ui'
 
 export default defineComponent({
   name: 'EditInput',
   inheritAttrs: false,
   components: {
-    NInput
+    NInput,
+    NInputNumber
   },
+  props: {
+    type: {
+      type: String,
+      default: 'input'
+    },
+    col: {
+      type: Object,
+      default: () => ({})
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    index: {
+      type: [Number, Object],
+      default: 0
+    }
+  },
+  emits: ['updateInput'],
   setup (props, { attrs, slots, emit }) {
-    
-    return () => [
-      <NInput {...attrs} />
-    ]
+    const onUpdateValue = (value: number | string | null) => {
+      emit('updateInput', { value, row: props.row, column: props.col, index: props.index })
+    }
+    return () => props.type === 'input' ? <NInput {...attrs} onUpdateValue={onUpdateValue } /> : <NInputNumber {...attrs} onUpdateValue={onUpdateValue} />
   }
 })
 </script>

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

@@ -31,7 +31,7 @@ export default defineComponent({
         // 此处需要缓存第一次请求到的options,不需要每次都请求,
         // 此处的row参数应当是selectTable的row
         const optionsName = `${props.col.columnName}_options`
-        state.options = props.row[optionsName] || await props.col.queryOptions(props.row.row)
+        state.options = props.row[optionsName] || await props.col.queryOptions()
         if (!props.row[optionsName]) {
           emit('setOptions', state.options)
         }

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

@@ -1,5 +1,5 @@
 import { computed, ref, reactive, watch, onMounted } from 'vue'
-import axios from 'axios'
+// import axios from 'axios'
 
 export const useBatchEditing = (props: any, state: any, emit: any, xGrid: any) => {
 
@@ -67,15 +67,15 @@ export const useBatchEditing = (props: any, state: any, emit: any, xGrid: any) =
   /**
    * 校验提交
    */
-  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);
-    }
-  )
+  // 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;
@@ -382,62 +382,62 @@ export const useBatchEditing = (props: any, state: any, emit: any, xGrid: any) =
     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
-    });
-  }
+  // 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 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, {
@@ -483,79 +483,79 @@ export const useBatchEditing = (props: any, state: any, emit: any, xGrid: any) =
     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;
-      });
-  }
+  // 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();
-    });
-  }
+  // 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();
-  }
+  // 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,

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

@@ -1,6 +1,7 @@
 import { computed, ref, reactive, watch, onMounted } from 'vue'
 
 export const useEdit = (props: any, state: any, emit: any, xGrid: any) => {
+
   const initEditTable = async () => {
     const { isEdit, fieldList = [] } = props.columnConfig
     if (!isEdit) return
@@ -17,29 +18,34 @@ export const useEdit = (props: any, state: any, emit: any, xGrid: any) => {
     await xGrid.value.insertAt(record, -1)
   }
 
-  const deleteRow = (row: any) => {
+  const deleteRow = (row: any, col: any, index: number) => {
     xGrid.value.remove(row)
+    emit('clickBtn', { row, column: col, index })
   }
 
   const activeMethod = ({ row, rowIndex, column, columnIndex }: { row: any, rowIndex: number, column: any, columnIndex: number }) => {
     const { isEdit, fieldList } = props.columnConfig
-    // console.log('activeMethod->', row, column)
     if (isEdit) {
-      const selectTableObj = fieldList.find((v: any) => v.formType === 'selectTable')
+      // const selectTableObj = fieldList.find((v: any) => v.formType === 'selectTable')
       const isEditCol = fieldList.find((v: any) => v.columnName === column.field)?.isEdit || false
-      if (selectTableObj) {
-        // const isOtherEditCol = Object.keys(row).some(v => v !== selectTableObj.columnName && v !== 'checked' && !!row[v])
-        if (isEditCol && ((column.field === selectTableObj.columnName && !row[column.field]) || (column.field !== selectTableObj.columnName && !row.initRow))) {
-          return true
-        } else {
-          return false
-        }
+      // if (selectTableObj) {
+      //   // const isOtherEditCol = Object.keys(row).some(v => v !== selectTableObj.columnName && v !== 'checked' && !!row[v])
+      //   if (isEditCol && ((column.field === selectTableObj.columnName && !row[column.field]) || (column.field !== selectTableObj.columnName && !row.initRow))) {
+      //     return true
+      //   } else {
+      //     return false
+      //   }
+      // } else {
+      //   if (isEditCol) {
+      //     return true
+      //   } else {
+      //     return false
+      //   }
+      // }
+      if (isEditCol) {
+        return true
       } else {
-        if (isEditCol) {
-          return true
-        } else {
-          return false
-        }
+        return false
       }
     } else {
       return false
@@ -63,19 +69,32 @@ export const useEdit = (props: any, state: any, emit: any, xGrid: any) => {
     const getInsertRecords = xGrid.value.getInsertRecords()
     const { row: newRow } = await xGrid.value.insertAt(record, getInsertRecords.at(-1))
     xGrid.value.clearActived()
-    // xGrid.value.setActiveRow(newRow)
-    // props.columnConfig.fieldList.forEach((col: any) => {
-    //   console.log('--------------2', col.columnName, col.columnName !== 'operatorColumn' && col.isShow && col.isEdit && col.formType !== 'selectTable')
-    //   if (col.columnName !== 'operatorColumn' && col.isShow && col.isEdit && col.formType !== 'selectTable') {
-    //     xGrid.value.setActiveRow(newRow)
-    //   }
-    // })
+  }
+
+  const onUpdateInput = ({ value, row, column }: {value: number | string | null, row: any, column: any}) => {
+    emit('updateInput', { value, row, column })
+  }
+
+  const getDefaultValue = (params: any, item: any) => {
+    const value = params.row[item.columnName]
+    if (item.formType === 'select') {
+      if (item.options) {
+        return item.options.find((v: any) => v.value === value)?.label || ''
+      }
+      if (item.queryOptions) {
+        return (params.row[`${item.columnName}_options`]?.find((v: any) => v.value === value)?.label) || ''
+      }
+      return value
+    } 
+    return value
   }
   
   return {
     initEditTable,
     activeMethod,
     deleteRow,
-    onClickSelectTable
+    onClickSelectTable,
+    onUpdateInput,
+    getDefaultValue
   }
 }