Demo.vue
4.84 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<script>
import '../hotent.helper.js'
export default {
data() {
return {
qjr: "",
kssj: "",
jssj: "",
sc: 0,
qjlx: "",
sm: "",
};
},
created() {
window.currentVM = this;
setTimeout(() => {
// 1.传递渲染完成后的页面高度
const height = window.document.body.clientHeight + 60;
hotent.sendMessage({ type: "height", height });
}, 500);
// 2.获取url地址参数的id值后,通过id从业务系统后台获取对应的业务表单数据
setTimeout(() => {
// 获取url地址中的id值
const idVal = getUrlParam("id");
if (idVal) {
//TODO 调用后台接口,通过id获取业务表单数据
this.qjr = "张三";
this.kssj = "2022-04-15";
this.jssj = "2022-04-16";
this.sc = 2;
}
}, 300);
},
};
// 3.启动或者审批过程中传递表单数据
window.saveData = function (alias) {
if(alias) {
/**
* alias 如果是按钮组,会是 agree-before、agree-submission 、agree-after这种形式
* alias[0] 表示个是点击按钮的类型
* - 可选值
* startFlow: '启动',
* agree: '同意',
* reject: '驳回',
* inqu: '征询',
* saveDraft: '保存',
* endProcess: '终止',
* startTrans: '流转',
* oppose: '反对',
* addSign: '加签',
* revoke: '撤回',
* cancel: '取消',
* close: '关闭'
* alias[1] 表示的是触发的时机
* - 可选值:
* 1. before 表示触发时机是点击页面下方按钮,这里可以通过发送消息 hotent.sendMessage({type: 'saveData',state: false, message: '表单校验失败'}) 进行拦截弹窗出现,可用于做 URL 表单的必填项校验
* 2. submission 表示触发时机是点击弹窗的确定按钮
* 3. after 表示触发时机是点击弹窗确定按钮(且接口请求都成功)后
*/
const aliasArr = alias.split('-')
const name = aliasArr[0]
const COMPONENTS_MAP = {
startFlow: '启动',
agree: '同意',
reject: '驳回',
inqu: '征询',
saveDraft: '保存',
endProcess: '终止',
startTrans: '流转',
oppose: '反对',
addSign: '加签',
revoke: '撤回',
cancel: '取消',
close: '关闭'
}
const triggerTiming = {
before: "点击页面下方触发,可以通过 hotent.sendMessage({type: 'saveData',state: false, message: '表单校验失败'})进行拦截数据保存",
submission: '点击弹窗的确定按钮立即触发',
after: '点击弹窗的确定按钮后会触发'
}
const styles = [
'color: green',
'font-size: 16px',
'border: 1px solid red',
'padding: 5px',
].join(';');
console.log(`%c当前点击按钮是【${COMPONENTS_MAP[name]}】`, styles)
console.log(`%c触发时机 => ${triggerTiming[aliasArr[1]]}`, styles)
}
if (!window.currentVM) {
alert("当前页面未获取到Vue实例.");
}
const { qjr, kssj, jssj, sc, qjlx, sm } = window.currentVM;
// (1).调用应用系统的后台接口保存表单数据
// req.post(url, { qjr, kssj, jssj, sc, qjlx, sm }).then((response) => {
// (2).模拟后台完成表单数据保存后,通知eip系统
// const { state, id } = response
// hotent.sendMessage({
// type: "saveData",
// state,
// sysCode: "demo",
// businessKey: id,
// vars: { sc },
// });
// })
// 因为没有对应的后台接口,这里延迟1秒后直接通知eip系统
setTimeout(() => {
hotent.sendMessage({
type: "saveData",
state: true, // 数据保存是否成功,返回 false 时中断流程发起或任务审批的动作。
message: '表单校验',
sysCode: "demo", // 业务系统编码
businessKey: "1", // 业务数据主键,返回这条业务数据对应的主键
vars: { sc }, // 流程变量
});
}, 1000);
};
// 获取url地址栏参数
window.getUrlParam = function (key) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == key) {
return pair[1];
}
}
return false;
};
</script>
<template>
<h2>申请人</h2>
<input v-model="qjr" />
<h2>开始时间</h2>
<input type="date" v-model="kssj" />
<h2>结束时间</h2>
<input type="date" v-model="jssj" />
<h2>时长</h2>
<input v-model="sc" />
<h2>请假类型</h2>
<input v-model="qjlx" />
<h2>请假原因</h2>
<textarea v-model="sm"></textarea>
</template>