resolver-egretimp-plus 0.0.4

package/src/components/packages/CustomComponentTabPaneH5.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { computed, inject, useAttrs } from 'vue'
+import Renderer from '../../renderer.jsx'
+import { commonPropsType } from '../../utils/index.js'
+const lang = inject('lang')
+const props = defineProps({
+  ...commonPropsType,
+})
+const attrs = useAttrs()
+const tabProps = computed(() => {
+  return {
+    label: lang.value.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn,
+    name: props.config?.metaCode,
+    disabled: props.config?.editFlag === '0'
+  }
+})
+const modelValue = defineModel()
+const pmPageMetaList = computed(() => {
+  return (props.config.pmPageMetaList || [])
+})
+
+</script>
+
+<template>
+  <cmi-tab-content  v-bind="{...attrs, ...tabProps}">
+    <slot>
+      <Renderer :config="pmPageMetaList" v-model="modelValue"></Renderer>
+    </slot>
+  </cmi-tab-content>
+</template>

package/src/components/packages/CustomComponentTable.jsx

@@ -0,0 +1,406 @@
+  
+import { ElTable, ElTableColumn, ElPagination } from 'element-plus'
+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 } from '../../utils/index.js'
+import '../styles/CustomComponenTable.scss'
+
+export default {
+  props: {
+    ...commonPropsType,
+    ...ElTable.props,
+    ...ElPagination.props
+  },
+  setup(props, { expose, attrs }) {
+    const tableProps = computed(() => {
+      const porpsObj =  Object.keys(ElTable.props).reduce((ret, key) => {
+        if (props[key] !== undefined && props[key] !== null) {
+          ret[key] = props[key]
+        }
+        return ret
+      }, {})
+      if (!porpsObj.border) {
+        porpsObj.border = true
+      }
+      if (!porpsObj.stripe) {
+        porpsObj.stripe = true
+      }
+      return porpsObj
+    })
+
+    const getCompEvents = (comp) => {
+      let emitKeys = comp.emits
+      if(!Array.isArray(emitKeys)) {
+        emitKeys = Object.keys(emitKeys)
+      }
+      return emitKeys.reduce((ret, key) => {
+        const eventKey = capitalize(camelize(eventKey))
+        if (hasOwn(attrs, eventKey)) {
+          ret[eventKey] = attrs[eventKey]
+        }
+        return ret
+      }, {})
+    }
+
+    const tableEvents = computed(() => {
+      return getCompEvents(ElTable)
+    })
+    const pagenationEvents = computed(() => {
+      return getCompEvents(ElPagination)
+    })
+
+    const lang = inject('lang')
+    const rootValue = inject('rootValue')
+    const selects = inject('selects')
+    const tableColumnFirstMetaCode = ref("")
+    const tableColumnConfigs = computed(() => {
+      let pmPageMetaList = props.config.pmPageMetaList || []
+      return pmPageMetaList.map((config) => {
+        if (config.displayType === DISPLAY_SHOW && !tableColumnFirstMetaCode.value) {
+          tableColumnFirstMetaCode.value = config.metaCode
+        }
+        return normalColumnConfig(config)
+      })
+    })
+
+    // 获取表格列的属性配置
+    const getTableColumnProps = (config, idx) => {
+      const nextList = tableColumnConfigs.value.slice(idx + 1)
+      const nextConfig = nextList.find(config => config.displayType === DISPLAY_SHOW)
+      const props =  Object.keys(ElTableColumn.props).reduce((ret, key) => {
+        if (config[key]) {
+          ret[key] = config[key]
+        }
+        return ret
+      }, {})
+      if (!props.prop) {
+        props.prop = config.metaCode
+      }
+      if (!props.columnWidth) {
+        props.minWidth = '160px'
+      }
+      if (props.width == 0 || props.width == '0px') {
+        props.className = 'hidden-column'
+        props.width = '1px'
+      }
+      if (nextConfig && (nextConfig.width == 0 || nextConfig.width == '0px')) {
+        props.className = `${props.className || ''} next-hidden-column`
+      }
+      if (isPlainColumn({...config, isColumn: true}, calcDisable(config, props.mode))) {
+        props['show-overflow-tooltip'] = true
+      }
+      return props
+    }
+
+    // 获取表格的配置，这边会做一下配置转化，表格中的不需要labelWidth
+    const normalColumnConfig = (config) => {
+      return {
+        ...config,
+        labelWidth: '0px'
+      }
+    }
+
+    // 列中是否需要展示render渲染
+    const tableColumnNotRender = (config) => {
+      if (!config) return true
+      // if (config['show-overflow-tooltip'] || config.showOverflowTooltip) return true
+      // 'selection', 'index' 是el-table属性type中type的两个枚举，这两个直接使用默认效果
+      if (['selection', 'index'].includes(config.type)) {
+        return true
+      }
+      const metaTypeNotRender = TABLE_COLUMN_NOT_RENDER_META_TYPE.some(metaType => compareComponet(metaType, config.metaType)) || !config.metaType
+      return !config.renderby && metaTypeNotRender
+    }
+
+    const getValue = (idx) => {
+      return props.refValue.value?.[idx]
+    }
+    const onUpdateModelValue = (val, idx) => {
+      if (!props.refValue.value) {
+        props.refValue.value = []
+      }
+      props.refValue.value[idx] = val
+    }
+
+    const multiPmPageMetaList = computed(() => {
+      return props.config.multiPmPageMetaList || []
+    })
+
+    /**
+     * 设置 multiPmPageMetaList 的值
+     * multiPmPageMetaList值主要作用是区分列的每一行都需要有单独的config，接口配置返回的只是列的配置，
+     * 所以这边需要单独再坐下处理
+     */
+    const rowColumnConfgsMap = new Map()
+    watch(() => {
+      return props.refValue?.value
+    }, (length) => {
+      let list = []
+      if (length) {
+        const newVal = props.refValue?.value
+        list = newVal.map((row, idx) => {
+          const columnsCgs = rowColumnConfgsMap.get(row)
+          if (columnsCgs) {
+            columnsCgs.forEach(config => {
+              config.rowIndex = idx
+            })
+            return columnsCgs
+          } else {
+            const retColumnConfigs = tableColumnConfigs.value.map((config, relIdx) => {
+              const ret = cloneDeep(config)
+              if (ret.width && !ret.columnWidth) {
+                ret.columnWidth = ret.width
+                delete ret.width
+              }
+              ret.columnId = generateUniqueId()
+              ret.rowIndex = idx
+              ret.isColumn = true
+              ret.refConfig = props?.config?.pmPageMetaList?.[relIdx]
+              ret.parent = props?.config // 这边手动设置一下，防止组件复用的时候不会刷新，造成parent的丢失
+              return ret
+            })
+            rowColumnConfgsMap.set(row, retColumnConfigs)
+            return retColumnConfigs
+          }
+        })
+      }
+      props.config.multiPmPageMetaList = list
+    }, {
+      immediate: true,
+      deep: true,
+    })
+    // 统计行定义 ====start======
+    const totalMetaCodes = computed(() => {
+      return props.config?.totalMetaCodes || []
+    })
+    const normalTotalCodes = computed(() => {
+      return totalMetaCodes.value.map(code => {
+        if (typeof code === 'string') {
+          return {
+            code,
+            totalFn: defaultTotalFn
+          }
+        } else {
+          if (isPlainObject(code) && hasOwn(code, 'code')) {
+            code.totalFn = typeof code.totalFn === 'function' ? code.totalFn : defaultTotalFn
+            return code
+          }
+          return null
+        }
+      }).filter(codeInfo => !!codeInfo)
+    })
+    const totalCodeRenders = computed(() => {
+      const defaultTotalObj = {
+        [tableColumnFirstMetaCode.value]: () => {
+          return <div>{lang.value.indexOf('zh') > -1 ? '总计' : 'Total'}</div>
+        }
+      }
+      return normalTotalCodes.value.reduce((ret, codeInfo) => {
+        const { code, render } = codeInfo
+        if (render && typeof render === 'function') {
+          ret[code] = render
+        }
+        return ret
+      }, defaultTotalObj)
+    })
+    const defaultTotalFn = (total, val, row) => {
+      if (val === undefined || val === null) {
+        val = !isNaN(Number(val)) ? 0 : ''
+      } else {
+        val = val.toString().replace(/[^\d\.]/g, '')
+      }
+      const numFlag = !isNaN(Number(val))
+      if (total === null || total === undefined) {
+        total = numFlag ? 0 : ''
+      }
+      return total + (numFlag ? Number(val) : val)
+    }
+    const totalRow = computed(() => {
+      if (!props.refValue.value?.length || !totalMetaCodes.value.length || !normalTotalCodes.value.length) {
+        return []
+      }
+      // 进行统计的计算
+      const row = (props.refValue.value || []).reduce((total, row) => {
+        normalTotalCodes.value.forEach(codeInfo => {
+          const { code, totalFn } = codeInfo
+          total[code] = totalFn(total[code], row[code], row)
+        })
+        return total
+      }, { totalFlag: true })
+      return [row]
+    })
+    // 统计行定义 ====end======
+
+    // 表格是否开启啦可选择配置
+    const selectable = computed(() => {
+      return props.config?.selectable
+    })
+    const selectedRow = ref(null)
+    const currentChange = (row) => {
+      selectedRow.value = row
+      tableEvents?.onCurrentChange?.(row)
+    }
+    const multipleSelection = ref([])
+    const handleSelectionChange = (val) => {
+      multipleSelection.value = val
+    }
+
+    // 是否配置分页功能     ====== start======
+    const pageable = computed(() => {
+      return props.config?.pageable
+    })
+    const pageAlign = computed(() => {
+      return props.config?.pageAlign
+    })
+    const PAGE_LEFT = 'left'
+    const PAGE_CENTER = 'center'
+    const PAGE_RIGHT = 'right'
+    const pageAlignEnmu = {
+      [PAGE_LEFT]: 'flex-start',
+      [PAGE_RIGHT]: 'flex-end',
+      [PAGE_CENTER]: 'center'
+    }
+    // 获取分页功能属性
+    const paginationProps = computed(() => {
+      const attrs =  Object.keys(ElPagination.props).reduce((ret, key) => {
+        if (hasOwn(props.config, key)) {
+          ret[key] = props.config[key]
+        }
+        return ret
+      }, {})
+      if (!hasOwn(attrs, 'background')) {
+        attrs.background = true
+      }
+      if (!hasOwn(attrs, 'layout')) {
+        attrs.layout = 'prev, pager, next, sizes, jumper'
+      }
+      if (!hasOwn(attrs, 'page-sizes') && !hasOwn(attrs, 'pageSizes')) {
+        attrs.pageSizes = [5, 10, 20, 40]
+      }
+      return attrs
+    })
+    const page = reactive({
+      pageNum: 1,
+      pageSize: 5,
+      total: 0,
+    })
+    // 页码变动
+    watch(() => page.pageNum, (val) => {
+      const fn = props.config?.currentChange
+      const ret = fn && fn(val, props, page)
+      if (ret) {
+        if (isPromise(ret)) {
+          ret.then((res) => {
+            res && (props.refValue.value = res)
+          })
+        } else {
+          props.refValue.value = ret
+        }
+      }
+    })
+    // 页面大小变动
+    watch(() => page.pageSize, (val) => {
+      const fn = props.config?.sizeChange
+      const ret = fn && fn(val, props, page)
+      if (ret) {
+        if (isPromise(ret)) {
+          ret.then((res) => {
+            res && (props.refValue.value = res)
+          })
+        } else {
+          props.refValue.value = ret
+        }
+      }
+    })
+
+    const tableExposeKeys = [
+      'clearSelection',
+      'getSelectionRows',
+      'toggleRowSelection',
+      'toggleAllSelection',
+      'toggleRowExpansion',
+      'setCurrentRow',
+      'clearSort',
+      'clearFilter',
+      'doLayout',
+      'sort',
+      'scrollTo',
+      'setScrollTop',
+      'setScrollLeft',
+      'columns'
+    ]
+    const tableRef = ref(null)
+    const tableExpose = tableExposeKeys.reduce((ret, key) => {
+      ret[key] = (...arg) => {
+        tableRef.value?.[key](...arg)
+      }
+      return ret
+    }, {})
+
+    // 是否配置分页功能     ====== end======
+    expose({
+      multipleSelection,
+      selectedRow,
+      page,
+      ...tableExpose
+    })
+
+    // console.log('dynamicMapComp===:', inject('dynamicMapComp'))
+    return () => {
+      return (
+        <div class="custom-component-table">
+          <ElTable {...tableProps.value} {...tableEvents}
+            ref={(e) => {tableRef.value = e}}
+            highlight-current-row={selectable.value || tableProps.value?.highlightCurrentRow ? true : false}
+            onCurrentChange={selectable.value ? currentChange : () => {}}
+            data={[...(props.refValue.value || []), ...totalRow.value]}
+            onSelectionChange={handleSelectionChange}
+          >
+            {
+              tableColumnConfigs.value.map((columnConfg, configIdx) => {
+                return columnConfg.displayType == DISPLAY_HIDDEN ? null : (
+                  <ElTableColumn key={columnConfg.requiredFlag} {...getTableColumnProps(columnConfg, configIdx)}>
+                    {{
+                      header: () => (
+                        <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)
+                          }
+                        </span>
+                      ),
+                      // default: ({row, $index}) => {
+                      //   return getValue($index)?.[columnConfg.metaCode]
+                      // }
+                      default: ({row, $index}) => {
+                        if (row.totalFlag) {
+                          return totalCodeRenders.value[columnConfg.metaCode] ? totalCodeRenders.value[columnConfg.metaCode]({
+                            val: row[columnConfg.metaCode],
+                            row,
+                            h
+                          }) : null
+                        }
+                        const config = multiPmPageMetaList.value?.[$index]?.[configIdx]
+                        return (
+                          tableColumnNotRender(config) ? null :
+                            <Renderer key={`${config.columnId}-${config.rowIndex}`} class="error-tip-block" modelValue={getValue($index)} rowScope={{row, $index}} onUpdate:modelValue={(val) => { onUpdateModelValue(val, $index) }} config={config}></Renderer>
+                        )
+                      }
+                    }}
+                  </ElTableColumn>
+                )
+              })
+            }
+          </ElTable>
+          {
+            pageable.value ? 
+              <div class="pagination-wrap" style={{'justify-content': pageAlignEnmu[pageAlign.value || PAGE_RIGHT]}}>
+                <ElPagination { ...paginationProps.value } {...pagenationEvents} v-model:current-page={page.pageNum} v-model:page-size={page.pageSize} total={page.total}></ElPagination>
+              </div>
+              : null
+          }
+        </div>
+      )
+    }
+  }
+}

package/src/components/packages/CustomComponentTableH5.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { commonPropsType } from '../../utils/index.js'
+import { computed, inject, ref, useAttrs, watch } from 'vue'
+
+const attrs = useAttrs()
+const lang = inject('lang')
+const tableRef = ref(null)
+const props = defineProps({
+  ...commonPropsType,
+})
+const tableData = ref([])
+const modelValue = defineModel()
+const tableProps = computed(() => {
+  return {
+    stripe: props.config?.stripe === '1',
+    card: props.config?.displayType === 'card',
+    display: props.config?.display,
+    open: props.config?.open === '1',
+    showlandscape: props.config?.showlandscape === '1',
+  }
+})
+
+const pmPageMetaList = computed(() => {
+  return (props.config.pmPageMetaList || [])
+})
+
+const getTableColumnProps = (config) => {
+  return {
+    label: lang?.value?.indexOf('zh') > -1 ? config.metaNameZh : config.metaNameEn,
+    prop: config.metaCode,
+    width: config.columnWidth,
+    ellipsis: config.ellipsis === '1',
+    showexpand: config.showexpand === '1'
+  }
+}
+
+watch(modelValue, (val) => {
+  setTimeout(() => {
+    tableData.value = val || (tableProps.value.card ? [{}] : [])
+  }, 100);
+  tableRef.value?.setTableData(val || [])
+}, {
+  immediate: true
+})
+</script>
+<template>
+  <cmi-table ref="tableRef" :key="`${tableProps.card}${tableProps.display}`" v-bind="tableProps" :data="tableData">
+    <cmi-table-column
+      v-for="column in pmPageMetaList" :key="column.metaCode"
+      v-bind="{
+        ...attrs,
+        ...getTableColumnProps(column)
+      }"
+    >
+    </cmi-table-column>
+  </cmi-table>
+</template>
+<style></style>

package/src/components/packages/CustomComponentTabs.vue

@@ -0,0 +1,75 @@
+<template>
+  <Tabs :class="[`tabs-level-${level}`, fullBorder ? 'full-border' : '']" v-bind="{...transTabsProps, ...attrs}" v-model="activeNames">
+    <Renderer :config="tabpanes" v-model="props.refValue.value"></Renderer>
+  </Tabs>
+</template>
+<script setup>
+import { ElTabs } from 'element-plus'
+import Tabs from '../tabs'
+import Renderer from '../../renderer.jsx'
+import { computed, useAttrs } from 'vue'
+import { commonPropsType, hasOwn } from '../../utils/index.js'
+
+// import * as lib from 'element-plus/es/utils/index.mjs'
+
+const props = defineProps({
+  ...ElTabs.props,
+  ...commonPropsType,
+})
+const attrs = useAttrs()
+const tabsProps = computed(() => {
+  return Object.keys(ElTabs.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  }, {})
+})
+const tabpanes = computed(() => {
+  return props.config.pmPageMetaList || []
+})
+const activeNames = computed({
+  get() {
+    const currentTab = tabpanes.value.find(tab => tab.defaultShowFlag === '1')
+    const currentCycleTab = tabpanes.value.find(tab => tab.currentCode)
+    return (currentTab && currentTab.metaCode)
+      || (currentCycleTab && currentCycleTab.currentCode)
+      || (tabpanes.value[0] && (tabpanes.value[0].metaType === 'CustomComponentTabPane' && tabpanes.value[0].metaCode) || (tabpanes.value[0].metaType === 'CustomComponentCycleTabPane' && `${tabpanes.value[0].metaCode}-0`))
+  },
+  set(val) {
+    tabpanes.value.forEach(tab => {
+      if (tab.metaType === 'CustomComponentTabPane') {
+        if (tab.metaCode === val) {
+          tab.defaultShowFlag = '1'
+        } else {
+          tab.defaultShowFlag = '0'
+        }
+      }
+      if (tab.metaType === 'CustomComponentCycleTabPane') {
+        if (new RegExp(`^${tab.metaCode}-(\d+)$`).test(val)) {
+          tab.currentCode = val
+        } else {
+          tab.currentCode = ''
+        }
+      }
+    })
+  }
+})
+
+const level = computed(() => {
+  return props.config.level || tabpanes.value.find(tabpane => hasOwn(tabpane, 'level'))?.level || 1
+})
+const transTabsProps = computed(() => {
+  return level.value == 1 ? {
+    stretch: true,
+    type: 'border-card'
+  } : level.value == 2 ? {
+  } : level.value == 3 ? {
+    type: 'card'
+  } : tabsProps.value
+})
+/**
+ * 层级为一的时候，并且只有一个页签，激活的页签头，应该有分割线
+ */
+const fullBorder = computed(() => {
+  return tabpanes.value.length === 1 && level.value == 1
+})
+</script>

package/src/components/packages/CustomComponentTabsH5.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { computed, inject, useAttrs } from 'vue'
+import { commonPropsType, hasOwn } from '../../utils/index.js'
+import Renderer from '../../renderer.jsx'
+import CustomComponentTabPaneH5 from './CustomComponentTabPaneH5.vue'
+
+const props = defineProps({
+  ...commonPropsType,
+})
+
+const lang = inject('lang')
+const attrs = useAttrs()
+const modelValue = defineModel()
+const tabpanes = computed(() => {
+  return props.config.pmPageMetaList || []
+})
+
+const activeNames = computed({
+  get() {
+    const currentTab = tabpanes.value.find(tab => tab.defaultShowFlag === '1')
+    const currentCycleTab = tabpanes.value.find(tab => tab.currentCode)
+    return (currentTab && currentTab.metaCode)
+      || (currentCycleTab && currentCycleTab.currentCode)
+      || (tabpanes.value[0] && (tabpanes.value[0].metaType === 'CustomComponentTabPaneH5' && tabpanes.value[0].metaCode) || (tabpanes.value[0].metaType === 'CustomComponentCycleTabPaneH5' && `${tabpanes.value[0].metaCode}-0`))
+  },
+  set(val) {
+    tabpanes.value.forEach(tab => {
+      if (tab.metaType === 'CustomComponentTabPane') {
+        if (tab.metaCode === val) {
+          tab.defaultShowFlag = '1'
+        } else {
+          tab.defaultShowFlag = '0'
+        }
+      }
+      if (tab.metaType === 'CustomComponentCycleTabPane') {
+        if (new RegExp(`^${tab.metaCode}-(\d+)$`).test(val)) {
+          tab.currentCode = val
+        } else {
+          tab.currentCode = ''
+        }
+      }
+    })
+  }
+})
+const tabProps = computed(() => {
+  return {
+    activekey: activeNames.value,
+    sticky: props.config?.sticky == '1',
+    offsettop: (props.config?.offsetTop || '0') + 'vw',
+    type: props.config.displayType,
+    title: lang.value?.indexOf('zh') > -1 ? props.config.metaNameZh : props.config.metaNameEn
+  }
+})
+
+const getValue = (code) => {
+  return modelValue.value?.[code]
+}
+const onUpdateModelValue = (val, code) => {
+  if (!modelValue.value) {
+    modelValue.value = {
+      [code]: val
+    }
+  } else {
+    modelValue.value[code] = val
+  }
+}
+
+</script>
+
+<template>
+  <cmi-tabs class="custom-component-tabs-h5" v-bind="{...attrs, ...tabProps}">
+    <CustomComponentTabPaneH5 
+      v-for="tabpane in tabpanes" :config="tabpane" :key="tabpane.metaId"
+    >
+      <Renderer :config="tabpane?.pmPageMetaList || []" :additionConfigs="[tabpane]" :modelValue="getValue(tabpane.metaCode)" @update:modelValue="(val) => { onUpdateModelValue(val, tabpane.metaCode) }"></Renderer>
+    </CustomComponentTabPaneH5>
+  </cmi-tabs>
+</template>
+
+<style lang="scss" scoped>
+.custom-component-tabs-h5 {
+  // &.cmi-tabs {
+  //   --cmi-tab-item-min-width: 90px;
+  // }
+}
+</style>

package/src/components/packages/CustomComponentTree.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { ElTree } from 'element-plus'
+import { computed, useAttrs } from "vue";
+import { commonPropsType } from '../../utils/index.js'
+
+const props = defineProps({
+  ...commonPropsType,
+  ...ElTree.props
+})
+
+const attrs = useAttrs()
+const calcProps = computed(() => {
+  return Object.keys(ElTree.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  }, {})
+})
+const options = computed(() => {
+  return props.options || []
+})
+
+</script>
+<template>
+  <el-tree
+    v-bind="{...attrs, ...calcProps}"
+    :data="options"
+  />
+</template>