agilebuilder-ui 1.1.65-tmp3 → 1.1.65-tmp31

package/packages/super-grid/src/search-form-dialog.vue

@@ -1,77 +0,0 @@
-<template>
-  <el-dialog
-    :show-close="true"
-    :append-to-body="true"
-    title="查询条件"
-    model-value
-    @close="$emit('close')"
-  >
-    <search-form
-      ref="sf"
-      :columns="columns"
-      :code="code"
-      :url="url"
-      :pagination="pagination"
-      :query="query"
-      :search-param="searchParam"
-      :init-search-props="initSearchProps"
-      @search="doSearch"
-      @reset="resetSearch"
-    />
-  </el-dialog>
-</template>
-
-<script>
-import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
-import SearchForm from './search-form.vue'
-export default {
-  name: 'SearchFormDialog',
-  components: {
-    SearchForm,
-  },
-  props: {
-    columns: {
-      type: Array,
-      default: null,
-    },
-    code: {
-      type: String,
-      default: null,
-    },
-    url: {
-      type: String,
-      default: null,
-    },
-    pagination: {
-      type: Object,
-      default: null,
-    },
-    query: {
-      type: Object,
-      default: null,
-    },
-    searchParam: {
-      type: Object,
-      default: null,
-    },
-    initSearchProps: {
-      type: Array,
-      default: null,
-    },
-  },
-  data() {
-    return {}
-  },
-  computed: {},
-  created() {},
-  methods: {
-    doSearch(searchForm) {
-      $emit(this, 'search', searchForm)
-    },
-    resetSearch() {
-      $emit(this, 'reset')
-    },
-  },
-  emits: ['close', 'search', 'reset'],
-}
-</script>

package/packages/super-grid/src/search-form-item.vue

@@ -1,616 +0,0 @@
-<template>
-  <el-form-item
-    :label-width="labelWidth ?? (column.querySetting ? getLabelWidth(column.querySetting) : '110px')"
-    :prop="column.prop"
-  >
-    <template v-slot:label>
-      <span
-        :title="(column.searchLabel ?? column.label).replace(/\\n/g, '</br>')"
-        v-html="(column.searchLabel ?? column.label).replace(/\\n/g, '</br>')"
-      />
-    </template>
-    <span v-if="customComponent(column) === true" style="width: 100%">
-      <component
-        :is="column.componentName"
-        :ref="column.componentName"
-        :entity="searchForm"
-        :additional-settings="controlConfig"
-        :model-value="getFormItemValue(column.prop)"
-        :prop="column.prop"
-        :row="searchForm"
-        :select-options="column.valueSet"
-        class="customComponent"
-        @change="setValueToModelProp(column.prop, $event, column.componentName)"
-      />
-    </span>
-    <!-- 日期区间-两个输入框方式 -->
-    <span v-else-if="column.componentType === 'dateSection'">
-      <el-date-picker
-        v-model="searchForm[column.prop][0]"
-        :placeholder="$t('imatrixUIMessage.startDate')"
-        :style="column.searchControlWidth"
-        type="date"
-        @change="setValueToModelProp(column.prop, $event, null, 0)"
-      />
-      <el-date-picker
-        v-model="searchForm[column.prop][1]"
-        :placeholder="$t('imatrixUIMessage.endDate')"
-        :style="column.searchControlWidth"
-        type="date"
-        @change="setValueToModelProp(column.prop, $event, null, 1)"
-      />
-    </span>
-    <!--后面再优化年份及年份区间控件--->
-    <year-range-picker
-      v-else-if="column.componentType === 'yearRange'"
-      :value="getFormItemValue(column.prop)"
-      type="yearRange"
-      @change="setYearRangeValue(column.prop, $event)"
-    />
-    <el-date-picker
-      v-else-if="column.componentType === 'dateTimePicker'"
-      :default-time="getDefaultTime(column)"
-      :end-placeholder="$t('imatrixUIMessage.endDate')"
-      v-model="searchForm[column.prop]"
-      :range-separator="$t('imatrixUIPublicModel.to')"
-      :start-placeholder="$t('imatrixUIMessage.startDate')"
-      :style="column.searchControlWidth"
-      type="datetimerange"
-      unlink-panels
-      format="YYYY-MM-DD HH:mm:ss"
-      value-format="YYYY-MM-DD HH:mm:ss"
-      @change="setValueToModelProp(column.prop, $event)"
-    />
-    <!--:model-value="getFormItemValue(column.prop)"改成v-model="searchForm[column.prop]" 是因为新页面查询日期时会无法选中日期-->
-    <el-date-picker
-      v-else-if="column.dataType === 'DATE' || column.componentType === 'date'"
-      :end-placeholder="$t('imatrixUIMessage.endDate')"
-      v-model="searchForm[column.prop]"
-      :range-separator="$t('imatrixUIPublicModel.to')"
-      :start-placeholder="$t('imatrixUIMessage.startDate')"
-      :style="column.searchControlWidth"
-      type="daterange"
-      unlink-panels
-      format="YYYY-MM-DD"
-      value-format="YYYY-MM-DD"
-      @change="setValueToModelProp(column.prop, $event)"
-    />
-    <el-date-picker
-      v-else-if="column.dataType === 'TIME' && column.componentType === 'timepicker'"
-      :end-placeholder="$t('imatrixUIMessage.endDate')"
-      v-model="searchForm[column.prop]"
-      :range-separator="$t('imatrixUIPublicModel.to')"
-      :start-placeholder="$t('imatrixUIMessage.startDate')"
-      :style="column.searchControlWidth"
-      type="datetimerange"
-      unlink-panels
-      format="HH:mm:ss"
-      value-format="HH:mm:ss"
-      @change="setValueToModelProp(column.prop, $event)"
-    />
-
-    <el-time-picker
-      v-else-if="column.componentType === 'timepicker' && column.dataType !== 'TIME' && column.dataType !== 'DATE'"
-      v-model="searchForm[column.prop]"
-      :placeholder="$t('imatrixUIMessage.selectTime')"
-      style="width: 100%"
-      type="fixed-time"
-      format="HH:mm:ss"
-      value-format="HH:mm:ss"
-      @change="setValueToModelProp(column.prop, $event)"
-    />
-
-    <organization-input
-      v-else-if="componentTypeTypeIsTree(column.componentType)"
-      :fields="getTreeFields(column.orgTreeSet)"
-      :department-info="departmentInfo"
-      :limit-filter-column="controlConfig?.limitFilterColumn"
-      :models="searchForm"
-      :multiple="getTreeIsMultiTree(column.componentType)"
-      :tree-type="getTreeType(column.componentType)"
-      :value="getFormItemValue(column.prop)"
-      @clear="clearOrganizationInputEvent"
-      @setValue="organizationInputEvent"
-    />
-    <el-select
-      v-else-if="column?.componentType === 'radio'"
-      :model-value="getFormItemValue(column.prop)"
-      :placeholder="$t('imatrixUIMessage.pleaseSelect')"
-      :style="column.searchControlWidth"
-      clearable
-      filterable
-      @change="setValueToModelProp(column.prop, $event)"
-    >
-      <template v-if="column.dataType !== 'BOOLEAN'" #header>
-        <el-checkbox v-model="checkEmptyValue" @change="checkEmptyChange">
-          {{ $t('imatrixUIPublicModel.emptyValue') }}
-        </el-checkbox>
-      </template>
-      <el-option v-for="item in column.valueSet" :key="item.value" :label="item.label" :value="item.value" />
-    </el-select>
-    <el-select
-      v-else-if="
-        ((column.componentType && column.componentType === 'select') || column.dataType === 'BOOLEAN') &&
-        !isDynamicDataSourceSource(column)
-      "
-      :model-value="getFormItemValue(column.prop)"
-      :placeholder="$t('imatrixUIMessage.pleaseSelect')"
-      :style="column.searchControlWidth"
-      clearable
-      filterable
-      @change="setValueToModelProp(column.prop, $event)"
-    >
-      <template v-if="column.dataType !== 'BOOLEAN'" #header>
-        <el-checkbox v-model="checkEmptyValue" @change="checkEmptyChange">
-          {{ $t('imatrixUIPublicModel.emptyValue') }}
-        </el-checkbox>
-      </template>
-      <el-option v-for="item in column.valueSet" :key="item.value" :label="item.label" :value="item.value" />
-    </el-select>
-    <el-select
-      v-else-if="column.componentType && column.componentType === 'multiselect' && !isDynamicDataSourceSource(column)"
-      :model-value="getFormItemValue(column.prop)"
-      :placeholder="$t('imatrixUIMessage.pleaseSelect')"
-      :style="column.searchControlWidth"
-      clearable
-      collapse-tags
-      filterable
-      multiple
-      @change="setValueToModelProp(column.prop, $event)"
-    >
-      <template #header>
-        <el-checkbox v-model="checkEmptyValue" @change="checkEmptyChange">
-          {{ $t('imatrixUIPublicModel.emptyValue') }}
-        </el-checkbox>
-      </template>
-      <el-option v-for="item in column.valueSet" :key="item.value" :label="item.label" :value="item.value" />
-    </el-select>
-    <template
-      v-else-if="
-        column.componentType &&
-        (column.componentType === 'multiselect' || column.componentType === 'select') &&
-        isDynamicDataSourceSource(column)
-      "
-    >
-      <dynamic-source-select
-        ref="selectRef"
-        v-model:value="searchForm[column.prop]"
-        :allow-create="dataSourceOptions?.controlConfig?.allowCreate"
-        :base-props="{
-          multiple: column.componentType === 'multiselect' ? true : false
-        }"
-        :entity="searchForm"
-        :filterable="true"
-        :is-join-table="isJoinTable"
-        :list-code="code"
-        :list-toolbar-form-data="listToolbarFormData"
-        :options="dataSourceOptions"
-        :table-name="tableName"
-        :is-search="true"
-        @change="multiselectChange"
-        @changeEmptyValue="checkEmptyChange"
-      />
-    </template>
-    <!--
-									<el-input-number
-										v-else-if="column.componentType && column.componentType==='inputNumber'"
-										:value="getFormItemValue(column.prop)"
-										@input="setValueToModelProp(column.prop,$event)"
-									/> -->
-
-    <search-form-number
-      v-else-if="column.componentType && column.componentType === 'inputNumber'"
-      :item-value="searchForm[column.prop]"
-      :module-config="moduleConfig"
-      @setValue="setNumberValue"
-    />
-
-    <el-switch
-      v-else-if="column.componentType && column.componentType === 'switch'"
-      :model-value="getFormItemValue(column.prop)"
-      :style="column.searchControlWidth"
-      active-color="#13ce66"
-      inactive-color="#ff4949"
-      @change="setValueToModelProp(column.prop, $event)"
-    />
-    <el-slider
-      v-else-if="column.componentType && column.componentType === 'slider'"
-      :model-value="getFormItemValue(column.prop)"
-      :style="column.searchControlWidth"
-      @change="setValueToModelProp(column.prop, $event)"
-    />
-
-    <el-rate
-      v-else-if="column.componentType && column.componentType === 'rate'"
-      :model-value="getFormItemValue(column.prop)"
-      :style="column.searchControlWidth"
-      @change="setValueToModelProp(column.prop, $event)"
-    />
-    <el-input
-      v-else
-      :model-value="getFormItemValue(column.prop)"
-      :style="column.searchControlWidth"
-      @keyup.enter="submitForm('searchForm')"
-      @input="setValueToModelProp(column.prop, $event)"
-      @focus="showEmpty()"
-      @blur="hiddenEmpty()"
-    >
-      <template #suffix>
-        <el-tooltip :content="$t('superGrid.searchEmpty')" placement="bottom">
-          <el-checkbox v-if="isShowEmtpty" v-model="checkedEmpty" @change="checkEmptyChange" />
-        </el-tooltip>
-      </template>
-    </el-input>
-  </el-form-item>
-</template>
-
-<script>
-import { $emit } from '../../utils/gogocodeTransfer'
-import searchMethods from './search-methods'
-import searchFormNumber from './search-form-number.vue'
-import store from './store'
-import { getDynamicDataSourceOptions, isDynamicDataSourceSource, getControlConfig } from './utils'
-import {
-  getPropValueNew,
-  watchPageContextDynamicVariable
-} from '../../../src/utils/util'
-
-export default {
-  name: 'SearchFormItem',
-  components: {
-    searchFormNumber
-  },
-  inject: ['getListToolbarFormData'],
-  props: {
-    column: {
-      type: Object,
-      default: null
-    },
-    code: {
-      type: String,
-      default: null
-    },
-    isSql: {
-      type: Boolean,
-      default: false
-    },
-    tableName: {
-      type: String,
-      default: null
-    },
-    isJoinTable: {
-      type: Boolean,
-      default: false
-    },
-    // 查询表单信息
-    searchForm: {
-      type: Object,
-      default: null
-    },
-    index: {
-      type: Number,
-      default: 0
-    },
-    length: {
-      type: Number,
-      default: 0
-    },
-    loadCompleteQuery: {
-      type: Boolean,
-      default: false
-    },
-    labelWidth: {
-      type: [String, Number, undefined],
-      default: undefined
-    }
-  },
-  data() {
-    const customComponentNames = new Set()
-    return {
-      customComponentNames: customComponentNames,
-      dateOne: null,
-      dataTwo: null,
-      moduleConfig: {},
-      dateVal: this.getFormItemValue(this.column.prop),
-      controlConfig: getControlConfig(this.column),
-      isShowEmtptyFlag: false,
-      dataSourceOptions: {},
-      departmentInfo: null,
-      checkEmptyValue: false // 是否选中空值
-    }
-  },
-  computed: {
-    listToolbarFormData() {
-      const data = this.getListToolbarFormData()
-      if (data && data.listToolbarFormData) {
-        return data.listToolbarFormData
-      }
-      return null
-    },
-    isShowEmtpty() {
-      return this.isShowEmtptyFlag
-    },
-    checkedEmpty() {
-      if (this.column._emptyValue && this.column._emptyValue === '#blank#') {
-        return true
-      }
-      if (this.column._resetValue || this.column._resetValue === undefined) {
-        if (this.column._resetValue) {
-          this.column._resetValue = undefined
-          this.isShowEmtptyFlag = false
-        }
-        return false
-      } else {
-        return true
-      }
-    }
-  },
-  watch: {
-    // 重置按钮时，清空下拉选中 空值 的选中状态
-    'column._resetValue': {
-      deep: true,
-      handler(newValue) {
-        if (newValue) {
-          // 表示是点击了重置按钮
-          this.checkEmptyValue = false
-          if (this.$refs.selectRef) {
-            this.$refs.selectRef.clearEmptyValue()
-          }
-          this.column._resetValue = undefined
-        }
-      }
-    }
-  },
-  created() {
-    if (this.column.valueSetOptions) {
-      this.moduleConfig = JSON.parse(this.column.valueSetOptions)
-    }
-    const componentType = this.column.componentType
-    if (
-      componentType &&
-      (componentType === 'multiselect' || componentType === 'select') &&
-      this.isDynamicDataSourceSource(this.column)
-    ) {
-      this.dataSourceOptions = this.getDynamicDataSourceOptions(this.column)
-    }
-    this.deptScopeLimit()
-  },
-  mounted() {
-    // 查询页面加载完成
-    if (this.index + 1 === this.length && this.loadCompleteQuery) {
-      $emit(this, 'submit-form')
-    }
-  },
-  methods: {
-    ...searchMethods,
-    getDynamicDataSourceOptions(column) {
-      const gridParams = store.get(this.code)
-      let baseURL = gridParams.options.backendUrl
-      if (!baseURL) {
-        baseURL = window.$vueApp.config.globalProperties.baseURL
-      }
-      return getDynamicDataSourceOptions(column, this.isSql, gridParams.additionalParamMap, baseURL)
-    },
-    // 值设置是否是动态数据源类型的数据源
-    isDynamicDataSourceSource(column) {
-      return isDynamicDataSourceSource(column)
-    },
-    setValueToModelProp(prop, value, componentName, index) {
-      console.log('setValueToModelProp', prop, value, componentName, index)
-      if (prop && prop.indexOf('.') > 0) {
-        const parentOjbect = this.getParentObject(prop)
-        // 嵌套属性中的最后一个属性是属于这个中间父对象的，所有要通过中间父对象来赋值
-        if (index != null && index !== undefined) {
-          // parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
-          parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
-        } else {
-          parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
-        }
-      } else {
-        if (index != null && index !== undefined) {
-          this.searchForm[prop][index] = value
-        } else {
-          this.searchForm[prop] = value
-        }
-      }
-    },
-    getLabelWidth(querySetting) {
-      const configData = JSON.parse(querySetting)
-      if (configData.labelWidth !== '' && configData.labelWidth !== null && configData.labelWidth !== undefined) {
-        return configData.labelWidth + 'px'
-      } else {
-        return '110px'
-      }
-    },
-    componentTypeTypeIsTree(componentType) {
-      if (componentType) {
-        if (componentType.indexOf('DeptManTree') > 0) {
-          // 说明是部门人员树
-          return true
-        }
-        if (componentType.indexOf('DeptTree') > 0) {
-          // 说明是部门树
-          return true
-        }
-        if (componentType.indexOf('WgManTree') > 0) {
-          // 说明是工作组人员树
-          return true
-        }
-        if (componentType.indexOf('WgManTree') > 0) {
-          // 说明是工作组树
-          return true
-        }
-      }
-      return false
-    },
-    getTreeFields(orgTreeSetJson) {
-      if (orgTreeSetJson && orgTreeSetJson !== '') {
-        const orgTreeSet = JSON.parse(orgTreeSetJson)
-        if (orgTreeSet.length) {
-          return orgTreeSet
-        } else {
-          if (orgTreeSet.orgTreeSetArr) {
-            return orgTreeSet.orgTreeSetArr
-          }
-        }
-      }
-    },
-    getTreeIsMultiTree(componentType) {
-      if (componentType && componentType.indexOf('single') >= 0 && componentType.indexOf('Tree') > 0) {
-        return false
-      } else {
-        return true
-      }
-    },
-    getTreeType(componentType) {
-      if (componentType) {
-        if (componentType.indexOf('DeptManTree') > 0) {
-          // 说明是部门人员树
-          return 'DeptUserTree'
-        }
-        if (componentType.indexOf('DeptTree') > 0) {
-          // 说明是部门树
-          return 'DeptTree'
-        }
-        if (componentType.indexOf('WgTree') > 0) {
-          // 说明是工作组人员树
-          return 'WgTree'
-        }
-        if (componentType.indexOf('WgManTree') > 0) {
-          // 说明是工作组树
-          return 'WgUserTree'
-        }
-      }
-    },
-    // 组织结构树文本框值改变事件
-    organizationInputEvent(prop, value) {
-      if (prop) {
-        // 必须手动调用一下input事件，否则不会更新组件的值
-        this.searchForm[prop] = value
-      }
-    },
-    // 组织结构树文本框值清空事件
-    clearOrganizationInputEvent(prop) {
-      if (prop) {
-        // 必须手动调用一下input事件，否则不会更新组件的值
-        this.searchForm[prop] = null
-      }
-    },
-    customComponent(column) {
-      const gridParams = store.get(this.code)
-      if (column.componentName && column.componentName !== '') {
-        this.customComponentNames.add(column.componentName)
-        return true
-      }
-      if (
-        (!column.componentName || column.componentName === '') &&
-        gridParams.options &&
-        gridParams.options.search &&
-        gridParams.options.search.customSearchElements
-      ) {
-        // 定义了自定义查询组件
-        const propSearchEle = gridParams.options.search.customSearchElements[column.prop]
-        // console.log('customComponent-customSearchElements-propSearchEle-', column.prop)
-        if (propSearchEle) {
-          column.componentName = 'custom-' + column.prop
-          const component = propSearchEle.call(this, column)
-          // console.log('customComponent-customSearchElements-')
-          if (component) {
-            this.customComponentNames.add(column.componentName)
-            window.$vueApp.component(column.componentName, component)
-            return true
-          }
-        }
-      }
-      return false
-    },
-    setNumberValue(value, r, n) {
-      let itemValue = this.getFormItemValue(this.column.prop)
-      itemValue = value
-      this.setValueToModelProp(this.column.prop, itemValue)
-    },
-    setYearRangeValue(prop, value) {
-      this.searchForm[prop][0] = value[0]
-      this.searchForm[prop][1] = value[1]
-    },
-    getDefaultTime(column) {
-      if (column['valueSetOptions']) {
-        const valueSetOptions = JSON.parse(column['valueSetOptions'])
-        if (valueSetOptions.defaultTime) {
-          return [valueSetOptions.defaultTime, valueSetOptions.defaultTime]
-        } else {
-          return ['00:00:00']
-        }
-      } else {
-        const now = new Date()
-        const year = now.getFullYear() // e.g., 2023
-        const month = now.getMonth() + 1 // Months are 0-indexed, so add 1
-        const day = now.getDate() // Day of the month
-        return [`${year}-${month}-${day} 00:00:00`, `${year}-${month}-${day} 23:59:59`]
-      }
-    },
-    multiselectChange(arr, selectedItem) {
-      if (arr && arr.indexOf('saveAll') !== -1) {
-        if (this.searchForm[this.column.prop] && typeof this.searchForm[this.column.prop] === 'string') {
-          this.searchForm[this.column.prop] = this.searchForm[this.column.prop].split(',')
-        }
-      } else {
-        this.searchForm[this.column.prop] = arr
-      }
-    },
-    showEmpty() {
-      this.isShowEmtptyFlag = true
-    },
-    hiddenEmpty() {
-      if (!this.checkedEmpty) {
-        this.isShowEmtptyFlag = false
-      }
-    },
-    checkEmptyChange(newValue) {
-      if (newValue) {
-        this.column._emptyValue = '#blank#'
-      } else {
-        this.column._emptyValue = undefined
-      }
-    },
-    deptScopeLimit() {
-      if (this.controlConfig && this.controlConfig.deptScope) {
-        if (this.controlConfig.deptScope === 'depts' && this.controlConfig.deptScopeCodes) {
-          // 表示固定部门范围
-          this.departmentInfo = this.controlConfig.deptScopeCodes.split(',')
-        } else if (this.controlConfig.deptScope === 'field' && this.controlConfig.deptScopeField) {
-          if (this.controlConfig.deptScopeField.indexOf('${row.') !== 0) {
-            // 表示是页面pageContext的字段
-              this.setLimitDepartmentInfo()
-              if (!this.controlConfig.deptScopeField.indexOf('${fixed.') === 0) {
-                watchPageContextDynamicVariable(
-                  this,
-                  this.pageContext,
-                  this.controlConfig.deptScopeField,
-                  (newVal, oldVal) => {
-                    this.setLimitDepartmentInfo()
-                  }
-                )
-              }
-          }
-        }
-      }
-    },
-    setLimitDepartmentInfo() {
-      const deptScopeFieldValue = getPropValueNew(this.controlConfig.deptScopeField, this.pageContext, this.row)
-      if (deptScopeFieldValue) {
-        this.departmentInfo = deptScopeFieldValue.split(',')
-      } else {
-        this.departmentInfo = []
-      }
-    }
-  },
-  emits: ['submit-form']
-}
-</script>
-
-<style lang="scss" scoped>
-:deep(.el-range-separator) {
-  min-width: 20px;
-}
-</style>