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

package/src/components/MessageTemplate.vue

@@ -0,0 +1,949 @@
+<template>
+<div class="container">
+  <div class="message-data">
+    <el-tabs type="border-card">
+      <el-tab-pane label="数据源">
+        <div class="module-header">
+          <el-button type="primary" size="small" @click="addDataSource">新增</el-button>
+          <el-button size="small" @click="editDataSource">编辑</el-button>
+          <el-button size="small" @click="deleteDataSource">删除</el-button>
+        </div>
+        <div class="data-tree">
+          <el-tree class="data-source-tree" ref="tree"
+            :data="dataSource"
+            :props="{label: 'name', children: 'children'}"
+            :auto-expand-parent="false"
+            :expand-on-click-node="false"
+            :check-on-click-node="true"
+            :highlight-current="true"
+            @node-click="clickDataSource"
+          >
+            <template v-slot="{ node, data }" >
+              <span :draggable="data.type==='field' ?'true': 'false'"  :style="{color: data.type==='meta' && data.relationType==='1' ? 'red' : '', 'user-select': 'none'}" @dragstart="e=>drag(e, data, node)">{{node.label}}</span>
+            </template>
+          </el-tree>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="参数">
+        <div class="module-header">
+          <el-button size="small" type="primary" @click="addFormParam">新增</el-button>
+        </div>
+        <el-tree class="params-tree" :data="variableTree" :props="{label: 'name'}" :default-expand-all="true">
+          <template v-slot="{ node, data }">
+            <div class="params">
+              <span :draggable="data.type==='variable' ?'true': 'false'" @dragstart="e=>dragVariable(e, data, node)">{{node.label}}</span>
+              <span class="params-icon" v-if="data.type!=='folder' && (data.type!=='variable' || data.variableType==='params' ) && data.value!=='id'">
+                <i class="el-icon-edit" @click="editFormParam(data)"></i>
+                <i class="el-icon-close" @click="deleteFormParam(data)"></i>
+              </span>
+            </div>
+          </template>
+        </el-tree>
+        <!-- <div class="params" v-for="param in formParams" :key="param.CODE">
+          <span>{{param.NAME}}（{{param.CODE}}）</span>
+          <span class="params-icon" v-if="param.CODE!=='userId'">
+            <i class="el-icon-edit" @click="editFormParam(param)"></i>
+            <i class="el-icon-close" @click="deleteFormParam(param)"></i>
+          </span>
+        </div> -->
+        <el-dialog
+          title="添加参数"
+          v-model="formParamModal"
+          width="70%"
+        >
+            <div  class="data-souce-modal-content data-souce-modal-content__base">
+              <div class="form-item">
+                <label>编号：</label>
+                <epx-input v-model="formParam.CODE"  :fieldConfigs="{attriName: 'CODE', attriLabel: '编号', dataType: 'text', state:'EDIT'}"  />
+              </div>
+              <div class="form-item">
+                <label>名称：</label>
+                <epx-input v-model="formParam.NAME" :fieldConfigs="{attriName: 'NAME',attriLabel: '名称',dataType: 'text', state:'EDIT'}"  /></div>
+            </div>
+            <template v-slot:footer><span class="dialog-footer">
+              <el-button @click="formParamModal = false">取 消</el-button>
+              <el-button type="primary" @click.stop="saveFormParam">确 定</el-button>
+          </span></template>
+        </el-dialog>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+  <div class="message-content">
+    <div class="message-form__item">
+      <label class="message-form__label" for="">消息标题</label>
+      <textarea ref="titleEditor" class="title-editor"></textarea>
+    </div>
+    <div class="message-form__item">
+      <label class="message-form__label" for="">消息内容</label>
+      <div class="editor-container" ref="editorContainer">
+        <textarea ref="editor"  class="editor"></textarea>
+      </div>
+    </div>
+  </div>
+  <!-- 添加数据源 -->
+  <el-dialog
+    title="添加数据源"
+    v-model="dataSourceModal"
+    width="70%"
+  >
+    <div class="add" v-if="dataSourceModal">
+      <li class="data-source-modal-item">
+        <p class="data-source-modal-header">数据源</p>
+        <div class="data-souce-modal-content data-souce-modal-content__base">
+          <div class="form-item">
+            <label>名称：</label>
+            <epx-input v-model="dataSourceForm.NAME" :fieldConfigs="{attriName: 'NAME', dataType: 'text',attriLabel: '名称', state:'EDIT'}"></epx-input>
+          </div>
+          <div class="form-item">
+            <label>对象：</label>
+            <epx-object v-model="dataSourceForm.ENTITY" :fieldConfigs="{attriName: 'ENTITY',dataType: 'object',attriLabel: '对象', codeKey: 'FM_ENTITY', state:'EDIT'}"></epx-object>
+          </div>
+           <div class="form-item">
+            <label>对象视图：</label>
+            <epx-object :modelValue="dataSourceForm.ENTITY_VIEW" @update:modelValue="v=>(dataSourceForm['ENTITY_VIEW'] = v? v.id : null)"
+              :fieldConfigs="{attriName: 'ENTITY_VIEW',dataType: 'object',attriLabel: '对象视图', codeKey: 'FM_ENTITY_VIEW', state:'EDIT', scopeParams: [{field: 'ENTITY', values: dataSourceForm.ENTITY ? dataSourceForm.ENTITY.id ||dataSourceForm.ENTITY: null }],flag: 'process_entity_view_find'}" />
+          </div>
+        </div>
+      </li>
+      <li class="data-source-modal-item">
+        <p class="data-source-modal-header">数据范围</p>
+        <div class="data-souce-modal-content">
+          <div class="data-source__scope">
+            <p class="data-source__scope--text">{{scopeText}}</p>
+            <el-button type="primary" link @click="dataScopeDrawer=true">+ 添加数据范围</el-button>
+            <epx-scope-drawer
+              v-model:visible="dataScopeDrawer"
+              ref="filterDrawer"
+              :defineDynamicParams="defineDynamicParams"
+              :modeType="['FIXED_VALUE', 'DEFINED_DYNAMIC']"
+              :metaId="dataSourceEntity"
+              :metaViewId="dataSourceForm.ENTITY_VIEW"
+              v-model="scopeParams"
+            />
+          </div>
+        </div>
+      </li>
+      <li class="data-source-modal-item">
+        <p class="data-source-modal-header">排序方式</p>
+        <div class="data-souce-modal-content">
+          <div class="sort-field" v-for="item in sortFields" :key="item.code">
+            {{item.text}}
+            <span class="sort-icon" @click="changeSort(item)">
+              <i :class="['el-icon-sort-down', {'active':item.sort==='desc'}]"></i>
+              <i :class="['el-icon-sort-up', , {'active':item.sort==='asc'}]"></i>
+            </span>
+            <i class="el-icon-close" @click="deleteSort(item)"></i>
+          </div>
+          <div class="sort-opera">
+            <el-popover
+              ref="popover"
+              trigger="click"
+              :tabindex="1"
+              popper-class="sort-opera-popover"
+            >
+              <template v-slot:reference><span class="sort-opera-item">
+                <i class="el-icon-plus"></i>
+                <font>添加排序字段</font>
+              </span></template>
+              <div class="filter-condition-opera__popper">
+                <el-tree :data="allFields" node-key="code" :default-expanded-keys="defaultExpandKey" :props="defaultProps" @node-click="addSortField">
+                </el-tree>
+              </div>
+            </el-popover>
+          </div>
+        </div>
+      </li>
+    </div>
+    <template v-slot:footer><span class="dialog-footer">
+      <el-button @click="dataSourceModal = false">取 消</el-button>
+      <el-button type="primary" @click.stop="saveDataSource">确 定</el-button>
+    </span></template>
+  </el-dialog>
+</div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+import { mapState } from 'vuex'
+export default {
+  name: 'epx-message-template',
+  mixins: [component],
+  props: {
+    formData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      dataSourceModal: false,
+      dataSourceForm: {},
+      dataScopeDrawer: false,
+      dataSource: [],
+      allFields: [],
+      defaultExpandKey: [],
+      defaultProps: {
+        children: 'children',
+        label: 'text'
+      },
+      editDataSourceId: '',
+      editFormParamId: '',
+      formParams: [],
+      formParam: {},
+      formParamModal: false,
+      defineDynamicParams: []
+    }
+  },
+  computed: {
+    ...mapState({
+      systemVariableList: state => state.config.systemVariableList // 当前导航菜单
+    }),
+    variableTree () {
+      return [
+        {
+          type: 'folder',
+          name: '自定义参数',
+          children: this.formParams.map(item => ({ ...item, name: item.NAME, value: item.CODE, type: 'variable', variableType: 'params' }))
+        },
+        {
+          type: 'folder',
+          name: '系统变量',
+          children: this.systemVariableList
+        }
+      ]
+    },
+    sortFields: {
+      get () {
+        let { SORT = '[]' } = this.dataSourceForm
+        if (!SORT || SORT === 'undefined' || SORT === '') SORT = '[]'
+        return JSON.parse(SORT)
+      },
+      set (v) {
+        this.dataSourceForm.SORT = JSON.stringify(v)
+      }
+    },
+    dataSourceEntity () {
+      const { ENTITY } = this.dataSourceForm
+      if (ENTITY) {
+        return ENTITY.id || ENTITY
+      }
+      return ''
+    },
+    scopeParams: {
+      get () {
+        let { DATA_SCOPE = '{}' } = this.dataSourceForm
+        if (!DATA_SCOPE || DATA_SCOPE === 'undefined' || DATA_SCOPE === 'null' || DATA_SCOPE === '') DATA_SCOPE = '{}'
+        return JSON.parse(DATA_SCOPE).scopeParams || []
+      },
+      set (v) {
+        this.dataSourceForm.DATA_SCOPE = JSON.stringify({ scopeParams: v })
+      }
+    },
+    scopeText () {
+      return this.scopeParams.reduce((text, item) => (text += item.text), '')
+    },
+    data: {
+      get () {
+        return this.formData
+      },
+      set (v) {
+        this.$emit('change', v)
+      }
+    }
+  },
+  watch: {
+    dataSourceForm: {
+      handler (v) {
+      },
+      deept: true
+    },
+    dataSourceEntity (v) {
+      if (v) {
+        const entity = v.id || v
+        const meta = this.metas[v]
+        if (!meta) {
+          this.$store.dispatch({ // 加回调
+            type: 'ADD_META',
+            metaId: entity
+          })
+            .then(data => {
+              if (data) {
+                const relations = data.getRelations()
+                this.getAllFields(relations)
+              }
+            })
+        } else {
+          const relations = meta.getRelations()
+          this.getAllFields(relations)
+        }
+      }
+    },
+    'formData.TITLE' (v) {
+      if (this.titleEditor) {
+        const content = this.titleEditor.getContent()
+        if (v !== content) this.titleEditor.setContent(v)
+      }
+    },
+    'formData.CONTENT' (v) {
+      if (this.editor) {
+        const content = this.editor.getContent()
+        if (v !== content) this.editor.setContent(v)
+      }
+    },
+    'formData.TYPE' (v) {
+      this.initEditor()
+    }
+  },
+  methods: {
+
+    getDataSource () {
+      return new Promise(resolve => {
+        this.$http.list({
+          entityId: 'FM_MESSAGE_SOURCE',
+          'scope.TEMPLATE': this.$query.id
+        })
+          .then(async data => {
+            this.dataSource = data.entitys.map(item => ({ id: item.ENTITY, name: item.NAME, root: true, sourceId: item.ID }))
+            for (let index = 0; index < data.entitys.length; index++) {
+              const item = data.entitys[index]
+              const entityData = await this.getAttribute(item)
+              this.dataSource[index] = { ...this.dataSource[index], children: entityData }
+            }
+            resolve(this.dataSource)
+          })
+      })
+    },
+    getAttribute (item) {
+      const { ENTITY, ENTITY_VIEW } = item
+      return this.$http.get({
+        action: 'getEntityMetaView',
+        entityId: 'FM_ENTITY_VIEW',
+        metaId: ENTITY,
+        metaViewId: ENTITY_VIEW,
+        allSub: true
+      })
+        .then(data => {
+          const formatData = (arr) => {
+            arr.forEach(item => {
+              item.field = item.linkCode || item.code
+              item.relationSort = item.relationType
+              if (!item.codeKey) item.codeKey = item.relatedEntity
+              item.id = item.field
+              item.name = item.text
+              item.meta = item.meta ? item.meta.id : ''
+              if (item.type === 'meta' && item.relationType === '1') item.isSub = true
+              if (item.children) formatData(item.children)
+            })
+          }
+          formatData(data)
+          return data
+        })
+    },
+    getMessageParams () {
+      const { id } = this.$query
+      return this.$http.list({
+        entityId: 'FM_MESSAGE_PARAM',
+        'scope.TEMPLATE': id
+      })
+        .then(data => {
+          this.formParams = [...data.entitys]
+          this.defineDynamicParams = this.formParams.map(item => ({ id: `#{${item.CODE}}`, name: item.NAME }))
+          return this.formParams
+        })
+    },
+    getAppList () {
+      return this.$http.list({
+        entityId: 'FM_SERVICE',
+        'scope.SYSTEM': this.SYSTEM
+      })
+        .then(data => {
+          this.appList = data.entitys.map(item => ({ id: item.ID, name: item.NAME }))
+          return this.appList
+        })
+    },
+    clickDataSource (data) {
+      if (data.root) {
+        this.editDataSourceId = data.sourceId
+      }
+    },
+    addDataSource () {
+      this.editDataSourceId = ''
+      this.dataSourceForm = { }
+      this.dataSourceModal = true
+    },
+    editDataSource (data) {
+      this.$http.get({
+        entityId: 'FM_MESSAGE_SOURCE',
+        id: this.editDataSourceId
+      })
+        .then(data => {
+          if (data && data.data) {
+            this.dataSourceForm = { ...data.data }
+          }
+          this.dataSourceModal = true
+        })
+        .catch(() => {
+          this.dataSourceModal = true
+        })
+    },
+    deleteDataSource () {
+      this.$http.removeMulti({
+        entityId: 'FM_MESSAGE_SOURCE',
+        ids: this.editDataSourceId
+      })
+        .then(data => {
+          this.$message.success('删除成功')
+          this.getDataSource()
+        })
+    },
+    saveDataSource () {
+      const { id } = this.$query
+      const { ENTITY = '', ENTITY_VIEW, NAME, SORT, SUB_SOURCE = '', DATA_SCOPE = '' } = this.dataSourceForm
+      if (!NAME) {
+        this.$message.error('请填写名称')
+        return
+      }
+      if (!ENTITY) {
+        this.$message.error('请填写对象')
+        return
+      }
+
+      this.$http.save({
+        action: this.editDataSourceId ? 'update' : 'save',
+        entityId: 'FM_MESSAGE_SOURCE',
+        'bean.CLIENT': this.CLIENT,
+        'bean.SYSTEM': this.SYSTEM,
+        'bean.ID': this.editDataSourceId ? this.editDataSourceId : '',
+        'bean.TEMPLATE': id || '',
+        'bean.ENTITY': ENTITY ? (ENTITY.id || ENTITY) : '',
+        'bean.ENTITY_VIEW': ENTITY_VIEW || '',
+        'bean.NAME': NAME || '',
+        'bean.SORT': SORT || '',
+        'bean.SUB_SOURCE': SUB_SOURCE ? (SUB_SOURCE.id || SUB_SOURCE) : '',
+        'bean.DATA_SCOPE': DATA_SCOPE || ''
+      })
+        .then(() => {
+          this.dataSourceModal = false
+          this.editDataSourceId = ''
+          this.dataSourceForm = { }
+          this.getDataSource()
+        })
+    },
+    getAllFields (relations) {
+      const flags = relations.map(item => item.flag)
+      this.$http.entityFieldTreeStore({
+        metaId: this.dataSourceEntity,
+        link: flags.join(','),
+        allSub: false,
+        subFields: '',
+        showKeyNameFlag: false
+      })
+        .then(data => {
+          // eslint-disable-next-line no-eval
+          const jsonData = eval('(' + data + ')')
+          this.allFields = [...jsonData]
+          this.defaultExpandKey = [this.allFields[0].code]
+        })
+    },
+    addSortField (field) {
+      if (!field.leaf) return
+      const sortField = this.sortFields.find(item => item.code === field.code)
+      if (!sortField) {
+        this.sortFields = [...this.sortFields, { code: field.code, text: field.text, sort: 'asc' }]
+      }
+    },
+    changeSort (field) {
+      const sortFieldIndex = this.sortFields.findIndex(item => item.code === field.code)
+      if (sortFieldIndex !== -1) {
+        const sortField = this.sortFields.find(item => item.code === field.code)
+        const sortFields = [...this.sortFields]
+        sortFields.splice(sortFieldIndex, 1, { ...sortField, sort: sortField.sort === 'asc' ? 'desc' : 'asc' })
+        this.sortFields = [...sortFields]
+      }
+    },
+    deleteSort (field) {
+      const sortFieldIndex = this.sortFields.findIndex(item => item.code === field.code)
+      if (sortFieldIndex !== -1) {
+        const sortFields = [...this.sortFields]
+        sortFields.splice(sortFieldIndex, 1)
+        this.sortFields = [...sortFields]
+      }
+    },
+    saveFormParam () {
+      const { id } = this.$query
+      const { CODE, NAME } = this.formParam
+      if (!CODE || !NAME) {
+        this.$message.error('请输入参数信息')
+        return
+      }
+      this.$http.save({
+        action: this.editFormParamId ? 'update' : 'save',
+        entityId: 'FM_MESSAGE_PARAM',
+        'bean.CLIENT': this.CLIENT,
+        'bean.SYSTEM': this.SYSTEM,
+        'bean.ID': this.editFormParamId ? this.editFormParamId : '',
+        'bean.TEMPLATE': id,
+        'bean.CODE': CODE,
+        'bean.NAME': NAME
+      })
+        .then(() => {
+          this.formParamModal = false
+          this.editFormParamId = ''
+          this.formParam = {}
+          this.getMessageParams()
+        })
+    },
+    addFormParam () {
+      this.editFormParamId = ''
+      this.formParam = { }
+      this.formParamModal = true
+    },
+    editFormParam (param) {
+      this.editFormParamId = param.ID
+      this.formParamModal = true
+      this.formParam = { ...param }
+    },
+    deleteFormParam (param) {
+      this.$http.removeMulti({
+        entityId: 'FM_MESSAGE_PARAM',
+        ids: param.ID
+      }).then(data => {
+        this.$message.success('删除成功')
+        this.getMessageParams()
+      })
+    },
+    drag (e, data, node) {
+      if (node.parent) {
+        let parent = node.parent
+        let nodeText = ''
+        while (parent.parent && parent.data.root !== true) {
+          nodeText = parent.data.text + '.' + nodeText
+          parent = parent.parent
+        }
+        const field = {
+          sourceId: parent.data.id,
+          sourceName: parent.data.name,
+          fieldId: node.data.id,
+          fieldName: nodeText ? nodeText + node.data.text : node.data.text
+        }
+        for (const key in field) {
+          e.dataTransfer.setData(key, field[key])
+          e.dataTransfer.dropEffect = 'copy'
+          e.dataTransfer.effectAllowed = 'copy'
+        }
+      }
+    },
+    dragVariable (e, data, node) {
+      e.dataTransfer.setData('type', 'variable')
+      e.dataTransfer.setData('variableName', data.name)
+      e.dataTransfer.setData('variableCode', data.code)
+      e.dataTransfer.dropEffect = 'copy'
+      e.dataTransfer.effectAllowed = 'copy'
+    },
+    async initEditor () {
+      const that = this
+      if (this.editor) this.editor.remove()
+      const hasTool = this.formData.TYPE && !this.formData.TYPE.includes('01')
+      let fontsizeFormats = ''
+      for (let i = 1; i <= 50; i++) {
+        fontsizeFormats += i + 'pt '
+      }
+      const editor = this.$refs.editor
+      const params = {
+        id: 'params',
+        name: '参数',
+        type: 'datasource',
+        children: this.formParams.map(item => ({ id: item.CODE, name: item.NAME }))
+      }
+      await this.$util.usePlugin('tinymce')
+      globalThis.tinymce.init({
+        target: editor,
+        plugins: 'data pagelink link image contextmenu',
+        menubar: '',
+        toolbar: hasTool ? 'undo redo | styleselect | bold italic underline  strikethrough | lineheight | alignleft aligncenter alignright alignjustify | outdent indent | fontselect fontsizeselect lineheight | forecolor backcolor |table | image | media | link ' : '',
+        contextmenu: 'link data pagelink',
+        language: 'zh_CN',
+        dataSource: [...this.dataSource, {
+          type: 'variable',
+          name: '系统变量',
+          children: this.systemVariableList
+        }, params],
+        appList: [...this.appList],
+        promotion: false,
+        branding: false,
+        convert_urls: false,
+        content_style: 'p {margin: 2px 0}',
+        lineheight_formats: '1 1.1 1.2 1.3 1.4 1.5 2 2.5 3',
+        font_formats: 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;宋体=simsun,serif;黑体=SimHei',
+        fontsize_formats: fontsizeFormats,
+        paste_enable_default_filters: false,
+        images_upload_handler: (blobInfo, succFun) => {
+          var file = blobInfo.blob()
+          this.$http.save({
+            action: 'upload',
+            file: file
+          }, {
+            requestType: 'formData'
+          })
+            .then(data => {
+              if (data && data.bean) {
+                succFun(this.$util.getFileUrl(data.bean, '', false))
+              }
+            })
+        },
+        file_picker_callback: function (callback, value, meta) {
+          var input = document.createElement('input')
+          input.setAttribute('type', 'file')
+          input.click()
+          input.onchange = function (evt) {
+            const file = this.files[0]
+            that.$http.save({
+              action: 'upload',
+              file: file
+            }, {
+              requestType: 'formData'
+            })
+              .then(data => {
+                if (data && data.bean) {
+                  callback(that.$util.getFileUrl(data.bean, '', false), { text: file.name })
+                }
+              })
+          }
+        },
+        paste_preprocess: (plugin, args) => {
+          if (/^<img src="(data:image.+)" alt="">$/.test(args.content)) {
+            const file = this.$util.dataURLtoBlob(RegExp.$1)
+            this.$http.save({
+              action: 'upload',
+              file: file
+            }, {
+              requestType: 'formData'
+            })
+              .then(data => {
+                if (data && data.bean) {
+                  this.editor.execCommand('mceInsertClipboardContent', false, {
+                    content: '<img src="' + this.$util.getFileUrl(data.bean, '', false) + '" alt="">'
+                  })
+                }
+              })
+          }
+        },
+        setup: function (ed) {
+          ed.on('change', () => {
+            const value = ed.getContent()
+            that.data = { ...that.data, CONTENT: value }
+          })
+        }
+      })
+        .then(editors => {
+          this.editor = editors[0]
+          if (this.editor) {
+            const frame = this.editor.iframeElement.contentWindow
+            const editorContainer = frame.document.querySelector('body')
+            editorContainer.ondragover = (e) => {
+              e.preventDefault()
+            }
+            editorContainer.ondrop = (e) => {
+              let node = e.target
+              while (node.nodeName === 'LABEL') {
+                node = node.parentNode
+              }
+              const type = e.dataTransfer.getData('type')
+              if (type === 'variable') {
+                const variableCode = e.dataTransfer.getData('variableCode')
+                const variableName = e.dataTransfer.getData('variableName')
+                const span = document.createElement('font')
+                span.contentEditable = 'false'
+                span.setAttribute('data-name', 'variable')
+                span.setAttribute('data-value', variableCode)
+                span.innerHTML = `<label>{${variableName}}</label>`
+                if (e.target.innerHTML === '<br>') {
+                  e.target.innerHTML = ''
+                }
+                if (node.getAttribute('data-name') === 'datasource' || node.getAttribute('data-name') === 'variable') {
+                  node.parentNode.insertBefore(span, node)
+                } else {
+                  node.appendChild(span)
+                }
+              } else {
+                const fieldId = e.dataTransfer.getData('fieldId')
+                const sourceName = e.dataTransfer.getData('sourceName') || ''
+                const fieldName = e.dataTransfer.getData('fieldName')
+                if (fieldId) {
+                  const span = document.createElement('span')
+                  span.contentEditable = 'false'
+                  span.setAttribute('data-name', 'datasource')
+                  span.setAttribute('data-datasource', sourceName)
+                  span.setAttribute('data-field', fieldId)
+                  span.innerHTML = `<label>{${fieldName}}</label>`
+                  if (e.target.innerHTML === '<br>') {
+                    e.target.innerHTML = ''
+                  }
+                  e.target.appendChild(span)
+                  const value = this.editor.getContent()
+                  that.data = { ...that.data, CONTENT: value }
+                } else {
+                  return true
+                }
+              }
+            }
+            this.editor.setContent(this.formData.CONTENT || '')
+          }
+        })
+    },
+    async initTitleEditor () {
+      const that = this
+      if (this.titleEditor) this.titleEditor.remove()
+      const editor = this.$refs.titleEditor
+      const params = {
+        id: 'params',
+        name: '参数',
+        type: 'datasource',
+        children: this.formParams.map(item => ({ id: item.CODE, name: item.NAME }))
+      }
+      await this.$util.usePlugin('tinymce')
+      globalThis.tinymce.init({
+        target: editor,
+        height: 80,
+        autoresize_min_height: 80,
+        plugins: 'data',
+        menubar: '',
+        toolbar: '',
+        contextmenu: 'data',
+        language: 'zh_CN',
+        dataSource: [...this.dataSource, {
+          type: 'variable',
+          name: '系统变量',
+          children: this.systemVariableList
+        }, params],
+        statusbar: false,
+        promotion: false,
+        content_style: 'p {margin: 2px 0}',
+        setup: function (ed) {
+          ed.on('change', () => {
+            const value = ed.getContent()
+            that.data = { ...that.data, TITLE: value }
+          })
+        }
+      })
+        .then(editors => {
+          this.titleEditor = editors[0]
+          if (this.titleEditor) {
+            const frame = this.titleEditor.iframeElement.contentWindow
+            const editorContainer = frame.document.querySelector('body')
+            editorContainer.ondragover = (e) => {
+              e.preventDefault()
+            }
+            editorContainer.ondrop = (e) => {
+              let node = e.target
+              while (node.nodeName === 'LABEL') {
+                node = node.parentNode
+              }
+              const type = e.dataTransfer.getData('type')
+              if (type === 'variable') {
+                const variableCode = e.dataTransfer.getData('variableCode')
+                const variableName = e.dataTransfer.getData('variableName')
+                const span = document.createElement('font')
+                span.contentEditable = 'false'
+                span.setAttribute('data-name', 'variable')
+                span.setAttribute('data-value', variableCode)
+                span.innerHTML = `<label>{${variableName}}</label>`
+                if (e.target.innerHTML === '<br>') {
+                  e.target.innerHTML = ''
+                }
+                if (node.getAttribute('data-name') === 'datasource' || node.getAttribute('data-name') === 'variable') {
+                  node.parentNode.insertBefore(span, node)
+                } else {
+                  node.appendChild(span)
+                }
+              } else {
+                const fieldId = e.dataTransfer.getData('fieldId')
+                const sourceName = e.dataTransfer.getData('sourceName') || ''
+                const fieldName = e.dataTransfer.getData('fieldName')
+                if (fieldId) {
+                  const span = document.createElement('span')
+                  span.contentEditable = 'false'
+                  span.setAttribute('data-name', 'datasource')
+                  span.setAttribute('data-datasource', sourceName)
+                  span.setAttribute('data-field', fieldId)
+                  span.innerHTML = `<label>{${fieldName}}</label>`
+                  if (e.target.innerHTML === '<br>') {
+                    e.target.innerHTML = ''
+                  }
+                  e.target.appendChild(span)
+                  const value = this.titleEditor.getContent()
+                  that.data = { ...that.data, TITLE: value }
+                } else {
+                  return true
+                }
+              }
+            }
+            this.titleEditor.setContent(this.formData.TITLE || '')
+          }
+        })
+    }
+  },
+  created () {
+    Promise.all([this.getDataSource(), this.getMessageParams(), this.getAppList()])
+      .then((data) => {
+        if (this.systemVariableList.length === 0) {
+          this.$store.dispatch('GET_SYSTEM_VARIABLE')
+        }
+        this.initTitleEditor()
+        this.initEditor()
+      })
+  }
+}
+</script>
+
+<style scoped lang="scss" >
+.container {
+  display: flex;
+}
+
+.message-data {
+  width: 260px;
+  margin-right: 20px;
+}
+.message-content {
+  flex: 1;
+}
+.module-header {
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--epx-border);
+}
+.data-tree {
+   height: 400px;
+   overflow: auto;
+}
+.data-source-modal-header {
+  font-size: var(--epx-font-size-l);
+  font-weight: 600;
+}
+.data-souce-modal-content__base {
+  padding-left: 16px;
+}
+.data-source-tree {
+  margin-top: 16px;
+  flex: 1;
+  overflow: auto;
+}
+.form-item {
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  label {
+    width: 100px;
+  }
+
+    :deep(.el-input__suffix) {
+      line-height:36px;
+    }
+
+}
+.sort-field {
+  padding-left: 16px;
+  line-height: 50px;
+  .active {
+    @include font_color_primary
+  }
+  .sort-icon {
+    font-size: var(--epx-font-size-l);
+  }
+  .el-icon-sort-down {
+    position: relative;
+    right: -9px;
+    cursor: pointer;
+  }
+  .el-icon-close {
+    float: right;
+    cursor: pointer;
+    line-height: 50px;
+    font-size: 18px;
+    &:hover {
+      @include font_color_primary
+    }
+  }
+}
+.sort-opera {
+  cursor: pointer;
+  @include font_color_primary;
+  margin-left: 16px;
+  padding: 24px 0;
+}
+.params {
+  line-height: 40px;
+}
+.params-icon {
+  float: right;
+  i {
+    padding: 0 8px;
+    border-right:  1px solid var(--epx-border);
+    &:last-child {
+      border:0
+    }
+    &:hover {
+      cursor: pointer;
+      @include font_color_primary
+    }
+  }
+}
+.data-source__scope {
+  padding: 20px;
+}
+.data-source__scope--text {
+  color: var(--epx-text);
+}
+.filter-condition-opera__popper {
+  max-height: 300px;
+  overflow: auto;
+}
+
+.params {
+  width: 100%;
+  line-height: 40px;
+  &:hover {
+    .params-icon {
+      display: block;
+    }
+  }
+}
+.params-icon {
+  display: none;
+  float: right;
+  i {
+    padding: 0 8px;
+    border-right: 1px solid var(--epx-border);
+    &:last-child {
+    border: 0;
+    }
+    &:hover {
+      cursor: pointer;
+      @include font_color_primary;
+    }
+  }
+}
+
+.message-form__item{
+  margin-bottom: 40px;
+
+    :deep(.el-input) {
+      width: 300px;
+    }
+
+}
+
+.message-form__label {
+  display: block;
+  color: var(--epx-text);
+  margin-bottom: 8px;
+}
+.editor {
+  height: 320px;
+}
+.title-editor {
+  height: 80px
+}
+</style>