案例一.物料类别，改变使用状态颜色

1、效果

image.png

2、方法介绍

需要在什么时期什么场景实现改变表格渲染内容，可视情况决定。案例一选择在loaded这个“列表数据请求完毕”的生命周期钩子中实现改变表格（mes_ba_cptype）的“使用状态”列（useflag）的颜色。
changeCustomRender是前端向外提供的api方法，用于修改某表格某列的内容
参数1：传入列名
参数2：传入渲染函数。渲染函数可传入三个参数，第一个参数表示当前单元格的值，第二个参数表示当前行的值，第三个参数表示当前行的索引，可根据需要依次传入。注意：返回的html必须为原生html标签
参数3：传入表名（可省略），没有传入表名时默认为主表表名

  1. //在列表数据请求完毕的生命周期里调用改变表格渲染内容的方法
  2. //changeCustomRender 修改表格列的内容
  3.   //@param {string}  列名
  4.   //@param {function} 渲染什么内容的逻辑函数，注意返回的html代码以 `` 包裹，返回的html代码只能使用html自有标签
  5.   //@param {string}  要处理的表格，因为可能存在多个表格。不传则默认认为是主表table
  7.   //getDictText 根据字段名获取该字段字典值
  8.   //@param {string}  字典的value
  9.   //@param {string}  字典名
  10.   //@param {string}  表格名，因为可能存在多个表格。不传则默认认为是主表table
  12. //列表数据请求完毕的生命周期
  13. loaded(){
  14.   //改变表格渲染内容
  15.   that.changeCustomRender('useflag',(text,row,index)=>{
  16.     //text表示当前单元格的值，row表示当前行的值，index为索引值
  17.     //获取当前单元格的字典值对应的文字
  18.     let result = that.getDictText(text,'useflag')
  19.     if(text=='1'){
  20.         //如果单元格值为1，将此单元格的内容替换为如下html
  21.       return `<div style='color:#10ff10;'>${result}</div>`
  22.     }else if(text=='0'){ 
  23.       //如果单元格值为0，将此单元格的内容替换为如下html
  24.       return `<div style='color:#ff1111;'>${result}</div>`
  25.     }else{
  26.       //其他情况则返回原值
  27.       return result; 
  28.     }
  29.   },'mes_ba_cptype');
  31. }

3、字段描述

image.png

4、案例演示链接

http://feixunoa.xicp.net:8000/render/render/cgformlist/bf8bb0c02291473fa3355e3063f04f60

案例二.首检记录，改变主表某字段时带回细表

1、效果

image.png

2、方法介绍

onlChange是前端向外提供的监听表单值改变的api方法，将要监听的值写在其return的对象中即可。本案例选择在字段f3改变时触发。当f3的值发生改变时，会触发其回调方法，可在其会调方法中发送请求或做其他操作。
addSubRows是前端向外提供的给细表赋值的api方法。
参数1：细表名（必填）
参数2：要向细表中追加的数据
removeSubRows是前端向外提供的删除细表数据的api方法
参数1：细表名（必填）
参数2：要删除的数据的id组成的数组，如[‘123’,’456’]表示参数id为123和456的数据。不传则清空整个细表。

  1. onlChange(){
  2.       return{
  3.       //mcode的值一旦改变，发送请求
  4.         mcode(value){
  5.             console.log("mcode",value)
  6.         getAction(`
  7. /mes-w-quality/online/cgreport/api/getColumnsAndData/6ad92ce3658a4219a36a627e854bf9f2?_t=1619336593&order=desc&pageNo=1&pageSize=10&self_mcode=${value}`,{}).then(res=>{
  8.             if(res.success){
  9.               that.$message.success(res.msg)
  10.             //如果需要先清空细表数据，则调用removeSubRows，参数一传入细表名，参数二传递数组，数组中是要删除的记录的id，不传则删除全部
  11.             that.removeSubRows('mes_first_inspection_list')
  12.             //调用向细表插入数据的方法
  13.             that.addSubRows('mes_first_inspection_list',res.data.data.records)
  14.           }else{
  15.               that.$message.error(res.msg)
  16.           }
  17.         })
  18.         }
  19.     }
  20.   }

3、字段描述

image.png

4、案例演示链接

http://feixunoa.xicp.net:8000/render/render/cgformlist/a151f640c33c4e48812995448685d33f

案例三.转单方式一使用场景

1、效果

image.png
image.png

2、方法介绍

goRoute是前端向外提供的跳转页面的api方法。
参数：路由对象。#详情
addSubRows是前端向外提供的给细表赋值的api方法。
参数1：细表名（必填）
参数2：要向细表中追加的数据

  1. //销售订单页面js
  2. //Release2为页面自定义按钮下达工单2的方法
  3. Release2({record}){
  4.   if(record.length==0){
  5.       that.$message.warning("请先选择一条记录")    
  6.     return false;
  7.   }else if(record.length>1){
  8.     that.$message.warning("请只选择一条记录")    
  9.     return false;    
  10.   }
  11.   //将本页面选中的id带上跳转到生产工单页面页面
  12.     that.goRoute({
  13.       route:'/render/cgformlist/8d29c68799de45ba95fc476c721bf270',
  14.     query:{
  15.         mes_sa_order_id:record[0].id
  16.     }
  17.   })
  18. }
//生产工单页面js
//created是页面js初始化完成以后立即触发的方法
created(){
    //获取从销售订单传过来的参数mes_sa_order_id
    let { mes_sa_order_id } = that.$route.query
    //如果获取得到，表明是从销售订单跳转过来的
    if (mes_sa_order_id) {
        //打开新增弹窗，add是前端打开新增弹窗的api方法
        that.add()
    }
},
//beforeAdd是打开新增弹窗前触发的方法
beforeAdd(){
    //获取从销售订单传过来的参数mes_sa_order_id
    let { mes_sa_order_id } = that.$route.query
    //如果获取得到，表明是从销售订单跳转过来的
    if (mes_sa_order_id) {
        //根据需要发送请求获取数据
        getAction(`
/mes-w-main/online/cgform/api/form/ea528943789648fc9c91665e12dffd68/${mes_sa_order_id}`, {}).then(res => {
            if (res.success) {
                  //获取细表
                let subList = res.data.mes_sa_orderlist || []
                //删除返回的请求数据res.data中的细表，避免在用res.data赋值给表单的时候也把细表赋给表单
                delete res.data.mes_sa_orderlist
                //将获取到的值赋给表单
                that.triggleChangeValues(res.data)
                //将获取到的细表数据赋给细表单
                that.addSubRows('mes_po_morder_list', subList)
            } else {
                that.$message.error("获取销售订单数据失败")
            }
        })
    }
},
//afterAdd是新增完成后触发的方法
afterAdd(){
    //新增完成后，判断是否有mes_sa_order_id，有则说明是销售订单跳转过来的,那新增完就应该把页面关闭
    let { mes_sa_order_id } = that.$route.query
    if (mes_sa_order_id) {
        //关闭此页面,closePage是前端提供的关闭当前页面的api方法
        that.closePage()
          //此实现方式中如果不关闭生产工单页面，工单页面url中的参数将会持续影响逻辑，因此关闭本页面
    }
}

3、字段描述

image.png
image.png

4、案例演示链接

http://feixunoa.xicp.net:8000/render/render/cgformlist/ea528943789648fc9c91665e12dffd68

案例四.自动计算

1、效果

image.png

2、方法介绍

onlChange是前端向外提供的监听表单值改变的api方法，将要监听的值写在其return的对象中即可。本案例选择在字段f3改变时触发。当f3的值发生改变时，会触发其回调方法，可在其会调方法中发送请求或做其他操作。

onlChange(){
    return {
    //不含税总价  no_tax_mny

      //数量    qty

    //不含税单价 price

    //监听细表
    mes_sa_orderlist(event){
        let {type,row,column,value,target} = event
      console.log("row",row)
      console.log("column",column)
      console.log("value",value)
      console.log("target",target)
      let {price,qty,no_tax_mny} = row
      if(column.key=='qty'|| column.key=='price'){
        //如果修改了数量
        //先将类型强转为number，强转失败将变为NaN
        //value为此时输入的值,key为qty表示此时输入的qty的值
        qty = qty - 0
        price = price - 0
        if(isNaN(qty)||isNaN(price)){
            no_tax_mny = 0
        }else{
          no_tax_mny = qty * price
        }
        target.setValues(
          [{
                rowKey: row.id, // 行的id
                values: {
                    no_tax_mny:no_tax_mny
                }
          }]
        )
      }
    }
  }
}

3、字段描述

image.png

4、案例演示链接

http://feixunoa.xicp.net:8000/render/render/cgformlist/ea528943789648fc9c91665e12dffd68