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

package/src/visual/step/Item.vue

@@ -0,0 +1,140 @@
+<script>
+import Component from '../Component'
+export default {
+  name: 'epx-visual-step-item',
+  extends: Component,
+  data () {
+    return {
+      FunctionOption: [],
+      operateConfigs: {}
+    }
+  },
+  watch: {
+    allConfigs: {
+      handler (v) {
+        this.componentMetaId = v.metaId
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getOperateOptions () {
+      this.getHandlerList()
+      this.getCommonOperates()
+      this.operateConfigs = [
+        {
+          key: 'base',
+          title: '基本',
+          options: ['text', 'ui', 'type', 'icon', 'preview']
+        },
+        {
+          key: 'event',
+          title: '事件',
+          options: ['beforeTrigger', 'handler', 'metaId', 'action', 'rule', 'openMode', 'page', 'pageType', 'printWay', 'printCode', 'cptName', 'destActivityId', 'function', 'params']
+        },
+        {
+          key: 'advance',
+          title: '高级',
+          options: ['showCondition', 'num', 'confirm', 'confirmMsg', 'successMsg', 'failMsg', 'mask']
+        }
+      ]
+      this.operateOptions = [
+        { key: 'text', label: '按钮名称' },
+        { key: 'metaId', label: '请求对象', type: 'entity' },
+        { key: 'action', label: '请求操作', type: 'select', options: this.actionList },
+        { key: 'num', label: '选中记录', type: 'radio', options: [{ label: '不需要', value: '0' }, { label: '选择1个', value: '1' }, { label: '选择多个', value: 'n' }], defaultValue: '0' },
+        { key: 'confirmMsg', label: '弹窗文案' },
+        { key: 'pageFlag', label: '页面标识符', type: 'text' },
+        { key: 'option', label: '显示条件' },
+        {
+          key: 'handler',
+          label: '处理事件',
+          type: 'select',
+          options: this.handlerList
+        },
+        {
+          key: 'page',
+          label: '打开页面',
+          type: 'page',
+          showFlag: { handler: 'goPage' }
+        },
+        {
+          key: 'openMode',
+          label: '页面打开方式',
+          type: 'radio',
+          options: [{ label: '直接打开', value: '3' }, { label: '标签页', value: '1' }, { label: '弹窗', value: '2' }],
+          defaultValue: '3',
+          showFlag: { handler: 'goPage' }
+        },
+        {
+          key: 'printWay',
+          label: '打印方式',
+          type: 'radio',
+          options: [{ label: '自定义报表打印', value: 'custom' }, { label: '帆软报表打印', value: 'fine' }],
+          defaultValue: 'custom',
+          showFlag: { handler: 'print' }
+        },
+        {
+          key: 'printCode',
+          label: '打印模板',
+          type: 'object',
+          object: 'FM_FORM',
+          dataKey: 'CODE',
+          showFlag: { handler: 'print', printWay: 'custom' }
+        },
+        {
+          key: 'cptName',
+          label: '打印模板',
+          type: 'object',
+          object: 'FM_REPORT_TEMPLATE',
+          dataKey: 'CODE',
+          showFlag: { handler: 'print', printWay: 'fine' }
+        },
+        {
+          key: 'processNode',
+          label: '流程',
+          type: 'process',
+          showFlag: { handler: 'applyEntity' }
+        },
+        {
+          key: 'openOpinion',
+          label: '审核意见弹窗',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: 'checkEntity' }
+        },
+        {
+          key: 'checkOpinion',
+          label: '审核意见',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: 'checkEntity' }
+        },
+        {
+          key: 'checkSign',
+          label: '审核签名',
+          type: 'radio',
+          options: [{ label: '显示', value: true }, { label: '不显示', value: false }],
+          defaultValue: true,
+          showFlag: { handler: 'checkEntity' }
+        },
+        {
+          key: 'reload',
+          label: '是否刷新页面',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          showFlag: { handler: 'backPage' },
+          defaultValue: false
+        },
+        { key: 'params', label: '参数传递', type: 'params' }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/widgets/CardFormItemVisual.vue

@@ -0,0 +1,46 @@
+<script>
+import ComponentVue from '@epxing/designer/src/visual/Component.vue'
+export default {
+  name: 'epx-card-form-item-visual',
+  extends: ComponentVue,
+  methods: {
+    getFieldOptions () {
+      this.fieldOptions = [
+        { key: 'attriName', label: this.$t('field'), readonly: true },
+        { key: 'configWay', label: this.$t('collocation method'), type: 'radio', options: [{ label: this.$t('default setting'), value: 'default' }, { label: this.$t('user-defined'), value: 'custom' }], defaultValue: 'default' },
+        { key: 'attriLabel', label: this.$t('name'), type: 'text' },
+        {
+          key: 'state',
+          label: this.$t('field state'),
+          type: 'radio',
+          options: [{ label: this.$t('details'), value: 'DETAIL' }, { label: this.$t('hide'), value: 'HIDDEN' }],
+          defaultValue: 'DETAIL'
+        },
+        // { key: 'width', label: '宽度', type: 'text', defaultValue: '120' },
+        { key: 'showLabel', label: this.$t('Show the title'), type: 'radio', options: [{ label: this.$t('show'), value: true }, { label: this.$t('Not show'), value: false }], defaultValue: false },
+        { key: 'split', label: this.$t('separator'), type: 'radio', options: [{ label: this.$t('vertical'), value: ' | ' }, { label: this.$t('slash'), value: ' / ' }, { label: this.$t('blank'), value: ' ' }], defaultValue: ' | ' },
+        // { key: 'function', label: '函数', type: 'function' },
+        // { key: 'locked', label: '是否锁定', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
+        { key: 'style', label: this.$t('Field style'), type: 'radio', options: [{ label: this.$t('text'), value: 'text' }, { label: this.$t('label'), value: 'tag' }], defaultValue: 'text' },
+        { key: 'color', label: this.$t('font color'), type: 'color', defaultValue: '#333' },
+        { key: 'fontWeight', label: this.$t('whether the bold'), type: 'radio', options: [{ label: this.$t('yes'), value: 'bold' }, { label: this.$t('no'), value: 'normal' }], defaultValue: 'normal' },
+        { key: 'fontSize', label: this.$t('font size'), type: 'num', defaultValue: 14 }
+      ]
+    },
+    changeMetaFn (v) {
+      this.componentMetaId = v.metaId
+      this.metaViewId = v.metaViewId
+    }
+  },
+  mounted () {
+    if (this.upComponentInstance) {
+      const upComponent = this.upComponentInstance.$refs.component
+      upComponent.$epxOn('change-meta-id', this.changeMetaFn)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/widgets/CarouselVisual.vue

@@ -0,0 +1,291 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import ComponentVue from '@epxing/designer/src/visual/Component.vue'
+import draggable from '@epxing/core/src/components/draggable'
+export default {
+  name: 'epx-carousel-visual',
+  extends: ComponentVue,
+  components: {
+    draggable
+  },
+  data () {
+    return {
+      editCarouselDialog: false,
+      editCarousel: {}
+    }
+  },
+  computed: {
+    carouselList: {
+      get () {
+        const { items = [] } = this.widget
+        return items
+      },
+      set (v) {
+        this.designer.updateWidget(this.id, { items: v })
+      }
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      let label = ''
+      if (this.currentMeta) {
+        label = this.currentMeta.getLabel()
+      }
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        showTitle: 'none',
+        fields: label ? [label] : [],
+        operateColumnEllipsis: 0,
+        operateColumnPosition: 'start',
+        span: 24
+      }
+    },
+    initConfigs () {
+      const config = { ...this.compConfig }
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span
+      }
+      this.config = config
+    },
+    changeMetaFn (v) {
+      this.componentMetaId = v.metaId
+      this.metaViewId = v.metaViewId
+    },
+    renderCarousel (item) {
+      return (
+        <div class="">
+          <draggable
+            v-model={this.carouselList}
+            tag="ul"
+            group="carousel-pane"
+            handle=".carousel-item__drag-icon"
+            class="carousel__list"
+          >
+            {this.carouselList.map((item, index) => (
+              <li class={{ carousel__item: true }}>
+                <i class="carousel-item__drag-icon epx-icon-tuozhuai"></i>
+                <span class="carousel-item__name">{item.title}</span>
+                <span class="carousel-item__operates">
+                  <el-button
+                    type="primary" link
+                    size="default"
+                    icon="el-icon-setting"
+                    onClick={this.editCarouselItem.bind(this, item, index)}
+                  ></el-button>
+                  <el-button
+                    type="primary" link
+                    size="default"
+                    icon="el-icon-delete"
+                    onClick={this.deleteCarouselItem.bind(this, item)}
+                  ></el-button>
+                </span>
+              </li>
+            ))}
+          </draggable>
+          <el-button type="primary" link onClick={this.addCarouselItem}>
+            + 添加轮播项
+          </el-button>
+          <el-dialog
+            title="修改轮播项"
+            modelValue={this.editCarouselDialog}
+            width="420px"
+            append-to-body
+            destroy-on-close
+            onClose={() => {
+              this.editCarouselDialog = false
+            }}
+          >
+            {this.editCarouselDialog && (
+              <el-form inline label-position="left" label-width="100px">
+                <el-form-item
+                  label="名称"
+                  class="epx-visual-component__form-item"
+                >
+                  <epx-visual-config-input
+                    label="名称"
+                    value={this.editCarousel.title}
+                    i18nValue={this.editCarousel['name.i18n']}
+                  />
+                </el-form-item>
+                <el-form-item
+                  label="内容显示"
+                  class="epx-visual-component__form-item"
+                >
+                  <el-radio-group modelValue={this.editCarousel.renderContentType || 'image'} onUpdate:modelValue={v => (this.editCarousel.renderContentType = v)}>
+                    <el-radio label="image" value="image">图片</el-radio>
+                    <el-radio label="node" value="node">自定义内容</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                {
+                  this.editCarousel.renderContentType !== 'node' && (
+                    <el-form-item
+                      label="图片地址"
+                      class="epx-visual-component__form-item"
+                    >
+                      <epx-visual-config-image
+                        value={this.editCarousel.imgUrl}
+                        onChange={(v) => (this.editCarousel.imgUrl = v)}
+                      />
+                    </el-form-item>
+                  )
+                }
+                <el-form-item
+                  label="链接"
+                  class="epx-visual-component__form-item"
+                >
+                  <el-radio-group v-model={this.editCarousel.link}>
+                    <el-radio label="none" value="none">无</el-radio>
+                    <el-radio label="menu" value="menu">菜单</el-radio>
+                    <el-radio label="page" value="page">页面</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                {this.editCarousel.link === 'menu' && (
+                  <el-form-item
+                    label="打开菜单"
+                    class="epx-visual-component__form-item"
+                  >
+                    <epx-visual-config-object
+                      value={this.editCarousel.menuId}
+                      object="FM_MODULE"
+                      label="菜单"
+                      flag="config_menu"
+                      objectWay="option"
+                      isTree="1"
+                      onChangeConfigs={(v) =>
+                        (this.editCarousel.menuId = v)
+                      }
+                    />
+                  </el-form-item>
+                )}
+                {this.editCarousel.link === 'page' && (
+                  <el-form-item
+                    label="打开页面"
+                    class="epx-visual-component__form-item"
+                  >
+                    <epx-visual-config-object
+                      value={this.editCarousel.pageId}
+                      object="FM_PAGE_CONFIG"
+                      label="页面"
+                      onChangeConfigs={(v) =>
+                        (this.editCarousel.pageId = v)
+                      }
+                    />
+                  </el-form-item>
+                )}
+                {this.editCarousel.link === 'page' && (
+                  <el-form-item
+                    label="页面打开方式"
+                    class="epx-visual-component__form-item"
+                  >
+                    <el-radio-group v-model={this.editCarousel.openMode}>
+                      <el-radio label="3" value="3">直接打开</el-radio>
+                      <el-radio label="2" value="2">弹窗</el-radio>
+                      <el-radio label="1" value="1">新页面</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                )}
+                {(this.editCarousel.link === 'page' ||
+                  this.editCarousel.link === 'menu') && (
+                  <el-form-item
+                    label="参数传递"
+                    class="epx-visual-component__form-item"
+                  >
+                    <epx-visual-config-params
+                      value={this.editCarousel.params}
+                      onChangeConfigs={(v) =>
+                        (this.editCarousel.params = v)
+                      }
+                    />
+                  </el-form-item>
+                )}
+              </el-form>
+            )}
+            <div class="button-group">
+              <el-button
+                type="primary"
+                size="default"
+                onClick={this.saveCarouselItem}
+              >
+                确定
+              </el-button>
+              <el-button
+                size="default"
+                onClick={() => {
+                  this.editCarouselDialog = false
+                }}
+              >
+                取消
+              </el-button>
+            </div>
+          </el-dialog>
+        </div>
+      )
+    },
+    addCarouselItem () {
+      const { items = [] } = this.widget
+      const id = 'carouselItem_' + this.$util.genId()
+      const name = '轮播项' + (items.length + 1)
+      const newCarouselItem = { id, title: name, contentType: 'carousel-item' }
+      this.designer.addWidget(newCarouselItem, this.widget, { defaultSelected: false })
+    },
+    editCarouselItem (item, index) {
+      this.editCarousel = { ...item }
+      this.editCarouselIndex = index
+      this.editCarouselDialog = true
+    },
+    deleteCarouselItem (item, index) {
+      this.designer.deleteWidget(item, this.widget)
+    },
+    saveCarouselItem () {
+      const carouselList = [...this.carouselList]
+      const index = carouselList.findIndex(component => component.id === this.editCarousel.id)
+      if (index !== -1) {
+        carouselList.splice(index, 1, { ...this.editCarousel })
+        this.carouselList = carouselList
+      }
+      this.editCarouselDialog = false
+    }
+
+  },
+  mounted () {
+    if (this.upComponentInstance) {
+      const upComponent = this.upComponentInstance.$refs.component
+      upComponent.$epxOn('change-meta-id', this.changeMetaFn)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.carousel__item {
+  width: 100%;
+  display: flex;
+}
+.carousel-item__name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.carousel-item__drag-icon {
+  color: #aaaaaa;
+  margin-right: 5px;
+  cursor: move;
+}
+.carousel-item__input {
+  width: 150px;
+  margin-right: 10px;
+}
+.carousel-item__operates {
+  white-space: nowrap;
+
+    :deep(.el-button:last-child) {
+      color: #ff3535;
+    }
+
+}
+.button-group {
+  text-align: center;
+}
+</style>

package/src/visual/widgets/CollapseVisual.vue

@@ -0,0 +1,203 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import ComponentVue from '@epxing/designer/src/visual/Component.vue'
+import draggable from '@epxing/core/src/components/draggable'
+export default {
+  name: 'epx-collapse-visual',
+  extends: ComponentVue,
+  components: {
+    draggable
+  },
+  data () {
+    return {
+      collapseName: {},
+      editCollapseDialog: false,
+      editCollapse: {}
+    }
+  },
+  computed: {
+    collapseList: {
+      get () {
+        const { items = [] } = this.widget
+        return items
+      },
+      set (v) {
+        this.designer.updateWidget(this.id, { items: v })
+      }
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      if (this.collapseList) {
+        this.collapseList.forEach(item => {
+          this.collapseName[item.id] = item.title
+        })
+      }
+      let label = ''
+      if (this.currentMeta) {
+        label = this.currentMeta.getLabel()
+      }
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        showTitle: 'none',
+        fields: label ? [label] : [],
+        operateColumnEllipsis: 0,
+        operateColumnPosition: 'start',
+        span: 24
+      }
+    },
+    changeMetaFn (v) {
+      this.componentMetaId = v.metaId
+      this.metaViewId = v.metaViewId
+    },
+    renderCollapse (item) {
+      return (
+        <div class="">
+          <draggable
+            v-model={this.collapseList}
+            tag="ul"
+            group="collapse-pane"
+            handle=".collapse-item__drag-icon"
+            class="collapse__list"
+          >
+            {this.collapseList.map((item, index) => (
+              <li class={{ collapse__item: true }}>
+                <i class="collapse-item__drag-icon epx-icon-tuozhuai"></i>
+                <el-input class="collapse-item__input" size="small" type="text" v-model={this.collapseName[item.id]} onChange={this.changeCollapseName.bind(this, item)}></el-input>
+                <span class="collapse-item__operates">
+                  <el-button
+                    type="primary" link
+                    size="default"
+                    icon="el-icon-setting"
+                    onClick={this.editCollapseItem.bind(this, item, index)}
+                  ></el-button>
+                  <el-button
+                    type="primary" link
+                    size="default"
+                    icon="el-icon-delete"
+                    onClick={this.deleteCollapseItem.bind(this, item)}
+                  ></el-button>
+                </span>
+              </li>
+            ))}
+          </draggable>
+          <el-button type="primary" link onClick={this.addCollapseItem}>
+            + 添加折叠项
+          </el-button>
+          <el-dialog
+            title="修改折叠项"
+            modelValue={this.editCollapseDialog}
+            width="420px"
+            append-to-body
+            destroy-on-close
+            onClose={() => {
+              this.editCollapseDialog = false
+            }}
+          >
+            {this.editCollapseDialog && (
+              <el-form inline label-position="left" label-width="100px">
+                <el-form-item
+                  label="名称"
+                  class="epx-visual-component__form-item"
+                >
+                  <epx-visual-config-input
+                    label="名称"
+                    value={this.editCollapse.title}
+                    i18nValue={this.editCollapse['name.i18n']}
+                  />
+                </el-form-item>
+              </el-form>
+            )}
+            <div class="button-group">
+              <el-button
+                type="primary"
+                size="default"
+                onClick={this.saveCollapseItem}
+              >
+                确定
+              </el-button>
+              <el-button
+                size="default"
+                onClick={() => {
+                  this.editCollapseDialog = false
+                }}
+              >
+                取消
+              </el-button>
+            </div>
+          </el-dialog>
+        </div>
+      )
+    },
+    addCollapseItem () {
+      const { items = [] } = this.widget
+      const id = 'collapseItem_' + this.$util.genId()
+      const name = '折叠项' + (items.length + 1)
+      const newCollapseItem = { id, title: name, contentType: 'collapse-item' }
+      this.collapseName[id] = name
+      this.designer.addWidget(newCollapseItem, this.widget, { defaultSelected: false })
+    },
+    changeCollapseName (item) {
+      this.designer.updateWidget(item.id, { title: this.collapseName[item.id] })
+    },
+    editCollapseItem (item, index) {
+      this.editCollapse = { ...item }
+      this.editCollapseIndex = index
+      this.editCollapseDialog = true
+    },
+    deleteCollapseItem (item, index) {
+      this.designer.deleteWidget(item, this.widget)
+    },
+    saveCollapseItem () {
+      const collapseList = [...this.collapseList]
+      const index = collapseList.findIndex(component => component.id === this.editCollapse.id)
+      if (index !== -1) {
+        collapseList.splice(index, 1, { ...this.editCollapse })
+        this.collapseList = collapseList
+      }
+      this.editCollapseDialog = false
+    }
+
+  },
+  mounted () {
+    if (this.upComponentInstance) {
+      const upComponent = this.upComponentInstance.$refs.component
+      upComponent.$epxOn('change-meta-id', this.changeMetaFn)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.collapse__item {
+  width: 100%;
+  display: flex;
+}
+.collapse-item__name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.collapse-item__drag-icon {
+  color: #aaaaaa;
+  margin-right: 5px;
+  cursor: move;
+}
+.collapse-item__input {
+  width: 150px;
+  margin-right: 10px;
+}
+.collapse-item__operates {
+  white-space: nowrap;
+
+    :deep(.el-button:last-child) {
+      color: #ff3535;
+    }
+
+}
+.button-group {
+  text-align: center;
+}
+</style>