cnhis-design-vue 3.0.6 → 3.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cnhis-design-vue",
   "private": false,
-  "version": "3.0.6",
+  "version": "3.0.9",
   "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 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'
 import {
   NButton,
   NCheckbox,
@@ -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;
@@ -706,23 +704,32 @@ const formatColumns = (map: any) => {
 const formatterEdit = (params: any, col: any) => {
   let { row, column, $rowIndex, rowIndex } = params
   let formType = column.formType || col.formType || ''
+  let formatMap = column.formatMap || col.formatMap || null
+  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
-  }
-  if (formType === 'input' || formType === 'number') {
-    return <EditInput {...propsData} type={formType} v-model={[row[col.columnName], 'value']} onFormChange={onFormChange} />
+    index: $rowIndex,
+    // vModel: [row[col.columnName], formType === 'date' ? 'formattedValue' :'value'],
+    type: formType,
+    onFormChange
+  } 
+  if (formType === 'date') {
+    propsData.defaultFormattedValue = row[col.columnName]
+  } else if(formatMap){
+    propsData.defaultValue = row[formatMap.value]
+  } 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} onFormChange={onFormChange} />
-  }
-  if (formType === 'date') {
-    return <EditDate {...propsData} v-model={[row[col.columnName], 'formattedValue']} onFormChange={onFormChange} />
+    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) => {
@@ -822,8 +829,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)
     }
 
@@ -1216,8 +1222,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;
   }
@@ -1323,8 +1329,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;
@@ -1609,8 +1614,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;
   }
 
@@ -1683,10 +1688,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,7 +41,8 @@ const bigTableEmits: string[] = [
   "selectionChangeLocal",
   "switchBtnOnChange",
   "asyncTableChange",
-  "formChange"
+  "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

@@ -24,18 +24,51 @@ export default defineComponent({
   },
   emits: ['formChange'],
   setup (props, { attrs, slots, emit }) {
-    const onConfirm = (value: number | [number, number] | null, formattedValue: string | [string, string] | null) => {
-      console.log('时间选择->', value)
+    const onConfirm = (value: any) => {
       emit('formChange', { value, row: props.row, column: props.col, index: props.index })
     }
-    const config = {
+    const { isStartDate = false, isEndDate = false, connectField } = props.col
+    const setDateDisabled = (cur: number, date: number) => {
+      if (isStartDate && connectField) {
+        return cur > date
+      }
+      if(isEndDate && connectField) {
+        return cur < date
+      }
+      return false
+    }
+    const isDateDisabled = (ts: number) => {
+      return setDateDisabled(ts, new Date(props.row[connectField]).getTime())
+    }
+    const isTimeDisabled = (ts: number) => {
+      const date = new Date(props.row[connectField] || ts)
+      const h = date.getHours()
+      const m = date.getMinutes()
+      const s = date.getSeconds()
+      return {
+        isHourDisabled: (hour: number) => {
+          return setDateDisabled(hour, h)
+        },
+        isMinuteDisabled: (minute: number) => {
+          return setDateDisabled(minute, m)
+        },
+        isSecondDisabled: (second: number) => {
+          return setDateDisabled(second, s)
+        }
+      }
+    }
+    const config: any = {
       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
+      to: false,
+      isDateDisabled: props.col.isDateDisabled || isDateDisabled
+    }
+    if (config.type.includes('time')) {
+      config.isTimeDisabled = props.col.isTimeDisabled || isTimeDisabled
     }
-    return () => <NDatePicker {...attrs} {...config} onConfirm={onConfirm} />
+    return () => <NDatePicker {...attrs} {...config} onUpdateFormattedValue={onConfirm} />
   }
 })
 </script>

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

@@ -48,6 +48,7 @@ export default defineComponent({
       emit('formChange', { value, row: props.row, column: props.col, index: props.index })
     }
 
+    console.log(attrs) 
     return () => [
       <NSelect
         {...attrs} 

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,35 @@ export const useEdit = (props: any, state: any, emit: any, xGrid: any) => {
     xGrid.value.clearActived()
   }
 
-  const onFormChange = ({ value, row, column }: {value: number | string | null, row: any, column: any}) => {
-    emit('formChange', { value, row, column })
+  const getLabel = (opts: any[], value: any): any => {
+    return opts.find((opt: any) => opt.value === value)?.label || '';
+  };
+
+  const onFormChange = ({ value, row, column, index }: {value: number | string | null, row: any, column: any, index: number}) => {
+    let oldValue: any = row[column.columnName]    
+    if ((column?.formType === 'input' || column?.formType === 'number') && props.columnConfig?.formValidate) {
+      row[column.columnName] = props.columnConfig?.formValidate({row, column, current: value, old: row[column.columnName]})
+    } else if (column?.formatMap) {
+      oldValue = {
+        label: row[column.formatMap.label],
+        value: row[column.formatMap.value]
+      }
+      row[column.formatMap.label] = getLabel(row[column.columnName+'_options'] || [], value)
+      row[column.formatMap.value] = value
+    } else {
+      row[column.columnName] = value
+    }
+    emit('formChange', { value, row, column, index, oldValue })
   }
 
   const getDefaultValue = (params: any, item: any) => {
     const value = params.row[item.columnName]
     if (item.formType === 'select') {
+      if( item.formatMap ) {
+        return params.row[item.formatMap.label]
+      }
       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) || ''
@@ -97,4 +128,4 @@ export const useEdit = (props: any, state: any, emit: any, xGrid: any) => {
     onFormChange,
     getDefaultValue
   }
-}
+}

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;