agilebuilder-ui 1.0.621 → 1.0.962

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

@@ -0,0 +1,1056 @@
+<template>
+  <div style="width: 100%">
+    <!--添加:key="column.prop+'_'+rowIndex"是为了解决多行是行编辑状态时新建的记录的文本框内有值的问题-->
+    <dynamic-input
+      v-if="(lineEdit.editable && isEditable && row.$editing) || isShowForm"
+      v-model:value="row[column.prop]"
+      :class="requiredClass"
+      :column="column"
+      :is-sql="isSql"
+      :line-edit="lineEdit"
+      :list-code="listCode"
+      :list-toolbar-form-data="listToolbarFormData"
+      :options="column.valueSet"
+      :grid-options="options"
+      :position="{
+        row: rowIndex,
+        prop: column.prop
+      }"
+      :disabled="disabled"
+      :row="row"
+      :row-index="rowIndex"
+      :type="column.componentType"
+      @findIndex="findIndex(rowIndex)"
+      @focus="onFocus(rowIndex)"
+      @prohibit-to-edit="prohibitToEdit"
+      @refresh-list="refreshList"
+      @refresData="refresData"
+      @refresMainTableFields="refresMainTableFields"
+      @refresPortData="refresPortData"
+      @refresPortsData="refresPortsData"
+      @change-disabled="changeDisabled"
+      @change-required="changeRequired"
+    />
+    <span v-else>
+      <span v-if="column.operations" class="grid-operation-buttons">
+        <span
+          v-for="(operation, operationIndex) in column.operations"
+          :key="operationIndex"
+          :class="isShowForm ? '' : 'cell--span'"
+        >
+          <el-dropdown
+            v-if="operation.isGroup"
+            :size="operation.buttons && operation.buttons.length > 0 ? operation.buttons[0].props.size : 'small'"
+            split-button
+            style="padding-left: 10px"
+            @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, row, rowIndex)"
+                    :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>
+          <component
+              :is="operation.props.customControl"
+              v-else-if="operation.props.customControl"
+              v-permission="operation.props.permission"
+              :key="column.prop+'_'+rowIndex+'_'+currentPage"
+              :disabled="true"
+              :row="pageGridData[rowIndex]"
+              :entity="pageGridData[rowIndex]"
+              :prop="column.prop"
+              :parent="parentFormData"
+              :row-index="rowIndex"
+              :grid-data="gridData"
+              :page-grid-data="pageGridData"
+              :current-page="currentPage"
+              @refresh-list="refreshList"
+          />
+          <row-operation
+            v-else
+            :column="column"
+            :editing="row.$editing"
+            :entity="row"
+            :is-show="operation.isShow"
+            :label="operation.props.label ? operation.props.label : row[column.prop]"
+            :on-click="operation.onClick"
+            :operation-index="operationIndex"
+            :operation-setting="operation.props"
+            :row-index="rowIndex"
+            :list-code="listCode"
+            :parent-form-data="parentFormData"
+          />
+        </span>
+      </span>
+      <span
+        v-else-if="customFormatValue(row, column.prop, customFormat, rowIndex)"
+        :class="isShowForm ? '' : 'cell--span'"
+      >
+        <component
+          :is="column.prop + rowIndex"
+          :entity="row"
+          :parent="parentFormData"
+          :prop="column.prop"
+          :row="row"
+          :row-index="rowIndex"
+          :select-options="column.valueSet"
+          :show-value="$escapeHtml(getLabel(row, rowIndex))"
+          :value="getCellValue(row)"
+          :additional-param-map="additionalParamMap"
+          :additional-settings="additionalSettings"
+          :page-context="options?.pageContext"
+        />
+      </span>
+      <!-- 自定义格式的时候 -->
+      <span
+        v-else-if="
+          columnFormatter !== undefined &&
+          columnFormatter.type !== undefined &&
+          columnFormatter.type === 'customControl' &&
+          columnFormatter.options &&
+          columnFormatter.options.format &&
+          columnFormatter.options.format !== ''
+        "
+        :class="isShowForm ? '' : 'cell--span'"
+      >
+        <!--:key="column.prop+'_'+rowIndex+'_'+currentPage" 为了解决子表分页时，新增自动跳转到下一页，第一条记录的自定义控件被复用，导致业务逻辑没执行 -->
+        <component
+          :is="columnFormatter.options.format"
+          :key="column.prop + '_' + rowIndex + '_' + currentPage"
+          :current-page="currentPage"
+          :disabled="true"
+          :entity="pageGridData[rowIndex]"
+          :get-form-data="getFormData"
+          :get-grid-data="getTableGridData"
+          :grid-data="gridData"
+          :page-grid-data="pageGridData"
+          :parent="parentFormData"
+          :prop="column.prop"
+          :row="pageGridData[rowIndex]"
+          :row-index="rowIndex"
+          :select-options="column.valueSet"
+          :show-value="$escapeHtml(getLabel(pageGridData[rowIndex], rowIndex))"
+          :value="getCellValue(pageGridData[rowIndex])"
+          :additional-param-map="additionalParamMap"
+          :listCode="listCode"
+          :component-id="componentId"
+          :additional-settings="additionalSettings"
+          :page-context="options?.pageContext"
+          @prohibitToEdit="prohibitToEdit"
+          @refresh-list="refreshList"
+      /></span>
+      <span
+        v-else-if="
+          columnFormatter !== undefined && columnFormatter.type !== undefined && columnFormatter.type === 'secretInfo'
+        "
+        :id="column.prop + 'DomData' + rowIndex"
+        :class="isShowForm ? '' : 'cell--span'"
+      >
+        <secret-info
+          :entity="row"
+          :field-label="$escapeHtml(label)"
+          :list-code="listCode"
+          :list-name="listName"
+          :page-code="pageCode"
+          :prop="column.prop"
+          :table-name="tableName"
+          :value="getCellValue(row)"
+        />
+      </span>
+      <span v-else-if="isObjectProp(column.prop)">
+        <!-- isObjectProp => prop.indexOf('.') > 0 -->
+        <span v-if="column.formatter && column.formatter.type === 'files'" type="primary">
+          <span
+            :id="column.prop + 'DomData' + rowIndex"
+            :style="isShowForm ? {} : { width: cellWidth + 'px' }"
+            :title="isShowOverflowTooltip ? $escapeHtml(getLabel(row)) : ''"
+            :class="isShowForm ? '' : 'ellipsis cell--span'"
+          >
+            <FsPreview
+              :entity="row"
+              :file-set-obj="getFilesFormatter()"
+              :is-sql="isSql"
+              :label="$escapeHtml(getLabel(row, rowIndex))"
+            />
+          </span>
+        </span>
+        <!-- <el-link
+            v-else-if="
+            columnFormatter !== undefined &&
+            columnFormatter.type !== undefined &&
+            columnFormatter.type === 'hyperlinks' &&
+            getMyHyperLinkSetting(row).visible === true
+          "
+            type="primary"
+            @click="clickHyperLink(column, row, listCode, rowIndex)"
+        > -->
+        <el-link
+          v-else-if="
+            columnFormatter !== undefined &&
+            columnFormatter.type !== undefined &&
+            columnFormatter.type === 'hyperlinks' &&
+            getMyHyperLinkSetting(row, rowIndex).visible === true
+          "
+          :type="getLinkType(row)"
+          @click="clickHyperLink(column, row, listCode, rowIndex)"
+        >
+          <span
+            v-if="isShowOverflowTooltip"
+            :id="column.prop + 'DomData' + rowIndex"
+            :style="isShowForm ? {} : { width: cellWidth + 'px' }"
+            :title="getMyHyperLinkSetting(row, rowIndex).title"
+            :class="isShowForm ? '' : 'ellipsis cell--span'"
+            >{{ getMyHyperLinkSetting(row, rowIndex).label }}
+            <el-icon v-if="getMyHyperLinkSetting(row, rowIndex).icon">
+              <component :is="(getMyHyperLinkSetting(row), rowIndex.icon)" />
+            </el-icon>
+          </span>
+          <span v-else :id="column.prop + 'DomData' + rowIndex" :class="isShowForm ? '' : 'cell--span'"
+            >{{ getMyHyperLinkSetting(row, rowIndex).label }}
+            <el-icon v-if="getMyHyperLinkSetting(row, rowIndex).icon">
+              <component :is="getMyHyperLinkSetting(row, rowIndex).icon" />
+            </el-icon>
+          </span>
+        </el-link>
+        <span
+          v-else-if="isShowOverflowTooltip"
+          :id="column.prop + 'DomData' + rowIndex"
+          :style="isShowForm ? {} : { width: cellWidth + 'px' }"
+          :title="$escapeHtml(getLabel(row))"
+          :class="isShowForm ? '' : 'ellipsis cell--span'"
+          >{{ $escapeHtml(getLabel(row, rowIndex)) }}</span
+        >
+        <span v-else :id="column.prop + 'DomData' + rowIndex" :class="isShowForm ? '' : 'cell--span'">{{
+          $escapeHtml(getLabel(row, rowIndex))
+        }}</span>
+      </span>
+      <span v-else>
+        <span v-if="column.componentType === 'annex' || column.componentType === 'multipartUpload'" type="primary">
+          <span
+            v-if="isShowOverflowTooltip"
+            :id="column.prop + 'DomData' + rowIndex"
+            :style="isShowForm ? {} : { width: cellWidth + 'px' }"
+            :title="$escapeHtml(getLabel(row))"
+            :class="isShowForm ? '' : 'ellipsis cell--span'"
+          >
+            <FsPreview
+              :entity="row"
+              :file-set-obj="getFileObj(column.fileSet)"
+              :is-sql="isSql"
+              :label="$escapeHtml(getLabel(row, rowIndex))"
+            />
+          </span>
+          <span v-else :id="column.prop + 'DomData' + rowIndex" :class="isShowForm ? '' : 'cell--span'">
+            <FsPreview
+              :entity="row"
+              :file-set-obj="getFileObj(column.fileSet)"
+              :is-sql="isSql"
+              :label="$escapeHtml(getLabel(row, rowIndex))"
+            />
+          </span>
+        </span>
+        <span v-else-if="column.formatter && column.formatter.type === 'files'">
+          <span
+            :id="column.prop + 'DomData' + rowIndex"
+            :style="isShowForm ? {} : { width: cellWidth + 'px' }"
+            :title="isShowOverflowTooltip ? $escapeHtml(getLabel(row)) : ''"
+            :class="isShowForm ? '' : 'ellipsis cell--span'"
+          >
+            <FsPreview
+              :entity="row"
+              :file-set-obj="getFilesFormatter()"
+              :is-sql="isSql"
+              :label="$escapeHtml(getLabel(row, rowIndex))"
+            />
+          </span>
+        </span>
+        <!-- 超链接 -->
+        <el-link
+          v-else-if="
+            columnFormatter !== undefined &&
+            columnFormatter.type !== undefined &&
+            columnFormatter.type === 'hyperlinks' &&
+            getMyHyperLinkSetting(row, rowIndex).visible === true
+          "
+          type="primary"
+          @click="clickHyperLink(column, row, listCode, rowIndex)"
+        >
+          <span
+            v-if="isShowOverflowTooltip"
+            :id="column.prop + 'DomData' + rowIndex"
+            :style="isShowForm ? {} : { width: cellWidth + 'px' }"
+            :title="$escapeHtml(getMyHyperLinkSetting(row, rowIndex).title)"
+            :class="isShowForm ? '' : 'ellipsis cell--span'"
+            >{{ $escapeHtml(getMyHyperLinkSetting(row, rowIndex).label) }}
+            <el-icon v-if="getMyHyperLinkSetting(row, rowIndex).icon">
+              <component :is="getMyHyperLinkSetting(row, rowIndex).icon" />
+            </el-icon>
+          </span>
+          <span v-else :id="column.prop + 'DomData' + rowIndex" :class="isShowForm ? '' : 'cell--span'"
+            >{{ $escapeHtml(getMyHyperLinkSetting(row, rowIndex).label) }}
+            <el-icon v-if="getMyHyperLinkSetting(row, rowIndex).icon">
+              <component :is="getMyHyperLinkSetting(row, rowIndex).icon" />
+            </el-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(row, column, getHeader())" />
+          </el-tooltip>
+        </span>
+        <GridIcon
+          v-else-if="column.formatter && column.formatter.type === 'icon'"
+          :id="column.prop + 'DomData' + rowIndex"
+          :column="column"
+          :row="row"
+          :row-index="rowIndex"
+          :is-sql="isSql"
+          :list-code="listCode"
+        />
+        <span
+          v-else-if="isShowOverflowTooltip"
+          :id="column.prop + 'DomData' + rowIndex"
+          :style="isShowForm ? {} : { width: cellWidth + 'px' }"
+          :title="getLabel(row)"
+          :class="isShowForm ? '' : 'ellipsis cell--span'"
+          style="white-space: pre"
+          v-html="$escapeHtml(getLabel(row, rowIndex))"
+        />
+        <span v-else :id="column.prop + 'DomData' + rowIndex" :class="isShowForm ? '' : 'cell--span'">{{
+          $escapeHtml(getLabel(row, rowIndex))
+        }}</span>
+      </span>
+    </span>
+    <view-image-dialog v-if="showSingleImgFlag" :file-list="fileList" @close="showSingleImgFlag = false" />
+    <rich-editor-viewer
+      v-if="showRichEditorViewer"
+      ref="richEditorViewerRef"
+      @closeRichEditorContent="closeRichEditorContent"
+    />
+  </div>
+</template>
+
+<script>
+import { CirclePlus, ZoomIn as ElIconZoomIn } from '@element-plus/icons-vue'
+import { $emit, $off, $on } from '../../utils/gogocodeTransfer'
+import {
+  ArrowKeyAction,
+  getColumnValues,
+  getFileList,
+  isDynamicDataSourceSource,
+  isHasEditOption,
+  isRequiredEdit,
+  getAdditionalParamMap,
+  getContentAlign,
+  getHeaderAlign
+} from './utils'
+import DynamicInput from './dynamic-input.vue'
+import store from './store'
+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 FsPreview from '../../fs-preview'
+import RichEditorViewer from '../../rich-editor/viewer.vue'
+import GridIcon from './components/grid-icon.vue'
+import { formatScanRuleSets } from './scan-util.ts'
+export default {
+  components: {
+    DynamicInput,
+    RowOperation,
+    ViewImageDialog,
+    FsPreview,
+    RichEditorViewer,
+    CirclePlus,
+    ElIconZoomIn,
+    GridIcon
+  },
+  name: 'NormalColumnContent',
+  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
+    },
+    // 行记录
+    row: {
+      type: Object,
+      default: null
+    },
+    // 行记录序号
+    rowIndex: {
+      type: Number,
+      default: null
+    },
+    // 是否在查看子表记录
+    isShowForm: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    let parentFormData
+    const gridParams = store.get(this.listCode)
+    const options = gridParams.options
+    if (gridParams.options.extraParam && gridParams.options.extraParam.entityMap) {
+      parentFormData = gridParams.options.extraParam.entityMap
+    }
+    const additionalParamMap = getAdditionalParamMap(gridParams)
+    let controlConfig = {}
+    if (this.column.controlConfig) {
+      controlConfig = JSON.parse(this.column.controlConfig)
+    }
+
+    let scanEnable = false
+    if (controlConfig.scanEnable) {
+      scanEnable = true
+    }
+    const componentId = this.listCode + '_' + this.column.prop
+    let lineEdit
+    if (gridParams.lineEdit !== null && gridParams.lineEdit !== undefined) {
+      lineEdit = gridParams.lineEdit
+    }
+    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,
+      getFormData: gridParams.options.getFormData,
+      getTableGridData: gridParams.options.getGridData,
+      additionalParamMap,
+      disabled: false,
+      additionalSettings: this.getColumnCustomControlControlConfig(this.column.formatter),
+      scanEnable,
+      componentId,
+      controlConfig,
+      rowLinkConfigMapping: {},
+      requiredClass: '',
+      lineEdit,
+      options
+    }
+  },
+  computed: {
+    // 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
+      }
+    }
+    const align = getContentAlign(this.column, gridParams)
+    if (align) {
+      this.align = gridParams.options.align
+    }
+    const headerAlign = getHeaderAlign(this.column, gridParams)
+    if (headerAlign) {
+      this.headerAlign = headerAlign
+    }
+    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
+      }
+    }
+    this.setScanRuleSets()
+    this.requiredClass = this.isRequired(this.row.$editing) ? 'm-requried' : ''
+  },
+  mounted() {
+    // 监听保存时点击按钮事件线触发
+    $on(eventBus, 'un-edit', (param) => {
+      // 处理多选选项组问题保存问题
+      if (
+        this.column.componentType &&
+        (this.column.componentType === 'multiselect' || this.column.componentType === 'select')
+      ) {
+        const isDynamic = isDynamicDataSourceSource(this.column)
+        let beforeColumnValue = param.row[this.column.prop]
+        if (!isDynamic) {
+          // 选项组保存时将数组处理为字符串
+          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是数组值，如果是单选则是字符串
+              if (this.column.componentType === 'select') {
+                if (selectDataKey !== temp.valueAttribute) {
+                  // 解决当前字段不是动态数据源选项值所映射的字段的问题 例如当前字段是工厂名称， 动态数据源选项值是工厂编码
+                  // 当前字段映射的是工厂名称，
+                  // 筛选动态数据源选项值字段对应的当前字段所映射的字段， 例如 根据工厂编码找工厂编码对应的工厂名称
+                  // 找出名称后赋值给当前字段
+                  const filterValue = temp.optionItems.find((item) => item[temp.valueAttribute] === beforeColumnValue)
+                  if (filterValue) {
+                    beforeColumnValue = filterValue[selectDataKey]
+                  }
+                }
+                param.row[this.column.prop] = beforeColumnValue
+              } else {
+                if (beforeColumnValue && selectDataKey !== temp.valueAttribute) {
+                  if (typeof beforeColumnValue === 'string') {
+                    beforeColumnValue = beforeColumnValue.split(',')
+                  }
+                  // 解决当前字段不是动态数据源选项值所映射的字段的问题 例如当前字段是工厂名称， 动态数据源选项值是工厂编码
+                  const t = []
+                  beforeColumnValue.forEach((selectItem) => {
+                    if (selectDataKey !== temp.valueAttribute) {
+                      const filterValue = temp.optionItems.find((option) => option[temp.valueAttribute] === selectItem)
+                      if (filterValue) {
+                        t.push(filterValue[selectDataKey])
+                      }
+                    }
+                  })
+                  if (t.length > 0) {
+                    beforeColumnValue = t
+                    param.row[this.column.prop] = beforeColumnValue.join(',')
+                  }
+                }
+              }
+            }
+          } else {
+            if (beforeColumnValue && Object.prototype.toString.apply(beforeColumnValue) === '[object Array]') {
+              // 如果是数组才需要转换
+              param.row[this.column.prop] = beforeColumnValue.join(',')
+            }
+          }
+        }
+      }
+    })
+    const that = this
+    if (this.$parent.$parent && this.$parent.$parent.$options._componentTag === 'GroupColumn') {
+      eventBus.$on('prohibitToEdit', (param) => {
+        if (param[that.column.prop] !== undefined) {
+          that.fnProhibitToEdit(param[that.column.prop])
+        }
+      })
+    }
+  },
+  unmounted() {
+    $off(eventBus, 'un-edit')
+    if (this.$parent.$parent && this.$parent.$parent.$options._componentTag === 'GroupColumn') {
+      eventBus.$off('prohibitToEdit')
+    }
+  },
+  methods: {
+    ...customFormatter,
+    ...apis,
+    getFileObj(fileSet) {
+      if (fileSet) {
+        return JSON.parse(fileSet)
+      }
+    },
+    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, rowIndex) {
+      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,
+        this.additionalParamMap,
+        gridParams.contextParameter,
+        tableName,
+        this.listCode
+      )
+      if (hyperLinkResult.jumpPageSetting && rowIndex !== undefined) {
+        this.rowLinkConfigMapping[rowIndex] = hyperLinkResult.jumpPageSetting
+      }
+      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.$nextTick(() => {
+        this.disabled = !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
+    },
+    getColumnCustomControlControlConfig(columnFormatter) {
+      if (columnFormatter && columnFormatter.options && columnFormatter.options.controlConfig) {
+        const controlConfig = JSON.parse(columnFormatter.options.controlConfig)
+        if (this.controlConfig) {
+          Object.assign(controlConfig, this.controlConfig)
+        }
+        return controlConfig
+      } else {
+        return this.controlConfig
+      }
+    },
+    isRequired(editing) {
+      console.log('isRequired---this.lineEdit=', this.lineEdit)
+      if (!this.isFormSubTable && this.lineEdit && 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
+    },
+    getLinkType(row) {
+      if (this.column.events && this.column.events['cellStyle']) {
+        const params = {
+          value: row[this.column.property],
+          row: row,
+          column: this.column,
+          prop: this.column.property
+        }
+        const gridParams = store.get(this.listCode)
+        return gridParams.options['eventCallBack'][this.column.events['cellStyle']].call(this, params)
+      }
+      return 'primary'
+    },
+    changeDisabled(state) {
+      this.disabled = state
+    },
+    refreshList() {
+      this.$emit('refresh-list')
+    },
+    getFilesFormatter() {
+      if (this.column.formatter.options?.fileSet) {
+        return JSON.parse(this.column.formatter.options.fileSet)
+      }
+      return {}
+    },
+    /**
+     * 设置条码扫描解析规则
+     */
+    setScanRuleSets() {
+      if (this.scanEnable && this.controlConfig && this.controlConfig.scanRuleList) {
+        formatScanRuleSets(this.controlConfig.scanRuleList).then((res) => {
+          //扫描处理
+          this.column._scanRuleSets = res
+        })
+      }
+    },
+    changeRequired(required) {
+      this.requiredClass = required? 'm-requried' : ''
+    }
+  },
+  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;
+  width: 96%;
+}
+
+.m-requried::after {
+  content: '*';
+  color: #f56c6c;
+}
+</style>