cloud-web-corejs 1.0.54-dev.798 → 1.0.54-dev.799

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

@@ -1,1154 +1,1154 @@
-<template>
-  <div>
-    <!-- <el-form-item label-width="0">
-      <el-divider class="custom-divider-margin-top">数据集</el-divider>
-    </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.required')">
-      <el-switch v-model="optionModel.required"></el-switch>
-    </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.requiredHint')">
-      <el-input
-        v-model="optionModel.requiredHint"
-        clearable
-        placeholder="留空则使用默认提示"
-      ></el-input>
-    </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('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="行高度（px）">
-      <el-input v-model="optionModel.tableRowHeight"></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-width="0">
-      <el-divider class="custom-divider-margin-top">查询与分页</el-divider>
-    </el-form-item>
-    <el-form-item label="查询列表">
-      <el-switch v-model="optionModel.isQueryTable"></el-switch>
-    </el-form-item>
-    <el-form-item label="切换tab时自动查询">
-      <el-switch v-model="optionModel.searchOnSwitchTab"></el-switch>
-    </el-form-item>
-    <el-form-item label="是否显示查询按钮">
-      <el-switch v-model="isShowQueryButton"></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="isQueryAllPage"></el-switch>
-    </el-form-item>
-    <el-form-item label="默认每页查询数">
-      <base-input-number
-        v-model="optionModel.gridPageSize"
-        size="mini"
-        :max="10000"
-      />
-    </el-form-item>
-    <el-form-item label-width="0">
-      <div class="form-section-label">{{ i18nt("可选择每页查询数") }}</div>
-      <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-width="0">
-      <el-divider class="custom-divider-margin-top">列与动态列</el-divider>
-    </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="动态列来源">
-      <el-radio-group v-model="optionModel.dynamicColumnSourceType">
-        <el-radio label="none">无</el-radio>
-        <el-radio label="script">前端列脚本</el-radio>
-        <el-radio label="api">接口动态列</el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <div
-      v-if="optionModel.dynamicColumnSourceType === 'script'"
-      class="dynamic-column-block"
-    >
-      <div class="form-section-label">
-        前端列脚本
-        <el-tooltip effect="light" placement="top">
-          <div slot="content" class="field-tip-content">
-            不调接口，脚本直接 return 列配置
-          </div>
-          <i class="el-icon-info label-tip-icon"></i>
-        </el-tooltip>
-      </div>
-      <div class="data-table-editor-subsection">
-        <el-form-item label="列脚本">
-          <a
-            href="javascript:void(0);"
-            class="a-link link-oneLind"
-            @click="
-              editEventHandler('dynamicColumnsScript', defaultEventParams)
-            "
-          >
-            <span>{{ optionModel.dynamicColumnsScript }}</span>
-            <i class="el-icon-edit"></i>
-          </a>
-        </el-form-item>
-      </div>
-    </div>
-    <div
-      v-if="optionModel.dynamicColumnSourceType === 'api'"
-      class="dynamic-column-block"
-    >
-      <div class="form-section-label">
-        接口动态列
-        <el-tooltip effect="light" placement="top">
-          <div slot="content" class="field-tip-content">
-            打开表单时请求后台脚本，返回字段/列定义（格式与「表头后台字段」一致，详见
-            docs/数据表格动态列 JSON 说明.md）
-          </div>
-          <i class="el-icon-info label-tip-icon"></i>
-        </el-tooltip>
-      </div>
-      <div class="data-table-editor-subsection">
-        <el-form-item label="脚本编码">
-          <el-input
-            v-model="optionModel.dynamicColumnScriptCode"
-            clearable
-            placeholder="scriptCode 或 formCode/scriptCode"
-          ></el-input>
-        </el-form-item>
-        <el-form-item>
-          <span slot="label">
-            额外参数
-            <el-tooltip effect="light" placement="top">
-              <div slot="content" class="field-tip-content">
-                格式： return { bizType: this.formModel.type }
-              </div>
-              <i class="el-icon-info label-tip-icon"></i>
-            </el-tooltip>
-          </span>
-          <a
-            href="javascript:void(0);"
-            class="a-link link-oneLind"
-            @click="
-              editEventHandler('dynamicColumnScriptParam', tableConfigParams)
-            "
-          >
-            <span>{{ optionModel.dynamicColumnScriptParam }}</span>
-            <i class="el-icon-edit"></i>
-          </a>
-        </el-form-item>
-        <el-form-item>
-          <span slot="label">
-            转换脚本
-            <el-tooltip effect="light" placement="top">
-              <div slot="content" class="field-tip-content">
-                可选。入参 res，返回标准定义数组；不填时默认取
-                res.objx（数组）或 res.objx.fields / res.objx.columns
-              </div>
-              <i class="el-icon-info label-tip-icon"></i>
-            </el-tooltip>
-          </span>
-          <a
-            href="javascript:void(0);"
-            class="a-link link-oneLind"
-            @click="editDynamicSchemaConvert"
-          >
-            <span>{{ dynamicSchemaConvertDisplay }}</span>
-            <i class="el-icon-edit"></i>
-          </a>
-        </el-form-item>
-      </div>
-    </div>
-    <div
-      v-if="optionModel.dynamicColumnSourceType !== 'none'"
-      class="dynamic-column-block"
-    >
-      <div class="data-table-editor-subsection">
-        <el-form-item>
-          <span slot="label">
-            加载条件
-            <el-tooltip effect="light" placement="top">
-              <div slot="content" class="field-tip-content">
-                表格初始化加载动态列前执行。<br />
-                <code>return false</code> 时不加载；不配置则默认加载。
-              </div>
-              <i class="el-icon-info label-tip-icon"></i>
-            </el-tooltip>
-          </span>
-          <a
-            href="javascript:void(0);"
-            class="a-link link-oneLind"
-            @click="
-              editEventHandler('dynamicColumnLoadScript', tableConfigParams)
-            "
-          >
-            <span>{{ optionModel.dynamicColumnLoadScript }}</span>
-            <i class="el-icon-edit"></i>
-          </a>
-        </el-form-item>
-      </div>
-    </div>
-    <el-form-item v-if="optionModel.dynamicColumnSourceType !== 'none'">
-      <span slot="label">
-        动态列模式
-        <el-tooltip effect="light" placement="top">
-          <div slot="content" class="field-tip-content">
-            对<strong>生效的动态列</strong>与静态列的合并方式：<br />
-            追加 — 静态列 + 动态列；替换 — 仅动态列。
-          </div>
-          <i class="el-icon-info label-tip-icon"></i>
-        </el-tooltip>
-      </span>
-      <el-select v-model="optionModel.dynamicColumnMode" style="width: 100%">
-        <el-option label="追加到静态列" value="append"></el-option>
-        <el-option label="替换静态列" value="replace"></el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item label="自定义表格配置">
-      <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-width="0">
-      <el-divider class="custom-divider-margin-top">明细导出设置</el-divider>
-    </el-form-item>
-    <el-form-item :label="i18nt('明细导出脚本编码')">
-      <el-input v-model="optionModel.exportItemScriptCode"></el-input>
-    </el-form-item>
-    <el-form-item label="自定义明细导出参数">
-      <a
-        href="javascript:void(0);"
-        class="a-link link-oneLind"
-        @click="editEventHandler('exportItemParam', tableConfigParams)"
-      >
-        <span>{{ optionModel.exportItemParam }}</span>
-        <i class="el-icon-edit"></i>
-      </a>
-    </el-form-item>
-    <el-form-item label="明细导出列维护">
-      <a
-        href="javascript:void(0);"
-        class="a-link link-oneLind"
-        @click="openExportItemColumnsDialog"
-      >
-        <span>{{
-          optionModel.exportItemColumns && optionModel.exportItemColumns.length
-            ? "已维护"
-            : null
-        }}</span>
-        <i class="el-icon-edit"></i>
-      </a>
-    </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="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>
-    <tableColumnDialog
-      v-if="columnDialogMounted"
-      :visiable.sync="dialogVisible"
-      :designer="designer"
-      :selectedWidget="selectedWidget"
-      :optionModel="optionModel"
-    />
-    <exportItemColumnsDialog
-      v-if="showExportItemColumnsDialog"
-      :visiable.sync="showExportItemColumnsDialog"
-      :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";
-
-import exportItemColumnsDialog from "./exportItemColumns-dialog.vue";
-
-export default {
-  name: "data-table-editor",
-  componentName: "PropertyEditor",
-  mixins: [i18n, eventMixin],
-  components: {
-    Draggable,
-    requestaccessDialog,
-    // conditionEditor,
-    tableColumnDialog,
-    exportItemColumnsDialog,
-  },
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object,
-  },
-  inject: [
-    "getReportTemplate",
-    "showEventCollapse",
-    "openWidgetPropertyDialog",
-  ],
-  data: function () {
-    return {
-      showTableConfigDialog: false,
-      tableConfigCode: null,
-      dialogVisible: !1,
-      columnDialogMounted: !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"],
-      defaultEventParams: ["dataId", "formCode"],
-      showExportItemColumnsDialog: false,
-    };
-  },
-  computed: {
-    dataSourceList: function () {
-      return this.designer.formConfig && this.designer.formConfig.dataSources
-        ? this.designer.formConfig.dataSources
-        : [];
-    },
-    reportTemplate: function () {
-      return this.getReportTemplate();
-    },
-    isQueryAllPage: {
-      get() {
-        return !this.optionModel.isNotQueryAllPage;
-      },
-      set(val) {
-        this.optionModel.isNotQueryAllPage = !val;
-      },
-    },
-    isShowQueryButton: {
-      get() {
-        return !this.optionModel.isNotShowQueryButton;
-      },
-      set(val) {
-        this.optionModel.isNotShowQueryButton = !val;
-      },
-    },
-    dynamicSchemaConvertDisplay() {
-      return this.optionModel.dynamicSchemaConvert || "";
-    },
-  },
-  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 () {
-    const preloadColumnDialog = () => {
-      this.columnDialogMounted = true;
-    };
-    if (typeof requestIdleCallback === "function") {
-      requestIdleCallback(preloadColumnDialog, { timeout: 200 });
-    } else {
-      this.$nextTick(preloadColumnDialog);
-    }
-  },
-  methods: {
-    editDynamicSchemaConvert() {
-      this.editEventHandler("dynamicSchemaConvert", ["res"]);
-    },
-    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 () {
-      if (!this.columnDialogMounted) {
-        this.columnDialogMounted = true;
-      }
-      this.dialogVisible = true;
-    },
-    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) {
-      row.widget = this.designer.createColumnWidget(row, false) || null;
-      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;
-      }
-    },
-    confirmFormatConfigDialog(columnSelectedWidget) {
-      const options = columnSelectedWidget.options;
-      let row = this.optionModel.tableColumns[this.operateIndex];
-      row.widget = columnSelectedWidget;
-      row.prop = options.name;
-      row.label = options.label;
-      row.required = options.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 });
-    },
-    openExportItemColumnsDialog() {
-      this.showExportItemColumnsDialog = true;
-    },
-  },
-};
-</script>
-
-<style>
-.icon-drag:before {
-  content: "\e61d";
-}
-</style>
-
-<style scoped>
-.data-table-editor-subsection {
-  margin: 0 0 4px 8px;
-  padding-left: 12px;
-  border-left: 2px solid #ebeef5;
-}
-
-.form-section-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: #303133;
-  line-height: 22px;
-  margin-bottom: 8px;
-}
-
-.label-tip-icon {
-  margin-left: 4px;
-  color: #909399;
-  cursor: pointer;
-  font-size: 14px;
-  vertical-align: middle;
-}
-
-.field-tip-content {
-  line-height: 1.4;
-  max-width: 320px;
-}
-
-.dynamic-column-hint {
-  font-size: 12px;
-  color: #606266;
-  line-height: 1.5;
-  margin: 0 0 12px;
-  padding: 8px 10px;
-  background: #f4f4f5;
-  border-radius: 4px;
-}
-
-.dynamic-column-block {
-  margin-bottom: 12px;
-}
-
-.dynamic-column-block .data-table-editor-subsection {
-  margin-top: 0;
-}
-</style>
+<template>
+  <div>
+    <!-- <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">数据集</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.required')">
+      <el-switch v-model="optionModel.required"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.requiredHint')">
+      <el-input
+        v-model="optionModel.requiredHint"
+        clearable
+        placeholder="留空则使用默认提示"
+      ></el-input>
+    </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('designer.setting.tableWidth')" class="form-item-label-top">
+      <el-input v-model="optionModel.tableWidth"></el-input>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.tableHeight')" class="form-item-label-top">
+      <el-input v-model="optionModel.tableHeight"></el-input>
+    </el-form-item>
+    <el-form-item label="行高度（px）" class="form-item-label-top">
+      <el-input v-model="optionModel.tableRowHeight"></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('合并行唯一字段')" class="form-item-label-top">
+      <el-input v-model="optionModel.mergeRowKey"></el-input>
+    </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="查询列表">
+      <el-switch v-model="optionModel.isQueryTable"></el-switch>
+    </el-form-item>
+    <el-form-item label="切换tab时自动查询">
+      <el-switch v-model="optionModel.searchOnSwitchTab"></el-switch>
+    </el-form-item>
+    <el-form-item label="是否显示查询按钮">
+      <el-switch v-model="isShowQueryButton"></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="isQueryAllPage"></el-switch>
+    </el-form-item>
+    <el-form-item label="默认每页查询数" class="form-item-label-top">
+      <base-input-number
+        v-model="optionModel.gridPageSize"
+        size="mini"
+        :max="10000"
+      />
+    </el-form-item>
+    <el-form-item label-width="0">
+      <div class="form-section-label">{{ i18nt("可选择每页查询数") }}</div>
+      <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-width="0">
+      <el-divider class="custom-divider-margin-top">列与动态列</el-divider>
+    </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="动态列来源">
+      <el-radio-group v-model="optionModel.dynamicColumnSourceType">
+        <el-radio label="none">无</el-radio>
+        <el-radio label="script">前端列脚本</el-radio>
+        <el-radio label="api">接口动态列</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <div
+      v-if="optionModel.dynamicColumnSourceType === 'script'"
+      class="dynamic-column-block"
+    >
+      <div class="form-section-label">
+        前端列脚本
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" class="field-tip-content">
+            不调接口，脚本直接 return 列配置
+          </div>
+          <i class="el-icon-info label-tip-icon"></i>
+        </el-tooltip>
+      </div>
+      <div class="data-table-editor-subsection">
+        <el-form-item label="列脚本">
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="
+              editEventHandler('dynamicColumnsScript', defaultEventParams)
+            "
+          >
+            <span>{{ optionModel.dynamicColumnsScript }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </div>
+    </div>
+    <div
+      v-if="optionModel.dynamicColumnSourceType === 'api'"
+      class="dynamic-column-block"
+    >
+      <div class="form-section-label">
+        接口动态列
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" class="field-tip-content">
+            打开表单时请求后台脚本，返回字段/列定义（格式与「表头后台字段」一致，详见
+            docs/数据表格动态列 JSON 说明.md）
+          </div>
+          <i class="el-icon-info label-tip-icon"></i>
+        </el-tooltip>
+      </div>
+      <div class="data-table-editor-subsection">
+        <el-form-item label="脚本编码"  class="form-item-label-top">
+          <el-input
+            v-model="optionModel.dynamicColumnScriptCode"
+            clearable
+            placeholder="scriptCode 或 formCode/scriptCode"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <span slot="label">
+            额外参数
+            <el-tooltip effect="light" placement="top">
+              <div slot="content" class="field-tip-content">
+                格式： return { bizType: this.formModel.type }
+              </div>
+              <i class="el-icon-info label-tip-icon"></i>
+            </el-tooltip>
+          </span>
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="
+              editEventHandler('dynamicColumnScriptParam', tableConfigParams)
+            "
+          >
+            <span>{{ optionModel.dynamicColumnScriptParam }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+        <el-form-item>
+          <span slot="label">
+            转换脚本
+            <el-tooltip effect="light" placement="top">
+              <div slot="content" class="field-tip-content">
+                可选。入参 res，返回标准定义数组；不填时默认取
+                res.objx（数组）或 res.objx.fields / res.objx.columns
+              </div>
+              <i class="el-icon-info label-tip-icon"></i>
+            </el-tooltip>
+          </span>
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="editDynamicSchemaConvert"
+          >
+            <span>{{ dynamicSchemaConvertDisplay }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </div>
+    </div>
+    <div
+      v-if="optionModel.dynamicColumnSourceType !== 'none'"
+      class="dynamic-column-block"
+    >
+      <div class="data-table-editor-subsection">
+        <el-form-item>
+          <span slot="label">
+            加载条件
+            <el-tooltip effect="light" placement="top">
+              <div slot="content" class="field-tip-content">
+                表格初始化加载动态列前执行。<br />
+                <code>return false</code> 时不加载；不配置则默认加载。
+              </div>
+              <i class="el-icon-info label-tip-icon"></i>
+            </el-tooltip>
+          </span>
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="
+              editEventHandler('dynamicColumnLoadScript', tableConfigParams)
+            "
+          >
+            <span>{{ optionModel.dynamicColumnLoadScript }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </div>
+    </div>
+    <el-form-item class="form-item-label-top" v-if="optionModel.dynamicColumnSourceType !== 'none'">
+      <span slot="label">
+        动态列模式
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" class="field-tip-content">
+            对<strong>生效的动态列</strong>与静态列的合并方式：<br />
+            追加 — 静态列 + 动态列；替换 — 仅动态列。
+          </div>
+          <i class="el-icon-info label-tip-icon"></i>
+        </el-tooltip>
+      </span>
+      <el-select v-model="optionModel.dynamicColumnMode" style="width: 100%">
+        <el-option label="追加到静态列" value="append"></el-option>
+        <el-option label="替换静态列" value="replace"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="自定义表格配置">
+      <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" class="form-item-label-top">
+      <el-input v-model="optionModel.sortScriptCode"></el-input>
+    </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('明细导出脚本编码')" class="form-item-label-top">
+      <el-input v-model="optionModel.exportItemScriptCode"></el-input>
+    </el-form-item>
+    <el-form-item label="自定义明细导出参数">
+      <a
+        href="javascript:void(0);"
+        class="a-link link-oneLind"
+        @click="editEventHandler('exportItemParam', tableConfigParams)"
+      >
+        <span>{{ optionModel.exportItemParam }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+    <el-form-item label="明细导出列维护">
+      <a
+        href="javascript:void(0);"
+        class="a-link link-oneLind"
+        @click="openExportItemColumnsDialog"
+      >
+        <span>{{
+          optionModel.exportItemColumns && optionModel.exportItemColumns.length
+            ? "已维护"
+            : null
+        }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </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="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>
+    <tableColumnDialog
+      v-if="columnDialogMounted"
+      :visiable.sync="dialogVisible"
+      :designer="designer"
+      :selectedWidget="selectedWidget"
+      :optionModel="optionModel"
+    />
+    <exportItemColumnsDialog
+      v-if="showExportItemColumnsDialog"
+      :visiable.sync="showExportItemColumnsDialog"
+      :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";
+
+import exportItemColumnsDialog from "./exportItemColumns-dialog.vue";
+
+export default {
+  name: "data-table-editor",
+  componentName: "PropertyEditor",
+  mixins: [i18n, eventMixin],
+  components: {
+    Draggable,
+    requestaccessDialog,
+    // conditionEditor,
+    tableColumnDialog,
+    exportItemColumnsDialog,
+  },
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  inject: [
+    "getReportTemplate",
+    "showEventCollapse",
+    "openWidgetPropertyDialog",
+  ],
+  data: function () {
+    return {
+      showTableConfigDialog: false,
+      tableConfigCode: null,
+      dialogVisible: !1,
+      columnDialogMounted: !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"],
+      defaultEventParams: ["dataId", "formCode"],
+      showExportItemColumnsDialog: false,
+    };
+  },
+  computed: {
+    dataSourceList: function () {
+      return this.designer.formConfig && this.designer.formConfig.dataSources
+        ? this.designer.formConfig.dataSources
+        : [];
+    },
+    reportTemplate: function () {
+      return this.getReportTemplate();
+    },
+    isQueryAllPage: {
+      get() {
+        return !this.optionModel.isNotQueryAllPage;
+      },
+      set(val) {
+        this.optionModel.isNotQueryAllPage = !val;
+      },
+    },
+    isShowQueryButton: {
+      get() {
+        return !this.optionModel.isNotShowQueryButton;
+      },
+      set(val) {
+        this.optionModel.isNotShowQueryButton = !val;
+      },
+    },
+    dynamicSchemaConvertDisplay() {
+      return this.optionModel.dynamicSchemaConvert || "";
+    },
+  },
+  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 () {
+    const preloadColumnDialog = () => {
+      this.columnDialogMounted = true;
+    };
+    if (typeof requestIdleCallback === "function") {
+      requestIdleCallback(preloadColumnDialog, { timeout: 200 });
+    } else {
+      this.$nextTick(preloadColumnDialog);
+    }
+  },
+  methods: {
+    editDynamicSchemaConvert() {
+      this.editEventHandler("dynamicSchemaConvert", ["res"]);
+    },
+    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 () {
+      if (!this.columnDialogMounted) {
+        this.columnDialogMounted = true;
+      }
+      this.dialogVisible = true;
+    },
+    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) {
+      row.widget = this.designer.createColumnWidget(row, false) || null;
+      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;
+      }
+    },
+    confirmFormatConfigDialog(columnSelectedWidget) {
+      const options = columnSelectedWidget.options;
+      let row = this.optionModel.tableColumns[this.operateIndex];
+      row.widget = columnSelectedWidget;
+      row.prop = options.name;
+      row.label = options.label;
+      row.required = options.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 });
+    },
+    openExportItemColumnsDialog() {
+      this.showExportItemColumnsDialog = true;
+    },
+  },
+};
+</script>
+
+<style>
+.icon-drag:before {
+  content: "\e61d";
+}
+</style>
+
+<style scoped>
+.data-table-editor-subsection {
+  margin: 0 0 4px 8px;
+  padding-left: 12px;
+  border-left: 2px solid #ebeef5;
+}
+
+.form-section-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+  line-height: 22px;
+  margin-bottom: 8px;
+}
+
+.label-tip-icon {
+  margin-left: 4px;
+  color: #909399;
+  cursor: pointer;
+  font-size: 14px;
+  vertical-align: middle;
+}
+
+.field-tip-content {
+  line-height: 1.4;
+  max-width: 320px;
+}
+
+.dynamic-column-hint {
+  font-size: 12px;
+  color: #606266;
+  line-height: 1.5;
+  margin: 0 0 12px;
+  padding: 8px 10px;
+  background: #f4f4f5;
+  border-radius: 4px;
+}
+
+.dynamic-column-block {
+  margin-bottom: 12px;
+}
+
+.dynamic-column-block .data-table-editor-subsection {
+  margin-top: 0;
+}
+</style>