@slice_cy/mint 1.2.0

package/app/pages/widgets/schema-form/components/input-number/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="form-item">
+    <div class="item-label">
+      <a-flex
+        :gap="5"
+        align-items="center"
+      >
+        <span
+          v-if="schema?.option?.required"
+          class="required"
+        >
+          *
+        </span>
+        <span>{{ schema.label }}</span>
+      </a-flex>
+    </div>
+    <a-input-number
+      v-model:value="dtoValue"
+      :class="[validTip.length ? 'validate-border-error' : '']"
+      v-bind="componentAttrs"
+      @blur="onBlur"
+      @focus="onFocus"
+    ></a-input-number>
+    <div
+      v-if="validTip.length"
+      class="validate-tip-error"
+    >
+      {{ validTip }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch, onMounted, ref, computed, inject } from "vue";
+const props = defineProps({
+  schema: {
+    type: Object,
+    default: () => ({}),
+  },
+  schemaKey: {
+    type: String,
+    default: "",
+  },
+  model: {
+    type: Number,
+    default: undefined,
+  },
+});
+
+const name = "inputNumber";
+
+const componentAttrs = computed(() => {
+  const { minimum, maximum } = props.schema;
+  const { placeholder: pValue } = props.schema.option.uiComponentConfig;
+  const ruleList = [];
+  if (minimum) {
+    ruleList.push(`最小值：${minimum}`);
+  }
+  if (maximum) {
+    ruleList.push(`最大值：${maximum}`);
+  }
+  ruleList.push(pValue || "请输入");
+  return {
+    allowClear: true,
+    ...(props.schema.option?.uiComponentConfig || {}),
+    placeholder: ruleList.join(" | "),
+    disabled: props.schema.option?.disabled,
+  };
+});
+
+watch(
+  [() => props.schema, () => props.model, () => props.schemaKey],
+  () => {
+    initData();
+  },
+  { deep: true },
+);
+
+const dtoValue = ref();
+const getValue = () => {
+  return dtoValue.value
+    ? {
+        [props.schemaKey]: dtoValue.value,
+      }
+    : {};
+};
+
+const getAjv = inject("getAjv");
+const validTip = ref("");
+
+const validate = async () => {
+  validTip.value = "";
+  if (props.schema.option?.required && !dtoValue.value) {
+    validTip.value = `${props.schema.label}必填`;
+    return false;
+  }
+  if (dtoValue.value) {
+    const ajv = await getAjv();
+    const validate = ajv.compile(props.schema);
+    const valid = validate(dtoValue.value);
+    if (!valid && validate.errors && validate.errors[0]) {
+      const { keyword, params } = validate.errors[0];
+      switch (keyword) {
+        case "type":
+          validTip.value = `${props.schema.label}类型错误`;
+          break;
+        case "minimum":
+          validTip.value = `${props.schema.label}最小值不能小于${params.limit}`;
+          break;
+        case "maximum":
+          validTip.value = `${props.schema.label}最大值不能大于${params.limit}`;
+          break;
+        default:
+          validTip.value = `${props.schema.label}不符合要求`;
+          break;
+      }
+      return false;
+    }
+  }
+
+  return true;
+};
+
+const onFocus = () => {
+  validTip.value = "";
+};
+
+const onBlur = () => {
+  void validate();
+};
+
+function initData() {
+  dtoValue.value = props.model || props.schema.option?.default || undefined;
+  validTip.value = "";
+}
+
+onMounted(() => {
+  initData();
+});
+
+defineExpose({
+  getValue,
+  validate,
+  name,
+});
+</script>
+
+<style scoped lang="less"></style>

package/app/pages/widgets/schema-form/components/select/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="form-item">
+    <div class="item-label">
+      <a-flex
+        :gap="5"
+        align-items="center"
+      >
+        <span
+          v-if="schema?.option?.required"
+          class="required"
+        >
+          *
+        </span>
+        <span>{{ schema.label }}</span>
+      </a-flex>
+    </div>
+
+    <a-select
+      v-model:value="dtoValue"
+      style="width: 100%"
+      :class="[validTip.length ? 'validate-border-error' : '']"
+      v-bind="componentAttrs"
+      @change="onChange"
+    ></a-select>
+    <div
+      v-if="validTip.length"
+      class="validate-tip-error"
+    >
+      {{ validTip }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch, onMounted, ref, computed, inject } from "vue";
+const props = defineProps({
+  schema: {
+    type: Object,
+    default: () => ({}),
+  },
+  schemaKey: {
+    type: String,
+    default: "",
+  },
+  model: {
+    type: Object,
+    default: undefined,
+  },
+});
+
+const name = "select";
+
+const componentAttrs = computed(() => {
+  return {
+    allowClear: true,
+    placeholder: "请选择",
+    ...(props.schema.option?.uiComponentConfig || {}),
+    options: props.schema.option?.enumList || [],
+    disabled: props.schema.option?.disabled,
+  };
+});
+
+watch(
+  [() => props.schema, () => props.model],
+  () => {
+    initData();
+  },
+  { deep: true },
+);
+
+const dtoValue = ref();
+const getValue = () => {
+  return dtoValue.value
+    ? {
+        [props.schemaKey]: dtoValue.value,
+      }
+    : {};
+};
+
+const getAjv = inject("getAjv");
+const validTip = ref("");
+
+const validate = async () => {
+  validTip.value = "";
+  if (props.schema.option?.required && !dtoValue.value) {
+    validTip.value = `${props.schema.label}必填`;
+    return false;
+  }
+  if (dtoValue.value) {
+    const ajv = await getAjv();
+    const validate = ajv.compile(props.schema, {
+      enum: (props.schema?.option?.enumList || []).map((i) => i.value),
+    });
+    const valid = validate(dtoValue.value);
+    if (!valid && validate.errors && validate.errors[0]) {
+      const { keyword } = validate.errors[0];
+      switch (keyword) {
+        case "enum":
+          validTip.value = `${props.schema.label}取值超出枚举范围`;
+          break;
+        default:
+          validTip.value = `${props.schema.label}不符合要求`;
+          break;
+      }
+      return false;
+    }
+  }
+
+  return true;
+};
+
+const onChange = () => {
+  validTip.value = "";
+};
+
+function initData() {
+  dtoValue.value = props.model || props.schema.option?.default || undefined;
+  validTip.value = "";
+}
+
+onMounted(() => {
+  initData();
+});
+
+defineExpose({
+  getValue,
+  validate,
+  name,
+});
+</script>
+
+<style scoped lang="less"></style>

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

@@ -0,0 +1,18 @@
+import businessFormItemConfig from "$businessFormItemConfig";
+export default {
+  input: {
+    loader: () =>
+      import(/* webpackChunkName: "schema-form-input" */ "./components/input/index.vue"),
+  },
+  select: {
+    loader: () =>
+      import(/* webpackChunkName: "schema-form-select" */ "./components/select/index.vue"),
+  },
+  inputNumber: {
+    loader: () =>
+      import(
+        /* webpackChunkName: "schema-form-input-number" */ "./components/input-number/index.vue"
+      ),
+  },
+  ...businessFormItemConfig,
+};

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

@@ -0,0 +1,137 @@
+<template>
+  <div
+    v-if="schema?.properties"
+    class="schema-from"
+  >
+    <template
+      v-for="(schemaValue, key) in schema.properties"
+      :key="key"
+    >
+      <component
+        :is="loadedComponentMap[schemaValue.option.comType]"
+        v-if="loadedComponentMap[schemaValue.option.comType]"
+        v-show="schemaValue.option?.visible !== false"
+        ref="componentRefList"
+        :schema-key="key"
+        :schema="schemaValue"
+        :model="model[key]"
+      ></component>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, provide, watch } from "vue";
+import formItemConfig from "./form-item-cofnig";
+const props = defineProps({
+  // type: object,
+  // properties: {
+  //   [key]: {
+  //     type: "",
+  //     label: "",
+  //     ...schema, //标准配置
+  //     option: {
+  //       uiComponentConfig: {}, // 表单控件配置
+  //       comType: "", // 搜索组件类型枚举：input | select | dynamicSelect | dateRangePicker
+  //       enumList: [], // 如果comType === select时，需要传enumList
+  //       visible: true, // 字段是否在表格中渲染显示；仅显式配置false时隐藏（定义该开关的意义是考虑到DSL集成覆盖的问题）
+  //       default: "", // 默认值
+  //       disabled: true, // 是否禁用
+  //       api: "", // comType === dynamicSelect时必填，下拉选项数据请求接口
+  //     },
+  //   },
+  // },
+  schema: {
+    type: Object,
+    default: () => ({}),
+  },
+  model: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+let ajvPromise;
+const getAjv = () => {
+  if (!ajvPromise) {
+    ajvPromise = import(/* webpackChunkName: "async-ajv" */ "ajv").then(
+      ({ default: Ajv }) => new Ajv(),
+    );
+  }
+  return ajvPromise;
+};
+
+provide("getAjv", getAjv);
+
+const componentRefList = ref([]);
+const loadedComponentMap = ref({});
+
+const loadFormComponents = async () => {
+  const comTypeList = [
+    ...new Set(
+      Object.values(props.schema.properties || {})
+        .filter((item) => item.option?.visible !== false)
+        .map((item) => item.option?.comType)
+        .filter(Boolean),
+    ),
+  ];
+  const componentEntries = await Promise.all(
+    comTypeList.map(async (comType) => {
+      const config = formItemConfig[comType];
+      if (!config) return null;
+      const loadedModule = config.loader ? await config.loader() : null;
+      const component = config.component || loadedModule?.default;
+      return component ? [comType, component] : null;
+    }),
+  );
+  loadedComponentMap.value = Object.fromEntries(componentEntries.filter(Boolean));
+};
+
+watch(
+  () => props.schema,
+  async () => {
+    componentRefList.value = [];
+    loadedComponentMap.value = {};
+    await loadFormComponents();
+  },
+  { deep: true, immediate: true },
+);
+
+const validate = async () => {
+  const resultList = await Promise.all(componentRefList.value.map((item) => item.validate()));
+  return resultList.every(Boolean);
+};
+
+const getValue = () => {
+  return componentRefList.value.reduce((pre, item) => ({ ...pre, ...item.getValue() }), {});
+};
+
+defineExpose({
+  validate,
+  getValue,
+});
+</script>
+
+<style lang="less">
+// 统一管理子组件的样式
+.schema-from {
+  .form-item {
+    .item-label {
+      margin-bottom: 12px;
+    }
+    .required {
+      color: red;
+    }
+    &:not(:first-child) {
+      margin-top: 12px;
+    }
+    .validate-border-error {
+      border: 1px solid red;
+    }
+    .validate-tip-error {
+      color: red;
+      margin-top: 10px;
+    }
+  }
+}
+</style>

package/app/pages/widgets/schema-search-bar/component/date-range-picker/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <a-range-picker
+    v-model:value="selectValue"
+    style="width: 100%"
+    v-bind="antdFormItemConfig"
+  ></a-range-picker>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from "vue";
+const props = defineProps({
+  schemaKey: {
+    type: String,
+    default: "",
+  },
+  schema: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["load"]);
+
+const antdFormItemConfig = computed(() => ({
+  allowClear: true,
+  ...(props.schema?.option?.uiComponentConfig || {}),
+}));
+
+const selectValue = ref([]);
+
+const getValue = () => {
+  return selectValue.value !== undefined
+    ? {
+        [`${props.schemaKey}_start`]: selectValue.value[0] || "",
+        [`${props.schemaKey}_end`]: selectValue.value[1] || "",
+      }
+    : {};
+};
+
+const reset = () => {
+  selectValue.value = props.schema?.option?.default ?? [];
+};
+
+onMounted(() => {
+  reset();
+  emit("load");
+});
+
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style scoped lang="less"></style>

package/app/pages/widgets/schema-search-bar/component/dynamic-select/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <a-select
+    v-model:value="selectValue"
+    v-bind="antdFormItemConfig"
+    :options="enumList"
+  ></a-select>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import { httpGet } from "$mintService";
+const props = defineProps({
+  schemaKey: {
+    type: String,
+    default: "",
+  },
+  schema: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["load"]);
+
+const antdFormItemConfig = computed(() => ({
+  allowClear: true,
+  placeholder: `请选择${props.schema?.label}`,
+  ...(props.schema?.option?.uiComponentConfig || {}),
+}));
+
+const selectValue = ref();
+
+const getValue = () => {
+  return selectValue.value !== undefined
+    ? {
+        [props.schemaKey]: selectValue.value,
+      }
+    : {};
+};
+
+const reset = () => {
+  if (props.schema?.option?.default) {
+    selectValue.value = props.schema?.option?.default;
+    return;
+  }
+  if (antdFormItemConfig.value?.mode && antdFormItemConfig.value.mode === "multiple") {
+    selectValue.value = [];
+    return;
+  }
+  selectValue.value = undefined;
+};
+
+const enumList = ref([]);
+const fetchEnumList = async () => {
+  const res = await httpGet(props.schema.option.api);
+  enumList.value = res.data;
+};
+onMounted(async () => {
+  reset();
+  await fetchEnumList();
+  emit("load");
+});
+
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style scoped lang="less"></style>

package/app/pages/widgets/schema-search-bar/component/input/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <a-input
+    v-model:value="inputValue"
+    v-bind="antdFormItemConfig"
+  ></a-input>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from "vue";
+const props = defineProps({
+  schemaKey: {
+    type: String,
+    default: "",
+  },
+  schema: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["load"]);
+
+const antdFormItemConfig = computed(() => ({
+  allowClear: true,
+  placeholder: `请输入${props.schema?.label}`,
+  ...(props.schema?.option?.uiComponentConfig || {}),
+}));
+
+const inputValue = ref();
+
+const getValue = () => {
+  return inputValue.value !== undefined
+    ? {
+        [props.schemaKey]: inputValue.value,
+      }
+    : {};
+};
+
+const reset = () => {
+  inputValue.value = props.schema?.option?.default || undefined;
+};
+
+onMounted(() => {
+  reset();
+  emit("load");
+});
+
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style scoped lang="less"></style>

package/app/pages/widgets/schema-search-bar/component/select/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <a-select
+    v-model:value="selectValue"
+    v-bind="antdFormItemConfig"
+  ></a-select>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from "vue";
+const props = defineProps({
+  schemaKey: {
+    type: String,
+    default: "",
+  },
+  schema: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["load"]);
+
+const antdFormItemConfig = computed(() => {
+  return {
+    allowClear: true,
+    placeholder: `请选择${props.schema?.label}`,
+    ...(props.schema?.option?.uiComponentConfig || {}),
+    options: props.schema?.option?.enumList || [],
+  };
+});
+
+const selectValue = ref();
+
+const getValue = () => {
+  return selectValue.value !== undefined
+    ? {
+        [props.schemaKey]: selectValue.value,
+      }
+    : {};
+};
+
+const reset = () => {
+  if (props.schema?.option?.default) {
+    selectValue.value = props.schema?.option?.default;
+    return;
+  }
+  if (antdFormItemConfig.value?.mode && antdFormItemConfig.value.mode === "multiple") {
+    selectValue.value = [];
+    return;
+  }
+  selectValue.value = undefined;
+};
+
+onMounted(() => {
+  reset();
+  emit("load");
+});
+
+defineExpose({
+  getValue,
+  reset,
+});
+</script>
+
+<style scoped lang="less"></style>