kd-aiot-frontend-aps/src/views/productionPlan/components/detail/plan.vue

<template>
  <div class="pane-box">
    <HeaderTitle title="计划基本信息"> </HeaderTitle>
    <el-descriptions :column="5" border>
      <el-descriptions-item label="计划单号">{{
        productionPlan.code
      }}</el-descriptions-item>
      <el-descriptions-item label="计划生产数量">{{
        productionPlan.productNum
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="已交货数量">已交货数量</el-descriptions-item>
      <el-descriptions-item label="未交货数量">未交货数量</el-descriptions-item> -->
      <el-descriptions-item label="计划创建人">{{
        productionPlan.createUserName
      }}</el-descriptions-item>
      <el-descriptions-item label="计划类型">{{
        ['', '内销计划', '外销计划', '预制计划'][productionPlan.planType]
      }}</el-descriptions-item>
      <el-descriptions-item label="计划生产重量">{{
        productionPlan.productNum &&
        productionPlan.productNum * productionPlan.productUnitWeight
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="已交货重量">已交货重量</el-descriptions-item>
      <el-descriptions-item label="未交货重量">未交货重量</el-descriptions-item> -->
      <el-descriptions-item label="计划创建时间">{{
        productionPlan.createTime
      }}</el-descriptions-item>
      <el-descriptions-item label="计划完成日期">{{
        productionPlan.planDeliveryTime
      }}</el-descriptions-item>
      <el-descriptions-item label="要求生产数量">{{
        productionPlan.requiredFormingNum
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="已成型数量">已成型数量</el-descriptions-item>
      <el-descriptions-item label="未成型数量">未成型数量</el-descriptions-item> -->
      <el-descriptions-item label="实际交货数量">
         {{ productionPlan.deliveryNum}}
      </el-descriptions-item>
      <el-descriptions-item label="实际完成时间">
        {{ productionPlan.completeTime}}
      </el-descriptions-item>
      <el-descriptions-item label="要求生产重量">{{
        productionPlan.requiredFormingWeight
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="已成型重量">{{
        productionPlan.code
      }}</el-descriptions-item>
      <el-descriptions-item label="未成型重量">{{
        productionPlan.code
      }}</el-descriptions-item> -->
      <el-descriptions-item label="使用改型">{{
        productionPlan.modification ? '是' : '否'
      }}</el-descriptions-item>
      <el-descriptions-item label="备注" :span="5">{{
        productionPlan.notes
      }}</el-descriptions-item>
    </el-descriptions>
    <HeaderTitle title="产品需求信息" class="mt-20"> </HeaderTitle>
    <el-descriptions :column="5" border>
      <el-descriptions-item label="物料编码">{{
        productRequirementInfo.productCode
      }}</el-descriptions-item>
      <el-descriptions-item label="牌号">{{
        productRequirementInfo.bandNo
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="型号">已交货数量</el-descriptions-item>
      <el-descriptions-item label="单重">未交货数量</el-descriptions-item> -->
      <el-descriptions-item label="重量单位">{{
        productRequirementInfo.unitWeight
      }}</el-descriptions-item>
      <el-descriptions-item label="计量单位">{{
        productRequirementInfo.unitMeasurement
      }}</el-descriptions-item>
      <el-descriptions-item label="产品层次4">{{
        productRequirementInfo.productLevel4
      }}</el-descriptions-item>
      <el-descriptions-item label="产品层次5">{{
        productRequirementInfo.productLevel5
      }}</el-descriptions-item>
      <!-- 
      <el-descriptions-item label="包装要求">未交货重量</el-descriptions-item> -->
      <el-descriptions-item label="物料描述" :span="3">{{
        productRequirementInfo.materialDesc
      }}</el-descriptions-item>
      <el-descriptions-item label="技术要求" :span="2">{{
        productRequirementInfo.technicalRequirement
      }}</el-descriptions-item>
      <el-descriptions-item label="印字要求" :span="2">{{
        productRequirementInfo.printingRequirements
      }}</el-descriptions-item>
      <!-- <el-descriptions-item label="质量要求" :span="2"
        >已成型数量</el-descriptions-item
      >
      <el-descriptions-item label="质量证书要求" :span="2"
        >未成型数量</el-descriptions-item
      > -->
    </el-descriptions>
    <HeaderTitle title="销售订单信息" class="mt-20"> </HeaderTitle>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="infoData.salesOrderList"
    >
      <template v-slot:number="{ row }">
        <div class="progress-box">
          <div class="gress">
            <el-progress
              :percentage="
                +(((row.deliveryNum || 0) / row.contractNum) * 100).toFixed(2)
              "
              color="red"
              :show-text="false"
              text-color="#000"
              :stroke-width="16"
            ></el-progress
          ></div>
          <div :span="6">{{
            `${row.deliveryNum || 0}/ ${row.contractNum}`
          }}</div>
        </div>
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
  export default {
    props: {
      infoData: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {
      productionPlan () {
        return this.infoData.productionPlan || {};
      },
      productRequirementInfo () {
        return this.infoData.productRequirementInfo || {};
      }
    },
    data () {
      return {
        columns: [
          {
            prop: 'code',
            label: '销售订单',
            minWidth: 110
          },
          {
            prop: 'lineNumber',
            label: '行号'
          },
          {
            prop: 'contractNum',
            label: '合同数量'
          },
          {
            prop: 'productSumWeight',
            label: '合同重量'
          },
          {
            prop: 'orderLibraryType',
            label: '按单按库',
            formatter: (row) => ['', '按单', '按库'][row.orderLibraryType]
          },
          {
            prop: 'deliveryRequirements',
            label: '交付要求',
            formatter: (row) =>
              ['', '普通', '紧急', '重要'][row.deliveryRequirements]
          },
          {
            prop: 'orderType',
            label: '订单类型',
            formatter: (row) =>
              ['', '内销订单', '外销订单', '预制订单'][row.orderType]
          },
          {
            prop: 'releaseTime',
            label: '下达时间'
          },
          {
            prop: 'deliveryTime',
            label: '交付日期'
          },
          // {
          //   action: 'number',
          //   slot: 'number',
          //   prop: 'number',
          //   label: '已交付数量',
          //   width: 280
          // },
          {
            prop: 'customerName',
            label: '客户名称'
          }
        ]
      };
    }
  };
</script>
<style lang="scss" scoped>
  .mt-20 {
    margin-top: 20px;
  }
  .progress-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .gress {
      flex: 1;
      margin-right: 10px;
    }
  }
</style>