@siven-li/elpis 1.0.0

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

@@ -0,0 +1,127 @@
+<template>
+  <el-row
+    type="flex"
+    align="middle"
+    class="form-item"
+  >
+    <!-- label -->
+    <el-row
+      justify="end"
+      class="item-label"
+    >
+      <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="{'valid-border': validTips}"
+        @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, onMounted, watch, inject, toRefs } 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(null);
+const initData = () => {
+  validTips.value = null;
+  dtoValue.value = model.value ?? schema.option?.default;
+
+}
+
+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.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
+  } : {}
+}
+
+const onChange = () => {
+  validate();
+}
+
+defineExpose({
+  name,
+  validate,
+  getValue
+})
+</script>
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,22 @@
+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 BusinessFromItmeConfig from '$businessFromItmeConfig'
+
+const FormItemConfig = {
+  input: {
+    component: input
+  },
+  inputNumber: {
+    component: inputNumber
+  },
+  select: {
+    component: select
+  }
+};
+export default {
+  ...FormItemConfig,
+  ...BusinessFromItmeConfig
+}

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

@@ -0,0 +1,129 @@
+<!-- eslint-disable vue/no-v-for-template-key -->
+<template>
+  <el-row
+    v-if="schema && schema.properties"
+    class="schema-form"
+  >
+    <template
+      v-for="(itemSchema, key) in schema.properties"
+      :key="key"
+    >
+      <component
+        :is="FormItemConfig[itemSchema.option?.comType]?.component"
+        v-show="itemSchema.option.visible !== false"
+        ref="formComList"
+        :schema-key="key"
+        :schema="itemSchema"
+        :model="model ? model[key] : undefined"
+      />
+    </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: '', // 字段中文名
+            option: {
+              ...elFormItemConfig, // 标准 el-form-item 配置
+              comType: '', // 空间类型 input / select / input-number / ...
+              required: false, // 表单项是否必填，默认 false
+              visible: true, // 是否展示 (true/false)，默认为 true
+              disabled: false, // 是否禁用 (true/false)，默认为 false
+              default: '', // 默认值
+
+              // comType === 'select'时生效
+              enumList: [], // 下拉选项列表
+            },
+          },
+          ...
+        }
+      }
+   */
+  schema: Object,
+  /**
+  * 表单数据
+  */
+  model: Object
+});
+const { schema } = toRefs(props);
+
+const formComList = ref([]);
+
+// 表单校验
+const validate = () => {
+  return formComList.value.every(item => item.validate());
+}
+// 获取表单值
+const getValue = () => {
+  return formComList.value.reduce((dtoObj, item) => {
+    return {
+      ...dtoObj,
+      ...item.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-slect__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,49 @@
+<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 { schemaKey, schema } = defineProps({
+  schemaKey: String,
+  schema: Object
+})
+
+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 = [];
+}
+
+onMounted(async () => {
+  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,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(['loaded']);
+
+const dtoValue = ref();
+const getValue = () => {
+  return dtoValue.value !== undefined ? {
+    [schemaKey]: dtoValue.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);
+  }
+}
+
+const reset = () => {
+  dtoValue.value = schema?.option?.default ?? enumList.value?.[0].value;
+}
+
+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,43 @@
+<template>
+  <el-input
+    v-model="dtoValue"
+    v-bind="schema.option"
+    class="input"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const { schemaKey, schema } = defineProps({
+  schemaKey: String,
+  schema: Object
+})
+
+const emit = defineEmits(['loaded']);
+
+const dtoValue = ref();
+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,50 @@
+<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(['loaded']);
+
+const dtoValue = ref();
+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,133 @@
+<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
+        :is="SearchItemConfig[schemaItem.option?.comType]?.component"
+        :ref="handleSearchComList"
+        :schema-key="key"
+        :schema="schemaItem"
+        @loaded="handleChildLoaded"
+      />
+    </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";
+
+const props = defineProps({
+  /**
+   * schema 配置，结构如下：
+   * {
+      type: 'object',
+      properties: {
+        key: {
+          ...schema, // 标准 schema 配置
+          type: '', // 字段类型
+          label: '', // 字段中文名
+          // 字段在 search 中的相关配置
+          option: {
+            ...elComponentConfig, // 标准 el-component 配置
+            comType: '', // 组件类型 input / select / date-picker / cascader / ...
+            default: '' // 搜索默认值
+          }
+        },
+        ...
+      }
+   * }
+   */
+  schema: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const { schema } = toRefs(props);
+
+const emit = defineEmits(['search', 'load', 'reset']);
+
+
+const searchComList = ref([]);
+const handleSearchComList = (el) => {
+  searchComList.value.push(el);
+}
+
+const getValue = () => {
+  return searchComList.value.reduce((dtoObj, item) => {
+    return {
+      ...dtoObj,
+      ...item.getValue()
+    }
+  }, {});
+}
+
+let childComLoadedCount = 0;
+const handleChildLoaded = () => {
+  childComLoadedCount++;
+  if (childComLoadedCount >= Object.keys(schema?.value?.properties).length) {
+    emit('load', getValue());
+  }
+}
+
+const search = () => {
+  emit('search', getValue());
+}
+
+const reset = () => {
+  searchComList.value.forEach(com => com?.reset());
+  emit('reset');
+}
+
+defineExpose({
+  getValue,
+  reset
+})
+</script>
+<style lang="less">
+.schema-search-bar {
+  min-width: 500px;
+  .input {
+    width: 180px;
+  }
+  .select {
+    width: 180px;
+  }
+  .dynamic-select {
+    width: 180px;
+  }
+  .search-btn {
+    width: 100px;
+  }
+  .reset-btn {
+    width: 100px;
+  }
+}
+</style>

package/app/pages/widgets/schema-search-bar/search-item-config.js

@@ -0,0 +1,26 @@
+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';
+
+// 业务拓展 searchItem 配置
+import BusinessSearchItemConfig from '$businessSearchItemConfig';
+
+const SearchItemConfig = {
+  input: {
+    component: input
+  },
+  select: {
+    component: select
+  },
+  dynamicSelect: {
+    component: dynamicSelect
+  },
+  dateRange: {
+    component: dateRange
+  }
+}
+export default {
+  ...SearchItemConfig,
+  ...BusinessSearchItemConfig
+}