CRM系统前端
查看 | 历史 | 提交 | 提交对比
vben
2020-11-18 ea24dfa384c9dc05e1b397c7c7dd4635dae87aef
提交 | 用户 | age
2f6253 1 <template>
陈 2   <div class="m-4">
3     <div class="mb-4">
4       <a-button @click="setProps({ labelWidth: 150 })" class="mr-2">更改labelWidth</a-button>
5       <a-button @click="setProps({ labelWidth: 120 })" class="mr-2">还原labelWidth</a-button>
6       <a-button @click="setProps({ size: 'large' })" class="mr-2">更改Size</a-button>
7       <a-button @click="setProps({ size: 'default' })" class="mr-2">还原Size</a-button>
8       <a-button @click="setProps({ disabled: true })" class="mr-2">禁用表单</a-button>
9       <a-button @click="setProps({ disabled: false })" class="mr-2">解除禁用</a-button>
10       <a-button @click="setProps({ compact: true })" class="mr-2">紧凑表单</a-button>
11       <a-button @click="setProps({ compact: false })" class="mr-2">还原正常间距</a-button>
12       <a-button @click="setProps({ actionColOptions: { span: 8 } })" class="mr-2">
13         操作按钮位置
14       </a-button>
15     </div>
16     <div class="mb-4">
17       <a-button @click="setProps({ showActionButtonGroup: false })" class="mr-2">
18         隐藏操作按钮
19       </a-button>
20       <a-button @click="setProps({ showActionButtonGroup: true })" class="mr-2">
21         显示操作按钮
22       </a-button>
23       <a-button @click="setProps({ showResetButton: false })" class="mr-2"> 隐藏重置按钮 </a-button>
24       <a-button @click="setProps({ showResetButton: true })" class="mr-2"> 显示重置按钮 </a-button>
25       <a-button @click="setProps({ showSubmitButton: false })" class="mr-2">
26         隐藏查询按钮
27       </a-button>
28       <a-button @click="setProps({ showSubmitButton: true })" class="mr-2"> 显示查询按钮 </a-button>
29       <a-button
30         @click="
31           setProps({
32             resetButtonOptions: {
33               disabled: true,
34               text: '重置New',
35             },
36           })
37         "
38         class="mr-2"
39       >
40         修改重置按钮
41       </a-button>
42       <a-button
43         @click="
44           setProps({
45             submitButtonOptions: {
46               disabled: true,
47               loading: true,
48             },
49           })
50         "
51         class="mr-2"
52       >
53         修改查询按钮
54       </a-button>
55     </div>
56     <CollapseContainer title="useForm示例">
57       <BasicForm @register="register" @submit="handleSubmit" />
58     </CollapseContainer>
59   </div>
60 </template>
61 <script lang="ts">
62   import { defineComponent } from 'vue';
63   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
64   import { CollapseContainer } from '/@/components/Container/index';
65   import { useMessage } from '/@/hooks/web/useMessage';
66   const schemas: FormSchema[] = [
67     {
68       field: 'field1',
69       component: 'Input',
70       label: '字段1',
71       colProps: {
72         span: 8,
73       },
74       componentProps: {
75         placeholder: '自定义placeholder',
76         onChange: (e: any) => {
77           console.log(e);
78         },
79       },
80     },
81     {
82       field: 'field2',
83       component: 'Input',
84       label: '字段2',
85       colProps: {
86         span: 8,
87       },
88     },
89     {
90       field: 'field3',
91       component: 'DatePicker',
92       label: '字段3',
93       colProps: {
94         span: 8,
95       },
96     },
97     {
98       field: 'field4',
99       component: 'Select',
100       label: '字段4',
101       colProps: {
102         span: 8,
103       },
104       componentProps: {
105         options: [
106           {
107             label: '选项1',
108             value: '1',
109             key: '1',
110           },
111           {
112             label: '选项2',
113             value: '2',
114             key: '2',
115           },
116         ],
117       },
118     },
119     {
120       field: 'field5',
121       component: 'CheckboxGroup',
122       label: '字段5',
123       colProps: {
124         span: 8,
125       },
126       componentProps: {
127         options: [
128           {
129             label: '选项1',
130             value: '1',
131           },
132           {
133             label: '选项2',
134             value: '2',
135           },
136         ],
137       },
138     },
139     {
140       field: 'field7',
141       component: 'RadioGroup',
142       label: '字段7',
143       colProps: {
144         span: 8,
145       },
146       componentProps: {
147         options: [
148           {
149             label: '选项1',
150             value: '1',
151           },
152           {
153             label: '选项2',
154             value: '2',
155           },
156         ],
157       },
158     },
159   ];
160
161   export default defineComponent({
162     components: { BasicForm, CollapseContainer },
163     setup() {
164       const { createMessage } = useMessage();
165       const [register, { setProps }] = useForm({
166         labelWidth: 120,
167         schemas,
168         actionColOptions: {
169           span: 24,
170         },
171       });
172       return {
173         register,
174         schemas,
175         handleSubmit: (values: any) => {
176           createMessage.success('click search,values:' + JSON.stringify(values));
177         },
178         setProps,
179       };
180     },
181   });
182 </script>