imatrix-ui 2.9.13-dw → 2.9.14-boe2

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

@@ -1,653 +0,0 @@
-<template>
-  <div v-if="formFlag">
-    <!-- <el-row style="padding-bottom: 8px">
-      <el-button type="primary" size="mini" plain icon="el-icon-circle-plus-outline" @click="add">
-        {{ $t('imatrixUIPublicModel.add') }}
-      </el-button>
-      <el-button type="primary" size="mini" plain icon="el-icon-delete" @click="remove">
-        {{ $t('imatrixUIPublicModel.delete') }}
-      </el-button>
-    </el-row> -->
-    <el-table
-      ref="table"
-      :data="searchFormList"
-      :row-class-name="tableRowClassName"
-      border
-      style="width: 100%"
-      highlight-current-row
-      @current-change="handleCurrentChange"
-    >
-      <el-table-column :label="$t('imatrixUIPublicModel.edit')" fixed="left" align="center" width="80">
-        <template slot-scope="scope">
-          <i class="el-icon-circle-plus-outline" @click="add" />
-          <i class="el-icon-remove-outline" @click="remove(scope.$index)" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="leftBracket" label="(" width="90">
-        <template slot-scope="scope">
-          <el-select v-model="scope.row.leftBracket" size="small" clearable @focus="selectRow(scope.row)">
-            <el-option label="" value="" />
-            <el-option label="(" value="(" />
-            <el-option label="((" value="((" />
-            <el-option label="(((" value="(((" />
-          </el-select>
-        </template>
-      </el-table-column>
-      <el-table-column :label="$t('imatrixUIPublicModel.fieldName')" width="200">
-        <template slot-scope="scope">
-          <el-select v-model="scope.row.prop" size="small" clearable filterable @focus="selectRow(scope.row)" @change="changeFieldName(scope.$index)">
-            <el-option
-              v-for="item in searchableColumns"
-              :key="item.prop"
-              :label="item.label"
-              :value="item.prop"
-            />
-          </el-select>
-        </template>
-      </el-table-column>
-      <el-table-column :label="$t('imatrixUIPublicModel.operator')" width="110">
-        <template slot-scope="scope">
-          <el-select v-model="scope.row.operator" size="small" clearable @focus="selectRow(scope.row)">
-            <el-option v-for="option in operationArr[scope.$index]" :key="option.name" :label="option.label" :value="option.name" />
-          </el-select>
-        </template>
-      </el-table-column>
-      <el-table-column :label="$t('imatrixUIPublicModel.value')">
-        <template v-if="scope.row.prop" slot-scope="scope">
-          <el-date-picker
-            v-if="scope.row.dataType === 'DATE' || scope.row.componentType==='date' "
-            v-model="scope.row.value"
-            type="daterange"
-            size="small"
-            :style="scope.row.searchControlWidth"
-            :range-separator="$t('imatrixUIPublicModel.to')"
-            unlink-panels
-            :start-placeholder="$t('imatrixUIMessage.startDate')"
-            :end-placeholder="$t('imatrixUIMessage.endDate')"
-            value-format="yyyy-MM-dd"
-            @input="setValueToModelProp(scope.$index,$event)"
-            @focus="selectRow(scope.row)"
-          />
-
-          <el-date-picker
-            v-else-if="scope.row.componentType==='dateTimePicker'"
-            v-model="scope.row.value"
-            type="datetimerange"
-            :range-separator="$t('imatrixUIPublicModel.to')"
-            unlink-panels
-            size="small"
-            :style="scope.row.searchControlWidth"
-            :start-placeholder="$t('imatrixUIMessage.startDate')"
-            :end-placeholder="$t('imatrixUIMessage.endDate')"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            @input="setValueToModelProp(scope.$index,$event)"
-            @focus="selectRow(scope.row)"
-          />
-
-          <el-date-picker
-            v-else-if="scope.row.dataType === 'TIME' && scope.row.componentType==='timepicker'"
-            v-model="scope.row.value"
-            type="datetimerange"
-            :range-separator="$t('imatrixUIPublicModel.to')"
-            unlink-panels
-            size="small"
-            :style="scope.row.searchControlWidth"
-            :start-placeholder="$t('imatrixUIMessage.startDate')"
-            :end-placeholder="$t('imatrixUIMessage.endDate')"
-            value-format="HH:mm:ss"
-            @input="setValueToModelProp(scope.$index,$event)"
-            @focus="selectRow(scope.row)"
-          />
-
-          <el-time-picker
-            v-else-if="scope.row.componentType==='timepicker' && scope.row.dataType !== 'TIME' && scope.row.dataType !== 'DATE' "
-            v-model="scope.row.value"
-            type="fixed-time"
-            size="small"
-            :placeholder="$t('imatrixUIMessage.selectTime')"
-            style="width: 100%;"
-            value-format="HH:mm:ss"
-            @input="setValueToModelProp(scope.$index,$event)"
-            @focus="selectRow(scope.row)"
-          />
-
-          <organization-input
-            v-else-if="componentTypeTypeIsTree(scope.row.componentType)"
-            v-model="scope.row.value"
-            :fields="getTreeFields(scope.row.orgTreeSet)"
-            :models="searchForm"
-            :size="small"
-            :multiple="getTreeIsMultiTree(scope.row.componentType)"
-            :tree-type="getTreeType(scope.row.componentType)"
-            @setValue="organizationInputEvent"
-            @clear="clearOrganizationInputEvent"
-            @focus="selectRow(scope.row)"
-          />
-
-          <el-select
-            v-else-if="((scope.row.componentType && scope.row.componentType==='select') || scope.row.dataType === 'BOOLEAN') && !isDynamicDataSourceSource(scope.row)"
-            v-model="scope.row.value"
-            clearable
-            :style="scope.row.searchControlWidth"
-            :placeholder="$t('imatrixUIMessage.pleaseSelect')"
-            size="small"
-            @input="setValueToModelProp(scope.$index,$event)"
-            @focus="selectRow(scope.row)"
-          >
-            <el-option
-              v-for="item in scope.row.valueSet"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-          <el-select
-            v-else-if="scope.row.componentType && scope.row.componentType==='multiselect' && !isDynamicDataSourceSource(scope.row)"
-            v-model="scope.row.value"
-            clearable
-            multiple
-            :style="scope.row.searchControlWidth"
-            collapse-tags
-            size="small"
-            :placeholder="$t('imatrixUIMessage.pleaseSelect')"
-            @input="setValueToModelProp(scope.$index,$event)"
-            @focus="selectRow(scope.row)"
-          >
-            <el-option
-              v-for="item in scope.row.valueSet"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-
-          <dynamic-source-select
-            v-else-if="scope.row.componentType && (scope.row.componentType==='multiselect' || scope.row.componentType==='select') && isDynamicDataSourceSource(scope.row)"
-            :value="scope.row.value"
-            :base-props="{
-              multiple: scope.row.componentType==='multiselect'?true:false
-            }"
-            :entity="scope.row"
-            :options="getDynamicDataSourceOptions(scope.row)"
-            :table-name="tableName"
-            :is-join-table="isJoinTable"
-            :list-code="code"
-            @input="setValueToModelProp(scope.$index,$event)"
-          />
-          <search-form-number
-            v-else-if="scope.row.componentType && scope.row.componentType==='inputNumber'"
-            :r="r"
-            :n="n"
-            size="small"
-            @setValue="setNumberValue"
-            @focus="selectRow(scope.row)"
-          />
-
-          <el-switch
-            v-else-if="scope.row.componentType && scope.row.componentType==='switch'"
-            v-model="scope.row.value"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
-            size="small"
-            :style="scope.row.searchControlWidth"
-            @input="setValueToModelProp(scope.$index,$event)"
-            @focus="selectRow(scope.row)"
-          />
-          <el-slider
-            v-else-if="scope.row.componentType && scope.row.componentType==='slider'"
-            v-model="scope.row.value"
-            size="small"
-            :style="scope.row.searchControlWidth"
-            @input="setValueToModelProp(scope.$index,$event)"
-            @focus="selectRow(scope.row)"
-          />
-
-          <el-rate
-            v-else-if="scope.row.componentType && scope.row.componentType==='rate'"
-            v-model="scope.row.value"
-            :style="scope.row.searchControlWidth"
-            size="small"
-            @input="setValueToModelProp(scope.$index,$event)"
-            @focus="selectRow(scope.row)"
-          />
-          <span v-else-if="customComponent(scope.row.prop) === true">
-            <component
-              :is="scope.row.componentName"
-              :ref="scope.row.componentName"
-              v-model="scope.row.value"
-              class="customComponent"
-              :prop="scope.row.prop"
-              :row="scope.row"
-              @input="setValueToModelProp(scope.$index,$event,scope.row.componentName)"
-              @focus="selectRow(scope.row)"
-            />
-          </span>
-          <el-input v-else v-model="scope.row.value" size="small" :style="scope.row.searchControlWidth" @focus="selectRow(scope.row)" @keyup.enter.native="submitForm('searchForm')" @input="setValueToModelProp(scope.$index,$event)" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="rightBracket" label=")" width="90">
-        <template slot-scope="scope">
-          <el-select v-model="scope.row.rightBracket" size="small" clearable @focus="selectRow(scope.row)">
-            <el-option label="" value="" />
-            <el-option label=")" value=")" />
-            <el-option label="))" value="))" />
-            <el-option label=")))" value=")))" />
-          </el-select>
-        </template>
-      </el-table-column>
-      <el-table-column :label="$t('imatrixUIPublicModel.andOr')" prop="logicOperator" width="110">
-        <template slot-scope="scope">
-          <el-select v-model="scope.row.joinSign" size="small" clearable @focus="selectRow(scope.row)">
-            <el-option :label="$t('imatrixUIPublicModel.perhaps')" value="or" />
-            <el-option :label="$t('imatrixUIPublicModel.also')" value="and" />
-          </el-select>
-        </template>
-      </el-table-column>
-      <el-table-column :label="$t('imatrixUIPublicModel.whenTheVariableIsEmpty')" width="110">
-        <template slot-scope="scope">
-          <el-select v-model="scope.row.variableIsNull" size="small" clearable @focus="selectRow(scope.row)">
-            <el-option label="Null" value="null" />
-            <el-option :label="$t('imatrixUIPublicModel.ignore11')" value="1=1" />
-            <el-option :label="$t('imatrixUIPublicModel.nonConformity')" value="1<>1" />
-          </el-select>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-<style scoped>
-  .grid-search-form{
-    overflow: auto;
-  }
-  .grid-search-form >>> .el-form-item{
-    margin-bottom: 0px;
-  }
-
-  .grid-search-form >>> .search-btn{
-    margin-bottom: 5px;
-    text-align: center;
-  }
-  .grid-search-form >>> .el-select,.grid-search-form >>> .customComponent{
-    width: 100%;
-  }
-</style>
-<script>
-import searchMethods from './search-methods'
-import searchFormNumber from './search-form-number'
-// import { isOptionFunction, getSearchObject } from './utils'
-import store from './store'
-import SearchConditionInput from './search-condition-input'
-import SearchConditionList from './search-condition-list'
-import { getDynamicDataSourceOptions, isDynamicDataSourceSource } from './utils'
-import Vue from 'vue'
-export default {
-  name: 'SearchForm',
-  components: {
-    searchFormNumber,
-    SearchConditionInput,
-    SearchConditionList
-  },
-  props: {
-    searchableColumns: {
-      type: Array,
-      default: null
-    },
-    searchFormList: {
-      type: Array,
-      default: null
-    },
-    propMap: {
-      type: Object,
-      default: null
-    },
-    code: {
-      type: String,
-      default: null
-    },
-    isSql: {
-      type: Boolean,
-      default: false
-    }
-
-  },
-  data() {
-    const gridParams = store.get(this.code)
-    let tableName
-    if (gridParams && gridParams.basicInfo && gridParams.basicInfo.tableName) {
-      tableName = gridParams.basicInfo.tableName
-    }
-    let isHasJoinTable
-    if (gridParams && gridParams.basicInfo && gridParams.basicInfo.hasJoinTable) {
-      isHasJoinTable = gridParams.basicInfo.hasJoinTable
-    }
-    const customComponentNames = new Set()
-    return {
-      customComponentNames: customComponentNames,
-      currentRow: null,
-      formFlag: true,
-      operationArr: [],
-      tableName,
-      isJoinTable: isHasJoinTable // 是否是关联表
-    }
-  },
-  computed: {
-
-  },
-  watch: {
-    searchableColumns: {
-      deep: true,
-      handler(newValue, oldValue) {
-        this.searchableColumns = newValue
-        this.refreshOperators()
-        this.formFlag = false
-        this.$nextTick(() => {
-          this.formFlag = true
-        })
-      }
-    }
-  },
-  created() {
-    this.refreshOperators()
-    if (!this.searchFormList || this.searchFormList.length < 1) {
-      this.add()
-    }
-  },
-  methods: {
-    ...searchMethods,
-    getDynamicDataSourceOptions(column) {
-      return getDynamicDataSourceOptions(column, this.isSql)
-    },
-    // 值设置是否是动态数据源类型的数据源
-    isDynamicDataSourceSource(column) {
-      return isDynamicDataSourceSource(column)
-    },
-    refreshOperators() {
-      if (this.searchableColumns && this.searchableColumns.length > 0) {
-        for (var i = 0; i < this.searchableColumns.length; i++) {
-          const prop = this.searchableColumns[i].prop
-          const item = this.propMap[prop]
-          this.operationArr[i] = this.getOperators(item)
-        }
-      }
-    },
-    handleCurrentChange(val) {
-      this.currentRow = val
-    },
-    tableRowClassName({ row, rowIndex }) {
-      // 把每一行的索引放进row
-      row.index = rowIndex
-    },
-    // 选择行
-    selectRow(row) {
-      this.$refs.table.setCurrentRow(row)
-    },
-    // 改变选择的属性
-    changeFieldName(index) {
-      const prop = this.currentRow.prop
-      const item = this.propMap[prop]
-      this.searchFormList[index].dataType = item.dataType
-      this.searchFormList[index].orgProp = item.orgProp
-      this.searchFormList[index].componentType = item.componentType
-      this.searchFormList[index].componentName = item.componentName
-      this.searchFormList[index].queryMatching = item.queryMatching
-      this.searchFormList[index].searchControlWidth = item.searchControlWidth
-      this.searchFormList[index].fuzzy = item.fuzzy
-      this.searchFormList[index].valueSet = item.valueSet
-      this.operationArr[index] = this.getOperators(item)
-    },
-    setValueToModelProp(index, value, componentName) {
-      if (index !== null && index !== undefined) {
-        this.$set(this.searchFormList[index], 'value', value)
-      }
-    },
-    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(orgTreeSet) {
-      if (orgTreeSet && orgTreeSet !== '') {
-        return JSON.parse(orgTreeSet)
-      }
-    },
-    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 (this.currentRow) {
-        this.$set(this.currentRow, 'value', value)
-      }
-    },
-    // 组织结构树文本框值清空事件
-    clearOrganizationInputEvent(prop) {
-      if (this.currentRow) {
-        this.$set(this.currentRow, 'value', null)
-      }
-    },
-    customComponent(prop) {
-      const column = this.propMap[prop]
-      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)
-            Vue.component(column.componentName, component)
-            return true
-          }
-        }
-      }
-      return false
-    },
-    validateForm() {
-      return new Promise((resolve, reject) => {
-        resolve(true)
-      })
-    },
-    resetForm() {
-      if (this.customComponentNames && this.customComponentNames.length > 0) {
-        for (const componentName of this.customComponentNames) { // 遍历
-          this.$refs[componentName][0].resetField()
-        }
-      }
-      // 当是保持页数默认赋值的查询字段resetFields()不会被清空，需要下面的方法遍历设未null
-      this.$emit('resetForm')
-      this.add()
-    },
-    setNumberValue(value, r, n) {
-      if (this.currentRow) {
-        this.$set(this.currentRow, 'value', value)
-      }
-    },
-    // 添加
-    add() {
-      if (!this.searchFormList) {
-        this.searchFormList = []
-      }
-      this.searchFormList.push(
-        {
-          leftBracket: '',
-          prop: '',
-          operator: '',
-          value: '',
-          rightBracket: '',
-          joinSign: 'or',
-          dataType: '',
-          propDbName: ''
-        }
-      )
-      this.operationArr.push([])
-    },
-    // 删除
-    remove(index) {
-      if (index !== null && index !== undefined && index !== -1) {
-        this.searchFormList.splice(index, 1)
-      } else {
-        if (this.currentRow === null) {
-          this.$alert(this.$t('message.pleaseSelectARow'))
-          return
-        }
-        if (this.currentRow && this.currentRow.index && this.currentRow.index !== null && this.currentRow.index !== undefined) {
-          this.searchFormList.splice(this.currentRow.index, 1)
-        }
-      }
-    },
-    // 实时根据类型改变连接符
-    getOperators(item) {
-      if (item) {
-        if (item.dataType === 'INTEGER' || item.dataType === 'LONG' || item.dataType === 'DOUBLE' || item.dataType === 'FLOAT') {
-          return [{
-            name: 'GT',
-            label: this.$t('imatrixUIPublicModel.greaterThan')
-          }, {
-            name: 'LT',
-            label: this.$t('imatrixUIPublicModel.lessThan')
-          }, {
-            name: 'EQ',
-            label: this.$t('imatrixUIPublicModel.beEqualTo')
-          }, {
-            name: 'LET',
-            label: this.$t('imatrixUIPublicModel.notGreaterThan')
-          }, {
-            name: 'GET',
-            label: this.$t('imatrixUIPublicModel.notLessThan')
-          }, {
-            name: 'NET',
-            label: this.$t('imatrixUIPublicModel.notEqualTo')
-          }, {
-            name: 'IS_NULL',
-            label: this.$t('imatrixUIPublicModel.isNull')
-          }, {
-            name: 'IS_NOT_NULL',
-            label: this.$t('imatrixUIPublicModel.isNotNull')
-          }]
-        } else if (item.dataType === 'DATE' || item.dataType === 'TIME') {
-          return [{
-            name: 'GT',
-            label: this.$t('imatrixUIPublicModel.laterThan')
-          }, {
-            name: 'LT',
-            label: this.$t('imatrixUIPublicModel.earlierThan')
-          }, {
-            name: 'EQ',
-            label: this.$t('imatrixUIPublicModel.beEqualTo')
-          }, {
-            name: 'LET',
-            label: this.$t('imatrixUIPublicModel.noLaterThan')
-          }, {
-            name: 'GET',
-            label: this.$t('imatrixUIPublicModel.noEarlierThan')
-          }, {
-            name: 'IS_NULL',
-            label: this.$t('imatrixUIPublicModel.isNull')
-          }, {
-            name: 'IS_NOT_NULL',
-            label: this.$t('imatrixUIPublicModel.isNotNull')
-          }]
-        } else if (item.dataType === 'TEXT') {
-          return [{
-            name: 'EQ',
-            label: this.$t('imatrixUIPublicModel.beEqualTo')
-          }, {
-            name: 'NET',
-            label: this.$t('imatrixUIPublicModel.notEqualTo')
-          }, {
-            name: 'CONTAIN',
-            label: this.$t('imatrixUIPublicModel.contain')
-          }, {
-            name: 'NOT_CONTAIN',
-            label: this.$t('imatrixUIPublicModel.notIncluded')
-          }, {
-            name: 'IS_NULL',
-            label: this.$t('imatrixUIPublicModel.isNull')
-          }, {
-            name: 'IS_NOT_NULL',
-            label: this.$t('imatrixUIPublicModel.isNotNull')
-          }]
-        } else {
-          return [{
-            name: 'EQ',
-            label: this.$t('imatrixUIPublicModel.beEqualTo')
-          }, {
-            name: 'NET',
-            label: this.$t('imatrixUIPublicModel.notEqualTo')
-          }, {
-            name: 'IS_NULL',
-            label: this.$t('imatrixUIPublicModel.isNull')
-          }, {
-            name: 'IS_NOT_NULL',
-            label: this.$t('imatrixUIPublicModel.isNotNull')
-          }]
-        }
-      } else {
-        return [{
-          name: 'EQ',
-          label: this.$t('imatrixUIPublicModel.beEqualTo')
-        }, {
-          name: 'NET',
-          label: this.$t('imatrixUIPublicModel.notEqualTo')
-        }, {
-          name: 'IS_NULL',
-          label: this.$t('imatrixUIPublicModel.isNull')
-        }, {
-          name: 'IS_NOT_NULL',
-          label: this.$t('imatrixUIPublicModel.isNotNull')
-        }]
-      }
-    }
-  }
-}
-</script>