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

package/src/visual/CreatePage.vue

@@ -0,0 +1,389 @@
+<script>
+import ComponentVue from './Component.vue'
+export default {
+  name: 'epx-visual-create-page',
+  extends: ComponentVue,
+  data () {
+    return {
+      FunctionOption: []
+    }
+  },
+  watch: {
+    allConfigs: {
+      handler (v) {
+        this.componentMetaId = v.metaId
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getOperateOptions () {
+      this.handlerList = [
+        { label: '打开指定页面', value: 'goPage' },
+        { label: '发起通用请求', value: 'commonAction' },
+        { label: '打开审批页面', value: 'goCheckPage' },
+        { label: '批量编辑', value: 'editMultiEntity' },
+        { label: '执行流程审批', value: 'checkEntity' },
+        { label: '报表打印', value: 'print' },
+        { label: '返回', value: 'backPage' }
+      ]
+      this.operateOptions = [
+        { key: 'text', label: '按钮名称' },
+        {
+          key: 'ui',
+          label: '按钮样式',
+          type: 'select',
+          options: [
+            { label: '主要按钮', value: 'primary' },
+            { label: '成功按钮', value: 'success' },
+            { label: '信息按钮', value: 'info' },
+            { label: '警告按钮', value: 'warning' },
+            { label: '危险按钮', value: 'danger' },
+            { label: '文本按钮', value: 'text' },
+            { label: '默认按钮', value: 'default' }
+          ],
+          defaultValue: 'default'
+        },
+        {
+          key: 'type',
+          label: '按钮类型',
+          type: 'radio',
+          options: [
+            {
+              label: '默认',
+              value: 'default'
+            },
+            {
+              label: '空心按钮',
+              value: 'plain'
+            },
+            {
+              label: '圆角按钮',
+              value: 'round'
+            },
+            {
+              label: '圆形按钮',
+              value: 'circle'
+            }
+          ],
+          defaultValue: 'default'
+        },
+        { key: 'icon', label: '按钮图标', type: 'object', object: 'FM_FONT_ICON' },
+        { 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: 'actionOption', 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: 'pageType',
+          label: '页面状态',
+          type: 'radio',
+          options: [{ label: '新增', value: 'ADD' }, { label: '编辑', value: 'EDIT' }, { label: '详情', value: 'DETAIL' }],
+          defaultValue: 'ADD',
+          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: 'destActivityId',
+          label: '审核流程',
+          type: 'process',
+          processType: 'check',
+          showFlag: { handler: 'checkEntity' }
+        },
+        { key: 'confirmMsg', label: '操作确认信息' },
+        { key: 'successMsg', label: '操作成功提示' },
+        { key: 'failMsg', label: '操作失败提示' },
+        { key: 'actionOptionMsg', label: '禁止操作提示' },
+        { key: 'mask', label: '操作遮罩', type: 'radio', options: [{ label: '显示', value: true }, { label: '不显示', value: false }], defaultValue: false },
+        { key: 'params', label: '参数传递', type: 'params' }
+      ]
+    },
+    initDefaultConfigs () {
+      const { addPage = 'entity-add-page', editPage = 'entity-edit-page', openMode = '3', addPageFlag = 'v_add' } = this.allConfigs
+      let keywords = []
+      const { label, keyNames = [] } = this.currentMeta
+      let metaKey = 'ID'
+      if (this.currentMeta) {
+        metaKey = this.currentMeta.getKey()
+        keywords = [...keyNames]
+        if (label) {
+          keywords.push(label)
+        }
+      }
+      // 获取到该组件的默认配置
+      this.commonOperates = [
+        {
+          text: '新增',
+          handler: 'goPage',
+          ui: 'primary',
+          pageFlag: addPageFlag,
+          num: 0,
+          component: addPage,
+          pageType: 'ADD',
+          openMode
+        }, {
+          text: '编辑',
+          handler: 'goPage',
+          pageFlag: addPageFlag,
+          num: 1,
+          component: addPage,
+          pageType: 'EDIT',
+          openMode
+        }, {
+          text: '详情',
+          handler: 'goPage',
+          pageFlag: addPageFlag,
+          num: 1,
+          component: addPage,
+          pageType: 'DETAIL',
+          openMode
+        },
+        {
+          text: '删除',
+          handler: 'commonAction',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '？',
+          successMsg: '删除成功',
+          failMsg: '删除失败',
+          params: {
+            ids: `#[${metaKey}]`
+          }
+        },
+        {
+          text: '导入',
+          handler: 'goPage',
+          pageFlag: 'v_import',
+          component: 'import-page'
+        },
+        {
+          text: '导出',
+          handler: 'goPage',
+          pageFlag: 'v_export',
+          component: 'export-page',
+          params: {
+            selects: `#[${metaKey}]`,
+            total: '$[total]',
+            params: '$[params]',
+            fields: '$[listFields]'
+          }
+        },
+        {
+          text: '打印',
+          handler: 'print'
+        },
+        {
+          text: '批量编辑',
+          handler: 'editMultiEntity'
+        },
+        {
+          text: '打开审核页面',
+          handler: 'goCheckPage'
+        },
+        {
+          text: '流程审批',
+          handler: 'checkEntity'
+        },
+        {
+          text: '返回',
+          handler: 'backPage'
+        },
+        {
+          text: '自定义按钮'
+        }
+      ]
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        addPageFlag: 'v_add',
+        editPageFlag: 'v_add',
+        detailPageFlag: 'v_add',
+        metaId: this.pageMetaId,
+        searchFlag: true,
+        searchMode: 'keyword',
+        keywords,
+        searchFields: [],
+        listFields: this.currentMeta.getAllFields(),
+        pageFlag: true,
+        pageSize: 20,
+        operateFlag: true,
+        operateEllipsis: 2,
+        multiSelectColumnFlag: true, // 是否显示多选框列
+        serialColumnFlag: true, // 是否显示序号列
+        operateColumnFlag: true, // 是否显示操作列
+        totalFlag: true,
+        operateColumnWidth: 100,
+        operateColumnEllipsis: 2,
+        operateColumnPosition: 'start',
+        span: 24,
+        operates: [
+          {
+            text: '新增',
+            handler: 'goPage',
+            ui: 'primary',
+            num: 0,
+            openMode,
+            component: addPage,
+            params: {}
+          },
+          // {
+          //   text: '删除',
+          //   handler: 'commonAction',
+          //   action: 'removeMulti',
+          //   num: 'n',
+          //   confirmMsg: this.$t('Confirm the deletion') + '？',
+          //   successMsg: '删除成功',
+          //   params: {
+          //     ids: `#[${metaKey}]`
+          //   }
+          // },
+          {
+            text: '导入',
+            handler: 'goPage',
+            component: 'import-page',
+            params: {}
+          },
+          {
+            text: '导出',
+            handler: 'goPage',
+            component: 'export-page',
+            params: {
+              selects: `#[${metaKey}]`,
+              total: '$[total]',
+              params: '$[params]',
+              fields: '$[listFields]'
+            }
+          }
+        ],
+        columnOperates: [
+          {
+            text: '编辑',
+            handler: 'goPage',
+            num: 1,
+            openMode,
+            component: editPage,
+            pageType: 'EDIT'
+          }
+          // {
+          //   text: '删除',
+          //   handler: 'commonAction',
+          //   action: 'removeMulti',
+          //   num: 'n',
+          //   confirmMsg: this.$t('Confirm the deletion') + '？',
+          //   successMsg: '删除成功',
+          //   params: {
+          //     ids: `#[${this.$metaKey}]`
+          //   }
+          // }
+        ]
+      }
+    },
+    initConfigOptions () {
+      const configOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'metaId', label: '组件对象', type: 'object', object: 'FM_ENTITY' },
+        { key: 'keywords', label: '关键词字段', type: 'field' },
+        { key: 'searchFields', label: '筛选字段', type: 'field' },
+        { key: 'scopeParams', label: '查询范围', type: 'scope' },
+        { 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
+    },
+    initConfig () {
+      const config = this.$_.cloneDeep(this.compConfig)
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span
+      }
+      this.config = config
+      for (const key in this.config) {
+        if (key === 'order_field') {
+          const orderFields = []
+          const orderMode = this.config.order_mode || []
+          this.config[key].forEach((item, index) => {
+            let field = item
+            if (typeof item === 'string') {
+              field = { attriName: item }
+            }
+            orderFields.push({ ...field, sort: orderMode[index] || 'asc' })
+          })
+          this.config.orderFields = orderFields
+        }
+      }
+    },
+    getFieldOptions () {
+      this.getFunctionOption()
+      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: 'DETAIL' }, { label: '隐藏', value: 'HIDDEN' }], defaultValue: 'DETAIL' },
+        {
+          key: 'detailPageId',
+          label: '字段详情页面',
+          type: 'object',
+          object: 'FM_PAGE_CONFIG',
+          showFlag: {
+            dataType: ['object', 'multiobject']
+          }
+        },
+        { key: 'width', label: '宽度', type: 'text', defaultValue: '120' },
+        { key: 'isLabel', label: '外部标签', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
+        { key: 'function', label: '函数', type: 'function' },
+        { key: 'locked', label: '是否锁定', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }], defaultValue: false },
+        { key: 'color', label: '字体颜色', type: 'color', defaultValue: '#333' }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/DashboardDiv.vue

@@ -0,0 +1,197 @@
+<script>
+import ComponentVue from './Component.vue'
+import innerGridMixin, { innerGridOptions } from './mixins/innerGridMixin'
+
+// 默认值逻辑
+export default {
+  name: 'epx-visual-dashboard-div',
+  extends: ComponentVue,
+  // 「内部网格」组（v3 容器级 grid）：有效网格解析 / 继承与自定义切换 / 数字框 render 都来自 innerGridMixin，与 dashboard-tabs 面板共用
+  mixins: [innerGridMixin],
+  methods: {
+    initDefaultConfigs () {
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        flex: false,
+        metaId: this.pageMetaId,
+        componentName: this.componentInfo.title,
+        iconType: 'icon',
+        showIconBg: true,
+        span: 24,
+        xsspan: 24
+      }
+    },
+    initConfigOptions () {
+      const configOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'showTitle', label: '显示标题', type: 'switch' },
+        { key: 'title', label: '标题' },
+        { key: 'iconFlag', label: '显示图标', type: 'switch', defaultValue: true },
+        { key: 'icon', label: '图标', type: 'icon' },
+        { key: 'iconColor', label: '图标颜色', type: 'color' },
+        { key: 'theme', label: '主题', type: 'radio', options: [{ label: '默认', value: '' }, { label: '经典白', value: 'default' }, { label: '经典黑', value: 'dark' }, { label: '科幻', value: 'technology' }], defaultValue: '' },
+        { key: 'titleFontStyle', label: '标题文字', type: 'font' },
+        // 内部网格（v3 容器级 grid，spec §9.6）：这些键不进 config，值直读 / 写回 item 的 grid
+        innerGridOptions(this)
+      ]
+      // { key: 'orientation', label: '排列方向', type: 'radio', options: [{ label: '垂直', value: 'vertical' }, { label: '水平', value: 'horizontal' }, { label: '垂直逆序', value: 'vertical-reverse' }], showFlag: { type: 'card' } },
+      // { key: 'justify-content', label: '对齐方式', type: 'radio', options: [{ label: '左对齐', value: 'start' }, { label: '居中对齐', value: 'center' }, { label: '右对齐', value: 'end' }], showFlag: { type: 'card' } },
+      // { key: 'iconPosition', label: '图标位置', type: 'radio', options: [{ label: '顶部', value: 'top' }, { label: '右侧', value: 'right' }, { label: '底部', value: 'bottom' }, { label: '左侧', value: 'left' }], defaultValue: 'top', showFlag: { type: 'card' } },
+      this.configOptions = configOptions
+    },
+    initConfig () {
+      // grid 是容器项自己的字段（真值在 item 上）：不进面板配置，否则提交时会当组件配置写进 itemConfigs
+      const { grid, ...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'
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.epx-dashboard-inner-grid__num {
+  width: 160px;
+}
+</style>
+<style lang="scss" scoped>
+.card-list {
+  width: 220px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.card {
+  width: 90px;
+  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 {
+  font-size: var(--epx-font-size-s);
+  line-height: 1;
+  >i {
+    font-size: var(--epx-font-size-s);
+  }
+}
+.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/DashboardTabs.vue

@@ -0,0 +1,118 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import ComponentVue from './Component.vue'
+import draggable from '@epxing/core/src/components/draggable'
+import innerGridMixin from './mixins/innerGridMixin'
+export default {
+  name: 'epx-visual-dashboard-tabs',
+  extends: ComponentVue,
+  // 「内部网格」组（R33）与 dashboard-div 面板共用 innerGridMixin。本面板的配置项来自平台 FM_PAGE_ATTRIBUTE 记录（不覆写 initConfigOptions），
+  // 「内部网格」要在平台侧配 TYPE='custom' 的记录、CUSTOM_FUNCTION 填 renderInnerGridMode / renderInnerGridNumber，经基类按方法名接成 renderContent
+  mixins: [innerGridMixin],
+  components: { draggable },
+  data () {
+    return { tabName: {} }
+  },
+  computed: {
+    tabs: {
+      get () {
+        const { items = [] } = this.config
+        return items
+      },
+      set (v) {
+        this.config.items = v
+      }
+    }
+  },
+  methods: {
+    renderTabPane () {
+      return (
+        <div class="">
+          <draggable v-model={this.tabs} tag="ul" group="tab-pane" handle=".tab-item__drag-icon" class="tab__list">
+            {
+              this.tabs.map(item => (
+                <li class={{ tab__item: true }}
+                >
+                  <i class="tab-item__drag-icon epx-icon-tuozhuai"></i>
+                  <el-input class="tab-item__input" size="small" type="text" v-model={this.tabName[item.id]} onChange={this.changeTabPane.bind(this, item)}></el-input>
+                  <span class="tab-item__operates">
+                    <el-button type="primary" link size="default" icon="el-icon-delete" onClick={this.deleteTabPane.bind(this, item)}></el-button>
+                  </span>
+                </li>
+              ))
+            }
+          </draggable>
+          <el-button type="primary" link onClick={this.addTabPane}>+ 添加标签项</el-button>
+        </div>
+      )
+    },
+    initConfig () {
+      // grid 是容器项自己的字段（真值在 item 上）：不进面板配置，否则提交时会当组件配置写进 itemConfigs
+      const { grid, ...config } = this.compConfig
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span
+      }
+      this.config = config
+      this.tabs.forEach(item => {
+        this.tabName[item.id] = item.name
+      })
+    },
+    addTabPane () {
+      const id = 'tabpane_' + this.$util.genId()
+      const name = '标签项' + (this.tabs.length + 1)
+      const newTabPane = { id, name, items: [] }
+      this.tabName[id] = name
+      this.tabs = [...this.tabs, newTabPane]
+    },
+    changeTabPane (tabpanel) {
+      const tabs = [...this.tabs]
+      const index = tabs.findIndex(item => item.id === tabpanel.id)
+      if (index !== -1) {
+        tabs.splice(index, 1, { ...tabpanel, name: this.tabName[tabpanel.id] })
+        this.tabs = tabs
+      }
+    },
+    deleteTabPane (tabpanel) {
+      if (this.tabs.length <= 1) {
+        this.$message.error('标签项至少要有一个')
+        return
+      }
+      this.tabs = this.tabs.filter(item => item.id !== tabpanel.id)
+    }
+  },
+  created () {
+  }
+
+}
+</script>
+<style lang="scss">
+.epx-dashboard-inner-grid__num {
+  width: 160px;
+}
+</style>
+<style lang="scss" scoped>
+.tab__item {
+  display: flex;
+}
+.tab-item__drag-icon {
+  color: #AAAAAA;
+  margin-right: 5px;
+  cursor: move;
+}
+.tab-item__input {
+  width: 150px;
+  margin-right: 10px;
+}
+.tab-item__operates {
+  white-space: nowrap;
+
+    :deep(.el-button:last-child) {
+      color: #FF3535;
+    }
+
+}
+.button-group {
+  text-align: center;
+}
+</style>