resolver-egretimp-plus 0.1.113 → 0.1.115

package/src-bak/components/packages-web/CustomComponentCol.vue

@@ -0,0 +1,66 @@
+<template>
+  <ElCol class="custom-component-row" :class="classRef" v-bind="{...elRowProps, ...attrs}">
+    <ElRow>
+      <Renderer :config="pmPageMetaList" v-model="props.refValue.value"></Renderer>
+    </ElRow>
+  </ElCol>
+</template>
+<script setup>
+import Renderer from '../../renderer.jsx'
+import { ElCol, ElRow } from 'element-plus'
+import { computed, defineProps, useAttrs } from 'vue'
+import { commonPropsType } from '../../utils/index.js'
+
+defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  ...commonPropsType,
+  ...ElCol.props
+})
+const elRowProps = computed(() => {
+  return Object.keys(ElCol.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  }, {})
+})
+const attrs = useAttrs()
+
+const classRef = computed(() => {
+  return {
+    'clear-right-margin': !reserveRightMargin.value,
+    'clear-bottom-margin': !reserveBottomMargin.value,
+  }
+})
+
+const pmPageMetaList = computed(() => {
+  return props.config?.pmPageMetaList || []
+})
+// 保留内部formItem的margin-right
+const reserveRightMargin = computed(() => {
+  return props.config?.reserveRightMargin
+})
+// 保留内部formItem的margin-bottom
+const reserveBottomMargin = computed(() => {
+  return props.config?.reserveBottomMargin
+})
+</script>
+<style lang="scss">
+.clear-right-margin {
+  .el-col {
+    & > {
+      .el-form-item, .simple-form-item {
+        margin-right: 0;
+      }
+    }
+  }
+}
+.clear-bottom-margin {
+  .el-col {
+    & > {
+      .el-form-item, .simple-form-item {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+</style>

package/src-bak/components/packages-web/CustomComponentCollapse.vue

@@ -0,0 +1,164 @@
+<template>
+  <component :is="component" class="standard-wrap" v-bind="{...attrs, ...componentProps}">
+    <ElCollapse v-bind="{...collapseProps}" :class="collapseClass" v-model="activeNames">
+      <ElCollapseItem v-bind="collapseItemProps" :class="collapseItemClass">
+        <template #title>
+          <div class="collapge-slot-title">
+            <ElRow align="middle" :class="polyElClass">
+              <span>{{ lang.indexOf('zh') > -1 ? props.config.metaNameZh : props.config.metaNameEn }}</span>
+              <Renderer @click="stopPropagation" :config="rightSlotPmPageMetaList" v-model="props.refValue.value"></Renderer>
+            </ElRow>
+            <ElRow>
+              <Renderer @click="stopPropagation" :config="slotPmPageMetaList" v-model="props.refValue.value"></Renderer>
+            </ElRow>
+          </div>
+        </template>
+        <ElRow>
+          <Renderer :config="pmPageMetaList" v-model="props.refValue.value"></Renderer>
+        </ElRow>
+      </ElCollapseItem>
+    </ElCollapse>
+  </component>
+</template>
+<script setup>
+import { ElCollapse, ElCollapseItem, ElCard, ElRow } from 'element-plus'
+import Renderer from '../../renderer.jsx'
+import { computed, inject, useAttrs, defineEmits, defineProps } from 'vue'
+import { commonPropsType, hasOwn } from '../../utils/index.js'
+import { reactive } from 'vue'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  ...ElCollapse.props,
+  ...ElCollapseItem.props,
+  ...commonPropsType,
+  showSegment: {
+    type: String,
+    default: '0'
+  }
+})
+// debugger
+
+const attrs = useAttrs()
+
+const lang = inject('lang')
+const activeNames = computed({
+  get() {
+    return props.config.defaultOpenFlag == '1' ? [props.config.metaCode] : []
+  },
+  set(val) {
+    props.config.defaultOpenFlag = val.length > 0 ? '1' : '0'
+  }
+})
+
+const collapseProps = computed(() => {
+  return Object.keys(ElCollapse.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  }, {})
+})
+// 是否禁止折叠
+const noCollpase = computed(() => {
+  return props?.config?.noCollpase == '1'
+})
+// 隐藏头
+const hiddenHead = computed(() => {
+  return props?.config?.hiddenHead == '1'
+})
+
+// 隐藏标题做边的绿标
+const hiddenHeadFlag = computed(() => {
+  return props?.config?.hiddenHeadFlag == '1'
+})
+// 是否显示头分割线
+const showSegment = computed(() => {
+  return props?.showSegment == '1'
+})
+
+const polyElClass = reactive({
+  'hidden-head-flag': hiddenHeadFlag.value
+})
+
+const collapseClass = computed(() => {
+  return {
+    'underline-hidden': hasOwn(props.config, 'underlineHidden') ?  props.config.underlineHidden : noCollpase.value,
+    'not-wrap-border': !props.config.needSegment
+  }
+})
+
+const collapseItemClass = computed(() => {
+  return {
+    'no-collpase': noCollpase.value,
+    'hidden-head': hiddenHead.value,
+    'show-segment': showSegment.value && (activeNames.value?.length > 0)
+  }
+})
+
+const collapseItemProps = computed(() => {
+  const propsObj = Object.keys(ElCollapseItem.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  }, {})
+  propsObj.name = props.config.metaCode
+  if (noCollpase.value) {
+    propsObj.disabled = true
+  }
+  return propsObj
+})
+
+const pmPageMetaList = computed(() => {
+  return props.config?.pmPageMetaList?.filter(item => !item.collapseSlot && !item.collapseRightSlot) || []
+})
+
+const slotPmPageMetaList = computed(() => {
+  return props.config?.pmPageMetaList?.filter(item => item.collapseSlot) || []
+})
+
+const rightSlotPmPageMetaList = computed(() => {
+  return props.config?.pmPageMetaList?.filter(item => item.collapseRightSlot) || []
+})
+
+const stopPropagation = (e) => {
+  e?.stopPropagation()
+}
+
+const needWrap = computed(() => {
+  return props.config.needWrap === true || props.config.needWrap == '1'
+})
+const component = computed(() => {
+  return needWrap.value ? ElCard : 'div'
+})
+const componentProps = computed(() => {
+  return needWrap.value ? {
+    shadow: 'never'
+  } : {}
+})
+
+</script>
+<style lang="scss" scoped>
+.collapge-slot-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  > .el-row {
+    > span {
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 3px;
+        height: 12px;
+        margin-right: 8px;
+        border-radius: 3px;
+        vertical-align: baseline;
+        background-color: #3271fe;
+      }
+    }
+  }
+}
+</style>

package/src-bak/components/packages-web/CustomComponentCycle.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="custom-component-cycle">
+    <template v-for="(pageMetaList, $index) in (multiPmPageMetaList || [])" :key="pageMetaListKeys[pageMetaList.id]">
+      <component :is="component" v-bind="componentProps">
+        <ElRow>
+          <Renderer :modelValue="modelValue?.[$index]" :rowScope="{row: modelValue?.[$index], $index}" @update:modelValues="onUpdateModelValue($event, $index)" :config="pageMetaList"></Renderer>
+        </ElRow>
+      </component>
+    </template>
+  </div>
+</template>
+<script setup>
+import { computed, defineModel, watch, reactive } from 'vue'
+import { commonPropsType, cloneDeep, definePrivatelyProp } from '../../utils/index.js'
+import { ElRow, ElCard } from 'element-plus'
+import Renderer from '../../renderer.jsx'
+
+// const lang = inject('lang')
+const modelValue = defineModel()
+// setTimeout(() => {
+//   modelValue.value = [{}, {}]
+// }, 3000);
+const props = defineProps({
+  ...commonPropsType,
+})
+
+const onUpdateModelValue = (val, idx) => {
+  if (!modelValue.value) {
+    modelValue.value = []
+  }
+  modelValue.value[idx] = val
+}
+
+/**
+ * 设置 multiPmPageMetaList 的值
+ * multiPmPageMetaList值主要作用是区分列的每一行都需要有单独的config，接口配置返回的只是列的配置，
+ * 所以这边需要单独再坐下处理
+ */
+const multiPmPageMetaList = computed(() => {
+  return props.config.multiPmPageMetaList || []
+})
+const pmPageMetaList = computed(() => {
+  return (props.config.pmPageMetaList || [])
+})
+const rowConfgsMap = new Map()
+const pageMetaListKeys = reactive({})
+watch(() => {
+  return modelValue.value?.length
+}, (length) => {
+  let list = []
+  if (length) {
+    const newVal = modelValue.value
+    list = newVal.map((row, idx) => {
+      const rowCgs = rowConfgsMap.get(row)
+      if (rowCgs) {
+        rowCgs.forEach(config => {
+          config.rowIndex = idx
+        })
+        return rowCgs
+      } else {
+        const retConfigs = pmPageMetaList.value.map(config => {
+          const ret = cloneDeep(config)
+          ret.rowIndex = idx
+          return ret
+        })
+        retConfigs.id = new Date().getTime()
+        pageMetaListKeys[retConfigs.id] = new Date().getTime()
+
+        rowConfgsMap.set(row, retConfigs)
+        return retConfigs
+      }
+    })
+  }
+  definePrivatelyProp(props.config, 'multiPmPageMetaList', list)
+}, {
+  immediate: true
+})
+
+const component = computed(() => {
+  return props.config.needWrap === false ? 'div' : ElCard
+})
+const componentProps = computed(() => {
+  return props.config.needWrap === false ? {} : {
+    shadow: 'never'
+  }
+})
+</script>
+<style lang="scss">
+.custom-component-cycle {
+  // width: 100%;
+  .el-card + .el-card {
+    margin-top: 16px;
+  }
+}
+</style>

package/src-bak/components/packages-web/CustomComponentCycleTabPane.vue

@@ -0,0 +1,155 @@
+<template>
+  <TabPane v-for="(pageMetaList, $index) in (multiPmPageMetaList || [])" v-bind="{...tabPaneProps}" :key="pageMetaListKeys[pageMetaList.id]" :label="`${lang.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn}-${$index}`" :name="`${props.config?.metaCode}-${$index}`">
+    <template #label v-if="labelRenderContentFn || pageMetaList.filter(config => config.collapseSlot).length">
+      <component
+        v-if="labelRenderContentFn"
+        :is="labelRenderContentFn(
+          getLableRenderParams(
+            modelValue?.[$index],
+            props.activeNames === `${props.config?.metaCode}-${$index}`,
+            multiPmPageMetaList.length,
+            $index
+          )
+        )"
+        ></component>
+      <Renderer v-else :modelValue="modelValue?.[$index]" :rowScope="{row: modelValue?.[$index], $index}" @update:modelValues="onUpdateModelValue($event, $index)" :config="pageMetaList.filter(config => config.collapseSlot)"></Renderer>
+    </template>
+    <ElRow>
+      <Renderer
+        :mode="generateModel({
+          data: modelValue?.[$index],
+          index: $index,
+        })"
+        :modelValue="modelValue?.[$index]" :rowScope="{row: modelValue?.[$index], $index}"
+        @update:modelValues="onUpdateModelValue($event, $index)"
+        :config="pageMetaList.filter(config => !config.collapseSlot)"
+      ></Renderer>
+    </ElRow>
+  </TabPane>
+</template>
+<script setup>
+import { ElTabPane, ElRow } from 'element-plus'
+import Renderer from '../../renderer.jsx'
+import { computed, inject, reactive, watch, defineModel, defineProps } from 'vue'
+import { commonPropsType, cloneDeep, definePrivatelyProp } from '../../utils/index.js'
+import { TabPane } from '../tabs'
+import { h } from 'vue'
+import { useAttrs } from 'vue'
+
+defineOptions({
+  inheritAttrs: false
+})
+const attrs = useAttrs()
+const props = defineProps({
+  ...commonPropsType,
+  ...ElTabPane.props,
+  activeNames: String,
+})
+
+const modelValue = defineModel()
+const lang = inject('lang')
+
+const tabPaneProps = computed(() => {
+  const ret = Object.keys(ElTabPane.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  }, {})
+  if (attrs?.class) {
+    ret.class = attrs.class
+  }
+  if (attrs?.style) {
+    ret.style = attrs.style
+  }
+  return ret
+})
+
+// 循环部分逻辑
+const onUpdateModelValue = (val, idx) => {
+  if (!modelValue.value) {
+    modelValue.value = []
+  }
+  modelValue.value[idx] = val
+}
+const generateModel = computed(() => {
+  return (...arg) => {
+    return props?.config?.isDetail?.(...arg) === true ? 'detail' : null
+  }
+})
+
+/**
+ * 设置 multiPmPageMetaList 的值
+ * multiPmPageMetaList值主要作用是区分列的每一行都需要有单独的config，接口配置返回的只是列的配置，
+ * 所以这边需要单独再坐下处理
+ */
+const multiPmPageMetaList = computed(() => {
+  return props.config.multiPmPageMetaList || []
+})
+const pmPageMetaList = computed(() => {
+  return (props.config.pmPageMetaList || [])
+})
+const rowConfgsMap = new Map()
+const pageMetaListKeys = reactive({})
+watch(() => {
+  return modelValue.value?.length
+}, (length) => {
+  let list = []
+  if (length) {
+    const newVal = modelValue.value
+    list = newVal.map((row, idx) => {
+      const rowCgs = rowConfgsMap.get(row)
+      if (rowCgs) {
+        rowCgs.forEach(config => {
+          config.rowIndex = idx
+        })
+        return rowCgs
+      } else {
+        const retConfigs = pmPageMetaList.value.map(config => {
+          const ret = cloneDeep(config)
+          ret.rowIndex = idx
+          return ret
+        })
+        retConfigs.id = new Date().getTime()
+        pageMetaListKeys[retConfigs.id] = new Date().getTime()
+
+        rowConfgsMap.set(row, retConfigs)
+        return retConfigs
+      }
+    })
+  }
+  definePrivatelyProp(props.config, 'multiPmPageMetaList', list)
+}, {
+  immediate: true
+})
+
+// 自定义渲染label方法
+const labelRenderContentFn = computed(() => {
+  if (props.config?.labelRender && typeof props.config?.labelRender == 'function') {
+    return (params) => {
+      const context = props.config?.labelRender?.(params)
+      if (typeof context === 'string') {
+        return h('span', context)
+      } else {
+        return context
+      }
+    }
+  } else {
+    return null
+  }
+})
+function getLableRenderParams(tabPaneData, isActive, total, idx) {
+  return {
+    config: props.config,
+    tabPaneData,
+    isActive,
+    total,
+    currentIndex: idx
+  }
+}
+</script>
+<style lang="scss">
+.el-tabs__item.is-active {
+  .el-text {
+    color: var(--el-color-primary)
+  }
+}
+</style>

package/src-bak/components/packages-web/CustomComponentDialog.vue

@@ -0,0 +1,192 @@
+<template>
+  <ElDialog class="custom-component-dialog" v-bind="{...attrs, ...dialogProps}" :title="title" v-model="dialogValue">
+    <div class="header" v-if="!!title">
+      <span>{{ title }}</span>
+    </div>
+    <el-scrollbar class="content" :style="{height: contentHeight}">
+      <ElRow>
+        <Renderer :config="pmPageMetaList" v-model="modelValue"></Renderer>
+      </ElRow>
+    </el-scrollbar>
+    <div class="footer" v-if="showConfirmButton || showCloseButton">
+      <div class="dialog-footer">
+        <el-button v-if="showCloseButton" @click="toClose">
+          {{lang.indexOf('zh') > -1 ? '关闭' : 'Close'}}
+        </el-button>
+        <el-button v-if="showConfirmButton" type="primary" @click="toConfirm">
+          {{lang.indexOf('zh') > -1 ? '确认' : 'Confirm'}}
+        </el-button>
+      </div>
+    </div>
+  </ElDialog>
+</template>
+<script setup>
+import { ElDialog, ElRow } from 'element-plus'
+import { computed, inject, useAttrs } from 'vue'
+import { commonPropsType, hasOwn } from '../../utils/index.js'
+import Renderer from '../../renderer.jsx'
+
+defineOptions({
+  inheritAttrs: false,
+})
+const lang = inject('lang')
+const modelValue = defineModel()
+const props = defineProps({
+  ...ElDialog.props,
+  ...commonPropsType,
+  titleEn: {
+    type: String,
+    default: ''
+  }
+})
+
+const dialogProps = computed(() => {
+  const attrs =  Object.keys(ElDialog.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  }, {})
+  if (!hasOwn(props.config, 'show-close') && !hasOwn(props.config, 'showClose')) {
+    attrs.showClose = false
+  }
+  return attrs
+})
+const attrs = useAttrs()
+
+const title = computed(() => {
+  return lang.value.indexOf('zh') > -1 ? props.title : props.titleEn
+})
+
+const pmPageMetaList = computed(() => {
+  return props.config?.pmPageMetaList || []
+})
+
+let promiseResolve = null
+let promiseReject = null
+
+// 初始化handlePromise为一个计算属性，为了获取引用次数
+let referenceCount = 0
+let handleProValue = null
+function initHandlePromise() {
+  props.config.handlePromise = computed({
+    get() {
+      referenceCount ++
+      return handleProValue
+    },
+    set(val) {
+      referenceCount = 0
+      handleProValue = val
+    }
+  })
+}
+
+const dialogValue = computed({
+  get() {
+    const val = props?.config?.dialogVisible
+    if (showCloseButton.value || showConfirmButton.value) {
+      if (val) {
+        initHandlePromise()
+        props.config.handlePromise = new Promise((res, rej) => {
+          promiseResolve = res
+          promiseReject = rej
+        })
+      } else {
+        promiseResolve = null
+        promiseReject = null
+        props.config.handlePromise = null
+      }
+
+    }
+    return val
+  },
+  set(val) {
+    props?.config && (props.config.dialogVisible = val)
+  }
+})
+// 是否显示确定按钮
+const showConfirmButton = computed(() => {
+  return (
+    typeof props.config?.showConfirmButton == 'boolean' ? 
+      !!(props.config?.showConfirmButton) :
+      props.config.showConfirmButton == '1'
+  ) || (
+    typeof props.config?.showConfirm == 'boolean' ? 
+      !!(props.config?.showConfirm) :
+      props.config.showConfirm == '1'
+  )
+})
+// 是否显示确定关闭按钮
+const showCloseButton = computed(() => {
+  return hasOwn(props.config, 'showCloseButton') ?
+    (
+      typeof props.config.showCloseButton == 'boolean' ?
+        !!(props.config.showCloseButton) :
+        props.config.showCloseButton == '1'
+    ) :
+    hasOwn(props.config, 'showClose') ?
+      (
+        typeof props.config.showClose == 'boolean' ?
+          !!(props.config.showClose) :
+          props.config.showClose == '1'
+      ) :
+    true
+})
+
+const toConfirm = async () => {
+  let intercept = null
+  let interceptPromise = new Promise((res) => {
+    intercept = res
+  })
+  promiseResolve && promiseResolve({props, next: intercept})
+
+  let res = true
+  if (referenceCount) {
+    res = await interceptPromise
+  }
+  if (res) {
+    dialogValue.value = false
+  }
+  if (!res) {
+    initHandlePromise()
+  }
+  props.config.handlePromise = new Promise((res, rej) => {
+    promiseResolve = res
+    promiseReject = rej
+  })
+}
+const toClose = async () => {
+  let intercept = null
+  let interceptPromise = new Promise((res) => {
+    intercept = res
+  })
+  promiseReject && promiseReject({props, next: intercept})
+
+  let res = true
+  if (referenceCount) {
+    res = await interceptPromise
+  }
+  if (res) {
+    dialogValue.value = false
+  }
+  if (!res) {
+    initHandlePromise()
+  }
+  props.config.handlePromise = new Promise((res, rej) => {
+    promiseResolve = res
+    promiseReject = rej
+  })
+}
+
+const contentHeight = computed(() => {
+  let reduceNum = 0
+  if (!!title.value) {
+    reduceNum += 46
+  }
+  if (showConfirmButton.value || showCloseButton.value) {
+    reduceNum += 72
+  }
+  return `calc(100% - ${reduceNum}px)`
+})
+</script>
+
+<style lang="scss">
+</style>