add.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  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. <template v-slot:type_name="{rows}">
  15. <el-form-item label="{:__('父级')}:" prop="type_name">
  16. <el-select placeholder="{:__('请选择父级')}" v-model="rows.type_name" :clearable="true" style="width: 100%">
  17. <el-option key="all" label="无" value="0"></el-option>
  18. {foreach name="parentList" item="vo"}
  19. <el-option v-if="rows.type_name=='{$vo}'" key="{$key}" value="{$vo}"></el-option>
  20. {/foreach}
  21. </el-select>
  22. </el-form-item>
  23. </template>
  24. </yun-form>
  25. </el-card>
  26. </template>
  27. <script>
  28. import form from "@components/Form.js";
  29. export default{
  30. components:{
  31. 'YunForm':form
  32. },
  33. data:{
  34. columns:[
  35. {field:"id",title:"ID",edit:"hidden"},
  36. {field:"type",title:"记账类型", edit: {form:'radio',change:'changeType'},rules:"required",searchList:{1:"收入", 2:"支出"} },
  37. // {field:"type_name",title:"账变名称",edit:"text",rules:"required"},
  38. {field: 'type_name',title:__('账变名称'),edit: {form:'slot',value:'0'}},
  39. {field:"bank_account",title:"记账账户",edit:"radio",rules:"required", searchList: Yunqi.data.bankList},
  40. {field:"change",title:"变动金额",edit:"text",rules:"required"},
  41. {field:"create_date",title:"记账日期",edit:"date",rules:"required"},
  42. {field:"remark",title:"备注",edit:"textarea"},
  43. ],
  44. row:Yunqi.data.row || {}
  45. },
  46. methods: {
  47. changeType:function(data,row){
  48. row.type_name='0'
  49. },
  50. onSubmit:function(rows){
  51. //表单提交前执行,返回false可以阻止表单提交
  52. /**
  53. * form常用方法
  54. * this.$refs.yunform.setError(field,message);//聚焦表单项并显示错误信息
  55. * this.$refs.yunform.hideField(field);//隐藏表单项
  56. * this.$refs.yunform.showField(field);//显示表单项
  57. * this.$refs.yunform.setValue(field,value);//为表单项设置值
  58. * this.$refs.yunform.getValue(field);//为获取表单项的值
  59. * this.$refs.yunform.setField(field,key,value);//修改表单json的其他属性值,比如rules,title,searchList等
  60. */
  61. return true;
  62. },
  63. onSuccess:function(response){
  64. //表单提交成功后执行
  65. },
  66. onFail:function(err){
  67. //表单提交失败后执行
  68. }
  69. }
  70. }
  71. </script>
  72. <style>
  73. </style>