imatrix-ui 0.0.1-dsn

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

@@ -0,0 +1,701 @@
+<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="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"
+				: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 {$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
+							// 解决当监控值变化时，数据源重新加载后select输入框中显示的值和下拉中的值不一致问题
+							if (this.baseProps.multiple !== undefined && this.baseProps.multiple === true) {
+								this.$nextTick(() => {
+								this.$refs['dynamicDataSourceRef'].setSelected()
+								})
+							}
+							// 默认选中处理
+							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,
+		blurEvent(event) {
+		// 解决当监控值变化时，数据源重新加载后select输入框中显示的值和下拉中的值不一致问题
+		if (this.baseProps.multiple !== undefined && this.baseProps.multiple === false) {
+			this.$nextTick(() => {
+			this.$refs['dynamicDataSourceRef'].setSelected()
+			})
+		}
+		this.$emit('blur', event)
+		},
+		/**
+		 * @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,
+														//		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
+								$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) => {
+							// 解决当监控值变化时，数据源重新加载后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) {
+				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,
+            			valueAttribute: this.valueAttribute,
+						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>