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

package/src/visual/ConfigItem.vue

@@ -0,0 +1,218 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-visual-config-item',
+  props: {
+    upId: String,
+    upTitle: String,
+    metaId: String,
+    allComponentList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    componentList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    globalConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      fold: {},
+      pagePath: 'visual-base-page'
+    }
+  },
+  inject: {
+    pageId: {
+      type: String
+    },
+    getItemConfigs: {
+      type: Function
+    },
+    getVisualComponent: {
+      type: Function
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getPageById'
+    ]),
+    currentPage () {
+      const page = this.getPageById(this.pageId)
+      return page
+    },
+    itemConfigs () {
+      return this.getItemConfigs()
+    },
+    getComponentConfigs () {
+      return (component, componentId) => {
+        // 如果是页面 查找页面默认配置
+        const { configs = {}, id, title, 'title.i18n': titleI18n, contentType, ...otherConfigs } = component
+        const itemConfig = this.itemConfigs[componentId] || {}
+        const _configs = { ...configs, ...itemConfig, ...otherConfigs }
+        if (title) {
+          _configs.componentName = title
+        }
+        if (titleI18n) {
+          _configs['componentName.i18n'] = titleI18n
+        }
+        return _configs
+      }
+    },
+    getComponentInfo () {
+      return component => {
+        const componentInfo = this.allComponentList.find(item => (item.componentName || item.CODE) === component.contentType) || {}
+        return { ...componentInfo }
+      }
+    }
+
+  },
+  methods: {
+    /**
+     * @param { Array } componentList 组件列表
+     * @param { String } upId 上级组件id
+     * @param { Object } upComponentInfo 上级组件信息 { id, title, contentType }
+     */
+    renderConfigList (componentList = [], { id, title, contentType } = { }) {
+      if (!componentList) return
+      return componentList.map((component = {}) => this.renderItem(component, { id, title, contentType }))
+    },
+    renderItem (component, { id, title, contentType }) {
+      const componentId = id ? (id + '-' + component.id) : component.id
+      const compConfigs = this.getComponentConfigs(component, componentId)
+      const componentInfo = this.getComponentInfo(component)
+      const componentTitle = title ? (title + ' - ' + component.title) : component.title
+      return (
+        <div ref={'config-' + componentId} key={componentId} class={['component-config__item', { fold: this.fold[componentId] }]}>
+          <p class="component-config__item--title" >
+            <span class="component-config__item--border">{componentTitle}</span>
+            <i class={['el-icon-caret-top']} onClick={() => (this.fold[componentId] = !this.fold[componentId])}></i>
+          </p>
+          <div class="component-config__item--content">
+            <div class="componet-title"><label class="component-title__label">组件类型：</label>{componentInfo.TITLE}</div>
+            <epx-component
+              class="component-config__item--component"
+              id={componentId}
+              metaId={this.metaId}
+              ref={`config-item-${componentId}`}
+              {...this.$forwardAttrs(this.$attrs)}
+              name={component.visualComponentName || componentInfo.visualComponentName || 'visual-component'}
+              comp-config={compConfigs}
+              globalConfigs={this.globalConfigs}
+              component-info={component}
+              up-component={contentType}
+              up-component-instance={this.$refs[`config-item-${id}`]}
+            ></epx-component>
+            {/** 容器组件  会渲染其内部的组件 */}
+            {
+              component.items && component.items.length > 0 && this.renderConfigList(component.items, { id: componentId, title: componentTitle, contentType: component.contentType })
+            }
+          </div>
+        </div>
+      )
+    }
+  },
+  render () {
+    const componentId = 'page'
+    return (
+      <div>
+        <div ref="config-page" class={['component-config__item', { fold: this.fold[componentId] }]}>
+          <p class="component-config__item--title" >
+            <span class="component-config__item--border">页面全局配置</span>
+            <i class={['el-icon-caret-top']} onClick={() => (this.fold[componentId] = !this.fold[componentId])}></i>
+          </p>
+          <div class="component-config__item--content">
+            <epx-component
+              class="component-config__item--component"
+              id="page"
+              name={this.pagePath}
+              comp-config={this.globalConfigs}
+            >
+            </epx-component>
+            { this.renderConfigList(this.componentList) }
+          </div>
+        </div>
+      </div>
+    )
+  },
+  created () {
+    if (this.currentPage) {
+      const { visualConfigPath } = this.currentPage
+
+      if (visualConfigPath) {
+        const name = this.getVisualComponent({ VISUAL_CONFIG_PATH: visualConfigPath })
+        if (name) this.pagePath = name
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.component-config__item {
+&.fold {
+    i {
+      transform: rotate(180deg);
+    }
+    .component-config__item--content {
+      display: none;
+    }
+  }
+}
+
+.component-config__item--title {
+  padding: 6px 16px;
+  position: relative;
+  overflow: hidden;
+  font-size: var(--epx-font-size-l);
+  line-height: 36px;
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: #e3e3e3;
+  }
+  i {
+    @include font_color_primary;
+    font-size: var(--epx-font-size-xl);
+    float: right;
+    cursor: pointer;
+    transition: all .5s;
+    line-height: 36px;
+  }
+
+}
+.component-config__item--component {
+  padding: 12px 24px;
+}
+
+.component-config__item--border{
+  border-left: 3px solid;
+  @include border_color_primary;
+  padding-left: 6px;
+}
+.componet-title {
+  color: #606266;
+  padding: 24px 24px 0;
+  .component-title__label {
+    display: inline-block;
+    width: 148px;
+    padding-right: 12px;
+    text-align: right;
+  }
+}
+</style>

package/src/visual/ConfigSelectItems.vue

@@ -0,0 +1,445 @@
+<script>
+// @jsx-vue3（T33：T30 JSX 批漏掉的 6 个文件，见 .claude/codemod/codemod-jsx-vue3-tail6.mjs）
+// 已选组件
+import draggable from '@epxing/core/src/components/draggable'
+import { ensureIcons, collectIconNames } from '@epxing/icons/src/runtime.mjs'
+export default {
+  name: 'epx-config-select-items',
+  components: {
+    draggable
+  },
+  props: {
+    metaId: String,
+    componentList: Array,
+    allComponentList: Array
+  },
+  inject: ['getItemConfigs', 'changeItemConfigs'],
+  data () {
+    return {
+      foldMap: {},
+      showModal: false,
+      beforeMoveUpId: null,
+      afterMoveUpId: null,
+      componentType: [],
+      componentTypeList: [],
+      collapseList: [],
+      searchKey: '',
+      TERMINAL: 'pc',
+      LEVEL: '01',
+      selectComponent: null,
+      loadInfo: true
+    }
+  },
+  computed: {
+    itemConfigs () {
+      return this.getItemConfigs()
+    },
+    componentImage () {
+      return v => {
+        const component = this.allComponentList.find(item => item.ID === v.id) || {}
+        return component.PICTURE ? this.$util.getFileUrl(component.PICTURE) : ''
+      }
+    }
+  },
+  watch: {
+    // 图标按需：同 config-page/ComponentList.vue 的同名 watch，理由见那里。
+    allComponentList: {
+      immediate: true,
+      handler (list) {
+        if (list && list.length) ensureIcons(collectIconNames(list))
+      }
+    },
+    searchKey (v) {
+      this.getComponentList()
+    },
+    TERMINAL () {
+      this.getComponentList()
+    },
+    LEVEL () {
+      this.getComponentList()
+    },
+    selectComponent () {
+      this.loadInfo = false
+      this.$nextTick(() => {
+        this.loadInfo = true
+      })
+    }
+  },
+  methods: {
+    getComponentInfo (component) {
+      return this.allComponentList.find(item => (item.componentName || item.CODE) === component.contentType) || {}
+    },
+    foldComponent (id) {
+      // 设置其为
+      // 判断其是否为
+      this.foldMap[id] = !this.foldMap[id]
+    },
+    closeModal () {
+      this.showModal = false
+    },
+    addComponent (component) {
+      // 判断当前组件类型
+      const compId = new Date().getTime() + ''
+      const chartMap = {
+        'chart-column': 'column',
+        'chart-hori-column': 'horiColumn',
+        'chart-line': 'line',
+        'chart-pie': 'pie',
+        'chart-circular-pie': 'circularPie'
+      }
+      if (chartMap[component.CODE]) {
+        // 创建图表
+        this.$http.save({
+          entityId: 'FM_REPORT_BASE',
+          'bean.CLIENT': this.CLIENT,
+          'bean.SYSTEM': this.SYSTEM,
+          'bean.NAME': '统计报表-' + new Date().getTime(),
+          'bean.TYPE': component.CODE === 'chart-table' ? '1' : '2',
+          'bean.OBJECT': this.metaId,
+          'bean.CHART_TYPE': chartMap[component.CODE]
+        })
+          .then(data => {
+            // 更改组件配置
+            this.$emit('changeConfigs', this.showModal ? this.showModal + '-' + compId : compId, { reportId: data })
+          })
+      }
+      this.$emit('add', [{ id: compId, ...component }, this.showModal])
+      this.showModal = false
+    },
+    selectComponentFn (id) {
+      const component = this.allComponentList.find(comp => comp.ID === id)
+      this.selectComponent = component
+    },
+    renderItem (component, upId) {
+      const componentInfo = this.getComponentInfo(component)
+      const componentId = upId === 'root' ? component.id : upId + '-' + component.id
+      if (componentInfo.COMPONENT_TYPE === 'page' || componentInfo.COMPONENT_TYPE === 'container') {
+        if (!component.items) component.items = []
+      }
+      return (
+        <li class={['select-component-item', { fold: this.foldMap[componentId] }]} component-id={componentId}>
+          <p class="select-component-item__header">
+            <span>
+              <i class={['component-icon', 'fa', componentInfo.ICON || 'el-icon-box']}></i>
+              <span onClick={() => this.$emit('scrollToConfig', componentId)}>{component.title}</span>
+              {(componentInfo.COMPONENT_TYPE === 'container' || componentInfo.COMPONENT_TYPE === 'page') && <i class={['el-icon-arrow-up', 'fr']} onClick={this.foldComponent.bind(this, componentId)}></i>}
+              <i class="el-icon-close" onClick={this.$emit.bind(this, 'delete', componentId)}></i>
+            </span>
+          </p>
+          <div class="select-component-child">
+            {(componentInfo.COMPONENT_TYPE === 'page' || componentInfo.COMPONENT_TYPE === 'container' || componentInfo.CONTAINER === '1') && !component.fold &&
+              this.renderList(component.items, componentId, component.contentType)
+            }
+          </div>
+        </li>
+      )
+    },
+    /**
+     * @param { Array } componentList 组件列表
+     * @param { String } upId 上级组件id
+     * @param { upComponent } 上级组件 epx-xxxx
+     */
+    renderList (componentList = [], upId = 'root', upComponent) {
+      if (!componentList) return
+      return (
+        <div class="select-component-container">
+          <draggable class="select-component-list" tag="ul" draggable-id={upId} list={componentList} componentData={{ attrs: { 'up-id': upId } }} group={{ name: 'g1' }} move={this.move.bind(this)} onChange={this.change.bind(this)}>
+            {
+              componentList.map(component => {
+                return this.renderItem(component, upId, upComponent)
+              })
+            }
+          </draggable>
+          {
+            upId === 'root' ? (
+              <el-button class="add-component-add root" type="primary" size="default" onClick={(e) => { e.stopPropagation(); this.showModal = upId }}>+ 新增组件</el-button>
+            ) : (
+              <el-button class="add-component-add" type="primary" link onClick={(e) => { e.stopPropagation(); this.showModal = upId }}>+ 新增组件</el-button>
+            )
+          }
+        </div>
+      )
+    },
+
+    renderModal () {
+      return (
+        <el-dialog
+          title="页面组件查询"
+          modelValue={!!this.showModal}
+          width="960px"
+          append-to-body
+          class="visual-component-select-dialog"
+          onClick={e => e.stopPropagation()}
+          onClose={() => (this.showModal = false)}
+        >
+          <epx-visual-component-library-dialog onClick={this.addComponent.bind(this)}></epx-visual-component-library-dialog>
+        </el-dialog>
+      )
+    },
+    move (evt, orginEvt) {
+      this.beforeMoveUpId = evt.from.getAttribute('up-id')
+      this.afterMoveUpId = evt.to.getAttribute('up-id')
+    },
+    change (e) {
+      if (e.removed) {
+        // 删除对应配置
+      } else if (e.added) {
+        // 寻找之前的配置
+        const { element = {} } = e.added
+        // 跨级移动
+        if (element.id && this.beforeMoveUpId !== this.afterMoveUpId) {
+          const beforeElementId = (this.beforeMoveUpId && this.beforeMoveUpId !== 'root') ? (this.beforeMoveUpId + '-' + element.id) : element.id
+          const afterElementId = (this.afterMoveUpId && this.afterMoveUpId !== 'root') ? (this.afterMoveUpId + '-' + element.id) : element.id
+          const beforeMoveConfig = this.itemConfigs[beforeElementId]
+          if (beforeMoveConfig) {
+            this.changeItemConfigs(afterElementId, beforeMoveConfig)
+          }
+        }
+        this.beforeMoveUpId = null
+        this.afterMoveUpId = null
+      }
+    },
+    getComponentList () {
+      // this.componentType.forEach((item, index) => {
+      //   this.$http.list({
+      //     entityId: 'FM_PAGE',
+      //     'scope.COMPONENT_TYPE#in': item.id
+      //   })
+      //     .then(data => {
+      //       this.$set(this.componentTypeList, index, { ...item, children: data.entitys })
+      //     })
+      // })
+      const params = {
+        action: 'getPageComponentTree',
+        entityId: 'FM_PAGE',
+        searchText: this.searchKey,
+        'scope.TERMINAL#in': this.TERMINAL,
+        'scope.LEVEL#in': this.LEVEL,
+        'scope.TYPE': '01'
+      }
+      if (this.LEVEL === '03') {
+        params['scope.SYSTEM'] = this.SYSTEM
+      }
+      this.$http.get(params)
+        .then(data => {
+          this.componentTypeList = data
+        })
+    }
+  },
+  render () {
+    return (
+      <div class="config-select-container">
+        { this.renderList(this.componentList)}
+        { this.renderModal()}
+      </div>
+    )
+  },
+  created () {
+    document.body.addEventListener('click', this.closeModal, false)
+    /** 获取组件类型代码表， 生成菜单 */
+    this.getComponentList()
+  },
+  unmounted () {
+    document.body.removeEventListener('click', this.closeModal, false)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.component-nav {
+  width: 360px;
+  box-shadow: 2px 0px 6px 0px rgba(0, 0, 0, 0.15);
+  overflow: auto;
+}
+
+.component-content {
+  flex: 1;
+  overflow: auto;
+}
+
+ .config-select-container {
+
+    :deep(.el-dialog) {
+      height: 500px
+    }
+
+ }
+.select-component-container {
+  padding-left: 12px;
+}
+.select-component-item {
+  margin: 18px 4px;
+  font-weight: 500;
+  cursor: pointer;
+  &.fold {
+    .select-component-container {
+      display: none;
+    }
+    .el-icon-arrow-up {
+     transform: rotate(180deg);
+    }
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+  .el-icon-close {
+    float: right;
+    margin-left: 4px;
+    cursor: pointer;
+    display: none;
+  }
+  .el-icon-arrow-up {
+    transition: all .5s;
+  }
+  >span:hover {
+      @include font_color_primary
+  }
+}
+.select-component-item__header {
+  cursor: pointer;
+  font-weight: 500;
+  &:hover {
+    .el-icon-close {
+      display: inline-block;
+    }
+  }
+}
+.select-component-list {
+  min-height: 20px;
+}
+.component-list {
+  // max-height: 400px;
+  // overflow: auto;
+}
+.component-item {
+  // padding: 4px 12px;
+  cursor: pointer;
+  >span:hover {
+      @include font_color_primary
+  }
+}
+.add-component-add  {
+  &.root {
+    margin-top: 16px;
+  }
+}
+.find {
+  max-height: 400px;
+}
+.component-icon {
+  font-weight: 500;
+  color: #666;
+  // @include font_color_primary;
+  margin-right: 6px;
+}
+.filter {
+  padding: 12px 16px;
+  border-bottom: 1px solid #D8DCE6;
+}
+.component-select-item {
+  display: flex;
+}
+.component-menu-item {
+  padding-right: 16px;
+  &:hover {
+    .component-select-btn {
+      display: inline;
+    }
+  }
+}
+.filter-item {
+
+    :deep(.el-button) {
+      color: #444;
+      &:hover, &.active {
+        @include font_color_primary
+      }
+    }
+
+}
+.component-title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 4px;
+}
+.component-select-btn {
+  display: none;
+}
+.component-content {
+  padding: 0 16px;
+}
+.component-header {
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  >span {
+    font-weight: bold;
+    color: #333;
+    font-size: var(--epx-font-size-l);
+  }
+}
+.component-style {
+  >img {
+    width: 100%;
+  }
+}
+.component-info-title {
+  font-size: var(--epx-font-size-l);
+  font-weight: bold;
+  padding: 16px 0;
+}
+.collapse {
+  padding: 0 20px;
+
+    :deep(.el-collapse-item__header),
+    :deep(.el-collapse-item__wrap) {
+      border: none;
+    }
+
+}
+
+.component-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.component-item {
+  width: calc(33.3% - 20px);
+  margin: 10px;
+  cursor: pointer;
+  &:hover, &.active {
+    .component-item__preview{
+      padding: 0;
+      border: 2px solid;
+      @include border_color_primary;
+    }
+  }
+
+}
+.component-item__preview {
+  border: 1px dashed #e3e3e3;
+  padding: 1px;
+  box-sizing: border-box;
+  transition: all .3s;
+  width: 100%;
+  height: 75px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  &>img {
+    height: 100%;
+  }
+}
+.component-item__title {
+  color: #666;
+  margin-top: 4px;
+  text-align: center;
+}
+.component-desc {
+  padding: 20px 0;
+}
+</style>