bug-610

src/components/EditSupplier.vue

@@ -289,6 +289,17 @@ initTimeRangeValues();
 
 const formRef = ref<any>(null);
 
+// 营业时间字段（始终存在于表单中，通过样式控制显示/隐藏，避免动态增删表单项导致下拉失焦收起）
+const businessHoursField = {
+  field: 'businessTime',
+  title: '营业时间',
+  span: 24,
+  slots: {
+    title: 'businessTimeTitle',
+    default: 'businessHours',
+  },
+  className: 'business-hours-item',
+} as const;
 
 const baseFormItems = [
   {
@@ -412,6 +423,7 @@ const baseFormItems = [
     span: 24,
     itemRender: { name: 'VxeInput', props: { placeholder: '请输入', type: 'number', min: 0, max: 100 } },
   },
+  businessHoursField as any,
   // 营业状态 单选，营业、休息、停业
   {
     field: 'businessStatus',
@@ -423,44 +435,12 @@ const baseFormItems = [
   { align: 'center', span: 24, slots: { default: 'active' } },
 ];
 
-// 营业时间字段
-const businessHoursField = {
-  field: 'businessTime',
-  title: '营业时间',
-  span: 24,
-  slots: {
-    title: 'businessTimeTitle',
-    default: 'businessHours',
-  },
-} as const;
-
-// 更新表单项
-function updateFormItems() {
-  const items = [...baseFormItems];
-  const shouldShow = showBusinessHours.value;
-  // 查找分账比例和营业时间
-  const profitSharingIndex = items.findIndex(item => item.field === 'profitSharing');
-  const businessTimeIndex = items.findIndex(item => item.field === 'businessTime');
-
-  if (shouldShow) {
-    if (businessTimeIndex === -1 && profitSharingIndex !== -1) {
-      items.splice(profitSharingIndex + 1, 0, businessHoursField as any);
-    }
-  } else {
-    if (businessTimeIndex !== -1) {
-      items.splice(businessTimeIndex, 1);
-    }
-  }
-
-  formProps.items = items as any;
-}
-
 const formProps = reactive<VxeFormProps<FormModel>>({
   titleWidth: 100,
   titleAlign: 'right',
   titleColon: true,
   data: { ...props.data },
-  items: baseFormItems as any,
+  items: [...baseFormItems] as any,
   rules: {
     name: [{ required: true, message: '请输入供应商名称' }],
     detailAddress: [{ required: true, message: '请输入地址' }],
@@ -519,12 +499,12 @@ const formProps = reactive<VxeFormProps<FormModel>>({
 });
 
 // 判断是否显示营业时间（仅限"线下项目"有值时展示）
-const showBusinessHours = computed<boolean>(() => {
+const hasOfflineSelected = computed<boolean>(() => {
   const offlineCPTypes: string[] | undefined = formProps.data?.offlineCPTypes;
   return !!(offlineCPTypes && Array.isArray(offlineCPTypes) && offlineCPTypes.length > 0);
 });
+const showBusinessHours = hasOfflineSelected;
 
-const prevOfflineCPTypes = ref<string[] | undefined>(undefined);
 let wasCleared = false;
 
 // 重置营业时间为默认值
@@ -546,25 +526,20 @@ function resetBusinessHours() {
   });
 }
 
-// 监听线下项目变化，更新表单项，并在清除后再次选择时重置营业时间
-watch(() => formProps.data?.offlineCPTypes, (newVal) => {
-  const newHasValue = !!(newVal && Array.isArray(newVal) && newVal.length > 0);
-  const oldHasValue = !!(prevOfflineCPTypes.value && Array.isArray(prevOfflineCPTypes.value) && prevOfflineCPTypes.value.length > 0);
-
-
-  if (oldHasValue && !newHasValue) {
-    wasCleared = true;
-  }
-
-
-  if (wasCleared && !oldHasValue && newHasValue) {
-    resetBusinessHours();
-    wasCleared = false;
-  }
-
-  prevOfflineCPTypes.value = newVal ? [...newVal] : undefined;
-  updateFormItems();
-}, { deep: true });
+// 仅在“是否选中线下服务”发生变化时处理：
+// - 避免每次勾选/取消一个选项都触发表单 items 重建，导致下拉框自动收起
+// - 保持原逻辑：清空后再次选择时重置营业时间；并联动显示/隐藏营业时间字段
+watch(
+  hasOfflineSelected,
+  (newHasValue, oldHasValue) => {
+    if (oldHasValue && !newHasValue) wasCleared = true;
+    if (wasCleared && !oldHasValue && newHasValue) {
+      resetBusinessHours();
+      wasCleared = false;
+    }
+  },
+  { immediate: true }
+);
 
 const formEmits: VxeFormListeners<FormModel> = {
   submit({ data }) {
@@ -675,15 +650,11 @@ onBeforeMount(async () => {
   if (props.data?.id) load(props.data);
   await getOnlineCPList();
   await getOfflineCPList();
-  // 初始化线下服务
-  prevOfflineCPTypes.value = formProps.data?.offlineCPTypes ? [...formProps.data.offlineCPTypes] : undefined;
-  // 初始化表单
-  updateFormItems();
 });
 </script>
 
 <template>
-  <div class="form-container">
+  <div class="form-container" :class="{ 'business-hours-hidden': !showBusinessHours }">
     <vxe-form ref="formRef" v-bind="formProps" v-on="formEmits" :loading="submitting">
       <template #initiate>
         <a-tree-select style="width: 100%" :show-checked-strategy="SHOW_ALL" tree-check-strictly :tree-data="branch"
@@ -728,6 +699,12 @@ onBeforeMount(async () => {
   padding: 20px;
 }
 
+.form-container.business-hours-hidden {
+  :deep(.business-hours-item) {
+    display: none !important;
+  }
+}
+
 .business-hours-container {
   width: 100%;
 }