|  | @@ -0,0 +1,144 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class="order-item-table">
 | 
	
		
			
				|  |  | +    <el-table
 | 
	
		
			
				|  |  | +      :data="itemData"
 | 
	
		
			
				|  |  | +      :loading="loading"
 | 
	
		
			
				|  |  | +      border
 | 
	
		
			
				|  |  | +      size="small"
 | 
	
		
			
				|  |  | +      style="width: 100%"
 | 
	
		
			
				|  |  | +    >
 | 
	
		
			
				|  |  | +      <el-table-column prop="itemCode" label="物料编码" width="120" />
 | 
	
		
			
				|  |  | +      <el-table-column prop="itemName" label="物料名称" width="150" />
 | 
	
		
			
				|  |  | +      <el-table-column prop="specs" label="规格型号" width="120" />
 | 
	
		
			
				|  |  | +      <el-table-column prop="mainItemCategoryName" label="主物料分类" width="120" />
 | 
	
		
			
				|  |  | +      <el-table-column prop="warehouseName" label="仓库名称" width="120" />
 | 
	
		
			
				|  |  | +      <el-table-column prop="availableQuantity" label="可用数量" width="100" align="right">
 | 
	
		
			
				|  |  | +        <template slot-scope="scope">
 | 
	
		
			
				|  |  | +          {{ scope.row.availableQuantity | numberFormat(4) }}
 | 
	
		
			
				|  |  | +        </template>
 | 
	
		
			
				|  |  | +      </el-table-column>
 | 
	
		
			
				|  |  | +      <el-table-column prop="orderQuantity" label="订单数量" width="100" align="right">
 | 
	
		
			
				|  |  | +        <template slot-scope="scope">
 | 
	
		
			
				|  |  | +          {{ scope.row.orderQuantity | numberFormat(4) }}
 | 
	
		
			
				|  |  | +        </template>
 | 
	
		
			
				|  |  | +      </el-table-column>
 | 
	
		
			
				|  |  | +      <el-table-column prop="confirmQuantity" label="确认数量" width="100" align="right">
 | 
	
		
			
				|  |  | +        <template slot-scope="scope">
 | 
	
		
			
				|  |  | +          {{ scope.row.confirmQuantity | numberFormat(4) }}
 | 
	
		
			
				|  |  | +        </template>
 | 
	
		
			
				|  |  | +      </el-table-column>
 | 
	
		
			
				|  |  | +      <el-table-column prop="unitPrice" label="单价" width="100" align="right">
 | 
	
		
			
				|  |  | +        <template slot-scope="scope">
 | 
	
		
			
				|  |  | +          ¥{{ scope.row.unitPrice | numberFormat(2) }}
 | 
	
		
			
				|  |  | +        </template>
 | 
	
		
			
				|  |  | +      </el-table-column>
 | 
	
		
			
				|  |  | +      <el-table-column prop="taxRate" label="税率" width="80" align="right">
 | 
	
		
			
				|  |  | +        <template slot-scope="scope">
 | 
	
		
			
				|  |  | +          {{ scope.row.taxRate | numberFormat(2) }}%
 | 
	
		
			
				|  |  | +        </template>
 | 
	
		
			
				|  |  | +      </el-table-column>
 | 
	
		
			
				|  |  | +      <el-table-column prop="taxAmount" label="税额" width="100" align="right">
 | 
	
		
			
				|  |  | +        <template slot-scope="scope">
 | 
	
		
			
				|  |  | +          ¥{{ scope.row.taxAmount | numberFormat(2) }}
 | 
	
		
			
				|  |  | +        </template>
 | 
	
		
			
				|  |  | +      </el-table-column>
 | 
	
		
			
				|  |  | +      <el-table-column prop="totalAmount" label="总金额" width="100" align="right">
 | 
	
		
			
				|  |  | +        <template slot-scope="scope">
 | 
	
		
			
				|  |  | +          ¥{{ scope.row.totalAmount | numberFormat(2) }}
 | 
	
		
			
				|  |  | +        </template>
 | 
	
		
			
				|  |  | +      </el-table-column>
 | 
	
		
			
				|  |  | +      <el-table-column prop="itemStatus" label="明细状态" width="100" align="center">
 | 
	
		
			
				|  |  | +        <template slot-scope="scope">
 | 
	
		
			
				|  |  | +          <el-tag
 | 
	
		
			
				|  |  | +            :type="getStatusType(scope.row.itemStatus)"
 | 
	
		
			
				|  |  | +            size="mini"
 | 
	
		
			
				|  |  | +          >
 | 
	
		
			
				|  |  | +            {{ getStatusText(scope.row.itemStatus) }}
 | 
	
		
			
				|  |  | +          </el-tag>
 | 
	
		
			
				|  |  | +        </template>
 | 
	
		
			
				|  |  | +      </el-table-column>
 | 
	
		
			
				|  |  | +    </el-table>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +import { getList } from '@/api/order/order-item'
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  name: 'OrderItemTable',
 | 
	
		
			
				|  |  | +  props: {
 | 
	
		
			
				|  |  | +    orderId: {
 | 
	
		
			
				|  |  | +      type: [String, Number],
 | 
	
		
			
				|  |  | +      required: true
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  data() {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      itemData: [],
 | 
	
		
			
				|  |  | +      loading: false
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  watch: {
 | 
	
		
			
				|  |  | +    orderId: {
 | 
	
		
			
				|  |  | +      handler(newVal) {
 | 
	
		
			
				|  |  | +        if (newVal) {
 | 
	
		
			
				|  |  | +          this.loadItemData()
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      immediate: true
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    async loadItemData() {
 | 
	
		
			
				|  |  | +      if (!this.orderId) return
 | 
	
		
			
				|  |  | +      
 | 
	
		
			
				|  |  | +      this.loading = true
 | 
	
		
			
				|  |  | +      try {
 | 
	
		
			
				|  |  | +        const response = await getList(1, 1000, { orderId: this.orderId })
 | 
	
		
			
				|  |  | +        this.itemData = response.data.data.records || []
 | 
	
		
			
				|  |  | +      } catch (error) {
 | 
	
		
			
				|  |  | +        console.error('加载订单明细失败:', error)
 | 
	
		
			
				|  |  | +        this.$message.error('加载订单明细失败')
 | 
	
		
			
				|  |  | +        this.itemData = []
 | 
	
		
			
				|  |  | +      } finally {
 | 
	
		
			
				|  |  | +        this.loading = false
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    getStatusText(status) {
 | 
	
		
			
				|  |  | +      const statusMap = {
 | 
	
		
			
				|  |  | +        0: '待确认',
 | 
	
		
			
				|  |  | +        1: '已确认',
 | 
	
		
			
				|  |  | +        2: '生产中',
 | 
	
		
			
				|  |  | +        3: '已完成',
 | 
	
		
			
				|  |  | +        4: '已取消'
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      return statusMap[status] || '未知'
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    getStatusType(status) {
 | 
	
		
			
				|  |  | +      const typeMap = {
 | 
	
		
			
				|  |  | +        0: 'warning',
 | 
	
		
			
				|  |  | +        1: 'success',
 | 
	
		
			
				|  |  | +        2: 'primary',
 | 
	
		
			
				|  |  | +        3: 'info',
 | 
	
		
			
				|  |  | +        4: 'danger'
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      return typeMap[status] || 'info'
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  filters: {
 | 
	
		
			
				|  |  | +    numberFormat(value, precision = 2) {
 | 
	
		
			
				|  |  | +      if (value === null || value === undefined || value === '') return '0.00'
 | 
	
		
			
				|  |  | +      return parseFloat(value).toFixed(precision)
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<style scoped>
 | 
	
		
			
				|  |  | +.order-item-table {
 | 
	
		
			
				|  |  | +  padding: 10px 0;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +</style>
 |