履约验收

src/views/finance/purchasingrequisition/accept/AcceptCommonForm.vue

@@ -1,17 +1,17 @@
 <template>
-  <el-form ref="formRef" :model="form" :rules="rules" label-width="140px" class="accept-common-form compact-form">
+  <el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
     <el-row :gutter="24">
-      <el-col :span="8">
+      <el-col :span="8" class="mb20">
         <el-form-item label="项目名称">
           <el-input :model-value="projectName || form.projectName" readonly placeholder="-" />
         </el-form-item>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" class="mb20">
         <el-form-item label="需求部门">
           <el-input :model-value="deptName || form.deptName" readonly placeholder="-" />
         </el-form-item>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" class="mb20">
         <el-form-item label="是否签订合同" prop="hasContract">
           <el-radio-group v-model="form.hasContract">
             <el-radio label="0">否</el-radio>
@@ -19,12 +19,12 @@
           </el-radio-group>
         </el-form-item>
       </el-col>
-      <el-col :span="12" v-if="form.hasContract === '1'">
+      <el-col :span="8" class="mb20" v-if="form.hasContract === '1'">
         <el-form-item label="合同" prop="contractId">
           <el-input v-model="form.contractId" placeholder="请选择合同（待对接合同接口）" clearable />
         </el-form-item>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" class="mb20">
         <el-form-item label="是否分期验收" prop="isInstallment">
           <el-radio-group v-model="form.isInstallment">
             <el-radio label="0">否</el-radio>
@@ -32,27 +32,27 @@
           </el-radio-group>
         </el-form-item>
       </el-col>
-      <el-col :span="12" v-if="form.isInstallment === '1'">
+      <el-col :span="8" class="mb20" v-if="form.isInstallment === '1'">
         <el-form-item label="分期次数" prop="totalPhases">
           <el-input-number v-model="form.totalPhases" :min="1" :max="99" placeholder="请输入" style="width: 100%" />
         </el-form-item>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" class="mb20">
         <el-form-item label="供应商名称" prop="supplierName">
           <el-input v-model="form.supplierName" placeholder="选择合同后自动带出" clearable />
         </el-form-item>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" class="mb20">
         <el-form-item label="供应商联系人及电话" prop="supplierContact">
           <el-input v-model="form.supplierContact" placeholder="请输入" clearable />
         </el-form-item>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" class="mb20">
         <el-form-item label="采购人员" prop="purchaserId">
           <org-selector v-model:orgList="purchaserList" type="user" :multiple="false" @update:orgList="onPurchaserChange" />
         </el-form-item>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" class="mb20">
         <el-form-item label="资产管理员" prop="assetAdminId">
           <org-selector v-model:orgList="assetAdminList" type="user" :multiple="false" @update:orgList="onAssetAdminChange" />
         </el-form-item>
@@ -69,6 +69,8 @@ const props = defineProps<{
   modelValue: Record<string, any>
   projectName?: string
   deptName?: string
+  /** 每次打开弹窗时变化，用于强制重置内部 form */
+  resetKey?: number
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -91,9 +93,8 @@ const form = reactive({
   ...props.modelValue,
 })
 
-watch(() => props.modelValue, (val) => {
+const syncFormFromModel = (val: Record<string, any> | undefined) => {
   Object.assign(form, val || {})
-  // 人员选择回显
   if (form.purchaserId && form.purchaserName) {
     purchaserList.value = [{ id: form.purchaserId, name: form.purchaserName, type: 'user' }]
   } else {
@@ -104,7 +105,11 @@ watch(() => props.modelValue, (val) => {
   } else {
     assetAdminList.value = []
   }
-}, { deep: true, immediate: true })
+}
+
+watch(() => props.modelValue, syncFormFromModel, { deep: true, immediate: true })
+// resetKey 变化时强制用 modelValue 覆盖内部 form
+watch(() => props.resetKey, () => syncFormFromModel(props.modelValue))
 watch(form, () => emit('update:modelValue', { ...form }), { deep: true })
 
 const onPurchaserChange = (list: any[]) => {
@@ -140,26 +145,7 @@ defineExpose({ validate, form })
 </script>
 
 <style scoped>
-.accept-common-form {
-  padding: 0 4px;
-}
-.accept-common-form :deep(.el-form-item) {
-  margin-bottom: 24px;
-}
-/* 紧凑表单样式 */
-.compact-form {
-  :deep(.el-form-item) {
-    margin-bottom: 16px;
-  }
-  
-  :deep(.el-form-item__label) {
-    padding-right: 12px;
-    font-size: 14px;
-  }
-  
-  :deep(.el-input__inner),
-  :deep(.el-textarea__inner) {
-    font-size: 14px;
-  }
+.mb20 {
+  margin-bottom: 20px;
 }
 </style>