epx-frame 3.5.0-shpgy.1

package/src/frame/views/FormDesign.vue

@@ -0,0 +1,1049 @@
+<template>
+  <div class="container">
+    <!-- 头部 -->
+    <div class="report-header">
+      <div class="report-title">
+        <i class="report-back el-icon-arrow-left" @click="backPage"></i>
+        <span class="report-name">
+          <span v-if="!editName">{{form.NAME}}</span>
+          <el-input v-else v-model="form.NAME" size="small" @change="setFormName"></el-input>
+          <i v-if="!editName" class="el-icon-edit-outline" @click="editName=!editName"></i>
+          <i v-else class="el-icon-circle-check" @click="setFormName"></i>
+        </span>
+        <!-- <el-button type="text" icon="el-icon-setting">设置</el-button> -->
+      </div>
+       <div class="report-operate">
+        <el-button type="text" @click="globalSetting=true" :style="{marginRight: '12px'}">全局设置</el-button>
+        <el-button size="medium"  @click="showPreviewDialog">预览</el-button>
+        <el-button size="medium" type="primary" @click="saveEditor">保存</el-button>
+      </div>
+      <el-drawer
+        title="全局设置"
+        width="380px"
+        :visible.sync="globalSetting"
+        direction="rtl"
+        >
+        <div class="attribute-pane__content" v-if="globalSetting">
+          <p class="form__label" for="">文件名</p>
+          <textarea ref="titleEditor" class="title-editor"></textarea>
+          <p class="form__label" for="">打印纸张设置</p>
+          <epx-table-form class="form-content" ref="form" :fieldsConfigs="fieldsConfigs" v-model="formData" :column="1" label-align="left"></epx-table-form>
+          <div :style="{textAlign: 'center'}">
+            <el-button size="medium" @click="globalSetting=false">取消</el-button>
+            <el-button type="primary" size="medium" @click="updateForm">保存</el-button>
+          </div>
+        </div>
+      </el-drawer>
+    </div>
+    <div class="container-inner">
+      <div class="data-source">
+        <el-tabs type="border-card">
+          <el-tab-pane label="数据源">
+            <div class="module-header">
+              <el-button size="small" type="primary" @click="addDataSource">新增</el-button>
+              <el-button size="small" type="primary" @click="editDataSource">编辑</el-button>
+              <el-button size="small" type="primary" @click="deleteDataSource">删除</el-button>
+            </div>
+            <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 slot-scope="{ node, data }">
+                <span :draggable="data.type==='meta' ?'false': 'true'"  :style="{color: data.type==='meta' && data.relationType==='1' ? 'red' : '', 'user-select': 'none'}" @dragstart="e=>drag(e, data, node, dataSource)">{{node.label}}</span>
+              </template>
+            </el-tree>
+            <el-dialog title="添加数据源" :visible.sync="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-form-field :values="dataSourceInfo" @update-value="updateDataSourceInfo" :fieldConfig="{attriName: 'NAME',dataType: 'text',attriLabel: '名称', state:'EDIT'}" />
+                    </div>
+                    <div class="form-item">
+                      <label>对象：</label>
+                      <epx-form-field :values="dataSourceInfo" @update-value="updateDataSourceInfo"
+                        :fieldConfig="{attriName: 'ENTITY',dataType: 'object',attriLabel: '对象', codeKey: 'FM_ENTITY', state:'EDIT',flag: 'process_entity_find'}" />
+                    </div>
+                    <div class="form-item">
+                      <label>对象视图：</label>
+                      <epx-object :value="dataSourceInfo.ENTITY_VIEW" @change="v=>$set(dataSourceInfo, 'ENTITY_VIEW', v? v.id : null)"
+                        :fieldConfigs="{attriName: 'ENTITY_VIEW',dataType: 'object',attriLabel: '对象视图', codeKey: 'FM_ENTITY_VIEW', state:'EDIT', scopeParams: [{field: 'ENTITY', values: dataSourceInfo.ENTITY}],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">
+                      <epx-form-scope v-model="dataSourceInfo.DATA_SCOPE" :metaId="dataSourceInfo.ENTITY" :metaViewId="dataSourceInfo.ENTITY_VIEW" :fieldConfigs="{ attriName: 'DATA_SCOPE', attriLabel: '数据范围', state: 'EDIT',modeType: ['FIXED_VALUE', 'SYSTEM_VARIABLE', 'DEFINED_DYNAMIC', 'DEFINED'], defineDynamicParams }"></epx-form-scope>
+                    </div>
+                    <!-- <epx-filter ref="filter" :metaId="dataSourceInfo.ENTITY" :show-filter="false" :fields="fields" :init-condition="initCondition" :params.sync="searchParams"
+                      :show-transform-btn="true" /> -->
+                  </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" :preventOverflowOrder="['left', 'right', 'top', 'bottom']" :tabindex="1" popover-class="sort-opera-popover">
+                        <span class="sort-opera-item" slot="reference">
+                          <i class="el-icon-plus"></i>
+                          <font>添加排序字段</font>
+                        </span>
+                        <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>
+              <span slot="footer" class="dialog-footer">
+                <el-button @click="dataSourceModal = false">取 消</el-button>
+                <el-button type="primary" @click.stop="submitDataSource">确 定</el-button>
+              </span>
+            </el-dialog>
+          </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 slot-scope="{ 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.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>
+            <el-dialog title="添加表单参数" :visible.sync="formParamModal" width="400px">
+              <div class="data-souce-modal-content data-souce-modal-content__base">
+                <div class="form-item">
+                  <label>编号：</label>
+                  <epx-form-field :values="formParam" @update-value="updateFormParam" :fieldConfig="{attriName: 'CODE', attriLabel: '编号', dataType: 'text', state:'EDIT'}" />
+                </div>
+                <div class="form-item">
+                  <label>名称：</label>
+                  <epx-form-field :values="formParam" @update-value="updateFormParam" :fieldConfig="{attriName: 'NAME', attriLabel: '名称',dataType: 'text', state:'EDIT'}" />
+                </div>
+              </div>
+              <span slot="footer" class="dialog-footer">
+                <el-button @click="formParamModal = false">取 消</el-button>
+                <el-button type="primary" @click.stop="saveFormParam">确 定</el-button>
+              </span>
+            </el-dialog>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <div class="editor-container" ref="editorContainer">
+        <div class="editor-inner">
+          <!-- <p class="form__label" for="">标题</p>
+            <textarea ref="titleEditor" class="title-editor"></textarea>
+          <p class="form__label" for="">内容</p> -->
+          <textarea ref="editor" class="editor"></textarea>
+        </div>
+      </div>
+      <el-dialog title="提交表单参数" width="520px" :visible.sync="showFormParamsDialog">
+        <div>
+          <div class="input-params" v-for="param in formParams" :key="param.ID">
+            <label>{{param.NAME}}：</label>
+            <el-input type="middle" require="true" v-model="previewParams[param.CODE]"></el-input>
+          </div>
+        </div>
+        <el-button class="preview-btn" type="primary" @click="preview">预 览</el-button>
+      </el-dialog>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { ADD_META, SWITCH_MENU_SHOW } from '@/store/actions'
+export default {
+  name: 'epx-form-design',
+  navConfigs: {
+    flag: false
+  },
+  data () {
+    return {
+      content: '',
+      form: {},
+      formData: {},
+      editName: false,
+      globalSetting: false,
+      dataSource: [],
+      dataSourceModal: false,
+      setting: {
+        height: 500
+      },
+      dataSourceInfo: {},
+      allFields: [],
+      fields: [],
+      defaultExpandKey: [],
+      defaultProps: {
+        children: 'children',
+        label: 'text'
+      },
+      initCondition: [],
+      searchParams: [],
+      formParam: {},
+      formParams: [],
+      formParamModal: false,
+      editFormParamId: '',
+      showFormParamsDialog: false,
+      previewParams: {}
+    }
+  },
+  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: 'folder',
+          name: '系统变量',
+          children: this.systemVariableList
+        }
+      ]
+    },
+    defineDynamicParams () {
+      return this.formParams.map(item => ({ id: '${' + item.CODE + '}', name: item.NAME }))
+    },
+    sortFields: {
+      get () {
+        let { SORT = '[]' } = this.dataSourceInfo
+        if (SORT === 'undefined' || SORT === '' || SORT === null) SORT = '[]'
+        return JSON.parse(SORT)
+      },
+      set (v) {
+        this.$set(this.dataSourceInfo, 'SORT', JSON.stringify(v))
+      }
+    }
+  },
+  watch: {
+    globalSetting (v) {
+      if (v) {
+        this.$nextTick(() => {
+          this.initTitleEditor()
+        })
+      }
+    },
+    'dataSourceInfo.ENTITY': {
+      handler (v) {
+        if (v) {
+          const meta = this.metas[v]
+          if (!meta) {
+            this.$store.dispatch({ // 加回调
+              type: ADD_META,
+              metaId: v
+            })
+              .then(data => {
+                if (data) {
+                  const relations = data.getRelations()
+                  this.getAllFields(relations)
+                }
+              })
+          } else {
+            const relations = meta.getRelations()
+            this.getAllFields(relations)
+          }
+        }
+      },
+      deep: true
+    },
+    dataSource: {
+      handler (v) {
+
+      },
+      deep: true
+    }
+  },
+  methods: {
+    saveEditor () {
+      const { id } = this.$query
+      this.$http.update({
+        entityId: this.$metaId,
+        'bean.ID': id,
+        // 'bean.TITLE': this.titleEditor.getContent(),
+        'bean.CONTENT': this.editor.getContent()
+      })
+        .then(() => {
+          this.$message.success('保存成功')
+          this.backPage({ reload: true })
+        }).catch(err => {
+          this.$message.error(err.message || '操作失败')
+        })
+    },
+    getDataSource () {
+      const { id } = this.$query
+      this.$http.list({
+        entityId: 'FM_FORM_SOURCE',
+        'scope.FORM': 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]
+            // 获取对应的metaId
+            if (item.ENTITY) this.$store.dispatch({ type: ADD_META, metaId: item.ENTITY })
+            const entityData = await this.getAttribute(item, { id: item.ENTITY, name: item.NAME, root: true, sourceId: item.ID })
+            this.$set(this.dataSource, index, { ...this.dataSource[index], children: entityData })
+          }
+          this.initEditor()
+        })
+    },
+    getAttribute (item, source) {
+      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
+        })
+    },
+    getFieldConfigs () {
+      this.$FieldFactory.createFields({
+        meta: this.$meta,
+        metaId: this.$metaId,
+        pageType: 'EDIT',
+        fields: ['PRINT_PAGE_SIZE', 'PRINT_PAGE_DIRECTION', 'LEFT_MARGIN', 'RIGHT_MARGIN', 'TOP_MARGIN', 'BOTTOM_MARGIN', 'IS_PAGE_NUMBER', 'PAGE_NUMBER_FORMAT', 'PAGE_NUMBER_TOP', 'PAGE_NUMBER_START']
+      })
+        .then(data => {
+          this.fieldsConfigs = [...data]
+        })
+    },
+    setFormName () {
+      this.$http.update({
+        entityId: 'FM_FORM',
+        'bean.ID': this.form.ID,
+        'bean.NAME': this.form.NAME
+      })
+        .then(() => {
+          this.editName = false
+        })
+        .catch(err => {
+          this.$message.error(err.errorText)
+        })
+    },
+    updateForm () {
+      const params = {}
+      this.formData.TITLE = this.titleEditor.getContent()
+      for (const key in this.formData) {
+        if (!key.includes('#')) {
+          params[`bean.${key}`] = this.formData[key]
+        }
+      }
+      this.$http.update({
+        entityId: 'FM_FORM',
+        ...params
+      })
+        .then(() => {
+          this.globalSetting = false
+          this.$message.success('保存成功')
+        })
+        .catch(err => {
+          this.$message.error(err.errorText)
+        })
+    },
+    getFormContent () {
+      const { id } = this.$query
+      this.$http.get({
+        entityId: this.$metaId,
+        id
+      })
+        .then(data => {
+          if (data && data.data) {
+            this.form = { ...data.data }
+            this.formData = { ...data.data }
+            this.content = data.data.CONTENT
+          }
+        })
+    },
+    initTitleEditor () {
+      const that = this
+      if (this.titleEditor) this.titleEditor.remove()
+      const editor = this.$refs.titleEditor
+      global.tinymce.init({
+        target: editor,
+        height: 80,
+        autoresize_min_height: 80,
+        plugins: 'data',
+        menubar: '',
+        toolbar: '',
+        contextmenu: 'data',
+        language: 'zh_CN',
+        dataSource: this.dataSource,
+        statusbar: false,
+        content_style: 'p {margin: 2px 0}'
+      })
+        .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) => {
+              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('span')
+                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 = ''
+                }
+                e.target.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)
+                } else {
+                  return true
+                }
+              }
+              const value = this.titleEditor.getContent()
+              that.formData = { ...that.formData, TITLE: value }
+            }
+            this.titleEditor.setContent(this.formData.TITLE || '')
+          }
+        })
+    },
+    initEditor () {
+      if (this.editor) this.editor.remove()
+      let fontsizeFormats = ''
+      for (let i = 1; i <= 50; i++) {
+        fontsizeFormats += i + 'pt '
+      }
+      const editor = this.$refs.editor
+      global.tinymce.init({
+        target: editor,
+        plugins: 'table data paper pagebreak image',
+        toolbar: 'undo redo | styleselect | bold italic underline  strikethrough | lineheight | alignleft aligncenter alignright alignjustify | outdent indent | table | paper | pagebreak | image',
+        contextmenu: 'link image imagetools table  spellchecker copy data',
+        menu: { view: { title: '视图', items: 'visualaid paper' } },
+        language: 'zh_CN',
+        dataSource: this.dataSource,
+        branding: 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
+
+      })
+        .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) => {
+              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('span')
+                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 = ''
+                }
+                e.target.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)
+                } else {
+                  return true
+                }
+              }
+            }
+            this.editor.setContent(this.content)
+          }
+        })
+    },
+    openAddDataSourceModal () {
+
+    },
+    updateDataSourceInfo (v) {
+      this.dataSourceInfo = { ...this.dataSourceInfo, ...v }
+    },
+    updateFormParam (v) {
+      this.formParam = { ...this.formParam, ...v }
+    },
+    getAllFields (relations) {
+      const flags = relations.map(item => item.flag)
+      this.$http.entityFieldTreeStore({
+        metaId: this.dataSourceInfo.ENTITY,
+        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]
+      }
+    },
+    formatSearchParams () {
+      const params = {}
+      this.searchParams.map((item, i) => {
+        if (i < this.searchParams.length - 1) {
+          params[`search.link${i + 1}`] = item.link || 'and'
+        }
+        params[`search.leftBrace${i + 1}`] = item.leftBrace || ''
+        params[`search.field${i + 1}`] = ''
+        params[`search.value${i + 1}`] = item.value
+        if (item.dateType) params[`search.dateType${i + 1}`] = item.dateType
+        params[`search.attriName${i + 1}`] = (item.field || item.attriName).replace('#', '').replace(/\|/g, '.')
+        params[`search.relation${i + 1}`] = item.relation
+        params[`search.realRelation${i + 1}`] = item.relation
+        params[`search.realValue${i + 1}`] = item.realValue || item.value
+        params[`search.rightBrace${i + 1}`] = item.rightBrace || ''
+        params[`search.metaId${i + 1}`] = this.$metaId
+        params[`search.inputMode${i + 1}`] = item.inputMode || ''
+      })
+      params.size = this.searchParams.length
+      return params
+    },
+    submitDataSource () {
+      const { id } = this.$query
+      // const params = this.formatSearchParams()
+      const { ENTITY, ENTITY_VIEW, NAME, SORT, SUB_SOURCE, DATA_SCOPE } = this.dataSourceInfo
+      this.$http.save({
+        action: this.editDataSourceId ? 'update' : 'save',
+        entityId: 'FM_FORM_SOURCE',
+        'bean.ID': this.editDataSourceId ? this.editDataSourceId : '',
+        'bean.FORM': id || '',
+        'bean.ENTITY': ENTITY || '',
+        'bean.ENTITY_VIEW': ENTITY_VIEW || '',
+        'bean.NAME': NAME || '',
+        'bean.SORT': SORT || '',
+        'bean.SUB_SOURCE': SUB_SOURCE || '',
+        'bean.DATA_SCOPE': DATA_SCOPE || '',
+        'bean.CLIENT': this.form.CLIENT,
+        'bean.SYSTEM': this.form.SYSTEM
+        // ...params
+      })
+        .then(() => {
+          this.dataSourceModal = false
+          this.editDataSourceId = ''
+          this.searchParams = []
+          this.dataSourceInfo = {}
+          this.getDataSource()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    clickDataSource (data) {
+      if (data.root) {
+        this.editDataSourceId = data.sourceId
+      }
+    },
+    addDataSource () {
+      this.editDataSourceId = ''
+      this.searchParams = []
+      this.dataSourceInfo = {}
+      this.fields = []
+      this.dataSourceModal = true
+    },
+    editDataSource (data) {
+      this.$http.get({
+        entityId: 'FM_FORM_SOURCE',
+        id: this.editDataSourceId
+      })
+        .then(data => {
+          if (data && data.data) {
+            this.dataSourceInfo = { ...data.data }
+          }
+          this.dataSourceModal = true
+        })
+        .catch(() => {
+          this.dataSourceModal = true
+        })
+      // this.dataSourceModal = this.editDataSourceId
+    },
+    deleteDataSource () {
+      this.$http.removeMulti({
+        entityId: 'FM_FORM_SOURCE',
+        ids: this.editDataSourceId
+      })
+        .then(data => {
+          this.$message.success('删除成功')
+          this.getDataSource()
+        })
+    },
+    getFormParams () {
+      const { id } = this.$query
+      this.$http.list({
+        entityId: 'FM_FORM_PARAM',
+        'scope.FORM': id
+      })
+        .then(data => {
+          this.formParams = [...data.entitys]
+        })
+      if (this.systemVariableList.length === 0) {
+        this.$store.dispatch('GET_SYSTEM_VARIABLE')
+      }
+    },
+    saveFormParam () {
+      const { id } = this.$query
+      const { CODE, NAME } = this.formParam
+      this.$http.save({
+        action: this.editFormParamId ? 'update' : 'save',
+        entityId: 'FM_FORM_PARAM',
+        'bean.ID': this.editFormParamId ? this.editFormParamId : '',
+        'bean.FORM': id,
+        'bean.CODE': CODE,
+        'bean.CLIENT': this.form.CLIENT,
+        'bean.SYSTEM': this.form.SYSTEM,
+        'bean.NAME': NAME
+      })
+        .then(() => {
+          this.formParamModal = false
+          this.editFormParamId = ''
+          this.formParam = {}
+          this.getFormParams()
+        })
+    },
+    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_FORM_PARAM',
+        ids: param.ID
+      }).then(data => {
+        this.$message.success('删除成功')
+        this.getFormParams()
+      })
+    },
+    mmConversionPx (value) {
+      var arrDPI = []
+      if (window.screen.deviceXDPI) {
+        arrDPI[0] = window.screen.deviceXDPI
+        arrDPI[1] = window.screen.deviceYDPI
+      } else {
+        var tmpNode = document.createElement('DIV')
+        tmpNode.style.cssText = 'width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden'
+        document.body.appendChild(tmpNode)
+        arrDPI[0] = parseInt(tmpNode.offsetWidth)
+        arrDPI[1] = parseInt(tmpNode.offsetHeight)
+        tmpNode.parentNode.removeChild(tmpNode)
+      }
+      var inch = value / 25.4
+      var cValue = inch * arrDPI[0]
+      return cValue
+    },
+    // 预览
+    showPreviewDialog () {
+      // 弹窗填写所需要的参数
+      this.showFormParamsDialog = true
+    },
+    preview () {
+      this.$http.save({
+        action: 'showPdf',
+        entityId: 'FM_FORM',
+        code: this.form.CODE,
+        querySystem: this.form.SYSTEM,
+        ...this.previewParams,
+        html: this.editor.getContent()
+        // title: this.titleEditor.getContent()
+      }, {
+        responseType: 'blob'
+      })
+        .then(res => {
+          const fileName = decodeURIComponent(res.filename)
+          if (fileName.indexOf('@')) {
+            const fileNameArr = fileName.split('@')
+            window.open(fileNameArr[1])
+          } else {
+            const url = window.URL.createObjectURL(res.blob)
+            window.open(url)
+          }
+          this.showFormParamsDialog = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    drag (e, data, node, dataSource) {
+      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'
+    }
+  },
+  mounted () {
+    // const A4 = this.mmConversionPx(210)
+    this.$refs.editor.style = 'width:1240px'
+  },
+  created () {
+    // 获取A4纸尺寸 210
+    this.getFormContent()
+    this.getDataSource()
+    this.getFormParams()
+    this.getFieldConfigs()
+    this.$store.commit(SWITCH_MENU_SHOW, false)
+  },
+  beforeDestroy () {
+    this.$store.commit(SWITCH_MENU_SHOW, true)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: calc(100% + 20px);
+  height: calc(100% + 20px);
+  margin: -10px;
+  // overflow: hidden;
+}
+.container-inner {
+  width: 100%;
+  height: calc(100% - 60px);
+  overflow: hidden;
+  display: flex;
+}
+.report-header {
+  height: 56px;
+  background: #fff;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e8e8e8;
+}
+.report-title {
+  display: flex;
+}
+.report-back {
+  font-size: 20px;
+  cursor: pointer;
+  position: relative;
+  top: 1px;
+}
+
+.report-name {
+  color: #222;
+  font-size: 16px;
+  margin: 0 12px 0 6px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  i {
+    font-size: 18px;
+    color: #444;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+}
+.report-operate {
+  display: flex;
+}
+.module-header {
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e3e3e3;
+}
+.data-source {
+  width: 240px;
+  margin-right: 16px;
+  height: 100%;
+  &::v-deep {
+    .el-tabs {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .el-tabs__content {
+      flex: 1;
+      overflow: hidden;
+    }
+    .el-tab-pane {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+.data-source-modal-header {
+  font-size: 16px;
+  font-weight: 600;
+}
+.data-souce-modal-content__base {
+  padding-left: 16px;
+}
+.data-source__scope {
+  padding: 16px;
+}
+.data-source-tree {
+  margin-top: 16px;
+  flex: 1;
+  overflow: auto;
+}
+.form-item {
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  label {
+    width: 100px;
+    flex-shrink: 0;
+  }
+  &::v-deep {
+    .el-input__suffix {
+      line-height:36px;
+    }
+  }
+}
+.sort-field {
+  padding-left: 16px;
+  line-height: 50px;
+  .active {
+    @include font_color_primary;
+  }
+  .sort-icon {
+    font-size: 16px;
+  }
+  .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-tree {
+  margin-top: 10px;
+}
+
+.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 #e3e3e3;
+    &:last-child {
+    border: 0;
+    }
+    &:hover {
+      cursor: pointer;
+      @include font_color_primary;
+    }
+  }
+}
+.editor-container {
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  overflow-x: auto;
+  &::v-deep {
+    .tox-tinymce {
+      margin: 0 auto;
+    }
+  }
+}
+.editor-inner {
+  display: inline-block;
+  height: 100%;
+  text-align: left;
+}
+.editor {
+  flex: 1;
+  width: 100%;
+  height: 99%;
+  display: block;
+  margin: 0 auto;
+}
+.editor-btn {
+  display: block;
+  width: 120px;
+  margin: 20px auto 0;
+}
+.input-params {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  label {
+    width: 100px;
+    white-space: pre-wrap;
+  }
+}
+.preview-btn {
+  display: block;
+  margin: 0 auto;
+}
+.attribute-pane__content {
+  padding: 0 10px;
+}
+.form__label {
+  margin: 10px 0;
+}
+.form-content {
+  &::v-deep {
+    .table-form-item__label  {
+      width: 90px;
+      padding-left: 0;
+    }
+    .table-form-item__content {
+      .el-input,  .el-input-number--medium {
+        width: 200px;
+      }
+    }
+  }
+}
+.filter-condition-opera__popper {
+  max-height: 400px;
+  overflow: auto;
+}
+</style>
+<style>
+.sort-opera-popover {
+  padding: 24px 0;
+}
+</style>