rb-document-form-constructor 0.8.38 → 0.8.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,272 +1,278 @@
|
|
|
1
1
|
<template>
|
|
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
|
-
</b-
|
|
118
|
-
|
|
2
|
+
<b-modal :id="id"
|
|
3
|
+
:title="title"
|
|
4
|
+
modal-class="rb-field-rule-form-modal"
|
|
5
|
+
size="lg"
|
|
6
|
+
@ok.prevent="onOk"
|
|
7
|
+
ok-title="Сохранить правило"
|
|
8
|
+
cancel-variant="outline-gray"
|
|
9
|
+
cancel-title="Отмена">
|
|
10
|
+
<b-card no-body>
|
|
11
|
+
<b-tabs card @activate-tab="onActivateTab">
|
|
12
|
+
<b-tab title="Правило" active>
|
|
13
|
+
<b-form v-if="innerRule">
|
|
14
|
+
<b-form-row>
|
|
15
|
+
<b-col log="12">
|
|
16
|
+
<b-form-group label="Выбрать" v-if="rulePresets.length > 0">
|
|
17
|
+
<template #description>
|
|
18
|
+
Выберите готовое правило из списка и если нужно, измените
|
|
19
|
+
</template>
|
|
20
|
+
<b-form-select @input="onRuleSelected($event)">
|
|
21
|
+
<b-form-select-option v-for="r in rulePresets" :key="r.name"
|
|
22
|
+
:value="r.name">
|
|
23
|
+
{{ r.labelRu }} ({{ r.name }})
|
|
24
|
+
</b-form-select-option>
|
|
25
|
+
</b-form-select>
|
|
26
|
+
</b-form-group>
|
|
27
|
+
</b-col>
|
|
28
|
+
<b-col lg="12">
|
|
29
|
+
<b-form-group label="Название">
|
|
30
|
+
<template #description>
|
|
31
|
+
Задайте уникальное название, чтобы отличать правило в списке
|
|
32
|
+
</template>
|
|
33
|
+
<b-form-input v-model="innerRule.name"
|
|
34
|
+
:state="state.name"
|
|
35
|
+
:invalid-feedback="state.name_feedback"
|
|
36
|
+
></b-form-input>
|
|
37
|
+
</b-form-group>
|
|
38
|
+
</b-col>
|
|
39
|
+
<b-col lg="12">
|
|
40
|
+
<b-form-group label="Событие">
|
|
41
|
+
<template #description>
|
|
42
|
+
При возникновении этого события будет выполняться правило
|
|
43
|
+
</template>
|
|
44
|
+
<b-form-select v-model="innerRule.event"
|
|
45
|
+
:state="state.event"
|
|
46
|
+
:invalid-feedback="state.event_feedback">
|
|
47
|
+
<b-form-select-option :value="'input'">
|
|
48
|
+
Ввод значения
|
|
49
|
+
</b-form-select-option>
|
|
50
|
+
<b-form-select-option :value="'change'">
|
|
51
|
+
Изменение значения
|
|
52
|
+
</b-form-select-option>
|
|
53
|
+
<b-form-select-option :value="'click'">
|
|
54
|
+
Клик
|
|
55
|
+
</b-form-select-option>
|
|
56
|
+
<b-form-select-option :value="'validate'">
|
|
57
|
+
Валидация
|
|
58
|
+
</b-form-select-option>
|
|
59
|
+
<b-form-select-option :value="'defaultValue'">
|
|
60
|
+
Установить значение по умолчанию
|
|
61
|
+
</b-form-select-option>
|
|
62
|
+
<b-form-select-option :value="'form-mounted'">
|
|
63
|
+
Форма создана
|
|
64
|
+
</b-form-select-option>
|
|
65
|
+
<b-form-select-option :value="'form-activated'">
|
|
66
|
+
Форма показана
|
|
67
|
+
</b-form-select-option>
|
|
68
|
+
</b-form-select>
|
|
69
|
+
</b-form-group>
|
|
70
|
+
</b-col>
|
|
71
|
+
<b-col lg="12">
|
|
72
|
+
<b-form-group label="Скрипт">
|
|
73
|
+
<template #description>
|
|
74
|
+
Здесь указывается скрипт правила. Скрипт должен быть написан на языке
|
|
75
|
+
javascript
|
|
76
|
+
</template>
|
|
77
|
+
<div class="rb-script-input">
|
|
78
|
+
<b-button-toolbar>
|
|
79
|
+
<b-dropdown text="Переменные" variant="outline-secondary"
|
|
80
|
+
size="sm" class="mx-1">
|
|
81
|
+
<b-dropdown-item @click="addVariableToScript('doc')">
|
|
82
|
+
Документ
|
|
83
|
+
</b-dropdown-item>
|
|
84
|
+
<b-dropdown-item @click="addVariableToScript('form')">
|
|
85
|
+
Форма
|
|
86
|
+
</b-dropdown-item>
|
|
87
|
+
<b-dropdown-item @click="addVariableToScript('event')">
|
|
88
|
+
Значение события
|
|
89
|
+
</b-dropdown-item>
|
|
90
|
+
</b-dropdown>
|
|
91
|
+
<b-dropdown text="Задать значение" variant="outline-secondary"
|
|
92
|
+
size="sm" class="mx-1">
|
|
93
|
+
<b-dropdown-item v-for="f in fields" :key="f.name"
|
|
94
|
+
v-if="fields" @click="addSetVariableToScript(f)">
|
|
95
|
+
{{ f.labelRu }} ({{ f.name }})
|
|
96
|
+
</b-dropdown-item>
|
|
97
|
+
</b-dropdown>
|
|
98
|
+
<b-dropdown text="Вызвать функцию инпута" variant="outline-secondary"
|
|
99
|
+
size="sm" class="mx-1">
|
|
100
|
+
<b-dropdown-item v-for="f in fields" :key="f.name"
|
|
101
|
+
v-if="fields" @click="addCallInputFunction(f)">
|
|
102
|
+
{{ f.labelRu }} ({{ f.name }})
|
|
103
|
+
</b-dropdown-item>
|
|
104
|
+
</b-dropdown>
|
|
105
|
+
</b-button-toolbar>
|
|
106
|
+
<b-form-textarea v-model="innerRule.script"
|
|
107
|
+
:state="state.script"
|
|
108
|
+
:invalid-feedback="state.script_feedback"
|
|
109
|
+
rows="8"
|
|
110
|
+
ref="scriptInput"
|
|
111
|
+
></b-form-textarea>
|
|
112
|
+
</div>
|
|
113
|
+
</b-form-group>
|
|
114
|
+
</b-col>
|
|
115
|
+
</b-form-row>
|
|
116
|
+
</b-form>
|
|
117
|
+
</b-tab>
|
|
118
|
+
<b-tab title="Протестировать правило" v-if="innerFormConfig">
|
|
119
|
+
<doc-form :form-config="innerFormConfig">
|
|
120
|
+
</doc-form>
|
|
121
|
+
</b-tab>
|
|
122
|
+
</b-tabs>
|
|
123
|
+
</b-card>
|
|
124
|
+
</b-modal>
|
|
119
125
|
</template>
|
|
120
126
|
|
|
121
127
|
<script>
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
128
|
+
import {UtFormConfig} from "../utils/UtFormConfig";
|
|
129
|
+
import {v4 as uuidv4} from 'uuid';
|
|
130
|
+
import {UtFormConstructor} from "../utils/UtFormConstructor";
|
|
131
|
+
import DocForm from "./DocForm";
|
|
126
132
|
|
|
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
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
133
|
+
export default {
|
|
134
|
+
name: 'FieldRuleFormModal',
|
|
135
|
+
components: {DocForm},
|
|
136
|
+
props: {
|
|
137
|
+
field: Object,
|
|
138
|
+
rule: Object,
|
|
139
|
+
formConfig: Object,
|
|
140
|
+
mode: {type: String, default: 'ins'},
|
|
141
|
+
onAfterOk: Function,
|
|
142
|
+
},
|
|
143
|
+
data() {
|
|
144
|
+
return {
|
|
145
|
+
id: 'rb-field-rule-form-modal',
|
|
146
|
+
state: this.getDefaultState(),
|
|
147
|
+
innerFormConfig: null,
|
|
148
|
+
innerRule: null,
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
computed: {
|
|
152
|
+
title() {
|
|
153
|
+
return this.mode === 'ins' ? 'Добавление правила' : 'Редактирование правила';
|
|
154
|
+
},
|
|
155
|
+
fields() {
|
|
156
|
+
return UtFormConfig.getFields(this.formConfig);
|
|
157
|
+
},
|
|
158
|
+
rulePresets() {
|
|
159
|
+
return UtFormConstructor.getAvailableFieldRules(this.field);
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
watch: {
|
|
163
|
+
formConfig() {
|
|
164
|
+
this.copyToInnerFormConfig();
|
|
165
|
+
},
|
|
166
|
+
rule() {
|
|
167
|
+
if (this.rule) {
|
|
168
|
+
this.innerRule = this.rule;
|
|
169
|
+
} else {
|
|
170
|
+
this.innerRule = this.getDefaultRule();
|
|
171
|
+
}
|
|
166
172
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
methods: {
|
|
176
|
+
validateFields(fieldName) {
|
|
177
|
+
let fields = fieldName ? [fieldName] : ['name', 'event', 'script'];
|
|
178
|
+
fields.forEach(field => {
|
|
179
|
+
if (!this.innerRule[field]) {
|
|
180
|
+
this.state[field] = false;
|
|
181
|
+
this.state[`${field}_feedback`] = 'Заполните название';
|
|
182
|
+
} else {
|
|
183
|
+
this.state[field] = true;
|
|
184
|
+
this.state[`${field}_feedback`] = null;
|
|
185
|
+
}
|
|
186
|
+
});
|
|
187
|
+
},
|
|
188
|
+
copyToInnerFormConfig() {
|
|
189
|
+
this.innerFormConfig = JSON.parse(JSON.stringify(this.formConfig));
|
|
190
|
+
},
|
|
191
|
+
applyRuleToInnerFormConfig() {
|
|
192
|
+
if (this.innerFormConfig) {
|
|
193
|
+
let foundRule = UtFormConfig.findRule(this.innerRule.id, this.innerFormConfig);
|
|
188
194
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
195
|
+
if (!foundRule) {
|
|
196
|
+
let foundField = UtFormConfig.findField(
|
|
197
|
+
this.field.name, this.innerFormConfig
|
|
198
|
+
);
|
|
193
199
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
200
|
+
if (foundField) {
|
|
201
|
+
foundField.rules = foundField.rules ? foundField.rules : [];
|
|
202
|
+
foundField.rules.push(this.rule);
|
|
203
|
+
}
|
|
204
|
+
} else {
|
|
205
|
+
Object.assign(foundRule, this.innerRule);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
onActivateTab(index) {
|
|
210
|
+
if (index > 0) {
|
|
211
|
+
this.copyToInnerFormConfig();
|
|
212
|
+
this.applyRuleToInnerFormConfig();
|
|
213
|
+
}
|
|
214
|
+
},
|
|
215
|
+
getDefaultState() {
|
|
216
|
+
return {
|
|
217
|
+
name: null,
|
|
218
|
+
event: null,
|
|
219
|
+
script: null,
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
getDefaultRule() {
|
|
223
|
+
return {
|
|
224
|
+
id: uuidv4(),
|
|
225
|
+
name: null,
|
|
226
|
+
event: null,
|
|
227
|
+
script: null,
|
|
228
|
+
}
|
|
229
|
+
},
|
|
230
|
+
resetModal() {
|
|
231
|
+
this.state = this.getDefaultState();
|
|
232
|
+
this.innerRule = null;
|
|
233
|
+
},
|
|
234
|
+
addVariableToScript(varName) {
|
|
235
|
+
let caretPosition = this.$refs.scriptInput.selectionStart;
|
|
236
|
+
this.insertTextToScript(varName, caretPosition);
|
|
237
|
+
},
|
|
238
|
+
addSetVariableToScript(field) {
|
|
239
|
+
let caretPosition = this.$refs.scriptInput.selectionStart;
|
|
240
|
+
this.insertTextToScript(`doc['${field.name}'] = Значение;`, caretPosition);
|
|
241
|
+
},
|
|
242
|
+
addCallInputFunction(field) {
|
|
243
|
+
let caretPosition = this.$refs.scriptInput.selectionStart;
|
|
244
|
+
this.insertTextToScript(`form.$refs['${field.name}'][0].Название функции();`, caretPosition);
|
|
245
|
+
},
|
|
246
|
+
insertTextToScript(text, position) {
|
|
247
|
+
position = position != null ? position : this.script.length;
|
|
248
|
+
this.innerRule.script = this.innerRule.script != null ? this.innerRule.script : '';
|
|
249
|
+
let scriptSplit = this.innerRule.script.split('');
|
|
250
|
+
scriptSplit.splice(position, 0, text);
|
|
251
|
+
this.innerRule.script = scriptSplit.join('');
|
|
252
|
+
},
|
|
253
|
+
onRuleSelected(ruleName) {
|
|
254
|
+
let rule = this.rulePresets.find(rule => rule.name === ruleName);
|
|
255
|
+
if (rule) {
|
|
256
|
+
Object.assign(this.innerRule, rule);
|
|
257
|
+
this.innerRule.script = this.innerRule.script.trim();
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
onOk() {
|
|
261
|
+
this.validateFields();
|
|
256
262
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
}
|
|
261
|
-
this.$nextTick(() => {
|
|
262
|
-
this.resetModal();
|
|
263
|
-
this.$bvModal.hide(this.id);
|
|
264
|
-
});
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
},
|
|
268
|
-
created() {
|
|
269
|
-
this.copyToInnerFormConfig();
|
|
263
|
+
if (this.state.name && this.state.script) {
|
|
264
|
+
if (this.onAfterOk) {
|
|
265
|
+
this.onAfterOk(this.innerRule);
|
|
270
266
|
}
|
|
267
|
+
this.$nextTick(() => {
|
|
268
|
+
this.resetModal();
|
|
269
|
+
this.$bvModal.hide(this.id);
|
|
270
|
+
});
|
|
271
|
+
}
|
|
271
272
|
}
|
|
273
|
+
},
|
|
274
|
+
created() {
|
|
275
|
+
this.copyToInnerFormConfig();
|
|
276
|
+
}
|
|
277
|
+
}
|
|
272
278
|
</script>
|