@james-zhang/elpis 1.0.0

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

@@ -0,0 +1,164 @@
+<template>
+  <!-- 整行容器：标签 + 输入框左右布局 -->
+  <el-row
+    type="flex"
+    align="middle"
+    class="form-item"
+  >
+    <!-- 左侧标签区域 -->
+    <el-row
+      class="item-label"
+      justify="end"
+    >
+      <!-- 必填红色星号：schema里required为true才展示 -->
+      <el-row
+        v-if="schema.option?.required"
+        type="flex"
+        class="required"
+      >
+        *
+      </el-row>
+      <!-- 字段中文名称 -->
+      {{ schema.label }}
+    </el-row>
+
+    <!-- 右侧输入框区域 -->
+    <el-row class="item-value">
+      <el-input-number
+        v-bind="schema.option"
+        v-model="dtoValue"
+        :controls="false"
+        :placeholder="placeholder"
+        class="component"
+        :class="validTips?'valid-border':''"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+      <div
+        v-if="validTips"
+        class="valid-tips"
+      >
+        {{ validTips }}
+      </div>
+    </el-row>
+  </el-row>
+</template>
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from 'vue'
+const ajv = inject('ajv')
+
+// 接收父组件传入参数
+const props = defineProps({
+  schemaKey: String,   // 当前字段key（属性名，如productName）
+  schema: Object,      // 当前字段完整schema配置
+  model: Object,       // 当前字段的表单值
+})
+
+// 解构props，toRefs保证响应式不丢失
+const schemaKey = props.schemaKey
+const { schema, model } = toRefs(props)
+
+const name=ref('inputNumber')
+const dtoValue=ref()
+const placeholder=ref('')
+const validTips=ref(null) // 校验错误信息
+
+const initData=()=>{
+  dtoValue.value=model.value ?? schema.value.option?.default
+  validTips.value=null
+
+  const {
+    minimum,
+    maximum,
+  }=schema.value
+
+  const ruleList=[]
+  if(schema.value.option?.placeholder){
+    ruleList.push(schema.value.option.placeholder)
+  }
+  if(minimum !== undefined){
+    ruleList.push(`最小值应为 ${minimum}`)
+  }
+  if(maximum !== undefined){
+    ruleList.push(`最大值应为 ${maximum}`)
+  }
+  placeholder.value=ruleList.join('|')
+}
+onMounted(()=>{
+  initData()
+})
+watch([schema,model],()=>{
+  initData()
+})
+// 对外暴露：表单校验方法
+const validate = () => {
+  // 清空上一轮校验错误提示
+  validTips.value = null;
+  // 解构取出schema里的type字段
+  const { type } = schema.value;
+
+  // 1、必填项校验
+  if (schema.value.option?.required && !dtoValue.value) {
+    validTips.value = '不能为空';
+    return false; // 校验失败，终止后续逻辑
+  }
+
+  // 2、输入有内容时，使用AJV库校验JSON Schema规则
+  if (dtoValue.value !== null && dtoValue.value !== undefined) {
+    // 编译当前字段的schema校验规则，生成校验函数
+    const validate = ajv.compile(schema.value);
+    // 执行校验：传入当前输入值
+    const valid = validate(dtoValue.value);
+
+    // 校验不通过 并且 存在错误详情
+    if (!valid && validate.errors && validate.errors[0]) {
+      // 取出第一条错误的关键字、参数
+      const { keyword, params } = validate.errors[0];
+
+      // 根据不同错误类型，自定义中文提示文案（把AJV默认英文提示转为中文）
+      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 onFocus = () => {
+  validTips.value = null;
+}
+// 失去焦点时，校验当前输入值
+const onBlur = () => {
+  validate()
+}
+// 对外暴露：获取当前组件表单值
+const getValue = () => {
+  return dtoValue.value !== undefined ? {
+    [schemaKey]:dtoValue.value
+  }:{}
+}
+
+// 暴露方法给上层表单组件调用（全局表单提交校验、取值）
+defineExpose({
+  name,
+  validate,
+  getValue
+})
+</script>
+
+<style lang="less">
+.el-input-number .el-input__inner {
+  text-align: left !important;
+}
+</style>

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

@@ -0,0 +1,138 @@
+<template>
+  <!-- 整行容器：标签 + 输入框左右布局 -->
+  <el-row
+    type="flex"
+    align="middle"
+    class="form-item"
+  >
+    <!-- 左侧标签区域 -->
+    <el-row
+      class="item-label"
+      justify="end"
+    >
+      <!-- 必填红色星号：schema里required为true才展示 -->
+      <el-row
+        v-if="schema.option?.required"
+        type="flex"
+        class="required"
+      >
+        *
+      </el-row>
+      <!-- 字段中文名称 -->
+      {{ schema.label }}
+    </el-row>
+
+    <!-- 右侧输入框区域 -->
+    <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-select>
+      <div
+        v-if="validTips"
+        class="valid-tips"
+      >
+        {{ validTips }}
+      </div>
+    </el-row>
+  </el-row>
+</template>
+<script setup>
+import { ref, toRefs, watch, inject, onMounted } from 'vue'
+const ajv = inject('ajv')
+
+// 接收父组件传入参数
+const props = defineProps({
+  schemaKey: String,   // 当前字段key（属性名，如productName）
+  schema: Object,      // 当前字段完整schema配置
+  model: Object,       // 当前字段的表单值
+})
+
+// 解构props，toRefs保证响应式不丢失
+const schemaKey = props.schemaKey
+const { schema, model } = toRefs(props)
+
+const name=ref('select')
+const dtoValue=ref()
+const validTips=ref(null) // 校验错误信息
+
+const initData=()=>{
+  dtoValue.value=model.value ?? schema.value.option?.default
+  validTips.value=null
+}
+onMounted(()=>{
+  initData()
+})
+watch([schema,model],()=>{
+  initData()
+})
+// 对外暴露：表单校验方法
+const validate = () => {
+  // 清空上一轮校验错误提示
+  validTips.value = null;
+
+  // 1、必填项校验
+  if (schema.value.option?.required && !dtoValue.value) {
+    validTips.value = '不能为空';
+    return false; // 校验失败，终止后续逻辑
+  }
+
+  // 2、输入有内容时，使用AJV库校验JSON Schema规则
+  if (dtoValue.value) {
+      let dtoEnum=[]
+      if(schema.value.option?.enumList){
+        dtoEnum=schema.value.option?.enumList.map(item=>item.value)
+      }
+      // 构造校验 schema：复用原字段 schema，并把 enum 替换为选项 value 列表
+      const validateSchema = { ...schema.value, enum: dtoEnum }
+      const validate=ajv.compile(validateSchema)
+      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])
+        }
+        return false; // 格式校验失败
+      }
+  }
+
+  // 所有校验全部通过
+  return true;
+}
+
+// 对外暴露：获取当前组件表单值
+const getValue = () => {
+  return dtoValue.value !== undefined ? {
+    [schemaKey]:dtoValue.value
+  }:{}
+}
+
+const onChange=()=>{
+  validate()
+}
+
+// 暴露方法给上层表单组件调用（全局表单提交校验、取值）
+defineExpose({
+  name,
+  validate,
+  getValue
+})
+</script>
+
+<style lang="less">
+.form-item{
+  margin-bottom: 10px;
+}
+</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 '$businessSchemaFormItemConfig'
+
+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,154 @@
+<template>
+  <el-row
+    v-if="schema && schema.properties"
+    class="schema-form"
+  >
+    <!-- 外层循环所有表单字段 -->
+    <div
+      v-for="(itemSchema, key) in schema.properties"
+      v-show="itemSchema.option?.visible !== false"
+      :key="key"
+      class="form-item-wrapper"
+    >
+      <component
+        :is="FormItemConfig[itemSchema.option?.comType]?.component"
+        :ref="(el) => setFormComRef(el, key)"
+        :schema="itemSchema"
+        :schema-key="key"
+        :model="getFieldModel(key)"
+      />
+    </div>
+  </el-row>
+</template>
+
+<script setup>
+import {toRefs,provide,ref,unref,computed} from 'vue'
+import FormItemConfig from './form-item-config.js'
+
+const Ajv = require('ajv')
+const ajv = new Ajv()
+provide('ajv',ajv)
+const formComList=ref({})
+const setFormComRef=(el,key)=>{
+  if(el){
+    formComList.value[key]=el
+  }
+}
+
+const props=defineProps({
+  /**
+   * schema:{
+          //板块数据结构
+          type:'object',
+          properties:{
+            key:{
+              ...schema, //标准schema配置
+              type:'', //字段类型 
+              label:'', //字段的中文名
+              option:{
+                ...elComponentConfig,//标准el-component-column配置
+                comType:'',// 配置组件类型 input/select...
+                required:false, //表单项是否必填
+                visible:true, //是否在createForm中显示
+                disabled:false, //是否禁用createForm中的该字段
+                default:'', //默认值
+  
+                //comType===select时，enumList为下拉选项列表
+                enumList:[], //下拉可选项
+                //comType===dynamicSelect时，enumList为动态下 拉选项列表
+                api:'' //动态下拉可选项
+              }
+            }
+          }
+   */
+  schema:Object,
+  /**
+   * 表单数据
+   */
+  model:Object
+})
+const {schema}=toRefs(props)
+
+// 把 props.model 统一解包为普通对象，避免模板 prop 表达式里直接 model[key] 丢失响应追踪
+const fieldModel = computed(() => unref(props.model) ?? {})
+const getFieldModel = (key) => fieldModel.value[key]
+
+//表单校验
+const validate=()=>{
+  return Object.values(formComList.value).every(component=>component && typeof component.validate==='function' && component.validate())
+}
+//获取表单值
+const getValue=()=>{
+  return Object.values(formComList.value).reduce((dtoObj,component)=>{
+    if(!component || typeof component.getValue!=='function'){
+      return dtoObj
+    }
+    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: #333333;
+      word-break: break-all;
+
+      // 必填红色星号 *
+      .required {
+        position: relative;
+        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;
+        }
+        .el-select__wrapper {
+          border: 1px solid #F93F3F;
+          box-shadow: 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,49 @@
+import { onMounted } from 'vue';
+<template>
+  <el-date-picker
+    v-model="dtoValue"
+    v-bind="schema.option"
+    type="daterange"
+    :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(['load'])
+
+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[1]).format('YYYY-MM-DD')}
+  :{}
+}
+const reset=()=>{
+  dtoValue.value=[]
+}
+
+onMounted(()=>{
+  reset()
+  emit('load')
+})
+
+defineExpose({
+  getValue,
+  reset,
+})
+</script>
+
+<style>
+
+</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-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(['load'])
+
+const dtoValue=ref()
+const getValue=()=>{
+  return dtoValue.value!==undefined && dtoValue.value!==''?
+  {[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(()=>{
+  fetchEnumList()
+  reset()
+  emit('load')
+})
+
+defineExpose({
+  getValue,
+  reset,
+})
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,44 @@
+import { onMounted } from 'vue';
+<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(['load'])
+
+const dtoValue=ref()
+const getValue=()=>{
+  return dtoValue.value!==undefined && dtoValue.value!==''?
+  {[schemaKey]:dtoValue.value}:
+  {}
+}
+const reset=()=>{
+  dtoValue.value=schema?.option?.default||''
+}
+
+onMounted(()=>{
+  reset()
+  emit('load')
+})
+
+defineExpose({
+  getValue,
+  reset,
+})
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,50 @@
+import { onMounted } from 'vue';
+<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'
+
+const {schemaKey,schema}=defineProps({
+  schemaKey:String,
+  schema:Object,
+})
+
+const emit=defineEmits(['load'])
+
+const dtoValue=ref()
+const getValue=()=>{
+  return dtoValue.value!==undefined && dtoValue.value!==''?
+  {[schemaKey]:dtoValue.value}:
+  {}
+}
+const reset=()=>{
+  dtoValue.value=schema?.option?.default ?? schema?.option?.enumList?.[0]?.value 
+}
+
+onMounted(()=>{
+  reset()
+  emit('load')
+})
+
+defineExpose({
+  getValue,
+  reset,
+})
+</script>
+
+<style>
+
+</style>