zydx-plus 1.32.282 → 1.32.284
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 +1 -1
- package/src/components/editor2/src/editor.vue +10 -12
- package/src/components/seek/index.js +6 -0
- package/src/components/seek/src/icon.vue +92 -0
- package/src/components/seek/src/word.css +246 -0
- package/src/components/seek/src/word.vue +222 -0
- package/src/components/word/src/icon.vue +92 -0
- package/src/components/word/src/word.css +0 -22
- package/src/components/word/src/word.vue +31 -19
- package/src/index.js +6 -3
package/package.json
CHANGED
|
@@ -94,7 +94,6 @@
|
|
|
94
94
|
</template>
|
|
95
95
|
<script>
|
|
96
96
|
import Recorder from 'js-audio-recorder'
|
|
97
|
-
import zydxTextarea from '../../textarea/src/textarea'
|
|
98
97
|
import {html2json, json2html} from 'html2json'
|
|
99
98
|
import {Editor, EditorContent} from '@tiptap/vue-3'
|
|
100
99
|
import StarterKit from '@tiptap/starter-kit'
|
|
@@ -113,8 +112,7 @@ export default {
|
|
|
113
112
|
name: 'zydx-xiao-editor',
|
|
114
113
|
components: {
|
|
115
114
|
EditorContent,
|
|
116
|
-
svgs
|
|
117
|
-
zydxTextarea
|
|
115
|
+
svgs
|
|
118
116
|
},
|
|
119
117
|
data() {
|
|
120
118
|
return {
|
|
@@ -253,8 +251,8 @@ export default {
|
|
|
253
251
|
// 强制监听data变化
|
|
254
252
|
data: {
|
|
255
253
|
handler: function (e, oldVal) {
|
|
256
|
-
this.editor?.commands.setContent(json2html({node: "root", child: (e.html === undefined || e.html === null) ? [] : e.html}))
|
|
257
|
-
this.uploadAttData = (e.enclosure === undefined || e.enclosure === null) ? [] : this.enclosureAction(e.enclosure)
|
|
254
|
+
this.editor?.commands.setContent(json2html({node: "root", child: (e.html === undefined || e.html === null || e.html === 'null') ? [] : e.html}))
|
|
255
|
+
this.uploadAttData = (e.enclosure === undefined || e.enclosure === null || e.html === 'null') ? [] : this.enclosureAction(e.enclosure)
|
|
258
256
|
},
|
|
259
257
|
deep: true
|
|
260
258
|
},
|
|
@@ -269,12 +267,12 @@ export default {
|
|
|
269
267
|
},
|
|
270
268
|
mounted() {
|
|
271
269
|
let _this = this
|
|
272
|
-
this.uploadAttData = (this.data.enclosure === undefined) ? [] : this.enclosureAction(this.data.enclosure)
|
|
270
|
+
this.uploadAttData = (this.data.enclosure === undefined || this.data.enclosure === null || this.data.enclosure === 'null') ? [] : this.enclosureAction(this.data.enclosure)
|
|
273
271
|
this.heightStyle = (this.height === '100%') ? {height: '100%'} : {'min-height': this.height}
|
|
274
272
|
const height = this.height.split('px')[0] - 44
|
|
275
273
|
this.heightStyleCont = (this.height === '100%') ? {height: 'calc(100% - 44px)'} : {'min-height': `${height}px`}
|
|
276
274
|
this.editor = new Editor({
|
|
277
|
-
content: json2html({node: "root", child: (this.data.html === undefined || null) ? [] : this.data.html}),
|
|
275
|
+
content: json2html({node: "root", child: (this.data.html === undefined || this.data.html === null || this.data.html.html === 'null') ? [] : this.data.html}),
|
|
278
276
|
editable: this.readOnly,
|
|
279
277
|
enablePasteRules: true,
|
|
280
278
|
extensions: [
|
|
@@ -306,12 +304,12 @@ export default {
|
|
|
306
304
|
enclosure: this.uploadAttData
|
|
307
305
|
})
|
|
308
306
|
},
|
|
309
|
-
onBlur: (
|
|
307
|
+
onBlur: () => {
|
|
310
308
|
this.limits = false
|
|
311
309
|
this.close()
|
|
312
310
|
},
|
|
313
311
|
// 获取焦点
|
|
314
|
-
onFocus: (
|
|
312
|
+
onFocus: () => {
|
|
315
313
|
this.limits = true
|
|
316
314
|
},
|
|
317
315
|
})
|
|
@@ -341,7 +339,7 @@ export default {
|
|
|
341
339
|
this.x = event.clientX - this.left;
|
|
342
340
|
this.y = event.clientY - this.top;
|
|
343
341
|
})
|
|
344
|
-
document.addEventListener('click', (
|
|
342
|
+
document.addEventListener('click', () => {
|
|
345
343
|
if(this.limits) return
|
|
346
344
|
this.close()
|
|
347
345
|
})
|
|
@@ -430,7 +428,7 @@ export default {
|
|
|
430
428
|
this.y = this.speech.y + ((this.height === '100%') ? 40 : Number(h) - 10)
|
|
431
429
|
this.voiceShows = this.voiceStatus
|
|
432
430
|
this.appID()
|
|
433
|
-
}, (
|
|
431
|
+
}, () => {
|
|
434
432
|
this.$message({
|
|
435
433
|
type: 'text',
|
|
436
434
|
cancelShow: false,
|
|
@@ -555,7 +553,7 @@ export default {
|
|
|
555
553
|
this.$emit('see', this.uploadAttData[index])
|
|
556
554
|
},
|
|
557
555
|
uploadFile(file, data) {
|
|
558
|
-
return new Promise((rl
|
|
556
|
+
return new Promise((rl) => {
|
|
559
557
|
const meta = data.meta ? Object.keys(data.meta) : []
|
|
560
558
|
const param = new FormData()
|
|
561
559
|
param.append('file', file)
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="svg-choice" v-if="radio">
|
|
3
|
+
<div v-if="state === 'default'">
|
|
4
|
+
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="14"
|
|
5
|
+
height="14">
|
|
6
|
+
<path :fill="disabled? 'rgba(0, 0, 0, .2)': 'rgba(24, 144, 255, 1)'"
|
|
7
|
+
d="M100,200A100,100,0,1,1,200,100,100,100,0,0,1,100,200Zm0-12.5A87.5,87.5,0,1,0,12.5,100,87.51,87.51,0,0,0,100,187.5Z"/>
|
|
8
|
+
<circle v-if="select" fill="rgba(24, 144, 255, 1)" cx="98.5" cy="98.5" r="62.5"/>
|
|
9
|
+
</svg>
|
|
10
|
+
</div>
|
|
11
|
+
<div v-else>
|
|
12
|
+
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.95 174.95" width="14"
|
|
13
|
+
height="14">
|
|
14
|
+
<path :fill="state === 'correct'?'rgba(67, 207, 124, 1)': 'rgba(255, 0, 0, 1)'"
|
|
15
|
+
d="M100.91,12.49A87.48,87.48,0,1,0,188.39,100,87.48,87.48,0,0,0,100.91,12.49Z"
|
|
16
|
+
transform="translate(-13.44 -12.49)"/>
|
|
17
|
+
<path v-if="state === 'correct'" fill="rgba(255, 255, 255, 1)"
|
|
18
|
+
d="M160.36,76.87,97.93,139.3l-.07.08a12.51,12.51,0,0,1-17.68,0l-.08-.08L42.68,101.87A12.49,12.49,0,1,1,60.35,84.2L89,112.86,142.68,59.2a12.5,12.5,0,1,1,17.68,17.67Z"
|
|
19
|
+
transform="translate(-15.01 -10.54)"/>
|
|
20
|
+
<path v-else fill="rgba(255, 255, 255, 1)" d="M151.43,134.15a35.64,35.64,0,0,1,5.81,7.52q1.84,3.41-.61,7.79c-.37.55-.87,1.21-1.51,2s-1.3,1.53-2,2.26a26.89,26.89,0,0,1-2,2,13.1,13.1,0,0,1-1.71,1.3,10.89,10.89,0,0,1-8.07,1.09,16.26,16.26,0,0,1-8.34-4.65l-5.74-5.74L119.57,140l-9-9-9.85-9.84-17.5,17.5q-8.07,8.07-13.12,13.26-5.2,5.19-10.33,6.43A9.56,9.56,0,0,1,50.66,156l-1-1-1.5-1.5-1.5-1.5a5.93,5.93,0,0,1-1-1.1A8.08,8.08,0,0,1,44,147.07a8.74,8.74,0,0,1,.34-3.9,13.88,13.88,0,0,1,1.85-3.69,23.41,23.41,0,0,1,2.73-3.28q1.23-1.09,4.38-4.11l7.38-7.65q4.52-4.38,10-9.85t11.56-11.48q-6.57-6.57-12.52-12.44L59.07,80.14q-4.73-4.65-7.73-7.59l-3.69-3.62c-2.37-2.37-3.57-4.72-3.62-7.05a11.89,11.89,0,0,1,2.39-7,28.65,28.65,0,0,1,3.15-3.21,29.25,29.25,0,0,1,2.87-2.39c2.73-1.83,5.19-2.62,7.38-2.4s4.38,1.49,6.56,3.76l4.24,4.24q3.15,3.15,7.8,7.66T88.88,72.69L101,84.51q5.19-5.19,10.18-10.12t9.3-9.22q4.31-4.32,7.79-7.73t5.82-5.74a16.23,16.23,0,0,1,7.11-4.17,8.12,8.12,0,0,1,7.38,1.71,10.87,10.87,0,0,0,.89.68,18,18,0,0,1,1.5,1.23l1.44,1.3a5.46,5.46,0,0,0,1,.75c2.47,2.37,3.67,4.95,3.63,7.73a11.07,11.07,0,0,1-3.63,7.72q-2.46,2.46-6.08,6.15c-2.42,2.47-5.1,5.16-8.07,8.07s-6.08,6-9.36,9.3l-10.39,10.39q5.06,4.92,9.91,9.64c3.23,3.15,6.24,6.08,9,8.82s5.29,5.24,7.52,7.52,4.08,4.15,5.54,5.61Z"
|
|
21
|
+
transform="translate(14.88 14.81) scale(0.7)"/>
|
|
22
|
+
</svg>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div v-else class="svg-choice">
|
|
26
|
+
<div v-if="state === 'default'">
|
|
27
|
+
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175 175" width="14" height="14">
|
|
28
|
+
<path :fill="disabled? 'rgba(0, 0, 0, .2)': 'rgba(24, 144, 255, 1)'"
|
|
29
|
+
d="M172.92,12.5H27.08A14.58,14.58,0,0,0,12.5,27.08V172.92A14.58,14.58,0,0,0,27.08,187.5H172.92a14.58,14.58,0,0,0,14.58-14.58V27.08A14.58,14.58,0,0,0,172.92,12.5Zm0,160.42H27.08V27.08H172.92V172.92Z"
|
|
30
|
+
transform="translate(-12.5 -12.5)"/>
|
|
31
|
+
<path v-if="select" fill="rgba(24, 144, 255, 1)"
|
|
32
|
+
d="M45.56,38.76H154.44a6.79,6.79,0,0,1,6.8,6.8h0V154.44a6.79,6.79,0,0,1-6.8,6.8H45.56a6.8,6.8,0,0,1-6.8-6.8h0V45.56a6.8,6.8,0,0,1,6.8-6.8Z"
|
|
33
|
+
transform="translate(-12.5 -12.5)"/>
|
|
34
|
+
</svg>
|
|
35
|
+
</div>
|
|
36
|
+
<div v-else>
|
|
37
|
+
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175 175" width="19" height="19">
|
|
38
|
+
<path :fill="state === 'correct'?'rgba(67, 207, 124, 1)': 'rgba(255, 0, 0, 1)'"
|
|
39
|
+
d="M45.56,38.76H154.44a6.79,6.79,0,0,1,6.8,6.8h0V154.44a6.79,6.79,0,0,1-6.8,6.8H45.56a6.8,6.8,0,0,1-6.8-6.8h0V45.56a6.8,6.8,0,0,1,6.8-6.8Z"
|
|
40
|
+
transform="translate(-32.5 -12.5)"/>
|
|
41
|
+
<path v-if="state === 'correct'" fill="rgba(255, 255, 255, 1)"
|
|
42
|
+
d="M160.36,76.87,97.93,139.3l-.07.08a12.51,12.51,0,0,1-17.68,0l-.08-.08L42.68,101.87A12.49,12.49,0,1,1,60.35,84.2L89,112.86,142.68,59.2a12.5,12.5,0,1,1,17.68,17.67Z"
|
|
43
|
+
transform="translate(1.01 16.54) scale(0.7)"/>
|
|
44
|
+
<path v-else fill="rgba(255, 255, 255, 1)" d="M151.43,134.15a35.64,35.64,0,0,1,5.81,7.52q1.84,3.41-.61,7.79c-.37.55-.87,1.21-1.51,2s-1.3,1.53-2,2.26a26.89,26.89,0,0,1-2,2,13.1,13.1,0,0,1-1.71,1.3,10.89,10.89,0,0,1-8.07,1.09,16.26,16.26,0,0,1-8.34-4.65l-5.74-5.74L119.57,140l-9-9-9.85-9.84-17.5,17.5q-8.07,8.07-13.12,13.26-5.2,5.19-10.33,6.43A9.56,9.56,0,0,1,50.66,156l-1-1-1.5-1.5-1.5-1.5a5.93,5.93,0,0,1-1-1.1A8.08,8.08,0,0,1,44,147.07a8.74,8.74,0,0,1,.34-3.9,13.88,13.88,0,0,1,1.85-3.69,23.41,23.41,0,0,1,2.73-3.28q1.23-1.09,4.38-4.11l7.38-7.65q4.52-4.38,10-9.85t11.56-11.48q-6.57-6.57-12.52-12.44L59.07,80.14q-4.73-4.65-7.73-7.59l-3.69-3.62c-2.37-2.37-3.57-4.72-3.62-7.05a11.89,11.89,0,0,1,2.39-7,28.65,28.65,0,0,1,3.15-3.21,29.25,29.25,0,0,1,2.87-2.39c2.73-1.83,5.19-2.62,7.38-2.4s4.38,1.49,6.56,3.76l4.24,4.24q3.15,3.15,7.8,7.66T88.88,72.69L101,84.51q5.19-5.19,10.18-10.12t9.3-9.22q4.31-4.32,7.79-7.73t5.82-5.74a16.23,16.23,0,0,1,7.11-4.17,8.12,8.12,0,0,1,7.38,1.71,10.87,10.87,0,0,0,.89.68,18,18,0,0,1,1.5,1.23l1.44,1.3a5.46,5.46,0,0,0,1,.75c2.47,2.37,3.67,4.95,3.63,7.73a11.07,11.07,0,0,1-3.63,7.72q-2.46,2.46-6.08,6.15c-2.42,2.47-5.1,5.16-8.07,8.07s-6.08,6-9.36,9.3l-10.39,10.39q5.06,4.92,9.91,9.64c3.23,3.15,6.24,6.08,9,8.82s5.29,5.24,7.52,7.52,4.08,4.15,5.54,5.61Z"
|
|
45
|
+
transform="translate(6.88 24.81) scale(0.6)"/>
|
|
46
|
+
</svg>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</template>
|
|
50
|
+
|
|
51
|
+
<script>
|
|
52
|
+
export default {
|
|
53
|
+
data() {
|
|
54
|
+
return {}
|
|
55
|
+
},
|
|
56
|
+
props: {
|
|
57
|
+
radio: { // 单选
|
|
58
|
+
type: Boolean,
|
|
59
|
+
default: false
|
|
60
|
+
},
|
|
61
|
+
select: { // 选中
|
|
62
|
+
type: Boolean,
|
|
63
|
+
default: false
|
|
64
|
+
},
|
|
65
|
+
state: { // 状态
|
|
66
|
+
type: String,
|
|
67
|
+
default: 'default'
|
|
68
|
+
},
|
|
69
|
+
disabled: { // 禁用
|
|
70
|
+
type: Boolean,
|
|
71
|
+
default: false
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
watch: {
|
|
75
|
+
select: {
|
|
76
|
+
handler(val) {
|
|
77
|
+
console.log(val)
|
|
78
|
+
},
|
|
79
|
+
deep: true
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
</script>
|
|
84
|
+
|
|
85
|
+
<style scoped>
|
|
86
|
+
.svg-choice {
|
|
87
|
+
position: absolute;
|
|
88
|
+
top: 2px;
|
|
89
|
+
left: 0;
|
|
90
|
+
z-index: 1;
|
|
91
|
+
}
|
|
92
|
+
</style>
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
.paper{
|
|
2
|
+
background: #fff;
|
|
3
|
+
padding: 40px;
|
|
4
|
+
border: 1px solid #ccc;
|
|
5
|
+
width: 793px;
|
|
6
|
+
margin: 0 auto;
|
|
7
|
+
}
|
|
8
|
+
.parer-name{
|
|
9
|
+
text-align: right;
|
|
10
|
+
}
|
|
11
|
+
.parer-name-list{
|
|
12
|
+
height: 25px;
|
|
13
|
+
line-height: 25px;
|
|
14
|
+
font-size: 12px;
|
|
15
|
+
}
|
|
16
|
+
.choice:after {
|
|
17
|
+
content: "";
|
|
18
|
+
clear: left;
|
|
19
|
+
display: block;
|
|
20
|
+
}
|
|
21
|
+
.text{
|
|
22
|
+
letter-spacing: 25px;
|
|
23
|
+
margin-right: -25px;
|
|
24
|
+
}
|
|
25
|
+
.parer-name-list span{
|
|
26
|
+
line-height: 25px;
|
|
27
|
+
display: inline-block;
|
|
28
|
+
}
|
|
29
|
+
.parer-name-list em{
|
|
30
|
+
display: inline-block;
|
|
31
|
+
min-width: 100px;
|
|
32
|
+
border-bottom: 1px solid #000;
|
|
33
|
+
height: 25px;
|
|
34
|
+
line-height: 25px;
|
|
35
|
+
text-align: left;
|
|
36
|
+
margin-left: 10px;
|
|
37
|
+
font-style: normal;
|
|
38
|
+
}
|
|
39
|
+
.parer-title{
|
|
40
|
+
padding: 30px 0;
|
|
41
|
+
text-align: center;
|
|
42
|
+
}
|
|
43
|
+
.parer-title span{
|
|
44
|
+
font-size: 14px;
|
|
45
|
+
}
|
|
46
|
+
.parer-title p{
|
|
47
|
+
font-size: 20px;
|
|
48
|
+
margin-top: 5px;
|
|
49
|
+
}
|
|
50
|
+
.parer-cont>p{
|
|
51
|
+
font-size: 12px;
|
|
52
|
+
line-height: 18px;
|
|
53
|
+
font-weight: bold;
|
|
54
|
+
}
|
|
55
|
+
.parer-cont>p>span{
|
|
56
|
+
font-weight: normal;
|
|
57
|
+
}
|
|
58
|
+
.parer-table{
|
|
59
|
+
width: 100%;
|
|
60
|
+
margin: 5px 0;
|
|
61
|
+
}
|
|
62
|
+
.parer-table>table{
|
|
63
|
+
width: 100%;
|
|
64
|
+
border-left: 1px solid #ccc;
|
|
65
|
+
border-top: 1px solid #ccc;
|
|
66
|
+
}
|
|
67
|
+
.parer-table>table th,.parer-table>table td{
|
|
68
|
+
line-height: 30px;
|
|
69
|
+
font-weight: normal;
|
|
70
|
+
text-align: center;
|
|
71
|
+
border-bottom: 1px solid #ccc;
|
|
72
|
+
border-right: 1px solid #ccc;
|
|
73
|
+
font-size: 14px;
|
|
74
|
+
}
|
|
75
|
+
.choice-title{
|
|
76
|
+
font-size: 16px;
|
|
77
|
+
font-weight: 700;
|
|
78
|
+
line-height: 23px;
|
|
79
|
+
}
|
|
80
|
+
.subject{
|
|
81
|
+
font-size: 14px;
|
|
82
|
+
line-height: 25px;
|
|
83
|
+
display: flex;
|
|
84
|
+
align-items: center;
|
|
85
|
+
}
|
|
86
|
+
.subject-title{
|
|
87
|
+
flex: 1;
|
|
88
|
+
position: relative;
|
|
89
|
+
line-height: 24px;
|
|
90
|
+
}
|
|
91
|
+
.subject-title label{
|
|
92
|
+
display: inline-block;
|
|
93
|
+
}
|
|
94
|
+
.subject-title label input{
|
|
95
|
+
position: absolute;
|
|
96
|
+
top: 5px;
|
|
97
|
+
left: 0;
|
|
98
|
+
z-index: 1;
|
|
99
|
+
}
|
|
100
|
+
.subject span{
|
|
101
|
+
text-align: justify;
|
|
102
|
+
padding-left: 2em;
|
|
103
|
+
}
|
|
104
|
+
.subject span em{
|
|
105
|
+
font-style: normal;
|
|
106
|
+
padding-left: 5px;
|
|
107
|
+
}
|
|
108
|
+
.choice-box{
|
|
109
|
+
text-indent: 2em;
|
|
110
|
+
line-height: 24px;
|
|
111
|
+
font-size: 14px;
|
|
112
|
+
position: relative;
|
|
113
|
+
}
|
|
114
|
+
.choice-input{
|
|
115
|
+
position: absolute;
|
|
116
|
+
top: 7px;
|
|
117
|
+
left: 2em;
|
|
118
|
+
z-index: 1;
|
|
119
|
+
}
|
|
120
|
+
.choice-span{
|
|
121
|
+
padding-left: 20px;
|
|
122
|
+
}
|
|
123
|
+
.choice-color{
|
|
124
|
+
color: #00ff00;
|
|
125
|
+
}
|
|
126
|
+
.paper-textarea{
|
|
127
|
+
width: calc(100% - 2em);
|
|
128
|
+
height: 85px;
|
|
129
|
+
margin-left: 2em;
|
|
130
|
+
resize: none;
|
|
131
|
+
padding: 10px;
|
|
132
|
+
box-sizing: border-box;
|
|
133
|
+
font-size: 14px;
|
|
134
|
+
}
|
|
135
|
+
.array-ch .choice-box{
|
|
136
|
+
float: left;
|
|
137
|
+
width: 50%;
|
|
138
|
+
}
|
|
139
|
+
.but{
|
|
140
|
+
margin-left: 5px;
|
|
141
|
+
font-size: 12px;
|
|
142
|
+
background-color: transparent;
|
|
143
|
+
border: 1px solid #000;
|
|
144
|
+
border-radius: 3px;
|
|
145
|
+
padding: 2px 5px;
|
|
146
|
+
cursor: pointer;
|
|
147
|
+
min-width: 60px;
|
|
148
|
+
height: 21px;
|
|
149
|
+
}
|
|
150
|
+
.buts-actives{
|
|
151
|
+
color: #00ff00 !important;
|
|
152
|
+
}
|
|
153
|
+
input[name='check'] {
|
|
154
|
+
width: 15px;
|
|
155
|
+
height: 15px;
|
|
156
|
+
position: absolute;
|
|
157
|
+
top: 5px;
|
|
158
|
+
left: 0;
|
|
159
|
+
}
|
|
160
|
+
.subject-but{
|
|
161
|
+
position: relative;
|
|
162
|
+
}
|
|
163
|
+
.subject-but b{
|
|
164
|
+
position: absolute;
|
|
165
|
+
z-index: 1;
|
|
166
|
+
display: flex;
|
|
167
|
+
}
|
|
168
|
+
.subject-html-title{
|
|
169
|
+
text-indent: 2em;
|
|
170
|
+
font-weight: bold;
|
|
171
|
+
font-size: 14px;
|
|
172
|
+
line-height: 24px;
|
|
173
|
+
}
|
|
174
|
+
.subject-html-cont{
|
|
175
|
+
text-align: justify;
|
|
176
|
+
line-height: 24px;
|
|
177
|
+
text-indent: 2em;
|
|
178
|
+
}
|
|
179
|
+
.table{
|
|
180
|
+
width: 100%;
|
|
181
|
+
margin: 5px 0;
|
|
182
|
+
}
|
|
183
|
+
.table table{
|
|
184
|
+
width: 100%;
|
|
185
|
+
border-left: 1px solid #ccc;
|
|
186
|
+
border-top: 1px solid #ccc;
|
|
187
|
+
}
|
|
188
|
+
.table table td{
|
|
189
|
+
line-height: 30px;
|
|
190
|
+
font-weight: normal;
|
|
191
|
+
text-align: center;
|
|
192
|
+
border-bottom: 1px solid #ccc;
|
|
193
|
+
border-right: 1px solid #ccc;
|
|
194
|
+
font-size: 14px;
|
|
195
|
+
}
|
|
196
|
+
.table table td:first-child{
|
|
197
|
+
width: 110px;
|
|
198
|
+
}
|
|
199
|
+
.tab-title{
|
|
200
|
+
font-weight: 700 !important;
|
|
201
|
+
}
|
|
202
|
+
.reasoning{
|
|
203
|
+
font-size: 16px;
|
|
204
|
+
font-weight: 700;
|
|
205
|
+
text-indent: 1.7em;
|
|
206
|
+
display: inline-block;
|
|
207
|
+
padding-bottom: 8px;
|
|
208
|
+
}
|
|
209
|
+
.subject-student-edi{
|
|
210
|
+
text-indent: 2em;
|
|
211
|
+
padding: 2px 0;
|
|
212
|
+
}
|
|
213
|
+
.review{
|
|
214
|
+
padding-left: 2em;
|
|
215
|
+
box-sizing: border-box;
|
|
216
|
+
}
|
|
217
|
+
.review-title{
|
|
218
|
+
padding: 6px 0 4px 0;
|
|
219
|
+
display: flex;
|
|
220
|
+
justify-content: center;
|
|
221
|
+
}
|
|
222
|
+
.review-title span{
|
|
223
|
+
flex: 1;
|
|
224
|
+
font-size: 16px;
|
|
225
|
+
font-weight: 700;
|
|
226
|
+
}
|
|
227
|
+
.table td>input{
|
|
228
|
+
width: 80px;
|
|
229
|
+
border: 0;
|
|
230
|
+
text-align: center;
|
|
231
|
+
}
|
|
232
|
+
.choice-red{
|
|
233
|
+
color: red;
|
|
234
|
+
}
|
|
235
|
+
.task {
|
|
236
|
+
display: flex;
|
|
237
|
+
justify-content: center;
|
|
238
|
+
}
|
|
239
|
+
.task>span{
|
|
240
|
+
font-size: 16px;
|
|
241
|
+
font-weight: 700;
|
|
242
|
+
flex: 1;
|
|
243
|
+
}
|
|
244
|
+
.padd{
|
|
245
|
+
padding-bottom: 24px;
|
|
246
|
+
}
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="{paper: borderShow}">
|
|
3
|
+
<div class="parer-cont" ref="parer">
|
|
4
|
+
<div class="paper-choice" :class="{'array-ch': !styleText(item.testKey)}" v-for="(item,index) in value">
|
|
5
|
+
<div class="subject">
|
|
6
|
+
<div class="subject-title" :class="{'padd': item.top !== 0}" v-if="item.subject">
|
|
7
|
+
<input v-if="multipleShow" type="checkbox" :checked="item.checked" @change="checkboxChange($event,index)"
|
|
8
|
+
name="check"/>
|
|
9
|
+
<span>{{ item.order ? item.order : index + 1 }}{{ item.order === ' ' ? '' : '.' }}<em
|
|
10
|
+
v-html="item.title"></em><em v-if="scoreShow">({{ item.score }}分)</em>
|
|
11
|
+
<i class="subject-but" ref="subject">
|
|
12
|
+
<b :style="{right: -item.right + 'px', top: item.top + 'px'}" ref="b">
|
|
13
|
+
<button class="but" v-for="(it) in item.customBut" :class="{'buts-actives': it.active}" @click="customButTap(it,item)">{{ it.active? it.nameActive: it.name }}</button>
|
|
14
|
+
</b>
|
|
15
|
+
</i>
|
|
16
|
+
</span>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div v-if="item.alist" class="subject-html" v-show="item.open">
|
|
20
|
+
<div v-for="(it,ind) in item.alist">
|
|
21
|
+
<div v-if="it.annexType === '0'">
|
|
22
|
+
<div class="subject-html-title">{{ titleText }}{{ ind + 1 }}</div>
|
|
23
|
+
<div class="subject-html-cont" v-html="it.annexContent"></div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="choice" v-if="item.testKey" v-show="item.open">
|
|
28
|
+
<div class="choice-box" v-for="(ts,ind) in item.testKey">
|
|
29
|
+
<label>
|
|
30
|
+
<input class="choice-input" style="display: none;" :disabled="disabled" :checked="ts.checked"
|
|
31
|
+
@change="answerChange($event,item,`${id}${index}`,ts)" :type="ques(item.quesType)? 'radio': 'checkbox'"
|
|
32
|
+
:name="`${id}${index}`"/>
|
|
33
|
+
<svgs v-if="chooseAnswer" :radio="ques(item.quesType)" :select="ts.checked" :disabled="disabled" :state="stateFun(ts,item)"></svgs>
|
|
34
|
+
<span :class="{'choice-span': chooseAnswer}">{{
|
|
35
|
+
ts.index
|
|
36
|
+
}}. {{ ts.content[0] }}</span>
|
|
37
|
+
</label>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
<slot name="content" :row="item"></slot>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</template>
|
|
45
|
+
|
|
46
|
+
<script>
|
|
47
|
+
import {html2json, json2html} from 'html2json'
|
|
48
|
+
import svgs from './icon.vue'
|
|
49
|
+
|
|
50
|
+
export default {
|
|
51
|
+
name: "zydx-seek2",
|
|
52
|
+
components: {svgs},
|
|
53
|
+
data() {
|
|
54
|
+
return {
|
|
55
|
+
value: [],
|
|
56
|
+
multipleShow: false,
|
|
57
|
+
id: null
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
props: {
|
|
61
|
+
data: {
|
|
62
|
+
type: Array,
|
|
63
|
+
default: []
|
|
64
|
+
},
|
|
65
|
+
disabled: {
|
|
66
|
+
type: Boolean,
|
|
67
|
+
default: false
|
|
68
|
+
},
|
|
69
|
+
multiple: {
|
|
70
|
+
type: Boolean,
|
|
71
|
+
default: false
|
|
72
|
+
},
|
|
73
|
+
borderShow: {
|
|
74
|
+
type: Boolean,
|
|
75
|
+
default: true
|
|
76
|
+
},
|
|
77
|
+
titleText: {
|
|
78
|
+
type: String,
|
|
79
|
+
default: '材料'
|
|
80
|
+
},
|
|
81
|
+
chooseAnswer: {
|
|
82
|
+
type: Boolean,
|
|
83
|
+
default: true
|
|
84
|
+
},
|
|
85
|
+
scoreShow: {
|
|
86
|
+
type: Boolean,
|
|
87
|
+
default: false
|
|
88
|
+
},
|
|
89
|
+
},
|
|
90
|
+
watch: {
|
|
91
|
+
data: {
|
|
92
|
+
handler: function (val, oldVal) {
|
|
93
|
+
this.init()
|
|
94
|
+
},
|
|
95
|
+
immediate: true,
|
|
96
|
+
deep: true,
|
|
97
|
+
},
|
|
98
|
+
multiple: {
|
|
99
|
+
handler: function (val, oldVal) {
|
|
100
|
+
this.multipleShow = val
|
|
101
|
+
},
|
|
102
|
+
immediate: true,
|
|
103
|
+
deep: true
|
|
104
|
+
},
|
|
105
|
+
replace: {
|
|
106
|
+
handler: function (val, oldVal) {
|
|
107
|
+
this.replaceShow = val
|
|
108
|
+
},
|
|
109
|
+
deep: true
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
mounted() {
|
|
113
|
+
this.id = this.randomId()
|
|
114
|
+
},
|
|
115
|
+
emits: ['change', 'butChange', 'changeAll', 'judgeAnswer'],
|
|
116
|
+
methods: {
|
|
117
|
+
stateFun(ts,item) {
|
|
118
|
+
if(this.disabled&&ts.checked&&!item.error&&!this.nothing) return 'correct'
|
|
119
|
+
if(this.disabled&&ts.checked&&item.error&&!this.nothing) return 'error'
|
|
120
|
+
return 'default'
|
|
121
|
+
},
|
|
122
|
+
customButTap(e,d) {
|
|
123
|
+
if(e.key === 'option') d.open = !d.open
|
|
124
|
+
if(e.butStart) e.active = !e.active
|
|
125
|
+
this.$emit('butChange',d)
|
|
126
|
+
},
|
|
127
|
+
init() {
|
|
128
|
+
const val = JSON.parse(JSON.stringify(this.data))
|
|
129
|
+
this.value = val.map((item, index) => { // 转换html
|
|
130
|
+
item.choice = true
|
|
131
|
+
item.right = 0
|
|
132
|
+
item.top = 0
|
|
133
|
+
item.open = item.open !== undefined ? item.open : true
|
|
134
|
+
item.error = item.error !== undefined ? item.error : false
|
|
135
|
+
item.subject = item.subject !== undefined ? item.subject : true
|
|
136
|
+
if (item.alist) {
|
|
137
|
+
item.alist.map(x => {
|
|
138
|
+
x.annexContent = json2html({node: "root", child: JSON.parse(x.annexContent)})
|
|
139
|
+
return x
|
|
140
|
+
})
|
|
141
|
+
}
|
|
142
|
+
if (item.testKey) {
|
|
143
|
+
item.testKey = typeof item.testKey === 'string' ? JSON.parse(item.testKey) : item.testKey
|
|
144
|
+
let judge = item?.judgeAnswer
|
|
145
|
+
if (item.stuAnswer) judge = item.stuAnswer?.answer
|
|
146
|
+
item.testKey = item.testKey.map(x => {
|
|
147
|
+
if (this.ques(item.quesType)) { // 判断是否单选
|
|
148
|
+
x.checked = x.index === judge; //答案
|
|
149
|
+
} else {
|
|
150
|
+
for (let i = 0; i < judge?.length; i++) {
|
|
151
|
+
if (x.index === judge[i]) {
|
|
152
|
+
x.checked = true
|
|
153
|
+
break
|
|
154
|
+
} else {
|
|
155
|
+
x.checked = false
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
return x
|
|
160
|
+
})
|
|
161
|
+
}
|
|
162
|
+
return item
|
|
163
|
+
})
|
|
164
|
+
this.$nextTick(() => { // 保证所有的数据都渲染完毕
|
|
165
|
+
const w = this.$refs.parer.offsetWidth // 获取父级宽度
|
|
166
|
+
for (let i = 0; i < this.$refs?.subject?.length; i++) {
|
|
167
|
+
this.value[i].right = w - this.$refs.subject[i].offsetLeft
|
|
168
|
+
if (this.$refs.b && this.$refs.b.length > 0) {
|
|
169
|
+
if (this.value[i].right < this.$refs.b[i].offsetWidth) this.value[i].top = 25 // 判断是否换行
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
})
|
|
173
|
+
},
|
|
174
|
+
randomId() { // 生成随机id
|
|
175
|
+
const id = Math.random().toString(36).substr(2)
|
|
176
|
+
return id.replace(/[0-9]/g, '')
|
|
177
|
+
},
|
|
178
|
+
answerChange(e, v, id, check) {
|
|
179
|
+
if(this.ques(v.quesType)) {
|
|
180
|
+
v.testKey.map(x => {
|
|
181
|
+
x.checked = false
|
|
182
|
+
return x
|
|
183
|
+
})
|
|
184
|
+
}
|
|
185
|
+
check.checked = e.target.checked
|
|
186
|
+
let answerArr = []
|
|
187
|
+
const ids = document.getElementsByName(id)
|
|
188
|
+
ids.forEach((x, index) => {
|
|
189
|
+
if (x.checked) {
|
|
190
|
+
answerArr.push(v.testKey[index].index)
|
|
191
|
+
}
|
|
192
|
+
})
|
|
193
|
+
this.$emit('judgeAnswer', {
|
|
194
|
+
...v,
|
|
195
|
+
judgeAnswer: this.ques(v.quesType) ? answerArr[0] : answerArr
|
|
196
|
+
})
|
|
197
|
+
},
|
|
198
|
+
checkboxChange(e, index) {
|
|
199
|
+
this.value[index].checked = e.target.checked
|
|
200
|
+
this.$emit('change', {
|
|
201
|
+
data: this.value[index],
|
|
202
|
+
value: e.target.checked
|
|
203
|
+
})
|
|
204
|
+
this.$emit('changeAll', this.value)
|
|
205
|
+
},
|
|
206
|
+
ques(v) {
|
|
207
|
+
return v.indexOf('101') > -1
|
|
208
|
+
},
|
|
209
|
+
styleText(v) {
|
|
210
|
+
if (!v || v === 'null') return
|
|
211
|
+
for (let i = 0; i < v.length; i++) {
|
|
212
|
+
if (v[i].content[0].length > 10) {
|
|
213
|
+
return true
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
return false
|
|
217
|
+
},
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
</script>
|
|
221
|
+
|
|
222
|
+
<style scoped src="./word.css"></style>
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="svg-choice" v-if="radio">
|
|
3
|
+
<div v-if="state === 'default'">
|
|
4
|
+
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="14"
|
|
5
|
+
height="14">
|
|
6
|
+
<path :fill="disabled? 'rgba(0, 0, 0, .2)': 'rgba(24, 144, 255, 1)'"
|
|
7
|
+
d="M100,200A100,100,0,1,1,200,100,100,100,0,0,1,100,200Zm0-12.5A87.5,87.5,0,1,0,12.5,100,87.51,87.51,0,0,0,100,187.5Z"/>
|
|
8
|
+
<circle v-if="select" fill="rgba(24, 144, 255, 1)" cx="98.5" cy="98.5" r="62.5"/>
|
|
9
|
+
</svg>
|
|
10
|
+
</div>
|
|
11
|
+
<div v-else>
|
|
12
|
+
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.95 174.95" width="14"
|
|
13
|
+
height="14">
|
|
14
|
+
<path :fill="state === 'correct'?'rgba(67, 207, 124, 1)': 'rgba(255, 0, 0, 1)'"
|
|
15
|
+
d="M100.91,12.49A87.48,87.48,0,1,0,188.39,100,87.48,87.48,0,0,0,100.91,12.49Z"
|
|
16
|
+
transform="translate(-13.44 -12.49)"/>
|
|
17
|
+
<path v-if="state === 'correct'" fill="rgba(255, 255, 255, 1)"
|
|
18
|
+
d="M160.36,76.87,97.93,139.3l-.07.08a12.51,12.51,0,0,1-17.68,0l-.08-.08L42.68,101.87A12.49,12.49,0,1,1,60.35,84.2L89,112.86,142.68,59.2a12.5,12.5,0,1,1,17.68,17.67Z"
|
|
19
|
+
transform="translate(-15.01 -10.54)"/>
|
|
20
|
+
<path v-else fill="rgba(255, 255, 255, 1)" d="M151.43,134.15a35.64,35.64,0,0,1,5.81,7.52q1.84,3.41-.61,7.79c-.37.55-.87,1.21-1.51,2s-1.3,1.53-2,2.26a26.89,26.89,0,0,1-2,2,13.1,13.1,0,0,1-1.71,1.3,10.89,10.89,0,0,1-8.07,1.09,16.26,16.26,0,0,1-8.34-4.65l-5.74-5.74L119.57,140l-9-9-9.85-9.84-17.5,17.5q-8.07,8.07-13.12,13.26-5.2,5.19-10.33,6.43A9.56,9.56,0,0,1,50.66,156l-1-1-1.5-1.5-1.5-1.5a5.93,5.93,0,0,1-1-1.1A8.08,8.08,0,0,1,44,147.07a8.74,8.74,0,0,1,.34-3.9,13.88,13.88,0,0,1,1.85-3.69,23.41,23.41,0,0,1,2.73-3.28q1.23-1.09,4.38-4.11l7.38-7.65q4.52-4.38,10-9.85t11.56-11.48q-6.57-6.57-12.52-12.44L59.07,80.14q-4.73-4.65-7.73-7.59l-3.69-3.62c-2.37-2.37-3.57-4.72-3.62-7.05a11.89,11.89,0,0,1,2.39-7,28.65,28.65,0,0,1,3.15-3.21,29.25,29.25,0,0,1,2.87-2.39c2.73-1.83,5.19-2.62,7.38-2.4s4.38,1.49,6.56,3.76l4.24,4.24q3.15,3.15,7.8,7.66T88.88,72.69L101,84.51q5.19-5.19,10.18-10.12t9.3-9.22q4.31-4.32,7.79-7.73t5.82-5.74a16.23,16.23,0,0,1,7.11-4.17,8.12,8.12,0,0,1,7.38,1.71,10.87,10.87,0,0,0,.89.68,18,18,0,0,1,1.5,1.23l1.44,1.3a5.46,5.46,0,0,0,1,.75c2.47,2.37,3.67,4.95,3.63,7.73a11.07,11.07,0,0,1-3.63,7.72q-2.46,2.46-6.08,6.15c-2.42,2.47-5.1,5.16-8.07,8.07s-6.08,6-9.36,9.3l-10.39,10.39q5.06,4.92,9.91,9.64c3.23,3.15,6.24,6.08,9,8.82s5.29,5.24,7.52,7.52,4.08,4.15,5.54,5.61Z"
|
|
21
|
+
transform="translate(14.88 14.81) scale(0.7)"/>
|
|
22
|
+
</svg>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div v-else class="svg-choice">
|
|
26
|
+
<div v-if="state === 'default'">
|
|
27
|
+
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175 175" width="14" height="14">
|
|
28
|
+
<path :fill="disabled? 'rgba(0, 0, 0, .2)': 'rgba(24, 144, 255, 1)'"
|
|
29
|
+
d="M172.92,12.5H27.08A14.58,14.58,0,0,0,12.5,27.08V172.92A14.58,14.58,0,0,0,27.08,187.5H172.92a14.58,14.58,0,0,0,14.58-14.58V27.08A14.58,14.58,0,0,0,172.92,12.5Zm0,160.42H27.08V27.08H172.92V172.92Z"
|
|
30
|
+
transform="translate(-12.5 -12.5)"/>
|
|
31
|
+
<path v-if="select" fill="rgba(24, 144, 255, 1)"
|
|
32
|
+
d="M45.56,38.76H154.44a6.79,6.79,0,0,1,6.8,6.8h0V154.44a6.79,6.79,0,0,1-6.8,6.8H45.56a6.8,6.8,0,0,1-6.8-6.8h0V45.56a6.8,6.8,0,0,1,6.8-6.8Z"
|
|
33
|
+
transform="translate(-12.5 -12.5)"/>
|
|
34
|
+
</svg>
|
|
35
|
+
</div>
|
|
36
|
+
<div v-else>
|
|
37
|
+
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175 175" width="19" height="19">
|
|
38
|
+
<path :fill="state === 'correct'?'rgba(67, 207, 124, 1)': 'rgba(255, 0, 0, 1)'"
|
|
39
|
+
d="M45.56,38.76H154.44a6.79,6.79,0,0,1,6.8,6.8h0V154.44a6.79,6.79,0,0,1-6.8,6.8H45.56a6.8,6.8,0,0,1-6.8-6.8h0V45.56a6.8,6.8,0,0,1,6.8-6.8Z"
|
|
40
|
+
transform="translate(-32.5 -12.5)"/>
|
|
41
|
+
<path v-if="state === 'correct'" fill="rgba(255, 255, 255, 1)"
|
|
42
|
+
d="M160.36,76.87,97.93,139.3l-.07.08a12.51,12.51,0,0,1-17.68,0l-.08-.08L42.68,101.87A12.49,12.49,0,1,1,60.35,84.2L89,112.86,142.68,59.2a12.5,12.5,0,1,1,17.68,17.67Z"
|
|
43
|
+
transform="translate(1.01 16.54) scale(0.7)"/>
|
|
44
|
+
<path v-else fill="rgba(255, 255, 255, 1)" d="M151.43,134.15a35.64,35.64,0,0,1,5.81,7.52q1.84,3.41-.61,7.79c-.37.55-.87,1.21-1.51,2s-1.3,1.53-2,2.26a26.89,26.89,0,0,1-2,2,13.1,13.1,0,0,1-1.71,1.3,10.89,10.89,0,0,1-8.07,1.09,16.26,16.26,0,0,1-8.34-4.65l-5.74-5.74L119.57,140l-9-9-9.85-9.84-17.5,17.5q-8.07,8.07-13.12,13.26-5.2,5.19-10.33,6.43A9.56,9.56,0,0,1,50.66,156l-1-1-1.5-1.5-1.5-1.5a5.93,5.93,0,0,1-1-1.1A8.08,8.08,0,0,1,44,147.07a8.74,8.74,0,0,1,.34-3.9,13.88,13.88,0,0,1,1.85-3.69,23.41,23.41,0,0,1,2.73-3.28q1.23-1.09,4.38-4.11l7.38-7.65q4.52-4.38,10-9.85t11.56-11.48q-6.57-6.57-12.52-12.44L59.07,80.14q-4.73-4.65-7.73-7.59l-3.69-3.62c-2.37-2.37-3.57-4.72-3.62-7.05a11.89,11.89,0,0,1,2.39-7,28.65,28.65,0,0,1,3.15-3.21,29.25,29.25,0,0,1,2.87-2.39c2.73-1.83,5.19-2.62,7.38-2.4s4.38,1.49,6.56,3.76l4.24,4.24q3.15,3.15,7.8,7.66T88.88,72.69L101,84.51q5.19-5.19,10.18-10.12t9.3-9.22q4.31-4.32,7.79-7.73t5.82-5.74a16.23,16.23,0,0,1,7.11-4.17,8.12,8.12,0,0,1,7.38,1.71,10.87,10.87,0,0,0,.89.68,18,18,0,0,1,1.5,1.23l1.44,1.3a5.46,5.46,0,0,0,1,.75c2.47,2.37,3.67,4.95,3.63,7.73a11.07,11.07,0,0,1-3.63,7.72q-2.46,2.46-6.08,6.15c-2.42,2.47-5.1,5.16-8.07,8.07s-6.08,6-9.36,9.3l-10.39,10.39q5.06,4.92,9.91,9.64c3.23,3.15,6.24,6.08,9,8.82s5.29,5.24,7.52,7.52,4.08,4.15,5.54,5.61Z"
|
|
45
|
+
transform="translate(6.88 24.81) scale(0.6)"/>
|
|
46
|
+
</svg>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</template>
|
|
50
|
+
|
|
51
|
+
<script>
|
|
52
|
+
export default {
|
|
53
|
+
data() {
|
|
54
|
+
return {}
|
|
55
|
+
},
|
|
56
|
+
props: {
|
|
57
|
+
radio: { // 单选
|
|
58
|
+
type: Boolean,
|
|
59
|
+
default: false
|
|
60
|
+
},
|
|
61
|
+
select: { // 选中
|
|
62
|
+
type: Boolean,
|
|
63
|
+
default: false
|
|
64
|
+
},
|
|
65
|
+
state: { // 状态
|
|
66
|
+
type: String,
|
|
67
|
+
default: 'default'
|
|
68
|
+
},
|
|
69
|
+
disabled: { // 禁用
|
|
70
|
+
type: Boolean,
|
|
71
|
+
default: false
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
watch: {
|
|
75
|
+
select: {
|
|
76
|
+
handler(val) {
|
|
77
|
+
console.log(val)
|
|
78
|
+
},
|
|
79
|
+
deep: true
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
</script>
|
|
84
|
+
|
|
85
|
+
<style scoped>
|
|
86
|
+
.svg-choice {
|
|
87
|
+
position: absolute;
|
|
88
|
+
top: 2px;
|
|
89
|
+
left: 0;
|
|
90
|
+
z-index: 1;
|
|
91
|
+
}
|
|
92
|
+
</style>
|
|
@@ -241,25 +241,3 @@ input[name='check'] {
|
|
|
241
241
|
font-weight: 700;
|
|
242
242
|
flex: 1;
|
|
243
243
|
}
|
|
244
|
-
.choice-ico{
|
|
245
|
-
width: 15px;
|
|
246
|
-
height: 15px;
|
|
247
|
-
display: inline-block;
|
|
248
|
-
border: 1px solid #666;
|
|
249
|
-
border-radius: 3px;
|
|
250
|
-
position: absolute;
|
|
251
|
-
top: 4px;
|
|
252
|
-
left: 2em;
|
|
253
|
-
z-index: 1;
|
|
254
|
-
}
|
|
255
|
-
.check-active{
|
|
256
|
-
background-color: #007acc;
|
|
257
|
-
border: 1px solid #007acc;
|
|
258
|
-
}
|
|
259
|
-
.check-dis{
|
|
260
|
-
background-color: #d0d0d0;
|
|
261
|
-
border: 1px solid #d0d0d0;
|
|
262
|
-
}
|
|
263
|
-
.check-dis-bor{
|
|
264
|
-
border: 1px solid #d0d0d0;
|
|
265
|
-
}
|
|
@@ -71,22 +71,12 @@
|
|
|
71
71
|
</div>
|
|
72
72
|
<div class="choice" v-if="item.testKey" v-show="item.open">
|
|
73
73
|
<div class="choice-box" v-for="(ts,ind) in item.testKey">
|
|
74
|
-
<label
|
|
75
|
-
<input class="choice-input"
|
|
76
|
-
@change="answerChange($event,item,`${id}${index}`,
|
|
74
|
+
<label>
|
|
75
|
+
<input class="choice-input" style="display: none;" :disabled="disabled" :checked="ts.checked"
|
|
76
|
+
@change="answerChange($event,item,`${id}${index}`,ts)" :type="ques(item.quesType)? 'radio': 'checkbox'"
|
|
77
77
|
:name="`${id}${index}`"/>
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
ts.index
|
|
81
|
-
}}. {{ ts.content[0] }}</span>
|
|
82
|
-
</label>
|
|
83
|
-
<label v-else>
|
|
84
|
-
<input class="choice-input" style="display: none;" v-if="chooseAnswer" :disabled="disabled" :checked="ts.checked"
|
|
85
|
-
@change="answerChange($event,item,`${id}${index}`,ts)" type="checkbox"
|
|
86
|
-
:name="`${id}${index}`"/>
|
|
87
|
-
<i class="choice-ico" :class="{'check-active': ts.checked, 'check-dis': disabled&&ts.checked,'check-dis-bor': disabled&&!ts.checked}"></i>
|
|
88
|
-
<span
|
|
89
|
-
:class="{'choice-span': chooseAnswer,'choice-color': disabled&&ts.checked&&!item.error&&!nothing,'choice-red': disabled&&ts.checked&&item.error&&!nothing}">{{
|
|
78
|
+
<svgs v-if="chooseAnswer" :radio="ques(item.quesType)" :select="ts.checked" :disabled="disabled" :state="stateFun(ts,item)"></svgs>
|
|
79
|
+
<span :class="{'choice-span': chooseAnswer}">{{
|
|
90
80
|
ts.index
|
|
91
81
|
}}. {{ ts.content[0] }}</span>
|
|
92
82
|
</label>
|
|
@@ -140,9 +130,11 @@
|
|
|
140
130
|
|
|
141
131
|
<script>
|
|
142
132
|
import {html2json, json2html} from 'html2json'
|
|
133
|
+
import svgs from './icon.vue'
|
|
143
134
|
|
|
144
135
|
export default {
|
|
145
136
|
name: "zydx-seek",
|
|
137
|
+
components: {svgs},
|
|
146
138
|
data() {
|
|
147
139
|
return {
|
|
148
140
|
value: [],
|
|
@@ -150,7 +142,8 @@ export default {
|
|
|
150
142
|
choiceState: true,
|
|
151
143
|
replaceShow: this.replace,
|
|
152
144
|
replaceOpen: false,
|
|
153
|
-
id: null
|
|
145
|
+
id: null,
|
|
146
|
+
states: false
|
|
154
147
|
}
|
|
155
148
|
},
|
|
156
149
|
props: {
|
|
@@ -240,10 +233,11 @@ export default {
|
|
|
240
233
|
watch: {
|
|
241
234
|
data: {
|
|
242
235
|
handler: function (val, oldVal) {
|
|
243
|
-
if (this.
|
|
236
|
+
if (this.states) return
|
|
244
237
|
this.init()
|
|
245
238
|
},
|
|
246
239
|
immediate: true,
|
|
240
|
+
deep: true,
|
|
247
241
|
},
|
|
248
242
|
multiple: {
|
|
249
243
|
handler: function (val, oldVal) {
|
|
@@ -256,15 +250,27 @@ export default {
|
|
|
256
250
|
this.replaceShow = val
|
|
257
251
|
},
|
|
258
252
|
deep: true
|
|
253
|
+
},
|
|
254
|
+
state: {
|
|
255
|
+
handler: function (val) {
|
|
256
|
+
this.states = val
|
|
257
|
+
},
|
|
258
|
+
deep: true,
|
|
259
|
+
immediate: true
|
|
259
260
|
}
|
|
260
261
|
},
|
|
261
262
|
mounted() {
|
|
262
263
|
this.id = this.randomId()
|
|
263
|
-
if (!this.
|
|
264
|
+
if (!this.states) return
|
|
264
265
|
this.init()
|
|
265
266
|
},
|
|
266
267
|
emits: ['change', 'modify', 'del', 'changeAll', 'replaceData', 'choiceData', 'judgeAnswer', 'openReasoning', 'review', 'subject'],
|
|
267
268
|
methods: {
|
|
269
|
+
stateFun(ts,item) {
|
|
270
|
+
if(this.disabled&&ts.checked&&!item.error&&!this.nothing) return 'correct'
|
|
271
|
+
if(this.disabled&&ts.checked&&item.error&&!this.nothing) return 'error'
|
|
272
|
+
return 'default'
|
|
273
|
+
},
|
|
268
274
|
customButTap(e,d) {
|
|
269
275
|
if(e.key === 'option') d.open = !d.open
|
|
270
276
|
if(e.key === 'modify') {
|
|
@@ -354,7 +360,13 @@ export default {
|
|
|
354
360
|
this.value[i].replace = !this.value[i].replace
|
|
355
361
|
},
|
|
356
362
|
answerChange(e, v, id, check) {
|
|
357
|
-
if(
|
|
363
|
+
if(this.ques(v.quesType)) {
|
|
364
|
+
v.testKey.map(x => {
|
|
365
|
+
x.checked = false
|
|
366
|
+
return x
|
|
367
|
+
})
|
|
368
|
+
}
|
|
369
|
+
check.checked = e.target.checked
|
|
358
370
|
let answerArr = []
|
|
359
371
|
const ids = document.getElementsByName(id)
|
|
360
372
|
ids.forEach((x, index) => {
|
package/src/index.js
CHANGED
|
@@ -33,6 +33,7 @@ import lessonTemplate from './components/lesson_template/index';
|
|
|
33
33
|
import paper from './components/word2/index';
|
|
34
34
|
import question from './components/question/index';
|
|
35
35
|
import tagging from './components/tagging/index';
|
|
36
|
+
import seek from './components/seek/index';
|
|
36
37
|
|
|
37
38
|
const components = [
|
|
38
39
|
Calendar,
|
|
@@ -67,7 +68,8 @@ const components = [
|
|
|
67
68
|
lessonTemplate,
|
|
68
69
|
paper,
|
|
69
70
|
question,
|
|
70
|
-
tagging
|
|
71
|
+
tagging,
|
|
72
|
+
seek
|
|
71
73
|
];
|
|
72
74
|
|
|
73
75
|
function install(app) {
|
|
@@ -79,7 +81,7 @@ function install(app) {
|
|
|
79
81
|
}
|
|
80
82
|
|
|
81
83
|
export default {
|
|
82
|
-
version: '1.32.
|
|
84
|
+
version: '1.32.284',
|
|
83
85
|
install,
|
|
84
86
|
Calendar,
|
|
85
87
|
Message,
|
|
@@ -115,6 +117,7 @@ export default {
|
|
|
115
117
|
lessonTemplate,
|
|
116
118
|
paper,
|
|
117
119
|
question,
|
|
118
|
-
tagging
|
|
120
|
+
tagging,
|
|
121
|
+
seek
|
|
119
122
|
};
|
|
120
123
|
|