gubersail-platform-ui/src/components/order-item-table/index.vue

<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 orderItemTableMixin from '@/mixins/order/orderItemTableMixin'

export default {
  name: 'OrderItemTable',
  mixins: [orderItemTableMixin]
}
</script>

<style scoped>
.order-item-table {
  padding: 10px 0;
}


</style>