cloud-web-corejs-haier 1.0.42 → 1.0.44

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

@@ -1,20 +1,27 @@
 <template>
   <el-dialog
-    custom-class="dialog-style list-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="!0"
+    :destroy-on-close="false"
     top="5vh"
     width="1220px"
     v-dialog-drag
     :before-close="closeHandle"
   >
-    <div class="cont">
+    <div
+      class="cont table-column-dialog-cont"
+      v-loading="!tableReady"
+      element-loading-background="rgba(0, 0, 0, 0)"
+      element-loading-text="数据正在加载中"
+      element-loading-spinner="el-icon-loading"
+    >
       <el-table
+        v-if="tableReady"
         ref="singleTable"
         width="100%"
         :data="tableData"
@@ -23,11 +30,7 @@
         row-key="columnId"
         stripe=""
         :tree-props="{ children: 'children' }"
-        default-expand-all
-        v-loading="pictLoading"
-        element-loading-background="rgba(0, 0, 0, 0)"
-        element-loading-text="数据正在加载中"
-        element-loading-spinner="el-icon-loading"
+        :default-expand-all="shouldExpandAllTable"
       >
         <el-table-column label="" width="80" fixed="left">
           <template #default="scope">
@@ -104,7 +107,9 @@
               @change="changeFormatS(scope.row, false)"
               clearable
             >
-              <el-option-group :label="i18nt('designer.setting.customRenderGroup')">
+              <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">
@@ -128,7 +133,8 @@
               @click="openFormatConfigDialog(scope.row, scope.$index)"
               :disabled="
                 !columnFormatMap[scope.row.formatS] &&
-                'widgetRender' !== scope.row.formatS
+                'widgetRender' !== scope.row.formatS &&
+                'editTreeButtonGroup' !== scope.row.formatS
               "
             ></el-button>
           </template>
@@ -172,7 +178,20 @@
             <el-switch v-model="scope.row.filterable"></el-switch>
           </template>
         </el-table-column>
-        <el-table-column label="编辑更多属性" width="100" align="center" fixed="right">
+        <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"
@@ -258,6 +277,12 @@
         :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">
@@ -286,7 +311,11 @@
       top="7vh"
       :append-to-body="true"
     >
-      <el-alert type="info" :closable="!1" title="function customRender(params,h) {" />
+      <el-alert
+        type="info"
+        :closable="!1"
+        title="function customRender(params,h) {"
+      />
       <code-editor
         ref="dsResultEditor"
         mode="javascript"
@@ -406,7 +435,7 @@
     </el-dialog>
 
     <el-dialog
-      custom-class="dialog-style list-dialog"
+      custom-class="dialog-style list-dialog table-column-row-edit-dialog"
       :title="i18nt('designer.setting.tableColEdit')"
       :visible.sync="showRowEditDialog"
       v-if="showRowEditDialog"
@@ -415,11 +444,13 @@
       :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="409px"
+      width="480px"
       v-dialog-drag
     >
-      <div class="cont">
+      <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
@@ -455,7 +486,9 @@
               @change="changeFormatS(rowData, false)"
               clearable
             >
-              <el-option-group :label="i18nt('designer.setting.customRenderGroup')">
+              <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">
@@ -476,7 +509,9 @@
               icon="el-icon-edit"
               @click="openFormatConfigDialog(rowData, rowDataIndex)"
               :disabled="
-                !columnFormatMap[rowData.formatS] && 'widgetRender' !== rowData.formatS
+                !columnFormatMap[rowData.formatS] &&
+                'widgetRender' !== rowData.formatS &&
+                'editTreeButtonGroup' !== rowData.formatS
               "
             ></el-button>
           </el-form-item>
@@ -490,9 +525,25 @@
               @click="showRenderDialog(rowData)"
             ></el-button>
           </el-form-item>
+          <el-form-item
+            v-if="isUtcTransformColumn(rowData)"
+            label="UTC时差转换"
+          >
+            <el-switch v-model="rowData.utcTransformEnabled"></el-switch>
+          </el-form-item>
           <el-form-item :label="i18nt('designer.setting.visibleColumn')">
             <el-switch v-model="rowData.show"></el-switch>
           </el-form-item>
+          <el-form-item label="动态显示脚本">
+            <a
+              href="javascript:void(0);"
+              class="a-link link-oneLind"
+              @click="openColumnShowDialog(rowData)"
+            >
+              <span>{{ rowData.columnShow }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
           <el-form-item :label="i18nt('designer.setting.sortableColumn')">
             <el-switch v-model="rowData.sortable"></el-switch>
           </el-form-item>
@@ -559,7 +610,9 @@
               plain=""
               round=""
               icon="el-icon-edit"
-              @click="editFormEventHandler(rowData, rowDataIndex, 'footerMethodConfg')"
+              @click="
+                editFormEventHandler(rowData, rowDataIndex, 'footerMethodConfg')
+              "
               :disabled="rowData.footerDataType !== '3'"
             ></el-button>
           </el-form-item>
@@ -572,10 +625,84 @@
               <el-option value="#ea5353" label="红"></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label-width="0" class="form-item-full">
+            <el-divider class="custom-divider">{{
+              i18nt("designer.setting.customLabelIcon")
+            }}</el-divider>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelIconClass')">
+            <icon-picker v-model="rowData.labelIconClass"></icon-picker>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelIconPosition')">
+            <el-select
+              v-model="rowData.labelIconPosition"
+              clearable
+              placeholder="默认后面"
+            >
+              <el-option label="前面" value="front"></el-option>
+              <el-option label="后面" value="rear"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            :label="i18nt('designer.setting.labelTooltip')"
+            class="form-item-full"
+          >
+            <a
+              href="javascript:void(0);"
+              class="a-link link-oneLind"
+              @click="openLabelTooltipDialog"
+            >
+              <span>{{ rowData.labelTooltip }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
         </el-form>
       </div>
+      <el-dialog
+        v-if="labelTooltipDialogVisible"
+        custom-class="dialog-style"
+        :title="i18nt('designer.setting.labelTooltip')"
+        :visible.sync="labelTooltipDialogVisible"
+        :show-close="true"
+        :append-to-body="true"
+        :modal="false"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :destroy-on-close="true"
+        width="520px"
+        v-dialog-drag
+      >
+        <el-input
+          type="textarea"
+          :rows="14"
+          class="label-tooltip-textarea"
+          v-model="labelTooltipValue"
+          clearable
+        ></el-input>
+        <div class="dialog-footer" slot="footer">
+          <el-button
+            @click="labelTooltipDialogVisible = false"
+            class="button-sty"
+            icon="el-icon-close"
+          >
+            {{ i18nt("designer.hint.cancel") }}
+          </el-button>
+          <el-button
+            type="primary"
+            @click="submitLabelTooltipDialog"
+            class="button-sty"
+            icon="el-icon-check"
+          >
+            {{ i18nt("designer.hint.confirm") }}
+          </el-button>
+        </div>
+      </el-dialog>
       <div class="dialog-footer" slot="footer">
-        <el-button @click="closeRowEditDialog" class="button-sty" icon="el-icon-close">
+        <el-button
+          @click="closeRowEditDialog"
+          class="button-sty"
+          icon="el-icon-close"
+        >
           {{ i18nt("designer.hint.cancel") }}
         </el-button>
         <el-button
@@ -600,6 +727,8 @@ import {
   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 = [
   {
@@ -627,18 +756,27 @@ export default {
     designer: Object,
     selectedWidget: Object,
     optionModel: Object,
+    visiable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    columnRenderDialog,
+    editTreeButtonGroupConfigDialog,
+    IconPicker,
   },
-  components: { columnRenderDialog },
   inject: ["openWidgetPropertyDialog"],
   data() {
     return {
-      pictLoading: true,
+      tableReady: false,
       tableColumnConfigTitle: null,
       showTableColumnConfigDialog: false,
       tableColumnConfigHeader: null,
       tableColumnConfigCode: null,
-      showDialog: true,
-      dialogVisible: true,
+      showEditTreeButtonGroupConfigDialog: false,
+      currentEditTreeButtonGroupRow: null,
+      editTreeButtonGroupRowData: null,
       alignOptions: [
         {
           value: "left",
@@ -671,6 +809,14 @@ export default {
               value: "editDate",
               label: "日期输入框",
             },
+            {
+              value: "textarea",
+              label: "多行文本输入框",
+            },
+            {
+              value: "editScriptInput",
+              label: "脚本输入框",
+            },
             {
               value: "editSelect",
               label: "下拉框",
@@ -699,6 +845,23 @@ export default {
               value: "text",
               label: "文本",
             },
+            {
+              value: "aText",
+              label: "超链接文本",
+            },
+            {
+              value: "widgetRender",
+              label: "自定义组件",
+            },
+          ],
+        },
+        {
+          label: "按钮控件",
+          options: [
+            {
+              value: "dropdown",
+              label: "下拉按钮",
+            },
             {
               value: "editDelete",
               label: "删除按钮",
@@ -707,10 +870,6 @@ export default {
               value: "editButton",
               label: "查看按钮",
             },
-            {
-              value: "aText",
-              label: "超链接文本",
-            },
             {
               value: "aLink",
               label: "超链接按钮",
@@ -723,10 +882,6 @@ export default {
               value: "editTreeButtonGroup",
               label: "编辑行按钮组",
             },
-            {
-              value: "widgetRender",
-              label: "自定义组件",
-            },
           ],
         },
         {
@@ -760,7 +915,7 @@ export default {
           options: businessOptions,
         },
         {
-          label: "Date Format",
+          label: "日期格式化",
           options: [
             {
               value: "d1",
@@ -785,7 +940,7 @@ export default {
           ],
         },
         {
-          label: "Number Format",
+          label: "数字格式化",
           options: [
             {
               value: "n1",
@@ -863,6 +1018,7 @@ export default {
 
       eventParamsMap: {
         footerMethodConfg: "footerMethodConfg(dataId,formCode,param) {",
+        columnShow: "columnShow(dataId,formCode,columnConfig) {",
       },
 
       showColumnRenderDialog: false,
@@ -871,16 +1027,163 @@ export default {
       rowData: null,
       rowDataIndex: 0,
       showRowEditDialog: false,
+      labelTooltipDialogVisible: false,
+      labelTooltipValue: "",
+      sourceTableColumnsSnapshot: null,
     };
   },
   beforeDestroy() {
     if (this.dragSort) this.dragSort.destroy();
   },
+  computed: {
+    showDialog: {
+      get() {
+        return this.visiable;
+      },
+      set(val) {
+        this.$emit("update:visiable", val);
+      },
+    },
+    shouldExpandAllTable() {
+      return this.countTreeRows(this.tableData) <= 30;
+    },
+  },
+  watch: {
+    visiable(val) {
+      if (val) {
+        this.onDialogOpen();
+      } else {
+        this.onDialogClose();
+      }
+    },
+  },
   created() {},
   mounted() {
-    this.init();
+    if (this.visiable) {
+      this.onDialogOpen();
+    }
   },
   methods: {
+    countTreeRows(rows) {
+      if (!Array.isArray(rows) || !rows.length) {
+        return 0;
+      }
+      let count = 0;
+      const walk = (list) => {
+        list.forEach((item) => {
+          count += 1;
+          if (item.children && item.children.length) {
+            walk(item.children);
+          }
+        });
+      };
+      walk(rows);
+      return count;
+    },
+    cloneTableColumnsForEdit(columns) {
+      if (!Array.isArray(columns)) {
+        return [];
+      }
+      const refKeys = ["widget", "editWidget", "widgetList"];
+      const cloneRow = (row) => {
+        if (!row || typeof row !== "object") {
+          return row;
+        }
+        const cloned = {};
+        Object.keys(row).forEach((key) => {
+          const val = row[key];
+          if (key === "children" && Array.isArray(val) && val.length) {
+            cloned.children = val.map(cloneRow);
+            return;
+          }
+          if (refKeys.includes(key)) {
+            cloned[key] = val;
+            return;
+          }
+          if (key === "columnOption") {
+            if (!row.widget) {
+              cloned.columnOption =
+                val !== null && typeof val === "object" ? deepClone(val) : val;
+            }
+            return;
+          }
+          if (key === "editColumnOption") {
+            if (!row.editWidget) {
+              cloned.editColumnOption =
+                val !== null && typeof val === "object" ? deepClone(val) : val;
+            }
+            return;
+          }
+          if (val !== null && typeof val === "object") {
+            try {
+              cloned[key] = deepClone(val);
+            } catch (e) {
+              cloned[key] = val;
+            }
+            return;
+          }
+          cloned[key] = val;
+        });
+        if (row.widget && !cloned.widget) {
+          cloned.widget = row.widget;
+        }
+        if (row.editWidget && !cloned.editWidget) {
+          cloned.editWidget = row.editWidget;
+        }
+        return cloned;
+      };
+      return columns.map(cloneRow);
+    },
+    buildColumnWidgetMap(columns, map = {}) {
+      if (!Array.isArray(columns)) {
+        return map;
+      }
+      columns.forEach((col) => {
+        if (col && col.columnId) {
+          map[col.columnId] = col;
+        }
+        if (col.children && col.children.length) {
+          this.buildColumnWidgetMap(col.children, map);
+        }
+      });
+      return map;
+    },
+    restoreColumnWidgetRefs(columns, widgetMap) {
+      if (!Array.isArray(columns)) {
+        return [];
+      }
+      return columns.map((row) => {
+        const next = Object.assign({}, row);
+        const orig = widgetMap[next.columnId];
+        if (orig) {
+          // 仅 formatS 未变更时补回 widget，避免清空 formatS 后又被快照还原
+          const formatUnchanged = next.formatS === orig.formatS;
+          const editFormatUnchanged = next.editFormatS === orig.editFormatS;
+          if (formatUnchanged && !next.widget && orig.widget) {
+            next.widget = orig.widget;
+          }
+          if (editFormatUnchanged && !next.editWidget && orig.editWidget) {
+            next.editWidget = orig.editWidget;
+          }
+          if (
+            formatUnchanged &&
+            next.formatS === "widgetRender" &&
+            (!next.widgetList || !next.widgetList.length) &&
+            orig.widgetList &&
+            orig.widgetList.length
+          ) {
+            next.widgetList = orig.widgetList;
+          }
+        }
+        if (next.children && next.children.length) {
+          next.children = this.restoreColumnWidgetRefs(
+            next.children,
+            widgetMap
+          );
+        }
+        return next;
+      });
+    },
     editFormEventHandler(row, index, eventName) {
       this.curEventRow = row;
       this.curEventName = eventName;
@@ -900,31 +1203,61 @@ export default {
         });
 
         if (syntaxErrorFlag) {
-          this.$message.error(this.i18nt("designer.setting.syntaxCheckWarning"));
+          this.$message.error(
+            this.i18nt("designer.setting.syntaxCheckWarning")
+          );
           return;
         }
       }
       this.curEventRow[this.curEventName] = this.formEventHandlerCode;
       this.showFormEventDialogFlag = false;
     },
-    init() {
-      setTimeout(() => {
-        this.tableData = this.$baseLodash.cloneDeep(this.optionModel.tableColumns);
-        this.$nextTick(() => {
-          this.rowDrop();
-          setTimeout(() => {
-            this.pictLoading = false;
-          }, 200);
-        });
-      }, 10);
-
-      /*this.$nextTick(() => {
-        this.rowDrop();
-      });*/
+    onDialogClose() {
+      this.tableReady = false;
+      this.sourceTableColumnsSnapshot = null;
+      if (this.dragSort) {
+        this.dragSort.destroy();
+        this.dragSort = null;
+      }
+    },
+    onDialogOpen() {
+      this.tableReady = false;
+      if (this.dragSort) {
+        this.dragSort.destroy();
+        this.dragSort = null;
+      }
+      this.$nextTick(() => {
+        const load = () => {
+          this.loadTableData();
+          this.tableReady = true;
+          this.$nextTick(() => {
+            requestAnimationFrame(() => {
+              this.rowDrop();
+            });
+          });
+        };
+        if (typeof requestIdleCallback === "function") {
+          requestIdleCallback(load, { timeout: 80 });
+        } else {
+          setTimeout(load, 0);
+        }
+      });
+    },
+    loadTableData() {
+      const source = this.optionModel.tableColumns || [];
+      this.sourceTableColumnsSnapshot = source;
+      this.tableData = this.cloneTableColumnsForEdit(source);
     },
     colSubmit() {
       this.dialogVisible = !1;
-      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) {
@@ -1009,7 +1342,8 @@ export default {
       let newRow = this.generateRow(generateParentId);
       if (children) {
         if (type === "SIBLING") {
-          let addIndex = children.findIndex((item) => item.columnId == row.columnId) + 1;
+          let addIndex =
+            children.findIndex((item) => item.columnId == row.columnId) + 1;
           children.splice(addIndex, 0, newRow);
         } else {
           children.push(newRow);
@@ -1021,6 +1355,9 @@ export default {
     getUuid() {
       return new Date().getTime();
     },
+    createRowAuthName(type) {
+      return `row${type}` + generateId();
+    },
     /**
      * 生成一行数据
      */
@@ -1044,10 +1381,35 @@ export default {
         footerMethodConfg: null,
         widgetList: [],
         labelColor: null,
+        rowAddAuthName: this.createRowAuthName("Add"),
+        rowEditAuthName: this.createRowAuthName("Edit"),
+        rowAddShow: null,
+        rowEditShow: null,
+        columnShow: null,
+        utcTransformEnabled: false,
+        labelIconClass: null,
+        labelIconPosition: "rear",
+        labelTooltip: null,
         // treeNode: false,
       };
       return row;
     },
+    isUtcTransformColumn(row) {
+      const formatS = row.formatS;
+      if (!formatS) {
+        return true;
+      }
+      return [
+        "d1",
+        "d2",
+        "d3",
+        "d4",
+        "d5",
+        "render",
+        "create_date",
+        "modify_date",
+      ].includes(formatS);
+    },
     // 添加根节点
     onAddRoot() {
       this.tableData.push(this.generateRow());
@@ -1057,7 +1419,9 @@ export default {
       const { parentId, columnId } = row;
       // 根节点直接删除
       if (!parentId) {
-        const delIndex = this.tableData.findIndex((item) => item.columnId === columnId);
+        const delIndex = this.tableData.findIndex(
+          (item) => item.columnId === columnId
+        );
         this.tableData.splice(delIndex, 1);
       } else {
         // 找到父节点，通过父节点删除
@@ -1076,7 +1440,9 @@ export default {
 
         const { children } = parentRow;
 
-        const delIndex = children.findIndex((item) => item.columnId === columnId);
+        const delIndex = children.findIndex(
+          (item) => item.columnId === columnId
+        );
 
         children.splice(delIndex, 1);
       }
@@ -1140,7 +1506,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;
@@ -1224,7 +1592,10 @@ 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;
     },
@@ -1232,31 +1603,24 @@ export default {
     changeFormatS(row, isEdit) {
       let formatS = isEdit ? row.editFormatS : row.formatS;
       let isButtontCell = this.getIsButtontCell(formatS);
-      // let columnWidgetConfig = this.getColumnWidgetConfig(row, true, isEdit);
-      // let { columnSelectedWidget, columnEditFields } = columnWidgetConfig;
       let attachmentPrefix = this.designer.getAttachmentPrefix();
       let columnSelectedWidget = this.designer.createColumnWidget(row, isEdit);
       if (!isEdit) {
-        //格式化类型
         if (columnSelectedWidget) {
-          row.columnOption = columnSelectedWidget.options;
           row.widget = columnSelectedWidget;
         } else {
-          row.columnOption = {};
           row.widget = null;
         }
+        row.utcTransformEnabled = false;
       } else {
         if (row.prop && row.prop.startsWith(attachmentPrefix)) {
           let suffix = row.prop.replace(attachmentPrefix, "");
           columnSelectedWidget.options.keyName = row.prop;
           columnSelectedWidget.options.keyNameSuffix = suffix;
         }
-        //编辑插槽类型
         if (columnSelectedWidget) {
-          row.columnOption = columnSelectedWidget.options;
           row.editWidget = columnSelectedWidget;
         } else {
-          row.editColumnOption = {};
           row.editWidget = null;
         }
       }
@@ -1267,8 +1631,11 @@ export default {
           row.label = null;
           row.sortable = false;
           row.width = 150;
+          row.widget = null;
         } else if (isButtontCell) {
-          if (row.formatS == "aLink" || row.formatS == "button") {
+          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;
@@ -1276,6 +1643,7 @@ export default {
           row.prop = null;
           row.label = null;
           row.sortable = false;
+          row.filterable = false;
         } else {
           let tmpId = "column" + generateId();
           if (!row.width || row.width == 47) row.width = 150;
@@ -1283,7 +1651,9 @@ export default {
           if (!row.label) row.label = tmpId;
 
           if (this.userFields.includes(row.formatS)) {
-            let item = this.businessOptions.find((item) => item.value == row.formatS);
+            let item = this.businessOptions.find(
+              (item) => item.value == row.formatS
+            );
             if (item) {
               row.prop = item.value;
               row.label = item.label;
@@ -1310,92 +1680,79 @@ export default {
       let type = this.columnFormatMap[formatS];
 
       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;
-        /*if (isEdit) {
-          columnSelectedWidget.id = "edit_" + row.columnId;
-        } else {
-          columnSelectedWidget.id = row.columnId;
-        }*/
-        // columnSelectedWidget.id = row.columnId;
-        let columnOption;
-        if (!isEdit) {
-          columnOption = row.columnOption;
-        } else {
-          columnOption = row.editColumnOption;
-        }
-        if (!isChange && columnOption && Object.keys(columnOption).length) {
-          columnOption.required = row.required || false;
-          columnSelectedWidget.options = columnOption;
-          if ("editDelete" == formatS) {
-            columnSelectedWidget.options.hiddenByWf =
-              columnSelectedWidget.options.hiddenByWf ?? true;
-            columnSelectedWidget.options.prefixIcon =
-              columnSelectedWidget.options.prefixIcon || "el-icon-delete";
-          } else if ("editButton" == formatS) {
-            columnSelectedWidget.options.prefixIcon =
-              columnSelectedWidget.options.prefixIcon || "el-icon-edit";
-          }
-        } else {
-          columnSelectedWidget.options.required = row.required || false;
-
+        const applyNewWidgetDefaults = (widget) => {
+          widget.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 =
+            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) {
-            columnSelectedWidget.options.prefixIcon = "el-icon-edit";
-            columnSelectedWidget.options.label = "查看";
-            columnSelectedWidget.options.labelHidden = true;
-            columnSelectedWidget.options.onClick =
+            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) {
-            columnSelectedWidget.options.prefixIcon = "el-icon-plus";
-            columnSelectedWidget.options.label = "新增兄弟节点";
-            columnSelectedWidget.options.labelHidden = false;
-            columnSelectedWidget.options.onClick =
+            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) {
-            columnSelectedWidget.options.prefixIcon = "el-icon-plus";
-            columnSelectedWidget.options.label = "新增子节点";
-            columnSelectedWidget.options.labelHidden = false;
-            columnSelectedWidget.options.onClick =
+            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) {
-            // columnSelectedWidget.options.prefixIcon = "el-icon-plus";
-            columnSelectedWidget.options.label = "↑上移";
-            columnSelectedWidget.options.labelHidden = false;
-            columnSelectedWidget.options.onClick =
+            widget.options.label = "↑上移";
+            widget.options.labelHidden = false;
+            widget.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 =
+            widget.options.label = "↓下移";
+            widget.options.labelHidden = false;
+            widget.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 =
+            widget.options.prefixIcon = "el-icon-delete";
+            widget.options.label = "删除";
+            widget.options.labelHidden = true;
+            widget.options.onClick =
               "let tableParam = this.tableParam;\nthis.getParentTarget().removeTreeRow(tableParam);";
           }
+        };
 
-          columnOption = columnSelectedWidget.options;
+        if (!isChange) {
+          const sourceWidget = this.designer.getColumnWidget(row, isEdit);
+          if (sourceWidget) {
+            columnSelectedWidget = this.$baseLodash.cloneDeep(sourceWidget);
+            columnSelectedWidget.options.required = row.required || false;
+            if ("editDelete" == formatS) {
+              columnSelectedWidget.options.hiddenByWf =
+                columnSelectedWidget.options.hiddenByWf ?? true;
+              columnSelectedWidget.options.prefixIcon =
+                columnSelectedWidget.options.prefixIcon || "el-icon-delete";
+            } else if ("editButton" == formatS) {
+              columnSelectedWidget.options.prefixIcon =
+                columnSelectedWidget.options.prefixIcon || "el-icon-edit";
+            }
+          } else {
+            columnSelectedWidget = this.designer.copyNewFieldWidget(
+              this.designer.getFieldWidgetByType(type)
+            );
+            applyNewWidgetDefaults(columnSelectedWidget);
+          }
+        } else {
+          columnSelectedWidget = this.designer.copyNewFieldWidget(
+            this.designer.getFieldWidgetByType(type)
+          );
+          applyNewWidgetDefaults(columnSelectedWidget);
         }
 
-        // columnSelectedWidget.options.name = isEdit? (type + row.columnId) : row.prop;
-        // columnSelectedWidget.options.name = type + row.columnId;
-        // columnSelectedWidget.options.name = row.prop;
         if (columnSelectedWidget.options.hasOwnProperty("keyName")) {
           columnSelectedWidget.options.keyName = row.prop;
           columnSelectedWidget.options.keyNameEnabled = true;
@@ -1414,14 +1771,15 @@ export default {
       let result = null;
       if (columnList) {
         let column = columnList.find((item) => item.columnId == columnId);
-        if (!column) {
-        }
         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);
+            let subColumn = this.findColumnByColumnId(
+              column.children,
+              children
+            );
             if (subColumn) {
               result = subColumn;
               break;
@@ -1440,10 +1798,29 @@ export default {
       }
       return widget;
     },
+    confirmEditTreeButtonGroupConfig(rowConfig) {
+      if (this.currentEditTreeButtonGroupRow) {
+        Object.assign(this.currentEditTreeButtonGroupRow, rowConfig);
+      }
+      this.currentEditTreeButtonGroupRow = null;
+      this.editTreeButtonGroupRowData = null;
+    },
     openFormatConfigDialog(row, index) {
+      if (row.formatS === "editTreeButtonGroup") {
+        this.currentEditTreeButtonGroupRow = row;
+        this.editTreeButtonGroupRowData = this.$baseLodash.cloneDeep(row);
+        this.showEditTreeButtonGroupConfigDialog = true;
+        return;
+      }
       if (row.formatS == "widgetRender") {
         let formWidgetList = deepClone(this.designer.widgetList);
-        let tableData = deepClone(this.tableData);
+        const widgetMap = this.buildColumnWidgetMap(
+          this.sourceTableColumnsSnapshot || this.optionModel.tableColumns || []
+        );
+        let tableData = this.restoreColumnWidgetRefs(
+          this.cloneTableColumnsForEdit(this.tableData),
+          widgetMap
+        );
         let columnId = row.columnId;
 
         let dataTableName = this.optionModel.name;
@@ -1452,7 +1829,10 @@ export default {
         loopHandleWidget(formWidgetList, (item) => {
           if (item.options.name == dataTableName) {
             item.options.tableColumns = tableData;
-            targetColumn = this.findColumnByColumnId(item.options.tableColumns, columnId);
+            targetColumn = this.findColumnByColumnId(
+              item.options.tableColumns,
+              columnId
+            );
           }
         });
         let getWidgetList = (subWidgetList = []) => {
@@ -1470,32 +1850,24 @@ export default {
         return;
       }
 
-      /*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 = {};
+      const { columnSelectedWidget, columnEditFields } =
+        this.getColumnWidgetConfig(row);
+      if (!columnSelectedWidget) {
+        this.$message.warning(this.$t1("请先选择列格式化类型"));
+        return;
       }
-
-      let columnOption = this.$baseLodash.cloneDeep(option);
-      row.columnOption = columnOption;*/
-      let selectedWidget = row.widget;
+      columnSelectedWidget.options = this.$baseLodash.cloneDeep(
+        columnSelectedWidget.options
+      );
       this.operateIndex = index;
-
-      let tableColumns = this.tableData;
       this.openWidgetPropertyDialog({
         row: row,
-        columnSelectedWidget: selectedWidget,
-        tableColumns,
+        columnSelectedWidget,
+        tableColumns: this.tableData,
         index: index,
-        // columnEditFields: columnEditFields,
-        callback: (columnOption) => {
-          this.confirmFormatConfigDialog(columnOption, row);
+        columnEditFields,
+        callback: (confirmedWidget) => {
+          this.confirmFormatConfigDialog(confirmedWidget, row);
         },
       });
     },
@@ -1503,61 +1875,44 @@ export default {
       let o = options.name;
       return (options.keyNameEnabled && options.keyName) || o;
     },
-    confirmFormatConfigDialog(columnOption, row) {
-      // let row = this.tableData[this.operateIndex];
-      row.columnOption = columnOption;
-
-      if (row.widget) {
-        row.widget.options = columnOption;
-      } else {
-        let type = this.columnFormatMap[row.formatS];
-        let fieldWidget = this.designer.createColumnWidget(row, false);
-        fieldWidget.options = columnOption;
-        row.widget = fieldWidget;
-        this.$forceUpdate();
-      }
+    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 selectedWidget = row.editWidget;
+      const { columnSelectedWidget, columnEditFields } =
+        this.getColumnWidgetConfig(row, false, true);
+      if (!columnSelectedWidget) {
+        this.$message.warning(this.$t1("请先选择编辑列格式化类型"));
+        return;
+      }
+      columnSelectedWidget.options = this.$baseLodash.cloneDeep(
+        columnSelectedWidget.options
+      );
       this.operateIndex = index;
-
-      let tableColumns = this.tableData;
       this.openWidgetPropertyDialog({
         row: row,
-        tableColumns,
-        columnSelectedWidget: selectedWidget,
+        tableColumns: this.tableData,
+        columnSelectedWidget,
         index: index,
-        // columnEditFields: columnEditFields,
-        callback: (columnOption) => {
-          this.confirmEditFormatConfigDialog(columnOption, row);
+        columnEditFields,
+        callback: (confirmedWidget) => {
+          this.confirmEditFormatConfigDialog(confirmedWidget, row);
         },
       });
     },
-    confirmEditFormatConfigDialog(columnOption, row) {
-      // let row = this.tableData[this.operateIndex];
-      row.editColumnOption = columnOption;
-      // row.editWidget.options = columnOption;
-
-      if (row.editWidget) {
-        row.editWidget.options = columnOption;
-      } else {
-        let type = this.columnFormatMap[row.editFormatS];
-        let fieldWidget = this.designer.createColumnWidget(row, true);
-        fieldWidget.options = columnOption;
-        row.editWidget = fieldWidget;
-        this.$forceUpdate();
-      }
-
-      /*row.prop = columnOption.name;
-      row.label = columnOption.label;
-      row.required = columnOption.required;*/
+    confirmEditFormatConfigDialog(columnSelectedWidget, row) {
+      row.editWidget = columnSelectedWidget;
+    },
+    openColumnShowDialog(row) {
+      this.editFormEventHandler(row, this.rowDataIndex, "columnShow");
     },
     openTableColumnConfigDialog(row, index) {
       this.operateIndex = index;
@@ -1575,7 +1930,6 @@ export default {
       this.showTableColumnConfigDialog = true;
     },
     saveTableColumnConfigDialog() {
-      // let row = this.tableData[this.operateIndex];
       let row = this.currentTableColumn;
       const codeHints = this.$refs.ecEditor.getEditorAnnotations();
       let syntaxErrorFlag = false;
@@ -1587,7 +1941,9 @@ export default {
         });
 
         if (syntaxErrorFlag) {
-          this.$message.error(this.i18nt("designer.setting.syntaxCheckWarning"));
+          this.$message.error(
+            this.i18nt("designer.setting.syntaxCheckWarning")
+          );
           return;
         }
       }
@@ -1611,45 +1967,61 @@ export default {
       let type1 = this.columnFormatMap[row.formatS];
       let type2 = this.columnFormatMap[row.editFormatS];
       let newWidget = type1
-        ? this.designer.copyNewFieldWidget(this.designer.getFieldWidgetByType(type1))
+        ? this.designer.copyNewFieldWidget(
+            this.designer.getFieldWidgetByType(type1)
+          )
         : null;
 
       let newEditWidget = type2
-        ? this.designer.copyNewFieldWidget(this.designer.getFieldWidgetByType(type2))
+        ? this.designer.copyNewFieldWidget(
+            this.designer.getFieldWidgetByType(type2)
+          )
         : null;
 
-      if (newWidget.formItemFlag) {
-        if (row.widget) {
-          if (row.widget.options[key] !== undefined) row.widget.options[key] = value;
-        }
-        if (row.columnOption) {
-          if (row.columnOption[key] !== undefined) row.columnOption[key] = value;
+      if (newWidget && newWidget.formItemFlag && row.widget) {
+        if (row.widget.options[key] !== undefined) {
+          row.widget.options[key] = value;
         }
       }
 
-      if (newWidget.formItemFlag) {
-        if (row.editWidget) {
-          if (row.editWidget.options[key] !== undefined)
-            row.editWidget.options[key] = value;
-        }
-        if (row.editColumnOption) {
-          if (row.editColumnOption[key] !== undefined) row.editColumnOption[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.$baseLodash.cloneDeep(row);
+      this.rowData = this.cloneTableColumnsForEdit([row])[0];
       this.rowDataIndex = index;
       this.showRowEditDialog = true;
     },
     submitRowEditDialog() {
-      Object.assign(this.editRowData, this.$baseLodash.cloneDeep(this.rowData));
-      // this.editRowData = this.$baseLodash.cloneDeep(this.rowData);
+      Object.assign(this.editRowData, this.rowData);
+      if (this.rowData.widget) {
+        this.editRowData.widget = this.rowData.widget;
+      }
+      if (this.rowData.editWidget) {
+        this.editRowData.editWidget = this.rowData.editWidget;
+      }
+      if (this.rowData.widgetList && this.rowData.widgetList.length) {
+        this.editRowData.widgetList = this.rowData.widgetList;
+      }
       this.showRowEditDialog = false;
+      this.labelTooltipDialogVisible = false;
     },
     closeRowEditDialog() {
       this.showRowEditDialog = false;
+      this.labelTooltipDialogVisible = false;
+    },
+    openLabelTooltipDialog() {
+      this.labelTooltipValue = this.rowData.labelTooltip || "";
+      this.labelTooltipDialogVisible = true;
+    },
+    submitLabelTooltipDialog() {
+      const value = (this.labelTooltipValue || "").trim();
+      this.rowData.labelTooltip = value || null;
+      this.labelTooltipDialogVisible = false;
     },
   },
 };
@@ -1658,4 +2030,70 @@ export default {
 .icon-drag:before {
   content: "\e61d";
 }
+
+/* 固定弹框内容区高度，避免加载前后抖动 */
+::v-deep .table-column-config-dialog.el-dialog {
+  .el-dialog__body {
+    height: 532px;
+    max-height: 532px;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+}
+
+.table-column-dialog-cont {
+  height: 516px;
+  min-height: 516px;
+  max-height: 516px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+/* 完整列配置弹框：挂到 body，内容区可滚动 */
+::v-deep .table-column-row-edit-dialog.el-dialog {
+  .el-dialog__body {
+    max-height: calc(90vh - 130px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-sizing: border-box;
+
+    .cont.table-column-row-edit-cont {
+      overflow: visible;
+      max-height: none;
+      padding-bottom: 12px;
+    }
+
+    .form-m2 {
+      height: auto !important;
+      overflow: visible !important;
+
+      .el-form-item.form-item-full:last-child {
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
+
+.table-column-row-edit-cont {
+  box-sizing: border-box;
+
+  ::v-deep .form-m2 {
+    .form-item-full {
+      width: calc(100% - 20px) !important;
+      display: block;
+    }
+
+    .form-item-full .el-input {
+      width: 100% !important;
+    }
+  }
+
+  ::v-deep .custom-divider.el-divider--horizontal {
+    margin: 10px 0;
+  }
+}
+
+::v-deep .label-tooltip-textarea textarea {
+  min-height: 320px;
+}
 </style>