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