cloud-web-corejs 1.0.54-dev.52 → 1.0.54-dev.521

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

@@ -1,206 +1,277 @@
 <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="" width="80" fixed="left">
+          <template #default="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="" width="35" fixed="left"
+          ><i class="el-icon-s-operation drag-option"></i>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.columnLabel')"
+          width="150"
+          prop="label"
+          fixed="left"
         >
-          <el-table-column label="" min-width="80" fixed="left">
-            <template slot-scope="scope">
-              <span>{{ scope.$index + 1 }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="" width="35" fixed="left"><i class="el-icon-s-operation drag-option"></i>
-          </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.columnLabel')" width="150" prop="label" fixed="left">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.label"></el-input>
-            </template>
-          </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.columnName')" width="150" prop="prop">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.prop" :disabled="'editAttachment' == scope.row.formatS"></el-input>
-            </template>
-          </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.columnWidth')" width="100" prop="width">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.width"></el-input>
-            </template>
-          </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.visibleColumn')" width="70" prop="show">
-            <template slot-scope="scope">
-              <el-switch v-model="scope.row.show"></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column :label="i18nt('必填')" width="70" prop="required">
-            <template slot-scope="scope">
-              <el-switch v-model="scope.row.required"></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.sortableColumn')" width="70" prop="sortable">
-            <template slot-scope="scope">
-              <el-switch v-model="scope.row.sortable"></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.fixedColumn')" width="100" prop="fixed">
-            <template slot-scope="scope">
-              <el-select v-model="scope.row.fixed" clearable>
-                <el-option value="left">left</el-option>
-                <el-option value="right">right</el-option>
-              </el-select>
-            </template>
-          </el-table-column>
-          <!--          <el-table-column :label="i18nt('designer.setting.alignTypeOfColumn')" width="100" prop="align">
-                      <template slot-scope="scope">
-                        <el-select v-model="scope.row.align">
-                          <el-option v-for="(e,index) in alignOptions" :key="index" :value="e.value" :label="e.label"></el-option>
-                        </el-select>
-                      </template>
-                    </el-table-column>-->
-          <el-table-column :label="i18nt('designer.setting.formatOfColumn')" width="200" prop="formatS">
-            <template slot-scope="scope">
-              <el-select v-model="scope.row.formatS" @change="changeFormatS(scope.row)" clearable>
-                <el-option-group :label="i18nt('designer.setting.customRenderGroup')">
-                  <el-option value="render" label="render"></el-option>
-                </el-option-group>
-                <el-option-group v-for="t in op" :key="t.label" :label="t.label">
-                  <el-option v-for="e in t.options" :key="e.value" :value="e.value" :label="e.label"></el-option>
-                </el-option-group>
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column :label="i18nt('自定义表格列配置')" width="150">
-            <template slot-scope="scope">
-              <a href="javascript:void(0);" class="a-link link-oneLind"
-                 @click="openTableColumnConfigDialog(scope.row,scope.$index)">
-                <span>{{ scope.row.tableColumnConfig }}</span>
-                <i class="el-icon-edit"></i>
-              </a>
-            </template>
-          </el-table-column>
-          <el-table-column :label="i18nt('编辑下拉列')" width="70" prop="sortable">
-            <template slot-scope="scope">
-              <el-switch v-model="scope.row.treeNode"></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column :label="i18nt('编辑插槽类型')" width="200" prop="editFormatS">
-            <template slot-scope="scope">
-              <el-select v-model="scope.row.editFormatS" @change="changeFormatS(scope.row)" clearable>
-                <el-option v-for="e in editOp" :key="e.value" :value="e.value" :label="e.label"></el-option>
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column label="编辑插槽配置" width="70" align="center">
-            <template slot-scope="scope">
-              <el-button size="mini" plain="" round="" icon="el-icon-edit"
-                         @click="openEditFormatConfigDialog(scope.row,scope.$index)"
-                         :disabled="!scope.row.editFormatS"></el-button>
-            </template>
-          </el-table-column>
-          <el-table-column label="格式化配置" width="90" fixed="right" align="center">
-            <template slot-scope="scope">
-              <el-button size="mini" plain="" round="" icon="el-icon-edit"
-                         @click="openFormatConfigDialog(scope.row,scope.$index)"
-                         :disabled="!columnFormatMap[scope.row.formatS]"></el-button>
-            </template>
-          </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.renderFunction')" width="70" fixed="right" align="center">
-            <template slot-scope="scope">
-              <el-button :disabled="'render' !== scope.row.formatS" size="mini" plain="" round="" icon="el-icon-edit"
-                         @click="showRenderDialog(scope.row)"></el-button>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="150" fixed="right">
-            <template slot="header">
-              <el-tooltip
-                :hide-after="500"
-                class="item"
-                effect="dark"
-                content="添加根节点"
-                placement="top"
-              >
-                <el-button
-                  size="mini" type="" circle=""
-                  icon="el-icon-plus"
-                  @click="onAddRoot"
-                />
-              </el-tooltip>
-            </template>
-            <template #default="{ row, $index }">
-              <el-tooltip
-                :hide-after="hideAfter"
-                :open-delay="openDelay"
-                effect="dark"
-                content="添加兄弟节点"
-                placement="top"
-              >
-                <el-button
-                  size="mini" type="" circle=""
-                  icon="el-icon-plus"
-                  @click="onAddSibling(row, $index)"
-                />
-              </el-tooltip>
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.label"
+              @change="changeRowLabel(scope.row)"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.columnName')"
+          width="150"
+          prop="prop"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.prop"
+              @change="changeRowProp(scope.row)"
+              :disabled="'editAttachment' == scope.row.formatS"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.columnWidth')"
+          width="100"
+          prop="width"
+        >
+          <template #default="scope">
+            <el-input v-model="scope.row.width"></el-input>
+          </template>
+        </el-table-column>
 
-              <el-tooltip
-                :hide-after="hideAfter"
-                :open-delay="openDelay"
-                effect="dark"
-                content="添加子节点"
-                placement="top"
-              >
-                <el-button
-                  size="mini" type="" circle=""
-                  icon="el-icon-circle-plus-outline"
-                  @click="onAddChild(row, $index)"
-                />
-              </el-tooltip>
-              <el-tooltip
-                :hide-after="hideAfter"
-                :open-delay="openDelay"
-                effect="dark"
-                content="删除"
-                placement="top"
-              >
-                <el-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-table-column :label="i18nt('必填')" width="70" prop="required">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.required"
+              @change="changeRowRequired(scope.row)"
+            ></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.fixedColumn')"
+          width="100"
+          prop="fixed"
+        >
+          <template #default="scope">
+            <el-select v-model="scope.row.fixed" clearable>
+              <el-option value="left">left</el-option>
+              <el-option value="right">right</el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.formatOfColumn')"
+          width="200"
+          prop="formatS"
+        >
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.formatS"
+              @change="changeFormatS(scope.row, false)"
+              clearable
+            >
+              <el-option-group :label="i18nt('designer.setting.customRenderGroup')">
+                <el-option value="render" label="render"></el-option>
+              </el-option-group>
+              <el-option-group v-for="t in op" :key="t.label" :label="t.label">
+                <el-option
+                  v-for="e in t.options"
+                  :key="e.value"
+                  :value="e.value"
+                  :label="e.label"
+                ></el-option>
+              </el-option-group>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="格式化配置" width="90" align="center">
+          <template #default="scope">
+            <el-button
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="openFormatConfigDialog(scope.row, scope.$index)"
+              :disabled="
+                !columnFormatMap[scope.row.formatS] &&
+                'widgetRender' !== scope.row.formatS
+              "
+            ></el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.renderFunction')"
+          width="70"
+          align="center"
+        >
+          <template #default="scope">
+            <el-button
+              :disabled="'render' !== scope.row.formatS"
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="showRenderDialog(scope.row)"
+            ></el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.visibleColumn')"
+          width="70"
+          prop="show"
+        >
+          <template #default="scope">
+            <el-switch v-model="scope.row.show"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="i18nt('designer.setting.sortableColumn')"
+          width="70"
+          prop="sortable"
+        >
+          <template #default="scope">
+            <el-switch v-model="scope.row.sortable"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="显示筛选" width="70" prop="filterable">
+          <template #default="scope">
+            <el-switch v-model="scope.row.filterable"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="编辑更多属性" width="100" align="center" fixed="right">
+          <template #default="scope">
+            <el-button
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="openRowEditDialog(scope.row, scope.$index)"
+            ></el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" fixed="right">
+          <template slot="header">
+            <el-tooltip
+              :hide-after="500"
+              class="item"
+              effect="dark"
+              content="添加根节点"
+              placement="top"
+            >
+              <el-button
+                size="mini"
+                type=""
+                circle=""
+                icon="el-icon-plus"
+                @click="onAddRoot"
+              />
+            </el-tooltip>
+          </template>
+          <template #default="{ row, $index }">
+            <el-tooltip
+              :hide-after="hideAfter"
+              :open-delay="openDelay"
+              effect="dark"
+              content="添加兄弟节点"
+              placement="top"
+            >
+              <el-button
+                size="mini"
+                type=""
+                circle=""
+                icon="el-icon-plus"
+                @click="onAddSibling(row, $index)"
+              />
+            </el-tooltip>
+
+            <el-tooltip
+              :hide-after="hideAfter"
+              :open-delay="openDelay"
+              effect="dark"
+              content="添加子节点"
+              placement="top"
+            >
+              <el-button
+                size="mini"
+                type=""
+                circle=""
+                icon="el-icon-circle-plus-outline"
+                @click="onAddChild(row, $index)"
+              />
+            </el-tooltip>
+            <el-tooltip
+              :hide-after="hideAfter"
+              :open-delay="openDelay"
+              effect="dark"
+              content="删除"
+              placement="top"
+            >
+              <el-button
+                size="mini"
+                type=""
+                circle=""
+                icon="el-icon-delete"
+                @click="onDelete(row, $index)"
+              />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <columnRenderDialog
+        :column="currentTableColumn"
+        :sourceData="sourceData"
+        v-if="showColumnRenderDialog"
+        :visiable.sync="showColumnRenderDialog"
+        @confirm="confirmWidgetRenderDialog"
+      ></columnRenderDialog>
+    </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')"
@@ -213,16 +284,31 @@
       :destroy-on-close="!0"
       v-dialog-drag
       top="7vh"
+      :append-to-body="true"
     >
-      <el-alert type="info" :closable="!1" title="function customRender(params,h) {"/>
-      <code-editor ref="dsResultEditor" mode="javascript" :readonly="!1" v-model="renderJson"></code-editor>
-      <el-alert type="info" :closable="!1" title="}"/>
+      <el-alert type="info" :closable="!1" title="function customRender(params,h) {" />
+      <code-editor
+        ref="dsResultEditor"
+        mode="javascript"
+        :readonly="!1"
+        v-model="renderJson"
+      ></code-editor>
+      <el-alert type="info" :closable="!1" title="}" />
       <div class="dialog-footer" slot="footer">
-        <el-button @click="showRenderDialogFlag = !1" class="button-sty" icon="el-icon-close">
-          {{ i18nt('designer.hint.cancel') }}
+        <el-button
+          @click="showRenderDialogFlag = !1"
+          class="button-sty"
+          icon="el-icon-close"
+        >
+          {{ i18nt("designer.hint.cancel") }}
         </el-button>
-        <el-button type="primary" @click="saveColumnRender" class="button-sty" icon="el-icon-check">
-          {{ i18nt('designer.hint.confirm') }}
+        <el-button
+          type="primary"
+          @click="saveColumnRender"
+          class="button-sty"
+          icon="el-icon-check"
+        >
+          {{ i18nt("designer.hint.confirm") }}
         </el-button>
       </div>
     </el-dialog>
@@ -241,39 +327,312 @@
       top="5vh"
     >
       <div class="cont">
-        <el-alert type="info" :closable="false" :title="tableColumnConfigHeader"></el-alert>
-        <code-editor :mode="'javascript'" :readonly="false" v-model="tableColumnConfigCode"
-                     ref="ecEditor"></code-editor>
+        <el-alert
+          type="info"
+          :closable="false"
+          :title="tableColumnConfigHeader"
+        ></el-alert>
+        <code-editor
+          :mode="'javascript'"
+          :readonly="false"
+          v-model="tableColumnConfigCode"
+          ref="ecEditor"
+        ></code-editor>
+        <el-alert type="info" :closable="false" title="}"></el-alert>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          @click="showTableColumnConfigDialog = false"
+          class="button-sty"
+          icon="el-icon-close"
+        >
+          {{ i18nt("designer.hint.cancel") }}
+        </el-button>
+        <el-button
+          type="primary"
+          @click="saveTableColumnConfigDialog"
+          class="button-sty"
+          icon="el-icon-check"
+        >
+          {{ i18nt("designer.hint.confirm") }}
+        </el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :title="i18nt('designer.setting.editFormEventHandler')"
+      :visible.sync="showFormEventDialogFlag"
+      v-if="showFormEventDialogFlag"
+      :show-close="true"
+      custom-class="dialog-style list-dialog"
+      v-dialog-drag
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      top="5vh"
+    >
+      <div class="cont">
+        <el-alert
+          type="info"
+          :closable="false"
+          :title="'form.' + eventParamsMap[curEventName]"
+        ></el-alert>
+        <code-editor
+          :mode="'javascript'"
+          :readonly="false"
+          v-model="formEventHandlerCode"
+          ref="ecEditor"
+        ></code-editor>
         <el-alert type="info" :closable="false" title="}"></el-alert>
       </div>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="showTableColumnConfigDialog = false" class="button-sty" icon="el-icon-close">
-          {{ i18nt('designer.hint.cancel') }}
+        <el-button
+          @click="showFormEventDialogFlag = false"
+          class="button-sty"
+          icon="el-icon-close"
+        >
+          {{ i18nt("designer.hint.cancel") }}
         </el-button>
-        <el-button type="primary" @click="saveTableColumnConfigDialog" class="button-sty" icon="el-icon-check">
-          {{ i18nt('designer.hint.confirm') }}
+        <el-button
+          type="primary"
+          @click="saveFormEventHandler"
+          class="button-sty"
+          icon="el-icon-check"
+        >
+          {{ i18nt("designer.hint.confirm") }}
         </el-button>
       </div>
     </el-dialog>
-  </div>
 
+    <el-dialog
+      custom-class="dialog-style list-dialog"
+      :title="i18nt('designer.setting.tableColEdit')"
+      :visible.sync="showRowEditDialog"
+      v-if="showRowEditDialog"
+      :modal="false"
+      :show-close="!0"
+      :close-on-click-modal="!1"
+      :close-on-press-escape="!1"
+      :destroy-on-close="!0"
+      top="5vh"
+      width="409px"
+      v-dialog-drag
+    >
+      <div class="cont">
+        <el-form :model="rowData" class="form-m2" label-position="top">
+          <el-form-item :label="i18nt('designer.setting.columnLabel')">
+            <el-input
+              v-model="rowData.label"
+              @change="changeRowLabel(rowData)"
+            ></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.columnName')">
+            <el-input
+              v-model="rowData.prop"
+              @change="changeRowProp(rowData)"
+              :disabled="'editAttachment' == rowData.formatS"
+            ></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.columnWidth')">
+            <el-input v-model="rowData.width"></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('必填')">
+            <el-switch
+              v-model="rowData.required"
+              @change="changeRowRequired(rowData)"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.fixedColumn')">
+            <el-select v-model="rowData.fixed" clearable>
+              <el-option value="left">left</el-option>
+              <el-option value="right">right</el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.formatOfColumn')">
+            <el-select
+              v-model="rowData.formatS"
+              @change="changeFormatS(rowData, false)"
+              clearable
+            >
+              <el-option-group :label="i18nt('designer.setting.customRenderGroup')">
+                <el-option value="render" label="render"></el-option>
+              </el-option-group>
+              <el-option-group v-for="t in op" :key="t.label" :label="t.label">
+                <el-option
+                  v-for="e in t.options"
+                  :key="e.value"
+                  :value="e.value"
+                  :label="e.label"
+                ></el-option>
+              </el-option-group>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="格式化配置">
+            <el-button
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="openFormatConfigDialog(rowData, rowDataIndex)"
+              :disabled="
+                !columnFormatMap[rowData.formatS] && 'widgetRender' !== rowData.formatS
+              "
+            ></el-button>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.renderFunction')">
+            <el-button
+              :disabled="'render' !== rowData.formatS"
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="showRenderDialog(rowData)"
+            ></el-button>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.visibleColumn')">
+            <el-switch v-model="rowData.show"></el-switch>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.sortableColumn')">
+            <el-switch v-model="rowData.sortable"></el-switch>
+          </el-form-item>
+          <el-form-item label="显示筛选">
+            <el-switch v-model="rowData.filterable"></el-switch>
+          </el-form-item>
+          <el-form-item :label="i18nt('明细行')">
+            <el-switch v-model="rowData.isItemLine"></el-switch>
+          </el-form-item>
+
+          <el-form-item :label="i18nt('下拉列')">
+            <el-switch v-model="rowData.treeNode"></el-switch>
+          </el-form-item>
+          <el-form-item :label="i18nt('自定义表格列配置')">
+            <a
+              href="javascript:void(0);"
+              class="a-link link-oneLind"
+              @click="openTableColumnConfigDialog(rowData, rowDataIndex)"
+            >
+              <span>{{ rowData.tableColumnConfig }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
+          <el-form-item :label="i18nt('编辑插槽类型')">
+            <el-select
+              v-model="rowData.editFormatS"
+              @change="changeFormatS(rowData, true)"
+              clearable
+            >
+              <el-option
+                v-for="e in editOp"
+                :key="e.value"
+                :value="e.value"
+                :label="e.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="编辑插槽配置">
+            <el-button
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="openEditFormatConfigDialog(rowData, rowDataIndex)"
+              :disabled="!rowData.editFormatS"
+            ></el-button>
+          </el-form-item>
+          <el-form-item :label="i18nt('导出类型')">
+            <el-select v-model="rowData.exportType" clearable>
+              <el-option value="Image2" label="图片"></el-option>
+              <el-option value="Number" label="数值"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="i18nt('表尾统计行类型')">
+            <el-select v-model="rowData.footerDataType" clearable>
+              <el-option value="1" label="合计"></el-option>
+              <el-option value="2" label="平均"></el-option>
+              <el-option value="3" label="自定义"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="表尾统计行配置">
+            <el-button
+              size="mini"
+              plain=""
+              round=""
+              icon="el-icon-edit"
+              @click="editFormEventHandler(rowData, rowDataIndex, 'footerMethodConfg')"
+              :disabled="rowData.footerDataType !== '3'"
+            ></el-button>
+          </el-form-item>
+          <el-form-item :label="i18nt('显示名称颜色')">
+            <el-select v-model="rowData.labelColor" clearable>
+              <el-option value="#e6a23c" label="橙"></el-option>
+              <el-option value="#2a6494" label="蓝"></el-option>
+              <el-option value="#30b08f" label="绿"></el-option>
+              <el-option value="#909399" label="灰"></el-option>
+              <el-option value="#ea5353" label="红"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="closeRowEditDialog" class="button-sty" icon="el-icon-close">
+          {{ i18nt("designer.hint.cancel") }}
+        </el-button>
+        <el-button
+          type="primary"
+          @click="submitRowEditDialog"
+          class="button-sty"
+          icon="el-icon-check"
+        >
+          {{ i18nt("designer.hint.confirm") }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </el-dialog>
 </template>
 <script>
 import i18n from "../../../../../../components/xform/utils/i18n";
 import Sortable from "sortablejs";
-import {generateId} from "../../../../../../components/xform/utils/util";
+import {
+  generateId,
+  loopHandleWidget,
+  deepClone,
+  columnFormatMap,
+} from "../../../../../../components/xform/utils/util";
+import columnRenderDialog from "./columnRenderDialog.vue";
+
+let businessOptions = [
+  {
+    value: "_createBy",
+    label: "创建人",
+  },
+  {
+    value: "_modifyBy",
+    label: "更新人",
+  },
+  {
+    value: "create_date",
+    label: "创建时间",
+  },
+  {
+    value: "modify_date",
+    label: "更新时间",
+  },
+];
+let userFields = ["_createBy", "_modifyBy", "create_date", "modify_date"];
 
 export default {
   mixins: [i18n],
   props: {
     designer: Object,
     selectedWidget: Object,
-    optionModel: Object
+    optionModel: Object,
   },
-  components: {},
-  inject: ['openWidgetPropertyDialog'],
+  components: { columnRenderDialog },
+  inject: ["openWidgetPropertyDialog"],
   data() {
     return {
+      pictLoading: true,
       tableColumnConfigTitle: null,
       showTableColumnConfigDialog: false,
       tableColumnConfigHeader: null,
@@ -282,264 +641,344 @@ export default {
       dialogVisible: true,
       alignOptions: [
         {
-          value: 'left',
-          label: 'left'
+          value: "left",
+          label: "left",
         },
         {
-          value: 'center',
-          label: 'center'
+          value: "center",
+          label: "center",
         },
         {
-          value: 'right',
-          label: 'right'
-        }
+          value: "right",
+          label: "right",
+        },
       ],
+      businessOptions,
+      userFields,
       op: [
         {
-          label: 'edit Format',
+          label: "edit Format",
           options: [
             {
-              value: 'editInput',
-              label: '文本输入框'
+              value: "editInput",
+              label: "文本输入框",
             },
             {
-              value: 'editNumber',
-              label: '数字输入框'
+              value: "editNumber",
+              label: "数字输入框",
             },
             {
-              value: 'editDate',
-              label: '日期输入框'
+              value: "editDate",
+              label: "日期输入框",
             },
             {
-              value: 'editSelect',
-              label: '下拉框'
+              value: "editSelect",
+              label: "下拉框",
             },
             {
-              value: 'editAttachment',
-              label: '附件'
+              value: "checkbox",
+              label: "复选框",
             },
             {
-              value: 'editSearch',
-              label: '搜索框'
+              value: "radio",
+              label: "单选框",
             },
             {
-              value: 'editStatus',
-              label: '状态'
+              value: "editAttachment",
+              label: "附件",
             },
             {
-              value: 'editDelete',
-              label: '删除按钮'
+              value: "editSearch",
+              label: "搜索框",
             },
             {
-              value: 'editButton',
-              label: '查看按钮'
+              value: "editStatus",
+              label: "状态",
             },
             {
-              value: 'aText',
-              label: '超链接文本'
+              value: "text",
+              label: "文本",
             },
             {
-              value: 'aLink',
-              label: '超链接按钮'
+              value: "editDelete",
+              label: "删除按钮",
             },
             {
-              value: 'button',
-              label: '按钮'
+              value: "editButton",
+              label: "查看按钮",
             },
             {
-              value: 'editTreeButtonGroup',
-              label: '编辑行按钮组'
-            }
-          ]
+              value: "aText",
+              label: "超链接文本",
+            },
+            {
+              value: "aLink",
+              label: "超链接按钮",
+            },
+            {
+              value: "button",
+              label: "按钮",
+            },
+            {
+              value: "editTreeButtonGroup",
+              label: "编辑行按钮组",
+            },
+            {
+              value: "widgetRender",
+              label: "自定义组件",
+            },
+          ],
         },
         {
-          label: '树控件',
+          label: "树控件",
           options: [
             {
-              value: 'addSiblingEditRow',
-              label: '新增兄弟节点'
+              value: "addSiblingEditRow",
+              label: "新增兄弟节点",
             },
             {
-              value: 'addChildTreeRow',
-              label: '新增子节点'
+              value: "addChildTreeRow",
+              label: "新增子节点",
             },
             {
-              value: 'moveUpRow',
-              label: '上移'
+              value: "moveUpRow",
+              label: "上移",
             },
             {
-              value: 'moveDownRow',
-              label: '下移'
+              value: "moveDownRow",
+              label: "下移",
             },
             {
-              value: 'removeTreeRow',
-              label: '删除树节点'
-            }
-          ]
+              value: "removeTreeRow",
+              label: "删除树节点",
+            },
+          ],
+        },
+
+        {
+          label: "业务模块",
+          options: businessOptions,
         },
         {
-          label: 'Date Format',
+          label: "Date Format",
           options: [
             {
-              value: 'd1',
-              label: 'yyyy-MM-dd'
+              value: "d1",
+              label: "yyyy-MM-dd",
             },
             {
-              value: 'd2',
-              label: 'yyyy/MM/dd'
+              value: "d2",
+              label: "yyyy/MM/dd",
             },
             {
-              value: 'd3',
-              label: 'yyyy年MM月dd日'
+              value: "d3",
+              label: "yyyy年MM月dd日",
             },
             {
-              value: 'd4',
-              label: 'yyyy-MM-dd HH:mm:ss'
+              value: "d4",
+              label: "yyyy-MM-dd HH:mm:ss",
             },
             {
-              value: 'd5',
-              label: 'yyyy-MM-dd hh:mm:ss'
-            }
-          ]
+              value: "d5",
+              label: "yyyy-MM-dd hh:mm:ss",
+            },
+          ],
         },
         {
-          label: 'Number Format',
+          label: "Number Format",
           options: [
             {
-              value: 'n1',
-              label: '###,###,###,##0.######'
+              value: "n1",
+              label: "###,###,###,##0.######",
             },
             {
-              value: 'n2',
-              label: '###,###,###,##0.00####'
+              value: "n2",
+              label: "###,###,###,##0.00####",
             },
             {
-              value: 'n3',
-              label: '###,###,###,##0.000000'
+              value: "n3",
+              label: "###,###,###,##0.000000",
             },
             {
-              value: 'n4',
-              label: '###,###,###,##0.000'
+              value: "n4",
+              label: "###,###,###,##0.000",
             },
             {
-              value: 'n5',
-              label: '###,###,###,##0.00'
+              value: "n5",
+              label: "###,###,###,##0.00",
             },
             {
-              value: 'n6',
-              label: '###,###,###,##0'
+              value: "n6",
+              label: "###,###,###,##0",
             },
             {
-              value: 'n7',
-              label: '###,##0.00##%'
-            }
-          ]
-        }
+              value: "n7",
+              label: "###,##0.00##%",
+            },
+          ],
+        },
       ],
       editOp: [
         {
-          value: 'editInput',
-          label: '文本输入框'
+          value: "editInput",
+          label: "文本输入框",
         },
         {
-          value: 'editNumber',
-          label: '数字输入框'
+          value: "editNumber",
+          label: "数字输入框",
         },
         {
-          value: 'editDate',
-          label: '日期输入框'
+          value: "editDate",
+          label: "日期输入框",
         },
         {
-          value: 'editSelect',
-          label: '下拉框'
+          value: "editSelect",
+          label: "下拉框",
         },
         {
-          value: 'editAttachment',
-          label: '附件'
+          value: "editAttachment",
+          label: "附件",
         },
         {
-          value: 'editSearch',
-          label: '搜索框'
-        }
+          value: "editSearch",
+          label: "搜索框",
+        },
       ],
       showRenderDialogFlag: !1,
-      renderJson: '',
+      renderJson: "",
       currentTableColumn: null,
+      sourceData: null,
 
       hideAfter: 1500,
       openDelay: 500,
-      tableData: [],//树形结构数据转的数组
+      tableData: [], //树形结构数据转的数组
       tableDataArray: [],
       dragSort: null,
-      columnFormatMap: {
-        editInput: 'input',
-        editNumber: 'number',
-        editDate: 'date',
-        editSelect: 'select',
-        editSearch: 'vabsearch',
-        editAttachment: 'baseAttachment',
-        editStatus: 'status',
-        aText: 'a-text',
-        aLink: 'a-link',
-        editDelete: 'a-link',
-        editButton: 'a-link',
-        button: 'button',
-        addSiblingEditRow: 'a-link',
-        addChildTreeRow: 'a-link',
-        moveUpRow: 'a-link',
-        moveDownRow: 'a-link',
-        removeTreeRow: 'a-link'
+      columnFormatMap,
+
+      showFormEventDialogFlag: false,
+      formEventHandlerCode: "",
+      curEventName: "",
+      curEventRow: null,
+
+      eventParamsMap: {
+        footerMethodConfg: "footerMethodConfg(dataId,formCode,param) {",
       },
-    }
+
+      showColumnRenderDialog: false,
+
+      editRowData: null,
+      rowData: null,
+      rowDataIndex: 0,
+      showRowEditDialog: false,
+    };
   },
   beforeDestroy() {
-    if (this.dragSort) this.dragSort.destroy()
-  },
-  created() {
-
+    if (this.dragSort) this.dragSort.destroy();
   },
+  created() {},
   mounted() {
     this.init();
   },
   methods: {
+    editFormEventHandler(row, index, eventName) {
+      this.curEventRow = row;
+      this.curEventName = eventName;
+      this.curEventIndex = index;
+      this.formEventHandlerCode = row[eventName];
+      this.showFormEventDialogFlag = true;
+    },
+
+    saveFormEventHandler() {
+      const codeHints = this.$refs.ecEditor.getEditorAnnotations();
+      let syntaxErrorFlag = false;
+      if (!!codeHints && codeHints.length > 0) {
+        codeHints.forEach((chItem) => {
+          if (chItem.type === "error") {
+            syntaxErrorFlag = true;
+          }
+        });
+
+        if (syntaxErrorFlag) {
+          this.$message.error(this.i18nt("designer.setting.syntaxCheckWarning"));
+          return;
+        }
+      }
+      this.curEventRow[this.curEventName] = this.formEventHandlerCode;
+      this.showFormEventDialogFlag = false;
+    },
     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, sourceData) {
+      this.currentTableColumn = row;
+      this.sourceData = sourceData;
+
+      // this.widgetList =
+
+      // this.designer.widgetList
+
+      this.showColumnRenderDialog = true;
+    },
+    confirmWidgetRenderDialog(widgetList) {
+      this.currentTableColumn.widgetList = widgetList;
+      this.showColumnRenderDialog = false;
+    },
     showRenderDialog: function (e) {
-      (this.currentTableColumn = e), (this.renderJson = e.render || ''), (this.showRenderDialogFlag = !0);
+      /*if(e.formatS == 'widgetRender'){
+        this.openWidgetRenderDialog(e);
+        return
+      }*/
+
+      (this.currentTableColumn = e),
+        (this.renderJson = e.render || ""),
+        (this.showRenderDialogFlag = !0);
     },
     saveColumnRender: function () {
-      this.$set(this.currentTableColumn, 'render', this.renderJson), (this.showRenderDialogFlag = !1);
+      this.$set(this.currentTableColumn, "render", this.renderJson),
+        (this.showRenderDialogFlag = !1);
     },
     closeHandle() {
-      this.$emit('update:visiable', false);
-      this.$emit('close');
+      this.$emit("update:visiable", false);
+      this.$emit("close");
     },
     // 添加同级节点
     onAddSibling(row, index) {
-      console.log('onAddSibling', row, index)
-      const parentId = row.parentId || null
+      console.log("onAddSibling", row, index);
+      const parentId = row.parentId || null;
       // 先判断是不是根节点
       if (!parentId) {
         // 当前节点直接添加
         // this.tableData.push(this.generateRow(parentId))
-        let addIndex = this.tableData.filter(item => !item.parentId).findIndex(item => item.columnId == row.columnId) + 1;
-        this.tableData.splice(addIndex, 0, this.generateRow(parentId))
+        let addIndex =
+          this.tableData
+            .filter((item) => !item.parentId)
+            .findIndex((item) => item.columnId == row.columnId) + 1;
+        this.tableData.splice(addIndex, 0, this.generateRow(parentId));
       } else {
-        this.handleAddOneRow(row, index, 'SIBLING')
+        this.handleAddOneRow(row, index, "SIBLING");
       }
     },
     // 添加子节点  todo
     onAddChild(row, index) {
-      this.handleAddOneRow(row, index, 'CHILD')
+      this.handleAddOneRow(row, index, "CHILD");
     },
     /**
      * 处理添加一行数据
@@ -548,36 +987,35 @@ export default {
      * @param {string} type 操作类型 SIBLING 同级 / CHILD 子级
      */
     handleAddOneRow(row, index, type) {
-
-      const {parentId, columnId} = row
-      const curId = type === 'SIBLING' ? parentId : columnId
-      let curRow = {}
+      const { parentId, columnId } = row;
+      const curId = type === "SIBLING" ? parentId : columnId;
+      let curRow = {};
       // 在 tableData 中，找到当前节点
       const findRow = (data) => {
         data.forEach((item) => {
           if (item.columnId === curId) {
-            curRow = item
+            curRow = item;
           }
           if (item.children && item.children.length) {
-            findRow(item.children)
+            findRow(item.children);
           }
-        })
-      }
+        });
+      };
 
-      findRow(this.tableData)
+      findRow(this.tableData);
 
-      const {columnId: generateParentId, children} = curRow
+      const { columnId: generateParentId, children } = curRow;
 
-      let newRow = this.generateRow(generateParentId)
+      let newRow = this.generateRow(generateParentId);
       if (children) {
-        if (type === 'SIBLING') {
-          let addIndex = children.findIndex(item => item.columnId == row.columnId) + 1;
-          children.splice(addIndex, 0, newRow)
+        if (type === "SIBLING") {
+          let addIndex = children.findIndex((item) => item.columnId == row.columnId) + 1;
+          children.splice(addIndex, 0, newRow);
         } else {
-          children.push(newRow)
+          children.push(newRow);
         }
       } else {
-        this.$set(curRow, 'children', [newRow])
+        this.$set(curRow, "children", [newRow]);
       }
     },
     getUuid() {
@@ -587,7 +1025,7 @@ export default {
      * 生成一行数据
      */
     generateRow(parentId) {
-      let tmpId = 'column' + generateId();
+      let tmpId = "column" + generateId();
       let uuid = this.getUuid();
       var row = {
         columnId: uuid,
@@ -597,46 +1035,50 @@ export default {
         width: 150,
         prop: tmpId,
         label: tmpId,
-        align: 'left',
+        align: "left",
         show: true,
         sortable: true,
-
+        filterable: true,
+        exportType: null,
+        footerDataType: null,
+        footerMethodConfg: null,
+        widgetList: [],
+        labelColor: null,
         // treeNode: false,
-
       };
       return row;
     },
     // 添加根节点
     onAddRoot() {
-      this.tableData.push(this.generateRow())
+      this.tableData.push(this.generateRow());
     },
     // 删除当前节点及对应子节点数据
     onDelete(row) {
-      const {parentId, columnId} = row
+      const { parentId, columnId } = row;
       // 根节点直接删除
       if (!parentId) {
-        const delIndex = this.tableData.findIndex((item) => item.columnId === columnId)
-        this.tableData.splice(delIndex, 1)
+        const delIndex = this.tableData.findIndex((item) => item.columnId === columnId);
+        this.tableData.splice(delIndex, 1);
       } else {
         // 找到父节点，通过父节点删除
-        let parentRow = {}
+        let parentRow = {};
         const findRow = (data) => {
           data.forEach((item) => {
             if (item.columnId === parentId) {
-              parentRow = {...item}
+              parentRow = { ...item };
             }
             if (item.children && item.children.length) {
-              findRow(item.children)
+              findRow(item.children);
             }
-          })
-        }
-        findRow(this.tableData)
+          });
+        };
+        findRow(this.tableData);
 
-        const {children} = parentRow
+        const { children } = parentRow;
 
-        const delIndex = children.findIndex((item) => item.columnId === columnId)
+        const delIndex = children.findIndex((item) => item.columnId === columnId);
 
-        children.splice(delIndex, 1)
+        children.splice(delIndex, 1);
       }
     },
     // 数据准备 生成 id 和 parentId
@@ -644,30 +1086,34 @@ export default {
       const tableFormat = (tableData, parentId) => {
         tableData.forEach((item) => {
           // item.parentId = parentId || null
-          if (!item.kid) item.kid = item.columnId
+          if (!item.kid) item.kid = item.columnId;
           if (item.children && item.children.length > 0) {
-            tableFormat(item.children, item.columnId)
+            tableFormat(item.children, item.columnId);
           }
-        })
-      }
+        });
+      };
 
-      tableFormat(data)
-      return data
+      tableFormat(data);
+      return data;
     },
     //drag begin
     //行拖拽
     rowDrop() {
-      if (this.dragSort) this.dragSort.destroy() // 防止在Dom上重复绑定事件
+      if (this.dragSort) this.dragSort.destroy(); // 防止在Dom上重复绑定事件
       // const tbody = document.querySelector('.drag .el-table__body-wrapper tbody');
-      var tbody = this.$refs.singleTable.$el.querySelectorAll('.el-table__fixed-body-wrapper > table > tbody')[0];
+      var tbody = this.$refs.singleTable.$el.querySelectorAll(
+        ".el-table__fixed-body-wrapper > table > tbody"
+      )[0];
       const _this = this;
       this.dragSort = Sortable.create(tbody, {
-        ghostClass: 'sortable-ghost',
+        ghostClass: "sortable-ghost",
+        // draggable: ".drag-option",    // 修改可拖拽元素
+        handle: ".drag-option", // 指定拖动按钮
         setData: function (e) {
-          e.setData('Text', '');
+          e.setData("Text", "");
         },
-        onEnd({newIndex, oldIndex}) {
-          _this.rowDropEnd(newIndex, oldIndex)
+        onEnd({ newIndex, oldIndex }) {
+          _this.rowDropEnd(newIndex, oldIndex);
         },
       });
     },
@@ -678,7 +1124,7 @@ export default {
       data.forEach((item) => {
         const loop = (data) => {
           result.push({
-            ...data
+            ...data,
           });
           let child = data.children;
           if (child) {
@@ -732,13 +1178,7 @@ export default {
       let newRow = this.tableDataArray[newIndex];
 
       //判断是否把该行 拖拽到 自己的底级中
-      if (
-        this.isTreeBottom(
-          this.tableData,
-          oldRow.columnId,
-          newRow.columnId
-        )
-      ) {
+      if (this.isTreeBottom(this.tableData, oldRow.columnId, newRow.columnId)) {
         this.$message({
           type: "error",
           message: "不能放到子节点",
@@ -784,72 +1224,106 @@ export default {
       let isButtontCell = false;
       let widgetType = this.columnFormatMap[formatS];
       if (widgetType) {
-        isButtontCell = widgetType === 'a-link' || widgetType === 'button';
+        isButtontCell = widgetType === "a-link" || widgetType === "button";
       }
       return isButtontCell;
     },
     //drag end
-    changeFormatS(row) {
-      let isButtontCell = this.getIsButtontCell(row.formatS);
-      let columnWidgetConfig = this.getColumnWidgetConfig(row, true);
-      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
-      if (columnSelectedWidget) {
-        row.columnOption = columnSelectedWidget.options;
-      } else {
-        row.columnOption = {}
-      }
-
-      if (row.formatS == 'editTreeButtonGroup') {
-        row.prop = null;
-        row.label = null;
-        row.sortable = false;
-        row.width = 150;
-      } else if (isButtontCell) {
-        if (row.formatS == 'aLink' || row.formatS == 'button') {
-          if (!row.width || row.width == 47) row.width = 150;
+    changeFormatS(row, isEdit) {
+      let formatS = isEdit ? row.editFormatS : row.formatS;
+      let isButtontCell = this.getIsButtontCell(formatS);
+      // let 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.width = 47;
+          row.columnOption = {};
+          row.widget = null;
         }
-        row.prop = null;
-        row.label = null;
-        row.sortable = false;
       } else {
-        let tmpId = 'column' + generateId();
-        if (!row.width || row.width == 47) row.width = 150;
-        if (!row.prop) row.prop = tmpId;
-        if (!row.label) row.label = tmpId;
-        row.sortable = true;
+        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;
+        }
+      }
 
-        if (row.formatS == 'editAttachment') {
-          row.prop = this.designer.createAttachmentKeyName();
+      if (!isEdit) {
+        if (row.formatS == "editTreeButtonGroup") {
+          row.prop = null;
+          row.label = null;
+          row.sortable = false;
+          row.width = 150;
+        } else if (isButtontCell) {
+          if (row.formatS == "aLink" || row.formatS == "button") {
+            if (!row.width || row.width == 47) row.width = 150;
+          } else {
+            row.width = 47;
+          }
+          row.prop = null;
+          row.label = null;
+          row.sortable = false;
         } else {
-          let attachmentPrefix = this.designer.getAttachmentPrefix();
-          row.prop = row.prop.replaceAll(attachmentPrefix, "");
+          let tmpId = "column" + generateId();
+          if (!row.width || row.width == 47) row.width = 150;
+          if (!row.prop) row.prop = tmpId;
+          if (!row.label) row.label = tmpId;
+
+          if (this.userFields.includes(row.formatS)) {
+            let item = this.businessOptions.find((item) => item.value == row.formatS);
+            if (item) {
+              row.prop = item.value;
+              row.label = item.label;
+            }
+          }
+
+          row.sortable = true;
+
+          if (!isEdit) {
+            if (formatS == "editAttachment") {
+              row.prop = columnSelectedWidget.options.keyName;
+            } else {
+              row.prop = row.prop.replaceAll(attachmentPrefix, "");
+            }
+          }
         }
       }
     },
     getColumnWidgetConfig(row, isChange, isEdit) {
-      let formatS = isEdit ? row.editFormatS : row.formatS
+      let formatS = isEdit ? row.editFormatS : row.formatS;
       let columnSelectedWidget = null;
       let columnEditFields = null;
 
       let type = this.columnFormatMap[formatS];
-      /*if (type == 'date') {
-        columnEditFields = ['type', 'format', 'valueFormat']
-      } else if (type == 'select') {
-
-      }
-      if (type == 'vabsearch') {
-        columnEditFields = ['vabSearchField', 'formCode', 'formVersion', 'required', 'showFormField', 'onSearchConfirm', 'onSearchClear']
-      }*/
 
       if (type) {
         // columnSelectedWidget = this.$baseLodash.cloneDeep(this.designer.getFieldWidgetByType(type));
-        columnSelectedWidget = this.designer.copyNewFieldWidget(this.designer.getFieldWidgetByType(type));
+        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;
@@ -859,61 +1333,70 @@ export default {
         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";
+          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;
 
-          if ('editDelete' == formatS) {
+          if ("editDelete" == formatS) {
             columnSelectedWidget.options.prefixIcon = "el-icon-delete";
             columnSelectedWidget.options.label = "删除";
             columnSelectedWidget.options.labelHidden = true;
             columnSelectedWidget.options.hiddenByWf = true;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nlet tableRef = this.getWidgetRef(this.parentWidget.options.name);\ntableRef.deleteRow(tableParam.row,tableParam.rowIndex);";
-          } else if ('editButton' == formatS) {
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nlet tableRef = this.getWidgetRef(this.parentWidget.options.name);\ntableRef.deleteRow(tableParam.row,tableParam.rowIndex);";
+          } else if ("editButton" == formatS) {
             columnSelectedWidget.options.prefixIcon = "el-icon-edit";
             columnSelectedWidget.options.label = "查看";
             columnSelectedWidget.options.labelHidden = true;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nlet tableRef = this.getWidgetRef(this.parentWidget.options.name);\ntableRef.openEditDialog(tableParam.row)";
-          } else if ('addSiblingEditRow' == formatS) {
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nlet tableRef = this.getWidgetRef(this.parentWidget.options.name);\ntableRef.openEditDialog(tableParam.row)";
+          } else if ("addSiblingEditRow" == formatS) {
             columnSelectedWidget.options.prefixIcon = "el-icon-plus";
             columnSelectedWidget.options.label = "新增兄弟节点";
             columnSelectedWidget.options.labelHidden = false;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nthis.getParentTarget().addSiblingTreeRow(null,tableParam);";
-          } else if ('addChildTreeRow' == formatS) {
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().addSiblingTreeRow(null,tableParam);";
+          } else if ("addChildTreeRow" == formatS) {
             columnSelectedWidget.options.prefixIcon = "el-icon-plus";
             columnSelectedWidget.options.label = "新增子节点";
             columnSelectedWidget.options.labelHidden = false;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nthis.getParentTarget().addChildTreeRow(null,tableParam);";
-          } else if ('moveUpRow' == formatS) {
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().addChildTreeRow(null,tableParam);";
+          } else if ("moveUpRow" == formatS) {
             // columnSelectedWidget.options.prefixIcon = "el-icon-plus";
             columnSelectedWidget.options.label = "↑上移";
             columnSelectedWidget.options.labelHidden = false;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nthis.getParentTarget().moveUpRow(tableParam);";
-          } else if ('moveDownRow' == formatS) {
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().moveUpRow(tableParam);";
+          } else if ("moveDownRow" == formatS) {
             // columnSelectedWidget.options.prefixIcon = "el-icon-plus";
             columnSelectedWidget.options.label = "↓下移";
             columnSelectedWidget.options.labelHidden = false;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nthis.getParentTarget().moveDownRow(tableParam);";
-          } else if ('removeTreeRow' == formatS) {
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().moveDownRow(tableParam);";
+          } else if ("removeTreeRow" == formatS) {
             columnSelectedWidget.options.prefixIcon = "el-icon-delete";
             columnSelectedWidget.options.label = "删除";
             columnSelectedWidget.options.labelHidden = true;
-            columnSelectedWidget.options.onClick = "let tableParam = this.tableParam;\nthis.getParentTarget().removeTreeRow(tableParam);";
+            columnSelectedWidget.options.onClick =
+              "let tableParam = this.tableParam;\nthis.getParentTarget().removeTreeRow(tableParam);";
           }
 
           columnOption = columnSelectedWidget.options;
-
         }
 
         // columnSelectedWidget.options.name = isEdit? (type + row.columnId) : row.prop;
         // columnSelectedWidget.options.name = type + row.columnId;
         // columnSelectedWidget.options.name = row.prop;
-        if (columnSelectedWidget.options.hasOwnProperty('keyName')) {
+        if (columnSelectedWidget.options.hasOwnProperty("keyName")) {
           columnSelectedWidget.options.keyName = row.prop;
           columnSelectedWidget.options.keyNameEnabled = true;
         } else {
@@ -925,10 +1408,69 @@ export default {
           columnSelectedWidget.options.labelHidden = true;
         }
       }
-      return {columnSelectedWidget, columnEditFields};
+      return { columnSelectedWidget, columnEditFields };
+    },
+    findColumnByColumnId(columnList, columnId) {
+      let result = null;
+      if (columnList) {
+        let column = columnList.find((item) => item.columnId == columnId);
+        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);
+            if (subColumn) {
+              result = subColumn;
+              break;
+            }
+          }
+        }
+      }
+      return result;
+    },
+
+    getRowWidget(row) {
+      let widget = row.widget;
+      if (!widget) {
+        widget.options.a = a;
+        widget.options.a = a;
+      }
+      return widget;
     },
     openFormatConfigDialog(row, index) {
-      let option = row.columnOption;
+      if (row.formatS == "widgetRender") {
+        let formWidgetList = deepClone(this.designer.widgetList);
+        let tableData = deepClone(this.tableData);
+        let columnId = row.columnId;
+
+        let dataTableName = this.optionModel.name;
+
+        let targetColumn = null;
+        loopHandleWidget(formWidgetList, (item) => {
+          if (item.options.name == dataTableName) {
+            item.options.tableColumns = tableData;
+            targetColumn = this.findColumnByColumnId(item.options.tableColumns, columnId);
+          }
+        });
+        let getWidgetList = (subWidgetList = []) => {
+          targetColumn.widgetList = this.$baseLodash.cloneDeep(subWidgetList);
+          return formWidgetList;
+        };
+        let sourceData = {
+          formWidgetList,
+          dataTableName,
+          columnId,
+          getWidgetList,
+        };
+
+        this.openWidgetRenderDialog(row, sourceData);
+        return;
+      }
+
+      /*let option = row.columnOption;
       let selectedWidget;
       let columnWidgetConfig = this.getColumnWidgetConfig(row);
       let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
@@ -936,35 +1478,45 @@ export default {
         option = columnSelectedWidget.options;
         selectedWidget = columnSelectedWidget;
       } else {
-        option = {}
+        option = {};
         selectedWidget = {};
       }
 
       let columnOption = this.$baseLodash.cloneDeep(option);
-      row.columnOption = columnOption;
+      row.columnOption = columnOption;*/
+      let selectedWidget = row.widget;
       this.operateIndex = index;
 
+      let tableColumns = this.tableData;
       this.openWidgetPropertyDialog({
         row: row,
         columnSelectedWidget: selectedWidget,
+        tableColumns,
         index: index,
-        columnEditFields: columnEditFields,
+        // columnEditFields: columnEditFields,
         callback: (columnOption) => {
-          this.confirmFormatConfigDialog(columnOption);
-        }
-      })
+          this.confirmFormatConfigDialog(columnOption, row);
+        },
+      });
     },
     getFieldKeyNameByOptions(options) {
       let o = options.name;
-      return (
-        (options.keyNameEnabled
-          && options.keyName)
-        || o
-      );
+      return (options.keyNameEnabled && options.keyName) || o;
     },
-    confirmFormatConfigDialog(columnOption) {
-      let row = this.tableData[this.operateIndex];
+    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();
+      }
+
       let isButtontCell = this.getIsButtontCell(row.formatS);
       if (!isButtontCell) {
         row.prop = this.getFieldKeyNameByOptions(columnOption);
@@ -973,74 +1525,137 @@ export default {
       }
     },
     openEditFormatConfigDialog(row, index) {
-      let option = row.columnOption;
-      let selectedWidget;
-      let columnWidgetConfig = this.getColumnWidgetConfig(row, null, true);
-      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
-      if (columnSelectedWidget) {
-        option = columnSelectedWidget.options;
-        selectedWidget = columnSelectedWidget;
-      } else {
-        option = {}
-        selectedWidget = {};
-      }
-
-      let columnOption = this.$baseLodash.cloneDeep(option);
-      row.editColumnOption = columnOption;
+      let selectedWidget = row.editWidget;
       this.operateIndex = index;
 
+      let tableColumns = this.tableData;
       this.openWidgetPropertyDialog({
         row: row,
+        tableColumns,
         columnSelectedWidget: selectedWidget,
         index: index,
-        columnEditFields: columnEditFields,
+        // columnEditFields: columnEditFields,
         callback: (columnOption) => {
-          this.confirmEditFormatConfigDialog(columnOption);
-        }
-      })
+          this.confirmEditFormatConfigDialog(columnOption, row);
+        },
+      });
     },
-    confirmEditFormatConfigDialog(columnOption) {
-      let row = this.tableData[this.operateIndex];
+    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;*/
     },
     openTableColumnConfigDialog(row, index) {
       this.operateIndex = index;
+      this.currentTableColumn = row;
       let eventName = "tableColumnConfig";
-      let eventParams = ["dataId", "formCode"]
-      this.tableColumnConfigHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`;
-      this.tableColumnConfigCode = this.$baseLodash.cloneDeep(row.tableColumnConfig || '');
+      let eventParams = ["dataId", "formCode"];
+      this.tableColumnConfigHeader = `${
+        this.optionModel.name
+      }.${eventName}(${eventParams.join(", ")}) {`;
+      this.tableColumnConfigCode = this.$baseLodash.cloneDeep(
+        row.tableColumnConfig || ""
+      );
 
       this.tableColumnConfigTitle = `自定义表格列属性配置(${row.label})`;
       this.showTableColumnConfigDialog = true;
     },
     saveTableColumnConfigDialog() {
-      let row = this.tableData[this.operateIndex];
+      // let row = this.tableData[this.operateIndex];
+      let row = this.currentTableColumn;
       const codeHints = this.$refs.ecEditor.getEditorAnnotations();
       let syntaxErrorFlag = false;
       if (!!codeHints && codeHints.length > 0) {
-        codeHints.forEach(chItem => {
-          if (chItem.type === 'error') {
+        codeHints.forEach((chItem) => {
+          if (chItem.type === "error") {
             syntaxErrorFlag = true;
           }
         });
 
         if (syntaxErrorFlag) {
-          this.$message.error(this.i18nt('designer.setting.syntaxCheckWarning'));
+          this.$message.error(this.i18nt("designer.setting.syntaxCheckWarning"));
           return;
         }
       }
-      this.$set(row, 'tableColumnConfig', this.$baseLodash.cloneDeep(this.tableColumnConfigCode))
+      this.$set(
+        row,
+        "tableColumnConfig",
+        this.$baseLodash.cloneDeep(this.tableColumnConfigCode)
+      );
       this.showTableColumnConfigDialog = false;
+    },
+    changeRowLabel(row) {
+      this.setRowWidgetAttars(row, "label", row.label);
+    },
+    changeRowProp(row) {
+      this.setRowWidgetAttars(row, "keyName", row.prop);
+    },
+    changeRowRequired(row) {
+      this.setRowWidgetAttars(row, "required", row.required);
+    },
+    setRowWidgetAttars(row, key, value) {
+      let type1 = this.columnFormatMap[row.formatS];
+      let type2 = this.columnFormatMap[row.editFormatS];
+      let newWidget = type1
+        ? this.designer.copyNewFieldWidget(this.designer.getFieldWidgetByType(type1))
+        : null;
+
+      let newEditWidget = type2
+        ? this.designer.copyNewFieldWidget(this.designer.getFieldWidgetByType(type2))
+        : null;
 
+      if (newWidget.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.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;
+        }
+      }
     },
-  }
-}
+    openRowEditDialog(row, index) {
+      this.editRowData = row;
+      this.rowData = this.$baseLodash.cloneDeep(row);
+      this.rowDataIndex = index;
+      this.showRowEditDialog = true;
+    },
+    submitRowEditDialog() {
+      Object.assign(this.editRowData, this.$baseLodash.cloneDeep(this.rowData));
+      // this.editRowData = this.$baseLodash.cloneDeep(this.rowData);
+      this.showRowEditDialog = false;
+    },
+    closeRowEditDialog() {
+      this.showRowEditDialog = false;
+    },
+  },
+};
 </script>
 <style scoped lang="scss">
 .icon-drag:before {
-  content: '\e61d';
+  content: "\e61d";
 }
 </style>