cloud-web-corejs 1.0.54-dev.16 → 1.0.54-dev.160

package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/table-column-dialog.vue

@@ -31,24 +31,45 @@
               <span>{{ scope.$index + 1 }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="" width="35" fixed="left"><i class="el-icon-s-operation drag-option"></i>
+          <el-table-column label="" width="35" fixed="left"
+            ><i class="el-icon-s-operation drag-option"></i>
           </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.columnLabel')" width="150" prop="label" fixed="left">
+          <el-table-column
+            :label="i18nt('designer.setting.columnLabel')"
+            width="150"
+            prop="label"
+            fixed="left"
+          >
             <template slot-scope="scope">
               <el-input v-model="scope.row.label"></el-input>
             </template>
           </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.columnName')" width="150" prop="prop">
+          <el-table-column
+            :label="i18nt('designer.setting.columnName')"
+            width="150"
+            prop="prop"
+          >
             <template slot-scope="scope">
-              <el-input v-model="scope.row.prop" :disabled="'editAttachment' == scope.row.formatS"></el-input>
+              <el-input
+                v-model="scope.row.prop"
+                :disabled="'editAttachment' == scope.row.formatS"
+              ></el-input>
             </template>
           </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.columnWidth')" width="100" prop="width">
+          <el-table-column
+            :label="i18nt('designer.setting.columnWidth')"
+            width="100"
+            prop="width"
+          >
             <template slot-scope="scope">
               <el-input v-model="scope.row.width"></el-input>
             </template>
           </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.visibleColumn')" width="70" prop="show">
+          <el-table-column
+            :label="i18nt('designer.setting.visibleColumn')"
+            width="70"
+            prop="show"
+          >
             <template slot-scope="scope">
               <el-switch v-model="scope.row.show"></el-switch>
             </template>
@@ -58,12 +79,25 @@
               <el-switch v-model="scope.row.required"></el-switch>
             </template>
           </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.sortableColumn')" width="70" prop="sortable">
+          <el-table-column
+            :label="i18nt('designer.setting.sortableColumn')"
+            width="70"
+            prop="sortable"
+          >
             <template slot-scope="scope">
               <el-switch v-model="scope.row.sortable"></el-switch>
             </template>
           </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.fixedColumn')" width="100" prop="fixed">
+          <el-table-column :label="i18nt('明细行')" width="70" prop="sortable">
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.isItemLine"></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column
+            :label="i18nt('designer.setting.fixedColumn')"
+            width="100"
+            prop="fixed"
+          >
             <template slot-scope="scope">
               <el-select v-model="scope.row.fixed" clearable>
                 <el-option value="left">left</el-option>
@@ -78,57 +112,163 @@
                         </el-select>
                       </template>
                     </el-table-column>-->
-          <el-table-column :label="i18nt('designer.setting.formatOfColumn')" width="200" prop="formatS">
+          <el-table-column
+            :label="i18nt('designer.setting.formatOfColumn')"
+            width="200"
+            prop="formatS"
+          >
             <template slot-scope="scope">
-              <el-select v-model="scope.row.formatS" @change="changeFormatS(scope.row)" clearable>
-                <el-option-group :label="i18nt('designer.setting.customRenderGroup')">
+              <el-select
+                v-model="scope.row.formatS"
+                @change="changeFormatS(scope.row)"
+                clearable
+              >
+                <el-option-group
+                  :label="i18nt('designer.setting.customRenderGroup')"
+                >
                   <el-option value="render" label="render"></el-option>
                 </el-option-group>
-                <el-option-group v-for="t in op" :key="t.label" :label="t.label">
-                  <el-option v-for="e in t.options" :key="e.value" :value="e.value" :label="e.label"></el-option>
+                <el-option-group
+                  v-for="t in op"
+                  :key="t.label"
+                  :label="t.label"
+                >
+                  <el-option
+                    v-for="e in t.options"
+                    :key="e.value"
+                    :value="e.value"
+                    :label="e.label"
+                  ></el-option>
                 </el-option-group>
               </el-select>
             </template>
           </el-table-column>
           <el-table-column :label="i18nt('自定义表格列配置')" width="150">
             <template slot-scope="scope">
-              <a href="javascript:void(0);" class="a-link link-oneLind"
-                 @click="openTableColumnConfigDialog(scope.row,scope.$index)">
+              <a
+                href="javascript:void(0);"
+                class="a-link link-oneLind"
+                @click="openTableColumnConfigDialog(scope.row, scope.$index)"
+              >
                 <span>{{ scope.row.tableColumnConfig }}</span>
                 <i class="el-icon-edit"></i>
               </a>
             </template>
           </el-table-column>
-          <el-table-column :label="i18nt('编辑下拉列')" width="70" prop="sortable">
+          <el-table-column :label="i18nt('下拉列')" width="70" prop="sortable">
             <template slot-scope="scope">
               <el-switch v-model="scope.row.treeNode"></el-switch>
             </template>
           </el-table-column>
-          <el-table-column :label="i18nt('编辑插槽类型')" width="200" prop="editFormatS">
+          <el-table-column
+            :label="i18nt('编辑插槽类型')"
+            width="200"
+            prop="editFormatS"
+          >
+            <template slot-scope="scope">
+              <el-select
+                v-model="scope.row.editFormatS"
+                @change="changeFormatS(scope.row)"
+                clearable
+              >
+                <el-option
+                  v-for="e in editOp"
+                  :key="e.value"
+                  :value="e.value"
+                  :label="e.label"
+                ></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="编辑插槽配置" width="150" align="center">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                plain=""
+                round=""
+                icon="el-icon-edit"
+                @click="openEditFormatConfigDialog(scope.row, scope.$index)"
+                :disabled="!scope.row.editFormatS"
+              ></el-button>
+            </template>
+          </el-table-column>
+          <el-table-column
+            :label="i18nt('导出类型')"
+            width="200"
+            prop="formatS"
+          >
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.exportType" clearable>
+                <el-option value="Image2" label="图片"></el-option>
+                <el-option value="Number" label="数值"></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            :label="i18nt('表尾统计行类型')"
+            width="200"
+            prop="formatS"
+          >
             <template slot-scope="scope">
-              <el-select v-model="scope.row.editFormatS" @change="changeFormatS(scope.row)" clearable>
-                <el-option v-for="e in editOp" :key="e.value" :value="e.value" :label="e.label"></el-option>
+              <el-select v-model="scope.row.footerDataType" clearable>
+                <el-option value="1" label="合计"></el-option>
+                <el-option value="2" label="平均"></el-option>
+                <el-option value="3" label="自定义"></el-option>
               </el-select>
             </template>
           </el-table-column>
-          <el-table-column label="编辑插槽配置" width="70" align="center">
+          <el-table-column label="表尾统计行配置" width="150" align="center">
             <template slot-scope="scope">
-              <el-button size="mini" plain="" round="" icon="el-icon-edit"
-                         @click="openEditFormatConfigDialog(scope.row,scope.$index)"
-                         :disabled="!scope.row.editFormatS"></el-button>
+              <el-button
+                size="mini"
+                plain=""
+                round=""
+                icon="el-icon-edit"
+                @click="
+                  editFormEventHandler(
+                    scope.row,
+                    scope.$index,
+                    'footerMethodConfg'
+                  )
+                "
+                :disabled="scope.row.footerDataType !== '3'"
+              ></el-button>
             </template>
           </el-table-column>
-          <el-table-column label="格式化配置" width="90" fixed="right" align="center">
+
+          <el-table-column
+            label="格式化配置"
+            width="90"
+            fixed="right"
+            align="center"
+          >
             <template slot-scope="scope">
-              <el-button size="mini" plain="" round="" icon="el-icon-edit"
-                         @click="openFormatConfigDialog(scope.row,scope.$index)"
-                         :disabled="!columnFormatMap[scope.row.formatS]"></el-button>
+              <el-button
+                size="mini"
+                plain=""
+                round=""
+                icon="el-icon-edit"
+                @click="openFormatConfigDialog(scope.row, scope.$index)"
+                :disabled="!columnFormatMap[scope.row.formatS] && 'widgetRender'!== scope.row.formatS"
+              ></el-button>
             </template>
           </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.renderFunction')" width="70" fixed="right" align="center">
+          <el-table-column
+            :label="i18nt('designer.setting.renderFunction')"
+            width="70"
+            fixed="right"
+            align="center"
+          >
             <template slot-scope="scope">
-              <el-button :disabled="'render' !== scope.row.formatS" size="mini" plain="" round="" icon="el-icon-edit"
-                         @click="showRenderDialog(scope.row)"></el-button>
+              <el-button
+                :disabled="'render' !== scope.row.formatS"
+                size="mini"
+                plain=""
+                round=""
+                icon="el-icon-edit"
+                @click="showRenderDialog(scope.row)"
+              ></el-button>
             </template>
           </el-table-column>
           <el-table-column label="操作" width="150" fixed="right">
@@ -141,7 +281,9 @@
                 placement="top"
               >
                 <el-button
-                  size="mini" type="" circle=""
+                  size="mini"
+                  type=""
+                  circle=""
                   icon="el-icon-plus"
                   @click="onAddRoot"
                 />
@@ -156,7 +298,9 @@
                 placement="top"
               >
                 <el-button
-                  size="mini" type="" circle=""
+                  size="mini"
+                  type=""
+                  circle=""
                   icon="el-icon-plus"
                   @click="onAddSibling(row, $index)"
                 />
@@ -170,7 +314,9 @@
                 placement="top"
               >
                 <el-button
-                  size="mini" type="" circle=""
+                  size="mini"
+                  type=""
+                  circle=""
                   icon="el-icon-circle-plus-outline"
                   @click="onAddChild(row, $index)"
                 />
@@ -183,7 +329,9 @@
                 placement="top"
               >
                 <el-button
-                  size="mini" type="" circle=""
+                  size="mini"
+                  type=""
+                  circle=""
                   icon="el-icon-delete"
                   @click="onDelete(row, $index)"
                 />
@@ -191,15 +339,22 @@
             </template>
           </el-table-column>
         </el-table>
+        <columnRenderDialog :column="currentTableColumn" v-if="showColumnRenderDialog" :visiable.sync="showColumnRenderDialog" @confirm="confirmWidgetRenderDialog"></columnRenderDialog>
       </div>
       <div class="dialog-footer" slot="footer">
         <el-button @click="closeHandle" class="button-sty" icon="el-icon-close">
-          {{ i18nt('designer.hint.cancel') }}
+          {{ i18nt("designer.hint.cancel") }}
         </el-button>
-        <el-button type="primary" @click="colSubmit" class="button-sty" icon="el-icon-check">
-          {{ i18nt('designer.hint.confirm') }}
+        <el-button
+          type="primary"
+          @click="colSubmit"
+          class="button-sty"
+          icon="el-icon-check"
+        >
+          {{ i18nt("designer.hint.confirm") }}
         </el-button>
       </div>
+
     </el-dialog>
     <el-dialog
       v-if="showRenderDialogFlag"
@@ -213,16 +368,35 @@
       :destroy-on-close="!0"
       v-dialog-drag
       top="7vh"
+      :append-to-body="true"
     >
-      <el-alert type="info" :closable="!1" title="function customRender(params,h) {"/>
-      <code-editor ref="dsResultEditor" mode="javascript" :readonly="!1" v-model="renderJson"></code-editor>
-      <el-alert type="info" :closable="!1" title="}"/>
+      <el-alert
+        type="info"
+        :closable="!1"
+        title="function customRender(params,h) {"
+      />
+      <code-editor
+        ref="dsResultEditor"
+        mode="javascript"
+        :readonly="!1"
+        v-model="renderJson"
+      ></code-editor>
+      <el-alert type="info" :closable="!1" title="}" />
       <div class="dialog-footer" slot="footer">
-        <el-button @click="showRenderDialogFlag = !1" class="button-sty" icon="el-icon-close">
-          {{ i18nt('designer.hint.cancel') }}
+        <el-button
+          @click="showRenderDialogFlag = !1"
+          class="button-sty"
+          icon="el-icon-close"
+        >
+          {{ i18nt("designer.hint.cancel") }}
         </el-button>
-        <el-button type="primary" @click="saveColumnRender" class="button-sty" icon="el-icon-check">
-          {{ i18nt('designer.hint.confirm') }}
+        <el-button
+          type="primary"
+          @click="saveColumnRender"
+          class="button-sty"
+          icon="el-icon-check"
+        >
+          {{ i18nt("designer.hint.confirm") }}
         </el-button>
       </div>
     </el-dialog>
@@ -241,37 +415,101 @@
       top="5vh"
     >
       <div class="cont">
-        <el-alert type="info" :closable="false" :title="tableColumnConfigHeader"></el-alert>
-        <code-editor :mode="'javascript'" :readonly="false" v-model="tableColumnConfigCode"
-                     ref="ecEditor"></code-editor>
+        <el-alert
+          type="info"
+          :closable="false"
+          :title="tableColumnConfigHeader"
+        ></el-alert>
+        <code-editor
+          :mode="'javascript'"
+          :readonly="false"
+          v-model="tableColumnConfigCode"
+          ref="ecEditor"
+        ></code-editor>
         <el-alert type="info" :closable="false" title="}"></el-alert>
       </div>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="showTableColumnConfigDialog = false" class="button-sty" icon="el-icon-close">
-          {{ i18nt('designer.hint.cancel') }}
+        <el-button
+          @click="showTableColumnConfigDialog = false"
+          class="button-sty"
+          icon="el-icon-close"
+        >
+          {{ i18nt("designer.hint.cancel") }}
         </el-button>
-        <el-button type="primary" @click="saveTableColumnConfigDialog" class="button-sty" icon="el-icon-check">
-          {{ i18nt('designer.hint.confirm') }}
+        <el-button
+          type="primary"
+          @click="saveTableColumnConfigDialog"
+          class="button-sty"
+          icon="el-icon-check"
+        >
+          {{ i18nt("designer.hint.confirm") }}
+        </el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :title="i18nt('designer.setting.editFormEventHandler')"
+      :visible.sync="showFormEventDialogFlag"
+      v-if="showFormEventDialogFlag"
+      :show-close="true"
+      custom-class="dialog-style list-dialog"
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      top="5vh"
+    >
+      <div class="cont">
+        <el-alert
+          type="info"
+          :closable="false"
+          :title="'form.' + eventParamsMap[curEventName]"
+        ></el-alert>
+        <code-editor
+          :mode="'javascript'"
+          :readonly="false"
+          v-model="formEventHandlerCode"
+          ref="ecEditor"
+        ></code-editor>
+        <el-alert type="info" :closable="false" title="}"></el-alert>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          @click="showFormEventDialogFlag = false"
+          class="button-sty"
+          icon="el-icon-close"
+        >
+          {{ i18nt("designer.hint.cancel") }}
+        </el-button>
+        <el-button
+          type="primary"
+          @click="saveFormEventHandler"
+          class="button-sty"
+          icon="el-icon-check"
+        >
+          {{ i18nt("designer.hint.confirm") }}
         </el-button>
       </div>
     </el-dialog>
-  </div>
 
+  </div>
 </template>
 <script>
 import i18n from "../../../../../../components/xform/utils/i18n";
 import Sortable from "sortablejs";
-import {generateId} from "../../../../../../components/xform/utils/util";
+import { generateId } from "../../../../../../components/xform/utils/util";
+import columnRenderDialog from "./columnRenderDialog.vue"
 
 export default {
   mixins: [i18n],
   props: {
     designer: Object,
     selectedWidget: Object,
-    optionModel: Object
+    optionModel: Object,
   },
-  components: {},
-  inject: ['openWidgetPropertyDialog'],
+  components: {columnRenderDialog},
+  inject: ["openWidgetPropertyDialog"],
   data() {
     return {
       tableColumnConfigTitle: null,
@@ -282,228 +520,286 @@ export default {
       dialogVisible: true,
       alignOptions: [
         {
-          value: 'left',
-          label: 'left'
+          value: "left",
+          label: "left",
         },
         {
-          value: 'center',
-          label: 'center'
+          value: "center",
+          label: "center",
         },
         {
-          value: 'right',
-          label: 'right'
-        }
+          value: "right",
+          label: "right",
+        },
       ],
       op: [
         {
-          label: 'edit Format',
+          label: "edit Format",
           options: [
             {
-              value: 'editInput',
-              label: '文本输入框'
+              value: "editInput",
+              label: "文本输入框",
             },
             {
-              value: 'editNumber',
-              label: '数字输入框'
+              value: "editNumber",
+              label: "数字输入框",
             },
             {
-              value: 'editDate',
-              label: '日期输入框'
+              value: "editDate",
+              label: "日期输入框",
             },
             {
-              value: 'editSelect',
-              label: '下拉框'
+              value: "editSelect",
+              label: "下拉框",
             },
             {
-              value: 'editAttachment',
-              label: '附件'
+              value: "checkbox",
+              label: "复选框",
             },
             {
-              value: 'editSearch',
-              label: '搜索框'
+              value: "radio",
+              label: "单选框",
             },
             {
-              value: 'editStatus',
-              label: '状态'
+              value: "editAttachment",
+              label: "附件",
             },
             {
-              value: 'editDelete',
-              label: '删除按钮'
+              value: "editSearch",
+              label: "搜索框",
             },
             {
-              value: 'editButton',
-              label: '查看按钮'
+              value: "editStatus",
+              label: "状态",
             },
             {
-              value: 'aText',
-              label: '超链接文本'
+              value: "text",
+              label: "文本",
             },
             {
-              value: 'aLink',
-              label: '超链接按钮'
+              value: "editDelete",
+              label: "删除按钮",
             },
             {
-              value: 'button',
-              label: '按钮'
+              value: "editButton",
+              label: "查看按钮",
             },
             {
-              value: 'editTreeButtonGroup',
-              label: '编辑行按钮组'
-            }
-          ]
+              value: "aText",
+              label: "超链接文本",
+            },
+            {
+              value: "aLink",
+              label: "超链接按钮",
+            },
+            {
+              value: "button",
+              label: "按钮",
+            },
+            {
+              value: "editTreeButtonGroup",
+              label: "编辑行按钮组",
+            },
+            {
+              value: "widgetRender",
+              label: "自定义组件",
+            },
+          ],
         },
         {
-          label: '树控件',
+          label: "树控件",
           options: [
             {
-              value: 'addSiblingEditRow',
-              label: '新增兄弟节点'
+              value: "addSiblingEditRow",
+              label: "新增兄弟节点",
             },
             {
-              value: 'addChildTreeRow',
-              label: '新增子节点'
+              value: "addChildTreeRow",
+              label: "新增子节点",
             },
             {
-              value: 'moveUpRow',
-              label: '上移'
+              value: "moveUpRow",
+              label: "上移",
             },
             {
-              value: 'moveDownRow',
-              label: '下移'
+              value: "moveDownRow",
+              label: "下移",
             },
             {
-              value: 'removeTreeRow',
-              label: '删除树节点'
-            }
-          ]
+              value: "removeTreeRow",
+              label: "删除树节点",
+            },
+          ],
         },
         {
-          label: 'Date Format',
+          label: "Date Format",
           options: [
             {
-              value: 'd1',
-              label: 'yyyy-MM-dd'
+              value: "d1",
+              label: "yyyy-MM-dd",
             },
             {
-              value: 'd2',
-              label: 'yyyy/MM/dd'
+              value: "d2",
+              label: "yyyy/MM/dd",
             },
             {
-              value: 'd3',
-              label: 'yyyy年MM月dd日'
+              value: "d3",
+              label: "yyyy年MM月dd日",
             },
             {
-              value: 'd4',
-              label: 'yyyy-MM-dd HH:mm:ss'
+              value: "d4",
+              label: "yyyy-MM-dd HH:mm:ss",
             },
             {
-              value: 'd5',
-              label: 'yyyy-MM-dd hh:mm:ss'
-            }
-          ]
+              value: "d5",
+              label: "yyyy-MM-dd hh:mm:ss",
+            },
+          ],
         },
         {
-          label: 'Number Format',
+          label: "Number Format",
           options: [
             {
-              value: 'n1',
-              label: '###,###,###,##0.######'
+              value: "n1",
+              label: "###,###,###,##0.######",
             },
             {
-              value: 'n2',
-              label: '###,###,###,##0.00####'
+              value: "n2",
+              label: "###,###,###,##0.00####",
             },
             {
-              value: 'n3',
-              label: '###,###,###,##0.000000'
+              value: "n3",
+              label: "###,###,###,##0.000000",
             },
             {
-              value: 'n4',
-              label: '###,###,###,##0.000'
+              value: "n4",
+              label: "###,###,###,##0.000",
             },
             {
-              value: 'n5',
-              label: '###,###,###,##0.00'
+              value: "n5",
+              label: "###,###,###,##0.00",
             },
             {
-              value: 'n6',
-              label: '###,###,###,##0'
+              value: "n6",
+              label: "###,###,###,##0",
             },
             {
-              value: 'n7',
-              label: '###,##0.00##%'
-            }
-          ]
-        }
+              value: "n7",
+              label: "###,##0.00##%",
+            },
+          ],
+        },
       ],
       editOp: [
         {
-          value: 'editInput',
-          label: '文本输入框'
+          value: "editInput",
+          label: "文本输入框",
         },
         {
-          value: 'editNumber',
-          label: '数字输入框'
+          value: "editNumber",
+          label: "数字输入框",
         },
         {
-          value: 'editDate',
-          label: '日期输入框'
+          value: "editDate",
+          label: "日期输入框",
         },
         {
-          value: 'editSelect',
-          label: '下拉框'
+          value: "editSelect",
+          label: "下拉框",
         },
         {
-          value: 'editAttachment',
-          label: '附件'
+          value: "editAttachment",
+          label: "附件",
         },
         {
-          value: 'editSearch',
-          label: '搜索框'
-        }
+          value: "editSearch",
+          label: "搜索框",
+        },
       ],
       showRenderDialogFlag: !1,
-      renderJson: '',
+      renderJson: "",
       currentTableColumn: null,
 
       hideAfter: 1500,
       openDelay: 500,
-      tableData: [],//树形结构数据转的数组
+      tableData: [], //树形结构数据转的数组
       tableDataArray: [],
       dragSort: null,
       columnFormatMap: {
-        editInput: 'input',
-        editNumber: 'number',
-        editDate: 'date',
-        editSelect: 'select',
-        editSearch: 'vabsearch',
-        editAttachment: 'baseAttachment',
-        editStatus: 'status',
-        aText: 'a-text',
-        aLink: 'a-link',
-        editDelete: 'a-link',
-        editButton: 'a-link',
-        button: 'button',
-        addSiblingEditRow: 'a-link',
-        addChildTreeRow: 'a-link',
-        moveUpRow: 'a-link',
-        moveDownRow: 'a-link',
-        removeTreeRow: 'a-link'
+        editInput: "input",
+        editNumber: "number",
+        editDate: "date",
+        editSelect: "select",
+        editSearch: "vabsearch",
+        editAttachment: "baseAttachment",
+        editStatus: "status",
+        aText: "a-text",
+        aLink: "a-link",
+        editDelete: "a-link",
+        editButton: "a-link",
+        button: "button",
+        addSiblingEditRow: "a-link",
+        addChildTreeRow: "a-link",
+        moveUpRow: "a-link",
+        moveDownRow: "a-link",
+        removeTreeRow: "a-link",
+        text: "text",
+        checkbox: "checkbox",
+        radio: "radio",
+      },
+
+      showFormEventDialogFlag: false,
+      formEventHandlerCode: "",
+      curEventName: "",
+
+      eventParamsMap: {
+        footerMethodConfg: "footerMethodConfg(dataId,formCode,param) {",
       },
-    }
+
+      showColumnRenderDialog:false,
+
+    };
   },
   beforeDestroy() {
-    if (this.dragSort) this.dragSort.destroy()
-  },
-  created() {
-
+    if (this.dragSort) this.dragSort.destroy();
   },
+  created() {},
   mounted() {
     this.init();
   },
   methods: {
+    editFormEventHandler(row, index, eventName) {
+      this.curEventName = eventName;
+      this.curEventIndex = index;
+      this.formEventHandlerCode = row[eventName];
+      this.showFormEventDialogFlag = true;
+    },
+
+    saveFormEventHandler() {
+      const codeHints = this.$refs.ecEditor.getEditorAnnotations();
+      let syntaxErrorFlag = false;
+      if (!!codeHints && codeHints.length > 0) {
+        codeHints.forEach((chItem) => {
+          if (chItem.type === "error") {
+            syntaxErrorFlag = true;
+          }
+        });
+
+        if (syntaxErrorFlag) {
+          this.$message.error(
+            this.i18nt("designer.setting.syntaxCheckWarning")
+          );
+          return;
+        }
+      }
+      this.tableData[this.curEventIndex][this.curEventName] =
+        this.formEventHandlerCode;
+      this.showFormEventDialogFlag = false;
+    },
     init() {
-      this.tableData = this.$baseLodash.cloneDeep(this.optionModel.tableColumns);
+      this.tableData = this.$baseLodash.cloneDeep(
+        this.optionModel.tableColumns
+      );
       this.$nextTick(() => {
         this.rowDrop();
       });
@@ -513,33 +809,52 @@ export default {
       this.optionModel.tableColumns = this.tableData;
       this.closeHandle();
     },
+    openWidgetRenderDialog(row){
+      this.currentTableColumn = row;
+      this.showColumnRenderDialog = true
+    },
+    confirmWidgetRenderDialog(widgetList){
+      this.currentTableColumn.widgetList = widgetList
+      this.showColumnRenderDialog = false
+    },
     showRenderDialog: function (e) {
-      (this.currentTableColumn = e), (this.renderJson = e.render || ''), (this.showRenderDialogFlag = !0);
+      /*if(e.formatS == 'widgetRender'){
+        this.openWidgetRenderDialog(e);
+        return
+      }*/
+
+      (this.currentTableColumn = e),
+        (this.renderJson = e.render || ""),
+        (this.showRenderDialogFlag = !0);
     },
     saveColumnRender: function () {
-      this.$set(this.currentTableColumn, 'render', this.renderJson), (this.showRenderDialogFlag = !1);
+      this.$set(this.currentTableColumn, "render", this.renderJson),
+        (this.showRenderDialogFlag = !1);
     },
     closeHandle() {
-      this.$emit('update:visiable', false);
-      this.$emit('close');
+      this.$emit("update:visiable", false);
+      this.$emit("close");
     },
     // 添加同级节点
     onAddSibling(row, index) {
-      console.log('onAddSibling', row, index)
-      const parentId = row.parentId || null
+      console.log("onAddSibling", row, index);
+      const parentId = row.parentId || null;
       // 先判断是不是根节点
       if (!parentId) {
         // 当前节点直接添加
         // this.tableData.push(this.generateRow(parentId))
-        let addIndex = this.tableData.filter(item => !item.parentId).findIndex(item => item.columnId == row.columnId) + 1;
-        this.tableData.splice(addIndex, 0, this.generateRow(parentId))
+        let addIndex =
+          this.tableData
+            .filter((item) => !item.parentId)
+            .findIndex((item) => item.columnId == row.columnId) + 1;
+        this.tableData.splice(addIndex, 0, this.generateRow(parentId));
       } else {
-        this.handleAddOneRow(row, index, 'SIBLING')
+        this.handleAddOneRow(row, index, "SIBLING");
       }
     },
     // 添加子节点  todo
     onAddChild(row, index) {
-      this.handleAddOneRow(row, index, 'CHILD')
+      this.handleAddOneRow(row, index, "CHILD");
     },
     /**
      * 处理添加一行数据
@@ -548,36 +863,36 @@ export default {
      * @param {string} type 操作类型 SIBLING 同级 / CHILD 子级
      */
     handleAddOneRow(row, index, type) {
-
-      const {parentId, columnId} = row
-      const curId = type === 'SIBLING' ? parentId : columnId
-      let curRow = {}
+      const { parentId, columnId } = row;
+      const curId = type === "SIBLING" ? parentId : columnId;
+      let curRow = {};
       // 在 tableData 中，找到当前节点
       const findRow = (data) => {
         data.forEach((item) => {
           if (item.columnId === curId) {
-            curRow = item
+            curRow = item;
           }
           if (item.children && item.children.length) {
-            findRow(item.children)
+            findRow(item.children);
           }
-        })
-      }
+        });
+      };
 
-      findRow(this.tableData)
+      findRow(this.tableData);
 
-      const {columnId: generateParentId, children} = curRow
+      const { columnId: generateParentId, children } = curRow;
 
-      let newRow = this.generateRow(generateParentId)
+      let newRow = this.generateRow(generateParentId);
       if (children) {
-        if (type === 'SIBLING') {
-          let addIndex = children.findIndex(item => item.columnId == row.columnId) + 1;
-          children.splice(addIndex, 0, newRow)
+        if (type === "SIBLING") {
+          let addIndex =
+            children.findIndex((item) => item.columnId == row.columnId) + 1;
+          children.splice(addIndex, 0, newRow);
         } else {
-          children.push(newRow)
+          children.push(newRow);
         }
       } else {
-        this.$set(curRow, 'children', [newRow])
+        this.$set(curRow, "children", [newRow]);
       }
     },
     getUuid() {
@@ -587,7 +902,7 @@ export default {
      * 生成一行数据
      */
     generateRow(parentId) {
-      let tmpId = 'column' + generateId();
+      let tmpId = "column" + generateId();
       let uuid = this.getUuid();
       var row = {
         columnId: uuid,
@@ -597,46 +912,52 @@ export default {
         width: 150,
         prop: tmpId,
         label: tmpId,
-        align: 'left',
+        align: "left",
         show: true,
         sortable: true,
-
+        exportType: null,
+        footerDataType: null,
+        footerMethodConfg: null,
+        widgetList:[]
         // treeNode: false,
-
       };
       return row;
     },
     // 添加根节点
     onAddRoot() {
-      this.tableData.push(this.generateRow())
+      this.tableData.push(this.generateRow());
     },
     // 删除当前节点及对应子节点数据
     onDelete(row) {
-      const {parentId, columnId} = row
+      const { parentId, columnId } = row;
       // 根节点直接删除
       if (!parentId) {
-        const delIndex = this.tableData.findIndex((item) => item.columnId === columnId)
-        this.tableData.splice(delIndex, 1)
+        const delIndex = this.tableData.findIndex(
+          (item) => item.columnId === columnId
+        );
+        this.tableData.splice(delIndex, 1);
       } else {
         // 找到父节点，通过父节点删除
-        let parentRow = {}
+        let parentRow = {};
         const findRow = (data) => {
           data.forEach((item) => {
             if (item.columnId === parentId) {
-              parentRow = {...item}
+              parentRow = { ...item };
             }
             if (item.children && item.children.length) {
-              findRow(item.children)
+              findRow(item.children);
             }
-          })
-        }
-        findRow(this.tableData)
+          });
+        };
+        findRow(this.tableData);
 
-        const {children} = parentRow
+        const { children } = parentRow;
 
-        const delIndex = children.findIndex((item) => item.columnId === columnId)
+        const delIndex = children.findIndex(
+          (item) => item.columnId === columnId
+        );
 
-        children.splice(delIndex, 1)
+        children.splice(delIndex, 1);
       }
     },
     // 数据准备 生成 id 和 parentId
@@ -644,30 +965,32 @@ export default {
       const tableFormat = (tableData, parentId) => {
         tableData.forEach((item) => {
           // item.parentId = parentId || null
-          if (!item.kid) item.kid = item.columnId
+          if (!item.kid) item.kid = item.columnId;
           if (item.children && item.children.length > 0) {
-            tableFormat(item.children, item.columnId)
+            tableFormat(item.children, item.columnId);
           }
-        })
-      }
+        });
+      };
 
-      tableFormat(data)
-      return data
+      tableFormat(data);
+      return data;
     },
     //drag begin
     //行拖拽
     rowDrop() {
-      if (this.dragSort) this.dragSort.destroy() // 防止在Dom上重复绑定事件
+      if (this.dragSort) this.dragSort.destroy(); // 防止在Dom上重复绑定事件
       // const tbody = document.querySelector('.drag .el-table__body-wrapper tbody');
-      var tbody = this.$refs.singleTable.$el.querySelectorAll('.el-table__fixed-body-wrapper > table > tbody')[0];
+      var tbody = this.$refs.singleTable.$el.querySelectorAll(
+        ".el-table__fixed-body-wrapper > table > tbody"
+      )[0];
       const _this = this;
       this.dragSort = Sortable.create(tbody, {
-        ghostClass: 'sortable-ghost',
+        ghostClass: "sortable-ghost",
         setData: function (e) {
-          e.setData('Text', '');
+          e.setData("Text", "");
         },
-        onEnd({newIndex, oldIndex}) {
-          _this.rowDropEnd(newIndex, oldIndex)
+        onEnd({ newIndex, oldIndex }) {
+          _this.rowDropEnd(newIndex, oldIndex);
         },
       });
     },
@@ -678,7 +1001,7 @@ export default {
       data.forEach((item) => {
         const loop = (data) => {
           result.push({
-            ...data
+            ...data,
           });
           let child = data.children;
           if (child) {
@@ -694,7 +1017,9 @@ export default {
     //数组转树
     arrToTree(arr, parentId) {
       return arr
-        .filter((item) => (!parentId ? !item.parentId : item.parentId === parentId))
+        .filter((item) =>
+          !parentId ? !item.parentId : item.parentId === parentId
+        )
         .map((item) => {
           item.children = this.arrToTree(arr, item.columnId);
           return item;
@@ -732,13 +1057,7 @@ export default {
       let newRow = this.tableDataArray[newIndex];
 
       //判断是否把该行 拖拽到 自己的底级中
-      if (
-        this.isTreeBottom(
-          this.tableData,
-          oldRow.columnId,
-          newRow.columnId
-        )
-      ) {
+      if (this.isTreeBottom(this.tableData, oldRow.columnId, newRow.columnId)) {
         this.$message({
           type: "error",
           message: "不能放到子节点",
@@ -784,7 +1103,7 @@ export default {
       let isButtontCell = false;
       let widgetType = this.columnFormatMap[formatS];
       if (widgetType) {
-        isButtontCell = widgetType === 'a-link' || widgetType === 'button';
+        isButtontCell = widgetType === "a-link" || widgetType === "button";
       }
       return isButtontCell;
     },
@@ -792,20 +1111,20 @@ export default {
     changeFormatS(row) {
       let isButtontCell = this.getIsButtontCell(row.formatS);
       let columnWidgetConfig = this.getColumnWidgetConfig(row, true);
-      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
+      let { columnSelectedWidget, columnEditFields } = columnWidgetConfig;
       if (columnSelectedWidget) {
         row.columnOption = columnSelectedWidget.options;
       } else {
-        row.columnOption = {}
+        row.columnOption = {};
       }
 
-      if (row.formatS == 'editTreeButtonGroup') {
+      if (row.formatS == "editTreeButtonGroup") {
         row.prop = null;
         row.label = null;
         row.sortable = false;
         row.width = 150;
       } else if (isButtontCell) {
-        if (row.formatS == 'aLink' || row.formatS == 'button') {
+        if (row.formatS == "aLink" || row.formatS == "button") {
           if (!row.width || row.width == 47) row.width = 150;
         } else {
           row.width = 47;
@@ -814,13 +1133,13 @@ export default {
         row.label = null;
         row.sortable = false;
       } else {
-        let tmpId = 'column' + generateId();
+        let tmpId = "column" + generateId();
         if (!row.width || row.width == 47) row.width = 150;
         if (!row.prop) row.prop = tmpId;
         if (!row.label) row.label = tmpId;
         row.sortable = true;
 
-        if (row.formatS == 'editAttachment') {
+        if (row.formatS == "editAttachment") {
           row.prop = this.designer.createAttachmentKeyName();
         } else {
           let attachmentPrefix = this.designer.getAttachmentPrefix();
@@ -829,7 +1148,7 @@ export default {
       }
     },
     getColumnWidgetConfig(row, isChange, isEdit) {
-      let formatS = isEdit ? row.editFormatS : row.formatS
+      let formatS = isEdit ? row.editFormatS : row.formatS;
       let columnSelectedWidget = null;
       let columnEditFields = null;
 
@@ -845,7 +1164,9 @@ export default {
 
       if (type) {
         // columnSelectedWidget = this.$baseLodash.cloneDeep(this.designer.getFieldWidgetByType(type));
-        columnSelectedWidget = this.designer.copyNewFieldWidget(this.designer.getFieldWidgetByType(type));
+        columnSelectedWidget = this.designer.copyNewFieldWidget(
+          this.designer.getFieldWidgetByType(type)
+        );
         /*let tmpId = generateId();
         let idVal = row.prop ? row.prop : (type + tmpId);*/
         /*columnSelectedWidget.id = idVal;*/
@@ -859,61 +1180,70 @@ export default {
         if (!isChange && columnOption && Object.keys(columnOption).length) {
           columnOption.required = row.required || false;
           columnSelectedWidget.options = columnOption;
-          if ('editDelete' == formatS) {
-            columnSelectedWidget.options.hiddenByWf = columnSelectedWidget.options.hiddenByWf ?? true;
-            columnSelectedWidget.options.prefixIcon = columnSelectedWidget.options.prefixIcon || "el-icon-delete";
-          } else if ('editButton' == formatS) {
-            columnSelectedWidget.options.prefixIcon = columnSelectedWidget.options.prefixIcon || "el-icon-edit";
+          if ("editDelete" == formatS) {
+            columnSelectedWidget.options.hiddenByWf =
+              columnSelectedWidget.options.hiddenByWf ?? true;
+            columnSelectedWidget.options.prefixIcon =
+              columnSelectedWidget.options.prefixIcon || "el-icon-delete";
+          } else if ("editButton" == formatS) {
+            columnSelectedWidget.options.prefixIcon =
+              columnSelectedWidget.options.prefixIcon || "el-icon-edit";
           }
         } else {
           columnSelectedWidget.options.required = row.required || false;
 
-          if ('editDelete' == formatS) {
+          if ("editDelete" == formatS) {
             columnSelectedWidget.options.prefixIcon = "el-icon-delete";
             columnSelectedWidget.options.label = "删除";
             columnSelectedWidget.options.labelHidden = true;
             columnSelectedWidget.options.hiddenByWf = true;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nlet tableRef = this.getWidgetRef(this.parentWidget.options.name);\ntableRef.deleteRow(tableParam.row,tableParam.rowIndex);";
-          } else if ('editButton' == formatS) {
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nlet tableRef = this.getWidgetRef(this.parentWidget.options.name);\ntableRef.deleteRow(tableParam.row,tableParam.rowIndex);";
+          } else if ("editButton" == formatS) {
             columnSelectedWidget.options.prefixIcon = "el-icon-edit";
             columnSelectedWidget.options.label = "查看";
             columnSelectedWidget.options.labelHidden = true;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nlet tableRef = this.getWidgetRef(this.parentWidget.options.name);\ntableRef.openEditDialog(tableParam.row)";
-          } else if ('addSiblingEditRow' == formatS) {
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nlet tableRef = this.getWidgetRef(this.parentWidget.options.name);\ntableRef.openEditDialog(tableParam.row)";
+          } else if ("addSiblingEditRow" == formatS) {
             columnSelectedWidget.options.prefixIcon = "el-icon-plus";
             columnSelectedWidget.options.label = "新增兄弟节点";
             columnSelectedWidget.options.labelHidden = false;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nthis.getParentTarget().addSiblingTreeRow(null,tableParam);";
-          } else if ('addChildTreeRow' == formatS) {
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().addSiblingTreeRow(null,tableParam);";
+          } else if ("addChildTreeRow" == formatS) {
             columnSelectedWidget.options.prefixIcon = "el-icon-plus";
             columnSelectedWidget.options.label = "新增子节点";
             columnSelectedWidget.options.labelHidden = false;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nthis.getParentTarget().addChildTreeRow(null,tableParam);";
-          } else if ('moveUpRow' == formatS) {
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().addChildTreeRow(null,tableParam);";
+          } else if ("moveUpRow" == formatS) {
             // columnSelectedWidget.options.prefixIcon = "el-icon-plus";
             columnSelectedWidget.options.label = "↑上移";
             columnSelectedWidget.options.labelHidden = false;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nthis.getParentTarget().moveUpRow(tableParam);";
-          } else if ('moveDownRow' == formatS) {
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().moveUpRow(tableParam);";
+          } else if ("moveDownRow" == formatS) {
             // columnSelectedWidget.options.prefixIcon = "el-icon-plus";
             columnSelectedWidget.options.label = "↓下移";
             columnSelectedWidget.options.labelHidden = false;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nthis.getParentTarget().moveDownRow(tableParam);";
-          } else if ('removeTreeRow' == formatS) {
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().moveDownRow(tableParam);";
+          } else if ("removeTreeRow" == formatS) {
             columnSelectedWidget.options.prefixIcon = "el-icon-delete";
             columnSelectedWidget.options.label = "删除";
             columnSelectedWidget.options.labelHidden = true;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nthis.getParentTarget().removeTreeRow(tableParam);";
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().removeTreeRow(tableParam);";
           }
 
           columnOption = columnSelectedWidget.options;
-
         }
 
         // columnSelectedWidget.options.name = isEdit? (type + row.columnId) : row.prop;
         // columnSelectedWidget.options.name = type + row.columnId;
         // columnSelectedWidget.options.name = row.prop;
-        if (columnSelectedWidget.options.hasOwnProperty('keyName')) {
+        if (columnSelectedWidget.options.hasOwnProperty("keyName")) {
           columnSelectedWidget.options.keyName = row.prop;
           columnSelectedWidget.options.keyNameEnabled = true;
         } else {
@@ -925,18 +1255,24 @@ export default {
           columnSelectedWidget.options.labelHidden = true;
         }
       }
-      return {columnSelectedWidget, columnEditFields};
+      return { columnSelectedWidget, columnEditFields };
     },
     openFormatConfigDialog(row, index) {
+      if(row.formatS == 'widgetRender'){
+        this.openWidgetRenderDialog(row);
+        return
+      }
+
+
       let option = row.columnOption;
       let selectedWidget;
       let columnWidgetConfig = this.getColumnWidgetConfig(row);
-      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
+      let { columnSelectedWidget, columnEditFields } = columnWidgetConfig;
       if (columnSelectedWidget) {
         option = columnSelectedWidget.options;
         selectedWidget = columnSelectedWidget;
       } else {
-        option = {}
+        option = {};
         selectedWidget = {};
       }
 
@@ -950,20 +1286,16 @@ export default {
         index: index,
         columnEditFields: columnEditFields,
         callback: (columnOption) => {
-          this.confirmFormatConfigDialog(columnOption);
-        }
-      })
+          this.confirmFormatConfigDialog(columnOption, row);
+        },
+      });
     },
     getFieldKeyNameByOptions(options) {
       let o = options.name;
-      return (
-        (options.keyNameEnabled
-          && options.keyName)
-        || o
-      );
+      return (options.keyNameEnabled && options.keyName) || o;
     },
-    confirmFormatConfigDialog(columnOption) {
-      let row = this.tableData[this.operateIndex];
+    confirmFormatConfigDialog(columnOption, row) {
+      // let row = this.tableData[this.operateIndex];
       row.columnOption = columnOption;
       let isButtontCell = this.getIsButtontCell(row.formatS);
       if (!isButtontCell) {
@@ -976,12 +1308,12 @@ export default {
       let option = row.columnOption;
       let selectedWidget;
       let columnWidgetConfig = this.getColumnWidgetConfig(row, null, true);
-      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
+      let { columnSelectedWidget, columnEditFields } = columnWidgetConfig;
       if (columnSelectedWidget) {
         option = columnSelectedWidget.options;
         selectedWidget = columnSelectedWidget;
       } else {
-        option = {}
+        option = {};
         selectedWidget = {};
       }
 
@@ -995,12 +1327,12 @@ export default {
         index: index,
         columnEditFields: columnEditFields,
         callback: (columnOption) => {
-          this.confirmEditFormatConfigDialog(columnOption);
-        }
-      })
+          this.confirmEditFormatConfigDialog(columnOption, row);
+        },
+      });
     },
-    confirmEditFormatConfigDialog(columnOption) {
-      let row = this.tableData[this.operateIndex];
+    confirmEditFormatConfigDialog(columnOption, row) {
+      // let row = this.tableData[this.operateIndex];
       row.editColumnOption = columnOption;
       /*row.prop = columnOption.name;
       row.label = columnOption.label;
@@ -1008,39 +1340,50 @@ export default {
     },
     openTableColumnConfigDialog(row, index) {
       this.operateIndex = index;
+      this.currentTableColumn = row;
       let eventName = "tableColumnConfig";
-      let eventParams = ["dataId", "formCode"]
-      this.tableColumnConfigHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`;
-      this.tableColumnConfigCode = this.$baseLodash.cloneDeep(row.tableColumnConfig || '');
+      let eventParams = ["dataId", "formCode"];
+      this.tableColumnConfigHeader = `${
+        this.optionModel.name
+      }.${eventName}(${eventParams.join(", ")}) {`;
+      this.tableColumnConfigCode = this.$baseLodash.cloneDeep(
+        row.tableColumnConfig || ""
+      );
 
       this.tableColumnConfigTitle = `自定义表格列属性配置(${row.label})`;
       this.showTableColumnConfigDialog = true;
     },
     saveTableColumnConfigDialog() {
-      let row = this.tableData[this.operateIndex];
+      // let row = this.tableData[this.operateIndex];
+      let row = this.currentTableColumn;
       const codeHints = this.$refs.ecEditor.getEditorAnnotations();
       let syntaxErrorFlag = false;
       if (!!codeHints && codeHints.length > 0) {
-        codeHints.forEach(chItem => {
-          if (chItem.type === 'error') {
+        codeHints.forEach((chItem) => {
+          if (chItem.type === "error") {
             syntaxErrorFlag = true;
           }
         });
 
         if (syntaxErrorFlag) {
-          this.$message.error(this.i18nt('designer.setting.syntaxCheckWarning'));
+          this.$message.error(
+            this.i18nt("designer.setting.syntaxCheckWarning")
+          );
           return;
         }
       }
-      this.$set(row, 'tableColumnConfig', this.$baseLodash.cloneDeep(this.tableColumnConfigCode))
+      this.$set(
+        row,
+        "tableColumnConfig",
+        this.$baseLodash.cloneDeep(this.tableColumnConfigCode)
+      );
       this.showTableColumnConfigDialog = false;
-
     },
-  }
-}
+  },
+};
 </script>
 <style scoped lang="scss">
 .icon-drag:before {
-  content: '\e61d';
+  content: "\e61d";
 }
 </style>