Skip to content

Commit a77f8ef

Browse files
cq-pandacq-panda
committed
增加区间查询demo
1 parent 8fb9949 commit a77f8ef

File tree

1 file changed

+263
-0
lines changed

1 file changed

+263
-0
lines changed

‎Vol.Vue/src/views/document/vueDev.vue‎

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,269 @@ export default {
206206
tips: ` 还没想好`,
207207
img:
208208
"https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/36.png?imageMogr2/thumbnail/!50p",
209+
},
210+
211+
{
212+
title: "查询界面--区间查询",
213+
content: [`<div style="color:#D4D4D4;background-color:#1E1E1E;font-family:Consolas, &quot;font-size:14px;line-height:19px;white-space:pre;">
214+
<div>
215+
<span style="color:#6a9955;">//声明一个组件</span>
216+
</div>
217+
<div>
218+
<span style="color:#569cd6;">var</span>&nbsp;<span style="color:#9cdcfe;">$rangeCom</span>;
219+
</div>
220+
<div>
221+
<span style="color:#569cd6;">var</span>&nbsp;<span style="color:#9cdcfe;">MyComponent</span>&nbsp;=&nbsp;{
222+
</div>
223+
<div>
224+
&nbsp;&nbsp;<span style="color:#dcdcaa;">data</span>()&nbsp;{
225+
</div>
226+
<div>
227+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c586c0;">return</span>&nbsp;{&nbsp;<span style="color:#9cdcfe;">qty1</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#ce9178;">""</span>,&nbsp;<span style="color:#9cdcfe;">qty2</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#ce9178;">""</span>&nbsp;};
228+
</div>
229+
<div>
230+
&nbsp;&nbsp;},
231+
</div>
232+
<div>
233+
&nbsp;&nbsp;<span style="color:#dcdcaa;">created</span>()&nbsp;{
234+
</div>
235+
<div>
236+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">$rangeCom</span>=&nbsp;<span style="color:#569cd6;">this</span>;
237+
</div>
238+
<div>
239+
&nbsp;&nbsp;},
240+
</div>
241+
<div>
242+
&nbsp;&nbsp;<span style="color:#9cdcfe;">methods</span><span style="color:#9cdcfe;">:</span>&nbsp;{},
243+
</div>
244+
<div>
245+
&nbsp;&nbsp;<span style="color:#6a9955;">//创建自定义组件模板</span>
246+
</div>
247+
<div>
248+
&nbsp;&nbsp;<span style="color:#9cdcfe;">template</span><span style="color:#9cdcfe;">:</span>&nbsp;'<span style="color:#ce9178;">&nbsp;&lt;div&nbsp;style="display:&nbsp;flex;margin-bottom:&nbsp;17px;"&gt;</span>
249+
</div>
250+
<div>
251+
<span style="color:#ce9178;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;style="text-align:&nbsp;right;width:&nbsp;100px;padding:&nbsp;7px&nbsp;12px&nbsp;10px&nbsp;0;color:red;"&gt;</span>
252+
</div>
253+
<div>
254+
<span style="color:#ce9178;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数量：</span>
255+
</div>
256+
<div>
257+
<span style="color:#ce9178;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/label&gt;</span>
258+
</div>
259+
<div>
260+
<span style="color:#ce9178;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Input&nbsp;style="flex:1"&nbsp;&nbsp;v-model="qty1"&nbsp;/&gt;</span>
261+
</div>
262+
<div>
263+
<span style="color:#ce9178;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;style="line-height:&nbsp;30px;&nbsp;margin:&nbsp;0&nbsp;7px;"&gt;--&lt;/span&gt;</span>
264+
</div>
265+
<div>
266+
<span style="color:#ce9178;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Input&nbsp;style="flex:1"&nbsp;&nbsp;v-model="qty2"&nbsp;/&gt;</span>
267+
</div>
268+
<div>
269+
<span style="color:#ce9178;">&nbsp;&nbsp;&nbsp;&lt;/div&gt;'</span>
270+
</div>
271+
<div>
272+
};
273+
</div>
274+
<br />
275+
<div>
276+
<span style="color:#6a9955;">//声明vue对象</span>
277+
</div>
278+
<div>
279+
<span style="color:#569cd6;">let</span>&nbsp;<span style="color:#9cdcfe;">$this</span>;
280+
</div>
281+
<div>
282+
<span style="color:#569cd6;">let</span>&nbsp;<span style="color:#9cdcfe;">extension</span>&nbsp;=&nbsp;{
283+
</div>
284+
<div>
285+
&nbsp;&nbsp;<span style="color:#9cdcfe;">components</span><span style="color:#9cdcfe;">:</span>&nbsp;{
286+
</div>
287+
<div>
288+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">gridHeader</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#ce9178;">""</span>,
289+
</div>
290+
<div>
291+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">gridBody</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#ce9178;">""</span>,
292+
</div>
293+
<div>
294+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">gridFooter</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#ce9178;">""</span>,
295+
</div>
296+
<div>
297+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">modelHeader</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#ce9178;">""</span>,
298+
</div>
299+
<div>
300+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">modelBody</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#ce9178;">""</span>,
301+
</div>
302+
<div>
303+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">modelFooter</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#ce9178;">""</span>
304+
</div>
305+
<div>
306+
&nbsp;&nbsp;},&nbsp;<span style="color:#6a9955;">//动态扩充组件或组件路径</span>
307+
</div>
308+
<div>
309+
&nbsp;&nbsp;<span style="color:#9cdcfe;">buttons</span><span style="color:#9cdcfe;">:</span>&nbsp;{&nbsp;<span style="color:#9cdcfe;">box</span><span style="color:#9cdcfe;">:</span>&nbsp;[]&nbsp;},
310+
</div>
311+
<div>
312+
&nbsp;&nbsp;<span style="color:#9cdcfe;">methods</span><span style="color:#9cdcfe;">:</span>&nbsp;{
313+
</div>
314+
<div>
315+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//事件扩展</span>
316+
</div>
317+
<div>
318+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#dcdcaa;">onInit</span>()&nbsp;{
319+
</div>
320+
<div>
321+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//必须</span>
322+
</div>
323+
<div>
324+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">$this</span>&nbsp;=&nbsp;<span style="color:#569cd6;">this</span>;
325+
</div>
326+
<div>
327+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//动态挂载自己加的MyComponent组件</span>
328+
</div>
329+
<div>
330+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">$options</span>.<span style="color:#9cdcfe;">components</span>[<span style="color:#ce9178;">"my-Component"</span>]&nbsp;=&nbsp;<span style="color:#9cdcfe;">MyComponent</span>;
331+
</div>
332+
<div>
333+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
334+
</div>
335+
<div>
336+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//找到需要做区间查询的字段，通过render渲染</span>
337+
</div>
338+
<div>
339+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">searchFormOptions</span>.<span style="color:#dcdcaa;">forEach</span>(<span style="color:#9cdcfe;">x</span>&nbsp;<span style="color:#569cd6;">=&gt;</span>&nbsp;{
340+
</div>
341+
<div>
342+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">x</span>.<span style="color:#dcdcaa;">forEach</span>(<span style="color:#9cdcfe;">item</span>&nbsp;<span style="color:#569cd6;">=&gt;</span>&nbsp;{
343+
</div>
344+
<div>
345+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c586c0;">if</span>&nbsp;(<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">field</span>&nbsp;==&nbsp;<span style="color:#ce9178;">"Qty"</span>)&nbsp;{
346+
</div>
347+
<div>
348+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">console</span>.<span style="color:#dcdcaa;">log</span>(<span style="color:#ce9178;">"qty"</span>);
349+
</div>
350+
<div>
351+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">item</span>.<span style="color:#dcdcaa;">render</span>&nbsp;=&nbsp;<span style="color:#569cd6;">function</span>(<span style="color:#9cdcfe;">createElement</span>,&nbsp;<span style="color:#9cdcfe;">ctx</span>)&nbsp;{
352+
</div>
353+
<div>
354+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//挂载组件</span>
355+
</div>
356+
<div>
357+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c586c0;">return</span>&nbsp;<span style="color:#dcdcaa;">createElement</span>(<span style="color:#9cdcfe;">$this</span>.<span style="color:#9cdcfe;">$options</span>.<span style="color:#9cdcfe;">components</span>[<span style="color:#ce9178;">"my-Component"</span>]);
358+
</div>
359+
<div>
360+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
361+
</div>
362+
<div>
363+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
364+
</div>
365+
<div>
366+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
367+
</div>
368+
<div>
369+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
370+
</div>
371+
<div>
372+
&nbsp;&nbsp;&nbsp;&nbsp;},
373+
</div>
374+
<div>
375+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#dcdcaa;">searchBefore</span>(<span style="color:#9cdcfe;">param</span>)&nbsp;{&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//查询ViewGird表数据前,将区间查询的值提交到后台</span>
376+
</div>
377+
<div>
378+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//页面初始化加载时区间查询组件还没渲染</span>
379+
</div>
380+
<div>
381+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c586c0;">if</span>&nbsp;(<span style="color:#9cdcfe;">$rangeCom</span>)&nbsp;{
382+
</div>
383+
<div>
384+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#569cd6;">let</span>&nbsp;<span style="color:#9cdcfe;">wheres</span>&nbsp;=&nbsp;[
385+
</div>
386+
<div>
387+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
388+
</div>
389+
<div>
390+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">name</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#ce9178;">"Qty"</span>,
391+
</div>
392+
<div>
393+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">value</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#9cdcfe;">$rangeCom</span>.<span style="color:#9cdcfe;">qty1</span>,
394+
</div>
395+
<div>
396+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">displayType</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#ce9178;">"thanorequal"</span><span style="color:#6a9955;">//&gt;=</span>
397+
</div>
398+
<div>
399+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
400+
</div>
401+
<div>
402+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
403+
</div>
404+
<div>
405+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">name</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#ce9178;">"Qty"</span>,
406+
</div>
407+
<div>
408+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">value</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#9cdcfe;">$rangeCom</span>.<span style="color:#9cdcfe;">qty2</span>,
409+
</div>
410+
<div>
411+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">displayType</span><span style="color:#9cdcfe;">:</span>&nbsp;<span style="color:#ce9178;">"lessorequal"</span><span style="color:#6a9955;">//&lt;=</span>
412+
</div>
413+
<div>
414+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
415+
</div>
416+
<div>
417+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;];
418+
</div>
419+
<div>
420+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//也可以提交一些其他参数，后台在GetPageData()方法读取options.value</span>
421+
</div>
422+
<div>
423+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">param</span>.<span style="color:#9cdcfe;">value</span>&nbsp;=&nbsp;<span style="color:#ce9178;">"xxx"</span>;
424+
</div>
425+
<div>
426+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">param</span>.<span style="color:#9cdcfe;">wheres</span>.<span style="color:#dcdcaa;">push</span>(...<span style="color:#9cdcfe;">wheres</span>);
427+
</div>
428+
<div>
429+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
430+
</div>
431+
<div>
432+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//返回false，则不会执行查询</span>
433+
</div>
434+
<div>
435+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c586c0;">return</span>&nbsp;<span style="color:#569cd6;">true</span>;
436+
</div>
437+
<div>
438+
&nbsp;&nbsp;&nbsp;&nbsp;},
439+
</div>
440+
<div>
441+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#dcdcaa;">resetSearchFormAfter</span>()&nbsp;{
442+
</div>
443+
<div>
444+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//点击重置按钮时，同时清空区间查询的值</span>
445+
</div>
446+
<div>
447+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//(需要2020.10.17更新basic组件才能使用此方法)</span>
448+
</div>
449+
<div>
450+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">$rangeCom</span>.<span style="color:#9cdcfe;">qty1</span>&nbsp;=&nbsp;<span style="color:#ce9178;">""</span>;
451+
</div>
452+
<div>
453+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">$rangeCom</span>.<span style="color:#9cdcfe;">qty2</span>&nbsp;=&nbsp;<span style="color:#ce9178;">""</span>;
454+
</div>
455+
<div>
456+
&nbsp;&nbsp;&nbsp;&nbsp;}
457+
</div>
458+
<div>
459+
&nbsp;&nbsp;}
460+
</div>
461+
<div>
462+
};
463+
</div>
464+
<div>
465+
<span style="color:#c586c0;">export</span>&nbsp;<span style="color:#c586c0;">default</span>&nbsp;<span style="color:#9cdcfe;">extension</span>;
466+
</div>
467+
<br />
468+
</div>`],
469+
tips: `还没想好`,
470+
img:
471+
"https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/41.png?imageMogr2/thumbnail/!50p",
209472
},
210473
{
211474
title: "弹出框界面动态按钮",

0 commit comments

Comments
 (0)