agilebuilder-ui 1.0.0

package/packages/super-grid/src/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
+		const myOpen = this.isOpen
+		if (
+				this.searchableColumns.length % this.fieldNum === 0 ||
+				this.rowNum > 6
+		) {
+			// 表示查询字段正好占满行，或行数大于6时，需要另起一行放查询按钮
+			isButtonNewRow = true
+			isShowNewBtnRow = true
+		}
+		if (isButtonNewRow && !myOpen) {
+			// 需要另起一行，但是当前是收起状态，暂不显示最后一行按钮
+			isShowNewBtnRow = false
+		}
+		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/packages/super-grid/src/search-form-ordinarySearch.vue

@@ -0,0 +1,248 @@
+<template>
+	<div>
+		<el-form
+				v-if="searchableColumns.length > 0"
+				ref="searchForm"
+				:model="searchForm"
+				:rules="rules"
+				class="grid-search-form"
+				label-position="right"
+				size="default"
+		>
+			<search-form-open
+					ref="searchFormContent"
+					:code="code"
+					:field-num="fieldNum"
+					:is-join-table="isJoinTable"
+					:is-open="isOpen"
+					:is-sql="isSql"
+					:load-complete-query="loadCompleteQuery"
+					:row-num="rowNum"
+					:search-form="searchForm"
+					:searchable-columns="searchableColumns"
+					:span-num="spanNum"
+					:table-name="tableName"
+					@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,
+		},
+		loadCompleteQuery: {
+			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,
+			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.setDefaultQueryValue(column, this.searchForm)
+				}
+			})
+			// 取消当前选中的条件列表的信息
+			// this.$refs.searchConditionList.editConditionId = null
+			// this.$emit('reset')
+			// 重置条件后查询列表
+			$emit(this, 'submit-form')
+		},
+		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 lang="scss" scoped>
+.grid-search-form {
+	overflow: auto;
+}
+
+.grid-search-form {
+	:deep(.el-form-item) {
+		margin-bottom: 0px;
+	}
+}
+
+.grid-search-form {
+	:deep(.el-form-item__label) {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		word-break: keep-all;
+	}
+}
+
+.grid-search-form {
+	:deep(.search-btn) {
+		margin-bottom: 5px;
+		text-align: center;
+	}
+}
+
+.grid-search-form {
+	:deep(.el-select) {
+		width: 100%;
+	}
+
+	:deep(.customComponent) {
+		width: 100%;
+	}
+}
+
+.grid-search-form {
+	:deep(.el-row) {
+		padding-right: 24px;
+	}
+}
+
+.grid-search-form {
+	:deep(.el-col) {
+		padding-left: 24px;
+		padding-bottom: 16px;
+	}
+}
+</style>