kd-aiot-frontend-aps/src/views/saleOrder/components/order-detail.vue

<template>
  <el-dialog
    :visible.sync="visible"
    title="销售订单详情"
    width="80vw"
    append-to-body
  >
    <div class="main_container">
      <div class="basic-details-title border-none">
        <span class="border-span">基本信息</span>
      </div>
      <el-descriptions title="" :column="6" size="medium" border>
        <el-descriptions-item>
          <template slot="label"> 销售订单号 </template>
          {{ form.salesOrderBasicInfo.code }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 下达时间 </template>
          {{ form.salesOrderBasicInfo.releaseTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 数量</template>
          {{ form.salesOrderBasicInfo.contractNum }}
          {{ form.salesOrderBasicInfo.measuringUnit }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 模数 </template>
          {{ form.salesOrderBasicInfo.moCount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 块数 </template>
          {{ form.salesOrderBasicInfo.blockCount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 订单来源 </template>
          {{ getDictValue('订单来源', form.salesOrderBasicInfo.orderSource) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 订单类型 </template>
          {{ getDictValue('订单类型', form.salesOrderBasicInfo.orderType) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 交付时间 </template>
          {{ form.salesOrderBasicInfo.deliveryTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 订单重量 </template>
          {{ orderWeight }}
          <!-- {{ form.salesOrderBasicInfo.productSumWeight }}
          {{ form.salesOrderBasicInfo.weightUnit }} -->
        </el-descriptions-item>
        <!--        <el-descriptions-item>
          <template slot="label"> 已交货重量 </template>
          {{ form.salesOrderBasicInfo.deliveredWeight }}
        </el-descriptions-item> -->
        <!--        <el-descriptions-item>
          <template slot="label"> 欠交货重量 </template>
          {{ form.salesOrderBasicInfo.backOrderWeight }}
        </el-descriptions-item> -->
        <el-descriptions-item>
          <template slot="label"> 交付要求 </template>
          {{
            getDictValue(
              '交付要求',
              form.salesOrderBasicInfo.deliveryRequirements
            )
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 按单按库 </template>
          {{
            getDictValue('按单按库', form.salesOrderBasicInfo.orderLibraryType)
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 交货工厂 </template>
          {{ form.salesOrderBasicInfo.deliveryPlant }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 计划单号 </template>
          {{ form.salesOrderBasicInfo.productionPlanCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 交货状态 </template>
          {{
            getDictValue('交货状态', form.salesOrderBasicInfo.deliveryStatus)
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 更新时间 </template>
          {{ form.salesOrderBasicInfo.updateTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 创建人 </template>
          {{ form.salesOrderBasicInfo.createUserName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 生产状态 </template>
          {{ getDictValue('生产状态', form.salesOrderBasicInfo.status) }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="basic-details-title border-none">
        <span class="border-span">产品规格需求</span>
      </div>
      <el-descriptions title="" :column="6" size="medium" border>
        <el-descriptions-item>
          <template slot="label"> 行号 </template>
          {{ form.productSpecRequirement.lineNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 物料编码 </template>
          {{ form.productSpecRequirement.productCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 牌号 </template>
          {{ form.productSpecRequirement.brandNo }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 型号 </template>
          {{ form.productSpecRequirement.model }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 规格 </template>
          {{ form.productSpecRequirement.specification }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 单重 </template>
          {{ weightUnit(form.productSpecRequirement) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 重量单位 </template>
          {{ form.productSpecRequirement.unitWeight }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 单位 </template>
          {{ form.productSpecRequirement.unitQuantity }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品层次4 </template>
          {{ form.productSpecRequirement.categoryPathNameField4 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品层次5 </template>
          {{ form.productSpecRequirement.categoryPathNameField5 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 包装要求 </template>
          {{ form.productSpecRequirement.packageRequirements }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 物料描述 </template>
          {{ form.productSpecRequirement.description }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 技术要求 </template>
          {{ form.productSpecRequirement.technicalRequirement }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 印字要求 </template>
          {{ form.productSpecRequirement.printingRequirement }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 质量证书要求 </template>
          {{ form.productSpecRequirement.qualityCertificateRequirements }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="basic-details-title border-none">
        <span class="border-span">业务信息</span>
      </div>
      <el-descriptions title="" :column="6" size="medium" border>
        <el-descriptions-item :span="2">
          <template slot="label"> 客户名称 </template>
          {{ form.businessInfo.customerName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 客户代号 </template>
          {{ form.businessInfo.customerCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 客户参考 </template>
          {{ form.businessInfo.customerReference }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 业务员 </template>
          {{ form.businessInfo.salesman }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 销售业务员 </template>
          {{ form.businessInfo.salesRepresentative }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 销售组织 </template>
          {{ form.businessInfo.salesOrganization }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 销售组 </template>
          {{ form.businessInfo.salesGroup }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 销售要求 </template>
          {{ form.businessInfo.salesRequirement }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 销售组织描述 </template>
          {{ form.businessInfo.salesOrganizationDescription }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 销售组名称 </template>
          {{ form.businessInfo.salesGroupName }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="basic-details-title border-none">
        <span class="border-span">当前订单所有产品</span>
      </div>
      <el-table
        :data="form.salesOrderAllProductsList"
        style="width: 100%"
        border
      >
        <el-table-column label="行号" align="center" prop="lineNumber">
        </el-table-column>
        <el-table-column
          label="物料编码"
          align="center"
          prop="productCode"
          width="160"
        >
        </el-table-column>
        <el-table-column label="牌号" align="center" prop="brandNo">
        </el-table-column>
        <el-table-column label="型号" align="center" prop="model" width="160">
        </el-table-column>
        <el-table-column label="订单数量" align="center" prop="contractNum">
        </el-table-column>
        <el-table-column
          label="计划单号"
          align="center"
          prop="productionPlanCode"
          width="160"
        >
        </el-table-column>
        <el-table-column
          label="计划生产数量"
          align="center"
          width="120"
          prop="planProductNum"
        >
        </el-table-column>
        <el-table-column
          label="要求生产数量"
          align="center"
          width="120"
          prop="requiredFormingNum"
        >
        </el-table-column>
        <!-- <el-table-column label="未生产数量" align="center" width="120" prop="unfinishedQuantity">
			  </el-table-column>
			  <el-table-column label="已生产数量" align="center" width="120" prop="finishedQuantity">
			  </el-table-column>
			  <el-table-column label="已交付量" align="center" prop="deliveredQuantity">
			  </el-table-column>
			  <el-table-column label="已出库数量" align="center" width="120" prop="shippedQuantity">
			  </el-table-column> -->
        <el-table-column
          label="下达日期"
          align="center"
          prop="releaseTime"
          width="160"
        >
        </el-table-column>
        <el-table-column
          label="交付日期"
          align="center"
          prop="deliveryTime"
          width="160"
        >
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="{ row }">
            {{ getDictValue('生产状态', row.status) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="footer">
      <div>
        <el-button @click="cancel">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getSalesDetail } from '@/api/saleOrder';
  export default {
    mixins: [dictMixins],
    data() {
      return {
        visible: false,
        form: {
          businessInfo: {},
          productSpecRequirement: {},
          salesOrderAllProductsList: [],
          salesOrderBasicInfo: {}
        },
        orderWeight: '',
        currentRowInfo: null
      };
    },
    computed: {
      weightUnit() {
        return (row) => {
          if (row.productUnitWeight) {
            return `${row.productUnitWeight} ( ${row.unitWeight} )`;
          }
        };
      }
    },
    created() {
      this.requestDict('按单按库');
      this.requestDict('交付要求');
      this.requestDict('订单类型');
      this.requestDict('订单来源');
      this.requestDict('生产状态');
      this.requestDict('交货状态');
    },
    methods: {
      open(row) {
        this.currentRowInfo = row;
        this.getDetail(row.id);
        this.orderWeight = `${row.productSumWeight}${row.weightUnit}`;
        this.visible = true;
      },
      getDetail(id) {
        getSalesDetail(id).then((res) => {
          if (typeof res.salesOrderBasicInfo != 'string') {
            this.form.salesOrderBasicInfo = res.salesOrderBasicInfo;
          }
          if (typeof res.businessInfo != 'string') {
            this.form.businessInfo = res.businessInfo;
          }
          if (typeof res.productSpecRequirement != 'string') {
            this.form.productSpecRequirement = res.productSpecRequirement;
          }
          if (typeof res.salesOrderAllProductsList != 'string') {
            this.form.salesOrderAllProductsList = res.salesOrderAllProductsList;
          }
          console.log('this.form', this.form);
        });
      },
      cancel() {
        this.visible = false;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .basic-details-title {
    margin: 10px 0;
  }
</style>