agilebuilder-ui 1.0.0

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

@@ -0,0 +1,767 @@
+<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"
+				: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')"
+			>
+				{{ $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>
+		</div>
+		<search-condition-input
+				v-if="isShowSearchCondition"
+				@close="saveConditionValue"
+		/>
+	</div>
+</template>
+
+<script>
+import {$on, $off, $once, $emit} from '../../utils/gogocodeTransfer'
+import searchMethods from './search-methods'
+// import searchFormNumber from './search-form-number.vue'
+import searchFormOrdinarySearch from './search-form-ordinarySearch.vue'
+import searchFormAdvancedQuery from './search-form-advancedQuery'
+import store from './store'
+// import { isOptionFunction, getSearchObject } from './utils'
+import {addDynamicProp, addDynamicPropDateSection} from './utils'
+import * as Vue from 'vue'
+import SearchConditionInput from './search-condition-input.vue'
+import SearchConditionList from './search-condition-list.vue'
+
+export default {
+	name: 'SearchForm',
+	components: {
+		// searchFormNumber,
+		SearchConditionInput,
+		SearchConditionList,
+		searchFormOrdinarySearch,
+		searchFormAdvancedQuery
+	},
+	provide() {
+		return {
+			getListToolbarFormData: () => ({
+				listToolbarFormData: this.listToolbarFormData,
+			}),
+		}
+	},
+	props: {
+		columns: {
+			type: Array,
+			default: null,
+		},
+		code: {
+			type: String,
+			default: null,
+		},
+		url: {
+			type: String,
+			default: null,
+		},
+		pagination: {
+			type: Object,
+			default: null,
+		},
+		query: {
+			type: Object,
+			default: null,
+		},
+		searchParam: {
+			type: Object,
+			default: null,
+		},
+		initSearchProps: {
+			type: Array,
+			default: null,
+		},
+		isSql: {
+			type: Boolean,
+			default: false,
+		},
+		searchFormInfo: {
+			type: Object,
+			default: () => {
+				return {}
+			},
+		},
+		loadCompleteQuery: {
+			type: Boolean,
+			default: false,
+		},
+		listToolbarFormData: {
+			type: Object,
+			default: null,
+		},
+	},
+	data() {
+		const customComponentNames = new Set()
+		const gridParams = store.get(this.code)
+		const propMap = {}
+		let searchForm = {}
+		if (this.searchParam !== null) {
+			searchForm = JSON.parse(JSON.stringify(this.searchParam))
+		}
+		const searchColumns = this.getSearchableColumns(null, null, propMap)
+		if (this.initSearchProps === undefined || this.initSearchProps === null) {
+			this.initSearchProps = []
+		}
+		console.log('searchForm=', searchColumns)
+		searchColumns.forEach((column) => {
+			// propMap[column.prop] = column
+			if (this.initSearchProps.indexOf(column.prop) < 0) {
+				// 表示没有默认初始查询字段
+				if (column.prop && column.prop.indexOf('.') > 0) {
+					if (column.componentType === 'dateSection') {
+						addDynamicPropDateSection(searchForm, column.prop)
+					} else {
+						// 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+						addDynamicProp(searchForm, column.prop)
+					}
+				} else {
+					if (column.componentType === 'dateSection') {
+						searchForm[column.prop] = [new Date(), new Date()]
+					} else if (column.componentType === 'yearRange') {
+						searchForm[column.prop] = ['', '']
+					} else {
+						// 去掉该代码，是因为如果有该代码，会导致初始为空的文本框input组件无法输入值
+						// searchForm[column.prop] = null
+					}
+					this.setDefaultQueryValue(column, searchForm)
+				}
+			}
+		})
+		const spanNum = this.getSpanNum()
+		const fieldNum = this.getFieldNumPerRow()
+		const rowNum = Math.ceil(searchColumns.length / fieldNum)
+		console.log('rowNumrowNumrowNumrowNum', rowNum)
+		console.log(searchColumns)
+		console.log(fieldNum)
+		const advancedQuery = this.query.advancedQuery
+		const normalQuery = this.query.normalQuery
+		// console.log('searchColumns.length=' + searchColumns.length + ',fieldNum=' + fieldNum + ',rowNum=' + rowNum)
+		// // -2是把
+		// const dateSpanNum = (spanNum - 2) / 2
+
+		return {
+			searchForm,
+			rules: {},
+			searchParams: [],
+			labelWidth:
+					gridParams.options.search && gridParams.options.search.labelWidth
+							? gridParams.options.search.labelWidth
+							: '80px',
+			customComponentNames: customComponentNames,
+			componentName: '',
+			spanNum: spanNum,
+			fieldNum: fieldNum, // 每行放的字段个数
+			rowNum: rowNum, // 一共有几行
+			loading: false, // 是否正在查询，默认时否
+			isShowSearchCondition: false,
+			searchConditions: [],
+			propMap,
+			advancedQuery,
+			normalQuery,
+			searchFormList: [],
+			searchType: null,
+		}
+	},
+	computed: {
+		searchableColumns() {
+			return this.getSearchableColumns()
+		},
+		advancedQueryColumns() {
+			return this.getAdvancedQueryColumns()
+		},
+	},
+	watch: {
+		searchForm: {
+			deep: true,
+			handler(val) {
+				this.searchFormInfo['data'] = val
+			},
+		},
+	},
+	created() {
+		this.listSearchConditions()
+		if (this.normalQuery) {
+			this.searchType = 'normal'
+		} else if (this.advancedQuery) {
+			this.searchType = 'advanced'
+		}
+	},
+	methods: {
+		...searchMethods,
+		// 每行放的字段个数
+		getFieldNumPerRow() {
+			const gridParams = store.get(this.code)
+			return gridParams.options.search && gridParams.options.search.fieldNum
+					? gridParams.options.search.fieldNum
+					: 3
+		},
+		// 根据每行显示的字段个数，确定栅栏个数,默认是4个字段。最多就只能放6个字段
+		getSpanNum() {
+			const fieldNum = this.getFieldNumPerRow()
+			if (fieldNum === 1) {
+				return 22
+			} else if (fieldNum === 2) {
+				return 10
+			} else if (fieldNum === 3) {
+				return 8
+			} else if (fieldNum === 4) {
+				return 6
+			} else {
+				// 6个字段
+				return 4
+			}
+		},
+		setValueToModelProp(prop, value, componentName, index) {
+			if (prop && prop.indexOf('.') > 0) {
+				const parentOjbect = this.getParentObject(prop)
+				// 嵌套属性中的最后一个属性是属于这个中间父对象的，所有要通过中间父对象来赋值
+				if (index != null && index !== undefined) {
+					// parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
+					parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
+				} else {
+					parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
+				}
+			} else {
+				if (index != null && index !== undefined) {
+					this.searchForm[prop][index] = value
+				} else {
+					this.searchForm[prop] = value
+				}
+			}
+		},
+		getAdvancedQueryColumns(columns, searchColumns, propMap) {
+			if (!this.customComponentNames) {
+				this.customComponentNames = new Set()
+			}
+			if (!searchColumns) {
+				searchColumns = []
+			}
+			if (!columns) {
+				columns = this.columns
+			}
+			for (let i = 0; i < columns.length; i++) {
+				const column = columns[i]
+				if (propMap) {
+					propMap[column.prop] = column
+				}
+				if (
+						column.prop === '$index' ||
+						column.prop === '$selection' ||
+						column.dynamic
+				) {
+					// 序号和复选框列、动态列 不属于该组件的查询字段
+					continue
+				}
+				if (column.groupHeader) {
+					// 组合表头中子表头的字段查询
+					this.getSearchableColumns(column.children, searchColumns, propMap)
+				} else {
+					if (
+							column.queryType === 'advanced' &&
+							!column.custom &&
+							column.prop !== ''
+					) {
+						// 表示是普通查询，且不是占位符列，是查询字段
+						if (
+								typeof column.componentType === 'undefined' ||
+								column.componentType === ''
+						) {
+							column.componentType = 'input'
+						}
+						if (column.querySetting && column.querySetting !== '') {
+							const querySetting = JSON.parse(column.querySetting)
+							if (querySetting.width) {
+								column.searchControlWidth = 'width:' + querySetting.width + 'px'
+							}
+							if (querySetting.labelWidth) {
+								column.searchLabelWidth = querySetting.labelWidth + 'px'
+							}
+							if (querySetting.label) {
+								column.searchLabel = querySetting.label
+							}
+						}
+						// 行编辑时自定义编辑组件
+						if (
+								column.componentType &&
+								column.componentType.indexOf('custom:') >= 0
+						) {
+							column.componentName = column.componentType.substring(
+									column.componentType.indexOf(':') + 1
+							)
+							this.customComponentNames.add(column.componentName)
+						} else {
+							column.componentName = ''
+						}
+						// this.$set(this.propMap, column.prop, column)
+						// this.propMap[column.prop] = column
+						searchColumns.push(column)
+					}
+				}
+			}
+			return searchColumns
+		},
+		getSearchableColumns(columns, searchColumns, propMap) {
+			if (!this.customComponentNames) {
+				this.customComponentNames = new Set()
+			}
+			if (!searchColumns) {
+				searchColumns = []
+			}
+			if (!columns) {
+				columns = this.columns
+			}
+			for (let i = 0; i < columns.length; i++) {
+				const column = columns[i]
+				if (propMap) {
+					propMap[column.prop] = column
+				}
+				if (
+						column.prop === '$index' ||
+						column.prop === '$selection' ||
+						column.dynamic
+				) {
+					// 序号和复选框列、动态列 不属于该组件的查询字段
+					continue
+				}
+				if (column.groupHeader) {
+					// 组合表头中子表头的字段查询
+					this.getSearchableColumns(column.children, searchColumns, propMap)
+				} else {
+					if (
+							column.queryType === 'normal' &&
+							!column.custom &&
+							column.prop !== ''
+					) {
+						// 表示是普通查询，且不是占位符列，是查询字段
+						if (
+								typeof column.componentType === 'undefined' ||
+								column.componentType === ''
+						) {
+							column.componentType = 'input'
+						}
+						if (column.querySetting && column.querySetting !== '') {
+							const querySetting = JSON.parse(column.querySetting)
+							if (querySetting.width) {
+								column.searchControlWidth = 'width:' + querySetting.width + 'px'
+							}
+							if (querySetting.labelWidth) {
+								column.searchLabelWidth = querySetting.labelWidth + 'px'
+							}
+							if (querySetting.label) {
+								column.searchLabel = querySetting.label
+							}
+						}
+						// 行编辑时自定义编辑组件
+						if (
+								column.componentType &&
+								column.componentType.indexOf('custom:') >= 0
+						) {
+							column.componentName = column.componentType.substring(
+									column.componentType.indexOf(':') + 1
+							)
+							this.customComponentNames.add(column.componentName)
+						} else {
+							column.componentName = ''
+						}
+						// this.$set(this.propMap, column.prop, column)
+						// this.propMap[column.prop] = column
+						searchColumns.push(column)
+					}
+				}
+			}
+			return searchColumns
+		},
+		customComponent(column) {
+			const gridParams = store.get(this.code)
+			if (column.componentName && column.componentName !== '') {
+				this.customComponentNames.add(column.componentName)
+				return true
+			}
+			if (
+					(!column.componentName || column.componentName === '') &&
+					gridParams.options &&
+					gridParams.options.search &&
+					gridParams.options.search.customSearchElements
+			) {
+				// 定义了自定义查询组件
+				const propSearchEle =
+						gridParams.options.search.customSearchElements[column.prop]
+				// console.log('customComponent-customSearchElements-propSearchEle-', column.prop)
+				if (propSearchEle) {
+					column.componentName = 'custom-' + column.prop
+					const component = propSearchEle.call(this, column)
+					// console.log('customComponent-customSearchElements-')
+					if (component) {
+						this.customComponentNames.add(column.componentName)
+						window.$vueApp.component(column.componentName, component)
+						return true
+					}
+				}
+			}
+			return false
+		},
+		submitForm() {
+			if (this.searchType === 'normal') {
+				this.$refs.searchFormOrdinarySearch.validateForm().then((valid) => {
+					if (valid) {
+						// this.loading = true
+						this.searchParams = this.packageSearchParam()
+						$emit(this, 'search', this.searchParams)
+					} else {
+						return false
+					}
+				})
+			} else if (this.searchType === 'advanced') {
+				this.$refs.searchFormAdvancedQuery.validateForm().then((valid) => {
+					if (valid) {
+						this.loading = true
+						this.searchParams = this.packageSearchParam()
+						$emit(this, 'search', this.searchParams)
+					} else {
+						return false
+					}
+				})
+			}
+		},
+		resetForm() {
+			if (this.$refs.searchConditionList) {
+				this.$refs.searchConditionList.editConditionId = null
+			}
+			if (this.searchType === 'normal') {
+				this.$refs.searchFormOrdinarySearch.resetForm()
+			} else if (this.searchType === 'advanced') {
+				this.$refs.searchFormAdvancedQuery.resetForm()
+				$emit(this, 'reset')
+			}
+			// 子组件重置完成后调用reset方法 同步执行
+			// this.$emit('reset')
+		},
+		setNumberValue(value, r, n) {
+			let itemValue = this.getFormItemValue(
+					this.searchableColumns[this.fieldNum * (r - 1) + (n - 1)].prop
+			)
+			itemValue = value
+			this.setValueToModelProp(
+					this.searchableColumns[this.fieldNum * (r - 1) + (n - 1)].prop,
+					itemValue
+			)
+		},
+		listSearchConditions() {
+			return new Promise((resolve, reject) => {
+				this.listSearchCondition(this.code)
+						.then((conditions) => {
+							this.searchConditions = conditions
+							resolve(conditions)
+						})
+						.catch((error) => {
+							reject(error)
+						})
+			})
+		},
+		saveCondition() {
+			const searchParams = this.packageSearchParam()
+			if (!searchParams || searchParams.length === 0) {
+				this.$message({
+					type: 'warning',
+					message: this.$t('imatrixUIMessage.pleaseInputSearchCondition'),
+					showClose: true,
+				})
+				return
+			}
+			this.isShowSearchCondition = true
+		},
+		saveConditionValue(conditionName) {
+			if (conditionName) {
+				let searchParams
+				if (
+						this.searchType === 'normal' ||
+						this.searchType === '' ||
+						this.searchType === null ||
+						this.searchType === undefined
+				) {
+					searchParams = this.packageSearchParam()
+				} else {
+					searchParams = this.searchFormList
+				}
+				const condition = {
+					listCode: this.code,
+					queryType:
+							this.searchType === 'normal' ||
+							this.searchType === '' ||
+							this.searchType === null ||
+							this.searchType === undefined
+									? 'FIXED'
+									: 'CUSTOM',
+					name: conditionName,
+					queryCondition: JSON.stringify(searchParams),
+				}
+				this.saveSearchCondition(condition).then((condition) => {
+					this.$message({
+						type: 'success',
+						message: this.$t('imatrixUIMessage.saveSuccessfully'),
+						showClose: true,
+					})
+					this.isShowSearchCondition = false
+					this.listSearchConditions().then(() => {
+						if (this.$refs.searchConditionList) {
+							// 选中刚刚保存的条件
+							this.$refs.searchConditionList.editConditionId = condition.id + ''
+						}
+						// 查询条件对应的数据
+						this.selectCondition(condition.id)
+					})
+				})
+			}
+			this.isShowSearchCondition = false
+		},
+		removeCondition(conditionId) {
+			if (conditionId) {
+				this.$confirm(
+						this.$t('imatrixUIMessage.whetherToConfirmDeletion'),
+						this.$t('imatrixUIMessage.tips'),
+						{
+							confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+							cancelButtonText: this.$t('imatrixUIPublicModel.cancel'),
+							type: 'warning',
+						}
+				).then(() => {
+					this.removeSearchCondition(conditionId).then(() => {
+						this.$message({
+							type: 'success',
+							message: this.$t('superGrid.deleteSuccessful'),
+							showClose: true,
+						})
+						this.listSearchConditions()
+					})
+				})
+			}
+		},
+		selectCondition(conditionId) {
+			if (conditionId) {
+				this.getSearchCondition(conditionId).then((searchCondition) => {
+					if (searchCondition) {
+						const queryCondition = searchCondition.queryCondition
+						if (queryCondition) {
+							if (
+									this.searchType === 'normal' ||
+									this.searchType === '' ||
+									this.searchType === null ||
+									this.searchType === undefined
+							) {
+								const searchParams = JSON.parse(queryCondition)
+								const searchForm = this.packageSearchForm(searchParams)
+								if (searchForm) {
+									this.searchForm = searchForm
+								}
+								// 查询数据
+								this.loading = true
+								$emit(this, 'search', searchParams)
+							} else {
+								this.searchFormList = JSON.parse(queryCondition)
+								// 查询数据
+								this.loading = true
+								$emit(this, 'search', this.packageSearchParam())
+							}
+						}
+					}
+				})
+			}
+		},
+		// 封装searchForm
+		packageSearchForm(searchFormArr) {
+			if (searchFormArr && searchFormArr.length > 0) {
+				const searchForm = {}
+				const initSearchProps = []
+				searchFormArr.forEach((item) => {
+					// 获得的是"isDeleted"
+					let prop = item.propName
+					// 获得的是“deleted”
+					const columnProp = item.columnProp
+					const dataType = item.dataType
+					if (dataType && dataType === 'BOOLEAN' && columnProp) {
+						prop = columnProp
+					}
+					if (initSearchProps.indexOf(prop) === -1) {
+						initSearchProps.push(prop)
+					}
+					const propValue = item.propValue
+					if (prop && prop.indexOf('.') > 0) {
+						// 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+						addDynamicProp(searchForm, prop, propValue)
+					} else {
+						let isRangeQueryValue = false
+						if (dataType && (dataType === 'DATE' || dataType === 'TIME')) {
+							if (item.startValue && item.endValue) {
+								isRangeQueryValue = true
+							}
+						}
+						if (isRangeQueryValue) {
+							searchForm[prop] = [
+								new Date(item.startValue),
+								new Date(item.endValue),
+							]
+						} else {
+							if (searchForm[prop]) {
+								if (searchForm[prop] instanceof Array) {
+									searchForm[prop].push(propValue)
+								} else {
+									searchForm[prop] = [searchForm[prop], propValue]
+								}
+							} else {
+								searchForm[prop] = propValue
+							}
+						}
+					}
+				})
+
+				this.searchableColumns.forEach((column) => {
+					if (initSearchProps) {
+						if (initSearchProps.indexOf(column.prop) < 0) {
+							// 表示没有默认初始查询字段
+							if (column.prop && column.prop.indexOf('.') > 0) {
+								if (column.componentType === 'dateSection') {
+									addDynamicPropDateSection(searchForm, column.prop)
+								} else {
+									// 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+									addDynamicProp(searchForm, column.prop)
+								}
+							} else {
+								if (column.componentType === 'dateSection') {
+									searchForm[column.prop] = [new Date(), new Date()]
+								} else {
+									searchForm[column.prop] = null
+								}
+							}
+						} else {
+							if (
+									column.componentType === 'multiselect' &&
+									searchForm[column.prop]
+							) {
+								if (!(searchForm[column.prop] instanceof Array)) {
+									searchForm[column.prop] = [searchForm[column.prop]]
+								}
+							}
+						}
+					}
+				})
+
+				return searchForm
+			}
+		},
+		resetSearchFormList() {
+			this.searchFormList = null
+		},
+		openFold(isOpen) {
+			$emit(this, 'open-fold', isOpen)
+		},
+		// 查询完毕
+		searchComplete() {
+			if (this.$refs.searchFormOrdinarySearch) {
+				this.$refs.searchFormOrdinarySearch.searchComplete()
+			}
+		},
+	},
+	emits: ['search', 'open-fold', 'reset'],
+}
+</script>
+
+<style scoped>
+.grid-search-form {
+	overflow: auto;
+}
+
+.grid-search-form :deep(.el-form-item) {
+	margin-bottom: 0px;
+}
+
+.grid-search-form :deep(.search-btn) {
+	margin-bottom: 5px;
+	text-align: center;
+}
+
+.grid-search-form :deep(.el-select),
+.grid-search-form :deep(.customComponent) {
+	width: 100%;
+}
+</style>