resolver-egretimp-plus 0.1.114 → 0.1.115

package/src-bak/components/packages-H5/CmiPicker.vue

@@ -0,0 +1,229 @@
+<script setup>
+import { computed, defineProps, inject, onMounted, ref, useAttrs, watch } from 'vue'
+import { commonPropsType } from '../../utils/index.js'
+
+const filterKey = ref('')
+const pickerRef = ref(null)
+const selects = inject('selects')
+const rootForm = inject('rootForm')
+const attrs = useAttrs()
+const lang = inject('lang')
+const modelValue = defineModel()
+const props = defineProps({
+  ...commonPropsType,
+  filterable: {
+    type: String
+  },
+  multiple: {
+    type: String
+  }
+})
+const open = computed({
+  get() {
+    return props?.config?.open == '1'
+  },
+  set(val) {
+    props.config.open = val ? '1' : '0'
+  }
+})
+const prefixIcon = computed(() => {
+  return props?.config?.prefixIcon
+})
+const suffixIcon = computed(() => {
+  return props?.config?.suffixIcon ?? 'arrow-down'
+})
+
+const formatValue = computed({
+  get() {
+    return modelValue.value ? modelValue.value.split(',') : []
+  },
+  set(val) {
+    const formatVal = Array.isArray(val) ? val.join(',') : val
+    modelValue.value = formatVal
+  }
+})
+
+// 是否为多选
+const isMutiple = computed(() => {
+  return props.multiple == '1'
+})
+// 是否开启过滤, todo == 暂时不支持多列
+const isFilter = computed(() => {
+  return props.filterable == '1'
+})
+const calcProps = computed(() => {
+  const ret = {
+    type: isFilter.value ? 'normal' : props?.config?.displayType,
+    title: lang.value?.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn,
+    canceltext: props?.config?.canceltext,
+    confirmtext: props?.config?.confirmtext,
+    forbidmaskclick: props?.config?.forbidmaskclick == '1',
+    fastpick: isFilter.value ? true : (props?.config?.fastpick == '1'),
+    bottomhidden: props?.config?.bottomhidden == '1',
+  }
+  return ret
+})
+const getColumns = (filterKey) => {
+  const selectKeyArr = props.config?.selectKey?.split?.(',') || []
+  return selectKeyArr.map((key, idx) => {
+    const values = selects?.value?.[key]?.map(option => ({
+      label: lang?.value?.indexOf('zh') > -1 ? option.columnDesc_zh : option.columnDesc,
+      value: option.columnValue
+    }))?.filter(item => {
+      if (filterKey) {
+        return `${item.label || ''}`.toLocaleLowerCase()?.includes(`${filterKey}`.toLocaleLowerCase())
+      } else {
+        return true
+      }
+    }) || []
+    let index = values.findIndex(option => option?.value === formatValue.value[idx])
+    return {
+      defaultIndex: index > -1 ? index : (isFilter.value ? -1 : 0),
+      values,
+    }
+  })
+}
+
+const onFocus = (e) => {
+  open.value = true
+  pickerRef.value?.setColumns?.(getColumns())
+  e.preventDefault()
+  e.stopPropagation()
+  e.target.blur()
+}
+
+const onClose = () => {
+  props.config?.onClose?.()
+  open.value = false
+}
+const onConfirm = (e) => {
+  const val = (e.detail.value || []).map(item => {
+    if (typeof item.value === 'object') {
+      return item.value?.value
+    } else {
+      return item.value
+    }
+  })
+  formatValue.value = val
+
+  props.config?.onConfirm?.(formatValue.value)
+  // pick组件不主动出发formItem上面绑定的额自定义校验，这边就手动出发下
+  rootForm.value?.validateField?.(props.config?.dynamicHireRelat)
+  open.value = false
+}
+
+const modelvalDesc = computed(() => {
+  const columns = getColumns()
+  return formatValue.value?.reduce?.((ret, cur, idx) => {
+    const col = columns[idx]
+    const curItem = (col?.values || []).find(item => {
+      if (typeof item === 'object') {
+        return item.value === cur
+      } else {
+        return item == cur
+      }
+    })
+    const label = (typeof curItem === 'object' ? curItem.label : curItem) || ''
+    return ret ? `${ret},${label}` : `${label}`
+  }, '')
+})
+
+const inputProps = computed(() => {
+  return {
+    placeholder: lang?.value?.indexOf('zh') > -1 ? props.config?.defPlacehold : props.config?.defPlaceholdEn,
+    disabled: props.disabled
+  }
+})
+
+watch(filterKey, (val) => {
+  pickerRef.value?.setColumns?.(getColumns(val))
+})
+watch(open, (val) => {
+  if (!val) {
+    filterKey.value = ''
+  }
+}, {
+  immediate: true
+})
+
+function filterChange(e) {
+  filterKey.value = e.detail.value
+}
+
+onMounted(() => {
+  // 支持过滤的时候，因为是上下层级结构，默认情况下头部的高被限制住了，会显示不全，所以这边需要进行webComponent中样式修改
+  watch(isFilter, (() => {
+    let oldTop = null
+    let oldBottom = null
+    return (val) => {
+      const pickerContentDom = pickerRef.value.shadowRoot?.querySelector('.cmi-picker-content')
+      if (pickerContentDom) {
+        if (val) {
+          const tabStyles = window.getComputedStyle(pickerContentDom)
+          oldTop = tabStyles.top
+          oldBottom = tabStyles.bottom
+          pickerContentDom.style.top = '24vw'
+          pickerContentDom.style.bottom = '10.2vw'
+        } else {
+          if (oldTop) {
+            pickerContentDom.style.top = oldTop
+          }
+          if (oldBottom) {
+            pickerContentDom.style.bottom = oldBottom
+          }
+        }
+        
+      }
+    }
+  })(), {
+    immediate: true
+  })
+
+})
+</script>
+
+<template>
+  <cmi-input :value="modelvalDesc" suffixIcon @focus="onFocus" v-bind="{...attrs, ...inputProps}" >
+    <div slot="suffix" v-if="suffixIcon" class="suffix-wrap">
+      <component v-if="!inputProps.disabled || 'arrow-down' != suffixIcon" @click="() => { ('arrow-down' == suffixIcon) && onFocus();}" :is="`cmi-icon-${suffixIcon}`" color="#4E5969"></component>
+    </div>
+    <span slot="prefix" v-if="prefixIcon">
+      <component :is="`cmi-icon-${prefixIcon}`" color="#4E5969"></component>
+    </span>
+  </cmi-input>
+  <cmi-picker
+    ref="pickerRef"
+    v-bind="{...attrs, ...calcProps}"
+    :open="open"
+    @close="onClose"
+    @confirm="onConfirm"
+  >
+    <div v-if="isFilter" slot="header" class="filter-header-wrap">
+      <span class="filte-title">{{ calcProps.title }}</span>
+      <cmi-input class="filter-input" @change="filterChange" :value="filterKey"></cmi-input>
+    </div>
+  </cmi-picker>
+</template>
+<style lang="scss" scoped>
+.suffix-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+}
+.filter-header-wrap {
+  display: flex;
+  justify-content: flex-start;
+  align-items: start;
+  flex-direction: column;
+  width: 100%;
+  .filte-title {
+    margin-bottom: 6px;
+    // max-width: 50%;
+  }
+  .filter-input {
+    flex: 1;
+    // margin-left: 16px;
+  }
+}
+</style>

package/src-bak/components/packages-H5/CmiRadio.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { computed, defineProps, inject, ref, useAttrs } from 'vue'
+import { commonPropsType } from '../../utils/index.js'
+
+const lang = inject('lang')
+const modelValue = defineModel()
+const props = defineProps({
+  ...commonPropsType,
+})
+const calcProps = computed(() => {
+  return {
+    direction: props.config?.direction,
+  }
+})
+const attrs = useAttrs()
+const onChange = (e) => {
+  modelValue.value = e.detail.value
+}
+</script>
+
+<template>
+  <cmi-radio-group :value="modelValue" v-bind="{ ...attrs, ...calcProps}" @change="onChange">
+    <cmi-radio 
+      v-for="option in props.options" :key="option.columnValue"
+      :disabled="props.disabled || option.columnStatus == '0' || option.columnStatus == '2'"
+      :name="option.columnValue" :label="lang.indexOf('zh') > -1 ? option.columnDesc_zh : option.columnDesc"
+    />
+  </cmi-radio-group>
+</template>

package/src-bak/components/packages-H5/CmiSearch.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { computed, defineProps, inject, useAttrs } from 'vue'
+import { commonPropsType } from '../../utils/index.js'
+
+const lang = inject('lang')
+const modelValue = defineModel()
+const props = defineProps({
+  ...commonPropsType,
+})
+const calcProps = computed(() => {
+  return {
+    shape: props.config?.shape,
+    dark: props.config?.dark,
+    showback: props.config?.showback == '1',
+    showaction: props.config?.showaction == '1',
+    actiontext: props.config?.actiontext,
+    iconcolor: props.config?.iconcolor,
+    placeholder: lang?.value?.indexOf('zh') > -1 ? props.config?.defPlacehold : props.config?.defPlaceholdEn,
+    maxlength: props.config?.maxlength,
+    autofocus: props.config?.autofocus,
+    clearable: props.config?.clearable == '1',
+    disabled: props.disabled,
+    readonly: props.readonly,
+    noborder: props.config?.noborder,
+  }
+})
+const attrs = useAttrs()
+const onChange = (e) => {
+  modelValue.value = e.detail.value
+}
+
+</script>
+
+<template>
+  <cmi-search
+    :value="modelValue" v-bind="{ ...attrs, ...calcProps}" 
+    @change="onChange"
+  ></cmi-search>
+</template>

package/src-bak/components/packages-H5/CmiSelect.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { computed, defineProps, inject, useAttrs } from 'vue'
+import { commonPropsType } from '../../utils/index.js'
+
+const modelValue = defineModel()
+const props = defineProps({
+  ...commonPropsType,
+  multiple: [String, Boolean]
+})
+const attrs = useAttrs()
+const lang = inject('lang')
+
+// 是否为多选
+const isMutiple = computed(() => {
+  return props.multiple == '1' || (typeof props.multiple === 'boolean' && props.multiple)
+})
+const showAll = computed(() => {
+  return props.showAll == '1'
+})
+const value = computed({
+  get() {
+    if (isMutiple.value) {
+      const val = modelValue.value || ''
+      return val ? val.split(',') : []
+    } else {
+      if (modelValue.value !== null && modelValue.value !== undefined) {
+        if (props.options?.some(item => item.columnValue == modelValue.value)) {
+          props.config.isMatch = true
+          return `${modelValue.value}`
+        } else {
+          props.config.isMatch = false
+          return ''
+        }
+      } else {
+        return ''
+      }
+    }
+  },
+  set(val) {
+    if (isMutiple.value) {
+      modelValue.value = Array.isArray(val) ? val.join(',') : val
+    } else {
+      modelValue.value = val
+    }
+  }
+})
+
+const selectProps = computed(() => {
+  return {
+    // label: lang?.value?.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn,
+    value: value.value,
+    disabled: props.disabled,
+    clearable: props.clearable,
+    multiple: isMutiple.value,
+    placeholder: lang?.value?.indexOf('zh') > -1 ? props.config?.defPlacehold : props.config?.defPlaceholdEn,
+    'max-options-visible': props.config?.['max-options-visible'] || props.config?.maxOptionsVisible,
+    // required: props.required,
+  }
+})
+const clear = () => {
+  value.value = ''
+}
+const onChange = ({detail}) => {
+  value.value = detail.value || ""
+  props.config?.onChange(modelValue.value)
+}
+</script>
+
+<template>
+  <cmi-select class="custom-self-select" v-bind="{...attrs, ...selectProps}" @change="onChange" @clear="clear">
+    <cmi-option v-if="showAll" value="all" multiple>{{ lang.indexOf('zh') > -1 ? '全选' : 'All' }}</cmi-option>
+    <cmi-option v-for="option in (props.options || [])" :key="option.columnValue"
+      :label="lang.indexOf('zh') > -1 ? option.columnDesc_zh : option.columnDesc"
+      :value="option.columnValue"
+      :multiple="isMutiple"
+      :disabled="option.columnStatus == '0' || option.columnStatus == '2'"
+    />
+  </cmi-select>
+</template>
+
+<style lang="scss">
+.custom-self-select {
+}
+</style>

package/src-bak/components/packages-H5/CustomComponentCardH5.vue

@@ -0,0 +1,129 @@
+<script setup>
+import { computed, inject, onMounted, ref, resolveComponent, useAttrs, watch } from "vue";
+import Renderer from '../../renderer.jsx'
+import { commonPropsType, DISPLAY_HIDDEN, hasOwn } from '../../utils/index.js'
+
+const modelValue = defineModel()
+const props = defineProps({
+  ...commonPropsType,
+  subtitleZh: String,
+  subtitleEn: String,
+  content: String,
+  noborder: [Boolean, String],
+  cardbgcolor: String,
+})
+
+const collapseLimt = ref(Number.MAX_VALUE)
+const isCollapse = ref(true)
+const attrs = useAttrs()
+const lang = inject('lang')
+const cmiProps = computed(() => {
+  return {
+    title: lang?.value?.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn,
+    subtitle: lang?.value?.indexOf('zh') > -1 ? props.config.subtitleZh : props.config.subtitleEn,
+    content: props.content,
+    noborder: props.noborder == '1' ? true : false,
+    cardbgcolor: props.cardbgcolor || '#FAFAFA',
+    open: props.config?.defaultOpenFlag == '1'
+  }
+})
+
+const propCollapseLimt = computed(() => {
+  return props.config?.collapseLimt || 5
+})
+
+const pmPageMetaList = computed(() => {
+  return props.config?.pmPageMetaList || []
+})
+
+const showPageMeteList = computed(() => {
+  return pmPageMetaList.value.filter(item => item.displayType != DISPLAY_HIDDEN && item.hidden != '1')
+})
+
+const lastShowPageMeteItem = computed(() => {
+  return showPageMeteList.value?.length ? showPageMeteList.value[showPageMeteList.value.length - 1] : null
+})
+
+const showCollapseBtn = computed(() => {
+  return showPageMeteList.value?.length > collapseLimt.value
+})
+
+
+// 定位到最后显示的组件在折叠组件中的索引
+const lasetLimitIdx = computed(() => {
+  const limt = isCollapse.value ? collapseLimt.value : Number.MAX_VALUE
+  return pmPageMetaList.value?.findIndex(item => item == showPageMeteList.value[limt - 1])
+})
+
+// 通过监听最后一个显示组件的索引，控制那些组件隐藏（通过collapseHidden控制隐藏）
+watch(lasetLimitIdx, (val) => {
+  pmPageMetaList.value?.forEach((item, index) => {
+    item.collapseHidden = '0'
+    if (item.metaType === 'cmi-cell') {
+      item.borderHidden = '0'
+    }
+    if (val > -1) {
+      if (index > val) {
+        item.collapseHidden = '1'
+      }
+      if (index === val) {
+        if (item.metaType === 'cmi-cell') {
+          item.borderHidden = '1'
+        }
+      }
+    }
+  })
+  if (val === -1) {
+    if (lastShowPageMeteItem.value?.metaType === 'cmi-cell') {
+      lastShowPageMeteItem.value.borderHidden = '1'
+    }
+  }
+}, {
+  immediate: true
+})
+
+
+const collapseLabel = computed(() => {
+  const isCh = lang?.value?.indexOf('zh') > -1
+  return isCollapse.value ? (isCh ? '更多' : 'More') : (isCh ? '收起' : 'Close')
+})
+function toCollapse() {
+  isCollapse.value = !isCollapse.value
+}
+
+onMounted(() => {
+  watch(() => props.config._componentLoad, (val) => {
+    if (val) {
+      collapseLimt.value = propCollapseLimt.value
+      watch(propCollapseLimt, (val) => {
+        collapseLimt.value = val
+      })
+    }
+  }, {
+    immediate: true
+  })
+})
+</script>
+<template>
+  <cmi-card v-bind="{...attrs, ...cmiProps}">
+    <div slot="content" :style="{'background-color': cmiProps.cardbgcolor}">
+      <Renderer :config="pmPageMetaList" v-model="modelValue"></Renderer>
+      <div v-if="showCollapseBtn" class="collapse-wrap">
+        <cmi-button type="text" size="small" @click="toCollapse">
+          {{ collapseLabel }}
+        </cmi-button>
+      </div>
+    </div>
+  </cmi-card>
+</template>
+<style lang="scss">
+.collapse-wrap {
+  display: flex;
+  justify-content: end;
+}
+cmi-card {
+  cmi-form-item {
+    background-color: transparent;
+  }
+}
+</style>

package/src-bak/components/packages-H5/CustomComponentColH5.vue

@@ -0,0 +1,8 @@
+<script setup>
+</script>
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+<style lang="scss"></style>

package/src-bak/components/packages-H5/CustomComponentCollapseH5.vue

@@ -0,0 +1,137 @@
+<script setup>
+import Renderer from '../../renderer.jsx'
+import { computed, inject, useAttrs, defineEmits, defineProps, ref, watch } from 'vue'
+import { commonPropsType, DISPLAY_HIDDEN, hasOwn } from '../../utils/index.js'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const isCollapse = ref(true)
+const modelValue = defineModel()
+const attrs = useAttrs()
+const lang = inject('lang')
+const props = defineProps({
+  ...commonPropsType,
+})
+const collapseLimt = computed(() => {
+  return props.config?.collapseLimt || 5
+})
+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 || []
+})
+
+const showPageMeteList = computed(() => {
+  return pmPageMetaList.value.filter(item => item.displayType != DISPLAY_HIDDEN && item.hidden != '1')
+})
+
+const lastShowPageMeteItem = computed(() => {
+  return showPageMeteList.value?.length ? showPageMeteList.value[showPageMeteList.value.length - 1] : null
+})
+
+const showCollapseBtn = computed(() => {
+  return showPageMeteList.value?.length > collapseLimt.value
+})
+
+// 定位到最后显示的组件在折叠组件中的索引
+const lasetLimitIdx = computed(() => {
+  const limt = isCollapse.value ? collapseLimt.value : Number.MAX_VALUE
+  return pmPageMetaList.value?.findIndex(item => item == showPageMeteList.value[limt - 1])
+})
+
+// 通过监听最后一个显示组件的索引，控制那些组件隐藏（通过collapseHidden控制隐藏）
+watch(lasetLimitIdx, (val) => {
+  pmPageMetaList.value?.forEach((item, index) => {
+    item.collapseHidden = '0'
+    if (item.metaType === 'cmi-cell') {
+      item.borderHidden = '0'
+    }
+    if (val > -1) {
+      if (index > val) {
+        item.collapseHidden = '1'
+      }
+      if (index === val) {
+        if (item.metaType === 'cmi-cell') {
+          item.borderHidden = '1'
+        }
+      }
+    }
+  })
+  if (val === -1) {
+    if (lastShowPageMeteItem.value?.metaType === 'cmi-cell') {
+      lastShowPageMeteItem.value.borderHidden = '1'
+    }
+  }
+}, {
+  immediate: true
+})
+
+const collapseLabel = computed(() => {
+  const isCh = lang?.value?.indexOf('zh') > -1
+  return isCollapse.value ? (isCh ? '更多' : 'More') : (isCh ? '收起' : 'Less')
+})
+function toCollapse() {
+  isCollapse.value = !isCollapse.value
+}
+</script>
+
+<template>
+ <div :style="attrs.style">
+    <cmi-collapse v-bind="{...attrs, ...collapseProps}">
+      <div class="render-wrap">
+        <Renderer :config="pmPageMetaList" v-model="modelValue"></Renderer>
+      </div>
+      <div v-if="showCollapseBtn" class="collapse-wrap">
+        <span class="collapse-span" @click="toCollapse">
+          {{ collapseLabel }}
+        </span>
+      </div>
+    </cmi-collapse>
+ </div>
+</template>
+
+<style lang="scss">
+.render-wrap {
+  div:last-child {
+    cmi-cell {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+.collapse-wrap {
+  display: flex;
+  justify-content: end;
+  & > .collapse-span {
+    color: #3271FE;
+    margin: 8px 16px 16px 16px;
+  }
+}
+</style>
+<style lang="scss">
+.CustomComponentCollapseH5 {
+  margin-bottom: 16px;
+}
+
+.CustomComponentCollapseH5:first-child {
+  margin-bottom: 16px;
+}
+.CustomComponentCollapseH5 + .CustomComponentCollapseH5 {
+  margin-bottom: 16px;
+}
+
+// 加权
+.CustomComponentCollapseH5.CustomComponentCollapseH5.CustomComponentCollapseH5:last-child {
+  margin-bottom: 0;
+}
+</style>