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

zuozhengqing

2024-03-27 7fbfeddedebd05e2d23ce411be887106d31e8eff

 src/views/sales/salesDetails/index.vue

@@ -47,6 +47,12 @@
                    <!-- <el-button @click="delClick(scope.row.id)" type="text" size="small">删除</el-button> -->
                    <el-button @click.stop="closeClick(scope.row)" type="text" size="small">关闭</el-button>
                  </template>
                  <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>
@@ -62,8 +68,8 @@
            class="tab-pane"
            @click="getTab(0)"
            :style="{
              background: isClickProduct ? '#2a78fb' : '#F1F3F8',
              color: isClickProduct ? '#fff' : '#666'
              background: TabsIndex == 0 ? '#2a78fb' : '#F1F3F8',
              color: TabsIndex == 0 ? '#fff' : '#666'
            }"
          >
            产品信息
@@ -72,21 +78,41 @@
            class="tab-pane"
            @click="getTab(1)"
            :style="{
              background: isClickInventory ? '#2a78fb' : '#F1F3F8',
              color: isClickInventory ? '#fff' : '#666'
              background: TabsIndex == 1 ? '#2a78fb' : '#F1F3F8',
              color: TabsIndex == 1 ? '#fff' : '#666'
            }"
          >
            库存信息
            发货信息
          </div>
          <div
            class="tab-pane"
            @click="getTab(2)"
            :style="{
              background: isClickMake ? '#2a78fb' : '#F1F3F8',
              color: isClickMake ? '#fff' : '#666'
              background: TabsIndex == 2 ? '#2a78fb' : '#F1F3F8',
              color: TabsIndex == 2 ? '#fff' : '#666'
            }"
          >
            制造信息
          </div>
          <div
            class="tab-pane"
            @click="getTab(3)"
            :style="{
              background: TabsIndex == 3 ? '#2a78fb' : '#F1F3F8',
              color: TabsIndex == 3 ? '#fff' : '#666'
            }"
          >
            采购信息
          </div>
          <div
            class="tab-pane"
            @click="getTab(4)"
            :style="{
              background: TabsIndex == 4 ? '#2a78fb' : '#F1F3F8',
              color: TabsIndex == 4 ? '#fff' : '#666'
            }"
          >
            委外信息
          </div>
        </div>
        <div class="list-view">
@@ -128,6 +154,12 @@
      :edit-common-config="editConfig"
      @addCollectionPlanClick="addCollectionPlanClick"
    />
    <!-- 发货 -->
    <ShipmentsDialog
      v-if="editShipmentsConfig.visible"
      :edit-common-config="editShipmentsConfig"
      @addCollectionPlanClick="addCollectionPlanClick"
    />
    <!-- 销售明细详情 -->
    <DetailSpecification v-if="specificationDetail.visible" :specification-detail="specificationDetail" />
    <!-- 客户详情 -->
@@ -139,6 +171,7 @@

<script>
import AddSalesDetailsDialog from "@/views/sales/salesDetails/AddSalesDetailsDialog"
import ShipmentsDialog from "@/views/sales/salesDetails/shipmentsDialog"
import {
  getSalesDetailsList,
  getDelSalesDetails,
@@ -146,12 +179,13 @@
  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"
import AddCollectionPlan from "@/views/other/payment/collectionPlan/AddCollectionPlan"

import { getDataByType } from "@/api/data"
export default {
  name: "SalesDetails",
  props: {
@@ -169,6 +203,7 @@
  mixins: [pageMixin],
  components: {
    AddSalesDetailsDialog,
    ShipmentsDialog,
    DetailSpecification,
    DetailClientManage: () => import("@/views/client/client/DetailClientManage"),
    AddCollectionPlan
@@ -181,35 +216,169 @@
  data() {
    // 产品信息
    const productColumn = [
      { label: "产品编号", prop: "number", default: true },
      { label: "产品名称", prop: "name" },
      { label: "数量", prop: "amount" },
      { label: "产品编号", prop: "productId", default: true },
      { label: "产品名称", prop: "productName" },
      { label: "产品规格", prop: "specs" },
      { label: "单位", prop: "unit" },
      { label: "发货单", prop: "invoice" },
      { label: "承运商", prop: "carrier" },
      { label: "运单号", prop: "waybillNumber" },
      { label: "销售单价", prop: "salePrice", price: true },
      { label: "价税合计", prop: "valorem", price: true }
      { label: "订单数量", prop: "amount" },
      { 
        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" },
      { label: "毛利率(%)", prop: "margin" },
      { label: "价税合计", prop: "total", price: true }
    ]
    // 库存信息
    // 发货信息
    const inventoryColumn = [
      { label: "出库单", prop: "invoice" },
      { label: "仓库", prop: "warehouse" },
      { label: "产品编号", prop: "number", default: true },
      { label: "产品名称", prop: "name" },
      { label: "产品规格", prop: "specs" },
      { label: "产品单位", prop: "unit" },
      { label: "发货数量", prop: "amount" },
      { label: "订单数量", prop: "orderAmount" },
      { label: "仓库", prop: "warehouse" },
      { label: "在库数量", prop: "amount" },
      { label: "可用库存", prop: "availableNumber" },
      { label: "单位", prop: "unit" }
      { label: "承运商", prop: "carrier" },
      { label: "运单号", prop: "waybill" },
      { label: "创建时间", prop: "warehouse" },
      { label: "状态", prop: "status",isCallMethod: true,getCallMethod: this.getStatusFive },
    ]
    // 制造信息
    const makeColumn = [
      { label: "生产订单", prop: "orderId", default: true },
      { label: "产品编号", prop: "productId" },
      { label: "产品名称", prop: "productName" },
      { label: "订单状态", prop: "orderStatus" },
      { label: "产品规格", prop: "specs" },
      { label: "产品单位", prop: "unit" },
      { label: "订单数量", prop: "amount" },
      { label: "完成数量", prop: "finishAmount" },
      { label: "工单编号", prop: "workOrderId" },
      { label: "工单状态", prop: "workOrderStatus" },
      { label: "计划开始时间", prop: "startTime" },
      { label: "计划结束时间", prop: "endTime" }
    ]
    // 采购信息
    const purchaseColumn = [
      {
        label: "采购单号",
        prop: "purchaseNumber",
        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: "purchaseName"
      },
      {
        label: "供应商名称",
        prop: "supplierName"
      },
      // {
      //   label: "采购数量",
      //   prop: "amount"
      // },
      {
        label: "状态",
        prop: "status",
        isCallMethod: true,
        getCallMethod: this.getpurchaseStatus
      }
    ]
    // 委外
    const outsourceColumn = [
      {
        label: "委外订单",
        prop: "outsourcingId",
      },
      {
        label: "产品编号",
        prop: "productId",
      },
      {
        label: "产品名称",
        prop: "productName",
      },
      {
        label: "产品规格",
        prop: "specs",
      },
      {
        label: "产品单位",
        prop: "unit",
      },
      {
        label: "委外数量",
        prop: "amount",
      },
      {
        label: "完成数量",
        prop: "finishAmount",
      },
      {
        label: "订单状态",
        prop: "status",
        default: true, isCallMethod: true, getCallMethod: this.getStatus
      },
      {
        label: "委外供应商",
        prop: "supplierName",
      },
      {
        label: "签约日期",
        prop: "startTime",
      },
      {
        label: "交付日期",
        prop: "endTime",
      },
    ]
    return {
      tableList: {},
@@ -218,6 +387,15 @@
        visible: false,
        title: "新建",
        infomation: {}
      },
      editShipmentsConfig:{
        visible: false,
        title: "新建",
        infomation: {
          saleDetailID:null,
          saleDetailNumber:null,

        }
      },
      showSummary: {
        show: false,
@@ -260,24 +438,39 @@
        { label: "销售负责人", prop: "member_name" },
        { label: "签约日期", prop: "signTime" },
        { label: "交付日期", prop: "deliveryDate" },
        { label: "订单来源", prop: "source" },
        // { label: "订单来源", prop: "source" },
        { label: "合计", prop: "amountTotal", price: true },
        { label: "状态", prop: "status", isCallMethod: true, getCallMethod: this.getStatus }
      ],
      showCol: ["订单编号", "销售负责人", "签约日期", "交付日期", "订单来源", "合计", "状态"],
      tableBottomColumn: [],
      showBottomCol: [],
      isClickProduct: true, // 产品信息
      isClickInventory: false, // 库存信息
      isClickMake: false, // 制造信息
      TabsIndex: "0",
      productTableList: {},
      productColumn: productColumn,
      showProductCol: ["产品编号", "产品名称", "数量", "单位", "发货单", "承运商", "运单号", "销售单价", "价税合计"],
      showProductCol: ["产品编号", "产品名称","产品规格", "单位", "订单数量", "已完成数量", "已发货数量", "采购数量", "生产数量", "委外数量","销售单价","成本单价","毛利","毛利率(%)","价税合计"],
      inventoryColumn: inventoryColumn,
      showInventoryCol: ["产品编号", "产品名称", "订单数量", "仓库", "在库数量", "可用库存", "单位"],
      showInventoryCol: [
        "出库单",
        "仓库",
        "产品编号",
        "产品名称",
        "产品规格",
        "产品单位",
        "发货数量",
        "订单数量",
        "承运商",
        "运单号",
        "创建时间",
        "状态"
      ],
      makeColumn: makeColumn,
      showMakeCol: ["生产订单", "产品名称", "订单状态", "工单编号", "工单状态", "计划开始时间", "计划结束时间"],
      showMakeCol: ["生产订单", "产品编号", "产品名称", "产品规格", "产品单位", "订单数量", "完成数量","工单编号","工单状态","计划开始时间","计划结束时间"],
      // 采购
      purchaseColumn: purchaseColumn,
      outsourceColumn:outsourceColumn,
      showPurchaseCol: ["采购单号", "产品编号", "产品名称", "产品规格", "产品单位","计划采购量","完成采购量","采购单名称","供应商名称","状态"],
      showOutsourceCol:["委外订单", "产品编号", "产品名称", "产品规格", "产品单位","委外数量","完成数量","订单状态","委外供应商","签约日期","交付日期"],
      selectRow: {},
      projectList: [],
      projectListShow: false,
@@ -287,7 +480,9 @@
      thatRow: {},
      rules: {
        projectId: [{ required: true, message: "请选择项目", trigger: "change" }]
      }
      },
      purchaseStatusList: getDataByType("purchaseStatus"),
      loading: false
    }
  },
  created() {
@@ -303,6 +498,40 @@
    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) {
          if (this.purchaseStatusList[i].id == val) {
            return this.purchaseStatusList[i].name
          }
        }
      } else {
        return "--"
      }
    },
    setTable() {
      // top 明细单列表
      this.tableList = {
@@ -359,7 +588,6 @@
    },
    // 请求数据
    async getData() {
      this.loading = true
      let params = {}
      console.log(this.addConfig)
      if (this.addConfig.keywordType === "客户名称") {
@@ -388,9 +616,9 @@
          pageSize: this.pagerOptions.pageSize
        }
      }
      this.loading = true
      await getSalesDetailsList(params)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            if (res.data.list && res.data.list.length > 0) {
              const list = res.data.list.map((item) => {
@@ -405,8 +633,7 @@
              this.pagerOptions.totalCount = res.data.count
              if (res.data.count > 0) {
                this.selectRow = this.tableList.tableInfomation.length > 0 ? this.tableList.tableInfomation[0] : {}
                let row = this.tableList.tableInfomation[0]
                this.getProductInventoryInfo(row)
                this.tableRowClick(this.selectRow)
              }
            } else {
              this.tableList.tableInfomation = []
@@ -424,22 +651,62 @@
    },
    // 获取产品/库存信息
    async getProductInventoryInfo(row) {
      console.log(row.status, "状态", row)
      if (row.status === 1) {
        this.productTableList.tableInfomation = row.products
      if (this.TabsIndex == 0 || row.status == 1) {
        this.getProductOrderInfo(row)
        // row.products.map((item)=>{
        //   item.purchaseAmount=item.purchaseFinishAmount+"/"+item.purchaseAmount
        //   item.makeAmount=item.makeFinishAmount+"/"+item.makeAmount
        //   item.outsourcingAmount=item.outsourcingFinishAmount+"/"+item.outsourcingAmount

        // })
        // this.productTableList.tableInfomation = row.products || []
      } else {
        await getProductInventoryInfo(row.number).then((res) => {
          console.log(res)
          this.productTableList.tableInfomation = res.data
        })
        if (row.number) {
          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
            })
            .catch(() => {
              this.productTableList.tableInfomation = []
              this.loading = false
            })
        }
      }
    },
    // 获取制造信息
    async getProductOrderInfo(number) {
      await getProductOrderInfo(number).then((res) => {
        console.log(res)
        this.productTableList.tableInfomation = res.data
      })
      if (number) {
        this.loading = true
        await getProductOrderInfo(number)
          .then((res) => {
            if (this.TabsIndex == 0) {
              if(res&&res.data){
                res.data.productInfo.map((item=>{
                  item.purchaseAmount=item.purchaseFinishAmount+"/"+item.purchaseAmount
                  item.makeAmount=item.makeFinishAmount+"/"+item.makeAmount
                  item.outsourcingAmount=item.outsourcingFinishAmount+"/"+item.outsourcingAmount
                }))
              }
              this.productTableList.tableInfomation = res.data && res.data.productInfo ? res.data.productInfo : []
            } else if (this.TabsIndex == 1) {
              this.productTableList.tableInfomation = res.data ? res.data : []
            } else if (this.TabsIndex == 2) {
              this.productTableList.tableInfomation = res.data && res.data.makeInfo ? res.data.makeInfo : []
            } else if (this.TabsIndex == 3) {
              this.productTableList.tableInfomation = res.data && res.data.purchaseInfo ? res.data.purchaseInfo : []
            } else if(this.TabsIndex == 4) {
              this.productTableList.tableInfomation = res.data && res.data.outsourcingInfo ? res.data.outsourcingInfo : []
            }
            this.loading = false
          })
          .catch(() => {
            this.productTableList.tableInfomation = []
            this.loading = false
          })
      }
    },
    // 搜索
    onFilterSearch(searchText) {
@@ -455,6 +722,7 @@
      console.log(this.addConfig)
      this.editConfig.infomation = {
        ...this.addConfig,
        signTime: new Date().toLocaleDateString(),
        currency: "人民币",
        sale_chance_name: "",
        subbill_name: "",
@@ -464,16 +732,16 @@
    },
    // 查看 编辑
    handleClick(row, title) {
      console.log(row, title)
      this.editConfig.visible = true
      let params = JSON.parse(JSON.stringify(row))
      this.editConfig.title = title
      this.editConfig.infomation = {
        ...row,
        ...params,
        currency: "人民币",
        sale_chance_name: row.saleChance.name,
        deliverType: row.deliverType === 0 ? "" : row.deliverType,
        quotation_number: row.quotation.number
        sale_chance_name: params.saleChance.name,
        deliverType: params.deliverType === 0 ? "" : params.deliverType,
        quotation_number: params.quotation.number
      }
      this.editConfig.visible = true
    },
    // 确认提交
    async submitClick(row) {
@@ -493,6 +761,82 @@
          }
        })
      }
    },
    // 发货
    shipmentsClick(row){
      this.editShipmentsConfig.visible=true
      this.editShipmentsConfig.infomation.saleDetailID=row.id
      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) {
@@ -571,47 +915,64 @@
    getTab(tab) {
      this.TabsIndex = tab
      if (this.TabsIndex == 0) {
        this.isClickProduct = true
        this.isClickInventory = false
        this.isClickMake = false
        // 产品信息列表
        this.tableBottomColumn = this.productColumn
        this.showBottomCol = this.showProductCol
        this.tableBottomColumn = this.productColumn // 表头
        this.showBottomCol = this.showProductCol  // 动态表头
        this.setBottomList()
        this.getProductInventoryInfo(this.selectRow)
        this.getProductInventoryInfo(this.selectRow.number)
      } else if (this.TabsIndex == 1) {
        this.isClickProduct = false
        this.isClickInventory = true
        this.isClickMake = false
        // 库存信息列表
        // 发货信息列表
        this.tableBottomColumn = this.inventoryColumn
        this.showBottomCol = this.showInventoryCol
        this.setBottomList()
        this.getProductInventoryInfo(this.selectRow)
        if (this.selectRow.status == 1) {
          this.productTableList.tableInfomation = []
        } else {
          console.log(this.selectRow,"看看")
          this.getProductInventoryInfo(this.selectRow)
        }
      } else if (this.TabsIndex == 2) {
        this.isClickProduct = false
        this.isClickInventory = false
        this.isClickMake = true
        // 制造信息列表
        this.tableBottomColumn = this.makeColumn
        this.showBottomCol = this.showMakeCol
        this.setBottomList()
        this.getProductOrderInfo(this.selectRow.number)
      } else if (this.TabsIndex == 3) {
        // 采购信息列表
        this.tableBottomColumn = this.purchaseColumn
        this.showBottomCol = this.showPurchaseCol
        this.setBottomList()
        this.getProductOrderInfo(this.selectRow.number)
      }if (this.TabsIndex == 4) {
        // 委外信息列表
        this.tableBottomColumn = this.outsourceColumn
        this.showBottomCol = this.showOutsourceCol
        this.setBottomList()
        this.getProductOrderInfo(this.selectRow.number)
      }
    },
    // 状态
    getStatus(val) {
      return val === 1 ? "待确认" : val === 2 ? "待出库" : val === 3 ? "出库完成" : val === 4 ? "已关闭" : "--"
      return val === 1 ? "待确认" : val === 2 ? "待分解" : val === 3 ? "备货中" : val === 4 ? "待出库" : val === 5 ? "出库完成" : val=== 6 ? "已关闭": "--"
    },
    // top 行点击
    tableRowClick(row, column, event) {
      console.log(row, column, event)
    tableRowClick(row) {
      this.selectRow = row
      if (this.TabsIndex == 0) {
        this.getProductInventoryInfo(this.selectRow)
        this.getProductInventoryInfo(this.selectRow.number)
      } else if (this.TabsIndex == 1) {
        this.getProductInventoryInfo(this.selectRow)
        if (this.selectRow.status == 1) {
          this.productTableList.tableInfomation = []
        } else {
          this.getProductInventoryInfo(this.selectRow)
        }
      } else if (this.TabsIndex == 2) {
        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)
      }
    },
@@ -621,8 +982,7 @@
        page: 1,
        pageSize: 100
      }).then((res) => {
        console.log(res.data, "项目列表信息")
        this.projectList = res.data
        this.projectList = res.data ? res.data : []
      })
    },
    handleClose(done) {
@@ -673,7 +1033,14 @@
          })
        }
      })
    }
    },
    getStatusFive(val) {
      if (val) {
        return val==0?'就绪':'完成'
      } else {
        return "--";
      }
    },
  }
}
</script>
@@ -734,6 +1101,7 @@
          margin-right: 20px;
          font-size: 14px !important;
          text-align: center;
          cursor: pointer;
          background: #2a78fb;
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;