imatrix-ui 2.8.21-dw → 2.8.21

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

@@ -0,0 +1,440 @@
+<template>
+  <span class="select-top-span">
+    <el-select
+      v-if="isLoaded"
+      ref="dynamicDataSourceRef"
+      :value="value"
+      v-bind="myProps"
+      filterable
+      :remote="remote"
+      :remote-method="remoteMethod"
+      :value-key="valueAttribute"
+      :loading="loading"
+      :reserve-keyword="true"
+      clearable
+      style="width:100%;height:100%"
+      @input="inputValue"
+      @change="change"
+      @visible-change="visibleChange"
+      @remove-tag="removeTag(remote,$event)"
+      @clear="clear"
+      @blur="blur"
+      @focus="focus"
+    >
+      <el-option
+        v-for="item in optionItems"
+        :key="item.value"
+        :label="item._label_"
+        :value="item[valueAttribute]"
+      />
+    </el-select>
+  </span>
+</template>
+<style>
+.select-top-span {
+  width: 100%;
+}
+</style>
+<script>
+import dynamicSourceSelectService from './dynamic-source-select-service'
+import events from './events'
+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
+    }
+  },
+  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 // 后台访问路径
+    }
+  },
+  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
+      }
+      this.packageDynamicDataSourceInfo(this.dynamicDataSourceCode, param)
+        .then(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
+        })
+        .catch(error => {
+          console.log(error)
+          this.isLoaded = true
+        })
+    } else {
+      this.isLoaded = true
+    }
+  },
+  methods: {
+    ...dynamicSourceSelectService,
+    ...events,
+    // 必须有该方法，否则无法给字段赋值
+    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]
+                          }
+                          this.$emit('set-value', {
+                            value: targeValue,
+                            targetColumnName: this.column.prop
+                          })
+                        }
+                      }
+                      break
+                    }
+                  }
+                }
+              } else {
+                this.optionItems = []
+              }
+              if (dynamicDataSourceDto.valueAttribute) {
+                this.valueAttribute = dynamicDataSourceDto.valueAttribute
+              }
+              this.valueAttribute = this.getValueAttribute()
+              this.watchAttr = dynamicDataSourceDto.watchAttr
+              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)
+          }
+          this.$emit('set-value', {
+            value: value,
+            sourceColumnName: sourceColumnName,
+            targetColumnName: targetColumnName,
+            options: this.optionItems
+          })
+        })
+      }
+    },
+    // 获得目的字段的值
+    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>

package/packages/dynamic-source-select/src/events.js

@@ -0,0 +1,55 @@
+const events = {
+  /**
+   * 选中值发生变化时触发
+   * @param {*} newValue
+   */
+  change: function(newValue) {
+    this.$emit('change', newValue)
+  },
+  /**
+   * 下拉框出现/隐藏时触发
+   * @param {*} visible 出现则为 true，隐藏则为 false
+   */
+  visibleChange: function(visible) {
+    this.$emit('visible-change', visible)
+  },
+  /**
+   * 多选模式下移除tag时触发
+   * @param {*} remote 是否启用了远程搜索
+   * @param {*} tag 移除的tag值
+   */
+  removeTag: function(remote, tag) {
+    this.$emit('remove-tag', tag)
+    if (Array.isArray(this.value)) {
+      if (this.value.length === 1 && remote) {
+        this.clearMarkValue()
+        this.remoteQuery('', null)
+      }
+    }
+  },
+  /**
+   * 可清空的单选模式下用户点击清空按钮时触发
+   */
+  clear: function() {
+    this.clearMarkValue()
+    this.$emit('clear')
+  },
+  /**
+   * 当 input 失去焦点时触发
+   * @param {*} event
+   */
+  blur: function(event) {
+    this.$emit('blur', event)
+  },
+  /**
+   * 当 input 获得焦点时触发
+   * @param {*} event
+   */
+  focus: function(event) {
+    this.$emit('focus', event)
+  },
+  input(newValue) {
+    this.$emit('input', newValue)
+  }
+}
+export default events

package/packages/fs-preview/index.js

@@ -0,0 +1,6 @@
+import FsPreview from './src/fs-preview.vue'
+FsPreview.install = function(Vue) {
+  Vue.component(FsPreview.name, FsPreview)
+}
+
+export default FsPreview