epx-frame 3.5.0-shpgy.1

package/src/frame/views/ExcelDesign.vue

@@ -0,0 +1,1795 @@
+<template>
+  <div class="container">
+    <hr title="打印线" class="ureport-right-hr-for-print" style="height: 856px;width: 0px;border-left: 1px dashed rgb(153, 153, 153);position: absolute;left: 700pt;top: 35px;z-index: 10;">
+    <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">{{excelInfo.NAME}}</span>
+          <el-input v-else v-model="excelInfo.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-upload class="import-btn" action="" :show-file-list="false" :http-request="importExcel">
+          <el-button size="medium" :loading="isImportExcel">导入</el-button>
+        </el-upload>
+        <el-button size="medium"  @click="showFormParamsDialog= true">预览</el-button>
+        <el-button size="medium" type="primary" @click="saveExcelData">保存</el-button>
+      </div>
+    </div>
+    <div class="content">
+      <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)">{{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>
+                  </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=>dragVariableFn(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 class="table-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 class="table-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="luckysheet-container" ref="luckysheet">
+
+      </div>
+      <div class="attribute-pane">
+        <div class="attribute-pane__header">
+          <span>{{globalSetting ? '全局设置': '基础配置'}}</span>
+        </div>
+        <div class="attribute-pane__content" v-if="globalSetting">
+          <p class="form__label" for="">文件名</p>
+          <textarea v-show="globalSetting" 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="otherFieldsConfigs" v-model="formData" :column="1" label-align="left"></epx-table-form>
+          <div :style="{marginTop: '30PX'}">
+            <div :style="{textAlign: 'center', position: 'fixed',bottom:0,width:'400px',zIndex:99}">
+              <el-button size="medium" @click="globalSettingCancel">取消</el-button>
+              <el-button type="primary" size="medium" @click="updateForm">保存</el-button>
+            </div>
+          </div>
+        </div>
+        <div class="attribute-pane__content" v-else-if="activeCell">
+          <div class="attribute-item">
+            <label for="">坐标</label>
+            <span class="attribute-item__content">{{excelCoord(activeCell.rowIndex+ 1, activeCell.columnIndex )}}</span>
+          </div>
+          <div class="attribute-item">
+            <label for="">左父格</label>
+            <div class="attribute-item__content">
+              <el-radio-group v-model="leftCellWay">
+                <el-radio label="default" @change="defaultLeftCell">默认</el-radio>
+                <br />
+                <el-radio label="custom">
+                  <span>自定义</span>
+                  <el-select class="cell-select" v-model="leftCellColumn" size="medium" placeholder="">
+                    <el-option label="无" value="root">无</el-option>
+                    <el-option v-for="item in columnList" :key="item" :label="item" :value="item"></el-option>
+                  </el-select>
+                  <el-select class="cell-select" v-model="leftCellRow" size="medium" placeholder="">
+                    <el-option v-for="item in rowList" :key="item" :label="item" :value="item"></el-option>
+                  </el-select>
+                </el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+          <div class="attribute-item">
+            <label for="">上父格</label>
+            <el-radio-group v-model="topCellWay">
+              <el-radio label="default" @change="defaultTopCell">默认</el-radio>
+              <br />
+              <el-radio label="custom">
+                <span>自定义</span>
+                <el-select class="cell-select" v-model="topCellColumn" size="medium" placeholder="">
+                  <el-option label="无" key='root' value="root"></el-option>
+                  <el-option v-for="item in columnList" :key="item" :label="item" :value="item"></el-option>
+                </el-select>
+                <el-select class="cell-select" v-model="topCellRow" size="medium" placeholder="">
+                  <el-option v-for="item in rowList" :key="item" :label="item" :value="item"></el-option>
+                </el-select>
+              </el-radio>
+            </el-radio-group>
+          </div>
+          <div class="attribute-item">
+            <label for="">单元格类型</label>
+            <div class="attribute-item__content">
+              <el-select size="medium" v-model="activeCell.cellType" placeholder="请选择">
+                <el-option value="simple" label="普通文本"></el-option>
+                <el-option value="dataset" label="数据集"></el-option>
+                <el-option value="system-variable" label="系统变量"></el-option>
+                <el-option value="expression" label="表达式"></el-option>
+                <el-option value="image" label="图片"></el-option>
+              </el-select>
+            </div>
+          </div>
+          <template v-if="activeCell.cellType==='image'">
+            <div class="attribute-item">
+              <label for="">图片高度</label>
+              <div class="attribute-item__content">
+                <el-input v-model="activeCell.imageHeight"></el-input>
+              </div>
+            </div>
+            <div class="attribute-item">
+              <label for="">图片宽度</label>
+              <div class="attribute-item__content">
+                <el-input v-model="activeCell.imageWidth"></el-input>
+              </div>
+            </div>
+          </template>
+
+          <template v-if="activeCell.cellType==='expression'">
+            <div class="attribute-item">
+              <label for="">表达式</label>
+              <el-input type="textarea" rows="3" v-model="activeCell.v"></el-input>
+            </div>
+          </template>
+          <template v-if="activeCell.cellType==='dataset'">
+            <div class="attribute-item">
+              <label for="">过滤条件</label>
+              <div class="attribute-item__content">
+                <ul class="filter-condition__list" v-if="activeCell.filterCondition">
+                  <li class="filter-condition__item" v-for="(item, index) in activeCell.filterCondition" :key="item.propertyId">
+                    {{item.text}}
+                    <span class="filter-condition__operates">
+                      <i class="el-icon-edit" @click="editFilterCondition(item, index)"></i>
+                      <el-popconfirm title="确认删除？" @confirm="deleteFilterCondition(index)">
+                        <i slot="reference" class="el-icon-close"></i>
+                      </el-popconfirm>
+                    </span>
+                  </li>
+                </ul>
+                <el-button type="primary" size="small" @click="addFilterCondition">添加条件</el-button>
+              </div>
+            </div>
+          </template>
+          <div class="attribute-item">
+            <label for="">聚合方式</label>
+            <div class="attribute-item__content">
+              <el-radio-group v-model="activeCell.aggregate">
+                <el-radio label="select">列表</el-radio>
+                <el-radio label="group">分组</el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+          <div class="attribute-item">
+            <label for="">数据展开方向</label>
+            <div class="attribute-item__content">
+              <el-radio-group v-model="activeCell.expand">
+                <el-radio label="Down">向下</el-radio>
+                <el-radio label="Right">向右</el-radio>
+                <el-radio label="None">不展开</el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+           <div class="attribute-item">
+            <label for="">分页方式</label>
+            <div class="attribute-item__content">
+              <el-radio-group v-model="activeCell.pagePosition">
+                <el-radio label="before">行前分页</el-radio>
+                <el-radio label="after">行后分页</el-radio>
+                <el-radio label="none">不分页</el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+          <div class="attribute-item">
+            <label for="">自动换行</label>
+            <div class="attribute-item__content">
+              <el-radio-group v-model="activeCell.wrapCompute">
+                <el-radio label="1">打开</el-radio>
+                <el-radio label="0">关闭</el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+          <div class="attribute-item">
+            <label for="">分页时不断开:</label>
+            <div class="attribute-item__content">
+              <el-checkbox v-model="activeCell.breakOnPaginate"></el-checkbox>
+            </div>
+           </div>
+          <div class="attribute-item">
+            <label for="">高度自适应</label>
+            <div class="attribute-item__content">
+              <el-radio-group v-model="activeCell.heightAuto">
+                <el-radio label="1">打开</el-radio>
+                <el-radio label="0">关闭</el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+          <div class="attribute-item">
+            <label for="">行高</label>
+            <div class="attribute-item__content">
+              <el-input size="medium" v-model="activeCell.lineHeight" placeholder="默认高度1.2"></el-input>
+            </div>
+          </div>
+          <div class="attribute-item">
+            <label for="">补充空白行倍数：</label>
+            <div class="attribute-item__content">
+              <el-input size="medium" v-model="activeCell.fillBlankRowsMultiple" placeholder=""></el-input>
+            </div>
+           </div>
+           <div class="attribute-item">
+              <label for="">条件属性</label>
+              <div class="attribute-item__content">
+                <span  v-for="(item,index) in activeCell.conditionPropertyItems" :key="item.guid">
+                  {{item.name+(index==activeCell.conditionPropertyItems.length-1?'':'、')}}
+                </span>
+                <br/>
+                <el-button type="primary" size="small" @click="addConditionPropertyItem">添加条件属性</el-button>
+              </div>
+            </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog v-if="showFormParamsDialog" 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>
+     <el-dialog v-if="showFilterConditionDialog" title="过滤条件" width="520px" :visible.sync="showFilterConditionDialog">
+        <div class="input-params" v-if="(activeCell.filterCondition && activeCell.filterCondition.length>0) && ((!editFilterConditionIndex && editFilterConditionIndex!=0) || editFilterConditionIndex > 0)">
+          <label>与上一条件关系：</label>
+          <el-select size="medium" v-model="filterConditionForm.join" placeholder="请选择">
+            <el-option value="and" label="并且"></el-option>
+            <el-option value="or" label="或者"></el-option>
+          </el-select>
+        </div>
+        <div class="input-params" >
+          <label>属性名：</label>
+          <el-select size="medium" v-model="filterConditionForm.propertyId" placeholder="请选择">
+            <el-option v-for="item in objectFieldList" :key="item.code"  :value="item.code" :label="item.text" ></el-option>
+          </el-select>
+          <!-- <el-input type="middle" v-model="filterConditionForm.propertyId"></el-input> -->
+        </div>
+         <div class="input-params" >
+          <label>操作符：</label>
+          <el-select size="medium" v-model="filterConditionForm.op" placeholder="请选择">
+            <el-option value=">" label="大于"></el-option>
+            <el-option value=">=" label="大于等于"></el-option>
+            <el-option value="<" label="小于"></el-option>
+            <el-option value="<=" label="小于等于"></el-option>
+            <el-option value="==" label="等于"></el-option>
+            <el-option value="!=" label="不等于"></el-option>
+            <el-option value="in" label="在集合中"></el-option>
+            <el-option value="like" label="相似"></el-option>
+          </el-select>
+        </div>
+        <div class="input-params">
+          <label>值表达式：</label>
+          <el-input size="middle" :style="{width: '200px'}" v-model="filterConditionForm.condition"></el-input>
+        </div>
+        <div class="filter-condition__btn">
+          <el-button size="medium" @click="showFilterConditionDialog=false">取消</el-button>
+          <el-button type="primary" @click="saveFilterCondition">确定</el-button>
+        </div>
+     </el-dialog>
+     <el-dialog v-if="showConditionPropertyItemDialog" title="条件属性" width="1100px" :visible.sync="showConditionPropertyItemDialog">
+      <div style="height: 500px;">
+          <el-row :gutter="15">
+          <el-col :span="7">
+            <el-card class="box-card" shadow="never">
+              <div slot="header" class="clearfix">
+              <el-row>
+                <el-col :span="10">
+                  <span>条件项配置</span>
+                </el-col>
+                <el-col :span="14">
+                 <el-button-group>
+                  <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini"  @click="showConditionPropertyItemNameDialog=true"></el-button>
+                </el-button-group>
+                </el-col>
+              </el-row>
+              </div>
+              <div>
+                <ul class="filter-condition__list" v-if="activeCell.conditionPropertyItems">
+                  <li :class="currentConditionPropertyItem && item.uid == currentConditionPropertyItem.uid ? 'condition-property-item-active' : 'condition-property-item'" v-for="(item) in activeCell.conditionPropertyItems" :key="item.guid" @click="clickConditionPropertyItem(item)">
+                    {{item.name}}
+                    <span class="filter-condition__operates">
+                      <i class="el-icon-edit" @click="editConditionPropertyItem()"></i>
+                      <el-popconfirm title="确认删除？" @confirm="deleteConditionPropertyItem(item)">
+                        <i slot="reference" class="el-icon-close"></i>
+                      </el-popconfirm>
+                    </span>
+                  </li>
+                </ul>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="7">
+              <el-card class="box-card" shadow="never">
+              <div slot="header" class="clearfix">
+              <el-row>
+                <el-col :span="10">
+                  <span>条件配置</span>
+                </el-col>
+                <el-col :span="14">
+                 <el-button-group>
+                  <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="showConditionPropertyItemConditionDialog=true;conditionPropertyItemConditionForm={}"></el-button>
+                </el-button-group>
+                </el-col>
+              </el-row>
+              </div>
+              <div>
+                <ul class="filter-condition__list" v-if="currentConditionPropertyItem.conditions">
+                  <li :class="conditionPropertyItemConditionForm && item.uid == conditionPropertyItemConditionForm.uid ? 'condition-property-item-active' : 'condition-property-item'" v-for="(item) in currentConditionPropertyItem.conditions" :key="item.guid">
+                    {{getConditionOpText(item.join)}} {{item.type=='current'?'当前值':'表达式'}} {{item.type=='expression'?item.left:''}} {{getConditionOpText(item.op)}}  {{item.condition}}
+                    <span class="filter-condition__operates">
+                      <i class="el-icon-edit" @click="editConditionPropertyCondition(item)"></i>
+                      <el-popconfirm title="确认删除？" @confirm="deleteConditionPropertyCondition(item)">
+                        <i slot="reference" class="el-icon-close"></i>
+                      </el-popconfirm>
+                    </span>
+                  </li>
+                </ul>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="10">
+              <el-card class="box-card" shadow="never">
+              <div slot="header" class="clearfix">
+                <span>属性配置</span>
+              </div>
+              <div  v-if="this.conditionPropertyItems.length>0">
+                <el-row :gutter="20">
+                  <el-col :span="6"><el-checkbox class="property-item-condition" v-model="currentConditionPropertyItem.newValueFlag">新值</el-checkbox></el-col>
+                  <el-col :span="12" v-if="currentConditionPropertyItem.newValueFlag"><el-input v-model="currentConditionPropertyItem.newValue" placeholder="请输入内容"></el-input></el-col>
+                </el-row>
+                <el-row :gutter="20">
+                  <el-col :span="6"><el-checkbox class="property-item-condition" v-model="currentConditionPropertyItem.colWidthFlag">列宽</el-checkbox></el-col>
+                  <el-col :span="12" v-if="currentConditionPropertyItem.colWidthFlag"><el-input v-model="currentConditionPropertyItem.colWidth" placeholder="请输入内容"></el-input></el-col>
+                </el-row>
+                <el-row :gutter="20">
+                  <el-col :span="6"><el-checkbox class="property-item-condition" v-model="currentConditionPropertyItem.pagingFlag">分页</el-checkbox></el-col>
+                  <el-col :span="12" v-if="currentConditionPropertyItem.pagingFlag">
+                    <el-select size="medium" v-model="currentConditionPropertyItem.position" placeholder="请选择">
+                      <el-option value="before" label="当前行前"></el-option>
+                      <el-option value="after" label="当前行后"></el-option>
+                    </el-select>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-card>
+          </el-col>
+      </el-row>
+      </div>
+      <div class="filter-condition__btn">
+          <el-button  @click="showConditionPropertyItemDialog=false">取消</el-button>
+          <el-button type="primary" @click="saveConditionPropertyItem">确定</el-button>
+      </div>
+     </el-dialog>
+
+     <el-dialog v-if="showConditionPropertyItemNameDialog" width="520px" :visible.sync="showConditionPropertyItemNameDialog">
+        <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>
+     <el-dialog v-if="showConditionPropertyItemNameDialog" title="条件项名称" width="520px" :visible.sync="showConditionPropertyItemNameDialog">
+        <div class="input-params">
+          <label>条件项名称：</label>
+          <el-input size="middle" :style="{width: '200px'}" v-model="conditionPropertyItemNameForm.name"></el-input>
+        </div>
+        <div class="filter-condition__btn">
+          <el-button size="medium" @click="showConditionPropertyItemNameDialog=false">取消</el-button>
+          <el-button type="primary" @click="saveConditionPropertyItemName">确定</el-button>
+        </div>
+     </el-dialog>
+
+     <el-dialog v-if="showConditionPropertyItemConditionDialog" title="过滤条件" width="520px" :visible.sync="showConditionPropertyItemConditionDialog">
+        <input hidden v-model="conditionPropertyItemConditionForm.uid">
+        <div class="input-params" v-if="(this.currentConditionPropertyItem.conditions && this.currentConditionPropertyItem.conditions.length>0 && this.conditionPropertyItemConditionForm.index!=0)">
+          <label>与上一条件关系：</label>
+          <el-select size="medium" v-model="conditionPropertyItemConditionForm.join" placeholder="请选择">
+            <el-option value="and" label="并且"></el-option>
+            <el-option value="or" label="或者"></el-option>
+          </el-select>
+        </div>
+        <div class="input-params" >
+          <label>条件左值：</label>
+          <el-select size="medium" v-model="conditionPropertyItemConditionForm.type" placeholder="请选择">
+            <el-option value="current" label="当前值"></el-option>
+            <el-option value="expression" label="表达式"></el-option>
+          </el-select>
+          <div v-if="conditionPropertyItemConditionForm.type == 'expression'" class="input-params" style="margin-left:10px">
+            <label>表达式：</label>
+            <el-input size="middle" :style="{width: '150px'}" v-model="conditionPropertyItemConditionForm.left"></el-input>
+          </div>
+        </div>
+         <div class="input-params" >
+          <label>操作符：</label>
+          <el-select size="medium" v-model="conditionPropertyItemConditionForm.op" placeholder="请选择">
+            <el-option value=">" label="大于"></el-option>
+            <el-option value=">=" label="大于等于"></el-option>
+            <el-option value="<" label="小于"></el-option>
+            <el-option value="<=" label="小于等于"></el-option>
+            <el-option value="==" label="等于"></el-option>
+            <el-option value="!=" label="不等于"></el-option>
+            <el-option value="in" label="在集合中"></el-option>
+            <el-option value="like" label="相似"></el-option>
+            <el-option value="not like" label="不相似"></el-option>
+          </el-select>
+        </div>
+        <div class="input-params">
+          <label>值表达式：</label>
+          <el-input size="middle" :style="{width: '200px'}" v-model="conditionPropertyItemConditionForm.condition"></el-input>
+        </div>
+        <div class="filter-condition__btn">
+          <el-button size="medium" @click="showConditionPropertyItemConditionDialog=false">取消</el-button>
+          <el-button type="primary" @click="saveConditionPropertyItemCondition">确定</el-button>
+        </div>
+     </el-dialog>
+
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-undef */
+import { mapState } from 'vuex'
+const ADD_META = 'ADD_META'
+export default {
+  name: 'epx-excel-design',
+  navConfigs: {
+    flag: false
+  },
+  data () {
+    return {
+      editName: false,
+      globalSetting: false,
+      formData: {},
+      activeCell: null,
+      columnList: [],
+      rowList: [],
+      leftCellWay: 'default',
+      topCellWay: 'default',
+      excelInfo: {},
+      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: {},
+      isImportExcel: false,
+      showFilterConditionDialog: false,
+      filterConditionForm: {},
+      editFilterConditionIndex: null,
+      showConditionPropertyItemDialog: false,
+      conditionPropertyItems: [],
+      showConditionPropertyItemNameDialog: false,
+      conditionPropertyItemNameForm: {},
+      currentConditionPropertyItem: {},
+      showConditionPropertyItemConditionDialog: false,
+      conditionPropertyItemConditionForm: {},
+      otherFieldsConfigs: []
+    }
+  },
+  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
+        }
+      ]
+    },
+    leftCellColumn: {
+      get () {
+        const { leftCell } = this.activeCell
+        if (leftCell === 'root') {
+          return '无'
+        }
+        if (leftCell) {
+          const arr = /^([A-Z]*)(\d*)$/.exec(leftCell)
+          return arr[1] || ''
+        }
+        return ''
+      },
+      set (v) {
+        if (v === 'root') {
+          this.$set(this.activeCell, 'leftCell', v)
+        } else {
+          this.$set(this.activeCell, 'leftCell', v + this.leftCellRow)
+        }
+      }
+    },
+    leftCellRow: {
+      get () {
+        const { leftCell } = this.activeCell
+        if (leftCell && leftCell !== 'root') {
+          const arr = /^([A-Z]*)(\d*)$/.exec(leftCell)
+          return arr[2] || ''
+        }
+        return ''
+      },
+      set (v) {
+        this.activeCell.leftCell = this.leftCellColumn + v
+        this.$set(this.activeCell, 'leftCell', this.leftCellColumn + v)
+      }
+    },
+    topCellColumn: {
+      get () {
+        const { topCell } = this.activeCell
+        if (topCell === 'root') {
+          return '无'
+        }
+        if (topCell && topCell !== 'root') {
+          const arr = /^([A-Z]*)(\d*)$/.exec(topCell)
+          return arr[1] || ''
+        }
+        return ''
+      },
+      set (v) {
+        if (v === 'root') {
+          this.$set(this.activeCell, 'topCell', v)
+        } else {
+          this.$set(this.activeCell, 'topCell', v + this.topCellRow)
+        }
+      }
+    },
+    topCellRow: {
+      get () {
+        const { topCell } = this.activeCell
+        if (topCell && topCell !== 'root') {
+          const arr = /^([A-Z]*)(\d*)$/.exec(topCell)
+          return arr[2] || ''
+        }
+        return ''
+      },
+      set (v) {
+        this.$set(this.activeCell, 'topCell', this.topCellColumn + v)
+      }
+    },
+    objectFieldList () {
+      const { dataSource } = this.activeCell || {}
+      if (dataSource) {
+        const item = this.dataSource.find(item => item.id === dataSource) || {}
+        if (item && item.children[0]) {
+          return item.children[0].children
+        }
+      }
+      return []
+    },
+    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: {
+    activeCell: {
+      handler: function (v, oldVal) {
+        const { rowIndex, columnIndex, ...props } = v
+        if (this.leftCellWay === 'default') props.leftCell = ''
+        if (this.topCellWay === 'default') props.topCell = ''
+        if (props.cellType && props.cellType === 'expression') {
+          props.m = props.v
+        }
+        luckysheet.setCellValue(rowIndex, columnIndex, props)
+      },
+      deep: true
+    },
+    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
+    }
+  },
+  methods: {
+    $refeshData () {
+      this.createExcel()
+    },
+    getData () {
+      this.$http.get({
+        entityId: 'FM_FORM',
+        id: this.$query.id
+      })
+        .then(data => {
+          this.excelInfo = data.data
+          this.formData = { ...data.data }
+          this.createExcel()
+        })
+    },
+    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]
+        })
+      this.$FieldFactory.createFields({
+        meta: this.$meta,
+        metaId: this.$metaId,
+        pageType: 'EDIT',
+        fields: ['PROCESS', 'BUSINESS_KEY']
+      })
+        .then(data => {
+          this.otherFieldsConfigs = [...data]
+        })
+    },
+    excelCoord (row, column) {
+      return this.NumToString(column + 1) + row
+    },
+    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>{${sourceName}.${fieldName}}</label>`
+                  if (e.target.innerHTML === '<br>') {
+                    e.target.innerHTML = ''
+                  }
+                  e.target.appendChild(span)
+                  const value = this.titleEditor.getContent()
+                  that.formData = { ...that.formData, TITLE: value }
+                } else {
+                  return true
+                }
+              }
+            }
+            this.titleEditor.setContent(this.formData.TITLE || '')
+          }
+        })
+    },
+    NumToString (i) {
+      var s = 'A B C D E F G H I J K L M N O P Q R S T U V W X Y Z'
+      var sArray = s.split(' ')
+      if (i < 1) return ''
+
+      if (parseInt((i / 26) + '') === 0) return sArray[i % 26 - 1]
+      else {
+        if (i % 26 === 0) return (this.NumToString(parseInt((i / 26) + '') - 1)) + sArray[26 - 1]
+        else return sArray[parseInt((i / 26) + '') - 1] + sArray[i % 26 - 1]
+      }
+    },
+    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 })
+          }
+        })
+    },
+    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 => {
+          if (data[0]) data[0].isMain = true
+          const formatData = (arr) => {
+            arr.forEach(item => {
+              if (item.type === 'folder') item.isMain = true
+              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
+        })
+    },
+    setFormName () {
+      this.$http.update({
+        entityId: 'FM_FORM',
+        'bean.ID': this.excelInfo.ID,
+        'bean.NAME': this.excelInfo.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',
+        'bean.ID': this.excelInfo.ID,
+        ...params
+      })
+        .then(() => {
+          this.globalSetting = false
+          this.$message.success('保存成功')
+          this.titleEditor.remove()
+        })
+        .catch(err => {
+          this.$message.error(err.errorText)
+          this.titleEditor.remove()
+        })
+    },
+    globalSettingCancel () {
+      this.globalSetting = false
+      this.titleEditor.remove()
+    },
+    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 { 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.excelInfo.CLIENT,
+        'bean.SYSTEM': this.excelInfo.SYSTEM
+      })
+        .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.excelInfo.CLIENT,
+        'bean.SYSTEM': this.excelInfo.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()
+      })
+    },
+    drag (e, data, node) {
+      if (node.parent) {
+        let parent = node.parent
+        let nodeText = ''
+        while (parent.parent && parent.data.root !== true) {
+          if (!parent.data.isMain) {
+            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'
+        }
+        this.dragField = field
+      }
+    },
+    dragVariableFn (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'
+      this.dragVariable = {
+        value: data.value,
+        name: data.name
+      }
+    },
+    createExcel (content) {
+      const that = this
+      const { CONTENT } = this.excelInfo
+      let data = null
+      if (CONTENT) {
+        data = JSON.parse(CONTENT)
+      }
+      // 加载luckysheet
+      luckysheet.create({
+        container: 'luckysheet', // 设定DOM容器的id
+        title: 'Luckysheet Demo', // 设定表格名称
+        lang: 'zh', // 设定表格语言
+        plugins: ['chart'],
+        data: content || data,
+        showsheetbar: false,
+        hook: {
+          cellMousedown: function (cell, position, sheetFile, ctx) {
+            if (cell && cell.leftCell) {
+              that.leftCellWay = 'custom'
+            } else {
+              that.leftCellWay = 'default'
+            }
+            if (cell && cell.topCell) {
+              that.topCellWay = 'custom'
+            } else {
+              that.topCellWay = 'default'
+            }
+            const { r, c } = position
+            that.activeCell = { rowIndex: r, columnIndex: c, ...(cell || {}) }
+            that.globalSetting = false
+          },
+          cellDragStop: function (cell, position, sheetFile, ctx) {
+            const { r, c } = position
+            if (that.dragField) {
+              const { sourceName, fieldName, sourceId, fieldId } = that.dragField
+              luckysheet.setCellValue(r, c, { v: `{${sourceName}.${fieldName}}`, cellType: 'dataset', dataSource: sourceId, field: fieldId, aggregate: 'select', expand: 'Down' })
+              that.dragField = null
+            } else if (that.dragVariable) {
+              const { name, value } = that.dragVariable
+              luckysheet.setCellValue(r, c, { v: `{${name}}`, cellType: 'system-variable', variable: value })
+              that.dragVariable = null
+            }
+          },
+          cellEditBefore: function (range, position, sheetFile, ctx) {
+            const selects = luckysheet.getRangeValuesWithFlatte()
+            const cell = selects[0]
+            if (cell && (cell.cellType === 'dataset' || cell.cellType === 'system-variable')) {
+              that.$message.warning(cell.cellType === 'system-variable' ? '系统变量不允许编辑' : '数据源不允许编辑')
+              const functionInput = document.querySelectorAll('.luckysheet-functionbox-cell-input')
+              const cellInput = document.querySelectorAll('.luckysheet-cell-input')
+              const inputList = [...functionInput, ...cellInput]
+              const timer = setTimeout(() => {
+                inputList.map(input => input.blur())
+                clearTimeout(timer)
+              }, 80)
+            }
+            return false
+          },
+          cellUpdated (v) {
+            // luckysheet.setCellValue(r, c, { v: `{${sourceName}.${fieldName}}`, dataSource: sourceId, field: fieldId, cellType: 'dataset' })
+          }
+        }
+
+      })
+      const luckysheetCell = document.getElementsByClassName('luckysheet-cell-flow-col')[0]
+      for (let i = 0; i < 10; i++) {
+        const hr = document.createElement('hr')
+        hr.style = `width:100% ;height: 0px;border-top: 1px dashed rgb(153, 153, 153);position: absolute;left: 0;top: ${(i + 1) * 840.51}pt;z-index: 10;`
+        luckysheetCell.appendChild(hr)
+      }
+    },
+    deleteCell (evt) {
+      console.log(evt)
+    },
+    importExcel (props) {
+      const file = props.file || props
+      this.isImportExcel = true
+      this.$http.$post({
+        action: 'upload',
+        file
+      }, {
+        requestType: 'formData'
+
+      })
+        .then(data => {
+          if (data) {
+            if (data.bean) {
+              this.getExcelDataByFile(data.bean)
+            } else if (data.fileCheck) {
+              this.$message.error(data.fileCheck.checkResult)
+              this.isImportExcel = false
+            }
+          }
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+          this.isImportExcel = false
+        })
+    },
+    getExcelDataByFile (fileId) {
+      this.$http.save({
+        action: 'importExcel',
+        entityId: 'FM_FORM',
+        fileId
+      })
+        .then(data => {
+          const sheets = JSON.parse(data) || []
+          const { celldata } = sheets[0] || {}
+          sheets[0].data = luckysheet.transToData(celldata)
+          luckysheet.destroy()
+          this.createExcel(sheets)
+          this.isImportExcel = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+          this.isImportExcel = false
+        })
+    },
+    saveExcelData () {
+      const sheets = luckysheet.getluckysheetfile()
+      sheets[0].celldata = luckysheet.transToCellData(sheets[0].data)
+      this.$http.update({
+        entityId: 'FM_FORM',
+        'bean.ID': this.$query.id,
+        'bean.CONTENT': JSON.stringify(sheets)
+      })
+        .then(data => {
+          this.$message.success('保存成功')
+        })
+    },
+    preview () {
+      this.showFormParamsDialog = false
+      this.$createPage({
+        component: 'excel-preview',
+        name: this.excelInfo.NAME,
+        code: this.excelInfo.CODE,
+        params: this.previewParams
+      })
+    },
+    defaultLeftCell () {
+      this.$set(this.activeCell, 'leftCell', '')
+    },
+    defaultTopCell () {
+      this.$set(this.activeCell, 'topCell', '')
+    },
+    addFilterCondition () {
+      this.showFilterConditionDialog = true
+    },
+    editFilterCondition (item, index) {
+      this.filterConditionForm = { ...item }
+      this.editFilterConditionIndex = index
+      this.showFilterConditionDialog = true
+    },
+    deleteFilterCondition (index) {
+      const { filterCondition } = this.activeCell
+      filterCondition.splice(index, 1)
+      this.$set(this.activeCell, index, filterCondition)
+    },
+    saveFilterCondition () {
+      let { filterCondition } = this.activeCell
+      if (!filterCondition) filterCondition = []
+      if (!this.filterConditionForm.propertyId) {
+        this.$message.error('请填写属性id')
+        return
+      }
+      if (!this.filterConditionForm.op) {
+        this.$message.error('请填写操作符')
+        return
+      }
+      if (!this.filterConditionForm.condition) {
+        this.$message.error('请填写值表达式')
+        return
+      }
+      const item = this.objectFieldList.find(item => item.code === this.filterConditionForm.propertyId) || {}
+      const condition = { ...this.filterConditionForm, propertyName: item.text, text: `${(this.editFilterConditionIndex > 0 || filterCondition.length > 0) ? this.getConditionOpText(this.filterConditionForm.join) || '' : ''} ${item.text} ${this.getConditionOpText(this.filterConditionForm.op)} ${this.filterConditionForm.condition}` }
+      if (this.editFilterConditionIndex !== null) {
+        filterCondition.splice(this.editFilterConditionIndex, 1, condition)
+        this.editFilterConditionIndex = null
+      } else {
+        filterCondition.push(condition)
+      }
+      this.$set(this.activeCell, 'filterCondition', filterCondition)
+      this.showFilterConditionDialog = false
+      this.filterConditionForm = {}
+    },
+    addConditionPropertyItem () {
+      this.currentConditionPropertyItem = {}
+      this.showConditionPropertyItemDialog = true
+      const { conditionPropertyItems } = this.activeCell
+      if (conditionPropertyItems) {
+        this.conditionPropertyItems = conditionPropertyItems
+        this.currentConditionPropertyItem = conditionPropertyItems[0]
+      }
+    },
+    saveConditionPropertyItemName () {
+      let { conditionPropertyItems } = this.activeCell
+      if (!conditionPropertyItems) conditionPropertyItems = []
+      if (!this.conditionPropertyItemNameForm.name) {
+        this.$message.error('请输入条件项名称')
+        return
+      }
+      if (this.conditionPropertyItemNameForm.uid) {
+        const c = this.conditionPropertyItems.find(i => i.uid === this.conditionPropertyItemNameForm.uid)
+        c.name = this.conditionPropertyItemNameForm.name
+      } else {
+        const guid = new Date().getTime().toString(32)
+        const item = {
+          uid: guid,
+          name: this.conditionPropertyItemNameForm.name,
+          conditions: [],
+          cellStyle: {},
+          newValueFlag: false,
+          newValue: ''
+        }
+        this.conditionPropertyItems.push(item)
+      }
+      this.$set(this.activeCell, 'conditionPropertyItems', this.conditionPropertyItems)
+      this.showConditionPropertyItemNameDialog = false
+      this.conditionPropertyItemNameForm = {}
+      this.currentConditionPropertyItem = item
+    },
+    saveConditionPropertyItemCondition () {
+      if (!this.conditionPropertyItemConditionForm.type) {
+        this.$message.error('请选择条件左值')
+        return
+      }
+      if (!this.conditionPropertyItemConditionForm.op) {
+        this.$message.error('请选择操作符')
+        return
+      }
+      if (!this.conditionPropertyItemConditionForm.condition) {
+        this.$message.error('请输入值表达式')
+        return
+      }
+      if (this.conditionPropertyItemConditionForm.uid) {
+        const c = this.currentConditionPropertyItem.conditions.find(i => i.uid === this.conditionPropertyItemConditionForm.uid)
+        c.type = this.conditionPropertyItemConditionForm.type
+        c.op = this.conditionPropertyItemConditionForm.op
+        c.join = this.conditionPropertyItemConditionForm.join
+        c.condition = this.conditionPropertyItemConditionForm.condition
+        c.left = this.conditionPropertyItemConditionForm.left
+      } else {
+        const guid = new Date().getTime().toString(32)
+        const item = {
+          uid: guid,
+          type: this.conditionPropertyItemConditionForm.type,
+          op: this.conditionPropertyItemConditionForm.op,
+          join: this.conditionPropertyItemConditionForm.join,
+          condition: this.conditionPropertyItemConditionForm.condition,
+          left: this.conditionPropertyItemConditionForm.left
+        }
+        this.currentConditionPropertyItem.conditions.push(item)
+      }
+      this.$set(this.activeCell, 'conditionPropertyItems', this.conditionPropertyItems)
+      this.showConditionPropertyItemConditionDialog = false
+      this.conditionPropertyItemConditionForm = {}
+    },
+    saveConditionPropertyItem () {
+      this.$set(this.activeCell, 'conditionPropertyItems', this.conditionPropertyItems)
+      this.showConditionPropertyItemDialog = false
+      this.currentConditionPropertyItem = {}
+      this.conditionPropertyItems = []
+    },
+    clickConditionPropertyItem (item) {
+      this.currentConditionPropertyItem = item
+    },
+    deleteConditionPropertyItem (item) {
+      const { conditionPropertyItems } = this.activeCell
+      this.conditionPropertyItems = conditionPropertyItems.filter(i => i.uid !== item.uid)
+      this.$set(this.activeCell, 'conditionPropertyItems', this.conditionPropertyItems)
+      this.currentConditionPropertyItem = {}
+    },
+    editConditionPropertyItem () {
+      this.conditionPropertyItemNameForm = { ...this.currentConditionPropertyItem }
+      this.showConditionPropertyItemNameDialog = true
+    },
+    deleteConditionPropertyCondition (item) {
+      this.currentConditionPropertyItem.conditions = this.currentConditionPropertyItem.conditions.filter(i => i.uid !== item.uid)
+    },
+    editConditionPropertyCondition (item) {
+      this.conditionPropertyItemConditionForm = { ...item }
+      this.conditionPropertyItemConditionForm.index = this.currentConditionPropertyItem.conditions.indexOf(item)
+      this.showConditionPropertyItemConditionDialog = true
+    },
+    getConditionOpText (p) {
+      let text = ''
+      switch (p) {
+        case '==':
+          text = '等于'
+          break
+        case '>':
+          text = '大于'
+          break
+        case '>=':
+          text = '大于等于'
+          break
+        case '<':
+          text = '小于'
+          break
+        case '<=':
+          text = '小于等于'
+          break
+        case '!=':
+          text = '不等于'
+          break
+        case 'in':
+          text = '在集合中'
+          break
+        case 'like':
+          text = '相似'
+          break
+        case 'not like':
+          text = '不相似'
+          break
+        case 'and':
+          text = '并且'
+          break
+        case 'or':
+          text = '或者'
+          break
+      }
+      return text
+    }
+  },
+  mounted () {
+    this.$refs.luckysheet.setAttribute('id', 'luckysheet')
+    this.getData()
+  },
+  created () {
+    this.getDataSource()
+    this.getFormParams()
+    this.getFieldConfigs()
+    this.$store.commit('SWITCH_MENU_SHOW', false)
+    this.$store.commit('SWITCH_APP_NAV_SHOW', false)
+    this.columnList = new Array(60).fill(0).map((item, index) => this.NumToString(index + 1))
+    this.rowList = new Array(500).fill(0).map((item, index) => index + 1)
+  },
+  beforeDestroy () {
+    this.$refs.luckysheet.removeAttribute('id')
+    this.$store.commit('SWITCH_MENU_SHOW', true)
+    this.$store.commit('SWITCH_APP_NAV_SHOW', true)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.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;
+}
+.import-btn {
+  margin-right: 10px;
+}
+.content {
+  width: 100%;
+  height: calc(100% - 59px);
+  display: flex;
+}
+.data-source {
+  width: 240px;
+  margin-right: 16px;
+  flex-shrink: 0;
+  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;
+}
+.luckysheet-container {
+  width: calc(100% - 600px);
+  height: 100%;
+  overflow: auto;
+  &::v-deep {
+    .luckysheet_info_detail {
+      display: none !important;
+    }
+  }
+}
+.attribute-pane {
+  width: 360px;
+  height: 100%;
+  background: #fff;
+}
+.attribute-pane__header {
+  padding: 16px;
+  border-bottom: 1px solid #e3e3e3;
+  > span {
+    padding-left: 8px;
+    border-left: 4px solid;
+    @include border_color_primary;
+    line-height: 20px;
+    font-size: 16px;
+    color: #222;
+  }
+}
+.attribute-pane__content {
+  padding: 0 10px;
+  height: calc(100% - 54px);
+  overflow: auto;
+}
+
+.attribute-item {
+  display: flex;
+  padding: 6px 0;
+  > label {
+    padding: 6px 0;
+    display: inline-block;
+    width: 84px;
+    margin-right: 14px;
+    line-height: 24px;
+    color: #444;
+  }
+}
+
+.attribute-item__content {
+  line-height: 36px;
+  color: #444;
+}
+.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;
+    }
+  }
+}
+.input-params {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  label {
+    width: 100px;
+    white-space: pre-wrap;
+  }
+}
+.preview-btn {
+  display: block;
+  margin: 0 auto;
+}
+.form__label {
+  margin: 10px 0;
+}
+.cell-select {
+  width: 68px;
+  margin-left: 8px;
+}
+.form-content {
+  &::v-deep {
+    .table-form-item__label  {
+      width: 80px;
+      padding-left: 0;
+    }
+    .table-form-item__content {
+      .el-input,  .el-input-number--medium {
+        width: 200px;
+      }
+    }
+  }
+}
+.filter-condition-opera__popper {
+  max-height: 400px;
+  overflow: auto;
+}
+.filter-condition__btn {
+  text-align: center;
+  margin: 10px 0;
+}
+.filter-condition__operates {
+  color: #666;
+  i {
+    cursor: pointer;
+    color: red;
+    margin: 0 4px;
+    &:first-child {
+      @include font_color_primary
+    }
+  }
+}
+.table-form-item-label::before {
+      content: '*';
+      color: #F56C6C;
+      margin-right: 4px;
+}
+.property-item-condition{
+  height: 40px;
+  align-items: center;
+  display: flex;
+}
+
+.condition-property-item{
+  padding: 4px 0;
+}
+
+.condition-property-item-active{
+  padding: 4px 0;
+  color: #0874e7;
+}
+
+</style>