imatrix-ui 0.2.3-up → 0.2.4-up

package/packages/super-grid/src/normal-column.vue

@@ -1,1221 +1,1224 @@
-<template>
-  <el-table-column
-    :fixed="fixed"
-    :sortable="sortable"
-    :filters="filters"
-    :filter-method="filterMethod"
-    :prop="column.prop"
-    :width="getColumnWidth()"
-    :align="align"
-    :header-align="headerAlign"
-    :class-name="column.prop"
-  >
-    <template v-slot:header>
-      <span :class="{ is_req: isFieldRequired() }"
-        ><span
-          class="cell--span required__label"
-          :title="$escapeHtml(label)"
-          v-html="$escapeHtml(label)"
-      /></span>
-	    <el-icon v-if="isShowAdd" @click="createFormSubTableRow" style="font-size: 20px; color: #409eff"><CirclePlus /></el-icon>
-    </template>
-    <template v-slot="scope">
-      <!--添加:key="column.prop+'_'+scope.$index"是为了解决多行是行编辑状态时新建的记录的文本框内有值的问题-->
-      <dynamic-input
-        v-if="lineEdit.editable && isEditable && scope.row.$editing"
-        v-model:value="scope.row[column.prop]"
-        :type="column.componentType"
-        :position="{
-          row: scope.$index,
-          prop: column.prop,
-        }"
-        :list-toolbar-form-data="listToolbarFormData"
-        :line-edit="lineEdit"
-        :options="column.valueSet"
-        :row="scope.row"
-        :column="column"
-        :list-code="listCode"
-        :is-sql="isSql"
-        :row-index="scope.$index"
-        :class="isRequired(scope.row.$editing) ? 'm-requried' : ''"
-        @findIndex="findIndex(scope.$index)"
-        @focus="onFocus(scope.$index)"
-        @refresData="refresData"
-        @refresPortData="refresPortData"
-        @refresPortsData="refresPortsData"
-        @refresMainTableFields="refresMainTableFields"
-        @prohibitToEdit="prohibitToEdit"
-      />
-      <span v-else>
-        <span v-if="column.operations" class="grid-operation-buttons">
-          <span
-            v-for="(operation, operationIndex) in column.operations"
-            :key="operationIndex"
-            class="cell--span"
-          >
-            <el-dropdown
-              v-if="operation.isGroup"
-              :size="
-                operation.buttons && operation.buttons.length > 0
-                  ? operation.buttons[0].props.size
-                  : 'small'
-              "
-              style="padding-left: 10px"
-              split-button
-              @command="handleCommand"
-            >
-              {{ $escapeHtml(operation.label) }}
-              <template v-slot:dropdown>
-                <el-dropdown-menu>
-                  <span
-                    v-for="(buttonChild, buttonChildIndex) in operation.buttons"
-                    :key="buttonChild.props.code + buttonChildIndex"
-                  >
-                    <el-dropdown-item
-                      v-permission="buttonChild.props.permission"
-                      :command="
-                        beforeHandleCommand(
-                          buttonChild.props.code,
-                          scope.row,
-                          scope.$index
-                        )
-                      "
-                      :disabled="preventReclick"
-                    >
-                      {{
-                        $escapeHtml(
-                          buttonChild.props.label
-                            ? buttonChild.props.label
-                            : buttonChild.props.code === 'search'
-                            ? $t('superPageMessage.searchButtonLabel')
-                            : ''
-                        )
-                      }}
-                    </el-dropdown-item>
-                  </span>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-            <row-operation
-              v-else
-              :operation-setting="operation.props"
-              :label="
-                operation.props.label
-                  ? operation.props.label
-                  : scope.row[column.prop]
-              "
-              :operation-index="operationIndex"
-              :entity="scope.row"
-              :editing="scope.row.$editing"
-              :column="column"
-              :row-index="scope.$index"
-              :is-show="operation.isShow"
-              :on-click="operation.onClick"
-            />
-          </span>
-        </span>
-        <span
-          v-else-if="
-            customFormatValue(
-              scope.row,
-              column.prop,
-              customFormat,
-              scope.$index
-            )
-          "
-          class="cell--span"
-        >
-          <component
-            :is="column.prop + scope.$index"
-            :row="scope.row"
-            :entity="scope.row"
-            :prop="column.prop"
-            :parent="parentFormData"
-            :row-index="scope.$index"
-            :show-value="$escapeHtml(getLabel(scope.row, scope.$index))"
-            :value="getCellValue(scope.row)"
-            :select-options="column.valueSet"
-          />
-        </span>
-        <!-- 自定义格式的时候 -->
-        <span
-          v-else-if="
-            columnFormatter !== undefined &&
-            columnFormatter.type !== undefined &&
-            columnFormatter.type === 'customControl' &&
-            columnFormatter.options &&
-            columnFormatter.options.format &&
-            columnFormatter.options.format !== ''
-          "
-          class="cell--span"
-        >
-          <!--:key="column.prop+'_'+scope.$index+'_'+currentPage" 为了解决子表分页时，新增自动跳转到下一页，第一条记录的自定义控件被复用，导致业务逻辑没执行 -->
-          <component
-            :is="columnFormatter.options.format"
-            :key="column.prop + '_' + scope.$index + '_' + currentPage"
-            :disabled="true"
-            :row="pageGridData[scope.$index]"
-            :entity="pageGridData[scope.$index]"
-            :prop="column.prop"
-            :parent="parentFormData"
-            :row-index="scope.$index"
-            :get-form-data="getFormData"
-            :get-grid-data="getTableGridData"
-            :show-value="
-              $escapeHtml(getLabel(pageGridData[scope.$index], scope.$index))
-            "
-            :value="getCellValue(pageGridData[scope.$index])"
-            :select-options="column.valueSet"
-            :grid-data="gridData"
-            :page-grid-data="pageGridData"
-            :current-page="currentPage"
-        /></span>
-        <span
-          v-else-if="
-            columnFormatter !== undefined &&
-            columnFormatter.type !== undefined &&
-            columnFormatter.type === 'secretInfo'
-          "
-          :id="column.prop + 'DomData' + scope.$index"
-          class="cell--span"
-        >
-          <secret-info
-            :entity="scope.row"
-            :prop="column.prop"
-            :value="getCellValue(scope.row)"
-            :table-name="tableName"
-            :list-code="listCode"
-            :page-code="pageCode"
-            :list-name="listName"
-            :field-label="$escapeHtml(label)"
-          />
-        </span>
-        <span v-else-if="isObjectProp(column.prop)">
-          <span v-if="column.componentType === 'annex'" type="primary">
-            <span
-              v-if="isShowOverflowTooltip"
-              :id="column.prop + 'DomData' + scope.$index"
-              :title="$escapeHtml(getLabel(scope.row))"
-              :style="{ width: cellWidth + 'px' }"
-              class="ellipsis cell--span"
-            >
-              <span v-if="$escapeHtml(getLabel(scope.row, scope.$index))">
-                <el-icon @click="previewImg(scope.row)" class="annex-cell"><el-icon-zoom-in /></el-icon>
-              </span>
-              {{ $escapeHtml(getLabel(scope.row, scope.$index)) }}
-            </span>
-            <span
-              v-else
-              :id="column.prop + 'DomData' + scope.$index"
-              class="cell--span"
-            >
-              <span v-if="$escapeHtml(getLabel(scope.row, scope.$index))">
-                <el-icon class="annex-cell" @click="previewImg(scope.row)"><el-icon-zoom-in /></el-icon>
-              </span>
-              {{ $escapeHtml(getLabel(scope.row, scope.$index)) }}
-            </span>
-          </span>
-          <span
-            v-else-if="column.formatter && column.formatter.type === 'files'"
-            type="primary"
-          >
-            <span
-              v-if="isShowOverflowTooltip"
-              :id="column.prop + 'DomData' + scope.$index"
-              :title="$escapeHtml(getLabel(scope.row))"
-              :style="{ width: cellWidth + 'px' }"
-              class="ellipsis cell--span"
-            >
-              <span v-if="$escapeHtml(getLabel(scope.row, scope.$index))">
-                <el-icon @click="previewImg(scope.row)" class="annex-cell"><el-icon-zoom-in /></el-icon>
-              </span>
-              {{ $escapeHtml(getLabel(scope.row, scope.$index)) }}
-            </span>
-            <span
-              v-else
-              :id="column.prop + 'DomData' + scope.$index"
-              class="cell--span"
-            >
-              <span v-if="$escapeHtml(getLabel(scope.row, scope.$index))">
-                <el-icon @click="previewImg(scope.row)" class="annex-cell"><el-icon-zoom-in /></el-icon>
-              </span>
-              {{ $escapeHtml(getLabel(scope.row, scope.$index)) }}
-            </span>
-          </span>
-          <el-link
-            v-else-if="
-              columnFormatter !== undefined &&
-              columnFormatter.type !== undefined &&
-              columnFormatter.type === 'hyperlinks' &&
-              getMyHyperLinkSetting(scope.row).visible === true
-            "
-            type="primary"
-            @click="clickHyperLink(column, scope.row, listCode, scope.$index)"
-          >
-            <span
-              v-if="isShowOverflowTooltip"
-              :id="column.prop + 'DomData' + scope.$index"
-              :title="getMyHyperLinkSetting(scope.row).title"
-              :style="{ width: cellWidth + 'px' }"
-              class="ellipsis cell--span"
-              >{{ getMyHyperLinkSetting(scope.row).label
-              }}<i
-                v-if="getMyHyperLinkSetting(scope.row).icon"
-                :class="getMyHyperLinkSetting(scope.row).icon"
-            /></span>
-            <span
-              v-else
-              :id="column.prop + 'DomData' + scope.$index"
-              class="cell--span"
-              >{{ getMyHyperLinkSetting(scope.row).label
-              }}<i
-                v-if="getMyHyperLinkSetting(scope.row).icon"
-                :class="getMyHyperLinkSetting(scope.row).icon"
-            /></span>
-          </el-link>
-          <span
-            v-else-if="isShowOverflowTooltip"
-            :id="column.prop + 'DomData' + scope.$index"
-            :title="$escapeHtml(getLabel(scope.row))"
-            :style="{ width: cellWidth + 'px' }"
-            class="ellipsis cell--span"
-            >{{ $escapeHtml(getLabel(scope.row, scope.$index)) }}</span
-          >
-          <span
-            v-else
-            :id="column.prop + 'DomData' + scope.$index"
-            class="cell--span"
-            >{{ $escapeHtml(getLabel(scope.row, scope.$index)) }}</span
-          >
-        </span>
-        <span v-else>
-          <span
-            v-if="
-              column.componentType === 'annex' ||
-              column.componentType === 'multipartUpload'
-            "
-            type="primary"
-          >
-            <span
-              v-if="isShowOverflowTooltip"
-              :id="column.prop + 'DomData' + scope.$index"
-              :title="$escapeHtml(getLabel(scope.row))"
-              :style="{ width: cellWidth + 'px' }"
-              class="ellipsis cell--span"
-            >
-              <FsPreview
-                :label="$escapeHtml(getLabel(scope.row, scope.$index))"
-                :entity="scope.row"
-                :file-set-obj="JSON.parse(column.fileSet)"
-                :is-sql="isSql"
-              />
-            </span>
-            <span
-              v-else
-              :id="column.prop + 'DomData' + scope.$index"
-              class="cell--span"
-            >
-              <FsPreview
-                :label="$escapeHtml(getLabel(scope.row, scope.$index))"
-                :entity="scope.row"
-                :file-set-obj="JSON.parse(column.fileSet)"
-                :is-sql="isSql"
-              />
-            </span>
-          </span>
-          <span
-            v-else-if="column.formatter && column.formatter.type === 'files'"
-          >
-            <span
-              v-if="isShowOverflowTooltip"
-              :id="column.prop + 'DomData' + scope.$index"
-              :title="$escapeHtml(getLabel(scope.row))"
-              :style="{ width: cellWidth + 'px' }"
-              class="ellipsis cell--span"
-            >
-              <span v-if="$escapeHtml(getLabel(scope.row, scope.$index))">
-                <el-icon @click="previewImg(scope.row)" class="annex-cell"><el-icon-zoom-in /></el-icon>
-              </span>
-              {{ $escapeHtml(getLabel(scope.row, scope.$index)) }}
-            </span>
-            <span
-              v-else
-              :id="column.prop + 'DomData' + scope.$index"
-              class="cell--span"
-            >
-              <span v-if="$escapeHtml(getLabel(scope.row, scope.$index))">
-                <el-icon @click="previewImg(scope.row)" class="annex-cell"><el-icon-zoom-in /></el-icon>
-              </span>
-              {{ $escapeHtml(getLabel(scope.row, scope.$index)) }}
-            </span>
-          </span>
-          <!-- 超链接 -->
-          <el-link
-            v-else-if="
-              columnFormatter !== undefined &&
-              columnFormatter.type !== undefined &&
-              columnFormatter.type === 'hyperlinks' &&
-              getMyHyperLinkSetting(scope.row).visible === true
-            "
-            type="primary"
-            @click="clickHyperLink(column, scope.row, listCode, scope.$index)"
-          >
-            <span
-              v-if="isShowOverflowTooltip"
-              :id="column.prop + 'DomData' + scope.$index"
-              :title="$escapeHtml(getMyHyperLinkSetting(scope.row).title)"
-              :style="{ width: cellWidth + 'px' }"
-              class="ellipsis cell--span"
-              >{{ $escapeHtml(getMyHyperLinkSetting(scope.row).label)
-              }}<i
-                v-if="getMyHyperLinkSetting(scope.row).icon"
-                :class="getMyHyperLinkSetting(scope.row).icon"
-            /></span>
-            <span
-              v-else
-              :id="column.prop + 'DomData' + scope.$index"
-              class="cell--span"
-              >{{ $escapeHtml(getMyHyperLinkSetting(scope.row).label)
-              }}<i
-                v-if="getMyHyperLinkSetting(scope.row).icon"
-                :class="getMyHyperLinkSetting(scope.row).icon"
-            /></span>
-          </el-link>
-          <!-- 富文本 -->
-          <span
-            v-else-if="
-              column.formatter && column.formatter.type === 'richEditor'
-            "
-          >
-            <el-tooltip
-              :content="$t('superGrid.show')"
-              class="item"
-              effect="dark"
-              placement="top"
-            >
-              <em
-                class="fa fa-info-circle annex-cell"
-                @click="showRichEditorContent(scope.row, column, getHeader())"
-              />
-            </el-tooltip>
-          </span>
-          <span
-            v-else-if="column.formatter && column.formatter.type === 'icon'"
-          >
-            <i
-              v-if="getFormatIconSetting(formatConfig).position === 'pre'"
-              :class="getFormatIconSetting(formatConfig).icon"
-            />
-            <span
-              v-if="formatConfig.displayTextJudge"
-              :id="column.prop + 'DomData' + scope.$index"
-              class="cell--span"
-              >{{ $escapeHtml(getFormatIconSetting(scope.row).label) }}
-            </span>
-            <i
-              v-if="getFormatIconSetting(formatConfig).position === 'suf'"
-              :class="getFormatIconSetting(formatConfig).icon"
-            />
-          </span>
-          <span
-            v-else-if="isShowOverflowTooltip"
-            :id="column.prop + 'DomData' + scope.$index"
-            :title="getLabel(scope.row)"
-            :style="{ width: cellWidth + 'px' }"
-            style="white-space: pre"
-            class="ellipsis cell--span"
-            v-html="$escapeHtml(getLabel(scope.row, scope.$index))"
-          />
-          <span
-            v-else
-            :id="column.prop + 'DomData' + scope.$index"
-            class="cell--span"
-            >{{ $escapeHtml(getLabel(scope.row, scope.$index)) }}</span
-          >
-        </span>
-      </span>
-    </template>
-  </el-table-column>
-	<view-image-dialog
-			v-if="showSingleImgFlag"
-			:file-list="fileList"
-			@close="showSingleImgFlag = false"
-	/>
-	<rich-editor-viewer
-			v-if="showRichEditorViewer"
-			ref="richEditorViewerRef"
-			@closeRichEditorContent="closeRichEditorContent"
-	/>
-</template>
-
-<script>
-import {
-	CirclePlus as ElIconCirclePlusOutline,
-	ZoomIn as ElIconZoomIn,
-} from '@element-plus/icons-vue'
-import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
-import { getColumnValues, isRequiredEdit } from './utils'
-import DynamicInput from './dynamic-input.vue'
-import store from './store'
-import { ArrowKeyAction, isHasEditOption, getFileList } from './utils'
-import { doFormatWithValueSet } from './formatter'
-import customFormatter from './custom-formatter'
-import RowOperation from './row-operation.vue'
-import apis from './apis'
-import { mapGetters } from 'vuex'
-import {
-  getEntityFieldValue,
-  getParentObjectUtil,
-} from '../../../src/utils/util'
-import ViewImageDialog from './view-image-dialog.vue'
-import eventBus from './eventBus'
-import { isDynamicDataSourceSource } from './utils'
-import FsPreview from '../../fs-preview'
-import RichEditorViewer from '../../rich-editor/viewer.vue'
-export default {
-  components: {
-    DynamicInput,
-    RowOperation,
-    ViewImageDialog,
-    FsPreview,
-    RichEditorViewer,
-    ElIconCirclePlusOutline,
-    ElIconZoomIn,
-  },
-  name: 'NormalColumn',
-  props: {
-    column: {
-      type: Object,
-      default: null,
-    },
-    customFormat: {
-      type: Function,
-      default: null,
-    },
-    listCode: {
-      type: String,
-      default: null,
-    },
-    isSql: {
-      type: Boolean,
-      default: false,
-    },
-    newWidth: {
-      type: Number,
-      default: null,
-    },
-    dragColumnProp: {
-      type: String,
-      default: null,
-    },
-    tableName: {
-      type: String,
-      default: null,
-    },
-    pageCode: {
-      type: String,
-      default: null,
-    },
-    listName: {
-      type: String,
-      default: null,
-    },
-    currentPage: {
-      type: Number,
-      default: 1,
-    },
-    gridData: {
-      type: Array,
-      default: null,
-    },
-    pageGridData: {
-      type: Array,
-      default: null,
-    },
-    listToolbarFormData: {
-      type: Object,
-      default: null,
-    },
-  },
-  data() {
-    let parentFormData
-    const gridParams = store.get(this.listCode)
-    if (
-      gridParams.options.extraParam &&
-      gridParams.options.extraParam.entityMap
-    ) {
-      parentFormData = gridParams.options.extraParam.entityMap
-    }
-    return {
-      selectRow: null,
-      that: this,
-      align: 'left', // 文本内容对齐
-      headerAlign: 'left', // 表头对齐方式
-      columnFormatter: this.column.formatter,
-      hyperLinks: {},
-      fileDownType: '',
-      isFormSubTable: false, // 是否是表单子表
-      subTableCanAdd: true, // 表单子表时是否有新增权限
-      isShowAdd: false, // 是否显示表头的新增按钮
-      cellWidth: null,
-      parentFormData,
-      fileMultiple: false, // 附件上传是否多选
-      showSingleImgFlag: false,
-      singleImgSrc: '',
-      fileList: [],
-      index: null,
-      isEditable: this.column.editable,
-      showRichEditorViewer: false,
-      formatConfig: {},
-      getFormData: gridParams.options.getFormData,
-      getTableGridData: gridParams.options.getGridData,
-    }
-  },
-  computed: {
-    filters() {
-      if (this.column.filterable) {
-        const gridParams = store.get(this.listCode)
-        const values = getColumnValues(gridParams.gridData, this.column.prop)
-        const filters = []
-        for (const value of values) {
-          filters.push({
-            text: value,
-            value,
-          })
-        }
-        return filters
-      } else {
-        return null
-      }
-    },
-    filterMethod() {
-      if (this.column.filterable) {
-        return this.filterHandler
-      } else {
-        return null
-      }
-    },
-    fixed() {
-      if (
-        (this.column.fixed && this.column.fixed === 'false') ||
-        this.column.fixed === undefined ||
-        this.column.fixed === ''
-      ) {
-        return false
-      }
-      if (
-        this.column.prop === 'operation' &&
-        this.column.fixed &&
-        this.column.fixed === 'left'
-      ) {
-        // 操作列居右固定
-        return 'right'
-      }
-      return this.column.fixed
-    },
-    sortable() {
-      const gridParams = store.get(this.listCode)
-      if (
-        gridParams &&
-        gridParams.options &&
-        gridParams.options.isFormSubTable &&
-        gridParams.options.showOperationButton
-      ) {
-        return false
-      }
-      if (
-        this.column.sortable === 'false' ||
-        this.column.sortable === false ||
-        this.column.sortable === ''
-      ) {
-        return false
-      } else if (
-        this.column.sortable === 'true' ||
-        this.column.sortable === true
-      ) {
-        return 'custom'
-      }
-      if (this.column.sortable) {
-        return 'custom'
-      } else {
-        return false
-      }
-    },
-    lineEdit() {
-      let isLineEdit = false
-      if (this.listCode) {
-        const gridParams = store.get(this.listCode)
-        if (gridParams.lineEdit !== null && gridParams.lineEdit !== undefined) {
-          isLineEdit = gridParams.lineEdit
-        } else {
-          isLineEdit = false
-        }
-      }
-      return isLineEdit
-    },
-
-    ...mapGetters(['preventReclick']),
-  },
-  watch: {
-    isSql: {
-      deep: true,
-
-      handler(newValue, oldValue) {
-        this.isSql = newValue
-      },
-    },
-    newWidth: {
-      deep: true,
-
-      handler(newValue, oldValue) {
-        if (
-          newValue !== undefined &&
-          newValue !== null &&
-          this.dragColumnProp &&
-          this.dragColumnProp === this.column.prop
-        ) {
-          this.cellWidth = newValue
-        }
-      },
-    },
-  },
-  created() {
-    if (this.column.width) {
-      this.cellWidth = this.column.width - 10
-    }
-    const gridParams = store.get(this.listCode)
-    if (gridParams && gridParams.options && gridParams.options.isFormSubTable) {
-      this.isFormSubTable = gridParams.options.isFormSubTable
-    }
-    if (
-      gridParams &&
-      gridParams.options &&
-      gridParams.options.subTableCanAdd !== undefined &&
-      gridParams.options.subTableCanAdd !== null
-    ) {
-      this.subTableCanAdd = gridParams.options.subTableCanAdd
-    }
-    if (this.column.prop && this.column.prop === 'operation') {
-      // 如果是操作列按钮则不显示省略号
-      this.isShowOverflowTooltip = false
-    } else {
-      if (
-        typeof gridParams.options.showOverflowTooltip !== 'undefined' &&
-        gridParams.options.showOverflowTooltip === false
-      ) {
-        this.isShowOverflowTooltip = false
-      } else {
-        this.isShowOverflowTooltip = true
-      }
-    }
-    if (typeof gridParams.options.align !== 'undefined') {
-      this.align = gridParams.options.align
-    } else if (this.column.contAlign && this.column.contAlign !== '') {
-      this.align = this.column.contAlign
-    }
-    if (typeof gridParams.options.headerAlign !== 'undefined') {
-      this.headerAlign = gridParams.options.headerAlign
-    } else if (this.column.titleAlign && this.column.titleAlign !== '') {
-      this.headerAlign = this.column.titleAlign
-    } else {
-      // 如果没有配置表头对齐方式，默认使用内容对齐方式
-      this.headerAlign = 'left'
-    }
-    if (
-      gridParams.isHasDynamic === undefined &&
-      this.column.dynamic !== undefined &&
-      this.column.dynamic === true
-    ) {
-      // 当前列表中有动态列
-      gridParams.isHasDynamic = true
-    }
-    this.label = this.getHeader()
-    if (this.column.operations) {
-      // console.log('this.column.operations', this.column.operations)
-    }
-    // console.log('gridParams.options.subTableCanAdd=', gridParams.options.subTableCanAdd, 'this.subTableCanAdd=', this.subTableCanAdd)
-    this.isShowAdd =
-      this.isFormSubTable &&
-      this.column.prop === 'operation' &&
-      this.subTableCanAdd &&
-      gridParams.options &&
-      gridParams.options.showOperationButton
-    if (
-      this.column.fileSet &&
-      this.column.fileSet !== '' &&
-      this.column.componentType === 'annex'
-    ) {
-      const fileSetObj = JSON.parse(this.column.fileSet)
-      if (fileSetObj && fileSetObj.multiple) {
-        this.fileMultiple = true
-      }
-    }
-    if (
-      this.column.formatter &&
-      this.column.formatter.options &&
-      this.column.formatter.options.format
-    ) {
-      this.formatConfig = JSON.parse(this.column.formatter.options.format)
-    }
-  },
-  mounted() {
-    // 监听保存时点击按钮事件线触发
-    $on(eventBus, 'un-edit', (param) => {
-      // 处理多选选项组问题保存问题
-      if (
-        this.column.componentType &&
-        (this.column.componentType === 'multiselect' ||
-          this.column.componentType === 'select')
-      ) {
-        const isDynamic = isDynamicDataSourceSource(this.column)
-        if (!isDynamic) {
-          // 选项组保存时将数组处理为字符串
-          const beforeColumnValue = param.row[this.column.prop]
-          if (
-            beforeColumnValue &&
-            Object.prototype.toString.apply(beforeColumnValue) ===
-              '[object Array]'
-          ) {
-            // 如果是数组才需要转换
-            param.row[this.column.prop] = beforeColumnValue.join(',')
-          }
-        } else {
-          // 动态数据源多选保存时，获取已选择的字段，由于多选选项组的值是数组，保存时要拼接成“ ，” 分隔的字符串
-          if ('_dynamic-source-data-' + this.column.prop in this.column) {
-            const temp = this.column['_dynamic-source-data-' + this.column.prop]
-            const valueSetOptions = temp.valueSetOptions
-            // 获取当前字段对应在映射关系中对应的是动态数据源中的哪一个字段key
-            let selectDataKey
-            for (let i = 0; i < valueSetOptions.length; i++) {
-              const valueSetOption = valueSetOptions[i]
-              if (
-                this.column.prop === valueSetOption.valueColumn.dbColumnName
-              ) {
-                selectDataKey = valueSetOption.columnName
-                break
-              }
-            }
-            if (selectDataKey) {
-              // beforeColumnValue是数组值，如果是单选则是字符串
-              let beforeColumnValue = param.row[this.column.prop]
-              if (this.column.componentType === 'select') {
-                if (selectDataKey !== temp.valueAttribute) {
-                  // 解决当前字段不是动态数据源选项值所映射的字段的问题 例如当前字段是工厂名称， 动态数据源选项值是工厂编码
-                  beforeColumnValue = temp.optionItems.find(
-                    (item) =>
-                      // 当前字段映射的是工厂名称，
-                      // 筛选动态数据源选项值字段对应的当前字段所映射的字段， 例如 根据工厂编码找工厂编码对应的工厂名称
-                      // 找出名称后赋值给当前字段
-                      item[temp.valueAttribute] === beforeColumnValue
-                  )[selectDataKey]
-                }
-                // 如果是单选
-                // 现在选择时已经赋值，不再需要这里进行赋值
-                // temp.optionItems.forEach(optionItem => {
-                //   if (optionItem[temp.valueAttribute] === beforeColumnValue) {
-                //     this.$set(param.row, this.column.prop, optionItem[selectDataKey])
-                //   }
-                // })
-                param.row[this.column.prop] = beforeColumnValue
-              } else {
-                // 如果是多选，join  “ ，” ， 并给row赋值
-                // 现在选择时已经赋值，不再需要这里进行赋值
-                // const afterColumnValue = []
-                // temp.optionItems.forEach(optionItem => {
-                //   beforeColumnValue.forEach(value => {
-                //     if (optionItem[temp.valueAttribute] === value) {
-                //       afterColumnValue.push(optionItem[selectDataKey])
-                //     }
-                //   })
-                // })
-                if (
-                  beforeColumnValue &&
-                  selectDataKey !== temp.valueAttribute
-                ) {
-                  // 解决当前字段不是动态数据源选项值所映射的字段的问题 例如当前字段是工厂名称， 动态数据源选项值是工厂编码
-                  const t = []
-                  beforeColumnValue.forEach((selectItem) => {
-                    if (selectDataKey !== temp.valueAttribute) {
-                      t.push(
-                        temp.optionItems.find(
-                          (option) => option[temp.valueAttribute] === selectItem
-                        )[selectDataKey]
-                      )
-                    }
-                  })
-                  beforeColumnValue = t
-                }
-                param.row[this.column.prop] = beforeColumnValue.join(',')
-              }
-            }
-          } else {
-            const beforeColumnValue = param.row[this.column.prop]
-            if (
-              beforeColumnValue &&
-              Object.prototype.toString.apply(beforeColumnValue) ===
-                '[object Array]'
-            ) {
-              // 如果是数组才需要转换
-              param.row[this.column.prop] = beforeColumnValue.join(',')
-            }
-          }
-        }
-      }
-    })
-  },
-  unmounted() {
-    $off(eventBus, 'un-edit')
-  },
-  methods: {
-    ...customFormatter,
-    ...apis,
-    getHeader() {
-      if (!this.column.titleValueSet) {
-        return this.column.label.replace(/\\n/g, '</br>')
-      } else {
-        return this.formatHeader()
-      }
-    },
-    formatHeader() {
-      return doFormatWithValueSet(
-        this.column.titleValueSetValue,
-        this.column.label
-      )
-    },
-    filterHandler(value, row, column) {
-      const property = column['property']
-      return row[property] === value
-    },
-    onFocus(index) {
-      const gridParams = store.get(this.listCode)
-      if (gridParams.lineEdit.editingCell) {
-        gridParams.lineEdit.editingCell.row = index
-        gridParams.lineEdit.editingCell.prop = this.column.prop
-      }
-    },
-    findIndex(index) {
-      this.index = index
-      const gridParams = store.get(this.listCode)
-      if (gridParams.lineEdit.editingCell) {
-        gridParams.lineEdit.editingCell.row = index
-        gridParams.lineEdit.editingCell.prop = this.column.prop
-      }
-    },
-    refresData(data) {
-      $emit(this, 'refresData', data)
-    },
-    refresPortData(port, value) {
-      const gridParams = store.get(this.listCode)
-      console.log('gridParams', gridParams)
-      console.log('this.index', this.index)
-      if (
-        gridParams &&
-        gridParams.lineEdit &&
-        gridParams.lineEdit.editingCell
-      ) {
-        $emit(
-          this,
-          'refresPortData',
-          port,
-          value,
-          gridParams.lineEdit.editingCell.row
-        )
-      } else {
-        $emit(this, 'refresPortData', port, value, this.index)
-      }
-    },
-    refresPortsData(map) {
-      const gridParams = store.get(this.listCode)
-      console.log('gridParams', gridParams)
-      console.log('this.index', this.index)
-      if (
-        gridParams &&
-        gridParams.lineEdit &&
-        gridParams.lineEdit.editingCell
-      ) {
-        $emit(this, 'refresPortsData', map, gridParams.lineEdit.editingCell.row)
-      } else {
-        $emit(this, 'refresPortsData', map, this.index)
-      }
-    },
-    refresMainTableFields(map) {
-      $emit(this, 'refresMainTableFields', map)
-    },
-    // @keyup.native.left="move('left')"
-    // @keyup.native.right="move('right')"
-    // @keyup.native.up="move('up')"
-    // @keyup.native.down="move('down')"
-    move(direction) {
-      if (direction === 'left') {
-        const prop = ArrowKeyAction.getLeftColumn(this.column.prop)
-        const gridParams = store.get(this.listCode)
-        gridParams.lineEdit.editingCell.prop = prop
-      }
-    },
-    // filterHandler(value, row, column) {
-    //   const property = column['property']
-    //   return row[property] === value
-    // },
-    isSaveByEnter() {
-      const gridParams = store.get(this.listCode)
-      return (
-        typeof gridParams.options.lineEditOptions.isSaveByEnter ===
-          'undefined' ||
-        (isHasEditOption('isSaveByEnter', this.listCode) &&
-          gridParams.options.lineEditOptions.isSaveByEnter === true)
-      )
-    },
-    isRestoreByEsc() {
-      const gridParams = store.get(this.listCode)
-      return (
-        typeof gridParams.options.lineEditOptions.isRestoreByEsc ===
-          'undefined' ||
-        (isHasEditOption('isRestoreByEsc', this.listCode) &&
-          gridParams.options.lineEditOptions.isRestoreByEsc === true)
-      )
-    },
-    canFocus(index) {
-      const gridParams = store.get(this.listCode)
-      if (
-        index === gridParams.lineEdit.editingCell.row &&
-        this.column.prop === gridParams.lineEdit.editingCell.prop
-      ) {
-        return true
-      } else {
-        return false
-      }
-    },
-    getLabel(row, index) {
-      this.transferColumnDataToUpperCase(row)
-      const obj = this.objectPropValueTwo(row, this.column)
-      // // 存储执行时间
-      // const get2 = new Date().getTime()
-      // const get3 = Number(get2) - Number(get1)
-      // if (!window.sessionStorage.getItem('getLabel')) {
-      //   window.sessionStorage.setItem('getLabel', get3)
-      // } else {
-      //   const get4 = window.sessionStorage.getItem('getLabel')
-      //   const get5 = Number(get4) + Number(get3)
-      //   window.sessionStorage.setItem('getLabel', get5)
-      // }
-      return obj
-      // const returnValue = this.objectPropValueTwo(row, this.column)
-      // if (returnValue) {
-      //   // 解决当文本中有多个空格时候， vue自动将多个空格合并为一个空格，
-      //   // 或者修改vue的配置 https://cn.vuejs.org/api/application.html#app-config-compileroptions   app.config.compilerOptions.whitespace
-      //   return returnValue.replaceAll(' ', '\u00A0')
-      // }
-      // return returnValue
-    },
-    getCellValue(row) {
-      let cellValue = getEntityFieldValue(row, this.column.prop, false)
-      if (cellValue === undefined || cellValue === null) {
-        this.transferColumnDataToUpperCase(row)
-        cellValue = getEntityFieldValue(row, this.column.prop, false)
-      }
-      return cellValue
-    },
-    // 兼容oracle和mysql数据库，oracle是字段名是大写的，mysql是小写的，将小写转为大写
-    transferColumnDataToUpperCase(row) {
-      const reg1 = /[A-Z]+/ // 大写字母
-      if (this.isSql && reg1.test(this.column.prop)) {
-        this.transferColumnDataToUpperCaseWithProp(
-          row,
-          this.column.prop.toLowerCase(),
-          this.column.prop
-        )
-      }
-    },
-    transferColumnDataToUpperCaseWithProp(row, propLowerCase, columnProp) {
-      let dataModel
-      if (propLowerCase && propLowerCase.indexOf('.') > 0) {
-        const parentObj = getParentObjectUtil(propLowerCase, row)
-        const prop = propLowerCase.substring(propLowerCase.lastIndexOf('.') + 1)
-        dataModel = parentObj[prop]
-        if (dataModel !== undefined) {
-          // sql字段名小写转大写，兼容mysql、oracle数据库
-          parentObj[columnProp] = dataModel
-          delete parentObj[prop]
-        }
-      } else {
-        dataModel = row[propLowerCase]
-        if (dataModel !== undefined) {
-          // sql字段名小写转大写，兼容mysql、oracle数据库
-          row[columnProp] = dataModel
-          delete row[propLowerCase]
-        }
-      }
-      return dataModel
-    },
-    getMyHyperLinkSetting(row) {
-      this.transferColumnDataToUpperCase(row)
-      const gridParams = store.get(this.listCode)
-      let tableName
-      if (
-        gridParams &&
-        gridParams.basicInfo &&
-        gridParams.basicInfo.tableName
-      ) {
-        tableName = gridParams.basicInfo.tableName
-      }
-      const hyperLinkResult = this.getHyperLinkSetting(
-        this.column,
-        row,
-        this.isSql,
-        gridParams.additionalParamMap,
-        gridParams.contextParameter,
-        tableName,
-        this.listCode
-      )
-      hyperLinkResult.icon = this.getHyperIconClass(hyperLinkResult)
-      return hyperLinkResult
-    },
-    getHyperIconClass(hyperLinkResult) {
-      let iconName
-      if (
-        hyperLinkResult &&
-        hyperLinkResult !== null &&
-        hyperLinkResult.icon &&
-        hyperLinkResult.icon !== ''
-      ) {
-        iconName = hyperLinkResult.icon
-      }
-      if (iconName && iconName.indexOf('fa-') === 0) {
-        // 表示以“fa-”开头，使用font-awesome中的图标
-        iconName = 'fa ' + iconName
-      }
-      return iconName
-    },
-    createFormSubTableRow() {
-      console.log('触发了行新建')
-      this.createRow(this.listCode)
-    },
-    handleCommand(comman) {
-      let prop = null
-      this.column.operations.forEach((item) => {
-        if (item.isGroup) {
-          item.buttons.forEach((button) => {
-            if (button.props.code === comman.comman) {
-              prop = button
-            }
-          })
-        }
-      })
-      if (prop) {
-        customFormatter.onClickFun(
-          comman.row,
-          this.column,
-          prop.onClick,
-          comman.rowIndex
-        )
-      }
-    },
-    beforeHandleCommand(comman, row, rowIndex) {
-      return {
-        comman: comman,
-        row: row,
-        rowIndex: rowIndex,
-      }
-    },
-    previewImg(row) {
-      this.fileList = getFileList(row, this.column, this.isSql)
-      this.showSingleImgFlag = true
-    },
-    getFileList(row) {
-      return getFileList(row, this.column, this.isSql)
-    },
-    getColumnWidth() {
-      if (
-        this.column &&
-        this.column.prop === 'operation' &&
-        !this.column.width
-      ) {
-        // 表示操作列，宽度固定
-        return '210'
-      }
-      return this.column.width ? this.column.width + '' : '130'
-    },
-    // 设置字段禁止编辑
-    fnProhibitToEdit(isEditable) {
-      this.isEditable = isEditable
-    },
-    // 设置字段禁止编辑
-    prohibitToEdit(entity) {
-      $emit(this, 'prohibitToEdit', entity)
-    },
-    isFieldRequired() {
-      return isRequiredEdit(this.column, this.listCode)
-      // return true
-    },
-    // 展示富文本内容
-    showRichEditorContent(row, column, header) {
-      this.showRichEditorViewer = true
-      this.$nextTick(() => {
-        this.$refs.richEditorViewerRef.showContent(row[column.prop], header)
-      })
-    },
-    closeRichEditorContent() {
-      this.showRichEditorViewer = false
-    },
-    isRequired(editing) {
-      if (
-        !this.isFormSubTable &&
-        this.lineEdit.editable &&
-        this.isEditable &&
-        editing &&
-        this.column.validations
-      ) {
-        if (this.column.validations.indexOf('"required":true') > 0) {
-          return true
-        }
-      }
-      return false
-    },
-    getFormatIconSetting(row) {
-      this.transferColumnDataToUpperCase(row)
-      const gridParams = store.get(this.listCode)
-      const result = this.getIconSetting(
-        this.column,
-        row,
-        this.isSql,
-        gridParams,
-        this.listCode
-      )
-      result.icon = this.getHyperIconClass(result)
-      if (
-        this.column.formatter.options &&
-        this.column.formatter.options.format
-      ) {
-        result.position = JSON.parse(
-          this.column.formatter.options.format
-        ).position
-      }
-      return result
-    },
-  },
-  emits: [
-    'refresData',
-    'refresPortData',
-    'refresPortsData',
-    'refresMainTableFields',
-    'prohibitToEdit',
-    ,
-  ],
-}
-</script>
-
-<style lang="scss" scoped>
-.annex-cell {
-  padding-right: 5px;
-  cursor: pointer;
-  color: #409eff;
-}
-.m-requried {
-  float: left;
-  white-space: nowrap;
-}
-.m-requried::after {
-  content: '*';
-  color: #f56c6c;
-}
-</style>
+<template>
+  <el-table-column
+    :fixed="fixed"
+    :sortable="sortable"
+    :filters="filters"
+    :filter-method="filterMethod"
+    :prop="column.prop"
+    :width="getColumnWidth()"
+    :align="align"
+    :header-align="headerAlign"
+    :class-name="column.prop"
+  >
+    <template v-slot:header>
+      <span :class="{ is_req: isFieldRequired() }"
+        ><span
+          class="cell--span required__label"
+          :title="$escapeHtml(label)"
+          v-html="$escapeHtml(label)"
+      /></span>
+	    <el-icon v-if="isShowAdd" @click="createFormSubTableRow" style="font-size: 20px; color: #409eff"><CirclePlus /></el-icon>
+    </template>
+    <template v-slot="scope">
+      <!--添加:key="column.prop+'_'+scope.$index"是为了解决多行是行编辑状态时新建的记录的文本框内有值的问题-->
+      <dynamic-input
+        v-if="lineEdit.editable && isEditable && scope.row.$editing"
+        v-model:value="scope.row[column.prop]"
+        :type="column.componentType"
+        :position="{
+          row: scope.$index,
+          prop: column.prop,
+        }"
+        :list-toolbar-form-data="listToolbarFormData"
+        :line-edit="lineEdit"
+        :options="column.valueSet"
+        :row="scope.row"
+        :column="column"
+        :list-code="listCode"
+        :is-sql="isSql"
+        :row-index="scope.$index"
+        :class="isRequired(scope.row.$editing) ? 'm-requried' : ''"
+        @findIndex="findIndex(scope.$index)"
+        @focus="onFocus(scope.$index)"
+        @refresData="refresData"
+        @refresPortData="refresPortData"
+        @refresPortsData="refresPortsData"
+        @refresMainTableFields="refresMainTableFields"
+        @prohibitToEdit="prohibitToEdit"
+      />
+      <span v-else>
+        <span v-if="column.operations" class="grid-operation-buttons">
+          <span
+            v-for="(operation, operationIndex) in column.operations"
+            :key="operationIndex"
+            class="cell--span"
+          >
+            <el-dropdown
+              v-if="operation.isGroup"
+              :size="
+                operation.buttons && operation.buttons.length > 0
+                  ? operation.buttons[0].props.size
+                  : 'small'
+              "
+              style="padding-left: 10px"
+              split-button
+              @command="handleCommand"
+            >
+              {{ $escapeHtml(operation.label) }}
+              <template v-slot:dropdown>
+                <el-dropdown-menu>
+                  <span
+                    v-for="(buttonChild, buttonChildIndex) in operation.buttons"
+                    :key="buttonChild.props.code + buttonChildIndex"
+                  >
+                    <el-dropdown-item
+                      v-permission="buttonChild.props.permission"
+                      :command="
+                        beforeHandleCommand(
+                          buttonChild.props.code,
+                          scope.row,
+                          scope.$index
+                        )
+                      "
+                      :disabled="preventReclick"
+                    >
+                      {{
+                        $escapeHtml(
+                          buttonChild.props.label
+                            ? buttonChild.props.label
+                            : buttonChild.props.code === 'search'
+                            ? $t('superPageMessage.searchButtonLabel')
+                            : ''
+                        )
+                      }}
+                    </el-dropdown-item>
+                  </span>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <row-operation
+              v-else
+              :operation-setting="operation.props"
+              :label="
+                operation.props.label
+                  ? operation.props.label
+                  : scope.row[column.prop]
+              "
+              :operation-index="operationIndex"
+              :entity="scope.row"
+              :editing="scope.row.$editing"
+              :column="column"
+              :row-index="scope.$index"
+              :is-show="operation.isShow"
+              :on-click="operation.onClick"
+            />
+          </span>
+        </span>
+        <span
+          v-else-if="
+            customFormatValue(
+              scope.row,
+              column.prop,
+              customFormat,
+              scope.$index
+            )
+          "
+          class="cell--span"
+        >
+          <component
+            :is="column.prop + scope.$index"
+            :row="scope.row"
+            :entity="scope.row"
+            :prop="column.prop"
+            :parent="parentFormData"
+            :row-index="scope.$index"
+            :show-value="$escapeHtml(getLabel(scope.row, scope.$index))"
+            :value="getCellValue(scope.row)"
+            :select-options="column.valueSet"
+          />
+        </span>
+        <!-- 自定义格式的时候 -->
+        <span
+          v-else-if="
+            columnFormatter !== undefined &&
+            columnFormatter.type !== undefined &&
+            columnFormatter.type === 'customControl' &&
+            columnFormatter.options &&
+            columnFormatter.options.format &&
+            columnFormatter.options.format !== ''
+          "
+          class="cell--span"
+        >
+          <!--:key="column.prop+'_'+scope.$index+'_'+currentPage" 为了解决子表分页时，新增自动跳转到下一页，第一条记录的自定义控件被复用，导致业务逻辑没执行 -->
+          <component
+            :is="columnFormatter.options.format"
+            :key="column.prop + '_' + scope.$index + '_' + currentPage"
+            :disabled="true"
+            :row="pageGridData[scope.$index]"
+            :entity="pageGridData[scope.$index]"
+            :prop="column.prop"
+            :parent="parentFormData"
+            :row-index="scope.$index"
+            :get-form-data="getFormData"
+            :get-grid-data="getTableGridData"
+            :show-value="
+              $escapeHtml(getLabel(pageGridData[scope.$index], scope.$index))
+            "
+            :value="getCellValue(pageGridData[scope.$index])"
+            :select-options="column.valueSet"
+            :grid-data="gridData"
+            :page-grid-data="pageGridData"
+            :current-page="currentPage"
+        /></span>
+        <span
+          v-else-if="
+            columnFormatter !== undefined &&
+            columnFormatter.type !== undefined &&
+            columnFormatter.type === 'secretInfo'
+          "
+          :id="column.prop + 'DomData' + scope.$index"
+          class="cell--span"
+        >
+          <secret-info
+            :entity="scope.row"
+            :prop="column.prop"
+            :value="getCellValue(scope.row)"
+            :table-name="tableName"
+            :list-code="listCode"
+            :page-code="pageCode"
+            :list-name="listName"
+            :field-label="$escapeHtml(label)"
+          />
+        </span>
+        <span v-else-if="isObjectProp(column.prop)">
+          <span v-if="column.componentType === 'annex'" type="primary">
+            <span
+              v-if="isShowOverflowTooltip"
+              :id="column.prop + 'DomData' + scope.$index"
+              :title="$escapeHtml(getLabel(scope.row))"
+              :style="{ width: cellWidth + 'px' }"
+              class="ellipsis cell--span"
+            >
+              <span v-if="$escapeHtml(getLabel(scope.row, scope.$index))">
+                <el-icon @click="previewImg(scope.row)" class="annex-cell"><el-icon-zoom-in /></el-icon>
+              </span>
+              {{ $escapeHtml(getLabel(scope.row, scope.$index)) }}
+            </span>
+            <span
+              v-else
+              :id="column.prop + 'DomData' + scope.$index"
+              class="cell--span"
+            >
+              <span v-if="$escapeHtml(getLabel(scope.row, scope.$index))">
+                <el-icon class="annex-cell" @click="previewImg(scope.row)"><el-icon-zoom-in /></el-icon>
+              </span>
+              {{ $escapeHtml(getLabel(scope.row, scope.$index)) }}
+            </span>
+          </span>
+          <span
+            v-else-if="column.formatter && column.formatter.type === 'files'"
+            type="primary"
+          >
+            <span
+              v-if="isShowOverflowTooltip"
+              :id="column.prop + 'DomData' + scope.$index"
+              :title="$escapeHtml(getLabel(scope.row))"
+              :style="{ width: cellWidth + 'px' }"
+              class="ellipsis cell--span"
+            >
+              <span v-if="$escapeHtml(getLabel(scope.row, scope.$index))">
+                <el-icon @click="previewImg(scope.row)" class="annex-cell"><el-icon-zoom-in /></el-icon>
+              </span>
+              {{ $escapeHtml(getLabel(scope.row, scope.$index)) }}
+            </span>
+            <span
+              v-else
+              :id="column.prop + 'DomData' + scope.$index"
+              class="cell--span"
+            >
+              <span v-if="$escapeHtml(getLabel(scope.row, scope.$index))">
+                <el-icon @click="previewImg(scope.row)" class="annex-cell"><el-icon-zoom-in /></el-icon>
+              </span>
+              {{ $escapeHtml(getLabel(scope.row, scope.$index)) }}
+            </span>
+          </span>
+          <el-link
+            v-else-if="
+              columnFormatter !== undefined &&
+              columnFormatter.type !== undefined &&
+              columnFormatter.type === 'hyperlinks' &&
+              getMyHyperLinkSetting(scope.row).visible === true
+            "
+            type="primary"
+            @click="clickHyperLink(column, scope.row, listCode, scope.$index)"
+          >
+            <span
+              v-if="isShowOverflowTooltip"
+              :id="column.prop + 'DomData' + scope.$index"
+              :title="getMyHyperLinkSetting(scope.row).title"
+              :style="{ width: cellWidth + 'px' }"
+              class="ellipsis cell--span"
+              >{{ getMyHyperLinkSetting(scope.row).label
+              }}<i
+                v-if="getMyHyperLinkSetting(scope.row).icon"
+                :class="getMyHyperLinkSetting(scope.row).icon"
+            /></span>
+            <span
+              v-else
+              :id="column.prop + 'DomData' + scope.$index"
+              class="cell--span"
+              >{{ getMyHyperLinkSetting(scope.row).label
+              }}<i
+                v-if="getMyHyperLinkSetting(scope.row).icon"
+                :class="getMyHyperLinkSetting(scope.row).icon"
+            /></span>
+          </el-link>
+          <span
+            v-else-if="isShowOverflowTooltip"
+            :id="column.prop + 'DomData' + scope.$index"
+            :title="$escapeHtml(getLabel(scope.row))"
+            :style="{ width: cellWidth + 'px' }"
+            class="ellipsis cell--span"
+            >{{ $escapeHtml(getLabel(scope.row, scope.$index)) }}</span
+          >
+          <span
+            v-else
+            :id="column.prop + 'DomData' + scope.$index"
+            class="cell--span"
+            >{{ $escapeHtml(getLabel(scope.row, scope.$index)) }}</span
+          >
+        </span>
+        <span v-else>
+          <span
+            v-if="
+              column.componentType === 'annex' ||
+              column.componentType === 'multipartUpload'
+            "
+            type="primary"
+          >
+            <span
+              v-if="isShowOverflowTooltip"
+              :id="column.prop + 'DomData' + scope.$index"
+              :title="$escapeHtml(getLabel(scope.row))"
+              :style="{ width: cellWidth + 'px' }"
+              class="ellipsis cell--span"
+            >
+              <FsPreview
+                :label="$escapeHtml(getLabel(scope.row, scope.$index))"
+                :entity="scope.row"
+                :file-set-obj="JSON.parse(column.fileSet)"
+                :is-sql="isSql"
+              />
+            </span>
+            <span
+              v-else
+              :id="column.prop + 'DomData' + scope.$index"
+              class="cell--span"
+            >
+              <FsPreview
+                :label="$escapeHtml(getLabel(scope.row, scope.$index))"
+                :entity="scope.row"
+                :file-set-obj="JSON.parse(column.fileSet)"
+                :is-sql="isSql"
+              />
+            </span>
+          </span>
+          <span
+            v-else-if="column.formatter && column.formatter.type === 'files'"
+          >
+            <span
+              v-if="isShowOverflowTooltip"
+              :id="column.prop + 'DomData' + scope.$index"
+              :title="$escapeHtml(getLabel(scope.row))"
+              :style="{ width: cellWidth + 'px' }"
+              class="ellipsis cell--span"
+            >
+              <span v-if="$escapeHtml(getLabel(scope.row, scope.$index))">
+                <el-icon @click="previewImg(scope.row)" class="annex-cell"><el-icon-zoom-in /></el-icon>
+              </span>
+              {{ $escapeHtml(getLabel(scope.row, scope.$index)) }}
+            </span>
+            <span
+              v-else
+              :id="column.prop + 'DomData' + scope.$index"
+              class="cell--span"
+            >
+              <span v-if="$escapeHtml(getLabel(scope.row, scope.$index))">
+                <el-icon @click="previewImg(scope.row)" class="annex-cell"><el-icon-zoom-in /></el-icon>
+              </span>
+              {{ $escapeHtml(getLabel(scope.row, scope.$index)) }}
+            </span>
+          </span>
+          <!-- 超链接 -->
+          <el-link
+            v-else-if="
+              columnFormatter !== undefined &&
+              columnFormatter.type !== undefined &&
+              columnFormatter.type === 'hyperlinks' &&
+              getMyHyperLinkSetting(scope.row).visible === true
+            "
+            type="primary"
+            @click="clickHyperLink(column, scope.row, listCode, scope.$index)"
+          >
+            <span
+              v-if="isShowOverflowTooltip"
+              :id="column.prop + 'DomData' + scope.$index"
+              :title="$escapeHtml(getMyHyperLinkSetting(scope.row).title)"
+              :style="{ width: cellWidth + 'px' }"
+              class="ellipsis cell--span"
+              >{{ $escapeHtml(getMyHyperLinkSetting(scope.row).label)
+              }}<i
+                v-if="getMyHyperLinkSetting(scope.row).icon"
+                :class="getMyHyperLinkSetting(scope.row).icon"
+            /></span>
+            <span
+              v-else
+              :id="column.prop + 'DomData' + scope.$index"
+              class="cell--span"
+              >{{ $escapeHtml(getMyHyperLinkSetting(scope.row).label)
+              }}<i
+                v-if="getMyHyperLinkSetting(scope.row).icon"
+                :class="getMyHyperLinkSetting(scope.row).icon"
+            /></span>
+          </el-link>
+          <!-- 富文本 -->
+          <span
+            v-else-if="
+              column.formatter && column.formatter.type === 'richEditor'
+            "
+          >
+            <el-tooltip
+              :content="$t('superGrid.show')"
+              class="item"
+              effect="dark"
+              placement="top"
+            >
+              <em
+                class="fa fa-info-circle annex-cell"
+                @click="showRichEditorContent(scope.row, column, getHeader())"
+              />
+            </el-tooltip>
+          </span>
+          <span
+            v-else-if="column.formatter && column.formatter.type === 'icon'"
+          >
+            <i
+              v-if="getFormatIconSetting(formatConfig).position === 'pre'"
+              :class="getFormatIconSetting(formatConfig).icon"
+            />
+            <span
+              v-if="formatConfig.displayTextJudge"
+              :id="column.prop + 'DomData' + scope.$index"
+              class="cell--span"
+              >{{ $escapeHtml(getFormatIconSetting(scope.row).label) }}
+            </span>
+            <i
+              v-if="getFormatIconSetting(formatConfig).position === 'suf'"
+              :class="getFormatIconSetting(formatConfig).icon"
+            />
+          </span>
+          <span
+            v-else-if="isShowOverflowTooltip"
+            :id="column.prop + 'DomData' + scope.$index"
+            :title="getLabel(scope.row)"
+            :style="{ width: cellWidth + 'px' }"
+            style="white-space: pre"
+            class="ellipsis cell--span"
+            v-html="$escapeHtml(getLabel(scope.row, scope.$index))"
+          />
+          <span
+            v-else
+            :id="column.prop + 'DomData' + scope.$index"
+            class="cell--span"
+            >{{ $escapeHtml(getLabel(scope.row, scope.$index)) }}</span
+          >
+        </span>
+      </span>
+    </template>
+  </el-table-column>
+	<view-image-dialog
+			v-if="showSingleImgFlag"
+			:file-list="fileList"
+			@close="showSingleImgFlag = false"
+	/>
+	<rich-editor-viewer
+			v-if="showRichEditorViewer"
+			ref="richEditorViewerRef"
+			@closeRichEditorContent="closeRichEditorContent"
+	/>
+</template>
+
+<script>
+import {
+	CirclePlus as ElIconCirclePlusOutline,
+	ZoomIn as ElIconZoomIn,
+} from '@element-plus/icons-vue'
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import { getColumnValues, isRequiredEdit } from './utils'
+import DynamicInput from './dynamic-input.vue'
+import store from './store'
+import { ArrowKeyAction, isHasEditOption, getFileList } from './utils'
+import { doFormatWithValueSet } from './formatter'
+import customFormatter from './custom-formatter'
+import RowOperation from './row-operation.vue'
+import apis from './apis'
+import { mapGetters } from 'vuex'
+import {
+  getEntityFieldValue,
+  getParentObjectUtil,
+} from '../../../src/utils/util'
+import ViewImageDialog from './view-image-dialog.vue'
+import eventBus from './eventBus'
+import { isDynamicDataSourceSource } from './utils'
+import FsPreview from '../../fs-preview'
+import RichEditorViewer from '../../rich-editor/viewer.vue'
+export default {
+  components: {
+    DynamicInput,
+    RowOperation,
+    ViewImageDialog,
+    FsPreview,
+    RichEditorViewer,
+    ElIconCirclePlusOutline,
+    ElIconZoomIn,
+  },
+  name: 'NormalColumn',
+  props: {
+    column: {
+      type: Object,
+      default: null,
+    },
+    customFormat: {
+      type: Function,
+      default: null,
+    },
+    listCode: {
+      type: String,
+      default: null,
+    },
+    isSql: {
+      type: Boolean,
+      default: false,
+    },
+    newWidth: {
+      type: Number,
+      default: null,
+    },
+    dragColumnProp: {
+      type: String,
+      default: null,
+    },
+    tableName: {
+      type: String,
+      default: null,
+    },
+    pageCode: {
+      type: String,
+      default: null,
+    },
+    listName: {
+      type: String,
+      default: null,
+    },
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+    gridData: {
+      type: Array,
+      default: null,
+    },
+    pageGridData: {
+      type: Array,
+      default: null,
+    },
+    listToolbarFormData: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    let parentFormData
+    const gridParams = store.get(this.listCode)
+    if (
+      gridParams.options.extraParam &&
+      gridParams.options.extraParam.entityMap
+    ) {
+      parentFormData = gridParams.options.extraParam.entityMap
+    }
+    return {
+      selectRow: null,
+      that: this,
+      align: 'left', // 文本内容对齐
+      headerAlign: 'left', // 表头对齐方式
+      columnFormatter: this.column.formatter,
+      hyperLinks: {},
+      fileDownType: '',
+      isFormSubTable: false, // 是否是表单子表
+      subTableCanAdd: true, // 表单子表时是否有新增权限
+      isShowAdd: false, // 是否显示表头的新增按钮
+      cellWidth: null,
+      parentFormData,
+      fileMultiple: false, // 附件上传是否多选
+      showSingleImgFlag: false,
+      singleImgSrc: '',
+      fileList: [],
+      index: null,
+      isEditable: this.column.editable,
+      showRichEditorViewer: false,
+      formatConfig: {},
+      getFormData: gridParams.options.getFormData,
+      getTableGridData: gridParams.options.getGridData,
+    }
+  },
+  computed: {
+    filters() {
+      if (this.column.filterable) {
+        const gridParams = store.get(this.listCode)
+        const values = getColumnValues(gridParams.gridData, this.column.prop)
+        const filters = []
+        for (const value of values) {
+          filters.push({
+            text: value,
+            value,
+          })
+        }
+        return filters
+      } else {
+        return null
+      }
+    },
+    filterMethod() {
+      if (this.column.filterable) {
+        return this.filterHandler
+      } else {
+        return null
+      }
+    },
+    fixed() {
+      if (
+        (this.column.fixed && this.column.fixed === 'false') ||
+        this.column.fixed === undefined ||
+        this.column.fixed === ''
+      ) {
+        return false
+      }
+      if (
+        this.column.prop === 'operation' &&
+        this.column.fixed &&
+        this.column.fixed === 'left'
+      ) {
+        // 操作列居右固定
+        return 'right'
+      }
+      return this.column.fixed
+    },
+    sortable() {
+      const gridParams = store.get(this.listCode)
+      if (
+        gridParams &&
+        gridParams.options &&
+        gridParams.options.isFormSubTable &&
+        gridParams.options.showOperationButton
+      ) {
+        return false
+      }
+      if (
+        this.column.sortable === 'false' ||
+        this.column.sortable === false ||
+        this.column.sortable === ''
+      ) {
+        return false
+      } else if (
+        this.column.sortable === 'true' ||
+        this.column.sortable === true
+      ) {
+        return 'custom'
+      }
+      if (this.column.sortable) {
+        return 'custom'
+      } else {
+        return false
+      }
+    },
+    lineEdit() {
+      let isLineEdit = false
+      if (this.listCode) {
+        const gridParams = store.get(this.listCode)
+        if (gridParams.lineEdit !== null && gridParams.lineEdit !== undefined) {
+          isLineEdit = gridParams.lineEdit
+        } else {
+          isLineEdit = false
+        }
+      }
+      return isLineEdit
+    },
+
+    ...mapGetters(['preventReclick']),
+  },
+  watch: {
+    isSql: {
+      deep: true,
+
+      handler(newValue, oldValue) {
+        this.isSql = newValue
+      },
+    },
+    newWidth: {
+      deep: true,
+
+      handler(newValue, oldValue) {
+        if (
+          newValue !== undefined &&
+          newValue !== null &&
+          this.dragColumnProp &&
+          this.dragColumnProp === this.column.prop
+        ) {
+          this.cellWidth = newValue
+        }
+      },
+    },
+  },
+  created() {
+    if (this.column.width) {
+      this.cellWidth = this.column.width - 10
+    }
+    const gridParams = store.get(this.listCode)
+    if (gridParams && gridParams.options && gridParams.options.isFormSubTable) {
+      this.isFormSubTable = gridParams.options.isFormSubTable
+    }
+    if (
+      gridParams &&
+      gridParams.options &&
+      gridParams.options.subTableCanAdd !== undefined &&
+      gridParams.options.subTableCanAdd !== null
+    ) {
+      this.subTableCanAdd = gridParams.options.subTableCanAdd
+    }
+    if (this.column.prop && this.column.prop === 'operation') {
+      // 如果是操作列按钮则不显示省略号
+      this.isShowOverflowTooltip = false
+    } else {
+      if (
+        typeof gridParams.options.showOverflowTooltip !== 'undefined' &&
+        gridParams.options.showOverflowTooltip === false
+      ) {
+        this.isShowOverflowTooltip = false
+      } else {
+        this.isShowOverflowTooltip = true
+      }
+    }
+    if (typeof gridParams.options.align !== 'undefined') {
+      this.align = gridParams.options.align
+    } else if (this.column.contAlign && this.column.contAlign !== '') {
+      this.align = this.column.contAlign
+    }
+    if (typeof gridParams.options.headerAlign !== 'undefined') {
+      this.headerAlign = gridParams.options.headerAlign
+    } else if (this.column.titleAlign && this.column.titleAlign !== '') {
+      this.headerAlign = this.column.titleAlign
+    } else {
+      // 如果没有配置表头对齐方式，默认使用内容对齐方式
+      this.headerAlign = 'left'
+    }
+    if (
+      gridParams.isHasDynamic === undefined &&
+      this.column.dynamic !== undefined &&
+      this.column.dynamic === true
+    ) {
+      // 当前列表中有动态列
+      gridParams.isHasDynamic = true
+    }
+    this.label = this.getHeader()
+    if (this.column.operations) {
+      // console.log('this.column.operations', this.column.operations)
+    }
+    // console.log('gridParams.options.subTableCanAdd=', gridParams.options.subTableCanAdd, 'this.subTableCanAdd=', this.subTableCanAdd)
+    this.isShowAdd =
+      this.isFormSubTable &&
+      this.column.prop === 'operation' &&
+      this.subTableCanAdd &&
+      gridParams.options &&
+      gridParams.options.showOperationButton
+    if (
+      this.column.fileSet &&
+      this.column.fileSet !== '' &&
+      this.column.componentType === 'annex'
+    ) {
+      const fileSetObj = JSON.parse(this.column.fileSet)
+      if (fileSetObj && fileSetObj.multiple) {
+        this.fileMultiple = true
+      }
+    }
+    if (
+      this.column.formatter &&
+      this.column.formatter.options &&
+			this.column.formatter.options.format &&
+			this.column.formatter.type === 'icon'
+			
+		) {
+
+      this.formatConfig = JSON.parse(this.column.formatter.options.format)
+    }
+  },
+  mounted() {
+    // 监听保存时点击按钮事件线触发
+    $on(eventBus, 'un-edit', (param) => {
+      // 处理多选选项组问题保存问题
+      if (
+        this.column.componentType &&
+        (this.column.componentType === 'multiselect' ||
+          this.column.componentType === 'select')
+      ) {
+        const isDynamic = isDynamicDataSourceSource(this.column)
+        if (!isDynamic) {
+          // 选项组保存时将数组处理为字符串
+          const beforeColumnValue = param.row[this.column.prop]
+          if (
+            beforeColumnValue &&
+            Object.prototype.toString.apply(beforeColumnValue) ===
+              '[object Array]'
+          ) {
+            // 如果是数组才需要转换
+            param.row[this.column.prop] = beforeColumnValue.join(',')
+          }
+        } else {
+          // 动态数据源多选保存时，获取已选择的字段，由于多选选项组的值是数组，保存时要拼接成“ ，” 分隔的字符串
+          if ('_dynamic-source-data-' + this.column.prop in this.column) {
+            const temp = this.column['_dynamic-source-data-' + this.column.prop]
+            const valueSetOptions = temp.valueSetOptions
+            // 获取当前字段对应在映射关系中对应的是动态数据源中的哪一个字段key
+            let selectDataKey
+            for (let i = 0; i < valueSetOptions.length; i++) {
+              const valueSetOption = valueSetOptions[i]
+              if (
+                this.column.prop === valueSetOption.valueColumn.dbColumnName
+              ) {
+                selectDataKey = valueSetOption.columnName
+                break
+              }
+            }
+            if (selectDataKey) {
+              // beforeColumnValue是数组值，如果是单选则是字符串
+              let beforeColumnValue = param.row[this.column.prop]
+              if (this.column.componentType === 'select') {
+                if (selectDataKey !== temp.valueAttribute) {
+                  // 解决当前字段不是动态数据源选项值所映射的字段的问题 例如当前字段是工厂名称， 动态数据源选项值是工厂编码
+                  beforeColumnValue = temp.optionItems.find(
+                    (item) =>
+                      // 当前字段映射的是工厂名称，
+                      // 筛选动态数据源选项值字段对应的当前字段所映射的字段， 例如 根据工厂编码找工厂编码对应的工厂名称
+                      // 找出名称后赋值给当前字段
+                      item[temp.valueAttribute] === beforeColumnValue
+                  )[selectDataKey]
+                }
+                // 如果是单选
+                // 现在选择时已经赋值，不再需要这里进行赋值
+                // temp.optionItems.forEach(optionItem => {
+                //   if (optionItem[temp.valueAttribute] === beforeColumnValue) {
+                //     this.$set(param.row, this.column.prop, optionItem[selectDataKey])
+                //   }
+                // })
+                param.row[this.column.prop] = beforeColumnValue
+              } else {
+                // 如果是多选，join  “ ，” ， 并给row赋值
+                // 现在选择时已经赋值，不再需要这里进行赋值
+                // const afterColumnValue = []
+                // temp.optionItems.forEach(optionItem => {
+                //   beforeColumnValue.forEach(value => {
+                //     if (optionItem[temp.valueAttribute] === value) {
+                //       afterColumnValue.push(optionItem[selectDataKey])
+                //     }
+                //   })
+                // })
+                if (
+                  beforeColumnValue &&
+                  selectDataKey !== temp.valueAttribute
+                ) {
+                  // 解决当前字段不是动态数据源选项值所映射的字段的问题 例如当前字段是工厂名称， 动态数据源选项值是工厂编码
+                  const t = []
+                  beforeColumnValue.forEach((selectItem) => {
+                    if (selectDataKey !== temp.valueAttribute) {
+                      t.push(
+                        temp.optionItems.find(
+                          (option) => option[temp.valueAttribute] === selectItem
+                        )[selectDataKey]
+                      )
+                    }
+                  })
+                  beforeColumnValue = t
+                }
+                param.row[this.column.prop] = beforeColumnValue.join(',')
+              }
+            }
+          } else {
+            const beforeColumnValue = param.row[this.column.prop]
+            if (
+              beforeColumnValue &&
+              Object.prototype.toString.apply(beforeColumnValue) ===
+                '[object Array]'
+            ) {
+              // 如果是数组才需要转换
+              param.row[this.column.prop] = beforeColumnValue.join(',')
+            }
+          }
+        }
+      }
+    })
+  },
+  unmounted() {
+    $off(eventBus, 'un-edit')
+  },
+  methods: {
+    ...customFormatter,
+    ...apis,
+    getHeader() {
+      if (!this.column.titleValueSet) {
+        return this.column.label.replace(/\\n/g, '</br>')
+      } else {
+        return this.formatHeader()
+      }
+    },
+    formatHeader() {
+      return doFormatWithValueSet(
+        this.column.titleValueSetValue,
+        this.column.label
+      )
+    },
+    filterHandler(value, row, column) {
+      const property = column['property']
+      return row[property] === value
+    },
+    onFocus(index) {
+      const gridParams = store.get(this.listCode)
+      if (gridParams.lineEdit.editingCell) {
+        gridParams.lineEdit.editingCell.row = index
+        gridParams.lineEdit.editingCell.prop = this.column.prop
+      }
+    },
+    findIndex(index) {
+      this.index = index
+      const gridParams = store.get(this.listCode)
+      if (gridParams.lineEdit.editingCell) {
+        gridParams.lineEdit.editingCell.row = index
+        gridParams.lineEdit.editingCell.prop = this.column.prop
+      }
+    },
+    refresData(data) {
+      $emit(this, 'refresData', data)
+    },
+    refresPortData(port, value) {
+      const gridParams = store.get(this.listCode)
+      console.log('gridParams', gridParams)
+      console.log('this.index', this.index)
+      if (
+        gridParams &&
+        gridParams.lineEdit &&
+        gridParams.lineEdit.editingCell
+      ) {
+        $emit(
+          this,
+          'refresPortData',
+          port,
+          value,
+          gridParams.lineEdit.editingCell.row
+        )
+      } else {
+        $emit(this, 'refresPortData', port, value, this.index)
+      }
+    },
+    refresPortsData(map) {
+      const gridParams = store.get(this.listCode)
+      console.log('gridParams', gridParams)
+      console.log('this.index', this.index)
+      if (
+        gridParams &&
+        gridParams.lineEdit &&
+        gridParams.lineEdit.editingCell
+      ) {
+        $emit(this, 'refresPortsData', map, gridParams.lineEdit.editingCell.row)
+      } else {
+        $emit(this, 'refresPortsData', map, this.index)
+      }
+    },
+    refresMainTableFields(map) {
+      $emit(this, 'refresMainTableFields', map)
+    },
+    // @keyup.native.left="move('left')"
+    // @keyup.native.right="move('right')"
+    // @keyup.native.up="move('up')"
+    // @keyup.native.down="move('down')"
+    move(direction) {
+      if (direction === 'left') {
+        const prop = ArrowKeyAction.getLeftColumn(this.column.prop)
+        const gridParams = store.get(this.listCode)
+        gridParams.lineEdit.editingCell.prop = prop
+      }
+    },
+    // filterHandler(value, row, column) {
+    //   const property = column['property']
+    //   return row[property] === value
+    // },
+    isSaveByEnter() {
+      const gridParams = store.get(this.listCode)
+      return (
+        typeof gridParams.options.lineEditOptions.isSaveByEnter ===
+          'undefined' ||
+        (isHasEditOption('isSaveByEnter', this.listCode) &&
+          gridParams.options.lineEditOptions.isSaveByEnter === true)
+      )
+    },
+    isRestoreByEsc() {
+      const gridParams = store.get(this.listCode)
+      return (
+        typeof gridParams.options.lineEditOptions.isRestoreByEsc ===
+          'undefined' ||
+        (isHasEditOption('isRestoreByEsc', this.listCode) &&
+          gridParams.options.lineEditOptions.isRestoreByEsc === true)
+      )
+    },
+    canFocus(index) {
+      const gridParams = store.get(this.listCode)
+      if (
+        index === gridParams.lineEdit.editingCell.row &&
+        this.column.prop === gridParams.lineEdit.editingCell.prop
+      ) {
+        return true
+      } else {
+        return false
+      }
+    },
+    getLabel(row, index) {
+      this.transferColumnDataToUpperCase(row)
+      const obj = this.objectPropValueTwo(row, this.column)
+      // // 存储执行时间
+      // const get2 = new Date().getTime()
+      // const get3 = Number(get2) - Number(get1)
+      // if (!window.sessionStorage.getItem('getLabel')) {
+      //   window.sessionStorage.setItem('getLabel', get3)
+      // } else {
+      //   const get4 = window.sessionStorage.getItem('getLabel')
+      //   const get5 = Number(get4) + Number(get3)
+      //   window.sessionStorage.setItem('getLabel', get5)
+      // }
+      return obj
+      // const returnValue = this.objectPropValueTwo(row, this.column)
+      // if (returnValue) {
+      //   // 解决当文本中有多个空格时候， vue自动将多个空格合并为一个空格，
+      //   // 或者修改vue的配置 https://cn.vuejs.org/api/application.html#app-config-compileroptions   app.config.compilerOptions.whitespace
+      //   return returnValue.replaceAll(' ', '\u00A0')
+      // }
+      // return returnValue
+    },
+    getCellValue(row) {
+      let cellValue = getEntityFieldValue(row, this.column.prop, false)
+      if (cellValue === undefined || cellValue === null) {
+        this.transferColumnDataToUpperCase(row)
+        cellValue = getEntityFieldValue(row, this.column.prop, false)
+      }
+      return cellValue
+    },
+    // 兼容oracle和mysql数据库，oracle是字段名是大写的，mysql是小写的，将小写转为大写
+    transferColumnDataToUpperCase(row) {
+      const reg1 = /[A-Z]+/ // 大写字母
+      if (this.isSql && reg1.test(this.column.prop)) {
+        this.transferColumnDataToUpperCaseWithProp(
+          row,
+          this.column.prop.toLowerCase(),
+          this.column.prop
+        )
+      }
+    },
+    transferColumnDataToUpperCaseWithProp(row, propLowerCase, columnProp) {
+      let dataModel
+      if (propLowerCase && propLowerCase.indexOf('.') > 0) {
+        const parentObj = getParentObjectUtil(propLowerCase, row)
+        const prop = propLowerCase.substring(propLowerCase.lastIndexOf('.') + 1)
+        dataModel = parentObj[prop]
+        if (dataModel !== undefined) {
+          // sql字段名小写转大写，兼容mysql、oracle数据库
+          parentObj[columnProp] = dataModel
+          delete parentObj[prop]
+        }
+      } else {
+        dataModel = row[propLowerCase]
+        if (dataModel !== undefined) {
+          // sql字段名小写转大写，兼容mysql、oracle数据库
+          row[columnProp] = dataModel
+          delete row[propLowerCase]
+        }
+      }
+      return dataModel
+    },
+    getMyHyperLinkSetting(row) {
+      this.transferColumnDataToUpperCase(row)
+      const gridParams = store.get(this.listCode)
+      let tableName
+      if (
+        gridParams &&
+        gridParams.basicInfo &&
+        gridParams.basicInfo.tableName
+      ) {
+        tableName = gridParams.basicInfo.tableName
+      }
+      const hyperLinkResult = this.getHyperLinkSetting(
+        this.column,
+        row,
+        this.isSql,
+        gridParams.additionalParamMap,
+        gridParams.contextParameter,
+        tableName,
+        this.listCode
+      )
+      hyperLinkResult.icon = this.getHyperIconClass(hyperLinkResult)
+      return hyperLinkResult
+    },
+    getHyperIconClass(hyperLinkResult) {
+      let iconName
+      if (
+        hyperLinkResult &&
+        hyperLinkResult !== null &&
+        hyperLinkResult.icon &&
+        hyperLinkResult.icon !== ''
+      ) {
+        iconName = hyperLinkResult.icon
+      }
+      if (iconName && iconName.indexOf('fa-') === 0) {
+        // 表示以“fa-”开头，使用font-awesome中的图标
+        iconName = 'fa ' + iconName
+      }
+      return iconName
+    },
+    createFormSubTableRow() {
+      console.log('触发了行新建')
+      this.createRow(this.listCode)
+    },
+    handleCommand(comman) {
+      let prop = null
+      this.column.operations.forEach((item) => {
+        if (item.isGroup) {
+          item.buttons.forEach((button) => {
+            if (button.props.code === comman.comman) {
+              prop = button
+            }
+          })
+        }
+      })
+      if (prop) {
+        customFormatter.onClickFun(
+          comman.row,
+          this.column,
+          prop.onClick,
+          comman.rowIndex
+        )
+      }
+    },
+    beforeHandleCommand(comman, row, rowIndex) {
+      return {
+        comman: comman,
+        row: row,
+        rowIndex: rowIndex,
+      }
+    },
+    previewImg(row) {
+      this.fileList = getFileList(row, this.column, this.isSql)
+      this.showSingleImgFlag = true
+    },
+    getFileList(row) {
+      return getFileList(row, this.column, this.isSql)
+    },
+    getColumnWidth() {
+      if (
+        this.column &&
+        this.column.prop === 'operation' &&
+        !this.column.width
+      ) {
+        // 表示操作列，宽度固定
+        return '210'
+      }
+      return this.column.width ? this.column.width + '' : '130'
+    },
+    // 设置字段禁止编辑
+    fnProhibitToEdit(isEditable) {
+      this.isEditable = isEditable
+    },
+    // 设置字段禁止编辑
+    prohibitToEdit(entity) {
+      $emit(this, 'prohibitToEdit', entity)
+    },
+    isFieldRequired() {
+      return isRequiredEdit(this.column, this.listCode)
+      // return true
+    },
+    // 展示富文本内容
+    showRichEditorContent(row, column, header) {
+      this.showRichEditorViewer = true
+      this.$nextTick(() => {
+        this.$refs.richEditorViewerRef.showContent(row[column.prop], header)
+      })
+    },
+    closeRichEditorContent() {
+      this.showRichEditorViewer = false
+    },
+    isRequired(editing) {
+      if (
+        !this.isFormSubTable &&
+        this.lineEdit.editable &&
+        this.isEditable &&
+        editing &&
+        this.column.validations
+      ) {
+        if (this.column.validations.indexOf('"required":true') > 0) {
+          return true
+        }
+      }
+      return false
+    },
+    getFormatIconSetting(row) {
+      this.transferColumnDataToUpperCase(row)
+      const gridParams = store.get(this.listCode)
+      const result = this.getIconSetting(
+        this.column,
+        row,
+        this.isSql,
+        gridParams,
+        this.listCode
+      )
+      result.icon = this.getHyperIconClass(result)
+      if (
+        this.column.formatter.options &&
+        this.column.formatter.options.format
+      ) {
+        result.position = JSON.parse(
+          this.column.formatter.options.format
+        ).position
+      }
+      return result
+    },
+  },
+  emits: [
+    'refresData',
+    'refresPortData',
+    'refresPortsData',
+    'refresMainTableFields',
+    'prohibitToEdit',
+    ,
+  ],
+}
+</script>
+
+<style lang="scss" scoped>
+.annex-cell {
+  padding-right: 5px;
+  cursor: pointer;
+  color: #409eff;
+}
+.m-requried {
+  float: left;
+  white-space: nowrap;
+}
+.m-requried::after {
+  content: '*';
+  color: #f56c6c;
+}
+</style>