fix: 吸收 Vue3 低风险交互与局部类型修复

- 三端 ProductList 在 spuIds 为空时跳过商品详情请求
- 三端 FloatingActionButton 点击子项后收起预览面板
- OA 请假 startUserSelectAssignees 改为创建页局部扩展类型，不污染 Leave VO
- 修复 antdv-next FloatingActionButton Image fallback slot 类型

apps/web-antd/src/api/bpm/oa/leave/index.ts

@@ -12,7 +12,6 @@ export namespace BpmOALeaveApi {
     startTime: number;
     endTime: number;
     createTime: Date;
-    startUserSelectAssignees?: Record<string, string[]>;
   }
 }
 

apps/web-antd/src/views/bpm/oa/leave/create.vue

@@ -28,10 +28,14 @@ const { query } = useRoute();
 const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const processTimeLineLoading = ref(false); // 审批流的加载中
 
+type LeaveCreateData = BpmOALeaveApi.Leave & {
+  startUserSelectAssignees?: Record<string, number[]>;
+};
+
 const processDefineKey = 'oa_leave'; // 流程定义 Key
-const startUserSelectTasks = ref<any>([]); // 发起人需要选择审批人的用户任务列表
+const startUserSelectTasks = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]); // 发起人需要选择审批人的用户任务列表
-const startUserSelectAssignees = ref<any>({}); // 发起人选择审批人的数据
+const startUserSelectAssignees = ref<Record<string, number[]>>({}); // 发起人选择审批人的数据
-const tempStartUserSelectAssignees = ref<any>({}); // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
+const tempStartUserSelectAssignees = ref<Record<string, number[]>>({}); // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
 const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]); // 审批节点信息
 const processDefinitionId = ref('');
 
@@ -65,23 +69,21 @@ async function onSubmit() {
   // 1.2 审批相关：校验指定审批人
   if (startUserSelectTasks.value?.length > 0) {
     for (const userTask of startUserSelectTasks.value) {
-      if (
+      const assignees = startUserSelectAssignees.value[userTask.id];
-        Array.isArray(startUserSelectAssignees.value[userTask.id]) &&
+      if (Array.isArray(assignees) && assignees.length === 0) {
-        startUserSelectAssignees.value[userTask.id].length === 0
-      ) {
         return message.warning(`请选择${userTask.name}的审批人`);
       }
     }
   }
 
   // 提交表单
-  const data = (await formApi.getValues()) as BpmOALeaveApi.Leave;
+  const data = (await formApi.getValues()) as LeaveCreateData;
   // 审批相关：设置指定审批人
   if (startUserSelectTasks.value?.length > 0) {
     data.startUserSelectAssignees = startUserSelectAssignees.value;
   }
   // 格式化开始时间和结束时间的值
-  const submitData: BpmOALeaveApi.Leave = {
+  const submitData: LeaveCreateData = {
     ...data,
     startTime: Number(data.startTime),
     endTime: Number(data.endTime),
@@ -144,11 +146,10 @@ async function getApprovalDetail() {
     // 恢复之前的选择审批人
     if (startUserSelectTasks.value?.length > 0) {
       for (const node of startUserSelectTasks.value) {
-        startUserSelectAssignees.value[node.id] =
+        const tempAssignees = tempStartUserSelectAssignees.value[node.id];
-          tempStartUserSelectAssignees.value[node.id] &&
+        startUserSelectAssignees.value[node.id] = tempAssignees?.length
-          tempStartUserSelectAssignees.value[node.id].length > 0
+          ? tempAssignees
-            ? tempStartUserSelectAssignees.value[node.id]
+          : [];
-            : [];
       }
     }
   } finally {
@@ -157,8 +158,8 @@ async function getApprovalDetail() {
 }
 
 /** 审批相关：选择发起人 */
-function selectUserConfirm(id: string, userList: any[]) {
+function selectUserConfirm(id: string, userList: Array<{ id: number }>) {
-  startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id);
+  startUserSelectAssignees.value[id] = userList.map((item) => item.id);
 }
 
 /** 获取请假数据，用于重新发起时自动填充 */

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue

@@ -19,6 +19,10 @@ const expanded = ref(false); // 是否展开
 function handleToggleFab() {
   expanded.value = !expanded.value;
 }
+
+function handleActive() {
+  expanded.value = false;
+}
 </script>
 <template>
   <div
@@ -35,6 +39,7 @@ function handleToggleFab() {
         v-for="(item, index) in property.list"
         :key="index"
         class="flex flex-col items-center"
+        @click="handleActive"
       >
         <Image :src="item.imgUrl" :width="28" :height="28" :preview="false">
           <template #error>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue

@@ -21,7 +21,9 @@ const spuList = ref<MallSpuApi.Spu[]>([]);
 watch(
   () => props.property.spuIds,
   async () => {
-    spuList.value = await getSpuDetailList(props.property.spuIds);
+    spuList.value = props.property.spuIds.length > 0
+      ? await getSpuDetailList(props.property.spuIds)
+      : [];
   },
   {
     immediate: true,

apps/web-antdv-next/src/api/bpm/oa/leave/index.ts

@@ -12,7 +12,6 @@ export namespace BpmOALeaveApi {
     startTime: number;
     endTime: number;
     createTime: Date;
-    startUserSelectAssignees?: Record<string, string[]>;
   }
 }
 

apps/web-antdv-next/src/views/bpm/oa/leave/create.vue

@@ -28,10 +28,14 @@ const { query } = useRoute();
 const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const processTimeLineLoading = ref(false); // 审批流的加载中
 
+type LeaveCreateData = BpmOALeaveApi.Leave & {
+  startUserSelectAssignees?: Record<string, number[]>;
+};
+
 const processDefineKey = 'oa_leave'; // 流程定义 Key
-const startUserSelectTasks = ref<any>([]); // 发起人需要选择审批人的用户任务列表
+const startUserSelectTasks = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]); // 发起人需要选择审批人的用户任务列表
-const startUserSelectAssignees = ref<any>({}); // 发起人选择审批人的数据
+const startUserSelectAssignees = ref<Record<string, number[]>>({}); // 发起人选择审批人的数据
-const tempStartUserSelectAssignees = ref<any>({}); // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
+const tempStartUserSelectAssignees = ref<Record<string, number[]>>({}); // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
 const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]); // 审批节点信息
 const processDefinitionId = ref('');
 
@@ -65,23 +69,21 @@ async function onSubmit() {
   // 1.2 审批相关：校验指定审批人
   if (startUserSelectTasks.value?.length > 0) {
     for (const userTask of startUserSelectTasks.value) {
-      if (
+      const assignees = startUserSelectAssignees.value[userTask.id];
-        Array.isArray(startUserSelectAssignees.value[userTask.id]) &&
+      if (Array.isArray(assignees) && assignees.length === 0) {
-        startUserSelectAssignees.value[userTask.id].length === 0
-      ) {
         return message.warning(`请选择${userTask.name}的审批人`);
       }
     }
   }
 
   // 提交表单
-  const data = (await formApi.getValues()) as BpmOALeaveApi.Leave;
+  const data = (await formApi.getValues()) as LeaveCreateData;
   // 审批相关：设置指定审批人
   if (startUserSelectTasks.value?.length > 0) {
     data.startUserSelectAssignees = startUserSelectAssignees.value;
   }
   // 格式化开始时间和结束时间的值
-  const submitData: BpmOALeaveApi.Leave = {
+  const submitData: LeaveCreateData = {
     ...data,
     startTime: Number(data.startTime),
     endTime: Number(data.endTime),
@@ -144,11 +146,10 @@ async function getApprovalDetail() {
     // 恢复之前的选择审批人
     if (startUserSelectTasks.value?.length > 0) {
       for (const node of startUserSelectTasks.value) {
-        startUserSelectAssignees.value[node.id] =
+        const tempAssignees = tempStartUserSelectAssignees.value[node.id];
-          tempStartUserSelectAssignees.value[node.id] &&
+        startUserSelectAssignees.value[node.id] = tempAssignees?.length
-          tempStartUserSelectAssignees.value[node.id].length > 0
+          ? tempAssignees
-            ? tempStartUserSelectAssignees.value[node.id]
+          : [];
-            : [];
       }
     }
   } finally {
@@ -157,8 +158,8 @@ async function getApprovalDetail() {
 }
 
 /** 审批相关：选择发起人 */
-function selectUserConfirm(id: string, userList: any[]) {
+function selectUserConfirm(id: string, userList: Array<{ id: number }>) {
-  startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id);
+  startUserSelectAssignees.value[id] = userList.map((item) => item.id);
 }
 
 /** 获取请假数据，用于重新发起时自动填充 */

apps/web-antdv-next/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue

@@ -19,6 +19,10 @@ const expanded = ref(false); // 是否展开
 function handleToggleFab() {
   expanded.value = !expanded.value;
 }
+
+function handleActive() {
+  expanded.value = false;
+}
 </script>
 <template>
   <div
@@ -35,9 +39,10 @@ function handleToggleFab() {
         v-for="(item, index) in property.list"
         :key="index"
         class="flex flex-col items-center"
+        @click="handleActive"
       >
         <Image :src="item.imgUrl" :width="28" :height="28" :preview="false">
-          <template #error>
+          <template #fallback>
             <div class="flex h-full w-full items-center justify-center">
               <IconifyIcon
                 icon="lucide:image"

apps/web-antdv-next/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue

@@ -21,7 +21,9 @@ const spuList = ref<MallSpuApi.Spu[]>([]);
 watch(
   () => props.property.spuIds,
   async () => {
-    spuList.value = await getSpuDetailList(props.property.spuIds);
+    spuList.value = props.property.spuIds.length > 0
+      ? await getSpuDetailList(props.property.spuIds)
+      : [];
   },
   {
     immediate: true,

apps/web-ele/src/api/bpm/oa/leave/index.ts

@@ -12,7 +12,6 @@ export namespace BpmOALeaveApi {
     startTime: number;
     endTime: number;
     createTime: Date;
-    startUserSelectAssignees?: Record<string, string[]>;
   }
 }
 

apps/web-ele/src/views/bpm/oa/leave/create.vue

@@ -35,10 +35,14 @@ const { query } = useRoute();
 const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const processTimeLineLoading = ref(false); // 审批流的加载中
 
+type LeaveCreateData = BpmOALeaveApi.Leave & {
+  startUserSelectAssignees?: Record<string, number[]>;
+};
+
 const processDefineKey = 'oa_leave'; // 流程定义 Key
-const startUserSelectTasks = ref<any>([]); // 发起人需要选择审批人的用户任务列表
+const startUserSelectTasks = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]); // 发起人需要选择审批人的用户任务列表
-const startUserSelectAssignees = ref<any>({}); // 发起人选择审批人的数据
+const startUserSelectAssignees = ref<Record<string, number[]>>({}); // 发起人选择审批人的数据
-const tempStartUserSelectAssignees = ref<any>({}); // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
+const tempStartUserSelectAssignees = ref<Record<string, number[]>>({}); // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
 const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]); // 审批节点信息
 const processDefinitionId = ref('');
 
@@ -72,23 +76,21 @@ async function onSubmit() {
   // 1.2 审批相关：校验指定审批人
   if (startUserSelectTasks.value?.length > 0) {
     for (const userTask of startUserSelectTasks.value) {
-      if (
+      const assignees = startUserSelectAssignees.value[userTask.id];
-        Array.isArray(startUserSelectAssignees.value[userTask.id]) &&
+      if (Array.isArray(assignees) && assignees.length === 0) {
-        startUserSelectAssignees.value[userTask.id].length === 0
-      ) {
         return ElMessage.warning(`请选择${userTask.name}的审批人`);
       }
     }
   }
 
   // 提交表单
-  const data = (await formApi.getValues()) as BpmOALeaveApi.Leave;
+  const data = (await formApi.getValues()) as LeaveCreateData;
   // 审批相关：设置指定审批人
   if (startUserSelectTasks.value?.length > 0) {
     data.startUserSelectAssignees = startUserSelectAssignees.value;
   }
   // 格式化开始时间和结束时间的值
-  const submitData: BpmOALeaveApi.Leave = {
+  const submitData: LeaveCreateData = {
     ...data,
     startTime: Number(data.startTime),
     endTime: Number(data.endTime),
@@ -151,11 +153,10 @@ async function getApprovalDetail() {
     // 恢复之前的选择审批人
     if (startUserSelectTasks.value?.length > 0) {
       for (const node of startUserSelectTasks.value) {
-        startUserSelectAssignees.value[node.id] =
+        const tempAssignees = tempStartUserSelectAssignees.value[node.id];
-          tempStartUserSelectAssignees.value[node.id] &&
+        startUserSelectAssignees.value[node.id] = tempAssignees?.length
-          tempStartUserSelectAssignees.value[node.id].length > 0
+          ? tempAssignees
-            ? tempStartUserSelectAssignees.value[node.id]
+          : [];
-            : [];
       }
     }
   } finally {
@@ -164,8 +165,8 @@ async function getApprovalDetail() {
 }
 
 /** 审批相关：选择发起人 */
-function selectUserConfirm(id: string, userList: any[]) {
+function selectUserConfirm(id: string, userList: Array<{ id: number }>) {
-  startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id);
+  startUserSelectAssignees.value[id] = userList.map((item) => item.id);
 }
 
 /** 获取请假数据，用于重新发起时自动填充 */

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue

@@ -19,6 +19,10 @@ const expanded = ref(false); // 是否展开
 function handleToggleFab() {
   expanded.value = !expanded.value;
 }
+
+function handleActive() {
+  expanded.value = false;
+}
 </script>
 <template>
   <div
@@ -35,6 +39,7 @@ function handleToggleFab() {
         v-for="(item, index) in property.list"
         :key="index"
         class="flex flex-col items-center"
+        @click="handleActive"
       >
         <ElImage :src="item.imgUrl" fit="contain" class="h-7 w-7">
           <template #error>

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue

@@ -21,7 +21,9 @@ const spuList = ref<MallSpuApi.Spu[]>([]);
 watch(
   () => props.property.spuIds,
   async () => {
-    spuList.value = await getSpuDetailList(props.property.spuIds);
+    spuList.value = props.property.spuIds.length > 0
+      ? await getSpuDetailList(props.property.spuIds)
+      : [];
   },
   {
     immediate: true,