Skip to content

Commit 544f1d0

Browse files
cq-pandacq-panda
committed
增加表单动态显示与隐藏文档及日志
1 parent a504f9a commit 544f1d0

File tree

4 files changed

+198
-1
lines changed

4 files changed

+198
-1
lines changed

‎Vol.Vue/src/views/document/docApi/param.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ const param = {
1919
{ name: "render", desc: "<span style='color:red;'>支持vue原生render处理,[前端开发->render渲染form对象1/2]为配置示例，render完整用法见vue官方文档(2020.06.20)</span>", type: "function", default: "" },
2020
{ name: "title", desc: "标签名称", type: "string", default: "" },
2121
//
22-
{ name: "readonly/readonly", desc: "是否只读", type: "bool", default: "false" },
22+
{ name: "disabled/readonly", desc: "是否只读", type: "bool", default: "false" },
23+
{ name: "hidden", desc: "<span style='color:red;'>字段(标签)是否显示2020.11.21</span>", type: "bool", default: "" },
2324
{ name: "required", desc: "是否必填", type: "bool", default: "false" },
2425
{ name: "field", desc: "字段，与表单字段必须相同", type: "string", default: "" },
2526
{ name: "filter", desc: "启用搜索,只对select/selectList生效,默认下拉框数据源超出10个开启搜索", type: "bool", default: "false" },

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,11 @@ export default {
4444
return {
4545
active: 0,
4646
log: [
47+
{ date: "2020-11-07 15:10:26", desc: "增加table点击行选中当前demo及其他文档" },
48+
{ date: "2020-11-07 15:06:52", desc: "增加el-table的点击行事件添加到扩展方法中" },
49+
{ date: "2020-11-07 14:01:35", desc: "增加编辑表单自定义验证demo" },
50+
{ date: "2020-11-07 13:21:47", desc: "修复model验证不能识别负数的问题" },
51+
{ date: "2020-11-02 18:49:46", desc: "修复表单只有一个input时按回车自动提交的问题，修复级联类型判断错误的问题" },
4752
{ date: "2020-11-01 18:09:26", desc: "增加框架自动生成iview级联组件及文档" },
4853
{ date: "2020-11-01 12:43:23", desc: "增加table显示、隐藏序号、checkbox属性" },
4954
{ date: "2020-10-31 19:00:01", desc: "增加编辑表单第4种render渲染demo" },

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

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -468,6 +468,76 @@ export default {
468468
img:
469469
"https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/41.png?imageMogr2/thumbnail/!50p",
470470
},
471+
472+
{
473+
title: "查询界面--单个日期查询",
474+
content: [`<div style="color:#D4D4D4;background-color:#1E1E1E;font-family:Consolas, &quot;font-size:14px;line-height:19px;white-space:pre;">
475+
<div>
476+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#dcdcaa;">onInited</span>&nbsp;()&nbsp;{
477+
</div>
478+
<div>
479+
&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;{
480+
</div>
481+
<div>
482+
&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;{
483+
</div>
484+
<div>
485+
&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;">"BeginDate"</span>)&nbsp;{
486+
</div>
487+
<div>
488+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//设置单个日期查询</span>
489+
</div>
490+
<div>
491+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">range</span>&nbsp;=&nbsp;<span style="color:#569cd6;">false</span>;
492+
</div>
493+
<div>
494+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//设置查询类型为date(默认为datetime)</span>
495+
</div>
496+
<div>
497+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">item</span>.<span style="color:#9cdcfe;">type</span>&nbsp;=&nbsp;<span style="color:#ce9178;">"date"</span>;
498+
</div>
499+
<div>
500+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
501+
</div>
502+
<div>
503+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
504+
</div>
505+
<div>
506+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
507+
</div>
508+
<div>
509+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//也可以通过配置信息所在位置直接设置</span>
510+
</div>
511+
<div>
512+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//this.searchFormOptions[1][0].range&nbsp;=&nbsp;false;</span>
513+
</div>
514+
<div>
515+
&nbsp;&nbsp;&nbsp;&nbsp;}
516+
</div>
517+
</div>`],
518+
tips: ` 还没想好`,
519+
img:
520+
"https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/2020112101.png?imageMogr2/thumbnail/!50p",
521+
},
522+
523+
{
524+
title: "查询界面-移除快捷查询",
525+
content: [`<div style="color:#D4D4D4;background-color:#1E1E1E;font-family:Consolas, &quot;font-size:14px;line-height:19px;white-space:pre;">
526+
<div>
527+
&nbsp;&nbsp;&nbsp;<span style="color:#dcdcaa;">onInited</span>&nbsp;()&nbsp;{
528+
</div>
529+
<div>
530+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">singleSearch</span>&nbsp;=&nbsp;<span style="color:#569cd6;">null</span>;
531+
</div>
532+
<div>
533+
&nbsp;&nbsp;&nbsp;&nbsp;}
534+
</div>
535+
</div>` ],
536+
tips: ` 还没想好`,
537+
img:
538+
["https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/2020112102.png?imageMogr2/thumbnail/!50p",
539+
"https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/2020112103.png?imageMogr2/thumbnail/!50p"],
540+
},
471541
{
472542
title: "弹出框界面动态按钮",
473543
content: [
@@ -2584,6 +2654,123 @@ export default {
25842654
"https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/20.png?imageMogr2/thumbnail/!50p",
25852655
},
25862656
2657+
{
2658+
title: "编辑表单动态显示隐藏",
2659+
content: [`<div style="color:#D4D4D4;background-color:#1E1E1E;font-family:Consolas, &quot;font-size:14px;line-height:19px;white-space:pre;">
2660+
<div>
2661+
&nbsp;&nbsp;<span style="color:#dcdcaa;">getFormOption</span>&nbsp;(<span style="color:#9cdcfe;">field</span>)&nbsp;{
2662+
</div>
2663+
<div>
2664+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#569cd6;">let</span>&nbsp;<span style="color:#9cdcfe;">option</span>;
2665+
</div>
2666+
<div>
2667+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#569cd6;">this</span>.<span style="color:#9cdcfe;">editFormOptions</span>.<span style="color:#dcdcaa;">forEach</span>(<span style="color:#9cdcfe;">x</span>&nbsp;<span style="color:#569cd6;">=&gt;</span>&nbsp;{
2668+
</div>
2669+
<div>
2670+
&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;{
2671+
</div>
2672+
<div>
2673+
&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:#9cdcfe;">field</span>)&nbsp;{
2674+
</div>
2675+
<div>
2676+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">option</span>&nbsp;=&nbsp;<span style="color:#9cdcfe;">item</span>;
2677+
</div>
2678+
<div>
2679+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
2680+
</div>
2681+
<div>
2682+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
2683+
</div>
2684+
<div>
2685+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
2686+
</div>
2687+
<div>
2688+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c586c0;">return</span>&nbsp;<span style="color:#9cdcfe;">option</span>;
2689+
</div>
2690+
<div>
2691+
&nbsp;&nbsp;&nbsp;&nbsp;},
2692+
</div>
2693+
<div>
2694+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//方式1,通过select选择触发显示与隐藏</span>
2695+
</div>
2696+
<div>
2697+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#dcdcaa;">onInit</span>&nbsp;()&nbsp;{
2698+
</div>
2699+
<div>
2700+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//获取订单类型select配置，当前订单类型select改变值时，动态设置Remark,SellNo两个字段是否显示&nbsp;</span>
2701+
</div>
2702+
<div>
2703+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#569cd6;">var</span>&nbsp;<span style="color:#9cdcfe;">orderTypeOption</span>&nbsp;=&nbsp;<span style="color:#569cd6;">this</span>.<span style="color:#dcdcaa;">getFormOption</span>(<span style="color:#ce9178;">"OrderType"</span>);
2704+
</div>
2705+
<div>
2706+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#9cdcfe;">orderTypeOption</span>.<span style="color:#dcdcaa;">onChange</span>&nbsp;=&nbsp;(<span style="color:#9cdcfe;">val</span>)&nbsp;<span style="color:#569cd6;">=&gt;</span>&nbsp;{
2707+
</div>
2708+
<br />
2709+
<div>
2710+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//当订单类型select改变值时，如果选中的是发货(对应字典编号为2)，emark,SellNo隐藏，否则显示出来</span>
2711+
</div>
2712+
<div>
2713+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#569cd6;">var</span>&nbsp;<span style="color:#9cdcfe;">remarkOption</span>&nbsp;=&nbsp;<span style="color:#569cd6;">this</span>.<span style="color:#dcdcaa;">getFormOption</span>(<span style="color:#ce9178;">"Remark"</span>);
2714+
</div>
2715+
<div>
2716+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#569cd6;">this</span>.<span style="color:#dcdcaa;">$set</span>(<span style="color:#9cdcfe;">remarkOption</span>,&nbsp;<span style="color:#ce9178;">"hidden"</span>,&nbsp;<span style="color:#9cdcfe;">val</span>&nbsp;==&nbsp;<span style="color:#ce9178;">"2"</span>)
2717+
</div>
2718+
<br />
2719+
<div>
2720+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#569cd6;">var</span>&nbsp;<span style="color:#9cdcfe;">sellNoOption</span>&nbsp;=&nbsp;<span style="color:#569cd6;">this</span>.<span style="color:#dcdcaa;">getFormOption</span>(<span style="color:#ce9178;">"SellNo"</span>);
2721+
</div>
2722+
<div>
2723+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#569cd6;">this</span>.<span style="color:#dcdcaa;">$set</span>(<span style="color:#9cdcfe;">sellNoOption</span>,&nbsp;<span style="color:#ce9178;">"hidden"</span>,&nbsp;<span style="color:#9cdcfe;">val</span>&nbsp;==&nbsp;<span style="color:#ce9178;">"2"</span>)
2724+
</div>
2725+
<div>
2726+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
2727+
</div>
2728+
<div>
2729+
&nbsp;&nbsp;&nbsp;&nbsp;},
2730+
</div>
2731+
<div>
2732+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//方式2,通过打开弹出框时触发显示与隐藏</span>
2733+
</div>
2734+
<div>
2735+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#dcdcaa;">modelOpenAfter</span>&nbsp;(<span style="color:#9cdcfe;">row</span>)&nbsp;{&nbsp;&nbsp;<span style="color:#6a9955;">//编辑或新建时，根据不同的情况控制字段是否显示&nbsp;</span>
2736+
</div>
2737+
<div>
2738+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//&nbsp;&nbsp;&nbsp;this.editFormOptions.forEach(x&nbsp;=&gt;&nbsp;{</span>
2739+
</div>
2740+
<div>
2741+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x.forEach(item&nbsp;=&gt;&nbsp;{</span>
2742+
</div>
2743+
<div>
2744+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(item.field&nbsp;==&nbsp;"Remark"&nbsp;||&nbsp;item.field&nbsp;==&nbsp;"SellNo")&nbsp;{</span>
2745+
</div>
2746+
<div>
2747+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//如果不是新建，则隐藏Remark,SellNo两个字段是否显示&nbsp;</span>
2748+
</div>
2749+
<div>
2750+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//也可以根据row当前编辑行的值来处理</span>
2751+
</div>
2752+
<div>
2753+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$set(item,&nbsp;"hidden",&nbsp;this.currentAction&nbsp;!=&nbsp;"Add")</span>
2754+
</div>
2755+
<div>
2756+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</span>
2757+
</div>
2758+
<div>
2759+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})</span>
2760+
</div>
2761+
<div>
2762+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#6a9955;">//&nbsp;&nbsp;&nbsp;})</span>
2763+
</div>
2764+
<div>
2765+
&nbsp;&nbsp;&nbsp;&nbsp;},
2766+
</div>
2767+
</div>` ],
2768+
tips: `如果是单独引用的volfrom组件，同样适用上面的方法`,
2769+
img:
2770+
["https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/2020112104.png?imageMogr2/thumbnail/!50p",
2771+
"https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/2020112105.png?imageMogr2/thumbnail/!50p",
2772+
"https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/2020112106.png?imageMogr2/thumbnail/!50p"]
2773+
},
25872774
{
25882775
title: "编辑表单只读/默认值",
25892776
content: [

‎Vol.Vue/src/views/h5/guide.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@
2121
<icon type="md-phone-portrait" />
2222
<span>移动打包APK后截图H5-UI</span>
2323
</Divider>
24+
<div class="img-item">
25+
<img src="https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/h521.png" />
26+
<img src="https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/h520.png" />
27+
</div>
2428
<div class="img-item">
2529
<img src="https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/h01.png" />
2630
<img src="https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/h02.png" />

0 commit comments

Comments
 (0)