resolver-egretimp-plus 0.1.108 → 0.1.110

package/index.js

@@ -1,4 +1,5 @@
 export { default as Renderer} from './src/renderer.jsx'
+import { normalPageConfigs } from './src/components/helper/resolver.js'
 import { commonPropsType } from './src/utils/index.js'
 
 
@@ -11,5 +12,6 @@ const componentPropsType = Object.keys(commonPropsType).reduce((ret, key) => {
 }, {})
 
 export {
+  normalPageConfigs,
   componentPropsType
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resolver-egretimp-plus",
-  "version": "0.1.108",
+  "version": "0.1.110",
   "description": "交付体验渲染",
   "main": "./dist/web/index.js",
   "module": "./dist/web/index.js",

package/src/components/helper/resolver.js

@@ -87,16 +87,37 @@ export async function executeLoadServices(services = [], {
   }
 }
 
-export function normalPageConfigs(pageConfig) {
+export function normalPageConfigs(pageConfig, target) {
   const rootOptionComp = pageConfig?.pmPageMetaList?.find(item => item.metaType === 'PC-root-panel' || item.metaType === 'H5-root-panel')
   if (rootOptionComp) {
     pageConfig.pmPageMetaList = rootOptionComp.pmPageMetaList
     delete rootOptionComp.pmPageMetaList
     pageConfig.rootOptionComp = rootOptionComp
   }
+  if (target) {
+    const targetComp = getTargetComp(pageConfig, target)
+    if (targetComp) {
+      pageConfig.pmPageMetaList = [targetComp]
+    }
+  }
   return pageConfig
 }
 
+// 获取配置的时候，设置了只需要展示指定的部分
+function getTargetComp(config, target = '') {
+  let ret = config
+  if (target) {
+    metaCodes = target.split('->')
+    ret = metaCodes.reduce((ret, metaCode) => {
+      if (ret && ret.pmPageMetaList && Array.isArray(ret.pmPageMetaList)) {
+        return ret.pmPageMetaList.find(item => item.metaCode === metaCode)
+      }
+      return ret
+    }, config)
+  }
+  return ret
+}
+
 export function resetConfigEventInit(dynamicMapComp) {
   Object.keys(dynamicMapComp).forEach(key => {
     if (hasOwn(dynamicMapComp[key], 'eventInit')) {

package/src/components/helper/table.jsx

@@ -0,0 +1,74 @@
+import AsyncValidator from 'async-validator'
+import { calcDisable, getFormItemRule } from '../../utils'
+
+export function getCustomerTableProps(commonPropsType, ElTableV2, ElTable, ElPagination) {
+  const ret = {
+    ...commonPropsType,
+    ...ElTableV2.props,
+    headerHeight: {
+      type: Number,
+      default: 40,
+    },
+      rowHeight: {
+      type: Number,
+      default: 40,
+    },
+    ...ElTable.props,
+    ...ElPagination.props
+  }
+  delete ret.columns
+  delete ret.data
+  return ret
+}
+
+export async function tableValidate({
+  props,
+  data,
+  lang,
+  rootValue,
+  dynamicMapComp,
+  messageInstance
+}) {
+  const multiPmPageMetaList = props.config.multiPmPageMetaList || []
+  const list = (data || [])
+  for (let index = 0; index < list.length; index++) {
+    const row = list[index];
+    const configColumns = multiPmPageMetaList[index]
+    const rowScope = {row, $index: index}
+    for (let j = 0; j < configColumns.length; j++) {
+      const columnConfig = configColumns[j];
+      const renderProps = getItemRenderProps(columnConfig, props, rowScope)
+      const params = {
+        lang,
+        rootValue,
+        dynamicMapComp,
+        props: renderProps,
+        messageInstance
+      }
+      const compProps = {
+        disabled: calcDisable(columnConfig, props.mode)
+      }
+      const rules = getFormItemRule(columnConfig, lang, params, compProps)
+      const validator = new AsyncValidator({
+        [props.config.metaCode]: rules
+        // validator: (rule, value, callback) => {
+        //   callback(new Error('test error'))
+        //   return
+        // }
+      })
+      const a = await validator.validate({[columnConfig.metaCode]: row[columnConfig.metaCode]})
+      debugger
+    }
+  }
+  
+}
+
+function getItemRenderProps(itemConfig, tableProps, rowScope) {
+  const {row } = rowScope
+  return {
+    config: itemConfig,
+    modelValue: row[itemConfig.metaCode],
+    rowScope,
+    mode: tableProps.mode
+  }
+}

package/src/components/packages-web/CustomComponentTable.jsx

@@ -1,31 +1,28 @@
   
-import { ElAutoResizer, ElPagination, ElTableV2 } from 'element-plus'
+import { ElAutoResizer, ElPagination, ElTableV2, formContextKey } from 'element-plus'
 import ElTable, { ElTableColumn } from '../table'
 import Renderer from '../../renderer.jsx'
-import { computed, inject, watch, h, ref, reactive } from 'vue'
-import { commonPropsType, TABLE_COLUMN_NOT_RENDER_META_TYPE, DISPLAY_SHOW, compareComponet, isPlainObject, hasOwn, cloneDeep, isPromise, isPlainColumn, generateUniqueId, calcDisable, camelize, capitalize, DISPLAY_HIDDEN, definePrivatelyProp, isArray } from '../../utils/index.js'
+import { computed, inject, watch, h, ref, reactive, onMounted, unref } from 'vue'
+import { commonPropsType, TABLE_COLUMN_NOT_RENDER_META_TYPE, DISPLAY_SHOW, compareComponet, isPlainObject, hasOwn, cloneDeep, isPromise, isPlainColumn, generateUniqueId, calcDisable, camelize, capitalize, DISPLAY_HIDDEN, definePrivatelyProp, isArray, eleIsOverflow } from '../../utils/index.js'
+import { getCustomerTableProps, tableValidate } from '../helper/table'
 // import '../styles/CustomComponenTable.scss'
 
 export default {
   inheritAttrs: false,
   name: 'CustomComponentTable',
-  props: {
-    ...commonPropsType,
-    ...ElTableV2.props,
-    ...ElTable.props,
-    ...ElPagination.props
-  },
+  props: getCustomerTableProps(commonPropsType, ElTableV2, ElTable, ElPagination),
   setup(props, { expose, attrs, emit }) {
-    // 虚拟表格列的属性
-    const virtualizedColumnPropKeys = ['align', 'class', 'key', 'dataKey', 'fixed', 'flexGrow', 'flexShrink', 'headerClass', 'hidden', 'style', 'sortable', 'title', 'maxWidth', 'minWidth', 'width']
+    // 虚拟表格列的属性 'hidden'不需要这个属性，额外控制
+    const virtualizedColumnPropKeys = ['align', 'class', 'key', 'dataKey', 'fixed', 'flexGrow', 'flexShrink', 'headerClass', 'style', 'sortable', 'title', 'maxWidth', 'minWidth', 'width']
     // 开启虚拟化表格
     const isVirtualized = computed(() => {
-      // if (props.config.metaCode === 'mksAttachList') {
-      //   return false
-      // }
-      // return true
       return props.config?.isVirtualized == '1'
     })
+    const toopTip = reactive({
+      show: false,
+      triggerRef: null,
+      content: ''
+    })
     let pageSize = 5 // 默认每页5条
     if (props.config?.pageSize) {
       pageSize = parseInt(props.config.pageSize) || 5
@@ -59,6 +56,8 @@ export default {
     const selectable = computed(() => {
       return props.config?.selectable == '1' || props.config?.canSelect
     })
+    const formContext = inject(formContextKey, undefined)
+    const messageInstance = inject('_messageInstance')
     const indectModeRef = inject('indectModeRef', ref(''))
     const ruleExecuter = inject('_ruleExecuter')
     const dynamicMapComp = inject('dynamicMapComp')
@@ -91,6 +90,30 @@ export default {
       if (!porpsObj.stripe) {
         porpsObj.stripe = true
       }
+      if (isVirtualized.value) {
+        const oldHeaderClass = porpsObj.headerClass
+        porpsObj.headerClass = function(params) {
+          let ret = 'table-v2-common-row'
+          const oldVal = typeof oldHeaderClass === 'function' ? oldHeaderClass(params) : oldHeaderClass
+          if (oldVal) {
+            ret = `${oldVal} ${ret}`
+          }
+          return ret
+        }
+        const oldRowClass = porpsObj.rowClass
+        porpsObj.rowClass = function(params) {
+          const {rowIndex} = params
+          let ret = 'table-v2-common-row'
+          const oldVal = typeof oldRowClass === 'function' ? oldRowClass(params) : oldRowClass
+          if (oldVal) {
+            ret = `${oldVal} ${ret}`
+          }
+          if (rowIndex % 2 === 1) {
+            ret = `${ret} table-v2-striped`
+          }
+          return ret
+        }
+      }
       return porpsObj
     })
 
@@ -198,95 +221,100 @@ export default {
         return config.displayType != DISPLAY_HIDDEN && !(config.width == 0 || config.width == '0px' || config.hidden == '1')
       })?.length
       const nextConfig = nextList.find(config => config.displayType != DISPLAY_HIDDEN)
-      const columnkeys = isVirtualized.value ? virtualizedColumnPropKeys : ElTableColumn.props
-      const retObj =  Object.keys(columnkeys).reduce((ret, key) => {
+      let columnkeys = virtualizedColumnPropKeys
+      if (!isVirtualized.value) {
+        columnkeys = Object.keys(ElTableColumn.props)
+      }
+      const retObj =  columnkeys.reduce((ret, key) => {
         if (hasOwn(config, key)) {
           ret[key] = config[key]
         }
         return ret
       }, {})
-      if (config.showOverflowTooltip == '1' || config['show-overflow-tooltip'] == '1') {
-        retObj['show-overflow-tooltip'] = true
-        retObj.showOverflowTooltip = true
-      } else {
-        retObj['show-overflow-tooltip'] = false
-        retObj.showOverflowTooltip = false
-      }
-      if (!retObj.prop) {
-        retObj.prop = config.metaCode
-      }
+      
       if (config.columnWidth) {
         retObj.width = config.columnWidth
-        if (isVirtualized.value) {
-          retObj.width = parseInt(retObj.width)
-        }
       }
       if (!retObj.width) {
         retObj.minWidth = 160
-        if (isVirtualized.value) {
-          retObj.width = 160
-          retObj.headerClass = 'flex-grow-import'
-          retObj.class = 'flex-grow-import'
-        }
-      }
-      let classKey = 'className'
-      if (isVirtualized.value) {
-        classKey = 'class'
       }
       if (retObj.width == 0 || retObj.width == '0px' || config.hidden == '1') {
-        retObj[classKey] = 'hidden-column'
+        retObj.className = 'hidden-column'
         retObj.width = 1
-        if (isVirtualized.value) {
-          retObj.headerClass = 'hidden-column'
-        }
       }
       if (nextConfig && (nextConfig.width == 0 || nextConfig.width == '0px' || nextConfig.hidden == '1')) {
-        retObj[classKey] = `${retObj[classKey] || ''} next-hidden-column`
+        retObj.className = `${retObj.className || ''} next-hidden-column`
       }
       if (isEndConfig) {
-        retObj[classKey] = `${retObj[classKey] || ''} end-show-column`
+        retObj.className = `${retObj.className || ''} end-show-column`
       }
       if (config.metaType == 'CustomComponentSelectEmployees') {
-        retObj[classKey] = `${retObj[classKey] || ''} clear-index`
-      }
-      if (
-        isPlainColumn({...config, isColumn: true}, true) &&
-        config.showOverflowTooltip != '0' &&
-        config['show-overflow-tooltip'] != '0'
-      ) {
-        const showOverflowTooltipFn = (data) => {
-          const currentConfig = multiPmPageMetaList.value?.[data.$index]?.[idx]
-          if (currentConfig) {
-            return isPlainColumn({...currentConfig, isColumn: true}, calcDisable(currentConfig, indectModeRef.value))
-          }
-          return true
+        retObj.className = `${retObj.className || ''} clear-index`
+      }
+      if (!isVirtualized.value) {
+        if (!retObj.prop) {
+          retObj.prop = config.metaCode
         }
-        retObj['show-overflow-tooltip'] = showOverflowTooltipFn
-        retObj.showOverflowTooltip = showOverflowTooltipFn
-      }
-      if (config.type === 'selection') {
-        const orginSelectable = retObj.selectable
-        retObj.selectable = (row, index) => {
-          let orginRet = true
-          if (orginSelectable && typeof orginSelectable === 'function') {
-            orginRet = orginSelectable(row, index, {
-              tableConfig: props.config,
-              rootValue: rootValue,
-              parentRootValue,
-              parentDynamicMapComp
-            })
+        // table设置show-overflow-tooltip额外的逻辑=====start=====
+        if (config.showOverflowTooltip == '1' || config['show-overflow-tooltip'] == '1') {
+          retObj['show-overflow-tooltip'] = true
+          retObj.showOverflowTooltip = true
+        } else {
+          retObj['show-overflow-tooltip'] = false
+          retObj.showOverflowTooltip = false
+        }
+        if (
+          isPlainColumn({...config, isColumn: true}, true) &&
+          config.showOverflowTooltip != '0' &&
+          config['show-overflow-tooltip'] != '0'
+        ) {
+          const showOverflowTooltipFn = (data) => {
+            const currentConfig = multiPmPageMetaList.value?.[data.$index]?.[idx]
+            if (currentConfig) {
+              return isPlainColumn({...currentConfig, isColumn: true}, calcDisable(currentConfig, indectModeRef.value))
+            }
+            return true
           }
-          let parentSelectionsRet = true
-          if (selectionsObj.selections && selectionsObj.selections.length && selectionsObj.primaryKeys && selectionsObj.primaryKeys.length) {
-            const hasRow = selectionsObj.selections?.some(selectRow => {
-              return selectionsObj.primaryKeys.map(key => key && selectRow[key] == row[key]).every(item => item)
-            })
-            parentSelectionsRet = !hasRow
+          retObj['show-overflow-tooltip'] = showOverflowTooltipFn
+          retObj.showOverflowTooltip = showOverflowTooltipFn
+        }
+        // table设置show-overflow-tooltip额外的逻辑=====end=====
+        if (config.type === 'selection') {
+          const orginSelectable = retObj.selectable
+          retObj.selectable = (row, index) => {
+            let orginRet = true
+            if (orginSelectable && typeof orginSelectable === 'function') {
+              orginRet = orginSelectable(row, index, {
+                tableConfig: props.config,
+                rootValue: rootValue,
+                parentRootValue,
+                parentDynamicMapComp
+              })
+            }
+            let parentSelectionsRet = true
+            if (selectionsObj.selections && selectionsObj.selections.length && selectionsObj.primaryKeys && selectionsObj.primaryKeys.length) {
+              const hasRow = selectionsObj.selections?.some(selectRow => {
+                return selectionsObj.primaryKeys.map(key => key && selectRow[key] == row[key]).every(item => item)
+              })
+              parentSelectionsRet = !hasRow
+            }
+            return orginRet && parentSelectionsRet
           }
-          return orginRet && parentSelectionsRet
         }
       }
 
+      if (isVirtualized.value) {
+        let classValue = retObj.className || ''
+        if (retObj.width) {
+          retObj.width = parseInt(retObj.width)
+        } else {
+          retObj.width = 160
+          classValue = `${classValue} flex-grow-import`
+        }
+        retObj.class = `${classValue} table-body-cell`
+        retObj.headerClass = `${classValue} table-head-cell`
+      }
+
       return retObj
     }
 
@@ -525,6 +553,42 @@ export default {
       return ret
     }, {})
 
+    function validate() {
+      // lang,
+      // rootValue,
+      // dynamicMapComp,
+      // props,
+      // messageInstance: messageInstance?.value
+      return tableValidate({
+        props,
+        data: unref(modelValue),
+        lang,
+        rootValue,
+        dynamicMapComp,
+        messageInstance: messageInstance?.value
+      })
+    }
+
+    const context = reactive({
+      // ...toRefs(props),
+      // $el: formItemRef,
+      // size: _size,
+      // validateState,
+      // labelId,
+      // inputIds,
+      // isGroup,
+      // hasLabel,
+      // fieldValue,
+      // addInputId,
+      // removeInputId,
+      // resetField,
+      // clearValidate,
+      validate,
+    })
+    onMounted(() => {
+      // formContext?.addField(context)
+    })
+
     // 是否配置分页功能     ====== end======
     expose({
       multipleSelection,
@@ -540,6 +604,23 @@ export default {
     })
     // console.log('dynamicMapComp===:', inject('dynamicMapComp'))
 
+    function cellMouseEnenter(e) {
+      const {overflow, content} = eleIsOverflow(e)
+      toopTip.show = false
+      toopTip.content = ''
+      toopTip.triggerRef = null
+      if (overflow) {
+        toopTip.show = true
+        toopTip.content = content
+        toopTip.triggerRef = e.target
+      }
+    }
+    function cellMouseout(e) {
+      toopTip.show = false
+      toopTip.content = ''
+      toopTip.triggerRef = null
+    }
+
     function generateCellSolts(columnConfg, configIdx) {
       let headerKey = 'header'
       let cellKey = 'default'
@@ -548,21 +629,31 @@ export default {
         cellKey = 'cellRenderer'
       }
       return {
-        [headerKey]: () => (
-          <span className='head-span' title={lang.value.indexOf('zh') > -1 ? columnConfg.metaNameZh : columnConfg.metaNameEn}>
-            { columnConfg.requiredFlag == '1' ? <span style="color: rgb(245, 34, 45); margin-right: 3px;">*</span> : '' }
-            { columnConfg.headerRender ? columnConfg.headerRender(h, { props, config: columnConfg, lang, rootValue, selects })
-                : (lang.value.indexOf('zh') > -1 ? columnConfg.metaNameZh : columnConfg.metaNameEn)
-            }
-            {
-              columnConfg.hintFlag == '1' ? (
-                <ElTooltip effect="dark" content={lang.value.indexOf('zh') > -1 ? columnConfg.hintContentZh : columnConfg.hintContentEn} placement="top">
-                  <elIcon style="fontSize: 16px; verticalAlign: sub; margin-left: 3px;"><QuestionFilled /></elIcon>
-                </ElTooltip>
-              ) : null
-            }
-          </span>
-        ),
+        [headerKey]: () => {
+          let retVnode = (
+            <span className='head-span' title={lang.value.indexOf('zh') > -1 ? columnConfg.metaNameZh : columnConfg.metaNameEn}>
+              { columnConfg.requiredFlag == '1' ? <span style="color: rgb(245, 34, 45); margin-right: 3px;">*</span> : '' }
+              { columnConfg.headerRender ? columnConfg.headerRender(h, { props, config: columnConfg, lang, rootValue, selects })
+                  : (lang.value.indexOf('zh') > -1 ? columnConfg.metaNameZh : columnConfg.metaNameEn)
+              }
+              {
+                columnConfg.hintFlag == '1' ? (
+                  <ElTooltip effect="dark" content={lang.value.indexOf('zh') > -1 ? columnConfg.hintContentZh : columnConfg.hintContentEn} placement="top">
+                    <elIcon style="fontSize: 16px; verticalAlign: sub; margin-left: 3px;"><QuestionFilled /></elIcon>
+                  </ElTooltip>
+                ) : null
+              }
+            </span>
+          )
+          if (isVirtualized.value) {
+            retVnode = (
+              <div className="table-v2-cell">
+                {retVnode}
+              </div>
+            )
+          }
+          return retVnode
+        },
         [cellKey]: (params) => {
           let row = params.row
           let $index = params.$index
@@ -570,31 +661,48 @@ export default {
             row = params.rowData
             $index = params.rowIndex
           }
+          let retVnode = null
           if (row.totalFlag) {
-            return totalCodeRenders.value[columnConfg.metaCode] ? totalCodeRenders.value[columnConfg.metaCode]({
+            retVnode = totalCodeRenders.value[columnConfg.metaCode] ? totalCodeRenders.value[columnConfg.metaCode]({
               val: row[columnConfg.metaCode],
               row,
               h
             }) : null
+          } else {
+            // const config = columnConfg
+            const config = multiPmPageMetaList.value?.[$index]?.[configIdx]
+            retVnode = (
+              tableColumnNotRender(config) ? null :
+              <Renderer key={`${config.columnId}-${config.rowIndex}`} class="error-tip-block" rowScope={{row, $index}} modelValue={getValue($index)} onUpdate:modelValue={(val) => { onUpdateModelValue(val, $index) }} config={config}></Renderer>
+            )
           }
-          // const config = columnConfg
-          const config = multiPmPageMetaList.value?.[$index]?.[configIdx]
-          return (
-            tableColumnNotRender(config) ? null :
-            <Renderer key={`${config.columnId}-${config.rowIndex}`} class="error-tip-block" rowScope={{row, $index}} modelValue={getValue($index)} onUpdate:modelValue={(val) => { onUpdateModelValue(val, $index) }} config={config}></Renderer>
-          )
+          if (isVirtualized.value) {
+            retVnode = (
+              <div className="table-v2-cell" onMouseenter={(e) => cellMouseEnenter(e)} onMouseout={(e) => cellMouseout(e)}>
+                {retVnode}
+              </div>
+            )
+          }
+          return retVnode
         }
       }
     }
 
     function generateRenderVnode() {
       if (isVirtualized.value) {
-        let height = '500px'
+        let autoResizerStyle = {
+          height: tableProps.height
+        } 
         if (!dataList.value?.length) {
-          height = '100px'
+          autoResizerStyle.height = 100
+        } else {
+          if (!autoResizerStyle.height) {
+            autoResizerStyle.height = Math.min((dataList.value?.length) * 40, 350)
+          }
         }
+        autoResizerStyle.height = `${parseInt(autoResizerStyle.height)}px`
         return (
-          <ElAutoResizer style={{height}}>
+          <ElAutoResizer style={autoResizerStyle}>
             {{
               default: ({ height, width }) => {
                 const columns = tableColumnConfigs.value.map((columnConfg, configIdx) => {
@@ -652,6 +760,13 @@ export default {
     return () => {
       return (
         <div class="custom-component-table">
+          <ElTooltip
+            placement="top"
+            visible={toopTip.show && !!toopTip.triggerRef}
+            content={toopTip.content}
+            virtualTriggering
+            virtualRef={toopTip.triggerRef}
+          ></ElTooltip>
           { generateRenderVnode() }
           {
             pageable.value ? 

package/src/components/packages-web/ElButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <ElButton @click.stop="buttonAction" v-bind="{...calcAttrs, ...calcPorps}">
+  <ElButton @click.stop="buttonAction" v-bind="{...calcAttrs, ...calcPorps}" :class="{'el-button--def': isDefSize}">
     {{label}}
     <template v-for="(_, keyaa) in slots" :key="keyaa" v-slot:[keyaa]="scope">
       <slot :name="keyaa" v-bind="scope"></slot>
@@ -20,9 +20,13 @@ const slots = useSlots()
 const props = defineProps({
   ...commonPropsType,
   ...ElButton.props,
+  size: String,
   plain: [String, Number, Boolean],
   circle: [String, Number, Boolean]
 })
+const isDefSize = computed(() => {
+  return props?.config?.widgetSize === 'def'
+})
 const calcPorps = computed(() => {
   const ret = Object.keys(ElButton.props).reduce((total, key) => {
     total[key] = props[key]
@@ -55,6 +59,9 @@ const calcPorps = computed(() => {
   if (ret.type === 'info') {
     ret.type = ''
   }
+  if (ret.size === 'def') {
+    ret.size = ''
+  }
   return ret
 })