Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into warmflow

playground/src/views/examples/form/custom.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { h } from 'vue';
+import { h, markRaw } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
 import { Card, Input, message } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
+import { useVbenForm, z } from '#/adapter/form';
+
+import TwoFields from './modules/two-fields.vue';
 
 const [Form] = useVbenForm({
   // 所有表单项共用，可单独在表单内覆盖
@@ -16,6 +18,7 @@ const [Form] = useVbenForm({
     },
     labelClass: 'w-2/6',
   },
+  fieldMappingTime: [['field4', ['phoneType', 'phoneNumber'], null]],
   // 提交函数
   handleSubmit: onSubmit,
   // 垂直布局，label和input在不同行，值为vertical
@@ -39,9 +42,10 @@ const [Form] = useVbenForm({
       }),
     },
     {
-      component: h(Input, { placeholder: '请输入' }),
+      component: h(Input, { placeholder: '请输入Field2' }),
       fieldName: 'field2',
       label: '自定义组件',
+      modelPropName: 'value',
       rules: 'required',
     },
     {
@@ -50,6 +54,27 @@ const [Form] = useVbenForm({
       label: '自定义组件(slot)',
       rules: 'required',
     },
+    {
+      component: markRaw(TwoFields),
+      defaultValue: [undefined, ''],
+      disabledOnChangeListener: false,
+      fieldName: 'field4',
+      formItemClass: 'col-span-1',
+      label: '组合字段',
+      rules: z
+        .array(z.string().optional())
+        .length(2, '请选择类型并输入手机号码')
+        .refine((v) => !!v[0], {
+          message: '请选择类型',
+        })
+        .refine((v) => !!v[1] && v[1] !== '', {
+          message: '　　　　　　　输入手机号码',
+        })
+        .refine((v) => v[1]?.match(/^1[3-9]\d{9}$/), {
+          // 使用全角空格占位，将错误提示文字挤到手机号码输入框的下面
+          message: '　　　　　　　号码格式不正确',
+        }),
+    },
   ],
   // 中屏一行显示2个，小屏一行显示1个
   wrapperClass: 'grid-cols-1 md:grid-cols-2',

playground/src/views/examples/form/modules/two-fields.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { Input, Select } from 'ant-design-vue';
+
+const emit = defineEmits(['blur', 'change']);
+
+const modelValue = defineModel<[string, string]>({
+  default: () => [undefined, undefined],
+});
+
+function onChange() {
+  emit('change', modelValue.value);
+}
+</script>
+<template>
+  <div class="flex w-full gap-1">
+    <Select
+      v-model:value="modelValue[0]"
+      class="w-[80px]"
+      placeholder="类型"
+      allow-clear
+      :class="{ 'valid-success': !!modelValue[0] }"
+      :options="[
+        { label: '个人', value: 'personal' },
+        { label: '工作', value: 'work' },
+        { label: '私密', value: 'private' },
+      ]"
+      @blur="emit('blur')"
+      @change="onChange"
+    />
+    <Input
+      placeholder="请输入11位手机号码"
+      class="flex-1"
+      allow-clear
+      :class="{ 'valid-success': modelValue[1]?.match(/^1[3-9]\d{9}$/) }"
+      v-model:value="modelValue[1]"
+      :maxlength="11"
+      type="tel"
+      @blur="emit('blur')"
+      @change="onChange"
+    />
+  </div>
+</template>

playground/src/views/examples/vxe-table/form.vue

@@ -5,6 +5,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import { Page } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getExampleTableApi } from '#/api';
@@ -21,6 +22,7 @@ interface RowType {
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
   schema: [
     {
       component: 'Input',
@@ -58,8 +60,9 @@ const formOptions: VbenFormProps = {
       label: 'Color',
     },
     {
-      component: 'DatePicker',
-      fieldName: 'datePicker',
+      component: 'RangePicker',
+      defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'date',
       label: 'Date',
     },
   ],