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

zuozhengqing

2024-03-27 7fbfeddedebd05e2d23ce411be887106d31e8eff

 src/views/sales/salesDetails/index.vue

@@ -221,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" },
@@ -433,7 +448,7 @@
      TabsIndex: "0",
      productTableList: {},
      productColumn: productColumn,
      showProductCol: ["产品编号", "产品名称","产品规格", "单位", "订单数量", "已完成数量", "已发货数量", "采购数量", "生产数量", "委外数量","销售单价","成本单价","毛利","毛利率","价税合计"],
      showProductCol: ["产品编号", "产品名称","产品规格", "单位", "订单数量", "已完成数量", "已发货数量", "采购数量", "生产数量", "委外数量","销售单价","成本单价","毛利","毛利率(%)","价税合计"],
      inventoryColumn: inventoryColumn,
      showInventoryCol: [
        "出库单",
@@ -450,7 +465,7 @@
        "状态"
      ],
      makeColumn: makeColumn,
      showMakeCol: ["生产订单", "产品名称", "订单状态", "工单编号", "工单状态", "计划开始时间", "计划结束时间"],
      showMakeCol: ["生产订单", "产品编号", "产品名称", "产品规格", "产品单位", "订单数量", "完成数量","工单编号","工单状态","计划开始时间","计划结束时间"],
      // 采购
      purchaseColumn: purchaseColumn,
      outsourceColumn:outsourceColumn,
@@ -483,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) {
@@ -627,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
            })
@@ -732,12 +771,72 @@
    },
    // 确认发货完成
    async confirmClick(row){
      await confirmOutputOver({saleDetailNumber:row.number}).then((res)=>{
        if(res&&res.code===200){
          this.$message.success("确认发货完成")
          this.getData()
        }
      })
      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) {
@@ -829,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) {