1、生命周期

(1)、created 初始化

描述：增强型js初始化完成后执行的钩子函数

created(){
        that.$message.success("created执行成功");
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(2)、loaded 加载数据完毕

描述：数据加载完成后执行的钩子函数，不论请求成功失败都会执行

//erp风格页面可能存在多个表，它们可能需要不同的loaded操作
loaded(){
       return{
      //表名
      api_method_example0(){
            //当api_method_example0加载数据完毕就会执行以下代码，这里是弹出一句提示
            that.$message.success("api_method_example0 数据请求完成");
      },
      //表名
      api_method_example0_sub(){
        //api_method_example0_sub加载数据完毕就会执行以下代码，这里是弹出一句提示
            that.$message.success("api_method_example0_sub 数据请求完成")
      },
  }
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(3)、loadedOnce 加载数据完毕

描述：数据加载完成后执行的钩子函数，不论请求成功失败都会执行，用法同loaded，但只会执行一次

//erp风格页面可能存在多个表，它们可能需要不同的loaded操作
loadedOnce(){
       return{
      //表名
      api_method_example0(){
        //当api_method_example0第一次加载数据完毕就会执行以下代码，这里是弹出一句提示
            that.$message.success("api_method_example0 数据请求完成");
      },{
      //表名
      api_method_example0_sub(){
         //当api_method_example0_sub第一次加载数据完毕就会执行以下代码，这里是弹出一句提示
            that.$message.success("api_method_example0_sub 数据请求完成")
      },
  }
}

(4)、loadParams 添加请求参数

描述：向数据列表的请求中强行添加参数

//erp风格页面可能存在多个表，它们可能需要不同的loadParams操作
loadParams() {
    return {
          //表名，这里表示向 api_method_example0 表的请求数据方法中注入参数meaningless_field=123
        api_method_example0() {
            return {
                'meaningless_field': 123
            }
        },
          api_method_example0_sub() {
            return {
                'sub_meaningless_field': 456
            }
        },
    }
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(5)、控制按钮的自定义显示和隐藏

controlBtn(){
  return {
      //列按钮的自定义显示隐藏
      link(row){
        //row是当前行数据
         return {
            /**
            按钮名称(){
               if(条件判断){
                   return false;//不显示，不return false则默认会显示
               }
            }
            */
           testLink(){
                //状态为1的行不会显示testLink这个行内按钮
               if(row.states=='1'){
                   return false;
               }
            }
         }
      },
      //表单按钮的自定义显示隐藏
      form(model){
          //model是主表数据
         return {
            /**
            按钮名称(){
               if(条件判断){
                   return false;//不显示，不return false则默认会显示
               }
            }
                 */
           testForm(){
                //主表数据的状态为1时不会显示testForm这个表单按钮
               if(model.states=='1'){
                   return false;//不显示，不return false则默认会显示
               }
            }
         }
      }
      //列表顶部按钮的自定义显示隐藏
      button(){
         return {
            /**
            按钮名称(){
               if(条件判断){
                   return false;//不显示，不return false则默认会显示
               }
            }
            */
               testButton(){
                //当列表没有选中记录时不会显示testButton这个列表按钮
               if(that.table.selectedRow.length==0){
                   return false;
               }
            }
         }
      }
   }
}

2、api方法

(1)、loadData 刷新列表

/**假设在某个自定义按钮(如customButtonHandle)中我们需要刷新列表数据*/
customButtonHandle(){
    that.loadData()
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(2)、getDictOptions 获取字典

/*
getDictOptions 返回对应的字典或空数组
@param{}name 字典名称
@param{}currentTableName 表名
*/

/**假设在某个自定义按钮(如customButtonHandle)中我们需要获取某个表(如api_method_example0)中某个字段(如states)的字典*/
customButtonHandle(){
    var dictOptions = that.getDictOptions('states','api_method_example0');
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(3)、getDictText 获取字典文字

/*
getDictText 返回字典值对应的text或空字符串
@param{}text 字典值
@param{}name 字典名
@param{}currentTableName 表名
*/

/**假设在某个自定义按钮(如customButtonHandle)中我们需要获取某个表(如api_method_example0)中某个字段(如states)的值为1时的文字*/
customButtonHandle(){
    var text = that.getDictText(1,'states','api_method_example0');
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(4)、changeCustomRender 改变列表内容

/*
api方法修改某列的样式，如当状态为1时显示绿色字体，状态为2显示红色字体
@param{string} column 列名
@param{function} render 渲染什么内容的逻辑函数，注意返回的html代码以 `` 包裹，返回的html代码只能使用html自有标签
@param{string} currentTableName 要处理的表格，因为可能存在多个表格。不传则默认认为是主表
/

/**列表中states字段值为1时，该单元格字体变为绿色，值为0的变为红色*/
loaded(){
      /**loaded是列表加载完成执行的钩子函数*/
    return{
        api_method_example0(){
            that.changeCustomRender('states',(text,row,index)=>{
                let result = that.getDictText(text,'states')
                if(text=='1'){
                    return `<div style='color:#10ff10;'>${result}</div>`
                }else if(text=='0'){ 
                    return `<div style='color:#ff1111;'>${result}</div>`
                }else{
                    return result; 
                }
          },'api_method_example0');
        }
    }
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(5)、$message 弹框提示

//假设customButtonHandle是定义好的自定义按钮方法
customButtonHandle(){
    that.$message.success("调用自定义方法成功")
  //更多用法参考 https://www.antdv.com/components/modal-cn/
}

(6)、$confirm 弹出确认框

//假设customButtonHandle是定义好的自定义按钮方法
customButtonHandle(){
    that.$confirm({
    title: '确定要继续吗？',
    //content: '这是内容',        //内容
    //okText: '是',            //确认按钮文字    
    //okType: 'primary',            //确认按钮类型        
    //cancelText: '否',  //取消按钮文字    
    //更多用法参考 https://www.antdv.com/components/modal-cn/
    onOk:()=>{
      console.log("that",that)
      that.$message.success("你选择了确定")
    },
    onCancel:()=>{
      that.$message.error("你选择了取消")
    },
  })
}

二、表单

1、生命周期

(1)、beforeAdd 新增进入前

描述：点击新增进入弹窗时触发的钩子函数

beforeAdd(){
        that.$message.success("打开新增弹窗时的钩子函数触发成功")
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(2)、afterAdd 新增提交后

描述：新增弹窗提交表单触发的钩子函数

afterAdd(){
        that.$message.success("新增弹窗提交表单的钩子函数触发成功")
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(3)、beforeEdit 编辑进入前

描述：点击编辑进入弹窗时触发的钩子函数

beforeEdit(){
        that.$message.success("打开编辑弹窗时的钩子函数触发成功")
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(4)、afterEdit 编辑提交后

描述：编辑弹窗提交表单触发的钩子函数

afterEdit(){
        that.$message.success("编辑弹窗提交表单的钩子函数触发成功")
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(5)、onlChange 监听表单值

描述：监听表单值发生改变时触发的钩子

onlChange(){
    return{
    //主表字段返回的是改变后的值
    gender(value){
            console.log("value",value)
    },
    //细表只能统一监听整个细表的变化，再根据字段判断是哪个字段触发的。返回的是一个事件对象
    api_method_example0_sub(event){
            let {type,row,column,value,target} = event
        if(column.key=="grade"){
                 let level = ''
                  if(value>=90&&value<=100){
                     level = 'A';
             }else if(value>=80&&value<90){
                     level = 'B';
             }else if(value>=70&&value<80){
                     level = 'C';
             }else if(value>=60&&value<70){
                     level = 'D';
             }else if(value>=40&&value<60){
                     level = 'E';
             }else{
                     level = 'F';
             }
             target.setValues([
                    {
                      rowKey: row.id, // 行的id
                      values: {
                          evaluate_level:level
                      }
                    },
                ])
        }
        console.log("event",event)
    }
  }
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(6)、阻止页面删除

//方法名字，固定
dontDelete(){
  return {
    //表名，这里写test_all_control 代表对test_all_control表进行控制
    test_all_control(row){
      //row是删除的当前行的数据
      if(row.gender=='1'){
        //需求：当性别为1时不可删除
        //自定义提示,return的内容即为提示词
        return "自定义提示内容";
      }else if(row.name=='小明'){
        //需求：名字是小明的记录不可删除
        //直接return false，当前数据不可被删除，并且固定提示“不可删除该条记录”
         return false;   
      }
    }
  }
}

(7)、控制按钮的自定义显示和隐藏

controlBtn(){
  return {
      //列按钮的自定义显示隐藏
      link(row){
        //row是当前行数据
         return {
            /**
            按钮名称(){
               if(条件判断){
                   return false;//不显示，不return false则默认会显示
               }
            }
            */
           testLink(){
                //状态为1的行不会显示testLink这个行内按钮
               if(row.states=='1'){
                   return false;
               }
            }
         }
      },
      //表单按钮的自定义显示隐藏
      form(model){
          //model是主表数据
         return {
            /**
            按钮名称(){
               if(条件判断){
                   return false;//不显示，不return false则默认会显示
               }
            }
                 */
           testForm(){
                //主表数据的状态为1时不会显示testForm这个表单按钮
               if(model.states=='1'){
                   return false;//不显示，不return false则默认会显示
               }
            }
         }
      }
      //列表顶部按钮的自定义显示隐藏
      button(){
         return {
            /**
            按钮名称(){
               if(条件判断){
                   return false;//不显示，不return false则默认会显示
               }
            }
            */
               testButton(){
                //当列表没有选中记录时不会显示testButton这个列表按钮
               if(that.table.selectedRow.length==0){
                   return false;
               }
            }
         }
      }
   }
}

2、api方法

(1)、loadData 更新列表

/*
api方法刷新列表的方法，刷新上层表的同时会刷新下层表
@param{string} args 为’1’的时候表示将列表重置到第一页
@param{string} currentTableName 要刷新的表
*/

refreshData(){
  //刷新子表
      that.loadData('1','api_method_example0_sub') 
  //刷新主表
  that.loadData('1') 
  //刷新主表
  that.loadData('1','api_method_example0') 
 }

(2)、addSubRows 向细表插入数据

/*
api方法向细表中插入数据
@param{string} currentTableName 细表名
@param{Array} rows 向细表插入的数据
*/

onlChange(){
    return{
      gender(value){
        that.addSubRows('api_method_example0_sub',[{
          grade: "90",
          lesson_name: "数学",
          evaluate_level: 'A'
      },{
          grade: "90",
          lesson_name: "英语",
          evaluate_level: 'A'
      }])
    }
  }
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(3)、removeSubRows 移除细表数据

/*
api方法删除细表数据
@param{string} currentTableName 细表名
@param{Array} ids 要移除的数据的id的数组，不传则全部移除
*/

removeSubRowsByIds(){
        that.removeSubRows('api_method_example0_sub',['16190750825910'])
},
removeSubRows(){
        that.removeSubRows('api_method_example0_sub')
},

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(4)、hideFormItem 隐藏表单字段

/*
api方法隐藏某表单项
@param{Array} fields 要隐藏的字段名的数组
@param{string} currentTableName 主表名或一对一表名，不填则默认是当前主表
*/

hideAge(){
        //that.hideFormItem(['age'])  等价于下面代码
        that.hideFormItem(['age'],'api_method_example0')
},

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(5)、showFormItem 显示表单字段

/*
api方法显示某表单项
@param{Array} fields 要隐藏的字段名的数组
@param{string} currentTableName 主表名或一对一表名，不填则默认是当前主表
*/

showAge(){
        //that.showFormItem(['age'])  等价于下面代码
        that.showFormItem(['age'],'api_method_example0')
},

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(6)、changeOptions 设置下拉组件选项

/*
api方法设置某下拉组件的下拉选项
@param{string} field 要设置的字段名
@param{Array} options 下拉选项数组
*/

onlChange(){
    age(value){
          let list = that.getSelectOptions('states')
        console.log("getSelectOptions",list)
    },
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(7)、getSelectOptions 获取下拉组件选项

/*
api方法获取某下拉组件的下拉选项
@param{string} field 要获取的字段名
/

onlChange(){
    age(value){
          let result = [{
            text: "启用",
          title: "启用",
          value: "1",
        },{
            text: "失效",
          title: "失效",
          value: "0",
        }]
        if(value>'18'){
            result = [{
            text: "启用",
            title: "启用",
            value: "1",
          }]
        }
            that.changeOptions('states',result)
    },
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(8)、triggleChangeValues / setFieldsValue 改变表单值

/*
api方法改变表单的值
@param{Object} param 要设置值的对象，键名代表字段，键值代表要赋的值
/
注意：triggleChangeValues 会过滤id。如果需要改变id的值，请使用setFieldsValue

changeModel(){
        that.triggleChangeValues({name:'小强',age:20})
        that.setFieldsValue({name:'小强',age:20,id:123456})
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(9)、simpleDateFormat 格式化日期

/*
api方法格式化日期
@param{int} millisecond 毫秒数
@param{string} format 日期格式
*/

changeModel(){
        console.log(that.simpleDateFormat(1629620649000,'YYYY-MM-DD HH:mm:ss'))
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(10)、getFieldsValue 获取表单值

/*
api方法获取表单项值
@param{string} field 字段名不传则获取全部字段值并以对象形式返回结果
/

getAllValues(){
    console.log(that.getFieldsValue('age'))
    console.log(that.getFieldsValue())
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(11)、disableFields 禁用表单字段

/*
api方法禁用字段
@param{Array}} list 字段名
/

disabledNameAndAge(){
            that.disableFields(['name','age'])
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(12)、enabledFields 解除字段禁用

/*
api方法解除字段禁用
@param{Array}} list 字段名
/

enabledNameAndAge(){
            that.enabledFields(['name','age'])
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(13)、setFieldParams 改变组件查询参数

/*
api方法改变下拉框、checkbox、radio、popup等组件的查询参数
@param{string}} field 字段名
@param{Object}} params 查询参数
@param{string}} currentTableName 表名，不传默认是主表单
/

changeMcodeParams(){
    that.setFieldParams('mcode',{'aaa':123123},'api_method_example0_sub')
    that.setFieldParams('mcode',{'bbb':456456})
}

参考用例：http://feixunoa.xicp.net:8000/render/render/cgformlist/873b78195be14642aca8a3cf236aece2

(14)、goRoute 跳转页面

/*
api方法跳转页面的方法
@param{Object}
/

//跳转外链
this.goRoute({
  route:'/IframePageRouter',
  query:{
    //必须有url，且url带协议，协议如https://、http://等
    url:'http://www.baidu.com'
  }
})
//跳转自动渲染组件页面
this.goRoute({
  //  route:`/render/cgformlist/${code}`,
  route:'/render/cgformlist/a151f640c33c4e48812995448685d33f',
  query:{
    //携带的参数
    id:123
  }
})

(15)、$message 弹框提示

//假设customButtonHandle是定义好的自定义按钮方法
customButtonHandle(){
    that.$message.success("调用自定义方法成功")
  //更多用法参考 https://www.antdv.com/components/modal-cn/
}

(16)、$confirm 弹出确认框

//假设customButtonHandle是定义好的自定义按钮方法
customButtonHandle(){
    that.$confirm({
    title: '确定要继续吗？',
    //content: '这是内容',        //内容
    //okText: '是',            //确认按钮文字    
    //okType: 'primary',            //确认按钮类型        
    //cancelText: '否',  //取消按钮文字    
    //更多用法参考 https://www.antdv.com/components/modal-cn/
    onOk:()=>{
      console.log("that",that)
      that.$message.success("你选择了确定")
    },
    onCancel:()=>{
      that.$message.error("你选择了取消")
    },
  })
}

(17)、$emit(“ok”) 刷新列表

//假设customButtonHandle是定义好的自定义按钮方法，在表单页中点击这个按钮的时候刷新列表
customButtonHandle(){
    that.$emit("ok")
}

(18)、refreshData 刷新表单

//假设customButtonHandle是定义好的自定义按钮方法，在表单页中点击这个按钮的时候刷新主表和细表的数据
customButtonHandle(){
    that.refreshData()
}

高级设置说明

1、生命周期

(1)、created 初始化

(2)、loaded 加载数据完毕

(3)、loadedOnce 加载数据完毕

(4)、loadParams 添加请求参数

(5)、控制按钮的自定义显示和隐藏

2、api方法

(1)、loadData 刷新列表

(2)、getDictOptions 获取字典

(3)、getDictText 获取字典文字

(4)、changeCustomRender 改变列表内容

(5)、$message 弹框提示

(6)、$confirm 弹出确认框

二、表单

1、生命周期

(1)、beforeAdd 新增进入前

(2)、afterAdd 新增提交后

(3)、beforeEdit 编辑进入前

(4)、afterEdit 编辑提交后

(5)、onlChange 监听表单值

(6)、阻止页面删除

(7)、控制按钮的自定义显示和隐藏

2、api方法

(1)、loadData 更新列表

(2)、addSubRows 向细表插入数据

(3)、removeSubRows 移除细表数据

(4)、hideFormItem 隐藏表单字段

(5)、showFormItem 显示表单字段

(6)、changeOptions 设置下拉组件选项

(7)、getSelectOptions 获取下拉组件选项

(8)、triggleChangeValues / setFieldsValue 改变表单值

(9)、simpleDateFormat 格式化日期

(10)、getFieldsValue 获取表单值

(11)、disableFields 禁用表单字段

(12)、enabledFields 解除字段禁用

(13)、setFieldParams 改变组件查询参数

(14)、goRoute 跳转页面

(15)、$message 弹框提示

(16)、$confirm 弹出确认框

(17)、$emit(“ok”) 刷新列表

(18)、refreshData 刷新表单