fix(mall): 修复文章表单商品选择弹窗异常

- 初始化文章表单 formData，避免商品关联插槽渲染报错
- 禁用父级弹窗点击遮罩关闭，避免打开商品选择时关闭文章弹窗
- 修正文章新增默认值，热门/轮播默认 false，排序默认 0
- 同步修复 antd、antdv-next、ele 三端

apps/web-antd/src/views/mall/promotion/article/data.ts

@@ -76,24 +76,22 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '是否热门',
       component: 'RadioGroup',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
         buttonStyle: 'solid',
         optionType: 'button',
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
       },
-      rules: 'required',
-      defaultValue: true,
+      rules: z.boolean().default(false),
     },
     {
       fieldName: 'recommendBanner',
       label: '是否轮播图',
       component: 'RadioGroup',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
         buttonStyle: 'solid',
         optionType: 'button',
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
       },
-      rules: 'required',
-      defaultValue: true,
+      rules: z.boolean().default(false),
     },
     {
       fieldName: 'spuId',
@@ -110,7 +108,7 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         placeholder: '请输入排序',
       },
-      rules: 'required',
+      rules: z.number().default(0),
     },
     {
       fieldName: 'status',

apps/web-antd/src/views/mall/promotion/article/modules/form.vue

@@ -20,7 +20,7 @@ import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
-const formData = ref<MallArticleApi.Article>();
+const formData = ref<Partial<MallArticleApi.Article>>({});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['文章'])
@@ -43,7 +43,7 @@ const [Form, formApi] = useVbenForm({
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     // 同步商品选择到表单，确保验证时能获取到值
-    if (formData.value?.spuId) {
+    if (formData.value.spuId) {
       await formApi.setFieldValue('spuId', formData.value.spuId);
     }
     const { valid } = await formApi.validate();
@@ -65,7 +65,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -86,11 +86,11 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-2/5">
+  <Modal :title="getTitle" class="w-2/5" :close-on-click-modal="false">
     <Form class="mx-4">
       <!-- 自定义插槽：商品选择 -->
       <template #spuId>
-        <SpuShowcase v-model="formData!.spuId" :limit="1" />
+        <SpuShowcase v-model="formData.spuId" :limit="1" />
       </template>
     </Form>
   </Modal>

apps/web-antdv-next/src/views/mall/promotion/article/data.ts

@@ -76,24 +76,22 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '是否热门',
       component: 'RadioGroup',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
         buttonStyle: 'solid',
         optionType: 'button',
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
       },
-      rules: 'required',
-      defaultValue: true,
+      rules: z.boolean().default(false),
     },
     {
       fieldName: 'recommendBanner',
       label: '是否轮播图',
       component: 'RadioGroup',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
         buttonStyle: 'solid',
         optionType: 'button',
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
       },
-      rules: 'required',
-      defaultValue: true,
+      rules: z.boolean().default(false),
     },
     {
       fieldName: 'spuId',
@@ -110,7 +108,7 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         placeholder: '请输入排序',
       },
-      rules: 'required',
+      rules: z.number().default(0),
     },
     {
       fieldName: 'status',

apps/web-antdv-next/src/views/mall/promotion/article/modules/form.vue

@@ -20,7 +20,7 @@ import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
-const formData = ref<MallArticleApi.Article>();
+const formData = ref<Partial<MallArticleApi.Article>>({});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['文章'])
@@ -43,7 +43,7 @@ const [Form, formApi] = useVbenForm({
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     // 同步商品选择到表单，确保验证时能获取到值
-    if (formData.value?.spuId) {
+    if (formData.value.spuId) {
       await formApi.setFieldValue('spuId', formData.value.spuId);
     }
     const { valid } = await formApi.validate();
@@ -65,7 +65,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -86,11 +86,11 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-2/5">
+  <Modal :title="getTitle" class="w-2/5" :close-on-click-modal="false">
     <Form class="mx-4">
       <!-- 自定义插槽：商品选择 -->
       <template #spuId>
-        <SpuShowcase v-model="formData!.spuId" :limit="1" />
+        <SpuShowcase v-model="formData.spuId" :limit="1" />
       </template>
     </Form>
   </Modal>

apps/web-ele/src/views/mall/promotion/article/data.ts

@@ -78,8 +78,7 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
       },
-      rules: 'required',
-      defaultValue: true,
+      rules: z.boolean().default(false),
     },
     {
       fieldName: 'recommendBanner',
@@ -88,8 +87,7 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
       },
-      rules: 'required',
-      defaultValue: true,
+      rules: z.boolean().default(false),
     },
     {
       fieldName: 'spuId',
@@ -102,12 +100,12 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
         min: 0,
         placeholder: '请输入排序',
-        controlsPosition: 'right',
-        class: '!w-full',
       },
-      rules: 'required',
+      rules: z.number().default(0),
     },
     {
       fieldName: 'status',
@@ -137,10 +135,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleArticleCategoryList,
+        clearable: true,
         labelField: 'name',
-        valueField: 'id',
         placeholder: '请选择文章分类',
-        allowClear: true,
+        valueField: 'id',
       },
     },
     {
@@ -148,8 +146,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '文章标题',
       component: 'Input',
       componentProps: {
+        clearable: true,
         placeholder: '请输入文章标题',
-        allowClear: true,
       },
     },
     {
@@ -157,9 +155,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '状态',
       component: 'Select',
       componentProps: {
+        clearable: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
         placeholder: '请选择状态',
-        allowClear: true,
       },
     },
     {
@@ -168,7 +166,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
-        allowClear: true,
+        clearable: true,
       },
     },
   ];

apps/web-ele/src/views/mall/promotion/article/modules/form.vue

@@ -20,7 +20,7 @@ import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
-const formData = ref<MallArticleApi.Article>();
+const formData = ref<Partial<MallArticleApi.Article>>({});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['文章'])
@@ -43,7 +43,7 @@ const [Form, formApi] = useVbenForm({
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     // 同步商品选择到表单，确保验证时能获取到值
-    if (formData.value?.spuId) {
+    if (formData.value.spuId) {
       await formApi.setFieldValue('spuId', formData.value.spuId);
     }
     const { valid } = await formApi.validate();
@@ -65,7 +65,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -86,11 +86,11 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-2/5">
+  <Modal :title="getTitle" class="w-2/5" :close-on-click-modal="false">
     <Form class="mx-4">
       <!-- 自定义插槽：商品选择 -->
       <template #spuId>
-        <SpuShowcase v-model="formData!.spuId" :limit="1" />
+        <SpuShowcase v-model="formData.spuId" :limit="1" />
       </template>
     </Form>
   </Modal>