@codertqy/elpis 1.0.0

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

@@ -0,0 +1,122 @@
+<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, toRefs, watch, inject, onMounted } from "vue";
+const ajv = inject("ajv");
+
+const props = defineProps({
+  schemaKey: {
+    type: String,
+  },
+  schema: {
+    type: Object,
+  },
+  model: {
+    type: null,
+  },
+});
+const { schemaKey, schema } = props;
+const { model } = toRefs(props);
+
+const dtoValue = ref();
+const validTips = ref(null);
+const name = ref("select");
+
+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;
+  // const { type } = schema;
+  // 校验是否必填
+  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.errros && 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,
+      }
+    : {};
+};
+
+// 监听 change
+const onChange = (value) => {
+  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 select from "./complex-view/select/select.vue";
+import inputNumber from "./complex-view/input-number/input-number.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,135 @@
+<template>
+  <el-row v-if="schema && schema.properties" class="schema-form">
+    <!-- 这里遍历的是 对象，所以key是每一项的键名 -->
+    <template v-for="(itemSchema, key) in schema.properties">
+      <component
+        :is="FormItemConfig[itemSchema.option?.comType]?.component"
+        ref="formComList"
+        v-show="itemSchema.option.visible !== false"
+        :schemaKey="key"
+        :schema="itemSchema"
+        :model="model ? model[key] : undefined"
+      ></component>
+    </template>
+  </el-row>
+</template>
+<script setup>
+import { ref, toRefs, 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, // 标准 schema 配置
+              type: "", // 字段类型
+              tabel: "", // 字段的中文名
+              option: {
+                ...elTableColumnConfig, // 标准 el-component-column 配置
+                comType: "", // 控件类型 input/select/....
+                required: false, // 是否必填（true/false） 默认为 false
+                visible: true, // 是否展示（true/false） 默认为 true
+                disabled: false, //是否禁用（true/false） 默认为 false
+                default: "", //默认值
+                enumList: [], //枚举列表
+              },
+            },
+          },
+        },
+   */
+  schema: {
+    type: Object,
+  },
+
+  /**
+   * 表单数据
+   */
+  model: {
+    type: Object,
+  },
+});
+const { schema, model } = toRefs(props);
+
+const formComList = ref([]);
+// 表单校验
+const validate = () => {
+  // 遍历所有组件，进行校验，有一个为false都是false
+  return formComList.value.every((component) => {
+    const result = component.validate();
+    return result;
+  });
+};
+// 获取表单值
+const getValue = () => {
+  return formComList.value.reduce((dtoObj, component) => {
+    return { ...dtoObj, ...component.getValue() };
+  }, {});
+  //   let dtoObj = {};
+  //   // 遍历
+  //   formComList.value.forEach((component) => {
+  //     dtoObj = {
+  //       ...dtoObj,
+  //       ...component.getValue(),
+  //     };
+  //   });
+  //   return dtoObj;
+};
+
+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__warpper {
+          border: 1px solid #f93f3f;
+          box-shadow: 0 0 0 0;
+        }
+        .el-select__warpper {
+          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,51 @@
+<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 { schemaKey, schema } = defineProps({
+  schemaKey: {
+    type: String,
+  },
+  schema: {
+    type: 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(() => {
+  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,63 @@
+<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 { schemaKey, schema } = defineProps({
+  schemaKey: {
+    type: String,
+  },
+  schema: {
+    type: Object,
+  },
+});
+
+const emit = defineEmits(["loaded"]);
+
+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();
+  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,41 @@
+<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: {
+    type: String,
+  },
+  schema: {
+    type: Object,
+  },
+});
+
+const emit = defineEmits(["loaded"]);
+const dtoValue = ref();
+const getValue = () => {
+  return dtoValue.value !== undefined
+    ? {
+        [schemaKey]: dtoValue.value,
+      }
+    : {};
+};
+
+onMounted(() => {
+  reset();
+  emit("loaded");
+});
+
+const reset = () => {
+  dtoValue.value = schema?.option?.default;
+};
+
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style lang="less" scoped></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 { schemaKey, schema } = defineProps({
+  schemaKey: {
+    type: String,
+  },
+  schema: {
+    type: Object,
+  },
+});
+
+const emit = defineEmits(["loaded"]);
+
+const dtoValue = ref();
+const getValue = () => {
+  return dtoValue.value !== undefined
+    ? {
+        [schemaKey]: dtoValue.value,
+      }
+    : {};
+};
+onMounted(() => {
+  reset();
+  emit("loaded");
+});
+const reset = () => {
+  // 如果没有值，则给下拉框第一项
+  dtoValue.value =
+    schema?.option?.default ?? schema?.option?.enumList[0]?.value;
+};
+
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style lang="less" scoped></style>

package/app/pages/widgets/schema-search-bar/schema-search-bar.vue

@@ -0,0 +1,126 @@
+<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
+        :ref="searchComList"
+        :is="SearchItemConfig[schemaItem.option?.comType]?.component"
+        :schemaKey="key"
+        :schema="schemaItem"
+        @loaded="handleChildLoaded"
+      ></component>
+    </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: "", // 字段类型
+            tabel: "", // 字段的中文名
+            // 字段在 table 中的相关配置
+            tableOption: {
+            ...elTableColumnConfig, // 标准 el-table-column 配置
+            visiable: true, // 默认为 true (false ，表示不在表单中显示)
+            toFixed: 2,
+            },
+            // 字段在 search-abr 中的相关配置
+            searchOption: {
+            ...elComponentConfig, // 标准 el-component-column 配置 比如组件库中的input、form等
+            comType: "", // 配置组件类型 input/select/....
+            default: "", // 默认值
+            },
+        },
+        },
+     */
+  schema: {
+    type: Object,
+    required: true,
+  },
+});
+const { schema } = toRefs(props);
+// 因为该组件也需要调用api来获取数据
+const emit = defineEmits(["load", "search", "reset"]);
+
+// 保存动态组件中的每个实例对象
+const searchComList = ref([]);
+const getValue = () => {
+  let dtoObj = {};
+  // 遍历
+  searchComList.value.forEach((component) => {
+    dtoObj = {
+      ...dtoObj,
+      ...component?.getValue(),
+    };
+  });
+  return dtoObj;
+};
+const search = () => {
+  emit("search", getValue());
+};
+const reset = () => {
+  // 调用每一个组件中的 reset 方法
+  searchComList.value.forEach((component) => {
+    component.reset();
+  });
+  emit("reset");
+};
+
+/**
+ * 动态子组件中的加载完成之后，才会执行后续
+ */
+let childComLoadedCount = 0;
+const handleChildLoaded = () => {
+  childComLoadedCount++;
+  if (childComLoadedCount === Object.keys(schema?.value?.properties).length) {
+    emit("load", getValue());
+  }
+};
+defineExpose({
+  reset,
+  getValue,
+});
+</script>
+
+<style lang="less">
+.schema-search-bar {
+  min-width: 500px;
+  .input {
+    width: 280px;
+  }
+  .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,22 @@
+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";
+
+// 业务扩展 search-item 配置
+import BusinessSearchItemConfig from "$businessSearchItemConfig";
+const SearchItemConfig = {
+  input: {
+    component: input,
+  },
+  select: {
+    component: select,
+  },
+  dynamicSelect: {
+    component: dynamicSelect,
+  },
+  dateRange: {
+    component: dateRange,
+  },
+};
+export default { ...SearchItemConfig, ...BusinessSearchItemConfig };