feat(订单表单): 添加数量格式化功能并优化表格显示

src/components/order-form/material-detail-option.js

@@ -144,7 +144,8 @@ export function getMaterialDetailOption(isEditMode = false) {
         type: 'number',
         precision: 2,
         width: 100,
-        align: 'right'
+        align: 'right',
+        slot: true
       },
       {
         label: '订单数量',
@@ -161,7 +162,8 @@ export function getMaterialDetailOption(isEditMode = false) {
         type: 'number',
         precision: 2,
         width: 100,
-        align: 'right'
+        align: 'right',
+        slot: true
       },
       {
         label: '单价',
@@ -170,6 +172,7 @@ export function getMaterialDetailOption(isEditMode = false) {
         precision: 2,
         width: 100,
         align: 'right',
+        slot: true,
         rules: [{
           required: true,
           message: '请输入单价',

src/components/order-form/material-detail-table.vue

@@ -39,6 +39,29 @@
         @row-del="handleRowDelete"
         @row-update="handleRowUpdate"
       >
+        <!-- 可用数量自定义模板 -->
+        <template slot="availableQuantity" slot-scope="scope">
+          <span>{{ formatQuantity(scope.row.availableQuantity) }}</span>
+        </template>
+
+        <!-- 确认数量自定义模板 -->
+        <template slot="confirmQuantity" slot-scope="scope">
+          <span>{{ formatQuantity(scope.row.confirmQuantity) }}</span>
+        </template>
+
+        <!-- 单价自定义模板 -->
+        <template slot="unitPrice" slot-scope="scope">
+          <el-input
+            v-if="editMode"
+            v-model="scope.row.unitPrice"
+            size="mini"
+            style="width: 100%"
+            placeholder="请输入单价"
+            @input="validateFloatInput($event, scope.row, 'unitPrice')"
+            @blur="handleUnitPriceChange(scope.row, scope.$index)"
+          />
+          <span v-else>{{ formatQuantity(scope.row.unitPrice) }}</span>
+        </template>
         <!-- 订单数量自定义模板 -->
         <template slot="orderQuantity" slot-scope="scope">
           <el-input
@@ -50,7 +73,7 @@
             @input="validateIntegerInput($event, scope.row, 'orderQuantity')"
             @blur="handleQuantityChange(scope.row, scope.$index)"
           />
-          <span v-else>{{ scope.row.orderQuantity }}</span>
+          <span v-else>{{ formatQuantity(scope.row.orderQuantity, true) }}</span>
         </template>
 
         <!-- 税率自定义模板 -->
@@ -64,7 +87,7 @@
             @input="validateFloatInput($event, scope.row, 'taxRate', 0, 100)"
             @blur="handleTaxRateChange(scope.row, scope.$index)"
           />
-          <span v-else>{{ scope.row.taxRate }}%</span>
+          <span v-else>{{ formatQuantity(scope.row.taxRate) }}%</span>
         </template>
 
         <!-- 税额自定义模板 -->
@@ -78,7 +101,7 @@
             @input="validateFloatInput($event, scope.row, 'taxAmount')"
             @blur="handleTaxAmountChange(scope.row, scope.$index)"
           />
-          <span v-else>{{ scope.row.taxAmount }}</span>
+          <span v-else>{{ formatQuantity(scope.row.taxAmount) }}</span>
         </template>
 
         <!-- 总金额自定义模板 -->
@@ -92,7 +115,7 @@
             @input="validateFloatInput($event, scope.row, 'totalAmount')"
             @blur="handleTotalAmountChange(scope.row, scope.$index)"
           />
-          <span v-else>{{ scope.row.totalAmount }}</span>
+          <span v-else>{{ formatQuantity(scope.row.totalAmount) }}</span>
         </template>
 
         <!-- 明细状态列自定义渲染 -->
@@ -147,7 +170,7 @@ import {
   getMaterialDetailStatusColor
 } from './constants'
 import MaterialImportDialog from './material-import-dialog.vue'
-import { formatAmount } from './utils'
+import { formatAmount, formatQuantity } from './utils'
 import { MaterialDetailDataSource } from './constants'
 
 /**
@@ -474,6 +497,15 @@ export default {
      * @returns {string} 格式化后的金额字符串
      */
     formatAmount,
+    
+    /**
+     * 格式化数量显示
+     * @description 使用公共工具函数格式化数量
+     * @param {number|string|null|undefined} quantity - 数量数值
+     * @param {boolean} [isInteger=false] - 是否为整数类型
+     * @returns {string} 格式化后的数量字符串
+     */
+    formatQuantity,
 
     /**
      * 获取状态标签类型
@@ -596,6 +628,19 @@ export default {
     },
 
     /**
+     * 处理单价变更
+     * @description 当单价发生变化时，自动计算总金额和税额
+     * @param {MaterialDetailRecord} row - 行数据
+     * @param {number} index - 行索引
+     * @returns {void}
+     */
+    handleUnitPriceChange(row, index) {
+      const calculatedRow = this.calculateAmounts(row)
+      Object.assign(row, calculatedRow)
+      this.$emit('material-update', { row, index })
+    },
+
+    /**
      * 处理税额变更
      * @description 当税额手动修改时，反推税率
      * @param {MaterialDetailRecord} row - 行数据

src/components/order-form/utils.js

@@ -20,17 +20,26 @@ export function formatAmount(amount) {
 
 /**
  * 格式化数量显示
- * @description 将数字数量格式化为字符串，保留4位小数并去除尾随零
+ * @description 将数字数量格式化为字符串，整数不显示小数点，浮点数保留2位小数
  * @param {number|string|null|undefined} quantity - 数量数值
+ * @param {boolean} [isInteger=false] - 是否为整数类型
  * @returns {string} 格式化后的数量字符串
  * @example
- * formatQuantity(123.4567) // 返回 "123.4567"
+ * formatQuantity(123.4567) // 返回 "123.46"
  * formatQuantity(100.0000) // 返回 "100"
+ * formatQuantity(123, true) // 返回 "123"
  * formatQuantity(null) // 返回 "0"
  */
-export function formatQuantity(quantity) {
+export function formatQuantity(quantity, isInteger = false) {
   const numQuantity = Number(quantity || 0)
-  return numQuantity.toFixed(4).replace(/\.?0+$/, '')
+  
+  if (isInteger) {
+    // 整数格式化：四舍五入到整数
+    return Math.round(numQuantity).toString()
+  } else {
+    // 浮点数格式化：保留2位小数
+    return numQuantity.toFixed(2)
+  }
 }
 
 /**