imatrix-ui 2.8.21-dw → 2.8.21

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

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <el-form v-if="searchableColumns.length > 0" ref="searchForm" :model="searchForm" :rules="rules" label-position="right" class="grid-search-form" size="small">
+      <search-form-open
+        ref="searchFormContent"
+        :searchable-columns="searchableColumns"
+        :search-form="searchForm"
+        :code="code"
+        :is-sql="isSql"
+        :table-name="tableName"
+        :is-join-table="isJoinTable"
+        :span-num="spanNum"
+        :field-num="fieldNum"
+        :row-num="rowNum"
+        :is-open="isOpen"
+        @submit-form="$emit('submit-form')"
+        @reset-form="$emit('reset-form')"
+        @save-condition="$emit('save-condition')"
+        @open-fold="openFold"
+      />
+    </el-form>
+  </div>
+</template>
+<style scoped>
+  .grid-search-form{
+    overflow: auto;
+  }
+  .grid-search-form >>> .el-form-item{
+    margin-bottom: 0px;
+  }
+  .grid-search-form >>> .el-form-item__label{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: keep-all;
+  }
+
+  .grid-search-form >>> .search-btn{
+    margin-bottom: 5px;
+    text-align: center;
+  }
+  .grid-search-form >>> .el-select,.grid-search-form >>> .customComponent{
+    width: 100%;
+  }
+  .grid-search-form >>> .el-row{
+    padding-right: 24px;
+  }
+  .grid-search-form >>> .el-col{
+    padding-left: 24px;
+    padding-bottom: 16px;
+  }
+</style>
+<script>
+import searchMethods from './search-methods'
+import store from './store'
+import { addDynamicProp, addDynamicPropDateSection } from './utils'
+import SearchFormOpen from './search-form-open.vue'
+export default {
+  name: 'SearchForm',
+  components: {
+    SearchFormOpen
+  },
+  props: {
+    searchableColumns: {
+      type: Array,
+      default: null
+    },
+    searchForm: {
+      type: Object,
+      default: null
+    },
+    fieldNum: {
+      type: Number,
+      default: null
+    },
+    rules: {
+      type: Object,
+      default: null
+    },
+    labelWidth: {
+      type: String,
+      default: null
+    },
+    query: {
+      type: Object,
+      default: null
+    },
+    rowNum: {
+      type: Number,
+      default: null
+    },
+    code: {
+      type: String,
+      default: null
+    },
+    isSql: {
+      type: Boolean,
+      default: false
+    },
+    spanNum: {
+      type: Number,
+      default: 8
+    }
+
+  },
+  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,
+      dateOne: null,
+      dataTwo: null,
+      tableName,
+      isJoinTable: isHasJoinTable, // 是否是关联表
+      isOpen: false
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+  },
+  created() {
+  },
+  methods: {
+    ...searchMethods,
+    validateForm() {
+      return new Promise((resolve, reject) => {
+        this.$refs.searchForm.validate((valid) => {
+          resolve(valid)
+        })
+      })
+    },
+    resetForm() {
+      // console.log('customComponentNames=', this.customComponentNames)
+      if (this.customComponentNames && this.customComponentNames.length > 0) {
+        for (const componentName of this.customComponentNames) { // 遍历
+          this.$refs[componentName][0].resetField()
+        }
+      }
+      this.$refs.searchForm.resetFields()
+      // 当是保持页数默认赋值的查询字段resetFields()不会被清空，需要下面的方法遍历设未null
+      this.searchableColumns.forEach(column => {
+        // 表示没有默认初始查询字段
+        if (column.prop && column.prop.indexOf('.') > 0) {
+          if (column.componentType === 'dateSection') {
+            addDynamicPropDateSection(this.searchForm, column.prop)
+          } else {
+            // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+            addDynamicProp(this.searchForm, column.prop)
+          }
+        } else {
+          if (column.componentType === 'dateSection') {
+            this.searchForm[column.prop] = [new Date(), new Date()]
+          } else if (column.componentType === 'yearRange') {
+            this.$set(this.searchForm[column.prop], 0, '')
+            this.$set(this.searchForm[column.prop], 1, '')
+          } else {
+            this.searchForm[column.prop] = null
+          }
+        }
+      })
+      // 取消当前选中的条件列表的信息
+      // this.$refs.searchConditionList.editConditionId = null
+      // this.$emit('reset')
+    },
+    openFold(isOpen) {
+      this.isOpen = isOpen
+      this.$emit('open-fold', isOpen)
+    },
+    // 查询完毕
+    searchComplete() {
+      if (this.$refs.searchFormContent) {
+        this.$refs.searchFormContent.searchComplete()
+      }
+    }
+
+  }
+}
+</script>