Skip to content

Commit 4bb6281

Browse files
cq-pandacq-panda
committed
添加自定义多个弹出框及其他文档
1 parent 5ec67d5 commit 4bb6281

File tree

8 files changed

+1671
-1018
lines changed

8 files changed

+1671
-1018
lines changed

‎Vol.Vue/src/extension/appmanager/App_Expert.js‎

Lines changed: 51 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,63 @@
1-
import test from "./App_Expert/App_ExpertModelBody.vue";
1+
2+
import gridHeader from './App_Expert/App_ExpertGridHeader'
3+
//声明vue对象
4+
let $this;
25
let extension = {
3-
components: {//动态扩充组件或组件路径
4-
//表单header、content、footer对应位置扩充的组件
5-
gridHeader: '',//{ template: "<div>扩展组xx件</div>" },
6+
components: {
7+
gridHeader: gridHeader,
68
gridBody: '',
79
gridFooter: '',
8-
//弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
9-
modelHeader: "",//test,//此处可以根据实际情况同步引用也可以异步引用() => import("./App_Expert/App_ExpertModelBody.vue"),
10+
modelHeader: '',
1011
modelBody: '',
1112
modelFooter: ''
12-
},
13-
text: "代码生成器中，如果字段是图片地址或文件，选择[table列显示类型]即可",
13+
}, //动态扩充组件或组件路径
1414
buttons: {
15-
box:[] //新建、编辑弹出框按钮
15+
view: [{
16+
name: "弹出框1",
17+
icon: 'md-add',
18+
index: 1,//添加到第一个按钮后面
19+
type: 'error',
20+
onClick: function () {
21+
this.$refs.gridHeader.open1()
22+
}
23+
}]
24+
},
25+
methods: { //事件扩展
26+
onInit () {
27+
//设置界面上最多可显示的按钮数量
28+
this.maxBtnLength = 6;
29+
// 第2个弹出框操作
30+
this.buttons.splice(2, 0, ...[{
31+
name: "弹出框2",
32+
icon: 'md-add',
33+
type: 'info',
34+
onClick: function () {
35+
this.$refs.gridHeader.open2()
36+
}
37+
},
38+
{
39+
name: "获取子组件对象",
40+
icon: 'md-add',
41+
type: 'info',
42+
onClick: function () {
43+
this.$Message.info(this.$refs.gridHeader.getTestData())
44+
}
45+
}])
1646

17-
},//扩展的按钮
18-
methods: {//事件扩展
19-
onInit() {
20-
this.boxOptions.height = document.documentElement.clientHeight * 0.8;
21-
//启用多图上传,其他上传参数，参照volupload组件api
22-
this.editFormOptions.forEach(x => {
23-
x.forEach(item => {
24-
if (item.field == 'HeadImageUrl') {
25-
// item.type = 'file';
26-
//设置成100%宽度
27-
item.colSize = 12;
28-
item.multiple = true;
29-
//最多可以上传3张照片
30-
item.maxFile = 3;
31-
//限制图片大小，默认3M
32-
item.maxSize = 3;
33-
item.append = true;
34-
}
35-
})
36-
})
37-
},
38-
modelOpenBefore(row) {
39-
this.boxButtons.forEach(x => {
40-
if (x.name == '保 存') {
41-
// x.hidden = this.currentAction == this.const.ADD
47+
48+
// 第3个弹出框操作
49+
this.columns.forEach(x => {
50+
if (x.field == "Resume") {
51+
x.formatter = (row, column, event) => {
52+
return '<a>(弹出框3)' + row.Resume + '</a>'
53+
};
54+
//绑定点击事件
55+
x.click = (row, column, event) => {
56+
this.$refs.gridHeader.open3(row)
57+
};
4258
}
43-
// if (x.name == '重 置') x.disabled = true;
4459
})
4560
},
46-
modelOpenAfter(row) {
47-
console.log('form_undefined');
48-
}
4961
}
5062
};
51-
export default extension;
63+
export default extension;

‎Vol.Vue/src/extension/appmanager/App_Expert/App_ExpertModelBody.vue‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎Vol.Vue/src/views/appmanager/App_Expert.vue‎

Lines changed: 73 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,81 +5,81 @@
55
*业务请在@/extension/appmanager/App_Expert.js此处编写
66
-->
77
<template>
8-
<div>
9-
<view-grid :columns="columns"
10-
:detail="detail"
11-
:editFormFields="editFormFields"
12-
:editFormFileds="editFormFields"
13-
:editFormOptions="editFormOptions"
14-
:searchFormFields="searchFormFields"
15-
:searchFormFileds="searchFormFields"
16-
:searchFormOptions="searchFormOptions"
17-
:table="table"
18-
:extend="extend">
19-
</view-grid>
20-
</div>
8+
<div>
9+
<view-grid :columns="columns"
10+
:detail="detail"
11+
:editFormFields="editFormFields"
12+
:editFormFileds="editFormFields"
13+
:editFormOptions="editFormOptions"
14+
:searchFormFields="searchFormFields"
15+
:searchFormFileds="searchFormFields"
16+
:searchFormOptions="searchFormOptions"
17+
:table="table"
18+
:extend="extend">
19+
</view-grid>
20+
</div>
2121
</template>
2222

2323
<script>
24-
import extend from "@/extension/appmanager/App_Expert.js";
25-
import ViewGrid from "@/components/basic/ViewGrid.vue";
26-
var vueParam = {
27-
components: {
28-
ViewGrid
29-
},
30-
data() {
31-
return {
32-
table: {
33-
key: 'ExpertId',
34-
footer: "Foots",
35-
cnName: '启用图片支持',
36-
name: 'App_Expert',
37-
url: "/App_Expert/",
38-
sortName: "ExpertId"
39-
},
40-
extend: extend,
41-
editFormFields: {"ExpertName":"","Enable":"","City":"","CreateDate":"","Resume":"","HeadImageUrl":""},
42-
editFormOptions: [[{"title":"名称","field":"ExpertName"},
43-
{"dataKey":"enable","data":[],"title":"是否启用","required":true,"field":"Enable","type":"select"}],
44-
[{"dataKey":"city","data":[],"title":"地区","field":"City","type":"select"},
45-
{"title":"申请时间","field":"CreateDate","disabled":true}],
46-
[{"title":"个人简介","field":"Resume","colSize":12,"type":"textarea"}],
47-
[{"title":"头像","field":"HeadImageUrl","type":"img"}]],
48-
searchFormFields: {"ExpertName":"","AuditStatus":[],"ReallyName":"","IDNumber":"","Education":"","Professional":"","Company":"","City":[],"AuditDate":""},
49-
searchFormOptions: [[{"title":"名称","field":"ExpertName","type":"like"},{"title":"真实姓名","field":"ReallyName"},{"title":"身份证号","field":"IDNumber"}],[{"title":"学历","field":"Education","type":"text"},{"title":"职业","field":"Professional"},{"title":"所在公司","field":"Company"}],[{"dataKey":"audit","data":[],"title":"审核状态","field":"AuditStatus","type":"selectList"},{"dataKey":"city","data":[],"title":"地区","field":"City","type":"selectList"},{"title":"审核时间","field":"AuditDate","type":"datetime"}]],
50-
columns: [{field:'ExpertId',title:'主键ID',type:'int',width:80,hidden:true,readonly:true,require:true,align:'left'},
51-
{field:'User_Id',title:'申请人帐号Id',type:'int',width:90,hidden:true,align:'left'},
52-
{field:'ExpertName',title:'名称',type:'string',link:true,width:120,align:'left',sortable:true},
53-
{field:'HeadImageUrl',title:'头像',type:'img',width:150,align:'left'},
54-
{field:'UserName',title:'帐号',type:'string',width:120,hidden:true,align:'left'},
55-
{field:'UserTrueName',title:'申请人',type:'string',width:100,hidden:true,align:'left'},
56-
{field:'AuditStatus',title:'审核状态',type:'int',bind:{ key:'audit',data:[]},width:120,require:true,align:'left'},
57-
{field:'Auditor',title:'审核人',type:'string',width:150,hidden:true,align:'left'},
58-
{field:'Enable',title:'是否启用',type:'byte',bind:{ key:'enable',data:[]},width:90,require:true,align:'left'},
59-
{field:'ReallyName',title:'真实姓名',type:'string',width:150,hidden:true,align:'left'},
60-
{field:'IDNumber',title:'身份证号',type:'string',width:200,hidden:true,align:'left'},
61-
{field:'PhoneNo',title:'电话',type:'string',width:150,hidden:true,align:'left'},
62-
{field:'Education',title:'学历',type:'string',width:120,hidden:true,align:'left'},
63-
{field:'Professional',title:'职业',type:'string',width:120,hidden:true,align:'left'},
64-
{field:'Company',title:'所在公司',type:'string',width:150,hidden:true,align:'left'},
65-
{field:'City',title:'地区',type:'string',bind:{ key:'city',data:[]},width:100,align:'left'},
66-
{field:'Resume',title:'个人简介',type:'string',width:150,align:'left'},
67-
{field:'AuditId',title:'审核人Id',type:'int',width:80,hidden:true,align:'left'},
68-
{field:'AuditDate',title:'审核时间',type:'datetime',width:150,hidden:true,align:'left',sortable:true},
69-
{field:'CreateID',title:'创建人Id',type:'int',width:80,hidden:true,align:'left'},
70-
{field:'Creator',title:'创建人',type:'string',width:130,hidden:true,align:'left'},
71-
{field:'CreateDate',title:'申请时间',type:'datetime',width:130,readonly:true,align:'left',sortable:true},
72-
{field:'ModifyID',title:'修改人ID',type:'int',width:80,hidden:true,align:'left'},
73-
{field:'Modifier',title:'修改人',type:'string',width:100,align:'left'},
74-
{field:'ModifyDate',title:'修改时间',type:'datetime',width:130,hidden:true,align:'left',sortable:true}],
75-
detail: {
76-
cnName:"#detailCnName",
77-
columns: [],
78-
sortName: "",
79-
key:""
80-
}
81-
};
82-
}
24+
import extend from "@/extension/appmanager/App_Expert.js";
25+
import ViewGrid from "@/components/basic/ViewGrid.vue";
26+
var vueParam = {
27+
components: {
28+
ViewGrid
29+
},
30+
data () {
31+
return {
32+
table: {
33+
key: 'ExpertId',
34+
footer: "Foots",
35+
cnName: '启用图片支持',
36+
name: 'App_Expert',
37+
url: "/App_Expert/",
38+
sortName: "ExpertId"
39+
},
40+
extend: extend,
41+
editFormFields: { "ExpertName": "", "Enable": "", "City": "", "CreateDate": "", "Resume": "", "HeadImageUrl": "" },
42+
editFormOptions: [[{ "title": "名称", "field": "ExpertName" },
43+
{ "dataKey": "enable", "data": [], "title": "是否启用", "required": true, "field": "Enable", "type": "select" }],
44+
[{ "dataKey": "city", "data": [], "title": "地区", "field": "City", "type": "select" },
45+
], [{ "title": "申请时间", "field": "CreateDate", "disabled": false }],
46+
[{ "title": "个人简介", "field": "Resume", "colSize": 6, "type": "textarea" }],
47+
[{ "title": "头像", "field": "HeadImageUrl", "type": "img" }]],
48+
searchFormFields: { "ExpertName": "", "AuditStatus": [], "ReallyName": "", "IDNumber": "", "Education": "", "Professional": "", "Company": "", "City": [], "AuditDate": "" },
49+
searchFormOptions: [[{ "title": "名称", "field": "ExpertName", "type": "like" }, { "title": "真实姓名", "field": "ReallyName" }, { "title": "身份证号", "field": "IDNumber" }], [{ "title": "学历", "field": "Education", "type": "text" }, { "title": "职业", "field": "Professional" }, { "title": "所在公司", "field": "Company" }], [{ "dataKey": "audit", "data": [], "title": "审核状态", "field": "AuditStatus", "type": "selectList" }, { "dataKey": "city", "data": [], "title": "地区", "field": "City", "type": "selectList" }, { "title": "审核时间", "field": "AuditDate", "type": "datetime" }]],
50+
columns: [{ field: 'ExpertId', title: '主键ID', type: 'int', width: 80, hidden: true, readonly: true, require: true, align: 'left' },
51+
{ field: 'User_Id', title: '申请人帐号Id', type: 'int', width: 90, hidden: true, align: 'left' },
52+
{ field: 'ExpertName', title: '名称', type: 'string', link: true, width: 120, align: 'left', sortable: true },
53+
{ field: 'HeadImageUrl', title: '头像', type: 'img', width: 150, align: 'left' },
54+
{ field: 'UserName', title: '帐号', type: 'string', width: 120, hidden: true, align: 'left' },
55+
{ field: 'UserTrueName', title: '申请人', type: 'string', width: 100, hidden: true, align: 'left' },
56+
{ field: 'AuditStatus', title: '审核状态', type: 'int', bind: { key: 'audit', data: [] }, width: 120, require: true, align: 'left' },
57+
{ field: 'Auditor', title: '审核人', type: 'string', width: 150, hidden: true, align: 'left' },
58+
{ field: 'Enable', title: '是否启用', type: 'byte', bind: { key: 'enable', data: [] }, width: 90, require: true, align: 'left' },
59+
{ field: 'ReallyName', title: '真实姓名', type: 'string', width: 150, hidden: true, align: 'left' },
60+
{ field: 'IDNumber', title: '身份证号', type: 'string', width: 200, hidden: true, align: 'left' },
61+
{ field: 'PhoneNo', title: '电话', type: 'string', width: 150, hidden: true, align: 'left' },
62+
{ field: 'Education', title: '学历', type: 'string', width: 120, hidden: true, align: 'left' },
63+
{ field: 'Professional', title: '职业', type: 'string', width: 120, hidden: true, align: 'left' },
64+
{ field: 'Company', title: '所在公司', type: 'string', width: 150, hidden: true, align: 'left' },
65+
{ field: 'City', title: '地区', type: 'string', bind: { key: 'city', data: [] }, width: 100, align: 'left' },
66+
{ field: 'Resume', title: '个人简介', type: 'string', width: 150, align: 'left' },
67+
{ field: 'AuditId', title: '审核人Id', type: 'int', width: 80, hidden: true, align: 'left' },
68+
{ field: 'AuditDate', title: '审核时间', type: 'datetime', width: 150, hidden: true, align: 'left', sortable: true },
69+
{ field: 'CreateID', title: '创建人Id', type: 'int', width: 80, hidden: true, align: 'left' },
70+
{ field: 'Creator', title: '创建人', type: 'string', width: 130, hidden: true, align: 'left' },
71+
{ field: 'CreateDate', title: '申请时间', type: 'datetime', width: 130, readonly: true, align: 'left', sortable: true },
72+
{ field: 'ModifyID', title: '修改人ID', type: 'int', width: 80, hidden: true, align: 'left' },
73+
{ field: 'Modifier', title: '修改人', type: 'string', width: 100, align: 'left' },
74+
{ field: 'ModifyDate', title: '修改时间', type: 'datetime', width: 130, hidden: true, align: 'left', sortable: true }],
75+
detail: {
76+
cnName: "#detailCnName",
77+
columns: [],
78+
sortName: "",
79+
key: ""
80+
}
8381
};
84-
export default vueParam;
82+
}
83+
};
84+
export default vueParam;
8585
</script>

0 commit comments

Comments
 (0)