From f3080ad74bee2b978ed35d1bd335274cc0af3ffc Mon Sep 17 00:00:00 2001 From: jxx <283591387@qq.com.com> Date: Sat, 20 Jun 2020 02:24:15 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0render=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/document/docApi/doc_table.vue | 73 +- Vol.Vue/src/views/document/docApi/param.js | 2 + Vol.Vue/src/views/document/log.vue | 91 +++ Vol.Vue/src/views/document/vueDev.vue | 742 +++++++++++++++--- 4 files changed, 781 insertions(+), 127 deletions(-) diff --git a/Vol.Vue/src/views/document/docApi/doc_table.vue b/Vol.Vue/src/views/document/docApi/doc_table.vue index ba491287..1b1513c0 100644 --- a/Vol.Vue/src/views/document/docApi/doc_table.vue +++ b/Vol.Vue/src/views/document/docApi/doc_table.vue @@ -84,7 +84,7 @@
- +
通过button编辑与额外标签事件
 { + return h( + "div", + { style: {} }, + [ + h( + "Button", + { + props: { type: "success", size: "small" }, + style: {}, + on: { + click: (e) => { + e.stopPropagation() + //弹出框编辑 + this.$Notice.open({ + title: '当前操作的行', + desc: JSON.stringify(row) + }); + } + } + }, + "render按钮" + ), + h( + "Button", + { + props: { type: "info", size: "small" }, + style: { "margin-left": "10px" }, + on: { + click: (e) => { + e.stopPropagation() + this.$Notice.open({ + title: '当前操作的行', + desc: JSON.stringify(row) + }); + } + } + }, + "审核" + ), + h( + "Dropdown", + { + props: { + transfer:true + }, + style: { + "margin-left": "10px" + }, + on: { + 'on-click': (name) => { + this.$Message.info(name); + } + } + }, + [h('a', {}, ['更多', h('Icon', { props: { type: 'ios-arrow-down' } })]), + h('DropdownMenu', { slot: "list" }, [h('DropdownItem', { props: { name: '明细' } }, '明细'), h('DropdownItem', { props: { name: '签收' } }, '签收'), h('DropdownItem', { props: { name: 'bubu..' } }, 'bubu..')])] + ) + ] + ); + } + }, { field: "test5", title: "测试5", @@ -484,4 +541,4 @@ export default doc_options; .keep-edit >>> .oper-btn { background-color: #19be6b; } - \ No newline at end of file + diff --git a/Vol.Vue/src/views/document/docApi/param.js b/Vol.Vue/src/views/document/docApi/param.js index 82aeb42c..4cf96167 100644 --- a/Vol.Vue/src/views/document/docApi/param.js +++ b/Vol.Vue/src/views/document/docApi/param.js @@ -14,6 +14,7 @@ let param = { { name: "[[{", desc: "表单字段formRules的参数配置说明", type: "", default: "" }, { name: "dataKey", desc: "数据源字典编号(菜单->系统->下拉框绑定中的字典编号)", type: "string", default: "" }, { name: "data", desc: "数据源，可以手动绑定格式[{key:1,value:'是'}],也可以自动绑定,自定绑定需要设置属性loadKey='true'", type: "array", default: "[]" }, + { name: "render", desc: "支持vue原生render处理,[前端开发->render渲染form对象1/2]为配置示例，render完整用法见vue官方文档(2020.06.20)", type: "function", default: "" }, { name: "title", desc: "标签名称", type: "string", default: "" }, // { name: "readonly/readonly", desc: "是否只读", type: "bool", default: "false" }, @@ -94,6 +95,7 @@ let param = { { name: "columns", desc: "table表参数配置", type: "array", default: "[]" }, { name: "{-----", desc: "-----columns属性介绍开始处-----", type: "-----", default: "-----" }, { name: "field", desc: "字段", type: "string", default: "" }, + { name: "render", desc: "支持vue原生render处理,[前端开发->render渲染form对象1/2]为配置示例，render完整用法见vue官方文档(2020.06.20)", type: "function", default: "" }, { name: "title", desc: "table列名", type: "string", default: "" }, { name: "width", desc: "列宽度", type: "number", default: "" }, { name: "sort", desc: "是否排序列", type: "bool", default: "false" }, diff --git a/Vol.Vue/src/views/document/log.vue b/Vol.Vue/src/views/document/log.vue index ddb31be0..539e4834 100644 --- a/Vol.Vue/src/views/document/log.vue +++ b/Vol.Vue/src/views/document/log.vue @@ -44,6 +44,97 @@ export default { return { active: 0, log: [ + { + date: "2020-06-20 02:17:52", + desc: + "增加volform、voltable对原生render的支持(现可任意扩展其他组件到form与table)" + }, + { date: "2020-06-20 00:44:33", desc: "优化首页、首页皮肤" }, + { + date: "2020-06-17 16:19:18", + desc: "修复增加pgsql后，代码生成器判断类型错误的问题" + }, + { date: "2020-06-16 09:50:17", desc: "增加登陆自动验证验证、UUID参数" }, + { + date: "2020-06-16 09:45:54", + desc: "重写登陆页面样式、增加登陆验证码、回车登陆" + }, + { date: "2020-06-15 18:59:30", desc: "增加Dapper事务封装及文档" }, + { + date: "2020-06-15 13:30:41", + desc: "修复Dapper使用DbTransaction后没有释放的问题" + }, + { date: "2020-06-14 21:53:33", desc: "增加pgsql脚本" }, + { + date: "2020-06-14 21:52:17", + desc: "增pgsql支持(生成代码获取表结构，同步表结构待完)" + }, + { date: "2020-06-14 17:30:48", desc: "Update appsettings.json" }, + { date: "2020-06-14 16:38:58", desc: "增加对mysql数据类型double区分" }, + { + date: "2020-06-14 16:12:12", + desc: + "增加代码生成器pgsql实体直实表名使用小写,dapper获取pgsql的NpgsqlConnection" + }, + { date: "2020-06-14 15:28:33", desc: "增加pgsql数据库配置" }, + { + date: "2020-06-14 15:20:50", + desc: "Merge pull request #81 from xuegaoge/master" + }, + { date: "2020-06-07 14:49:00", desc: "修复级联操作文档描述错误的问题" }, + { + date: "2020-06-06 22:51:34", + desc: + "编辑表单类型selectList数据源为自定义sql并且key是数字时，强制转换成字符串" + }, + { + date: "2020-06-06 22:47:43", + desc: "修改select编辑时手动级联文档说明" + }, + { + date: "2020-06-06 21:54:42", + desc: + "增加代码生成器文档，对select/selectList自定义sql数据源，在编辑时无法绑定默认值的问题说明" + }, + { + date: "2020-06-06 20:36:16", + desc: "修复数据源为selectList时,key为数字0时不能转换文本的问题" + }, + { + date: "2020-06-06 20:02:51", + desc: "修复单独使用table组件时,key为数字0时转换成文本失败的问题" + }, + { + date: "2020-06-03 14:03:18", + desc: "增加voltabl文字对齐方式align（原生element table align属性）" + }, + { + date: "2020-06-03 13:43:26", + desc: "优化路由切换加载状态，增加select手动级联文档" + }, + { + date: "2020-06-03 11:57:49", + desc: "增加切换时路由加载提示(以前路由切换有明细卡顿现象)" + }, + { date: "2020-06-03 10:27:26", desc: "优化权限分配左侧tree固定宽度" }, + { + date: "2020-06-02 14:52:55", + desc: "修复首页关闭tabs时，可能关闭两个tabs的问题" + }, + { + date: "2020-06-02 14:39:17", + desc: "修复使用表别名时读取不到配置信息" + }, + { date: "2020-06-01 13:22:21", desc: "增加http请求使用文档" }, + { + date: "2020-06-01 13:16:58", + desc: "增加[前端开发]级联文档与对象转换tree结构文档" + }, + { date: "2020-06-01 12:57:20", desc: "增加顶部导tabs超出后滚动" }, + { + date: "2020-06-01 12:55:50", + desc: "增加功能将普通对象转换为tree结构" + }, { date: "2020-05-31 23:15:20", desc: diff --git a/Vol.Vue/src/views/document/vueDev.vue b/Vol.Vue/src/views/document/vueDev.vue index 132ee906..ccb93fa2 100644 --- a/Vol.Vue/src/views/document/vueDev.vue +++ b/Vol.Vue/src/views/document/vueDev.vue @@ -374,6 +374,517 @@ export default { tips: ` this.columns数据源来源ViewGrid组件props.js属性(实际为App_Expert.Vue里columns)，edit/bind/onChange参数配置见VolTable组件文档`, img: "https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/13.png" }, + { + title: "render渲染table对象", + content: [`
+
+ onInit() { +
+
+       //此处在table最后一列动态渲染组件，也可以在this.columns.splice(index,1,{})指定位置渲染 +
+
+       // render操作table组件，可以在单元格中添加任意组件，包括chart图表，具体render参数见vue官方文档 +
+
+       this.columns.push({ +
+
+         title: '操作', width: 165, render: (h, { row, column, index }) => { +
+
+           return h( +
+
+             "div", +
+
+             { style: {} }, +
+
+             [ +
+
+               h( +
+
+                 "Button", +
+
+                 { +
+
+                   props: { type: "success", size: "small" }, +
+
+                   style: {}, +
+
+                   on: { +
+
+                     click: (e) => { +
+
+                       e.stopPropagation() +
+
+                       //弹出框编辑 +
+
+                       this.linkData(row, column); +
+
+                     } +
+
+                   } +
+
+                 }, +
+
+                 "编辑" +
+
+               ), +
+
+               h( +
+
+                 "Button", +
+
+                 { +
+
+                   props: { type: "info", size: "small" }, +
+
+                   style: { "margin-left": "10px" }, +
+
+                   on: { +
+
+                     click: (e) => { +
+
+                       e.stopPropagation() +
+
+                       this.$Notice.open({ +
+
+                         title: '当前操作的行', +
+
+                         desc: JSON.stringify(row) +
+
+                       }); +
+
+                     } +
+
+                   } +
+
+                 }, +
+
+                 "审核" +
+
+               ), +
+
+               h( +
+
+                 "Dropdown", +
+
+                 { +
+
+                   props: { +
+
+                   }, +
+
+                   style: { +
+
+                     "margin-left": "10px" +
+
+                   }, +
+
+                   on: { +
+
+                     'on-click': (name) => { +
+
+                       this.$Message.info(name); +
+
+                     } +
+
+                   } +
+
+                 }, +
+
+                 [h('a', {}, ['更多', h('Icon', { props: { type: 'ios-arrow-down' } })]), +
+
+                 h('DropdownMenu', { slot: "list" }, [h('DropdownItem', { props: { name: '明细' } }, '明细'), h('DropdownItem', { props: { name: '签收' } }, '签收'), h('DropdownItem', { props: { name: 'bubu..' } }, 'bubu..')])] +
+
+               ) +
+
+             ] +
+
+           ); +
+
+         } +
+
+       }) +
+
+     } +
+
`], + tips: ` render操作table组件，可以在单元格中添加任意组件，包括chart图表，具体render参数见vue官方文档`, + img: "https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/16.png" + }, + + { + title: "render渲染form对象1", + content: [`
+
+  onInit() { +
+
+       //在编辑框第三行数据后动态加添其他组件 +
+
+       //render操作form组件，可以在表单中添加任意组件，包括chart图表，具体render参数见vue官方文档 +
+
+       this.editFormOptions.splice(2, 0, [ +
+
+         { +
+
+           colSize: 12, +
+
+           render: h => { +
+
+             return h( +
+
+               "Alert", +
+
+               { +
+
+                 props: {}, +
+
+                 style: { +
+
+                   "margin-left": "100px", +
+
+                   "background-color": "#f0faff", +
+
+                   "margin-top": "-14px" +
+
+                 }, +
+
+                 on: { +
+
+                   click: () => { } +
+
+                 } +
+
+               }, +
+
+               [ +
+
+                 "Alert Content", +
+
+                 h( +
+
+                   "div", +
+
+                   { +
+
+                     props: {}, +
+
+                     slot: "desc", +
+
+                     style: {}, +
+
+                     on: { +
+
+                       click: () => { +
+
+                         this.$Notice.open({ +
+
+                           title: 'Notification title', +
+
+                           desc: (JSON.stringify(this.editFormFileds)) +
+
+                         }) +
+
+                       } +
+
+                     } +
+
+                   }, +
+
+                   ["这里是Alert内容(由render动态渲染)"] +
+
+                 ) +
+
+               ] +
+
+             ); +
+
+           } +
+
+         } +
+
+       ]) +
+
+     } +
+
`], + tips: `render操作form组件，可以在表单中添加任意组件，包括chart图表，具体render参数见vue官方文档`, + img: "https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/17.png" + }, + { + title: "render渲染form对象2", + content: [`
+
+  onInit() { +
+
+       let $this = this; +
+
+       //将编辑框第2行第2列替换成自定义组件， +
+
+       //也可以写成this.editFormOptions[index].push({})进行追加组件 +
+
+       //render操作form组件，可以在表单中添加任意组件，包括chart图表，具体render参数见vue官方文档 +
+
+       this.editFormOptions[1][1] = { +
+
+         colSize: 6, +
+
+         render: h => { +
+
+           return h( +
+
+             "div", +
+
+             { +
+
+               style: { +
+
+                 "margin-left": "28px", +
+
+                 "line-height": "34px" +
+
+               } +
+
+             }, +
+
+             [ +
+
+               h( +
+
+                 "Button", +
+
+                 { +
+
+                   props: { +
+
+                     type: "primary" +
+
+                   }, +
+
+                   style: {}, +
+
+                   on: { +
+
+                     click: () => { +
+
+                       this.$Message.info(JSON.stringify($this.editFormFileds)); +
+
+                     } +
+
+                   } +
+
+                 }, +
+
+                 "render(获取表单值)" +
+
+               ), +
+
+               h( +
+
+                 "Button", +
+
+                 { +
+
+                   props: { +
+
+                     type: "error" +
+
+                   }, +
+
+                   style: { +
+
+                     "margin-left": "10px" +
+
+                   }, +
+
+                   on: { +
+
+                     click: () => { +
+
+                       $this.resetEdit(); +
+
+                       this.$Message.info('表单已重置'); +
+
+                     } +
+
+                   } +
+
+                 }, +
+
+                 "render(重置表单)" +
+
+               ) +
+
+             ] +
+
+           ); +
+
+         } +
+
+       } +
+
+     } +
+
`], + tips: `render操作form组件，可以在表单中添加任意组件，包括chart图表，具体render参数见vue官方文档`, + img: "https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/18.png" + }, { title: "格式化table的数据", content: [ @@ -532,7 +1043,7 @@ export default {         if (column.field == 'CreateDate') {
-           x.hidden=true; +           column.hidden=true;
        } @@ -1279,129 +1790,122 @@ export default { }, { title: "select手动触发级联", - content: [`
+ content: [`

-   onInit() { -
-
-       //设置表单的默认值,没有值就设置为空数组(必须) -
-
-
-  getOption(field) { -
-
-       let option; -
-
-       this.editFormOptions.forEach(x => { -
-
-         x.forEach(item => { -
-
-           if (item.field == field) { -
-
-             option = item; -
-
-           } -
-
-         }) -
-
-       }) -
-
-       return option; -
-
-     }, -
-
-     async onInit() { -
-
-       /*从editFormOptions获取代码生成的配置参数*/ -
+
+
+   getOption(field) { +
+
+       let option; +
+
+       this.editFormOptions.forEach(x => { +
+
+         x.forEach(item => { +
+
+           if (item.field == field) { +
+
+             option = item; +
+
+           } +
+
+         }) +
+
+       }) +
+
+       return option; +
+
+     }, +
+
+     onInit() { +
+
+       /*从editFormOptions获取代码生成的配置参数*/ +
+
+       /*getOption实际是获取volform的配置信息，详情配置看volform组件*/ +

-
-       //获取select【地区】配置 -
-
-       let select1 = this.getOption("City"); -
-
-       //获取select【是否启用】配置 -
-
-       let select2 = this.getOption("Enable"); -
-
-       //获取个人简介配置 -
-
-       let textare = this.getOption("Resume"); -
-
-       /*getOption实际是获取volform的配置信息，详情配置看volform组件*/ -
+
+       //获取select【地区】配置 +
+
+       let select1 = this.getOption("City"); +

-
-       //通过select1选择后，给select2重新绑定数据源与textare重新设置值 -
-
-       select1.onChange = async (val, option) => { -
-
-         //清空select2的数据源 -
-
-         select2.data.splice(0); -
-
-         //选择select1时给select2重新绑定数据源 -
-
-         let source = [{ key: "1", value: "text1" }, { key: "2", value: "text2" }]; -
+
+       //获取select【是否启用】配置 +
+
+       let select2 = this.getOption("Enable"); +
+
+
+       //通过select1选择后，给select2重新绑定数据源与textare重新设置值 +
+
+       select1.onChange = (val, option) => { +
+
+         //清空select2的数据源 +
+
+         select2.data.splice(0); +
+
+         //选择select1时给select2重新绑定数据源 +
+
+         let source = [{ key: "1", value: "text1" }, { key: "2", value: "text2" }]; +
+
+         //此处可以从后台返回数据源，格式见source配置 +
+
+         //this.http.post("/api/App_Expert/getPageData", {}, true).then(source => { +
+
+           //清除表单已选中的值 +
+
+           this.editFormFileds[select2.field] = ""; +
+
+           select2.data.push(...source) +
+
+           //第一次onChange时，不给表单设置值就不会触发级联视图刷新?原因待排查 +
+
+           this.editFormFileds[select2.field] = source.length > 0 ? source[0].key : ""; +
+
+       //  }) +
+
+       } +
+
+
+       //多级级联同上操作即可seletxxxx.onChange +
+
+     } +
+

-
-         /*注意如果是从后台返回要使用await同步请求,上面方法 async onInit()*/
-
-        //此处可以从后台返回数据源，格式见source配置 -
-
-        //  await this.http.post("", {}, true).then(source => { -
-
-           select2.data.push(...source) -
-
-        // }) -
-
-         //给select2表设置一个默认值(可以不用设置) -
-
-         // this.editFormFileds.Enable = "1"; -
-
-         //给textare标签设置一个值 -
-
-         this.editFormFileds.Resume = "选择[" + val + "]后设置的值"; -
-
-       } -
-
-     }, -
-
`], +

`], tips: `select选择后给字段设置值或数据源，实现手动级联操作`, img: "https://doc-vue-1256993465.cos.ap-chengdu.myqcloud.com/15.png" },