cloud-web-corejs 1.0.80 → 1.0.81

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

@@ -1,359 +1,363 @@
 <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"
-    >
-      <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-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
+    :before-close="closeHandle"
+  >
+    <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
+        v-loading="pictLoading"
+        element-loading-background="rgba(0, 0, 0, 0)"
+        element-loading-text="数据正在加载中"
+        element-loading-spinner="el-icon-loading"
+      >
+        <el-table-column label="" min-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('明细行')" width="70" prop="sortable">
-            <template slot-scope="scope">
-              <el-switch v-model="scope.row.isItemLine"></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)"
+          <template #default="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 #default="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 #default="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 #default="scope">
+            <el-switch v-model="scope.row.show"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column :label="i18nt('必填')" width="70" prop="required">
+          <template #default="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 #default="scope">
+            <el-switch v-model="scope.row.sortable"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column :label="i18nt('明细行')" width="70" prop="sortable">
+          <template #default="scope">
+            <el-switch v-model="scope.row.isItemLine"></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.alignTypeOfColumn')" width="100" prop="align">
+                    <template #default="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 #default="scope">
+            <el-select
+              v-model="scope.row.formatS"
+              @change="changeFormatS(scope.row)"
+              clearable
+            >
+              <el-option-group
+                :label="i18nt('designer.setting.customRenderGroup')"
               >
-                <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 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 editOp"
+                  v-for="e in t.options"
                   :key="e.value"
                   :value="e.value"
                   :label="e.label"
                 ></el-option>
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column label="编辑插槽配置" width="150" 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-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"
+            ></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('自定义表格列配置')" width="150">
+          <template #default="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 #default="scope">
+            <el-switch v-model="scope.row.treeNode"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('编辑插槽类型')"
+          width="200"
+          prop="editFormatS"
+        >
+          <template #default="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="150" align="center">
+          <template #default="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 #default="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="i18nt('表尾统计行类型')"
-            width="200"
-            prop="formatS"
-          >
-            <template slot-scope="scope">
-              <el-select v-model="scope.row.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>
-            </template>
-          </el-table-column>
-          <el-table-column label="表尾统计行配置" width="150" align="center">
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                plain=""
-                round=""
-                icon="el-icon-edit"
-                @click="
+        <el-table-column
+          :label="i18nt('表尾统计行类型')"
+          width="200"
+          prop="formatS"
+        >
+          <template #default="scope">
+            <el-select v-model="scope.row.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>
+          </template>
+        </el-table-column>
+        <el-table-column label="表尾统计行配置" width="150" align="center">
+          <template #default="scope">
+            <el-button
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="
                   editFormEventHandler(
                     scope.row,
                     scope.$index,
                     'footerMethodConfg'
                   )
                 "
-                :disabled="scope.row.footerDataType !== '3'"
-              ></el-button>
-            </template>
-          </el-table-column>
+              :disabled="scope.row.footerDataType !== '3'"
+            ></el-button>
+          </template>
+        </el-table-column>
 
-          <el-table-column
-            label="格式化配置"
-            width="90"
-            fixed="right"
-            align="center"
-          >
-            <template slot-scope="scope">
+
+        <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"
-                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">
+                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
-                :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>
+                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>
-      </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-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" v-if="showColumnRenderDialog"
+                          :visiable.sync="showColumnRenderDialog"
+                          @confirm="confirmWidgetRenderDialog"></columnRenderDialog>
+    </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')"
@@ -366,6 +370,7 @@
       :destroy-on-close="!0"
       v-dialog-drag
       top="7vh"
+      :append-to-body="true"
     >
       <el-alert
         type="info"
@@ -378,7 +383,7 @@
         :readonly="!1"
         v-model="renderJson"
       ></code-editor>
-      <el-alert type="info" :closable="!1" title="}" />
+      <el-alert type="info" :closable="!1" title="}"/>
       <div class="dialog-footer" slot="footer">
         <el-button
           @click="showRenderDialogFlag = !1"
@@ -489,12 +494,13 @@
         </el-button>
       </div>
     </el-dialog>
-  </div>
+  </el-dialog>
 </template>
 <script>
 import i18n from "../../../../../../components/xform/utils/i18n";
 import Sortable from "sortablejs";
-import { generateId } from "../../../../../../components/xform/utils/util";
+import {generateId} from "../../../../../../components/xform/utils/util";
+import columnRenderDialog from "./columnRenderDialog.vue"
 
 export default {
   mixins: [i18n],
@@ -503,10 +509,11 @@ export default {
     selectedWidget: Object,
     optionModel: Object,
   },
-  components: {},
+  components: {columnRenderDialog},
   inject: ["openWidgetPropertyDialog"],
   data() {
     return {
+      pictLoading: true,
       tableColumnConfigTitle: null,
       showTableColumnConfigDialog: false,
       tableColumnConfigHeader: null,
@@ -547,6 +554,14 @@ export default {
               value: "editSelect",
               label: "下拉框",
             },
+            {
+              value: "checkbox",
+              label: "复选框",
+            },
+            {
+              value: "radio",
+              label: "单选框",
+            },
             {
               value: "editAttachment",
               label: "附件",
@@ -559,6 +574,10 @@ export default {
               value: "editStatus",
               label: "状态",
             },
+            {
+              value: "text",
+              label: "文本",
+            },
             {
               value: "editDelete",
               label: "删除按钮",
@@ -583,6 +602,10 @@ export default {
               value: "editTreeButtonGroup",
               label: "编辑行按钮组",
             },
+            {
+              value: "widgetRender",
+              label: "自定义组件",
+            },
           ],
         },
         {
@@ -722,6 +745,9 @@ export default {
         moveUpRow: "a-link",
         moveDownRow: "a-link",
         removeTreeRow: "a-link",
+        text: "text",
+        checkbox: "checkbox",
+        radio: "radio",
       },
 
       showFormEventDialogFlag: false,
@@ -731,12 +757,16 @@ export default {
       eventParamsMap: {
         footerMethodConfg: "footerMethodConfg(dataId,formCode,param) {",
       },
+
+      showColumnRenderDialog: false,
+
     };
   },
   beforeDestroy() {
     if (this.dragSort) this.dragSort.destroy();
   },
-  created() {},
+  created() {
+  },
   mounted() {
     this.init();
   },
@@ -770,19 +800,41 @@ export default {
       this.showFormEventDialogFlag = false;
     },
     init() {
-      this.tableData = this.$baseLodash.cloneDeep(
-        this.optionModel.tableColumns
-      );
-      this.$nextTick(() => {
+      setTimeout(() => {
+        this.tableData = this.$baseLodash.cloneDeep(
+          this.optionModel.tableColumns
+        );
+        this.$nextTick(() => {
+          this.rowDrop();
+          setTimeout(() => {
+            this.pictLoading = false
+          }, 200)
+        });
+      }, 10)
+
+      /*this.$nextTick(() => {
         this.rowDrop();
-      });
+      });*/
     },
     colSubmit() {
       this.dialogVisible = !1;
       this.optionModel.tableColumns = this.tableData;
       this.closeHandle();
     },
+    openWidgetRenderDialog(row) {
+      this.currentTableColumn = row;
+      this.showColumnRenderDialog = true
+    },
+    confirmWidgetRenderDialog(widgetList) {
+      this.currentTableColumn.widgetList = widgetList
+      this.showColumnRenderDialog = false
+    },
     showRenderDialog: function (e) {
+      /*if(e.formatS == 'widgetRender'){
+        this.openWidgetRenderDialog(e);
+        return
+      }*/
+
       (this.currentTableColumn = e),
         (this.renderJson = e.render || ""),
         (this.showRenderDialogFlag = !0);
@@ -823,7 +875,7 @@ export default {
      * @param {string} type 操作类型 SIBLING 同级 / CHILD 子级
      */
     handleAddOneRow(row, index, type) {
-      const { parentId, columnId } = row;
+      const {parentId, columnId} = row;
       const curId = type === "SIBLING" ? parentId : columnId;
       let curRow = {};
       // 在 tableData 中，找到当前节点
@@ -840,7 +892,7 @@ export default {
 
       findRow(this.tableData);
 
-      const { columnId: generateParentId, children } = curRow;
+      const {columnId: generateParentId, children} = curRow;
 
       let newRow = this.generateRow(generateParentId);
       if (children) {
@@ -878,6 +930,7 @@ export default {
         exportType: null,
         footerDataType: null,
         footerMethodConfg: null,
+        widgetList: []
         // treeNode: false,
       };
       return row;
@@ -888,7 +941,7 @@ export default {
     },
     // 删除当前节点及对应子节点数据
     onDelete(row) {
-      const { parentId, columnId } = row;
+      const {parentId, columnId} = row;
       // 根节点直接删除
       if (!parentId) {
         const delIndex = this.tableData.findIndex(
@@ -901,7 +954,7 @@ export default {
         const findRow = (data) => {
           data.forEach((item) => {
             if (item.columnId === parentId) {
-              parentRow = { ...item };
+              parentRow = {...item};
             }
             if (item.children && item.children.length) {
               findRow(item.children);
@@ -910,7 +963,7 @@ export default {
         };
         findRow(this.tableData);
 
-        const { children } = parentRow;
+        const {children} = parentRow;
 
         const delIndex = children.findIndex(
           (item) => item.columnId === columnId
@@ -945,10 +998,12 @@ export default {
       const _this = this;
       this.dragSort = Sortable.create(tbody, {
         ghostClass: "sortable-ghost",
+        // draggable: ".drag-option",    // 修改可拖拽元素
+        handle: '.drag-option', // 指定拖动按钮
         setData: function (e) {
           e.setData("Text", "");
         },
-        onEnd({ newIndex, oldIndex }) {
+        onEnd({newIndex, oldIndex}) {
           _this.rowDropEnd(newIndex, oldIndex);
         },
       });
@@ -1070,7 +1125,7 @@ export default {
     changeFormatS(row) {
       let isButtontCell = this.getIsButtontCell(row.formatS);
       let columnWidgetConfig = this.getColumnWidgetConfig(row, true);
-      let { columnSelectedWidget, columnEditFields } = columnWidgetConfig;
+      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
       if (columnSelectedWidget) {
         row.columnOption = columnSelectedWidget.options;
       } else {
@@ -1214,13 +1269,19 @@ export default {
           columnSelectedWidget.options.labelHidden = true;
         }
       }
-      return { columnSelectedWidget, columnEditFields };
+      return {columnSelectedWidget, columnEditFields};
     },
     openFormatConfigDialog(row, index) {
+      if (row.formatS == 'widgetRender') {
+        this.openWidgetRenderDialog(row);
+        return
+      }
+
+
       let option = row.columnOption;
       let selectedWidget;
       let columnWidgetConfig = this.getColumnWidgetConfig(row);
-      let { columnSelectedWidget, columnEditFields } = columnWidgetConfig;
+      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
       if (columnSelectedWidget) {
         option = columnSelectedWidget.options;
         selectedWidget = columnSelectedWidget;
@@ -1261,7 +1322,7 @@ export default {
       let option = row.columnOption;
       let selectedWidget;
       let columnWidgetConfig = this.getColumnWidgetConfig(row, null, true);
-      let { columnSelectedWidget, columnEditFields } = columnWidgetConfig;
+      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
       if (columnSelectedWidget) {
         option = columnSelectedWidget.options;
         selectedWidget = columnSelectedWidget;