修改下单页面

src/views/order/orderMain/components/chooseProduct.vue

@@ -51,9 +51,14 @@
           <span v-else>暂无图片</span>
         </template>
       </el-table-column>
-      <el-table-column prop="itemName" label="商品信息" min-width="200" show-overflow-tooltip />
-      <el-table-column prop="taxRate" label="税率" width="100">
-        <template #default="scope"> {{ scope.row.taxRate }}% </template>
+      <el-table-column label="商品信息" min-width="200">
+        <template #default="scope">
+          <div>{{ scope.row.itemName }}</div>
+          <div>品牌: {{ scope.row.brandName }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="税率" width="100">
+        <template #default="scope"> 增值税{{ formatTaxRate(scope.row.taxRate) }}% </template>
       </el-table-column>
       <el-table-column prop="unit" label="单位" width="80" />
       <el-table-column prop="minSellingPrice" label="最低售价" width="100" />
@@ -124,6 +129,14 @@ const handleDialogChange = (val: boolean) => {
   emit('update:modelValue', val);
 };
 
+// 格式化税率
+const formatTaxRate = (taxRate: number | string | undefined): string => {
+  if (taxRate === undefined || taxRate === null) {
+    return '0';
+  }
+  return Number(taxRate).toFixed(0);
+};
+
 // 对话框打开时触发
 const handleOpen = () => {
   loadProductList();

src/views/order/orderMain/components/selectProductDetail.vue

@@ -0,0 +1,149 @@
+<template>
+  <el-dialog v-model="visible" title="查询商品明细" width="800px" :before-close="handleClose">
+    <div class="product-detail">
+      <!-- SKU价格 -->
+      <div class="section">
+        <div class="section-title">SKU价格</div>
+        <el-row :gutter="20" class="price-row">
+          <el-col :span="8">
+            <div class="price-item">
+              <span class="label">市场价</span>
+              <span class="value">{{ productDetail.marketPrice || '0.00' }}</span>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="price-item">
+              <span class="label">平台售价</span>
+              <span class="value">{{ productDetail.platformPrice || '0.00' }}</span>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="price-item">
+              <span class="label">协议价</span>
+              <span class="value">{{ productDetail.agreementPrice || '0.00' }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" class="price-row">
+          <el-col :span="8">
+            <div class="price-item">
+              <span class="label">最低售价</span>
+              <span class="value">{{ productDetail.minSellingPrice || '0.00' }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <!-- 库存信息 -->
+      <div class="section">
+        <div class="section-title">库存信息</div>
+        <el-row :gutter="20" class="stock-row">
+          <el-col :span="12">
+            <div class="stock-item">
+              <span class="label">总库存量</span>
+              <span class="value">{{ productDetail.totalStock || '0' }}</span>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="stock-item">
+              <span class="label">当期仓库存量</span>
+              <span class="value">{{ productDetail.currentWarehouseStock || '0' }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+interface ProductDetail {
+  marketPrice?: number | string;
+  platformPrice?: number | string;
+  agreementPrice?: number | string;
+  minSellingPrice?: number | string;
+  totalStock?: number | string;
+  currentWarehouseStock?: number | string;
+}
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  productData: {
+    type: Object as () => ProductDetail,
+    default: () => ({})
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const visible = ref(false);
+const productDetail = ref<ProductDetail>({});
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    visible.value = val;
+    if (val) {
+      productDetail.value = { ...props.productData };
+    }
+  }
+);
+
+watch(visible, (val) => {
+  emit('update:modelValue', val);
+});
+
+const handleClose = () => {
+  visible.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.product-detail {
+  padding: 10px 0;
+
+  .section {
+    margin-bottom: 30px;
+
+    .section-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #303133;
+      margin-bottom: 20px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #e4e7ed;
+    }
+
+    .price-row,
+    .stock-row {
+      margin-bottom: 15px;
+    }
+
+    .price-item,
+    .stock-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 16px;
+      background-color: #f5f7fa;
+      border-radius: 4px;
+
+      .label {
+        font-size: 14px;
+        color: #606266;
+      }
+
+      .value {
+        font-size: 14px;
+        color: #303133;
+        font-weight: 500;
+      }
+    }
+  }
+}
+</style>

src/views/order/orderMain/index.vue

@@ -228,7 +228,12 @@
             <span v-else>暂无图片</span>
           </template>
         </el-table-column>
-        <el-table-column prop="productName" label="产品信息" align="center" />
+        <el-table-column label="商品信息">
+          <template #default="scope">
+            <div>{{ scope.row.productName }}</div>
+            <div>品牌: {{ scope.row.brandName }}</div>
+          </template>
+        </el-table-column>
         <el-table-column prop="taxRate" label="税率" align="center">
           <template #default="scope"> 增值税{{ scope.row.taxRate }}% </template>
         </el-table-column>
@@ -261,6 +266,7 @@
         <el-table-column label="操作" align="center">
           <template #default="scope">
             <el-button link type="danger" size="small" @click="handleDeleteProduct(scope.$index)">删除</el-button>
+            <el-button link type="danger" size="small" @click="handleSelect(scope.$index)">查询</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -300,6 +306,9 @@
 
     <!-- 选择商品对话框 -->
     <ChooseProduct v-model="showProductDialog" @confirm="handleProductConfirm" />
+
+    <!-- 查询商品明细对话框 -->
+    <SelectProductDetail v-model="showProductDetailDialog" :product-data="currentProductDetail" />
   </div>
 </template>
 
@@ -319,6 +328,7 @@ import { ShippingAddressVO, ShippingAddressQuery } from '@/api/customer/customer
 import ChooseAddress from './components/chooseAddress.vue';
 import AddAddress from './components/addressDialog.vue';
 import ChooseProduct from './components/chooseProduct.vue';
+import SelectProductDetail from './components/selectProductDetail.vue';
 import { BaseVO } from '@/api/product/base/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -350,6 +360,10 @@ const showAddAddressDialog = ref(false);
 // 选择商品对话框
 const showProductDialog = ref(false);
 
+// 查询商品明细对话框
+const showProductDetailDialog = ref(false);
+const currentProductDetail = ref({});
+
 // 计算商品总数（所有商品的数量之和）
 const totalQuantity = computed(() => {
   return productList.value.reduce((sum, item) => {
@@ -605,6 +619,7 @@ const submitForm = () => {
           productUnit: product.unit, // 产品单位
           productImage: product.productImage, // 产品图片
           platformPrice: product.price, // 平台价格（单价）
+          marketPrice: product.marketPrice,
           minOrderQuantity: product.minOrderQuantity, // 最小起订量
           orderPrice: product.unitPrice, // 订单单价（含税单价）
           orderQuantity: product.quantity, // 订购数量
@@ -707,6 +722,7 @@ const handleProductConfirm = (product: BaseVO) => {
     productImage: product.productImage, // 商品图片
     productName: product.itemName, // 产品信息
     taxRate: product.taxRate || 0, // 税率
+    marketPrice: product.marketPrice || 0,
     unit: product.unitId, // 单位
     price: product.standardPrice || 0, // 单价（使用平档价）
     certificatePrice: product.minSellingPrice || 0, // 最低售价
@@ -725,6 +741,27 @@ const handleDeleteProduct = (index: number) => {
   proxy?.$modal.msgSuccess('删除成功');
 };
 
+/** 查询商品明细 */
+const handleSelect = (index: number) => {
+  if (form.value.warehouseId === undefined) {
+    proxy?.$modal.msgWarning('请先选择仓库');
+    return;
+  }
+  const product = productList.value[index];
+  if (product) {
+    // 组装商品明细数据
+    currentProductDetail.value = {
+      marketPrice: product.marketPrice || 0, // 市场价（使用平档价）
+      platformPrice: product.unitPrice || 0, // 平台售价（使用含税单价）
+      agreementPrice: 0, // 协议价（暂无数据）
+      minSellingPrice: product.certificatePrice || 0, // 最低售价
+      totalStock: 0, // 总库存量（需要从后端获取）
+      currentWarehouseStock: 0 // 当期仓库存量（需要从后端获取）
+    };
+    showProductDetailDialog.value = true;
+  }
+};
+
 /** 含税单价变化时验证最低售价 */
 const handleUnitPriceChange = (index: number) => {
   const product = productList.value[index];