修改

src/views/bill/statementOrder/addDrawer.vue

@@ -48,7 +48,7 @@
         <el-row :gutter="20">
           <el-col :span="8">
             <el-form-item label="对账单金额" prop="amount">
-              <el-input v-model="form.amount" disabled />
+              <el-input :model-value="amountDisplay" disabled />
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -130,7 +130,26 @@
           <span style="color: #409eff; font-weight: 600">商品清单</span>
         </el-divider>
 
-        <el-table :data="pagedProductList" border style="width: 100%; margin-bottom: 20px">
+        <div class="table-actions" style="margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center">
+          <span v-if="isProductSelectMode">已选 {{ selectedProductCount }} / {{ form.productList?.length || 0 }} 个商品</span>
+          <span v-else>共 {{ form.productList?.length || 0 }} 个商品</span>
+          <div>
+            <template v-if="isProductSelectMode">
+              <el-button @click="handleCancelProductSelection">取消</el-button>
+            </template>
+            <el-button v-else type="primary" icon="Plus" @click="handleSelectProducts">选择商品</el-button>
+          </div>
+        </div>
+
+        <el-table
+          ref="productTableRef"
+          :data="pagedProductList"
+          border
+          style="width: 100%; margin-bottom: 20px"
+          :row-key="(row: any) => row.id || `${row.orderNo}_${row.productNo}_${row.quantity || 0}`"
+          @selection-change="handleProductSelectionChange"
+        >
+          <el-table-column v-if="isProductSelectMode" type="selection" width="50" align="center" :reserve-selection="true" />
           <el-table-column
             type="index"
             label="序号"
@@ -275,7 +294,7 @@ const form = ref<
 >({ ...initFormData });
 
 const rules = reactive({
-  customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
+  customerId: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
   statementSelfId: [{ required: true, message: '请选择对账人', trigger: 'blur' }],
   statementSelfPhone: [
     { required: true, message: '请输入对账人手机号', trigger: 'blur' },
@@ -305,6 +324,16 @@ const orderMainDrawerRef = ref<any>();
 const uploadAction = import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload';
 const currentSelectedOrders = ref<OrderDeliverVO[]>([]);
 const preloadedOrders = ref<OrderDeliverVO[]>([]); // 预加载的订单列表
+const productTableRef = ref<any>(); // 商品表格引用
+const selectedProductIds = ref<Set<string>>(new Set()); // 选中的商品ID集合
+const isProductSelectMode = ref(false); // 是否处于商品选择模式
+const productsToSubmit = ref<any[]>([]); // 最终要提交的商品列表
+
+/** 已选商品数量 */
+const selectedProductCount = computed(() => selectedProductIds.value.size);
+
+/** 生成商品唯一键 */
+const getProductKey = (item: any) => item.id || `${item.orderNo}_${item.productNo}_${item.quantity || 0}`;
 
 /** 计算当前页的商品列表 */
 const pagedProductList = computed(() => {
@@ -312,6 +341,35 @@ const pagedProductList = computed(() => {
   const end = start + productPage.pageSize;
   return form.value.productList?.slice(start, end) || [];
 });
+
+/** 计算对账单金额（根据选中状态） */
+const calculatedAmount = computed(() => {
+  let total = 0;
+  if (form.value.productList && form.value.productList.length > 0) {
+    if (isProductSelectMode.value && selectedProductIds.value.size > 0) {
+      // 选择模式：只计算选中的商品
+      form.value.productList.forEach((item: any) => {
+        if (selectedProductIds.value.has(getProductKey(item))) {
+          total += Number(item.quantity || 0) * Number(item.unitPrice || 0);
+        }
+      });
+    } else {
+      // 非选择模式：计算所有商品
+      form.value.productList.forEach((item: any) => {
+        total += Number(item.quantity || 0) * Number(item.unitPrice || 0);
+      });
+    }
+  }
+  return total.toFixed(2);
+});
+
+/** 金额显示文本 */
+const amountDisplay = computed(() => {
+  if (isProductSelectMode.value && selectedProductIds.value.size > 0) {
+    return `${calculatedAmount.value}`;
+  }
+  return calculatedAmount.value;
+});
 const preloadedTotal = ref(0); // 预加载的订单总数
 
 /** 打开新增/编辑对账详情抽屉 */
@@ -515,6 +573,23 @@ const handleOrderSelected = (data: any) => {
     if (products && products.length > 0) {
       form.value.productList = products;
       productPage.total = products.length;
+
+      // 默认全选所有商品
+      nextTick(() => {
+        selectedProductIds.value.clear();
+        products.forEach((item: any) => {
+          selectedProductIds.value.add(item.id || item.productNo);
+        });
+        // 更新表格选中状态
+        productTableRef.value?.clearSelection?.();
+        nextTick(() => {
+          pagedProductList.value.forEach((item: any) => {
+            if (selectedProductIds.value.has(item.id || item.productNo)) {
+              productTableRef.value?.toggleRowSelection?.(item, true);
+            }
+          });
+        });
+      });
     }
   }
 };
@@ -545,6 +620,78 @@ const handleProductCurrentChange = (val: number) => {
   productPage.pageNum = val;
 };
 
+/** 商品选择变更 */
+const handleProductSelectionChange = (selection: any[]) => {
+  // 只在非初始化时更新已选ID集合
+  if (!isInitializingSelection.value) {
+    selectedProductIds.value.clear();
+    selection.forEach((item) => {
+      selectedProductIds.value.add(getProductKey(item));
+    });
+  }
+};
+
+const isInitializingSelection = ref(false); // 是否正在初始化选中状态
+
+/** 全选所有商品 */
+const handleSelectAllProducts = () => {
+  if (form.value.productList && form.value.productList.length > 0) {
+    // 选中所有商品
+    productTableRef.value?.toggleAllSelection?.();
+  }
+};
+
+/** 清空选择 */
+const handleClearSelection = () => {
+  selectedProductIds.value.clear();
+  productTableRef.value?.clearSelection?.();
+};
+
+/** 进入商品选择模式 */
+const handleSelectProducts = () => {
+  if (!form.value.productList || form.value.productList.length === 0) {
+    proxy?.$modal.msgWarning('请先选择订单');
+    return;
+  }
+  isProductSelectMode.value = true;
+  selectedProductIds.value.clear();
+  // 默认全部选中
+  form.value.productList.forEach((item: any) => {
+    selectedProductIds.value.add(getProductKey(item));
+  });
+  // 刷新表格选中状态（避免触发 handleProductSelectionChange）
+  isInitializingSelection.value = true;
+  nextTick(() => {
+    productTableRef.value?.clearSelection?.();
+    pagedProductList.value.forEach((item: any) => {
+      if (selectedProductIds.value.has(getProductKey(item))) {
+        productTableRef.value?.toggleRowSelection?.(item, true);
+      }
+    });
+    isInitializingSelection.value = false;
+  });
+};
+
+/** 确认商品选择 */
+const handleConfirmProductSelection = () => {
+  if (selectedProductIds.value.size === 0) {
+    proxy?.$modal.msgWarning('请至少选择一个商品');
+    return;
+  }
+  // 保存要提交的商品列表
+  productsToSubmit.value = form.value.productList.filter((item: any) => selectedProductIds.value.has(getProductKey(item)));
+  isProductSelectMode.value = false;
+  productTableRef.value?.clearSelection?.();
+  proxy?.$modal.msgSuccess(`已选择 ${selectedProductIds.value.size} 个商品`);
+};
+
+/** 取消商品选择 */
+const handleCancelProductSelection = () => {
+  isProductSelectMode.value = false;
+  selectedProductIds.value.clear();
+  productTableRef.value?.clearSelection?.();
+};
+
 /** 上传前校验 */
 const beforeUpload = (file: any) => {
   const isLt50M = file.size / 1024 / 1024 < 50;
@@ -634,19 +781,41 @@ const handlePreviewFile = (file: any) => {
 /** 提交表单 */
 const handleSubmit = async () => {
   if (!formRef.value) return;
-  console.log(form.value);
 
   await formRef.value.validate(async (valid) => {
     if (valid) {
       buttonLoading.value = true;
       try {
+        const submitData = { ...form.value };
+
+        // 根据是否处于商品选择模式来决定提交哪些商品
+        if (submitData.productList && submitData.productList.length > 0) {
+          if (isProductSelectMode.value) {
+            // 选择模式：根据 selectedProductIds 过滤选中的商品
+            if (selectedProductIds.value.size === 0) {
+              proxy?.$modal.msgWarning('请先选择商品');
+              buttonLoading.value = false;
+              return;
+            }
+            submitData.productList = submitData.productList.filter((item: any) => selectedProductIds.value.has(getProductKey(item)));
+          }
+          // 非选择模式：提交所有商品
+
+          // 重新计算对账金额
+          let totalAmount = 0;
+          submitData.productList.forEach((item: any) => {
+            totalAmount += Number(item.quantity || 0) * Number(item.unitPrice || 0);
+          });
+          submitData.amount = totalAmount;
+        }
+
         if (isEdit.value) {
           // 编辑模式
-          await updateStatementOrder(form.value);
+          await updateStatementOrder(submitData);
           proxy?.$modal.msgSuccess('修改成功');
         } else {
           // 新增模式
-          await addStatementOrder(form.value);
+          await addStatementOrder(submitData);
           proxy?.$modal.msgSuccess('新增成功');
         }
         drawer.visible = false;