edit.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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:"type",title:"记账类型", edit: {form:'radio',change:'changeType'},rules:"required",searchList:{1:"收入", 2:"支出"} },
  27. {field: 'type_name',title:__('账变名称'),edit: "select",rules:"required",searchList: Yunqi.data.parentList},
  28. {field:"bank_account",title:"记账账户",edit:"radio",rules:"required", searchList: Yunqi.data.bankList},
  29. {field:"change",title:"变动金额",edit:"text",rules:"required"},
  30. {field:"create_date",title:"记账日期",edit:"date",rules:"required"},
  31. {field:"remark",title:"备注",edit:"textarea"},
  32. ],
  33. row:Yunqi.data.row || {}
  34. },
  35. methods: {
  36. changeType:function(data,row){
  37. //这是监听
  38. this.$refs.yunform.setValue('type_name','')
  39. if(data == 1){
  40. this.$refs.yunform.setField('type_name', 'searchList', Yunqi.data.typeInList);//为表单项设置值
  41. }else{
  42. this.$refs.yunform.setField('type_name', 'searchList', Yunqi.data.typeOutList);//为表单项设置值
  43. }
  44. },
  45. onSubmit:function(rows){
  46. //表单提交前执行,返回false可以阻止表单提交
  47. /**
  48. * form常用方法
  49. * this.$refs.yunform.setError(field,message);//聚焦表单项并显示错误信息
  50. * this.$refs.yunform.hideField(field);//隐藏表单项
  51. * this.$refs.yunform.showField(field);//显示表单项
  52. * this.$refs.yunform.setValue(field,value);//为表单项设置值
  53. * this.$refs.yunform.getValue(field);//为获取表单项的值
  54. * this.$refs.yunform.setField(field,key,value);//修改表单json的其他属性值,比如rules,title, searchList 等
  55. */
  56. return true;
  57. },
  58. onSuccess:function(response){
  59. //表单提交成功后执行
  60. },
  61. onFail:function(err){
  62. //表单提交失败后执行
  63. },
  64. },
  65. //页面加载完成时执行
  66. onShow:function(query){
  67. },
  68. }
  69. </script>
  70. <style>
  71. </style>