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

package/src/views/FormDesign.vue

@@ -0,0 +1,2301 @@
+<template>
+  <div class="container">
+    <!-- 头部 -->
+    <div class="report-header">
+      <div class="report-title">
+        <i class="report-back el-icon-arrow-left" @click="backConfirm"></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="primary" link icon="el-icon-setting">设置</el-button> -->
+      </div>
+      <div class="report-operate">
+        <el-dropdown v-if="languageFlag === '1'" @command="switchLanguage">
+          <el-button class="language__switch" type="small" plain>
+            <i class="language-icon epx-icon-diqiu"></i>
+            <span class="language-name">国际化（{{ currentLanguageName }}） </span>
+            <i class="el-icon-arrow-down el-icon--right"></i>
+          </el-button>
+          <template v-slot:dropdown><el-dropdown-menu>
+            <el-dropdown-item v-for="language in languageList" :class="['language-item', {'is-active': language.id === currentLanguage}]" :key="language.id" :command="language.id">
+              {{ language.name }}</el-dropdown-item>
+          </el-dropdown-menu></template>
+        </el-dropdown>
+        <el-button type="primary" link @click="globalSetting=true" :style="{marginRight: '12px'}">全局设置</el-button>
+        <el-button size="default" @click="showPreviewDialog">预览</el-button>
+        <el-button size="default" type="primary" @click="saveEditor()">保存</el-button>
+      </div>
+      <el-drawer
+        title="全局设置"
+        width="380px"
+        v-model="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>
+          <p class="form__label" for="">水印设置</p>
+          <epx-table-form class="form-content" ref="form" :fieldsConfigs="watermarkFieldsConfigs" v-model="formData" :column="1" label-align="left" :metaId="$metaId" :fieldRelation="fieldRelation">
+            <template v-slot:default="{showLabel, fieldConfigs, metaId, ruleMetaId }">
+              <epx-table-form-item
+                v-if="fieldConfigs.attriName==='WATER_MARK_TEXT'"
+                :show-label="showLabel"
+                :label="fieldConfigs.attriLabel"
+                :metaId="metaId"
+                :ruleMetaId="ruleMetaId"
+                :fieldConfigs="fieldConfigs"
+                :rules="[{
+                        required: fieldConfigs.isRequired==='1' && fieldConfigs.state!=='SEARCH',
+                        message: `${fieldConfigs.attriLabel}不能为空`
+                    }]">
+                <textarea v-show="globalSetting" ref="watermarkEditor" class="title-editor"></textarea>
+              </epx-table-form-item>
+              <epx-table-form-item
+                v-else
+                :show-label="showLabel"
+                :label="fieldConfigs.attriLabel"
+                :metaId="metaId"
+                :ruleMetaId="ruleMetaId"
+                :fieldConfigs="fieldConfigs"
+                :rules="[{
+                    required: fieldConfigs.isRequired==='1' && fieldConfigs.state!=='SEARCH',
+                    message: `${fieldConfigs.attriLabel}不能为空`
+            }]">
+              </epx-table-form-item>
+            </template>
+          </epx-table-form>
+          <div class="epx-form-item form-page__footer">
+            <label class="epx-form-item__label epx-form-item__label--left">页脚</label>
+            <div class="epx-form-item__content">
+              <el-button type="primary" block round @click="showPageFooterDialog=true">编辑页脚</el-button>
+            </div>
+          </div>
+
+          <div class="print-check">
+            <div class="print-check__head">
+              <p class="form__label print-check__title">自定义校验</p>
+              <el-button type="text" icon="el-icon-plus" @click="openCheckRule(-1)">新增</el-button>
+            </div>
+            <div class="print-check__hint">
+              <i class="el-icon-info"></i>
+              <span>任选数据源字段构建校验，所有<b>启用</b>的规则需同时返回 true 才允许打印。</span>
+            </div>
+            <div v-if="!printChecks.length" class="print-check__empty">暂无自定义校验，点击「新增」创建。</div>
+            <div v-else class="print-check__list">
+              <div v-for="(rule, index) in printChecks" :key="index" class="print-check__rule">
+                <div class="print-check__rule-top">
+                  <el-switch v-model="rule.enable" @change="syncPrintCheck"></el-switch>
+                  <span class="print-check__rule-name" :title="rule.name">{{ rule.name }}</span>
+                  <i class="el-icon-edit print-check__act" title="编辑" @click="openCheckRule(index)"></i>
+                  <i class="el-icon-delete print-check__act print-check__act--danger" title="删除" @click="deleteCheckRule(index)"></i>
+                </div>
+                <div class="print-check__rule-expr">{{ exprPreview(rule.expression) || '(空表达式)' }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div :style="{textAlign: 'center',position: 'fixed',bottom:0,width:'450px',zIndex:99,backgroundColor: '#fff'}">
+            <el-button size="default" @click="globalSetting=false">取消</el-button>
+            <el-button type="primary" size="default" @click="updateForm">保存</el-button>
+          </div>
+        </div>
+      </el-drawer>
+      <el-dialog title="编辑页脚" :width="pageSizePx + 40 + 'px'" v-model="showPageFooterDialog">
+        <div class="epx-form-item">
+          <label class="epx-form-item__label epx-form-item__label--left">添加页脚线</label>
+          <div class="epx-form-item__content">
+            <el-switch
+              :style="{marginTop: '6px'}"
+              v-model="formData.PAGE_FOOTER_LINE"
+              active-value="1"
+              inactive-value="0">
+            </el-switch>
+          </div>
+        </div>
+
+        <el-input
+          type="textarea"
+          :rows="3"
+          placeholder="请输入内容"
+          v-model="formData.PAGE_FOOTER">
+        </el-input>
+        <template v-slot:footer><span class="dialog-footer">
+          <el-button type="primary" @click="showPageFooterDialog=false">确 定</el-button>
+        </span></template>
+      </el-dialog>
+
+      <!-- 自定义校验：规则表单弹窗 -->
+      <el-dialog
+        :title="editingCheckIndex >= 0 ? '编辑自定义校验' : '新增自定义校验'"
+        v-model="checkRuleDialog"
+        width="480px"
+        :close-on-click-modal="false">
+        <div class="check-rule-form" v-if="checkRuleDialog">
+          <div class="check-rule-form__item">
+            <label class="check-rule-form__label is-required">规则名</label>
+            <el-input v-model="checkRuleForm.name" placeholder="如：未过期校验"></el-input>
+          </div>
+          <div class="check-rule-form__item">
+            <label class="check-rule-form__label is-required">表达式</label>
+            <div class="check-rule-form__expr" :class="{'is-empty': !checkRuleForm.expression}" @click="openFormulaDialog">
+              <span class="check-rule-form__expr-text">{{ exprPreview(checkRuleForm.expression) || '点击进入公式编辑器配置…' }}</span>
+              <i class="el-icon-edit-outline"></i>
+            </div>
+            <div class="check-rule-form__tip">点击上方区域打开公式编辑器，表达式需最终返回 true / false。</div>
+          </div>
+          <div class="check-rule-form__item">
+            <label class="check-rule-form__label">错误信息</label>
+            <el-input type="textarea" :rows="2" v-model="checkRuleForm.errorInfo" placeholder="校验不通过时的提示，如：单据已过期，禁止打印"></el-input>
+          </div>
+        </div>
+        <template v-slot:footer><span class="dialog-footer">
+          <el-button @click="checkRuleDialog=false">取 消</el-button>
+          <el-button type="primary" @click="confirmCheckRule">确 定</el-button>
+        </span></template>
+      </el-dialog>
+
+      <!-- 自定义校验：公式编辑器弹窗 -->
+      <el-dialog
+        v-model="formulaDialog"
+        fullscreen
+        append-to-body
+        :close-on-click-modal="false"
+        :show-close="false"
+        class="formula-editor-dialog">
+        <epx-formula-editor
+          v-if="formulaDialog"
+          :value="{ el: checkRuleForm.expression || '' }"
+          :param-list="checkParamList"
+          show-header
+          @confirm="confirmFormula"
+          @cancel="formulaDialog=false">
+        </epx-formula-editor>
+      </el-dialog>
+    </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>
+            <div class="data-source__header">
+              <el-input v-model="searchText" size="default" placeholder="请输入"></el-input>
+              <div class="data-source-operate__footer">
+                <el-checkbox v-model="showLogField">日志字段</el-checkbox>
+                <el-checkbox v-model="showSubField">子集字段</el-checkbox>
+              </div>
+            </div>
+            <el-tree
+              class="data-source-tree"
+              ref="fieldTree"
+              :data="showDataSource"
+              :props="{label: 'name', children: 'children'}"
+              node-key="key"
+              :auto-expand-parent="false"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              render-after-expand
+              :check-on-click-node="true"
+              :highlight-current="true"
+              draggable
+              @node-drag-start="dragDataSource"
+              @node-drop="dropDataSource"
+              :allow-drop="allowDrop"
+              @node-click="clickDataSource"
+            >
+              <template v-slot="{ node, data }">
+                <span :style="{color: data.type==='meta' && data.relationType==='1' ? 'red' : '', 'user-select': 'none'}">
+                  <i v-if="data.load" class="el-icon-loading" />
+                  {{node.label}}
+                </span>
+              </template>
+            </el-tree>
+            <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-table-form-item
+                        v-model="dataSourceInfo.NAME"
+                        :fieldConfigs="{attriName: 'NAME',dataType: 'text',attriLabel: '名称', state:'EDIT'}">
+                      </epx-table-form-item>
+                    </div>
+                    <div class="form-item">
+                      <label>对象：</label>
+                      <epx-table-form-item :value="{id: dataSourceInfo.ENTITY, name: dataSourceInfo['ENTITY#']}" @change="v=> {
+                          dataSourceInfo['ENTITY'] = v?v.id: ''
+                          dataSourceInfo['ENTITY#']=v?v.name: ''
+                        }"
+                        :fieldConfigs="{attriName: 'ENTITY',dataType: 'object',attriLabel: '对象', codeKey: 'FM_ENTITY', state:'EDIT',flag: 'process_entity_find'}">
+                      </epx-table-form-item>
+                    </div>
+                    <div class="form-item">
+                      <label>对象视图：</label>
+                      <epx-table-form-item :value="{id: dataSourceInfo.ENTITY_VIEW, name: dataSourceInfo['ENTITY_VIEW#']}" @change="v=> {
+                          dataSourceInfo['ENTITY_VIEW'] = v?v.id: ''
+                          dataSourceInfo['ENTITY_VIEW#']=v?v.name: ''
+                        }"
+                        :fieldConfigs="{attriName: 'ENTITY_VIEW',dataType: 'object',attriLabel: '对象视图', codeKey: 'FM_ENTITY_VIEW', state:'EDIT', scopeParams: [{field: 'ENTITY', values: dataSourceInfo.ENTITY}],flag: 'process_entity_view_find'}">
+                      </epx-table-form-item>
+                    </div>
+                    <div class="form-item">
+                      <label>关联对象：</label>
+                      <div class="link-entity-trigger">
+                        <el-popover trigger="click" placement="bottom-start" width="320" popper-class="link-entity-popper">
+                          <template v-slot:reference><el-input :model-value="linkEntityLabel" placeholder="请选择" readonly suffix-icon="el-icon-arrow-down" size="default"></el-input></template>
+                          <div v-if="linkEntityTree.length" class="link-entity-tree">
+                            <el-tree
+                              ref="linkEntityTree"
+                              :data="linkEntityTree"
+                              show-checkbox
+                              check-strictly
+                              node-key="flag"
+                              :props="{label: 'title', children: 'childrens'}"
+                              :default-checked-keys="linkEntityCheckedKeys"
+                              @check="onLinkEntityCheck"
+                            ></el-tree>
+                          </div>
+                          <div v-else class="link-entity-empty">{{ dataSourceInfo.ENTITY ? '无可选数据' : '请先选择对象' }}</div>
+                        </el-popover>
+                      </div>
+                    </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" :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">
+                          <epx-meta-field-library :metaId="dataSource.ENTITY" :fields="allFields" @select="addSortField"></epx-meta-field-library>
+                        </div>
+                      </el-popover>
+                    </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-if="this.groupSortFields">
+                      {{getText(this.groupSortFields)}}
+                      <i class="el-icon-close" @click="deleteGroupSort(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">
+                          <epx-meta-field-library :metaId="dataSource.ENTITY" :fields="allFields" @select="addGroupSortField"></epx-meta-field-library>
+                        </div>
+                      </el-popover>
+                    </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">
+                      <el-switch v-model="dataSourceInfo.IS_MAIN_SOUCE" active-value='1' inactive-value='0'></el-switch>
+                    </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">
+                      <el-switch v-model="loadRelationEntity" active-value='1' inactive-value='0'></el-switch>
+                    </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-table-form-item
+                        v-model="dataSourceInfo.DATA_LIMIT"
+                        :fieldConfigs="{attriName: 'DATA_LIMIT',dataType: 'num',attriLabel: '数据源最大条数', state:'EDIT'}">
+                      </epx-table-form-item>
+                    </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="submitDataSource">确 定</el-button>
+              </span></template>
+            </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 v-slot="{ node, data }">
+                <div class="params">
+                  <span :draggable="data.type==='variable' || data.type==='process' ?'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' && data.type!=='process'">
+                    <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="添加表单参数" v-model="formParamModal" width="400px">
+              <div class="data-souce-modal-content data-souce-modal-content__base">
+                <div class="form-item">
+                  <label class="table-form-item-label">编号：</label>
+                  <epx-table-form-item v-model="formParam.CODE"
+                    :fieldConfigs="{attriName: 'CODE', attriLabel: '编号', dataType: 'text', state:'EDIT'}">
+                  </epx-table-form-item>
+                </div>
+                <div class="form-item">
+                  <label class="table-form-item-label">名称：</label>
+                  <epx-table-form-item v-model="formParam.NAME"
+                    :fieldConfigs="{attriName: 'NAME', attriLabel: '名称', dataType: 'text', state:'EDIT'}">
+                  </epx-table-form-item>
+                </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="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" :style="{width: pageSizePx +'px'}"></textarea>
+        </div>
+      </div>
+      <el-dialog title="提交表单参数" width="520px" v-model="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, mapGetters } from 'vuex'
+import { ADD_META } from '@epxing/core/src/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: {},
+      linkEntityTree: [],
+      allFields: [],
+      fields: [],
+      defaultExpandKey: [],
+      defaultProps: {
+        children: 'children',
+        label: 'text'
+      },
+      initCondition: [],
+      searchParams: [],
+      formParam: {},
+      formParams: [],
+      formParamModal: false,
+      editFormParamId: '',
+      showFormParamsDialog: false,
+      previewParams: {},
+      pageSize: 'A4',
+      searchText: '',
+      showLogField: false,
+      showSubField: true,
+      formFunction: [],
+      currentLanguage: this.defaultLanguage,
+      languageContent: {},
+      showPageFooterDialog: false,
+      pageSizePx: 595,
+      fieldRelation: [],
+      watermarkFieldsConfigs: [],
+      processParams: [],
+      entityDataMap: {},
+      // 自定义校验规则列表 [{ name, expression, errorInfo, enable }]
+      printChecks: [],
+      checkRuleDialog: false,
+      editingCheckIndex: -1,
+      checkRuleForm: { name: '', expression: '', errorInfo: '', enable: true },
+      formulaDialog: false
+    }
+  },
+  computed: {
+    ...mapState({
+      systemVariableList: state => state.config.systemVariableList, // 当前导航菜单
+      showMenu: state => state.config.showMenu,
+      showAppNav: state => state.config.showAppNav
+    }),
+    ...mapGetters([
+      'getMetaViewFields'
+    ]),
+    variableTree () {
+      return [
+        {
+          type: 'folder',
+          name: '自定义参数',
+          children: this.formParams.map(item => ({ ...item, name: item.NAME, value: item.CODE }))
+        },
+        {
+          type: 'folder',
+          name: '系统变量',
+          children: this.systemVariableList
+        },
+        {
+          value: 'processParams',
+          type: 'folder',
+          name: '流程参数',
+          children: this.processParams
+        }
+      ]
+    },
+    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.dataSourceInfo.SORT = JSON.stringify(v)
+      }
+    },
+    groupSortFields: {
+      get () {
+        let { GROUP_ORDER_FIELD = '' } = this.dataSourceInfo
+        if (GROUP_ORDER_FIELD === 'undefined' || GROUP_ORDER_FIELD === '' || GROUP_ORDER_FIELD === null) GROUP_ORDER_FIELD = ''
+        return GROUP_ORDER_FIELD
+      },
+      set (v) {
+        this.dataSourceInfo.GROUP_ORDER_FIELD = v
+      }
+    },
+    loadRelationEntity: {
+      get () {
+        return this.dataSourceInfo.LOAD_RELATION_ENTITY || '1'
+      },
+      set (v) {
+        this.dataSourceInfo.LOAD_RELATION_ENTITY = v
+      }
+    },
+    linkEntityCheckedKeys () {
+      const flags = this.dataSourceInfo.LINK_ENTITY
+      return flags ? flags.split(',').filter(Boolean) : []
+    },
+    linkEntityLabel () {
+      const keys = this.linkEntityCheckedKeys
+      if (!keys.length) return ''
+      const titles = []
+      const walk = (nodes) => {
+        if (!nodes) return
+        nodes.forEach(node => {
+          if (keys.includes(node.flag)) titles.push(node.title)
+          if (node.childrens) walk(node.childrens)
+        })
+      }
+      walk(this.linkEntityTree)
+      // 关联对象树异步加载，未就绪时回退到已保存的名称
+      return titles.length ? titles.join(',') : (this.dataSourceInfo['LINK_ENTITY#'] || '')
+    },
+    showDataSource () {
+      const formatFields = (fields) => {
+        return fields.filter(item => {
+          if (!this.showLogField && ['ID', 'LOG_C_TIME', 'LOG_C_USER', 'LOG_U_TIME', 'LOG_U_USER'].includes(item.code)) {
+            return false
+          }
+          if (!this.showSubField && (item.relationType === '1' || item.isSub)) {
+            return false
+          }
+          if (item.children) {
+            item.children = formatFields(item.children)
+          }
+          return true
+        })
+      }
+
+      return this.dataSource.map(item => {
+        if (this.entityDataMap[item.id]) {
+          const fields = this.$_.cloneDeep(this.entityDataMap[item.id])
+          item.children = formatFields(fields)
+        }
+        return item
+      })
+    },
+    languageFlag () {
+      const { LANGUAGE_FLAG: languageFlag } = this.clientConfig
+      return languageFlag
+    },
+    defaultLanguage () {
+      const { LANGUAGE_DEFAULT: defaultLanguage } = this.clientConfig
+      return defaultLanguage
+    },
+    currentLanguageName () {
+      const language = this.languageList.find(item => item.id === this.currentLanguage) || {}
+      return language.name || '默认'
+    },
+    languageList () {
+      const { LANGUAGES: languages = '', 'LANGUAGES#': languageNames = '' } = this.clientConfig
+      // 获取当前语言
+      if (!languages) return []
+      const languageIdList = languages.split(',')
+      const languageNameList = languageNames.split(',')
+      const languageList = languageIdList.map((item, index) => ({ id: item, name: languageNameList[index] }))
+      return languageList
+    },
+    getText () {
+      return field => {
+        // 查寻字段名
+        const getLabel = (arr) => {
+          for (const item of arr) {
+            if ((item.linkCode || item.code) === field) return item.text
+            if (item.children) {
+              const label = getLabel(item.children)
+              if (label) return label
+            }
+          }
+        }
+        return getLabel(this.allFields) || field
+      }
+    },
+    // 自定义校验公式编辑器的参数库：只取主数据源（无主则取第一个），按 数据源 → 对象 → 字段 组织成树。
+    // getEntityMetaView 返回的 children 是一层 type==='meta' 节点的扁平数组：
+    //   无 linkFlag 的 meta 节点为主对象（其 children 即主对象字段），有 linkFlag 的为关联对象。
+    // 变量规则：主对象字段 token = 字段编号；关联对象字段 token = 关联标识符大写_字段编号。
+    checkParamList () {
+      const source = this.dataSource.find(item => item.isMain) || this.dataSource[0]
+      if (!source || !source.children || !source.children.length) return []
+      // 去掉可能存在的链路前缀（如 ROLE|USER_ID 取 USER_ID）
+      const bare = (v) => String(v == null ? '' : v).split('|').pop()
+      const toField = (f, prefix) => ({
+        code: prefix ? `${prefix}_${bare(f.code)}` : bare(f.code),
+        text: f.text || f.name,
+        type: f.dataType || 'string'
+      })
+      const objects = []
+      source.children.forEach(node => {
+        if (node.type !== 'meta') return
+        const flag = bare(node.linkFlag || node.flag).toUpperCase()
+        // 只取字段叶子（排除嵌套的更深层关联 meta 节点）
+        const leaves = (node.children || []).filter(f => f.type !== 'meta' && bare(f.code))
+        if (!leaves.length) return
+        // type:'object' 让编辑器把对象渲染为可展开的嵌套节点
+        if (flag) {
+          objects.push({ code: flag, text: node.text || node.name, type: 'object', children: leaves.map(f => toField(f, flag)) })
+        } else {
+          // 主对象置于最前
+          objects.unshift({ code: node.code || 'MAIN', text: node.text || node.name, type: 'object', children: leaves.map(f => toField(f, '')) })
+        }
+      })
+      if (!objects.length) return []
+      return [{ code: source.sourceId || source.key, text: source.name, children: objects }]
+    }
+  },
+  watch: {
+    globalSetting (v) {
+      if (v) {
+        this.$nextTick(() => {
+          this.initTitleEditor()
+          setTimeout(() => {
+            this.initWatermarkEditor()
+          }, 500)
+        })
+      }
+    },
+    '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)
+          }
+          this.getLinkEntityTree(v)
+        } else {
+          this.linkEntityTree = []
+        }
+      },
+      deep: true
+    },
+    'formData.WATER_MARK_TYPE' (v) {
+      if (v === 'text') {
+        this.$nextTick(() => {
+          this.initWatermarkEditor()
+        })
+      }
+    },
+    dataSource: {
+      handler (v) {
+        // 更新TinyMCE编辑器的dataSource参数
+        if (this.editor && this.editor.options) {
+          const newDataSource = [...this.dataSource, {
+            type: 'variable',
+            name: '系统变量',
+            children: this.systemVariableList
+          }, {
+            type: 'variable',
+            name: '表单函数',
+            children: this.formFunction.map(item => ({ name: item.name, code: '#{' + item.code + '}' }))
+          },
+          {
+            type: 'process',
+            name: '流程参数',
+            children: this.processParams.map(item => ({ name: item.name, code: item.id }))
+          }]
+
+          // 使用TinyMCE 5的options API
+          this.editor.options.set('dataSource', newDataSource)
+
+          // 调用插件更新方法
+          this.updateTinyMCEDataSource()
+        }
+      },
+      deep: true
+    },
+    searchText (v) {
+      if (this.timer) {
+        this.timer = null
+        clearTimeout(this.timer)
+      }
+      this.timer = setTimeout(() => {
+        this.$refs.fieldTree.filter(this.searchText)
+        clearTimeout(this.timer)
+        this.timer = null
+      }, 200)
+    },
+    showLogField () {
+      this.$nextTick(() => {
+        this.$refs.fieldTree.filter(this.searchText)
+      })
+    },
+    showSubField () {
+      this.$nextTick(() => {
+        this.$refs.fieldTree.filter(this.searchText)
+      })
+    }
+  },
+  methods: {
+    // 更新TinyMCE插件的数据源
+    updateTinyMCEDataSource () {
+      this.$nextTick(() => {
+        // 方式1：通过插件返回的API
+        if (this.editor && this.editor.plugins && this.editor.plugins.data && this.editor.plugins.data.updateDataSource) {
+          this.editor.plugins.data.updateDataSource()
+          return
+        }
+
+        // 方式2：通过编辑器实例直接调用
+        if (this.editor && this.editor.updateDataSource) {
+          this.editor.updateDataSource()
+        }
+      })
+    },
+    backConfirm () {
+      this.saveContent()
+      let changeFlag = this.content !== this.initContent
+      if (!changeFlag) {
+        for (const key in this.languageContent) {
+          if (this.languageContent[key] !== this.initLanguageContent[key]) {
+            changeFlag = true
+            break
+          }
+        }
+      }
+      if (changeFlag) {
+        this.$confirm('检测到您当前的报表配置还未进行保存操作，点击保存按钮即可执行保存操作', '操作提示', {
+          confirmButtonText: '保存',
+          cancelButtonText: '不保存',
+          type: 'warning'
+        }).then(() => {
+          this.saveEditor(this.backPage)
+        })
+          .catch(() => {
+            this.backPage()
+          })
+      } else {
+        this.backPage()
+      }
+    },
+    switchLanguage (v) {
+      if (this.currentLanguage === v) return
+      this.$confirm('切换语种后，进入该语种报表内容配置页面，当前页面的配置内容可通过切换再次展示，继续操作请点击确认。', '操作提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.saveContent()
+        this.currentLanguage = v
+        setTimeout(() => {
+          this.initEditor(v === this.defaultLanguage ? this.content || '' : this.languageContent[v] || '')
+        }, 10)
+      })
+    },
+    saveContent () {
+      const editorContent = this.ensureI18nKeys(this.editor.getContent())
+      if (!this.currentLanguage || this.currentLanguage === this.defaultLanguage) {
+        this.content = editorContent
+      } else {
+        this.languageContent[this.currentLanguage] = editorContent
+      }
+    },
+    ensureI18nKeys (content) {
+      if (!content) return content
+      const document = new window.DOMParser().parseFromString(content, 'text/html')
+      const textAttributes = ['title', 'placeholder', 'alt', 'aria-label', 'data-message', 'data-error']
+      const pureBinding = /^(?:\$\{[^}]+}|#\{[^}]+}|\{\{[^}]+}}|\{[A-Za-z0-9_.-]+})$/
+      // 用 RegExp 构造器写字符串转义（而非正则字面量 /[A-Za-z㐀-鿿]/）单纯是绕开 Edit
+      // 工具链对 \uXXXX 正则字面量转义会被中间层归一化成实际宽字符的问题，效果等价；提到循环外
+      // 只编译一次，避免每个 DOM 节点都重新编译一次正则。
+      const hasLetter = new RegExp('[A-Za-z\\u3400-\\u9fff]')
+      const isTranslatable = value => {
+        const text = (value || '').trim()
+        return text && !pureBinding.test(text) && hasLetter.test(text)
+      }
+      const stablePath = element => {
+        const path = []
+        let current = element
+        while (current && current !== document.body) {
+          const tag = current.tagName.toLowerCase()
+          const siblings = Array.from(current.parentElement.children)
+            .filter(item => item.tagName === current.tagName)
+          path.unshift(tag + '_' + (siblings.indexOf(current) + 1))
+          current = current.parentElement
+        }
+        return path.join('.')
+      }
+      const stableHash = value => {
+        let hash = 2166136261
+        for (let index = 0; index < value.length; index++) {
+          hash ^= value.charCodeAt(index)
+          hash = Math.imul(hash, 16777619)
+        }
+        return (hash >>> 0).toString(36)
+      }
+      Array.from(document.body.querySelectorAll('*')).forEach(element => {
+        if (element.closest('script,style,noscript,template,[data-i18n-ignore]')) return
+        const hasText = Array.from(element.childNodes)
+          .some(node => node.nodeType === 3 && isTranslatable(node.textContent))
+        const hasTextAttribute = textAttributes
+          .some(attribute => element.hasAttribute(attribute) && isTranslatable(element.getAttribute(attribute)))
+        if ((hasText || hasTextAttribute) &&
+          !element.hasAttribute('data-i18n-key') &&
+          !element.id &&
+          !element.getAttribute('name')) {
+          element.setAttribute('data-i18n-key', 'node_' + stableHash(stablePath(element)))
+        }
+      })
+      return document.body.innerHTML
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.text && data.text.indexOf(value) !== -1
+    },
+    saveEditor (cb) {
+      this.saveContent()
+      const { id } = this.$query
+      this.$http.update({
+        entityId: this.$metaId,
+        'bean.ID': id,
+        // 'bean.TITLE': this.titleEditor.getContent(),
+        'bean.CONTENT': this.content,
+        'bean.LANGUAGE_PARAM': {
+          CONTENT: this.languageContent
+        }
+      })
+        .then(() => {
+          this.$message.success('保存成功')
+          // this.backPage({ reload: true })
+          this.initContent = this.content
+          this.initLanguageContent = this.$_.cloneDeep(this.languageContent)
+          cb && cb()
+        }).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 => ({ key: item.ID, id: item.ENTITY, name: item.NAME, loadRelationEntity: item.LOAD_RELATION_ENTITY, isMain: item.IS_MAIN_SOUCE === '1', root: true, sourceId: item.ID }))
+          for (let index = 0; index < data.entitys.length; index++) {
+            const item = data.entitys[index]
+            // 获取对应的metaId
+            if (item.ENTITY) {
+              if (!this.entityDataMap[item.ENTITY]) {
+                this.$store.dispatch({ type: ADD_META, metaId: item.ENTITY })
+                this.dataSource[index] = { ...this.dataSource[index], load: true }
+                const entityData = await this.getAttribute(item, { id: item.ENTITY, name: item.NAME, root: true, sourceId: item.ID })
+                this.entityDataMap[item.ENTITY] = entityData
+                this.dataSource[index] = { ...this.dataSource[index], children: entityData, load: false }
+              } else {
+                this.dataSource[index] = { ...this.dataSource[index], children: this.entityDataMap[item.ENTITY] }
+              }
+            }
+          }
+          if (this.editor) {
+            const content = this.editor.getContent()
+            if (content) this.content = content
+          }
+          // 添加系统变量
+          this.initEditor()
+        })
+    },
+    getAttribute (item, source) {
+      const { ENTITY, ENTITY_VIEW, LOAD_RELATION_ENTITY } = item
+      return this.$http.get({
+        action: 'getEntityMetaView',
+        entityId: 'FM_ENTITY_VIEW',
+        metaId: ENTITY,
+        metaViewId: ENTITY_VIEW,
+        allSub: LOAD_RELATION_ENTITY !== '0'
+      })
+        .then(data => {
+          const formatData = (arr) => {
+            arr.forEach(item => {
+              item.field = item.type === 'meta' ? item.linkFlag : (item.linkCode || item.code)
+              item.relationSort = item.relationType
+              if (!item.codeKey) item.codeKey = item.relatedEntity
+              item.id = item.field
+              item.key = item.field + '_' + this.$util.genId()
+              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
+        })
+    },
+    getFieldRelation () {
+      this.$http.$post({
+        action: 'getFieldRelation',
+        entityId: 'FM_ATTRIBUTE_RELATION',
+        metaId: this.$metaId
+      })
+        .then(data => {
+          this.fieldRelation = data.field_relation
+        })
+    },
+    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', 'WIDTH', 'HEIGHT', 'CHINESE_LAYOUT', 'TEXT_ALIGNMENT_JUSTIFIED', 'IS_PAGE_NUMBER', 'PAGE_NUMBER_FORMAT', 'PAGE_NUMBER_TOP', 'PAGE_NUMBER_START', 'PORTRAIT', 'PORTRAIT_NUMBER_START', 'PAGE_NUMBER_ALIGN', 'PROCESS']
+      })
+        .then(data => {
+          this.fieldsConfigs = [...data]
+        })
+      this.$FieldFactory.createFields({
+        meta: this.$meta,
+        metaId: this.$metaId,
+        pageType: 'EDIT',
+        defaultFieldConfigs: {
+          WATER_MARK_TYPE: {
+            value: 'none'
+          },
+          WATER_MARK_LEAN: {
+            value: 40
+          },
+          WATER_MARK_DENSITY: {
+            value: '2'
+          }
+        },
+        fields: [{ attriName: 'WATER_MARK_TYPE', value: 'none' }, 'WATER_MARK_PICTURE', 'WATER_MARK_PIC_HEIGHT', 'WATER_MARK_PIC_WIDTH', 'WATER_MARK_TEXT', 'WATER_MARK_FONT_SIZE', 'WATER_MARK_FONT_COLOR', 'WATER_MARK_FONT_BLOD', 'WATER_MARK_LEAN', 'WATER_MARK_SPARENCY', 'WATER_MARK_DENSITY']
+      })
+        .then(data => {
+          this.watermarkFieldsConfigs = [...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.syncPrintCheck()
+      this.formData.TITLE = this.titleEditor.getContent()
+      if (this.watermarkEditor) this.formData.WATER_MARK_TEXT = this.watermarkEditor.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.getProcessParams()
+          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 }
+            const defaultValue = {
+              WATER_MARK_TYPE: 'none',
+              WATER_MARK_LEAN: 40,
+              WATER_MARK_DENSITY: '2'
+            }
+            for (const key in defaultValue) {
+              if (!this.formData[key]) {
+                this.formData[key] = defaultValue[key]
+              }
+            }
+            this.parsePrintCheck()
+            this.content = data.data.CONTENT
+            this.languageContent = data.data.LANGUAGE_PARAM ? data.data.LANGUAGE_PARAM.CONTENT || {} : {}
+            this.initContent = data.data.CONTENT
+            this.initLanguageContent = this.$_.cloneDeep(this.languageContent)
+            this.getPagePx()
+          }
+        })
+    },
+    async initTitleEditor () {
+      const that = this
+      if (this.titleEditor) this.titleEditor.remove()
+      const editor = this.$refs.titleEditor
+      await this.$util.usePlugin('tinymce')
+      globalThis.tinymce.init({
+        target: editor,
+        height: 80,
+        autoresize_min_height: 80,
+        plugins: 'data',
+        menubar: false,
+        toolbar: false,
+        contextmenu: 'data',
+        language: 'zh_CN',
+        dataSource: this.dataSource,
+        statusbar: false,
+        content_style: 'p {margin: 2px 0}',
+        promotion: false
+      })
+        .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' || type === 'process') {
+                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 data-mce-bogus="1">') {
+                  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 data-mce-bogus="1">') {
+                    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 || '')
+          }
+        })
+    },
+    async initWatermarkEditor () {
+      const that = this
+      const editor = this.$refs.watermarkEditor
+      if (!editor) return
+      if (this.watermarkEditor) this.watermarkEditor.remove()
+      await this.$util.usePlugin('tinymce')
+      globalThis.tinymce.init({
+        target: editor,
+        height: 80,
+        autoresize_min_height: 80,
+        plugins: 'data',
+        menubar: false,
+        toolbar: false,
+        contextmenu: 'data',
+        language: 'zh_CN',
+        dataSource: [...this.dataSource, {
+          type: 'variable',
+          name: '系统变量',
+          children: this.systemVariableList
+        }],
+        statusbar: false,
+        content_style: 'p {margin: 2px 0}',
+        promotion: false
+      })
+        .then(editors => {
+          this.watermarkEditor = editors[0]
+          if (this.watermarkEditor) {
+            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' || type === 'process') {
+                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 data-mce-bogus="1">') {
+                  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>{${sourceName}.${fieldName}}</label>`
+                  if (e.target.innerHTML === '<br data-mce-bogus="1">') {
+                    e.target.innerHTML = ''
+                  }
+                  e.target.appendChild(span)
+                  const value = this.watermarkEditor.getContent()
+                  that.formData = { ...that.formData, WATER_MARK_TEXT: value }
+                } else {
+                  return true
+                }
+              }
+            }
+            this.watermarkEditor.setContent(this.formData.WATER_MARK_TEXT || '')
+          }
+        })
+    },
+    async initEditor (content) {
+      const that = this
+      const { FORM_EXTEND_FONTS = '' } = this.clientConfig
+      if (this.editor) this.editor.remove()
+      let fontsizeFormats = ''
+      for (let i = 1; i <= 50; i++) {
+        fontsizeFormats += i + 'pt '
+      }
+      const editor = this.$refs.editor
+      await this.$util.usePlugin('tinymce')
+      globalThis.tinymce.init({
+        target: editor,
+        plugins: 'table data paper pagebreak image code br supercode',
+        toolbar: ['undo redo | styles | bold italic underline  strikethrough | lineheight | alignleft aligncenter alignright alignjustify | firstlineindent | table | paper | pagebreak | image',
+          'fontfamily | fontsize | forecolor backcolor supercode'
+        ],
+        setup: function (editor) {
+          editor.on('init', () => {
+            editor.formatter.register('firstlineindent', {
+              selector: 'p,h1,h2,h3,h4,h5,h6,div,td,th,li',
+              styles: { 'text-indent': '2em' }
+            })
+          })
+          editor.ui.registry.addToggleButton('firstlineindent', {
+            icon: 'indent',
+            tooltip: '首行缩进',
+            onAction: function (api) {
+              editor.formatter.toggle('firstlineindent')
+              api.setActive(editor.formatter.match('firstlineindent'))
+            },
+            onSetup: function (api) {
+              const changed = editor.formatter.formatChanged('firstlineindent', (state) => api.setActive(state))
+              return () => changed.unbind()
+            }
+          })
+        },
+        contextmenu: 'link image imagetools table  spellchecker copy data',
+        menu: {
+          view: { title: '视图', items: 'visualaid code paper' },
+          insert: { title: '插入', items: 'image table br' }
+        },
+        promotion: false,
+        language: 'zh_CN',
+        supercode: {
+          theme: 'chrome',
+          fontSize: 14,
+          wrap: true,
+          autocomplete: true,
+          iconName: 'sourcecode',
+          language: 'html',
+          shortcut: true,
+          aceCss: 'your custom CSS rules or fonts for ace',
+          fontFamily: 'Monospace'
+        },
+        dataSource: [...this.dataSource, {
+          type: 'variable',
+          name: '系统变量',
+          children: this.systemVariableList
+        }, {
+          type: 'variable',
+          name: '表单函数',
+          children: this.formFunction.map(item => ({ name: item.name, code: '#{' + item.code + '}' }))
+        },
+        {
+          type: 'process',
+          name: '流程参数',
+          children: this.processParams.map(item => ({ name: item.name, code: item.id }))
+        }],
+        branding: false,
+        images_upload_handler: (blobInfo) => {
+          var file = blobInfo.blob()
+          return this.$http.save({
+            action: 'upload',
+            file: file
+          }, {
+            requestType: 'formData'
+          })
+            .then(data => {
+              if (data && data.bean) {
+                return 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 })
+                }
+              })
+          }
+        },
+        content_style: 'p {margin: 2px 0}',
+        lineheight_formats: '1 1.1 1.2 1.3 1.4 1.5 2 2.5 3',
+        font_family_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;仿宋=FangSong;华文中宋=STZhongsong;方正苏新诗柳楷简体;汉仪中黑简;方正仿宋_GBK;方正黑体_GBK;方正楷体_GBK;方正小标宋简体;仿宋_GB2312;' + FORM_EXTEND_FONTS,
+        font_size_formats: fontsizeFormats,
+        relative_urls: false,
+        remove_script_host: false
+      })
+        .then(editors => {
+          this.editor = editors[0]
+          if (this.editor) {
+            this.editor.editorContainer.style.width = this.pageSizePx + 'px'
+            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' || type === 'process') {
+                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')
+                if (type === 'process') {
+                  span.setAttribute('data-name', 'process')
+                }
+                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('font')
+                  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 = ''
+                  }
+                  if (node.getAttribute('data-name') === 'datasource' || node.getAttribute('data-name') === 'variable') {
+                    node.parentNode.insertBefore(span, node)
+                  } else {
+                    node.appendChild(span)
+                  }
+                } else {
+                  return true
+                }
+              }
+            }
+            this.editor.setContent(content || 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)
+      const fields = this.getMetaViewFields(this.dataSourceInfo.ENTITY)
+      if (fields) {
+        this.allFields = fields
+        this.defaultExpandKey = [fields[0].code]
+      } else {
+        this.$store.dispatch({
+          type: 'ADD_META_VIEW_FIELDS',
+          metaId: this.dataSourceInfo.ENTITY
+        })
+          .then((fields) => {
+            this.allFields = fields.filter(item => item.relationType !== '1')
+            this.defaultExpandKey = [fields[0].code]
+          })
+      }
+    },
+    addSortField (field) {
+      if (!field.leaf) return
+      const code = field.linkCode || field.code
+      const sortField = this.sortFields.find(item => item.code === code)
+      if (!sortField) {
+        this.sortFields = [...this.sortFields, { code, text: field.text, sort: 'asc' }]
+      }
+    },
+    addGroupSortField (field) {
+      if (!field.leaf) return
+      const code = field.linkCode || field.code
+      this.groupSortFields = code
+    },
+    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]
+      }
+    },
+    deleteGroupSort (field) {
+      this.groupSortFields = ''
+    },
+    getLinkEntityTree (mainEntity) {
+      this.$http.$get({
+        entityId: 'FM_ENTITY_RELATION',
+        action: 'getAllEntityRelationTree',
+        mainEntity
+      })
+        .then(data => {
+          this.linkEntityTree = Array.isArray(data) ? data : (data && data.data ? data.data : [])
+        })
+        .catch(() => {
+          this.linkEntityTree = []
+        })
+    },
+    onLinkEntityCheck () {
+      const tree = this.$refs.linkEntityTree
+      if (!tree) return
+      const checked = tree.getCheckedNodes()
+      this.dataSourceInfo.LINK_ENTITY = checked.map(item => item.flag).join(',')
+      this.dataSourceInfo['LINK_ENTITY#'] = checked.map(item => item.title).join(',')
+    },
+    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
+    },
+    dropDataSource (node, current, type, event) {
+      const str = this.showDataSource.reduce((str, item, index) => (str += (item.sourceId) + ':' + index + ','), '')
+      const params = {
+        action: 'moveList',
+        entityId: 'FM_FORM_SOURCE',
+        orderString: str
+      }
+      this.$http.$post(params)
+        .then(data => {})
+    },
+    allowDrop (draggingNode, dropNode, type) {
+      return draggingNode.data.root && dropNode.data.root && type !== 'inner'
+    },
+    submitDataSource () {
+      const { id } = this.$query
+      // const params = this.formatSearchParams()
+      const { ENTITY, ENTITY_VIEW, LINK_ENTITY, NAME, SORT, GROUP_ORDER_FIELD, IS_MAIN_SOUCE, SUB_SOURCE, DATA_SCOPE, LOAD_RELATION_ENTITY } = 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.LINK_ENTITY': LINK_ENTITY || '',
+        'bean.NAME': NAME || '',
+        'bean.SORT': SORT || '',
+        'bean.GROUP_ORDER_FIELD': GROUP_ORDER_FIELD || '',
+        'bean.SUB_SOURCE': SUB_SOURCE || '',
+        'bean.DATA_SCOPE': DATA_SCOPE || '',
+        'bean.IS_MAIN_SOUCE': IS_MAIN_SOUCE || '0',
+        'bean.LOAD_RELATION_ENTITY': LOAD_RELATION_ENTITY || '1',
+        'bean.CLIENT': this.form.CLIENT,
+        'bean.SYSTEM': this.form.SYSTEM
+        // ...params
+      })
+        .then((data) => {
+          this.dataSourceModal = false
+          this.searchParams = []
+          this.dataSourceInfo = {}
+          let index = -1
+          if (!this.editDataSourceId) {
+            this.dataSource.push({ key: data, id: ENTITY, name: NAME, loadRelationEntity: LOAD_RELATION_ENTITY, root: true, sourceId: data })
+            index = this.dataSource.length - 1
+          } else {
+            index = this.dataSource.findIndex(item => item.sourceId === this.editDataSourceId)
+            if (index !== -1) {
+              if (NAME !== this.dataSource[index].name) {
+                this.dataSource.splice(index, 1, { ...this.dataSource[index], name: NAME })
+              }
+              if (LOAD_RELATION_ENTITY !== this.dataSource[index].loadRelationEntity) {
+                this.getAttribute({ ENTITY, ENTITY_VIEW, LOAD_RELATION_ENTITY })
+                  .then(entityData => {
+                    this.entityDataMap[ENTITY] = entityData
+                    this.dataSource[index] = { ...this.dataSource[index], loadRelationEntity: LOAD_RELATION_ENTITY, children: entityData }
+                  })
+              }
+            }
+          }
+          if (ENTITY) {
+            if (!this.entityDataMap[ENTITY]) {
+              this.$store.dispatch({ type: ADD_META, metaId: ENTITY })
+              this.getAttribute({ ENTITY, ENTITY_VIEW, LOAD_RELATION_ENTITY })
+                .then(entityData => {
+                  this.entityDataMap[ENTITY] = entityData
+                  this.dataSource[index] = { ...this.dataSource[index], children: entityData }
+                })
+            } else if (index !== -1) {
+              this.dataSource[index] = { ...this.dataSource[index], children: this.entityDataMap[ENTITY] }
+            }
+          }
+          this.editDataSourceId = ''
+        })
+        .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 () {
+      if (!this.editDataSourceId) {
+        this.$message.error('请选择要删除的数据源')
+        return
+      }
+      this.$http.removeMulti({
+        entityId: 'FM_FORM_SOURCE',
+        ids: this.editDataSourceId
+      })
+        .then(data => {
+          if (data !== false) {
+            this.$message.success('删除成功')
+            const index = this.dataSource.findIndex(item => item.sourceId === this.editDataSourceId)
+            if (index !== -1) {
+              this.dataSource.splice(index, 1)
+            }
+          } else {
+            this.$message.err('删除失败')
+          }
+        })
+    },
+    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')
+      }
+      this.getProcessParams()
+    },
+    getProcessParams () {
+      const { id } = this.$query
+      this.$http.list({
+        action: 'getProcessParam',
+        entityId: 'FM_FORM',
+        id: id
+      })
+        .then(data => {
+          this.processParams = data.map(item => {
+            if (item.childrens) item.children = item.childrens
+            delete item.childrens
+            return item
+          })
+        })
+    },
+    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()
+        })
+        .catch(err => {
+          this.$message.error(err.message || err.msg || '处理失败')
+        })
+    },
+    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('@') > -1) {
+            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)
+        })
+    },
+    dragDataSource (node, e) {
+      if (node.data.root || node.data.type === 'meta') return
+      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)
+      if (data.type === 'process') {
+        e.dataTransfer.setData('type', 'process')
+        e.dataTransfer.setData('variableCode', data.value)
+      } else {
+        e.dataTransfer.setData('variableCode', data.code)
+      }
+      e.dataTransfer.dropEffect = 'copy'
+      e.dataTransfer.effectAllowed = 'copy'
+    },
+    getPagePx () {
+      const p = this.form.PRINT_PAGE_SIZE
+      this.pageSizePx = p === 'A0' ? 1684 : p === 'A1' || p === 'A2' ? 1190 : p === 'A3' ? 842 : p === 'A5' ? 420 : 595
+    },
+    getFormFunction () {
+      this.$http.getCodes({
+        key: 'FORM_FUNCTION'
+      })
+        .then(async data => {
+          this.formFunction = [...data]
+        })
+    },
+    // 解析 PRINT_CHECK 字段（JSON 字符串）为规则列表
+    parsePrintCheck () {
+      const raw = this.formData.PRINT_CHECK
+      let list = []
+      if (raw) {
+        try {
+          const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw
+          if (Array.isArray(parsed)) {
+            list = parsed.map(item => ({
+              name: item.name || '',
+              expression: item.expression || '',
+              errorInfo: item.errorInfo || '',
+              enable: item.enable !== false
+            }))
+          }
+        } catch (e) {
+          list = []
+        }
+      }
+      this.printChecks = list
+    },
+    // 把规则列表同步回 formData.PRINT_CHECK（随全局设置一起保存）
+    syncPrintCheck () {
+      this.formData.PRINT_CHECK = JSON.stringify(this.printChecks)
+    },
+    // 表达式预览：去掉 #{...} 外层包裹
+    exprPreview (expr) {
+      if (!expr) return ''
+      return String(expr).replace(/^#\{([\s\S]*)\}$/, '$1')
+    },
+    // 打开规则表单弹窗（index < 0 为新增）
+    openCheckRule (index) {
+      this.editingCheckIndex = index
+      if (index >= 0) {
+        const r = this.printChecks[index]
+        this.checkRuleForm = { name: r.name, expression: r.expression, errorInfo: r.errorInfo, enable: r.enable }
+      } else {
+        this.checkRuleForm = { name: '自定义校验 ' + (this.printChecks.length + 1), expression: '', errorInfo: '', enable: true }
+      }
+      this.checkRuleDialog = true
+    },
+    // 确定规则表单
+    confirmCheckRule () {
+      const { name, expression } = this.checkRuleForm
+      if (!name || !name.trim()) {
+        this.$message.warning('请输入规则名')
+        return
+      }
+      if (!expression || !expression.trim()) {
+        this.$message.warning('请配置校验表达式')
+        return
+      }
+      const rule = {
+        name: name.trim(),
+        expression: expression.trim(),
+        errorInfo: (this.checkRuleForm.errorInfo || '').trim(),
+        enable: this.checkRuleForm.enable !== false
+      }
+      if (this.editingCheckIndex >= 0) {
+        this.printChecks.splice(this.editingCheckIndex, 1, rule)
+      } else {
+        this.printChecks.push(rule)
+      }
+      this.syncPrintCheck()
+      this.checkRuleDialog = false
+    },
+    // 删除规则
+    deleteCheckRule (index) {
+      this.$confirm('确定删除该校验规则？', '提示', { type: 'warning' })
+        .then(() => {
+          this.printChecks.splice(index, 1)
+          this.syncPrintCheck()
+        })
+        .catch(() => {})
+    },
+    // 打开公式编辑器
+    openFormulaDialog () {
+      this.formulaDialog = true
+    },
+    // 公式编辑器确定回填表达式
+    confirmFormula (payload) {
+      if (payload && payload.el) {
+        this.checkRuleForm.expression = payload.el
+      }
+      this.formulaDialog = false
+    }
+  },
+  created () {
+    this.currentLanguage = this.defaultLanguage
+    if (this.showMenu) {
+      this.changeMenuFlag = true
+      this.$store.commit('SWITCH_MENU_SHOW', false)
+    }
+    if (this.showAppNav) {
+      this.changeAppNavFlag = true
+      this.$store.commit('SWITCH_APP_NAV_SHOW', false)
+    }
+    // 获取A4纸尺寸 210
+    this.getFormContent()
+    this.getFormFunction()
+    this.getDataSource()
+    this.getFormParams()
+    this.getFieldRelation()
+    this.getFieldConfigs()
+  },
+  beforeUnmount () {
+    if (this.changeMenuFlag) {
+      this.$store.commit('SWITCH_MENU_SHOW', true)
+    }
+    if (this.changeAppNavFlag) {
+      this.$store.commit('SWITCH_APP_NAV_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: var(--epx-bg-card);
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--epx-border);
+}
+.report-title {
+  display: flex;
+}
+.report-back {
+  font-size: var(--epx-font-size-xl);
+  cursor: pointer;
+  position: relative;
+  top: 1px;
+}
+
+.report-name {
+  color: var(--epx-text);
+  font-size: var(--epx-font-size-l);
+  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 var(--epx-border);
+}
+.data-source {
+  width: 240px;
+  margin-right: 16px;
+  height: 100%;
+
+    :deep(.el-tabs) {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    :deep(.el-tabs__content) {
+      flex: 1;
+      overflow: hidden;
+    }
+    :deep(.el-tab-pane) {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+}
+.data-source-modal-header {
+  font-size: var(--epx-font-size-l);
+  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;
+  }
+
+    :deep(.el-input__suffix) {
+      line-height: 36px;
+    }
+
+}
+.link-entity-trigger {
+  width: 220px;
+  .el-input {
+    width: 100%;
+  }
+}
+.link-entity-tree {
+  max-height: 320px;
+  overflow: auto;
+}
+.link-entity-empty {
+  padding: 8px;
+  color: #909399;
+  text-align: center;
+}
+.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-tree {
+  margin-top: 10px;
+  height: calc(100% - 50px);
+  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;
+    }
+  }
+}
+.editor-container {
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  overflow-x: auto;
+
+    :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 {
+
+    :deep(.table-form-item__label) {
+      width: 90px;
+      padding-left: 0;
+    }
+    :deep(.table-form-item__content) {
+      .el-input,
+      .el-input-number--medium {
+        width: 200px;
+      }
+    }
+
+}
+.form-page__footer {
+  padding-bottom: 40px;
+}
+.table-form-item-label::before {
+  content: '*';
+  color: #f56c6c;
+  margin-right: 4px;
+}
+.filter-condition-opera__popper {
+  max-height: 400px;
+  overflow: auto;
+}
+.data-source__header {
+  margin-top: 10px;
+}
+.data-source-operate__footer {
+  margin-top: 10px;
+}
+.language__switch {
+  height: 28px;
+  line-height: 28px;
+  background: var(--epx-bg);
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+  margin-top: 6px;
+  .language-name {
+    padding: 0 16px 0 10px;
+  }
+}
+.language-item {
+  width: 100px;
+  &.is-active {
+    @include bg_color_primary(0.1);
+    @include font_color_primary;
+  }
+}
+.print-check {
+  margin-top: 10px;
+  margin-bottom: 60px;
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &__title {
+    margin: 10px 0;
+  }
+  &__hint {
+    display: flex;
+    align-items: flex-start;
+    font-size: 12px;
+    color: #888;
+    line-height: 18px;
+    margin-bottom: 10px;
+    i {
+      margin-top: 1px;
+      margin-right: 6px;
+      color: #aaa;
+    }
+    b {
+      color: #222;
+      font-weight: 600;
+    }
+  }
+  &__empty {
+    border: 1px dashed #dcdfe6;
+    border-radius: 4px;
+    padding: 20px;
+    text-align: center;
+    color: #888;
+    font-size: 12px;
+  }
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  &__rule {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 10px 12px;
+    background: #fff;
+  }
+  &__rule-top {
+    display: flex;
+    align-items: center;
+  }
+  &__rule-name {
+    flex: 1;
+    min-width: 0;
+    margin: 0 8px;
+    font-weight: 600;
+    color: #222;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &__act {
+    cursor: pointer;
+    color: #888;
+    font-size: 16px;
+    margin-left: 8px;
+    &:hover {
+      @include font_color_primary;
+    }
+    &--danger:hover {
+      color: #f56c6c;
+    }
+  }
+  &__rule-expr {
+    margin-top: 6px;
+    font-size: 12px;
+    color: #888;
+    font-family: Consolas, Monaco, monospace;
+    background: #f5f7fa;
+    border-radius: 2px;
+    padding: 6px 8px;
+    word-break: break-all;
+  }
+}
+.check-rule-form {
+  &__item {
+    margin-bottom: 16px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  &__label {
+    display: block;
+    margin-bottom: 6px;
+    color: #444;
+    font-size: 14px;
+    &.is-required::before {
+      content: '*';
+      color: #f56c6c;
+      margin-right: 4px;
+    }
+  }
+  &__expr {
+    display: flex;
+    align-items: center;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 8px 10px;
+    min-height: 38px;
+    box-sizing: border-box;
+    cursor: pointer;
+    background: #fff;
+    &:hover {
+      @include border_color_primary;
+    }
+    &.is-empty .check-rule-form__expr-text {
+      color: #c0c4cc;
+      font-family: inherit;
+    }
+    i {
+      margin-left: 8px;
+      @include font_color_primary;
+    }
+  }
+  &__expr-text {
+    flex: 1;
+    min-width: 0;
+    font-family: Consolas, Monaco, monospace;
+    font-size: 13px;
+    color: #222;
+    word-break: break-all;
+  }
+  &__tip {
+    margin-top: 6px;
+    font-size: 12px;
+    color: #888;
+  }
+}
+</style>
+<style>
+.sort-opera-popover {
+  padding: 24px 0;
+}
+/* 全屏公式编辑器弹窗（append-to-body，需全局样式） */
+.formula-editor-dialog .el-dialog__header {
+  display: none;
+}
+.formula-editor-dialog .el-dialog__body {
+  padding: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+.formula-editor-dialog .formula-editor-container {
+  height: 100%;
+}
+</style>