form.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <template>
  2. <div class="form" >
  3. <by-tool :propConfig="toolConfig" @onAdd="onAdd">
  4. <template v-slot:tool-right><div style="width: 120px;">右边</div></template>
  5. </by-tool>
  6. <by-form :propConfig="config" ref="form">
  7. <template v-slot:slotField='{ value }'>这是插槽:{{ value.name }}</template>
  8. </by-form>
  9. <el-button type="primary" @click="getFormData">获取数据</el-button>
  10. <el-button type="primary" @click="getFormVali">获取表单验证</el-button>
  11. <el-button type="primary" @click="setFormData">设置数据</el-button>
  12. <el-button type="primary" @click="changeType">转换表单形式</el-button>
  13. <el-button type="primary" @click="changeBorder">加边框</el-button>
  14. </div>
  15. </template>
  16. <script lang="ts">
  17. import { Component, Prop, Vue, Watch } from "vue-property-decorator";
  18. import zujian from './a.vue'
  19. @Component
  20. export default class DemoForm extends Vue {
  21. config={
  22. attr:{
  23. size:'small',
  24. height:500,
  25. // readonly:true,
  26. rules:{
  27. name:[{
  28. required: true, message: '请输入名称', trigger: 'blur'
  29. }]
  30. }
  31. },
  32. columns:[
  33. [{
  34. span:6,
  35. label:'名称',
  36. prop:'name',
  37. component:'by-input',
  38. compConfig:{
  39. attr:{
  40. placeholder:'请输入名称',
  41. clearable:true
  42. }
  43. }
  44. },{
  45. span:6,
  46. label:'名称2',
  47. prop:'name2',
  48. component:'by-input',
  49. compConfig:{
  50. attr:{
  51. placeholder:'请输入名称',
  52. clearable:true
  53. }
  54. }
  55. },{
  56. label:'测试',
  57. prop:'name3',
  58. // required:true,
  59. component:zujian
  60. }],
  61. [{
  62. span:6,
  63. label:'下拉框',
  64. prop:'select',
  65. rules:[
  66. { required: true, message: '请选择数据', trigger: 'change' }
  67. ],
  68. component:'by-select',
  69. compConfig:{
  70. attr:{
  71. placeholder:'请选择数据',
  72. clearable:true,
  73. data:[{
  74. value: '选项1',
  75. label: '黄金糕'
  76. }, {
  77. value: '选项2',
  78. label: '双皮奶'
  79. }, {
  80. value: '选项3',
  81. label: '蚵仔煎'
  82. }, {
  83. value: '选项4',
  84. label: '龙须面'
  85. }, {
  86. value: '选项5',
  87. label: '北京烤鸭'
  88. }]
  89. }
  90. }
  91. },{
  92. span:6,
  93. label:'时间',
  94. prop:'date',
  95. rules:[
  96. { required: true, message: '请选择时间', trigger: 'change' }
  97. ],
  98. component:'by-date-picker',
  99. compConfig:{
  100. format:'yyyy-MM-dd HH:mm:ss',
  101. type:'datetime'
  102. }
  103. },{
  104. span:6,
  105. label:'插槽',
  106. // labelWidth:'0px',
  107. slot:true,
  108. descSlot:true,
  109. prop:'slotField',
  110. }],
  111. [{
  112. span:6,
  113. label:'树形',
  114. prop:'tree',
  115. component:'select-tree',
  116. compConfig:{
  117. attr:{
  118. label:'name',
  119. clearable:true,
  120. retConfig:{
  121. treeName:'name',
  122. treeId:'id'
  123. }
  124. },
  125. request:{
  126. url:'/maindata/maindataMaterialOrganizationCategory/treeList'
  127. }
  128. }
  129. }]
  130. ]
  131. }
  132. toolConfig={
  133. tools:{
  134. add:true,
  135. edit:true,
  136. del:true,
  137. export:true,
  138. search:true,
  139. refresh:true
  140. },
  141. audit:{
  142. add:'audit:collaborationLog:add',
  143. edit:'audit:collaborationLog:edit',
  144. delete:'audit:collaborationLog:remove',
  145. export:'audit:collaborationLog:export'
  146. },
  147. customTools:[
  148. {
  149. name: '新增123', icon: 'el-icon-plus', audit:[''], event:{
  150. click:()=>{
  151. console.log('新增123')
  152. }
  153. }
  154. }
  155. ]
  156. }
  157. onAdd(){
  158. console.log('点击新增')
  159. }
  160. getFormData(){
  161. let data = (this as any).$refs.form.getValue();
  162. console.log('表单数据:',data);
  163. }
  164. setFormData(){
  165. let data={
  166. name:'111',
  167. name2:'2222',
  168. name3:'333',
  169. select:'选项一',
  170. date:'2023-02-25 12:23:22',
  171. tree:'222'
  172. };
  173. (this as any).$refs.form.setValue(data);
  174. }
  175. changeType(){
  176. let c = (this as any).$lodash.cloneDeep(this.config);
  177. c.attr.showType = 'desc';
  178. (this as any).$refs.form.setConfig(c);
  179. }
  180. changeBorder(){
  181. let c = (this as any).$lodash.cloneDeep(this.config);
  182. c.attr.showType = 'desc';
  183. c.attr.border = true;
  184. (this as any).$refs.form.setConfig(c);
  185. }
  186. getFormVali(){
  187. (this as any).$refs.form.validate().then(()=>{
  188. console.log('验证通过')
  189. }).catch(()=>{
  190. console.log('验证不通过')
  191. });
  192. }
  193. }
  194. </script>
  195. <style lang="scss" scoped>
  196. .form{
  197. width: 100%;
  198. }
  199. </style>