@yukihong/schema-admin-x 1.0.0

package/app/pages/widgets/schema-form/schema-form.vue

@@ -0,0 +1,131 @@
+<template>
+	<el-row v-if="schema && schema.properties" class="schema-form">
+		<template v-for="(itemSchema, key) in schema.properties">
+			<component
+				ref="formComList"
+				v-show="itemSchema.option.visible !== false"
+				:is="FormItemConfig[itemSchema.option?.comType]?.component"
+				:schemaKey="key"
+				:schema="itemSchema"
+				:model="model ? model[key] : undefined"
+			></component>
+		</template>
+	</el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, provide } from 'vue';
+import FormItemConfig from './form-item-config.js';
+
+const Ajv = require('ajv');
+const ajv = new Ajv();
+provide('ajv',ajv);
+
+const props = defineProps({
+	/**
+	 * schema 配置，结构如下：
+	 { 
+	 	type: 'object',
+	 	properties: {
+	 		key: {
+	 			...schema, // 标准 schema 配置
+	 			type: '', // 字段类型
+	 			label: '', // 字段的中文名
+				required: false, // 表单项是否必填，默认 false
+	 			option: {
+	 				...elComponentConfig, // 标准 el-component-column 配置
+	 				comType: '', // 控件类型 input/select/input-number
+	 				visible: true, // 是否展示（true/false），默认为 true
+	 				disabled: false, // 是否禁用（true/false），默认为 false
+	 				default: '', // 默认值
+	 				
+	 				// comType === 'select'
+	 				enumList: [], // 下拉框可选项
+	 			}
+	 		},
+	 		...
+	 	}
+	 }
+	 */
+	schema: Object,
+	
+	/**
+	 * 表单数据
+	 */
+	model: Object,
+});
+
+const { schema } = toRefs(props);
+
+const formComList = ref([]);
+
+// 表单校验
+const validate = () => {
+	return formComList.value.every(component => component.validate());
+}
+
+// 获取表单值
+const getValue = () => {
+	return formComList.value.reduce((dtoObj, component) => {
+		return {
+			...dtoObj,
+			...component.getValue()
+		}
+	}, {})
+}
+
+defineExpose({ 
+	validate, 
+	getValue 
+});
+
+
+</script>
+
+<style lang="less">
+	.schema-form {
+		.form-item {
+			margin-bottom: 20px;
+			min-width: 500px;
+			
+			.item-label {
+				margin-right: 15px;
+				min-width: 70px;
+				text-align: right;
+				font-size: 14px;
+				color: #ffffff;
+				word-break: break-all;
+				
+				.required {
+					top: 2px;
+					padding-left: 4px;
+					color: #f56c6c;
+					font-size: 20px;
+				}
+			}
+			.item-value {
+				.component {
+					width: 320px;
+				}
+				.valid-border {
+					.el-input__wrapper {
+						border: 1px solid #f93f3f;
+						box-shadow: 0 0 0 0;
+					}
+					.el-select__wrapper {
+						border: 1px solid #f93f3f;
+						box-shadow: 0 0 0 0;
+					}
+				}
+			}
+			.valid-tips {
+				margin-left: 10px;
+				height: 36px;
+				line-height: 36px;
+				overflow: hidden;
+				font-size: 12px;
+				color: #f93f3f;
+			}
+		}
+	}
+</style>

package/app/pages/widgets/schema-search-bar/complex-view/date-range/date-range.vue

@@ -0,0 +1,50 @@
+<template>
+	<el-date-picker
+		v-model="dtoValue"
+		v-bind="schema.option"
+		type="daterange"
+		range-separator="至"
+		:start-placeholder="schema.label + '(开始)'"
+		:end-placeholder="schema.label + '(结束)'"
+		class="date-range"
+	></el-date-picker>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import moment from 'moment';
+
+const { schemaKey, schema } = defineProps({
+	schemaKey: String,
+	schema: Object
+});
+
+const emit = defineEmits(['loaded']);
+
+const dtoValue = ref([]);
+const getValue = () => {
+	return dtoValue.value?.length === 2 ? {
+		[`${schemaKey}_start`]: moment(dtoValue.value[0]).format('YYYY-MM-DD'),
+		[`${schemaKey}_end`]: moment(dtoValue.value[0]).format('YYYY-MM-DD')
+	} : {}
+}
+
+const reset = () => {
+	dtoValue.value = [];
+}
+
+onMounted(() => {
+	reset();
+	emit('loaded');
+});
+
+defineExpose({
+	getValue,
+	reset
+})
+
+
+</script>
+
+<style lang="less" scoped>
+</style>

package/app/pages/widgets/schema-search-bar/complex-view/dynamic-select/dynamic-select.vue

@@ -0,0 +1,65 @@
+<template>
+	<el-select
+		v-model="dtoValue"
+		v-bind="schema.option"
+		class="dynamic-select"
+	>
+		<el-option
+			v-for="item in enumList"
+			:key="item.value"
+			:label="item.label"
+			:value="item.value"
+		></el-option>
+	</el-select>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import $curl from '$elpisCommon/curl.js';
+
+const { schemaKey, schema } = defineProps({
+	schemaKey: String,
+	schema: Object
+});
+
+const emit = defineEmits(['loaded']);
+
+const dtoValue = ref();
+const getValue = () => {
+	return dtoValue.value !== undefined ? {
+		[schemaKey]: dtoValue.value
+	} : {}
+}
+
+const enumList = ref([]);
+const fetchEnumList = async () => {
+	const res = await $curl({
+		method: 'get',
+		url: schema.option?.api,
+		data: {}
+	});
+	if(res?.data?.length > 0) {
+		enumList.value.push(...res?.data);
+	}
+}
+
+const reset = () => {
+	dtoValue.value = schema?.option?.default ??  enumList.value[0]?.value;
+}
+
+onMounted(async () => {
+	await fetchEnumList();
+	reset();
+	emit('loaded');
+});
+
+defineExpose({
+	getValue,
+	reset
+})
+
+
+</script>
+
+<style lang="less" scoped>
+</style>

package/app/pages/widgets/schema-search-bar/complex-view/input/input.vue

@@ -0,0 +1,44 @@
+<template>
+	<el-input
+		v-model="dtoValue"
+		v-bind="schema.option"
+		class="input"
+	></el-input>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const { schemaKey, schema } = defineProps({
+	schemaKey: String,
+	schema: Object
+});
+
+const emit = defineEmits(['loaded']);
+
+const dtoValue = ref();
+const getValue = () => {
+	return dtoValue.value !== undefined ? {
+		[schemaKey]: dtoValue.value
+	} : {}
+}
+
+const reset = () => {
+	dtoValue.value = schema?.option?.default;
+}
+
+onMounted(() => {
+	reset();
+	emit('loaded');
+});
+
+defineExpose({
+	getValue,
+	reset
+})
+
+
+</script>
+
+<style lang="less" scoped>
+</style>

package/app/pages/widgets/schema-search-bar/complex-view/select/select.vue

@@ -0,0 +1,51 @@
+<template>
+	<el-select
+		v-model="dtoValue"
+		v-bind="schema.option"
+		class="select"
+	>
+		<el-option
+			v-for="item in schema.option?.enumList"
+			:key="item.value"
+			:label="item.label"
+			:value="item.value"
+		></el-option>
+	</el-select>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const { schemaKey, schema } = defineProps({
+	schemaKey: String,
+	schema: Object
+});
+
+const emit = defineEmits(['loaded']);
+
+const dtoValue = ref();
+const getValue = () => {
+	return dtoValue.value !== undefined ? {
+		[schemaKey]: dtoValue.value
+	} : {}
+}
+
+const reset = () => {
+	dtoValue.value = schema?.option?.default ?? schema.option?.enumList[0]?.value;
+}
+
+onMounted(() => {
+	reset();
+	emit('loaded');
+});
+
+defineExpose({
+	getValue,
+	reset
+})
+
+
+</script>
+
+<style lang="less" scoped>
+</style>

package/app/pages/widgets/schema-search-bar/schema-search-bar.vue

@@ -0,0 +1,127 @@
+<template>
+	<el-form
+		v-if="schema && schema.properties"
+		:inline="true"
+		class="schema-search-bar"
+	>
+		<!-- 动态组件 -->
+		<el-form-item
+			v-for="(schemaItem, key) in schema.properties"
+			:key="key"
+			:label="schemaItem.label"
+		>
+			<!-- 展示子组件 -->
+			<component 
+				:ref="searchComList"
+				:is="SearchItemConfig[schemaItem.option?.comType]?.component"
+				:schemaKey="key"
+				:schema="schemaItem"
+				@loaded="handleChildLoaded"
+			></component>
+		</el-form-item>
+		<!-- 操作区域 -->
+		<el-form-item>
+			<el-button
+				type="primary"
+				plain
+				class="search-btn"
+				@click="search"
+			>搜索</el-button>
+			<el-button
+				plain
+				class="reset-btn"
+				@click="reset"
+			>重置</el-button>
+		</el-form-item>
+		
+	</el-form>
+</template>
+
+<script setup>
+import { ref, toRefs } from 'vue';
+import SearchItemConfig from './search-item-config.js';
+const props = defineProps({
+	/**
+	 * schema 配置，结构如下：
+	 { 
+	 	type: 'object',
+	 	properties: {
+	 		key: {
+	 			...schema, // 标准 schema 配置
+	 			type: '', // 字段类型
+	 			label: '', // 字段的中文名
+	 			option: {
+	 				...eleComponentConfig, // 标准 el-component-column 配置
+	 				comType: '', // 配置组件类型 input/select/...
+	 				default: '', // 默认值
+	 			}
+	 		},
+	 		...
+	 	}
+	 }
+	 */
+	schema: Object
+});
+const { schema } = toRefs(props);
+
+const emit = defineEmits(['load', 'search', 'reset']);
+
+const searchComList = ref([]);
+const getValue = () => {
+	let dtoObj = {};
+	searchComList.value.forEach(component => {
+		dtoObj = {
+			...dtoObj,
+			...component?.getValue()
+		}
+	})
+	
+	return dtoObj;
+}
+
+let childComLoadedCount = 0;
+const handleChildLoaded = () => {
+	childComLoadedCount++;
+	if(childComLoadedCount >= Object.keys(schema?.value?.properties).length) {
+		emit('load', getValue());
+	}
+}
+
+const search = () => {
+	emit('search', getValue());
+}
+
+const reset = () => {
+	searchComList.value.forEach(component => component?.reset());
+	emit('reset');
+}
+
+defineExpose({
+	reset,
+	getValue
+})
+
+
+</script>
+
+<style lang="less">
+	.schema-search-bar {
+		min-width: 500px;
+		
+		.select {
+			width: 177px;
+		}
+		
+		.dynamic-select {
+			width: 177px;
+		}
+		
+		.search-btn {
+			width: 100px;
+		}
+		
+		.reset-btn {
+			width: 100px;
+		}
+	}
+</style>

package/app/pages/widgets/schema-search-bar/search-item-config.js

@@ -0,0 +1,27 @@
+import input from './complex-view/input/input';
+import select from './complex-view/select/select';
+import dynamicSelect from './complex-view/dynamic-select/dynamic-select';
+import dateRange from './complex-view/date-range/date-range';
+
+// 业务扩展 search-item 配置
+import BusinessSearchItemConfig from '$businessSearchItemConfig';
+
+const SearchItemConfig = {
+	input: {
+		component: input
+	},
+	select: {
+		component: select
+	},
+	dynamicSelect: {
+		component: dynamicSelect
+	},
+	dateRange: {
+		component: dateRange
+	}
+}
+
+export default {
+	...SearchItemConfig,
+	...BusinessSearchItemConfig
+}