feat: flowable前端改造

ruoyi-ui/src/components/Process/BpmData.js

@@ -0,0 +1,68 @@
+/**
+ * 存储流程设计相关参数
+ */
+export default class BpmData {
+  constructor() {
+    this.controls = [] // 设计器控件
+    this.init()
+  }
+
+  init() {
+    this.controls = [
+      {
+        action: 'create.start-event',
+        title: '开始'
+      },
+      {
+        action: 'create.intermediate-event',
+        title: '中间'
+      },
+      {
+        action: 'create.end-event',
+        title: '结束'
+      },
+      {
+        action: 'create.exclusive-gateway',
+        title: '网关'
+      },
+      {
+        action: 'create.task',
+        title: '任务'
+      },
+      {
+        action: 'create.user-task',
+        title: '用户任务'
+      },
+      {
+        action: 'create.user-sign-task',
+        title: '会签任务'
+      },
+      {
+        action: 'create.subprocess-expanded',
+        title: '子流程'
+      },
+      {
+        action: 'create.data-object',
+        title: '数据对象'
+      },
+      {
+        action: 'create.data-store',
+        title: '数据存储'
+      },
+      {
+        action: 'create.participant-expanded',
+        title: '扩展流程'
+      },
+      {
+        action: 'create.group',
+        title: '分组'
+      }
+    ]
+  }
+
+  //  获取控件配置信息
+  getControl(action) {
+    const result = this.controls.filter(item => item.action === action)
+    return result[0] || {}
+  }
+}

ruoyi-ui/src/components/Process/PropertyPanel.vue

@@ -0,0 +1,169 @@
+<template>
+  <div ref="propertyPanel" class="property-panel">
+    <div v-if="nodeName" class="node-name">{{ nodeName }}</div>
+    <component
+      :is="getComponent"
+      v-if="element"
+      :element="element"
+      :modeler="modeler"
+      :users="users"
+      :groups="groups"
+      :categorys="categorys"
+      @dataType="dataType"
+    />
+  </div>
+</template>
+
+<script>
+import taskPanel from './components/nodePanel/task'
+import startEndPanel from './components/nodePanel/startEnd'
+import processPanel from './components/nodePanel/process'
+import sequenceFlowPanel from './components/nodePanel/sequenceFlow'
+import gatewayPanel from './components/nodePanel/gateway'
+import { NodeName } from './lang/zh'
+
+export default {
+  name: 'PropertyPanel',
+  components: { processPanel, taskPanel, startEndPanel, sequenceFlowPanel, gatewayPanel },
+  props: {
+    users: {
+      type: Array,
+      required: true
+    },
+    groups: {
+      type: Array,
+      required: true
+    },
+    categorys: {
+      type: Array,
+      required: true
+    },
+    modeler: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      element: null,
+      form: {
+        id: '',
+        name: '',
+        color: null
+      },
+      roles: [
+        { value: 'manager', label: '经理' },
+        { value: 'personnel', label: '人事' },
+        { value: 'charge', label: '主管' }
+      ]
+    }
+  },
+  computed: {
+    getComponent() {
+      const type = this.element?.type
+      if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) {
+        return 'startEndPanel'
+      }
+      if ([
+        'bpmn:UserTask',
+        'bpmn:Task',
+        'bpmn:SendTask',
+        'bpmn:ReceiveTask',
+        'bpmn:ManualTask',
+        'bpmn:BusinessRuleTask',
+        'bpmn:ServiceTask',
+        'bpmn:ScriptTask'
+        // 'bpmn:CallActivity',
+        // 'bpmn:SubProcess'
+      ].includes(type)) {
+        return 'taskPanel'
+      }
+      if (type === 'bpmn:SequenceFlow') {
+        return 'sequenceFlowPanel'
+      }
+      if ([
+        'bpmn:InclusiveGateway',
+        'bpmn:ExclusiveGateway',
+        'bpmn:ParallelGateway',
+        'bpmn:EventBasedGateway'
+      ].includes(type)) {
+        return 'gatewayPanel'
+      }
+      if (type === 'bpmn:Process') {
+        return 'processPanel'
+      }
+      return null
+    },
+    nodeName() {
+      if (this.element) {
+        const bizObj = this.element.businessObject
+        const type = bizObj?.eventDefinitions
+          ? bizObj.eventDefinitions[0].$type
+          : bizObj.$type
+        return NodeName[type] || type
+      }
+      return ''
+    }
+  },
+  mounted() {
+    this.handleModeler()
+  },
+  methods: {
+    handleModeler() {
+      this.modeler.on('root.added', e => {
+        if (e.element.type === 'bpmn:Process') {
+          this.element = null
+          this.$nextTick().then(() => {
+            this.element = e.element
+          })
+        }
+      })
+      this.modeler.on('element.click', e => {
+        const { element } = e
+        console.log(element)
+        if (element.type === 'bpmn:Process') {
+          this.element = element
+        }
+      })
+      this.modeler.on('selection.changed', e => {
+        // hack 同类型面板不刷新
+        this.element = null
+        const element = e.newSelection[0]
+        if (element) {
+          this.$nextTick().then(() => {
+            this.element = element
+          })
+        }
+      })
+    },
+    /** 获取数据类型 */
+    dataType(data){
+      this.$emit('dataType', data)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.property-panel {
+  padding: 20px 20px;
+  // reset element css
+  .el-form--label-top .el-form-item__label {
+    padding: 0;
+  }
+  .el-form-item {
+    margin-bottom: 6px;
+  }
+  .tab-table .el-form-item {
+    margin-bottom: 16px;
+  }
+  .node-name{
+    border-bottom: 1px solid #ccc;
+    padding: 0 0 10px 20px;
+    margin-bottom: 10px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #444;
+  }
+}
+</style>

ruoyi-ui/src/components/Process/common/customTranslate.js

@@ -0,0 +1,20 @@
+import translations from '../lang/zh'
+
+export default function customTranslate(template, replacements) {
+  replacements = replacements || {}
+
+  // Translate
+  template = translations[template] || template
+
+  // Replace
+  return template.replace(/{([^}]+)}/g, function(_, key) {
+    var str = replacements[key]
+    if (
+      translations[replacements[key]] !== null &&
+      translations[replacements[key]] !== 'undefined'
+    ) {
+      str = translations[replacements[key]]
+    }
+    return str || '{' + key + '}'
+  })
+}

ruoyi-ui/src/components/Process/common/mixinExecutionListener.js

@@ -0,0 +1,24 @@
+
+import executionListenerDialog from '../components/nodePanel/property/executionListener'
+export default {
+  components: {
+    executionListenerDialog
+  },
+  data() {
+    return {
+      executionListenerLength: 0,
+      dialogName: null
+    }
+  },
+  methods: {
+    computedExecutionListenerLength() {
+      this.executionListenerLength = this.element.businessObject.extensionElements?.values?.length ?? 0
+    },
+    finishExecutionListener() {
+      if (this.dialogName === 'executionListenerDialog') {
+        this.computedExecutionListenerLength()
+      }
+      this.dialogName = ''
+    }
+  }
+}

ruoyi-ui/src/components/Process/common/mixinPanel.js

@@ -0,0 +1,70 @@
+import xcrud from 'xcrud'
+import golbalConfig from 'xcrud/package/common/config'
+import showConfig from '../flowable/showConfig'
+golbalConfig.set({
+  input: {
+    // size: 'mini'
+  },
+  select: {
+    // size: 'mini'
+  },
+  colorPicker: {
+    showAlpha: true
+  },
+  xform: {
+    form: {
+      labelWidth: 'auto'
+      // size: 'mini'
+    }
+  }
+})
+export default {
+  components: { xForm: xcrud.xForm },
+  props: {
+    modeler: {
+      type: Object,
+      required: true
+    },
+    element: {
+      type: Object,
+      required: true
+    },
+    categorys: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    'formData.id': function(val) {
+      this.updateProperties({ id: val })
+    },
+    'formData.name': function(val) {
+      this.updateProperties({ name: val })
+    },
+    'formData.documentation': function(val) {
+      if (!val) {
+        this.updateProperties({ documentation: [] })
+        return
+      }
+      const documentationElement = this.modeler.get('moddle').create('bpmn:Documentation', { text: val })
+      this.updateProperties({ documentation: [documentationElement] })
+    }
+  },
+  methods: {
+    updateProperties(properties) {
+      const modeling = this.modeler.get('modeling')
+      modeling.updateProperties(this.element, properties)
+    }
+  },
+  computed: {
+    elementType() {
+      const bizObj = this.element.businessObject
+      return bizObj.eventDefinitions
+        ? bizObj.eventDefinitions[0].$type
+        : bizObj.$type
+    },
+    showConfig() {
+      return showConfig[this.elementType] || {}
+    }
+  }
+}

ruoyi-ui/src/components/Process/common/mixinXcrud.js

@@ -0,0 +1,22 @@
+import xcrud from 'xcrud'
+import golbalConfig from 'xcrud/package/common/config'
+golbalConfig.set({
+  input: {
+    // size: 'mini'
+  },
+  select: {
+    // size: 'mini'
+  },
+  colorPicker: {
+    showAlpha: true
+  },
+  xform: {
+    form: {
+      labelWidth: 'auto'
+      // size: 'mini'
+    }
+  }
+})
+export default {
+  components: { xForm: xcrud.xForm }
+}

ruoyi-ui/src/components/Process/common/parseElement.js

@@ -0,0 +1,53 @@
+export function commonParse(element) {
+  const result = {
+    ...element.businessObject,
+    ...element.businessObject.$attrs
+  }
+  return formatJsonKeyValue(result)
+}
+
+export function formatJsonKeyValue(result) {
+  // 移除flowable前缀，格式化数组
+  for (const key in result) {
+    if (key.indexOf('flowable:') === 0) {
+      const newKey = key.replace('flowable:', '')
+      result[newKey] = result[key]
+      delete result[key]
+    }
+  }
+  result = documentationParse(result)
+  return result
+}
+
+export function documentationParse(obj) {
+  if ('documentation' in obj) {
+    let str = ''
+    obj.documentation.forEach(item => {
+      str += item.text
+    })
+    obj.documentation = str
+  }
+  return obj
+}
+
+export function conditionExpressionParse(obj) {
+  if ('conditionExpression' in obj) {
+    obj.conditionExpression = obj.conditionExpression.body
+  }
+  return obj
+}
+
+export function userTaskParse(obj) {
+  for (const key in obj) {
+    if (key === 'candidateUsers') {
+      obj.userType = 'candidateUsers'
+      obj[key] = obj[key]?.split(',') || []
+    } else if (key === 'candidateGroups') {
+      obj.userType = 'candidateGroups'
+      obj[key] = obj[key]?.split(',') || []
+    } else if (key === 'assignee') {
+      obj.userType = 'assignee'
+    }
+  }
+  return obj
+}

ruoyi-ui/src/components/Process/components/custom/customContextPad.vue

@@ -0,0 +1,24 @@
+export default class CustomContextPad {
+    constructor(config, contextPad, create, elementFactory, injector, translate) {
+        this.create = create;
+        this.elementFactory = elementFactory;
+        this.translate = translate;
+
+        if (config.autoPlace !== false) {
+            this.autoPlace = injector.get('autoPlace', false);
+        }
+
+        contextPad.registerProvider(this); // 定义这是一个contextPad
+    }
+
+    getContextPadEntries(element) {}
+}
+
+CustomContextPad.$inject = [
+    'config',
+    'contextPad',
+    'create',
+    'elementFactory',
+    'injector',
+    'translate'
+];

ruoyi-ui/src/components/Process/components/nodePanel/gateway.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <x-form ref="xForm" v-model="formData" :config="formConfig">
+      <template #executionListener>
+        <el-badge :value="executionListenerLength">
+          <el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
+        </el-badge>
+      </template>
+    </x-form>
+    <executionListenerDialog
+      v-if="dialogName === 'executionListenerDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishExecutionListener"
+    />
+  </div>
+</template>
+
+<script>
+import mixinPanel from '../../common/mixinPanel'
+import mixinExecutionListener from '../../common/mixinExecutionListener'
+import { commonParse } from '../../common/parseElement'
+export default {
+  mixins: [mixinPanel, mixinExecutionListener],
+  data() {
+    return {
+      formData: {}
+    }
+  },
+  computed: {
+    formConfig() {
+      return {
+        inline: false,
+        item: [
+          {
+            xType: 'input',
+            name: 'id',
+            label: '节点 id',
+            rules: [{ required: true, message: 'Id 不能为空' }]
+          },
+          {
+            xType: 'input',
+            name: 'name',
+            label: '节点名称'
+          },
+          {
+            xType: 'input',
+            name: 'documentation',
+            label: '节点描述'
+          },
+          {
+            xType: 'slot',
+            name: 'executionListener',
+            label: '执行监听器'
+          },
+          {
+            xType: 'switch',
+            name: 'async',
+            label: '异步',
+            activeText: '是',
+            inactiveText: '否'
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    'formData.async': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:async': val })
+    }
+  },
+  created() {
+    this.formData = commonParse(this.element)
+  }
+}
+</script>
+
+<style>
+
+</style>

ruoyi-ui/src/components/Process/components/nodePanel/process.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <x-form ref="xForm" v-model="formData" :config="formConfig">
+      <template #executionListener>
+        <el-badge :value="executionListenerLength">
+          <el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
+        </el-badge>
+      </template>
+      <template #signal>
+        <el-badge :value="signalLength">
+          <el-button size="small" @click="dialogName = 'signalDialog'">编辑</el-button>
+        </el-badge>
+      </template>
+    </x-form>
+    <executionListenerDialog
+      v-if="dialogName === 'executionListenerDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishExecutionListener"
+    />
+    <signalDialog
+      v-if="dialogName === 'signalDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishExecutionListener"
+    />
+  </div>
+</template>
+
+<script>
+import mixinPanel from '../../common/mixinPanel'
+import mixinExecutionListener from '../../common/mixinExecutionListener'
+import signalDialog from './property/signal'
+import { commonParse } from '../../common/parseElement'
+export default {
+  components: {
+    signalDialog
+  },
+  mixins: [mixinPanel, mixinExecutionListener],
+  data() {
+    return {
+      signalLength: 0,
+      formData: {}
+    }
+  },
+  computed: {
+    formConfig() {
+      const _this = this
+      return {
+        inline: false,
+        item: [
+          {
+            xType: 'select',
+            name: 'processCategory',
+            label: '流程分类',
+            dic: { data: _this.categorys, label: 'dictLabel', value: 'dictValue' }
+          },
+          {
+            xType: 'input',
+            name: 'id',
+            label: '流程标识key',
+            rules: [{ required: true, message: 'Id 不能为空' }]
+          },
+          {
+            xType: 'input',
+            name: 'name',
+            label: '流程名称'
+          },
+          {
+            xType: 'input',
+            name: 'documentation',
+            label: '节点描述'
+          },
+          {
+            xType: 'slot',
+            name: 'executionListener',
+            label: '执行监听器'
+          },
+          {
+            xType: 'slot',
+            name: 'signal',
+            label: '信号定义'
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    'formData.processCategory': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:processCategory': val })
+    }
+  },
+  created() {
+    this.formData = commonParse(this.element)
+  },
+  methods: {
+    computedSignalLength() {
+      this.signalLength = this.element.businessObject.extensionElements?.values?.length ?? 0
+    },
+    finishSignal() {
+      if (this.dialogName === 'signalDialog') {
+        this.computedSignalLength()
+      }
+      this.dialogName = ''
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

ruoyi-ui/src/components/Process/components/nodePanel/property/executionListener.vue

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <el-dialog
+      title="执行监听器"
+      :visible.sync="dialogVisible"
+      width="900px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      @closed="$emit('close')"
+    >
+      <x-form ref="xForm" v-model="formData" :config="formConfig">
+        <template #params="scope">
+          <el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary">
+            <el-button size="small" @click="configParam(scope.$index)">配置</el-button>
+          </el-badge>
+        </template>
+      </x-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
+      </span>
+    </el-dialog>
+    <listenerParam v-if="showParamDialog" :value="formData.executionListener[nowIndex].params" @close="finishConfigParam" />
+  </div>
+</template>
+
+<script>
+import mixinPanel from '../../../common/mixinPanel'
+import listenerParam from './listenerParam'
+export default {
+  components: { listenerParam },
+  mixins: [mixinPanel],
+  data() {
+    return {
+      dialogVisible: true,
+      showParamDialog: false,
+      nowIndex: null,
+      formData: {
+        executionListener: []
+      }
+    }
+  },
+  computed: {
+    formConfig() {
+    //   const _this = this
+      return {
+        inline: false,
+        item: [
+          {
+            xType: 'tabs',
+            tabs: [
+              {
+                label: '执行监听器',
+                name: 'executionListener',
+                column: [
+                  {
+                    label: '事件',
+                    name: 'event',
+                    width: 180,
+                    rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
+                    xType: 'select',
+                    dic: [
+                      { label: 'start', value: 'start' },
+                      { label: 'end', value: 'end' },
+                      { label: 'take', value: 'take' }
+                    ]
+                  },
+                  {
+                    label: '类型',
+                    name: 'type',
+                    width: 180,
+                    rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
+                    xType: 'select',
+                    dic: [
+                      { label: '类', value: 'class' },
+                      { label: '表达式', value: 'expression' },
+                      { label: '委托表达式', value: 'delegateExpression' }
+                    ],
+                    tooltip: `类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口 <br />
+                              表达式：示例 \${myObject.callMethod(task, task.eventName)} <br />
+                              委托表达式：示例 \${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口
+                    `
+                  },
+                  {
+                    label: 'java 类名',
+                    name: 'className',
+                    xType: 'input',
+                    rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
+                  },
+                  {
+                    xType: 'slot',
+                    label: '参数',
+                    width: 120,
+                    slot: true,
+                    name: 'params'
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.formData.executionListener = this.element.businessObject.extensionElements?.values
+      .filter(item => item.$type === 'flowable:ExecutionListener')
+      .map(item => {
+        let type
+        if ('class' in item) type = 'class'
+        if ('expression' in item) type = 'expression'
+        if ('delegateExpression' in item) type = 'delegateExpression'
+        return {
+          event: item.event,
+          type: type,
+          className: item[type],
+          params: item.fields?.map(field => {
+            let fieldType
+            if ('stringValue' in field) fieldType = 'stringValue'
+            if ('expression' in field) fieldType = 'expression'
+            return {
+              name: field.name,
+              type: fieldType,
+              value: field[fieldType]
+            }
+          }) ?? []
+        }
+      }) ?? []
+  },
+  methods: {
+    configParam(index) {
+      this.nowIndex = index
+      const nowObj = this.formData.executionListener[index]
+      if (!nowObj.params) {
+        nowObj.params = []
+      }
+      this.showParamDialog = true
+    },
+    finishConfigParam(param) {
+      this.showParamDialog = false
+      // hack 数量不更新问题
+      const cache = this.formData.executionListener[this.nowIndex]
+      cache.params = param
+      this.$set(this.formData.executionListener[this.nowIndex], this.nowIndex, cache)
+      this.nowIndex = null
+    },
+    updateElement() {
+      if (this.formData.executionListener?.length) {
+        let extensionElements = this.element.businessObject.get('extensionElements')
+        if (!extensionElements) {
+          extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
+        }
+        // 清除旧值
+        extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
+        this.formData.executionListener.forEach(item => {
+          const executionListener = this.modeler.get('moddle').create('flowable:ExecutionListener')
+          executionListener['event'] = item.event
+          executionListener[item.type] = item.className
+          if (item.params && item.params.length) {
+            item.params.forEach(field => {
+              const fieldElement = this.modeler.get('moddle').create('flowable:Field')
+              fieldElement['name'] = field.name
+              fieldElement[field.type] = field.value
+              // 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
+              // const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
+              // fieldElement[field.type] = valueElement
+              executionListener.get('fields').push(fieldElement)
+            })
+          }
+          extensionElements.get('values').push(executionListener)
+        })
+        this.updateProperties({ extensionElements: extensionElements })
+      } else {
+        const extensionElements = this.element.businessObject[`extensionElements`]
+        if (extensionElements) {
+          extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
+        }
+      }
+    },
+    closeDialog() {
+      this.$refs.xForm.validate().then(() => {
+        this.updateElement()
+        this.dialogVisible = false
+      }).catch(e => console.error(e))
+    }
+  }
+}
+</script>
+
+<style>
+.flow-containers  .el-badge__content.is-fixed {
+    top: 18px;
+}
+</style>

ruoyi-ui/src/components/Process/components/nodePanel/property/listenerParam.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <el-dialog
+      title="监听器参数"
+      :visible.sync="dialogVisible"
+      width="700px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      @closed="$emit('close', formData.paramList)"
+    >
+      <x-form ref="xForm" v-model="formData" :config="formConfig" />
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import mixinXcrud from '../../../common/mixinXcrud'
+export default {
+  mixins: [mixinXcrud],
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      dialogVisible: true,
+      formData: {
+        paramList: this.value
+      }
+    }
+  },
+  computed: {
+    formConfig() {
+      return {
+        inline: false,
+        item: [
+          {
+            xType: 'tabs',
+            tabs: [
+              {
+                label: '监听器参数',
+                name: 'paramList',
+                column: [
+                  {
+                    label: '类型',
+                    name: 'type',
+                    width: 180,
+                    rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
+                    xType: 'select',
+                    dic: [
+                      { label: '字符串', value: 'stringValue' },
+                      { label: '表达式', value: 'expression' }
+                    ]
+                  },
+                  {
+                    label: '名称',
+                    name: 'name',
+                    width: 180,
+                    rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
+                    xType: 'input'
+                  },
+                  {
+                    label: '值',
+                    name: 'value',
+                    xType: 'input',
+                    rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    closeDialog() {
+      this.$refs.xForm.validate().then(() => {
+        this.dialogVisible = false
+      }).catch(e => console.error(e))
+    }
+  }
+}
+</script>
+
+<style>
+.flow-containers  .el-badge__content.is-fixed {
+    top: 18px;
+}
+</style>

ruoyi-ui/src/components/Process/components/nodePanel/property/multiInstance.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <el-dialog
+      title="多实例配置"
+      :visible.sync="dialogVisible"
+      width="500px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      class="muti-instance"
+      @closed="$emit('close')"
+    >
+      <el-alert
+        type="info"
+        :closable="false"
+        show-icon
+        style="margin-bottom: 20px"
+      >
+        <template #title>
+          按照BPMN2.0规范的要求，用于为每个实例创建执行的父执行，会提供下列变量:<br>
+          nrOfInstances：实例总数。<br>
+          nrOfActiveInstances：当前活动的（即未完成的），实例数量。对于顺序多实例，这个值总为1。<br>
+          nrOfCompletedInstances：已完成的实例数量。<br>
+          loopCounter：给定实例在for-each循环中的index。<br>
+        </template>
+      </el-alert>
+      <x-form ref="xForm" v-model="formData" :config="formConfig" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import mixinPanel from '../../../common/mixinPanel'
+import { formatJsonKeyValue } from '../../../common/parseElement'
+export default {
+  mixins: [mixinPanel],
+  data() {
+    return {
+      dialogVisible: true,
+      formData: {}
+    }
+  },
+  computed: {
+    formConfig() {
+      const _this = this
+      return {
+        inline: false,
+        item: [
+          {
+            xType: 'input',
+            name: 'collection',
+            label: '集合',
+            tooltip: '属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。'
+          },
+          {
+            xType: 'input',
+            name: 'elementVariable',
+            label: '元素变量',
+            tooltip: '每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />一般来说，该字符串应与指定人员变量相同。'
+          },
+          {
+            xType: 'radio',
+            name: 'isSequential',
+            label: '执行方式',
+            dic: [{ label: '串行', value: true }, { label: '并行', value: false }]
+          },
+          {
+            xType: 'input',
+            name: 'completionCondition',
+            label: '完成条件',
+            tooltip: '多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />表示当任务完成60%时，该节点就算完成'
+          }
+        ],
+        operate: [
+          { text: '确定', show: true, click: _this.save },
+          { text: '清空', show: true, click: () => { _this.formData = {} } }
+        ]
+      }
+    }
+  },
+  mounted() {
+    const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {}))
+    cache.completionCondition = cache.completionCondition?.body
+    this.formData = formatJsonKeyValue(cache)
+  },
+  methods: {
+    updateElement() {
+      if (this.formData.isSequential !== null && this.formData.isSequential !== undefined) {
+        let loopCharacteristics = this.element.businessObject.get('loopCharacteristics')
+        if (!loopCharacteristics) {
+          loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics')
+        }
+        loopCharacteristics['isSequential'] = this.formData.isSequential
+        loopCharacteristics['collection'] = this.formData.collection
+        loopCharacteristics['elementVariable'] = this.formData.elementVariable
+        if (this.formData.completionCondition) {
+          const completionCondition = this.modeler.get('moddle').create('bpmn:Expression', { body: this.formData.completionCondition })
+          loopCharacteristics['completionCondition'] = completionCondition
+        }
+        this.updateProperties({ loopCharacteristics: loopCharacteristics })
+      } else {
+        delete this.element.businessObject.loopCharacteristics
+      }
+    },
+    save() {
+      this.updateElement()
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+
+<style>
+.muti-instance .el-form-item {
+  margin-bottom: 22px;
+}
+</style>

ruoyi-ui/src/components/Process/components/nodePanel/property/signal.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <el-dialog
+      title="信号定义"
+      :visible.sync="dialogVisible"
+      width="700px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      @closed="$emit('close')"
+    >
+      <x-form ref="xForm" v-model="formData" :config="formConfig" />
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import mixinPanel from '../../../common/mixinPanel'
+export default {
+  mixins: [mixinPanel],
+  data() {
+    return {
+      dialogVisible: true,
+      formData: {
+        signal: []
+      }
+    }
+  },
+  computed: {
+    formConfig() {
+    //   const _this = this
+      return {
+        inline: false,
+        item: [
+          {
+            xType: 'tabs',
+            tabs: [
+              {
+                label: '信号定义',
+                name: 'signal',
+                column: [
+                  {
+                    label: 'scope',
+                    name: 'scope',
+                    width: 180,
+                    rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
+                    xType: 'select',
+                    dic: [
+                      { label: '全局', value: 'start' },
+                      { label: '流程实例', value: 'end' }
+                    ]
+                  },
+                  {
+                    label: 'id',
+                    name: 'id',
+                    width: 200,
+                    rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
+                    xType: 'input'
+                  },
+                  {
+                    label: '名称',
+                    name: 'name',
+                    xType: 'input',
+                    rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    // this.formData.signal = this.element.businessObject.extensionElements?.values.map(item => {
+    //   let type
+    //   if ('class' in item.$attrs) type = 'class'
+    //   if ('expression' in item.$attrs) type = 'expression'
+    //   if ('delegateExpression' in item.$attrs) type = 'delegateExpression'
+    //   return {
+    //     event: item.$attrs.event,
+    //     type: type,
+    //     className: item.$attrs[type]
+    //   }
+    // }) ?? []
+  },
+  methods: {
+    updateElement() {
+      if (this.formData.signal?.length) {
+        let extensionElements = this.element.businessObject.get('extensionElements')
+        if (!extensionElements) {
+          extensionElements = this.modeler.get('moddle').create('bpmn:signal')
+        }
+        const length = extensionElements.get('values').length
+        for (let i = 0; i < length; i++) {
+          // 清除旧值
+          extensionElements.get('values').pop()
+        }
+        this.updateProperties({ extensionElements: extensionElements })
+      } else {
+        const extensionElements = this.element.businessObject[`extensionElements`]
+        if (extensionElements) {
+          extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener')
+        }
+      }
+    },
+    closeDialog() {
+      this.$refs.xForm.validate().then(() => {
+        this.updateElement()
+        this.dialogVisible = false
+      }).catch(e => console.error(e))
+    }
+  }
+}
+</script>
+
+<style>
+.flow-containers  .el-badge__content.is-fixed {
+    top: 18px;
+}
+</style>

ruoyi-ui/src/components/Process/components/nodePanel/property/taskListener.vue

@@ -0,0 +1,196 @@
+<template>
+  <div>
+    <el-dialog
+      title="任务监听器"
+      :visible.sync="dialogVisible"
+      width="900px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      @closed="$emit('close')"
+    >
+      <x-form ref="xForm" v-model="formData" :config="formConfig">
+        <template #params="scope">
+          <el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary">
+            <el-button size="small" @click="configParam(scope.$index)">配置</el-button>
+          </el-badge>
+        </template>
+      </x-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
+      </span>
+    </el-dialog>
+    <listenerParam v-if="showParamDialog" :value="formData.taskListener[nowIndex].params" @close="finishConfigParam" />
+  </div>
+</template>
+
+<script>
+import mixinPanel from '../../../common/mixinPanel'
+import listenerParam from './listenerParam'
+export default {
+  components: { listenerParam },
+  mixins: [mixinPanel],
+  data() {
+    return {
+      dialogVisible: true,
+      showParamDialog: false,
+      nowIndex: null,
+      formData: {
+        taskListener: []
+      }
+    }
+  },
+  computed: {
+    formConfig() {
+    //   const _this = this
+      return {
+        inline: false,
+        item: [
+          {
+            xType: 'tabs',
+            tabs: [
+              {
+                label: '任务监听器',
+                name: 'taskListener',
+                column: [
+                  {
+                    label: '事件',
+                    name: 'event',
+                    width: 180,
+                    rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
+                    xType: 'select',
+                    dic: [
+                      { label: 'create', value: 'create' },
+                      { label: 'assignment', value: 'assignment' },
+                      { label: 'complete', value: 'complete' },
+                      { label: 'delete', value: 'delete' }
+                    ],
+                    tooltip: `create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br />
+                              assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br />
+                              complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br />
+                              delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。
+                    `
+                  },
+                  {
+                    label: '类型',
+                    name: 'type',
+                    width: 180,
+                    rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
+                    xType: 'select',
+                    dic: [
+                      { label: '类', value: 'class' },
+                      { label: '表达式', value: 'expression' },
+                      { label: '委托表达式', value: 'delegateExpression' }
+                    ]
+                  },
+                  {
+                    label: 'java 类名',
+                    name: 'className',
+                    xType: 'input',
+                    rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
+                  },
+                  {
+                    xType: 'slot',
+                    label: '参数',
+                    width: 120,
+                    slot: true,
+                    name: 'params'
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.formData.taskListener = this.element.businessObject.extensionElements?.values
+      .filter(item => item.$type === 'flowable:TaskListener')
+      .map(item => {
+        let type
+        if ('class' in item) type = 'class'
+        if ('expression' in item) type = 'expression'
+        if ('delegateExpression' in item) type = 'delegateExpression'
+        return {
+          event: item.event,
+          type: type,
+          className: item[type],
+          params: item.fields?.map(field => {
+            let fieldType
+            if ('stringValue' in field) fieldType = 'stringValue'
+            if ('expression' in field) fieldType = 'expression'
+            return {
+              name: field.name,
+              type: fieldType,
+              value: field[fieldType]
+            }
+          }) ?? []
+        }
+      }) ?? []
+  },
+  methods: {
+    configParam(index) {
+      this.nowIndex = index
+      const nowObj = this.formData.taskListener[index]
+      if (!nowObj.params) {
+        nowObj.params = []
+      }
+      this.showParamDialog = true
+    },
+    finishConfigParam(param) {
+      this.showParamDialog = false
+      // hack 数量不更新问题
+      const cache = this.formData.taskListener[this.nowIndex]
+      cache.params = param
+      this.$set(this.formData.taskListener[this.nowIndex], this.nowIndex, cache)
+      this.nowIndex = null
+    },
+    updateElement() {
+      if (this.formData.taskListener?.length) {
+        let extensionElements = this.element.businessObject.get('extensionElements')
+        if (!extensionElements) {
+          extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
+        }
+        // 清除旧值
+        extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
+        this.formData.taskListener.forEach(item => {
+          const taskListener = this.modeler.get('moddle').create('flowable:TaskListener')
+          taskListener['event'] = item.event
+          taskListener[item.type] = item.className
+          if (item.params && item.params.length) {
+            item.params.forEach(field => {
+              const fieldElement = this.modeler.get('moddle').create('flowable:Field')
+              fieldElement['name'] = field.name
+              fieldElement[field.type] = field.value
+              // 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
+              // const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
+              // fieldElement[field.type] = valueElement
+              taskListener.get('fields').push(fieldElement)
+            })
+          }
+          extensionElements.get('values').push(taskListener)
+        })
+        this.updateProperties({ extensionElements: extensionElements })
+      } else {
+        const extensionElements = this.element.businessObject[`extensionElements`]
+        if (extensionElements) {
+          extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
+        }
+      }
+    },
+    closeDialog() {
+      this.$refs.xForm.validate().then(() => {
+        this.updateElement()
+        this.dialogVisible = false
+      }).catch(e => console.error(e))
+    }
+  }
+}
+</script>
+
+<style>
+.flow-containers  .el-badge__content.is-fixed {
+    top: 18px;
+}
+</style>

ruoyi-ui/src/components/Process/components/nodePanel/sequenceFlow.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <x-form ref="xForm" v-model="formData" :config="formConfig">
+      <template #executionListener>
+        <el-badge :value="executionListenerLength">
+          <el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
+        </el-badge>
+      </template>
+    </x-form>
+    <executionListenerDialog
+      v-if="dialogName === 'executionListenerDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishExecutionListener"
+    />
+  </div>
+</template>
+
+<script>
+import mixinPanel from '../../common/mixinPanel'
+import mixinExecutionListener from '../../common/mixinExecutionListener'
+import { commonParse, conditionExpressionParse } from '../../common/parseElement'
+export default {
+  mixins: [mixinPanel, mixinExecutionListener],
+  data() {
+    return {
+      formData: {}
+    }
+  },
+  computed: {
+    formConfig() {
+      return {
+        inline: false,
+        item: [
+          {
+            xType: 'input',
+            name: 'id',
+            label: '节点 id',
+            rules: [{ required: true, message: 'Id 不能为空' }]
+          },
+          {
+            xType: 'input',
+            name: 'name',
+            label: '节点名称'
+          },
+          {
+            xType: 'input',
+            name: 'documentation',
+            label: '节点描述'
+          },
+          {
+            xType: 'slot',
+            name: 'executionListener',
+            label: '执行监听器'
+          },
+          {
+            xType: 'input',
+            name: 'conditionExpression',
+            label: '跳转条件'
+          },
+          {
+            xType: 'input',
+            name: 'skipExpression',
+            label: '跳过表达式'
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    'formData.conditionExpression': function(val) {
+      if (val) {
+        const newCondition = this.modeler.get('moddle').create('bpmn:FormalExpression', { body: val })
+        this.updateProperties({ conditionExpression: newCondition })
+      } else {
+        this.updateProperties({ conditionExpression: null })
+      }
+    },
+    'formData.skipExpression': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:skipExpression': val })
+    }
+  },
+  created() {
+    let cache = commonParse(this.element)
+    cache = conditionExpressionParse(cache)
+    this.formData = cache
+  }
+}
+</script>
+
+<style></style>

ruoyi-ui/src/components/Process/components/nodePanel/startEnd.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <x-form ref="xForm" v-model="formData" :config="formConfig">
+      <template #executionListener>
+        <el-badge :value="executionListenerLength">
+          <el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
+        </el-badge>
+      </template>
+    </x-form>
+    <executionListenerDialog
+      v-if="dialogName === 'executionListenerDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishExecutionListener"
+    />
+  </div>
+</template>
+
+<script>
+import mixinPanel from '../../common/mixinPanel'
+import mixinExecutionListener from '../../common/mixinExecutionListener'
+import { commonParse } from '../../common/parseElement'
+export default {
+  mixins: [mixinPanel, mixinExecutionListener],
+  data() {
+    return {
+      formData: {}
+    }
+  },
+  computed: {
+    formConfig() {
+      const _this = this
+      return {
+        inline: false,
+        item: [
+          {
+            xType: 'input',
+            name: 'id',
+            label: '节点 id',
+            rules: [{ required: true, message: 'Id 不能为空' }]
+          },
+          {
+            xType: 'input',
+            name: 'name',
+            label: '节点名称'
+          },
+          {
+            xType: 'input',
+            name: 'documentation',
+            label: '节点描述'
+          },
+          {
+            xType: 'slot',
+            name: 'executionListener',
+            label: '执行监听器'
+          },
+          {
+            xType: 'input',
+            name: 'initiator',
+            label: '发起人',
+            show: !!_this.showConfig.initiator
+          },
+          {
+            xType: 'input',
+            name: 'formKey',
+            label: '表单标识key',
+            show: !!_this.showConfig.formKey
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    'formData.initiator': function(val) {
+      if (val === '') val = null
+      // 默认设置流程发起人
+      // if (val === '') val = 'INITIATOR'
+      this.updateProperties({ 'flowable:initiator': val })
+    },
+    'formData.formKey': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:formKey': val })
+    }
+  },
+  created() {
+    // this.updateProperties({ 'flowable:initiator': 'INITIATOR' })
+    this.formData = commonParse(this.element)
+  }
+}
+</script>
+
+<style>
+
+</style>

ruoyi-ui/src/components/Process/components/nodePanel/task.vue

@@ -0,0 +1,426 @@
+<template>
+  <div>
+    <x-form ref="xForm" v-model="formData" :config="formConfig">
+      <template #executionListener>
+        <el-badge :value="executionListenerLength">
+          <el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
+        </el-badge>
+      </template>
+      <template #taskListener>
+        <el-badge :value="taskListenerLength">
+          <el-button size="small" @click="dialogName = 'taskListenerDialog'">编辑</el-button>
+        </el-badge>
+      </template>
+      <template #multiInstance>
+        <el-badge :is-dot="hasMultiInstance">
+          <el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
+        </el-badge>
+      </template>
+    </x-form>
+    <executionListenerDialog
+      v-if="dialogName === 'executionListenerDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishExecutionListener"
+    />
+    <taskListenerDialog
+      v-if="dialogName === 'taskListenerDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishTaskListener"
+    />
+    <multiInstanceDialog
+      v-if="dialogName === 'multiInstanceDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishMultiInstance"
+    />
+  </div>
+</template>
+
+<script>
+import mixinPanel from '../../common/mixinPanel'
+import executionListenerDialog from './property/executionListener'
+import taskListenerDialog from './property/taskListener'
+import multiInstanceDialog from './property/multiInstance'
+import { commonParse, userTaskParse } from '../../common/parseElement'
+export default {
+  components: {
+    executionListenerDialog,
+    taskListenerDialog,
+    multiInstanceDialog
+  },
+  mixins: [mixinPanel],
+  props: {
+    users: {
+      type: Array,
+      required: true
+    },
+    groups: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      userTypeOption: [
+        { label: '指定人员', value: 'assignee' },
+        { label: '候选人员', value: 'candidateUsers' },
+        { label: '候选组', value: 'candidateGroups' }
+      ],
+      dataTypeOption: [
+        { label: '固定', value: 'fixed' },
+        { label: '动态', value: 'dynamic' }
+      ],
+      dialogName: '',
+      executionListenerLength: 0,
+      taskListenerLength: 0,
+      hasMultiInstance: false,
+      formData: {}
+    }
+  },
+  computed: {
+    formConfig() {
+      const _this = this
+      return {
+        inline: false,
+        item: [
+          {
+            xType: 'input',
+            name: 'id',
+            label: '节点 id',
+            rules: [{ required: true, message: 'Id 不能为空' }]
+          },
+          {
+            xType: 'input',
+            name: 'name',
+            label: '节点名称',
+            rules: [{ required: true, message: '节点名称不能为空' }]
+          },
+          {
+            xType: 'input',
+            name: 'documentation',
+            label: '节点描述'
+          },
+          {
+            xType: 'slot',
+            name: 'executionListener',
+            label: '执行监听器'
+          },
+          {
+            xType: 'slot',
+            name: 'taskListener',
+            label: '任务监听器',
+            show: !!_this.showConfig.taskListener
+          },
+          {
+            xType: 'select',
+            name: 'userType',
+            label: '人员类型',
+            dic: _this.userTypeOption,
+            show: !!_this.showConfig.userType
+          },
+          {
+            xType: 'radio',
+            name: 'dataType',
+            label: '指定方式',
+            dic: _this.dataTypeOption,
+            show: !!_this.showConfig.dataType,
+            rules: [{ required: true, message: '请指定方式' }]
+          },
+          // {
+          //   xType: 'input',
+          //   name: 'assigneeFixed',
+          //   label: '指定人(表达式)',
+          //   show: !!_this.showConfig.assigneeFixed && _this.formData.userType === 'assignee' && _this.formData.dataType === 'fixed'
+          // },
+          // {
+          //   xType: 'input',
+          //   name: 'candidateUsersFixed',
+          //   label: '候选人(表达式)',
+          //   show: !!_this.showConfig.candidateUsersFixed && _this.formData.userType === 'candidateUsers' && _this.formData.dataType === 'fixed'
+          // },
+          // {
+          //   xType: 'input',
+          //   name: 'candidateGroupsFixed',
+          //   label: '候选组(表达式)',
+          //   show: !!_this.showConfig.candidateGroupsFixed && _this.formData.userType === 'candidateGroups' && _this.formData.dataType === 'fixed'
+          // },
+          {
+            xType: 'select',
+            name: 'assignee',
+            label: '指定人员',
+            allowCreate: true,
+            filterable: true,
+            dic: { data: _this.users, label: 'nickName', value: 'userId' },
+            show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
+          },
+          {
+            xType: 'select',
+            name: 'candidateUsers',
+            label: '候选人员',
+            multiple: true,
+            allowCreate: true,
+            filterable: true,
+            dic: { data: _this.users, label: 'nickName', value: 'userId' },
+            show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
+          },
+          {
+            xType: 'select',
+            name: 'candidateGroups',
+            label: '候选组',
+            multiple: true,
+            allowCreate: true,
+            filterable: true,
+            dic: { data: _this.groups, label: 'roleName', value: 'roleId' },
+            show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
+          },
+          {
+            xType: 'slot',
+            name: 'multiInstance',
+            label: '多实例'
+          },
+          {
+            xType: 'switch',
+            name: 'async',
+            label: '异步',
+            activeText: '是',
+            inactiveText: '否',
+            show: !!_this.showConfig.async
+          },
+          {
+            xType: 'input',
+            name: 'priority',
+            label: '优先级',
+            show: !!_this.showConfig.priority
+          },
+          {
+            xType: 'input',
+            name: 'formKey',
+            label: '表单标识key',
+            show: !!_this.showConfig.formKey
+          },
+          {
+            xType: 'input',
+            name: 'skipExpression',
+            label: '跳过表达式',
+            show: !!_this.showConfig.skipExpression
+          },
+          {
+            xType: 'switch',
+            name: 'isForCompensation',
+            label: '是否为补偿',
+            activeText: '是',
+            inactiveText: '否',
+            show: !!_this.showConfig.isForCompensation
+          },
+          {
+            xType: 'switch',
+            name: 'triggerable',
+            label: '服务任务可触发',
+            activeText: '是',
+            inactiveText: '否',
+            show: !!_this.showConfig.triggerable
+          },
+          {
+            xType: 'switch',
+            name: 'autoStoreVariables',
+            label: '自动存储变量',
+            activeText: '是',
+            inactiveText: '否',
+            show: !!_this.showConfig.autoStoreVariables
+          },
+          {
+            xType: 'input',
+            name: 'ruleVariablesInput',
+            label: '输入变量',
+            show: !!_this.showConfig.ruleVariablesInput
+          },
+          {
+            xType: 'input',
+            name: 'rules',
+            label: '规则',
+            show: !!_this.showConfig.rules
+          },
+          {
+            xType: 'input',
+            name: 'resultVariable',
+            label: '结果变量',
+            show: !!_this.showConfig.resultVariable
+          },
+          {
+            xType: 'switch',
+            name: 'exclude',
+            label: '排除',
+            activeText: '是',
+            inactiveText: '否',
+            show: !!_this.showConfig.exclude
+          },
+          {
+            xType: 'input',
+            name: 'class',
+            label: '类',
+            show: !!_this.showConfig.class
+          },
+          {
+            xType: 'datePicker',
+            type: 'datetime',
+            name: 'dueDate',
+            label: '到期时间',
+            show: !!_this.showConfig.dueDate
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    'formData.userType': function(val, oldVal) {
+      if (oldVal) {
+        const types = ['assignee', 'candidateUsers', 'candidateGroups']
+        types.forEach(type => {
+          delete this.element.businessObject.$attrs[`flowable:${type}`]
+          delete this.formData[type]
+        })
+      }
+    },
+    // 动态选择流程执行人
+    'formData.dataType': function(val) {
+      const that = this
+      this.updateProperties({'flowable:dataType': val})
+      if (val === 'dynamic') {
+        this.updateProperties({'flowable:userType': that.formData.userType})
+      }
+      // 切换时 删除之前选中的值
+      const types = ['assignee', 'candidateUsers', 'candidateGroups']
+      types.forEach(type => {
+        delete this.element.businessObject.$attrs[`flowable:${type}`]
+        delete this.formData[type]
+      })
+      // 传值到父组件
+      const params = {
+        dataType: val,
+        userType: this.formData.userType
+      }
+      this.$emit('dataType', params)
+    },
+    'formData.assignee': function(val) {
+        if (this.formData.userType !== 'assignee') {
+          delete this.element.businessObject.$attrs[`flowable:assignee`]
+          return
+        }
+        this.updateProperties({'flowable:assignee': val})
+    },
+    'formData.candidateUsers': function(val) {
+        if (this.formData.userType !== 'candidateUsers') {
+          delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
+          return
+        }
+        this.updateProperties({'flowable:candidateUsers': val?.join(',')})
+    },
+    'formData.candidateGroups': function(val) {
+        if (this.formData.userType !== 'candidateGroups') {
+          delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
+          return
+        }
+        this.updateProperties({'flowable:candidateGroups': val?.join(',')})
+    },
+    'formData.async': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:async': val })
+    },
+    'formData.dueDate': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:dueDate': val })
+    },
+    'formData.formKey': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:formKey': val })
+    },
+    'formData.priority': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:priority': val })
+    },
+    'formData.skipExpression': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:skipExpression': val })
+    },
+    'formData.isForCompensation': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'isForCompensation': val })
+    },
+    'formData.triggerable': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:triggerable': val })
+    },
+    'formData.class': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:class': val })
+    },
+    'formData.autoStoreVariables': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:autoStoreVariables': val })
+    },
+    'formData.exclude': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:exclude': val })
+    },
+    'formData.ruleVariablesInput': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:ruleVariablesInput': val })
+    },
+    'formData.rules': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:rules': val })
+    },
+    'formData.resultVariable': function(val) {
+      if (val === '') val = null
+      this.updateProperties({ 'flowable:resultVariable': val })
+    }
+  },
+  created() {
+    let cache = commonParse(this.element)
+    cache = userTaskParse(cache)
+    this.formData = cache
+    this.computedExecutionListenerLength()
+    this.computedTaskListenerLength()
+    this.computedHasMultiInstance()
+  },
+  methods: {
+    computedExecutionListenerLength() {
+      this.executionListenerLength = this.element.businessObject.extensionElements?.values
+        ?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
+    },
+    computedTaskListenerLength() {
+      this.taskListenerLength = this.element.businessObject.extensionElements?.values
+        ?.filter(item => item.$type === 'flowable:TaskListener').length ?? 0
+    },
+    computedHasMultiInstance() {
+      if (this.element.businessObject.loopCharacteristics) {
+        this.hasMultiInstance = true
+      } else {
+        this.hasMultiInstance = false
+      }
+    },
+    finishExecutionListener() {
+      if (this.dialogName === 'executionListenerDialog') {
+        this.computedExecutionListenerLength()
+      }
+      this.dialogName = ''
+    },
+    finishTaskListener() {
+      if (this.dialogName === 'taskListenerDialog') {
+        this.computedTaskListenerLength()
+      }
+      this.dialogName = ''
+    },
+    finishMultiInstance() {
+      if (this.dialogName === 'multiInstanceDialog') {
+        this.computedHasMultiInstance()
+      }
+      this.dialogName = ''
+    }
+  }
+}
+</script>
+
+<style></style>

ruoyi-ui/src/components/Process/flowable/init.js

@@ -0,0 +1,24 @@
+
+function randomStr() {
+  return Math.random().toString(36).slice(-8)
+}
+
+export default function() {
+  return `<?xml version="1.0" encoding="UTF-8"?>
+    <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
+      <process id="process_${randomStr()}" name="name_${randomStr()}">
+        <startEvent id="startNode1" name="开始" />
+      </process>
+      <bpmndi:BPMNDiagram id="BPMNDiagram_flow">
+        <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
+          <bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke="">
+            <omgdc:Bounds x="240" y="200" width="30" height="30" />
+            <bpmndi:BPMNLabel>
+              <omgdc:Bounds x="242" y="237" width="23" height="14" />
+            </bpmndi:BPMNLabel>
+          </bpmndi:BPMNShape>
+        </bpmndi:BPMNPlane>
+      </bpmndi:BPMNDiagram>
+    </definitions>
+    `
+}

ruoyi-ui/src/components/Process/flowable/showConfig.js

@@ -0,0 +1,55 @@
+export default {
+  'bpmn:EndEvent': {},
+  'bpmn:StartEvent': {
+    initiator: true,
+    formKey: true
+  },
+  'bpmn:UserTask': {
+    userType: true,
+    dataType: true,
+    assignee: true,
+    candidateUsers: true,
+    candidateGroups: true,
+    // assigneeFixed: true,
+    // candidateUsersFixed: true,
+    // candidateGroupsFixed: true,
+    async: true,
+    priority: true,
+    formKey: true,
+    skipExpression: true,
+    dueDate: true,
+    taskListener: true
+  },
+  'bpmn:ServiceTask': {
+    async: true,
+    skipExpression: true,
+    isForCompensation: true,
+    triggerable: true,
+    class: true
+  },
+  'bpmn:ScriptTask': {
+    async: true,
+    isForCompensation: true,
+    autoStoreVariables: true
+  },
+  'bpmn:ManualTask': {
+    async: true,
+    isForCompensation: true
+  },
+  'bpmn:ReceiveTask': {
+    async: true,
+    isForCompensation: true
+  },
+  'bpmn:SendTask': {
+    async: true,
+    isForCompensation: true
+  },
+  'bpmn:BusinessRuleTask': {
+    async: true,
+    isForCompensation: true,
+    ruleVariablesInput: true,
+    rules: true,
+    resultVariable: true,
+    exclude: true
+  }
+}

ruoyi-ui/src/components/Process/index.js

@@ -0,0 +1,5 @@
+import workflowBpmnModeler from './index.vue'
+
+workflowBpmnModeler.install = Vue => Vue.component(workflowBpmnModeler.name, workflowBpmnModeler) // 给组件配置install方法
+
+export default workflowBpmnModeler

ruoyi-ui/src/components/Process/index.vue

@@ -0,0 +1,463 @@
+<template>
+  <div v-loading="isView" class="flow-containers" :class="{ 'view-mode': isView }">
+    <el-container style="height: 100%">
+      <el-header style="border-bottom: 1px solid rgb(218 218 218);height: auto;">
+        <div style="display: flex; padding: 10px 0px; justify-content: space-between;">
+          <div>
+            <el-upload action="" :before-upload="openBpmn" style="margin-right: 10px; display:inline-block;">
+              <el-tooltip effect="dark" content="加载xml" placement="bottom">
+                <el-button size="mini" icon="el-icon-folder-opened" />
+              </el-tooltip>
+            </el-upload>
+            <el-tooltip effect="dark" content="新建" placement="bottom">
+              <el-button size="mini" icon="el-icon-circle-plus" @click="newDiagram" />
+            </el-tooltip>
+            <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
+              <el-button size="mini" icon="el-icon-rank" @click="fitViewport" />
+            </el-tooltip>
+            <el-tooltip effect="dark" content="放大" placement="bottom">
+              <el-button size="mini" icon="el-icon-zoom-in" @click="zoomViewport(true)" />
+            </el-tooltip>
+            <el-tooltip effect="dark" content="缩小" placement="bottom">
+              <el-button size="mini" icon="el-icon-zoom-out" @click="zoomViewport(false)" />
+            </el-tooltip>
+            <el-tooltip effect="dark" content="后退" placement="bottom">
+              <el-button size="mini" icon="el-icon-back" @click="modeler.get('commandStack').undo()" />
+            </el-tooltip>
+            <el-tooltip effect="dark" content="前进" placement="bottom">
+              <el-button size="mini" icon="el-icon-right" @click="modeler.get('commandStack').redo()" />
+            </el-tooltip>
+          </div>
+          <div>
+            <el-button size="mini" icon="el-icon-view" @click="showXML">查看xml</el-button>
+            <el-button size="mini" icon="el-icon-download" @click="saveXML(true)">下载xml</el-button>
+            <el-button size="mini" icon="el-icon-picture" @click="saveImg('svg', true)">下载svg</el-button>
+            <el-button size="mini" type="primary" @click="save">保存模型</el-button>
+          </div>
+        </div>
+      </el-header>
+      <el-container style="align-items: stretch">
+        <el-main style="padding: 0;">
+          <div ref="canvas" class="canvas" />
+        </el-main>
+        <el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5">
+          <panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" @dataType="dataType" />
+        </el-aside>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+// 汉化
+import customTranslate from './common/customTranslate'
+import Modeler from 'bpmn-js/lib/Modeler'
+import panel from './PropertyPanel'
+import BpmData from './BpmData'
+import getInitStr from './flowable/init'
+// 引入flowable的节点文件
+import flowableModdle from './flowable/flowable.json'
+export default {
+  name: 'WorkflowBpmnModeler',
+  components: {
+    panel
+  },
+  props: {
+    xml: {
+      type: String,
+      default: ''
+    },
+    users: {
+      type: Array,
+      default: () => []
+    },
+    groups: {
+      type: Array,
+      default: () => []
+    },
+    categorys: {
+      type: Array,
+      default: () => []
+    },
+    isView: {
+      type: Boolean,
+      default: false
+    },
+    taskList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      modeler: null,
+      // taskList: [],
+      zoom: 1
+    }
+  },
+  watch: {
+    xml: function(val) {
+      if (val) {
+        this.createNewDiagram(val)
+      }
+    }
+  },
+  mounted() {
+    // 生成实例
+    this.modeler = new Modeler({
+      container: this.$refs.canvas,
+      additionalModules: [
+        {
+          translate: ['value', customTranslate]
+        }
+      ],
+      moddleExtensions: {
+        flowable: flowableModdle
+      }
+    })
+    // 新增流程定义
+    if (!this.xml) {
+      this.newDiagram()
+    } else {
+      this.createNewDiagram(this.xml)
+    }
+  },
+  methods: {
+    newDiagram() {
+      this.createNewDiagram(getInitStr())
+    },
+    // 让图能自适应屏幕
+    fitViewport() {
+      this.zoom = this.modeler.get('canvas').zoom('fit-viewport')
+      const bbox = document.querySelector('.flow-containers .viewport').getBBox()
+      const currentViewbox = this.modeler.get('canvas').viewbox()
+      const elementMid = {
+        x: bbox.x + bbox.width / 2 - 65,
+        y: bbox.y + bbox.height / 2
+      }
+      this.modeler.get('canvas').viewbox({
+        x: elementMid.x - currentViewbox.width / 2,
+        y: elementMid.y - currentViewbox.height / 2,
+        width: currentViewbox.width,
+        height: currentViewbox.height
+      })
+      this.zoom = bbox.width / currentViewbox.width * 1.8
+    },
+    // 放大缩小
+    zoomViewport(zoomIn = true) {
+      this.zoom = this.modeler.get('canvas').zoom()
+      this.zoom += (zoomIn ? 0.1 : -0.1)
+      this.modeler.get('canvas').zoom(this.zoom)
+    },
+    async createNewDiagram(data) {
+      // 将字符串转换成图显示出来
+      // data = data.replace(/<!\[CDATA\[(.+?)]]>/g, '&lt;![CDATA[$1]]&gt;')
+      data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function(match, str) {
+        return str.replace(/</g, '&lt;')
+      })
+      try {
+        await this.modeler.importXML(data)
+        this.adjustPalette()
+        this.fitViewport()
+        if (this.taskList !==undefined && this.taskList.length > 0 ) {
+          this.fillColor()
+        }
+      } catch (err) {
+        console.error(err.message, err.warnings)
+      }
+    },
+    // 调整左侧工具栏排版
+    adjustPalette() {
+      try {
+        // 获取 bpmn 设计器实例
+        const canvas = this.$refs.canvas
+        const djsPalette = canvas.children[0].children[1].children[4]
+        const djsPalStyle = {
+          width: '130px',
+          padding: '5px',
+          background: 'white',
+          left: '20px',
+          borderRadius: 0
+        }
+        for (var key in djsPalStyle) {
+          djsPalette.style[key] = djsPalStyle[key]
+        }
+        const palette = djsPalette.children[0]
+        const allGroups = palette.children
+        allGroups[0].style['display'] = 'none'
+        // 修改控件样式
+        for (var gKey in allGroups) {
+          const group = allGroups[gKey]
+          for (var cKey in group.children) {
+            const control = group.children[cKey]
+            const controlStyle = {
+              display: 'flex',
+              justifyContent: 'flex-start',
+              alignItems: 'center',
+              width: '100%',
+              padding: '5px'
+            }
+            if (
+              control.className &&
+              control.dataset &&
+              control.className.indexOf('entry') !== -1
+            ) {
+              const controlProps = new BpmData().getControl(
+                control.dataset.action
+              )
+              control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${
+                controlProps['title']
+              }</div>`
+              for (var csKey in controlStyle) {
+                control.style[csKey] = controlStyle[csKey]
+              }
+            }
+          }
+        }
+      } catch (e) {
+        console.log(e)
+      }
+    },
+    fillColor() {
+      const canvas = this.modeler.get('canvas')
+      this.modeler._definitions.rootElements[0].flowElements.forEach(n => {
+        const completeTask = this.taskList.find(m => m.key === n.id)
+        const todoTask = this.taskList.find(m => !m.completed)
+        const endTask = this.taskList[this.taskList.length - 1]
+        if (n.$type === 'bpmn:UserTask') {
+          if (completeTask) {
+            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+            n.outgoing?.forEach(nn => {
+              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              if (targetTask) {
+                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
+                  canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
+                  canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
+                }else {
+                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+                }
+              }
+            })
+          }
+        }
+        // 排他网关
+        else if (n.$type === 'bpmn:ExclusiveGateway') {
+          if (completeTask) {
+            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+            n.outgoing?.forEach(nn => {
+              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              if (targetTask) {
+
+                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+              }
+
+            })
+          }
+
+        }
+        // 并行网关
+        else if (n.$type === 'bpmn:ParallelGateway') {
+          if (completeTask) {
+            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
+            n.outgoing?.forEach(nn => {
+              debugger
+              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
+              if (targetTask) {
+                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
+              }
+            })
+          }
+        }
+        else if (n.$type === 'bpmn:StartEvent') {
+          n.outgoing.forEach(nn => {
+            const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
+            if (completeTask) {
+              canvas.addMarker(nn.id, 'highlight')
+              canvas.addMarker(n.id, 'highlight')
+              return
+            }
+          })
+        }
+        else if (n.$type === 'bpmn:EndEvent') {
+          if (endTask.key === n.id && endTask.completed) {
+            canvas.addMarker(n.id, 'highlight')
+            return
+          }
+        }
+      })
+    },
+    // 对外 api
+    getProcess() {
+      const element = this.getProcessElement()
+      return {
+        id: element.id,
+        name: element.name,
+        category: element.$attrs['flowable:processCategory']
+      }
+    },
+    getProcessElement() {
+      const rootElements = this.modeler.getDefinitions().rootElements
+      for (let i = 0; i < rootElements.length; i++) {
+        if (rootElements[i].$type === 'bpmn:Process') return rootElements[i]
+      }
+    },
+    async saveXML(download = false) {
+      try {
+        const { xml } = await this.modeler.saveXML({ format: true })
+        if (download) {
+          this.downloadFile(`${this.getProcessElement().name}.bpmn20.xml`, xml, 'application/xml')
+        }
+        return xml
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    async showXML() {
+      try {
+        const { xml } = await this.modeler.saveXML({ format: true })
+        debugger
+        this.$emit('showXML',xml)
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    async saveImg(type = 'svg', download = false) {
+      try {
+        const { svg } = await this.modeler.saveSVG({ format: true })
+        if (download) {
+          this.downloadFile(this.getProcessElement().name, svg, 'image/svg+xml')
+        }
+        return svg
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    async save() {
+      const process = this.getProcess()
+      const xml = await this.saveXML()
+      const svg = await this.saveImg()
+      const result = { process, xml, svg }
+      this.$emit('save', result)
+      window.parent.postMessage(result, '*')
+    },
+    openBpmn(file) {
+      const reader = new FileReader()
+      reader.readAsText(file, 'utf-8')
+      reader.onload = () => {
+        this.createNewDiagram(reader.result)
+      }
+      return false
+    },
+    downloadFile(filename, data, type) {
+      var a = document.createElement('a')
+      var url = window.URL.createObjectURL(new Blob([data], { type: type }))
+      a.href = url
+      a.download = filename
+      a.click()
+      window.URL.revokeObjectURL(url)
+    },
+    /** 获取数据类型 */
+    dataType(data){
+      this.$emit('dataType', data)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/*左边工具栏以及编辑节点的样式*/
+@import "~bpmn-js/dist/assets/diagram-js.css";
+@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
+@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
+@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
+.view-mode {
+  .el-header, .el-aside, .djs-palette, .bjs-powered-by {
+    display: none;
+  }
+  .el-loading-mask {
+    background-color: initial;
+  }
+  .el-loading-spinner {
+    display: none;
+  }
+}
+.flow-containers {
+  // background-color: #ffffff;
+  width: 100%;
+  height: 100%;
+  .canvas {
+    width: 100%;
+    height: 100%;
+  }
+  .panel {
+    position: absolute;
+    right: 0;
+    top: 50px;
+    width: 300px;
+  }
+  .load {
+    margin-right: 10px;
+  }
+  .el-form-item__label{
+    font-size: 13px;
+  }
+
+  .djs-palette{
+    left: 0px!important;
+    top: 0px;
+    border-top: none;
+  }
+
+  .djs-container svg {
+    min-height: 650px;
+  }
+
+   .highlight.djs-shape .djs-visual > :nth-child(1) {
+     fill: green !important;
+     stroke: green !important;
+     fill-opacity: 0.2 !important;
+   }
+   .highlight.djs-shape .djs-visual > :nth-child(2) {
+     fill: green !important;
+   }
+   .highlight.djs-shape .djs-visual > path {
+     fill: green !important;
+     fill-opacity: 0.2 !important;
+     stroke: green !important;
+   }
+   .highlight.djs-connection > .djs-visual > path {
+     stroke: green !important;
+   }
+   // .djs-connection > .djs-visual > path {
+   //   stroke: orange !important;
+   //   stroke-dasharray: 4px !important;
+   //   fill-opacity: 0.2 !important;
+   // }
+   // .djs-shape .djs-visual > :nth-child(1) {
+   //   fill: orange !important;
+   //   stroke: orange !important;
+   //   stroke-dasharray: 4px !important;
+   //   fill-opacity: 0.2 !important;
+   // }
+   .highlight-todo.djs-connection > .djs-visual > path {
+     stroke: orange !important;
+     stroke-dasharray: 4px !important;
+     fill-opacity: 0.2 !important;
+   }
+   .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
+     fill: orange !important;
+     stroke: orange !important;
+     stroke-dasharray: 4px !important;
+     fill-opacity: 0.2 !important;
+   }
+   .overlays-div {
+     font-size: 10px;
+     color: red;
+     width: 100px;
+     top: -20px !important;
+   }
+}
+</style>

ruoyi-ui/src/components/Process/lang/zh.js

@@ -0,0 +1,227 @@
+export default {
+  // Labels
+  'Activate the global connect tool': '激活全局连接工具',
+  'Append {type}': '添加 {type}',
+  'Add Lane above': '在上面添加道',
+  'Divide into two Lanes': '分割成两个道',
+  'Divide into three Lanes': '分割成三个道',
+  'Add Lane below': '在下面添加道',
+  'Append compensation activity': '追加补偿活动',
+  'Change type': '修改类型',
+  'Connect using Association': '使用关联连接',
+  'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
+  'Connect using DataInputAssociation': '使用数据输入关联连接',
+  'Remove': '移除',
+  'Activate the hand tool': '激活抓手工具',
+  'Activate the lasso tool': '激活套索工具',
+  'Activate the create/remove space tool': '激活创建/删除空间工具',
+  'Create expanded SubProcess': '创建扩展子过程',
+  'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
+  'Create Pool/Participant': '创建池/参与者',
+  'Parallel Multi Instance': '并行多重事件',
+  'Sequential Multi Instance': '时序多重事件',
+  'DataObjectReference': '数据对象参考',
+  'DataStoreReference': '数据存储参考',
+  'Loop': '循环',
+  'Ad-hoc': '即席',
+  'Create {type}': '创建 {type}',
+  'Task': '任务',
+  'Send Task': '发送任务',
+  'Receive Task': '接收任务',
+  'User Task': '用户任务',
+  'Manual Task': '手工任务',
+  'Business Rule Task': '业务规则任务',
+  'Service Task': '服务任务',
+  'Script Task': '脚本任务',
+  'Call Activity': '调用活动',
+  'Sub Process (collapsed)': '子流程（折叠的）',
+  'Sub Process (expanded)': '子流程（展开的）',
+  'Start Event': '开始事件',
+  'StartEvent': '开始事件',
+  'Intermediate Throw Event': '中间事件',
+  'End Event': '结束事件',
+  'EndEvent': '结束事件',
+  'Create Gateway': '创建网关',
+  'Create Intermediate/Boundary Event': '创建中间/边界事件',
+  'Message Start Event': '消息开始事件',
+  'Timer Start Event': '定时开始事件',
+  'Conditional Start Event': '条件开始事件',
+  'Signal Start Event': '信号开始事件',
+  'Error Start Event': '错误开始事件',
+  'Escalation Start Event': '升级开始事件',
+  'Compensation Start Event': '补偿开始事件',
+  'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
+  'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
+  'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
+  'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
+  'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
+  'Message Intermediate Catch Event': '消息中间捕获事件',
+  'Message Intermediate Throw Event': '消息中间抛出事件',
+  'Timer Intermediate Catch Event': '定时中间捕获事件',
+  'Escalation Intermediate Throw Event': '升级中间抛出事件',
+  'Conditional Intermediate Catch Event': '条件中间捕获事件',
+  'Link Intermediate Catch Event': '链接中间捕获事件',
+  'Link Intermediate Throw Event': '链接中间抛出事件',
+  'Compensation Intermediate Throw Event': '补偿中间抛出事件',
+  'Signal Intermediate Catch Event': '信号中间捕获事件',
+  'Signal Intermediate Throw Event': '信号中间抛出事件',
+  'Message End Event': '消息结束事件',
+  'Escalation End Event': '定时结束事件',
+  'Error End Event': '错误结束事件',
+  'Cancel End Event': '取消结束事件',
+  'Compensation End Event': '补偿结束事件',
+  'Signal End Event': '信号结束事件',
+  'Terminate End Event': '终止结束事件',
+  'Message Boundary Event': '消息边界事件',
+  'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
+  'Timer Boundary Event': '定时边界事件',
+  'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
+  'Escalation Boundary Event': '升级边界事件',
+  'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
+  'Conditional Boundary Event': '条件边界事件',
+  'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
+  'Error Boundary Event': '错误边界事件',
+  'Cancel Boundary Event': '取消边界事件',
+  'Signal Boundary Event': '信号边界事件',
+  'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
+  'Compensation Boundary Event': '补偿边界事件',
+  'Exclusive Gateway': '互斥网关',
+  'Parallel Gateway': '并行网关',
+  'Inclusive Gateway': '相容网关',
+  'Complex Gateway': '复杂网关',
+  'Event based Gateway': '事件网关',
+  'Transaction': '转运',
+  'Sub Process': '子流程',
+  'Event Sub Process': '事件子流程',
+  'Collapsed Pool': '折叠池',
+  'Expanded Pool': '展开池',
+  // Errors
+  'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
+  'no shape type specified': '没有指定的形状类型',
+  'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
+  'out of bounds release': 'out of bounds release',
+  'more than {count} child lanes': '子道大于{count} ',
+  'element required': '元素不能为空',
+  'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
+  'no diagram to display': '没有可展示的流程图',
+  'no process or collaboration to display': '没有可展示的流程/协作',
+  'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制',
+  'already rendered {element}': '{element} 已被渲染',
+  'failed to import {element}': '导入{element}失败',
+  // 属性面板的参数
+  'Id': '标识',
+  'Name': '名称',
+  'General': '常规',
+  'Details': '详情',
+  'Message Name': '消息名称',
+  'Message': '消息',
+  'Initiator': '创建者',
+  'Asynchronous Continuations': '持续异步',
+  'Asynchronous Before': '异步前',
+  'Asynchronous After': '异步后',
+  'Job Configuration': '工作配置',
+  'Exclusive': '排除',
+  'Job Priority': '工作优先级',
+  'Retry Time Cycle': '重试时间周期',
+  'Documentation': '文档',
+  'Element Documentation': '元素文档',
+  'History Configuration': '历史配置',
+  'History Time To Live': '历史的生存时间',
+  'Forms': '表单',
+  'Form Key': '表单key',
+  'Form Fields': '表单字段',
+  'Business Key': '业务key',
+  'Form Field': '表单字段',
+  'ID': '编号',
+  'Type': '类型',
+  'Label': '名称',
+  'Default Value': '默认值',
+  'Validation': '校验',
+  'Add Constraint': '添加约束',
+  'Config': '配置',
+  'Properties': '属性',
+  'Add Property': '添加属性',
+  'Value': '值',
+  'Listeners': '监听器',
+  'Execution Listener': '执行监听',
+  'Event Type': '事件类型',
+  'Listener Type': '监听器类型',
+  'Java Class': 'Java类',
+  'Expression': '表达式',
+  'Must provide a value': '必须提供一个值',
+  'Delegate Expression': '代理表达式',
+  'Script': '脚本',
+  'Script Format': '脚本格式',
+  'Script Type': '脚本类型',
+  'Inline Script': '内联脚本',
+  'External Script': '外部脚本',
+  'Resource': '资源',
+  'Field Injection': '字段注入',
+  'Extensions': '扩展',
+  'Input/Output': '输入/输出',
+  'Input Parameters': '输入参数',
+  'Output Parameters': '输出参数',
+  'Parameters': '参数',
+  'Output Parameter': '输出参数',
+  'Timer Definition Type': '定时器定义类型',
+  'Timer Definition': '定时器定义',
+  'Date': '日期',
+  'Duration': '持续',
+  'Cycle': '循环',
+  'Signal': '信号',
+  'Signal Name': '信号名称',
+  'Escalation': '升级',
+  'Error': '错误',
+  'Link Name': '链接名称',
+  'Condition': '条件名称',
+  'Variable Name': '变量名称',
+  'Variable Event': '变量事件',
+  'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开',
+  'Wait for Completion': '等待完成',
+  'Activity Ref': '活动参考',
+  'Version Tag': '版本标签',
+  'Executable': '可执行文件',
+  'External Task Configuration': '扩展任务配置',
+  'Task Priority': '任务优先级',
+  'External': '外部',
+  'Connector': '连接器',
+  'Must configure Connector': '必须配置连接器',
+  'Connector Id': '连接器编号',
+  'Implementation': '实现方式',
+  'Field Injections': '字段注入',
+  'Fields': '字段',
+  'Result Variable': '结果变量',
+  'Topic': '主题',
+  'Configure Connector': '配置连接器',
+  'Input Parameter': '输入参数',
+  'Assignee': '代理人',
+  'Candidate Users': '候选用户',
+  'Candidate Groups': '候选组',
+  'Due Date': '到期时间',
+  'Follow Up Date': '跟踪日期',
+  'Priority': '优先级',
+  'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+  'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+  'Variables': '变量'
+}
+
+export const NodeName = {
+  'bpmn:Process': '流程',
+  'bpmn:StartEvent': '开始事件',
+  'bpmn:IntermediateThrowEvent': '中间事件',
+  'bpmn:Task': '任务',
+  'bpmn:SendTask': '发送任务',
+  'bpmn:ReceiveTask': '接收任务',
+  'bpmn:UserTask': '用户任务',
+  'bpmn:ManualTask': '手工任务',
+  'bpmn:BusinessRuleTask': '业务规则任务',
+  'bpmn:ServiceTask': '服务任务',
+  'bpmn:ScriptTask': '脚本任务',
+  'bpmn:EndEvent': '结束事件',
+  'bpmn:SequenceFlow': '流程线',
+  'bpmn:ExclusiveGateway': '互斥网关',
+  'bpmn:ParallelGateway': '并行网关',
+  'bpmn:InclusiveGateway': '相容网关',
+  'bpmn:ComplexGateway': '复杂网关',
+  'bpmn:EventBasedGateway': '事件网关'
+}

ruoyi-ui/src/components/customBpmn/index.js

@@ -0,0 +1,12 @@
+import inherits from "inherits";
+import Viewer from "bpmn-js/lib/Viewer";
+import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";
+import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
+function CustomViewer(options) {
+  Viewer.call(this, options);
+}
+inherits(CustomViewer, Viewer);
+CustomViewer.prototype._modules = [].concat(Viewer.prototype._modules, [ZoomScrollModule, MoveCanvasModule]);
+export {
+  CustomViewer
+};

ruoyi-ui/src/components/parser/Parser.vue

@@ -0,0 +1,197 @@
+<script>
+import { deepClone } from '@/utils/index'
+import render from '@/components/render/render.js'
+
+const ruleTrigger = {
+  'el-input': 'blur',
+  'el-input-number': 'blur',
+  'el-select': 'change',
+  'el-radio-group': 'change',
+  'el-checkbox-group': 'change',
+  'el-cascader': 'change',
+  'el-time-picker': 'change',
+  'el-date-picker': 'change',
+  'el-rate': 'change'
+}
+
+const layouts = {
+  colFormItem(h, scheme) {
+    const config = scheme.__config__
+    const listeners = buildListeners.call(this, scheme)
+
+    let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
+    if (config.showLabel === false) labelWidth = '0'
+    return (
+      <el-col span={config.span}>
+        <el-form-item label-width={labelWidth} prop={scheme.__vModel__}
+          label={config.showLabel ? config.label : ''}>
+          <render conf={scheme} on={listeners} />
+        </el-form-item>
+      </el-col>
+    )
+  },
+  rowFormItem(h, scheme) {
+    let child = renderChildren.apply(this, arguments)
+    if (scheme.type === 'flex') {
+      child = <el-row type={scheme.type} justify={scheme.justify} align={scheme.align}>
+              {child}
+            </el-row>
+    }
+    return (
+      <el-col span={scheme.span}>
+        <el-row gutter={scheme.gutter}>
+          {child}
+        </el-row>
+      </el-col>
+    )
+  }
+}
+
+function renderFrom(h) {
+  const { formConfCopy } = this
+
+  return (
+    <el-row gutter={formConfCopy.gutter}>
+      <el-form
+        size={formConfCopy.size}
+        label-position={formConfCopy.labelPosition}
+        disabled={formConfCopy.disabled}
+        label-width={`${formConfCopy.labelWidth}px`}
+        ref={formConfCopy.formRef}
+        // model不能直接赋值 https://github.com/vuejs/jsx/issues/49#issuecomment-472013664
+        props={{ model: this[formConfCopy.formModel] }}
+        rules={this[formConfCopy.formRules]}
+      >
+        {renderFormItem.call(this, h, formConfCopy.fields)}
+        {formConfCopy.formBtns && formBtns.call(this, h)}
+      </el-form>
+    </el-row>
+  )
+}
+
+function formBtns(h) {
+  return <el-col>
+    <el-form-item size="large">
+      <el-button type="primary" onClick={this.submitForm}>提交</el-button>
+      <el-button onClick={this.resetForm}>重置</el-button>
+    </el-form-item>
+  </el-col>
+}
+
+function renderFormItem(h, elementList) {
+  return elementList.map(scheme => {
+    const config = scheme.__config__
+    const layout = layouts[config.layout]
+
+    if (layout) {
+      return layout.call(this, h, scheme)
+    }
+    throw new Error(`没有与${config.layout}匹配的layout`)
+  })
+}
+
+function renderChildren(h, scheme) {
+  const config = scheme.__config__
+  if (!Array.isArray(config.children)) return null
+  return renderFormItem.call(this, h, config.children)
+}
+
+function setValue(event, config, scheme) {
+  this.$set(config, 'defaultValue', event)
+  this.$set(this[this.formConf.formModel], scheme.__vModel__, event)
+}
+
+function buildListeners(scheme) {
+  const config = scheme.__config__
+  const methods = this.formConf.__methods__ || {}
+  const listeners = {}
+
+  // 给__methods__中的方法绑定this和event
+  Object.keys(methods).forEach(key => {
+    listeners[key] = event => methods[key].call(this, event)
+  })
+  // 响应 render.js 中的 vModel $emit('input', val)
+  listeners.input = event => setValue.call(this, event, config, scheme)
+
+  return listeners
+}
+
+export default {
+  components: {
+    render
+  },
+  props: {
+    formConf: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    const data = {
+      formConfCopy: deepClone(this.formConf),
+      [this.formConf.formModel]: {},
+      [this.formConf.formRules]: {}
+    }
+    this.initFormData(data.formConfCopy.fields, data[this.formConf.formModel])
+    this.buildRules(data.formConfCopy.fields, data[this.formConf.formRules])
+    return data
+  },
+  methods: {
+    initFormData(componentList, formData) {
+      componentList.forEach(cur => {
+        const config = cur.__config__
+        if (cur.__vModel__) formData[cur.__vModel__] = config.defaultValue
+        if (config.children) this.initFormData(config.children, formData)
+      })
+    },
+    buildRules(componentList, rules) {
+      componentList.forEach(cur => {
+        const config = cur.__config__
+        if (Array.isArray(config.regList)) {
+          if (config.required) {
+            const required = { required: config.required, message: cur.placeholder }
+            if (Array.isArray(config.defaultValue)) {
+              required.type = 'array'
+              required.message = `请至少选择一个${config.label}`
+            }
+            required.message === undefined && (required.message = `${config.label}不能为空`)
+            config.regList.push(required)
+          }
+          rules[cur.__vModel__] = config.regList.map(item => {
+            item.pattern && (item.pattern = eval(item.pattern))
+            item.trigger = ruleTrigger && ruleTrigger[config.tag]
+            return item
+          })
+        }
+        if (config.children) this.buildRules(config.children, rules)
+      })
+    },
+    resetForm() {
+      this.formConfCopy = deepClone(this.formConf)
+      this.$refs[this.formConf.formRef].resetFields()
+    },
+    submitForm() {
+      this.$refs[this.formConf.formRef].validate(valid => {
+        if (!valid) return false
+        // 触发sumit事件
+        // this.$emit('submit', this[this.formConf.formModel])
+        const params = {
+          formData: this.formConfCopy,
+          valData: this[this.formConf.formModel]
+        }
+        this.$emit('submit', params)
+        return true
+      })
+    },
+    // 传值给父组件
+    getData(){
+      debugger
+      this.$emit('getData', this[this.formConf.formModel])
+      // this.$emit('getData',this.formConfCopy)
+    }
+  },
+  render(h) {
+    return renderFrom.call(this, h)
+  }
+}
+</script>

ruoyi-ui/src/components/parser/README.md

@@ -0,0 +1,17 @@
+## form-generator JSON 解析器
+>用于将form-generator导出的JSON解析成一个表单。
+
+### 安装组件
+```
+npm i form-gen-parser
+```
+或者
+```
+yarn add form-gen-parser
+```
+
+### 使用示例
+> [查看在线示例](https://mrhj.gitee.io/form-generator/#/parser)  
+
+示例代码:  
+> [src\components\parser\example\Index.vue](https://github.com/JakHuang/form-generator/blob/dev/src/components/parser/example/Index.vue)

ruoyi-ui/src/components/parser/example/Index.vue

@@ -0,0 +1,324 @@
+<template>
+  <div class="test-form">
+    <parser :form-conf="formConf" @submit="sumbitForm1" />
+    <parser :key="key2" :form-conf="formConf" @submit="sumbitForm2" />
+    <el-button @click="change">
+      change
+    </el-button>
+  </div>
+</template>
+
+<script>
+import Parser from '../Parser'
+
+// 若parser是通过安装npm方式集成到项目中的，使用此行引入
+// import Parser from 'form-gen-parser'
+
+export default {
+  components: {
+    Parser
+  },
+  props: {},
+  data() {
+    return {
+      key2: +new Date(),
+      formConf: {
+        fields: [
+          {
+            __config__: {
+              label: '单行文本',
+              labelWidth: null,
+              showLabel: true,
+              changeTag: true,
+              tag: 'el-input',
+              tagIcon: 'input',
+              required: true,
+              layout: 'colFormItem',
+              span: 24,
+              document: 'https://element.eleme.cn/#/zh-CN/component/input',
+              regList: [
+                {
+                  pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
+                  message: '手机号格式错误'
+                }
+              ]
+            },
+            __slot__: {
+              prepend: '',
+              append: ''
+            },
+            __vModel__: 'mobile',
+            placeholder: '请输入手机号',
+            style: {
+              width: '100%'
+            },
+            clearable: true,
+            'prefix-icon': 'el-icon-mobile',
+            'suffix-icon': '',
+            maxlength: 11,
+            'show-word-limit': true,
+            readonly: false,
+            disabled: false
+          },
+          {
+            __config__: {
+              label: '日期范围',
+              tag: 'el-date-picker',
+              tagIcon: 'date-range',
+              defaultValue: null,
+              span: 24,
+              showLabel: true,
+              labelWidth: null,
+              required: true,
+              layout: 'colFormItem',
+              regList: [],
+              changeTag: true,
+              document:
+                'https://element.eleme.cn/#/zh-CN/component/date-picker',
+              formId: 101,
+              renderKey: 1585980082729
+            },
+            style: {
+              width: '100%'
+            },
+            type: 'daterange',
+            'range-separator': '至',
+            'start-placeholder': '开始日期',
+            'end-placeholder': '结束日期',
+            disabled: false,
+            clearable: true,
+            format: 'yyyy-MM-dd',
+            'value-format': 'yyyy-MM-dd',
+            readonly: false,
+            __vModel__: 'field101'
+          },
+          {
+            __config__: {
+              layout: 'rowFormItem',
+              tagIcon: 'row',
+              label: '行容器',
+              layoutTree: true,
+              children: [
+                {
+                  __config__: {
+                    label: '评分',
+                    tag: 'el-rate',
+                    tagIcon: 'rate',
+                    defaultValue: 0,
+                    span: 24,
+                    showLabel: true,
+                    labelWidth: null,
+                    layout: 'colFormItem',
+                    required: true,
+                    regList: [],
+                    changeTag: true,
+                    document: 'https://element.eleme.cn/#/zh-CN/component/rate',
+                    formId: 102,
+                    renderKey: 1586839671259
+                  },
+                  style: {},
+                  max: 5,
+                  'allow-half': false,
+                  'show-text': false,
+                  'show-score': false,
+                  disabled: false,
+                  __vModel__: 'field102'
+                }
+              ],
+              document: 'https://element.eleme.cn/#/zh-CN/component/layout',
+              formId: 101,
+              span: 24,
+              renderKey: 1586839668999,
+              componentName: 'row101',
+              gutter: 15
+            },
+            type: 'default',
+            justify: 'start',
+            align: 'top'
+          },
+          {
+            __config__: {
+              label: '按钮',
+              showLabel: true,
+              changeTag: true,
+              labelWidth: null,
+              tag: 'el-button',
+              tagIcon: 'button',
+              span: 24,
+              layout: 'colFormItem',
+              document: 'https://element.eleme.cn/#/zh-CN/component/button',
+              renderKey: 1594288459289
+            },
+            __slot__: {
+              default: '测试按钮1'
+            },
+            type: 'primary',
+            icon: 'el-icon-search',
+            round: false,
+            size: 'medium',
+            plain: false,
+            circle: false,
+            disabled: false,
+            on: {
+              click: 'clickTestButton1'
+            }
+          }
+        ],
+        __methods__: {
+          clickTestButton1() {
+            console.log(
+              `%c【测试按钮1】点击事件里可以访问当前表单：
+                1) formModel='formData', 所以this.formData可以拿到当前表单的model
+                2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件)
+              `,
+              'color:#409EFF;font-size: 15px'
+            )
+            console.log('表单的Model：', this.formData)
+            console.log('表单的ref：', this.$refs.elForm)
+          }
+        },
+        formRef: 'elForm',
+        formModel: 'formData',
+        size: 'small',
+        labelPosition: 'right',
+        labelWidth: 100,
+        formRules: 'rules',
+        gutter: 15,
+        disabled: false,
+        span: 24,
+        formBtns: true,
+        unFocusedComponentBorder: false
+      },
+      formConf2: {
+        fields: [
+          {
+            __config__: {
+              label: '单行文本',
+              labelWidth: null,
+              showLabel: true,
+              changeTag: true,
+              tag: 'el-input',
+              tagIcon: 'input',
+              required: true,
+              layout: 'colFormItem',
+              span: 24,
+              document: 'https://element.eleme.cn/#/zh-CN/component/input',
+              regList: [
+                {
+                  pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
+                  message: '手机号格式错误'
+                }
+              ]
+            },
+            __slot__: {
+              prepend: '',
+              append: ''
+            },
+            __vModel__: 'mobile',
+            placeholder: '请输入手机号',
+            style: {
+              width: '100%'
+            },
+            clearable: true,
+            'prefix-icon': 'el-icon-mobile',
+            'suffix-icon': '',
+            maxlength: 11,
+            'show-word-limit': true,
+            readonly: false,
+            disabled: false
+          },
+          {
+            __config__: {
+              label: '日期范围',
+              tag: 'el-date-picker',
+              tagIcon: 'date-range',
+              defaultValue: null,
+              span: 24,
+              showLabel: true,
+              labelWidth: null,
+              required: true,
+              layout: 'colFormItem',
+              regList: [],
+              changeTag: true,
+              document:
+                'https://element.eleme.cn/#/zh-CN/component/date-picker',
+              formId: 101,
+              renderKey: 1585980082729
+            },
+            style: {
+              width: '100%'
+            },
+            type: 'daterange',
+            'range-separator': '至',
+            'start-placeholder': '开始日期',
+            'end-placeholder': '结束日期',
+            disabled: false,
+            clearable: true,
+            format: 'yyyy-MM-dd',
+            'value-format': 'yyyy-MM-dd',
+            readonly: false,
+            __vModel__: 'field101'
+          }
+        ],
+        formRef: 'elForm',
+        formModel: 'formData',
+        size: 'small',
+        labelPosition: 'right',
+        labelWidth: 100,
+        formRules: 'rules',
+        gutter: 15,
+        disabled: false,
+        span: 24,
+        formBtns: true,
+        unFocusedComponentBorder: false
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    // 表单数据回填，模拟异步请求场景
+    setTimeout(() => {
+      // 请求回来的表单数据
+      const data = {
+        mobile: '18836662555'
+      }
+      // 回填数据
+      this.fillFormData(this.formConf, data)
+      // 更新表单
+      this.key2 = +new Date()
+    }, 2000)
+  },
+  methods: {
+    fillFormData(form, data) {
+      form.fields.forEach(item => {
+        const val = data[item.__vModel__]
+        if (val) {
+          item.__config__.defaultValue = val
+        }
+      })
+    },
+    change() {
+      this.key2 = +new Date()
+      const t = this.formConf
+      this.formConf = this.formConf2
+      this.formConf2 = t
+    },
+    sumbitForm1(data) {
+      console.log('sumbitForm1提交数据：', data)
+    },
+    sumbitForm2(data) {
+      console.log('sumbitForm2提交数据：', data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.test-form {
+  margin: 15px auto;
+  width: 800px;
+  padding: 15px;
+}
+</style>

ruoyi-ui/src/components/parser/index.js

@@ -0,0 +1,3 @@
+import Parser from './Parser'
+
+export default Parser

ruoyi-ui/src/components/parser/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "form-gen-parser",
+  "version": "1.0.3",
+  "description": "表单json解析器",
+  "main": "lib/form-gen-parser.umd.js",
+  "directories": {
+    "example": "example"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JakHuang/form-generator.git"
+  },
+  "dependencies": {
+    "form-gen-render": "^1.0.0"
+  },
+  "author": "jakHuang",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/JakHuang/form-generator/issues"
+  },
+  "homepage": "https://github.com/JakHuang/form-generator/blob/dev/src/components/parser"
+}

ruoyi-ui/src/components/render/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "form-gen-render",
+  "version": "1.0.4",
+  "description": "表单核心render",
+  "main": "lib/form-gen-render.umd.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JakHuang/form-generator.git"
+  },
+  "author": "jakhuang",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/JakHuang/form-generator/issues"
+  },
+  "homepage": "https://github.com/JakHuang/form-generator#readme"
+}

ruoyi-ui/src/components/render/render.js

@@ -0,0 +1,122 @@
+import { deepClone } from '@/utils/index'
+
+const componentChild = {}
+/**
+ * 将./slots中的文件挂载到对象componentChild上
+ * 文件名为key，对应JSON配置中的__config__.tag
+ * 文件内容为value，解析JSON配置中的__slot__
+ */
+const slotsFiles = require.context('./slots', false, /\.js$/)
+const keys = slotsFiles.keys() || []
+keys.forEach(key => {
+  const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1')
+  const value = slotsFiles(key).default
+  componentChild[tag] = value
+})
+
+function vModel(dataObject, defaultValue) {
+  dataObject.props.value = defaultValue
+
+  dataObject.on.input = val => {
+    this.$emit('input', val)
+  }
+}
+
+function mountSlotFiles(h, confClone, children) {
+  const childObjs = componentChild[confClone.__config__.tag]
+  if (childObjs) {
+    Object.keys(childObjs).forEach(key => {
+      const childFunc = childObjs[key]
+      if (confClone.__slot__ && confClone.__slot__[key]) {
+        children.push(childFunc(h, confClone, key))
+      }
+    })
+  }
+}
+
+function emitEvents(confClone) {
+  ['on', 'nativeOn'].forEach(attr => {
+    const eventKeyList = Object.keys(confClone[attr] || {})
+    eventKeyList.forEach(key => {
+      const val = confClone[attr][key]
+      if (typeof val === 'string') {
+        confClone[attr][key] = event => this.$emit(val, event)
+      }
+    })
+  })
+}
+
+function buildDataObject(confClone, dataObject) {
+  Object.keys(confClone).forEach(key => {
+    const val = confClone[key]
+    if (key === '__vModel__') {
+      vModel.call(this, dataObject, confClone.__config__.defaultValue)
+    } else if (dataObject[key] !== undefined) {
+      if (dataObject[key] === null
+        || dataObject[key] instanceof RegExp
+        || ['boolean', 'string', 'number', 'function'].includes(typeof dataObject[key])) {
+        dataObject[key] = val
+      } else if (Array.isArray(dataObject[key])) {
+        dataObject[key] = [...dataObject[key], ...val]
+      } else {
+        dataObject[key] = { ...dataObject[key], ...val }
+      }
+    } else {
+      dataObject.attrs[key] = val
+    }
+  })
+
+  // 清理属性
+  clearAttrs(dataObject)
+}
+
+function clearAttrs(dataObject) {
+  delete dataObject.attrs.__config__
+  delete dataObject.attrs.__slot__
+  delete dataObject.attrs.__methods__
+}
+
+function makeDataObject() {
+  // 深入数据对象：
+  // https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1
+  return {
+    class: {},
+    attrs: {},
+    props: {},
+    domProps: {},
+    nativeOn: {},
+    on: {},
+    style: {},
+    directives: [],
+    scopedSlots: {},
+    slot: null,
+    key: null,
+    ref: null,
+    refInFor: true
+  }
+}
+
+export default {
+  props: {
+    conf: {
+      type: Object,
+      required: true
+    }
+  },
+  render(h) {
+    const dataObject = makeDataObject()
+    const confClone = deepClone(this.conf)
+    const children = this.$slots.default || []
+
+    // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
+    mountSlotFiles.call(this, h, confClone, children)
+
+    // 将字符串类型的事件，发送为消息
+    emitEvents.call(this, confClone)
+
+    // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）”
+    buildDataObject.call(this, confClone, dataObject)
+
+    return h(this.conf.__config__.tag, dataObject, children)
+  }
+}

ruoyi-ui/src/components/render/slots/el-button.js

@@ -0,0 +1,5 @@
+export default {
+  default(h, conf, key) {
+    return conf.__slot__[key]
+  }
+}

ruoyi-ui/src/components/render/slots/el-checkbox-group.js

@@ -0,0 +1,13 @@
+export default {
+  options(h, conf, key) {
+    const list = []
+    conf.__slot__.options.forEach(item => {
+      if (conf.__config__.optionType === 'button') {
+        list.push(<el-checkbox-button label={item.value}>{item.label}</el-checkbox-button>)
+      } else {
+        list.push(<el-checkbox label={item.value} border={conf.border}>{item.label}</el-checkbox>)
+      }
+    })
+    return list
+  }
+}

ruoyi-ui/src/components/render/slots/el-input.js

@@ -0,0 +1,8 @@
+export default {
+  prepend(h, conf, key) {
+    return <template slot="prepend">{conf.__slot__[key]}</template>
+  },
+  append(h, conf, key) {
+    return <template slot="append">{conf.__slot__[key]}</template>
+  }
+}

ruoyi-ui/src/components/render/slots/el-radio-group.js

@@ -0,0 +1,13 @@
+export default {
+  options(h, conf, key) {
+    const list = []
+    conf.__slot__.options.forEach(item => {
+      if (conf.__config__.optionType === 'button') {
+        list.push(<el-radio-button label={item.value}>{item.label}</el-radio-button>)
+      } else {
+        list.push(<el-radio label={item.value} border={conf.border}>{item.label}</el-radio>)
+      }
+    })
+    return list
+  }
+}

ruoyi-ui/src/components/render/slots/el-select.js

@@ -0,0 +1,9 @@
+export default {
+  options(h, conf, key) {
+    const list = []
+    conf.__slot__.options.forEach(item => {
+      list.push(<el-option label={item.label} value={item.value} disabled={item.disabled}></el-option>)
+    })
+    return list
+  }
+}

ruoyi-ui/src/components/render/slots/el-upload.js

@@ -0,0 +1,17 @@
+export default {
+  'list-type': (h, conf, key) => {
+    const list = []
+    const config = conf.__config__
+    if (conf['list-type'] === 'picture-card') {
+      list.push(<i class="el-icon-plus"></i>)
+    } else {
+      list.push(<el-button size="small" type="primary" icon="el-icon-upload">{config.buttonText}</el-button>)
+    }
+    if (config.showTip) {
+      list.push(
+        <div slot="tip" class="el-upload__tip">只能上传不超过 {config.fileSize}{config.sizeUnit} 的{conf.accept}文件</div>
+      )
+    }
+    return list
+  }
+}

ruoyi-ui/src/components/tinymce/README.md

@@ -0,0 +1,3 @@
+## 简介
+富文本编辑器tinymce的一个vue版本封装。使用cdn动态脚本引入的方式加载。
+

ruoyi-ui/src/components/tinymce/config.js

@@ -0,0 +1,8 @@
+/* eslint-disable max-len */
+
+export const plugins = [
+  'advlist anchor autolink autosave code codesample directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textpattern visualblocks visualchars wordcount'
+]
+export const toolbar = [
+  'code searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote removeformat subscript superscript codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
+]

ruoyi-ui/src/components/tinymce/example/Index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <Tinymce v-model="defaultValue" :height="300" placeholder="在这里输入文字" />
+  </div>
+</template>
+
+<script>
+import Tinymce from '../index.vue'
+
+export default {
+  components: {
+    Tinymce
+  },
+  props: {
+
+  },
+  data() {
+    return {
+      defaultValue: '<p>配置文档参阅：http://tinymce.ax-z.cn</p>'
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  }
+}
+</script>

ruoyi-ui/src/components/tinymce/index.js

@@ -0,0 +1,3 @@
+import Index from './index.vue'
+
+export default Index

ruoyi-ui/src/components/tinymce/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <textarea :id="tinymceId" style="visibility: hidden" />
+</template>
+
+<script>
+import loadTinymce from '@/utils/loadTinymce'
+import { plugins, toolbar } from './config'
+import { debounce } from 'throttle-debounce'
+
+let num = 1
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: () => {
+        num === 10000 && (num = 1)
+        return `tinymce${+new Date()}${num++}`
+      }
+    },
+    value: {
+      default: ''
+    }
+  },
+  data() {
+    return {
+      tinymceId: this.id
+    }
+  },
+  mounted() {
+    loadTinymce(tinymce => {
+      // eslint-disable-next-line global-require
+      require('./zh_CN')
+      let conf = {
+        selector: `#${this.tinymceId}`,
+        language: 'zh_CN',
+        menubar: 'file edit insert view format table',
+        plugins,
+        toolbar,
+        height: 300,
+        branding: false,
+        object_resizing: false,
+        end_container_on_empty_block: true,
+        powerpaste_word_import: 'clean',
+        code_dialog_height: 450,
+        code_dialog_width: 1000,
+        advlist_bullet_styles: 'square',
+        advlist_number_styles: 'default',
+        default_link_target: '_blank',
+        link_title: false,
+        nonbreaking_force_tab: true
+      }
+      conf = Object.assign(conf, this.$attrs)
+      conf.init_instance_callback = editor => {
+        if (this.value) editor.setContent(this.value)
+        this.vModel(editor)
+      }
+      tinymce.init(conf)
+    })
+  },
+  destroyed() {
+    this.destroyTinymce()
+  },
+  methods: {
+    vModel(editor) {
+      // 控制连续写入时setContent的触发频率
+      const debounceSetContent = debounce(250, editor.setContent)
+      this.$watch('value', (val, prevVal) => {
+        if (editor && val !== prevVal && val !== editor.getContent()) {
+          if (typeof val !== 'string') val = val.toString()
+          debounceSetContent.call(editor, val)
+        }
+      })
+
+      editor.on('change keyup undo redo', () => {
+        this.$emit('input', editor.getContent())
+      })
+    },
+    destroyTinymce() {
+      if (!window.tinymce) return
+      const tinymce = window.tinymce.get(this.tinymceId)
+      if (tinymce) {
+        tinymce.destroy()
+      }
+    }
+  }
+}
+</script>

ruoyi-ui/src/components/tinymce/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "form-gen-tinymce",
+  "version": "1.0.0",
+  "description": "富文本编辑器tinymce的一个vue版本封装。使用cdn动态脚本引入的方式加载。",
+  "main": "lib/form-gen-tinymce.umd.js",
+  "directories": {
+    "example": "example"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JakHuang/form-generator.git"
+  },
+  "keywords": [
+    "tinymce-vue"
+  ],
+  "dependencies": {
+    "throttle-debounce": "^2.1.0"
+  },
+  "author": "jakHuang",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/JakHuang/form-generator/issues"
+  },
+  "homepage": "https://github.com/JakHuang/form-generator/blob/dev/src/components/tinymce"
+}

ruoyi-ui/src/components/tinymce/zh_CN.js

@@ -0,0 +1,420 @@
+/* eslint-disable */
+tinymce.addI18n('zh_CN',{
+"Redo": "\u91cd\u505a",
+"Undo": "\u64a4\u9500",
+"Cut": "\u526a\u5207",
+"Copy": "\u590d\u5236",
+"Paste": "\u7c98\u8d34",
+"Select all": "\u5168\u9009",
+"New document": "\u65b0\u6587\u4ef6",
+"Ok": "\u786e\u5b9a",
+"Cancel": "\u53d6\u6d88",
+"Visual aids": "\u7f51\u683c\u7ebf",
+"Bold": "\u7c97\u4f53",
+"Italic": "\u659c\u4f53",
+"Underline": "\u4e0b\u5212\u7ebf",
+"Strikethrough": "\u5220\u9664\u7ebf",
+"Superscript": "\u4e0a\u6807",
+"Subscript": "\u4e0b\u6807",
+"Clear formatting": "\u6e05\u9664\u683c\u5f0f",
+"Align left": "\u5de6\u8fb9\u5bf9\u9f50",
+"Align center": "\u4e2d\u95f4\u5bf9\u9f50",
+"Align right": "\u53f3\u8fb9\u5bf9\u9f50",
+"Justify": "\u4e24\u7aef\u5bf9\u9f50",
+"Bullet list": "\u9879\u76ee\u7b26\u53f7",
+"Numbered list": "\u7f16\u53f7\u5217\u8868",
+"Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
+"Increase indent": "\u589e\u52a0\u7f29\u8fdb",
+"Close": "\u5173\u95ed",
+"Formats": "\u683c\u5f0f",
+"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6253\u5f00\u526a\u8d34\u677f\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u7b49\u5feb\u6377\u952e\u3002",
+"Headers": "\u6807\u9898",
+"Header 1": "\u6807\u98981",
+"Header 2": "\u6807\u98982",
+"Header 3": "\u6807\u98983",
+"Header 4": "\u6807\u98984",
+"Header 5": "\u6807\u98985",
+"Header 6": "\u6807\u98986",
+"Headings": "\u6807\u9898",
+"Heading 1": "\u6807\u98981",
+"Heading 2": "\u6807\u98982",
+"Heading 3": "\u6807\u98983",
+"Heading 4": "\u6807\u98984",
+"Heading 5": "\u6807\u98985",
+"Heading 6": "\u6807\u98986",
+"Preformatted": "\u9884\u5148\u683c\u5f0f\u5316\u7684",
+"Div": "Div",
+"Pre": "Pre",
+"Code": "\u4ee3\u7801",
+"Paragraph": "\u6bb5\u843d",
+"Blockquote": "\u5f15\u6587\u533a\u5757",
+"Inline": "\u6587\u672c",
+"Blocks": "\u57fa\u5757",
+"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002",
+"Fonts": "\u5b57\u4f53",
+"Font Sizes": "\u5b57\u53f7",
+"Class": "\u7c7b\u578b",
+"Browse for an image": "\u6d4f\u89c8\u56fe\u50cf",
+"OR": "\u6216",
+"Drop an image here": "\u62d6\u653e\u4e00\u5f20\u56fe\u50cf\u81f3\u6b64",
+"Upload": "\u4e0a\u4f20",
+"Block": "\u5757",
+"Align": "\u5bf9\u9f50",
+"Default": "\u9ed8\u8ba4",
+"Circle": "\u7a7a\u5fc3\u5706",
+"Disc": "\u5b9e\u5fc3\u5706",
+"Square": "\u65b9\u5757",
+"Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
+"Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
+"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
+"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
+"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
+"Anchor...": "\u951a\u70b9...",
+"Name": "\u540d\u79f0",
+"Id": "\u6807\u8bc6\u7b26",
+"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
+"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
+"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
+"Special character...": "\u7279\u6b8a\u5b57\u7b26...",
+"Source code": "\u6e90\u4ee3\u7801",
+"Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
+"Language": "\u8bed\u8a00",
+"Code sample...": "\u793a\u4f8b\u4ee3\u7801...",
+"Color Picker": "\u9009\u8272\u5668",
+"R": "R",
+"G": "G",
+"B": "B",
+"Left to right": "\u4ece\u5de6\u5230\u53f3",
+"Right to left": "\u4ece\u53f3\u5230\u5de6",
+"Emoticons...": "\u8868\u60c5\u7b26\u53f7...",
+"Metadata and Document Properties": "\u5143\u6570\u636e\u548c\u6587\u6863\u5c5e\u6027",
+"Title": "\u6807\u9898",
+"Keywords": "\u5173\u952e\u8bcd",
+"Description": "\u63cf\u8ff0",
+"Robots": "\u673a\u5668\u4eba",
+"Author": "\u4f5c\u8005",
+"Encoding": "\u7f16\u7801",
+"Fullscreen": "\u5168\u5c4f",
+"Action": "\u64cd\u4f5c",
+"Shortcut": "\u5feb\u6377\u952e",
+"Help": "\u5e2e\u52a9",
+"Address": "\u5730\u5740",
+"Focus to menubar": "\u79fb\u52a8\u7126\u70b9\u5230\u83dc\u5355\u680f",
+"Focus to toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u5de5\u5177\u680f",
+"Focus to element path": "\u79fb\u52a8\u7126\u70b9\u5230\u5143\u7d20\u8def\u5f84",
+"Focus to contextual toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u4e0a\u4e0b\u6587\u83dc\u5355",
+"Insert link (if link plugin activated)": "\u63d2\u5165\u94fe\u63a5 (\u5982\u679c\u94fe\u63a5\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Save (if save plugin activated)": "\u4fdd\u5b58(\u5982\u679c\u4fdd\u5b58\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Find (if searchreplace plugin activated)": "\u67e5\u627e(\u5982\u679c\u67e5\u627e\u66ff\u6362\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Plugins installed ({0}):": "\u5df2\u5b89\u88c5\u63d2\u4ef6 ({0}):",
+"Premium plugins:": "\u4f18\u79c0\u63d2\u4ef6\uff1a",
+"Learn more...": "\u4e86\u89e3\u66f4\u591a...",
+"You are using {0}": "\u4f60\u6b63\u5728\u4f7f\u7528 {0}",
+"Plugins": "\u63d2\u4ef6",
+"Handy Shortcuts": "\u5feb\u6377\u952e",
+"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
+"Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247",
+"Image description": "\u56fe\u7247\u63cf\u8ff0",
+"Source": "\u5730\u5740",
+"Dimensions": "\u5927\u5c0f",
+"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
+"General": "\u666e\u901a",
+"Advanced": "\u9ad8\u7ea7",
+"Style": "\u6837\u5f0f",
+"Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
+"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
+"Border": "\u8fb9\u6846",
+"Insert image": "\u63d2\u5165\u56fe\u7247",
+"Image...": "\u56fe\u7247...",
+"Image list": "\u56fe\u7247\u5217\u8868",
+"Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
+"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
+"Flip vertically": "\u5782\u76f4\u7ffb\u8f6c",
+"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
+"Edit image": "\u7f16\u8f91\u56fe\u7247",
+"Image options": "\u56fe\u7247\u9009\u9879",
+"Zoom in": "\u653e\u5927",
+"Zoom out": "\u7f29\u5c0f",
+"Crop": "\u88c1\u526a",
+"Resize": "\u8c03\u6574\u5927\u5c0f",
+"Orientation": "\u65b9\u5411",
+"Brightness": "\u4eae\u5ea6",
+"Sharpen": "\u9510\u5316",
+"Contrast": "\u5bf9\u6bd4\u5ea6",
+"Color levels": "\u989c\u8272\u5c42\u6b21",
+"Gamma": "\u4f3d\u9a6c\u503c",
+"Invert": "\u53cd\u8f6c",
+"Apply": "\u5e94\u7528",
+"Back": "\u540e\u9000",
+"Insert date\/time": "\u63d2\u5165\u65e5\u671f\/\u65f6\u95f4",
+"Date\/time": "\u65e5\u671f\/\u65f6\u95f4",
+"Insert\/Edit Link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
+"Insert\/edit link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
+"Text to display": "\u663e\u793a\u6587\u5b57",
+"Url": "\u5730\u5740",
+"Open link in...": "\u94fe\u63a5\u6253\u5f00\u4f4d\u7f6e...",
+"Current window": "\u5f53\u524d\u7a97\u53e3",
+"None": "\u65e0",
+"New window": "\u5728\u65b0\u7a97\u53e3\u6253\u5f00",
+"Remove link": "\u5220\u9664\u94fe\u63a5",
+"Anchors": "\u951a\u70b9",
+"Link...": "\u94fe\u63a5...",
+"Paste or type a link": "\u7c98\u8d34\u6216\u8f93\u5165\u94fe\u63a5",
+"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u4e3a\u90ae\u4ef6\u5730\u5740\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7f00\u5417\uff1f",
+"The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u5c5e\u4e8e\u5916\u90e8\u94fe\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7f00\u5417\uff1f",
+"Link list": "\u94fe\u63a5\u5217\u8868",
+"Insert video": "\u63d2\u5165\u89c6\u9891",
+"Insert\/edit video": "\u63d2\u5165\/\u7f16\u8f91\u89c6\u9891",
+"Insert\/edit media": "\u63d2\u5165\/\u7f16\u8f91\u5a92\u4f53",
+"Alternative source": "\u955c\u50cf",
+"Alternative source URL": "\u66ff\u4ee3\u6765\u6e90\u7f51\u5740",
+"Media poster (Image URL)": "\u5c01\u9762(\u56fe\u7247\u5730\u5740)",
+"Paste your embed code below:": "\u5c06\u5185\u5d4c\u4ee3\u7801\u7c98\u8d34\u5728\u4e0b\u9762:",
+"Embed": "\u5185\u5d4c",
+"Media...": "\u591a\u5a92\u4f53...",
+"Nonbreaking space": "\u4e0d\u95f4\u65ad\u7a7a\u683c",
+"Page break": "\u5206\u9875\u7b26",
+"Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
+"Preview": "\u9884\u89c8",
+"Print...": "\u6253\u5370...",
+"Save": "\u4fdd\u5b58",
+"Find": "\u67e5\u627e",
+"Replace with": "\u66ff\u6362\u4e3a",
+"Replace": "\u66ff\u6362",
+"Replace all": "\u5168\u90e8\u66ff\u6362",
+"Previous": "\u4e0a\u4e00\u4e2a",
+"Next": "\u4e0b\u4e00\u4e2a",
+"Find and replace...": "\u67e5\u627e\u5e76\u66ff\u6362...",
+"Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",
+"Match case": "\u533a\u5206\u5927\u5c0f\u5199",
+"Find whole words only": "\u5168\u5b57\u5339\u914d",
+"Spell check": "\u62fc\u5199\u68c0\u67e5",
+"Ignore": "\u5ffd\u7565",
+"Ignore all": "\u5168\u90e8\u5ffd\u7565",
+"Finish": "\u5b8c\u6210",
+"Add to Dictionary": "\u6dfb\u52a0\u5230\u5b57\u5178",
+"Insert table": "\u63d2\u5165\u8868\u683c",
+"Table properties": "\u8868\u683c\u5c5e\u6027",
+"Delete table": "\u5220\u9664\u8868\u683c",
+"Cell": "\u5355\u5143\u683c",
+"Row": "\u884c",
+"Column": "\u5217",
+"Cell properties": "\u5355\u5143\u683c\u5c5e\u6027",
+"Merge cells": "\u5408\u5e76\u5355\u5143\u683c",
+"Split cell": "\u62c6\u5206\u5355\u5143\u683c",
+"Insert row before": "\u5728\u4e0a\u65b9\u63d2\u5165",
+"Insert row after": "\u5728\u4e0b\u65b9\u63d2\u5165",
+"Delete row": "\u5220\u9664\u884c",
+"Row properties": "\u884c\u5c5e\u6027",
+"Cut row": "\u526a\u5207\u884c",
+"Copy row": "\u590d\u5236\u884c",
+"Paste row before": "\u7c98\u8d34\u5230\u4e0a\u65b9",
+"Paste row after": "\u7c98\u8d34\u5230\u4e0b\u65b9",
+"Insert column before": "\u5728\u5de6\u4fa7\u63d2\u5165",
+"Insert column after": "\u5728\u53f3\u4fa7\u63d2\u5165",
+"Delete column": "\u5220\u9664\u5217",
+"Cols": "\u5217",
+"Rows": "\u884c",
+"Width": "\u5bbd",
+"Height": "\u9ad8",
+"Cell spacing": "\u5355\u5143\u683c\u5916\u95f4\u8ddd",
+"Cell padding": "\u5355\u5143\u683c\u5185\u8fb9\u8ddd",
+"Show caption": "\u663e\u793a\u6807\u9898",
+"Left": "\u5de6\u5bf9\u9f50",
+"Center": "\u5c45\u4e2d",
+"Right": "\u53f3\u5bf9\u9f50",
+"Cell type": "\u5355\u5143\u683c\u7c7b\u578b",
+"Scope": "\u8303\u56f4",
+"Alignment": "\u5bf9\u9f50\u65b9\u5f0f",
+"H Align": "\u6c34\u5e73\u5bf9\u9f50",
+"V Align": "\u5782\u76f4\u5bf9\u9f50",
+"Top": "\u9876\u90e8\u5bf9\u9f50",
+"Middle": "\u5782\u76f4\u5c45\u4e2d",
+"Bottom": "\u5e95\u90e8\u5bf9\u9f50",
+"Header cell": "\u8868\u5934\u5355\u5143\u683c",
+"Row group": "\u884c\u7ec4",
+"Column group": "\u5217\u7ec4",
+"Row type": "\u884c\u7c7b\u578b",
+"Header": "\u8868\u5934",
+"Body": "\u8868\u4f53",
+"Footer": "\u8868\u5c3e",
+"Border color": "\u8fb9\u6846\u989c\u8272",
+"Insert template...": "\u63d2\u5165\u6a21\u677f...",
+"Templates": "\u6a21\u677f",
+"Template": "\u6a21\u677f",
+"Text color": "\u6587\u5b57\u989c\u8272",
+"Background color": "\u80cc\u666f\u8272",
+"Custom...": "\u81ea\u5b9a\u4e49...",
+"Custom color": "\u81ea\u5b9a\u4e49\u989c\u8272",
+"No color": "\u65e0",
+"Remove color": "\u79fb\u9664\u989c\u8272",
+"Table of Contents": "\u5185\u5bb9\u5217\u8868",
+"Show blocks": "\u663e\u793a\u533a\u5757\u8fb9\u6846",
+"Show invisible characters": "\u663e\u793a\u4e0d\u53ef\u89c1\u5b57\u7b26",
+"Word count": "\u5b57\u6570",
+"Count": "\u8ba1\u6570",
+"Document": "\u6587\u6863",
+"Selection": "\u9009\u62e9",
+"Words": "\u5355\u8bcd",
+"Words: {0}": "\u5b57\u6570\uff1a{0}",
+"{0} words": "{0} \u5b57",
+"File": "\u6587\u4ef6",
+"Edit": "\u7f16\u8f91",
+"Insert": "\u63d2\u5165",
+"View": "\u89c6\u56fe",
+"Format": "\u683c\u5f0f",
+"Table": "\u8868\u683c",
+"Tools": "\u5de5\u5177",
+"Powered by {0}": "\u7531{0}\u9a71\u52a8",
+"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u5728\u7f16\u8f91\u533a\u6309ALT-F9\u6253\u5f00\u83dc\u5355\uff0c\u6309ALT-F10\u6253\u5f00\u5de5\u5177\u680f\uff0c\u6309ALT-0\u67e5\u770b\u5e2e\u52a9",
+"Image title": "\u56fe\u7247\u6807\u9898",
+"Border width": "\u8fb9\u6846\u5bbd\u5ea6",
+"Border style": "\u8fb9\u6846\u6837\u5f0f",
+"Error": "\u9519\u8bef",
+"Warn": "\u8b66\u544a",
+"Valid": "\u6709\u6548",
+"To open the popup, press Shift+Enter": "\u6309Shitf+Enter\u952e\u6253\u5f00\u5bf9\u8bdd\u6846",
+"Rich Text Area. Press ALT-0 for help.": "\u7f16\u8f91\u533a\u3002\u6309Alt+0\u952e\u6253\u5f00\u5e2e\u52a9\u3002",
+"System Font": "\u7cfb\u7edf\u5b57\u4f53",
+"Failed to upload image: {0}": "\u56fe\u7247\u4e0a\u4f20\u5931\u8d25: {0}",
+"Failed to load plugin: {0} from url {1}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25: {0} \u6765\u81ea\u94fe\u63a5 {1}",
+"Failed to load plugin url: {0}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25 \u94fe\u63a5: {0}",
+"Failed to initialize plugin: {0}": "\u63d2\u4ef6\u521d\u59cb\u5316\u5931\u8d25: {0}",
+"example": "\u793a\u4f8b",
+"Search": "\u641c\u7d22",
+"All": "\u5168\u90e8",
+"Currency": "\u8d27\u5e01",
+"Text": "\u6587\u5b57",
+"Quotations": "\u5f15\u7528",
+"Mathematical": "\u6570\u5b66",
+"Extended Latin": "\u62c9\u4e01\u8bed\u6269\u5145",
+"Symbols": "\u7b26\u53f7",
+"Arrows": "\u7bad\u5934",
+"User Defined": "\u81ea\u5b9a\u4e49",
+"dollar sign": "\u7f8e\u5143\u7b26\u53f7",
+"currency sign": "\u8d27\u5e01\u7b26\u53f7",
+"euro-currency sign": "\u6b27\u5143\u7b26\u53f7",
+"colon sign": "\u5192\u53f7",
+"cruzeiro sign": "\u514b\u9c81\u8d5b\u7f57\u5e01\u7b26\u53f7",
+"french franc sign": "\u6cd5\u90ce\u7b26\u53f7",
+"lira sign": "\u91cc\u62c9\u7b26\u53f7",
+"mill sign": "\u5bc6\u5c14\u7b26\u53f7",
+"naira sign": "\u5948\u62c9\u7b26\u53f7",
+"peseta sign": "\u6bd4\u585e\u5854\u7b26\u53f7",
+"rupee sign": "\u5362\u6bd4\u7b26\u53f7",
+"won sign": "\u97e9\u5143\u7b26\u53f7",
+"new sheqel sign": "\u65b0\u8c22\u514b\u5c14\u7b26\u53f7",
+"dong sign": "\u8d8a\u5357\u76fe\u7b26\u53f7",
+"kip sign": "\u8001\u631d\u57fa\u666e\u7b26\u53f7",
+"tugrik sign": "\u56fe\u683c\u91cc\u514b\u7b26\u53f7",
+"drachma sign": "\u5fb7\u62c9\u514b\u9a6c\u7b26\u53f7",
+"german penny symbol": "\u5fb7\u56fd\u4fbf\u58eb\u7b26\u53f7",
+"peso sign": "\u6bd4\u7d22\u7b26\u53f7",
+"guarani sign": "\u74dc\u62c9\u5c3c\u7b26\u53f7",
+"austral sign": "\u6fb3\u5143\u7b26\u53f7",
+"hryvnia sign": "\u683c\u91cc\u592b\u5c3c\u4e9a\u7b26\u53f7",
+"cedi sign": "\u585e\u5730\u7b26\u53f7",
+"livre tournois sign": "\u91cc\u5f17\u5f17\u5c14\u7b26\u53f7",
+"spesmilo sign": "spesmilo\u7b26\u53f7",
+"tenge sign": "\u575a\u6208\u7b26\u53f7",
+"indian rupee sign": "\u5370\u5ea6\u5362\u6bd4",
+"turkish lira sign": "\u571f\u8033\u5176\u91cc\u62c9",
+"nordic mark sign": "\u5317\u6b27\u9a6c\u514b",
+"manat sign": "\u9a6c\u7eb3\u7279\u7b26\u53f7",
+"ruble sign": "\u5362\u5e03\u7b26\u53f7",
+"yen character": "\u65e5\u5143\u5b57\u6837",
+"yuan character": "\u4eba\u6c11\u5e01\u5143\u5b57\u6837",
+"yuan character, in hong kong and taiwan": "\u5143\u5b57\u6837\uff08\u6e2f\u53f0\u5730\u533a\uff09",
+"yen\/yuan character variant one": "\u5143\u5b57\u6837\uff08\u5927\u5199\uff09",
+"Loading emoticons...": "\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7...",
+"Could not load emoticons": "\u4e0d\u80fd\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7",
+"People": "\u4eba\u7c7b",
+"Animals and Nature": "\u52a8\u7269\u548c\u81ea\u7136",
+"Food and Drink": "\u98df\u7269\u548c\u996e\u54c1",
+"Activity": "\u6d3b\u52a8",
+"Travel and Places": "\u65c5\u6e38\u548c\u5730\u70b9",
+"Objects": "\u7269\u4ef6",
+"Flags": "\u65d7\u5e1c",
+"Characters": "\u5b57\u7b26",
+"Characters (no spaces)": "\u5b57\u7b26(\u65e0\u7a7a\u683c)",
+"{0} characters": "{0} \u4e2a\u5b57\u7b26",
+"Error: Form submit field collision.": "\u9519\u8bef: \u8868\u5355\u63d0\u4ea4\u5b57\u6bb5\u51b2\u7a81\u3002",
+"Error: No form element found.": "\u9519\u8bef: \u6ca1\u6709\u8868\u5355\u63a7\u4ef6\u3002",
+"Update": "\u66f4\u65b0",
+"Color swatch": "\u989c\u8272\u6837\u672c",
+"Turquoise": "\u9752\u7eff\u8272",
+"Green": "\u7eff\u8272",
+"Blue": "\u84dd\u8272",
+"Purple": "\u7d2b\u8272",
+"Navy Blue": "\u6d77\u519b\u84dd",
+"Dark Turquoise": "\u6df1\u84dd\u7eff\u8272",
+"Dark Green": "\u6df1\u7eff\u8272",
+"Medium Blue": "\u4e2d\u84dd\u8272",
+"Medium Purple": "\u4e2d\u7d2b\u8272",
+"Midnight Blue": "\u6df1\u84dd\u8272",
+"Yellow": "\u9ec4\u8272",
+"Orange": "\u6a59\u8272",
+"Red": "\u7ea2\u8272",
+"Light Gray": "\u6d45\u7070\u8272",
+"Gray": "\u7070\u8272",
+"Dark Yellow": "\u6697\u9ec4\u8272",
+"Dark Orange": "\u6df1\u6a59\u8272",
+"Dark Red": "\u6df1\u7ea2\u8272",
+"Medium Gray": "\u4e2d\u7070\u8272",
+"Dark Gray": "\u6df1\u7070\u8272",
+"Light Green": "\u6d45\u7eff\u8272",
+"Light Yellow": "\u6d45\u9ec4\u8272",
+"Light Red": "\u6d45\u7ea2\u8272",
+"Light Purple": "\u6d45\u7d2b\u8272",
+"Light Blue": "\u6d45\u84dd\u8272",
+"Dark Purple": "\u6df1\u7d2b\u8272",
+"Dark Blue": "\u6df1\u84dd\u8272",
+"Black": "\u9ed1\u8272",
+"White": "\u767d\u8272",
+"Switch to or from fullscreen mode": "\u5207\u6362\u5168\u5c4f\u6a21\u5f0f",
+"Open help dialog": "\u6253\u5f00\u5e2e\u52a9\u5bf9\u8bdd\u6846",
+"history": "\u5386\u53f2",
+"styles": "\u6837\u5f0f",
+"formatting": "\u683c\u5f0f\u5316",
+"alignment": "\u5bf9\u9f50",
+"indentation": "\u7f29\u8fdb",
+"permanent pen": "\u8bb0\u53f7\u7b14",
+"comments": "\u5907\u6ce8",
+"Format Painter": "\u683c\u5f0f\u5237",
+"Insert\/edit iframe": "\u63d2\u5165\/\u7f16\u8f91\u6846\u67b6",
+"Capitalization": "\u5927\u5199",
+"lowercase": "\u5c0f\u5199",
+"UPPERCASE": "\u5927\u5199",
+"Title Case": "\u9996\u5b57\u6bcd\u5927\u5199",
+"Permanent Pen Properties": "\u6c38\u4e45\u7b14\u5c5e\u6027",
+"Permanent pen properties...": "\u6c38\u4e45\u7b14\u5c5e\u6027...",
+"Font": "\u5b57\u4f53",
+"Size": "\u5b57\u53f7",
+"More...": "\u66f4\u591a...",
+"Spellcheck Language": "\u62fc\u5199\u68c0\u67e5\u8bed\u8a00",
+"Select...": "\u9009\u62e9...",
+"Preferences": "\u9996\u9009\u9879",
+"Yes": "\u662f",
+"No": "\u5426",
+"Keyboard Navigation": "\u952e\u76d8\u6307\u5f15",
+"Version": "\u7248\u672c",
+"Anchor": "\u951a\u70b9",
+"Special character": "\u7279\u6b8a\u7b26\u53f7",
+"Code sample": "\u4ee3\u7801\u793a\u4f8b",
+"Color": "\u989c\u8272",
+"Emoticons": "\u8868\u60c5",
+"Document properties": "\u6587\u6863\u5c5e\u6027",
+"Image": "\u56fe\u7247",
+"Insert link": "\u63d2\u5165\u94fe\u63a5",
+"Target": "\u6253\u5f00\u65b9\u5f0f",
+"Link": "\u94fe\u63a5",
+"Poster": "\u5c01\u9762",
+"Media": "\u5a92\u4f53",
+"Print": "\u6253\u5370",
+"Prev": "\u4e0a\u4e00\u4e2a",
+"Find and replace": "\u67e5\u627e\u548c\u66ff\u6362",
+"Whole words": "\u5168\u5b57\u5339\u914d",
+"Spellcheck": "\u62fc\u5199\u68c0\u67e5",
+"Caption": "\u6807\u9898",
+"Insert template": "\u63d2\u5165\u6a21\u677f"
+});