imatrix-ui 0.0.15 → 0.1.1-up

package/components/dynamic-source-select/dynamic-source-select.vue

@@ -0,0 +1,673 @@
+<template>
+  <span class="select-top-span">
+    <el-select
+      ref="dynamicDataSourceRef"
+      :model-value="value"
+      v-bind="myProps"
+      :remote="remote"
+      :title="getClassOptionTitle(value)"
+      :remote-method="remoteMethod"
+      :value-key="valueAttribute"
+      :loading="loading"
+      :size="size"
+      :allow-create="allowCreate"
+      :placeholder="placeholder"
+      default-first-option
+      :reserve-keyword="true"
+      :filterable="remote"
+      :clearable="clearable"
+      :style="fullWidth ? { width: '100%', height: '100%' } : {}"
+      @input="inputValue"
+      @change="change"
+      @visible-change="visibleChange"
+      @remove-tag="removeTag(remote, $event)"
+      @clear="clear"
+      @blur="blur"
+      @focus="focus"
+    >
+      <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_"
+            :value="item[valueAttribute]"
+            :title="item._label_ + item._description_"
+          >
+            <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
+          :key="item.value"
+          :label="item._label_"
+          :value="item[valueAttribute]"
+          :title="item._label_ + item._description_"
+        >
+          <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
+          :key="item.value"
+          :label="item._label_"
+          :value="item[valueAttribute]"
+        />
+      </template>
+    </el-select>
+  </span>
+</template>
+
+<script>
+import dynamicSourceSelectService from './dynamic-source-select-service'
+import events from './events'
+import eventBus from '../../src/utils/eventBus'
+import {
+  setEntityFieldValue,
+  getPropNameWhenJoinTable,
+} 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) {
+                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
+              eventBus.$on('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
+    }
+    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) {
+      this.$emit('input', 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.$set(
+                      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
+              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) => {
+            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)
+          this.$emit('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)
+      }
+    },
+  },
+}
+</script>
+
+<style>
+.select-top-span {
+  width: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+::v-deep .el-select-dropdown__item {
+  display: inline-block;
+}
+</style>