widget.js
5.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
(function () {
Vue.prototype.$echarts = echarts;
Vue.prototype.$layui = layui;
let vm = new Vue({
el: '#app',
data() {
return {
table: null,
layer: null,
laytpl: null
}
},
mounted() {
this.$layui.use(['table', 'layer', 'laytpl'], () => {
this.table = this.$layui.table;
this.layer = this.$layui.table;
this.laytpl = this.$layui.table;
this.initTable();
$(window).resize(() => {
this.table.reload('dtstbgTest', {
height: window.innerHeight - $('#mxlbTable').siblings('.container-content-left-top')[0].offsetTop - 380,
});
})
})
},
methods: {
lcfy() {
layui.layer.open({
type: 1,
title: "流程复用",
area: ['474px', '247px'],
content: layui.laytpl($("#iFrame_addLcfy").html()).render(function () {
$('#iFrame_addLc').html()
}),
btn: ['确定', '取消']
});
},
back() {
window.location.href = '/frontweb/view/modelManage/mymodel/widget.html'
},
initTable() {
this.table.render({
elem: '#mxlbTable',
height: window.innerHeight - $('#mxlbTable').siblings('.container-content-left-top')[0].offsetTop - 380,
id: 'dtstbgTest',
limit: 300,
data: [
{ "id": '1', "xh": '1', "sfmc": '算法1', "cz": '等级医院交通' },
{ "id": '2', "xh": '2', "sfmc": '算法9', "cz": '等级医院交通' },
{ "id": '3', "xh": '3', "sfmc": '算法2', "cz": '等级医院交通' },
{ "id": '4', "xh": '4', "sfmc": '算法3', "cz": '等级医院交通' },
{ "id": '5', "xh": '5', "sfmc": '算法4', "cz": '等级医院交通' },
{ "id": '6', "xh": '6', "sfmc": '算法5', "cz": '等级医院交通' },
{ "id": '7', "xh": '7', "sfmc": '算法6', "cz": '等级医院交通' },
{ "id": '8', "xh": '8', "sfmc": '算法7', "cz": '等级医院交通' },
{ "id": '9', "xh": '9', "sfmc": '算法8', "cz": '等级医院交通' },
{ "id": '10', "xh": '10', "sfmc": '算法10', "cz": '等级医院交通' },
{ "id": '11', "xh": '11', "sfmc": '算法11', "cz": '等级医院交通' },
{ "id": '12', "xh": '12', "sfmc": '算法12', "cz": '等级医院交通' },
{ "id": '13', "xh": '13', "sfmc": '算法13', "cz": '等级医院交通' },
{ "id": '14', "xh": '14', "sfmc": '算法14', "cz": '等级医院交通' }
],
cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
cols: [[
{
field: 'xh',
width: "20%",
title: '执行顺序'
},
{
field: 'sfmc',
width: "40%",
title: '算法名称'
},
{
field: 'cz',
width: "40.3%",
title: '操作',
minWidth: 100,
templet: '#titleTpl'
}
]],
done: (res, curr, count) => {
this.table.on('tool(test)', function (obj) {
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if (layEvent === 'upmove') { //上移
window.location.href = '/frontweb/view/modelManage/mymodel/modelSet/widget.html'
} else if (layEvent === 'downmove') { //下移
//同步更新缓存对应的值
obj.update({
username: '123'
, title: 'xxx'
});
} else if (layEvent === 'del') { //删除
layer.confirm('真的删除行么', function (index) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if (layEvent === 'LAYTABLE_TIPS') {
layer.alert('Hi，头部工具栏扩展的右侧图标。');
}
});
},
});
},
},
computed: {
}
});
})()