cloud-web-corejs 1.0.54-dev.81 → 1.0.54-dev.811

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

@@ -1,1059 +1,2103 @@
-<template>
-  <div>
-    <el-dialog
-      custom-class="dialog-style list-dialog"
-      :title="i18nt('designer.setting.tableColEdit')"
-      :visible.sync="showDialog"
-      :modal="false"
-      :show-close="!0"
-      :close-on-click-modal="!1"
-      :close-on-press-escape="!1"
-      :destroy-on-close="!0"
-      top="5vh"
-      width="1220px"
-      v-dialog-drag
-      @closed="closeHandle"
-    >
-      <div class="cont">
-        <el-table
-          ref="singleTable"
-          width="100%"
-          :data="tableData"
-          height="500"
-          border=""
-          row-key="columnId"
-          stripe=""
-          :tree-props="{ children: 'children' }"
-          default-expand-all
-        >
-          <el-table-column label="" min-width="80" fixed="left">
-            <template slot-scope="scope">
-              <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>
-          <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">
-            <template slot-scope="scope">
-              <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">
-            <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">
-            <template slot-scope="scope">
-              <el-switch v-model="scope.row.show"></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column :label="i18nt('必填')" width="70" prop="required">
-            <template slot-scope="scope">
-              <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">
-            <template slot-scope="scope">
-              <el-switch v-model="scope.row.sortable"></el-switch>
-            </template>
-          </el-table-column>
-          <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>
-                <el-option value="right">right</el-option>
-              </el-select>
-            </template>
-          </el-table-column>
-          <!--          <el-table-column :label="i18nt('designer.setting.alignTypeOfColumn')" width="100" prop="align">
-                      <template slot-scope="scope">
-                        <el-select v-model="scope.row.align">
-                          <el-option v-for="(e,index) in alignOptions" :key="index" :value="e.value" :label="e.label"></el-option>
-                        </el-select>
-                      </template>
-                    </el-table-column>-->
-          <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-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>
-              </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)">
-                <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">
-            <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">
-            <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="70" 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="格式化配置" 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>
-            </template>
-          </el-table-column>
-          <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>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="150" fixed="right">
-            <template slot="header">
-              <el-tooltip
-                :hide-after="500"
-                class="item"
-                effect="dark"
-                content="添加根节点"
-                placement="top"
-              >
-                <el-button
-                  size="mini" type="" circle=""
-                  icon="el-icon-plus"
-                  @click="onAddRoot"
-                />
-              </el-tooltip>
-            </template>
-            <template #default="{ row, $index }">
-              <el-tooltip
-                :hide-after="hideAfter"
-                :open-delay="openDelay"
-                effect="dark"
-                content="添加兄弟节点"
-                placement="top"
-              >
-                <el-button
-                  size="mini" type="" circle=""
-                  icon="el-icon-plus"
-                  @click="onAddSibling(row, $index)"
-                />
-              </el-tooltip>
-
-              <el-tooltip
-                :hide-after="hideAfter"
-                :open-delay="openDelay"
-                effect="dark"
-                content="添加子节点"
-                placement="top"
-              >
-                <el-button
-                  size="mini" type="" circle=""
-                  icon="el-icon-circle-plus-outline"
-                  @click="onAddChild(row, $index)"
-                />
-              </el-tooltip>
-              <el-tooltip
-                :hide-after="hideAfter"
-                :open-delay="openDelay"
-                effect="dark"
-                content="删除"
-                placement="top"
-              >
-                <el-button
-                  size="mini" type="" circle=""
-                  icon="el-icon-delete"
-                  @click="onDelete(row, $index)"
-                />
-              </el-tooltip>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="dialog-footer" slot="footer">
-        <el-button @click="closeHandle" class="button-sty" icon="el-icon-close">
-          {{ 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>
-      </div>
-    </el-dialog>
-    <el-dialog
-      v-if="showRenderDialogFlag"
-      :title="i18nt('designer.setting.renderFunction')"
-      :visible.sync="showRenderDialogFlag"
-      :modal="false"
-      :show-close="!0"
-      custom-class="dialog-style list-dialog"
-      :close-on-click-modal="!1"
-      :close-on-press-escape="!1"
-      :destroy-on-close="!0"
-      v-dialog-drag
-      top="7vh"
-    >
-      <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>
-        <el-button type="primary" @click="saveColumnRender" class="button-sty" icon="el-icon-check">
-          {{ i18nt('designer.hint.confirm') }}
-        </el-button>
-      </div>
-    </el-dialog>
-    <el-dialog
-      :title="tableColumnConfigTitle"
-      :visible.sync="showTableColumnConfigDialog"
-      v-if="showTableColumnConfigDialog"
-      :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="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>
-        <el-button type="primary" @click="saveTableColumnConfigDialog" class="button-sty" icon="el-icon-check">
-          {{ i18nt('designer.hint.confirm') }}
-        </el-button>
-      </div>
-    </el-dialog>
-  </div>
-
-</template>
-<script>
-import i18n from "../../../../../../components/xform/utils/i18n";
-import Sortable from "sortablejs";
-import {generateId} from "../../../../../../components/xform/utils/util";
-
-export default {
-  mixins: [i18n],
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object
-  },
-  components: {},
-  inject: ['openWidgetPropertyDialog'],
-  data() {
-    return {
-      tableColumnConfigTitle: null,
-      showTableColumnConfigDialog: false,
-      tableColumnConfigHeader: null,
-      tableColumnConfigCode: null,
-      showDialog: true,
-      dialogVisible: true,
-      alignOptions: [
-        {
-          value: 'left',
-          label: 'left'
-        },
-        {
-          value: 'center',
-          label: 'center'
-        },
-        {
-          value: 'right',
-          label: 'right'
-        }
-      ],
-      op: [
-        {
-          label: 'edit Format',
-          options: [
-            {
-              value: 'editInput',
-              label: '文本输入框'
-            },
-            {
-              value: 'editNumber',
-              label: '数字输入框'
-            },
-            {
-              value: 'editDate',
-              label: '日期输入框'
-            },
-            {
-              value: 'editSelect',
-              label: '下拉框'
-            },
-            {
-              value: 'editAttachment',
-              label: '附件'
-            },
-            {
-              value: 'editSearch',
-              label: '搜索框'
-            },
-            {
-              value: 'editStatus',
-              label: '状态'
-            },
-            {
-              value: 'editDelete',
-              label: '删除按钮'
-            },
-            {
-              value: 'editButton',
-              label: '查看按钮'
-            },
-            {
-              value: 'aText',
-              label: '超链接文本'
-            },
-            {
-              value: 'aLink',
-              label: '超链接按钮'
-            },
-            {
-              value: 'button',
-              label: '按钮'
-            },
-            {
-              value: 'editTreeButtonGroup',
-              label: '编辑行按钮组'
-            }
-          ]
-        },
-        {
-          label: '树控件',
-          options: [
-            {
-              value: 'addSiblingEditRow',
-              label: '新增兄弟节点'
-            },
-            {
-              value: 'addChildTreeRow',
-              label: '新增子节点'
-            },
-            {
-              value: 'moveUpRow',
-              label: '上移'
-            },
-            {
-              value: 'moveDownRow',
-              label: '下移'
-            },
-            {
-              value: 'removeTreeRow',
-              label: '删除树节点'
-            }
-          ]
-        },
-        {
-          label: 'Date Format',
-          options: [
-            {
-              value: 'd1',
-              label: 'yyyy-MM-dd'
-            },
-            {
-              value: 'd2',
-              label: 'yyyy/MM/dd'
-            },
-            {
-              value: 'd3',
-              label: 'yyyy年MM月dd日'
-            },
-            {
-              value: 'd4',
-              label: 'yyyy-MM-dd HH:mm:ss'
-            },
-            {
-              value: 'd5',
-              label: 'yyyy-MM-dd hh:mm:ss'
-            }
-          ]
-        },
-        {
-          label: 'Number Format',
-          options: [
-            {
-              value: 'n1',
-              label: '###,###,###,##0.######'
-            },
-            {
-              value: 'n2',
-              label: '###,###,###,##0.00####'
-            },
-            {
-              value: 'n3',
-              label: '###,###,###,##0.000000'
-            },
-            {
-              value: 'n4',
-              label: '###,###,###,##0.000'
-            },
-            {
-              value: 'n5',
-              label: '###,###,###,##0.00'
-            },
-            {
-              value: 'n6',
-              label: '###,###,###,##0'
-            },
-            {
-              value: 'n7',
-              label: '###,##0.00##%'
-            }
-          ]
-        }
-      ],
-      editOp: [
-        {
-          value: 'editInput',
-          label: '文本输入框'
-        },
-        {
-          value: 'editNumber',
-          label: '数字输入框'
-        },
-        {
-          value: 'editDate',
-          label: '日期输入框'
-        },
-        {
-          value: 'editSelect',
-          label: '下拉框'
-        },
-        {
-          value: 'editAttachment',
-          label: '附件'
-        },
-        {
-          value: 'editSearch',
-          label: '搜索框'
-        }
-      ],
-      showRenderDialogFlag: !1,
-      renderJson: '',
-      currentTableColumn: null,
-
-      hideAfter: 1500,
-      openDelay: 500,
-      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'
-      },
-    }
-  },
-  beforeDestroy() {
-    if (this.dragSort) this.dragSort.destroy()
-  },
-  created() {
-
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      this.tableData = this.$baseLodash.cloneDeep(this.optionModel.tableColumns);
-      this.$nextTick(() => {
-        this.rowDrop();
-      });
-    },
-    colSubmit() {
-      this.dialogVisible = !1;
-      this.optionModel.tableColumns = this.tableData;
-      this.closeHandle();
-    },
-    showRenderDialog: function (e) {
-      (this.currentTableColumn = e), (this.renderJson = e.render || ''), (this.showRenderDialogFlag = !0);
-    },
-    saveColumnRender: function () {
-      this.$set(this.currentTableColumn, 'render', this.renderJson), (this.showRenderDialogFlag = !1);
-    },
-    closeHandle() {
-      this.$emit('update:visiable', false);
-      this.$emit('close');
-    },
-    // 添加同级节点
-    onAddSibling(row, index) {
-      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))
-      } else {
-        this.handleAddOneRow(row, index, 'SIBLING')
-      }
-    },
-    // 添加子节点  todo
-    onAddChild(row, index) {
-      this.handleAddOneRow(row, index, 'CHILD')
-    },
-    /**
-     * 处理添加一行数据
-     * @param {object} row 当前节点
-     * @param {number} index
-     * @param {string} type 操作类型 SIBLING 同级 / CHILD 子级
-     */
-    handleAddOneRow(row, index, type) {
-
-      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
-          }
-          if (item.children && item.children.length) {
-            findRow(item.children)
-          }
-        })
-      }
-
-      findRow(this.tableData)
-
-      const {columnId: generateParentId, children} = curRow
-
-      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)
-        } else {
-          children.push(newRow)
-        }
-      } else {
-        this.$set(curRow, 'children', [newRow])
-      }
-    },
-    getUuid() {
-      return new Date().getTime();
-    },
-    /**
-     * 生成一行数据
-     */
-    generateRow(parentId) {
-      let tmpId = 'column' + generateId();
-      let uuid = this.getUuid();
-      var row = {
-        columnId: uuid,
-        kid: uuid,
-        parentId: parentId || null,
-        required: false,
-        width: 150,
-        prop: tmpId,
-        label: tmpId,
-        align: 'left',
-        show: true,
-        sortable: true,
-
-        // treeNode: false,
-
-      };
-      return row;
-    },
-    // 添加根节点
-    onAddRoot() {
-      this.tableData.push(this.generateRow())
-    },
-    // 删除当前节点及对应子节点数据
-    onDelete(row) {
-      const {parentId, columnId} = row
-      // 根节点直接删除
-      if (!parentId) {
-        const delIndex = this.tableData.findIndex((item) => item.columnId === columnId)
-        this.tableData.splice(delIndex, 1)
-      } else {
-        // 找到父节点，通过父节点删除
-        let parentRow = {}
-        const findRow = (data) => {
-          data.forEach((item) => {
-            if (item.columnId === parentId) {
-              parentRow = {...item}
-            }
-            if (item.children && item.children.length) {
-              findRow(item.children)
-            }
-          })
-        }
-        findRow(this.tableData)
-
-        const {children} = parentRow
-
-        const delIndex = children.findIndex((item) => item.columnId === columnId)
-
-        children.splice(delIndex, 1)
-      }
-    },
-    // 数据准备 生成 id 和 parentId
-    handleTableDataFormat(data) {
-      const tableFormat = (tableData, parentId) => {
-        tableData.forEach((item) => {
-          // item.parentId = parentId || null
-          if (!item.kid) item.kid = item.columnId
-          if (item.children && item.children.length > 0) {
-            tableFormat(item.children, item.columnId)
-          }
-        })
-      }
-
-      tableFormat(data)
-      return data
-    },
-    //drag begin
-    //行拖拽
-    rowDrop() {
-      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];
-      const _this = this;
-      this.dragSort = Sortable.create(tbody, {
-        ghostClass: 'sortable-ghost',
-        setData: function (e) {
-          e.setData('Text', '');
-        },
-        onEnd({newIndex, oldIndex}) {
-          _this.rowDropEnd(newIndex, oldIndex)
-        },
-      });
-    },
-
-    //树转数组
-    toArray(data) {
-      const result = [];
-      data.forEach((item) => {
-        const loop = (data) => {
-          result.push({
-            ...data
-          });
-          let child = data.children;
-          if (child) {
-            for (let i = 0; i < child.length; i++) {
-              loop(child[i]);
-            }
-          }
-        };
-        loop(item);
-      });
-      return result;
-    },
-    //数组转树
-    arrToTree(arr, parentId) {
-      return arr
-        .filter((item) => (!parentId ? !item.parentId : item.parentId === parentId))
-        .map((item) => {
-          item.children = this.arrToTree(arr, item.columnId);
-          return item;
-        });
-    },
-    //查看树中v2 是否 为 v1的底级
-    isTreeBottom(tree, v1, v2) {
-      let result = false;
-
-      function recursion(tree, v1, v2, flag) {
-        for (let i = 0; i < tree.length; i++) {
-          const item = tree[i];
-          if (item.columnId === v2) {
-            result = flag;
-            return;
-          } else if (item.columnId === v1) {
-            item.children ? recursion(item.children, v1, v2, true) : "";
-          } else {
-            item.children ? recursion(item.children, v1, v2, flag) : "";
-          }
-        }
-      }
-
-      recursion(tree, v1, v2, false);
-      return result;
-    },
-    //行结束拖拽事件
-    rowDropEnd(newIndex, oldIndex) {
-      //判断是否没有更换位置,如果没更换,则不做任何操作
-      if (newIndex === oldIndex) return;
-      //树形结构转数组
-      this.tableDataArray = this.toArray(this.tableData);
-
-      let oldRow = this.tableDataArray[oldIndex];
-      let newRow = this.tableDataArray[newIndex];
-
-      //判断是否把该行 拖拽到 自己的底级中
-      if (
-        this.isTreeBottom(
-          this.tableData,
-          oldRow.columnId,
-          newRow.columnId
-        )
-      ) {
-        this.$message({
-          type: "error",
-          message: "不能放到子节点",
-        });
-        let tableData = this.tableData;
-        this.tableData = [];
-        this.$nextTick(() => {
-          this.tableData = tableData;
-        });
-        return;
-      }
-
-      if (oldRow.parentId != newRow.parentId) {
-        this.$message({
-          type: "error",
-          message: "不能放到父节点",
-        });
-        let tableData = this.tableData;
-        this.tableData = [];
-        this.$nextTick(() => {
-          this.tableData = tableData;
-        });
-        return;
-      }
-
-      let pid = this.tableDataArray[newIndex].parentId || null;
-      //拿到当前行数据,并从数组中删除该数据
-      const currRow = this.tableDataArray.splice(oldIndex, 1)[0];
-      //把当前行数据的 父id 给 赋值为结束位置的父id,因为当前行与结束行平级.父id相同.
-      currRow.parentId = pid;
-      //把更改了父id的当前行数据给插入到数组中
-      this.tableDataArray.splice(newIndex, 0, currRow);
-      //表格显示的数据清空
-      this.tableData = [];
-      this.$nextTick(() => {
-        //表格显示的数据  为 修改了位置的数组转换成的属性结构
-        this.tableData = this.arrToTree(this.tableDataArray);
-        //新的数组为 表格显示的数据转换
-        this.tableDataArray = this.toArray(this.tableData);
-      });
-    },
-    getIsButtontCell(formatS) {
-      let isButtontCell = false;
-      let widgetType = this.columnFormatMap[formatS];
-      if (widgetType) {
-        isButtontCell = widgetType === 'a-link' || widgetType === 'button';
-      }
-      return isButtontCell;
-    },
-    //drag end
-    changeFormatS(row) {
-      let isButtontCell = this.getIsButtontCell(row.formatS);
-      let columnWidgetConfig = this.getColumnWidgetConfig(row, true);
-      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
-      if (columnSelectedWidget) {
-        row.columnOption = columnSelectedWidget.options;
-      } else {
-        row.columnOption = {}
-      }
-
-      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.width || row.width == 47) row.width = 150;
-        } else {
-          row.width = 47;
-        }
-        row.prop = null;
-        row.label = null;
-        row.sortable = false;
-      } else {
-        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') {
-          row.prop = this.designer.createAttachmentKeyName();
-        } else {
-          let attachmentPrefix = this.designer.getAttachmentPrefix();
-          row.prop = row.prop.replaceAll(attachmentPrefix, "");
-        }
-      }
-    },
-    getColumnWidgetConfig(row, isChange, isEdit) {
-      let formatS = isEdit ? row.editFormatS : row.formatS
-      let columnSelectedWidget = null;
-      let columnEditFields = null;
-
-      let type = this.columnFormatMap[formatS];
-      /*if (type == 'date') {
-        columnEditFields = ['type', 'format', 'valueFormat']
-      } else if (type == 'select') {
-
-      }
-      if (type == 'vabsearch') {
-        columnEditFields = ['vabSearchField', 'formCode', 'formVersion', 'required', 'showFormField', 'onSearchConfirm', 'onSearchClear']
-      }*/
-
-      if (type) {
-        // columnSelectedWidget = this.$baseLodash.cloneDeep(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;*/
-        // columnSelectedWidget.options.name = idVal;
-        let columnOption;
-        if (!isEdit) {
-          columnOption = row.columnOption;
-        } else {
-          columnOption = row.editColumnOption;
-        }
-        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";
-          }
-        } else {
-          columnSelectedWidget.options.required = row.required || false;
-
-          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.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.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.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.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.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.prefixIcon = "el-icon-delete";
-            columnSelectedWidget.options.label = "删除";
-            columnSelectedWidget.options.labelHidden = true;
-            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')) {
-          columnSelectedWidget.options.keyName = row.prop;
-          columnSelectedWidget.options.keyNameEnabled = true;
-        } else {
-          columnSelectedWidget.options.name = row.prop;
-        }
-
-        if (type != "button" && type != "a-link") {
-          columnSelectedWidget.options.label = row.label;
-          columnSelectedWidget.options.labelHidden = true;
-        }
-      }
-      return {columnSelectedWidget, columnEditFields};
-    },
-    openFormatConfigDialog(row, index) {
-      let option = row.columnOption;
-      let selectedWidget;
-      let columnWidgetConfig = this.getColumnWidgetConfig(row);
-      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
-      if (columnSelectedWidget) {
-        option = columnSelectedWidget.options;
-        selectedWidget = columnSelectedWidget;
-      } else {
-        option = {}
-        selectedWidget = {};
-      }
-
-      let columnOption = this.$baseLodash.cloneDeep(option);
-      row.columnOption = columnOption;
-      this.operateIndex = index;
-
-      this.openWidgetPropertyDialog({
-        row: row,
-        columnSelectedWidget: selectedWidget,
-        index: index,
-        columnEditFields: columnEditFields,
-        callback: (columnOption) => {
-          this.confirmFormatConfigDialog(columnOption);
-        }
-      })
-    },
-    getFieldKeyNameByOptions(options) {
-      let o = options.name;
-      return (
-        (options.keyNameEnabled
-          && options.keyName)
-        || o
-      );
-    },
-    confirmFormatConfigDialog(columnOption) {
-      let row = this.tableData[this.operateIndex];
-      row.columnOption = columnOption;
-      let isButtontCell = this.getIsButtontCell(row.formatS);
-      if (!isButtontCell) {
-        row.prop = this.getFieldKeyNameByOptions(columnOption);
-        row.label = columnOption.label;
-        row.required = columnOption.required;
-      }
-    },
-    openEditFormatConfigDialog(row, index) {
-      let option = row.columnOption;
-      let selectedWidget;
-      let columnWidgetConfig = this.getColumnWidgetConfig(row, null, true);
-      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
-      if (columnSelectedWidget) {
-        option = columnSelectedWidget.options;
-        selectedWidget = columnSelectedWidget;
-      } else {
-        option = {}
-        selectedWidget = {};
-      }
-
-      let columnOption = this.$baseLodash.cloneDeep(option);
-      row.editColumnOption = columnOption;
-      this.operateIndex = index;
-
-      this.openWidgetPropertyDialog({
-        row: row,
-        columnSelectedWidget: selectedWidget,
-        index: index,
-        columnEditFields: columnEditFields,
-        callback: (columnOption) => {
-          this.confirmEditFormatConfigDialog(columnOption);
-        }
-      })
-    },
-    confirmEditFormatConfigDialog(columnOption) {
-      let row = this.tableData[this.operateIndex];
-      row.editColumnOption = columnOption;
-      /*row.prop = columnOption.name;
-      row.label = columnOption.label;
-      row.required = columnOption.required;*/
-    },
-    openTableColumnConfigDialog(row, index) {
-      this.operateIndex = index;
-      let eventName = "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];
-      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.$set(row, 'tableColumnConfig', this.$baseLodash.cloneDeep(this.tableColumnConfigCode))
-      this.showTableColumnConfigDialog = false;
-
-    },
-  }
-}
-</script>
-<style scoped lang="scss">
-.icon-drag:before {
-  content: '\e61d';
-}
-</style>
+<template>
+  <el-dialog
+    custom-class="dialog-style list-dialog table-column-config-dialog"
+    :title="i18nt('designer.setting.tableColEdit')"
+    :visible.sync="showDialog"
+    :modal="false"
+    :show-close="!0"
+    :close-on-click-modal="!1"
+    :close-on-press-escape="!1"
+    :destroy-on-close="false"
+    top="5vh"
+    width="1220px"
+    v-dialog-drag
+    :before-close="closeHandle"
+  >
+    <div
+      class="cont table-column-dialog-cont"
+      v-loading="!tableReady"
+      element-loading-background="rgba(0, 0, 0, 0)"
+      element-loading-text="数据正在加载中"
+      element-loading-spinner="el-icon-loading"
+    >
+      <el-table
+        v-if="tableReady"
+        ref="singleTable"
+        width="100%"
+        :data="tableData"
+        height="500"
+        border=""
+        row-key="columnId"
+        stripe=""
+        :tree-props="{ children: 'children' }"
+        :default-expand-all="shouldExpandAllTable"
+      >
+        <el-table-column label="" width="80" fixed="left">
+          <template #default="scope">
+            <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>
+        <el-table-column
+          :label="i18nt('designer.setting.columnLabel')"
+          width="150"
+          prop="label"
+          fixed="left"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.label"
+              @change="changeRowLabel(scope.row)"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.columnName')"
+          width="150"
+          prop="prop"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.prop"
+              @change="changeRowProp(scope.row)"
+              :disabled="'editAttachment' == scope.row.formatS"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.columnWidth')"
+          width="100"
+          prop="width"
+        >
+          <template #default="scope">
+            <el-input v-model="scope.row.width"></el-input>
+          </template>
+        </el-table-column>
+
+        <el-table-column :label="i18nt('必填')" width="70" prop="required">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.required"
+              @change="changeRowRequired(scope.row)"
+            ></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.fixedColumn')"
+          width="100"
+          prop="fixed"
+        >
+          <template #default="scope">
+            <el-select v-model="scope.row.fixed" clearable>
+              <el-option value="left">left</el-option>
+              <el-option value="right">right</el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.formatOfColumn')"
+          width="200"
+          prop="formatS"
+        >
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.formatS"
+              @change="changeFormatS(scope.row, false)"
+              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>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="格式化配置" width="90" align="center">
+          <template #default="scope">
+            <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 &&
+                'editTreeButtonGroup' !== scope.row.formatS
+              "
+            ></el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.renderFunction')"
+          width="70"
+          align="center"
+        >
+          <template #default="scope">
+            <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="i18nt('designer.setting.visibleColumn')"
+          width="70"
+          prop="show"
+        >
+          <template #default="scope">
+            <el-switch v-model="scope.row.show"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.sortableColumn')"
+          width="70"
+          prop="sortable"
+        >
+          <template #default="scope">
+            <el-switch v-model="scope.row.sortable"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="显示筛选" width="70" prop="filterable">
+          <template #default="scope">
+            <el-switch v-model="scope.row.filterable"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="UTC时差转换" width="90" align="center">
+          <template #default="scope">
+            <el-switch
+              v-if="isUtcTransformColumn(scope.row)"
+              v-model="scope.row.utcTransformEnabled"
+            ></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="编辑更多属性"
+          width="100"
+          align="center"
+          fixed="right"
+        >
+          <template #default="scope">
+            <el-button
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="openRowEditDialog(scope.row, scope.$index)"
+            ></el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" fixed="right">
+          <template slot="header">
+            <el-tooltip
+              :hide-after="500"
+              class="item"
+              effect="dark"
+              content="添加根节点"
+              placement="top"
+            >
+              <el-button
+                size="mini"
+                type=""
+                circle=""
+                icon="el-icon-plus"
+                @click="onAddRoot"
+              />
+            </el-tooltip>
+          </template>
+          <template #default="{ row, $index }">
+            <el-tooltip
+              :hide-after="hideAfter"
+              :open-delay="openDelay"
+              effect="dark"
+              content="添加兄弟节点"
+              placement="top"
+            >
+              <el-button
+                size="mini"
+                type=""
+                circle=""
+                icon="el-icon-plus"
+                @click="onAddSibling(row, $index)"
+              />
+            </el-tooltip>
+
+            <el-tooltip
+              :hide-after="hideAfter"
+              :open-delay="openDelay"
+              effect="dark"
+              content="添加子节点"
+              placement="top"
+            >
+              <el-button
+                size="mini"
+                type=""
+                circle=""
+                icon="el-icon-circle-plus-outline"
+                @click="onAddChild(row, $index)"
+              />
+            </el-tooltip>
+            <el-tooltip
+              :hide-after="hideAfter"
+              :open-delay="openDelay"
+              effect="dark"
+              content="删除"
+              placement="top"
+            >
+              <el-button
+                size="mini"
+                type=""
+                circle=""
+                icon="el-icon-delete"
+                @click="onDelete(row, $index)"
+              />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <columnRenderDialog
+        :column="currentTableColumn"
+        :sourceData="sourceData"
+        v-if="showColumnRenderDialog"
+        :visiable.sync="showColumnRenderDialog"
+        @confirm="confirmWidgetRenderDialog"
+      ></columnRenderDialog>
+      <editTreeButtonGroupConfigDialog
+        v-if="showEditTreeButtonGroupConfigDialog && editTreeButtonGroupRowData"
+        :visible.sync="showEditTreeButtonGroupConfigDialog"
+        :row="editTreeButtonGroupRowData"
+        @confirm="confirmEditTreeButtonGroupConfig"
+      />
+    </div>
+    <div class="dialog-footer" slot="footer">
+      <el-button @click="closeHandle" class="button-sty" icon="el-icon-close">
+        {{ 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>
+    </div>
+    <el-dialog
+      v-if="showRenderDialogFlag"
+      :title="i18nt('designer.setting.renderFunction')"
+      :visible.sync="showRenderDialogFlag"
+      :modal="false"
+      :show-close="!0"
+      custom-class="dialog-style list-dialog"
+      :close-on-click-modal="!1"
+      :close-on-press-escape="!1"
+      :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="}" />
+      <div class="dialog-footer" slot="footer">
+        <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>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :title="tableColumnConfigTitle"
+      :visible.sync="showTableColumnConfigDialog"
+      v-if="showTableColumnConfigDialog"
+      :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="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>
+        <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>
+
+    <el-dialog
+      custom-class="dialog-style list-dialog table-column-row-edit-dialog"
+      :title="i18nt('designer.setting.tableColEdit')"
+      :visible.sync="showRowEditDialog"
+      v-if="showRowEditDialog"
+      :modal="false"
+      :show-close="!0"
+      :close-on-click-modal="!1"
+      :close-on-press-escape="!1"
+      :destroy-on-close="!0"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      top="5vh"
+      width="480px"
+      v-dialog-drag
+    >
+      <div class="cont table-column-row-edit-cont">
+        <el-form :model="rowData" class="form-m2" label-position="top">
+          <el-form-item :label="i18nt('designer.setting.columnLabel')">
+            <el-input
+              v-model="rowData.label"
+              @change="changeRowLabel(rowData)"
+            ></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.columnName')">
+            <el-input
+              v-model="rowData.prop"
+              @change="changeRowProp(rowData)"
+              :disabled="'editAttachment' == rowData.formatS"
+            ></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.columnWidth')">
+            <el-input v-model="rowData.width"></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('必填')">
+            <el-switch
+              v-model="rowData.required"
+              @change="changeRowRequired(rowData)"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.fixedColumn')">
+            <el-select v-model="rowData.fixed" clearable>
+              <el-option value="left">left</el-option>
+              <el-option value="right">right</el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.formatOfColumn')">
+            <el-select
+              v-model="rowData.formatS"
+              @change="changeFormatS(rowData, false)"
+              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>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="格式化配置">
+            <el-button
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="openFormatConfigDialog(rowData, rowDataIndex)"
+              :disabled="
+                !columnFormatMap[rowData.formatS] &&
+                'widgetRender' !== rowData.formatS &&
+                'editTreeButtonGroup' !== rowData.formatS
+              "
+            ></el-button>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.renderFunction')">
+            <el-button
+              :disabled="'render' !== rowData.formatS"
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="showRenderDialog(rowData)"
+            ></el-button>
+          </el-form-item>
+          <el-form-item
+            v-if="isUtcTransformColumn(rowData)"
+            label="UTC时差转换"
+          >
+            <el-switch v-model="rowData.utcTransformEnabled"></el-switch>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.visibleColumn')">
+            <el-switch v-model="rowData.show"></el-switch>
+          </el-form-item>
+          <el-form-item label="动态显示脚本">
+            <a
+              href="javascript:void(0);"
+              class="a-link link-oneLind"
+              @click="openColumnShowDialog(rowData)"
+            >
+              <span>{{ rowData.columnShow }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.sortableColumn')">
+            <el-switch v-model="rowData.sortable"></el-switch>
+          </el-form-item>
+          <el-form-item label="显示筛选">
+            <el-switch v-model="rowData.filterable"></el-switch>
+          </el-form-item>
+          <el-form-item :label="i18nt('明细行')">
+            <el-switch v-model="rowData.isItemLine"></el-switch>
+          </el-form-item>
+
+          <el-form-item :label="i18nt('下拉列')">
+            <el-switch v-model="rowData.treeNode"></el-switch>
+          </el-form-item>
+          <el-form-item :label="i18nt('自定义表格列配置')">
+            <a
+              href="javascript:void(0);"
+              class="a-link link-oneLind"
+              @click="openTableColumnConfigDialog(rowData, rowDataIndex)"
+            >
+              <span>{{ rowData.tableColumnConfig }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
+          <el-form-item :label="i18nt('编辑插槽类型')">
+            <el-select
+              v-model="rowData.editFormatS"
+              @change="changeFormatS(rowData, true)"
+              clearable
+            >
+              <el-option
+                v-for="e in editOp"
+                :key="e.value"
+                :value="e.value"
+                :label="e.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="编辑插槽配置">
+            <el-button
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="openEditFormatConfigDialog(rowData, rowDataIndex)"
+              :disabled="!rowData.editFormatS"
+            ></el-button>
+          </el-form-item>
+          <el-form-item :label="i18nt('导出类型')">
+            <el-select v-model="rowData.exportType" clearable>
+              <el-option value="Image2" label="图片"></el-option>
+              <el-option value="Number" label="数值"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="i18nt('表尾统计行类型')">
+            <el-select v-model="rowData.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>
+          </el-form-item>
+          <el-form-item label="表尾统计行配置">
+            <el-button
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="
+                editFormEventHandler(rowData, rowDataIndex, 'footerMethodConfg')
+              "
+              :disabled="rowData.footerDataType !== '3'"
+            ></el-button>
+          </el-form-item>
+          <el-form-item :label="i18nt('显示名称颜色')">
+            <el-select v-model="rowData.labelColor" clearable>
+              <el-option value="#e6a23c" label="橙"></el-option>
+              <el-option value="#2a6494" label="蓝"></el-option>
+              <el-option value="#30b08f" label="绿"></el-option>
+              <el-option value="#909399" label="灰"></el-option>
+              <el-option value="#ea5353" label="红"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label-width="0" class="form-item-full">
+            <el-divider class="custom-divider">{{
+              i18nt("designer.setting.customLabelIcon")
+            }}</el-divider>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelIconClass')">
+            <icon-picker v-model="rowData.labelIconClass"></icon-picker>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelIconPosition')">
+            <el-select
+              v-model="rowData.labelIconPosition"
+              clearable
+              placeholder="默认后面"
+            >
+              <el-option label="前面" value="front"></el-option>
+              <el-option label="后面" value="rear"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            :label="i18nt('designer.setting.labelTooltip')"
+            class="form-item-full"
+          >
+            <a
+              href="javascript:void(0);"
+              class="a-link link-oneLind"
+              @click="openLabelTooltipDialog"
+            >
+              <span>{{ rowData.labelTooltip }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-dialog
+        v-if="labelTooltipDialogVisible"
+        custom-class="dialog-style"
+        :title="i18nt('designer.setting.labelTooltip')"
+        :visible.sync="labelTooltipDialogVisible"
+        :show-close="true"
+        :append-to-body="true"
+        :modal="false"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :destroy-on-close="true"
+        width="520px"
+        v-dialog-drag
+      >
+        <el-input
+          type="textarea"
+          :rows="14"
+          class="label-tooltip-textarea"
+          v-model="labelTooltipValue"
+          clearable
+        ></el-input>
+        <div class="dialog-footer" slot="footer">
+          <el-button
+            @click="labelTooltipDialogVisible = false"
+            class="button-sty"
+            icon="el-icon-close"
+          >
+            {{ i18nt("designer.hint.cancel") }}
+          </el-button>
+          <el-button
+            type="primary"
+            @click="submitLabelTooltipDialog"
+            class="button-sty"
+            icon="el-icon-check"
+          >
+            {{ i18nt("designer.hint.confirm") }}
+          </el-button>
+        </div>
+      </el-dialog>
+      <div class="dialog-footer" slot="footer">
+        <el-button
+          @click="closeRowEditDialog"
+          class="button-sty"
+          icon="el-icon-close"
+        >
+          {{ i18nt("designer.hint.cancel") }}
+        </el-button>
+        <el-button
+          type="primary"
+          @click="submitRowEditDialog"
+          class="button-sty"
+          icon="el-icon-check"
+        >
+          {{ i18nt("designer.hint.confirm") }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </el-dialog>
+</template>
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n";
+import Sortable from "sortablejs";
+import {
+  generateId,
+  loopHandleWidget,
+  deepClone,
+  columnFormatMap,
+} from "../../../../../../components/xform/utils/util";
+import columnRenderDialog from "./columnRenderDialog.vue";
+import editTreeButtonGroupConfigDialog from "./edit-tree-button-group-config-dialog.vue";
+import IconPicker from "@base/components/xform/icon-picker/index.vue";
+
+let businessOptions = [
+  {
+    value: "_createBy",
+    label: "创建人",
+  },
+  {
+    value: "_modifyBy",
+    label: "更新人",
+  },
+  {
+    value: "create_date",
+    label: "创建时间",
+  },
+  {
+    value: "modify_date",
+    label: "更新时间",
+  },
+];
+let userFields = ["_createBy", "_modifyBy", "create_date", "modify_date"];
+
+export default {
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+    visiable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    columnRenderDialog,
+    editTreeButtonGroupConfigDialog,
+    IconPicker,
+  },
+  inject: ["openWidgetPropertyDialog"],
+  data() {
+    return {
+      tableReady: false,
+      tableColumnConfigTitle: null,
+      showTableColumnConfigDialog: false,
+      tableColumnConfigHeader: null,
+      tableColumnConfigCode: null,
+      showEditTreeButtonGroupConfigDialog: false,
+      currentEditTreeButtonGroupRow: null,
+      editTreeButtonGroupRowData: null,
+      alignOptions: [
+        {
+          value: "left",
+          label: "left",
+        },
+        {
+          value: "center",
+          label: "center",
+        },
+        {
+          value: "right",
+          label: "right",
+        },
+      ],
+      businessOptions,
+      userFields,
+      op: [
+        {
+          label: "edit Format",
+          options: [
+            {
+              value: "editInput",
+              label: "文本输入框",
+            },
+            {
+              value: "editNumber",
+              label: "数字输入框",
+            },
+            {
+              value: "editDate",
+              label: "日期输入框",
+            },
+            {
+              value: "textarea",
+              label: "多行文本输入框",
+            },
+            {
+              value: "editScriptInput",
+              label: "脚本输入框",
+            },
+            {
+              value: "editSelect",
+              label: "下拉框",
+            },
+            {
+              value: "checkbox",
+              label: "复选框",
+            },
+            {
+              value: "radio",
+              label: "单选框",
+            },
+            {
+              value: "editAttachment",
+              label: "附件",
+            },
+            {
+              value: "editSearch",
+              label: "搜索框",
+            },
+            {
+              value: "editStatus",
+              label: "状态",
+            },
+            {
+              value: "text",
+              label: "文本",
+            },
+            {
+              value: "aText",
+              label: "超链接文本",
+            },
+            {
+              value: "widgetRender",
+              label: "自定义组件",
+            },
+          ],
+        },
+        {
+          label: "按钮控件",
+          options: [
+            {
+              value: "dropdown",
+              label: "下拉按钮",
+            },
+            {
+              value: "editDelete",
+              label: "删除按钮",
+            },
+            {
+              value: "editButton",
+              label: "查看按钮",
+            },
+            {
+              value: "aLink",
+              label: "超链接按钮",
+            },
+            {
+              value: "button",
+              label: "按钮",
+            },
+            {
+              value: "editTreeButtonGroup",
+              label: "编辑行按钮组",
+            },
+          ],
+        },
+        {
+          label: "树控件",
+          options: [
+            {
+              value: "addSiblingEditRow",
+              label: "新增兄弟节点",
+            },
+            {
+              value: "addChildTreeRow",
+              label: "新增子节点",
+            },
+            {
+              value: "moveUpRow",
+              label: "上移",
+            },
+            {
+              value: "moveDownRow",
+              label: "下移",
+            },
+            {
+              value: "removeTreeRow",
+              label: "删除树节点",
+            },
+          ],
+        },
+
+        {
+          label: "业务模块",
+          options: businessOptions,
+        },
+        {
+          label: "日期格式化",
+          options: [
+            {
+              value: "d1",
+              label: "yyyy-MM-dd",
+            },
+            {
+              value: "d2",
+              label: "yyyy/MM/dd",
+            },
+            {
+              value: "d3",
+              label: "yyyy年MM月dd日",
+            },
+            {
+              value: "d4",
+              label: "yyyy-MM-dd HH:mm:ss",
+            },
+            {
+              value: "d5",
+              label: "yyyy-MM-dd hh:mm:ss",
+            },
+          ],
+        },
+        {
+          label: "数字格式化",
+          options: [
+            {
+              value: "n1",
+              label: "###,###,###,##0.######",
+            },
+            {
+              value: "n2",
+              label: "###,###,###,##0.00####",
+            },
+            {
+              value: "n3",
+              label: "###,###,###,##0.000000",
+            },
+            {
+              value: "n4",
+              label: "###,###,###,##0.000",
+            },
+            {
+              value: "n5",
+              label: "###,###,###,##0.00",
+            },
+            {
+              value: "n6",
+              label: "###,###,###,##0",
+            },
+            {
+              value: "n7",
+              label: "###,##0.00##%",
+            },
+          ],
+        },
+      ],
+      editOp: [
+        {
+          value: "editInput",
+          label: "文本输入框",
+        },
+        {
+          value: "textarea",
+          label: "多行文本输入框",
+        },
+        {
+          value: "editNumber",
+          label: "数字输入框",
+        },
+        {
+          value: "editDate",
+          label: "日期输入框",
+        },
+        {
+          value: "editSelect",
+          label: "下拉框",
+        },
+        {
+          value: "editAttachment",
+          label: "附件",
+        },
+        {
+          value: "editSearch",
+          label: "搜索框",
+        },
+      ],
+      showRenderDialogFlag: !1,
+      renderJson: "",
+      currentTableColumn: null,
+      sourceData: null,
+
+      hideAfter: 1500,
+      openDelay: 500,
+      tableData: [], //树形结构数据转的数组
+      tableDataArray: [],
+      dragSort: null,
+      columnFormatMap,
+
+      showFormEventDialogFlag: false,
+      formEventHandlerCode: "",
+      curEventName: "",
+      curEventRow: null,
+
+      eventParamsMap: {
+        footerMethodConfg: "footerMethodConfg(dataId,formCode,param) {",
+        columnShow: "columnShow(dataId,formCode,columnConfig) {",
+      },
+
+      showColumnRenderDialog: false,
+
+      editRowData: null,
+      rowData: null,
+      rowDataIndex: 0,
+      showRowEditDialog: false,
+      labelTooltipDialogVisible: false,
+      labelTooltipValue: "",
+      sourceTableColumnsSnapshot: null,
+    };
+  },
+  beforeDestroy() {
+    if (this.dragSort) this.dragSort.destroy();
+  },
+  computed: {
+    showDialog: {
+      get() {
+        return this.visiable;
+      },
+      set(val) {
+        this.$emit("update:visiable", val);
+      },
+    },
+    shouldExpandAllTable() {
+      return this.countTreeRows(this.tableData) <= 30;
+    },
+  },
+  watch: {
+    visiable(val) {
+      if (val) {
+        this.onDialogOpen();
+      } else {
+        this.onDialogClose();
+      }
+    },
+  },
+  created() {},
+  mounted() {
+    if (this.visiable) {
+      this.onDialogOpen();
+    }
+  },
+  methods: {
+    countTreeRows(rows) {
+      if (!Array.isArray(rows) || !rows.length) {
+        return 0;
+      }
+      let count = 0;
+      const walk = (list) => {
+        list.forEach((item) => {
+          count += 1;
+          if (item.children && item.children.length) {
+            walk(item.children);
+          }
+        });
+      };
+      walk(rows);
+      return count;
+    },
+    cloneTableColumnsForEdit(columns) {
+      if (!Array.isArray(columns)) {
+        return [];
+      }
+      const refKeys = ["widget", "editWidget", "widgetList"];
+      const cloneRow = (row) => {
+        if (!row || typeof row !== "object") {
+          return row;
+        }
+        const cloned = {};
+        Object.keys(row).forEach((key) => {
+          const val = row[key];
+          if (key === "children" && Array.isArray(val) && val.length) {
+            cloned.children = val.map(cloneRow);
+            return;
+          }
+          if (refKeys.includes(key)) {
+            cloned[key] = val;
+            return;
+          }
+          if (key === "columnOption") {
+            if (!row.widget) {
+              cloned.columnOption =
+                val !== null && typeof val === "object" ? deepClone(val) : val;
+            }
+            return;
+          }
+          if (key === "editColumnOption") {
+            if (!row.editWidget) {
+              cloned.editColumnOption =
+                val !== null && typeof val === "object" ? deepClone(val) : val;
+            }
+            return;
+          }
+          if (val !== null && typeof val === "object") {
+            try {
+              cloned[key] = deepClone(val);
+            } catch (e) {
+              cloned[key] = val;
+            }
+            return;
+          }
+          cloned[key] = val;
+        });
+        if (row.widget && !cloned.widget) {
+          cloned.widget = row.widget;
+        }
+        if (row.editWidget && !cloned.editWidget) {
+          cloned.editWidget = row.editWidget;
+        }
+        return cloned;
+      };
+      return columns.map(cloneRow);
+    },
+    buildColumnWidgetMap(columns, map = {}) {
+      if (!Array.isArray(columns)) {
+        return map;
+      }
+      columns.forEach((col) => {
+        if (col && col.columnId) {
+          map[col.columnId] = col;
+        }
+        if (col.children && col.children.length) {
+          this.buildColumnWidgetMap(col.children, map);
+        }
+      });
+      return map;
+    },
+    restoreColumnWidgetRefs(columns, widgetMap) {
+      if (!Array.isArray(columns)) {
+        return [];
+      }
+      return columns.map((row) => {
+        const next = Object.assign({}, row);
+        const orig = widgetMap[next.columnId];
+        if (orig) {
+          // 仅 formatS 未变更时补回 widget，避免清空 formatS 后又被快照还原
+          const formatUnchanged = next.formatS === orig.formatS;
+          const editFormatUnchanged = next.editFormatS === orig.editFormatS;
+          if (formatUnchanged && !next.widget && orig.widget) {
+            next.widget = orig.widget;
+          }
+          if (editFormatUnchanged && !next.editWidget && orig.editWidget) {
+            next.editWidget = orig.editWidget;
+          }
+          if (
+            formatUnchanged &&
+            next.formatS === "widgetRender" &&
+            (!next.widgetList || !next.widgetList.length) &&
+            orig.widgetList &&
+            orig.widgetList.length
+          ) {
+            next.widgetList = orig.widgetList;
+          }
+        }
+        if (next.children && next.children.length) {
+          next.children = this.restoreColumnWidgetRefs(
+            next.children,
+            widgetMap
+          );
+        }
+        return next;
+      });
+    },
+    editFormEventHandler(row, index, eventName) {
+      this.curEventRow = row;
+      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.curEventRow[this.curEventName] = this.formEventHandlerCode;
+      this.showFormEventDialogFlag = false;
+    },
+    onDialogClose() {
+      this.tableReady = false;
+      this.sourceTableColumnsSnapshot = null;
+      if (this.dragSort) {
+        this.dragSort.destroy();
+        this.dragSort = null;
+      }
+    },
+    onDialogOpen() {
+      this.tableReady = false;
+      if (this.dragSort) {
+        this.dragSort.destroy();
+        this.dragSort = null;
+      }
+      this.$nextTick(() => {
+        const load = () => {
+          this.loadTableData();
+          this.tableReady = true;
+          this.$nextTick(() => {
+            requestAnimationFrame(() => {
+              this.rowDrop();
+            });
+          });
+        };
+        if (typeof requestIdleCallback === "function") {
+          requestIdleCallback(load, { timeout: 80 });
+        } else {
+          setTimeout(load, 0);
+        }
+      });
+    },
+    loadTableData() {
+      const source = this.optionModel.tableColumns || [];
+      this.sourceTableColumnsSnapshot = source;
+      this.tableData = this.cloneTableColumnsForEdit(source);
+    },
+    colSubmit() {
+      this.dialogVisible = !1;
+      const widgetMap = this.buildColumnWidgetMap(
+        this.sourceTableColumnsSnapshot || []
+      );
+      this.optionModel.tableColumns = this.restoreColumnWidgetRefs(
+        this.tableData,
+        widgetMap
+      );
+      this.sourceTableColumnsSnapshot = null;
+      this.closeHandle();
+    },
+    openWidgetRenderDialog(row, sourceData) {
+      this.currentTableColumn = row;
+      this.sourceData = sourceData;
+
+      // this.widgetList =
+
+      // this.designer.widgetList
+
+      this.showColumnRenderDialog = true;
+    },
+    confirmWidgetRenderDialog(widgetList) {
+      this.currentTableColumn.widgetList = widgetList;
+      this.showColumnRenderDialog = false;
+    },
+    showRenderDialog: function (e) {
+      /*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);
+    },
+    closeHandle() {
+      this.$emit("update:visiable", false);
+      this.$emit("close");
+    },
+    // 添加同级节点
+    onAddSibling(row, index) {
+      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));
+      } else {
+        this.handleAddOneRow(row, index, "SIBLING");
+      }
+    },
+    // 添加子节点  todo
+    onAddChild(row, index) {
+      this.handleAddOneRow(row, index, "CHILD");
+    },
+    /**
+     * 处理添加一行数据
+     * @param {object} row 当前节点
+     * @param {number} index
+     * @param {string} type 操作类型 SIBLING 同级 / CHILD 子级
+     */
+    handleAddOneRow(row, index, type) {
+      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;
+          }
+          if (item.children && item.children.length) {
+            findRow(item.children);
+          }
+        });
+      };
+
+      findRow(this.tableData);
+
+      const { columnId: generateParentId, children } = curRow;
+
+      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);
+        } else {
+          children.push(newRow);
+        }
+      } else {
+        this.$set(curRow, "children", [newRow]);
+      }
+    },
+    getUuid() {
+      return new Date().getTime();
+    },
+    createRowAuthName(type) {
+      return `row${type}` + generateId();
+    },
+    /**
+     * 生成一行数据
+     */
+    generateRow(parentId) {
+      let tmpId = "column" + generateId();
+      let uuid = this.getUuid();
+      var row = {
+        columnId: uuid,
+        kid: uuid,
+        parentId: parentId || null,
+        required: false,
+        width: 150,
+        prop: tmpId,
+        label: tmpId,
+        align: "left",
+        show: true,
+        sortable: true,
+        filterable: true,
+        exportType: null,
+        footerDataType: null,
+        footerMethodConfg: null,
+        widgetList: [],
+        labelColor: null,
+        rowAddAuthName: this.createRowAuthName("Add"),
+        rowEditAuthName: this.createRowAuthName("Edit"),
+        rowAddShow: null,
+        rowEditShow: null,
+        columnShow: null,
+        utcTransformEnabled: false,
+        labelIconClass: null,
+        labelIconPosition: "rear",
+        labelTooltip: null,
+        // treeNode: false,
+      };
+      return row;
+    },
+    isUtcTransformColumn(row) {
+      const formatS = row.formatS;
+      if (!formatS) {
+        return true;
+      }
+      return [
+        "d1",
+        "d2",
+        "d3",
+        "d4",
+        "d5",
+        "render",
+        "create_date",
+        "modify_date",
+      ].includes(formatS);
+    },
+    // 添加根节点
+    onAddRoot() {
+      this.tableData.push(this.generateRow());
+    },
+    // 删除当前节点及对应子节点数据
+    onDelete(row) {
+      const { parentId, columnId } = row;
+      // 根节点直接删除
+      if (!parentId) {
+        const delIndex = this.tableData.findIndex(
+          (item) => item.columnId === columnId
+        );
+        this.tableData.splice(delIndex, 1);
+      } else {
+        // 找到父节点，通过父节点删除
+        let parentRow = {};
+        const findRow = (data) => {
+          data.forEach((item) => {
+            if (item.columnId === parentId) {
+              parentRow = { ...item };
+            }
+            if (item.children && item.children.length) {
+              findRow(item.children);
+            }
+          });
+        };
+        findRow(this.tableData);
+
+        const { children } = parentRow;
+
+        const delIndex = children.findIndex(
+          (item) => item.columnId === columnId
+        );
+
+        children.splice(delIndex, 1);
+      }
+    },
+    // 数据准备 生成 id 和 parentId
+    handleTableDataFormat(data) {
+      const tableFormat = (tableData, parentId) => {
+        tableData.forEach((item) => {
+          // item.parentId = parentId || null
+          if (!item.kid) item.kid = item.columnId;
+          if (item.children && item.children.length > 0) {
+            tableFormat(item.children, item.columnId);
+          }
+        });
+      };
+
+      tableFormat(data);
+      return data;
+    },
+    //drag begin
+    //行拖拽
+    rowDrop() {
+      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];
+      const _this = this;
+      this.dragSort = Sortable.create(tbody, {
+        ghostClass: "sortable-ghost",
+        // draggable: ".drag-option",    // 修改可拖拽元素
+        handle: ".drag-option", // 指定拖动按钮
+        setData: function (e) {
+          e.setData("Text", "");
+        },
+        onEnd({ newIndex, oldIndex }) {
+          _this.rowDropEnd(newIndex, oldIndex);
+        },
+      });
+    },
+
+    //树转数组
+    toArray(data) {
+      const result = [];
+      data.forEach((item) => {
+        const loop = (data) => {
+          result.push({
+            ...data,
+          });
+          let child = data.children;
+          if (child) {
+            for (let i = 0; i < child.length; i++) {
+              loop(child[i]);
+            }
+          }
+        };
+        loop(item);
+      });
+      return result;
+    },
+    //数组转树
+    arrToTree(arr, parentId) {
+      return arr
+        .filter((item) =>
+          !parentId ? !item.parentId : item.parentId === parentId
+        )
+        .map((item) => {
+          item.children = this.arrToTree(arr, item.columnId);
+          return item;
+        });
+    },
+    //查看树中v2 是否 为 v1的底级
+    isTreeBottom(tree, v1, v2) {
+      let result = false;
+
+      function recursion(tree, v1, v2, flag) {
+        for (let i = 0; i < tree.length; i++) {
+          const item = tree[i];
+          if (item.columnId === v2) {
+            result = flag;
+            return;
+          } else if (item.columnId === v1) {
+            item.children ? recursion(item.children, v1, v2, true) : "";
+          } else {
+            item.children ? recursion(item.children, v1, v2, flag) : "";
+          }
+        }
+      }
+
+      recursion(tree, v1, v2, false);
+      return result;
+    },
+    //行结束拖拽事件
+    rowDropEnd(newIndex, oldIndex) {
+      //判断是否没有更换位置,如果没更换,则不做任何操作
+      if (newIndex === oldIndex) return;
+      //树形结构转数组
+      this.tableDataArray = this.toArray(this.tableData);
+
+      let oldRow = this.tableDataArray[oldIndex];
+      let newRow = this.tableDataArray[newIndex];
+
+      //判断是否把该行 拖拽到 自己的底级中
+      if (this.isTreeBottom(this.tableData, oldRow.columnId, newRow.columnId)) {
+        this.$message({
+          type: "error",
+          message: "不能放到子节点",
+        });
+        let tableData = this.tableData;
+        this.tableData = [];
+        this.$nextTick(() => {
+          this.tableData = tableData;
+        });
+        return;
+      }
+
+      if (oldRow.parentId != newRow.parentId) {
+        this.$message({
+          type: "error",
+          message: "不能放到父节点",
+        });
+        let tableData = this.tableData;
+        this.tableData = [];
+        this.$nextTick(() => {
+          this.tableData = tableData;
+        });
+        return;
+      }
+
+      let pid = this.tableDataArray[newIndex].parentId || null;
+      //拿到当前行数据,并从数组中删除该数据
+      const currRow = this.tableDataArray.splice(oldIndex, 1)[0];
+      //把当前行数据的 父id 给 赋值为结束位置的父id,因为当前行与结束行平级.父id相同.
+      currRow.parentId = pid;
+      //把更改了父id的当前行数据给插入到数组中
+      this.tableDataArray.splice(newIndex, 0, currRow);
+      //表格显示的数据清空
+      this.tableData = [];
+      this.$nextTick(() => {
+        //表格显示的数据  为 修改了位置的数组转换成的属性结构
+        this.tableData = this.arrToTree(this.tableDataArray);
+        //新的数组为 表格显示的数据转换
+        this.tableDataArray = this.toArray(this.tableData);
+      });
+    },
+    getIsButtontCell(formatS) {
+      let isButtontCell = false;
+      let widgetType = this.columnFormatMap[formatS];
+      if (widgetType) {
+        isButtontCell =
+          widgetType === "a-link" ||
+          widgetType === "button" ||
+          widgetType === "dropdown";
+      }
+      return isButtontCell;
+    },
+    //drag end
+    changeFormatS(row, isEdit) {
+      let formatS = isEdit ? row.editFormatS : row.formatS;
+      let isButtontCell = this.getIsButtontCell(formatS);
+      let attachmentPrefix = this.designer.getAttachmentPrefix();
+      let columnSelectedWidget = this.designer.createColumnWidget(row, isEdit);
+      if (!isEdit) {
+        if (columnSelectedWidget) {
+          row.widget = columnSelectedWidget;
+        } else {
+          row.widget = null;
+        }
+        row.utcTransformEnabled = false;
+      } else {
+        if (row.prop && row.prop.startsWith(attachmentPrefix)) {
+          let suffix = row.prop.replace(attachmentPrefix, "");
+          columnSelectedWidget.options.keyName = row.prop;
+          columnSelectedWidget.options.keyNameSuffix = suffix;
+        }
+        if (columnSelectedWidget) {
+          row.editWidget = columnSelectedWidget;
+        } else {
+          row.editWidget = null;
+        }
+      }
+
+      if (!isEdit) {
+        if (row.formatS == "editTreeButtonGroup") {
+          row.prop = null;
+          row.label = null;
+          row.sortable = false;
+          row.width = 150;
+          row.widget = null;
+        } else if (isButtontCell) {
+          if (row.formatS == "dropdown") {
+            row.width = 100;
+          } else if (row.formatS == "aLink" || row.formatS == "button") {
+            if (!row.width || row.width == 47) row.width = 150;
+          } else {
+            row.width = 47;
+          }
+          row.prop = null;
+          row.label = null;
+          row.sortable = false;
+          row.filterable = false;
+        } else {
+          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;
+
+          if (this.userFields.includes(row.formatS)) {
+            let item = this.businessOptions.find(
+              (item) => item.value == row.formatS
+            );
+            if (item) {
+              row.prop = item.value;
+              row.label = item.label;
+            }
+          }
+
+          row.sortable = true;
+
+          if (!isEdit) {
+            if (formatS == "editAttachment") {
+              row.prop = columnSelectedWidget.options.keyName;
+            } else {
+              row.prop = row.prop.replaceAll(attachmentPrefix, "");
+            }
+          }
+        }
+      }
+    },
+    getColumnWidgetConfig(row, isChange, isEdit) {
+      let formatS = isEdit ? row.editFormatS : row.formatS;
+      let columnSelectedWidget = null;
+      let columnEditFields = null;
+
+      let type = this.columnFormatMap[formatS];
+
+      if (type) {
+        const applyNewWidgetDefaults = (widget) => {
+          widget.options.required = row.required || false;
+          if ("editDelete" == formatS) {
+            widget.options.prefixIcon = "el-icon-delete";
+            widget.options.label = "删除";
+            widget.options.labelHidden = true;
+            widget.options.hiddenByWf = true;
+            widget.options.onClick =
+              "let tableParam = this.tableParam;\nlet tableRef = this.getWidgetRef(this.parentWidget.options.name);\ntableRef.deleteRow(tableParam.row,tableParam.rowIndex);";
+          } else if ("editButton" == formatS) {
+            widget.options.prefixIcon = "el-icon-edit";
+            widget.options.label = "查看";
+            widget.options.labelHidden = true;
+            widget.options.onClick =
+              "let tableParam = this.tableParam;\nlet tableRef = this.getWidgetRef(this.parentWidget.options.name);\ntableRef.openEditDialog(tableParam.row)";
+          } else if ("addSiblingEditRow" == formatS) {
+            widget.options.prefixIcon = "el-icon-plus";
+            widget.options.label = "新增兄弟节点";
+            widget.options.labelHidden = false;
+            widget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().addSiblingTreeRow(null,tableParam);";
+          } else if ("addChildTreeRow" == formatS) {
+            widget.options.prefixIcon = "el-icon-plus";
+            widget.options.label = "新增子节点";
+            widget.options.labelHidden = false;
+            widget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().addChildTreeRow(null,tableParam);";
+          } else if ("moveUpRow" == formatS) {
+            widget.options.label = "↑上移";
+            widget.options.labelHidden = false;
+            widget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().moveUpRow(tableParam);";
+          } else if ("moveDownRow" == formatS) {
+            widget.options.label = "↓下移";
+            widget.options.labelHidden = false;
+            widget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().moveDownRow(tableParam);";
+          } else if ("removeTreeRow" == formatS) {
+            widget.options.prefixIcon = "el-icon-delete";
+            widget.options.label = "删除";
+            widget.options.labelHidden = true;
+            widget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().removeTreeRow(tableParam);";
+          }
+        };
+
+        if (!isChange) {
+          const sourceWidget = this.designer.getColumnWidget(row, isEdit);
+          if (sourceWidget) {
+            columnSelectedWidget = this.$baseLodash.cloneDeep(sourceWidget);
+            columnSelectedWidget.options.required = row.required || false;
+            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 = this.designer.copyNewFieldWidget(
+              this.designer.getFieldWidgetByType(type)
+            );
+            applyNewWidgetDefaults(columnSelectedWidget);
+          }
+        } else {
+          columnSelectedWidget = this.designer.copyNewFieldWidget(
+            this.designer.getFieldWidgetByType(type)
+          );
+          applyNewWidgetDefaults(columnSelectedWidget);
+        }
+
+        if (columnSelectedWidget.options.hasOwnProperty("keyName")) {
+          columnSelectedWidget.options.keyName = row.prop;
+          columnSelectedWidget.options.keyNameEnabled = true;
+        } else {
+          columnSelectedWidget.options.name = row.prop;
+        }
+
+        if (type != "button" && type != "a-link") {
+          columnSelectedWidget.options.label = row.label;
+          columnSelectedWidget.options.labelHidden = true;
+        }
+      }
+      return { columnSelectedWidget, columnEditFields };
+    },
+    findColumnByColumnId(columnList, columnId) {
+      let result = null;
+      if (columnList) {
+        let column = columnList.find((item) => item.columnId == columnId);
+        for (let column of columnList) {
+          if (column.columnId == columnId) {
+            result = column;
+            break;
+          } else if (column.children && column.children.length) {
+            let subColumn = this.findColumnByColumnId(
+              column.children,
+              children
+            );
+            if (subColumn) {
+              result = subColumn;
+              break;
+            }
+          }
+        }
+      }
+      return result;
+    },
+
+    getRowWidget(row) {
+      let widget = row.widget;
+      if (!widget) {
+        widget.options.a = a;
+        widget.options.a = a;
+      }
+      return widget;
+    },
+    confirmEditTreeButtonGroupConfig(rowConfig) {
+      if (this.currentEditTreeButtonGroupRow) {
+        Object.assign(this.currentEditTreeButtonGroupRow, rowConfig);
+      }
+      this.currentEditTreeButtonGroupRow = null;
+      this.editTreeButtonGroupRowData = null;
+    },
+    openFormatConfigDialog(row, index) {
+      if (row.formatS === "editTreeButtonGroup") {
+        this.currentEditTreeButtonGroupRow = row;
+        this.editTreeButtonGroupRowData = this.$baseLodash.cloneDeep(row);
+        this.showEditTreeButtonGroupConfigDialog = true;
+        return;
+      }
+      if (row.formatS == "widgetRender") {
+        let formWidgetList = deepClone(this.designer.widgetList);
+        const widgetMap = this.buildColumnWidgetMap(
+          this.sourceTableColumnsSnapshot || this.optionModel.tableColumns || []
+        );
+        let tableData = this.restoreColumnWidgetRefs(
+          this.cloneTableColumnsForEdit(this.tableData),
+          widgetMap
+        );
+        let columnId = row.columnId;
+
+        let dataTableName = this.optionModel.name;
+
+        let targetColumn = null;
+        loopHandleWidget(formWidgetList, (item) => {
+          if (item.options.name == dataTableName) {
+            item.options.tableColumns = tableData;
+            targetColumn = this.findColumnByColumnId(
+              item.options.tableColumns,
+              columnId
+            );
+          }
+        });
+        let getWidgetList = (subWidgetList = []) => {
+          targetColumn.widgetList = this.$baseLodash.cloneDeep(subWidgetList);
+          return formWidgetList;
+        };
+        let sourceData = {
+          formWidgetList,
+          dataTableName,
+          columnId,
+          getWidgetList,
+        };
+
+        this.openWidgetRenderDialog(row, sourceData);
+        return;
+      }
+
+      const { columnSelectedWidget, columnEditFields } =
+        this.getColumnWidgetConfig(row);
+      if (!columnSelectedWidget) {
+        this.$message.warning(this.$t1("请先选择列格式化类型"));
+        return;
+      }
+      columnSelectedWidget.options = this.$baseLodash.cloneDeep(
+        columnSelectedWidget.options
+      );
+      this.operateIndex = index;
+      this.openWidgetPropertyDialog({
+        row: row,
+        columnSelectedWidget,
+        tableColumns: this.tableData,
+        index: index,
+        columnEditFields,
+        callback: (confirmedWidget) => {
+          this.confirmFormatConfigDialog(confirmedWidget, row);
+        },
+      });
+    },
+    getFieldKeyNameByOptions(options) {
+      let o = options.name;
+      return (options.keyNameEnabled && options.keyName) || o;
+    },
+    confirmFormatConfigDialog(columnSelectedWidget, row) {
+      row.widget = columnSelectedWidget;
+      const options = columnSelectedWidget.options;
+
+      let isButtontCell = this.getIsButtontCell(row.formatS);
+      if (!isButtontCell) {
+        row.prop = this.getFieldKeyNameByOptions(options);
+        row.label = options.label;
+        row.required = options.required;
+      }
+    },
+    openEditFormatConfigDialog(row, index) {
+      const { columnSelectedWidget, columnEditFields } =
+        this.getColumnWidgetConfig(row, false, true);
+      if (!columnSelectedWidget) {
+        this.$message.warning(this.$t1("请先选择编辑列格式化类型"));
+        return;
+      }
+      columnSelectedWidget.options = this.$baseLodash.cloneDeep(
+        columnSelectedWidget.options
+      );
+      this.operateIndex = index;
+      this.openWidgetPropertyDialog({
+        row: row,
+        tableColumns: this.tableData,
+        columnSelectedWidget,
+        index: index,
+        columnEditFields,
+        callback: (confirmedWidget) => {
+          this.confirmEditFormatConfigDialog(confirmedWidget, row);
+        },
+      });
+    },
+    confirmEditFormatConfigDialog(columnSelectedWidget, row) {
+      row.editWidget = columnSelectedWidget;
+    },
+    openColumnShowDialog(row) {
+      this.editFormEventHandler(row, this.rowDataIndex, "columnShow");
+    },
+    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 || ""
+      );
+
+      this.tableColumnConfigTitle = `自定义表格列属性配置(${row.label})`;
+      this.showTableColumnConfigDialog = true;
+    },
+    saveTableColumnConfigDialog() {
+      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") {
+            syntaxErrorFlag = true;
+          }
+        });
+
+        if (syntaxErrorFlag) {
+          this.$message.error(
+            this.i18nt("designer.setting.syntaxCheckWarning")
+          );
+          return;
+        }
+      }
+      this.$set(
+        row,
+        "tableColumnConfig",
+        this.$baseLodash.cloneDeep(this.tableColumnConfigCode)
+      );
+      this.showTableColumnConfigDialog = false;
+    },
+    changeRowLabel(row) {
+      this.setRowWidgetAttars(row, "label", row.label);
+    },
+    changeRowProp(row) {
+      this.setRowWidgetAttars(row, "keyName", row.prop);
+    },
+    changeRowRequired(row) {
+      this.setRowWidgetAttars(row, "required", row.required);
+    },
+    setRowWidgetAttars(row, key, value) {
+      let type1 = this.columnFormatMap[row.formatS];
+      let type2 = this.columnFormatMap[row.editFormatS];
+      let newWidget = type1
+        ? this.designer.copyNewFieldWidget(
+            this.designer.getFieldWidgetByType(type1)
+          )
+        : null;
+
+      let newEditWidget = type2
+        ? this.designer.copyNewFieldWidget(
+            this.designer.getFieldWidgetByType(type2)
+          )
+        : null;
+
+      if (newWidget && newWidget.formItemFlag && row.widget) {
+        if (row.widget.options[key] !== undefined) {
+          row.widget.options[key] = value;
+        }
+      }
+
+      if (newEditWidget && newEditWidget.formItemFlag && row.editWidget) {
+        if (row.editWidget.options[key] !== undefined) {
+          row.editWidget.options[key] = value;
+        }
+      }
+    },
+    openRowEditDialog(row, index) {
+      this.editRowData = row;
+      this.rowData = this.cloneTableColumnsForEdit([row])[0];
+      this.rowDataIndex = index;
+      this.showRowEditDialog = true;
+    },
+    submitRowEditDialog() {
+      Object.assign(this.editRowData, this.rowData);
+      if (this.rowData.widget) {
+        this.editRowData.widget = this.rowData.widget;
+      }
+      if (this.rowData.editWidget) {
+        this.editRowData.editWidget = this.rowData.editWidget;
+      }
+      if (this.rowData.widgetList && this.rowData.widgetList.length) {
+        this.editRowData.widgetList = this.rowData.widgetList;
+      }
+      this.showRowEditDialog = false;
+      this.labelTooltipDialogVisible = false;
+    },
+    closeRowEditDialog() {
+      this.showRowEditDialog = false;
+      this.labelTooltipDialogVisible = false;
+    },
+    openLabelTooltipDialog() {
+      this.labelTooltipValue = this.rowData.labelTooltip || "";
+      this.labelTooltipDialogVisible = true;
+    },
+    submitLabelTooltipDialog() {
+      const value = (this.labelTooltipValue || "").trim();
+      this.rowData.labelTooltip = value || null;
+      this.labelTooltipDialogVisible = false;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.icon-drag:before {
+  content: "\e61d";
+}
+
+/* 固定弹框内容区高度，避免加载前后抖动 */
+::v-deep .table-column-config-dialog.el-dialog {
+  .el-dialog__body {
+    height: 532px;
+    max-height: 532px;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+}
+
+.table-column-dialog-cont {
+  height: 516px;
+  min-height: 516px;
+  max-height: 516px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+/* 完整列配置弹框：挂到 body，内容区可滚动 */
+::v-deep .table-column-row-edit-dialog.el-dialog {
+  .el-dialog__body {
+    max-height: calc(90vh - 130px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-sizing: border-box;
+
+    .cont.table-column-row-edit-cont {
+      overflow: visible;
+      max-height: none;
+      padding-bottom: 12px;
+    }
+
+    .form-m2 {
+      height: auto !important;
+      overflow: visible !important;
+
+      .el-form-item.form-item-full:last-child {
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
+
+.table-column-row-edit-cont {
+  box-sizing: border-box;
+
+  ::v-deep .form-m2 {
+    .form-item-full {
+      width: calc(100% - 20px) !important;
+      display: block;
+    }
+
+    .form-item-full .el-input {
+      width: 100% !important;
+    }
+  }
+
+  ::v-deep .custom-divider.el-divider--horizontal {
+    margin: 10px 0;
+  }
+}
+
+::v-deep .label-tooltip-textarea textarea {
+  min-height: 320px;
+}
+</style>