cnhis-design-vue 3.0.0 → 3.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cnhis-design-vue",
   "private": false,
-  "version": "3.0.0",
+  "version": "3.0.3",
   "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",
@@ -50,12 +46,10 @@
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-esbuild": "^4.9.1",
     "rollup-plugin-external-globals": "^0.6.1",
-    "rollup-plugin-jsx": "^1.0.3",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "rollup-plugin-vue": "^6.0.0",
-    "rollup-plugin-vue-jsx-compat": "0.0.6",
     "standard-version": "^9.3.2",
     "typescript": "^4.5.4",
     "vite": "^2.8.0",

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

@@ -163,7 +163,7 @@ export default create({
 
 <script lang="tsx" setup>
 import { computed, nextTick, onMounted, reactive, ref, useAttrs, watch, isReactive, shallowReactive, onActivated, onUnmounted } from "vue";
-import { useRoute } from 'vue-router';
+// import { useRoute } from 'vue-router';
 import bigTableState from "./bigTableState";
 import bigTableProps from "./bigTableProps";
 import bigTableEmits from "./bigTableEmits";
@@ -176,8 +176,6 @@ import { SettingsSharp, SyncOutline, CopyOutline, CaretDown, CaretForward } from
 import NoData from "./components/NoData.vue";
 import TextOverTooltip from "./components/TextOverTooltip.vue";
 import SvgIcon from '@/component/svg/index.vue';
-// import SvgIcon from "./components/SvgIcon.vue";
-// import EditForm from './components/edit-form/EditForm.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'
@@ -195,13 +193,10 @@ import {
   NSwitch,
   NPopover,
   NDropdown,
-  NPopconfirm,
-  NSelect,
-  NPagination,
-  NEmpty
+  NPopconfirm
 } from "naive-ui";
 import { useMessage } from 'naive-ui'
-import CGrid from '~/grid/index.ts';
+import CGrid from '~/grid';
 import vexutils from '@/utils/vexutils.js';
 import {
   getEvaluate,
@@ -248,7 +243,7 @@ let addInlineEditPrimaryKey: any = '';
 
 const GROUP_TITLE_KEY = "group-show-title";
 
-const route = useRoute();
+// const route = useRoute();
 
 (window as any).$message = useMessage()
 
@@ -276,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,
@@ -382,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;
@@ -460,7 +454,7 @@ const loadData = async (data: any) => {
   // 还是用loadData较好，树表展开需要在更新数据后保留上一次的状态
   // table.clearSort(); // <-- table.loadData 不会清空sort选项，导致sortChange重复触发
   await table.loadData(formatList);
-  initEditTable()
+  // initEditTable()
 
 
   table.setCurrentRow({});
@@ -521,12 +515,12 @@ const formatColumns = (map: any) => {
    */
   // 配置列表
   let { selectType } = getOtherConfigInit() || {};
-  let { isBatchSelect, fieldList, showButtonTop, isScanMultiTable, isEdit = false, editConfig = {} } = map;
+  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) {
@@ -664,7 +658,7 @@ const formatColumns = (map: any) => {
           if(!isEdit || item.columnName === 'operatorColumn' || !item.isEdit) {
             return formatter(params, item)
           } else {
-            return <span>{params.row[item.columnName]}</span>
+            return <span>{getDefaultValue(params, item)}</span>
           }
         }
       },
@@ -711,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)
   }
-  if (formType === 'input') {
-    return <EditInput v-model={[row[col.columnName], 'value']} />
+  const propsData = {
+    col,
+    row,
+    index: $rowIndex
+  }
+  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>,
@@ -828,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;
@@ -2514,12 +2513,12 @@ watch(
     handleClickCancelBtnByInline();
   }
 )
-watch(
-  () => route,
-  val => {
-    resetTableInlineEditStatus();
-  }
-)
+// watch(
+//   () => route,
+//   val => {
+//     resetTableInlineEditStatus();
+//   }
+// )
 watch(
   () => props.tableRefreshCache,
   (val, oldVal) => {

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

@@ -40,7 +40,9 @@ const bigTableEmits: string[] = [
   "setNestLastClickTable",
   "selectionChangeLocal",
   "switchBtnOnChange",
-  "asyncTableChange"
+  "asyncTableChange",
+  // "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-table.vue

@@ -1,7 +1,7 @@
 <script lang="tsx">
 import { defineComponent, ref, reactive } from 'vue'
 import { NSelect, NPagination, NEmpty, NSpin, NSpace } from 'naive-ui'
-import CGrid from '~/grid/index.ts'
+import CGrid from '~/grid'
 import vexutils from '@/utils/vexutils.js'
 
 export default defineComponent({
@@ -77,7 +77,7 @@ export default defineComponent({
         showHeaderOverflow: true,
         highlightHoverRow: true,
         highlightCurrentRow: true,
-        maxHeight: '500',
+        maxHeight: (props.col.tableHeight || 200),
         align: 'center',
         columns: state.columns,
         data: state.data

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,