@wanglindoc/elpis 1.0.0

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

@@ -0,0 +1,135 @@
+<template>
+  <el-row type="flex" align="middle" class="form-item">
+    <el-row class="item-label" justify="end">
+      <el-row
+        v-if="schema && schema.option?.required"
+        type="flex"
+        class="required"
+      >
+        *
+      </el-row>
+      {{ schema.label }}
+    </el-row>
+
+    <el-row class="item-value">
+      <el-input-number
+        v-model="dtoValue"
+        v-bind="schema.option"
+        :controls="false"
+        :placeholder="placeholder"
+        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 { schema, schemaKey } = props;
+const { model } = toRefs(props);
+
+const name = ref("inputNumber");
+const dtoValue = ref();
+const validTips = ref(null);
+const placeholder = ref("");
+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) {
+    ruleList.push(`最小值：${minimum}`);
+  }
+
+  if (maximum) {
+    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;
+  }
+
+  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 } : {};
+};
+
+const onFocus = () => (validTips.value = null);
+
+const onBlur = () => validate();
+
+defineExpose({
+  name,
+  validate,
+  getValue,
+});
+</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,119 @@
+<template>
+  <el-row type="flex" align="middle" class="form-item">
+    <el-row class="item-label" justify="end">
+      <el-row
+        v-if="schema && 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-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: Object,
+});
+
+const { schema, schemaKey } = 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;
+  }
+
+  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 scoped lang="less"></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,145 @@
+<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>
+// 1、接收什么属性
+// 2、返回什么事件
+// 3、暴露什么方法
+
+import { provide, ref, toRefs } 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, // 标准 schema 配置
+   *            type: "", // 字段类型
+   *            label: "", // 字段中文名
+   *            option: {
+   *                ...eleComponentConfig, // 标准 el-component 配置
+   *                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((component) => component.validate());
+};
+
+/**
+ * 获取表单值
+ */
+const getValue = () => {
+  //   let dtoObj = {};
+
+  //   formComList.value.forEach((component) => {
+  //     dtoObj = {
+  //       ...dtoObj,
+  //       ...component.getValue(),
+  //     };
+  //   });
+
+  //   return dtoObj;
+
+  return formComList.value.reduce((pre, cur) => {
+    return {
+      ...pre,
+      ...cur.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;
+      word-break: break-all;
+
+      .required {
+        top: 2px;
+        padding-left: 4px;
+        color: tomato;
+        font-size: 20px;
+      }
+    }
+
+    .item-value {
+      .component {
+        width: 320px;
+      }
+
+      .valid-border {
+        .el-input__wrapper {
+          border: 1px solid tomato;
+          box-shadow: 0 0 0 0;
+        }
+      }
+    }
+
+    .valid-tips {
+      margin-left: 10px;
+      height: 36px;
+      line-height: 36px;
+      overflow: hidden;
+      font-size: 12px;
+      color: tomato;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,52 @@
+<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"
+  ></el-date-picker>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import moment from "moment";
+
+const { schema, schemaKey } = defineProps({
+  schemaKey: String,
+  schema: Object,
+});
+
+const emits = defineEmits(["loaded"]);
+
+// 为什么初始值是 undefined 而不是空字符串
+// 因为 undefined 会在搜索的时候被过滤掉，如果存在 router-schema 必填校验，则接口会报错，但空字串会被认为传递的就是空串
+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();
+  emits("loaded");
+});
+
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style scoped lang="less"></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-option>
+  </el-select>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import $curl from "$elpisCommon/curl.js";
+
+const { schema, schemaKey } = defineProps({
+  schemaKey: String,
+  schema: Object,
+});
+
+const emits = defineEmits(["loaded"]);
+
+// 为什么初始值是 undefined 而不是空字符串
+// 因为 undefined 会在搜索的时候被过滤掉，如果存在 router-schema 必填校验，则接口会报错，但空字串会被认为传递的就是空串
+const dtoValue = ref();
+
+const getValue = () => {
+  return dtoValue.value !== undefined
+    ? {
+        [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(async () => {
+  await fetchEnumList();
+  reset();
+  emits("loaded");
+});
+
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style scoped lang="less"></style>

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

@@ -0,0 +1,42 @@
+<template>
+  <el-input v-model="dtoValue" v-bind="schema.option" class="input"></el-input>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+const { schema, schemaKey } = defineProps({
+  schemaKey: String,
+  schema: Object,
+});
+
+const emits = defineEmits(["loaded"]);
+
+// 为什么初始值是 undefined 而不是空字符串
+// 因为 undefined 会在搜索的时候被过滤掉，如果存在 router-schema 必填校验，则接口会报错，但空字串会被认为传递的就是空串
+const dtoValue = ref();
+
+const getValue = () => {
+  return dtoValue.value !== undefined
+    ? {
+        [schemaKey]: dtoValue.value,
+      }
+    : {};
+};
+
+const reset = () => {
+  dtoValue.value = schema?.option?.default;
+};
+
+onMounted(() => {
+  reset();
+  emits("loaded");
+});
+
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style scoped lang="less"></style>

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

@@ -0,0 +1,49 @@
+<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-option>
+  </el-select>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+const { schema, schemaKey } = defineProps({
+  schemaKey: String,
+  schema: Object,
+});
+
+const emits = defineEmits(["loaded"]);
+
+// 为什么初始值是 undefined 而不是空字符串
+// 因为 undefined 会在搜索的时候被过滤掉，如果存在 router-schema 必填校验，则接口会报错，但空字串会被认为传递的就是空串
+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();
+  emits("loaded");
+});
+
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style scoped lang="less"></style>