cloud-web-corejs 1.0.54-dev.67 → 1.0.54-dev.671

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

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