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

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

@@ -0,0 +1,206 @@
+<script>
+// @jsx-vue3（T30 JSX 批试点：Vue3 JSX 语法，经 @vue/babel-plugin-jsx 编译）
+import { resolveComponent } from '@epxing/core/src/app'
+import draggable from '@epxing/core/src/components/draggable'
+export default {
+  name: 'epx-visual-config-component-preview',
+  components: {
+    draggable
+  },
+  props: {
+    component: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    upId: {
+      type: String
+    },
+    selectComponent: {
+      type: Object
+    }
+  },
+  inject: ['getAllComponentList', 'getItemConfigs', 'changeItemConfigs'],
+  computed: {
+    componentId () {
+      return this.upId ? this.upId + '-' + this.component.id : this.component.id
+    },
+    componentInfo () {
+      const componentInfo = this.allComponentList.find(item => item.CODE === this.component.contentType) || { CODE: this.component.contentType }
+      return componentInfo || {}
+    },
+    itemConfigs () {
+      return this.getItemConfigs()
+    },
+    allComponentList () {
+      return this.getAllComponentList()
+    },
+    compConfigs () {
+      // 如果是页面 查找页面默认配置
+      const { configs = {}, id, title, contentType, ...otherConfigs } = this.component
+
+      const itemConfig = this.itemConfigs[this.componentId] || {}
+      const _configs = { ...otherConfigs, ...configs, ...itemConfig }
+      if (title) {
+        _configs.componentName = title
+      }
+      return _configs
+    },
+    childComponents: {
+      get () {
+        const { items = [] } = this.compConfigs
+        return items
+      },
+      set (v) {
+        this.changeItemConfigs(this.componentId, { items: v })
+      }
+    }
+  },
+  methods: {
+    clickComponent (event) {
+      event.stopPropagation()
+      const configs = this.compConfigs
+      this.$emit('click', this.componentId, this.componentInfo, configs, this.upId)
+    },
+
+    renderPreviewComponent () {
+      let previewCompName = this.componentInfo.CODE + '--preview'
+      let hasPreview = resolveComponent('epx-' + previewCompName)
+      if (!hasPreview && this.componentInfo.UP_PAGE) {
+        const parent = this.allComponentList.find(item => item.ID === this.componentInfo.UP_PAGE)
+        if (parent) {
+          previewCompName = parent.CODE + '--preview'
+          hasPreview = resolveComponent('epx-' + previewCompName)
+        }
+      }
+      if (hasPreview) {
+        return (
+          <epx-component
+            name={previewCompName}
+            compId={this.componentId}
+            itemConfigs={this.itemConfigs}
+            component={this.component}
+            comp-configs={this.compConfigs}
+            upId={this.upId}
+            selectComponent={this.selectComponent}
+            {...this.$forwardAttrs(this.$attrs)}
+          >
+          </epx-component>
+        )
+      } else if (this.componentInfo.CONTAINER === '1') {
+        return (
+          <draggable class={{ 'layout-placeholder': true, 'has-component': this.childComponents.length > 0 }} v-model={this.childComponents} group="library" ghostClass="drag-component__ghost">
+            {
+              this.childComponents.length > 0 && (
+                <div>
+                  {
+                    this.childComponents.map(component => (
+                      <epx-visual-config-component-preview
+                        key={component.id}
+                        component={component}
+                        upId={this.componentId}
+                        {...this.$forwardAttrs(this.$attrs)}
+                        selectComponent={this.selectComponent}
+                      />
+                    ))
+                  }
+                </div>
+              )
+            }
+          </draggable>
+        )
+      } else if (this.componentInfo.PICTURE) {
+        return (
+          <img class="component-preview__icon" src={this.$util.getFileUrl(this.componentInfo.PICTURE)} />
+        )
+      } else {
+        return (
+          <div>{this.componentInfo.TITLE}</div>
+        )
+      }
+    }
+  },
+  render () {
+    return (
+      <div class={{ 'component-preview': true, active: this.selectComponent && this.componentId === this.selectComponent.id }} onClick={this.clickComponent}>
+        { this.renderPreviewComponent() }
+        {/** 操作 */}
+        <div class="component-preview__operate">
+          <el-popconfirm
+            title={`${this.$t('Confirm to delete the component')} ?`}
+            onConfirm={this.$emit.bind(this, 'delete', this.componentId)}
+            v-slots={{
+              reference: () => (
+                <span class="component-preview__del">
+                  <i class="el-icon-close"></i>
+                </span>
+              )
+            }}
+          >
+          </el-popconfirm>
+
+        </div>
+      </div>
+    )
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.component-preview {
+  width: calc(100% - 20px);
+  border: 1px solid transparent;
+  margin: 10px;
+  box-shadow: border-box;
+  position: relative;
+  cursor: pointer;
+  &:hover {
+    border-style: dashed;
+    @include border_color_primary;
+  }
+  &.active {
+    border-style: solid;
+    @include border_color_primary;
+    >.component-preview__operate {
+      display: block;
+    }
+  }
+}
+.component-preview__icon {
+  width: 100%;
+}
+.component-preview__operate {
+  position: absolute;
+  top: -20px;
+  right: 0;
+  display: none;
+}
+.component-preview__del {
+  @include bg_color_primary;
+  color: #fff;
+}
+.layout-placeholder {
+  min-height: 60px;
+  height: 100%;
+  width: 100%;
+  background-color: #f0f0f0;
+  border: 1px dotted  #a7b1bd;
+  position: relative;
+  &::before {
+    width: 100%;
+    text-align: center;
+    content: '拖拽组件到这里';
+    color: #666;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+.has-component {
+   &::before {
+     display: none;
+   }
+}
+</style>

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

@@ -0,0 +1,16 @@
+<template>
+<div>
+
+</div>
+</template>
+
+<script>
+// 可视化配置项
+export default {
+  name: 'epx-visual-config-option'
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,301 @@
+<template>
+  <div class="config-container" v-if="load">
+    <!-- <component v-if="component" :is="'epx-' + component.CODE + '--visual'"></component> -->
+    <el-tabs v-model="activeTab" class="tabs" :stretch="true" :key="component.id">
+      <el-tab-pane :label="$t('property')" name="attribute">
+        <div class="componet-title page-title" v-if="component.type==='page'">
+          <label class="component-title__label">页面</label>{{component.title}}
+          <i class="el-icon-copy-document" title="复制ID" @click="copyPageId"></i>
+        </div>
+        <div class="componet-title" v-else>
+          <label class="component-title__label">组件类型</label>{{component.TITLE}}
+          <i v-if="component.HELP" class="component-help epx-icon-question-circle" title="点击进入帮助页面" @click="openComponentHelp"></i>
+        </div>
+        <epx-component v-bind="$forwardAttrs($attrs)" :key="component.id"
+          :id="component.id"
+          :metaId="metaId"
+          :upMetaId="upCompConfigs.metaId"
+          :upMetaViewId="upCompConfigs.metaViewId"
+          ref="component"
+
+          :name="(component.visualComponentName || 'visual-component')"
+          :comp-config="componentConfigs"
+          :globalConfigs="globalConfigs"
+          :pageRelationList="relationList"
+          :component-info="component"
+        ></epx-component>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('style')" name="style" :key="component.id">
+        <!-- 布局（看板网格项的层级 / 锁定 / 尺寸约束，R28）：只在看板设计器里对项显示，字段写回 item 本身而不是 itemConfigs / style。
+             悬浮开关不在这里：画布操作条上的悬浮图标（DesignItem）直接切换，悬浮中才显示「层级」 -->
+        <div class="layout-config" v-if="gridLayout && component.type !== 'page'">
+          <div class="layout-config__header">
+            <i :class="['fold-icon', 'el-icon-caret-right', { 'is-unfold': layoutUnfold }]" @click="layoutUnfold = !layoutUnfold"></i>
+            <label class="layout-config__label">布局</label>
+          </div>
+          <div class="layout-config__content" v-show="layoutUnfold">
+            <div class="layout-config__item" v-if="layout.float">
+              <label class="layout-config__label">层级</label>
+              <el-input-number size="small" :model-value="layout.z" :min="0" :step="1" step-strictly controls-position="right" @change="v => setLayout('z', v)"></el-input-number>
+            </div>
+            <div class="layout-config__item">
+              <label class="layout-config__label">锁定位置</label>
+              <el-switch :model-value="!!layout.static" @update:model-value="v => setLayout('static', v)"></el-switch>
+            </div>
+            <div class="layout-config__item" v-for="field in sizeFields" :key="field.key">
+              <label class="layout-config__label">{{ field.label }}</label>
+              <el-input-number size="small" :model-value="layout[field.key]" :min="1" :step="1" step-strictly controls-position="right" @change="v => setLayout(field.key, v)"></el-input-number>
+            </div>
+          </div>
+        </div>
+        <!-- 样式配置（提取为公共组件 epx-component-style-config），写回组件 style -->
+        <epx-component-style-config
+          :key="'style-'+component.id"
+          :value="(component.config && component.config.style) || {}"
+          @change="v=>changeItemConfigs(component.id, { style: v })"
+        ></epx-component-style-config>
+      </el-tab-pane>
+    </el-tabs>
+
+  </div>
+
+</template>
+
+<script>
+import { walkItems } from '@epxing/dashboard/src/grid/model'
+import StyleConfig from './StyleConfig.vue'
+
+// 看板网格项的布局字段（写在 item 本身）：不铺给 visual 面板的 compConfig，否则保存时 getConfigs() 会把它们当组件配置写进 itemConfigs
+const LAYOUT_KEYS = ['float', 'z', 'static', 'minW', 'minH', 'maxW', 'maxH']
+
+export default {
+  name: 'epx-visual-config-panel',
+  components: {
+    'epx-component-style-config': StyleConfig
+  },
+  // gridLayout：看板设计器传 true，「样式」tab 顶部显示网格项的「布局」分组（页面设计器不传）
+  props: ['upCompId', 'component', 'itemConfigs', 'metaId', 'globalConfigs', 'relationList', 'gridLayout'],
+  inject: {
+    changeItemConfigs: 'changeItemConfigs',
+    pageId: 'pageId',
+    // 看板设计器 provide：取当前 items 树（含容器子项），「布局」分组按 id 找到真实 item 读初值
+    getComponentItems: { default: null }
+  },
+  data () {
+    return {
+      load: true,
+      activeTab: 'attribute',
+      layoutUnfold: true,
+      sizeFields: [
+        { key: 'minW', label: '最小宽度' },
+        { key: 'minH', label: '最小高度' },
+        { key: 'maxW', label: '最大宽度' },
+        { key: 'maxH', label: '最大高度' }
+      ]
+    }
+  },
+  computed: {
+    componentConfigs () {
+      // 如果是页面 查找页面默认配置
+      if (this.component.type === 'page') return this.component.config || {}
+      const { configs = {}, id, contentType, ...otherConfigs } = this.component.config || {}
+      let _configs = {}
+      for (const key in otherConfigs) {
+        if (/^title(.i18n)?$/.test(key)) {
+          _configs[key.replace(/^title(.i18n)?$/, 'componentName$1')] = otherConfigs[key]
+        } else {
+          _configs[key] = otherConfigs[key]
+        }
+      }
+      const compId = this.upCompId ? this.upCompId + '-' + id : this.component.id
+      const itemConfig = this.itemConfigs[compId] || {}
+      _configs = { ..._configs, ...configs, ...itemConfig }
+      // 看板设计器里布局字段不进 visual 面板（itemConfigs 里若已有早先漏进去的同名键也一并去掉）；页面设计器的组件配置不受影响
+      if (this.gridLayout) for (const key of LAYOUT_KEYS) delete _configs[key]
+      return _configs
+    },
+    upCompConfigs () {
+      const compId = this.upCompId ? this.upCompId + '-' + this.component.upId : this.component.upId
+      const itemConfig = this.itemConfigs[compId] || {}
+      return { ...itemConfig }
+    },
+    // 「布局」分组的显示值：直读当前选中的真实 item（写回落到 item 上后自动刷新，不持有本地副本）
+    layout () {
+      const item = this.findItem()
+      const layout = { float: !!item.float, static: !!item.static }
+      for (const key of ['z', 'minW', 'minH', 'maxW', 'maxH']) layout[key] = item[key] == null ? undefined : Number(item[key])
+      return layout
+    }
+  },
+  watch: {
+    component (v) {
+      if (!v) {
+        // 获取当前页面可视化
+        const { visualConfigPath } = this.currentPage
+
+        if (visualConfigPath) {
+          const name = this.getVisualComponent({ VISUAL_CONFIG_PATH: visualConfigPath })
+          if (name) this.pagePath = name
+        }
+      }
+    },
+    'component.id' (v) {
+      this.load = false
+      this.$nextTick(() => {
+        this.load = true
+      })
+    },
+    // 外壳每次打开（clickComponent）都换一个 openSeq：按 openTab 定位 tab（chart 项的「布局」按钮要落到「样式」tab，R29）；
+    // 配置改动时外壳也会换 component 对象但 openSeq 不变，不动 tab
+    'component.openSeq' () {
+      this.applyOpenTab()
+    }
+  },
+  created () {
+    this.applyOpenTab()
+  },
+  methods: {
+    // 当前选中的真实 item（容器内子项也按 id 深度找）；没有 items getter 时退回 component.config（打开面板时铺开的项字段快照）
+    findItem () {
+      const id = this.component && this.component.id
+      let found = null
+      if (this.getComponentItems && id != null) walkItems(this.getComponentItems(), item => { if (!found && item.id === id) found = item })
+      return found || (this.component && this.component.config) || {}
+    },
+    applyOpenTab () {
+      if (this.component && this.component.openSeq != null) this.activeTab = this.component.openTab || 'attribute'
+    },
+    // 写回项本身：changeItemConfigs 的 type='component' 把键当组件属性直接落到 item 上（容器内子项按 id 递归找到），
+    // null 会删掉该键（数字框清空 / 关掉锁定时不留脏值）；外壳的 selectComponentList deep watch 据此自动保存，画布按 item 字段同步引擎
+    setLayout (key, v) {
+      const value = (v === undefined || v === null || v === '') ? null : v
+      const patch = { [key]: value }
+      if (key === 'static' && !value) patch.static = null
+      this.changeItemConfigs(this.component.id, patch, 'component')
+    },
+    openComponentHelp () {
+      this.$http.get({
+        entityId: 'FM_SERVICE_HELP',
+        id: this.component.HELP,
+        link: 'help,help#system,help#client'
+      })
+        .then(data => {
+          if (!data) {
+            const { 'CLIENT|CODE': clientCode, 'SYSTEM|CODE': systemCode, CODE } = this.appConfig
+            window.open(`#/help/${clientCode}/${systemCode}/${CODE}/${this.component.HELP}`)
+          } else {
+            const { ID, 'HELP|CLIENT|CODE': clientCode, 'HELP|SYSTEM|CODE': systemCode, 'HELP|CODE': code } = data.data
+            window.open(`#/help/${clientCode}/${systemCode}/${code}/${ID}`)
+          }
+        })
+    },
+    createElement (text) {
+      var isRTL = document.documentElement.getAttribute('dir') === 'rtl'
+      var element = document.createElement('textarea')
+      // 防止在ios中产生缩放效果
+      element.style.fontSize = '12pt'
+      // 重置盒模型
+      element.style.border = '0'
+      element.style.padding = '0'
+      element.style.margin = '0'
+      // 将元素移到屏幕外
+      element.style.position = 'absolute'
+      element.style[isRTL ? 'right' : 'left'] = '-9999px'
+      // 移动元素到页面底部
+      const yPosition = window.pageYOffset || document.documentElement.scrollTop
+      element.style.top = `${yPosition}px`
+      // 设置元素只读
+      element.setAttribute('readonly', '')
+      element.value = text
+      document.body.appendChild(element)
+      return element
+    },
+    copyPageId () {
+      var element = this.createElement(this.pageId)
+      element.select()
+      element.setSelectionRange(0, element.value.length)
+      document.execCommand('copy')
+      element.remove()
+      this.$message.success('复制成功')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.config-container {
+  background: var(--epx-bg-card);
+  height: 100%;
+}
+.tabs {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+    :deep(.el-tabs__content) {
+      flex: 1;
+      overflow: auto;
+    }
+
+}
+.page-title {
+  >i {
+    @include font_color_primary;
+    cursor: pointer;
+  }
+}
+.componet-title {
+  color: #606266;
+  padding: 16px ;
+  .component-title__label {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 100px;
+    padding-right: 12px;
+    text-align: left;
+  }
+}
+.component-help {
+  font-size: var(--epx-font-size-l);
+  cursor: pointer;
+  margin-top: -2px;
+}
+// 「布局」分组：与样式配置（StyleConfig）的折叠分组同一视觉语言
+.layout-config {
+  padding: 10px 10px 0;
+}
+.layout-config__header {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+  .fold-icon {
+    color: rgba(0,0,0,.65);
+    font-size: var(--epx-font-size-l);
+    margin-left: 8px;
+    margin-right: 4px;
+    cursor: pointer;
+    &.is-unfold {
+      transform: rotate(90deg);
+    }
+  }
+}
+.layout-config__label {
+  display: inline-block;
+  color: #666;
+  width: 90px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.layout-config__content {
+  background: #F5F7FA;
+  padding: 0 10px 0 28px;
+}
+.layout-config__item {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+  :deep(.el-input-number) {
+    width: 190px;
+  }
+}
+</style>