Skip to content

Commit de452ef

Browse files
cq-pandacq-panda
committed
增加viewgrid、volform集成编辑器功能
1 parent 31278df commit de452ef

File tree

10 files changed

+122
-24
lines changed

10 files changed

+122
-24
lines changed

‎Vol.Vue/src/components/basic/ViewGrid.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -426,6 +426,10 @@ var vueParam = {
426426
width: 0,
427427
summary: false, //弹出框明细table是否显示合计
428428
}, //saveClose新建或编辑成功后是否关闭弹出框//弹出框的标签宽度labelWidth
429+
editor:{
430+
uploadImgUrl:"",//上传路径
431+
upload:null//上传方法
432+
}
429433
};
430434
},
431435
methods: {

‎Vol.Vue/src/components/basic/ViewGridConfig/methods.js‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -465,6 +465,9 @@ let methods = {
465465
}
466466
}
467467
if (newVal instanceof Array) {
468+
if (form[key]) {
469+
form[key] = [];
470+
}
468471
form[key].splice(0)
469472
// this.$set(form, key, newVal);
470473
form[key].push(...newVal);
@@ -646,7 +649,7 @@ let methods = {
646649
},
647650
async initBox() {
648651
//初始化新建、编辑的弹出框
649-
if(!await this.modelOpenBeforeAsync(this.currentRow)) return false;
652+
if (!await this.modelOpenBeforeAsync(this.currentRow)) return false;
650653
this.modelOpenBefore(this.currentRow);
651654
if (!this.boxInit) {
652655
this.boxInit = true;
@@ -1138,17 +1141,23 @@ let methods = {
11381141
//弹出框高度至少250px
11391142
clientHeight = clientHeight < 250 ? 250 : clientHeight;
11401143
let clientWidth = document.documentElement.clientWidth;
1141-
1142-
if (this.boxOptions.height) {
1143-
//如果高度与宽度超过了获取到的可见高宽度，则设为默认的90%高宽
1144-
if (this.boxOptions.height > clientHeight * 0.8) {
1145-
this.boxOptions.height = clientHeight * 0.8;
1146-
}
1144+
if (this.editFormOptions.some(x => { return x.some(item => { return item.type == "editor" }) })) {
1145+
this.editor.uploadImgUrl = this.getUrl("upload");
1146+
this.boxOptions.height = clientHeight * 0.8;
1147+
this.boxOptions.width = clientWidth * 0.8;
11471148
}
1148-
if (this.boxOptions.width) {
1149-
//如果高度与宽度超过了获取到的可见高宽度，则设为默认的90%高宽
1150-
if (this.boxOptions.width > clientWidth * 0.8) {
1151-
this.boxOptions.width = clientWidth * 0.8;
1149+
else {
1150+
if (this.boxOptions.height) {
1151+
//如果高度与宽度超过了获取到的可见高宽度，则设为默认的90%高宽
1152+
if (this.boxOptions.height > clientHeight * 0.8) {
1153+
this.boxOptions.height = clientHeight * 0.8;
1154+
}
1155+
}
1156+
if (this.boxOptions.width) {
1157+
//如果高度与宽度超过了获取到的可见高宽度，则设为默认的90%高宽
1158+
if (this.boxOptions.width > clientWidth * 0.8) {
1159+
this.boxOptions.width = clientWidth * 0.8;
1160+
}
11521161
}
11531162
}
11541163
//计算整个table的宽度，根据宽度决定是否启用第一行显示的列为固定列

‎Vol.Vue/src/components/basic/VolForm.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,14 @@
191191
:render-format="item.formatter"
192192
filterable
193193
v-model="_formFields[item.field]"></Cascader>
194+
<kind-editor
195+
ref="editor"
196+
v-else-if="item.type == 'editor'"
197+
:UploadImgUrl="editor.uploadImgUrl"
198+
:upload="editor.upload"
199+
:content.sync="_formFields[item.field]"
200+
height="460px"
201+
></kind-editor>
194202
<!--2020.09.05增加textarea标签的最小高度item.minRows属性 -->
195203
<Input v-else-if="item.type == 'textarea'"
196204
v-model="_formFields[item.field]"
@@ -260,6 +268,7 @@ export default {
260268
components: {
261269
FormExpand,
262270
VolUpload: () => import("@/components/basic/VolUpload.vue"),
271+
KindEditor:()=>import("@/components/kindeditor/KindEditor.vue")
263272
},
264273
props: {
265274
loadKey: {
@@ -297,6 +306,12 @@ export default {
297306
return {};
298307
},
299308
},
309+
editor: { //2021.01.16编辑器信息 {uploadImgUrl:"",upload:null//上传方法}
310+
type: Object,
311+
default: () => {
312+
return {};
313+
},
314+
},
300315
},
301316
watch: {},
302317
created () {

‎Vol.Vue/src/components/kindeditor/KindEditor.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,12 @@ export default {
5252
type: String,
5353
default: ""
5454
},
55+
upload:{ //上传方法
56+
type:Function,
57+
default:(file)=>{
58+
59+
}
60+
},
5561
uploadCount: {
5662
//最多可以上传(图片)的数量
5763
type: Number,
@@ -435,7 +441,7 @@ export default {
435441
}
436442
let urls = files.map(x => {
437443
return (
438-
`<img style="width:100%;" src="` +
444+
`<img class="editor-img" src="` +
439445
(this.http.ipAddress + result.data + x.name) +
440446
`"/>`
441447
);

‎Vol.Vue/src/router/viewGird.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,5 +54,10 @@ let viewgird = [
5454
path: '/App_News',
5555
name: 'App_News',
5656
component: () => import('@/views/appmanager/App_News.vue')
57+
} ,{
58+
path: '/App_NewsEditor',
59+
name: 'App_NewsEditor',
60+
component: () => import('@/views/appmanager/App_NewsEditor.vue')
5761
}]
62+
5863
export default viewgird

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,31 @@ export default {
4444
return {
4545
active: 0,
4646
log: [
47+
{ date: "2021-01-10 00:55:17",desc:"完善文档"},
48+
{ date: "2021-01-10 00:12:57",desc:"增加新建、编辑前可以阻止弹出框弹出(使用方法见：组件api->viewgrid文档)"},
49+
{ date: "2021-01-09 23:48:05",desc:"增加代码生成器设置table排序功能"},
50+
{ date: "2021-01-09 23:12:56",desc:"优化table显示td单元格大小"},
51+
{ date: "2021-01-09 22:35:18",desc:"修复mysql使用dapper批量插入乱码的问题(由Flyash提供)"},
52+
{ date: "2021-01-09 22:21:01",desc:"增加H5 table加载后的方法"},
53+
{ date: "2021-01-09 22:13:38",desc:"调整文件点击下载方式"},
54+
{ date: "2021-01-01 17:50:42",desc:"优化页面加载"},
55+
{ date: "2021-01-01 17:49:06",desc:"优化登陆页面"},
56+
{ date: "2021-01-01 17:07:42",desc:"修改页面加载样式，修改文件index.html,App.vue"},
57+
{ date: "2021-01-01 16:59:59",desc:"优选代码生成器提示只能选择一个主键字段"},
58+
{ date: "2021-01-01 16:44:54",desc:"优化导入excel时字典数据确实时提示信息"},
59+
{ date: "2021-01-01 16:40:45",desc:"优化基础控制器(现在可以重写基础控制器方法)"},
60+
{ date: "2020-12-29 22:05:51",desc:"提供最新sqlserver数据库脚本"},
61+
{ date: "2020-12-29 12:25:21",desc:"优化首页菜单组件"},
62+
{ date: "2020-12-28 23:00:23",desc:"优化首页白色主题背景颜色"},
63+
{ date: "2020-12-28 22:59:52",desc:"优化首页菜单只显示根据节点为0的数据"},
64+
{ date: "2020-12-27 19:04:44",desc:"完善文档"},
65+
{ date: "2020-12-27 19:03:00",desc:"增加上传组件默认base64的支持"},
66+
{ date: "2020-12-27 18:26:35",desc:"增加菜单不显示也可以分配仅限功能，需要更新文件VolElementMenu.vue VolElementMenuChild.vue Sys_Menu.vue Sys_MenuService.cs UserContext.cs"},
67+
{ date: "2020-12-27 13:38:48",desc:"增加编辑保存后不重置分页页数(停留在当前页的数据)"},
68+
{ date: "2020-12-27 13:12:54",desc:"增加表单render渲染额外属性"},
69+
{ date: "2020-12-26 23:29:07",desc:"增加主从表demo"},
70+
{ date: "2020-12-26 19:21:44",desc:"移除模板多余引用"},
71+
{ date: "2020-12-21 19:40:45",desc:"增加菜单收缩功能更新文件：更新文件VolElementMenuChild.vue 、VolElementMenu.vue 、Index.vue"},
4772
{ date: "2020-12-19 13:36:32", desc: "优化角色上级角色字段界面编辑或者新建时可以选择任意节点" },
4873
{ date: "2020-12-19 13:29:06", desc: "增加前端禁止缓存与完善其他文档" },
4974
{ date: "2020-12-19 13:09:50", desc: "增加table单元格为img时，可以自定义formatter及对base64图片的默认支持" },

‎开发版dev/Vue.NetCore/Vol.Vue/src/components/basic/ViewGrid.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -426,6 +426,10 @@ var vueParam = {
426426
width: 0,
427427
summary: false, //弹出框明细table是否显示合计
428428
}, //saveClose新建或编辑成功后是否关闭弹出框//弹出框的标签宽度labelWidth
429+
editor:{
430+
uploadImgUrl:"",//上传路径
431+
upload:null//上传方法
432+
}
429433
};
430434
},
431435
methods: {

‎开发版dev/Vue.NetCore/Vol.Vue/src/components/basic/ViewGridConfig/methods.js‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -465,6 +465,9 @@ let methods = {
465465
}
466466
}
467467
if (newVal instanceof Array) {
468+
if (form[key]) {
469+
form[key] = [];
470+
}
468471
form[key].splice(0)
469472
// this.$set(form, key, newVal);
470473
form[key].push(...newVal);
@@ -646,7 +649,7 @@ let methods = {
646649
},
647650
async initBox() {
648651
//初始化新建、编辑的弹出框
649-
if(!await this.modelOpenBeforeAsync(this.currentRow)) return false;
652+
if (!await this.modelOpenBeforeAsync(this.currentRow)) return false;
650653
this.modelOpenBefore(this.currentRow);
651654
if (!this.boxInit) {
652655
this.boxInit = true;
@@ -1138,17 +1141,23 @@ let methods = {
11381141
//弹出框高度至少250px
11391142
clientHeight = clientHeight < 250 ? 250 : clientHeight;
11401143
let clientWidth = document.documentElement.clientWidth;
1141-
1142-
if (this.boxOptions.height) {
1143-
//如果高度与宽度超过了获取到的可见高宽度，则设为默认的90%高宽
1144-
if (this.boxOptions.height > clientHeight * 0.8) {
1145-
this.boxOptions.height = clientHeight * 0.8;
1146-
}
1144+
if (this.editFormOptions.some(x => { return x.some(item => { return item.type == "editor" }) })) {
1145+
this.editor.uploadImgUrl = this.getUrl("upload");
1146+
this.boxOptions.height = clientHeight * 0.8;
1147+
this.boxOptions.width = clientWidth * 0.8;
11471148
}
1148-
if (this.boxOptions.width) {
1149-
//如果高度与宽度超过了获取到的可见高宽度，则设为默认的90%高宽
1150-
if (this.boxOptions.width > clientWidth * 0.8) {
1151-
this.boxOptions.width = clientWidth * 0.8;
1149+
else {
1150+
if (this.boxOptions.height) {
1151+
//如果高度与宽度超过了获取到的可见高宽度，则设为默认的90%高宽
1152+
if (this.boxOptions.height > clientHeight * 0.8) {
1153+
this.boxOptions.height = clientHeight * 0.8;
1154+
}
1155+
}
1156+
if (this.boxOptions.width) {
1157+
//如果高度与宽度超过了获取到的可见高宽度，则设为默认的90%高宽
1158+
if (this.boxOptions.width > clientWidth * 0.8) {
1159+
this.boxOptions.width = clientWidth * 0.8;
1160+
}
11521161
}
11531162
}
11541163
//计算整个table的宽度，根据宽度决定是否启用第一行显示的列为固定列

‎开发版dev/Vue.NetCore/Vol.Vue/src/components/basic/VolForm.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,14 @@
191191
:render-format="item.formatter"
192192
filterable
193193
v-model="_formFields[item.field]"></Cascader>
194+
<kind-editor
195+
ref="editor"
196+
v-else-if="item.type == 'editor'"
197+
:UploadImgUrl="editor.uploadImgUrl"
198+
:upload="editor.upload"
199+
:content.sync="_formFields[item.field]"
200+
height="460px"
201+
></kind-editor>
194202
<!--2020.09.05增加textarea标签的最小高度item.minRows属性 -->
195203
<Input v-else-if="item.type == 'textarea'"
196204
v-model="_formFields[item.field]"
@@ -260,6 +268,7 @@ export default {
260268
components: {
261269
FormExpand,
262270
VolUpload: () => import("@/components/basic/VolUpload.vue"),
271+
KindEditor:()=>import("@/components/kindeditor/KindEditor.vue")
263272
},
264273
props: {
265274
loadKey: {
@@ -297,6 +306,12 @@ export default {
297306
return {};
298307
},
299308
},
309+
editor: { //2021.01.16编辑器信息 {uploadImgUrl:"",upload:null//上传方法}
310+
type: Object,
311+
default: () => {
312+
return {};
313+
},
314+
},
300315
},
301316
watch: {},
302317
created () {

‎开发版dev/Vue.NetCore/Vol.Vue/src/components/kindeditor/KindEditor.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,12 @@ export default {
5252
type: String,
5353
default: ""
5454
},
55+
upload:{ //上传方法
56+
type:Function,
57+
default:(file)=>{
58+
59+
}
60+
},
5561
uploadCount: {
5662
//最多可以上传(图片)的数量
5763
type: Number,
@@ -435,7 +441,7 @@ export default {
435441
}
436442
let urls = files.map(x => {
437443
return (
438-
`<img style="width:100%;" src="` +
444+
`<img class="editor-img" src="` +
439445
(this.http.ipAddress + result.data + x.name) +
440446
`"/>`
441447
);

0 commit comments

Comments
 (0)