resolver-egretimp-plus 0.0.4

package/src/components/packages/CustomComponentCollapse.vue

@@ -0,0 +1,183 @@
+<template>
+  <component :is="component" :class="[component === ElCard ? 'is-card' : '']" class="standard-wrap custom-component-collapse" v-bind="{...componentProps, ...attrs}">
+    <ElCollapse v-bind="{...collapseProps}" :class="collapseClass"  v-model="activeNames">
+      <ElCollapseItem v-bind="collapseItemProps" >
+        <template #title>
+          <div class="collapge-slot-title">
+            <span>{{ lang.indexOf('zh') > -1 ? props.config.metaNameZh : props.config.metaNameEn }}</span>
+            <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 } from '../../utils/index.js'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  ...ElCollapse.props,
+  ...ElCollapseItem.props,
+  ...commonPropsType,
+})
+// debugger
+
+const attrs = useAttrs()
+
+const lang = inject('lang')
+
+const collapseProps = computed(() => {
+  return Object.keys(ElCollapse.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  }, {})
+})
+
+const collapseClass = computed(() => {
+  return {
+    'underline-hidden': props.config.underlineHidden,
+    'not-wrap-border': !props.config.needSegment
+  }
+})
+
+const collapseItemProps = computed(() => {
+  const propsObj = Object.keys(ElCollapseItem.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  }, {})
+  propsObj.name = props.config.metaCode
+  return propsObj
+})
+
+const pmPageMetaList = computed(() => {
+  return props.config?.pmPageMetaList?.filter(item => !item.collapseSlot) || []
+})
+
+const slotPmPageMetaList = computed(() => {
+  return props.config?.pmPageMetaList?.filter(item => item.collapseSlot) || []
+})
+
+const stopPropagation = (e) => {
+  e.stopPropagation()
+}
+
+const component = computed(() => {
+  return props.config.needWrap ? ElCard : 'div'
+})
+const componentProps = computed(() => {
+  return props.config.needWrap ? {
+    shadow: 'never'
+  } : {}
+})
+const activeNames = computed({
+  get() {
+    return props.config.defaultOpenFlag === '1' ? [props.config.metaCode] : []
+  },
+  set(val) {
+    props.config.defaultOpenFlag = val.length > 0 ? '1' : '0'
+  }
+})
+
+</script>
+<style lang="scss">
+.collapge-slot-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  > span {
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 3px;
+      height: 12px;
+      margin-right: 8px;
+      border-radius: 3px;
+      vertical-align: middle;
+      background-color: #3271fe;
+    }
+  }
+}
+.not-wrap-border {
+  &.el-collapse {
+    border-top: none;
+    border-bottom: none;
+  }
+}
+</style>
+<style lang="scss">
+// 配置被包裹的一层样式
+.standard-wrap {
+  box-sizing: border-box;
+}
+.custom-component-collapse {
+  .el-collapse-item__wrap, .el-collapse-item__header {
+    border-bottom: none;
+    &::before {
+      display: none;
+    }
+  }
+  .el-collapse-item__wrap {
+    overflow: none;
+  }
+  .el-collapse-item {
+    position: relative;
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      height: 1px;
+      background-color: #d0d3d6;
+      // margin-bottom: var(--prmary-marign);
+    }
+    .el-collapse-item__content {
+      & > .el-row {
+        > .el-col {
+          &:last-child {
+            & > .el-form-item {
+              margin-bottom: 24px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .el-collapse-item__arrow {
+    font-size: 16px;
+    color: #646A73;
+    svg path {
+      d: path("M 338.752 104.704 a 64 64 0 0 0 0 90.496 l 316.8 316.8 l -316.8 316.8 a 64 64 0 0 0 90.496 90.496 l 362.048 -362.048 a 64 64 0 0 0 0 -90.496 L 429.248 104.704 a 64 64 0 0 0 -90.496 0 Z");
+    }
+  }
+  .el-collapse-item__content {
+    .el-tabs {
+      margin-right: 16px;
+      margin-bottom: 16px;
+    }
+  }
+}
+.underline-hidden {
+  .el-collapse-item {
+    &::after {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/packages/CustomComponentCollapseH5.vue

@@ -0,0 +1,37 @@
+<script setup>
+import Renderer from '../../renderer.jsx'
+import { computed, inject, useAttrs, defineEmits, defineProps } from 'vue'
+import { commonPropsType } from '../../utils/index.js'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const modelValue = defineModel()
+const attrs = useAttrs()
+const lang = inject('lang')
+const props = defineProps({
+  ...commonPropsType,
+})
+const collapseProps = computed(() => {
+  return  {
+    title: lang?.value?.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn,
+    open: props.config?.defaultOpenFlag == '1',
+    transition: props.config?.defaultOpenFlag == '1',
+    // hideicon: props.config?.hideicon != '1'
+  }
+})
+
+const pmPageMetaList = computed(() => {
+  return props.config?.pmPageMetaList?.filter(item => !item.collapseSlot) || []
+})
+</script>
+
+<template>
+  <cmi-collapse v-bind="{...attrs, ...collapseProps}">
+    <Renderer :config="pmPageMetaList" v-model="modelValue"></Renderer>
+  </cmi-collapse>
+</template>
+
+<style lang="scss">
+</style>

package/src/components/packages/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 } 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
+      }
+    })
+  }
+  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/components/packages/CustomComponentCycleTabPane.vue

@@ -0,0 +1,92 @@
+<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="pageMetaList.filter(config => config.collapseSlot).length">
+      <Renderer :modelValue="modelValue?.[$index]" :rowScope="{row: modelValue?.[$index], $index}" @update:modelValues="onUpdateModelValue($event, $index)" :config="pageMetaList.filter(config => config.collapseSlot)"></Renderer>
+    </template>
+    <ElRow>
+      <Renderer :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 } from '../../utils/index.js'
+import { TabPane } from '../tabs'
+
+const props = defineProps({
+  ...commonPropsType,
+  ...ElTabPane.props,
+})
+
+const modelValue = defineModel()
+const lang = inject('lang')
+
+const tabPaneProps = computed(() => {
+  return Object.keys(ElTabPane.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  }, {})
+})
+
+// 循环部分逻辑
+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
+      }
+    })
+  }
+  props.config.multiPmPageMetaList = list
+}, {
+  immediate: true
+})
+</script>
+<style lang="scss">
+.el-tabs__item.is-active {
+  .el-text {
+    color: var(--el-color-primary)
+  }
+}
+</style>

package/src/components/packages/CustomComponentDialog.vue

@@ -0,0 +1,162 @@
+<template>
+  <ElDialog class="custom-component-dialog" v-bind="{...dialogProps, ...attrs}" :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'
+
+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
+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) {
+        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 !!(props.config?.showConfirmButton) || !!(props.config?.showConfirm)
+})
+// 是否显示确定关闭按钮
+const showCloseButton = computed(() => {
+  return hasOwn(props.config, 'showCloseButton') ?
+    !!(props.config?.showCloseButton) :
+    hasOwn(props.config, 'showClose') ? !!(props.config?.showClose) : 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
+  }
+  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
+  }
+  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>

package/src/components/packages/CustomComponentEditor.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { computed, inject } from 'vue'
+import { Quill, quillEditor } from 'vue3-quill'
+import { commonPropsType } from '../../utils';
+
+const props = defineProps({
+  ...commonPropsType,
+})
+const lang = inject('lang')
+const modelValue = defineModel()
+
+const editorOption = computed(() => {
+  return {
+    placeholder: props.config[lang?.value?.indexOf('zh') > -1 ? 'defPlacehold' : 'defPlaceholdEn'],
+    modules: {
+    }
+  }
+})
+const editorStyle = computed(() => {
+  return {
+    height: props.config?.contentHeight || '200px'
+  }
+})
+</script>
+<template>
+  <div class="custom-component-editor">
+    <quillEditor
+      ref="fieldEditor"
+      v-model:value="modelValue"
+      :options="editorOption"
+      :disabled="props.disabled"
+      @blur="() => {}"
+      @focus="() => {}"
+      @change="() => {}"
+      :style="editorStyle"
+    ></quillEditor>
+  </div>
+</template>
+<style lang="scss">
+.custom-component-editor {
+  width: 100%;
+}
+</style>

package/src/components/packages/CustomComponentFormLayout.vue

@@ -0,0 +1,63 @@
+<template>
+  <ElForm v-bind="formProps" :ref="refFn" :model="props.modelValue">
+    <ElRow v-bind="rowProps">
+      <Renderer :config="pmPageMetaList" v-model="val"></Renderer>
+    </ElRow>
+  </ElForm>
+</template>
+<script setup>
+import Renderer from '../../renderer.jsx'
+import { computed, inject } from "vue"
+import { ElForm, ElRow } from 'element-plus'
+
+
+const emits = defineEmits(['update:modelValue'])
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => null
+  },
+  // 这个组件通过v-model进行数据的绑定
+  modelValue: {
+    // type: [String, Number, Object],
+    default: null
+  },
+  ...ElForm.props,
+  ...ElRow.props
+})
+
+const rootForm = inject('rootForm')
+const refFn = e => {
+  if (props.config?.rootForm) {
+    rootForm.value = e
+  }
+}
+
+const formProps = computed(() => {
+  return Object.keys(ElForm.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  },{})
+})
+
+const rowProps = computed(() => {
+  return Object.keys(ElRow.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  },{})
+})
+
+const pmPageMetaList = computed(() => props.config.pmPageMetaList)
+
+const val = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emits('update:modelValue', val)
+  }
+})
+defineExpose({
+  val
+})
+</script>