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

package/src/visual/widgets/LayoutConfig.vue

@@ -0,0 +1,186 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import ComponentVue from '@epxing/designer/src/visual/Component.vue'
+export default {
+  name: 'epx-visual-layout',
+  extends: ComponentVue,
+  watch: {
+    'config.layout': {
+      handler (v) {
+        if (!v) {
+          return
+        }
+        const layout = v.split(':').map(item => item > 24 ? 24 : item)
+        const layoutStr = layout.join(':')
+        if (v !== layoutStr) {
+          this.changeConfigItem('layout', layoutStr)
+          return
+        }
+        const { items = [] } = this.widget
+        const components = v.split(':').map((item, index) => (items[index] ? { ...items[index], span: item } : {
+          id: 'layout-column_' + this.$util.genId(),
+          title: this.$t('layout'),
+          contentType: 'layout-column',
+          span: item,
+          items: []
+        }))
+        this.designer.updateWidget(this.id, { items: [...components] })
+      },
+      immediate: true,
+      deep: true
+    },
+    'config.mobileLayout': {
+      handler (v = '') {
+        const layout = v.split(':').map(item => item > 24 ? 24 : item)
+        const layoutStr = layout.join(':')
+        if (v !== layoutStr) {
+          this.changeConfigItem('mobileLayout', layoutStr)
+          return
+        }
+        const { items = [] } = this.widget
+        const components = items.map((item, index) => ({ ...item, xsspan: layout[index] }))
+        this.designer.updateWidget(this.id, { items: [...components] })
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        gutter: 0,
+        columnWidth: 24
+      }
+    },
+    initConfig () {
+      this.layoutOptions = ['24', '12:12', '6:18', '18:6', '8:8:8', '6:12:6', '6:6:6:6', '4:4:4:4:4:4']
+      const config = this.$_.cloneDeep(this.compConfig)
+      if (this.componentInfo.span) {
+        config.span = this.componentInfo.span
+      }
+      if (this.widget.items) {
+        if (!config.layout || config.layout.split(':').length !== this.widget.items.length) {
+          config.layout = this.widget.items.map(item => item.span || 24).join(':')
+        }
+      }
+      this.config = config
+    },
+    afterConfigOptions () {
+      if (this.upComponentInstance) {
+        // T29/$children：upComponentInstance 是 epx-component 包装，其内渲染的组件带 ref="component"
+      // （同 AddFormItem.vue:465 的既有写法）。Vue3 已移除 $children。
+        const upComponent = this.upComponentInstance.$refs.component || {}
+        const { subConfigOptions = [], subDefaultConfigs = {} } = upComponent
+        this.subConfigOptions = subConfigOptions
+        this.subDefaultConfigs = subDefaultConfigs
+      }
+    },
+    changeColumnWidth (v) {
+      this.changeConfigItem('columnWidth', v)
+      if (this.widget.items && this.widget.items.length > 0) {
+        const isSetSpan = this.widget.items.filter(item => !!item.span).length > 0
+        if (isSetSpan) {
+          this.$confirm('是否更新子组件宽度?', '提示', {
+            confirmButtonText: '更新',
+            cancelButtonText: '不更新',
+            type: 'warning'
+          }).then(() => {
+            for (const item of this.widget.items) {
+              this.designer.updateWidget(item.id, { span: null })
+              const config = this.designer.widgetConfig[item.id] || {}
+              this.designer.updateWidgetConfig(item.id, { ...config, span: null })
+            }
+          })
+        }
+      }
+    },
+    changeLayout (item) {
+      let layout = item.split(':')
+      const compList = this.widget.items.filter(child => child.items && child.items.length > 0)
+      if (layout.length < compList.length) {
+        layout = compList.map((item, index) => layout[index % layout.length === 0 ? layout.length - 1 : index % layout.length - 1])
+      }
+      this.changeConfigItem('layout', layout.join(':'))
+    },
+    renderLayoutComponent (item) {
+      let layout = '24'
+      if (this.allConfigs.layout) {
+        layout = this.allConfigs.layout.replace(/\s/g, '')
+      }
+      const layoutOptions = [...this.layoutOptions]
+      if (!this.layoutOptions.includes(layout)) {
+        layoutOptions.push(layout)
+      }
+      return (
+        <div class="">
+          <ul class="layout-icon__list">
+            {
+              layoutOptions.map(item => {
+                let line = 1
+                let startCol = 0
+                for (const col of item.split(':')) {
+                  if (Number(col) + startCol > 24) {
+                    startCol = Number(col)
+                    line++
+                  } else {
+                    startCol += Number(col)
+                  }
+                }
+                return (
+                  <li class={{ 'layout-icon__item': true, active: item === layout }}
+                    onClick={this.changeLayout.bind(this, item)}
+                  >
+                    {
+                      item.split(':').map(item => (
+                        <span class="layout-icon__column" style={{ width: `calc(${item / 24 * 100}% - 4px)`, height: `calc(${100 / line}% - 4px)` }}></span>
+                      ))
+                    }
+                  </li>
+                )
+              })
+            }
+          </ul>
+        </div>
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.visual-config {
+  padding: 16px;
+}
+
+.layout-icon__list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+.layout-icon__item {
+  display: flex;
+  flex-wrap: wrap;
+  height: 34px;
+  width: 66px;
+  margin:4px;
+  padding: 4px;
+  border-radius: var(--epx-radius-base);
+  border: 1px solid #e3e3e3;
+  overflow: hidden;
+  cursor: pointer;
+  &:hover {
+    border-color: #ccc;
+  }
+  &.active {
+    @include border_color_primary;
+  }
+}
+.layout-icon__column {
+  display: inline-block;
+  height: calc(100% - 4px);
+  background: #F3F5FA;
+  margin: 2px;
+}
+</style>

package/src/visual/widgets/ListVisual.vue

@@ -0,0 +1,349 @@
+<script>
+import ComponentVue from '@epxing/designer/src/visual/Component.vue'
+export default {
+  name: 'epx-list-visual-list',
+  extends: ComponentVue,
+  watch: {
+    allConfigs: {
+      handler (v) {
+        this.componentMetaId = v.metaId
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      const { addPage = 'entity-add-page', openMode = '3', addPageFlag = 'v_add', editPageFlag = 'v_add' } = this.allConfigs
+      let label = ''
+      let metaKey = 'ID'
+      if (this.currentMeta) {
+        metaKey = this.currentMeta.getKey()
+        label = this.currentMeta.getLabel()
+      }
+      // 获取到该组件的默认配置
+      this.commonOperates = [
+        {
+          text: this.$t('add'),
+          handler: 'goPage',
+          ui: 'primary',
+          pageFlag: addPageFlag,
+          num: 0,
+          component: addPage,
+          openMode
+        }, {
+          text: this.$t('edit'),
+          handler: 'goPage',
+          pageFlag: editPageFlag,
+          num: 1,
+          component: addPage,
+          openMode,
+          params: {
+            pageType: 'EDIT'
+          }
+        },
+        {
+          text: this.$t('delete'),
+          handler: 'commonAction',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '?',
+          successMsg: this.$t('deleted successfully'),
+          params: {
+            ids: `#[${metaKey}]`
+          }
+        },
+        {
+          text: this.$t('import'),
+          handler: 'goPage',
+          pageFlag: 'v_import',
+          component: 'import-page'
+        },
+        {
+          text: this.$t('export'),
+          handler: 'goPage',
+          pageFlag: 'v_export',
+          component: 'export-page',
+          params: {
+            selects: `#[${metaKey}]`,
+            total: '$[total]',
+            params: '$[params]',
+            fields: '$[listFields]'
+          }
+        },
+        {
+          text: this.$t('audit'),
+          handler: 'goCheckPage'
+        }, {
+          text: this.$t('launch application'),
+          handler: 'applyEntity'
+        }
+      ]
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        addPageFlag: 'v_add',
+        editPageFlag: 'v_add',
+        detailPageFlag: 'v_add',
+        fields: label ? [label] : [],
+        detailFlag: true,
+        pageFlag: true,
+        limitSize: 0,
+        pageSize: 20,
+        operateFlag: true,
+        operateEllipsis: 1,
+        span: 24,
+        operates: [
+          {
+            text: this.$t('details'),
+            handler: 'goPage',
+            pageFlag: addPageFlag,
+            component: addPage,
+            pageType: 'DETAIL',
+            openMode
+          }
+        ]
+      }
+    },
+    initConfigOptions () {
+      const configOptions = [
+        { key: 'componentName', label: this.$t('component name'), type: 'input' },
+        { key: 'metaId', label: this.$t('component object'), type: 'object', object: 'FM_ENTITY' },
+        { key: 'orderFields', label: this.$t('sort field'), type: 'order-field' },
+        // { key: 'iconField', label: '图标字段', type: 'field' },
+        { key: 'fields', label: this.$t('field'), type: 'list-field' },
+        { key: 'detailFlag', label: this.$t('click for details'), type: 'radio', options: [{ label: this.$t('yes'), value: true }, { label: this.$t('no'), value: false }] },
+        { key: 'detailPageId', label: this.$t('details page'), type: 'object', object: 'FM_PAGE_CONFIG' },
+        { key: 'scopeParams', label: this.$t('scope of the query'), type: 'scope' },
+        { key: 'limitSize', label: this.$t('show number'), type: 'num' },
+        { key: 'pageFlag', label: this.$t('whether the paging'), type: 'radio', options: [{ label: this.$t('need'), value: true }, { label: this.$t('no need'), value: false }] },
+        { key: 'pageSize', label: this.$t('number of records per page'), type: 'select', options: [{ label: '5', value: 5 }, { label: '10', value: 10 }, { label: '15', value: 15 }, { label: '20', value: 20 }, { label: '30', value: 30 }, { label: '50', value: 50 }, { label: '100', value: 100 }, { label: '200', value: 200 }] },
+        { key: 'operateFlag', label: this.$t('whether need button'), type: 'radio', options: [{ label: this.$t('need'), value: true }, { label: this.$t('no need'), value: false }] },
+        { key: 'operateEllipsis', label: this.$t('button display quantity'), type: 'num' },
+        { key: 'operates', label: this.$t('button'), type: 'operates' },
+        {
+          key: 'menuId',
+          label: this.$t('menu'),
+          type: 'object',
+          object: 'FM_MODULE',
+          flag: 'config_menu'
+        },
+        { key: 'morePageId', label: this.$t('show more pages'), type: 'object', object: 'FM_PAGE_CONFIG' },
+        { key: 'span', label: this.$t('width'), type: 'select', options: this.spanOptions },
+        { key: 'xsspan', label: this.$t('mobile width'), type: 'select', options: this.spanOptions },
+        { key: 'height', label: this.$t('height') },
+        { key: 'flex', label: this.$t('Occupy the remaining space on the page'), type: 'radio', options: [{ label: this.$t('yes'), value: true }, { label: this.$t('no'), value: false }] }
+      ]
+      this.configOptions = configOptions
+    },
+    getOperateOptions () {
+      this.handlerList = [
+        { label: this.$t('open the specified page'), value: 'goPage' },
+        { label: this.$t('making a common request'), value: 'commonAction' },
+        { label: this.$t('initiating business rules'), value: 'commonRuleAction' },
+        { label: this.$t('open the approval page'), value: 'goCheckPage' },
+        { label: this.$t('bulk edit'), value: 'editMultiEntity' },
+        { label: this.$t('initiate process'), value: 'applyEntity' },
+        { label: this.$t('execute process approval'), value: 'checkEntity' },
+        { label: this.$t('report printing'), value: 'print' },
+        { label: this.$t('return'), value: 'backPage' },
+        { label: this.$t('custom JS'), value: 'customJs' }
+      ]
+      this.operateConfigs = [
+        {
+          key: 'base',
+          title: this.$t('basic'),
+          options: ['text', 'ui', 'type', 'icon', 'preview']
+        },
+        {
+          key: 'event',
+          title: this.$t('event'),
+          options: ['beforeTrigger', 'handler', 'metaId', 'action', 'rule', 'openMode', 'page', 'pageType', 'printWay', 'printCode', 'cptName', 'destActivityId', 'processNode', 'function', 'params']
+        },
+        {
+          key: 'advance',
+          title: this.$t('higher'),
+          options: ['showCondition', 'num', 'confirm', 'confirmMsg', 'successMsg', 'failMsg', 'mask']
+        }
+      ]
+      this.operateOptions = [
+        { key: 'text', label: this.$t('Button Name') },
+        {
+          key: 'ui',
+          label: this.$t('Button style'),
+          type: 'select',
+          options: [
+            { label: this.$t('main button'), value: 'primary' },
+            { label: this.$t('successful button'), value: 'success' },
+            { label: this.$t('information button'), value: 'info' },
+            { label: this.$t('warning button'), value: 'warning' },
+            { label: this.$t('dangerous button'), value: 'danger' },
+            { label: this.$t('text button'), value: 'text' },
+            { label: this.$t('default button'), value: 'default' }
+          ],
+          defaultValue: 'default'
+        },
+        {
+          key: 'type',
+          label: this.$t('button type'),
+          type: 'radio',
+          options: [
+            {
+              label: this.$t('default'),
+              value: 'default'
+            },
+            {
+              label: this.$t('hollow button'),
+              value: 'plain'
+            },
+            {
+              label: this.$t('rounded button'),
+              value: 'round'
+            },
+            {
+              label: this.$t('radio buttons'),
+              value: 'circle'
+            }
+          ],
+          defaultValue: 'default'
+        },
+        { key: 'icon', label: this.$t('button icon'), type: 'object', object: 'FM_FONT_ICON' },
+        { key: 'metaId', label: this.$t('request object'), type: 'entity' },
+        { key: 'action', label: this.$t('requested action'), type: 'select', options: this.actionList },
+        { key: 'num', label: this.$t('selected records'), type: 'radio', options: [{ label: this.$t('no need'), value: '0' }, { label: this.$t('choose one'), value: '1' }, { label: this.$t('select multiple'), value: 'n' }], defaultValue: '0' },
+        { key: 'actionOption', label: this.$t('display condition') },
+        {
+          key: 'handler',
+          label: this.$t('handle event'),
+          type: 'select',
+          options: this.handlerList
+        },
+        {
+          key: 'rule',
+          label: this.$t('business rule'),
+          type: 'select',
+          options: this.ruleList,
+          showFlag: { handler: 'commonRuleAction' }
+        },
+        {
+          key: 'page',
+          label: this.$t('open the page'),
+          type: 'page',
+          showFlag: { handler: 'goPage' }
+        },
+        {
+          key: 'openMode',
+          label: this.$t('page opening mode'),
+          type: 'radio',
+          options: [{ label: this.$t('directly open'), value: '3' }, { label: this.$t('label page'), value: '1' }, { label: this.$t('pop-up windows'), value: '2' }],
+          defaultValue: '3',
+          showFlag: { handler: 'goPage' }
+        },
+        {
+          key: 'pageType',
+          label: this.$t('page state'),
+          type: 'radio',
+          options: [{ label: this.$t('add'), value: 'ADD' }, { label: this.$t('edit'), value: 'EDIT' }, { label: this.$t('details'), value: 'DETAIL' }],
+          defaultValue: 'ADD',
+          showFlag: { handler: 'goPage' }
+        },
+        {
+          key: 'printWay',
+          label: this.$t('way of print'),
+          type: 'radio',
+          options: [{ label: this.$t('custom report printing'), value: 'custom' }, { label: this.$t('sail soft report print'), value: 'fine' }],
+          defaultValue: 'custom',
+          showFlag: { handler: 'print' }
+        },
+        {
+          key: 'printCode',
+          label: this.$t('print the template'),
+          type: 'object',
+          object: 'FM_FORM',
+          dataKey: 'CODE',
+          showFlag: { handler: 'print', printWay: 'custom' }
+        },
+        {
+          key: 'cptName',
+          label: this.$t('print the template'),
+          type: 'object',
+          object: 'FM_REPORT_TEMPLATE',
+          dataKey: 'CODE',
+          showFlag: { handler: 'print', printWay: 'fine' }
+        },
+        {
+          key: 'destActivityId',
+          label: this.$t('audit process'),
+          type: 'process',
+          processType: 'check',
+          showFlag: { handler: 'checkEntity' }
+        },
+        {
+          key: 'function',
+          label: this.$t('name of the event'),
+          type: 'function',
+          showFlag: { handler: 'customJS' }
+        },
+        { key: 'confirmMsg', label: this.$t('operation confirmation information') },
+        { key: 'successMsg', label: this.$t('operation success message') },
+        { key: 'failMsg', label: this.$t('operation failure message') },
+        { key: 'actionOptionMsg', label: this.$t('forbidden operation hint') },
+        { key: 'mask', label: this.$t('operating mask'), type: 'radio', options: [{ label: this.$t('show'), value: true }, { label: this.$t('Not show'), value: false }], defaultValue: false },
+        { key: 'params', label: this.$t('parameter passing'), type: 'params' }
+      ]
+    },
+    initConfigs () {
+      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' || configOption.type === 'list-field' || configOption.type === 'operates') {
+          this.selectFieldWay[key] = 'custom'
+        }
+        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.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: this.$t('width'), type: 'text', defaultValue: '120' },
+        { key: 'isLabel', label: this.$t('external label'), type: 'radio', options: [{ label: this.$t('yes'), value: true }, { label: this.$t('no'), value: false }], defaultValue: false },
+        { key: 'showLabel', label: this.$t('Show Title'), type: 'radio', options: [{ label: this.$t('show'), value: true }, { label: this.$t('Not show'), value: false }], defaultValue: false },
+        { key: 'isWrap', label: this.$t('whether a newline'), type: 'radio', options: [{ label: this.$t('yes'), value: true }, { label: this.$t('no'), 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: this.$t('function'), type: 'function' },
+        { key: 'locked', label: this.$t('whether the lock'), type: 'radio', options: [{ label: this.$t('yes'), value: true }, { label: this.$t('no'), value: false }], defaultValue: false },
+        { 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 }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/widgets/MEntityListFindVisual.vue

@@ -0,0 +1,77 @@
+<script>
+import ComponentVue from '@epxing/designer/src/visual/Component.vue'
+export default {
+  name: 'epx-m-entity-list-find-visual',
+  extends: ComponentVue,
+  methods: {
+    initDefaultConfigs () {
+      let label = ''
+      let keywords = []
+      if (this.currentMeta) {
+        label = this.currentMeta.getLabel()
+        keywords = [...new Set([...this.currentMeta.keyNames, this.currentMeta.label])]
+      }
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        searchKeywordFlag: true,
+        searchFlag: true,
+        keywords,
+        fields: label ? [label] : [],
+        searchFields: [],
+        showFilter: true,
+        filterFields: [],
+        pageFlag: true,
+        pageSize: 20,
+        operateColumnPosition: 'start',
+        span: 24
+      }
+    },
+    afterInitConfig () {
+      for (const key in this.config) {
+        const configOption = this.configOptions.find(item => item.key === key) || {}
+        if (configOption.type === 'field' || configOption.type === 'list-field' || configOption.type === 'operates') {
+          this.selectFieldWay[key] = 'custom'
+        }
+        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.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: 'isLabel', label: this.$t('external label'), type: 'radio', options: [{ label: this.$t('yes'), value: true }, { label: this.$t('no'), value: false }], defaultValue: false },
+        { key: 'showLabel', label: this.$t('Show 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: '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 }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/widgets/ProcessFormItemVisual.vue

@@ -0,0 +1,58 @@
+<script>
+// ⚠️ 跨包依赖：ComponentVue 基类在 @epxing/designer（packages/designer/src/visual/Component.vue），
+// 而 @epxing/designer 反过来依赖 @epxing/components（package.json 里已声明）——本文件这条 import
+// 让依赖方向变成双向。当前不炸是因为：①本组件尚未在 src/component.js 注册（Task 4/6 均确认
+// 未落地，见台账 act-process-form-item/index.js 那行），没有任何入口引用到这个文件，
+// Vite 按需解析下这条 import 从不会被真正求值；②pnpm 工作区在仓库根 node_modules 有
+// @epxing/designer 的 hoist 链接，components 自己的 node_modules 下虽然没有这一条（package.json
+// 未声明），但 Node/Vite 的解析算法会向上找到根节点那份，所以路径本身是通的。
+// 真正落地这个组件时应当一并解决：或者把本文件按 collapse/Visual.vue 的先例搬去
+// packages/designer/src/visual/widgets/ActProcessFormItemVisual.vue（designer 反查 components
+// 是既有方向，不产生环），或者给 packages/components/package.json 正式加上 @epxing/designer 依赖
+// （会成环，构建期未必能过，不推荐）。这里先按台账给定的落点原样迁移，不擅自搬家。
+import ComponentVue from '@epxing/designer/src/visual/Component.vue'
+export default {
+  name: 'epx-act-process-form-item-visual',
+  extends: ComponentVue,
+  data () {
+    return {
+      processNodeList: []
+    }
+  },
+  watch: {
+    'allConfigs.processCode': {
+      handler (v) {
+        if (v) this.getProcessNode(v)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    renderPrercessNode (item) {
+      return (
+        <epx-visual-config-select
+          option-list={this.processNodeList}
+          value={this.allConfigs[item.key]}
+          onChange-configs={item.change || this.changeConfigItem.bind(this, item.key)}
+        />
+      )
+    },
+    getProcessNode (processCode) {
+      this.processNodeList = []
+      // 获取流程节点
+      this.$http.$post({
+        action: 'processNodeList',
+        entityId: 'ACT_RE_MODEL',
+        processCode
+      })
+        .then(data => {
+          this.processNodeList = data.map(item => ({ label: item.name, value: item.id }))
+        })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>