cnhis-design-vue 3.0.8 → 3.1.1

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

@@ -27,12 +27,46 @@ export default defineComponent({
     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} onUpdateFormattedValue={onConfirm} />
   }

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

@@ -1,6 +1,7 @@
 <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',
@@ -26,8 +27,12 @@ export default defineComponent({
   setup (props, { attrs, slots, emit }) {
     
     const state = reactive({
-      options: [] as any
+      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))
@@ -35,28 +40,53 @@ export default defineComponent({
         // 此处需要缓存第一次请求到的options,不需要每次都请求,
         // 此处的row参数应当是selectTable的row
         const optionsName = `${props.col.columnName}_options`
-        state.options = props.row[optionsName] || await props.col.queryOptions()
-        if (!props.row[optionsName]) {
-          emit('setOptions', state.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)
+        // }
       }
     }
-
-    setOptions()
-
+    
+    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}
       />
     ]

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

@@ -82,14 +82,33 @@ export const useEdit = (props: any, state: any, emit: any, xGrid: any) => {
     xGrid.value.clearActived()
   }
 
+  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}) => {
-    row[column.columnName] = value
-    emit('formChange', { value, row, column, index })
+    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 || ''
       }

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

@@ -1,11 +1,13 @@
 <template>
   <span @click="handleClickWrap">
     <NDropdown
+      class="rowFoldHideBtnList-dropdown"
       placement="bottom-start"
       :show="state.visible"
       @clickoutside="handleClickOutside"
       :options="options"
       @select="handleSelect"
+      :render-label="renderLabel"
     >
       <slot
         name="button" 
@@ -30,14 +32,14 @@
   </span>
 </template>
 
-<script lang="ts">
+<script lang="tsx">
 import create from '@/core/create.js';
 export default create({
   name: "ButtonPrint"
 })
 </script>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
 import { NDropdown, NButton, NIcon } from 'naive-ui'
 import { ChevronDown, Reload } from "@vicons/ionicons5";
@@ -117,6 +119,9 @@ const currentFormatItem = computed(() => {
 })
 const formatTitle = computed(() => (currentFormatItem.value as any).name || '格式选择')
 
+const renderLabel = (option: DropdownOption) => {
+  return <span class={{'active': option.key === state.currentFormatId}}>{option.label}</span>
+}
 const getTemplateIdByFormatId = (id: string | number) => {
   let find: any = state.formatList.find((item: any) => item.id === id);
   return find.templateId;
@@ -266,6 +271,7 @@ const handleSelect = (key: string) => {
       break;
     default:
       state.currentFormatId = key;
+      state.visible = false
       break;
   }
 }
@@ -376,6 +382,7 @@ const initCRM = async (formatListResult: any) => {
   state.formatList = formatListResult ? formatFormatList(formatListResult.obj) : [];
   console.log('formatListResult', formatListResult)
   state.currentFormatId = getDefaultFormatId(state.formatList, 'defaultFlag');
+  setOptions()
 
   if (!state.currentFormatId) {
     (window as any).$message.error('获取打印格式失败，请联系管理员！');
@@ -392,7 +399,6 @@ const initCRM = async (formatListResult: any) => {
   } else {
     return requestError();
   }
-
   state.printParams = formatParams(state.templateParams, props.params);
 }
 const init = async () => {
@@ -473,3 +479,10 @@ watch(() => props.params,
   margin-bottom: 8px;
 }
 </style>
+<style lang="less">
+  .rowFoldHideBtnList-dropdown {
+    .n-dropdown-menu-wrapper span.active {
+      color: #5585f5;
+    }
+  }
+</style>