add.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <el-card shadow="never" style="border: 0;">
  3. <yun-form
  4. ref="yunform"
  5. @render="onFormRender"
  6. @submit="onSubmit"
  7. @success="onSuccess"
  8. @fail="onFail"
  9. :data="row"
  10. :columns="columns">
  11. <template #default>
  12. {:token_field()}
  13. </template>
  14. </yun-form>
  15. </el-card>
  16. </template>
  17. <script>
  18. import form from "@components/Form.js";
  19. export default{
  20. components:{
  21. 'YunForm':form
  22. },
  23. data:{
  24. columns:[
  25. {field:"id",title:"ID",edit:"hidden"},
  26. {field:"user_id",title:"user_id",edit:"number"},
  27. {field:"type",title:"记账类型:收入 1;支出 2",edit:"select",rules:"required",searchList:{1:"是",0:"否"}},
  28. {field:"type_name",title:"账变名称,记录汉字",edit:"text",rules:"required"},
  29. {field:"bank_account",title:"记账账户,记录key",edit:"text",rules:"required"},
  30. {field:"change",title:"变动金额",edit:"text",rules:"required"},
  31. {field:"remark",title:"备注",edit:"text",rules:"required"},
  32. {field:"create_date",title:"创建日期,编辑后同步修改",edit:"text",rules:"required"},
  33. {field:"createtime",title:"创建时间"},
  34. {field:"updatetime",title:"修改时间"},
  35. ],
  36. row:Yunqi.data.row || {}
  37. },
  38. //页面加载完成时执行
  39. onLoad:function(query){
  40. console.log(query);
  41. },
  42. //页面初始显示或在框架内显示时执行
  43. onShow:function(){
  44. },
  45. //页面在框架内隐藏时执行
  46. onHide:function(){
  47. },
  48. //页面在框架内关闭时执行
  49. onUnload:function(){
  50. },
  51. methods: {
  52. onFormRender:function(rows){
  53. //表单渲染完成后执行
  54. },
  55. onSubmit:function(rows){
  56. //表单提交前执行,返回false可以阻止表单提交
  57. /**
  58. * form常用方法
  59. * this.$refs.yunform.setError(field,message);//聚焦表单项并显示错误信息
  60. * this.$refs.yunform.hideField(field);//隐藏表单项
  61. * this.$refs.yunform.showField(field);//显示表单项
  62. * this.$refs.yunform.setValue(field,value);//为表单项设置值
  63. * this.$refs.yunform.getValue(field);//为获取表单项的值
  64. * this.$refs.yunform.setField(field,key,value);//修改表单json的其他属性值,比如rules,title,searchList等
  65. */
  66. return true;
  67. },
  68. onSuccess:function(response){
  69. //表单提交成功后执行
  70. },
  71. onFail:function(err){
  72. //表单提交失败后执行
  73. }
  74. }
  75. }
  76. </script>
  77. <style>
  78. </style>