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

zuozhengqing

2024-03-27 7fbfeddedebd05e2d23ce411be887106d31e8eff

 src/views/sales/salesDetails/AddSalesDetailsDialog.vue

@@ -442,6 +442,7 @@
              @getSelectArray="getSelectArray"
              @emptyProductClick="emptyProductClick"
              @clearupProduct="clearupProduct"
              @selTableCol="selTableCol"
            ></CommonFormTableView>
          </div>
          <!-- 选择审批流程 -->
@@ -534,6 +535,7 @@
import { getDataByType } from "@/api/data"
import { mapActions } from "vuex"
import { getQuotationList } from "@/api/sales/quotation"
import { getSystemSet } from "@/api/systemSet/commonSet"

export default {
  name: "AddSalesDetailsDialog",
@@ -635,7 +637,25 @@
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
      },
      isRelevancyValue:"是", //是否同步报价单
      isCollectionPlan:"是", // 是否生成收款计划
      isBjdRequird : false,
      tableColumn: [
        // { label: "#", prop: "productId", width: 40 },
        { label: "产品名称", prop: "name", productName: true, isRequird: true, min: 110 },
        { label: "规格", prop: "specs" , },
        { label: "型号", prop: "type" },
        { label: "产品编号", prop: "number" },
        { label: "单位", prop: "unit" },
        { label: "销售单价", prop: "price", inputFloat: !this.isBjdRequird, },
        { label: "成本单价", prop: "cost", input: !this.isBjdRequird },
        { label: "毛利", prop: "profit" },
        { label: "毛利率(%)", prop: "margin", min: 90 },
        { label: "数量", prop: "amount", inputNumber: true, isRequird: true },
        { label: "价税合计", prop: "total" }
      ],
      showCol: ["产品名称", "规格", "型号", "产品编号", "单位", "销售单价", "成本单价","毛利","毛利率(%)","数量","价税合计"],
    }
  },
  mounted(){
@@ -643,6 +663,7 @@
    this.getQuotation()
  },
  created() {
    this.getSystemSet()
    if (this.editConfig.title !== "新建") {
      this.productTableList.tableData = [
        {
@@ -684,6 +705,41 @@
  // },
  methods: {
    ...mapActions(["getChanceFilter", "getSubunitFliter"]),
    async getSystemSet(){
      await getSystemSet().then((res) => {
        if (res.code == 200) {
          console.log(res,"resss")
          if (res.data) {
            this.isRelevancyValue = this.checkValueById(res.data.CRM, 5); 
            this.isCollectionPlan=this.checkValueById(res.data.CRM, 4); 
            console.log(this.isRelevancyValue,"是否关联")
          }
        }
      })
    },
    setColumnVisible(showCol, tableColumn) {
      return tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label)
        }
      })
    },
    selTableCol(val) {
      this.showcol = val
      this.productTableList.tableColumn = this.setColumnVisible(val, this.tableColumn)
    },
    checkValueById(data, id) {  
      for (const key in data) {  
          if (data.hasOwnProperty(key)) {  
              const obj = data[key];  
              if (obj.id === id) {  
                  return obj.value;  
              }  
          }  
      }  
      return null; // 如果没有找到匹配的id，则返回null  
    },
    formInfo() {
      this.objCode.type = "销售明细编码"
      this.objCode.codeStandID = ""
@@ -754,7 +810,11 @@
                  amountTotal: this.amountTotal,
                  id: res.data.id
                }
                if(this.isCollectionPlan==="是"){
                this.$emit("addCollectionPlanClick", config)
                }else{
                  this.$parent.getData()
                }
              }
            })
          } else {
@@ -936,9 +996,11 @@
        console.log("下拉框点击", item)
        this.subbillId = item.id
        this.editConfig.infomation.subbill_name = item.number
      } else if (value === "quotation") {
      } else if (value === "quotation") { //销售报价单
        if(this.isRelevancyValue==="是"){
        this.productTableList.tableData = item.products
        this.tableData = item.products
        }
        this.editConfig.infomation.quotation_number = item.number
        this.quotationId = item.id
         //反向 客户名称
@@ -978,6 +1040,7 @@
        this.editSelCommonConfig.editVisible = true
      }
    },
    // 点击加号
    selClient(row, value) {
      if (value === "client") {
        this.editConfig.infomation.sale_chance_name = ""
@@ -1002,8 +1065,10 @@
        this.editConfig.infomation.subbill_name = row.number
        this.subbillId = row.id
      } else if (value === "quotation") {
        if(this.isRelevancyValue==="是"){
        this.productTableList.tableData = row.products
        this.tableData = row.products
        }
        this.editConfig.infomation.quotation_number = row.number
        //反向 客户名称
        this.editConfig.infomation.client_name = row.client.name
@@ -1040,8 +1105,15 @@
        this.editConfig.infomation.quotation_number = ""
        this.quotationId = 0
      }
      if(this.isRelevancyValue==="是" && value === "quotation"){
      this.productTableList.tableData = []
      this.tableData = []
      }else if(this.isRelevancyValue==="否" && value === "quotation"){
        console.log("false")
      }else{
        this.productTableList.tableData = []
        this.tableData = []
      }
    },
    // 添加附件
    addAnnexClick() {},
@@ -1073,27 +1145,40 @@
        this.getQuotation(this.editConfig.infomation.saleChanceId, "全部产品")
      }
      // let productData = this.quotationList.products
      let isBjdRequird = false
      this.isBjdRequird = false
      if (this.autoCodeHeadersObj.Bjd == "yes") {
        isBjdRequird = true
        this.isBjdRequird = true
      }
      this.productTableList = {
        tableData: this.tableData,
        isReturn: true,
        tableColumn: [
          // { label: "#", prop: "productId", width: 40 },
          { label: "产品名称", prop: "name", productName: true, isRequird: true, min: 110 },
          { label: "规格", prop: "specs" },
          { label: "型号", prop: "type" },
          { label: "产品编号", prop: "number" },
          { label: "单位", prop: "unit" },
          { label: "销售单价", prop: "price", inputFloat: !isBjdRequird, isRequird: true },
          { label: "成本单价", prop: "cost", input: !isBjdRequird },
          { label: "毛利", prop: "profit" },
          { label: "毛利率(%)", prop: "margin", min: 90 },
          { label: "数量", prop: "amount", inputNumber: true, isRequird: true },
          { label: "价税合计", prop: "total" }
        ]
        allcol: [],
        showcol: this.showCol,
        // tableColumn: [
        //   // { label: "#", prop: "productId", width: 40 },
        //   { label: "产品名称", prop: "name", productName: true, isRequird: true, min: 110 },
        //   { label: "规格", prop: "specs" },
        //   { label: "型号", prop: "type" },
        //   { label: "产品编号", prop: "number" },
        //   { label: "单位", prop: "unit" },
        //   { label: "销售单价", prop: "price", inputFloat: !this.isBjdRequird, },
        //   { label: "成本单价", prop: "cost", input: !this.isBjdRequird },
        //   { label: "毛利", prop: "profit" },
        //   { label: "毛利率(%)", prop: "margin", min: 90 },
        //   { label: "数量", prop: "amount", inputNumber: true, isRequird: true },
        //   { label: "价税合计", prop: "total" }
        // ],
        tableColumn: this.setColumnVisible(this.showCol, this.tableColumn)
      }
      this.setTableList(this.productTableList)
    },
    setTableList(productTableList) {
      productTableList.allcol = productTableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
      this.searchOptions = []
      for (let i = 0; i < productTableList.tableColumn.length; i++) {
        const label = productTableList.tableColumn[i].label
        const value = productTableList.tableColumn[i].prop
        this.searchOptions.push({ value: value, label: label })
      }
    },
    // 产品列表输入