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

package/src/visual/NumStatistic.vue

@@ -0,0 +1,242 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import ComponentVue from './Component.vue'
+// 默认值逻辑
+export default {
+  name: 'epx-visual-num-statistic',
+  extends: ComponentVue,
+  watch: {
+    allConfigs: {
+      handler (v) {
+        if (v.metaId) {
+          this.componentMetaId = v.metaId
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        flex: false,
+        metaId: this.pageMetaId,
+        componentName: this.componentInfo.title,
+        type: 'card',
+        'justify-content': 'center',
+        background: '#fff',
+        border: false,
+        orientation: 'vertical',
+        titleFontSize: '14px',
+        titleColor: '#000',
+        countFontSize: '30px',
+        countColor: '#000',
+        openMode: '3',
+        iconType: 'icon',
+        showIconBg: true,
+        span: 24,
+        xsspan: 24
+      }
+    },
+    initConfig () {
+      const config = { ...this.compConfig }
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span
+      }
+      this.config = config
+      for (const key in this.config) {
+        const configOption = this.configOptions.find(item => item.key === key) || {}
+        if (configOption.type === 'field') {
+          this.selectFieldWay[key] = 'custom'
+        }
+      }
+    },
+    renderCardLaout (item) {
+      const styles = ['vetical-center', 'horizontal-center', 'horizontal-between', 'horizontal-between-reverse', 'horizontal-center-horizontal_content', 'horizontal-between-horizontal_content']
+      return (
+        <div class="epx-visual-num-statistic__card-layout">
+          {
+            styles.map(style => {
+              const classNames = style.split('-').map(item => ('card--' + item))
+              return (
+                <div key={style} class={['card', { 'is-active': style === this.allConfigs[item.key] }, ...classNames]} onClick={v => this.changeConfigItem(item.key, style)}>
+                  <div class="card-image">
+                  </div>
+                  <div class={['card-content', 'card-content--' + this.allConfigs.titleNumOrder]}>
+                    <div class="card-title"></div>
+                    <div class="card-num">
+                      <span></span>
+                      <span></span>
+                      <span></span>
+                    </div>
+                  </div>
+                </div>
+              )
+            })
+          }
+        </div>
+      )
+    }
+  }
+}
+</script>
+<style lang="scss">
+// 布局选项由独立的 FormItem 子组件渲染，scoped 样式无法命中这些节点。
+.epx-visual-num-statistic__card-layout {
+  width: 220px;
+  display: flex;
+  flex-wrap: wrap;
+.card {
+  width: 90px;
+  height: 42px;
+  padding: 6px;
+  box-sizing: border-box;
+  border-radius: var(--epx-radius-s);
+  border: 1px solid #E3E3E3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 5px;
+  color: #D8D8D8;
+  cursor: pointer;
+  &:hover, &.is-active {
+    @include font_color_primary;
+    @include border_color_primary;
+    .card-title  {
+      @include bg_color_primary;
+    }
+    .card-num >span {
+      @include bg_color_primary;
+    }
+  }
+}
+.card-image {
+  position: relative;
+  flex: none;
+  width: 15px;
+  height: 13px;
+  box-sizing: border-box;
+  border: 1px solid currentColor;
+  border-radius: 2px;
+  margin-bottom: 4px;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    left: 2px;
+    bottom: 2px;
+    width: 9px;
+    height: 5px;
+    background: currentColor;
+    clip-path: polygon(0 100%, 35% 15%, 60% 60%, 78% 30%, 100% 100%);
+  }
+}
+.card-content {
+  display: flex;
+  flex-direction: column;
+  align-items:flex-end;
+  // justify-content: flex-start;
+}
+.card-content--reverse {
+  flex-direction: column-reverse;
+  .card-title {
+    margin-bottom: 0;
+  }
+  .card-num {
+    margin-bottom: 4px;
+  }
+}
+.card-title {
+  width: 15px;
+  height: 3px;
+  background: #D8D8D8;
+  line-height: 1;
+  margin-bottom: 4px;
+}
+.card-num {
+  line-height: 1;
+  font-size: 0;
+  >span {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: #D8D8D8;
+    margin-right: 1px;
+    &:last-child {
+      margin: 0;
+    }
+  }
+}
+.card--horizontal {
+  flex-direction: row;
+  justify-content: center;
+  .card-image {
+    margin-right: 4px;
+    margin-bottom: 0;
+  }
+}
+.card--center {
+  .card-content {
+    align-items: center;
+  }
+  &.card--horizontal {
+    .card-content {
+      align-items: flex-start;
+    }
+  }
+  &.card--horizontal_content {
+    .card-content {
+      align-items: center;
+    }
+  }
+}
+.card--between {
+  justify-content: space-between;
+  &.card--horizontal_content {
+    .card-content {
+      flex: 1;
+      justify-content: space-between;
+    }
+  }
+}
+.card--reverse {
+  flex-direction: row-reverse;
+  .card-content {
+    align-items:flex-start;
+  }
+}
+.card--horizontal_content {
+  .card-content {
+    flex-direction: row;
+    align-items: center;
+  }
+  .card-content--reverse {
+    flex-direction: row-reverse;
+    .card-title {
+      margin-right: 0;
+    }
+    .card-num {
+      margin-right: 4px;
+    }
+  }
+  .card-title {
+    margin: 0;
+    margin-right: 4px;
+  }
+  .card-num {
+    margin: 0;
+  }
+}
+}
+</style>

package/src/visual/OrgChart.vue

@@ -0,0 +1,113 @@
+<script>
+import ComponentVue from './Component.vue'
+export default {
+  name: 'epx-visual-org-chart',
+  extends: ComponentVue,
+  methods: {
+    initDefaultConfigs () {
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        orgDirection: 't2b',
+        column: '1',
+        fields: this.currentMeta.getAllFields(),
+        editable: false,
+        span: 24
+
+      }
+    },
+    initConfigOptions () {
+      const configOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'orgDirection', label: '排列方向', type: 'radio', options: [{ label: '从上往下', value: 't2b' }, { label: '从左往右', value: 'l2r' }] },
+        { key: 'orgFullscreen', label: '初始占满全屏', type: 'switch' },
+        { key: 'nodeWidth', label: '节点宽度', type: 'num', defaultValue: 120 },
+        { key: 'column', label: '列数', type: 'input' },
+        { key: 'fields', label: '表单字段', type: 'list-field' },
+        { key: 'parentField', label: '上级字段', type: 'field' },
+        { key: 'span', label: '宽度', type: 'select', options: this.spanOptions },
+        { key: 'xsspan', label: '移动端宽度', type: 'select', options: this.spanOptions },
+        { key: 'height', label: '高度' },
+        { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] }
+      ]
+      // if (this.pageGlobalConfigs.layout === 'flex') {
+      //   configOptions.splice(1, 0, { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] })
+      // }
+      this.configOptions = configOptions
+    },
+    getFieldOptions () {
+      this.fieldOptions = [
+        { key: 'attriName', label: '字段', readonly: true },
+        {
+          key: 'configWay',
+          label: '配置方式',
+          type: 'radio',
+          options: [{ label: '默认配置', value: 'default' }, { label: '自定义', value: 'custom' }],
+          defaultValue: 'default'
+        },
+        { key: 'attriLabel', label: '名称', type: 'text' },
+        {
+          key: 'state',
+          label: '字段状态',
+          type: 'radio',
+          options: [{ label: '跟随页面状态', value: '' }, { label: '新增', value: 'ADD' }, { label: '编辑', value: 'EDIT' }, { label: '详情', value: 'DETAIL' }, { label: '隐藏', value: 'HIDDEN' }],
+          defaultValue: ''
+        },
+        { key: 'showLabel', label: '显示名称', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }], defaultValue: true },
+        {
+          key: 'isDateNow',
+          label: '是否是当前时间',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: false,
+          showFlag: {
+            dataType: ['date', 'time', 'date_ym']
+          }
+        },
+        { key: 'value', label: '默认值', type: 'value' },
+        { key: 'color', label: '字体颜色', type: 'color', defaultValue: '#333' },
+        { key: 'noteMode', label: '注释说明显示模式', type: 'radio', options: [{ label: '弹窗', value: 'tips' }, { label: '文本', value: 'text' }], defaultValue: 'tips' },
+        { key: 'notes', label: '注释说明', type: 'input' },
+        {
+          key: 'findPageId',
+          label: '对象查找页面',
+          type: 'object',
+          object: 'FM_PAGE_CONFIG',
+          showFlag: {
+            dataType: ['multiobject', 'object']
+          }
+        },
+        {
+          key: 'maxLength',
+          label: '长度限制',
+          type: 'num',
+          showFlag: {
+            dataType: ['text', 'textarea', 'bigtext']
+          }
+        },
+        {
+          key: 'showLevel',
+          label: '下拉框层级',
+          type: 'number',
+          showFlag: {
+            dataType: ['treeList', 'multiobject', 'object']
+          }
+        },
+        {
+          key: 'onlySelectLeaf',
+          label: '只选择叶节点',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: false,
+          showFlag: {
+            dataType: ['treeList', 'multiobject', 'object']
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/PageCatalog.vue

@@ -0,0 +1,26 @@
+<script>
+import ComponentVue from '@epxing/designer/src/visual/Component.vue'
+// 默认值逻辑
+export default {
+  name: 'epx-visual-page-catalog',
+  extends: ComponentVue,
+  methods: {
+    initDefaultConfigs () {
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        flex: false,
+        padding: 10,
+        span: 24,
+        xsspan: 24
+      }
+    },
+    initConfigOptions () {
+      const configOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'operates', label: '操作按钮', type: 'operates' }
+      ]
+      this.configOptions = configOptions
+    }
+  }
+}
+</script>

package/src/visual/PageConfig.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="container">
+    <div class="header">
+      <div class="header-inner">
+        <div class="title">
+          <i class="el-icon-arrow-left" @click="backPage"></i>
+          <span class="">{{title}}</span>
+        </div>
+        <div class="opera">
+          <el-dropdown>
+            <span class="el-dropdown-link">
+              <el-button class="more" plain size="default"><i class="el-icon-more"></i></el-button>
+            </span>
+            <template v-slot:dropdown><el-dropdown-menu>
+              <el-dropdown-item @click="pageSettingInfo">页面信息</el-dropdown-item>
+            </el-dropdown-menu></template>
+          </el-dropdown>
+        </div>
+      </div>
+    </div>
+    <p class="tip">
+    </p>
+    <epx-page class="visual-page" v-if="visualPageId" :inline="true" :init-configs="config"  @saveUpdateConfig="submitForm" :metaId="pageMetaId" :pageId="visualPageId" :pageDate="data"></epx-page>
+    <!-- <epx-page class="visual-page" v-if="visualPageId" :inline="true" :init-configs="config" @updateConfig="updateConfig"  @saveUpdateConfig="submitForm" :metaId="pageMetaId" :pageId="visualPageId" :pageDate="data"></epx-page> -->
+  <div style="height:20px" v-if="mode==='json'"></div>
+</div>
+  <!-- 保存区域 -->
+
+</template>
+<script>
+import { DELETE_PAGE } from '@epxing/core/src/store/actions'
+export default {
+  name: 'epx-page-visual-config',
+  data () {
+    return {
+      content: '',
+      mode: 'json',
+      visualPageId: '',
+      title: ''
+    }
+  },
+  methods: {
+    pageSettingInfo () {
+      // 当前页面id
+      if (!this.$pageId) {
+        this.$message.error('系统默认页面，无法编辑')
+        return
+      }
+      const route = {
+        metaId: 'FM_PAGE_CONFIG',
+        flag: 'v_page',
+        id: this.data.ID,
+        entityId: this.$metaId,
+        pageType: 'EDIT'
+      }
+      this.$createPage(route)
+      // if (this.menuRouters.length > 0) {
+      //   this.$pushMenuRoute(route)
+      // } else {
+      //   this.$pushModuleRoute(route)
+      // }
+    },
+    // submitForm (isGo = true) {
+    submitForm (content = this.content) {
+      const params = {
+        entityId: this.$metaId,
+        [`bean.${this.$metaKey}`]: this.data[this.$metaKey],
+        'bean.CONTENT': content
+        // 'bean.CONTENT': this.content
+      }
+      this.$http.update({
+        ...params
+      })
+        .then(data => {
+          this.$message.success('保存成功')
+          // 清空该页面
+          this.$store.commit(DELETE_PAGE, { pageId: this.data.ID })
+          // if (isGo) {
+          //   this.backPage({ reload: true })
+          // }
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+        })
+    },
+    // submitForm (content = this.content) {
+    //   const { submitParams = {} } = this.$query
+    //   const { submitParams: pageSubmitParams = {}, saveSuccessText, updateSuccessText, saveAction, updateAction } = this.pageConfig
+    //   const params = {
+    //     action: saveAction,
+    //     entityId: this.$metaId,
+    //     [`bean.${this.$metaKey}`]: this.data[this.$metaKey],
+    //     'bean.CONTENT': content
+    //     // 'bean.CONTENT': this.content
+    //   }
+    //   // 组建formData 提交
+    //   if (this.pageType === 'EDIT') params.action = updateAction
+    //   this.$http.save({
+    //     ...params,
+    //     ...submitParams,
+    //     ...this.$formatParams(pageSubmitParams)
+    //   })
+    //     .then(data => {
+    //       this.$message.success(this.pageType === 'EDIT' ? updateSuccessText : saveSuccessText)
+    //       // 清空该页面
+    //       this.$store.commit(DELETE_PAGE, { pageId: this.data.ID })
+    //       // if (isGo) {
+    //       //   this.backPage({ reload: true })
+    //       // }
+    //     })
+    //     .catch(err => {
+    //       this.$message.error(err.message || '处理失败')
+    //     })
+    // },
+    getVisualPage (id, templateId) {
+      // eslint-disable-next-line no-async-promise-executor
+      return new Promise(async resolve => {
+        const params = {
+          link: 'page',
+          entityId: 'FM_PAGE'
+        }
+        if (id) {
+          params['scope.PAGE|ID'] = id
+        } else if (templateId) {
+          params.link = null
+          params['scope.CODE'] = templateId
+        } else {
+          resolve(null)
+          return
+        }
+        const res = await this.$http.find(params)
+        const data = res && res.data ? res.data : {}
+        const pageId = data.VISUAL_CONFIG_PAGE
+        const upPageId = data.UP_PAGE
+        if (pageId) {
+          resolve(pageId)
+        } else if (upPageId) {
+          this.getVisualPage(null, upPageId)
+            .then(pageId => {
+              resolve(pageId)
+            })
+        } else {
+          resolve(null)
+        }
+      })
+    },
+    getData () {
+      const { id } = this.$query
+      this.title = this.$query.title
+      this.$http.get({
+        link: 'page',
+        entityId: this.$metaId,
+        id
+      })
+        .then(data => {
+          if (data && data.data) {
+            const { id } = this.$query
+            this.getVisualPage(id)
+              .then(visualPageId => {
+                if (!visualPageId) {
+                  this.$message.error('当前未配置可视化配置页面')
+                  this.backPage()
+                } else {
+                  this.visualPageId = visualPageId
+                }
+              })
+            this.content = data.data.CONTENT
+            if (this.content.length > 0) {
+              // eslint-disable-next-line no-eval
+              this.config = eval('(' + this.content + ')')
+            } else {
+              this.config = {}
+            }
+            // this.visualPageId = data.data['PAGE|VISUAL_CONFIG_PAGE']
+            this.pageMetaId = data.data.META_ID
+            this.data = { ...data.data }
+          }
+        })
+    }
+    // updateConfig (config) {
+    //   this.content = JSON.stringify(config, null, '\t')
+    // }
+  },
+  created () {
+    this.getData()
+  }
+}
+</script>
+<style scoped lang="scss">
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+}
+.header {
+  // height: 50px;
+  margin-bottom: 20px;
+}
+.header-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--epx-bg-card);
+  position: absolute;
+  top: 0;
+  left: 2px;
+  width: 100%;
+  height: 50px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  .title {
+    font-size: var(--epx-font-size-l);
+    color: #333333;
+    i {
+      font-size: 22px;
+      position: relative;
+      top: 2px;
+      cursor: pointer;
+    }
+  }
+  .opera {
+
+      :deep(.el-button) {
+        padding: 8px 16px;
+      }
+
+    .more {
+      font-size: var(--epx-font-size-xl);
+      padding: 5px 14px;
+    }
+    .opera-text {
+      border: 1px solid #999;
+      padding: 0 12px;
+      font-size: var(--epx-font-size-xl);
+      color: #8395a7;
+      line-height: 1;
+      cursor: pointer;
+      i {
+        margin-right: 4px;
+      }
+      margin-left: 24px;
+    }
+  }
+}
+.tip {
+  color:#666;
+  margin: 16px 0;
+  display: flex;
+  justify-content: space-between;
+}
+.button-container {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  text-align: center;
+}
+.visual-page {
+  flex:1;
+  overflow: auto;
+
+    :deep(.page-container) {
+      overflow: auto;
+    }
+
+}
+.switch {
+  position: relative;
+  font-size: var(--epx-font-size-xl);
+  cursor: pointer;
+}
+</style>
+<style >
+.ace_editor {
+  float: right;
+  font-size: var(--epx-font-size-base);
+  flex: 1;
+}
+</style>