agilebuilder-ui 1.1.65-tmp3 → 1.1.65-tmp30

package/packages/super-grid/src/components/select-input.vue

@@ -1,520 +0,0 @@
-<template>
-  <span>
-    <!-- <el-popover placement="top" trigger="hover" v-if="type === 'select' && !isDynamicDataSourceSourceComponent()">
-      <span style="padding-left: 5px"
-        ><el-icon :id="copyBtnId"><CopyDocument /></el-icon
-      ></span>
-      <template #reference>
-        <el-select
-          ref="item"
-          v-model="innerValue"
-          :allow-create="controlConfig.allowCreate ? true : false"
-          :clearable="controlConfig.clearable ? true : false"
-          :default-first-option="controlConfig.allowCreate ? true : false"
-          :disabled="disabled"
-          :filterable="controlConfig.filterable ? true : false"
-          :placeholder="t('imatrixUIMessage.pleaseSelect')"
-          :title="getClassOptionTitle(innerValue)"
-          @blur="emits('cellEvent', 'blur', $event)"
-          @change="changeValue"
-          @clear="emits('cellEvent','clear', $event)"
-          @focus="emits('cellEvent','focus', $event)"
-          @input="emits('cellEvent','input', $event)"
-          @visible-change="emits('cellEvent','visible-change', $event)"
-        >
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </template>
-    </el-popover> -->
-    <!--必须有@input ,否则无法输入值-->
-    <el-popover placement="top" trigger="hover" v-if="!isDynamicDataSource">
-      <span style="padding-left: 5px"
-        ><el-icon :id="copyBtnId"><CopyDocument /></el-icon
-      ></span>
-      <template #reference>
-        <el-select
-          ref="item"
-          v-model="innerValue"
-          :loading="loading"
-          :allow-create="controlConfig.allowCreate ? true : false"
-          :disabled="disabled"
-          :default-first-option="controlConfig.allowCreate ? true : false"
-          :filterable="controlConfig.filterable===undefined || controlConfig.filterable ? true : (isRemote?true:false)"
-          :placeholder="$t('imatrixUIMessage.pleaseSelect')"
-          :title="getClassOptionTitle(innerValue)"
-          :clearable="controlConfig.clearable===undefined || controlConfig.clearable ? true : false"
-          collapse-tags
-          :multiple="type === 'multiselect'"
-          :remote="isRemote"
-          :remote-method="remoteMethod"
-          @blur="emits('cellEvent','blur', $event)"
-          @change="selectChange"
-          @clear="emits('cellEvent','clear', $event)"
-          @focus="emits('cellEvent','focus', $event)"
-          @input="emits('cellEvent','input', $event)"
-          @visible-change="emits('cellEvent','visible-change', $event)"
-          @remove-tag="emits('cellEvent','remove-tag', $event)"
-        >
-          <el-option v-if="type === 'multiselect'" :label="t('superGrid.selectAll')" value="saveAll" />
-          <el-option v-for="item in optionItems" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </template>
-    </el-popover>
-    <dynamic-source-select
-      v-else-if="(type === 'multiselect' || type === 'select') && isDynamicDataSource"
-      v-model:value="innerValue"
-      :base-props="{
-        multiple: type === 'multiselect' ? true : false,
-        disabled: disabled
-      }"
-      :column="column"
-      :entity="entity"
-      :is-join-table="isJoinTable"
-      :list-code="listCode"
-      :list-toolbar-form-data="listToolbarFormData"
-      :options="{
-        dynamicDataSourceCode: dynamicDataSourceCode,
-        valueSetOptions: valueSetOptions,
-        isSql: isSql,
-        backendUrl: baseURL,
-        additionalParameter: additionalParamMap ? JSON.stringify(additionalParamMap) : null
-      }"
-      :parent="parentFormData"
-      :table-name="tableName"
-      @blur="emits('cellEvent','blur', $event)"
-      @change="selectChange"
-      @clear="emits('cellEvent','clear', $event)"
-      @focus="emits('cellEvent','focus', 'focus1111')"
-      @input="emits('cellEvent','input', $event)"
-      @visible-change="emits('cellEvent','visible-change', $event)"
-      @remove-tag="emits('cellEvent','remove-tag', $event)"
-      @set-value="setDynamicSourceSelectValue"
-    />
-  </span>
-</template>
-<script lang="ts" setup>
-import { onMounted, ref, defineProps, defineEmits, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import {
-  getClassOptionTitleCommon,
-  isDynamicDataSourceSource,
-} from '../utils'
-import ClipboardJs from 'clipboard'
-import { ElMessage } from 'element-plus'
-import store from '../store'
-import { getRelativeBaseUrl } from '../../../../src/utils/common-util'
-const props = defineProps({
-  // 字段配置
-  column: {
-    type: Object,
-    default: null
-  },
-  type: {
-    type: String,
-    default: 'input'
-  },
-  controlConfig:{
-    type: Object,
-    default: false
-  },
-  listCode:{
-    type: String,
-    default: ''
-  },
-  listToolbarFormData: {
-    type: Object,
-    default: null
-  },
-  dynamicDataSourceCode: {
-    type: String,
-    default: ''
-  },
-  additionalParamMap: {
-    type: [String, Object],
-    default: null
-  },
-  isSql: {
-    type: Boolean,
-    default: false
-  },
-  parentFormData:{
-    type: Object,
-    default: () => ({})
-  },
-  tableName: {
-    type: String,
-    default: ''
-  },
-  options: {
-    type: Array,
-    default: () => []
-  },
-  valueSetOptions: {
-    type: Object,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  modelValue: {
-    type: [String, Number, Boolean],
-    default: ''
-  },
-  prop: {
-    type: String,
-    default: ''
-  },
-  entity: {
-    type: Object,
-    default: () => ({})
-  }
-})
-
-const { t } = useI18n()
-const emits = defineEmits(['update:modelValue', 'cellEvent', 'extendParams', 'setCellValue', 'callCustomEventWithParam', 'setCellValueWithProp' ])
-const innerValue:any = ref(props.modelValue)
-const isJoinTable:any = ref(false) // 是否是关联表
-// 监控props.modelValue，解决js代码修改属性值时，下拉框显示值不改变问题
-watch(
-  () => props.modelValue,
-  (newVal, oldVal) => {
-    console.log('watch---props.modelValue---newVal=', newVal)
-    innerValue.value = newVal
-  },
-  { immediate: true }
-)
-const copyBtnId = 'copyBtn_'+new Date().getTime()
-const gridParams = store.get(props.listCode)
-if (gridParams && gridParams.basicInfo && gridParams.basicInfo.hasJoinTable) {
-  isJoinTable.value = gridParams.basicInfo.hasJoinTable
-}
-let baseURL = gridParams.options.backendUrl
-if (!baseURL) {
-  baseURL = window.$vueApp.config.globalProperties.baseURL
-}
-
-const isDynamicDataSource = ref(false)
-isDynamicDataSource.value = isDynamicDataSourceSourceComponent()
-
-let valueSetOptionsObj = props.column.valueSetOptions?JSON.parse(props.column.valueSetOptions): null
-const isRemote = ref(false)
-isRemote.value = !isDynamicDataSource.value && valueSetOptionsObj && valueSetOptionsObj.filterType === 'remote' && valueSetOptionsObj.type && valueSetOptionsObj.type === 'dataTable'
-console.log('下拉选---props.valueSetOptions==', props.valueSetOptions, 'isRemote=', isRemote.value, 'valueSetOptionsObj=', valueSetOptionsObj, 'controlConfig=', props.controlConfig)
-
-let queryTxt
-
-let optionItems = ref(props.options)
-
-if(!isDynamicDataSource.value){
-  remoteMethod(null, true)
-}
-const loading = ref(false)
-
-onMounted(()=>{
-  const clipboard = new ClipboardJs('#'+copyBtnId,{
-      text:function (){
-        return getSelectItemsTitle(innerValue.value)
-      }
-    })
-    clipboard.on('success',()=>{
-      ElMessage({
-        type: 'success',
-        message: t('chatEmbed.copySuccess'),
-        showClose: true
-      })
-    })
-    clipboard.on('error',(e)=>{
-      console.error('复制失败',e)
-    })
-})
-
-const changeValue = (val: any) => {
-  innerValue.value = val
-  console.log('changeValue----val=', val)
- if (valueSetOptionsObj?.type && valueSetOptionsObj.type === 'dataTable' && props.valueSetOptions && props.valueSetOptions.length > 0) {
-    // 如果有valueSetOptions，则根据valueSetOptions设置对应的值
-    if(val === undefined || val === null || val === '') {
-      // 清空时会走该判断
-      clearValue()
-    } else{
-      const selectedOptions = getSelectedOptionItem(val, optionItems.value)
-      if (selectedOptions) {
-        props.valueSetOptions.forEach((item: any) => {
-          if (item.valueField !== props.prop) {
-            const value = selectedOptions[item.columnName]
-  console.log('changeValue-----setCellValue前')
-            emits('setCellValueWithProp', item.valueField, value)
-  console.log('changeValue-----setCellValue后')
-  // console.log('changeValue-----cellEvent前')
-  //           emits('cellEvent','change', value)
-  // console.log('changeValue-----cellEvent后')
-          }
-        })
-      }
-    }
-  }
-  console.log('changeValue-----update:modelValue前')
-  emits('update:modelValue', val)
-  console.log('changeValue-----update:modelValue后')
-  console.log('changeValue-----setCellValue前222')
-  emits('setCellValue', props.prop, val, 'change')
-  console.log('changeValue-----setCellValue后222')
-}
-
-/**
- * 根据value获取options中value等于传递的value的选项
- */
-function getSelectedOptionItem(value, options) {
-  if (!options) {
-    return []
-  }
-  return options.find((item) => {
-    return item.value === value
-  })
-}
-
-function getClassOptionTitle(val) {
-  return getClassOptionTitleCommon(val, optionItems.value)
-}
-
-// 值设置是否是动态数据源类型的数据源
-function isDynamicDataSourceSourceComponent() {
-  return isDynamicDataSourceSource(props.column)
-}
-
-function selectChange(arr, selectedItem) {
-  // console.log('multiselectChange1---arr=', arr)
-  // this.extendParams = selectedItem
-  if(props.type === 'select' && !isDynamicDataSource.value) {
-    // 非动态数据源单选
-    changeValue(arr)
-    return
-  }
-  emits('extendParams', selectedItem)
-  let isSaveAll = false
-  if (arr && arr.length > 0 && props.type === 'multiselect' && !isDynamicDataSource.value) {
-    const saveAll = 'saveAll'
-    if (arr.indexOf(saveAll) !== -1) {
-      const length = arr.length
-      if (length - 1 >= optionItems.value.length) {
-        innerValue.value = null
-        // 取消全选
-      } else {
-        // 全选
-        if (!innerValue.value || innerValue.value.indexOf(saveAll) >= 0) {
-          innerValue.value = []
-        }
-        optionItems.value?.forEach((item:any) => {
-          if (innerValue.value.indexOf(item.value) === -1) {
-            innerValue.value.push(item.value)
-          }
-        })
-      }
-      isSaveAll = true
-    }
-  }
-  if (props.type === 'multiselect') {
-    // console.log('multiselectChange2---innerValue.value=', innerValue.value)
-    if (innerValue.value && typeof innerValue.value !== 'number' && innerValue.value.indexOf('saveAll') !== -1) {
-      innerValue.value.splice(innerValue.value.indexOf('saveAll'), 1)
-    }
-    // 非动态数据源时映射字段设值
-    autoSetOtherFieldsWhenMulti()
-    // console.log('multiselectChange3---innerValue.value=', innerValue.value)
-    const val = innerValue.value && innerValue.value.length > 0 ? innerValue.value.join(',') : null
-    if (isSaveAll) {
-  console.log('selectChange-----input前')
-      emits('cellEvent','input', val)
-  console.log('selectChange-----input后')
-    }
-  console.log('selectChange-----update:modelValue前')
-    emits('update:modelValue', val)
-  console.log('selectChange-----update:modelValue后')
-  // console.log('selectChange-----cellEvent change前')
-  //   emits('cellEvent','change', val)
-  // console.log('selectChange-----cellEvent change后')
-  console.log('selectChange-----setCellValue前')
-    emits('setCellValue', props.prop, val, 'change')
-  console.log('selectChange-----setCellValue后')
-    // this.setCellValue(this.column.prop, val, 'change')
-  } else {
-  console.log('selectChange-----22222')
-    emits('update:modelValue', arr)
-    // emits('cellEvent','change', arr)
-    emits('setCellValue', props.prop, arr, 'change')
-  }
-}
-
-// 非动态数据源时映射字段设值
-function autoSetOtherFieldsWhenMulti() {
-  console.log('autoSetOtherFields----innerValue.value=', innerValue.value)
-  if (valueSetOptionsObj?.type && valueSetOptionsObj.type === 'dataTable' && props.valueSetOptions && props.valueSetOptions.length > 0) {
-    if(!isDynamicDataSource.value){
-      if(!innerValue.value || innerValue.value.length === 0){
-        clearValue()
-      }else {
-        let autoSets = {}
-        innerValue.value.forEach(val=>{
-          const selectedOptions = getSelectedOptionItem(val, optionItems.value)
-          if (selectedOptions) {
-            props.valueSetOptions.forEach((item: any) => {
-              if (item.valueField !== props.prop) {
-                // 映射字段设值
-                let valueArr = autoSets[item.valueField]
-                if(!valueArr){
-                  valueArr = []
-                }
-                const value = selectedOptions[item.columnName]
-                valueArr.push(value)
-                autoSets[item.valueField] = valueArr
-              }
-            })
-          }
-        })
-        for(let valueField in autoSets){
-          const valueArr = autoSets[valueField]
-          if(valueArr){
-            const valueStr = valueArr.join(',')
-  console.log('autoSetOtherFieldsWhenMulti-----setCellValue前')
-            emits('setCellValueWithProp', valueField, valueStr)
-  console.log('autoSetOtherFieldsWhenMulti-----setCellValue后')
-  // console.log('autoSetOtherFieldsWhenMulti-----cellEvent前')
-  //           emits('cellEvent','change', valueStr)
-  // console.log('autoSetOtherFieldsWhenMulti-----cellEvent后')
-          } else {
-  console.log('autoSetOtherFieldsWhenMulti-----setCellValue前222')
-            emits('setCellValueWithProp', valueField, null)
-  console.log('autoSetOtherFieldsWhenMulti-----setCellValue后222')
-  // console.log('autoSetOtherFieldsWhenMulti-----cellEvent前222')
-  //           emits('cellEvent','change', null)
-  // console.log('autoSetOtherFieldsWhenMulti-----cellEvent后222')
-          }
-        }
-      }
-    }
-  }
-}
-
-function setDynamicSourceSelectValue({ value, sourceColumnName, targetColumnName, options, selectedItem }) {
-  console.log('setDynamicSourceSelectValue------params=', value, sourceColumnName, targetColumnName, options, selectedItem)
-  if (targetColumnName) {
-    if(targetColumnName === props.prop){
-      // 表示是当前下拉选字段时，需要赋值并执行事件
-      emits('setCellValue', targetColumnName, value, 'input')
-      // setCellValue中有执行事件callCustomEventWithParam的代码
-      // emits('callCustomEventWithParam', 'input', {
-      //   value,
-      //   extendParams: selectedItem,
-      //   row: props.entity,
-      //   column: props.column,
-      //   targetColumnName
-      // })
-    } else {
-      // 当时映射字段时，只需要赋值，不需要事件
-      emits('setCellValueWithProp', targetColumnName, value)
-    }
-  }
-}
-
-// 获得选中项的label值
-function getSelectItemsTitle(val) {
-  if (val !== null && val !== undefined && val !== '' && val.length > 0) {
-    let selectTittle = ''
-    if (typeof val === 'string') {
-      // 单选
-      if(optionItems.value.length > 0){
-        optionItems.value.forEach((Ttem:any) => {
-          if (Ttem['value'] === val) {
-            selectTittle = Ttem.label
-          }
-        })
-      } else {
-        selectTittle = val
-      }
-    } else {
-      // 多选
-      if(optionItems.value.length > 0){
-        optionItems.value.forEach((Ttem) => {
-          val.forEach((Vtem:any) => {
-            if (Ttem['value'] === Vtem) {
-              selectTittle = selectTittle + Ttem.label + ','
-            }
-          })
-        })
-        selectTittle = selectTittle.slice(0, selectTittle.length - 1)
-      } else {
-        selectTittle = val.join(',')
-      }
-    }
-    return selectTittle
-  }
-}
-
-function remoteMethod(searchText, isInit) {
-  if(!valueSetOptionsObj?.type || valueSetOptionsObj?.type !== 'dataTable'){
-    // 不是数据表时直接返回
-    return
-  }
-  // 查询的值是否改变了
-  let isChange =false
-  if(!isInit && (queryTxt===undefined || queryTxt === null || queryTxt !== searchText)){
-    queryTxt = searchText
-    isChange = true
-  }
-  if (isChange || isInit) {
-      let dataSourceObj:any = {}
-      // 选项组时不需要在此处获得
-      Object.assign(dataSourceObj, valueSetOptionsObj)
-      // 更新uuid为字段名
-      dataSourceObj.uuid = props.prop
-      if (!dataSourceObj.props) {
-        dataSourceObj.props = {}
-      }
-      dataSourceObj.props.tableName = valueSetOptionsObj?.props?.tableName
-      dataSourceObj.props.prop = props.prop
-
-      const param:any = {
-        listCode: props.listCode,
-        entityMap: props.entity,
-        additionalParamMap: props.additionalParamMap,
-        dataSourceList: [dataSourceObj]
-      }
-      if (searchText !== null && searchText !== undefined) {
-        param.query = searchText
-      }
-      if (props.parentFormData) {
-        param.parent = props.parentFormData
-      }
-      const url = getRelativeBaseUrl(window.$vueApp.config.globalProperties.baseURL + '/common/common-data/find-grid-datas')
-      window.$vueApp.config.globalProperties.$http
-      .post(url, param)
-      .then((result) => {
-        console.log('remoteMethod---result===', result)
-        if(result && result.columnValueSet) {
-          const columnValueSet = result.columnValueSet
-          optionItems.value = columnValueSet[props.prop]
-        } else {
-          optionItems.value = []
-        }
-        console.log('查询选项数据完成', result)
-      })
-      .catch((error) => {
-        console.log('查询选项数据失败', error)
-      })
-    }
-}
-
-function clearValue() {
-  if(props.valueSetOptions){
-    props.valueSetOptions.forEach((item: any) => {
-      if (item.valueField !== props.prop) {
-        // 映射字段值清空
-        emits('setCellValueWithProp', item.valueField, null)
-        // emits('cellEvent','change', null)
-      }
-    })
-  }
-}
-
-</script>