cloud-web-corejs 1.0.54-dev.33 → 1.0.54-dev.331

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

@@ -1,1042 +1,1079 @@
-<template>
-  <div>
-    <el-form-item :label="i18nt('designer.setting.tableWidth')">
-      <el-input v-model="optionModel.tableWidth"></el-input>
-    </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.tableHeight')">
-      <el-input v-model="optionModel.tableHeight"></el-input>
-    </el-form-item>
-    <!--    <el-form-item :label="i18nt('designer.setting.customClass')">
-          <el-select v-model="optionModel.customClass" multiple="" filterable="" allow-create="" default-first-option="">
-            <el-option v-for="(e, t) in cssClassList" :key="t" :value="e" :label="e"></el-option>
-          </el-select>
-        </el-form-item>-->
-    <!-- <el-form-item :label="i18nt('designer.setting.showIndex')"><el-switch v-model="optionModel.showIndex"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('designer.setting.showCheckBox')"><el-switch v-model="optionModel.showCheckBox"></el-switch></el-form-item> -->
-    <el-form-item label="查询列表">
-      <el-switch v-model="optionModel.isQueryTable"></el-switch>
-    </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.showPagination')">
-      <el-switch v-model="optionModel.showPagination"></el-switch>
-    </el-form-item>
-    <!--    <el-form-item :label="i18nt('显示导出')">
-          <el-switch v-model="optionModel.showExportBtn"></el-switch>
-        </el-form-item>-->
-    <!--    <el-form-item :label="i18nt('显示搜索栏')">
-          <el-switch v-model="optionModel.showSearchArea"></el-switch>
-        </el-form-item>-->
-    <!-- <el-form-item :label="i18nt('designer.setting.smallPagination')"><el-switch v-model="optionModel.smallPagination"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('designer.setting.showSummary')"><el-switch v-model="optionModel.showSummary"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('designer.setting.stripe')"><el-switch v-model="optionModel.stripe"></el-switch></el-form-item>
-    <el-form-item :label="i18nt('designer.setting.rowSpacing')">
-      <el-input-number style="width:100%;" controls-position="right" :min="0" :max="20" v-model="optionModel.rowSpacing"></el-input-number>
-    </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.widgetSize')">
-      <el-select v-model="optionModel.tableSize" @change="refreshTableLayout">
-        <el-option v-for="e in widgetSizes" :key="e.value" :value="e.value" :label="e.label"></el-option>
-      </el-select>
-    </el-form-item> -->
-    <el-form-item :label="i18nt('designer.setting.tableColEdit')">
-      <el-button type="primary" plain="" round="" @click="openSetting">{{
-          i18nt('designer.setting.editAction')
-        }}
-      </el-button>
-    </el-form-item>
-    <el-form-item label="自定义表格配置" label-width="150px">
-      <a href="javascript:void(0);" class="a-link link-oneLind"
-         @click="editEventHandler('tableConfig', tableConfigParams)">
-        <span>{{ optionModel.tableConfig }}</span>
-        <i class="el-icon-edit"></i>
-      </a>
-    </el-form-item>
-    <el-form-item label-width="0">
-      <el-divider class="custom-divider-margin-top">编辑表格设置</el-divider>
-    </el-form-item>
-    <el-form-item :label="i18nt('编辑表格')">
-      <el-switch v-model="optionModel.isEditTable"></el-switch>
-    </el-form-item>
-    <el-form-item :label="i18nt('树表格')">
-      <el-switch v-model="optionModel.isTreeTable"></el-switch>
-    </el-form-item>
-    <el-form-item :label="i18nt('启用WBS码')">
-      <el-switch v-model="optionModel.wbsEnabled"></el-switch>
-    </el-form-item>
-    <el-form-item :label="i18nt('排序脚本编码')" v-if="optionModel.isEditTable">
-      <el-input v-model="optionModel.sortScriptCode"></el-input>
-    </el-form-item>
-    <!--    <el-form-item :label="i18nt('上级关联字段')">
-          <el-input v-model="optionModel.parentField"></el-input>
-        </el-form-item>
-        <el-form-item label="编辑表格默认数据" label-width="150px">
-          <a href="javascript:void(0);" class="a-link link-oneLind"
-             @click="editEventHandler('editDefaultRow', tableConfigParams)">
-            <span>{{ optionModel.editDefaultRow }}</span>
-            <i class="el-icon-edit"></i>
-          </a>
-        </el-form-item>-->
-    <!--    <el-form-item :label="i18nt('designer.setting.tableDataEdit')">
-          <el-button type="primary" plain="" round="" @click="openTableDataEdit">{{
-              i18nt('designer.setting.editAction')
-            }}
-          </el-button>
-        </el-form-item>-->
-    <!--    <el-form-item :label="i18nt('designer.setting.dsEnabled')">
-          <el-switch v-model="optionModel.dsEnabled"></el-switch>
-        </el-form-item>-->
-    <!-- <el-form-item v-if="optionModel.dsEnabled" :label="i18nt('designer.setting.dsName')">
-      <el-select v-model="optionModel.dsName" filterable="" clearable="">
-        <el-option v-for="(e, t) in dataSourceList" :key="t" :value="e.uniqueName" :label="e.uniqueName" :title="e.description"></el-option>
-      </el-select>
-    </el-form-item> -->
-    <!-- <el-form-item v-if="!optionModel.dsEnabled" :label="i18nt('designer.setting.showButtonsColumn')">
-      <el-switch v-model="optionModel.showButtonsColumn" @change="handleShowButtonsColumnChange"></el-switch>
-    </el-form-item> -->
-    <!--    <el-form-item v-if="optionModel.dsEnabled" :label="i18nt('请求访问')">
-          &lt;!&ndash; <el-button type="primary" plain="" round="" @click="openSqlEditDialog">{{ i18nt('designer.setting.editAction') }}</el-button> &ndash;&gt;
-          <el-input
-            class="search-input"
-            max="200"
-            v-model="optionModel.accessName"
-            @clear="
-          optionModel.accessCode = '';
-              $forceUpdate();
-            "
-            v-el-readonly
-            clearable
-          >
-            <i slot="suffix" class="el-input__icon el-icon-search" @click="showRequestaccessDialog=true"></i>
-          </el-input>
-        </el-form-item>-->
-    <!-- <el-form-item v-if="optionModel.showButtonsColumn" :label="i18nt('designer.setting.buttonsColumnEdit')">
-      <el-button type="primary" plain="" round="" @click="editButtonsColumn">{{ i18nt('designer.setting.editAction') }}</el-button>
-    </el-form-item> -->
-    <el-dialog
-      v-if="dataDialogVisible"
-      custom-class="dialog-style list-dialog"
-      :title="i18nt('designer.setting.tableDataEdit')"
-      :visible.sync="dataDialogVisible"
-      :show-close="!0"
-      append-to-body=""
-      :close-on-click-modal="!1"
-      :close-on-press-escape="!1"
-      :destroy-on-close="!0"
-      width="75%"
-      v-dialog-drag
-    >
-      <template slot="footer">
-        <div class="dialog-footer">
-          <el-button type="" @click="dataDialogVisible = !1" class="button-sty" icon="el-icon-close">
-            {{ i18nt('designer.hint.cancel') }}
-          </el-button>
-          <el-button type="primary" @click="saveTableData" class="button-sty" icon="el-icon-check">
-            {{ i18nt('designer.hint.confirm') }}
-          </el-button>
-        </div>
-      </template>
-      <code-editor mode="json" :readonly="!1" v-model="tableDataOptions"></code-editor>
-    </el-dialog>
-    <!--    <el-dialog
-          v-if="dialogVisible"
-          custom-class="dialog-style list-dialog"
-          :title="i18nt('designer.setting.tableColEdit')"
-          :visible.sync="dialogVisible"
-          :show-close="!0"
-          :append-to-body="false"
-          :modal="false"
-          :close-on-click-modal="!1"
-          :close-on-press-escape="!1"
-          :destroy-on-close="!0"
-          width="1220px"
-          v-dialog-drag
-        >
-          <div class="cont">
-            <template slot="footer">
-              <div class="dialog-footer">
-                <el-button type="" @click="dialogVisible = !1" 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>
-            </template>
-            <el-table
-              ref="singleTable"
-              width="100%"
-              :data="optionModel.tableColumns"
-
-              height="500"
-              border=""
-              row-key="columnId"
-              stripe=""
-            >
-              <el-table-column type="index" width="35" fixed="left"></el-table-column>
-              <el-table-column label="" width="35"><i class="el-icon-s-operation drag-option"></i></el-table-column>
-              <el-table-column :label="i18nt('designer.setting.columnLabel')" width="150" prop="label">
-                <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"></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('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>
-              &lt;!&ndash;          <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>&ndash;&gt;
-              <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="格式化配置" width="70" 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="i18nt('designer.setting.actionColumn')" width="100" fixed="right" align="center">
-                <template #header>
-                  <span>{{ i18nt('designer.setting.actionColumn') }}</span>
-                  &lt;!&ndash;              <el-button :title="i18nt('designer.setting.addTableColumn')" size="mini" type="" circle=""
-                                           icon="el-icon-plus" @click="openFieldTreeDialog"></el-button>&ndash;&gt;
-                </template>
-                <template slot-scope="scope">
-                  <el-button :title="i18nt('designer.setting.addTableColumn')" size="mini" type="" circle=""
-                             icon="el-icon-plus" @click="addCol"></el-button>
-                  <el-button
-                    :title="i18nt('designer.setting.deleteTableColumn')"
-                    size="mini"
-                    type=""
-                    circle=""
-                    icon="el-icon-minus"
-                    @click="handleDelete(scope.$index, scope.row)"
-                  ></el-button>
-                </template>
-              </el-table-column>
-
-            </el-table>
-          </div>
-
-        </el-dialog>-->
-    <!--    <el-dialog
-          v-if="showRenderDialogFlag"
-          :title="i18nt('designer.setting.renderFunction')"
-          :visible.sync="showRenderDialogFlag"
-          append-to-body=""
-          :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
-        >
-          <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
-      v-if="showSqlEditDialog"
-      :title="i18nt('数据源SQL编辑')"
-      :visible.sync="showSqlEditDialog"
-      append-to-body=""
-      :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
-    >
-      <el-alert type="info" :closable="!1"/>
-      <code-editor ref="dsResultEditor" mode="javascript" :readonly="!1" v-model="dataSourceSql"></code-editor>
-      <el-alert type="info" :closable="!1"/>
-      <div class="dialog-footer" slot="footer">
-        <el-button @click="showSqlEditDialog = !1" class="button-sty" icon="el-icon-close">
-          {{ i18nt('designer.hint.cancel') }}
-        </el-button>
-        <el-button type="primary" @click="saveDataSourceSql" class="button-sty" icon="el-icon-check">
-          {{ i18nt('designer.hint.confirm') }}
-        </el-button>
-      </div>
-    </el-dialog>
-    <requestaccessDialog v-if="showRequestaccessDialog" :visiable.sync="showRequestaccessDialog"
-                         @confirm="confirmInsertRequestaccess" multi="false"
-                         :param="{reportCode:reportTemplate.reportCode}"/>
-
-    <el-dialog
-      v-if="showFieldTreeDialog"
-      custom-class="dialog-style list-dialog"
-      title="新增列表列"
-      :visible.sync="showFieldTreeDialog"
-      :show-close="!0"
-      :append-to-body="false"
-      :modal="false"
-      :close-on-click-modal="!1"
-      :close-on-press-escape="!1"
-      :destroy-on-close="!0"
-      width="500px"
-      v-dialog-drag
-    >
-      <div class="cont" style="height: 500px;">
-        <el-tree
-          ref="tree"
-          :data="treeData"
-          show-checkbox
-          node-key="name"
-          :default-expand-all="true"
-          :check-on-click-node="true"
-          :expand-on-click-node="false"
-          :default-checked-keys="defaultCheckedKeys"
-          :props="defaultProps">
-        </el-tree>
-      </div>
-      <span slot="footer" class="dialog-footer">
-			<el-button type="primary" plain class="button-sty" @click="showFieldTreeDialog=false">
-				<i class="el-icon-close el-icon"></i>
-				取 消
-			</el-button>
-			<el-button type="primary" @click="confirmFieldTreeDialog" class="button-sty">
-				<i class="el-icon-check el-icon"></i>
-				确 定
-			</el-button>
-		</span>
-    </el-dialog>
-    <!--    <el-dialog
-          v-if="showDateConfigDialog"
-          :title="i18nt('日期配置编辑')"
-          :visible.sync="showDateConfigDialog"
-          append-to-body=""
-          :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
-        >
-          <div class="cont">
-            <el-form>
-              <template v-for="(editorName, index) in dateFieldList">
-                <component
-                  :is="editorName"
-                  :designer="designer"
-                  :selected-widget="selectedWidget"
-                  :option-model="columnOption"
-                  :key="index"
-                ></component>
-              </template>
-            </el-form>
-          </div>
-          <div class="dialog-footer" slot="footer">
-            <el-button @click="showDateConfigDialog = !1" class="button-sty" icon="el-icon-close">
-              {{ i18nt('designer.hint.cancel') }}
-            </el-button>
-            <el-button type="primary" class="button-sty" icon="el-icon-check" @click="confirmDateConfigDialog">
-              {{ i18nt('designer.hint.confirm') }}
-            </el-button>
-          </div>
-        </el-dialog>-->
-    <!--    <el-dialog
-          v-if="showDateConfigDialog"
-          :title="i18nt('日期配置编辑')"
-          :visible.sync="showDateConfigDialog"
-          append-to-body=""
-          :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
-        >
-          <div class="cont">
-            <el-scrollbar class="setting-scrollbar">
-                <el-form :model="columnOption" size="mini" label-position="left" label-width="120px" class="setting-form"
-                         @submit.native.prevent>
-                  <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
-                    <el-collapse-item name="1" v-if="showCollapse(commonProps)"
-                                      :title="i18nt('designer.setting.commonSetting')">
-                      <template v-for="(editorName, propName) in commonProps">
-                        <component
-                          v-if="hasPropEditor(propName, editorName)"
-                          :is="getPropEditor(propName, editorName)"
-                          :designer="designer"
-                          :selected-widget="columnSelectedWidget"
-                          :option-model="columnOption"
-                          :key="propName"
-                        ></component>
-                      </template>
-                    </el-collapse-item>
-
-                    <el-collapse-item name="2" v-if="showCollapse(advProps)"
-                                      :title="i18nt('designer.setting.advancedSetting')">
-                      <template v-for="(editorName, propName) in advProps">
-                        <component
-                          v-if="hasPropEditor(propName, editorName)"
-                          :is="getPropEditor(propName, editorName)"
-                          :designer="designer"
-                          :selected-widget="selectedWidget"
-                          :option-model="columnOption"
-                          :key="propName"
-                        ></component>
-                      </template>
-                    </el-collapse-item>
-
-                    <el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)"
-                                      :title="i18nt('designer.setting.eventSetting')">
-                      <template v-for="(editorName, propName) in eventProps">
-                        <component
-                          v-if="hasPropEditor(propName, editorName)"
-                          :is="getPropEditor(propName, editorName)"
-                          :designer="designer"
-                          :selected-widget="selectedWidget"
-                          :option-model="columnOption"
-                          :key="propName"
-                        ></component>
-                      </template>
-                    </el-collapse-item>
-                  </el-collapse>
-                </el-form>
-            </el-scrollbar>
-          </div>
-          <div class="dialog-footer" slot="footer">
-            <el-button @click="showDateConfigDialog = !1" class="button-sty" icon="el-icon-close">
-              {{ i18nt('designer.hint.cancel') }}
-            </el-button>
-            <el-button type="primary" class="button-sty" icon="el-icon-check" @click="confirmDateConfigDialog">
-              {{ i18nt('designer.hint.confirm') }}
-            </el-button>
-          </div>
-        </el-dialog>-->
-    <tableColumnDialog v-if="dialogVisible" :visiable.sync="dialogVisible" :designer="designer"
-                       :selectedWidget="selectedWidget"
-                       :optionModel="optionModel"/>
-
-
-  </div>
-</template>
-
-<script>
-import i18n from '../../../../../../components/xform/utils/i18n';
-// import Draggable from 'vuedraggable';
-import {deepClone, generateId} from '../../../../../../components/xform/utils/util';
-import Sortable from 'sortablejs';
-import requestaccessDialog from '../../../../../../views/user/form/report_requestaccess/dialog.vue'
-import conditionEditor from './condition-editor.vue'
-import tableColumnDialog from "./table-column-dialog.vue";
-import eventMixin
-  from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
-import setttingConfig from "@/settings";
-
-export default {
-  name: 'data-table-editor',
-  componentName: 'PropertyEditor',
-  mixins: [i18n, eventMixin],
-  components: {
-    requestaccessDialog,
-    conditionEditor,
-    tableColumnDialog
-  },
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object
-  },
-  inject: ['getReportTemplate', 'showEventCollapse', 'openWidgetPropertyDialog'],
-  data: function () {
-    return {
-      showTableConfigDialog: false,
-      tableConfigCode: null,
-      dialogVisible: !1,
-      dataDialogVisible: !1,
-      showButtonsEditDialog: !1,
-      oldButtonName: '',
-      cssClassList: [],
-      tableDataOptions: [],
-      widgetSizes: [
-        {
-          label: 'default',
-          value: ''
-        },
-        {
-          label: 'large',
-          value: 'large'
-        },
-        {
-          label: 'medium',
-          value: 'medium'
-        },
-        {
-          label: 'small',
-          value: 'small'
-        },
-        {
-          label: 'mini',
-          value: 'mini'
-        }
-      ],
-      alignOptions: [
-        {
-          value: 'left',
-          label: 'left'
-        },
-        {
-          value: 'center',
-          label: 'center'
-        },
-        {
-          value: 'right',
-          label: 'right'
-        }
-      ],
-      fieldTypeOptions: [
-        {
-          value: 'text',
-          label: 'Text'
-        },
-        {
-          value: 'number',
-          label: 'Number'
-        },
-        {
-          value: 'date',
-          label: 'Date'
-        }
-      ],
-      op: [
-        {
-          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##%'
-            }
-          ]
-        },
-        {
-          label: 'edit Format',
-          options: [
-            {
-              value: 'editInput',
-              label: '文本输入框'
-            },
-            {
-              value: 'editNumber',
-              label: '数字输入框'
-            },
-            {
-              value: 'editDate',
-              label: '日期输入框'
-            },
-            {
-              value: 'editSelect',
-              label: '下拉框'
-            },
-            {
-              value: 'editSearch',
-              label: '搜索框'
-            },
-            {
-              value: 'editDelete',
-              label: '删除按钮'
-            },
-            {
-              value: 'editButton',
-              label: '查看按钮'
-            }
-          ]
-        },
-      ],
-      columnFormatMap: {
-        editInput: 'input',
-        editNumber: 'number',
-        editDate: 'date',
-        editSelect: 'select',
-        editSearch: 'vabsearch'
-      },
-      showRenderDialogFlag: !1,
-      renderJson: '',
-      currentTableColumn: null,
-      nameRules: [
-        {
-          required: !0,
-          trigger: ['blur', 'change'],
-          message: this.i18nt('designer.setting.fieldValueRequired')
-        }
-      ],
-      showSqlEditDialog: false,
-      dataSourceSql: "",
-      showRequestaccessDialog: false,
-      showDateConfigDialog: false,
-      columnOption: {},
-      dateFieldList: [],
-      columnSelectedWidget: {},
-      // reportTemplate:{}
-
-      showFieldTreeDialog: false,
-      treeData: [],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      },
-      defaultCheckedKeys: [],
-      tableConfigParams: ["dataId", "formCode"]
-    };
-  },
-  computed: {
-    dataSourceList: function () {
-      return this.designer.formConfig && this.designer.formConfig.dataSources ? this.designer.formConfig.dataSources : [];
-    },
-    reportTemplate: function () {
-      return this.getReportTemplate();
-    }
-  },
-  created: function () {
-    // this.reportTemplate = this.getReportTemplate();
-    var e = this;
-    (this.cssClassList = deepClone(this.designer.getCssClassList())),
-      this.designer.handleEvent('form-css-updated', function (t) {
-        e.cssClassList = t;
-      });
-    if (this.optionModel.showExportBtn == null) this.$set(this.optionModel, 'showExportBtn', true);
-    if (this.optionModel.tableConfig === void 0) this.$set(this.optionModel, 'tableConfig', "");
-  },
-  mounted: function () {
-    /*let dateFieldList = Object.keys(dateFieldComponents);
-    this.dateFieldList = dateFieldList;*/
-  },
-  methods: {
-
-    dragSort: function () {
-      var e = this.$refs.singleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0],
-        t = this.optionModel.tableColumns;
-      this.sortable = Sortable.create(e, {
-        ghostClass: 'sortable-ghost',
-        setData: function (e) {
-          e.setData('Text', '');
-        },
-        onEnd: function (e) {
-          var i = t.splice(e.oldIndex, 1)[0];
-          t.splice(e.newIndex, 0, i);
-          t[e.newIndex].id;
-          t[e.newIndex - 1] && t[e.newIndex - 1].id, t[e.newIndex + 1] && t[e.newIndex + 1].id;
-        }
-      });
-    },
-    openTableDataEdit: function () {
-      (this.dataDialogVisible = !0), (this.tableDataOptions = JSON.stringify(this.optionModel.tableData, null, '  '));
-    },
-    saveTableData: function () {
-      try {
-        (this.optionModel.tableData = JSON.parse(this.tableDataOptions)), (this.dataDialogVisible = !1);
-      } catch (e) {
-        this.$message.error(this.i18nt('designer.hint.invalidOptionsData') + e.message);
-      }
-    },
-    openSetting: function () {
-      var e = this;
-      (this.dialogVisible = !0)/*,
-        this.$nextTick(function () {
-          e.dragSort();
-        });*/
-    },
-    colSubmit: function () {
-      this.dialogVisible = !1;
-    },
-    addCol: function () {
-      let tmpId = 'column' + generateId();
-      var e = {
-        columnId: new Date().getTime(),
-        required: false,
-        width: 150,
-        prop: tmpId,
-        label: tmpId,
-        align: "left",
-        show: true,
-        sortable: true
-      };
-      this.optionModel.tableColumns.push(e), this.designer.emitHistoryChange();
-    },
-    handleDelete: function (e, t) {
-      if (1 === this.optionModel.tableColumns.length) return this.$message.warning(this.i18nt('designer.setting.onlyOneColumnCannotBeDeleted')), !1;
-      this.optionModel.tableColumns.splice(e, 1);
-    },
-    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);
-    },
-    handleShowButtonsColumnChange: function (e) {
-      if (e) {
-        var t = this.designer.formWidget.getSelectedWidgetRef();
-        t &&
-        t.refreshLayout &&
-        this.$nextTick(function () {
-          t.refreshLayout();
-        });
-      }
-    },
-    onButtonNameFocus: function (e) {
-      console.log('test', e), (this.oldButtonName = e.target.value);
-    },
-    onButtonNameChange: function (e, t) {
-      var i = !1;
-      this.optionModel.operationButtons.map(function (n, o) {
-        n.name === e && o !== t && (i = !0);
-      }),
-      i && (this.$message.error(this.i18nt('designer.setting.operationButtonDuplicatedNameError')), (this.optionModel.operationButtons[t].name = this.oldButtonName));
-    },
-    editButtonsColumn: function () {
-      this.showButtonsEditDialog = !0;
-    },
-    deleteOperationButton: function (e) {
-      var t = this;
-      this.$confirm(this.i18nt('designer.setting.deleteOperationButtonHint'), this.i18nt('render.hint.prompt'), {
-        confirmButtonText: this.i18nt('render.hint.confirm'),
-        cancelButtonText: this.i18nt('render.hint.cancel')
-      })
-        .then(function () {
-          t.optionModel.operationButtons.splice(e, 1);
-        })
-        .catch(function (e) {
-        });
-    },
-    addOperationButton: function () {
-      this.$set(this.optionModel, 'operationButtons', this.optionModel.operationButtons || []),
-        this.optionModel.operationButtons.push({
-          name: 'btn' + generateId(),
-          label: 'new btn',
-          type: 'text',
-          size: 'small',
-          round: !1,
-          hidden: !1,
-          disabled: !1
-        });
-    },
-    refreshTableLayout: function () {
-      var e = this.designer.formWidget.getSelectedWidgetRef();
-      e &&
-      e.refreshLayout &&
-      this.$nextTick(function () {
-        e.refreshLayout();
-      });
-    },
-    saveDataSourceSql() {
-      this.optionModel.dataSourceSql = this.dataSourceSql;
-      this.showSqlEditDialog = false;
-    },
-    openSqlEditDialog() {
-      this.dataSourceSql = this.optionModel.dataSourceSql ? deepClone(this.optionModel.dataSourceSql) : "";
-      this.showSqlEditDialog = true;
-    },
-    confirmInsertRequestaccess(rows) {
-      if (rows.length) {
-        let row = rows[0];
-        this.optionModel.accessName = row.accessName;
-        this.optionModel.accessCode = row.accessCode;
-      }
-    },
-    changeFormatS(row) {
-      let columnWidgetConfig = this.getColumnWidgetConfig(row, true);
-      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
-      if (columnSelectedWidget) {
-        row.columnOption = columnSelectedWidget.options;
-      } else {
-        row.columnOption = {}
-      }
-      if (row.formatS == 'editDelete' || row.formatS == 'editButton') {
-        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;
-      }
-    },
-    getColumnWidgetConfig(row, isChange) {
-      let formatS = row.formatS
-      let columnSelectedWidget = null;
-      let columnEditFields = null;
-
-      let type = this.columnFormatMap[row.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));
-        let tmpId = generateId();
-        let idVal = row.prop ? row.prop : (type + tmpId);
-        columnSelectedWidget.id = idVal;
-        columnSelectedWidget.options.name = idVal;
-        if (!isChange && row.columnOption && Object.keys(row.columnOption).length) {
-          row.columnOption.required = row.required || false;
-          columnSelectedWidget.options = row.columnOption;
-        } else {
-          columnSelectedWidget.options.required = row.required || false;
-          row.columnOption = columnSelectedWidget.options;
-        }
-        columnSelectedWidget.options.name = row.prop;
-        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);
-        }
-      })
-    },
-    confirmFormatConfigDialog(columnOption) {
-      let row = this.optionModel.tableColumns[this.operateIndex];
-      row.columnOption = columnOption;
-      row.prop = columnOption.name;
-      row.label = columnOption.label;
-      row.required = columnOption.required;
-    },
-    openFieldTreeDialog() {
-      this.treeData = [{
-        "name": "Jinjilianxiren",
-        "label": "员工-紧急联系人",
-        children: [
-          {
-            "detailEntity": "Jinjilianxiren",
-            "name": "createdOn",
-            "label": "员工-紧急联系人.创建时间",
-            "type": "DateTime",
-            "required": "1"
-          }, /*{
-            "searchDialogWidth": "520px",
-            "detailEntity": "Jinjilianxiren",
-            "name": "createdBy",
-            "label": "员工-紧急联系人.创建用户",
-            "type": "Reference",
-            "required": "1"
-          },*/ {
-            "detailEntity": "Jinjilianxiren",
-            "name": "modifiedOn",
-            "label": "员工-紧急联系人.最近修改时间",
-            "type": "DateTime",
-            "required": "0"
-          }, /*{
-            "searchDialogWidth": "520px",
-            "detailEntity": "Jinjilianxiren",
-            "name": "modifiedBy",
-            "label": "员工-紧急联系人.修改用户",
-            "type": "Reference",
-            "required": "0"
-          }, {
-            "searchDialogWidth": "520px",
-            "detailEntity": "Jinjilianxiren",
-            "name": "mdYuangongdanganId",
-            "label": "员工-紧急联系人.主从关联Id",
-            "type": "Reference",
-            "required": "1"
-          },*/ {
-            "detailEntity": "Jinjilianxiren",
-            "name": "shouji",
-            "label": "员工-紧急联系人.手机",
-            "type": "Text",
-            "required": "0",
-            "maxLength": "200"
-          }, {
-            "detailEntity": "Jinjilianxiren",
-            "name": "jinjilianxirenxingming",
-            "label": "员工-紧急联系人.紧急联系人姓名",
-            "type": "Text",
-            "required": "0",
-            "maxLength": "200"
-          }]
-      }];
-
-      let fields = this.optionModel.tableColumns.filter(item => !!item.prop).map(item => item.prop);
-      let defaultCheckedKeys = [];
-      this.treeData.forEach(item1 => {
-        item1.children.forEach(item2 => {
-          if (fields.includes(item2.name) && !defaultCheckedKeys.includes(item2.name)) {
-            defaultCheckedKeys.push(item2.name)
-          }
-        })
-      })
-      this.defaultCheckedKeys = defaultCheckedKeys
-      this.showFieldTreeDialog = true;
-    },
-    confirmFieldTreeDialog() {
-      // defaultCheckedKeys
-      let fields = this.optionModel.tableColumns.filter(item => !!item.prop).map(item => item.prop);
-      let datas = this.$refs.tree.getCheckedNodes(true, false);
-      datas.filter(item => !fields.includes(item.name)).forEach(item => {
-        this.addCol2(item);
-      });
-      this.designer.emitHistoryChange();
-      this.showFieldTreeDialog = false;
-    },
-    addCol2: function (item) {
-      let tmpId = 'column' + generateId();
-      var e = {
-        columnId: new Date().getTime(),
-        required: false,
-        width: 150,
-        prop: item.name,
-        label: item.label,
-        show: true,
-        sortable: true
-      };
-      this.optionModel.tableColumns.push(e)
-    },
-    openTableConfigDialog() {
-      this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`;
-      this.eventHandlerCode = selectedWidget.options[eventName] || '';
-      this.showTableConfigDialog = true;
-    },
-    downloadExcel() {
-      let defaultUrl = 'http://file.sc.5mall.com/download/repo1/b/mk1/2024/12/13/b2aea548-a9a8-4dca-bba7-8d9c6134ebe3.xlsx';
-      let xformImportTemplateFile = setttingConfig.xformImportTemplateFile || defaultUrl;
-      if (!xformImportTemplateFile) return;
-      this.$commonFileUtil.downloadFile(xformImportTemplateFile, "通用导入模板.xlsx");
-    }
-  }
-};
-</script>
-
-<style>
-.icon-drag:before {
-  content: '\e61d';
-}
-</style>
+<template>
+  <div>
+    <el-form-item :label="i18nt('designer.setting.tableWidth')">
+      <el-input v-model="optionModel.tableWidth"></el-input>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.tableHeight')">
+      <el-input v-model="optionModel.tableHeight"></el-input>
+    </el-form-item>
+    <!--    <el-form-item :label="i18nt('designer.setting.customClass')">
+          <el-select v-model="optionModel.customClass" multiple="" filterable="" allow-create="" default-first-option="">
+            <el-option v-for="(e, t) in cssClassList" :key="t" :value="e" :label="e"></el-option>
+          </el-select>
+        </el-form-item>-->
+    <!-- <el-form-item :label="i18nt('designer.setting.showIndex')"><el-switch v-model="optionModel.showIndex"></el-switch></el-form-item>
+    <el-form-item :label="i18nt('designer.setting.showCheckBox')"><el-switch v-model="optionModel.showCheckBox"></el-switch></el-form-item> -->
+    <el-form-item label="启用数据行合并">
+      <el-switch v-model="optionModel.mergeRowEnabled"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('合并行唯一字段')">
+      <el-input v-model="optionModel.mergeRowKey"></el-input>
+    </el-form-item>
+    <el-form-item label="查询列表">
+      <el-switch v-model="optionModel.isQueryTable"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.showPagination')">
+      <el-switch v-model="optionModel.showPagination"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('是否显示表尾统计行')">
+      <el-switch v-model="optionModel.showGridFooter"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('是否隐藏复选框')">
+      <el-switch v-model="optionModel.hideGridCheckBox"></el-switch>
+    </el-form-item>
+    <el-form-item label="是否查询总页数">
+      <el-switch v-model="!optionModel.isNotQueryAllPage"></el-switch>
+    </el-form-item>
+    <el-form-item label="默认每页查询数">
+      <base-input-number v-model="optionModel.gridPageSize" size="mini" :min="1" :max="10000"/>
+    </el-form-item>
+    <el-form-item :label="i18nt('可选择每页查询数')"></el-form-item>
+    <el-form-item label-width="0">
+      <template v-if="optionModel.gridPageSizeList">
+        <draggable tag="ul" class="draggable-box" :list="optionModel.gridPageSizeList"
+                   v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.drag-option' }">
+          <li v-for="(item, index) in optionModel.gridPageSizeList" :key="index" class="col-item">
+            <i class="el-icon-s-operation drag-option"></i>
+            <base-input-number v-model="item.value" :min="1" :max="10000" style="width: 200px;"></base-input-number>
+            <el-button circle plain size="mini" type="danger" @click="optionModel.gridPageSizeList.splice(index,1)"
+                       icon="el-icon-minus" class="col-delete-button" style="position: unset;"></el-button>
+          </li>
+        </draggable>
+      </template>
+      <div>
+        <el-button type="text" @click="addGridPageSizeList" icon="el-icon-circle-plus-outline" class="add-option">
+          {{ i18nt('新增分页数') }}
+        </el-button>
+      </div>
+    </el-form-item>
+
+    <!--    <el-form-item :label="i18nt('显示导出')">
+          <el-switch v-model="optionModel.showExportBtn"></el-switch>
+        </el-form-item>-->
+    <!--    <el-form-item :label="i18nt('显示搜索栏')">
+          <el-switch v-model="optionModel.showSearchArea"></el-switch>
+        </el-form-item>-->
+    <!-- <el-form-item :label="i18nt('designer.setting.smallPagination')"><el-switch v-model="optionModel.smallPagination"></el-switch></el-form-item>
+    <el-form-item :label="i18nt('designer.setting.showSummary')"><el-switch v-model="optionModel.showSummary"></el-switch></el-form-item>
+    <el-form-item :label="i18nt('designer.setting.stripe')"><el-switch v-model="optionModel.stripe"></el-switch></el-form-item>
+    <el-form-item :label="i18nt('designer.setting.rowSpacing')">
+      <el-input-number style="width:100%;" controls-position="right" :min="0" :max="20" v-model="optionModel.rowSpacing"></el-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.widgetSize')">
+      <el-select v-model="optionModel.tableSize" @change="refreshTableLayout">
+        <el-option v-for="e in widgetSizes" :key="e.value" :value="e.value" :label="e.label"></el-option>
+      </el-select>
+    </el-form-item> -->
+    <el-form-item :label="i18nt('designer.setting.tableColEdit')">
+      <el-button type="primary" plain="" round="" @click="openSetting">{{
+          i18nt('designer.setting.editAction')
+        }}
+      </el-button>
+    </el-form-item>
+    <el-form-item label="自定义表格配置" label-width="150px">
+      <a href="javascript:void(0);" class="a-link link-oneLind"
+         @click="editEventHandler('tableConfig', tableConfigParams)">
+        <span>{{ optionModel.tableConfig }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">编辑表格设置</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('编辑表格')">
+      <el-switch v-model="optionModel.isEditTable"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('树表格')">
+      <el-switch v-model="optionModel.isTreeTable"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('启用WBS码')">
+      <el-switch v-model="optionModel.wbsEnabled"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('排序脚本编码')" v-if="optionModel.isEditTable">
+      <el-input v-model="optionModel.sortScriptCode"></el-input>
+    </el-form-item>
+    <!--    <el-form-item :label="i18nt('上级关联字段')">
+          <el-input v-model="optionModel.parentField"></el-input>
+        </el-form-item>
+        <el-form-item label="编辑表格默认数据" label-width="150px">
+          <a href="javascript:void(0);" class="a-link link-oneLind"
+             @click="editEventHandler('editDefaultRow', tableConfigParams)">
+            <span>{{ optionModel.editDefaultRow }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>-->
+    <!--    <el-form-item :label="i18nt('designer.setting.tableDataEdit')">
+          <el-button type="primary" plain="" round="" @click="openTableDataEdit">{{
+              i18nt('designer.setting.editAction')
+            }}
+          </el-button>
+        </el-form-item>-->
+    <!--    <el-form-item :label="i18nt('designer.setting.dsEnabled')">
+          <el-switch v-model="optionModel.dsEnabled"></el-switch>
+        </el-form-item>-->
+    <!-- <el-form-item v-if="optionModel.dsEnabled" :label="i18nt('designer.setting.dsName')">
+      <el-select v-model="optionModel.dsName" filterable="" clearable="">
+        <el-option v-for="(e, t) in dataSourceList" :key="t" :value="e.uniqueName" :label="e.uniqueName" :title="e.description"></el-option>
+      </el-select>
+    </el-form-item> -->
+    <!-- <el-form-item v-if="!optionModel.dsEnabled" :label="i18nt('designer.setting.showButtonsColumn')">
+      <el-switch v-model="optionModel.showButtonsColumn" @change="handleShowButtonsColumnChange"></el-switch>
+    </el-form-item> -->
+    <!--    <el-form-item v-if="optionModel.dsEnabled" :label="i18nt('请求访问')">
+          &lt;!&ndash; <el-button type="primary" plain="" round="" @click="openSqlEditDialog">{{ i18nt('designer.setting.editAction') }}</el-button> &ndash;&gt;
+          <el-input
+            class="search-input"
+            max="200"
+            v-model="optionModel.accessName"
+            @clear="
+          optionModel.accessCode = '';
+              $forceUpdate();
+            "
+            v-el-readonly
+            clearable
+          >
+            <i slot="suffix" class="el-input__icon el-icon-search" @click="showRequestaccessDialog=true"></i>
+          </el-input>
+        </el-form-item>-->
+    <!-- <el-form-item v-if="optionModel.showButtonsColumn" :label="i18nt('designer.setting.buttonsColumnEdit')">
+      <el-button type="primary" plain="" round="" @click="editButtonsColumn">{{ i18nt('designer.setting.editAction') }}</el-button>
+    </el-form-item> -->
+    <el-dialog
+      v-if="dataDialogVisible"
+      custom-class="dialog-style list-dialog"
+      :title="i18nt('designer.setting.tableDataEdit')"
+      :visible.sync="dataDialogVisible"
+      :show-close="!0"
+      append-to-body=""
+      :close-on-click-modal="!1"
+      :close-on-press-escape="!1"
+      :destroy-on-close="!0"
+      width="75%"
+      v-dialog-drag
+    >
+      <template slot="footer">
+        <div class="dialog-footer">
+          <el-button type="" @click="dataDialogVisible = !1" class="button-sty" icon="el-icon-close">
+            {{ i18nt('designer.hint.cancel') }}
+          </el-button>
+          <el-button type="primary" @click="saveTableData" class="button-sty" icon="el-icon-check">
+            {{ i18nt('designer.hint.confirm') }}
+          </el-button>
+        </div>
+      </template>
+      <code-editor mode="json" :readonly="!1" v-model="tableDataOptions"></code-editor>
+    </el-dialog>
+    <!--    <el-dialog
+          v-if="dialogVisible"
+          custom-class="dialog-style list-dialog"
+          :title="i18nt('designer.setting.tableColEdit')"
+          :visible.sync="dialogVisible"
+          :show-close="!0"
+          :append-to-body="false"
+          :modal="false"
+          :close-on-click-modal="!1"
+          :close-on-press-escape="!1"
+          :destroy-on-close="!0"
+          width="1220px"
+          v-dialog-drag
+        >
+          <div class="cont">
+            <template slot="footer">
+              <div class="dialog-footer">
+                <el-button type="" @click="dialogVisible = !1" 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>
+            </template>
+            <el-table
+              ref="singleTable"
+              width="100%"
+              :data="optionModel.tableColumns"
+
+              height="500"
+              border=""
+              row-key="columnId"
+              stripe=""
+            >
+              <el-table-column type="index" width="35" fixed="left"></el-table-column>
+              <el-table-column label="" width="35"><i class="el-icon-s-operation drag-option"></i></el-table-column>
+              <el-table-column :label="i18nt('designer.setting.columnLabel')" width="150" prop="label">
+                <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"></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('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>
+              &lt;!&ndash;          <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>&ndash;&gt;
+              <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="格式化配置" width="70" 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="i18nt('designer.setting.actionColumn')" width="100" fixed="right" align="center">
+                <template #header>
+                  <span>{{ i18nt('designer.setting.actionColumn') }}</span>
+                  &lt;!&ndash;              <el-button :title="i18nt('designer.setting.addTableColumn')" size="mini" type="" circle=""
+                                           icon="el-icon-plus" @click="openFieldTreeDialog"></el-button>&ndash;&gt;
+                </template>
+                <template slot-scope="scope">
+                  <el-button :title="i18nt('designer.setting.addTableColumn')" size="mini" type="" circle=""
+                             icon="el-icon-plus" @click="addCol"></el-button>
+                  <el-button
+                    :title="i18nt('designer.setting.deleteTableColumn')"
+                    size="mini"
+                    type=""
+                    circle=""
+                    icon="el-icon-minus"
+                    @click="handleDelete(scope.$index, scope.row)"
+                  ></el-button>
+                </template>
+              </el-table-column>
+
+            </el-table>
+          </div>
+
+        </el-dialog>-->
+    <!--    <el-dialog
+          v-if="showRenderDialogFlag"
+          :title="i18nt('designer.setting.renderFunction')"
+          :visible.sync="showRenderDialogFlag"
+          append-to-body=""
+          :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
+        >
+          <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
+      v-if="showSqlEditDialog"
+      :title="i18nt('数据源SQL编辑')"
+      :visible.sync="showSqlEditDialog"
+      append-to-body=""
+      :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
+    >
+      <el-alert type="info" :closable="!1"/>
+      <code-editor ref="dsResultEditor" mode="javascript" :readonly="!1" v-model="dataSourceSql"></code-editor>
+      <el-alert type="info" :closable="!1"/>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="showSqlEditDialog = !1" class="button-sty" icon="el-icon-close">
+          {{ i18nt('designer.hint.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="saveDataSourceSql" class="button-sty" icon="el-icon-check">
+          {{ i18nt('designer.hint.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+    <requestaccessDialog v-if="showRequestaccessDialog" :visiable.sync="showRequestaccessDialog"
+                         @confirm="confirmInsertRequestaccess" multi="false"
+                         :param="{reportCode:reportTemplate.reportCode}"/>
+
+    <el-dialog
+      v-if="showFieldTreeDialog"
+      custom-class="dialog-style list-dialog"
+      title="新增列表列"
+      :visible.sync="showFieldTreeDialog"
+      :show-close="!0"
+      :append-to-body="false"
+      :modal="false"
+      :close-on-click-modal="!1"
+      :close-on-press-escape="!1"
+      :destroy-on-close="!0"
+      width="500px"
+      v-dialog-drag
+    >
+      <div class="cont" style="height: 500px;">
+        <el-tree
+          ref="tree"
+          :data="treeData"
+          show-checkbox
+          node-key="name"
+          :default-expand-all="true"
+          :check-on-click-node="true"
+          :expand-on-click-node="false"
+          :default-checked-keys="defaultCheckedKeys"
+          :props="defaultProps">
+        </el-tree>
+      </div>
+      <span slot="footer" class="dialog-footer">
+			<el-button type="primary" plain class="button-sty" @click="showFieldTreeDialog=false">
+				<i class="el-icon-close el-icon"></i>
+				取 消
+			</el-button>
+			<el-button type="primary" @click="confirmFieldTreeDialog" class="button-sty">
+				<i class="el-icon-check el-icon"></i>
+				确 定
+			</el-button>
+		</span>
+    </el-dialog>
+    <!--    <el-dialog
+          v-if="showDateConfigDialog"
+          :title="i18nt('日期配置编辑')"
+          :visible.sync="showDateConfigDialog"
+          append-to-body=""
+          :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
+        >
+          <div class="cont">
+            <el-form>
+              <template v-for="(editorName, index) in dateFieldList">
+                <component
+                  :is="editorName"
+                  :designer="designer"
+                  :selected-widget="selectedWidget"
+                  :option-model="columnOption"
+                  :key="index"
+                ></component>
+              </template>
+            </el-form>
+          </div>
+          <div class="dialog-footer" slot="footer">
+            <el-button @click="showDateConfigDialog = !1" class="button-sty" icon="el-icon-close">
+              {{ i18nt('designer.hint.cancel') }}
+            </el-button>
+            <el-button type="primary" class="button-sty" icon="el-icon-check" @click="confirmDateConfigDialog">
+              {{ i18nt('designer.hint.confirm') }}
+            </el-button>
+          </div>
+        </el-dialog>-->
+    <!--    <el-dialog
+          v-if="showDateConfigDialog"
+          :title="i18nt('日期配置编辑')"
+          :visible.sync="showDateConfigDialog"
+          append-to-body=""
+          :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
+        >
+          <div class="cont">
+            <el-scrollbar class="setting-scrollbar">
+                <el-form :model="columnOption" size="mini" label-position="left" label-width="120px" class="setting-form"
+                         @submit.native.prevent>
+                  <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
+                    <el-collapse-item name="1" v-if="showCollapse(commonProps)"
+                                      :title="i18nt('designer.setting.commonSetting')">
+                      <template v-for="(editorName, propName) in commonProps">
+                        <component
+                          v-if="hasPropEditor(propName, editorName)"
+                          :is="getPropEditor(propName, editorName)"
+                          :designer="designer"
+                          :selected-widget="columnSelectedWidget"
+                          :option-model="columnOption"
+                          :key="propName"
+                        ></component>
+                      </template>
+                    </el-collapse-item>
+
+                    <el-collapse-item name="2" v-if="showCollapse(advProps)"
+                                      :title="i18nt('designer.setting.advancedSetting')">
+                      <template v-for="(editorName, propName) in advProps">
+                        <component
+                          v-if="hasPropEditor(propName, editorName)"
+                          :is="getPropEditor(propName, editorName)"
+                          :designer="designer"
+                          :selected-widget="selectedWidget"
+                          :option-model="columnOption"
+                          :key="propName"
+                        ></component>
+                      </template>
+                    </el-collapse-item>
+
+                    <el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)"
+                                      :title="i18nt('designer.setting.eventSetting')">
+                      <template v-for="(editorName, propName) in eventProps">
+                        <component
+                          v-if="hasPropEditor(propName, editorName)"
+                          :is="getPropEditor(propName, editorName)"
+                          :designer="designer"
+                          :selected-widget="selectedWidget"
+                          :option-model="columnOption"
+                          :key="propName"
+                        ></component>
+                      </template>
+                    </el-collapse-item>
+                  </el-collapse>
+                </el-form>
+            </el-scrollbar>
+          </div>
+          <div class="dialog-footer" slot="footer">
+            <el-button @click="showDateConfigDialog = !1" class="button-sty" icon="el-icon-close">
+              {{ i18nt('designer.hint.cancel') }}
+            </el-button>
+            <el-button type="primary" class="button-sty" icon="el-icon-check" @click="confirmDateConfigDialog">
+              {{ i18nt('designer.hint.confirm') }}
+            </el-button>
+          </div>
+        </el-dialog>-->
+    <tableColumnDialog v-if="dialogVisible" :visiable.sync="dialogVisible" :designer="designer"
+                       :selectedWidget="selectedWidget"
+                       :optionModel="optionModel"/>
+
+
+  </div>
+</template>
+
+<script>
+import i18n from '../../../../../../components/xform/utils/i18n';
+import Draggable from 'vuedraggable';
+import {deepClone, generateId} from '../../../../../../components/xform/utils/util';
+import Sortable from 'sortablejs';
+import requestaccessDialog from '../../../../../../views/user/form/report_requestaccess/dialog.vue'
+import conditionEditor from './condition-editor.vue'
+import tableColumnDialog from "./table-column-dialog.vue";
+import eventMixin
+  from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
+import setttingConfig from "@/settings";
+
+export default {
+  name: 'data-table-editor',
+  componentName: 'PropertyEditor',
+  mixins: [i18n, eventMixin],
+  components: {
+    Draggable,
+    requestaccessDialog,
+    conditionEditor,
+    tableColumnDialog
+  },
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object
+  },
+  inject: ['getReportTemplate', 'showEventCollapse', 'openWidgetPropertyDialog'],
+  data: function () {
+    return {
+      showTableConfigDialog: false,
+      tableConfigCode: null,
+      dialogVisible: !1,
+      dataDialogVisible: !1,
+      showButtonsEditDialog: !1,
+      oldButtonName: '',
+      cssClassList: [],
+      tableDataOptions: [],
+      widgetSizes: [
+        {
+          label: 'default',
+          value: ''
+        },
+        {
+          label: 'large',
+          value: 'large'
+        },
+        {
+          label: 'medium',
+          value: 'medium'
+        },
+        {
+          label: 'small',
+          value: 'small'
+        },
+        {
+          label: 'mini',
+          value: 'mini'
+        }
+      ],
+      alignOptions: [
+        {
+          value: 'left',
+          label: 'left'
+        },
+        {
+          value: 'center',
+          label: 'center'
+        },
+        {
+          value: 'right',
+          label: 'right'
+        }
+      ],
+      fieldTypeOptions: [
+        {
+          value: 'text',
+          label: 'Text'
+        },
+        {
+          value: 'number',
+          label: 'Number'
+        },
+        {
+          value: 'date',
+          label: 'Date'
+        }
+      ],
+      op: [
+        {
+          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##%'
+            }
+          ]
+        },
+        {
+          label: 'edit Format',
+          options: [
+            {
+              value: 'editInput',
+              label: '文本输入框'
+            },
+            {
+              value: 'editNumber',
+              label: '数字输入框'
+            },
+            {
+              value: 'editDate',
+              label: '日期输入框'
+            },
+            {
+              value: 'editSelect',
+              label: '下拉框'
+            },
+            {
+              value: 'editSearch',
+              label: '搜索框'
+            },
+            {
+              value: 'editDelete',
+              label: '删除按钮'
+            },
+            {
+              value: 'editButton',
+              label: '查看按钮'
+            }
+          ]
+        },
+      ],
+      columnFormatMap: {
+        editInput: 'input',
+        editNumber: 'number',
+        editDate: 'date',
+        editSelect: 'select',
+        editSearch: 'vabsearch'
+      },
+      showRenderDialogFlag: !1,
+      renderJson: '',
+      currentTableColumn: null,
+      nameRules: [
+        {
+          required: !0,
+          trigger: ['blur', 'change'],
+          message: this.i18nt('designer.setting.fieldValueRequired')
+        }
+      ],
+      showSqlEditDialog: false,
+      dataSourceSql: "",
+      showRequestaccessDialog: false,
+      showDateConfigDialog: false,
+      columnOption: {},
+      dateFieldList: [],
+      columnSelectedWidget: {},
+      // reportTemplate:{}
+
+      showFieldTreeDialog: false,
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      defaultCheckedKeys: [],
+      tableConfigParams: ["dataId", "formCode"]
+    };
+  },
+  computed: {
+    dataSourceList: function () {
+      return this.designer.formConfig && this.designer.formConfig.dataSources ? this.designer.formConfig.dataSources : [];
+    },
+    reportTemplate: function () {
+      return this.getReportTemplate();
+    }
+  },
+  created: function () {
+    // this.reportTemplate = this.getReportTemplate();
+    var e = this;
+    (this.cssClassList = deepClone(this.designer.getCssClassList())),
+      this.designer.handleEvent('form-css-updated', function (t) {
+        e.cssClassList = t;
+      });
+    if (this.optionModel.showExportBtn == null) this.$set(this.optionModel, 'showExportBtn', true);
+    if (this.optionModel.tableConfig === void 0) this.$set(this.optionModel, 'tableConfig', "");
+  },
+  mounted: function () {
+    /*let dateFieldList = Object.keys(dateFieldComponents);
+    this.dateFieldList = dateFieldList;*/
+  },
+  methods: {
+
+    dragSort: function () {
+      var e = this.$refs.singleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0],
+        t = this.optionModel.tableColumns;
+      this.sortable = Sortable.create(e, {
+        ghostClass: 'sortable-ghost',
+        setData: function (e) {
+          e.setData('Text', '');
+        },
+        onEnd: function (e) {
+          var i = t.splice(e.oldIndex, 1)[0];
+          t.splice(e.newIndex, 0, i);
+          t[e.newIndex].id;
+          t[e.newIndex - 1] && t[e.newIndex - 1].id, t[e.newIndex + 1] && t[e.newIndex + 1].id;
+        }
+      });
+    },
+    openTableDataEdit: function () {
+      (this.dataDialogVisible = !0), (this.tableDataOptions = JSON.stringify(this.optionModel.tableData, null, '  '));
+    },
+    saveTableData: function () {
+      try {
+        (this.optionModel.tableData = JSON.parse(this.tableDataOptions)), (this.dataDialogVisible = !1);
+      } catch (e) {
+        this.$message.error(this.i18nt('designer.hint.invalidOptionsData') + e.message);
+      }
+    },
+    openSetting: function () {
+      var e = this;
+      (this.dialogVisible = !0)/*,
+        this.$nextTick(function () {
+          e.dragSort();
+        });*/
+    },
+    colSubmit: function () {
+      this.dialogVisible = !1;
+    },
+    addCol: function () {
+      let tmpId = 'column' + generateId();
+      var e = {
+        columnId: new Date().getTime(),
+        required: false,
+        width: 150,
+        prop: tmpId,
+        label: tmpId,
+        align: "left",
+        show: true,
+        sortable: true
+      };
+      this.optionModel.tableColumns.push(e), this.designer.emitHistoryChange();
+    },
+    handleDelete: function (e, t) {
+      if (1 === this.optionModel.tableColumns.length) return this.$message.warning(this.i18nt('designer.setting.onlyOneColumnCannotBeDeleted')), !1;
+      this.optionModel.tableColumns.splice(e, 1);
+    },
+    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);
+    },
+    handleShowButtonsColumnChange: function (e) {
+      if (e) {
+        var t = this.designer.formWidget.getSelectedWidgetRef();
+        t &&
+        t.refreshLayout &&
+        this.$nextTick(function () {
+          t.refreshLayout();
+        });
+      }
+    },
+    onButtonNameFocus: function (e) {
+      console.log('test', e), (this.oldButtonName = e.target.value);
+    },
+    onButtonNameChange: function (e, t) {
+      var i = !1;
+      this.optionModel.operationButtons.map(function (n, o) {
+        n.name === e && o !== t && (i = !0);
+      }),
+      i && (this.$message.error(this.i18nt('designer.setting.operationButtonDuplicatedNameError')), (this.optionModel.operationButtons[t].name = this.oldButtonName));
+    },
+    editButtonsColumn: function () {
+      this.showButtonsEditDialog = !0;
+    },
+    deleteOperationButton: function (e) {
+      var t = this;
+      this.$confirm(this.i18nt('designer.setting.deleteOperationButtonHint'), this.i18nt('render.hint.prompt'), {
+        confirmButtonText: this.i18nt('render.hint.confirm'),
+        cancelButtonText: this.i18nt('render.hint.cancel')
+      })
+        .then(function () {
+          t.optionModel.operationButtons.splice(e, 1);
+        })
+        .catch(function (e) {
+        });
+    },
+    addOperationButton: function () {
+      this.$set(this.optionModel, 'operationButtons', this.optionModel.operationButtons || []),
+        this.optionModel.operationButtons.push({
+          name: 'btn' + generateId(),
+          label: 'new btn',
+          type: 'text',
+          size: 'small',
+          round: !1,
+          hidden: !1,
+          disabled: !1
+        });
+    },
+    refreshTableLayout: function () {
+      var e = this.designer.formWidget.getSelectedWidgetRef();
+      e &&
+      e.refreshLayout &&
+      this.$nextTick(function () {
+        e.refreshLayout();
+      });
+    },
+    saveDataSourceSql() {
+      this.optionModel.dataSourceSql = this.dataSourceSql;
+      this.showSqlEditDialog = false;
+    },
+    openSqlEditDialog() {
+      this.dataSourceSql = this.optionModel.dataSourceSql ? deepClone(this.optionModel.dataSourceSql) : "";
+      this.showSqlEditDialog = true;
+    },
+    confirmInsertRequestaccess(rows) {
+      if (rows.length) {
+        let row = rows[0];
+        this.optionModel.accessName = row.accessName;
+        this.optionModel.accessCode = row.accessCode;
+      }
+    },
+    changeFormatS(row) {
+      let columnWidgetConfig = this.getColumnWidgetConfig(row, true);
+      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
+      if (columnSelectedWidget) {
+        row.columnOption = columnSelectedWidget.options;
+      } else {
+        row.columnOption = {}
+      }
+      if (row.formatS == 'editDelete' || row.formatS == 'editButton') {
+        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;
+      }
+    },
+    getColumnWidgetConfig(row, isChange) {
+      let formatS = row.formatS
+      let columnSelectedWidget = null;
+      let columnEditFields = null;
+
+      let type = this.columnFormatMap[row.formatS];
+
+      if (type) {
+        columnSelectedWidget = this.$baseLodash.cloneDeep(this.designer.getFieldWidgetByType(type));
+        let tmpId = generateId();
+        let idVal = row.prop ? row.prop : (type + tmpId);
+        columnSelectedWidget.id = idVal;
+        columnSelectedWidget.options.name = idVal;
+        if (!isChange && row.columnOption && Object.keys(row.columnOption).length) {
+          row.columnOption.required = row.required || false;
+          columnSelectedWidget.options = row.columnOption;
+        } else {
+          columnSelectedWidget.options.required = row.required || false;
+          row.columnOption = columnSelectedWidget.options;
+        }
+        columnSelectedWidget.options.name = row.prop;
+        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);
+        }
+      })
+    },
+    confirmFormatConfigDialog(columnOption) {
+      let row = this.optionModel.tableColumns[this.operateIndex];
+      row.columnOption = columnOption;
+      row.prop = columnOption.name;
+      row.label = columnOption.label;
+      row.required = columnOption.required;
+    },
+    openFieldTreeDialog() {
+      this.treeData = [{
+        "name": "Jinjilianxiren",
+        "label": "员工-紧急联系人",
+        children: [
+          {
+            "detailEntity": "Jinjilianxiren",
+            "name": "createdOn",
+            "label": "员工-紧急联系人.创建时间",
+            "type": "DateTime",
+            "required": "1"
+          }, /*{
+            "searchDialogWidth": "520px",
+            "detailEntity": "Jinjilianxiren",
+            "name": "createdBy",
+            "label": "员工-紧急联系人.创建用户",
+            "type": "Reference",
+            "required": "1"
+          },*/ {
+            "detailEntity": "Jinjilianxiren",
+            "name": "modifiedOn",
+            "label": "员工-紧急联系人.最近修改时间",
+            "type": "DateTime",
+            "required": "0"
+          }, /*{
+            "searchDialogWidth": "520px",
+            "detailEntity": "Jinjilianxiren",
+            "name": "modifiedBy",
+            "label": "员工-紧急联系人.修改用户",
+            "type": "Reference",
+            "required": "0"
+          }, {
+            "searchDialogWidth": "520px",
+            "detailEntity": "Jinjilianxiren",
+            "name": "mdYuangongdanganId",
+            "label": "员工-紧急联系人.主从关联Id",
+            "type": "Reference",
+            "required": "1"
+          },*/ {
+            "detailEntity": "Jinjilianxiren",
+            "name": "shouji",
+            "label": "员工-紧急联系人.手机",
+            "type": "Text",
+            "required": "0",
+            "maxLength": "200"
+          }, {
+            "detailEntity": "Jinjilianxiren",
+            "name": "jinjilianxirenxingming",
+            "label": "员工-紧急联系人.紧急联系人姓名",
+            "type": "Text",
+            "required": "0",
+            "maxLength": "200"
+          }]
+      }];
+
+      let fields = this.optionModel.tableColumns.filter(item => !!item.prop).map(item => item.prop);
+      let defaultCheckedKeys = [];
+      this.treeData.forEach(item1 => {
+        item1.children.forEach(item2 => {
+          if (fields.includes(item2.name) && !defaultCheckedKeys.includes(item2.name)) {
+            defaultCheckedKeys.push(item2.name)
+          }
+        })
+      })
+      this.defaultCheckedKeys = defaultCheckedKeys
+      this.showFieldTreeDialog = true;
+    },
+    confirmFieldTreeDialog() {
+      // defaultCheckedKeys
+      let fields = this.optionModel.tableColumns.filter(item => !!item.prop).map(item => item.prop);
+      let datas = this.$refs.tree.getCheckedNodes(true, false);
+      datas.filter(item => !fields.includes(item.name)).forEach(item => {
+        this.addCol2(item);
+      });
+      this.designer.emitHistoryChange();
+      this.showFieldTreeDialog = false;
+    },
+    addCol2: function (item) {
+      let tmpId = 'column' + generateId();
+      var e = {
+        columnId: new Date().getTime(),
+        required: false,
+        width: 150,
+        prop: item.name,
+        label: item.label,
+        show: true,
+        sortable: true
+      };
+      this.optionModel.tableColumns.push(e)
+    },
+    openTableConfigDialog() {
+      this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`;
+      this.eventHandlerCode = selectedWidget.options[eventName] || '';
+      this.showTableConfigDialog = true;
+    },
+    downloadExcel() {
+      let defaultUrl = 'http://file.sc.5mall.com/download/repo1/b/mk1/2024/12/13/b2aea548-a9a8-4dca-bba7-8d9c6134ebe3.xlsx';
+      let xformImportTemplateFile = setttingConfig.xformImportTemplateFile || defaultUrl;
+      if (!xformImportTemplateFile) return;
+      this.$commonFileUtil.downloadFile(xformImportTemplateFile, "通用导入模板.xlsx");
+    },
+    addGridPageSizeList() {
+      if (this.optionModel.gridPageSizeList === undefined) {
+        this.$set(this.optionModel, "gridPageSizeList", [])
+      }
+      this.optionModel.gridPageSizeList.push({value: 50})
+    }
+  }
+};
+</script>
+
+<style>
+.icon-drag:before {
+  content: '\e61d';
+}
+</style>