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

zuozhengqing

2024-03-27 7fbfeddedebd05e2d23ce411be887106d31e8eff

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

 src/assets/style/index.scss

@@ -21,13 +21,13 @@
  margin-right: 5px;
}
.success {
  background: #06c062;
  color: #06c062;
}
.error {
  background: #f62f2f;
  color: #f62f2f;
}
.warning-radio {
  background: #e6a23c;
  color: #e6a23c;
}
.warning {
  background: rgba(0, 0, 0, 0.4);

 src/components/makepager/CommonFormTableView.vue

@@ -22,6 +22,7 @@
          :label="item.label"
          :width="item.width"
          :min-width="item.min"
          v-if="item.isShowColumn"
          align="center"
        >
          <!-- 表头样式 -->
@@ -206,6 +207,12 @@
        </el-table-column>
        <slot name="tableButton" />
      </el-table>
      <div class="styleBtn">
        <i @click="checkCol()" class="label">...</i>
        <el-checkbox-group v-model="showcol" v-show="iscolopen" class="checkbox-group" @change="selectCheckBoxList">
          <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox>
        </el-checkbox-group>
      </div>
    </el-form>
    <div v-if="!detailEnter" style="margin: 10px">
      <el-button size="small" type="primary" :disabled="!isOperate" @click="add">新增</el-button>
@@ -284,6 +291,8 @@
        return {
          tableData: [], // 接口返回数据
          isReturn: false,
          allcol: [],
          showcol: [],
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true }
@@ -316,7 +325,9 @@
        infomation: {}
      },
      productIndex: 0,
      isRecalculate: true
      isRecalculate: true,
      iscolopen: false,
      showcol: []
    }
  },
  created() {
@@ -331,10 +342,22 @@
        this.getTableInfo()
      },
      immediate: true
    },
    "productTableList.showcol": {
      handler(newVal) {
        this.showcol = newVal
      },
      immediate: true
    }
  },
  computed: {},
  methods: {
    checkCol() {
      this.iscolopen = !this.iscolopen
    },
    selectCheckBoxList(val) {
      this.$emit("selTableCol", val)
    },
    getTableInfo(){
      this.tableList = this.productTableList
      if (this.tableList.tableData.length === 1 && this.tableList.tableData[0].name === "") {
@@ -617,6 +640,7 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.page-view {
  position: relative;
  .el-form-item {
    margin-bottom: 0;
    .custom-name {
@@ -649,5 +673,40 @@
    // text-align: left;
    text-align: center !important;
  }
  .styleBtn {
    position: absolute;
    width: 30px;
    height: 36px;
    // line-height: 26px;
    // background: #06c062;
    top: 0;
    right: -6px;
    z-index: 11;
    .label {
      position: absolute;
      top: 6px;
      font-size: 20px;
      // line-height: 5px;
      cursor: pointer;
      color: #000;
      transform: rotate(-90deg);
    }
    .checkbox-group {
      width: 160px;
      height: 300px;
      overflow: auto;
      display: flex;
      flex-direction: column;
      line-height: 25px;
      background: #ffffff;
      border-radius: 16px;
      padding: 12px;
      position: absolute;
      right: 0;
      top: 30px;
      z-index: 99;
      box-shadow: 0 0 2px 2px #f8f8f8;
    }
  }
}
</style>

 src/components/makepager/TableCommonView.vue

@@ -126,6 +126,21 @@
              item.getCallMethod(scope.row[item.prop], scope.row)
            }}</span>
          </div>
          <span
            v-else-if="item.isClass"
            :class="
              item.isClass
                ? item.getClassName(scope.row[item.prop], scope.row)
                : ''
            "
            >{{
              scope.row[item.prop]
                ? scope.row[item.prop]
                : scope.row[item.prop] === 0
                ? scope.row[item.prop]
                : "--"
            }}</span
          >
          <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
        </template>
      </el-table-column>

 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
                }
                this.$emit("addCollectionPlanClick", config)
                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") {
        this.productTableList.tableData = item.products
        this.tableData = item.products
      } 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") {
        this.productTableList.tableData = row.products
        this.tableData = row.products
        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
      }
      this.productTableList.tableData = []
      this.tableData = []
      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 })
      }
    },
    // 产品列表输入

 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" },
@@ -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) {

 src/views/systemSet/commonSet/compontents/SystemParameterSet.vue

@@ -133,9 +133,10 @@
      this.isBtnloading = true;
      let arr = [];
      arr = arr.concat(this.crmTableList.tableInfomation);
      for (let i in arr) {
        delete arr[i].id;
      }
      // for (let i in arr) {
      //   delete arr[i].id;
      // }
      console.log(arr,'arr')
      saveSystemSet({
        sets: arr,
      })

 src/views/systemSet/commonSet/index.vue

@@ -73,7 +73,8 @@
          }
          let item={
            name:i,
            id:value+'&'+i,
            // id:value+'&'+i,
            id:data[i].id,
            value:data[i].value,
            type:data[i].type,
            select:data[i].type=='select'?list:data[i].select,