@misstalor17/elpis 1.0.0

package/app/pages/widgets/header-container/header-container.vue

@@ -0,0 +1,105 @@
+<template>
+    <el-container class="header-container">
+        <el-header class="header">
+            <!-- 左上方title -->
+            <el-row type="flex" align="middle" class="header-row">
+                <el-row type="flex" align="middle" class="title-panel">
+                    <img src="./asserts/logo.png" class="logo" />
+                    <el-row class="text">
+                        {{ title }}
+                    </el-row>
+                </el-row>
+                <!-- 插槽：菜单区域 -->
+                <slot name="menu-content"></slot>
+                <el-row type="flex" align="middle" justify="end" class="setting-panel">
+                    <!-- 插槽：设置区域 -->
+                    <slot name="setting-content"></slot>
+                    <img src="./asserts/user.png" class="avatar" />
+                    <el-dropdown @command="handleUserCommand">
+                        <span class="username">
+                            {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
+                        </span>
+                        <template #dropdown>
+                            <el-dropdown-item command="logout">推出登陆</el-dropdown-item>
+                        </template>
+                    </el-dropdown>
+                </el-row>
+            </el-row>
+        </el-header>
+        <el-main class="main-container">
+            <!-- 插槽：核心内容填充区域 -->
+            <slot name="main-content"></slot>
+        </el-main>
+    </el-container>
+</template>
+<script setup>
+import { ref } from 'vue'
+defineProps({
+    title: String
+})
+
+const userName = ref('Talor')
+const handleUserCommand = function () { }
+</script>
+<style lang="less" scoped>
+.header-container {
+    height: 100%;
+    min-width: 100px;
+    overflow: hidden;
+
+    .header {
+        max-height: 120px;
+        border-bottom: 1px solid #E8E8E8;
+
+        .header-row {
+            height: 60px;
+            padding: 0 20px;
+
+            .title-panel {
+                width: 180px;
+                min-width: 180px;
+
+                .logo {
+                    margin-right: 10px;
+                    width: 25px;
+                    height: 25px;
+                    border-radius: 50%;
+                }
+
+                .text {
+                    font-size: 15px;
+                    font-weight: 500;
+                }
+            }
+
+            .setting-panel {
+                margin-left: auto !important;
+                min-width: 180px;
+
+                .avatar {
+                    margin-right: 12px;
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 50%;
+                }
+
+                .username {
+                    font-size: 16px;
+                    font-weight: 500;
+                    cursor: pointer;
+                    height: 60px;
+                    line-height: 60px;
+                    outline: none;
+                }
+            }
+        }
+
+    }
+
+    .main-container {}
+
+    :deep(.el-header) {
+        padding: 0;
+    }
+}
+</style>

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

@@ -0,0 +1,120 @@
+<template>
+    <el-row type="flex" algin="middle" class="form-item">
+        <!--label-->
+        <el-row class="item-label" justify="end">
+            <el-row v-if="schema.option?.required" type="flex" class="required">*</el-row>
+            {{ schema.label }}
+        </el-row>
+        <!--value-->
+        <el-row class="item-value">
+            <el-input :placeholder="placeholder" v-model="dtoValue" v-bind="schema.option" class="component"
+                :class="validTips ? 'valid-border' : ''" @focus="onFocus" @blur="onBlur"></el-input>
+        </el-row>
+        <!--错误信息-->
+        <el-row v-if="validTips" class="valid-tips">{{ validTips }}</el-row>
+    </el-row>
+</template>
+    
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from 'vue'
+
+const ajv = inject('ajv')
+
+const props = defineProps({
+    schemaKey: String,
+    schema: Object,
+    model: String
+})
+
+const { schemaKey, schema } = props
+const { model } = toRefs(props)
+const name = ref('input')
+const dtoValue = ref()
+const validTips = ref('')
+const placeholder = ref(null)
+const initData = () => {
+    dtoValue.value = model.value ?? schema.option?.default
+    validTips.value = null
+
+    const { maxLength, minLength, pattern } = schema
+
+    const ruleList = []
+    if (schema.option?.placeholder) {
+        ruleList.push(schema.option.placeholder)
+    }
+
+    if (maxLength) {
+        ruleList.push(`最大长度：${maxLength}`)
+    }
+    if (minLength) {
+        ruleList.push(`最小长度：${minLength}`)
+    }
+    if (pattern) {
+        ruleList.push(`格式：${pattern}`)
+    }
+
+    placeholder.value = ruleList.join('|')
+}
+
+onMounted(() => {
+    initData()
+})
+
+watch([model, schema], () => {
+    initData()
+}, { deep: true })
+
+
+const validate = () => {
+    validTips.value = null
+    const { type } = schema
+
+    //校验是否必填
+    if (schema.option?.required && !dtoValue.value) {
+        validTips.value = '不能为空'
+        return false;
+    }
+
+    //校验schema
+    if (dtoValue.value) {
+        const validate = ajv.compile(schema)
+        const valid = validate(dtoValue.value)
+        if (!valid && validate.errors && validate.errors[0]) {
+            const { keyword, params } = validate.errors[0]
+            if (keyword === 'type') {
+                validTips.value = `类型必须为${type}`
+            } else if (keyword === 'maxLength') {
+                validTips.value = `最大长度应为${params.limit}`
+            } else if (keyword === 'minLength') {
+                validTips.value = `最小长度应为${params.limit}`
+            } else if (keyword === 'pattern') {
+                validTips.value = '格式不正确'
+            } else {
+                validTips.value = '不符合要求'
+            }
+            return false;
+        }
+    }
+    return true;
+}
+const getValue = () => {
+    return dtoValue.value !== undefined ? {
+        [schemaKey]: dtoValue.value
+    } : {}
+}
+const onFocus = () => {
+    validTips.value = null
+}
+
+const onBlur = () => {
+    validate()
+}
+defineExpose({
+    validate,
+    getValue,
+    name
+})
+</script>
+    
+<style lang='less' scoped></style>
+    

package/app/pages/widgets/schema-form/complex-view/input-number/input-number.vue

@@ -0,0 +1,121 @@
+<template>
+    <el-row type="flex" algin="middle" class="form-item">
+        <!--label-->
+        <el-row class="item-label" justify="end">
+            <el-row v-if="schema.option?.required" type="flex" class="required">*</el-row>
+            {{ schema.label }}
+        </el-row>
+        <!--value-->
+        <el-row class="item-value">
+            <el-input-number :controls="false" :placeholder="placeholder" v-model="dtoValue" v-bind="schema.option"
+                class="component" :class="validTips ? 'valid-border' : ''" @focus="onFocus"
+                @blur="onBlur"></el-input-number>
+        </el-row>
+        <!--错误信息-->
+        <el-row v-if="validTips" class="valid-tips">{{ validTips }}</el-row>
+    </el-row>
+</template>
+    
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from 'vue'
+
+const ajv = inject('ajv')
+
+const props = defineProps({
+    schemaKey: String,
+    schema: Object,
+    model: Number
+})
+
+const { schemaKey, schema } = props
+const { model } = toRefs(props)
+const name = ref('inputNumber')
+const dtoValue = ref()
+const validTips = ref('')
+const placeholder = ref(null)
+const initData = () => {
+    dtoValue.value = model.value ?? schema.option?.default
+    validTips.value = null
+
+    const { minimum, maximum } = schema
+
+    const ruleList = []
+    if (schema.option?.placeholder) {
+        ruleList.push(schema.option.placeholder)
+    }
+
+    if (minimum !== undefined) {
+        ruleList.push(`最小值：${minimum}`)
+    }
+    if (maximum !== undefined) {
+        ruleList.push(`最大值：${maximum}`)
+    }
+
+    placeholder.value = ruleList.join('|')
+}
+
+onMounted(() => {
+    initData()
+})
+
+watch([model, schema], () => {
+    initData()
+}, { deep: true })
+
+
+const validate = () => {
+    validTips.value = null
+    const { type } = schema
+
+    //校验是否必填
+    if (schema.option?.required && !dtoValue.value) {
+        validTips.value = '不能为空'
+        return false;
+    }
+
+    //校验schema
+    if (dtoValue.value) {
+        const validate = ajv.compile(schema)
+        const valid = validate(dtoValue.value)
+        if (!valid && validate.errors && validate.errors[0]) {
+            const { keyword, params } = validate.errors[0]
+            if (keyword === 'type') {
+                validTips.value = `类型必须为${type}`
+            } else if (keyword === 'minimum') {
+                validTips.value = `最小值为${params.limit}`
+            } else if (keyword === 'maximum') {
+                validTips.value = `最大值为${params.limit}`
+            }
+            else {
+                validTips.value = '不符合要求'
+            }
+            return false;
+        }
+    }
+    return true;
+}
+const getValue = () => {
+    return dtoValue.value !== undefined ? {
+        [schemaKey]: dtoValue.value
+    } : {}
+}
+const onFocus = () => {
+    validTips.value = null
+}
+
+const onBlur = () => {
+    validate()
+}
+defineExpose({
+    validate,
+    getValue,
+    name
+})
+</script>
+    
+<style lang='less' scoped>
+:deep(.el-input-number .el-input__inner) {
+    text-align: left;
+}
+</style>
+    

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

@@ -0,0 +1,106 @@
+<template>
+    <el-row type="flex" algin="middle" class="form-item">
+        <!--label-->
+        <el-row class="item-label" justify="end">
+            <el-row v-if="schema.option?.required" type="flex" class="required">*</el-row>
+            {{ schema.label }}
+        </el-row>
+        <!--value-->
+        <el-row class="item-value">
+            <el-select v-model="dtoValue" v-bind="schema.option" class="component" :class="validTips ? 'valid-border' : ''"
+                @change="onChange">
+                <el-option v-for="item in schema.option?.enumList" :key="item.value" :label="item.label"
+                    :value="item.value">
+
+                </el-option>
+            </el-select>
+        </el-row>
+        <!--错误信息-->
+        <el-row v-if="validTips" class="valid-tips">{{ validTips }}</el-row>
+    </el-row>
+</template>
+    
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from 'vue'
+
+const ajv = inject('ajv')
+
+const props = defineProps({
+    schemaKey: String,
+    schema: Object,
+    model: null
+})
+
+const { schemaKey, schema } = props
+const { model } = toRefs(props)
+const name = ref('select')
+const dtoValue = ref()
+const validTips = ref('')
+const initData = () => {
+    dtoValue.value = model.value ?? schema.option?.default
+    validTips.value = null
+}
+
+onMounted(() => {
+    initData()
+})
+
+watch([model, schema], () => {
+    initData()
+}, { deep: true })
+
+
+const validate = () => {
+    validTips.value = null
+
+    //校验是否必填
+    if (schema.option?.required && !dtoValue.value) {
+        validTips.value = '不能为空'
+        return false;
+    }
+
+    //校验schema
+    if (dtoValue.value) {
+        let dtoEnum = []
+        if (schema.option?.enumList) {
+            dtoEnum = schema.option?.enumList.map(item => item.value)
+        }
+        const validate = ajv.compile({
+            schema,
+            ...{ enum: dtoEnum }
+        })
+
+        const valid = validate(dtoValue.value)
+        if (!valid && validate.erros && validate.erros[0]) {
+            if (validate.erros[0].keyword == 'enum') {
+                validTips.value('取值超过枚举范围')
+            } else {
+                validTips.value = '不符合要求'
+            }
+            return false;
+        }
+    }
+    return true;
+}
+const getValue = () => {
+    return dtoValue.value !== undefined ? {
+        [schemaKey]: dtoValue.value
+    } : {}
+}
+const onChange = () => {
+    validate()
+}
+
+defineExpose({
+    validate,
+    getValue,
+    name
+})
+</script>
+    
+<style lang='less' scoped>
+:deep(.el-input-number .el-input__inner) {
+    text-align: left;
+}
+</style>
+    

package/app/pages/widgets/schema-form/form-item-config.js

@@ -0,0 +1,20 @@
+import input from './complex-view/input/input.vue'
+import inputNumber from './complex-view/input-number/input-number.vue'
+import select from './complex-view/select/select.vue'
+
+//业务扩展 form-item 配置
+import BusinessFormItemConfig from '$businessFormItemConfig'
+
+const FormItemConfig = {
+    input:{
+        component:input
+    },
+    inputNumber:{
+        component:inputNumber
+    },
+    select:{
+        component:select
+    }
+}
+
+export default {...BusinessFormItemConfig,...FormItemConfig};

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

@@ -0,0 +1,122 @@
+<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';
+
+
+const Ajv = require('ajv')
+const ajv = new Ajv()
+
+provide('ajv', ajv)
+
+const props = defineProps({
+    /**
+     * schema 配置，结构如下：
+     *                 properties: {
+                    key: {
+                        ...schema,//标准 scheam 配置
+                        type: '',//字段类型
+                        label: '',//字段中文名
+                        option: {
+                            ...elTableColumnConfig,//标准 el-component 配置
+                            comType: '',//控件类型 input/select
+                            required:false,//表单是否必填
+                            visible: true,//是否展示
+                            disabled: 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,42 @@
+<template>
+    <el-date-picker v-model="dtoValue" v-bind="schema.option" class="date-range" type="daterange" range-separator="至"
+        :start-placeholder="schema.label + '(开始)'" :end-placeholder="schema.label + '(结束)'">
+    </el-date-picker>
+</template>
+    
+<script setup>
+import { ref, onMounted } from 'vue'
+import moment from 'moment'
+
+const { schemaKey, schema } = defineProps({
+    schemaKey: String,
+    schema: Object
+})
+
+const dtoValue = ref([])
+const emit = defineEmits(['loaded'])
+
+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 = []
+}
+
+defineExpose({
+    getValue,
+    reset
+})
+
+onMounted(() => {
+    reset();
+    emit('loaded')
+})
+</script>
+    
+<style lang='less' scoped></style>
+     

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

@@ -0,0 +1,55 @@
+<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'
+
+const { schemaKey, schema } = defineProps({
+    schemaKey: String,
+    schema: Object
+})
+
+const dtoValue = ref()
+const emit = defineEmits(['loaded'])
+
+const getValue = () => {
+    return dtoValue.value !== undefined ? {
+        [schemaKey]: dtoValue.value
+    } : {}
+}
+
+const reset = () => {
+    dtoValue.value = schema?.option?.default ?? enumList.value[0]?.value
+}
+
+const enumList = ref([])
+const fetchEnunList = 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 fetchEnunList();
+    reset();
+    emit('loaded')
+})
+
+defineExpose({
+    getValue,
+    reset
+})
+</script>
+    
+<style lang='less' scoped></style>
+