imatrix-ui 0.0.15 → 0.1.1-up

package/components/super-grid/search-form.vue

@@ -0,0 +1,756 @@
+<template>
+  <div>
+    <search-condition-list
+      v-if="searchConditions.length > 0"
+      ref="searchConditionList"
+      :search-type="searchType"
+      :search-conditions="searchConditions"
+      @remove-condition="removeCondition"
+      @select-condition="selectCondition"
+    />
+    <search-form-ordinarySearch
+      v-if="searchType === 'normal'"
+      ref="searchFormOrdinarySearch"
+      :searchable-columns="searchableColumns"
+      :search-form="searchForm"
+      :field-num="fieldNum"
+      :label-width="labelWidth"
+      :query="query"
+      :code="code"
+      :row-num="rowNum"
+      :span-num="spanNum"
+      :rules="rules"
+      :is-sql="isSql"
+      @submit-form="submitForm('searchForm')"
+      @reset-form="resetForm('searchForm')"
+      @save-condition="saveCondition()"
+      @open-fold="openFold"
+    />
+    <search-form-advancedQuery
+      v-if="searchType === 'advanced'"
+      ref="searchFormAdvancedQuery"
+      style="padding-bottom: 10px"
+      :code="code"
+      :searchable-columns="advancedQueryColumns"
+      :search-form-list="searchFormList"
+      :prop-map="propMap"
+      :is-sql="isSql"
+      @resetForm="resetSearchFormList"
+    />
+    <div
+      v-if="searchType === 'advanced'"
+      style="padding-top: 10px; padding-bottom: 10px; text-align: center"
+    >
+      <el-button
+        :loading="loading"
+        type="primary"
+        size="mini"
+        @click="submitForm('searchForm')"
+      >
+        {{ $t('imatrixUIPublicModel.sure') }}
+      </el-button>
+      <el-button
+        :loading="loading"
+        size="mini"
+        @click="resetForm('searchForm')"
+      >
+        {{ $t('imatrixUIPublicModel.reset') }}
+      </el-button>
+      <el-button size="mini" @click="saveCondition">
+        {{ $t('superGrid.saveCondition') }}
+      </el-button>
+      <span
+        v-if="
+          advancedQuery !== null &&
+          advancedQuery !== undefined &&
+          advancedQuery === true &&
+          normalQuery !== null &&
+          normalQuery !== undefined &&
+          normalQuery === true
+        "
+        style="margin-left: 10px"
+      >
+        <el-button
+          v-if="searchType === 'advanced'"
+          size="mini"
+          @click="searchType = 'normal'"
+        >
+          {{ $t('imatrixUIPublicModel.switchToNormalQuery') }}
+        </el-button>
+        <el-button
+          v-if="searchType === 'normal'"
+          size="mini"
+          @click="searchType = 'advanced'"
+        >
+          {{ $t('imatrixUIPublicModel.switchToAdvancedQuery') }}
+        </el-button>
+      </span>
+    </div>
+    <search-condition-input
+      v-if="isShowSearchCondition"
+      @close="saveConditionValue"
+    />
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../utils/gogocodeTransfer'
+import searchMethods from './search-methods'
+// import searchFormNumber from './search-form-number'
+import searchFormOrdinarySearch from './search-form-ordinarySearch.vue'
+// import searchFormAdvancedQuery from './search-form-advancedQuery'
+import store from './store'
+// import { isOptionFunction, getSearchObject } from './utils'
+import { addDynamicProp, addDynamicPropDateSection } from './utils'
+import * as Vue from 'vue'
+import SearchConditionInput from './search-condition-input.vue'
+import SearchConditionList from './search-condition-list.vue'
+export default {
+  name: 'SearchForm',
+  components: {
+    // searchFormNumber,
+    SearchConditionInput,
+    SearchConditionList,
+    searchFormOrdinarySearch,
+    // searchFormAdvancedQuery
+  },
+  provide() {
+    return {
+      getListToolbarFormData: () => ({
+        listToolbarFormData: this.listToolbarFormData,
+      }),
+    }
+  },
+  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,
+    },
+    isSql: {
+      type: Boolean,
+      default: false,
+    },
+    searchFormInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    listToolbarFormData: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    const customComponentNames = new Set()
+    const gridParams = store.get(this.code)
+    const propMap = {}
+    let searchForm = {}
+    if (this.searchParam !== null) {
+      searchForm = JSON.parse(JSON.stringify(this.searchParam))
+    }
+    const searchColumns = this.getSearchableColumns(null, null, propMap)
+    if (this.initSearchProps === undefined || this.initSearchProps === null) {
+      this.initSearchProps = []
+    }
+    console.log('searchForm=', searchColumns)
+    searchColumns.forEach((column) => {
+      // propMap[column.prop] = column
+      if (this.initSearchProps.indexOf(column.prop) < 0) {
+        // 表示没有默认初始查询字段
+        if (column.prop && column.prop.indexOf('.') > 0) {
+          if (column.componentType === 'dateSection') {
+            addDynamicPropDateSection(searchForm, column.prop)
+          } else {
+            // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+            addDynamicProp(searchForm, column.prop)
+          }
+        } else {
+          if (column.componentType === 'dateSection') {
+            searchForm[column.prop] = [new Date(), new Date()]
+          } else if (column.componentType === 'yearRange') {
+            searchForm[column.prop] = ['', '']
+          } else {
+            searchForm[column.prop] = null
+          }
+        }
+      }
+    })
+    const spanNum = this.getSpanNum()
+    const fieldNum = this.getFieldNumPerRow()
+    const rowNum = Math.ceil(searchColumns.length / fieldNum)
+    console.log('rowNumrowNumrowNumrowNum', rowNum)
+    console.log(searchColumns)
+    console.log(fieldNum)
+    const advancedQuery = this.query.advancedQuery
+    const normalQuery = this.query.normalQuery
+    // console.log('searchColumns.length=' + searchColumns.length + ',fieldNum=' + fieldNum + ',rowNum=' + rowNum)
+    // // -2是把
+    // const dateSpanNum = (spanNum - 2) / 2
+
+    return {
+      searchForm,
+      rules: {},
+      searchParams: [],
+      labelWidth:
+        gridParams.options.search && gridParams.options.search.labelWidth
+          ? gridParams.options.search.labelWidth
+          : '80px',
+      customComponentNames: customComponentNames,
+      componentName: '',
+      spanNum: spanNum,
+      fieldNum: fieldNum, // 每行放的字段个数
+      rowNum: rowNum, // 一共有几行
+      loading: false, // 是否正在查询，默认时否
+      isShowSearchCondition: false,
+      searchConditions: [],
+      propMap,
+      advancedQuery,
+      normalQuery,
+      searchFormList: [],
+      searchType: null,
+    }
+  },
+  computed: {
+    searchableColumns() {
+      return this.getSearchableColumns()
+    },
+    advancedQueryColumns() {
+      return this.getAdvancedQueryColumns()
+    },
+  },
+  watch: {
+    searchForm: {
+      deep: true,
+      handler(val) {
+        this.searchFormInfo['data'] = val
+      },
+    },
+  },
+  created() {
+    this.listSearchConditions()
+    if (this.normalQuery) {
+      this.searchType = 'normal'
+    } else if (this.advancedQuery) {
+      this.searchType = 'advanced'
+    }
+    console.log(
+      '%c描述-095906',
+      'color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px',
+      this.searchType
+    )
+  },
+  methods: {
+    ...searchMethods,
+    // 每行放的字段个数
+    getFieldNumPerRow() {
+      const gridParams = store.get(this.code)
+      return gridParams.options.search && gridParams.options.search.fieldNum
+        ? gridParams.options.search.fieldNum
+        : 3
+    },
+    // 根据每行显示的字段个数，确定栅栏个数,默认是4个字段。最多就只能放6个字段
+    getSpanNum() {
+      const fieldNum = this.getFieldNumPerRow()
+      if (fieldNum === 1) {
+        return 22
+      } else if (fieldNum === 2) {
+        return 10
+      } else if (fieldNum === 3) {
+        return 8
+      } else if (fieldNum === 4) {
+        return 6
+      } else {
+        // 6个字段
+        return 4
+      }
+    },
+    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
+        }
+      }
+    },
+    getAdvancedQueryColumns(columns, searchColumns, propMap) {
+      if (!this.customComponentNames) {
+        this.customComponentNames = new Set()
+      }
+      if (!searchColumns) {
+        searchColumns = []
+      }
+      if (!columns) {
+        columns = this.columns
+      }
+      for (let i = 0; i < columns.length; i++) {
+        const column = columns[i]
+        if (propMap) {
+          propMap[column.prop] = column
+        }
+        if (
+          column.prop === '$index' ||
+          column.prop === '$selection' ||
+          column.dynamic
+        ) {
+          // 序号和复选框列、动态列 不属于该组件的查询字段
+          continue
+        }
+        if (column.groupHeader) {
+          // 组合表头中子表头的字段查询
+          this.getSearchableColumns(column.children, searchColumns, propMap)
+        } else {
+          if (
+            column.queryType === 'advanced' &&
+            !column.custom &&
+            column.prop !== ''
+          ) {
+            // 表示是普通查询，且不是占位符列，是查询字段
+            if (
+              typeof column.componentType === 'undefined' ||
+              column.componentType === ''
+            ) {
+              column.componentType = 'input'
+            }
+            if (column.querySetting && column.querySetting !== '') {
+              const querySetting = JSON.parse(column.querySetting)
+              if (querySetting.width) {
+                column.searchControlWidth = 'width:' + querySetting.width + 'px'
+              }
+              if (querySetting.labelWidth) {
+                column.searchLabelWidth = querySetting.labelWidth + 'px'
+              }
+              if (querySetting.label) {
+                column.searchLabel = querySetting.label
+              }
+            }
+            // 行编辑时自定义编辑组件
+            if (
+              column.componentType &&
+              column.componentType.indexOf('custom:') >= 0
+            ) {
+              column.componentName = column.componentType.substring(
+                column.componentType.indexOf(':') + 1
+              )
+              this.customComponentNames.add(column.componentName)
+            } else {
+              column.componentName = ''
+            }
+            // this.$set(this.propMap, column.prop, column)
+            // this.propMap[column.prop] = column
+            searchColumns.push(column)
+          }
+        }
+      }
+      return searchColumns
+    },
+    getSearchableColumns(columns, searchColumns, propMap) {
+      if (!this.customComponentNames) {
+        this.customComponentNames = new Set()
+      }
+      if (!searchColumns) {
+        searchColumns = []
+      }
+      if (!columns) {
+        columns = this.columns
+      }
+      for (let i = 0; i < columns.length; i++) {
+        const column = columns[i]
+        if (propMap) {
+          propMap[column.prop] = column
+        }
+        if (
+          column.prop === '$index' ||
+          column.prop === '$selection' ||
+          column.dynamic
+        ) {
+          // 序号和复选框列、动态列 不属于该组件的查询字段
+          continue
+        }
+        if (column.groupHeader) {
+          // 组合表头中子表头的字段查询
+          this.getSearchableColumns(column.children, searchColumns, propMap)
+        } else {
+          if (
+            column.queryType === 'normal' &&
+            !column.custom &&
+            column.prop !== ''
+          ) {
+            // 表示是普通查询，且不是占位符列，是查询字段
+            if (
+              typeof column.componentType === 'undefined' ||
+              column.componentType === ''
+            ) {
+              column.componentType = 'input'
+            }
+            if (column.querySetting && column.querySetting !== '') {
+              const querySetting = JSON.parse(column.querySetting)
+              if (querySetting.width) {
+                column.searchControlWidth = 'width:' + querySetting.width + 'px'
+              }
+              if (querySetting.labelWidth) {
+                column.searchLabelWidth = querySetting.labelWidth + 'px'
+              }
+              if (querySetting.label) {
+                column.searchLabel = querySetting.label
+              }
+            }
+            // 行编辑时自定义编辑组件
+            if (
+              column.componentType &&
+              column.componentType.indexOf('custom:') >= 0
+            ) {
+              column.componentName = column.componentType.substring(
+                column.componentType.indexOf(':') + 1
+              )
+              this.customComponentNames.add(column.componentName)
+            } else {
+              column.componentName = ''
+            }
+            // this.$set(this.propMap, column.prop, column)
+            // this.propMap[column.prop] = column
+            searchColumns.push(column)
+          }
+        }
+      }
+      return searchColumns
+    },
+    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
+    },
+    submitForm() {
+      if (this.searchType === 'normal') {
+        this.$refs.searchFormOrdinarySearch.validateForm().then((valid) => {
+          if (valid) {
+            // this.loading = true
+            this.searchParams = this.packageSearchParam()
+            $emit(this, 'search', this.searchParams)
+          } else {
+            return false
+          }
+        })
+      } else if (this.searchType === 'advanced') {
+        this.$refs.searchFormAdvancedQuery.validateForm().then((valid) => {
+          if (valid) {
+            this.loading = true
+            this.searchParams = this.packageSearchParam()
+            $emit(this, 'search', this.searchParams)
+          } else {
+            return false
+          }
+        })
+      }
+    },
+    resetForm() {
+      if (this.$refs.searchConditionList) {
+        this.$refs.searchConditionList.editConditionId = null
+      }
+      if (this.searchType === 'normal') {
+        this.$refs.searchFormOrdinarySearch.resetForm()
+      } else if (this.searchType === 'advanced') {
+        this.$refs.searchFormAdvancedQuery.resetForm()
+      }
+      $emit(this, 'reset')
+    },
+    setNumberValue(value, r, n) {
+      let itemValue = this.getFormItemValue(
+        this.searchableColumns[this.fieldNum * (r - 1) + (n - 1)].prop
+      )
+      itemValue = value
+      this.setValueToModelProp(
+        this.searchableColumns[this.fieldNum * (r - 1) + (n - 1)].prop,
+        itemValue
+      )
+    },
+    listSearchConditions() {
+      return new Promise((resolve, reject) => {
+        this.listSearchCondition(this.code)
+          .then((conditions) => {
+            this.searchConditions = conditions
+            resolve(conditions)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    saveCondition() {
+      const searchParams = this.packageSearchParam()
+      if (!searchParams || searchParams.length === 0) {
+        this.$message({
+          type: 'warning',
+          message: this.$t('imatrixUIMessage.pleaseInputSearchCondition'),
+          showClose: true,
+        })
+        return
+      }
+      this.isShowSearchCondition = true
+    },
+    saveConditionValue(conditionName) {
+      if (conditionName) {
+        let searchParams
+        if (
+          this.searchType === 'normal' ||
+          this.searchType === '' ||
+          this.searchType === null ||
+          this.searchType === undefined
+        ) {
+          searchParams = this.packageSearchParam()
+        } else {
+          searchParams = this.searchFormList
+        }
+        const condition = {
+          listCode: this.code,
+          queryType:
+            this.searchType === 'normal' ||
+            this.searchType === '' ||
+            this.searchType === null ||
+            this.searchType === undefined
+              ? 'FIXED'
+              : 'CUSTOM',
+          name: conditionName,
+          queryCondition: JSON.stringify(searchParams),
+        }
+        this.saveSearchCondition(condition).then((condition) => {
+          this.$message({
+            type: 'success',
+            message: this.$t('imatrixUIMessage.saveSuccessfully'),
+            showClose: true,
+          })
+          this.isShowSearchCondition = false
+          this.listSearchConditions().then(() => {
+            if (this.$refs.searchConditionList) {
+              // 选中刚刚保存的条件
+              this.$refs.searchConditionList.editConditionId = condition.id + ''
+            }
+            // 查询条件对应的数据
+            this.selectCondition(condition.id)
+          })
+        })
+      }
+      this.isShowSearchCondition = false
+    },
+    removeCondition(conditionId) {
+      if (conditionId) {
+        this.$confirm(
+          this.$t('imatrixUIMessage.whetherToConfirmDeletion'),
+          this.$t('imatrixUIMessage.tips'),
+          {
+            confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+            cancelButtonText: this.$t('imatrixUIPublicModel.cancel'),
+            type: 'warning',
+          }
+        ).then(() => {
+          this.removeSearchCondition(conditionId).then(() => {
+            this.$message({
+              type: 'success',
+              message: this.$t('superGrid.deleteSuccessful'),
+              showClose: true,
+            })
+            this.listSearchConditions()
+          })
+        })
+      }
+    },
+    selectCondition(conditionId) {
+      if (conditionId) {
+        this.getSearchCondition(conditionId).then((searchCondition) => {
+          if (searchCondition) {
+            const queryCondition = searchCondition.queryCondition
+            if (queryCondition) {
+              if (
+                this.searchType === 'normal' ||
+                this.searchType === '' ||
+                this.searchType === null ||
+                this.searchType === undefined
+              ) {
+                const searchParams = JSON.parse(queryCondition)
+                const searchForm = this.packageSearchForm(searchParams)
+                if (searchForm) {
+                  this.searchForm = searchForm
+                }
+                // 查询数据
+                this.loading = true
+                $emit(this, 'search', searchParams)
+              } else {
+                this.searchFormList = JSON.parse(queryCondition)
+                // 查询数据
+                this.loading = true
+                $emit(this, 'search', this.packageSearchParam())
+              }
+            }
+          }
+        })
+      }
+    },
+    // 封装searchForm
+    packageSearchForm(searchFormArr) {
+      if (searchFormArr && searchFormArr.length > 0) {
+        const searchForm = {}
+        const initSearchProps = []
+        searchFormArr.forEach((item) => {
+          // 获得的是"isDeleted"
+          let prop = item.propName
+          // 获得的是“deleted”
+          const columnProp = item.columnProp
+          const dataType = item.dataType
+          if (dataType && dataType === 'BOOLEAN' && columnProp) {
+            prop = columnProp
+          }
+          if (initSearchProps.indexOf(prop) === -1) {
+            initSearchProps.push(prop)
+          }
+          const propValue = item.propValue
+          if (prop && prop.indexOf('.') > 0) {
+            // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+            addDynamicProp(searchForm, prop, propValue)
+          } else {
+            let isRangeQueryValue = false
+            if (dataType && (dataType === 'DATE' || dataType === 'TIME')) {
+              if (item.startValue && item.endValue) {
+                isRangeQueryValue = true
+              }
+            }
+            if (isRangeQueryValue) {
+              searchForm[prop] = [item.startValue, item.endValue]
+            } else {
+              if (searchForm[prop]) {
+                if (searchForm[prop] instanceof Array) {
+                  searchForm[prop].push(propValue)
+                } else {
+                  searchForm[prop] = [searchForm[prop], propValue]
+                }
+              } else {
+                searchForm[prop] = propValue
+              }
+            }
+          }
+        })
+
+        this.searchableColumns.forEach((column) => {
+          if (initSearchProps) {
+            if (initSearchProps.indexOf(column.prop) < 0) {
+              // 表示没有默认初始查询字段
+              if (column.prop && column.prop.indexOf('.') > 0) {
+                if (column.componentType === 'dateSection') {
+                  addDynamicPropDateSection(searchForm, column.prop)
+                } else {
+                  // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+                  addDynamicProp(searchForm, column.prop)
+                }
+              } else {
+                if (column.componentType === 'dateSection') {
+                  searchForm[column.prop] = [new Date(), new Date()]
+                } else {
+                  searchForm[column.prop] = null
+                }
+              }
+            } else {
+              if (
+                column.componentType === 'multiselect' &&
+                searchForm[column.prop]
+              ) {
+                if (!(searchForm[column.prop] instanceof Array)) {
+                  searchForm[column.prop] = [searchForm[column.prop]]
+                }
+              }
+            }
+          }
+        })
+
+        return searchForm
+      }
+    },
+    resetSearchFormList() {
+      this.searchFormList = null
+    },
+    openFold(isOpen) {
+      $emit(this, 'open-fold', isOpen)
+    },
+    // 查询完毕
+    searchComplete() {
+      if (this.$refs.searchFormOrdinarySearch) {
+        this.$refs.searchFormOrdinarySearch.searchComplete()
+      }
+    },
+  },
+  emits: ['search', 'open-fold', 'reset'],
+}
+</script>
+
+<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>