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

package/src/visual/index.js

@@ -0,0 +1,23 @@
+// 设计器 visual 组件的懒加载全家注册（PageDesigner / VisualConfigPage 动态 import 本文件）。
+// webpack 退役后 require.context → import.meta.glob（eager），注册命名与原版一致：
+// 组件 name 优先，兜底为相对路径去 './'、'.vue'（保留中间 '/'，与原 key.replace 行为相同）。
+import { registerComponent } from '@epxing/core/src/app'
+const modules = import.meta.glob('./**/*.vue', { eager: true })
+const visualComponents = {}
+Object.keys(modules).forEach(key => {
+  const component = modules[key].default
+  if (!component) return
+  visualComponents[component.name || key.replace(/^\.\/(.*)\.vue$/, '$1')] = component
+})
+
+// T33（关 compat）：原为 `const install = (Vue) => {…}` + module-level `Vue.use(visualComponents)`。
+// Vue3 无全局注册 → 直接用 app 单例的 registerComponent。
+//
+// 时序安全：本文件是**动态 import** 的（PageDesigner / VisualConfigPage 用到时才加载），
+// 那时 installFrame 早已跑过 setApp(app) → `_app` 不为 null。
+// （对比 plugins/frame.js：它是**静态 import**，在 install.js 的 import 期就执行，
+//   那时 app 还没建 → 必须改成由 installFrame 显式调用的 installFrameComponents。）
+for (const key in visualComponents) {
+  registerComponent(key, visualComponents[key])
+}
+export default visualComponents

package/src/visual/mixins/innerGridMixin.js

@@ -0,0 +1,128 @@
+// 容器属性面板共用的「内部网格」混入（R33）：dashboard-div / dashboard-tabs 的 visual 面板都混入它。
+// 有效网格解析（含继承链）、继承 / 自定义切换、单项改值，以及两个 renderContent（renderInnerGridMode / renderInnerGridNumber）。
+// 值直读真实 item 的 grid、写回 item（changeItemConfigs 的 type='component'）而不是组件配置，grid 不进 itemConfigs。
+// 配置项两种来源都支持：代码侧 configOptions 用 innerGridOptions() 生成（带 field / min / max）；
+// 平台 FM_PAGE_ATTRIBUTE 记录（TYPE='custom'，CUSTOM_FUNCTION 指向这两个 render 方法名）只带 CODE，render 方法按 item.key 自己推导字段与范围。
+// 用 h() 而不是 JSX：本仓的 JSX 编译只对 .vue 里带 @jsx-vue3 标记的 script 生效，.js 不走那条链。
+import { h, resolveComponent } from 'vue'
+import { DEFAULT_GRID, getPageGrid, isLegacyConfig, resolveContainerGrid, gridPitch, maxGapForPitch } from '@epxing/dashboard/src/grid/model'
+
+// 「内部网格」的数字项：面板键 → 从有效网格取值 / 写回显式 grid 的字段与取值范围。
+// 行高是行距（每行占位、含间距，model.gridPitch）、间距只是组件四周内缩：改间距不改变组件位置与容器内高度，改行高才改
+export const INNER_GRID_FIELDS = [
+  { key: 'gridColNum', label: '列数', field: 'colNum', min: 1, max: 200 },
+  { key: 'gridRowHeight', label: '行高', field: 'rowHeight', min: 2, max: 200, tip: '每行占位高度（含间距，px）。组件高 = 行数 × 行高 − 间距；改间距不会改变它' },
+  { key: 'gridGap', label: '间距', field: 'gap', min: 0, max: 60, tip: '组件之间的空隙（px）；只影响间距，不改变组件位置与高度' }
+]
+
+// 代码侧 configOptions 的「内部网格」分组（覆写 initConfigOptions 的面板用）
+export function innerGridOptions (panel) {
+  return {
+    key: 'innerGrid',
+    label: '内部网格',
+    children: [
+      { key: 'gridInherit', label: '网格参数', renderContent: panel.renderInnerGridMode, tip: '继承：与所在页面 / 上级容器同一套列数、行高、间距；自定义：容器内按自己的参数布局' },
+      ...INNER_GRID_FIELDS.map(item => ({ ...item, renderContent: panel.renderInnerGridNumber }))
+    ]
+  }
+}
+
+export default {
+  inject: {
+    // 看板设计器 provide 的当前 items 树：本容器的 grid 真值在 item 上，按 id 找到后直读 / 写回
+    getComponentItems: { default: null }
+  },
+  computed: {
+    // 本容器的有效内部网格（显式 grid 优先，否则继承父网格 / 旧配置历史写死值）；不在看板设计器里（无 items 树）为 null
+    innerGrid () {
+      if (!this.getComponentItems) return null
+      return resolveContainerGrid(this.getComponentItems(), this.id, getPageGrid(this.globalConfigs), isLegacyConfig(this.globalConfigs))
+    }
+  },
+  methods: {
+    // 写回容器项的 grid（changeItemConfigs 的 type='component' 把键直接落到 item 上，null 删键）；外壳据此自动保存、画布子网格按新参数重建
+    setInnerGrid (grid) {
+      this.changeItemConfigs(this.id, { grid }, 'component')
+    },
+    // 继承 ⇒ 删掉显式 grid；自定义 ⇒ 从当前有效值起步写显式 grid（容器网格只认数字，'auto' 行高 / 间距换成页面默认数值）
+    setInnerGridMode (mode) {
+      const info = this.innerGrid
+      if (!info) return
+      if (mode === 'inherit') {
+        this.setInnerGrid(null)
+        return
+      }
+      const { colNum, rowHeight, gap } = info.grid
+      this.setInnerGrid({
+        colNum,
+        rowHeight: rowHeight === 'auto' ? DEFAULT_GRID.rowHeight : rowHeight,
+        gap: gap === 'auto' ? [...DEFAULT_GRID.gap] : [...gap]
+      })
+    },
+    // 改显式 grid 的某一项（field：colNum / rowHeight / gap）；其余键（padding 等）原样保留。
+    // 面板上的行高是行距：改行高落盘 rowHeight = 行距 − 纵向间距；改间距按当前行距反推 rowHeight（行距不变，间距夹到行距 − 1）
+    setInnerGridValue (field, v) {
+      const info = this.innerGrid
+      if (!info || !info.explicit || v == null || !field) return
+      const grid = { ...info.item.grid }
+      const pitch = gridPitch(info.grid)
+      if (field === 'gap') {
+        const gap = Math.min(v, maxGapForPitch(pitch))
+        grid.gap = [gap, gap]
+        if (pitch != null) grid.rowHeight = pitch - gap
+      } else if (field === 'rowHeight') {
+        const gapY = info.grid.gap === 'auto' ? 0 : info.grid.gap[1]
+        grid.rowHeight = Math.max(1, v - gapY)
+      } else {
+        grid[field] = v
+      }
+      this.setInnerGrid(grid)
+    },
+    innerGridValue (field) {
+      const info = this.innerGrid
+      if (!info || !field) return null
+      const { colNum, gap } = info.grid
+      if (field === 'colNum') return colNum
+      if (field === 'rowHeight') return gridPitch(info.grid)
+      if (field === 'gap') return gap === 'auto' ? null : gap[0]
+      return null
+    },
+    renderInnerGridMode () {
+      const info = this.innerGrid
+      return h(resolveComponent('el-radio-group'), {
+        modelValue: info && info.explicit ? 'custom' : 'inherit',
+        disabled: !info,
+        onChange: this.setInnerGridMode
+      }, () => [
+        h(resolveComponent('el-radio'), { label: 'inherit', value: 'inherit' }, () => '继承'),
+        h(resolveComponent('el-radio'), { label: 'custom', value: 'custom' }, () => '自定义')
+      ])
+    },
+    // 数字框：继承时禁用、显示继承到的有效值（'auto' 显示「自动」）；自定义时可改。
+    // 配置项没带 field / min / max（平台记录）时按 key 查 INNER_GRID_FIELDS 推导；间距上限随行距、行高下限随间距（一行内容高 ≥ 1）
+    renderInnerGridNumber (item) {
+      const def = INNER_GRID_FIELDS.find(f => f.key === item.key) || {}
+      const field = item.field || def.field
+      const info = this.innerGrid
+      const value = this.innerGridValue(field)
+      const disabled = !info || !info.explicit
+      let min = item.min != null ? item.min : def.min
+      let max = item.max != null ? item.max : def.max
+      if (field === 'gap') max = Math.min(max, maxGapForPitch(this.innerGridValue('rowHeight')))
+      if (field === 'rowHeight') min = Math.max(min, (this.innerGridValue('gap') || 0) + 1)
+      return h(resolveComponent('el-input-number'), {
+        class: 'epx-dashboard-inner-grid__num',
+        size: 'small',
+        modelValue: value == null ? undefined : value,
+        disabled,
+        placeholder: value == null ? '自动' : '',
+        min,
+        max,
+        step: 1,
+        stepStrictly: true,
+        controlsPosition: 'right',
+        onChange: v => this.setInnerGridValue(field, v)
+      })
+    }
+  }
+}

package/src/visual/search/Filter.vue

@@ -0,0 +1,50 @@
+<script>
+import ComponentVue from '../Component.vue'
+export default {
+  name: 'epx-visual-search-filter',
+  extends: ComponentVue,
+
+  methods: {
+    initDefaultConfigs () {
+      const keywords = [...new Set([...this.currentMeta.keyNames, this.currentMeta.label])]
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        flex: false,
+        componentName: this.componentInfo.title,
+        searchFlag: true,
+        keywordFlag: true,
+        keywords,
+        searchFields: [],
+        span: 24
+      }
+    },
+    initConfigOptions () {
+      const configOptions = [
+        { key: 'componentName', label: '组件名称', type: 'input' },
+        { key: 'searchFlag', label: '是否显示查询区域', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] },
+        { key: 'keywordFlag', label: '是否显示关键字查询', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] },
+        { key: 'keywords', label: '关键词查询字段', type: 'field' },
+        { key: 'searchFields', label: '查询字段', type: 'field' },
+        { key: 'span', label: '宽度', type: 'select', options: this.spanOptions },
+        { key: 'xsspan', label: '移动端宽度', type: 'select', options: this.spanOptions },
+        { key: 'height', label: '高度', type: 'height' },
+        { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] }
+      ]
+      this.configOptions = configOptions
+    },
+    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'
+        }
+      }
+    }
+  }
+}
+</script>

package/src/visual/step/Index.vue

@@ -0,0 +1,361 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import draggable from '@epxing/core/src/components/draggable'
+import ComponentVue from '@epxing/designer/src/visual/Component.vue'
+import OperateItem from '@epxing/designer/src/visual/config/OperateItem'
+export default {
+  name: 'epx-visual-step',
+  extends: ComponentVue,
+  components: {
+    OperateItem,
+    draggable
+  },
+  data () {
+    return {
+      stepName: {},
+      editStep: {},
+      editStepDialog: false
+    }
+  },
+  computed: {
+    steps: {
+      get () {
+        const { items = [] } = this.widget
+        return items
+      },
+      set (v) {
+        this.designer.updateWidget(this.id, { items: v })
+      }
+    },
+    selectedWidget () {
+      return this.designer.selectedWidget
+    },
+    widgetConfig () {
+      const compId = this.selectedWidget.id
+      const widgetConfig = this.designer.widgetConfig[compId] || {}
+      return widgetConfig
+    },
+    variableSets: {
+      get () {
+        return this.designer.pageConfig?.variableSets || []
+      }
+    },
+    variableTree () {
+      const { iterator } = this.widgetConfig
+      const variableList = this.variableSets.map(item => ({ ...item, type: 'variable', text: item.name || item.code, code: item.code }))
+      if (iterator?.data) {
+        variableList.push({
+          type: 'variable',
+          text: this.selectedWidget.title + '_迭代变量',
+          code: iterator.name || 'item'
+        })
+      }
+      return [{
+        code: 'PAGE_VARIABLE',
+        text: '页面变量',
+        children: variableList
+      }]
+    }
+  },
+  methods: {
+    initDefaultConfigs () {
+      if (this.steps) {
+        this.steps.forEach(item => {
+          this.stepName[item.id] = item.title
+        })
+      }
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        flex: true,
+        componentName: this.componentInfo.title,
+        span: 24,
+        activeStep: '$[activeStep]'
+      }
+    },
+    getOperateOptions () {
+      this.getHandlerList()
+      this.getCommonOperates()
+      this.operateConfigs = [
+        {
+          key: 'base',
+          title: '基本',
+          options: ['text', 'ui', 'styles', 'icon', 'showName', 'width', 'preview']
+        },
+        {
+          key: 'event',
+          title: '事件',
+          options: ['handler', 'metaId', 'action', 'rule', 'openMode', 'page', 'pageType', 'printWay', 'printCode', 'cptName', 'printOperates', 'aiPromptId', 'destActivityId', 'function', 'processNode', 'auditorOptional', 'openOpinion', 'showCheckFields', 'checkRequireFields', 'saveSignFlag', 'checkOpinionLabel', 'checkOpinionValue', 'reload', 'params', 'nextParams', 'beforeTrigger', 'afterTrigger', 'backPageDelta', 'afterTriggerPage', 'afterTriggerPageOpenMode', 'afterTriggerParams']
+        },
+        {
+          key: 'advance',
+          title: '高级',
+          options: ['terminal', 'mobileFlex', 'limitFlag', 'limitCondition', 'limitTip', 'showConditionType', 'showCondition', 'showConditionEl', 'confirm', 'confirmMsg', 'confirmButtonText', 'cancelButtonText', 'validateForm', 'successMsg', 'failMsg', 'mask']
+        }
+      ]
+      this.operateOptions = {
+        nextParams: {
+          key: 'nextParams',
+          label: '下一步参数',
+          type: 'params',
+          tip: '提交成功后带给后续步骤页面的参数。参数值可选「字段值」取本次提交返回的数据（#[字段名]）、「页面参数」取页面变量（$[变量名]），也可手填 $[res] / $[res.字段] 取整条返回数据，或直接写固定值',
+          showFlag: { handler: ['submitForm', 'commonRuleAction'] }
+        },
+        mobileFlex: {
+          key: 'mobileFlex',
+          label: '移动端均分',
+          type: 'switch',
+          defaultValue: true
+        },
+        auditorOptional: {
+          key: 'auditorOptional',
+          label: '允许自选',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: false,
+          showFlag: { handler: ['checkEntity', 'check', 'applyEntity'] }
+        },
+        opinionRequire: {
+          key: 'opinionRequire',
+          label: '审核意见必填',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: false,
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        validateForm: {
+          key: 'validateForm',
+          label: '校验表单',
+          type: 'radio',
+          options: [{ label: '根据页面状态校验（编辑/新增）', value: '' }, { label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: ''
+        },
+        signRequire: {
+          key: 'signRequire',
+          label: '审核签名必填',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: false,
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        saveSignFlag: {
+          key: 'saveSignFlag',
+          label: '显示保存签名',
+          type: 'radio',
+          options: [{ label: '是', value: true }, { label: '否', value: false }],
+          defaultValue: true,
+          showFlag: { handler: ['checkEntity', 'check'] }
+        },
+        aiPromptId: {
+          key: 'aiPromptId',
+          label: '提示词',
+          type: 'object',
+          object: 'FM_AI_PROMPT',
+          showFlag: { handler: ['aiFilling'] }
+
+        },
+        afterTrigger: {
+          key: 'afterTrigger',
+          label: '事件触发后',
+          type: 'select',
+          options: [
+            { label: '返回', value: 'backPage' },
+            { label: '返回并刷新', value: 'backRefeshPage' },
+            { label: '打开指定页面', value: 'goPage' },
+            { label: '刷新组件', value: '$refesh' },
+            { label: '刷新页面', value: '$refeshPage' },
+            { label: '重新加载页面', value: 'reloadPage' },
+            { label: '上一步', value: 'lastStep' },
+            { label: '下一步', value: 'nextStep' }
+          ],
+          showFlag: { handler: ['commonRuleAction', 'commonAction', 'downloadFile', 'applyEntity', 'checkEntity', 'batchCheck', 'check'] }
+        }
+      }
+    },
+    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'
+        }
+      }
+    },
+    addStepItem () {
+      const { items = [] } = this.widget
+      const id = 'stepitem_' + this.$util.genId()
+      const name = '步骤项' + (items.length + 1)
+      const newStepItem = { id, title: name, contentType: 'step-item' }
+      this.stepName[id] = name
+      this.designer.addWidget(newStepItem, this.widget, { defaultSelected: false })
+    },
+    changeStepItem (item) {
+      this.designer.updateWidget(item.id, { title: this.stepName[item.id] })
+    },
+    deleteStepItem (item) {
+      if (this.steps.length <= 1) {
+        this.$message.error('标签项至少要有一个')
+        return
+      }
+      this.designer.deleteWidget(item, this.widget)
+    },
+    editStepItem (item) {
+      const stepItemConfig = this.designer.widgetConfig[item.id]
+      this.editStep = { ...item, description: stepItemConfig?.description, operates: stepItemConfig?.operates, pageId: stepItemConfig?.pageId, showIf: stepItemConfig?.showIf }
+      this.editStepDialog = true
+    },
+    changeStepItemAttribute (key, v) {
+      this.editStep[key] = v
+    },
+    changeStepItemLanguageAttribute (key, v) {
+      this.editStep[`${key}.i18n`] = v
+    },
+    saveStepItem () {
+      this.editStepDialog = false
+      if (this.editStep.showIf) {
+        const el = JSON.parse(this.editStep.showIf).el
+        this.designer.updateWidgetConfig(this.editStep.id, { showIf: el })
+      } else {
+        this.designer.updateWidgetConfig(this.editStep.id, { showIf: null })
+      }
+      this.designer.updateWidgetConfig(this.editStep.id, { operates: this.editStep.operates, pageId: this.editStep.pageId, description: this.editStep.description })
+      delete this.editStep.showIf
+      delete this.editStep.operates
+      delete this.editStep.pageId
+      delete this.editStep.description
+      const steps = [...this.steps]
+      const index = steps.findIndex(component => component.id === this.editStep.id)
+      if (index !== -1) {
+        steps.splice(index, 1, { ...this.editStep })
+        this.steps = steps
+      }
+    },
+    renderStepItem (item) {
+      return (
+        <div class="">
+          <draggable v-model={this.steps} tag="ul" group="tab-pane" handle=".tab-item__drag-icon" class="tab__list">
+            {
+              this.steps.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.stepName[item.id]} onChange={this.changeStepItem.bind(this, item)}></el-input>
+                  <span class="tab-item__operates">
+                    <el-button type="primary" link size="default" icon="el-icon-setting" onClick={this.editStepItem.bind(this, item)}></el-button>
+                    <el-button type="primary" link size="default" icon="el-icon-delete" onClick={this.deleteStepItem.bind(this, item)}></el-button>
+                  </span>
+                </li>
+              ))
+            }
+          </draggable>
+          <el-button type="primary" link onClick={this.addStepItem}>+ 添加步骤项</el-button>
+          <el-dialog
+            title="修改步骤项"
+            modelValue={this.editStepDialog}
+            width="420px"
+            append-to-body
+            destroy-on-close
+            onClose={() => { this.editStepDialog = false }}
+          >
+            {
+              this.editStepDialog && (
+                <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.editStep.title}
+                      i18nValue={this.editStep['title.i18n']}
+                      onChangeConfigs={this.changeStepItemAttribute.bind(this, 'title')}
+                      onChange-language-config={this.changeStepItemLanguageAttribute.bind(this, 'title')}
+                    />
+                  </el-form-item>
+                  <el-form-item label="描述文字" class="epx-visual-component__form-item">
+                    <epx-visual-config-textarea
+                      label="描述文字"
+                      value={this.editStep.description}
+                      i18nValue={this.editStep['description.i18n']}
+                      onChangeConfigs={this.changeStepItemAttribute.bind(this, 'description')}
+                      onChange-language-config={this.changeStepItemLanguageAttribute.bind(this, 'description')}
+                    />
+                  </el-form-item>
+                  <el-form-item label="绑定页面">
+                    <epx-visual-config-object
+                      value={this.editStep.pageId}
+                      object="FM_PAGE_CONFIG"
+                      label="绑定页面"
+                      onChangeConfigs={this.changeStepItemAttribute.bind(this, 'pageId')}
+                    />
+                  </el-form-item>
+                  <el-form-item label="操作按钮">
+                    <epx-visual-config-operate
+                      designer={this.designer}
+                      value={this.editStep.operates}
+                      configs={this.config}
+                      metaId={item.metaId}
+                      compMetaId={this.currentMetaId}
+                      common-operates={item.commonOperates || this.commonOperates}
+                      operate-options={this.operateOptions}
+                      operate-configs={this.operateConfigs}
+                      treeFieldStore={this.treeFieldStore}
+                      pageParams={this.pageParams}
+                      handlerList={item.handlerList || this.handlerList}
+                      action-list={this.actionList}
+                      rule-list={this.ruleList}
+                      scopeConfigs={this.scopeConfigs}
+                      pageGlobalConfigs={this.globalConfigs}
+                      onChangeConfigs={this.changeStepItemAttribute.bind(this, 'operates')}
+                    />
+                  </el-form-item>
+                  <el-form-item label="显示条件">
+                    <epx-rule
+                      formulaType='web'
+                      v-model={this.editStep.showIf}
+                      metaId={this.getConfigMetaId(item) || this.pageMetaId}
+                      variableList={this.variableTree}
+                      fieldConfigs={{ state: 'EDIT', functionType: 'web' }}
+                    >
+                    </epx-rule>
+                  </el-form-item>
+                </el-form>
+              )
+            }
+            <div class="button-group">
+              <el-button type="primary" size="default" onClick={this.saveStepItem}>确定</el-button>
+              <el-button size="default" onClick={() => { this.editStepDialog = false }}>取消</el-button>
+            </div>
+          </el-dialog>
+        </div>
+      )
+    }
+  }
+}
+</script>
+<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>