|
1 | 1 | <div class="WorkflowDesignerToolbarMultiBlock">
|
2 |
| - |
3 | 2 | <div v-if="!settings.hideElementsToolbar && !settings.readonly" class="WorkflowDesignerToolbarBlock Horizontal">
|
4 |
| - <el-menu mode="horizontal" > |
| 3 | + <el-menu mode="horizontal"> |
5 | 4 | <el-submenu index="1">
|
6 |
| - <template slot="title">{{ labels.Menu }}</template> |
7 |
| - <el-submenu index="1-1"> |
8 |
| - <template slot="title">{{ labels.File }}</template> |
9 |
| - <el-menu-item index="1-1-1" @click="uploadXML"> |
10 |
| - {{ labels.UploadScheme }} |
11 |
| - </el-menu-item> |
12 |
| - <el-menu-item v-if="settings.showBpmnMenu" index="1-1-2" @click="uploadBPMN"> |
13 |
| - {{ labels.UploadBPMN }} |
14 |
| - </el-menu-item> |
15 |
| - <el-menu-item index="1-1-3" @click="downloadXML"> |
16 |
| - {{ labels.DownloadScheme }} |
17 |
| - </el-menu-item> |
18 |
| - <el-menu-item v-if="settings.showBpmnMenu" index="1-1-5" @click="downloadBPMN"> |
19 |
| - {{ labels.DownloadBPMN }} |
20 |
| - </el-menu-item> |
21 |
| - <el-menu-item index="1-1-4" @click="showToImageDialog(true)"> |
22 |
| - {{ labels.SaveToImage }} |
23 |
| - </el-menu-item> |
24 |
| - </el-submenu> |
25 |
| - <el-submenu index="1-2"> |
26 |
| - <template slot="title">{{ labels.Scheme }}</template> |
27 |
| - <el-menu-item index="1-2-1" @click="refresh">{{ labels.Refresh }}</el-menu-item> |
28 |
| - <el-menu-item index="1-2-2" @click="reset">{{ labels.ResetSettings }}</el-menu-item> |
29 |
| - <el-menu-item index="1-2-4" @click="autoArrangement">{{ labels.AutoArrangement }}</el-menu-item> |
30 |
| - <el-menu-item index="1-2-5" @click="showExInfo"> |
31 |
| - {{ labels.Info }} |
32 |
| - <i v-if="exinfo" class="el-icon-check"></i> |
33 |
| - </el-menu-item> |
34 |
| - <el-menu-item index="1-2-6" @click="showLegend"> |
35 |
| - {{ labels.Legend }} |
36 |
| - <i v-if="legend" class="el-icon-check"></i> |
37 |
| - </el-menu-item> |
38 |
| - <el-menu-item index="1-2-7" @click="clear">{{ labels.Clear }}</el-menu-item> |
39 |
| - </el-submenu> |
| 5 | + <template slot="title"> |
| 6 | + <div class="MainMenu"> |
| 7 | + <div v-html="icons.menu"></div> |
| 8 | + <div class="Title"> |
| 9 | + <label class="Label"> |
| 10 | + {{ schemeCode ?? labels.UntitledScheme }} |
| 11 | + </label> |
| 12 | + <i class="el-icon-arrow-down"></i> |
| 13 | + </div> |
| 14 | + </div> |
| 15 | + </template> |
| 16 | + <el-menu-item index="1-0" @click="showSaveAsDialog(true)"> |
| 17 | + {{ labels.SaveAs }} |
| 18 | + </el-menu-item> |
| 19 | + <el-menu-item index="1-1-1" @click="uploadXML"> |
| 20 | + {{ labels.UploadScheme }} |
| 21 | + </el-menu-item> |
| 22 | + <el-menu-item v-if="settings.showBpmnMenu" index="1-1-2" @click="uploadBPMN"> |
| 23 | + {{ labels.UploadBPMN }} |
| 24 | + </el-menu-item> |
| 25 | + <el-menu-item index="1-1-3" @click="downloadXML"> |
| 26 | + {{ labels.DownloadScheme }} |
| 27 | + </el-menu-item> |
| 28 | + <el-menu-item v-if="settings.showBpmnMenu" index="1-1-5" @click="downloadBPMN"> |
| 29 | + {{ labels.DownloadBPMN }} |
| 30 | + </el-menu-item> |
| 31 | + <el-menu-item index="1-1-4" @click="showToImageDialog(true)"> |
| 32 | + {{ labels.SaveToImage }} |
| 33 | + </el-menu-item> |
| 34 | + <el-divider></el-divider> |
| 35 | + <el-menu-item index="1-2-1" @click="refresh">{{ labels.Refresh }}</el-menu-item> |
| 36 | + <el-menu-item index="1-2-2" @click="reset">{{ labels.ResetSettings }}</el-menu-item> |
| 37 | + <el-menu-item index="1-2-4" @click="autoArrangement">{{ labels.AutoArrangement }}</el-menu-item> |
| 38 | + <el-menu-item index="1-2-5" @click="showExInfo"> |
| 39 | + {{ labels.Info }} |
| 40 | + <i v-if="exinfo" class="el-icon-check"></i> |
| 41 | + </el-menu-item> |
| 42 | + <el-menu-item index="1-2-6" @click="showLegend"> |
| 43 | + {{ labels.Legend }} |
| 44 | + <i v-if="legend" class="el-icon-check"></i> |
| 45 | + </el-menu-item> |
| 46 | + <el-menu-item index="1-4" @click="showInstanceInfo">{{ labels.InstanceInfo }}</el-menu-item> |
40 | 47 | <el-submenu index="1-3">
|
41 | 48 | <template slot="title">{{ labels.Language }}</template>
|
42 | 49 | <el-menu-item v-for="lang in languagesList" :key="lang.code" style="display: flex" @click="setLanguage(lang.code)">
|
|
45 | 52 | <i v-if="lang.code === language.code" class="el-icon-check"></i>
|
46 | 53 | </el-menu-item>
|
47 | 54 | </el-submenu>
|
48 |
| - <el-menu-item index="1-4" @click="showInstanceInfo">{{ labels.InstanceInfo }}</el-menu-item> |
49 | 55 | <el-menu-item index="1-5" @click="showAbout">{{ labels.About }}</el-menu-item>
|
| 56 | + <el-divider></el-divider> |
| 57 | + <el-menu-item index="1-2-7" @click="clear">{{ labels.Clear }}</el-menu-item> |
50 | 58 | </el-submenu>
|
51 | 59 | </el-menu>
|
| 60 | + </div> |
52 | 61 |
|
| 62 | + <div v-if="!settings.hideElementsToolbar && !settings.readonly" class="WorkflowDesignerToolbarBlock Horizontal"> |
53 | 63 | <el-tooltip :content="labels.Save" v-if="settings.showSaveButton">
|
54 | 64 | <el-button :class="getButtonClass()" @click="save()">
|
55 | 65 | <div class="WorkflowDesignerToolbarIcon Save RTLIcon"></div>
|
|
189 | 199 | <el-button @click="showAboutDialog = false">{{ labels.ButtonTextOk }}</el-button>
|
190 | 200 | </span>
|
191 | 201 | </el-dialog>
|
| 202 | + |
| 203 | + <el-dialog |
| 204 | + :before-close="() => showSaveAsDialog(false)" |
| 205 | + :title="labels.SaveAs" |
| 206 | + :visible="renameDialogVisible" |
| 207 | + width="30%" |
| 208 | + append-to-body> |
| 209 | + <el-form ref="form" |
| 210 | + label-position="top" |
| 211 | + :model="FormData" |
| 212 | + onSubmit="return false" |
| 213 | + class="WFEForm"> |
| 214 | + <el-form-item :label="labels.Name" :rules="requiredRule()" |
| 215 | + class="el-form-item" prop="SchemeName" style="flex-grow: 1;"> |
| 216 | + <el-input v-model="FormData.SchemeName" :placeholder="labels.Name"></el-input> |
| 217 | + </el-form-item> |
| 218 | + </el-form> |
| 219 | + <span slot="footer" class="dialog-footer"> |
| 220 | + <template> |
| 221 | + <el-button @click="saveRenamedScheme" type="primary">{{ labels.ButtonTextYes }}</el-button> |
| 222 | + <el-button @click="showSaveAsDialog(false)">{{ labels.ButtonTextCancel }}</el-button> |
| 223 | + </template> |
| 224 | + </span> |
| 225 | + </el-dialog> |
192 | 226 | </div>
|
193 | 227 |
|
194 | 228 | <script type="application/javascript">
|
195 | 229 | function toolbar_Init(me) {
|
196 | 230 | const data = me.VueConfig.data;
|
| 231 | + data.icons = WorkflowDesignerConstants.icons |
197 | 232 | me.VueConfig.methods.UpdateLanguage = function () {
|
198 | 233 | data.labels = {
|
199 | 234 | ...WorkflowDesignerConstants.ToolbarLabel,
|
200 | 235 | ...WorkflowDesignerConstants.Logs,
|
201 | 236 | ButtonTextOk: WorkflowDesignerConstants.ButtonTextOk,
|
| 237 | + Name: WorkflowDesignerConstants.Name, |
202 | 238 | ButtonTextYes: WorkflowDesignerConstants.ButtonTextYes,
|
203 | 239 | ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
|
204 | 240 | InformationCopiedToClipboardAndConsole: WorkflowDesignerConstants.InformationCopiedToClipboardAndConsole,
|
|
213 | 249 | const designer = me.graph.designer;
|
214 | 250 | const isProcess = !!designer.processid;
|
215 | 251 | data.toImageDialogVisible = false;
|
| 252 | + data.renameDialogVisible = false; |
216 | 253 | data.imageAspectRatio = 1;
|
| 254 | + data.FormData = {} |
217 | 255 | data.showGrid = false;
|
218 | 256 | data.legend = false;
|
219 | 257 | data.logs = false;
|
|
229 | 267 | me.VueConfig.methods.changeLogEnabled = isProcess
|
230 | 268 | ? designer.changelogenabled : me.graph.setLogEnabled;
|
231 | 269 |
|
| 270 | + const updateSchemeName = () => { |
| 271 | + data.schemeCode = designer.schemecode; |
| 272 | + data.FormData.SchemeName = data.schemeCode; |
| 273 | + } |
| 274 | + |
232 | 275 | me.VueConfig.methods.onUpdate = function () {
|
| 276 | + updateSchemeName(); |
233 | 277 | data.settings = me.graph.Settings;
|
234 | 278 | data.undoDisabled = me.graph.graphDataIndex <= 0;
|
235 | 279 | data.redoDisabled = me.graph.graphData && me.graph.graphData.length <= (me.graph.graphDataIndex + 1);
|
|
302 | 346 | data.toImageDialogVisible = visible;
|
303 | 347 | };
|
304 | 348 |
|
| 349 | + me.VueConfig.methods.showSaveAsDialog = function (visible) { |
| 350 | + if (visible) updateSchemeName(); |
| 351 | + data.renameDialogVisible = visible; |
| 352 | + }; |
| 353 | + |
305 | 354 | me.VueConfig.methods.toImage = function () {
|
306 | 355 | me.graph.toImage(data.imageAspectRatio, data.showGrid);
|
307 | 356 | me.VueConfig.methods.showToImageDialog(false);
|
308 | 357 | };
|
309 | 358 |
|
| 359 | + const isSchemeExists = (schemecode, onExists, onNotExists) => { |
| 360 | + const {processid, schemeid} = designer; |
| 361 | + const onSuccess = response => { |
| 362 | + if (response?.data) { |
| 363 | + onExists(); |
| 364 | + return; |
| 365 | + } |
| 366 | + onNotExists(); |
| 367 | + } |
| 368 | + designer.exists({schemecode, processid, schemeid}, onSuccess); |
| 369 | + } |
| 370 | + |
| 371 | + me.VueConfig.methods.saveRenamedScheme = function () { |
| 372 | + const newName = data.FormData.SchemeName; |
| 373 | + const save = () => { |
| 374 | + const {notify} = me.VueConfig.methods; |
| 375 | + me.graph.designer?.save(() => { |
| 376 | + notify(WorkflowDesignerConstants.SchemeSaved); |
| 377 | + data.schemeCode = designer.schemecode = newName; |
| 378 | + data.renameDialogVisible = false; |
| 379 | + }, undefined, newName); |
| 380 | + } |
| 381 | + const confirmToReplace = () => me.VueConfig.methods.showConfirm({ |
| 382 | + message: WorkflowDesignerConstants.ReplaceSchemeConfirm, |
| 383 | + onSuccess: save |
| 384 | + }); |
| 385 | + if (this.$refs && WorkflowDesignerCommon.validateForms(this.$refs)) { |
| 386 | + if (newName !== data.schemeCode) { |
| 387 | + isSchemeExists(newName, confirmToReplace, save); |
| 388 | + return; |
| 389 | + } |
| 390 | + save(); |
| 391 | + } |
| 392 | + }; |
| 393 | + |
310 | 394 | me.VueConfig.methods.uploadXML = function () {
|
311 | 395 | document.getElementById('uploadFile').click();
|
312 | 396 | me._uploadCallback = designer.uploadscheme;
|
|
0 commit comments