销售明细单产品列表添加动态表头，产品信息列表根据完成数量展示字体色

zuozhengqing

2024-03-27 7fbfeddedebd05e2d23ce411be887106d31e8eff

 src/views/sales/salesDetails/index.vue

@@ -50,6 +50,9 @@
                  <template v-if="scope.row.status === 3||scope.row.status === 4">
                    <el-button @click.stop="shipmentsClick(scope.row)" type="text" size="small">发货</el-button>
                  </template>
                  <template v-if="scope.row.status === 3||scope.row.status === 4">
                    <el-button @click.stop="confirmClick(scope.row)" type="text" size="small">确认完成</el-button>
                  </template>
                </template>
              </el-table-column>
            </template>
@@ -176,7 +179,8 @@
  getProductOrderInfo,
  updateStatus,
  getProjectList,
  sendSalesDetailsToOtherSystem
  sendSalesDetailsToOtherSystem,
  confirmOutputOver
} from "@/api/sales/salesDetails"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import DetailSpecification from "@/views/sales/salesDetails/DetailSpecification"
@@ -217,11 +221,26 @@
      { label: "产品规格", prop: "specs" },
      { label: "单位", prop: "unit" },
      { label: "订单数量", prop: "amount" },
      { label: "已完成数量", prop: "finishAmount" },
      { label: "已发货数量", prop: "deliveryAmount" },
      { label: "采购数量", prop: "purchaseAmount" },
      { label: "生产数量", prop: "makeAmount" },
      { label: "委外数量", prop: "outsourcingAmount" },
      { 
        label: "已完成数量", 
        prop: "finishAmount",
        isClass: true,
        getClassName: this.getAmountClassName, 
      },
      { label: "已发货数量", prop: "deliveryAmount", 
        isClass: true,
        getClassName: this.getAmountClassName,  },
      { label: "采购数量", 
        isClass: true,
        getClassName: this.getFinishAmountClassName, 
        prop: "purchaseAmount",
      },
      { label: "生产数量", prop: "makeAmount" ,
        isClass: true,
        getClassName: this.getFinishAmountClassName, },
      { label: "委外数量", prop: "outsourcingAmount",
        isClass: true,
        getClassName: this.getFinishAmountClassName,  },
      { label: "销售单价", prop: "price", price: true },
      { label: "成本单价", prop: "cost" },
      { label: "毛利", prop: "profit" },
@@ -241,7 +260,7 @@
      { label: "承运商", prop: "carrier" },
      { label: "运单号", prop: "waybill" },
      { label: "创建时间", prop: "warehouse" },
      { label: "状态", prop: "status" },
      { label: "状态", prop: "status",isCallMethod: true,getCallMethod: this.getStatusFive },
    ]
    // 制造信息
    const makeColumn = [
@@ -318,57 +337,47 @@
      {
        label: "委外订单",
        prop: "outsourcingId",
        default: true
      },
      {
        label: "产品编号",
        prop: "productId",
        default: true
      },
      {
        label: "产品名称",
        prop: "productName",
        default: true
      },
      {
        label: "产品规格",
        prop: "specs",
        default: true
      },
      {
        label: "产品单位",
        prop: "unit",
        default: true
      },
      {
        label: "委外数量",
        prop: "amount",
        default: true
      },
      {
        label: "完成数量",
        prop: "finishAmount",
        default: true
      },
      {
        label: "订单状态",
        prop: "status",
        default: true
        default: true, isCallMethod: true, getCallMethod: this.getStatus
      },
      {
        label: "委外供应商",
        prop: "supplierName",
        default: true
      },
      {
        label: "签约日期",
        prop: "startTime",
        default: true
      },
      {
        label: "交付日期",
        prop: "endTime",
        default: true
      },
    ]
    return {
@@ -439,7 +448,7 @@
      TabsIndex: "0",
      productTableList: {},
      productColumn: productColumn,
      showProductCol: ["产品编号", "产品名称","产品规格", "单位", "订单数量", "已完成数量", "已发货数量", "采购数量", "生产数量", "委外数量","销售单价","成本单价","毛利","毛利率","价税合计"],
      showProductCol: ["产品编号", "产品名称","产品规格", "单位", "订单数量", "已完成数量", "已发货数量", "采购数量", "生产数量", "委外数量","销售单价","成本单价","毛利","毛利率(%)","价税合计"],
      inventoryColumn: inventoryColumn,
      showInventoryCol: [
        "出库单",
@@ -456,7 +465,7 @@
        "状态"
      ],
      makeColumn: makeColumn,
      showMakeCol: ["生产订单", "产品名称", "订单状态", "工单编号", "工单状态", "计划开始时间", "计划结束时间"],
      showMakeCol: ["生产订单", "产品编号", "产品名称", "产品规格", "产品单位", "订单数量", "完成数量","工单编号","工单状态","计划开始时间","计划结束时间"],
      // 采购
      purchaseColumn: purchaseColumn,
      outsourceColumn:outsourceColumn,
@@ -489,6 +498,29 @@
    this.getProjectList()
  },
  methods: {
    getFinishAmountClassName(val, row) {
      let parts = val.split("/"); 
      let numerator = parseInt(parts[0], 10); // 分子  
      let denominator = parseInt(parts[1], 10); // 分母 
      let classname = "";
      if (numerator / denominator === 0||numerator===0) {
        classname = "error";
      }else if(numerator / denominator === 1){
        classname = "success";
      }else if((numerator / denominator) > 0&&(numerator / denominator) <1){
        classname = "warning-radio";
      }
      console.log(classname, numerator,denominator,"看下")
      return classname;
    },
    getAmountClassName(val){
      console.log(val,"val11")
      let classname = "";
      if(val===0){
        classname = "error";
      }
      return classname;
    },
    getpurchaseStatus(val) {
      if (val) {
        for (let i in this.purchaseStatusList) {
@@ -633,6 +665,7 @@
          this.loading = true
          await getProductInventoryInfo(row.number)
            .then((res) => {
              console.log(res,"resss")
              this.productTableList.tableInfomation = res.data?.length > 0 ? res.data : []
              this.loading = false
            })
@@ -736,6 +769,75 @@
      this.editShipmentsConfig.infomation.saleDetailNumber=row.number
      this.editShipmentsConfig.infomation.projectId=row.projectId
    },
    // 确认发货完成
    async confirmClick(row){
      this.selectRow = row
      await getProductInventoryInfo(this.selectRow.number)
        .then((res) => {
          console.log(res,"resss")
          if(res.data){
          this.productTableList.tableInfomation = res.data?.length > 0 ? res.data : []
            // let accumulator=res.data
            // const reducedArray = array.reduce((accumulator, currentItem) => {  
            //   // 查找当前number是否已存在于accumulator中  
            //   const existingItem = accumulator.find(item => item.number === currentItem.number);  
            //   if (existingItem) {  
            //     // 如果存在，累加num  
            //     existingItem.amount += currentItem.amount;  
            //   } else {  
            //     // 如果不存在，将当前项添加到accumulator中  
            //     accumulator.push(currentItem);  
            //   }  
            //   return accumulator;  
            // }, []); // 初始化accumulator为一个空数组  
              
            // console.log(reducedArray,"新数组");
          }
          this.loading = false
        })
        // let obj=[
        //   {
        //     name:"小明",
        //     id:1,
        //     num:10
        //   },
        //   {
        //     name:"小明",
        //     id:1,
        //     num:20
        //   },
        //   {
        //     name:"小明",
        //     id:1,
        //     num:5
        //   },
        //   {
        //     name:"小红",
        //     id:1,
        //     num:5
        //   },
        //   {
        //     name:"小红",
        //     id:1,
        //     num:10
        //   },
        //   {
        //     name:"小房",
        //     id:5,
        //     num:3
        //   },
        // ]
        .catch(() => {
          this.productTableList.tableInfomation = []
          this.loading = false
        })
      // await confirmOutputOver({saleDetailNumber:row.number}).then((res)=>{
      //   if(res&&res.code===200){
      //     this.$message.success("确认发货完成")
      //     this.getData()
      //   }
      // })
    },
    // 关闭
    closeClick(row) {
      console.log(row, "关闭")
@@ -826,6 +928,7 @@
        if (this.selectRow.status == 1) {
          this.productTableList.tableInfomation = []
        } else {
          console.log(this.selectRow,"看看")
          this.getProductInventoryInfo(this.selectRow)
        }
      } else if (this.TabsIndex == 2) {
@@ -850,7 +953,7 @@
    },
    // 状态
    getStatus(val) {
      return val === 1 ? "待确认" : val === 2 ? "待出库" : val === 3 ? "备货中" : val === 4 ? "待出库" : val === 5 ? "出库完成" : val=== 6 ? "已关闭": "--"
      return val === 1 ? "待确认" : val === 2 ? "待分解" : val === 3 ? "备货中" : val === 4 ? "待出库" : val === 5 ? "出库完成" : val=== 6 ? "已关闭": "--"
    },
    // top 行点击
    tableRowClick(row) {
@@ -867,6 +970,9 @@
        this.getProductOrderInfo(this.selectRow.number)
      } else if (this.TabsIndex == 3) {
        // 采购信息
        this.getProductOrderInfo(this.selectRow.number)
      }else if(this.TabsIndex == 4){
        // 委外信息
        this.getProductOrderInfo(this.selectRow.number)
      }
    },
@@ -927,7 +1033,14 @@
          })
        }
      })
    }
    },
    getStatusFive(val) {
      if (val) {
        return val==0?'就绪':'完成'
      } else {
        return "--";
      }
    },
  }
}
</script>