@lixianwei/elpis 1.0.0

package/app/pages/store/project.js

@@ -0,0 +1,16 @@
+import {defineStore} from 'pinia'
+import {ref} from 'vue'
+export const userProjectStore = defineStore('project',()=>{
+    // 项目列表
+    const projectList =ref([])
+
+    // 设置项目列表
+    const setProjectList= function (list){
+        projectList.value = list
+    }
+
+    return {
+        projectList,
+        setProjectList
+    }
+})

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

@@ -0,0 +1,103 @@
+<template>
+  <el-container class="header-container">
+    <el-header class="header">
+      <el-row type="flex" align="middle" class="header-row">
+        <!--      右上方title-->
+        <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/avatar.png" alt="" 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" />
+    </el-main>
+  </el-container>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+defineProps({
+  title: String,
+})
+
+const userName = ref('管理员')
+
+const handleUserCommand =(e)=>{
+  console.log(e)
+}
+</script>
+
+
+<style scoped lang="less">
+.header-container{
+  height: 100%;
+  min-width: 1000px;
+  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;
+        min-width: 180px;
+        .avatar{
+          margin-right: 10px;
+          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,142 @@
+
+<template>
+  <el-row
+    type="flex"
+    align="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
+          v-bind="schema.option"
+          class="component"
+          v-model="dtoValue"
+          :placeholder="placeholder"
+          :class="validTips?'valid-border':''"
+          @blur="onBlur"
+          @focus="onFocus"
+      ></el-input>
+    </el-row>
+<!--    错误信息-->
+    <el-row  v-if="validTips" class="valid-tips">
+      {{validTips}}
+    </el-row>
+  </el-row>
+</template>
+
+<script setup>
+import {ref, watch, onMounted, toRefs, inject} from 'vue'
+const ajv = inject('ajv')
+
+const props = defineProps({
+  schema:Object,
+  schemaKey:String,
+  model:[String,Number],
+})
+
+const { schema,schemaKey } = props;
+const { model } = toRefs(props)
+
+const name = ref('input')
+const placeholder = ref('')
+const dtoValue = ref(undefined)
+const validTips = ref(null)
+const initData = () => {
+  dtoValue.value = model.value ?? schema.option?.default;
+  validTips.value = null
+
+  const {minLength, maxLength,pattern} = schema;
+  const ruleList = [];
+  if(schema.options?.placeholder) {
+    ruleList.push(schema.options?.placeholder)
+  }
+  if(minLength) {
+    ruleList.push(`最小长度：${minLength}`)
+  }
+  if(maxLength) {
+    ruleList.push(`最大长度:${maxLength}`)
+  }
+  if(pattern) {
+    ruleList.push(`格式：${pattern}`)
+  }
+  placeholder.value = ruleList.join('|')
+}
+onMounted(()=>{
+  initData()
+})
+
+watch([model,schema],()=>{
+  initData()
+},{deep:true})
+
+// 获取焦点时校验置空
+const onFocus = ()=>{
+  validTips.value = null
+}
+// s失去焦点时校验
+const onBlur = ()=>{
+  validate()
+}
+
+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{
+        console.log(validate.errors[0])
+        validTips.value =  `不符合要求`
+      }
+      return false
+    }
+  }
+  return true
+}
+const getValue =()=>{
+  return dtoValue.value !==undefined ?{
+    [schemaKey]:dtoValue.value
+  }:{}
+}
+
+
+defineExpose({
+  validate,
+  getValue,
+  name
+})
+</script>
+
+<style scoped lang="less">
+
+</style>

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

@@ -0,0 +1,143 @@
+
+<template>
+  <el-row
+    type="flex"
+    align="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
+        v-bind="schema.option"
+        v-model="dtoValue"
+        :controls="false"
+        class="component"
+        :placeholder="placeholder"
+        :class="validTips?'valid-border':''"
+        @blur="onBlur"
+        @focus="onFocus"
+      />
+    </el-row>
+    <!--    错误信息-->
+    <el-row
+      v-if="validTips"
+      class="valid-tips"
+    >
+      {{ validTips }}
+    </el-row>
+  </el-row>
+</template>
+
+<script setup>
+import {ref, watch, onMounted, toRefs, inject} from 'vue'
+const ajv = inject('ajv')
+
+const props = defineProps({
+  schema:Object,
+  schemaKey:String,
+  model:[String,Number],
+})
+
+const { schema,schemaKey } = props;
+const { model } = toRefs(props)
+const name = ref('inputNumber')
+const placeholder = ref('')
+const dtoValue = ref(undefined)
+const validTips = ref(null)
+
+const initData = () => {
+  dtoValue.value = model.value ?? schema.option?.default;
+  validTips.value = null
+
+  const {minimum,maximum} = schema;
+  const ruleList = [];
+  if(schema.options?.placeholder) {
+    ruleList.push(schema.options?.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 onFocus = ()=>{
+  validTips.value = null
+}
+// s失去焦点时校验
+const onBlur = ()=>{
+  validate()
+}
+
+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{
+        console.log(validate.errors[0])
+        validTips.value =  `不符合要求`
+      }
+      return false
+    }
+  }
+  return true
+}
+const getValue =()=>{
+  return dtoValue.value !==undefined ?{
+    [schemaKey]:dtoValue.value
+  }:{}
+}
+
+
+defineExpose({
+  validate,
+  getValue,
+  name
+})
+</script>
+
+<style scoped lang="less">
+: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,130 @@
+
+<template>
+  <el-row
+      type="flex"
+      align="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, watch, onMounted, toRefs, inject} from 'vue'
+const ajv = inject('ajv')
+
+const props = defineProps({
+  schema:Object,
+  schemaKey:String,
+  model:[String,Number],
+})
+
+const { schema,schemaKey } = props;
+const { model } = toRefs(props)
+const name = ref('select')
+const dtoValue = ref(undefined)
+const validTips = ref(null)
+const initData = () => {
+  dtoValue.value = model.value ?? schema.option?.default;
+  validTips.value = null
+
+}
+onMounted(()=>{
+  initData()
+})
+
+watch([model,schema],()=>{
+  initData()
+},{deep:true})
+
+const onChange =()=>{
+  validate()
+}
+
+
+const validate = ()=>{
+  validTips.value = null
+  // const {type} = schema;
+  // 校验是否必填
+  if(schema.option?.required && !dtoValue.value){
+    validTips.value = '不能为空'
+    return false
+  }
+  // 校验schema
+  if(dtoValue.value){
+    console.log('处理')
+
+    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.errors &&validate.errors[0]){
+      if(validate.errors[0].keyword === 'enum'){
+        validTips.value = '取值超出枚举范围'
+      }else{
+        console.log(validate.errors[0])
+        validTips.value = '不符合要求'
+      }
+      return false
+    }
+  }
+  return true
+}
+const getValue =()=>{
+  return dtoValue.value !==undefined ?{
+    [schemaKey]:dtoValue.value
+  }:{}
+}
+
+
+defineExpose({
+  validate,
+  getValue,
+  name
+})
+</script>
+
+<style scoped lang="less">
+: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 {
+    ...FormItemConfig,
+    ...BusinessFormItemConfig
+}

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

@@ -0,0 +1,132 @@
+
+<template>
+  <el-row v-if="schema&&schema.properties" class="schema-form">
+    <template v-for="(itemSchema,key) in schema.properties">
+      <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,onMounted} from "vue"
+  import FormItemConfig  from "./form-item-config";
+
+  const Ajv = require('ajv')
+  const ajv = new Ajv()
+  provide('ajv',ajv)
+
+  const props = defineProps({
+    /*
+ * {
+ *   type:'object',
+     properties: {
+       key:{
+            ...schema,//标准schema 配置
+             type:'',//字段类型
+             label:'',//字段的中文名
+              // 字段在search-bar 中的相关配置
+              option:{
+                 ...eleComponentConfig,//标准 el-component 配置
+                 comType:'',//控件类型 input/select/input-number
+                 required:false,//表单是否必填
+                 visible:true,//是否展示 （true/false）默认为true
+                 disabled:false,//是否禁用 （true/false）默认false                default:'',//默认值
+                 // comType === select
+                 enumList:[]
+              }
+        },
+     }
+ * }
+ * */
+    schema:Object,
+    /*
+    * 表单数据
+    * */
+    model:Object
+  })
+
+
+
+  const {schema,model} = toRefs(props)
+
+  onMounted(()=>{
+    console.log(schema.value)
+    console.log('1111',model.value)
+  })
+
+
+  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: #fff;
+      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 dashed #f93f3f;
+          box-shadow:  0 0 0 0 ;
+        }
+        .el-select__wrapper{
+          border: 1px dashed #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>