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

package/src/visual/FormField.vue

@@ -0,0 +1,113 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import ComponentVue from './Component.vue'
+// 默认值逻辑
+export default {
+  name: 'epx-visual-form-field',
+  extends: ComponentVue,
+  data () {
+    return {
+      optionScopeType: 'all'
+    }
+  },
+  computed: {
+    defavalueType: {
+      get () {
+        return this.allConfigs.defavalueType || 'string'
+      },
+      set (v) {
+        this.changeConfigItem('defavalueType', v === 'string' ? null : v)
+      }
+    },
+    defaultValue: {
+      get () {
+        return this.allConfigs.defaultValue
+      },
+      set (v) {
+        this.changeConfigItem('defaultValue', v)
+      }
+    }
+  },
+  watch: {
+    optionScopeType (v) {
+      if (v === 'all') this.changeConfigItem('showOptionCodes', null)
+    }
+  },
+  methods: {
+    afterInitConfig () {
+      this.optionScopeType = this.allConfigs.showOptionCodes ? 'custom' : 'all'
+    },
+    initDefaultConfigs () {
+      // 获取到该组件的默认配置
+      this.defaultConfigs = {
+        flex: false,
+        span: 24,
+        xsspan: 24
+      }
+    },
+    renderDefaultValue () {
+      const { contentType } = this.designer.selectedWidget || {}
+      const execResult = /^form-(.+)-field$/.exec(contentType)
+      const dataType = execResult[1] === 'input-number' ? 'num' : execResult[1] === 'checkbox' ? 'multibox' : execResult[1] === 'select' ? 'list' : execResult[1]
+      return (
+        <div >
+          <el-radio-group v-model={this.defavalueType} >
+            <el-radio label="string" value="string">固定值</el-radio>
+            <el-radio label="custom" value="custom">自定义</el-radio>
+          </el-radio-group>
+          <div>
+            {
+              this.defavalueType === 'string' ? (
+                <epx-table-form-item v-model={this.defaultValue}
+                  fieldConfigs={{
+                    attriName: contentType,
+                    attriLabel: this.allConfigs.label,
+                    dataType: dataType,
+                    codeKey: this.allConfigs.codeKey,
+                    showOptionCodes: this.allConfigs.showOptionCodes,
+                    relatedEntity: this.allConfigs.relatedEntity,
+                    state: 'EDIT',
+                    datePrecision: this.allConfigs.datePrecision,
+                    isMultiple: this.allConfigs.isMultiple
+                  }}
+                ></epx-table-form-item>
+              ) : (
+                <epx-visual-config-input
+                  designer={this.designer}
+                  label="默认值"
+                  value={this.defaultValue}
+                  inputVariable={true}
+                  onChangeConfigs={v => { this.defaultValue = v }}
+                />
+              )
+            }
+
+          </div>
+        </div>
+      )
+    },
+    renderShowOptionCodes () {
+      return (
+        <div class="setting-field__item" >
+          <el-radio-group v-model={this.optionScopeType}>
+            <el-radio label="all" value="all">全部</el-radio>
+            <el-radio label="custom" value="custom">自定义</el-radio>
+          </el-radio-group>
+          {
+            this.optionScopeType === 'custom' ? (
+              <epx-visual-config-list
+                code={this.allConfigs.codeKey}
+                multiple={true}
+                value={this.allConfigs.showOptionCodes}
+                dataKey="id"
+                onChangeConfigs={v => this.changeConfigItem('showOptionCodes', v)}
+              />
+            ) : null
+          }
+        </div>
+      )
+    }
+  }
+}
+</script>

package/src/visual/HeaderNew.vue

@@ -0,0 +1,176 @@
+<script>
+import ComponentVue from './Component.vue'
+export default {
+  name: 'epx-visual-header-new',
+  extends: ComponentVue,
+  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: '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: 'rule',
+          label: '业务规则',
+          type: 'select',
+          options: this.ruleList,
+          showFlag: { handler: 'commonRuleAction' }
+        },
+        {
+          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: 'function',
+          label: '事件名称',
+          type: 'function',
+          showFlag: { handler: 'customJS' }
+        },
+        { 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' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.visual-config {
+  padding: 16px;
+
+    :deep(.el-input__inner) {
+      width: 200px;
+    }
+
+}
+.is-default {
+
+    :deep(.el-input) {
+      opacity: .8;
+    }
+
+}
+.is-default__tip {
+  color: #666;
+}
+</style>

package/src/visual/Html.vue

@@ -0,0 +1,104 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import ComponentVue from './Component.vue'
+import { captureRef } from '@epxing/core/src/capture-ref'
+export default {
+  name: 'epx-visual-html',
+  extends: ComponentVue,
+  data () {
+    return {
+      content: ''
+    }
+  },
+  methods: {
+    showPopover () {
+      if (!this.editor) {
+        this.editorInit()
+      }
+    },
+    editorInit () {
+      require.ensure([], () => {
+        const CodeMirror = require('codemirror')
+        globalThis.codemirror = CodeMirror
+        require('codemirror/addon/hint/show-hint.js')
+        require('codemirror/lib/codemirror.css')
+        require('codemirror/addon/hint/show-hint.css')
+        require('codemirror/addon/edit/matchbrackets.js')
+        require('codemirror/addon/edit/closebrackets.js')
+        require('codemirror/mode/htmlmixed/htmlmixed.js')
+        require('codemirror/addon/hint/html-hint.js')
+        require('codemirror/addon/fold/foldgutter.js')
+        require('codemirror/addon/fold/foldgutter.css')
+        require('codemirror/addon/fold/foldcode.js')
+        require('codemirror/addon/fold/xml-fold.js')
+        require('codemirror/addon/fold/indent-fold.js')
+        require('@epxing/theme/src/idea.css')
+
+        this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+          theme: 'idea',
+          mode: 'text/html',
+          matchBrackets: true,
+          autofocus: true,
+          showCursorWhenSelecting: true,
+          autoCloseBrackets: true,
+          extraKeys: { Ctrl: 'autocomplete' },
+          lineWrapping: true,
+          foldGutter: true,
+          gutters: ['CodeMirror-foldgutter'],
+          inputStyle: 'contenteditable',
+          hintOptions: { completeSingle: false, closeOnUnfocus: false }
+        })
+        this.editor.on('change', (editor, change) => { // 任意键触发autocomplete
+          if (change.origin === '+input') {
+            const text = change.text[0]
+            if (/\w+/.test(text)) {
+              setTimeout(function () { editor.execCommand('autocomplete') }, 200)
+            }
+          }
+        })
+        this.editor.on('blur', (editor) => {
+          this.content = editor.getValue()
+          this.config.content = this.content
+        })
+        // this.editor.showHint()
+        if (this.value) {
+          this.editor.setValue(this.value)
+          this.editor.focus()
+        }
+      }, (err) => {
+        console.error(err)
+      }, 'codemirror')
+    },
+    renderEditor () {
+      return (
+        <div>
+          <el-popover
+            ref="editorPopover"
+            placement="bottom"
+            width="600"
+            trigger="click"
+            onShow={this.showPopover}
+            v-slots={{ reference: () => (<el-button type="primary" block size="small">编辑</el-button>) }}>
+            <div class="code-editor">
+              <textarea class="editor" ref={captureRef(this, 'textarea')} name="" id="" cols="30" rows="3" value={this.config.content}></textarea>
+            </div>
+          </el-popover>
+        </div>
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.code-editor {
+  width: 580px;
+  height: 400px;
+  border: 1px solid #e3e3e3;
+  & :deep(.CodeMirror) {
+    height: 100%;
+  }
+}
+
+</style>

package/src/visual/Import.vue

@@ -0,0 +1,55 @@
+<script>
+import ComponentVue from './Component.vue'
+export default {
+  name: 'epx-visual-import',
+  extends: ComponentVue,
+  watch: {
+    async currentMetaViewId (v) {
+      if (!v) return
+      await this.getAllFields()
+      // 仅用户切换视图且字段树加载成功时，按新视图过滤已配置字段（配置回显不过滤，避免误删）
+      if (!this.canFilterFieldsByView(v)) return
+      const { fields } = this.config
+      if (fields) {
+        const filtered = fields.filter(item => this.getField(item.attriName || item))
+        if (filtered.length !== fields.length) this.changeConfigItem('fields', filtered)
+      }
+    }
+  },
+  computed: {
+    metaView () {
+      if (this.currentMeta && this.currentMeta.metaView) {
+        return this.currentMeta.metaView[this.currentMetaViewId]
+      }
+      return null
+    }
+  },
+  methods: {
+    getFieldOptions () {
+      this.fieldOptions = [
+        { key: 'attriName', label: '字段', readonly: true },
+        {
+          key: 'configWay',
+          label: '配置方式',
+          type: 'radio',
+          options: [{ label: '默认配置', value: 'default' }, { label: '自定义', value: 'custom' }],
+          defaultValue: 'default'
+        },
+        { key: 'attriLabel', label: '名称', type: 'text' },
+        { key: 'value', label: '默认值', type: 'value' },
+        {
+          key: 'state',
+          label: '字段状态',
+          type: 'radio',
+          options: [{ label: '显示', value: '' }, { label: '隐藏', value: 'HIDDEN' }],
+          defaultValue: ''
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/visual/InterfaceSubList.vue

@@ -0,0 +1,23 @@
+<script>
+import Component from './Component.vue'
+export default {
+  name: 'epx-visual-interface-sub-list',
+  extends: Component,
+  methods: {
+    initConfigOptions () {
+      this.configOptions = [
+        { key: 'addRulePage', label: '新增业务规则页面', type: 'object', object: 'FM_PAGE_CONFIG' },
+        { key: 'editRulePage', label: '编辑业务规则页面', type: 'object', object: 'FM_PAGE_CONFIG' },
+        { key: 'span', label: '宽度', type: 'select', options: this.spanOptions },
+        { key: 'xsspan', label: '移动端宽度', type: 'select', options: this.spanOptions },
+        { key: 'flex', label: '占据页面剩余空间', type: 'radio', options: [{ label: '是', value: true }, { label: '否', value: false }] }
+      ]
+    }
+  }
+
+}
+</script>
+
+<style>
+
+</style>