CRM系统前端
查看 | 历史 | 提交 | 提交对比
vben
2020-11-23 234c1d1fae6a7f2c78e456f992f91622ca599060
提交 | 用户 | 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="使用ref调用表单内部函数示例">
57       <BasicForm
58         :schemas="schemas"
59         ref="formElRef"
2f268c 60         :labelWidth="100"
2f6253 61         @submit="handleSubmit"
陈 62         :actionColOptions="{ span: 24 }"
63       />
64     </CollapseContainer>
65   </div>
66 </template>
67 <script lang="ts">
68   import { defineComponent, ref } from 'vue';
69   import { BasicForm, FormSchema, FormActionType, FormProps } from '/@/components/Form/index';
70   import { CollapseContainer } from '/@/components/Container/index';
71   import { useMessage } from '/@/hooks/web/useMessage';
72   const schemas: FormSchema[] = [
73     {
74       field: 'field1',
75       component: 'Input',
76       label: '字段1',
77       colProps: {
78         span: 8,
79       },
80       componentProps: {
81         placeholder: '自定义placeholder',
82         onChange: (e: any) => {
83           console.log(e);
84         },
85       },
86     },
87     {
88       field: 'field2',
89       component: 'Input',
90       label: '字段2',
91       colProps: {
92         span: 8,
93       },
94     },
95     {
96       field: 'field3',
97       component: 'DatePicker',
98       label: '字段3',
99       colProps: {
100         span: 8,
101       },
102     },
103     {
104       field: 'field4',
105       component: 'Select',
106       label: '字段4',
107       colProps: {
108         span: 8,
109       },
110       componentProps: {
111         options: [
112           {
113             label: '选项1',
114             value: '1',
115             key: '1',
116           },
117           {
118             label: '选项2',
119             value: '2',
120             key: '2',
121           },
122         ],
123       },
124     },
125     {
126       field: 'field5',
127       component: 'CheckboxGroup',
128       label: '字段5',
129       colProps: {
130         span: 8,
131       },
132       componentProps: {
133         options: [
134           {
135             label: '选项1',
136             value: '1',
137           },
138           {
139             label: '选项2',
140             value: '2',
141           },
142         ],
143       },
144     },
145     {
146       field: 'field7',
147       component: 'RadioGroup',
148       label: '字段7',
149       colProps: {
150         span: 8,
151       },
152       componentProps: {
153         options: [
154           {
155             label: '选项1',
156             value: '1',
157           },
158           {
159             label: '选项2',
160             value: '2',
161           },
162         ],
163       },
164     },
165   ];
166
167   export default defineComponent({
168     components: { BasicForm, CollapseContainer },
169     setup() {
170       const formElRef = ref<Nullable<FormActionType>>(null);
171       const { createMessage } = useMessage();
172       return {
173         formElRef,
174         schemas,
175         handleSubmit: (values: any) => {
176           createMessage.success('click search,values:' + JSON.stringify(values));
177         },
178         setProps(props: FormProps) {
179           const formEl = formElRef.value;
180           if (!formEl) return;
181           formEl.setProps(props);
182         },
183       };
184     },
185   });
186 </script>