cnhis-design-vue 3.0.5 → 3.0.8

package/package.json

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

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

@@ -26,9 +26,9 @@
       </p>
       <template v-if="state.visibleCheckAllWrapMore && !props.asyncCount">
         <p v-if="!visibleCancelCheckAllBtn" class="check-wrap-btn" @click="handleCheckAll">
-          <span v-if="pageVO.total > MAX_CHECK_SIZE">
-            <!-- {{ `最大勾选“${tableName}” ${MAX_CHECK_SIZE}条数据` }} -->
-            {{ `勾选全部页 ${MAX_CHECK_SIZE}条数据` }}
+          <span v-if="pageVO.total > maxCheckSize">
+            <!-- {{ `最大勾选“${tableName}” ${maxCheckSize}条数据` }} -->
+            {{ `勾选全部页 ${maxCheckSize}条数据` }}
           </span>
           <span v-else>
             <!-- {{ $t("1.9.598", { name: tableName, total }) }} -->
@@ -96,6 +96,7 @@
         iconOpen: 'iconfont icon-a-xitongtubiaozhediejian',
         iconClose: 'iconfont icon-a-xitongtubiaotianjia',
       }"
+      :keyboard-config="columnConfig.keyboardConfig || {}"
       @cell-dblclick="rowdblclick"
       @cell-click="handlerClickRow"
       @checkbox-change="selectionChange"
@@ -171,14 +172,11 @@ import { useFormat } from "./hooks/useFormat";
 import { useTableParse } from "./hooks/useTableParse";
 import { useBatchEditing } from "./hooks/useBatchEditing";
 import { useNestTable } from "./hooks/useNestTable";
-import { useEdit } from './hooks/useEdit';
+import { useEdit, comps } 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 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'
 import {
   NButton,
   NCheckbox,
@@ -271,7 +269,7 @@ const {
   recordClickBtnInfo,
   getInlineOpreateRow
 }: any = useBatchEditing(props, state, emit, xGrid);
-const { initEditTable, activeMethod, deleteRow, onClickSelectTable, onUpdateInput, getDefaultValue } = useEdit(props, state, emit, xGrid)
+const { initEditTable, activeMethod, deleteRow, onClickSelectTable, onFormChange, getDefaultValue } = useEdit(props, state, emit, xGrid)
 
 const { 
   isAboutNestTable,
@@ -292,7 +290,7 @@ const currentCheckedKeys = computed(() => {
 });
 const visibleCancelCheckAllBtn = computed(() => {
   let isCurrentPageAllCheck = state.currentPageSelectedLength === state.curAbleCheckedLen;
-  let isMaxChecked = currentCheckedKeys.value.length === props.MAX_CHECK_SIZE;
+  let isMaxChecked = currentCheckedKeys.value.length === props.maxCheckSize;
   let isCheckedTotal = currentCheckedKeys.value.length === props.pageVO.total;
 
   return isMaxChecked || !isCurrentPageAllCheck || isCheckedTotal;
@@ -377,7 +375,7 @@ const unBindDocumentClick = () => {
 }
 onMounted(() => {
   bindDocumentClick();
-  state.tableHeight = handleTableHeight(state, props);
+  state.tableHeight = handleTableHeight(state, props) || 'auto';
 
   // // 子列表在mounted后初始化 直接watch无法触发
   if (!props.isNestTable) return;
@@ -706,27 +704,29 @@ 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} />
-  // }
+  if (!formType) return null
   if (formType === 'custom') {
     return col.slotFn(params)
   }
-  const propsData = {
+  const Comp = comps[formType] || ''
+  if (!Comp) return null
+  const propsData: any = {
     col,
     row,
-    index: $rowIndex
+    index: $rowIndex,
+    // vModel: [row[col.columnName], formType === 'date' ? 'formattedValue' :'value'],
+    type: formType,
+    onFormChange
   }
-  if (formType === 'input' || formType === 'number') {
-    return <EditInput {...propsData} type={formType} v-model={[row[col.columnName], 'value']} onUpdateInput={onUpdateInput} />
+  if (formType === 'date') {
+    propsData.defaultFormattedValue = row[col.columnName]
+  } else {
+    propsData.defaultValue = row[col.columnName]
   }
   if (formType === 'select') {
-    return <EditSelect {...propsData} v-model={[row[col.columnName], 'value']} onSetOptions={(options: any[]) => row[`${col.columnName}_options`] = options} />
+    propsData.onSetOptions = (options: any[]) => (row[`${col.columnName}_options`] = options)
   }
+  return <Comp {...propsData} />
 }
 const getEditBtn = (row: any, col: any, index: number) => {
   return col.tileBtnList?.map((btn: any) => {
@@ -826,8 +826,7 @@ const formatter = (params: any, col: any) => {
     return getOrCode(row, own, attrType);
   }
   if (column.property === "operatorColumn") {
-    // if (props.columnConfig.isEdit && !row.initRow) {
-    if (props.columnConfig.isEdit) {
+    if (props.columnConfig.isEdit && !row.initRow) {
       return getEditBtn(row, col, $rowIndex)
     }
 
@@ -1220,8 +1219,8 @@ const refreshTable = () => {
 };
 /* 全选相关 */
 const handleCheckAll = () => {
-  if (props.pageVO.total > props.MAX_CHECK_SIZE) {
-    let text = `当前列表共${props.pageVO.total}条数据，为了确保系统安全，只能单次操作${props.MAX_CHECK_SIZE}条，你可以通过高级筛选过滤再次尝试`;
+  if (props.pageVO.total > props.maxCheckSize) {
+    let text = `当前列表共${props.pageVO.total}条数据，为了确保系统安全，只能单次操作${props.maxCheckSize}条，你可以通过高级筛选过滤再次尝试`;
     (window as any).$message.warning(text);
     // return false;
   }
@@ -1327,8 +1326,7 @@ const getAsyncTableData = (params: any) => {
 };
 const setChecklist = (list: any) => {
   return list.map((i: any) => {
-    // this.$set(i, 'checked', false);
-    i["checked"] = false;
+    i["checked"] = i.checked || false;
     if (state.isTree == 2) {
       const treeNodeKey = state.levelLazyLoadSetting.childCountKey;
       const { isTreeOrList = "" } = props.tableParams;
@@ -1613,8 +1611,8 @@ const addCheckedRows = (rows: any) => {
   removeCheckedDisabledRows(state);
   let checkedRows = state.checkedRows;
 
-  if (currentCheckedKeys.value.length + rows.length > props.MAX_CHECK_SIZE) {
-    (window as any).$message.warning(`为了保证系统安全，单次操作数据量限额为${props.MAX_CHECK_SIZE}条，你可以通过高级筛选过滤后再次尝试`);
+  if (currentCheckedKeys.value.length + rows.length > props.maxCheckSize) {
+    (window as any).$message.warning(`为了保证系统安全，单次操作数据量限额为${props.maxCheckSize}条，你可以通过高级筛选过滤后再次尝试`);
     return false;
   }
 
@@ -1687,10 +1685,21 @@ const showDrawer = () => {
   emit("setNestTableClickSetting", props.isNestTable);
   emit("showDrawer", theads);
 };
+let scrollEvent = (params: any) => {
+  emit('scroll', params)
+}
+const initScroll = () => {
+  const { throttle = false, throttleTime = 800, throttleOptions = {} } = props.columnConfig?.scrollConfig
+  if (throttle) {
+    scrollEvent = vexutils.throttle(scrollEvent, throttleTime, throttleOptions)
+  }
+}
+initScroll()
 const handlerScroll = (params: any) => {
   if (params.isX) {
     hideFilterWrap(state, props);
   }
+  scrollEvent(params)
 };
 const handleCellMouseenter = ({ column, $event }: any) => {
   // vxe-table@2.10+  触发tooltip给vxe-cell父节点设置了title 导致显示有误

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

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

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

@@ -1,6 +1,6 @@
 const bigTableProps = {
   data: { type: Array, default: () => [] },
-  MAX_CHECK_SIZE: { type: Number, default: 0 },
+  maxCheckSize: { type: Number, default: 0 },
   showFooter: Boolean,
   sumData: { type: Object, default: () => ({}) },
   avgData: { type: Object, default: () => ({}) },

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

@@ -0,0 +1,41 @@
+<script lang="tsx">
+import { defineComponent, ref, reactive, resolveComponent } from 'vue'
+import { NDatePicker } from 'naive-ui'
+
+export default 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: any) => {
+      emit('formChange', { value, row: props.row, column: props.col, index: props.index })
+    }
+    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',
+      to: false
+    }
+    return () => <NDatePicker {...attrs} {...config} onUpdateFormattedValue={onConfirm} />
+  }
+})
+</script>
+<style lang="less" scoped></style>

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

@@ -27,10 +27,10 @@ export default defineComponent({
       default: 0
     }
   },
-  emits: ['updateInput'],
+  emits: ['formChange'],
   setup (props, { attrs, slots, emit }) {
     const onUpdateValue = (value: number | string | null) => {
-      emit('updateInput', { value, row: props.row, column: props.col, index: props.index })
+      emit('formChange', { value, row: props.row, column: props.col, index: props.index })
     }
     return () => props.type === 'input' ? <NInput {...attrs} onUpdateValue={onUpdateValue } /> : <NInputNumber {...attrs} onUpdateValue={onUpdateValue} />
   }

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

@@ -11,14 +11,18 @@ export default defineComponent({
   props: {
     col: {
       type: Object,
-      default: () => {}
+      default: () => ({})
     },
     row: {
       type: Object,
-      default: () => {}
+      default: () => ({})
+    },
+    index: {
+      type: [Number, Object],
+      default: 0
     }
   },
-  emits: ['setOptions'],
+  emits: ['setOptions', 'formChange'],
   setup (props, { attrs, slots, emit }) {
     
     const state = reactive({
@@ -40,6 +44,10 @@ export default defineComponent({
 
     setOptions()
 
+    const onUpdateValue = (value: any[] | string | number | null) => {
+      emit('formChange', { value, row: props.row, column: props.col, index: props.index })
+    }
+
     return () => [
       <NSelect
         {...attrs} 
@@ -49,6 +57,7 @@ export default defineComponent({
         filterable
         to={false}
         placeholder="请选择"
+        onUpdateValue={onUpdateValue}
       />
     ]
   }

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

@@ -1,4 +1,15 @@
 import { computed, ref, reactive, watch, onMounted } from 'vue'
+import EditInput from '../components/edit-form/edit-input.vue'
+import EditSelect from '../components/edit-form/edit-select.vue'
+import EditDate from '../components/edit-form/edit-date.vue'
+
+
+export const comps = {
+  'input': EditInput,
+  'number': EditInput,
+  'select': EditSelect,
+  'date': EditDate
+}
 
 export const useEdit = (props: any, state: any, emit: any, xGrid: any) => {
 
@@ -71,15 +82,16 @@ export const useEdit = (props: any, state: any, emit: any, xGrid: any) => {
     xGrid.value.clearActived()
   }
 
-  const onUpdateInput = ({ value, row, column }: {value: number | string | null, row: any, column: any}) => {
-    emit('updateInput', { value, row, column })
+  const onFormChange = ({ value, row, column, index }: {value: number | string | null, row: any, column: any, index: number}) => {
+    row[column.columnName] = value
+    emit('formChange', { value, row, column, index })
   }
 
   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 || ''
+        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) || ''
@@ -94,7 +106,7 @@ export const useEdit = (props: any, state: any, emit: any, xGrid: any) => {
     activeMethod,
     deleteRow,
     onClickSelectTable,
-    onUpdateInput,
+    onFormChange,
     getDefaultValue
   }
-}
+}

package/packages/button-print/src/ButtonPrint.vue

@@ -64,6 +64,7 @@ interface Props {
   queryPrintFormatByNumber: Function
   queryTemplateParams?: Function
   strategy?: string
+  printParams?: any[]
 }
 const props = withDefaults(defineProps<Props>(), {
   params: () => ([]),
@@ -138,7 +139,7 @@ const prevFnError = () => {
   emit('error', error);
 }
 const getPrintParams = (index: number = 0) => {
-  const params = state.printParams[index];
+  const params = props.printParams?.length ? props.printParams[index] : state.printParams[index];
   return JSON.stringify(params);
 }
 const getOnceParams = () => {

package/packages/index.ts

@@ -5,6 +5,7 @@ import { default as CBigTable } from './big-table';
 import { default as CFieldSet } from './field-set';
 import { default as CDragLayout } from './drag-layout';
 import { default as CButtonPrint } from './button-print';
+import { default as CSelectPerson } from './select-person';
 
 // 存储组件列表
 const components: any[] = [
@@ -12,7 +13,8 @@ const components: any[] = [
   CBigTable,
   CFieldSet,
   CDragLayout,
-  CButtonPrint
+  CButtonPrint,
+  CSelectPerson
 ];
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function(app: App) {
@@ -27,7 +29,8 @@ export {
   CBigTable,
   CFieldSet,
   CDragLayout,
-  CButtonPrint
+  CButtonPrint,
+  CSelectPerson
 }
 
 export default {

package/packages/select-person/index.ts

@@ -0,0 +1,11 @@
+import type { App } from "vue";
+// 导入组件
+import SelectPerson from './src/SelectPerson.vue'
+
+// 为组件提供 install 安装方法，供按需引入
+SelectPerson.install = function(app: App) {
+  app.component(SelectPerson.name, SelectPerson);
+};
+
+// 默认导出组件
+export default SelectPerson;