imatrix-ui 0.2.6-up → 0.2.7-up

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

@@ -1,675 +1,675 @@
-<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="blur"
-		    @change="change"
-		    @clear="clear"
-		    @focus="focus"
-		    @input="inputValue"
-		    @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"
-		        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"
-		        v-else
-		        :label="item._label_"
-		        :value="item[valueAttribute]"
-        />
-      </template>
-    </el-select>
-  </span>
-</template>
-
-<script>
-import {$emit, $on} from '../../utils/gogocodeTransfer'
-import dynamicSourceSelectService from './dynamic-source-select-service'
-import events from './events'
-import eventBus from '../../../src/utils/eventBus'
-import {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: 'medium',
-		},
-		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)
-		}
-		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: {}, // 请求参数
-		}
-	},
-	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
-							// 默认选中处理
-							if (dynamicDataSourceDto.defaultSelect) {
-								// 多选处理
-								if (this.baseProps.multiple) {
-									$emit(this, 'set-default-value', [
-										this.optionItems[0][this.valueAttribute],
-									])
-								} else {
-									// 单选处理
-									if (this.optionItems.length > 0) {
-										$emit(
-												this,
-												'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('传递了参数');
-							}
-							$emit(this, 'load-completed', dynamicDataSourceDto)
-						})
-						.catch((error) => {
-							console.log(error)
-							$emit(this, 'load-completed', {
-								code: this.dynamicDataSourceCode,
-								error: error,
-							})
-							this.isLoaded = true
-						})
-			}
-		} else {
-			this.isLoaded = true
-		}
-		console.log(
-				'%c描述-095027',
-				'color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px',
-				this.optionWidth
-		)
-	},
-	methods: {
-		...dynamicSourceSelectService,
-		...events,
-		/**
-		 * @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) {
-			$emit(this, '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
-														//   })
-														// }
-													}
-												}
-												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
-								$emit(this, '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) => {
-							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) {
-				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)
-					$emit(this, 'set-value', {
-						value: value,
-						sourceColumnName: sourceColumnName,
-						targetColumnName: targetColumnName,
-						options: this.optionItems,
-						selectedItem: item,
-					})
-				})
-			}
-		},
-		// 获得目的字段的值
-		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',
-	],
-}
-</script>
-
-<style>
-.select-top-span {
-	width: 100%;
-}
-</style>
-
-<style lang="scss" scoped>
-:deep(.el-select-dropdown__item) {
-	display: inline-block;
-}
-</style>
+<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="blur"
+		    @change="change"
+		    @clear="clear"
+		    @focus="focus"
+		    @input="inputValue"
+		    @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"
+		        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"
+		        v-else
+		        :label="item._label_"
+		        :value="item[valueAttribute]"
+        />
+      </template>
+    </el-select>
+  </span>
+</template>
+
+<script>
+import {$emit, $on} from '../../utils/gogocodeTransfer'
+import dynamicSourceSelectService from './dynamic-source-select-service'
+import events from './events'
+import eventBus from '../../../src/utils/eventBus'
+import {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: 'medium',
+		},
+		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)
+		}
+		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: {}, // 请求参数
+		}
+	},
+	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
+							// 默认选中处理
+							if (dynamicDataSourceDto.defaultSelect) {
+								// 多选处理
+								if (this.baseProps.multiple) {
+									$emit(this, 'set-default-value', [
+										this.optionItems[0][this.valueAttribute],
+									])
+								} else {
+									// 单选处理
+									if (this.optionItems.length > 0) {
+										$emit(
+												this,
+												'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('传递了参数');
+							}
+							$emit(this, 'load-completed', dynamicDataSourceDto)
+						})
+						.catch((error) => {
+							console.log(error)
+							$emit(this, 'load-completed', {
+								code: this.dynamicDataSourceCode,
+								error: error,
+							})
+							this.isLoaded = true
+						})
+			}
+		} else {
+			this.isLoaded = true
+		}
+		console.log(
+				'%c描述-095027',
+				'color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px',
+				this.optionWidth
+		)
+	},
+	methods: {
+		...dynamicSourceSelectService,
+		...events,
+		/**
+		 * @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) {
+			$emit(this, '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
+														//   })
+														// }
+													}
+												}
+												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
+								$emit(this, '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) => {
+							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) {
+				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)
+					$emit(this, 'set-value', {
+						value: value,
+						sourceColumnName: sourceColumnName,
+						targetColumnName: targetColumnName,
+						options: this.optionItems,
+						selectedItem: item,
+					})
+				})
+			}
+		},
+		// 获得目的字段的值
+		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',
+	],
+}
+</script>
+
+<style>
+.select-top-span {
+	width: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+:deep(.el-select-dropdown__item) {
+	display: inline-block;
+}
+</style>