agilebuilder-ui 1.0.0

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

@@ -0,0 +1,77 @@
+<template>
+  <el-dialog
+    :show-close="true"
+    :append-to-body="true"
+    title="查询条件"
+    model-value
+    @close="$emit('close')"
+  >
+    <search-form
+      ref="sf"
+      :columns="columns"
+      :code="code"
+      :url="url"
+      :pagination="pagination"
+      :query="query"
+      :search-param="searchParam"
+      :init-search-props="initSearchProps"
+      @search="doSearch"
+      @reset="resetSearch"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import SearchForm from './search-form.vue'
+export default {
+  name: 'SearchFormDialog',
+  components: {
+    SearchForm,
+  },
+  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,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {},
+  methods: {
+    doSearch(searchForm) {
+      $emit(this, 'search', searchForm)
+    },
+    resetSearch() {
+      $emit(this, 'reset')
+    },
+  },
+  emits: ['close', 'search', 'reset'],
+}
+</script>

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

@@ -0,0 +1,496 @@
+<template>
+	<el-form-item
+			:label-width="
+      column.querySetting ? getLabelWidth(column.querySetting) : '110px'
+    "
+			:prop="column.prop"
+	>
+		<template v-slot:label>
+      <span
+		      v-if="column.searchLabel && column.searchLabel !== ''"
+		      :title="column.searchLabel.replace(/\\n/g, '</br>')"
+		      v-html="column.searchLabel.replace(/\\n/g, '</br>')"
+      />
+			<span
+					v-else
+					:title="column.label.replace(/\\n/g, '</br>')"
+					v-html="column.label.replace(/\\n/g, '</br>')"
+			/>
+		</template>
+		<span v-if="customComponent(column) === true">
+      <component
+		      :is="column.componentName"
+		      :ref="column.componentName"
+		      :entity="searchForm"
+			  :model-value="getFormItemValue(column.prop)"
+		      :prop="column.prop"
+		      :row="searchForm"
+		      :select-options="column.valueSet"
+		      class="customComponent"
+			  @change="setValueToModelProp(column.prop,$event, column.componentName)"
+      />
+    </span>
+		<!-- 日期区间-两个输入框方式 -->
+		<span v-else-if="column.componentType === 'dateSection'">
+      <el-date-picker
+			  :model-value="getFormItemValue(column.prop, 0)"
+		      :placeholder="$t('imatrixUIMessage.startDate')"
+		      :style="column.searchControlWidth"
+		      type="date"
+			  @change="setValueToModelProp(column.prop,$event, null, 0)"
+      />
+      <el-date-picker
+			:model-value="getFormItemValue(column.prop, 1)"
+			:placeholder="$t('imatrixUIMessage.endDate')"
+			:style="column.searchControlWidth"
+			type="date"
+			  @change="setValueToModelProp(column.prop,$event, null, 1)"
+      />
+    </span>
+		<!--后面再优化年份及年份区间控件--->
+		<year-range-picker
+				v-else-if="column.componentType === 'yearRange'"
+				:value="getFormItemValue(column.prop)"
+				type="yearRange"
+				@change="setYearRangeValue(column.prop, $event)"
+		/>
+		<el-date-picker
+				v-else-if="column.componentType === 'dateTimePicker'"
+				:default-time="getDefaultTime(column)"
+				:end-placeholder="$t('imatrixUIMessage.endDate')"
+				:model-value="getFormItemValue(column.prop)"
+				:range-separator="$t('imatrixUIPublicModel.to')"
+				:start-placeholder="$t('imatrixUIMessage.startDate')"
+				:style="column.searchControlWidth"
+				type="datetimerange"
+				unlink-panels
+				value-format="YYYY-MM-DD HH:mm:ss"
+				@change="setValueToModelProp(column.prop,$event)"
+		/>
+
+		<el-date-picker
+				v-else-if="column.dataType === 'DATE' || column.componentType === 'date'"
+				:end-placeholder="$t('imatrixUIMessage.endDate')"
+				:model-value="getFormItemValue(column.prop)"
+				:range-separator="$t('imatrixUIPublicModel.to')"
+				:start-placeholder="$t('imatrixUIMessage.startDate')"
+				:style="column.searchControlWidth"
+				type="daterange"
+				unlink-panels
+				value-format="YYYY-MM-DD"
+				@change="setValueToModelProp(column.prop,$event)"
+		/>
+		<el-date-picker
+				v-else-if="
+        column.dataType === 'TIME' && column.componentType === 'timepicker'
+      "
+				:end-placeholder="$t('imatrixUIMessage.endDate')"
+				:model-value="getFormItemValue(column.prop)"
+				:range-separator="$t('imatrixUIPublicModel.to')"
+				:start-placeholder="$t('imatrixUIMessage.startDate')"
+				:style="column.searchControlWidth"
+				type="datetimerange"
+				unlink-panels
+				value-format="HH:mm:ss"
+				@change="setValueToModelProp(column.prop,$event)"
+		/>
+
+		<el-time-picker
+				v-else-if="
+        column.componentType === 'timepicker' &&
+        column.dataType !== 'TIME' &&
+        column.dataType !== 'DATE'
+      "
+				:model-value="getFormItemValue(column.prop)"
+				:placeholder="$t('imatrixUIMessage.selectTime')"
+				style="width: 100%"
+				type="fixed-time"
+				value-format="HH:mm:ss"
+				@change="setValueToModelProp(column.prop,$event)"
+		/>
+
+		<organization-input
+				v-else-if="componentTypeTypeIsTree(column.componentType)"
+				:fields="getTreeFields(column.orgTreeSet)"
+				:models="searchForm"
+				:multiple="getTreeIsMultiTree(column.componentType)"
+				:tree-type="getTreeType(column.componentType)"
+				:value="getFormItemValue(column.prop)"
+				@clear="clearOrganizationInputEvent"
+				@setValue="organizationInputEvent"
+		/>
+
+		<el-select
+				v-else-if="
+        ((column.componentType && column.componentType === 'select') ||
+          column.dataType === 'BOOLEAN') &&
+        !isDynamicDataSourceSource(column)
+      "
+				:model-value="getFormItemValue(column.prop)"
+				:placeholder="$t('imatrixUIMessage.pleaseSelect')"
+				:style="column.searchControlWidth"
+				clearable
+				filterable
+				@change="setValueToModelProp(column.prop,$event)"
+		>
+			<el-option
+					v-for="item in column.valueSet"
+					:key="item.value"
+					:label="item.label"
+					:value="item.value"
+			/>
+		</el-select>
+		<el-select
+				v-else-if="
+        column.componentType &&
+        column.componentType === 'multiselect' &&
+        !isDynamicDataSourceSource(column)
+      "
+				:model-value="getFormItemValue(column.prop)"
+				:placeholder="$t('imatrixUIMessage.pleaseSelect')"
+				:style="column.searchControlWidth"
+				clearable
+				collapse-tags
+				filterable
+				multiple
+				@change="setValueToModelProp(column.prop,$event)"
+		>
+			<el-option
+					v-for="item in column.valueSet"
+					:key="item.value"
+					:label="item.label"
+					:value="item.value"
+			/>
+		</el-select>
+		<dynamic-source-select
+				v-else-if="
+        column.componentType &&
+        (column.componentType === 'multiselect' ||
+          column.componentType === 'select') &&
+        isDynamicDataSourceSource(column)
+      "
+				:allow-create="true"
+				:base-props="{
+        multiple: column.componentType === 'multiselect' ? true : false,
+      }"
+				:entity="searchForm"
+				:filterable="true"
+				:is-join-table="isJoinTable"
+				:list-code="code"
+				:list-toolbar-form-data="listToolbarFormData"
+				:options="getDynamicDataSourceOptions(column)"
+				:table-name="tableName"
+				:value="getFormItemValue(column.prop)"
+				@input="setValueToModelProp(column.prop, $event)"
+		/>
+		<!--
+									<el-input-number
+										v-else-if="column.componentType && column.componentType==='inputNumber'"
+										:value="getFormItemValue(column.prop)"
+										@input="setValueToModelProp(column.prop,$event)"
+									/> -->
+
+		<search-form-number
+				v-else-if="column.componentType && column.componentType === 'inputNumber'"
+				:item-value="searchForm[column.prop]"
+				:module-config="moduleConfig"
+				@setValue="setNumberValue"
+		/>
+
+		<el-switch
+				v-else-if="column.componentType && column.componentType === 'switch'"
+				:model-value="getFormItemValue(column.prop)"
+				:style="column.searchControlWidth"
+				active-color="#13ce66"
+				inactive-color="#ff4949"
+				@change="setValueToModelProp(column.prop,$event)"
+		/>
+		<el-slider
+				v-else-if="column.componentType && column.componentType === 'slider'"
+				:model-value="getFormItemValue(column.prop)"
+				:style="column.searchControlWidth"
+				@change="setValueToModelProp(column.prop,$event)"
+		/>
+
+		<el-rate
+				v-else-if="column.componentType && column.componentType === 'rate'"
+				:model-value="getFormItemValue(column.prop)"
+				:style="column.searchControlWidth"
+				@change="setValueToModelProp(column.prop,$event)"
+		/>
+		<el-input
+				v-else
+				:model-value="getFormItemValue(column.prop)"
+				:style="column.searchControlWidth"
+				@keyup.enter="submitForm('searchForm')"
+				@input="setValueToModelProp(column.prop,$event)"
+		/>
+	</el-form-item>
+</template>
+
+<script>
+import {$emit} from '../../utils/gogocodeTransfer'
+import searchMethods from './search-methods'
+import searchFormNumber from './search-form-number.vue'
+import store from './store'
+import {getDynamicDataSourceOptions, isDynamicDataSourceSource} from './utils'
+
+export default {
+	name: 'SearchFormItem',
+	components: {
+		searchFormNumber,
+	},
+	inject: ['getListToolbarFormData'],
+	props: {
+		column: {
+			type: Object,
+			default: null,
+		},
+		code: {
+			type: String,
+			default: null,
+		},
+		isSql: {
+			type: Boolean,
+			default: false,
+		},
+		tableName: {
+			type: String,
+			default: null,
+		},
+		isJoinTable: {
+			type: Boolean,
+			default: false,
+		},
+		// 查询表单信息
+		searchForm: {
+			type: Object,
+			default: null,
+		},
+		index: {
+			type: Number,
+			default: 0,
+		},
+		length: {
+			type: Number,
+			default: 0,
+		},
+		loadCompleteQuery: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		const customComponentNames = new Set()
+		return {
+			customComponentNames: customComponentNames,
+			dateOne: null,
+			dataTwo: null,
+			moduleConfig: {}
+		}
+	},
+	computed: {
+		listToolbarFormData() {
+			console.log(this.getListToolbarFormData())
+			const data = this.getListToolbarFormData()
+			if (data && data.listToolbarFormData) {
+				return this.getListToolbarFormData().listToolbarFormData
+			}
+			return null
+		},
+	},
+	created() {
+		if (this.column.valueSetOptions) {
+			this.moduleConfig = JSON.parse(this.column.valueSetOptions)
+		}
+		console.log('searchitem页面', this.column)
+	},
+	mounted() {
+		// 查询页面加载完成
+		if (this.index + 1 === this.length && this.loadCompleteQuery) {
+			$emit(this, 'submit-form')
+		}
+	},
+	methods: {
+		...searchMethods,
+		getDynamicDataSourceOptions(column) {
+			const gridParams = store.get(this.code)
+			return getDynamicDataSourceOptions(
+					column,
+					this.isSql,
+					gridParams.additionalParamMap
+			)
+		},
+		// 值设置是否是动态数据源类型的数据源
+		isDynamicDataSourceSource(column) {
+			return isDynamicDataSourceSource(column)
+		},
+		setValueToModelProp(prop, value, componentName, index) {
+			console.log('%c描述-105004', 'color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px', 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
+				}
+			}
+		},
+		getLabelWidth(querySetting) {
+			const configData = JSON.parse(querySetting)
+			if (
+					configData.labelWidth !== '' &&
+					configData.labelWidth !== null &&
+					configData.labelWidth !== undefined
+			) {
+				return configData.labelWidth + 'px'
+			} else {
+				return '110px'
+			}
+		},
+		componentTypeTypeIsTree(componentType) {
+			if (componentType) {
+				if (componentType.indexOf('DeptManTree') > 0) {
+					// 说明是部门人员树
+					return true
+				}
+				if (componentType.indexOf('DeptTree') > 0) {
+					// 说明是部门树
+					return true
+				}
+				if (componentType.indexOf('WgManTree') > 0) {
+					// 说明是工作组人员树
+					return true
+				}
+				if (componentType.indexOf('WgManTree') > 0) {
+					// 说明是工作组树
+					return true
+				}
+			}
+			return false
+		},
+		getTreeFields(orgTreeSetJson) {
+			if (orgTreeSetJson && orgTreeSetJson !== '') {
+				const orgTreeSet = JSON.parse(orgTreeSetJson)
+				if (orgTreeSet.length) {
+					return orgTreeSet
+				} else {
+					if (orgTreeSet.orgTreeSetArr) {
+						return orgTreeSet.orgTreeSetArr
+					}
+				}
+			}
+		},
+		getTreeIsMultiTree(componentType) {
+			if (
+					componentType &&
+					componentType.indexOf('single') >= 0 &&
+					componentType.indexOf('Tree') > 0
+			) {
+				return false
+			} else {
+				return true
+			}
+		},
+		getTreeType(componentType) {
+			if (componentType) {
+				if (componentType.indexOf('DeptManTree') > 0) {
+					// 说明是部门人员树
+					return 'DeptUserTree'
+				}
+				if (componentType.indexOf('DeptTree') > 0) {
+					// 说明是部门树
+					return 'DeptTree'
+				}
+				if (componentType.indexOf('WgTree') > 0) {
+					// 说明是工作组人员树
+					return 'WgTree'
+				}
+				if (componentType.indexOf('WgManTree') > 0) {
+					// 说明是工作组树
+					return 'WgUserTree'
+				}
+			}
+		},
+		// 组织结构树文本框值改变事件
+		organizationInputEvent(prop, value) {
+			if (prop) {
+				// 必须手动调用一下input事件，否则不会更新组件的值
+				this.searchForm[prop] = value
+			}
+		},
+		// 组织结构树文本框值清空事件
+		clearOrganizationInputEvent(prop) {
+			if (prop) {
+				// 必须手动调用一下input事件，否则不会更新组件的值
+				this.searchForm[prop] = null
+			}
+		},
+		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
+		},
+		setNumberValue(value, r, n) {
+			let itemValue = this.getFormItemValue(this.column.prop)
+			itemValue = value
+			this.setValueToModelProp(this.column.prop, itemValue)
+		},
+		setYearRangeValue(prop, value) {
+			this.searchForm[prop][0] = value[0]
+			this.searchForm[prop][1] = value[1]
+		},
+		getDefaultTime(column) {
+			if (column['valueSetOptions']) {
+				const valueSetOptions = JSON.parse(column['valueSetOptions'])
+				if (valueSetOptions.defaultTime) {
+					return [valueSetOptions.defaultTime, valueSetOptions.defaultTime]
+				} else {
+					return ['00:00:00']
+				}
+			} else {
+				return ['00:00:00']
+			}
+		},
+	},
+	emits: ['submit-form'],
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-range-separator) {
+	min-width: 20px;
+}
+</style>

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

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-input-number
+      v-model="number1"
+      :min="
+        moduleConfig.min == 0
+          ? 0
+          : !moduleConfig.min
+          ? -Infinity
+          : moduleConfig.min
+      "
+      :max="
+        moduleConfig.max == 0
+          ? 0
+          : !moduleConfig.max
+          ? Infinity
+          : moduleConfig.max
+      "
+      :step="moduleConfig.step ? moduleConfig.step : 1"
+      :precision="moduleConfig.precision ? moduleConfig.precision : 0"
+      :controls-position="moduleConfig.position ? moduleConfig.position : ''"
+      @change="setValue()"
+    />
+    <span>---</span>
+    <el-input-number
+      v-model="number2"
+      :min="
+        moduleConfig.min == 0
+          ? 0
+          : !moduleConfig.min
+          ? -Infinity
+          : moduleConfig.min
+      "
+      :max="
+        moduleConfig.max == 0
+          ? 0
+          : !moduleConfig.max
+          ? Infinity
+          : moduleConfig.max
+      "
+      :step="moduleConfig.step ? moduleConfig.step : 1"
+      :precision="moduleConfig.precision ? moduleConfig.precision : 0"
+      :controls-position="moduleConfig.position ? moduleConfig.position : ''"
+      @change="setValue()"
+    />
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+export default {
+  props: {
+    r: {
+      type: Number,
+      default: null,
+    },
+    n: {
+      type: Number,
+      default: null,
+    },
+    itemValue: {
+      type: Array,
+      default: () => {
+        return [0, 0]
+      },
+    },
+    moduleConfig: {
+      type: Object,
+    },
+  },
+  data() {
+    const number1 =
+      this.moduleConfig.min === 0
+        ? 0
+        : !this.moduleConfig.min
+        ? 0
+        : this.moduleConfig.min
+    const number2 =
+      this.moduleConfig.max === 0
+        ? 0
+        : !this.moduleConfig.max
+        ? 100
+        : this.moduleConfig.max
+
+    return {
+      number1,
+      number2,
+    }
+  },
+  watch: {
+    itemValue: {
+      deep: true,
+      handler(newValue) {
+        if (newValue) {
+          this.number1 = newValue[0] ? newValue[0] : 0
+          this.number2 = newValue[1] ? newValue[1] : 0
+        }
+      },
+    },
+  },
+  created() {
+    $emit(this, 'setValue', [this.number1, this.number2], this.r, this.n)
+  },
+  methods: {
+    setValue() {
+      $emit(this, 'setValue', [this.number1, this.number2], this.r, this.n)
+    },
+  },
+  emits: ['setValue'],
+}
+</script>