@isxiaoyuan/elpis 1.0.0

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

@@ -0,0 +1,136 @@
+<template>
+  <el-row v-if="schema && schema.properties" class="schema-form">
+    <template v-for="(itemSchema, key) in schema.properties">
+      <component
+        v-show="itemSchema.option.visible !== false"
+        ref="formComListRef"
+        :is="FormItemConfig[itemSchema.option?.comType]?.component"
+        :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.js";
+
+const Ajv = require("ajv");
+const ajv = new Ajv();
+provide("ajv", ajv);
+
+const props = defineProps({
+  /*
+   *  schema配置在doc dashboard文档下的 schemaConfig下的 schema
+    schema: {
+          // 板块数据结构
+          type: "object",
+          properties: {
+            key: {
+              ...schema,
+              type: "", // 字段类型
+              label: "", // 字段中文名
+              // 字段在table 中的相关配置
+              option: {
+                ...elTableColumnConfig, // 标准 el-table-cloumn 配置
+                toFixed: 0, // 数字类型字段保留小数位数
+                comType: "", // 配置控件类型
+                required: false, // 是否必填
+                visible: true, // 是否在 table 中显示(不配置就展示)
+                disabled: false, // 是否禁用
+                default: "", // 默认值
+              },
+              // 字段在 search-bar 中的相关配置
+            }
+        },
+   */
+  schema: {
+    type: Object,
+    default: () => {},
+  },
+  // 表单数据
+  model: {
+    type: [Object, Number, String],
+  },
+});
+
+const { schema } = toRefs(props);
+
+const formComListRef = ref([]);
+
+//表单校验
+const validate = () => {
+  return formComListRef.value.every((item) => item.validate());
+};
+
+// 获取表单值
+const getValue = () => {
+  return formComListRef.value.reduce((dtoObj, item) => {
+    return {
+      ...dtoObj,
+      ...item.getValue(),
+    };
+  }, {});
+  // let dtoObj = {};
+  // formComListRef.value.forEach((item) => {
+  //   dtoObj = {
+  //     ...dtoObj,
+  //     ...item.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: #fff;
+      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-select_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,55 @@
+<template>
+  <el-date-picker
+    v-model="dtoValue"
+    v-bind="schema.option"
+    class="date-range"
+    type="daterange"
+    range-separator="至"
+    :start-placeholder="schema.label + '开始'"
+    :end-placeholder="schema.label + '结束'"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import moment from "moment";
+
+const { schemaKey, schema } = defineProps({
+  schemaKey: {
+    type: String,
+    default: "",
+  },
+  schema: {
+    type: Object,
+    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 = [];
+};
+
+onMounted(() => {
+  reset();
+  emit("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,69 @@
+<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: {
+    type: String,
+    default: "",
+  },
+  schema: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+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 () => {
+  try {
+    const res = await $curl({
+      url: schema.option?.api,
+      method: "get",
+      data: {},
+    });
+    enumList.value = res.data || [];
+    // enumList.value.push(...(res.data || []))
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+onMounted(async () => {
+  await fetchEnumList();
+  reset();
+  emit("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,45 @@
+<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: {
+    type: String,
+    default: "",
+  },
+  schema: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+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 scoped lang="less"></style>

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

@@ -0,0 +1,53 @@
+<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: {
+    type: String,
+    default: "",
+  },
+  schema: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+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 scoped lang="less"></style>

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

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

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

@@ -0,0 +1,115 @@
+<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"
+      />
+    </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 "./schema-item-config.js";
+
+const props = defineProps({
+  /*
+   *  schema配置在doc dashboard文档下的 schemaConfig下
+   */
+  schema: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const { schema } = toRefs(props);
+
+const emit = defineEmits(["load", "search", "reset"]);
+
+const searchComList = ref([]);
+
+const getValue = () => {
+  let dtoObj = {};
+  searchComList.value.forEach((component) => {
+    dtoObj = {
+      ...dtoObj,
+      ...component?.getValue(),
+    };
+  });
+  return dtoObj;
+};
+
+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((component) => {
+    component?.reset();
+  });
+  emit("reset");
+};
+
+defineExpose({
+  reset,
+  getValue,
+});
+</script>
+
+<style lang="less">
+.schema-search-bar {
+  min-width: 500px;
+
+  .input {
+    width: 280px;
+  }
+
+  .select {
+    width: 180px;
+  }
+
+  .dynamic-select {
+    width: 180px;
+  }
+
+  .date-range {
+    width: 280px;
+  }
+
+  .search-btn {
+    width: 100px;
+  }
+
+  .reset-btn {
+    width: 100px;
+  }
+}
+</style>