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

package/src/page-designer/template-library/Library.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="epx-page-designer-widget-library__container">
+    <div class="epx-page-designer-widget-library__header">
+      <span>模板库</span>
+      <i class="el-icon-close" @click="$emit('close')"></i>
+    </div>
+     <el-radio-group class="epx-page-designer-widget-library__level" v-model="templateType" size="small">
+      <el-radio-button label="cloud" value="cloud">线上模板</el-radio-button>
+      <el-radio-button label="local" value="local">本地模板</el-radio-button>
+    </el-radio-group>
+    <div class="epx-page-designer-widget-library__search">
+      <el-input suffix-icon="el-icon-search" placeholder="请输入搜索内容" v-model="searchText" size="default" clearable></el-input>
+    </div>
+    <div class="epx-page-designer-widget-library__group" v-loading="loading">
+      <template v-if="showTemplateLibrary && showTemplateLibrary.length>0">
+        <div :class="{'epx-page-designer-widget-library__group-item': true, 'epx-page-designer-widget-library__group-item--unfold': unfold[item.componentType]}" v-for="item in showTemplateLibrary" :key="item.componentType">
+          <div class="epx-page-designer-widget-library__group-header" >
+            <i class="el-icon-caret-right" @click="unfold[item.componentType] = !unfold[item.componentType]"></i>
+            <span>{{item.title }}</span>
+          </div>
+          <ul
+            v-if="item && item.children"
+            class="epx-page-designer-widget-library__list epx-page-designer-template-library__list"
+          >
+            <li
+              class="epx-page-designer-widget-library__item epx-page-designer-widget-library__item--template"
+              v-for="template in item.children"
+              :key="template.id"
+              draggable="true"
+              @dragstart="onDragStart($event, template, 'template')"
+              @dragend="onDragEnd"
+              @click="previewTemplate(template)"
+            >
+              <div class="epx-page-designer-widget-library__item-preview">
+                <img v-if="widgetImage(template)" :src="widgetImage(template)" alt="">
+              </div>
+              <p class="epx-page-designer-widget-library__item-title">
+                <span>{{template.title}}</span>
+              </p>
+            </li>
+          </ul>
+        </div>
+      </template>
+      <div class="epx-page-designer-widget-library__no-data" v-else>
+        <i class="epx-icon-color-kong"></i>
+        <p>暂无模板</p>
+      </div>
+    </div>
+    <el-dialog
+      class="dialog"
+      title="模板预览"
+      v-model="previewDialog"
+      append-to-body
+    >
+      <div class="epx-page-designer-template-library__preview" v-if="previewDialog" v-html="previewTemplateData.INTRODUCE"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import dragSourceMixin from '../mixins/dragSourceMixin'
+
+export default {
+  name: 'epx-page-designer-template-library',
+  mixins: [dragSourceMixin],
+  props: {
+    designer: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      templateLibrary: [],
+      templateType: 'cloud',
+      loading: false,
+      unfold: {},
+      searchText: '',
+      previewDialog: false,
+      previewTemplateData: {}
+    }
+  },
+  computed: {
+    widgetImage () {
+      return v => {
+        return v.data?.PICTURE ? this.$util.getFileUrl(v.data.PICTURE) : require('@/assets/images/default-icon.png')
+      }
+    },
+    showTemplateLibrary () {
+      if (this.searchText) {
+        return this.templateLibrary.map(item => {
+          return {
+            ...item,
+            children: item.children.filter(v => {
+              return v.title.indexOf(this.searchText) > -1
+            })
+          }
+        }).filter(v => {
+          return v.children.length > 0
+        })
+      } else {
+        return this.templateLibrary
+      }
+    }
+  },
+  watch: {
+    templateType () {
+      this.getTemplateLibrary()
+    }
+  },
+  methods: {
+    getTemplateLibrary () {
+      this.loading = true
+      const params = {
+        action: 'getPageComponentTemplateTree',
+        entityId: 'FM_TEMPLATE',
+        from: this.templateType,
+        scopeParams: [{ field: 'STATUS', values: '02' }]
+      }
+      if (this.templateType === 'local') {
+        params.scopeParams.push(...[{ field: 'LEVEL', values: '01', link: 'or' }, { lb: '(', field: 'LEVEL', values: '03' }, { field: 'SYSTEM', mode: 'equal', values: this.SYSTEM, rb: ')' }])
+      }
+      this.$http.$post(params)
+        .then(data => {
+          this.templateLibrary = data.map(item => ({ ...item, componentType: item.componentType || 'null', title: item.title || '无' }))
+          this.loading = false
+        })
+        .catch(() => {
+          // this.$message.error(err.message)
+          this.loading = false
+        })
+    },
+
+    previewTemplate (template) {
+      this.previewDialog = true
+      this.previewTemplateData = template.data
+    }
+  },
+  created () {
+    this.getTemplateLibrary()
+  }
+}
+</script>
+<style lang="scss">
+@include b(page-designer-template-library) {
+  @include e(list) {
+  }
+  @include e(preview) {
+    max-height: 70vh;
+    overflow: auto;
+  }
+}
+
+</style>

package/src/page-designer/template-library/index.js

@@ -0,0 +1,4 @@
+import TemplateLibrary from './Library.vue'
+export {
+  TemplateLibrary
+}

package/src/page-designer/widget-library/Base.vue

@@ -0,0 +1,156 @@
+<template>
+ <div class="epx-page-designer-widget-library__container" >
+    <div class="epx-page-designer-widget-library__header">
+      <span>基础组件</span>
+      <i class="el-icon-close" @click="$emit('close')"></i>
+    </div>
+    <div class="epx-page-designer-widget-library__search">
+      <el-input suffix-icon="el-icon-search" placeholder="请输入搜索内容" v-model="searchText" size="default"></el-input>
+    </div>
+    <div class="epx-page-designer-widget-library__group" v-if="showWidgetLibrary.length>0">
+      <div :class="{'epx-page-designer-widget-library__group-item': true, 'epx-page-designer-widget-library__group-item--unfold': unfold[item.componentType]}" v-for="item in showWidgetLibrary" :key="item.componentType">
+        <div class="epx-page-designer-widget-library__group-header" >
+          <i class="el-icon-caret-right" @click="unfold[item.componentType] = !unfold[item.componentType]"></i>
+          <span>{{item.title}}</span>
+        </div>
+        <ul v-if="item && item.children" class="epx-page-designer-widget-library__list epx-page-designer-widget-library-base__list">
+          <li
+            v-for="component in item.children"
+            :key="component.id"
+            class="epx-page-designer-widget-library__item epx-page-designer-widget-library-base__item"
+            draggable="true"
+            @dragstart="onDragStart($event, component, 'widget')"
+            @dragend="onDragEnd"
+          >
+            <i :class="widgetInfo(component).ICON || 'epx-icon-component'"></i>
+            <p class="epx-page-designer-widget-library-base__item-title">
+              <span>{{component.title}}</span>
+              <el-tooltip v-if="widgetInfo(component).STATUS === 'deprecated' " placement="top" :content="widgetInfo(component).REMARK">
+                <i class="epx-page-designer-widget-library__item-warning-icon el-icon-warning-outline" ></i>
+              </el-tooltip>
+            </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="epx-page-designer-widget-library__no-data" v-else>
+      <i class="epx-icon-color-kong"></i>
+      <p>{{$t('no data')}}</p>
+    </div>
+ </div>
+</template>
+
+<script>
+import dragSourceMixin from '../mixins/dragSourceMixin'
+
+export default {
+  name: 'epx-page-designer-widget-library-base',
+  mixins: [dragSourceMixin],
+  props: {
+    designer: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      unfold: {},
+      widgetLibrary: [],
+      level: '01',
+      searchText: ''
+    }
+  },
+  computed: {
+    widgetInfo () {
+      return v => {
+        return this.designer.getWidgetByType(v.code) || {}
+      }
+    },
+    showWidgetLibrary () {
+      if (this.searchText) {
+        return this.widgetLibrary.map(item => {
+          return {
+            ...item,
+            children: item.children.filter(v => {
+              return v.title.indexOf(this.searchText) > -1
+            })
+          }
+        }).filter(v => {
+          return v.children.length > 0
+        })
+      } else {
+        return this.widgetLibrary
+      }
+    }
+  },
+  methods: {
+    getWidgetLibrary () {
+      const scopeParams = [
+        { field: 'TYPE', values: '01' },
+        { field: 'STATUS', mode: 'not_equal', values: 'abandon' },
+        { field: 'IS_JOIN_LIBRARY', mode: 'not_equal', values: '0' },
+        { field: 'COMPONENT_CLASS', values: 'base' }
+      ]
+      if (this.level === '01') {
+        scopeParams.push({ field: 'LEVEL', values: '01' })
+      } else {
+        scopeParams.push({ field: 'LEVEL', values: '03' }, { field: 'SYSTEM', mode: 'equal', values: this.SYSTEM })
+      }
+      this.$http.$post({
+        action: 'getPageComponentTree',
+        entityId: 'FM_PAGE',
+        scopeParams: JSON.stringify(scopeParams),
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc'
+      })
+        .then(data => {
+          this.widgetLibrary = data.filter(item => {
+            if (item.componentType !== 'COMMON') {
+              this.unfold[item.componentType] = true
+              return true
+            }
+            return false
+          })
+        })
+    }
+  },
+  created () {
+    this.getWidgetLibrary()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@include b(page-designer-widget-library-base) {
+  @include e(list) {
+    padding-top: 10px;
+  }
+  @include e(item) {
+    display: flex;
+    align-items: center;
+    width: calc(50% - 12px);
+    margin: 6px;
+    padding: 12px 10px;
+    box-sizing: border-box;
+    border: 1px solid #e3e3e3;
+    border-radius: var(--epx-radius-base);
+    color: #333;
+    line-height: 1;
+    cursor: pointer;
+    >i {
+      margin-right: 4px;
+      color: #666;
+    }
+    &:hover {
+      @include border_color_primary;
+      @include e(item-title) {
+        @include font_color_primary;
+      }
+      >i {
+        @include font_color_primary;
+      }
+    }
+
+  }
+
+}
+</style>

package/src/page-designer/widget-library/Library.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="epx-page-designer-widget-library__container">
+    <div class="epx-page-designer-widget-library__header">
+      <span>{{$t('component gallery')}}</span>
+      <i class="el-icon-close" @click="$emit('close')"></i>
+    </div>
+    <el-radio-group class="epx-page-designer-widget-library__level" v-model="level" size="small">
+      <el-radio-button label="01" value="01">平台级</el-radio-button>
+      <el-radio-button label="03" value="03">系统级</el-radio-button>
+    </el-radio-group>
+    <div class="epx-page-designer-widget-library__search">
+      <el-input suffix-icon="el-icon-search" placeholder="请输入搜索内容" v-model="searchText" size="default" clearable></el-input>
+    </div>
+    <div class="epx-page-designer-widget-library__group" v-if="showWidgetLibrary.length>0">
+      <div :class="{'epx-page-designer-widget-library__group-item': true, 'epx-page-designer-widget-library__group-item--unfold': unfold[item.componentType]}" v-for="item in showWidgetLibrary" :key="item.componentType">
+        <div class="epx-page-designer-widget-library__group-header" >
+          <i class="el-icon-caret-right" @click="unfold[item.componentType] = !unfold[item.componentType]"></i>
+          <span>{{item.title}}</span>
+        </div>
+        <ul v-if="item && item.children" class="epx-page-designer-widget-library__list">
+          <li
+            v-for="component in item.children"
+            :key="component.id"
+            class="epx-page-designer-widget-library__item"
+            draggable="true"
+            @dragstart="onDragStart($event, component, 'widget')"
+            @dragend="onDragEnd"
+          >
+            <div class="epx-page-designer-widget-library__item-preview">
+              <img v-if="widgetImage(component)" :src="widgetImage(component)" alt="">
+            </div>
+            <p class="epx-page-designer-widget-library__item-title">
+              <span>{{component.title}}</span>
+              <el-tooltip v-if="widgetInfo(component).STATUS === 'deprecated' " placement="top" :content="widgetInfo(component).REMARK">
+                <i class="epx-page-designer-widget-library__item-warning-icon el-icon-warning-outline" ></i>
+              </el-tooltip>
+            </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="epx-page-designer-widget-library__no-data" v-else>
+      <i class="epx-icon-color-kong"></i>
+      <p>{{$t('no data')}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import dragSourceMixin from '../mixins/dragSourceMixin'
+
+export default {
+  name: 'epx-page-designer-widget-library',
+  mixins: [dragSourceMixin],
+  props: {
+    designer: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      unfold: {},
+      widgetLibrary: [],
+      level: '01',
+      searchText: ''
+    }
+  },
+  computed: {
+    widgetInfo () {
+      return v => {
+        return this.designer.getWidgetByType(v.code) || {}
+      }
+    },
+    widgetImage () {
+      return v => {
+        const widgetInfo = this.designer.getWidgetByType(v.code) || {}
+        return widgetInfo.PICTURE ? this.$util.getFileUrl(widgetInfo.PICTURE) : ''
+      }
+    },
+    showWidgetLibrary () {
+      if (this.searchText) {
+        return this.widgetLibrary.map(item => {
+          return {
+            ...item,
+            children: item.children.filter(v => {
+              return v.title.indexOf(this.searchText) > -1
+            })
+          }
+        }).filter(v => {
+          return v.children.length > 0
+        })
+      } else {
+        return this.widgetLibrary
+      }
+    }
+  },
+  watch: {
+    level () {
+      this.getWidgetLibrary()
+    }
+  },
+  methods: {
+    getWidgetLibrary () {
+      const scopeParams = [
+        { field: 'TYPE', values: '01' },
+        { field: 'STATUS', mode: 'not_equal', values: 'abandon' },
+        { field: 'IS_JOIN_LIBRARY', mode: 'not_equal', values: '0' },
+        { field: 'COMPONENT_CLASS', mode: 'not_equal', values: 'base' }
+      ]
+      if (this.level === '01') {
+        scopeParams.push({ field: 'LEVEL', values: '01' })
+      } else {
+        scopeParams.push({ field: 'LEVEL', values: '03' }, { field: 'SYSTEM', mode: 'equal', values: this.SYSTEM })
+      }
+      this.$http.$post({
+        action: 'getPageComponentTree',
+        entityId: 'FM_PAGE',
+        scopeParams: JSON.stringify(scopeParams),
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc'
+      })
+        .then(data => {
+          this.widgetLibrary = data
+          this.unfold[data[0].componentType] = true
+        })
+    }
+  },
+  created () {
+    this.getWidgetLibrary()
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(page-designer-widget-library) {
+  @include e(container) {
+    margin-left: 2px;
+    width: 260px;
+    height: 100%;
+    background: var(--epx-bg-card);
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    z-index: 101;
+    left: 50px;
+  }
+  @include e(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;
+    }
+  }
+  @include e(level) {
+    width: calc(100% - 20px);
+    margin: 10px;
+    margin-bottom: 0;
+    .el-radio-button {
+      width:50%;
+      .el-radio-button__inner {
+        width: 100%;
+        box-sizing: border-box;
+      }
+    }
+  }
+  @include e(search) {
+    margin: 10px;
+  }
+  @include e(group) {
+   flex: 1;
+   overflow: auto;
+  }
+
+  @include e(group-item) {
+    padding-bottom: 10px;
+    @include m(unfold) {
+      .el-icon-caret-right {
+        transform: rotate(90deg);
+      }
+      @include e(list) {
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+  }
+  @include e(group-header) {
+    padding: 8px;
+    height: 40px;
+    line-height: 24px;
+    font-size: var(--epx-font-size-l);
+    font-weight: 600;
+    color: #666;
+    background: rgba(0,0,0,0.04);
+    i {
+      margin-right: 4px;
+      font-size: var(--epx-font-size-l);
+      cursor: pointer;
+    }
+  }
+  @include e(list)  {
+    display: none;
+    overflow: hidden;
+  }
+  @include e(item) {
+    width: calc(50% - 20px);
+    margin: 10px;
+    cursor: pointer;
+    &:hover {
+      .component-item__preview{
+        padding: 0;
+        border: 2px solid;
+        @include border_color_primary;
+      }
+    }
+    @include m(template) {
+      width: calc(100% - 12px);
+      border-radius: var(--epx-radius-base);
+      overflow: hidden;
+      &:hover {
+        box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
+      }
+
+      @include e(item-preview) {
+        height: 120px;
+      }
+      @include e(item-title) {
+        margin-top: 0;
+        text-align: center;
+        font-size: var(--epx-font-size-l);
+        line-height: 32px;
+        border: 1px solid #e3e3e3;
+        border-top: 0;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+    }
+  }
+  @include e(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;
+    }
+  }
+  @include e(item-title) {
+    color: #666;
+    margin-top: 4px;
+  }
+  @include e (item-warning-icon) {
+    color: #E6A23C;
+    margin-left: 4px;
+  }
+}
+@include e(no-data) {
+  margin-top: 20px;
+  text-align: center;
+  color: #666;
+  i {
+    font-size: 80px;
+  }
+}
+</style>

package/src/page-designer/widget-library/index.js

@@ -0,0 +1,6 @@
+import WidgetLibrary from './Library.vue'
+import WidgetLibraryBase from './Base.vue'
+export {
+  WidgetLibrary,
+  WidgetLibraryBase
+}

package/src/page-designer/widget-preview/Container.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="epx-page-designer-widget-preview__drop-zone">
+    <component
+      v-for="childWidget in childWidgetList"
+      :key="childWidget.id"
+      :is="getWidgetName(childWidget)"
+      :widget="childWidget"
+      :designer="designer"
+      :parent-widget="widget"
+      :pageRelationList="pageRelationList"
+      v-widget-designer="{ widget: childWidget, designer, parentWidget: widget }"
+    ></component>
+    <div
+      class="epx-page-designer-widget-preview__no-widget"
+      v-if="childWidgetList.length===0 && !heightTooSmall"
+    >拖拽组件到这里</div>
+  </div>
+</template>
+
+<script>
+import widgetDesignerDirective from './directive'
+import PreviewMixin from './Mixin'
+import { resolvePreviewName } from './resolvePreviewName'
+
+export default {
+  name: 'epx-page-designer-widget-preview-container',
+  directives: { 'widget-designer': widgetDesignerDirective },
+  mixins: [PreviewMixin],
+  computed: {
+    // 容器自身在样式里配置了高度时，去掉默认的 60px 占位高度，
+    // 让它按真实高度显示，保持设计态与运行时一致。
+    // 排除 line-height，仅匹配 height / min-height / max-height
+    hasCustomSize () {
+      const css = (this.widget && this.widget.css) || ''
+      return /(?:^|[\s;{])(?:min-|max-)?height\s*:/i.test(css)
+    },
+    // 配置高度小于 10px（横线、小圆点等装饰性容器）时不显示「拖拽组件到这里」占位文案，
+    // 否则文案会把这种极矮的容器撑大、和运行时对不上
+    heightTooSmall () {
+      const css = (this.widget && this.widget.css) || ''
+      // 仅取基础 :current 块里的 height，避免被 :current:hover 等干扰
+      const block = (css.match(/:current\s*\{([^}]*)\}/) || [])[1] || css
+      const match = block.match(/(?:^|[\s;])height\s*:\s*([\d.]+)px/i)
+      return !!match && parseFloat(match[1]) < 10
+    },
+    // 预览组件名解析统一走 resolvePreviewName（命中项有缓存）
+    getWidgetName () {
+      return widget => resolvePreviewName(this.designer, widget)
+    }
+  },
+  watch: {
+    // is-sized 只能用命令式 classList 维护，不能写成模板里的 :class。
+    // 因为 el-col / css_<id> 等类名是 directive.js、Mixin.js 通过 classList.add 加上去的，
+    // 一旦根节点存在响应式 :class，hasCustomSize 变化时 Vue 会用 setAttribute('class') 整体重写，
+    // 把这些命令式加上的类名一起抹掉。
+    hasCustomSize () {
+      this.applySizedClass()
+    }
+  },
+  mounted () {
+    this.applySizedClass()
+  },
+  methods: {
+    applySizedClass () {
+      const el = this.$el
+      if (el && el.classList) {
+        el.classList.toggle('is-sized', this.hasCustomSize)
+      }
+    }
+  }
+  // 其余拖拽方法已在 Mixin 中实现
+}
+</script>
+
+<style lang="scss" scoped>
+.epx-page-designer-widget-preview__drop-zone {
+  // 普通空容器：给一个可拖放的最小高度，并以灰底占位文案常驻提示。
+  // 已配置自身尺寸（.is-sized）的容器完全交给自定义 CSS 控制，这里不加任何 min-height——
+  // scoped 样式带 [data-v]，优先级(0,3,0)高于配置 CSS 的 .css_<id>(0,1,0)，
+  // 再加上 min-height 永远盖过 height，否则横线/小圆点等会被强行撑到默认高度。
+  &:not(.is-sized) {
+    min-height: 60px;
+  }
+}
+
+.epx-page-designer-widget-preview__no-widget {
+  pointer-events: none;
+}
+</style>