@jiangliffey/elpis 1.0.0

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

@@ -0,0 +1,135 @@
+<template>
+    <el-row v-if="schema && schema.properties" class="schema-form">
+        <template v-for="(itemSchema, key) in schema.properties" :key="key">
+            <component
+                v-show="itemSchema.option.visible !== false"
+                ref="formComList"
+                :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: '', // 字段中文名
+                    // 字段在 search-bar 中的相关配置
+                    option: {
+                        ...elComponentConfig, // 标准 el-table-column 配置
+                        comType: '', // 配置组件类型 input/select/...
+                        required: false, // 表单项是否必填 默认false
+                        visible: true, // 默认为 true
+                        disable: false, // 是否禁用，默认false
+                        default: '', // 默认值
+                        // comType === 'select' 时生效
+                        enumList: [], // 枚举列表
+                    },
+                },
+                ...
+            },
+        }
+     */
+    schema: Object,
+    /**
+     * 表单数据
+     */
+    model: Object,
+});
+
+const { schema, model } = toRefs(props);
+
+const formComList = ref([]); // 存储表单项组件实例的列表
+
+// 表单校验
+const validate = () => {
+    return formComList.value.every(component => {
+        if (component && component.validate) {
+            return component.validate();
+        }
+        return true; // 如果组件没有 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: white;
+            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/moment';
+
+// schemaKey: 当前搜索字段的 key，schema 是该字段经过 buildDtoSchema 处理后的配置
+const { schemaKey, schema } = defineProps({
+    schemaKey: String,
+    schema: Object
+})
+
+const emit = defineEmits(['loaded']);
+
+const dtoValue = ref();
+
+// 有值时返回 { 字段key: 输入值 }，无值时不参与搜索。
+const getValue = () => {
+    return dtoValue.value?.length === 2 ? {
+        [`${schemaKey}_start`]: moment(dtoValue.value[0]).format('YYYY-MM-DD'),
+        [`${schemaKey}_end`]: moment(dtoValue.value[1]).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,67 @@
+<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-select>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import $curl from '$elpisCommon/curl.js'
+
+// schemaKey: 当前搜索字段的 key，schema 是该字段经过 buildDtoSchema 处理后的配置
+const { schemaKey, schema } = defineProps({
+    schemaKey: String,
+    schema: Object
+})
+
+const emit = defineEmits(['loaded']);
+
+const dtoValue = ref();
+
+// 有值时返回 { 字段key: 输入值 }，无值时不参与搜索。
+const getValue = () => {
+    return dtoValue.value !== undefined ? {
+        [schemaKey]: dtoValue.value
+    } : {}
+}
+
+const reset = () => {
+    dtoValue.value = schema?.option?.default ?? enumList.value[0]?.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);
+    }
+}
+
+
+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';
+
+// schemaKey: 当前搜索字段的 key，schema 是该字段经过 buildDtoSchema 处理后的配置
+const { schemaKey, schema } = defineProps({
+    schemaKey: String,
+    schema: Object
+})
+
+const emit = defineEmits(['loaded']);
+
+const dtoValue = ref();
+
+// 有值时返回 { 字段key: 输入值 }，无值时不参与搜索。
+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-select>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+// schemaKey: 当前搜索字段的 key，schema 是该字段经过 buildDtoSchema 处理后的配置
+const { schemaKey, schema } = defineProps({
+    schemaKey: String,
+    schema: Object
+})
+
+const emit = defineEmits(['loaded']);
+
+const dtoValue = ref();
+
+// 有值时返回 { 字段key: 输入值 }，无值时不参与搜索。
+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,129 @@
+<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: '', // 字段中文名
+                    // 字段在 search-bar 中的相关配置
+                    option: {
+                        ...elComponentConfig, // 标准 el-table-column 配置
+                        comType: '', // 配置组件类型 input/select/...
+                        default: '', // 默认值
+                    },
+                },
+                ...
+            },
+        }
+     */
+    schema: Object
+})
+
+const { schema } = toRefs(props);
+
+const emit = defineEmits(['load', 'search', 'reset']);
+
+const searchComList = ref([]);
+
+const getValue = () => {
+    let dtoObj = {};
+    // 遍历所有子组件，调用其 getValue 方法，获取输入值，组合成最终的 dtoObj
+    searchComList.value.forEach(component => {
+        dtoObj = {
+            ...dtoObj,
+            ...component?.getValue()
+        }
+    });
+
+    return dtoObj;
+}
+
+let childComLoadedCount = 0;
+const handleChildLoaded = () => {
+    childComLoadedCount++;
+    // 当所有子组件都加载完成后，触发 load 事件，通知父组件
+    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', getValue());
+}
+
+defineExpose({ reset, getValue });
+</script>
+
+<style lang="less">
+.schema-search-bar {
+    min-width: 500px;
+
+    .select {
+        width: 180px;
+    }
+
+    .dynamic-select {
+        width: 180px;
+    }
+
+    .date-range {}
+
+    .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.vue";
+import select from "./complex-view/select/select.vue";
+import dynamicSelect from "./complex-view/dynamic-select/dynamic-select.vue";
+import dateRange from "./complex-view/date-range/date-range.vue";
+
+// 业务拓展 search-item 配置
+import BusinessSearchItemConfig from '$businessSearchItemConfig';
+
+const SearchItemConfig = {
+    input: {
+        component: input
+    },
+    select: {
+        component: select
+    },
+    dynamicSelect: {
+        component: dynamicSelect
+    },
+    dateRange: {
+        component: dateRange
+    }
+}
+
+export default {
+    ...SearchItemConfig,
+    ...BusinessSearchItemConfig
+};