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 }}  {{ clientEnvironmentId == '4' ? '(方)' : productionPlan.measuringUnit  }}</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
      }}
      {{ productionPlan.weightUnit}}
      
    </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="'要求生产数量' + (clientEnvironmentId == '4' ? '(方)' : '')"
        >{{ productionPlan.requiredFormingNum }}  {{ clientEnvironmentId == '4' ? '(方)' : productionPlan.measuringUnit  }}</el-descriptions-item
      >

      <el-descriptions-item
        :label="'实际交货数量' + (clientEnvironmentId == '4' ? '(方)' : '')"
      >
        {{ productionPlan.deliveryNum }}
      </el-descriptions-item>
      <el-descriptions-item label="实际完成时间">
        {{ productionPlan.completeTime }}
      </el-descriptions-item>
      <el-descriptions-item label="要求生产重量">{{
        productionPlan.requiredFormingWeight
      }}   {{ productionPlan.weightUnit}}</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="重量单位">{{
        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="物料描述" :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>
    <HeaderTitle title="销售订单信息" class="mt-20"> </HeaderTitle>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="infoData.salesOrderList"
    >
       
    <template v-slot:contractNum="{ row }">
      {{ row.contractNum }} {{row.measuringUnit}}
      </template>


             
    <template v-slot:productSumWeight="{ row }">
      {{ row.productSumWeight }} {{row.weightUnit}}
      </template>


      <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: {
    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    },
    productionPlan() {
      return this.infoData.productionPlan || {};
    },
    productRequirementInfo() {
      return this.infoData.productRequirementInfo || {};
    }
  },
  data() {
    return {
      columns: [
        {
          prop: 'code',
          label: '销售订单',
          minWidth: 110
        },
        {
          prop: 'lineNumber',
          label: '行号'
        },
        {
          prop: 'contractNum',
          slot: 'contractNum',
          label: '订单数量'
        },
        {
          prop: 'productSumWeight',
          slot: '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: '交付日期'
        },
    
        {
          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>