@dmqweb/elpis 1.0.0

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

@@ -0,0 +1,165 @@
+<template>
+  <el-row
+    type="flex"
+    align="top"
+    class="form-item"
+  >
+    <!-- label -->
+    <el-row
+      class="item-label"
+      justify="start"
+    >
+      <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-model="dotValue"
+        v-bind="schema.option"
+        class="component"
+        :class=" validTips ? 'valid-border' : '' "
+        :placeholder="placeholder"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+    </el-row>
+    <el-row
+      v-if="validTips"
+      class="valid-tips"
+    >
+      {{ validTips }}
+    </el-row>
+  </el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, watch, onMounted, inject} from 'vue'
+const ajv = inject('ajv')
+const props = defineProps({
+  schema: {
+    type: Object,
+    default: () => ({})
+  },
+  schemaKey: {
+    type: String,
+    default: ''
+  },
+  model: {
+    type: [String, Number, Boolean, Object],
+    default: undefined
+  },
+})
+const { schema, schemaKey} = props
+const { model } = toRefs(props)
+
+const name = ref('input')
+const dotValue = ref()
+const validTips = ref(null)
+const placeholder = ref('')
+
+// 初始化数据
+const initData = () => { 
+  // 如果有model值，使用model值，否则使用schema中定义的默认值
+  dotValue.value = model.value !== undefined ? model.value : schema.option?.default
+  validTips.value = null
+
+  const { minLength, maxLength, pattern } = schema
+
+  const ruleList = []
+  if(schema.option?.placeholder){
+    ruleList.value = schema.option.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,
+  immediate: true
+})
+
+// 获取表单值
+const getValue = () => {
+  return dotValue.value !== null ? {
+    [schemaKey]: dotValue.value
+  } : {}
+}
+
+// 表单校验
+const validate = () => {
+  validTips.value = null
+
+  const { type } = schema
+
+  if(schema.option?.required && !dotValue.value){
+    validTips.value = '请输入内容'
+    return false
+  }
+
+  // 调用ajv校验schema
+  if(dotValue.value) {
+    const validate = ajv.compile(schema)
+    const valid = validate(dotValue.value)
+    if(!valid && validate.errors && validate.errors[0]) {
+      const { keyword, params} = validate.errors[0]
+      if(keyword === 'type') {
+        validTips.value = `类型必须为${type}，请检查输入`
+      } else if(keyword === 'minLength') {
+        validTips.value = `长度不能小于${params.limit}`
+      } else if(keyword === 'maxLength') {
+        validTips.value = `长度不能大于${params.limit}`
+      } else if(keyword === 'pattern') {
+        validTips.value = `格式错误，请检查输入`
+      } else {
+        console.log(validate.errors[0])
+        validTips.value = '格式错误，请检查输入'
+      }
+      return false 
+    }
+  }
+  return true
+}
+
+// 输入框聚焦事件
+const onFocus = () => { 
+  validTips.value = null
+}
+// 输入框失焦事件
+const onBlur = () => { 
+  validate()
+}
+
+defineExpose({
+  getValue,
+  validate,
+  name
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,166 @@
+<template>
+  <el-row
+    type="flex"
+    align="top"
+    class="form-item"
+  >
+    <!-- label -->
+    <el-row
+      class="item-label"
+      justify="start"
+    >
+      <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-model="dotValue"
+        v-bind="schema.option"
+        :controls="false"
+        class="component"
+        :class=" validTips ? 'valid-border' : '' "
+        :placeholder="placeholder"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+    </el-row>
+    <el-row
+      v-if="validTips"
+      class="valid-tips"
+    >
+      {{ validTips }}
+    </el-row>
+  </el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, watch, onMounted, inject} from 'vue'
+const ajv = inject('ajv')
+const props = defineProps({
+  schema: {
+    type: Object,
+    default: () => ({})
+  },
+  schemaKey: {
+    type: String,
+    default: ''
+  },
+  model: {
+    type: [String, Number, Boolean, Object],
+    default: undefined
+  },
+})
+const { schema, schemaKey} = props
+const { model } = toRefs(props)
+
+const name = ref('inputNumber')
+const dotValue = ref()
+const validTips = ref(null)
+const placeholder = ref('')
+
+// 初始化数据
+const initData = () => { 
+  // 如果有model值，使用model值，否则使用schema中定义的默认值
+  dotValue.value = model.value !== undefined ? model.value : schema.option?.default
+  validTips.value = null
+
+  const {
+    minium,
+    maximum
+  } = schema
+
+  const ruleList = []
+  if(schema.option?.placeholder){
+    ruleList.value = schema.option.placeholder
+  }
+  if(minium !== undefined) {
+    ruleList.push(`最小值: ${minium}`)
+  }
+  if(maximum !== undefined) {
+    ruleList.push(`最大值:${maximum}`)
+  }
+
+  placeholder.value = ruleList.join('|')
+}
+
+
+onMounted(() => { 
+  initData()
+})
+watch([model, schema], () => { 
+  initData()
+},{
+  deep: true,
+  immediate: true
+})
+
+// 获取表单值
+const getValue = () => {
+  return dotValue.value !== null ? {
+    [schemaKey]: dotValue.value
+  } : {}
+}
+
+// 表单校验
+const validate = () => {
+  validTips.value = null
+
+  const { type } = schema
+
+  if(schema.option?.required && !dotValue.value){
+    validTips.value = '请输入内容'
+    return false
+  } 
+
+  // 调用ajv校验schema
+  if(dotValue.value) {
+    const validate = ajv.compile(schema)
+    const valid = validate(dotValue.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 onFocus = () => { 
+  validTips.value = null
+}
+// 输入框失焦事件
+const onBlur = () => { 
+  validate()
+}
+
+defineExpose({
+  getValue,
+  validate,
+  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,144 @@
+<template>
+  <el-row
+    type="flex"
+    align="top"
+    class="form-item"
+  >
+    <!-- label -->
+    <el-row
+      class="item-label"
+      justify="start"
+    >
+      <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="dotValue"
+        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>
+    </el-row>
+    <el-row
+      v-if="validTips"
+      class="valid-tips"
+    >
+      {{ validTips }}
+    </el-row>
+  </el-row>
+</template>
+
+<script setup>
+import { ref, toRefs, watch, onMounted, inject} from 'vue'
+const ajv = inject('ajv')
+const props = defineProps({
+  schema: {
+    type: Object,
+    default: () => ({})
+  },
+  schemaKey: {
+    type: String,
+    default: ''
+  },
+  model: {
+    type: [String, Number, Boolean, Object],
+    default: undefined
+  },
+})
+const { schema, schemaKey} = props
+const { model } = toRefs(props)
+
+const name = ref('select')
+const dotValue = ref()
+const validTips = ref(null)
+
+// 初始化数据
+const initData = () => { 
+  // 如果有model值，使用model值，否则使用schema中定义的默认值
+  dotValue.value = model.value !== undefined ? model.value : schema.option?.default
+  validTips.value = null
+}
+
+
+onMounted(() => { 
+  initData()
+})
+watch([model, schema], () => { 
+  initData()
+},{
+  deep: true,
+  immediate: true
+})
+
+// 获取表单值
+const getValue = () => {
+  return dotValue.value !== null ? {
+    [schemaKey]: dotValue.value
+  } : {}
+}
+
+// 表单校验
+const validate = () => {
+  validTips.value = null
+
+  if(schema.option?.required && !dotValue.value){
+    validTips.value = '请输入内容'
+    return false
+  } 
+
+  // 调用ajv校验schema
+  if(dotValue.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(dotValue.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 onChange = () => { 
+  validate()
+}
+
+defineExpose({
+  getValue,
+  validate,
+  name
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,24 @@
+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";
+console.log('%cdmq:::%s',`color:green;font-weight:bold;`,`businessFormItemCOnfi`,BusinessFormItemConfig);
+
+const FormItemConfig = {
+  input: {
+    component: input
+  },
+  'input-number': {
+    component: inputNumber
+  },
+  select: {
+    component: select
+  }
+}
+
+export default {
+  ...FormItemConfig,
+  ...BusinessFormItemConfig
+}

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

@@ -0,0 +1,144 @@
+<template>
+  <div
+    v-if="schema && schema.properties"
+    class="schema-form"
+  >
+    <template
+      v-for="(schemaItem, key) in schema.properties"
+    >
+      <component
+        :is="FormItemConfig[schemaItem.option?.comType].component "
+        v-show="schemaItem.option?.visible !== false"
+        ref="formComList"
+        :schema-key="key"
+        :schema="schemaItem"
+        :model="model ? model[key] : undefined "
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { toRefs, ref, provide } from 'vue';
+import FormItemConfig from './form-item.config';
+
+const Ajv = require('ajv')
+const ajv = new Ajv()
+provide('ajv', ajv)
+const props = defineProps({
+  /**
+   * schema 配置, 结构如下
+   * {
+        type: 'object',
+        properties: { // 板块属性
+          key: {
+            // 标准 schema 配置（占位）
+            type: '', // 字段类型
+            label: '', // 字段名称
+            option: { 
+              // 标准 el-component-column 配置（占位）
+              comType: '', // 控件类型 input/select....
+              visible: true, // 是否在 表单 中显示 默认true
+              disabled: false, // 是否禁用
+              required: false, // 是否必填
+              default: '', // 默认值
+
+              // 当 comType 为 select时
+              enumList: [], // 下拉框可选值
+
+            },
+          },
+          // ... 用户可扩展
+        },
+      }
+   */
+  schema: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 表单数据
+   */
+  model: {
+    type: Object,
+    default: () => ({})
+  },
+})
+
+const { schema } = toRefs(props)
+
+const formComList = ref([])
+// 获取表单值
+const getValue = () => {
+  return formComList.value.reduce((dtoObj, component) => {
+    return dtoObj = {
+      ...dtoObj,
+      ...component.getValue()
+    }
+  }, {})
+}
+// 表单校验
+const validate = () => {  
+  return formComList.value.every(item => {
+    return item.validate()
+  })
+}
+
+defineExpose({
+  getValue,
+  validate
+})  
+</script>
+
+<style lang="less">
+.schema-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  .form-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 20px;
+    min-width: 500px;
+
+    .item-label {
+      margin-right: 15px; 
+      min-width: 70px;
+      text-align: left;
+      font-size: 14px;
+      color: #606266;
+      word-break: break-all;
+
+      .required{
+        top: 2px;
+        padding-left: 4px;
+        font-size: 20px;
+        color: #f56c6c;
+      }
+    }
+    .item-value {
+      .component{
+        width: 500px;
+      }
+      .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;
+      color: #F93F3F;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,57 @@
+<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"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted} from 'vue'
+import moment from 'moment'
+
+const { schema, schemaKey} = defineProps({
+  schema: {
+    type: Object,
+    default: () => ({})
+  },
+  schemaKey: {
+    type: String,
+    default: ''
+  }
+})
+
+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[1]).format('YYYY-MM-DD'),
+  } : {}
+}
+
+const reset = () => {
+  dtoValue.value = []
+  return
+}
+
+onMounted(() => {
+  reset()
+  emit('loaded')
+})
+
+defineExpose({
+  getValue,
+  reset
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>