@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/visual/config/Tree.vue

@@ -0,0 +1,135 @@
+<template>
+   <!-- persistent=false：气泡打开时才渲染里面的树，否则面板里每个树选择项都常驻一棵 el-tree -->
+   <el-popover
+        ref="popover"
+        width="240"
+        trigger="click"
+        :tabindex="1"
+        :persistent="false"
+      >
+        <template v-slot:reference><el-input
+          class="input"
+          ref="input"
+          :placeholder="`请选择`"
+          :model-value="objectValue.label || label"
+          clearable
+          size="default"
+          @clear="clear"
+        >
+          <template v-slot:suffix><i class="el-icon-search"></i></template>
+        </el-input></template>
+        <div class="tree">
+           <el-input
+            class="filter"
+            size="default"
+            :placeholder="$t('enter the keyword for filtering')"
+            v-model="filterText">
+          </el-input>
+          <el-tree ref="tree" :filter-node-method="filterNode" :expand-on-click-node="false" :data="optionList" :props="{}" @node-click="changeValue"></el-tree>
+        </div>
+   </el-popover>
+</template>
+
+<script>
+export default {
+  name: 'epx-visual-config-tree',
+  props: {
+    allConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    value: [String, Boolean, Number],
+    defaultValue: [String, Boolean, Number],
+    dataKey: {
+      type: String,
+      default: 'value'
+    },
+    optionList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    configItem: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      objectValue: {},
+      filterText: ''
+    }
+  },
+  computed: {
+    label () {
+      const value = this.value || this.defaultValue
+      if (value) {
+        return this.getLabel(this.optionList, value)
+      }
+      return ''
+    }
+  },
+  watch: {
+    filterText (val) {
+      // 过滤框只在气泡打开时存在，树 ref 一定在；仍防一手
+      if (this.$refs.tree) this.$refs.tree.filter(val)
+    }
+  },
+  methods: {
+    getLabel (optionList = [], value) {
+      for (let i = 0; i < optionList.length; i++) {
+        const item = optionList[i]
+        if (item[this.dataKey] === value) {
+          return item.label
+        } else if (item.children) {
+          const label = this.getLabel(item.children, value)
+          if (label) return label
+        }
+      }
+    },
+    clear () {
+      this.objectValue = {}
+      this.$emit('change-configs', null)
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return (data.name || data.text || data.title || '').indexOf(value) !== -1
+    },
+    changeValue (v, item) {
+      let value = null
+      if (v) {
+        this.objectValue = { ...v }
+        value = v[this.dataKey]
+      } else {
+        this.objectValue = {}
+      }
+      this.$emit('change-configs', value === this.defaultValue ? null : value)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.input {
+  width: 200px;
+
+    :deep(.el-input),
+    :deep(.el-input-number) {
+      width: 200px;
+    }
+
+}
+.filter {
+  margin-bottom: 10px;
+}
+.tree {
+  width:100%;
+  max-height: 400px;
+  overflow: auto;
+}
+</style>

package/src/visual/config/remote-cache.js

@@ -0,0 +1,35 @@
+// 设计器属性面板的远端数据缓存：同 key 只请求一次、并发共享同一个 Promise（单飞）。
+// 缓存的是响应的 JSON 字符串而不是对象——Component.vue 的 formatData 会原地改写配置项，
+// 共享对象会让多个面板互相串改；每次取用 JSON.parse 出一份独立对象。
+// loader 抛错时把 key 删掉，下次调用可以重试，不会把一次网络失败永久缓存成错误。
+const cache = new Map()
+
+export function getCached (key, loader) {
+  let entry = cache.get(key)
+  if (!entry) {
+    entry = Promise.resolve()
+      .then(loader)
+      .then(data => JSON.stringify(data === undefined ? null : data))
+      .catch(err => {
+        cache.delete(key)
+        throw err
+      })
+    cache.set(key, entry)
+  }
+  return entry.then(text => JSON.parse(text))
+}
+
+export function clearRemoteCache (prefix) {
+  if (!prefix) {
+    cache.clear()
+    return
+  }
+  for (const key of [...cache.keys()]) {
+    if (key.startsWith(prefix)) cache.delete(key)
+  }
+}
+
+// 配置项树的缓存 key：同一实体、同一页面（或模板）只请求一次
+export function attributeTreeKey ({ entityId, pageId, isTemplate }) {
+  return `attr:${entityId}:${isTemplate ? 'tpl' : 'page'}:${pageId}`
+}

package/src/visual/config/show-condition.js

@@ -0,0 +1,21 @@
+// 配置项 showCondition（{ el: '#{…}' }）的编译缓存：同一表达式只 new Function 一次。
+// 返回值：函数 = 可求值；null = 表达式为空（不参与判断）；false = 解析失败（按不显示处理）。
+// 解析失败时通过 onError 给用户可见提示（调用方传 $message.error）；因为有缓存，同一段坏表达式只提示一次。
+const cache = new Map()
+
+export function compileShowCondition (showCondition, onError) {
+  if (cache.has(showCondition)) return cache.get(showCondition)
+  let compiled
+  try {
+    const condition = JSON.parse(showCondition).el || ''
+    const el = condition.replace(/^#{(.*)}$/, '$1')
+    // eslint-disable-next-line no-new-func
+    compiled = el ? new Function('config', 'return ' + el) : null
+  } catch (error) {
+    console.error(error)
+    if (typeof onError === 'function') onError('配置项显示条件解析失败：' + ((error && error.message) || showCondition))
+    compiled = false
+  }
+  cache.set(showCondition, compiled)
+  return compiled
+}

package/src/visual/config/variable-sources.js

@@ -0,0 +1,27 @@
+// 变量菜单的两个数据源（系统变量、函数树）：全局只请求一次，所有输入框共享。
+// 此前 Input / Textarea 每个实例挂载都各发一次，一个面板 20 个输入框就是 40 个请求。
+import { getCached } from './remote-cache'
+
+export function loadSystemVariables (http) {
+  return getCached('sysvar', () => http.list({ entityId: 'FM_WEB_SYSTEM_VARIABLE' })
+    .then(res => res.entitys.map(item => ({ name: item.NAME, code: item.CODE }))))
+}
+
+export function loadFunctionTree (http) {
+  return getCached('functree', () => http.$request({
+    action: 'getTree',
+    entityId: 'FM_WEB_FUNCTION',
+    'scope.WHETHER_ENABLE': '1',
+    groupField: 'TYPE',
+    showEntity: '1'
+  }).then(data => data.map(item => {
+    item.children = item.children.map(child => {
+      child.name = child.title
+      child.code = child.entity.data.METHOD
+      child.type = 'function'
+      return child
+    })
+    item.name = item.title
+    return item
+  })))
+}

package/src/visual/config/wait-ref.js

@@ -0,0 +1,17 @@
+// 等待某个 ref 挂上再用：弹窗与 el-tree 都是打开时才渲染 / 按需加载，
+// 打开后紧接着的 $nextTick 里 ref 可能还没到（异步组件 chunk 未就绪），逐帧重试到出现为止。
+export function waitRef (vm, name, method, tries = 120) {
+  return new Promise(resolve => {
+    const tick = () => {
+      const ref = vm.$refs[name]
+      if (ref && (!method || typeof ref[method] === 'function')) {
+        resolve(ref)
+      } else if (tries-- > 0) {
+        requestAnimationFrame(tick)
+      } else {
+        resolve(null)
+      }
+    }
+    vm.$nextTick(tick)
+  })
+}

package/src/visual/config-page/ComponentLibrary.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="library-container">
+    <div class="library__header">
+      <span>{{$t('component gallery')}}</span>
+      <i class="el-icon-close" @click="$emit('close')"></i>
+    </div>
+    <div class="component-group">
+      <div :class="{'component-group__item': true, 'component-group__item--unfold': unfold[item.componentType]}" v-for="item in componentTypeList" :key="item.componentType">
+        <div class="component-group__header" >
+          <i class="el-icon-caret-right" @click="unfold[item.componentType] = !unfold[item.componentType]"></i>
+          <span>{{item.title}}</span>
+        </div>
+        <draggable
+          v-if="item && item.children"
+          class="component-list"
+          tag="ul"
+          :list="item.children"
+          :group="{ name: 'library', pull: 'clone', put: false }"
+           :clone="cloneComponent"
+        >
+          <li class="component-item" v-for="component in item.children" :key="component.id">
+            <div class="component-item__preview">
+              <img v-if="componentImage(component)" :src="componentImage(component)" alt="">
+            </div>
+            <p class="component-item__title">
+              <span>{{component.title}}</span>
+              <el-tooltip v-if="componentInfo(component).STATUS === 'deprecated' " placement="top" :content="componentInfo(component).REMARK">
+                <i class="component__warning-icon el-icon-warning-outline" ></i>
+              </el-tooltip>
+            </p>
+          </li>
+        </draggable>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from '@epxing/core/src/components/draggable'
+export default {
+  name: 'epx-visual-config-component-library',
+  components: {
+    draggable
+  },
+  props: {
+    allComponentList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    componentList: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      unfold: {},
+      componentTypeList: []
+    }
+  },
+  computed: {
+    componentImage () {
+      return v => {
+        const component = this.allComponentList.find(item => item.ID === v.id) || {}
+        return component.PICTURE ? this.$util.getFileUrl(component.PICTURE) : ''
+      }
+    },
+    componentInfo () {
+      return v => {
+        const component = this.allComponentList.find(item => item.ID === v.id) || {}
+        return component
+      }
+    },
+    componentIds () {
+      return this.componentList.map(item => item.id)
+    }
+  },
+  methods: {
+    getComponentList () {
+      this.$http.$post({
+        action: 'getPageComponentTree',
+        entityId: 'FM_PAGE',
+        scopeParams: JSON.stringify([
+          { field: 'TYPE', values: '01' },
+          { field: 'LEVEL', values: '01' },
+          { field: 'STATUS', mode: 'not_equal', values: 'abandon' },
+          { field: 'IS_JOIN_LIBRARY', mode: 'not_equal', values: '0' }
+        ])
+      })
+        .then(data => {
+          this.componentTypeList = data
+          this.unfold[data[0].componentType] = true
+        })
+    },
+    cloneComponent (component) {
+      let id = component.code.replace(/-/g, '_')
+      let index = 1
+      while (this.componentIds.includes(id)) {
+        id = id + index++
+      }
+      const item = {
+        id,
+        title: component.title,
+        contentType: component.code
+      }
+      if (component.code === 'layout-component') {
+        item.items = [
+          {
+            id: 'column',
+            title: this.$t('layout'),
+            contentType: 'column'
+          }
+        ]
+      }
+      return item
+    }
+  },
+  created () {
+    this.getComponentList()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.library-container {
+  margin-left: 2px;
+   width: 260px;
+   height: 100%;
+   background: var(--epx-bg-card);
+   position: relative;
+   display: flex;
+   flex-direction: column;
+}
+ .library__header {
+   height: 48px;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 0 20px;
+   border-bottom: 1px solid #e3e3e3;
+   >span {
+    font-size: var(--epx-font-size-l);
+    font-weight: 600;
+   }
+  >i {
+    color: rgba(0, 0, 0, 0.65);
+    cursor: pointer;
+  }
+ }
+ .component-group {
+   flex: 1;
+   overflow: auto;
+ }
+.component-list  {
+  display: none;
+  overflow: hidden;
+}
+.component-group__item--unfold {
+  .el-icon-caret-right {
+    transform: rotate(90deg);
+  }
+  .component-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+.component-group__header {
+  padding: 0 8px;
+  height: 24px;
+  line-height: 24px;
+  color: #666;
+  i {
+    margin-right: 4px;
+    font-size: var(--epx-font-size-l);
+    cursor: pointer;
+  }
+}
+.component-item {
+  width: calc(50% - 20px);
+  margin: 10px;
+  cursor: pointer;
+  &:hover {
+    .component-item__preview{
+      padding: 0;
+      border: 2px solid;
+      @include border_color_primary;
+    }
+  }
+}
+.component-item__preview {
+  border: 1px dashed #e3e3e3;
+  background: #E2EFF8;
+  padding: 1px;
+  box-sizing: border-box;
+  transition: all .3s;
+  width: 100%;
+  height: 75px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  &>img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+.component-item__title {
+  color: #666;
+  margin-top: 4px;
+}
+.component__warning-icon {
+  color: #E6A23C;
+  margin-left: 4px;
+}
+</style>