feat: update basic-form demo

package.json

@@ -46,10 +46,11 @@
     "vue": "^3.2.31",
     "vue-i18n": "^9.2.0-beta.30",
     "vue-router": "^4.0.14",
-    "xlsx": "^0.18.3"
+    "vue-types": "^4.1.1",
+    "xlsx": "^0.18.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "^16.2.1",
+    "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^17.0.21",
@@ -62,7 +63,6 @@
     "@vue/cli-plugin-typescript": "^5.0.3",
     "@vue/cli-plugin-vuex": "^5.0.3",
     "@vue/cli-service": "^5.0.3",
-    "@vue/compiler-sfc": "^3.2.31",
     "@vue/eslint-config-typescript": "^10.0.0",
     "babel-plugin-import": "^1.13.3",
     "commitizen": "^4.2.4",
@@ -76,10 +76,10 @@
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "less-loader": "10.2.0",
-    "lint-staged": "^12.3.5",
+    "lint-staged": "^12.3.6",
     "path-browserify": "^1.0.1",
     "postcss-html": "^1.3.0",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.0",
     "regenerator-runtime": "^0.13.9",
     "stylelint": "^14.5.3",
     "stylelint-config-html": "^1.0.0",

src/api/demos/select.ts

@@ -0,0 +1,18 @@
+import { request } from '@/utils/request';
+
+/**
+ * @description Get sample options value
+ */
+export function optionsListApi(params?: any) {
+  return request<{ list: { id: string; name: string }[] }>(
+    {
+      url: '/select/getDemoOptions',
+      method: 'get',
+      params,
+    },
+    {
+      isMock: true,
+      isGetDataDirectly: true,
+    },
+  );
+}

src/components/basic/excel/src/ExportExcelModal.tsx

@@ -67,7 +67,6 @@ export const useExportExcelModal = () => {
       },
       formProps: {
         labelWidth: 100,
-        layout: 'vertical',
         schemas: getSchemas(t),
       },
     });

src/components/core/dynamic-table/src/hooks/useTableForm.ts

@@ -1,5 +1,4 @@
 import { unref, computed, watchEffect } from 'vue';
-import { omit } from 'lodash-es';
 import type { TableMethods } from './useTableMethods';
 import type { TableState } from './useTableState';
 import type { ComputedRef, Slots } from 'vue';
@@ -49,7 +48,7 @@ export function useTableForm({ tableState, slots, tableMethods }: UseTableFormCo
   });
 
   // 同步外部对props的修改
-  watchEffect(() => getQueryFormRef()?.setSchemaFormProps(omit(unref(getFormProps), 'schemas')), {
+  watchEffect(() => getQueryFormRef()?.setSchemaFormProps(unref(getFormProps)), {
     flush: 'post',
   });
 

src/components/core/schema-form/index.ts

@@ -1,13 +1,11 @@
-// export { default as SchemaForm } from './schema-form.vue'
 import SchemaForm from './src/schema-form.vue';
 import type { DefineComponent } from 'vue';
 import type { SchemaFormProps } from './src/schema-form';
 
-export * from './src/types/form';
-export * from './src/types/formItem';
+export * from './src/types/';
 export * from './src/schema-form';
-
 export * from './src/hooks/';
+export * from './src/components/';
 
 export { SchemaForm };
 

src/components/core/schema-form/src/components/ApiSelect.vue

@@ -0,0 +1,141 @@
+<template>
+  <Select
+    v-bind="getProps"
+    :options="getOptions"
+    @dropdown-visible-change="handleFetch"
+    @change="handleChange"
+  >
+    <template v-for="item in Object.keys($slots)" #[item]="data">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+    <template v-if="loading" #suffixIcon>
+      <LoadingOutlined spin />
+    </template>
+    <template v-if="loading" #notFoundContent>
+      <span>
+        <LoadingOutlined spin class="mr-1" />
+        {{ t('component.form.apiSelectNotFound') }}
+      </span>
+    </template>
+  </Select>
+</template>
+<script lang="ts" setup>
+  import { PropType, ref, watchEffect, computed, unref, watch } from 'vue';
+  import { get, omit } from 'lodash-es';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { selectProps } from 'ant-design-vue/es/select';
+  import { Select } from 'ant-design-vue';
+  import { isFunction } from '@/utils/is';
+  import { useI18n } from '@/hooks/useI18n';
+  import { propTypes } from '@/utils/propTypes';
+
+  type OptionsItem = { label: string; value: string; disabled?: boolean };
+
+  defineOptions({
+    name: 'ApiSelect',
+    inheritAttrs: false,
+  });
+
+  const props = defineProps({
+    ...selectProps(),
+    value: [Array, Object, String, Number],
+    numberToString: propTypes.bool,
+    api: {
+      type: Function as PropType<(arg?: Recordable) => Promise<any>>,
+      default: null,
+    },
+    // api params
+    params: {
+      type: Object as PropType<Recordable>,
+      default: () => ({}),
+    },
+    // support xxx.xxx.xx
+    resultField: propTypes.string.def(''),
+    labelField: propTypes.string.def('label'),
+    valueField: propTypes.string.def('value'),
+    immediate: propTypes.bool.def(true),
+    alwaysLoad: propTypes.bool.def(false),
+  });
+
+  const emit = defineEmits(['options-change', 'change']);
+
+  const options = ref<OptionsItem[]>([]);
+  const loading = ref(false);
+  const isFirstLoad = ref(true);
+  const emitData = ref<any[]>([]);
+  const { t } = useI18n();
+
+  const getProps = computed(() => props as Recordable);
+
+  // Embedded in the form, just use the hook binding to perform form verification
+
+  const getOptions = computed(() => {
+    const { labelField, valueField, numberToString } = props;
+
+    return unref(options).reduce((prev, next: Recordable) => {
+      if (next) {
+        const value = next[valueField];
+        prev.push({
+          ...omit(next, [labelField, valueField]),
+          label: next[labelField],
+          value: numberToString ? `${value}` : value,
+        });
+      }
+      return prev;
+    }, [] as OptionsItem[]);
+  });
+
+  watchEffect(() => {
+    props.immediate && !props.alwaysLoad && fetch();
+  });
+
+  watch(
+    () => props.params,
+    () => {
+      !unref(isFirstLoad) && fetch();
+    },
+    { deep: true },
+  );
+
+  async function fetch() {
+    const api = props.api;
+    if (!api || !isFunction(api)) return;
+    options.value = [];
+    try {
+      loading.value = true;
+      const res = await api(props.params);
+      if (Array.isArray(res)) {
+        options.value = res;
+        emitChange();
+        return;
+      }
+      if (props.resultField) {
+        options.value = get(res, props.resultField) || [];
+      }
+      emitChange();
+    } catch (error) {
+      console.warn(error);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function handleFetch(visible) {
+    if (visible) {
+      if (props.alwaysLoad) {
+        await fetch();
+      } else if (!props.immediate && unref(isFirstLoad)) {
+        await fetch();
+        isFirstLoad.value = false;
+      }
+    }
+  }
+
+  function emitChange() {
+    emit('options-change', unref(getOptions));
+  }
+
+  function handleChange(_, ...args) {
+    emitData.value = args;
+  }
+</script>

src/components/core/schema-form/src/components/form-action.vue

@@ -43,7 +43,7 @@
   import { computed, type PropType } from 'vue';
   import { Form, Col } from 'ant-design-vue';
   import { useFormContext } from '../hooks/useFormContext';
-  import type { ColEx } from '../types/index';
+  import type { ColEx } from '../types/component';
   import { Button, ButtonProps } from '@/components/basic/button';
   import { BasicArrow } from '@/components/basic/basic-arrow';
   import { useI18n } from '@/hooks/useI18n';

src/components/core/schema-form/src/components/index.ts

@@ -0,0 +1 @@
+export { default as ApiSelect } from './ApiSelect.vue';

src/components/core/schema-form/src/helper.ts

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import type { ValidationRule } from 'ant-design-vue/es/form/Form';
-import type { ComponentMapType } from './types';
+import type { ComponentMapType } from './types/component';
 import { isNumber } from '@/utils/is';
 import { useI18n } from '@/hooks/useI18n';
 

src/components/core/schema-form/src/hooks/useAdvanced.ts

@@ -1,6 +1,6 @@
 import { computed, unref, watch } from 'vue';
 import type { SchemaFormEmitFn } from '../schema-form';
-import type { ColEx } from '../types';
+import type { ColEx } from '../types/component';
 import type { SchemaFormType } from './';
 import { isBoolean, isFunction, isNumber, isObject } from '@/utils/is';
 import { useBreakpoint } from '@/hooks/event/useBreakpoint';
@@ -40,7 +40,7 @@ export const useAdvanced = ({ instance, emit }: UseAdvancedContext) => {
     () => {
       const { showAdvancedButton } = unref(getFormProps);
       if (showAdvancedButton) {
-        requestIdleCallback(updateAdvanced);
+        updateAdvanced();
       }
     },
     { immediate: true },