agilebuilder-ui 1.0.0

package/packages/dynamic-source-select/src/dynamic-source-select.vue

@@ -0,0 +1,857 @@
+<template>
+  <span class="select-top-span">
+    <el-select
+		    ref="dynamicDataSourceRef"
+		    :allow-create="allowCreate"
+		    :clearable="clearable"
+		    :filterable="remote"
+		    :loading="loading"
+		    :model-value="value"
+		    :placeholder="placeholder"
+		    :remote="remote"
+		    :remote-method="remoteMethod"
+		    :reserve-keyword="true"
+		    :size="size"
+		    :style="fullWidth ? { width: '100%', height: '100%' } : {}"
+		    :title="getClassOptionTitle(value)"
+		    :value-key="valueAttribute"
+		    default-first-option
+		    v-bind="myProps"
+		    @blur="blurEvent($event)"
+		    @change="changeEvent"
+		    @clear="clear"
+		    @focus="focus"
+		    @visible-change="visibleChange"
+		    @remove-tag="removeTag(remote, $event)"
+    >
+      <template v-if="descriptionAttribute">
+        <div v-if="optionWidth > 0" :style="{ width: optionWidth + 'px' }">
+          <el-option
+		          v-for="item in optionItems"
+		          :key="item.value"
+		          :label="item._label_"
+		          :title="item._label_ + item._description_"
+		          :value="item[valueAttribute]"
+          >
+            <div style="display: flex">
+              <span>{{ item._label_ }}</span>
+              <span
+		              style="color: #8492a6; font-size: 13px; margin-left: 30px"
+              >{{ item._description_ }}</span
+              >
+            </div>
+          </el-option>
+        </div>
+        <el-option
+		        v-for="item in optionItems"
+				:key="item.value"
+		        v-else
+		        :label="item._label_"
+		        :title="item._label_ + item._description_"
+		        :value="item[valueAttribute]"
+        >
+          <span style="float: left">{{ item._label_ }}</span>
+          <span
+		          style="
+              float: right;
+              color: #8492a6;
+              font-size: 13px;
+              margin-left: 30px;
+            "
+          >{{ item._description_ }}</span
+          >
+        </el-option>
+      </template>
+      <template v-else>
+        <div
+		        v-if="optionWidth > 0"
+		        :style="{ width: optionWidth + 'px', position: 'relative' }"
+        >
+          <el-option
+		          v-for="item in optionItems"
+		          :key="item.value"
+		          :label="item._label_"
+		          :value="item[valueAttribute]"
+          />
+        </div>
+        <el-option
+			v-for="item in optionItems"
+			:key="item.value"
+			v-else
+			:label="item._label_"
+			:value="item[valueAttribute]"
+        />
+      </template>
+    </el-select>
+  </span>
+</template>
+
+<script>
+import {$on} from '../../utils/gogocodeTransfer'
+import dynamicSourceSelectService from './dynamic-source-select-service'
+import events from './events'
+import eventBus from '../../../src/utils/eventBus'
+import {getEntityFieldValue, getPropNameWhenJoinTable, setEntityFieldValue} from '../../../src/utils/util'
+
+export default {
+	name: 'DynamicSourceSelect',
+	components: {},
+	model: {
+		prop: 'value',
+		event: 'input',
+	},
+	props: {
+		// 字段配置 只有列表行编辑时候才用
+		column: {
+			type: Object,
+			default: null,
+		},
+		value: {
+			type: [String, Boolean, Number, Array],
+			default: null,
+		},
+		baseProps: {
+			type: Object,
+			default: null,
+		},
+		entity: {
+			type: Object,
+			default: null,
+		},
+		// dynamicDataSourceCode、valueSetOptions、isSql（默认是false，在配置系统中使用时需要是true）、additionalParameter（ json字符串）
+		options: {
+			type: Object,
+			default: null,
+		},
+		// 列表组件行编辑使用，sql查询时数据表名称，用于自定义系统中列表组件中字段多表查询带有别名时，将点"."改成两个下划线"__"时使用
+		tableName: {
+			type: String,
+			default: null,
+		},
+		// 列表组件行编辑使用，是否是关联表，用于确定属性名是否需要拼接tableName
+		isJoinTable: {
+			type: Boolean,
+			default: false,
+		},
+		// 子表行编辑时，父表单数据
+		parent: {
+			type: Object,
+			default: null,
+		},
+		// 所在的列表编码
+		listCode: {
+			type: String,
+			default: null,
+		},
+		// 所在的表单编码
+		formCode: {
+			type: String,
+			default: null,
+		},
+		listToolbarFormData: {
+			type: Object,
+			default: () => {
+				return {}
+			},
+		},
+		fullWidth: {
+			type: Boolean,
+			default: true,
+		},
+		clearable: {
+			type: Boolean,
+			default: true,
+		},
+		size: {
+			type: String,
+			default: 'default',
+		},
+		allowCreate: {
+			type: Boolean,
+			default: false,
+		},
+		analysisArea: {
+			type: Number,
+			default: null,
+			// 1 为工具栏解析
+		},
+		placeholder: {
+			type: String,
+			default: null,
+		},
+		// 下拉框配置宽度
+		optionWidth: {
+			default: 0,
+		},
+	},
+	// 是否是页面预览, 从页面管理传递
+	inject: {
+		isPageInfo: {value: 'isPageInfo', default: false},
+	},
+	data() {
+		const myProps = Object.assign({}, this.baseProps)
+		let markValue
+		if (this.entity) {
+			markValue = JSON.stringify(this.entity)
+		}
+		let lastValues = []
+		if (this.baseProps.multiple !== undefined && this.baseProps.multiple === true) {
+			if (this.value !== undefined && this.value !== null && this.value && Array.isArray(this.value)) {
+				lastValues = JSON.parse(JSON.stringify(this.value))
+			}
+		}
+		return {
+			/**
+			 *  用于回显动态数据源选择的默认值，因为初始进入编辑状态时，没有获取映射关系，
+			 *  如果当前字段是保存的label值则无法确定当前选项组的值对应哪一个,导致row中的对应字段变成了空值，所以备份一份
+			 * 然后在获取动态数据源选项组后，给上默认值
+			 */
+			markValue,
+			optionItems: [],
+			myProps,
+			valueSetOptions: [], // 字段映射集合配置
+			dynamicDataSourceCode: '', // 动态数据源编码
+			loading: false, // 是否在加载
+			valueAttribute: null, // 选项值字段，即控制下拉框组件的value-key属性的
+			remote: false, // 是否是远程搜索
+			additionalParameterStr: this.options.additionalParameter, // 附加参数json字符串
+			isLoaded: false, // 动态数据源是否直接显示静态页面
+			watchAttr: null, // 监控的entity属性名,多个属性名逗号分隔。即当该属性修改时，需要走后台重新获得当前下拉选的选项集合
+			backendUrl: null, // 后台访问路径
+			descriptionAttribute: null,
+			queryParam: {}, // 请求参数,
+			lastValues // 最后一次的value值，用于判断是否是增加元素
+		}
+	},
+	watch: {
+		baseProps: {
+			deep: true,
+			handler(newModels) {
+				this.myProps = Object.assign({}, newModels)
+			},
+		},
+	},
+	created() {
+		if (this.options && this.options.dynamicDataSourceCode) {
+			this.dynamicDataSourceCode = this.options.dynamicDataSourceCode.trim()
+			const param = {
+				_listCode: this.listCode,
+				_formCode: this.formCode,
+				_tableName: this.tableName,
+			}
+			if (this.parent) {
+				param.parent = this.parent
+			}
+			if (!this.isPageInfo) {
+				this.packageDynamicDataSourceInfo(this.dynamicDataSourceCode, param)
+						.then((dynamicDataSourceDto) => {
+							// console.log('UI获取的数据', dynamicDataSourceDto)
+							if (dynamicDataSourceDto.backendUrl) {
+								this.backendUrl = dynamicDataSourceDto.backendUrl
+							}
+							if (
+									dynamicDataSourceDto.fuzzyQuery !== undefined &&
+									dynamicDataSourceDto.fuzzyQuery === true
+							) {
+								// 是否启用远程搜索
+								this.remote = true
+							}
+							if (this.options && this.options.valueSetOptions) {
+								this.valueSetOptions = this.options.valueSetOptions
+							}
+							if (
+									this.options &&
+									this.options.isSql !== undefined &&
+									this.options.isSql !== null
+							) {
+								this.isSql = this.options.isSql
+							}
+							if (this.watchAttr) {
+								let initWatchValue
+								const watchAttrs = this.watchAttr.split(',')
+								watchAttrs.forEach((attr) => {
+									// 初始化下拉选内容
+									if (this.entity) {
+										initWatchValue = this.entity[attr]
+									}
+									this.$watch('entity.' + attr, function (newValue, oldValue) {
+										this.watchAttrValueChange(newValue)
+										// this.inputValue('')
+										const items = this.optionItems.filter(
+												(item) => item[this.valueAttribute] === newValue
+										)
+										if (!items) {
+											this.inputValue('')
+										}
+									})
+								})
+								this.watchAttrValueChange(initWatchValue)
+							}
+							this.isLoaded = true
+							// // 解决当监控值变化时，数据源重新加载后select输入框中显示的值和下拉中的值不一致问题
+							// if (this.baseProps.multiple !== undefined && this.baseProps.multiple === true) {
+							// 	this.$nextTick(() => {
+							// 	// this.$refs['dynamicDataSourceRef'].setSelected()
+							// 	})
+							// }
+							// 默认选中处理
+							if (dynamicDataSourceDto.defaultSelect) {
+								// 多选处理
+								if (this.baseProps.multiple) {
+									this.$emit('set-default-value', [
+										this.optionItems[0][this.valueAttribute],
+									])
+								} else {
+									// 单选处理
+									if (this.optionItems.length > 0) {
+										this.$emit(												
+												'set-default-value',
+												this.optionItems[0][this.valueAttribute]
+										)
+									}
+								}
+							}
+							// console.log('判断参数',this.analysisArea);
+							// console.log('判断参数',this.remote);
+							if (this.analysisArea !== 1 && this.remote) {
+								// 传递初始化查询供重置用
+								const that = this
+								$on(eventBus, 'remoteMethod', () => {
+									that.remoteMethod('')
+								})
+								// console.log('传递了参数');
+							}
+							this.$emit('load-completed', dynamicDataSourceDto)
+						})
+						.catch((error) => {
+							console.log(error)
+							this.$emit('load-completed', {
+								code: this.dynamicDataSourceCode,
+								error: error,
+							})
+							this.isLoaded = true
+						})
+			}
+		} else {
+			this.isLoaded = true
+		}
+	},
+	methods: {
+		...dynamicSourceSelectService,
+		...events,
+		blurEvent(event) {
+		// // 解决当监控值变化时，数据源重新加载后select输入框中显示的值和下拉中的值不一致问题
+		// if (this.baseProps.multiple !== undefined && this.baseProps.multiple === false) {
+		// 	this.$nextTick(() => {
+		// 	// this.$refs['dynamicDataSourceRef'].setSelected()
+		// 	})
+		// }
+		this.$emit('blur', event)
+		},
+		changeEvent(newValue){
+			this.inputValue(newValue)
+			this.$emit('change', newValue)
+		},
+		/**
+		 * @description: 获取提示标题
+		 * @Date: 2023-08-04 10:04:42
+		 * @param {*}
+		 * @return {*}
+		 */
+		getClassOptionTitle(val) {
+			if (val !== null && val !== undefined && val !== '' && val.length > 0) {
+				let selectTittle = ''
+				if (typeof val === 'string') {
+					// 单选
+					if (this.descriptionAttribute) {
+						this.optionItems.forEach((item) => {
+							if (item[this.valueAttribute] === val) {
+								selectTittle = item._label_ + item._description_
+							}
+						})
+					} else {
+						this.optionItems.forEach((Ttem) => {
+							if (Ttem[this.valueAttribute] === val) {
+								selectTittle = Ttem._label_
+							}
+						})
+					}
+				} else {
+					// 多选
+					if (this.descriptionAttribute) {
+						this.optionItems.forEach((item) => {
+							val.forEach((Vtem) => {
+								if (item[this.valueAttribute] === Vtem) {
+									selectTittle = selectTittle + item._label_ + ','
+								}
+							})
+						})
+						selectTittle = selectTittle.slice(0, selectTittle.length - 1)
+					} else {
+						this.optionItems.forEach((Ttem) => {
+							val.forEach((Vtem) => {
+								if (Ttem[this.valueAttribute] === Vtem) {
+									selectTittle = selectTittle + Ttem._label_ + ','
+								}
+							})
+						})
+						selectTittle = selectTittle.slice(0, selectTittle.length - 1)
+					}
+				}
+				return selectTittle
+			}
+		},
+		// 必须有该方法，否则无法给字段赋值
+		inputValue(newValue) {
+			this.$emit('update:value', newValue)
+			if (newValue === null || newValue === undefined || newValue === '') {
+				this.remoteQueryMethod(newValue)
+			}
+			this.setValues(newValue)
+		},
+		packageDynamicDataSourceInfo(dynamicDataSourceCode, param) {
+			return new Promise((resolve, reject) => {
+				this.findDynamicDataSourceByCode(
+						dynamicDataSourceCode,
+						this.entity,
+						param,
+						this.additionalParameterStr,
+						this.backendUrl
+				)
+						.then((dynamicDataSourceDto) => {
+							if (dynamicDataSourceDto) {
+								if (dynamicDataSourceDto.options) {
+									this.optionItems = dynamicDataSourceDto.options
+									// if (this.watchAttr) {
+									// 	// 解决当监控值变化时，数据源重新加载后select输入框中显示的值和下拉中的值不一致问题
+									// 	if (
+									// 			this.baseProps.multiple !== undefined &&
+									// 			this.baseProps.multiple === true
+									// 	) {
+									// 		this.$nextTick(() => {
+									// 			// this.$refs['dynamicDataSourceRef'].setSelected()
+									// 		})
+									// 	}
+									// }
+									//
+									if (this.column) {
+										// 只有行编辑时处理
+										// 设置选项组数据、 选项组值字段、 映射关系
+										if (
+												this.column.prop !== dynamicDataSourceDto.valueAttribute
+										) {
+											this.column['_dynamic-source-data-' + this.column.prop] = {
+												valueSetOptions: this.options.valueSetOptions,
+												optionItems: this.optionItems,
+												valueAttribute: dynamicDataSourceDto.valueAttribute,
+											}
+										}
+										for (
+												let i = 0;
+												i < this.options.valueSetOptions.length;
+												i++
+										) {
+											const valueSetOption = this.options.valueSetOptions[i]
+											if (
+													dynamicDataSourceDto.valueAttribute ===
+													valueSetOption.columnName
+											) {
+												if (this.markValue) {
+													const muMarkValue = JSON.parse(this.markValue)
+													if (
+															muMarkValue &&
+															muMarkValue[valueSetOption.valueColumn.dbColumnName]
+													) {
+														let targeValue = (
+																muMarkValue[
+																		valueSetOption.valueColumn.dbColumnName
+																		] + ''
+														).split(',')
+														if (this.column.componentType === 'select') {
+															// 如果是单选
+															targeValue = targeValue[0]
+														}
+														// 不需要再赋值了 如果当前字段不上动态数据源的值字段，那就表示不需要回显
+														// if (valueSetOption.valueColumn.dbColumnName === this.column.prop) {
+														//   this.$emit('set-value', {
+														//     value: targeValue,
+														//     targetColumnName: this.column.prop,
+														//		options: this.optionItems,
+														//		valueAttribute: this.valueAttribute
+														//   })
+														// }
+													}
+												}
+												break
+											}
+										}
+									}
+								} else {
+									this.optionItems = []
+								}
+								if (dynamicDataSourceDto.valueAttribute) {
+									this.valueAttribute = dynamicDataSourceDto.valueAttribute
+								}
+								if (dynamicDataSourceDto.descriptionAttribute) {
+									this.descriptionAttribute =
+											dynamicDataSourceDto.descriptionAttribute
+								}
+								this.valueAttribute = this.getValueAttribute()
+								this.watchAttr = dynamicDataSourceDto.watchAttr
+								this.$emit('load-completed', dynamicDataSourceDto)
+								resolve(dynamicDataSourceDto)
+							} else {
+								resolve()
+							}
+						})
+						.catch((error) => {
+							reject(error)
+						})
+			})
+		},
+		// 远程搜索方法
+		remoteQuery(searchText, watchAttrValue) {
+			if (
+					(searchText !== null && searchText !== undefined) ||
+					(watchAttrValue !== null && watchAttrValue !== undefined)
+			) {
+				const param = {
+					_listCode: this.listCode,
+					_formCode: this.formCode,
+					_tableName: this.tableName,
+				}
+				if (searchText !== null && searchText !== undefined) {
+					param.searchText = searchText
+				}
+				if (watchAttrValue !== null && watchAttrValue !== undefined) {
+					// 监控的属性值改变了远程搜索方法
+					if (
+							Object.prototype.toString.apply(watchAttrValue) === '[object Array]'
+					) {
+						param.watchAttrValue = watchAttrValue.join(',')
+					} else {
+						param.watchAttrValue = watchAttrValue + ''
+					}
+				} else if (this.entity) {
+					// 搜索时下拉选项的集合
+					const watchValue = this.entity[this.watchAttr]
+					if (watchValue !== null && watchValue !== undefined) {
+						if (
+								Object.prototype.toString.apply(watchValue) === '[object Array]'
+						) {
+							param.watchAttrValue = watchValue.join(',')
+						} else {
+							param.watchAttrValue = watchValue + ''
+						}
+					}
+				}
+				if (this.parent) {
+					param.parent = this.parent
+				}
+				this.loading = true
+				this.packageDynamicDataSourceInfo(this.dynamicDataSourceCode, param)
+						.then((dynamicDataSourceDto) => {
+							// 解决当监控值变化时，数据源重新加载后select输入框中显示的值和下拉中的值不一致问题
+							// if (this.baseProps.multiple !== undefined && this.baseProps.multiple === true) {
+							// this.$nextTick(() => {
+							// 	// this.$refs['dynamicDataSourceRef'].setSelected()
+							// })
+							// }
+							this.loading = false
+						})
+						.catch((error) => {
+							console.log(error)
+							this.loading = false
+						})
+			}
+		},
+		// 远程搜索方法
+		remoteQueryMethod(searchText) {
+			if (Array.isArray(this.value)) {
+				if (this.value.length === 0) {
+					this.remoteQuery(searchText, null)
+				}
+			} else {
+				this.remoteQuery(searchText, null)
+			}
+		},
+		/**
+		 * 输入框输入查询值时搜索方法，
+		 * 不使用remoteQueryMethod， 解决输入框第一次输入时可查询，第二次输入时没有触发查询方法问题
+		 * @param {*} searchText
+		 */
+		remoteMethod(searchText) {
+			this.remoteQuery(searchText, null)
+		},
+		// 监控的属性值改变了远程搜索方法
+		watchAttrValueChange(watchAttrValues) {
+			this.remoteQuery(null, watchAttrValues)
+		},
+		getValueAttribute() {
+			return !this.valueAttribute || this.valueAttribute === '[label]'
+					? '_label_'
+					: this.valueAttribute
+		},
+		setValues(newValue) {
+			if (this.valueSetOptions && this.valueSetOptions.length > 0) {
+				if (this.baseProps.multiple !== undefined && this.baseProps.multiple === true) {
+					// 多选时
+					this.setColumnValueWhenMulti(newValue)
+				} else {
+					// 单选时
+					this.valueSetOptions.forEach((columnInfo) => {
+						const sourceColumnName = columnInfo.columnName
+						let value
+						if (this.optionItems && sourceColumnName) {
+							value = this.getTargetColumnValue(newValue, sourceColumnName)
+						}
+						let targetColumnName = null
+						const targetColumnInfo = columnInfo.valueColumn
+						if (targetColumnInfo) {
+							targetColumnName = targetColumnInfo.name
+							if (this.isSql === true) {
+								targetColumnName = targetColumnInfo.dbColumnName
+								targetColumnName = getPropNameWhenJoinTable(
+										targetColumnName,
+										this.isJoinTable,
+										this.tableName
+								)
+							}
+						}
+						if (
+								this.entity &&
+								targetColumnName &&
+								targetColumnName !== null &&
+								targetColumnName !== ''
+						) {
+							setEntityFieldValue(this.entity, targetColumnName, value)
+						}
+						const item = this.getSelectedOptionItem(newValue)
+						this.$emit('set-value', {
+							value: value,
+							sourceColumnName: sourceColumnName,
+							targetColumnName: targetColumnName,
+							options: this.optionItems,
+							valueAttribute: this.valueAttribute,
+							selectedItem: item,
+						})
+					})
+				}
+			}
+		},
+		// 设置字段的值
+		setColumnValue(sourceColumnName, value, columnInfo) {
+			let targetColumnName = null
+			const targetColumnInfo = columnInfo.valueColumn
+			if (targetColumnInfo) {
+				targetColumnName = targetColumnInfo.name
+				if (this.isSql === true) {
+					targetColumnName = targetColumnInfo.dbColumnName
+					targetColumnName = getPropNameWhenJoinTable(
+							targetColumnName,
+							this.isJoinTable,
+							this.tableName
+					)
+				}
+			}
+			if (
+					this.entity &&
+					targetColumnName &&
+					targetColumnName !== null &&
+					targetColumnName !== ''
+			) {
+				setEntityFieldValue(this.entity, targetColumnName, value)
+			}
+			this.$emit('set-value', {
+				value: value,
+				sourceColumnName: sourceColumnName,
+				targetColumnName: targetColumnName,
+				options: this.optionItems,
+				valueAttribute: this.valueAttribute
+			})
+		},
+		// 多选下拉框时处理增加tag、减少tag时，映射字段赋值问题
+		setColumnValueWhenMulti(newValue) {
+			// 是否添加tag
+			let isAddTag = false
+			let removeTag
+			this.valueSetOptions.forEach(columnInfo => {
+				const sourceColumnName = columnInfo.columnName
+				if (sourceColumnName === this.valueAttribute) {
+					// 是当前下拉选组件对应的字段时，才需要走该方法
+					// 字段的值
+					let value
+					if (this.optionItems && sourceColumnName) {
+						value = this.getTargetColumnValue(newValue, sourceColumnName)
+					}
+					this.setColumnValue(sourceColumnName, value, columnInfo)
+					if (this.lastValues.length < newValue.length) {
+						// 表示是增加tag
+						isAddTag = true
+					} else if (this.lastValues.length > newValue.length) {
+						// 表示减少tag
+						isAddTag = false
+						const totalArr = [...this.lastValues, ...newValue]
+						const totalSet = new Set(totalArr)
+						const arr = Array.from(totalSet)
+						const removeTagArr = [...arr.filter(item => !this.lastValues.includes(item)), ...arr.filter(item => !newValue.includes(item))]
+						if (removeTagArr && removeTagArr.length > 0) {
+							removeTag = removeTagArr[0]
+						}
+					}
+					this.lastValues = JSON.parse(JSON.stringify(newValue))
+					// 跳出forEach循环
+
+				}
+			})
+			if (isAddTag) {
+				// 表示是增加tag
+				const isRemove = false
+				const lastSelectTag = newValue[newValue.length - 1]
+				const items = this.optionItems.filter(
+						item => item[this.valueAttribute] === lastSelectTag
+				)
+				if (items && items.length > 0) {
+					this.setTagValue(null, isRemove, items[0])
+				}
+			} else {
+				// 表示是减少tag
+				const isRemove = true
+				this.setTagValue(removeTag, isRemove)
+			}
+		},
+		// 根据tag参数设置映射字段的值
+		setTagValue(tag, isRemove, selectItem) {
+			if (this.valueSetOptions && this.valueSetOptions.length > 0) {
+				this.valueSetOptions.forEach(columnInfo => {
+					const sourceColumnName = columnInfo.columnName
+					if (sourceColumnName !== this.valueAttribute) {
+						let targetColumnName = null
+						const targetColumnInfo = columnInfo.valueColumn
+						if (targetColumnInfo) {
+							targetColumnName = targetColumnInfo.name
+							if (this.isSql === true) {
+								targetColumnName = targetColumnInfo.dbColumnName
+								targetColumnName = getPropNameWhenJoinTable(
+										targetColumnName,
+										this.isJoinTable,
+										this.tableName
+								)
+							}
+						}
+						let value
+						if (targetColumnName) {
+							const originalValue = getEntityFieldValue(this.entity, targetColumnName)
+							if (isRemove) {
+								// 移除tag
+								const index = this.value.indexOf(tag)
+								if (originalValue !== undefined && originalValue !== null && originalValue !== '') {
+									const originalVals = originalValue.split(',')
+									originalVals.splice(index, 1)
+									value = originalVals.join(',')
+								}
+							} else {
+								// 添加tag
+								let addValue
+								if (selectItem) {
+									addValue = selectItem[sourceColumnName]
+								}
+								if (originalValue !== undefined && originalValue !== null && originalValue !== '') {
+									value = originalValue + ',' + addValue
+								} else {
+									value = addValue
+								}
+							}
+						}
+						if (
+								this.entity &&
+								targetColumnName &&
+								targetColumnName !== null &&
+								targetColumnName !== ''
+						) {
+							setEntityFieldValue(this.entity, targetColumnName, value)
+						}
+						this.$emit('set-value', {
+							value: value,
+							sourceColumnName: sourceColumnName,
+							targetColumnName: targetColumnName,
+							options: this.optionItems,
+							valueAttribute: this.valueAttribute
+						})
+					}
+				})
+			}
+		},
+		// 获得目的字段的值
+		getTargetColumnValue(newValue, sourceColumnName) {
+			if (newValue) {
+				let value = ''
+				if (
+						this.baseProps.multiple !== undefined &&
+						this.baseProps.multiple === true &&
+						Array.isArray(newValue)
+				) {
+					// 多选值处理，数组信息，使用逗号分开的格式设置其它字段的值
+					let i = 0
+					newValue.forEach((itemValue) => {
+						const items = this.optionItems.filter(
+								(item) => item[this.valueAttribute] === itemValue
+						)
+						if (items && items.length > 0) {
+							value += items[0][sourceColumnName]
+							if (i < newValue.length - 1) {
+								// 最后一个元素不加逗号
+								value += ','
+							}
+							i++
+						}
+					})
+				} else {
+					// 单选
+					const items = this.optionItems.filter(
+							(item) => item[this.valueAttribute] === newValue
+					)
+					if (items && items.length > 0) {
+						value = items[0][sourceColumnName]
+					}
+				}
+				return value
+			}
+		},
+		// 移除所有tag和clear时候清除markValue的值解决清除选项时关联字段清空了但是当前动态数据源控件仍然有值问题
+		clearMarkValue() {
+			if (this.markValue && this.entity) {
+				const muMarkValue = JSON.parse(this.markValue)
+				for (let i = 0; i < this.options.valueSetOptions.length; i++) {
+					const valueSetOption = this.options.valueSetOptions[i]
+					muMarkValue[valueSetOption.valueColumn.dbColumnName] = null
+				}
+				this.markValue = JSON.stringify(muMarkValue)
+			}
+		},
+	},
+	emits: [
+		'set-default-value',
+		'load-completed',
+		'update:value',
+		'set-value',
+		'update:value',
+		'focus',
+		'blur',
+		'visible-change',
+		'change'
+	],
+}
+</script>
+
+<style>
+.select-top-span {
+	width: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+:deep(.el-select-dropdown__item) {
+	display: inline-block;
+}
+</style>