imatrix-ui 0.0.15 → 0.1.1-up

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

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <div class="grid-search-row">
+      <el-row v-for="r of rowNum" v-show="myOpen || r === 1" :key="r">
+        <el-col
+          v-for="n of fieldNum"
+          :key="n"
+          :xs="spanNum"
+          :sm="spanNum"
+          :md="spanNum"
+          :lg="spanNum"
+          :xl="spanNum"
+        >
+          <template
+            v-if="fieldNum * (r - 1) + (n - 1) < searchableColumns.length"
+          >
+            <!--初始进入台账页面时 或 展开时显示按钮--->
+            <search-form-item
+              v-show="(!myOpen && r === 1 && n < fieldNum) || myOpen"
+              :search-form="searchForm"
+              :column="searchableColumns[fieldNum * (r - 1) + (n - 1)]"
+              :code="code"
+              :is-sql="isSql"
+              :table-name="tableName"
+              :is-join-table="isJoinTable"
+            />
+          </template>
+          <!--初始进入台账页面时 或 展开时显示按钮--->
+          <search-button
+            v-if="
+              (!myOpen && r === 1 && n === fieldNum) ||
+              (myOpen && !isButtonNewRow && r === rowNum && n === fieldNum)
+            "
+            ref="searchBtnOpen"
+            :is-open="myOpen"
+            @submit-form="$emit('submit-form')"
+            @reset-form="$emit('reset-form')"
+            @save-condition="$emit('save-condition')"
+            @open-fold="openFold"
+          />
+        </el-col>
+      </el-row>
+    </div>
+    <!--按钮单独一行放置时--->
+    <el-row v-if="isShowNewBtnRow">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <search-button
+          ref="searchBtnOpen"
+          :is-open="myOpen"
+          @submit-form="$emit('submit-form')"
+          @reset-form="$emit('reset-form')"
+          @save-condition="$emit('save-condition')"
+          @open-fold="openFold"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import searchMethods from './search-methods'
+import SearchFormItem from './search-form-item.vue'
+import SearchButton from './search-button.vue'
+export default {
+  name: 'SearchFormOpen',
+  components: {
+    SearchFormItem,
+    SearchButton,
+  },
+  props: {
+    // 第一行的字段集合
+    searchableColumns: {
+      type: Array,
+      default: null,
+    },
+    // 查询表单信息
+    searchForm: {
+      type: Object,
+      default: null,
+    },
+    code: {
+      type: String,
+      default: null,
+    },
+    isSql: {
+      type: Boolean,
+      default: false,
+    },
+    tableName: {
+      type: String,
+      default: null,
+    },
+    isJoinTable: {
+      type: Boolean,
+      default: false,
+    },
+    spanNum: {
+      type: Number,
+      default: 8,
+    },
+    // 每行几个字段
+    fieldNum: {
+      type: Number,
+      default: null,
+    },
+    // 一共多少行
+    rowNum: {
+      type: Number,
+      default: null,
+    },
+    // 查询条件是否展开
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    let isButtonNewRow = false
+    let isShowNewBtnRow = false
+    if (
+      this.searchableColumns.length % this.fieldNum === 0 ||
+      this.rowNum > 6
+    ) {
+      // 表示查询字段正好占满行，或行数大于6时，需要另起一行放查询按钮
+      isButtonNewRow = true
+      isShowNewBtnRow = true
+    }
+    if (isButtonNewRow && !myOpen) {
+      // 需要另起一行，但是当前是收起状态，暂不显示最后一行按钮
+      isShowNewBtnRow = false
+    }
+    const myOpen = this.isOpen
+    return {
+      isButtonNewRow,
+      isShowNewBtnRow,
+      myOpen,
+    }
+  },
+  watch: {
+    myOpen() {
+      if (this.isButtonNewRow) {
+        if (!this.myOpen) {
+          // 需要另起一行，但是当前是收起状态，暂不显示最后一行按钮
+          this.isShowNewBtnRow = false
+        } else {
+          // 需要另起一行，当前是展开状态，显示最后一行按钮
+          this.isShowNewBtnRow = true
+        }
+      }
+    },
+  },
+  methods: {
+    ...searchMethods,
+    openFold(isOpen) {
+      this.myOpen = isOpen
+      this.$emit('open-fold', isOpen)
+    },
+    // 查询完毕
+    searchComplete() {
+      if (this.$refs.searchBtnOpen) {
+        if (Array.isArray(this.$refs.searchBtnOpen)) {
+          if (this.$refs.searchBtnOpen.length > 0) {
+            this.$refs.searchBtnOpen[0].searchComplete()
+          }
+        } else {
+          this.$refs.searchBtnOpen.searchComplete()
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.grid-search-row {
+  overflow: auto;
+  max-height: 320px;
+}
+</style>

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

@@ -0,0 +1,218 @@
+<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>
+
+<script>
+import { $on, $off, $once, $emit } from '../utils/gogocodeTransfer'
+import searchMethods from './search-methods'
+import store from './store'
+import { addDynamicProp, addDynamicPropDateSection } from './utils'
+import SearchFormOpen from './search-form-open.vue'
+import eventBus from '../../src/utils/eventBus'
+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() {
+      $emit(eventBus, 'remoteMethod')
+      // 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.searchForm[column.prop][0] = ''
+            this.searchForm[column.prop][1] = ''
+          } else if (
+            column.componentType === 'inputNumber' &&
+            this.searchForm[column.prop]
+          ) {
+            this.searchForm[column.prop][0] = 0
+            this.searchForm[column.prop][1] = 0
+          } else {
+            this.searchForm[column.prop] = null
+          }
+        }
+      })
+      // 取消当前选中的条件列表的信息
+      // this.$refs.searchConditionList.editConditionId = null
+      // this.$emit('reset')
+    },
+    openFold(isOpen) {
+      this.isOpen = isOpen
+      $emit(this, 'open-fold', isOpen)
+    },
+    // 查询完毕
+    searchComplete() {
+      if (this.$refs.searchFormContent) {
+        this.$refs.searchFormContent.searchComplete()
+      }
+    },
+  },
+  emits: [
+    'submit-form',
+    'reset-form',
+    'save-condition',
+    'open-fold',
+    'remoteMethod',
+    ,
+    ,
+    'submit-form',
+    'reset-form',
+    'save-condition',
+  ],
+}
+</script>
+
+<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>