agilebuilder-ui 1.1.41 → 1.1.42

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

@@ -1,30 +1,34 @@
 <template>
-	<div v-resize="onResize" class="grid-search-row">
-		<el-row>
-			<el-col v-for="(column, index) of filterSearchableColumns" :key="index" :span="span">
-				<search-form-item
-					:label-width="labelWidth"
-					:search-form="searchForm"
-					:column="column"
-					:code="code"
-					:is-sql="isSql"
-					:table-name="tableName"
-					:is-join-table="isJoinTable"
-				/>
-			</el-col>
-			<el-col :span="span" class="search-btns-view" :class="{ 'no-show-open': !isShowOpen, 'no-search-button-auto': isSearchButtonAuto  }">
-				<search-button
-					ref="searchBtnOpen"
-					:is-open="myOpen"
-					:is-show-open="isShowOpen"
-					@submit-form="$emit('submit-form')"
-					@reset-form="$emit('reset-form')"
-					@save-condition="$emit('save-condition')"
-					@open-fold="openFold"
-				/>
-			</el-col>
-		</el-row>
-	</div>
+  <div v-resize="onResize" class="grid-search-row">
+    <el-row>
+      <el-col v-for="(column, index) of filterSearchableColumns" :key="index" :span="span">
+        <search-form-item
+          :label-width="labelWidth"
+          :search-form="searchForm"
+          :column="column"
+          :code="code"
+          :is-sql="isSql"
+          :table-name="tableName"
+          :is-join-table="isJoinTable"
+        />
+      </el-col>
+      <el-col
+        :span="span"
+        class="search-btns-view"
+        :class="{ 'no-show-open': !isShowOpen, 'no-search-button-auto': isSearchButtonAuto }"
+      >
+        <search-button
+          ref="searchBtnOpen"
+          :is-open="myOpen"
+          :is-show-open="isShowOpen"
+          @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'
@@ -32,138 +36,140 @@ 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() {
-		return {
-			rowWidth: undefined, // 当前模块宽度
-			maxLength: undefined,
-			minLength: undefined,
-			myOpen: this.isOpen ?? false
-		}
-	},
-	computed: {
-		// 是否展示 展开按钮
-		isShowOpen() {
-			return this.showColumn < this.searchableColumns.length + 1
-		},
-		// 是否开启按钮右边固定
-		isSearchButtonAuto() {
-			return (this.showColumn - this.searchableColumns.length) > 1
-		},
-		filterSearchableColumns() {
-			return this.searchableColumns.filter((_, index) => !this.myOpen && this.isShowOpen && index > (this.showColumn - 2) ? false : true)
-		},
-		// 检测label 最大宽度
-		labelWidth() {
-			try {
-				if (!this.maxLength || !this.minLength) return ''
-				if (this.maxLength >= 10) return 82
-				if (this.maxLength === this.minLength && this.minLength <= 4) return 45
-				return 72
-			} catch (error) {
-				return ''
-			}
-		},
-		// 列布局
-		span() {
-			return 24 / this.showColumn
-		},
-		// 显示多少列
-		showColumn() {
-			if (this.rowWidth) {
-				if (this.rowWidth >= 1500) return 4
-				if (this.rowWidth <= 768) return 2
-			}
-			return 3
-		}
-	},
-	watch: {
-		filterSearchableColumns() {
-			const combinedArray = this.filterSearchableColumns.map(({ label, searchLabel }) => ( (searchLabel ?? label)?.replace(/[\u4e00-\u9fa5]/g, '**') ?? '').length)
-			this.maxLength = Math.max(...combinedArray)
-			this.minLength = Math.max(...combinedArray)
-		},
-		myOpen() {
-		},
-	},
-	methods: {
-		...searchMethods,
-		onResize(entry) {
-			this.rowWidth = entry.contentRect.width
-			// console.log('新尺寸:', entry.contentRect)
-			// console.log('宽度:', entry.contentRect.width)
-			// console.log('高度:', entry.contentRect.height)
-		},
-		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()
-				}
-			}
-		},
-	},
+  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() {
+    return {
+      rowWidth: undefined, // 当前模块宽度
+      maxLength: undefined,
+      minLength: undefined,
+      myOpen: this.isOpen ?? false
+    }
+  },
+  computed: {
+    // 是否展示 展开按钮
+    isShowOpen() {
+      return this.showColumn < this.searchableColumns.length + 1
+    },
+    // 是否开启按钮右边固定
+    isSearchButtonAuto() {
+      return this.showColumn - this.searchableColumns.length > 1
+    },
+    filterSearchableColumns() {
+      return this.searchableColumns.filter((_, index) =>
+        !this.myOpen && this.isShowOpen && index > this.showColumn - 2 ? false : true
+      )
+    },
+    // 检测label 最大宽度
+    labelWidth() {
+      try {
+        if (!this.maxLength || !this.minLength) return ''
+        if (this.maxLength >= 10) return 82
+        if (this.maxLength === this.minLength && this.minLength <= 4) return 45
+        return 72
+      } catch (error) {
+        return ''
+      }
+    },
+    // 列布局
+    span() {
+      return 24 / this.showColumn
+    },
+    // 显示多少列
+    showColumn() {
+      if (this.rowWidth) {
+        if (this.rowWidth >= 1500) return 4
+        if (this.rowWidth <= 768) return 2
+      }
+      return 3
+    }
+  },
+  watch: {
+    filterSearchableColumns() {
+      const combinedArray = this.filterSearchableColumns.map(
+        ({ label, searchLabel }) => ((searchLabel ?? label)?.replace(/[\u4e00-\u9fa5]/g, '**') ?? '').length
+      )
+      this.maxLength = Math.max(...combinedArray)
+      this.minLength = Math.max(...combinedArray)
+    },
+    myOpen() {}
+  },
+  methods: {
+    ...searchMethods,
+    onResize(entry) {
+      this.rowWidth = entry.contentRect.width
+      // console.log('新尺寸:', entry.contentRect)
+      // console.log('宽度:', entry.contentRect.width)
+      // console.log('高度:', entry.contentRect.height)
+    },
+    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 lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>