zydx-plus 1.29.144 → 1.29.145

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zydx-plus",
3
- "version": "1.29.144",
3
+ "version": "1.29.145",
4
4
  "description": "Vue.js",
5
5
  "main": "src/index.js",
6
6
  "files": [
@@ -638,7 +638,7 @@
638
638
  let that = this
639
639
  this.taskInfoList.forEach(item => {
640
640
  Object.keys(item).forEach(key=>{
641
- if(!that.keysArr.includes(key)) {
641
+ if(!that.keysArr.includes(key) || item[key] == null) {
642
642
  delete item[key];
643
643
  }
644
644
  })
@@ -647,6 +647,7 @@
647
647
  },
648
648
  dateFormat (date) {
649
649
  if (date != null) {
650
+ date = new Date(date)
650
651
  var y = date.getFullYear();
651
652
  var m = date.getMonth() + 1;
652
653
  m = m < 10 ? ('0' + m) : m;
@@ -110,14 +110,23 @@ export default {
110
110
  })
111
111
  }
112
112
  }else {
113
- v.forEach(x => {
114
- arr.push({
115
- type: (x.isRight)? 'correct' : 'interfere',
116
- letter: x.index,
117
- title: (x.isRight)? '正确选项' : '干扰选项',
118
- list: x.content.map(y => ({value: y}))
113
+ if(this.isShow) {
114
+ v.forEach(x => {
115
+ arr.push({
116
+ type: (x.isRight)? 'correct' : 'interfere',
117
+ letter: x.index,
118
+ title: (x.isRight)? '正确选项' : '干扰选项',
119
+ list: x.content.map(y => ({value: y}))
120
+ })
119
121
  })
120
- })
122
+ }else {
123
+ v.forEach(x => {
124
+ arr.push({
125
+ letter: x.index,
126
+ value: x.content[0]
127
+ })
128
+ })
129
+ }
121
130
  }
122
131
  return arr
123
132
  },
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="drag-pop" :style="position">
2
+ <div class="drag-pop" :class="{'zin': isMove}" :style="position" :id="id">
3
3
  <div class="drag-head" :style="{'background-color':titleColor}">
4
4
  <span @mousedown="mousedown"
5
5
  @mousemove="mousemove"
@@ -39,6 +39,7 @@ export default {
39
39
  isMove: false,//是否移动标识
40
40
  footIsMove: false,//是否移动标识
41
41
  direction: '',//移动方向
42
+ id: '',//id
42
43
  }
43
44
  },
44
45
  props: {
@@ -59,11 +60,23 @@ export default {
59
60
  default: true
60
61
  }
61
62
  },
63
+ watch: {
64
+ width: {
65
+ handler: function (val, oldVal) {
66
+ this.footRightOffset = val
67
+ },
68
+ immediate: true
69
+ },
70
+ height: {
71
+ handler: function (val, oldVal) {
72
+ this.footDownOffset = val
73
+ },
74
+ immediate: true
75
+ },
76
+ },
62
77
  mounted() {
63
- let clientWidth = document.documentElement.clientWidth;
64
- let clientHeight = document.documentElement.clientHeight;
65
- this.x = clientWidth / 2 - this.footDownOffset / 2;
66
- this.y = clientHeight / 2 - this.footRightOffset / 2;
78
+ this.id = Math.random().toString(36).substr(2);
79
+ this.init()
67
80
  },
68
81
  computed: {
69
82
  position() {
@@ -71,6 +84,12 @@ export default {
71
84
  },
72
85
  },
73
86
  methods: {
87
+ init() {
88
+ let clientWidth = document.documentElement.clientWidth;
89
+ let clientHeight = document.documentElement.clientHeight;
90
+ this.x = clientWidth / 2 - this.footRightOffset / 2;
91
+ this.y = clientHeight / 2 - this.footDownOffset / 2;
92
+ },
74
93
  footDown(event,v) {
75
94
  event.preventDefault()
76
95
  this.direction = v
@@ -132,11 +151,17 @@ export default {
132
151
  </script>
133
152
 
134
153
  <style scoped>
154
+ .zin{
155
+ z-index: 1000 !important;
156
+ }
135
157
  .drag-cont-slot{
136
158
  width: 100%;
137
159
  height: 100%;
138
160
  overflow: auto;
139
161
  }
162
+ .drag-cont-slot::-webkit-scrollbar {
163
+ display: none;
164
+ }
140
165
  .down-text-cont{
141
166
  display: inline-block;
142
167
  }
@@ -1,17 +1,21 @@
1
1
  <template>
2
- <div class="mind" ref="mind">
2
+ <div class="mind" :ref="id">
3
3
  <div class="table">
4
- <button :disabled="retShow" @click="ret">返回</button>
5
- <button :disabled="forwardShow" @click="forward">前进</button>
6
- <button :disabled="mindShow" @click="addNode">添加节点</button>
7
- <button :disabled="mindShow" @click="brotherNode">兄弟节点</button>
8
- <button :disabled="mindShow" @click="delNode">删除节点</button>
9
- <button :disabled="mindShow" @click="associativeLine">关联线</button>
10
- <button :disabled="mindShow" @click="nodeStyle">节点样式</button>
11
- <button @click="structure">结构切换</button>
12
- <button @click="preservation">保存</button>
4
+ <div class="table-left" v-if="!readOnly">
5
+ <button :disabled="retShow" @click="ret">返回</button>
6
+ <button :disabled="forwardShow" @click="forward">前进</button>
7
+ <button :disabled="mindShow" @click="addNode">添加节点</button>
8
+ <button :disabled="mindShow" @click="brotherNode">兄弟节点</button>
9
+ <button :disabled="mindShow" @click="delNode">删除节点</button>
10
+ <button :disabled="mindShow" @click="associativeLine">关联线</button>
11
+ <button :disabled="mindShow" @click="nodeStyle">节点样式</button>
12
+ <button @click="structure">结构切换</button>
13
+ <button @click="preservation">保存</button>
14
+ </div>
15
+ <button @click="fullTap" v-if="fullShow">全屏</button>
16
+ <button @click="fullDel" v-else>退出</button>
13
17
  </div>
14
- <div id="mindMapContainer"></div>
18
+ <div :id="id" class="mindMapContainer"></div>
15
19
  <div class="node-style" ref="nodeStyle" :class="{'node-s': trans, 'node-h': !trans}">
16
20
  <div class="style-li">
17
21
  <div class="style-title">文字</div>
@@ -27,9 +31,15 @@
27
31
  </div>
28
32
  <div class="node-but">
29
33
  <button @click="colorTap($event,'color')">颜色</button>
30
- <button :style="{'background-color': (boldAct)? '#549688': '#fff','color': (boldAct)? '#fff': '#333'}" @click="bolds">粗体</button>
31
- <button :style="{'background-color': (italicAct)? '#549688': '#fff','color': (italicAct)? '#fff': '#333'}" @click="italics">斜体</button>
32
- <button :style="{'background-color': (scribeAct)? '#549688': '#fff','color': (scribeAct)? '#fff': '#333'}" @click="scribes">划线</button>
34
+ <button :style="{'background-color': (boldAct)? '#549688': '#fff','color': (boldAct)? '#fff': '#333'}"
35
+ @click="bolds">粗体
36
+ </button>
37
+ <button :style="{'background-color': (italicAct)? '#549688': '#fff','color': (italicAct)? '#fff': '#333'}"
38
+ @click="italics">斜体
39
+ </button>
40
+ <button :style="{'background-color': (scribeAct)? '#549688': '#fff','color': (scribeAct)? '#fff': '#333'}"
41
+ @click="scribes">划线
42
+ </button>
33
43
  </div>
34
44
  </div>
35
45
  <div class="style-li">
@@ -112,10 +122,11 @@ import "simple-mind-map/dist/simpleMindMap.esm.css";
112
122
  MindMap.usePlugin(Drag).usePlugin(AssociativeLine).usePlugin(Export)
113
123
 
114
124
  export default {
115
- components: {Select,Coloring},
125
+ components: {Select, Coloring},
116
126
  name: "zydx-mind",
117
127
  data() {
118
128
  return {
129
+ id: '',
119
130
  mindMap: null,
120
131
  mindShow: false,
121
132
  retShow: false,
@@ -189,7 +200,8 @@ export default {
189
200
  "text": "根节点"
190
201
  },
191
202
  "children": []
192
- }
203
+ },
204
+ fullShow: true
193
205
  }
194
206
  },
195
207
  props: {
@@ -210,7 +222,7 @@ export default {
210
222
  watch: {
211
223
  readOnly: {
212
224
  handler: function (val, oldVal) {
213
- this.mindMap?.setMode(val? 'readonly':'edit')
225
+ this.mindMap?.setMode(val ? 'readonly' : 'edit')
214
226
  },
215
227
  immediate: true
216
228
  },
@@ -222,60 +234,99 @@ export default {
222
234
  },
223
235
  sizeValue(e) { // 字号
224
236
  this.activeNodes.forEach(node => {
225
- node.setStyle('fontSize',e)
237
+ node.setStyle('fontSize', e)
226
238
  })
227
239
  },
228
240
  rowValue(e) { // 行高
229
241
  this.activeNodes.forEach(node => {
230
- node.setStyle('lineHeight',e)
242
+ node.setStyle('lineHeight', e)
231
243
  })
232
244
  },
233
245
  styleValue(e) { // 粗斜体
234
246
  this.activeNodes.forEach(node => {
235
- node.setStyle('borderDasharray',e)
247
+ node.setStyle('borderDasharray', e)
236
248
  })
237
249
  },
238
250
  widthValue(e) { // 线宽
239
251
  this.activeNodes.forEach(node => {
240
- node.setStyle('borderWidth',e)
252
+ node.setStyle('borderWidth', e)
241
253
  })
242
254
  },
243
255
  filletValue(e) { // 圆角
244
256
  this.activeNodes.forEach(node => {
245
- node.setStyle('borderRadius',e)
257
+ node.setStyle('borderRadius', e)
246
258
  })
247
259
  },
248
260
  shapeValue(e) { // 形状
249
261
  this.activeNodes.forEach(node => {
250
- node.setStyle('shape',e)
262
+ node.setStyle('shape', e)
251
263
  })
252
264
  },
253
265
  lineValue(e) { // 线宽
254
266
  this.activeNodes.forEach(node => {
255
- node.setStyle('lineWidth',e)
267
+ node.setStyle('lineWidth', e)
256
268
  })
257
269
  },
258
270
  lineStyleValue(e) { // 线宽
259
271
  this.activeNodes.forEach(node => {
260
- node.setStyle('lineDasharray',e)
272
+ node.setStyle('lineDasharray', e)
261
273
  })
262
274
  },
263
275
  },
264
276
  mounted() {
265
- this.init()
277
+ this.id = Math.random().toString(36).substr(2)
278
+ setTimeout(() => {
279
+ this.init()
280
+ },0)
281
+ window.onresize = () => {
282
+ if (!document.fullscreenElement) {
283
+ this.fullShow = true
284
+ }
285
+ this.mindMap.resize()
286
+ }
266
287
  },
267
288
  methods: {
289
+ fullScreen(element) {
290
+ if (element.requestFullScreen) {
291
+ element.requestFullScreen()
292
+ } else if (element.webkitRequestFullScreen) {
293
+ element.webkitRequestFullScreen()
294
+ } else if (element.mozRequestFullScreen) {
295
+ element.mozRequestFullScreen()
296
+ }
297
+ },
298
+ cancelFullscreen() {
299
+ if (document.exitFullscreen) {
300
+ document.exitFullscreen();
301
+ } else if (document.msExitFullscreen) {
302
+ document.msExitFullscreen();
303
+ } else if (document.mozCancelFullScreen) {
304
+ document.mozCancelFullScreen();
305
+ } else if (document.webkitExitFullscreen) {
306
+ document.webkitExitFullscreen();
307
+ }
308
+ },
309
+ fullDel() {
310
+ this.fullShow = true
311
+ this.cancelFullscreen()
312
+ },
313
+ // 全屏
314
+ fullTap() {
315
+ this.fullShow = false
316
+ this.fullScreen(this.$refs[this.id])
317
+ },
318
+ // 初始化
268
319
  init() {
269
320
  this.mindMap = new MindMap({
270
- el: document.getElementById('mindMapContainer'),
321
+ el: document.getElementById(this.id),
271
322
  enableFreeDrag: false, // 是否开启自由拖拽
272
323
  enableNodeTransitionMove: false, // 是否开启节点过渡动画
273
324
  layout: 'logicalStructure', // 节点布局方式
274
325
  maxHistoryCount: 100, // 最大历史记录数
275
326
  maxNodeCacheCount: 100, // 最大节点缓存数
276
- data: Object.keys(this.data).length === 0? this.defaultData: this.data
327
+ data: Object.keys(this.data).length === 0 ? this.defaultData : this.data
277
328
  });
278
- this.mindMap.setMode(this.readOnly ? 'readonly':'edit')
329
+ this.mindMap.setMode(this.readOnly ? 'readonly' : 'edit')
279
330
  this.mindMap.on('node_active', (node, activeNodeList) => {
280
331
  this.mindShow = node === null;
281
332
  })
@@ -290,19 +341,19 @@ export default {
290
341
  scribes() {
291
342
  this.scribeAct = !this.scribeAct
292
343
  this.activeNodes.forEach(node => {
293
- node.setStyle('textDecoration', (!this.scribeAct)? 'none':'underline')
344
+ node.setStyle('textDecoration', (!this.scribeAct) ? 'none' : 'underline')
294
345
  })
295
346
  },
296
347
  italics() {
297
348
  this.italicAct = !this.italicAct
298
349
  this.activeNodes.forEach(node => {
299
- node.setStyle('fontStyle', (!this.italicAct)? 'normal':'italic')
350
+ node.setStyle('fontStyle', (!this.italicAct) ? 'normal' : 'italic')
300
351
  })
301
352
  },
302
353
  bolds() {
303
354
  this.boldAct = !this.boldAct
304
355
  this.activeNodes.forEach(node => {
305
- node.setStyle('fontWeight', (!this.boldAct)? 'normal':'bold')
356
+ node.setStyle('fontWeight', (!this.boldAct) ? 'normal' : 'bold')
306
357
  })
307
358
  },
308
359
  rgba(e) {
@@ -318,10 +369,10 @@ export default {
318
369
  empty() {
319
370
  this.colorShow = false
320
371
  },
321
- colorTap(e,i) {
372
+ colorTap(e, i) {
322
373
  this.colorData = {index: i, data: e}
323
374
  let parent = this.colorData.data.target.parentNode.offsetTop + 32
324
- if(parent > 330) parent = 300
375
+ if (parent > 330) parent = 300
325
376
  this.colorShow = !this.colorShow
326
377
  this.top = parent
327
378
  },
@@ -332,27 +383,17 @@ export default {
332
383
  layoutList = 'organizationStructure'
333
384
  } else if (layout === 'organizationStructure') {
334
385
  layoutList = 'logicalStructure'
335
- }else {
386
+ } else {
336
387
  layoutList = 'mindMap'
337
388
  }
338
389
  this.mindMap.setLayout(layoutList)
339
390
  },
340
- removeNode(data) {
341
- if(data._node) {
342
- delete data._node
343
- }
344
- if(data.children && data.children.length > 0) {
345
- data.children.forEach(item => {
346
- this.removeNode(item)
347
- })
348
- }
349
- return data
350
- },
391
+ // 保存
351
392
  preservation() {
352
393
  let that = this
353
- that.mindMap.export('png',false,'123213', true).then(r => {
394
+ that.mindMap.export('png', false, '123213', true).then(r => {
354
395
  that.$emit('preservation', {
355
- data: that.removeNode(that.data),
396
+ data: that.mindMap.getData(),
356
397
  url: r
357
398
  })
358
399
  })
@@ -363,7 +404,7 @@ export default {
363
404
  this.trans = !this.trans
364
405
  setTimeout(() => {
365
406
  this.$refs.mind.style.overflow = 'visible'
366
- if(!this.trans) {
407
+ if (!this.trans) {
367
408
  this.$refs.nodeStyle.style.display = 'none'
368
409
  }
369
410
  }, 250)
@@ -397,13 +438,20 @@ export default {
397
438
  </script>
398
439
 
399
440
  <style scoped>
400
- .node-s{
441
+ .table-left {
442
+ display: inline-block;
443
+ margin-right: 5px;
444
+ }
445
+
446
+ .node-s {
401
447
  animation: nodeShow 0.3s;
402
448
  display: block;
403
449
  }
404
- .node-h{
450
+
451
+ .node-h {
405
452
  animation: nodeHide 0.3s;
406
453
  }
454
+
407
455
  @keyframes nodeHide {
408
456
  0% {
409
457
  opacity: 1;
@@ -414,6 +462,7 @@ export default {
414
462
  transform: translateX(110%);
415
463
  }
416
464
  }
465
+
417
466
  @keyframes nodeShow {
418
467
  0% {
419
468
  opacity: 0;
@@ -428,23 +477,28 @@ export default {
428
477
  transform: translateX(0);
429
478
  }
430
479
  }
431
- .zIndex{
480
+
481
+ .zIndex {
432
482
  position: relative;
433
483
  z-index: 30;
434
484
  }
435
- .zIndex2{
485
+
486
+ .zIndex2 {
436
487
  position: relative;
437
488
  z-index: 33;
438
489
  }
439
- .zIndex3{
490
+
491
+ .zIndex3 {
440
492
  position: relative;
441
493
  z-index: 32;
442
494
  }
443
- .zIndex4{
495
+
496
+ .zIndex4 {
444
497
  position: relative;
445
498
  z-index: 31;
446
499
  }
447
- .backColor{
500
+
501
+ .backColor {
448
502
  width: 93px;
449
503
  height: 30px;
450
504
  border: 1px solid #ccc;
@@ -454,17 +508,20 @@ export default {
454
508
  cursor: pointer;
455
509
  background-color: #549688;
456
510
  }
457
- .back-col{
511
+
512
+ .back-col {
458
513
  position: absolute;
459
514
  top: 0;
460
515
  left: 60px;
461
516
  z-index: 40;
462
517
  }
463
- .node-but{
518
+
519
+ .node-but {
464
520
  display: flex;
465
521
  padding: 5px 0;
466
522
  }
467
- .node-but button{
523
+
524
+ .node-but button {
468
525
  flex: 1;
469
526
  margin-right: 5px;
470
527
  background-color: #fff;
@@ -474,20 +531,24 @@ export default {
474
531
  cursor: pointer;
475
532
  font-size: 12px;
476
533
  }
477
- .node-but button:last-child{
534
+
535
+ .node-but button:last-child {
478
536
  margin: 0;
479
537
  }
480
- .style-title{
538
+
539
+ .style-title {
481
540
  font-size: 16px;
482
541
  font-weight: bold;
483
542
  padding: 5px 0 10px 0;
484
543
  }
544
+
485
545
  .mind {
486
546
  width: 100%;
487
547
  height: 100%;
488
548
  position: relative;
489
549
  }
490
- .table{
550
+
551
+ .table {
491
552
  position: absolute;
492
553
  top: 10px;
493
554
  left: 30px;
@@ -497,25 +558,30 @@ export default {
497
558
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 16px 0;
498
559
  z-index: 10;
499
560
  }
500
- .style-list{
561
+
562
+ .style-list {
501
563
  display: flex;
502
564
  padding: 5px 0;
503
565
  }
504
- .node-left{
566
+
567
+ .node-left {
505
568
  display: flex;
506
569
  padding-right: 10px;
507
570
  }
508
- .node-left>span{
571
+
572
+ .node-left > span {
509
573
  display: inline-block;
510
574
  width: 80px;
511
575
  line-height: 32px;
512
576
  padding-right: 10px;
513
577
  box-sizing: border-box;
514
578
  }
515
- .padd{
579
+
580
+ .padd {
516
581
  padding-right: 0;
517
582
  }
518
- .node-style{
583
+
584
+ .node-style {
519
585
  position: absolute;
520
586
  right: 0;
521
587
  top: 50%;
@@ -530,7 +596,8 @@ export default {
530
596
  margin-top: -270px;
531
597
  display: none;
532
598
  }
533
- .table button{
599
+
600
+ .table button {
534
601
  margin-right: 5px;
535
602
  background-color: #fff;
536
603
  border: 1px solid #ccc;
@@ -539,11 +606,12 @@ export default {
539
606
  cursor: pointer;
540
607
  font-size: 12px;
541
608
  }
542
- .table button:last-child{
609
+
610
+ .table button:last-child {
543
611
  margin-right: 0;
544
612
  }
545
613
 
546
- #mindMapContainer {
614
+ .mindMapContainer {
547
615
  width: 100%;
548
616
  height: 100%;
549
617
  }
package/src/index.js CHANGED
@@ -69,7 +69,7 @@ function install(app) {
69
69
  }
70
70
 
71
71
  export default {
72
- version: '1.29.144',
72
+ version: '1.29.145',
73
73
  install,
74
74
  Calendar,
75
75
  Message,