agilebuilder-ui 1.0.0

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

@@ -0,0 +1,704 @@
+<template>
+	<el-form
+			v-if="searchableColumns.length > 0"
+			ref="searchForm"
+			:label-position="query.queryLabelPosition"
+			:label-width="labelWidth"
+			:model="searchForm"
+			:rules="rules"
+			class="grid-search-form"
+			size="default"
+	>
+		<table>
+			<tr v-for="r of rowNum" :key="r">
+				<td
+						v-for="n of getColumnNumPerRow(r, searchableColumns.length)"
+						:key="n"
+				>
+					<el-form-item
+							:label-width="
+              searchableColumns[fieldNum * (r - 1) + (n - 1)].searchLabelWidth
+                ? searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                    .searchLabelWidth
+                : '160px'
+            "
+							:prop="searchableColumns[fieldNum * (r - 1) + (n - 1)].prop"
+							:style="{ paddingLeft: '10px', minWidth: '200px' }"
+					>
+						<template v-slot:label>
+              <span
+		              v-if="
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].searchLabel &&
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                    .searchLabel !== ''
+                "
+		              v-html="
+                  searchableColumns[
+                    fieldNum * (r - 1) + (n - 1)
+                  ].searchLabel.replace(/\\n/g, '</br>')
+                "
+              />
+							<span
+									v-else
+									v-html="
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].label.replace(
+                    /\\n/g,
+                    '</br>'
+                  )
+                "
+							/>
+						</template>
+						<el-date-picker
+								v-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType ===
+                  'DATE' ||
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'date'
+              "
+								:end-placeholder="$t('imatrixUIMessage.endDate')"
+								:model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+								:range-separator="$t('imatrixUIPublicModel.to')"
+								:start-placeholder="$t('imatrixUIMessage.startDate')"
+								:style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+								type="daterange"
+								unlink-panels
+								value-format="YYYY-MM-DD"
+								@input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+						/>
+
+						<el-date-picker
+								v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'dateTimePicker'
+              "
+								:end-placeholder="$t('imatrixUIMessage.endDate')"
+								:model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+								:range-separator="$t('imatrixUIPublicModel.to')"
+								:start-placeholder="$t('imatrixUIMessage.startDate')"
+								:style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+								type="datetimerange"
+								unlink-panels
+								value-format="YYYY-MM-DD HH:mm:ss"
+								@input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+						/>
+
+						<el-date-picker
+								v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType ===
+                  'TIME' &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'timepicker'
+              "
+								:end-placeholder="$t('imatrixUIMessage.endDate')"
+								:model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+								:range-separator="$t('imatrixUIPublicModel.to')"
+								:start-placeholder="$t('imatrixUIMessage.startDate')"
+								:style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+								type="datetimerange"
+								unlink-panels
+								value-format="HH:mm:ss"
+								@input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+						/>
+
+						<el-time-picker
+								v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'timepicker' &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType !==
+                  'TIME' &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType !==
+                  'DATE'
+              "
+								:model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+								:placeholder="$t('imatrixUIMessage.selectTime')"
+								style="width: 100%"
+								type="fixed-time"
+								value-format="HH:mm:ss"
+								@input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+						/>
+						<el-select
+								v-else-if="
+                (searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType &&
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                    .componentType === 'select') ||
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType ===
+                  'BOOLEAN'
+              "
+								:model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+								:placeholder="$t('imatrixUIMessage.pleaseSelect')"
+								:style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+								clearable
+								@input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+						>
+							<el-option
+									v-for="item in searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .valueSet"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+							/>
+						</el-select>
+						<el-select
+								v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'multiselect'
+              "
+								:model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+								:placeholder="$t('imatrixUIMessage.pleaseSelect')"
+								:style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+								clearable
+								collapse-tags
+								multiple
+								@input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+						>
+							<el-option
+									v-for="item in searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .valueSet"
+									:key="item.value"
+									:label="item.label"
+									:value="item.value"
+							/>
+						</el-select>
+						<!--
+									<el-input-number
+										v-else-if="searchableColumns[fieldNum*(r-1)+(n-1)].componentType && searchableColumns[fieldNum*(r-1)+(n-1)].componentType==='inputNumber'"
+										:value="getFormItemValue(searchableColumns[fieldNum*(r-1)+(n-1)].prop)"
+										@input="setValueToModelProp(searchableColumns[fieldNum*(r-1)+(n-1)].prop,$event)"
+									/> -->
+
+						<search-form-number
+								v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'inputNumber'
+              "
+								:n="n"
+								:r="r"
+								@setValue="setNumberValue"
+						/>
+
+						<el-switch
+								v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'switch'
+              "
+								:model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+								:style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+								active-color="#13ce66"
+								inactive-color="#ff4949"
+								@input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+						/>
+						<el-slider
+								v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'slider'
+              "
+								:model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+								:style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+								@input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+						/>
+
+						<el-rate
+								v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'rate'
+              "
+								:model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+								:style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+								@input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+						/>
+						<span
+								v-else-if="
+                customComponent(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                ) === true
+              "
+						>
+              <component
+		              :is="
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].componentName
+                "
+		              :ref="
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].componentName
+                "
+		              :prop="searchableColumns[fieldNum * (r - 1) + (n - 1)].prop"
+		              :value="
+                  getFormItemValue(
+                    searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                  )
+                "
+		              class="customComponent"
+		              @input="
+                  setValueToModelProp(
+                    searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                    $event
+                  )
+                "
+              />
+            </span>
+						<el-input
+								v-else
+								:model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+								:style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+								@input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+								@keyup.enter="submitForm('searchForm')"
+						/>
+					</el-form-item>
+				</td>
+			</tr>
+		</table>
+
+		<el-form-item class="search-btn">
+			<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-form-item>
+	</el-form>
+</template>
+
+<script>
+import {$on, $off, $once, $emit} from '../../utils/gogocodeTransfer'
+import searchMethods from './search-methods'
+import searchFormNumber from './search-form-number.vue'
+import store from './store'
+// import { isOptionFunction, getSearchObject } from './utils'
+import {addDynamicProp} from './utils'
+import * as Vue from 'vue'
+
+export default {
+	name: 'SearchForm',
+	components: {
+		searchFormNumber,
+	},
+	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,
+		},
+		// 九宫格组件的id
+		gridId: {
+			type: String,
+			default: '_nineGrid',
+		},
+	},
+	data() {
+		const storeId = this.code + '~' + this.gridId
+		const customComponentNames = new Set()
+		const gridParams = store.get(storeId)
+		let searchForm = {}
+		if (this.searchParam !== null) {
+			searchForm = JSON.parse(JSON.stringify(this.searchParam))
+			// searchForm = this.searchParam
+		}
+		console.log('searchForm=', searchForm)
+		const searchColumns = this.getSearchableColumns()
+		if (this.initSearchProps === undefined || this.initSearchProps === null) {
+			this.initSearchProps = []
+		}
+		searchColumns.forEach((column) => {
+			if (this.initSearchProps.indexOf(column.prop) < 0) {
+				// 表示没有默认初始查询字段
+				if (column.prop.indexOf('.') > 0) {
+					// 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+					addDynamicProp(searchForm, column.prop)
+				} else {
+					searchForm[column.prop] = null
+				}
+			}
+		})
+
+		const spanNum = this.getSpanNum(storeId)
+		const fieldNum = this.getFieldNumPerRow(storeId)
+		const rowNum = Math.ceil(searchColumns.length / fieldNum)
+		// 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, // 是否正在查询，默认时否
+			storeId, // 缓存的列表id
+		}
+	},
+	computed: {
+		searchableColumns() {
+			return this.getSearchableColumns()
+		},
+	},
+	methods: {
+		...searchMethods,
+		// 获得每行排放的字段个数
+		getColumnNumPerRow(rowIndex, searchColumnsLength) {
+			let columnNumPerRow = this.fieldNum
+			if (this.fieldNum * rowIndex > searchColumnsLength) {
+				// 表示字段无法填满最后一行
+				columnNumPerRow = searchColumnsLength - this.fieldNum * (rowIndex - 1)
+			}
+			return columnNumPerRow
+		},
+		// 每行放的字段个数
+		getFieldNumPerRow(storeId) {
+			const gridParams = store.get(storeId)
+			// console.log('gridParamsgridParamsgridParamsgridParams', gridParams)
+			return gridParams.options.search && gridParams.options.search.fieldNum
+					? gridParams.options.search.fieldNum
+					: 4
+		},
+		// 根据每行显示的字段个数，确定栅栏个数,默认是4个字段。最多就只能放6个字段
+		getSpanNum(storeId) {
+			const fieldNum = this.getFieldNumPerRow(storeId)
+			if (fieldNum === 1) {
+				return 14
+			} 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) {
+			if (prop.indexOf('.') > 0) {
+				const parentOjbect = this.getParentObject(prop)
+				// 嵌套属性中的最后一个属性是属于这个中间父对象的，所有要通过中间父对象来赋值
+				parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
+			} else {
+				this.searchForm[prop] = value
+			}
+		},
+		getSearchableColumns(columns, searchColumns) {
+			// console.log('columnscolumnscolumns', columns)
+			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 (
+						column.prop === '$index' ||
+						column.prop === '$selection' ||
+						column.dynamic
+				) {
+					// 序号和复选框列、动态列 不属于该组件的查询字段
+					continue
+				}
+				if (column.groupHeader) {
+					// 组合表头中子表头的字段查询
+					this.getSearchableColumns(column.children, searchColumns)
+				} 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.indexOf('custom:') >= 0) {
+							column.componentName = column.componentType.substring(
+									column.componentType.indexOf(':') + 1
+							)
+							this.customComponentNames.add(column.componentName)
+						} else {
+							column.componentName = ''
+						}
+						searchColumns.push(column)
+					}
+				}
+			}
+			return searchColumns
+		},
+		customComponent(column) {
+			const gridParams = store.get(this.storeId)
+			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(formName) {
+			this.$refs[formName].validate((valid) => {
+				if (valid) {
+					//     const searchDemo = [
+					//   { leftBracket: '', propName: 'name', enumName: '', operator: 'contain', propValue: '系统', rightBracket: '', joinSign: 'and', dataType: 'TEXT' },
+					//   { leftBracket: '', propName: 'createdTime', enumName: '', operator: 'eq', startValue: '2019-01-29', endValue: '2019-01-30', propValue: '2019-01-30', rightBracket: '', joinSign: 'and', dataType: 'DATE' },
+					//   { leftBracket: '', propName: 'enabledState', enumName: 'tech.imatrix.enumeration.MenuState', operator: 'eq', propValue: 'ENABLE', rightBracket: '', joinSign: 'and', dataType: 'ENUM' }
+					// ]
+					this.loading = true
+					this.searchParams = this.packageSearchParam()
+					$emit(this, 'search', this.searchParams, true)
+				} else {
+					// console.log('error submit!!')
+					return false
+				}
+			})
+		},
+
+		resetForm(formName) {
+			// console.log('customComponentNames=', this.customComponentNames)
+			for (const componentName of this.customComponentNames) {
+				// 遍历
+				this.$refs[componentName][0].resetField()
+			}
+			// this.$refs[formName].resetFields()
+
+			this.searchableColumns.forEach((column) => {
+				// 表示没有默认初始查询字段
+				if (column.prop.indexOf('.') > 0) {
+					// 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+					addDynamicProp(this.searchForm, column.prop)
+				} else {
+					this.searchForm[column.prop] = null
+				}
+			})
+			$emit(this, '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
+			)
+		},
+	},
+	emits: ['search', '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>