cloud-web-corejs 1.0.54-dev.647 → 1.0.54-dev.649

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.647",
+  "version": "1.0.54-dev.649",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

package/src/components/xform/form-designer/setting-panel/index.vue

@@ -140,78 +140,82 @@
     </el-dialog>
 
     <el-dialog
-      :title="i18nt('配置编辑')"
-      v-if="showDateConfigDialog"
-      :visible.sync="showDateConfigDialog"
+      v-for="dlg in widgetPropertyDialogs"
+      :key="dlg.id"
+      :title="dlg.title || i18nt('配置编辑')"
+      :visible.sync="dlg.visible"
       :modal="false"
       :show-close="!0"
       custom-class="dialog-style list-dialog"
       :close-on-click-modal="!1"
       :close-on-press-escape="!1"
       :destroy-on-close="!0"
+      append-to-body
       v-el-drag-dialog
       v-el-dialog-center
+      :before-close="(done) => handleWidgetPropertyDialogBeforeClose(dlg, done)"
+      @mousedown.native="setActivePropertyDialog(dlg.id)"
     >
       <div class="cont" style="height: auto;max-height: 500px;">
         <el-scrollbar class="setting-scrollbar">
-          <el-form :model="columnSelectedWidget.options" size="mini" label-position="left" label-width="120px" class="setting-form"
+          <el-form :model="dlg.columnSelectedWidget.options" size="mini" label-position="left" label-width="120px" class="setting-form"
                    @submit.native.prevent>
-            <el-collapse v-model="widgetActiveCollapseName1s" class="setting-collapse">
-              <el-collapse-item name="1" v-if="showCollapse1(commonProps)"
+            <el-collapse v-model="dlg.widgetActiveCollapseName1s" class="setting-collapse">
+              <el-collapse-item name="1" v-if="showCollapseForDialog(dlg, commonProps)"
                                 :title="i18nt('designer.setting.commonSetting')">
                 <template v-for="(editorName, propName) in commonProps">
                   <component
-                    v-if="hasPropEditor1(propName, editorName)"
-                    :is="getPropEditor1(propName, editorName)"
+                    v-if="hasPropEditorForDialog(dlg, propName, editorName)"
+                    :is="getPropEditorForDialog(dlg, propName, editorName)"
                     :designer="designer"
-                    :selected-widget="columnSelectedWidget"
-                    :option-model="columnSelectedWidget.options"
-                    :tableColumns="tableColumns"
-                    :key="propName"
+                    :selected-widget="dlg.columnSelectedWidget"
+                    :option-model="dlg.columnSelectedWidget.options"
+                    :tableColumns="dlg.tableColumns"
+                    :key="dlg.id + '-common-' + propName"
                   ></component>
                 </template>
               </el-collapse-item>
 
-              <el-collapse-item name="2" v-if="showCollapse1(advProps)"
+              <el-collapse-item name="2" v-if="showCollapseForDialog(dlg, advProps)"
                                 :title="i18nt('designer.setting.advancedSetting')">
                 <template v-for="(editorName, propName) in advProps">
                   <component
-                    v-if="hasPropEditor1(propName, editorName)"
-                    :is="getPropEditor1(propName, editorName)"
+                    v-if="hasPropEditorForDialog(dlg, propName, editorName)"
+                    :is="getPropEditorForDialog(dlg, propName, editorName)"
                     :designer="designer"
-                    :selected-widget="columnSelectedWidget"
-                    :option-model="columnSelectedWidget.options"
-                    :tableColumns="tableColumns"
-                    :key="propName"
+                    :selected-widget="dlg.columnSelectedWidget"
+                    :option-model="dlg.columnSelectedWidget.options"
+                    :tableColumns="dlg.tableColumns"
+                    :key="dlg.id + '-adv-' + propName"
                   ></component>
                 </template>
               </el-collapse-item>
-              <el-collapse-item name="4" v-if="showCollapse1(wfProps)"
+              <el-collapse-item name="4" v-if="showCollapseForDialog(dlg, wfProps)"
                                 :title="i18nt('流程属性')">
                 <template v-for="(editorName, propName) in wfProps">
                   <component
-                    v-if="hasPropEditor1(propName, editorName)"
-                    :is="getPropEditor1(propName, editorName)"
+                    v-if="hasPropEditorForDialog(dlg, propName, editorName)"
+                    :is="getPropEditorForDialog(dlg, propName, editorName)"
                     :designer="designer"
-                    :selected-widget="columnSelectedWidget"
-                    :option-model="columnSelectedWidget.options"
-                    :tableColumns="tableColumns"
-                    :key="propName"
+                    :selected-widget="dlg.columnSelectedWidget"
+                    :option-model="dlg.columnSelectedWidget.options"
+                    :tableColumns="dlg.tableColumns"
+                    :key="dlg.id + '-wf-' + propName"
                   ></component>
                 </template>
               </el-collapse-item>
 
-              <el-collapse-item name="3" v-if="showEventCollapse1() && showCollapse1(eventProps)"
+              <el-collapse-item name="3" v-if="showEventCollapse1() && showCollapseForDialog(dlg, eventProps)"
                                 :title="i18nt('designer.setting.eventSetting')">
                 <template v-for="(editorName, propName) in eventProps">
                   <component
-                    v-if="hasPropEditor1(propName, editorName)"
-                    :is="getPropEditor1(propName, editorName)"
+                    v-if="hasPropEditorForDialog(dlg, propName, editorName)"
+                    :is="getPropEditorForDialog(dlg, propName, editorName)"
                     :designer="designer"
-                    :selected-widget="columnSelectedWidget"
-                    :option-model="columnSelectedWidget.options"
-                    :tableColumns="tableColumns"
-                    :key="propName"
+                    :selected-widget="dlg.columnSelectedWidget"
+                    :option-model="dlg.columnSelectedWidget.options"
+                    :tableColumns="dlg.tableColumns"
+                    :key="dlg.id + '-event-' + propName"
                   ></component>
                 </template>
               </el-collapse-item>
@@ -220,10 +224,10 @@
         </el-scrollbar>
       </div>
       <div class="dialog-footer" slot="footer">
-        <el-button @click="showDateConfigDialog = !1" class="button-sty" icon="el-icon-close">
+        <el-button @click="closeWidgetPropertyDialog(dlg.id)" class="button-sty" icon="el-icon-close">
           {{ i18nt('designer.hint.cancel') }}
         </el-button>
-        <el-button type="primary" class="button-sty" @click="confirmWidgetPropertyDialog">
+        <el-button type="primary" class="button-sty" @click="confirmWidgetPropertyDialog(dlg)">
           {{ i18nt('designer.hint.confirm') }}
         </el-button>
       </div>
@@ -236,6 +240,7 @@ import PropertyEditors from './property-editor/index';
 import FormSetting from './form-setting';
 import dataSourceSetting from './dataSource-setting';
 import indexMixin from './indexMixin';
+import widgetPropertyDialogMixin from './widgetPropertyDialogMixin';
 
 export default {
   name: 'SettingPanel',
@@ -244,7 +249,7 @@ export default {
     dataSourceSetting,
     ...PropertyEditors
   },
-  mixins: [indexMixin],
+  mixins: [indexMixin, widgetPropertyDialogMixin],
 };
 </script>
 

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

@@ -136,10 +136,7 @@
       <el-divider class="custom-divider-margin-top">编辑表格设置</el-divider>
     </el-form-item>
     <el-form-item :label="i18nt('编辑表格')">
-      <el-switch
-        v-model="optionModel.isEditTable"
-        @change="onIsEditTableChange"
-      ></el-switch>
+      <el-switch v-model="optionModel.isEditTable"></el-switch>
     </el-form-item>
     <el-form-item :label="i18nt('树表格')">
       <el-switch v-model="optionModel.isTreeTable"></el-switch>
@@ -150,88 +147,6 @@
     <el-form-item :label="i18nt('排序脚本编码')" v-if="optionModel.isEditTable">
       <el-input v-model="optionModel.sortScriptCode"></el-input>
     </el-form-item>
-    <template v-if="optionModel.isEditTable">
-      <el-form-item
-        label-width="0"
-        v-if="!optionModel.rowAddAuthName || !optionModel.rowEditAuthName"
-      >
-        <el-button
-          type="text"
-          icon="el-icon-refresh-right"
-          class="add-option"
-          @click="createRandomRowAuthNames"
-        >
-          随机生成权限名称
-        </el-button>
-      </el-form-item>
-      <el-form-item label="行新增权限名称">
-        <el-input
-          v-model="optionModel.rowAddAuthName"
-          placeholder="留空则不校验权限"
-          clearable
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="行新增权限编码" v-if="rowAddAuthCode">
-        <div style="word-break: break-all">
-          <el-tooltip effect="light" content="复制">
-            <a
-              class="a-link"
-              style="color: unset"
-              @click="copyAuthCode(rowAddAuthCode, $event)"
-            >
-              <span
-                ><i class="el-icon-copy-document" style="margin-right: 2px"></i
-                >{{ rowAddAuthCode }}</span
-              >
-            </a>
-          </el-tooltip>
-        </div>
-      </el-form-item>
-      <el-form-item label="行编辑权限名称">
-        <el-input
-          v-model="optionModel.rowEditAuthName"
-          placeholder="留空则不校验权限"
-          clearable
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="行编辑权限编码" v-if="rowEditAuthCode">
-        <div style="word-break: break-all">
-          <el-tooltip effect="light" content="复制">
-            <a
-              class="a-link"
-              style="color: unset"
-              @click="copyAuthCode(rowEditAuthCode, $event)"
-            >
-              <span
-                ><i class="el-icon-copy-document" style="margin-right: 2px"></i
-                >{{ rowEditAuthCode }}</span
-              >
-            </a>
-          </el-tooltip>
-        </div>
-      </el-form-item>
-      <el-form-item label="行新增显示条件" label-width="150px">
-        <a
-          href="javascript:void(0);"
-          class="a-link link-oneLind"
-          @click="editEventHandler('rowAddShow', rowShowParams)"
-        >
-          <span>{{ optionModel.rowAddShow ? "已维护" : "" }}</span>
-          <i class="el-icon-edit"></i>
-        </a>
-      </el-form-item>
-      <el-form-item label="行编辑显示条件" label-width="150px">
-        <a
-          href="javascript:void(0);"
-          class="a-link link-oneLind"
-          @click="editEventHandler('rowEditShow', rowShowParams)"
-        >
-          <span>{{ optionModel.rowEditShow ? "已维护" : "" }}</span>
-          <i class="el-icon-edit"></i>
-        </a>
-      </el-form-item>
-    </template>
-
     <el-form-item label-width="0">
       <el-divider class="custom-divider-margin-top">明细导出设置</el-divider>
     </el-form-item>
@@ -428,7 +343,6 @@ import eventMixin from "../../../../../../components/xform/form-designer/setting
 import setttingConfig from "@/settings";
 
 import exportItemColumnsDialog from "./exportItemColumns-dialog.vue";
-import Clipboard from "clipboard";
 
 export default {
   name: "data-table-editor",
@@ -638,7 +552,6 @@ export default {
       },
       defaultCheckedKeys: [],
       tableConfigParams: ["dataId", "formCode"],
-      rowShowParams: ["dataId", "formCode", "tableParam"],
       showExportItemColumnsDialog: false,
     };
   },
@@ -667,12 +580,6 @@ export default {
         this.optionModel.isNotShowQueryButton = !val;
       },
     },
-    rowAddAuthCode() {
-      return this.getRowAuthCode(this.getRowAddAuthName());
-    },
-    rowEditAuthCode() {
-      return this.getRowAuthCode(this.getRowEditAuthName());
-    },
   },
   created: function () {
     // this.reportTemplate = this.getReportTemplate();
@@ -1073,73 +980,6 @@ export default {
     openExportItemColumnsDialog() {
       this.showExportItemColumnsDialog = true;
     },
-    getRowAddAuthName() {
-      return this.optionModel.rowAddAuthName ?? this.optionModel.treeRowAddName;
-    },
-    getRowEditAuthName() {
-      return (
-        this.optionModel.rowEditAuthName ?? this.optionModel.treeRowEditName
-      );
-    },
-    getRowAuthCode(authName) {
-      if (!authName || !this.reportTemplate?.formCode) {
-        return "";
-      }
-      return this.reportTemplate.formCode + ":" + authName;
-    },
-    createRowAuthName(type) {
-      return `row${type}` + generateId();
-    },
-    onIsEditTableChange(enabled) {
-      if (!enabled) {
-        return;
-      }
-      if (!this.getRowAddAuthName()) {
-        this.createRandomRowAddAuthName();
-      }
-      if (!this.getRowEditAuthName()) {
-        this.createRandomRowEditAuthName();
-      }
-    },
-    createRandomRowAddAuthName() {
-      this.$set(
-        this.optionModel,
-        "rowAddAuthName",
-        this.createRowAuthName("Add")
-      );
-    },
-    createRandomRowEditAuthName() {
-      this.$set(
-        this.optionModel,
-        "rowEditAuthName",
-        this.createRowAuthName("Edit")
-      );
-    },
-    createRandomRowAuthNames() {
-      // this.createRandomRowAddAuthName();
-      // this.createRandomRowEditAuthName();
-      if (!this.getRowAddAuthName()) {
-        this.createRandomRowAddAuthName();
-      }
-      if (!this.getRowEditAuthName()) {
-        this.createRandomRowEditAuthName();
-      }
-      this.$message.success("生成成功");
-    },
-    copyAuthCode(content, clickEvent) {
-      const clipboard = new Clipboard(clickEvent.target, {
-        text: () => content,
-      });
-      clipboard.on("success", () => {
-        this.$message.success("复制成功");
-        clipboard.destroy();
-      });
-      clipboard.on("error", () => {
-        this.$message.error("复制失败");
-        clipboard.destroy();
-      });
-      clipboard.onClick(clickEvent);
-    },
   },
 };
 </script>

package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/edit-tree-button-group-config-dialog.vue

@@ -0,0 +1,281 @@
+<template>
+  <el-dialog
+    title="编辑行按钮组配置"
+    :visible.sync="dialogVisible"
+    custom-class="dialog-style list-dialog"
+    :show-close="true"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    width="520px"
+    v-dialog-drag
+    @close="handleClose"
+  >
+    <div class="cont">
+      <el-form label-width="150px" class="edit-tree-button-group-form">
+        <el-form-item label="新增按钮唯一名称">
+          <el-input
+            v-model="row.rowAddAuthName"
+            class="all-width"
+            placeholder="留空则不校验权限"
+            clearable
+          >
+            <el-tooltip
+              slot="suffix"
+              :enterable="false"
+              effect="dark"
+              content="随机生成"
+              placement="top"
+            >
+              <i
+                class="el-input__icon el-icon-refresh-right"
+                @click="createRandomRowAddAuthName"
+              ></i>
+            </el-tooltip>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="新增按钮编码" v-if="rowAddAuthCode">
+          <div class="auth-code-text">
+            <el-tooltip effect="light" content="复制">
+              <a
+                class="a-link"
+                style="color: unset"
+                @click="copyAuthCode(rowAddAuthCode, $event)"
+              >
+                <span
+                  ><i
+                    class="el-icon-copy-document"
+                    style="margin-right: 2px"
+                  ></i
+                  >{{ rowAddAuthCode }}</span
+                >
+              </a>
+            </el-tooltip>
+          </div>
+        </el-form-item>
+        <el-form-item label="新增按钮唯一名称">
+          <el-input
+            v-model="row.rowEditAuthName"
+            class="all-width"
+            placeholder="留空则不校验权限"
+            clearable
+          >
+            <el-tooltip
+              slot="suffix"
+              :enterable="false"
+              effect="dark"
+              content="随机生成"
+              placement="top"
+            >
+              <i
+                class="el-input__icon el-icon-refresh-right"
+                @click="createRandomRowEditAuthName"
+              ></i>
+            </el-tooltip>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="编辑按钮编码" v-if="rowEditAuthCode">
+          <div class="auth-code-text">
+            <el-tooltip effect="light" content="复制">
+              <a
+                class="a-link"
+                style="color: unset"
+                @click="copyAuthCode(rowEditAuthCode, $event)"
+              >
+                <span
+                  ><i
+                    class="el-icon-copy-document"
+                    style="margin-right: 2px"
+                  ></i
+                  >{{ rowEditAuthCode }}</span
+                >
+              </a>
+            </el-tooltip>
+          </div>
+        </el-form-item>
+        <el-form-item label="新增按钮显隐条件定义">
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="editRowShowScript('rowAddShow')"
+          >
+            <span>{{ row.rowAddShow }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+        <el-form-item label="编辑按钮显隐条件定义">
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="editRowShowScript('rowEditShow')"
+          >
+            <span>{{ row.rowEditShow }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button class="button-sty" icon="el-icon-close" @click="handleClose">
+        {{ i18nt("designer.hint.cancel") }}
+      </el-button>
+      <el-button
+        type="primary"
+        class="button-sty"
+        icon="el-icon-check"
+        @click="handleConfirm"
+      >
+        {{ i18nt("designer.hint.confirm") }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n";
+import eventMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
+import { generateId } from "../../../../../../components/xform/utils/util";
+import Clipboard from "clipboard";
+
+export default {
+  name: "edit-tree-button-group-config-dialog",
+  mixins: [i18n, eventMixin],
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    row: {
+      type: Object,
+      required: true,
+    },
+  },
+  inject: ["getReportTemplate"],
+  data() {
+    return {
+      rowShowParams: ["dataId", "formCode", "tableParam"],
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:visible", val);
+      },
+    },
+    reportTemplate() {
+      return this.getReportTemplate();
+    },
+    rowAddAuthName() {
+      return this.getRowAddAuthName();
+    },
+    rowEditAuthName() {
+      return this.getRowEditAuthName();
+    },
+    rowAddAuthCode() {
+      return this.getRowAuthCode(this.rowAddAuthName);
+    },
+    rowEditAuthCode() {
+      return this.getRowAuthCode(this.rowEditAuthName);
+    },
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.ensureRowAuthNames();
+      }
+    },
+  },
+  methods: {
+    getRowAddAuthName() {
+      return this.row.rowAddAuthName ?? this.row.treeRowAddName;
+    },
+    getRowEditAuthName() {
+      return this.row.rowEditAuthName ?? this.row.treeRowEditName;
+    },
+    getRowAuthCode(authName) {
+      if (!authName || !this.reportTemplate?.formCode) {
+        return "";
+      }
+      return this.reportTemplate.formCode + ":" + authName;
+    },
+    createRowAuthName(type) {
+      return `row${type}` + generateId();
+    },
+    ensureRowAuthNames() {
+      if (!this.getRowAddAuthName()) {
+        this.$set(this.row, "rowAddAuthName", this.createRowAuthName("Add"));
+      }
+      if (!this.getRowEditAuthName()) {
+        this.$set(this.row, "rowEditAuthName", this.createRowAuthName("Edit"));
+      }
+    },
+    createRandomRowAddAuthName() {
+      this.$set(this.row, "rowAddAuthName", this.createRowAuthName("Add"));
+      this.$message.success("生成成功");
+    },
+    createRandomRowEditAuthName() {
+      this.$set(this.row, "rowEditAuthName", this.createRowAuthName("Edit"));
+      this.$message.success("生成成功");
+    },
+    editRowShowScript(eventName) {
+      this.editEventHandler(eventName, this.rowShowParams, {
+        customCode: () => this.row[eventName] || "",
+        callback: (code) => {
+          this.$set(this.row, eventName, code);
+        },
+      });
+    },
+    copyAuthCode(content, clickEvent) {
+      const clipboard = new Clipboard(clickEvent.target, {
+        text: () => content,
+      });
+      clipboard.on("success", () => {
+        this.$message.success("复制成功");
+        clipboard.destroy();
+      });
+      clipboard.on("error", () => {
+        this.$message.error("复制失败");
+        clipboard.destroy();
+      });
+      clipboard.onClick(clickEvent);
+    },
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    handleConfirm() {
+      this.$emit("confirm", this.getRowConfigSnapshot());
+      this.dialogVisible = false;
+    },
+    getRowConfigSnapshot() {
+      return {
+        rowAddAuthName: this.row.rowAddAuthName,
+        rowEditAuthName: this.row.rowEditAuthName,
+        rowAddShow: this.row.rowAddShow,
+        rowEditShow: this.row.rowEditShow,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.edit-tree-button-group-form {
+  ::v-deep .el-form-item {
+    margin-bottom: 12px;
+  }
+  ::v-deep .el-form-item__label {
+    line-height: 28px;
+  }
+  ::v-deep .el-form-item__content {
+    line-height: 28px;
+  }
+  .auth-code-text {
+    word-break: break-all;
+    line-height: 1.5;
+  }
+}
+</style>

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

@@ -130,7 +130,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>
@@ -265,6 +266,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">
@@ -490,7 +497,8 @@
               @click="openFormatConfigDialog(rowData, rowDataIndex)"
               :disabled="
                 !columnFormatMap[rowData.formatS] &&
-                'widgetRender' !== rowData.formatS
+                'widgetRender' !== rowData.formatS &&
+                'editTreeButtonGroup' !== rowData.formatS
               "
             ></el-button>
           </el-form-item>
@@ -620,6 +628,7 @@ import {
   columnFormatMap,
 } from "../../../../../../components/xform/utils/util";
 import columnRenderDialog from "./columnRenderDialog.vue";
+import editTreeButtonGroupConfigDialog from "./edit-tree-button-group-config-dialog.vue";
 
 let businessOptions = [
   {
@@ -648,7 +657,7 @@ export default {
     selectedWidget: Object,
     optionModel: Object,
   },
-  components: { columnRenderDialog },
+  components: { columnRenderDialog, editTreeButtonGroupConfigDialog },
   inject: ["openWidgetPropertyDialog"],
   data() {
     return {
@@ -659,6 +668,9 @@ export default {
       tableColumnConfigCode: null,
       showDialog: true,
       dialogVisible: true,
+      showEditTreeButtonGroupConfigDialog: false,
+      currentEditTreeButtonGroupRow: null,
+      editTreeButtonGroupRowData: null,
       alignOptions: [
         {
           value: "left",
@@ -1059,6 +1071,9 @@ export default {
     getUuid() {
       return new Date().getTime();
     },
+    createRowAuthName(type) {
+      return `row${type}` + generateId();
+    },
     /**
      * 生成一行数据
      */
@@ -1082,6 +1097,10 @@ export default {
         footerMethodConfg: null,
         widgetList: [],
         labelColor: null,
+        rowAddAuthName: this.createRowAuthName("Add"),
+        rowEditAuthName: this.createRowAuthName("Edit"),
+        rowAddShow: null,
+        rowEditShow: null,
         // treeNode: false,
       };
       return row;
@@ -1314,6 +1333,8 @@ export default {
           row.label = null;
           row.sortable = false;
           row.width = 150;
+          row.columnOption = {};
+          row.widget = null;
         } else if (isButtontCell) {
           if (row.formatS == "dropdown") {
             row.width = 100;
@@ -1494,7 +1515,20 @@ 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);
@@ -1527,20 +1561,6 @@ 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 = {};
-      }
-
-      let columnOption = this.$baseLodash.cloneDeep(option);
-      row.columnOption = columnOption;*/
       let selectedWidget = row.widget;
       this.operateIndex = index;
 

package/src/components/xform/form-designer/setting-panel/property-editor/name-editor.vue

@@ -37,7 +37,7 @@
         </el-select>
       </template>
     </el-form-item>
-    <el-form-item label="菜单按钮权限编码" v-show="showAuthCode">
+    <el-form-item label="按钮编码" v-show="showAuthCode">
       <div style="word-break: break-all">
         <el-tooltip effect="light" content="复制">
           <a class="a-link" style="color: unset;" @click="copyAuthCode"><span><i class="el-icon-copy-document" style="margin-right:2px"></i>{{ authCode }}</span></a>

package/src/components/xform/form-designer/setting-panel/widgetPropertyDialogMixin.js

@@ -0,0 +1,173 @@
+import { propertyRegistered } from './propertyRegister';
+
+let propertyDialogSeed = 0;
+
+function nextPropertyDialogId() {
+  propertyDialogSeed += 1;
+  return `widget-property-dialog-${Date.now()}-${propertyDialogSeed}`;
+}
+
+export default {
+  data() {
+    return {
+      widgetPropertyDialogs: [],
+      activePropertyDialogId: null,
+    };
+  },
+  methods: {
+    getActivePropertyDialog() {
+      if (!this.widgetPropertyDialogs.length) {
+        return null;
+      }
+      if (this.activePropertyDialogId) {
+        const active = this.widgetPropertyDialogs.find(
+          (dlg) => dlg.id === this.activePropertyDialogId
+        );
+        if (active) {
+          return active;
+        }
+      }
+      return this.widgetPropertyDialogs[this.widgetPropertyDialogs.length - 1];
+    },
+    setActivePropertyDialog(id) {
+      this.activePropertyDialogId = id;
+      this.syncLegacyPropertyDialogState();
+    },
+    syncLegacyPropertyDialogState() {
+      const active = this.getActivePropertyDialog();
+      this.showDateConfigDialog = !!active;
+      this.columnSelectedWidget = active ? active.columnSelectedWidget : {};
+      this.columnEditFields = active ? active.columnEditFields : [];
+      this.formatConfig = active ? active.formatConfig : {};
+      this.tableColumns = active ? active.tableColumns : null;
+    },
+    openWidgetPropertyDialog(config) {
+      const id = nextPropertyDialogId();
+      const dialog = {
+        id,
+        visible: true,
+        title: config.title,
+        columnSelectedWidget: config.columnSelectedWidget || {},
+        columnEditFields: config.columnEditFields || null,
+        tableColumns: config.tableColumns,
+        formatConfig: config,
+        widgetActiveCollapseName1s: ['1', '3'],
+      };
+      this.widgetPropertyDialogs.push(dialog);
+      this.setActivePropertyDialog(id);
+    },
+    closeWidgetPropertyDialog(id, invokeCallback = false) {
+      const index = this.widgetPropertyDialogs.findIndex((dlg) => dlg.id === id);
+      if (index === -1) {
+        return;
+      }
+      const dialog = this.widgetPropertyDialogs[index];
+      if (invokeCallback && dialog.formatConfig && dialog.formatConfig.callback) {
+        const columnOption = this.$baseLodash.cloneDeep(
+          dialog.columnSelectedWidget.options
+        );
+        dialog.formatConfig.callback(columnOption);
+      }
+      this.widgetPropertyDialogs.splice(index, 1);
+      if (this.activePropertyDialogId === id) {
+        const last = this.widgetPropertyDialogs[this.widgetPropertyDialogs.length - 1];
+        this.activePropertyDialogId = last ? last.id : null;
+      }
+      this.syncLegacyPropertyDialogState();
+    },
+    handleWidgetPropertyDialogBeforeClose(dialog, done) {
+      this.closeWidgetPropertyDialog(dialog.id);
+      done();
+    },
+    confirmWidgetPropertyDialog(dialog) {
+      this.closeWidgetPropertyDialog(dialog.id, true);
+    },
+    hasPropEditorForDialog(dialog, propName, editorName) {
+      if (!editorName) {
+        return false;
+      }
+      if (dialog.columnEditFields && !dialog.columnEditFields.includes(propName)) {
+        return false;
+      }
+      const widget = dialog.columnSelectedWidget;
+      if (propName.indexOf('-') <= -1) {
+        const originalPropName = `${widget.type}-${propName}`;
+        if (propertyRegistered(originalPropName)) {
+          return false;
+        }
+      }
+      const propKey = propName.replace(`${widget.type}-`, '');
+      return this.designer.hasConfig(widget, propKey);
+    },
+    getPropEditorForDialog(dialog, propName, editorName) {
+      const widget = dialog.columnSelectedWidget;
+      const propKey = propName.replace(`${widget.type}-`, '');
+      const uniquePropName = `${widget.type}-${propKey}-editor`;
+      if (this.$options.components[uniquePropName]) {
+        return uniquePropName;
+      }
+      if (this.$root.$options.components[uniquePropName]) {
+        return uniquePropName;
+      }
+      return editorName;
+    },
+    showCollapseForDialog(dialog, props) {
+      for (const propName in props) {
+        if (!props.hasOwnProperty(propName)) {
+          continue;
+        }
+        if (this.hasPropEditorForDialog(dialog, propName, props[propName])) {
+          return true;
+        }
+      }
+      return false;
+    },
+    editEventHandler(eventName, eventParams, eventOptions) {
+      eventOptions = eventOptions || {};
+      const activeDialog = this.getActivePropertyDialog();
+      const eventWidget = activeDialog
+        ? activeDialog.columnSelectedWidget
+        : this.selectedWidget;
+      this.curEventName = eventName;
+      this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`;
+      if (eventOptions.customCode) {
+        this.eventHandlerCode = eventOptions.customCode() || '';
+      } else {
+        this.eventHandlerCode = (eventWidget && eventWidget.options[eventName]) || '';
+      }
+      this.eventOption = eventOptions;
+      if (eventName === 'onCreated' && !this.optionModel.onCreated) {
+        this.eventHandlerCode = '  //组件创建生命周期\n  console.log(\'test onCreated()\')\n';
+      }
+      this.showWidgetEventDialogFlag = true;
+    },
+    saveEventHandler() {
+      const editorAnnotations = this.$refs.ecEditor.getEditorAnnotations();
+      let hasError = false;
+      if (editorAnnotations && editorAnnotations.length > 0) {
+        editorAnnotations.forEach((item) => {
+          if (item.type === 'error') {
+            hasError = true;
+          }
+        });
+        if (hasError) {
+          this.$message.error(this.i18nt('designer.hint.syntaxCheckWarning'));
+          return;
+        }
+      }
+      const eventOptions = this.eventOption || {};
+      if (!eventOptions.callback) {
+        const activeDialog = this.getActivePropertyDialog();
+        const eventWidget = activeDialog
+          ? activeDialog.columnSelectedWidget
+          : this.selectedWidget;
+        if (eventWidget) {
+          eventWidget.options[this.curEventName] = this.eventHandlerCode;
+        }
+      } else {
+        eventOptions.callback(this.eventHandlerCode);
+      }
+      this.showWidgetEventDialogFlag = false;
+    },
+  },
+};

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -259,10 +259,6 @@ export const containers = [
       tableConfig: null,
       isEditTable: false,
       isTreeTable: false,
-      rowAddAuthName: null,
-      rowEditAuthName: null,
-      rowAddShow: null,
-      rowEditShow: null,
       wbsEnabled: false,
       sortScriptCode: null,
       importTemplateFile: null,

package/src/components/xform/form-render/container-item/data-table-mixin.js

@@ -2731,26 +2731,27 @@ modules = {
       let dispermissions = this.$store.getters.dispermissions;
       return !dispermissions.includes(authCode);
     },
-    getRowAddAuthName() {
-      return (
-        this.widget.options.rowAddAuthName ?? this.widget.options.treeRowAddName
-      );
+    getEditTreeButtonGroupConfig(obj) {
+      let columnConfig = obj?.column?.params?.columnConfig || {};
+      let tableOptions = this.widget.options || {};
+      return {
+        rowAddAuthName: columnConfig.rowAddAuthName,
+        rowEditAuthName: columnConfig.rowEditAuthName,
+        rowAddShow: columnConfig.rowAddShow,
+        rowEditShow: columnConfig.rowEditShow,
+      };
     },
-    getRowEditAuthName() {
-      return (
-        this.widget.options.rowEditAuthName ??
-        this.widget.options.treeRowEditName
-      );
+    getRowAddAuthName(obj) {
+      return this.getEditTreeButtonGroupConfig(obj).rowAddAuthName;
     },
-    getRowAddShow() {
-      return (
-        this.widget.options.rowAddShow ?? this.widget.options.treeRowAddShow
-      );
+    getRowEditAuthName(obj) {
+      return this.getEditTreeButtonGroupConfig(obj).rowEditAuthName;
     },
-    getRowEditShow() {
-      return (
-        this.widget.options.rowEditShow ?? this.widget.options.treeRowEditShow
-      );
+    getRowAddShow(obj) {
+      return this.getEditTreeButtonGroupConfig(obj).rowAddShow;
+    },
+    getRowEditShow(obj) {
+      return this.getEditTreeButtonGroupConfig(obj).rowEditShow;
     },
     isRowButtonShow(script, obj) {
       if (!script) {
@@ -2761,16 +2762,16 @@ modules = {
     },
     canShowRowAdd(obj) {
       return (
-        this.hasTableRowPermission(this.getRowAddAuthName()) &&
-        this.isRowButtonShow(this.getRowAddShow(), obj)
+        this.hasTableRowPermission(this.getRowAddAuthName(obj)) &&
+        this.isRowButtonShow(this.getRowAddShow(obj), obj)
       );
     },
     canShowRowEdit(obj) {
       let isAddRow = !this.hasSaveRow(obj?.row);
       if (isAddRow) return true;
       return (
-        this.hasTableRowPermission(this.getRowEditAuthName()) &&
-        this.isRowButtonShow(this.getRowEditShow(), obj)
+        this.hasTableRowPermission(this.getRowEditAuthName(obj)) &&
+        this.isRowButtonShow(this.getRowEditShow(obj), obj)
       );
     },
     editRowEvent(obj) {