agilebuilder-ui 1.0.621 → 1.0.962

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

@@ -0,0 +1,250 @@
+<template>
+	<div>
+		<el-form
+            v-if="searchableColumns.length > 0"
+            ref="searchForm"
+            :model="searchForm"
+            :rules="rules"
+            class="grid-search-form-mobile"
+            label-position="top"
+            size="default"
+		>
+			<!--初始进入台账页面时 或 展开时显示按钮--->
+			<div style="padding-bottom: 40px;padding-top: 35px;">
+				<search-form-item
+					v-for="(column, index) in searchableColumns"
+					:key="index"
+					:search-form="searchForm"
+					:column="column"
+					:code="code"
+					:is-sql="isSql"
+					:table-name="tableName"
+					:is-join-table="isJoinTable"
+				/>
+			</div>
+			<div class="search-btn-mobile">
+				<search-button
+					ref="searchBtnOpen"
+					@submit-form="$emit('submit-form')"
+					@reset-form="$emit('reset-form')"
+					@save-condition="$emit('save-condition')"
+				/>
+			</div>
+		</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 eventBus from '../../../src/utils/eventBus'
+import SearchFormItem from './search-form-item.vue'
+import SearchButton from './search-button.vue'
+
+export default {
+	name: 'SearchFormMobile',
+	components: {
+		SearchFormItem,
+		SearchButton
+	},
+	props: {
+		searchableColumns: {
+			type: Array,
+			default: null,
+		},
+		searchForm: {
+			type: Object,
+			default: null,
+		},
+		rules: {
+			type: Object,
+			default: null,
+		},
+		labelWidth: {
+			type: String,
+			default: null,
+		},
+		query: {
+			type: Object,
+			default: null,
+		},
+		code: {
+			type: String,
+			default: null,
+		},
+		isSql: {
+			type: Boolean,
+			default: false,
+		},
+		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.searchBtnOpen) {
+				if (Array.isArray(this.$refs.searchBtnOpen)) {
+					if (this.$refs.searchBtnOpen.length > 0) {
+						this.$refs.searchBtnOpen[0].searchComplete()
+					}
+				} else {
+					this.$refs.searchBtnOpen.searchComplete()
+				}
+			}
+		}
+	},
+	emits: [
+		'submit-form',
+		'reset-form',
+		'save-condition',
+		'remoteMethod',
+	],
+}
+</script>
+
+<style lang="scss" scoped>
+.grid-search-form-mobile {
+	overflow: auto;
+}
+
+.grid-search-form-mobile {
+	:deep(.el-form-item) {
+		margin-bottom: 5px;
+	}
+}
+
+.grid-search-form-mobile {
+	:deep(.el-form-item__label) {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		word-break: keep-all;
+	}
+}
+
+.grid-search-form-mobile {
+	:deep(.search-btn) {
+		margin-bottom: 5px;
+		text-align: center;
+	}
+}
+
+.grid-search-form-mobile {
+	:deep(.el-select) {
+		width: 100%;
+	}
+
+	:deep(.customComponent) {
+		width: 100%;
+	}
+}
+
+.grid-search-form-mobile {
+	:deep(.el-row) {
+		padding-right: 24px;
+	}
+}
+
+.grid-search-form-mobile {
+	:deep(.el-col) {
+		padding-left: 10px;
+		padding-bottom: 16px;
+	}
+}
+.search-btn-mobile {
+	padding-top: 10px;
+	position: fixed;
+    bottom: 0;
+    background-color: #ffffff;
+    width: 50%;
+    height: 40px;
+}
+</style>

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

@@ -1,96 +1,124 @@
 <template>
 	<div>
-		<search-condition-list
-				v-if="searchConditions.length > 0"
-				ref="searchConditionList"
-				:search-conditions="searchConditions"
-				:search-type="searchType"
-				@remove-condition="removeCondition"
-				@select-condition="selectCondition"
-		/>
-		<search-form-ordinary-search
-				v-if="searchType === 'normal'"
-				ref="searchFormOrdinarySearch"
+		<el-drawer v-if="isMobile" v-model="isShowMobileForm" :close-on-click-modal="false" :close-on-press-escape="false" direction="rtl" size="50%" @close="closeMobileSearch()">
+			<div class="search-condition-mobile">
+				<search-condition-list
+						v-if="searchConditions.length > 0"
+						ref="searchConditionList"
+						:search-conditions="searchConditions"
+						:search-type="searchType"
+						@remove-condition="removeCondition"
+						@select-condition="selectCondition"
+				/>
+			</div>
+			<search-form-mobile
+				v-if="isMobile && searchType === 'normal'"
+				ref="searchFormMobile"
 				:code="code"
-				:field-num="fieldNum"
 				:is-sql="isSql"
-				:label-width="labelWidth"
 				:load-complete-query="loadCompleteQuery"
 				:query="query"
-				:row-num="rowNum"
 				:rules="rules"
 				:search-form="searchForm"
 				:searchable-columns="searchableColumns"
-				:span-num="spanNum"
 				@submit-form="submitForm('searchForm')"
 				@reset-form="resetForm('searchForm')"
 				@save-condition="saveCondition()"
-				@open-fold="openFold"
-		/>
-		<search-form-advanced-query
-				v-if="searchType === 'advanced'"
-				ref="searchFormAdvancedQuery"
-				:code="code"
-				:is-sql="isSql"
-				:prop-map="propMap"
-				:search-form-list="searchFormList"
-				:searchable-columns="advancedQueryColumns"
-				style="padding-bottom: 10px"
-				@resetForm="resetSearchFormList"
-		/>
-		<div
-				v-if="searchType === 'advanced'"
-				style="padding-top: 10px; padding-bottom: 10px; text-align: center"
-		>
-			<el-button
-					:loading="loading"
-					size="default"
-					type="primary"
-					@click="submitForm('searchForm')"
-			>
-				{{ $t('imatrixUIPublicModel.sure') }}
-			</el-button>
-			<el-button
-					:loading="loading"
-					size="default"
-					@click="resetForm('searchForm')"
+			/>
+		</el-drawer>
+		<div v-else>
+			<search-condition-list
+					v-if="searchConditions.length > 0"
+					ref="searchConditionList"
+					:search-conditions="searchConditions"
+					:search-type="searchType"
+					@remove-condition="removeCondition"
+					@select-condition="selectCondition"
+			/>
+			<search-form-ordinary-search
+					v-if="searchType === 'normal'"
+					ref="searchFormOrdinarySearch"
+					:code="code"
+					:field-num="fieldNum"
+					:is-sql="isSql"
+					:label-width="labelWidth"
+					:load-complete-query="loadCompleteQuery"
+					:query="query"
+					:row-num="rowNum"
+					:rules="rules"
+					:search-form="searchForm"
+					:searchable-columns="searchableColumns"
+					:span-num="spanNum"
+					@submit-form="submitForm('searchForm')"
+					@reset-form="resetForm('searchForm')"
+					@save-condition="saveCondition()"
+					@open-fold="openFold"
+			/>
+			<search-form-advanced-query
+					v-if="searchType === 'advanced'"
+					ref="searchFormAdvancedQuery"
+					:code="code"
+					:is-sql="isSql"
+					:prop-map="propMap"
+					:search-form-list="searchFormList"
+					:searchable-columns="advancedQueryColumns"
+					style="padding-bottom: 10px"
+					@resetForm="resetSearchFormList"
+			/>
+			<div
+					v-if="searchType === 'advanced'"
+					style="padding-top: 10px; padding-bottom: 10px; text-align: center"
 			>
-				{{ $t('imatrixUIPublicModel.reset') }}
-			</el-button>
-			<el-button size="default" @click="saveCondition">
-				{{ $t('superGrid.saveCondition') }}
-			</el-button>
-			<span
+				<el-button
+						:loading="loading"
+						size="default"
+						type="primary"
+						@click="submitForm('searchForm')"
+				>
+					{{ $t('imatrixUIPublicModel.sure') }}
+				</el-button>
+				<el-button
+						:loading="loading"
+						size="default"
+						@click="resetForm('searchForm')"
+				>
+					{{ $t('imatrixUIPublicModel.reset') }}
+				</el-button>
+				<el-button size="default" @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="default"
-		        @click="searchType = 'normal'"
-        >
-          {{ $t('imatrixUIPublicModel.switchToNormalQuery') }}
-        </el-button>
-        <el-button
-		        v-if="searchType === 'normal'"
-		        size="default"
-		        @click="searchType = 'advanced'"
-        >
-          {{ $t('imatrixUIPublicModel.switchToAdvancedQuery') }}
-        </el-button>
-      </span>
+					advancedQuery !== null &&
+					advancedQuery !== undefined &&
+					advancedQuery === true &&
+					normalQuery !== null &&
+					normalQuery !== undefined &&
+					normalQuery === true
+					"
+								style="margin-left: 10px"
+						>
+					<el-button
+							v-if="searchType === 'advanced'"
+							size="default"
+							@click="searchType = 'normal'"
+					>
+					{{ $t('imatrixUIPublicModel.switchToNormalQuery') }}
+					</el-button>
+					<el-button
+							v-if="searchType === 'normal'"
+							size="default"
+							@click="searchType = 'advanced'"
+					>
+					{{ $t('imatrixUIPublicModel.switchToAdvancedQuery') }}
+					</el-button>
+				</span>
+			</div>
 		</div>
-		<search-condition-input
+			<search-condition-input
 				v-if="isShowSearchCondition"
 				@close="saveConditionValue"
-		/>
+			/>
 	</div>
 </template>
 
@@ -106,6 +134,8 @@ import {addDynamicProp, addDynamicPropDateSection} from './utils'
 import * as Vue from 'vue'
 import SearchConditionInput from './search-condition-input.vue'
 import SearchConditionList from './search-condition-list.vue'
+import SearchFormMobile from './search-form-mobile.vue'
+import {isMobileBrowser} from '../../../src/utils/common-util'
 
 export default {
 	name: 'SearchForm',
@@ -114,7 +144,8 @@ export default {
 		SearchConditionInput,
 		SearchConditionList,
 		searchFormOrdinarySearch,
-		searchFormAdvancedQuery
+		searchFormAdvancedQuery,
+		SearchFormMobile
 	},
 	provide() {
 		return {
@@ -207,6 +238,13 @@ export default {
 				}
 			}
 		})
+
+		const isMobile = isMobileBrowser()
+		let canShowMobileSearch = false
+		if(isMobile && searchColumns && searchColumns.length > 0){
+			// 如果是移动端，且有查询字段，则新页面需要显示“查询”按钮
+			canShowMobileSearch = true
+		}
 		const spanNum = this.getSpanNum(searchColumns)
     	const fieldNum = this.getFieldNumPerRow(searchColumns)
 		const rowNum = Math.ceil(searchColumns.length / fieldNum)
@@ -215,7 +253,6 @@ export default {
 		// console.log('searchColumns.length=' + searchColumns.length + ',fieldNum=' + fieldNum + ',rowNum=' + rowNum)
 		// // -2是把
 		// const dateSpanNum = (spanNum - 2) / 2
-
 		return {
 			searchForm,
 			rules: {},
@@ -237,6 +274,9 @@ export default {
 			normalQuery,
 			searchFormList: [],
 			searchType: null,
+			isMobile, // 是否是移动端
+			isShowMobileForm: true, // 是否显示表单
+			canShowMobileSearch
 		}
 	},
 	computed: {
@@ -262,6 +302,11 @@ export default {
 		} else if (this.advancedQuery) {
 			this.searchType = 'advanced'
 		}
+		console.log('this.canShowMobileSearch----', this.canShowMobileSearch)
+		if(this.canShowMobileSearch){
+			// 如果是移动端，且有查询字段，则新页面需要显示“查询”按钮
+			this.$emit('can-show-mobile-search')
+		}
 	},
 	methods: {
 		...searchMethods,
@@ -482,7 +527,17 @@ export default {
 			return false
 		},
 		submitForm() {
-			if (this.searchType === 'normal') {
+			if(this.isMobile){
+				this.$refs.searchFormMobile.validateForm().then((valid) => {
+					if (valid) {
+						// this.loading = true
+						this.searchParams = this.packageSearchParam()
+						$emit(this, 'search', this.searchParams)
+					} else {
+						return false
+					}
+				})
+			}else if (this.searchType === 'normal') {
 				this.$refs.searchFormOrdinarySearch.validateForm().then((valid) => {
 					if (valid) {
 						// this.loading = true
@@ -508,7 +563,9 @@ export default {
 			if (this.$refs.searchConditionList) {
 				this.$refs.searchConditionList.editConditionId = null
 			}
-			if (this.searchType === 'normal') {
+			if(this.isMobile){
+				this.$refs.searchFormMobile.resetForm()
+			} else if (this.searchType === 'normal') {
 				this.$refs.searchFormOrdinarySearch.resetForm()
 			} else if (this.searchType === 'advanced') {
 				this.$refs.searchFormAdvancedQuery.resetForm()
@@ -739,12 +796,21 @@ export default {
 		},
 		// 查询完毕
 		searchComplete() {
-			if (this.$refs.searchFormOrdinarySearch) {
+			if(this.isMobile && this.$refs.searchFormMobile){
+				this.$refs.searchFormMobile.searchComplete()
+			}else if (this.$refs.searchFormOrdinarySearch) {
 				this.$refs.searchFormOrdinarySearch.searchComplete()
 			}
 		},
+		closeMobileSearch() {
+			this.isShowMobileForm = false
+			$emit(this, 'close-mobile-search')
+		},
+		showMobileSearch(){
+			this.isShowMobileForm = true
+		}
 	},
-	emits: ['search', 'open-fold', 'reset'],
+	emits: ['search', 'open-fold', 'reset', 'show-mobile-search', 'close-mobile-search'],
 }
 </script>
 
@@ -766,4 +832,15 @@ export default {
 .grid-search-form :deep(.customComponent) {
 	width: 100%;
 }
+
+
+.search-condition-mobile {
+	padding-bottom: 10px;
+	position: fixed;
+    top: 37px;
+    background-color: #ffffff;
+    width: 46%;
+    height: 40px;
+	z-index: 1500;
+}
 </style>