agilebuilder-ui 1.0.0

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

@@ -0,0 +1,1239 @@
+<template>
+	<el-table-column
+			:align="align"
+			:class-name="column.prop"
+			:filter-method="filterMethod"
+			:filters="filters"
+			:fixed="fixed"
+			:header-align="headerAlign"
+			:prop="column.prop"
+			:sortable="sortable"
+			:width="getColumnWidth()"
+	>
+		<template v-slot:header>
+      <span :class="{ is_req: isFieldRequired() }"
+      ><span
+		      :title="$escapeHtml(label)"
+		      class="cell--span required__label"
+		      v-html="$escapeHtml(label)"
+      /></span>
+			<el-icon v-if="isShowAdd" style="font-size: 20px; color: #409eff" @click="createFormSubTableRow">
+				<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]"
+					:class="isRequired(scope.row.$editing) ? 'm-requried' : ''"
+					:column="column"
+					:is-sql="isSql"
+					:line-edit="lineEdit"
+					:list-code="listCode"
+					:list-toolbar-form-data="listToolbarFormData"
+					:options="column.valueSet"
+					:position="{
+          row: scope.$index,
+          prop: column.prop,
+        }"
+					:row="scope.row"
+					:row-index="scope.$index"
+					:type="column.componentType"
+					@findIndex="findIndex(scope.$index)"
+					@focus="onFocus(scope.$index)"
+					@prohibitToEdit="prohibitToEdit"
+					@refresData="refresData"
+					@refresMainTableFields="refresMainTableFields"
+					@refresPortData="refresPortData"
+					@refresPortsData="refresPortsData"
+			/>
+			<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'
+              "
+		            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,
+                          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
+		            :column="column"
+		            :editing="scope.row.$editing"
+		            :entity="scope.row"
+		            :is-show="operation.isShow"
+		            :label="
+                operation.props.label
+                  ? operation.props.label
+                  : scope.row[column.prop]
+              "
+		            :on-click="operation.onClick"
+		            :operation-index="operationIndex"
+		            :operation-setting="operation.props"
+		            :row-index="scope.$index"
+            />
+          </span>
+        </span>
+        <span
+		        v-else-if="
+            customFormatValue(
+              scope.row,
+              column.prop,
+              customFormat,
+              scope.$index
+            )
+          "
+		        class="cell--span"
+        >
+          <component
+		          :is="column.prop + scope.$index"
+		          :entity="scope.row"
+		          :parent="parentFormData"
+		          :prop="column.prop"
+		          :row="scope.row"
+		          :row-index="scope.$index"
+		          :select-options="column.valueSet"
+		          :show-value="$escapeHtml(getLabel(scope.row, scope.$index))"
+		          :value="getCellValue(scope.row)"
+				  :additional-param-map="additionalParamMap"
+          />
+        </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"
+		          :current-page="currentPage"
+		          :disabled="true"
+		          :entity="pageGridData[scope.$index]"
+		          :get-form-data="getFormData"
+		          :get-grid-data="getTableGridData"
+		          :grid-data="gridData"
+		          :page-grid-data="pageGridData"
+		          :parent="parentFormData"
+		          :prop="column.prop"
+		          :row="pageGridData[scope.$index]"
+		          :row-index="scope.$index"
+		          :select-options="column.valueSet"
+		          :show-value="
+              $escapeHtml(getLabel(pageGridData[scope.$index], scope.$index))
+            "
+		          :value="getCellValue(pageGridData[scope.$index])"
+				  :additional-param-map="additionalParamMap"
+          /></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"
+		          :field-label="$escapeHtml(label)"
+		          :list-code="listCode"
+		          :list-name="listName"
+		          :page-code="pageCode"
+		          :prop="column.prop"
+		          :table-name="tableName"
+		          :value="getCellValue(scope.row)"
+          />
+        </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"
+		            :style="{ width: cellWidth + 'px' }"
+		            :title="$escapeHtml(getLabel(scope.row))"
+		            class="ellipsis 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
+		            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"
+		            :style="{ width: cellWidth + 'px' }"
+		            :title="$escapeHtml(getLabel(scope.row))"
+		            class="ellipsis 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
+		            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>
+          <!-- <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)"
+          > -->
+					<el-link v-else-if="
+						columnFormatter !== undefined && 
+						columnFormatter.type !== undefined && 
+						columnFormatter.type === 'hyperlinks'
+						&& getMyHyperLinkSetting(scope.row).visible === true" 
+						:type="getLinkType(scope.row)"
+						@click="clickHyperLink(column, scope.row, listCode,scope.$index)">
+            <span
+		            v-if="isShowOverflowTooltip"
+		            :id="column.prop + 'DomData' + scope.$index"
+		            :style="{ width: cellWidth + 'px' }"
+		            :title="getMyHyperLinkSetting(scope.row).title"
+		            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"
+		          :style="{ width: cellWidth + 'px' }"
+		          :title="$escapeHtml(getLabel(scope.row))"
+		          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"
+		            :style="{ width: cellWidth + 'px' }"
+		            :title="$escapeHtml(getLabel(scope.row))"
+		            class="ellipsis cell--span"
+            >
+              <FsPreview
+		              :entity="scope.row"
+		              :file-set-obj="getFileObj(column.fileSet)"
+		              :is-sql="isSql"
+		              :label="$escapeHtml(getLabel(scope.row, scope.$index))"
+              />
+            </span>
+            <span
+		            v-else
+		            :id="column.prop + 'DomData' + scope.$index"
+		            class="cell--span"
+            >
+              <FsPreview
+		              :entity="scope.row"
+		              :file-set-obj="getFileObj(column.fileSet)"
+		              :is-sql="isSql"
+		              :label="$escapeHtml(getLabel(scope.row, scope.$index))"
+              />
+            </span>
+          </span>
+          <span
+		          v-else-if="column.formatter && column.formatter.type === 'files'"
+          >
+            <span
+		            v-if="isShowOverflowTooltip"
+		            :id="column.prop + 'DomData' + scope.$index"
+		            :style="{ width: cellWidth + 'px' }"
+		            :title="$escapeHtml(getLabel(scope.row))"
+		            class="ellipsis 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
+		            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>
+	        <!-- 超链接 -->
+          <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"
+		            :style="{ width: cellWidth + 'px' }"
+		            :title="$escapeHtml(getMyHyperLinkSetting(scope.row).title)"
+		            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>
+          <GridIcon
+            v-else-if="column.formatter && column.formatter.type === 'icon'"
+            :id="column.prop+'DomData'+scope.$index"
+            :column="column"
+            :row="scope.row"
+            :row-index="scope.$index"
+            :is-sql="isSql"
+            :list-code="listCode"
+          />
+          <span
+		          v-else-if="isShowOverflowTooltip"
+		          :id="column.prop + 'DomData' + scope.$index"
+		          :style="{ width: cellWidth + 'px' }"
+		          :title="getLabel(scope.row)"
+		          class="ellipsis cell--span"
+		          style="white-space: pre"
+		          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>
+			<view-image-dialog
+					v-if="showSingleImgFlag"
+					:file-list="fileList"
+					@close="showSingleImgFlag = false"
+			/>
+			<rich-editor-viewer
+					v-if="showRichEditorViewer"
+					ref="richEditorViewerRef"
+					@closeRichEditorContent="closeRichEditorContent"
+			/>
+		</template>
+	</el-table-column>
+</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
+} 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'
+export default {
+	components: {
+		DynamicInput,
+		RowOperation,
+		ViewImageDialog,
+		FsPreview,
+		RichEditorViewer,
+		CirclePlus,
+		ElIconZoomIn,
+		GridIcon
+	},
+	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
+		}
+		const additionalParamMap = getAdditionalParamMap(gridParams)
+		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
+		}
+	},
+	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
+			}
+		}
+	},
+	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,
+		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) {
+			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
+			)
+			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
+		},
+		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'
+    },
+	},
+	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>