Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
H
hy04_pinci
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
hy04_pinci
Commits
a328c39d
Commit
a328c39d
authored
Jun 15, 2023
by
Tt
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
表上传
parent
07b64184
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
111 additions
and
112 deletions
+111
-112
form.component.html
form/src/app/form/form.component.html
+93
-88
form.component.ts
form/src/app/form/form.component.ts
+18
-24
No files found.
form/src/app/form/form.component.html
View file @
a328c39d
...
@@ -11,14 +11,14 @@
...
@@ -11,14 +11,14 @@
padding
:
20px
;
padding
:
20px
;
}
}
.
option
-title
{
.
letterList
-title
{
color
:
#000
;
color
:
#000
;
font-size
:
18px
;
font-size
:
18px
;
min-width
:
70px
;
min-width
:
70px
;
/* margin-right: 10px; */
/* margin-right: 10px; */
}
}
.
option
-content
{
.
letterList
-content
{
border
:
1px
dashed
#333
;
border
:
1px
dashed
#333
;
border-radius
:
1px
;
border-radius
:
1px
;
padding
:
20px
;
padding
:
20px
;
...
@@ -76,10 +76,10 @@
...
@@ -76,10 +76,10 @@
<div
class=
"model-content"
>
<div
class=
"model-content"
>
<div
style=
"padding: 10px;background-color: #fff;"
>
<div
style=
"padding: 10px;background-color: #fff;"
>
<div
class=
"border-dashed"
style=
"margin: 20px;width: 1000px;"
>
<
!-- <
div class="border-dashed" style="margin: 20px;width: 1000px;">
<span style="font-size: 20px;">标题: </span>
<span style="font-size: 20px;">标题: </span>
<input type="text" nz-input [(ngModel)]="item.title" (blur)="save()">
<input type="text" nz-input [(ngModel)]="item.title" (blur)="save()">
<
!-- <
span style="font-size: 20px;">题目说明: </span>
<span style="font-size: 20px;">题目说明: </span>
<input type="text" nz-input [(ngModel)]="item.questionText" (blur)="save()">
<input type="text" nz-input [(ngModel)]="item.questionText" (blur)="save()">
<span style="font-size: 20px;">题目说明音频: </span>
<span style="font-size: 20px;">题目说明音频: </span>
<div style="display:flex ;">
<div style="display:flex ;">
...
@@ -90,23 +90,23 @@
...
@@ -90,23 +90,23 @@
<div style="margin: 5px">
<div style="margin: 5px">
<span>{{ item.audioName}}</span>
<span>{{ item.audioName}}</span>
</div>
</div>
</div>
-->
</div>
</div>
</div>
<div class="border-dashed" style="margin: 20px;width: 1000px;">
<div class="border-dashed" style="margin: 20px;width: 1000px;">
<div style="font-size: 20px;">游戏模式: </div>
<div style="font-size: 20px;">游戏模式: </div>
<nz-radio-group
[(
ngModel
)]="
item
.
recordFla
g
"
(
ngModelChange
)="
save
()"
>
<nz-radio-group [(ngModel)]="item.
onlineFl
g" (ngModelChange)="save()">
<label nz-radio [nzValue]="true">
<label nz-radio [nzValue]="true">
<span
[
style
]="{
color:item
.
recordFlag=
=true
?
'#
169BD5
'
:
'#
000
'}"
>
录音模式
</span>
<span [style]="{color:item.
onlineFlg==true ? '#169BD5':'#000'}">联机版
</span>
</label>
</label>
<label nz-radio [nzValue]="false">
<label nz-radio [nzValue]="false">
<span
[
style
]="{
color:item
.
recordFlag=
=false
?
'#
169BD5
'
:
'#
000
'}"
>
听音模式
</span>
<span [style]="{color:item.
onlineFlg==false ? '#169BD5':'#000'}">单机版
</span>
</label>
</label>
</nz-radio-group>
</nz-radio-group>
</div>
</div>
<
!-- <
div class="border-dashed" style="margin: 20px;width: 1000px;">
<div class="border-dashed" style="margin: 20px;width: 1000px;">
<div class="word-input-title">
<div class="word-input-title">
<div>
<div>
<span>游戏背景音乐: </span>
<span>游戏背景音乐: </span>
...
@@ -135,10 +135,13 @@
...
@@ -135,10 +135,13 @@
<div
*
ngFor=
"let question of item.questions; let i = index"
>
<div
*
ngFor=
"let question of item.questions; let i = index"
>
<div
style=
"display: flex;margin-top: 20px;"
>
<div
style=
"display: flex;margin-top: 20px;"
>
<div
class=
"border-solid"
style=
"min-width: 1000px;"
>
<div
class=
"border-solid"
style=
"min-width: 1000px;"
>
<
!-- <
div class="word-type-title">
<div
class=
"word-type-title"
>
题目{{i+1}}
题目{{i+1}}
</div>
-->
</div>
<div>
</div>
<!-- <div>
<!-- <div>
<div class="word-type-option-title" style="margin-top:10px;">题目音频:</div>
<div class="word-type-option-title" style="margin-top:10px;">题目音频:</div>
...
@@ -154,113 +157,115 @@
...
@@ -154,113 +157,115 @@
</div>
</div>
</div> -->
</div> -->
<!-- <div style="margin-top:20px">
<!--
<div style="margin-top:20px">
<div class="word-type-option-title">倒计时: </div>
<div class="word-type-option-title">倒计时: </div>
<input type="number" nz-input [(ngModel)]="question.duration" (blur)="save()">
<input type="number" nz-input [(ngModel)]="question.duration" (blur)="save()">
</div> -->
</div> -->
<div
class=
"word-type-option-title"
style=
"margin-top:20px;"
>
<div
class=
"word-type-option-title"
style=
"display: flex; margin-top:20px;"
>
题目内容:
题干:
</div>
<!-- <div *ngFor="let question of question; let j = index" style="margin-left: 30px;"> -->
<div>
<div
*
ngFor=
"let option of question.options; let j = index"
>
<div
style=
"margin-left: 30px;"
>
<div
style=
"display: flex;margin-top:20px"
>
<nz-radio-group
[(
ngModel
)]="
question
.
type
"
(
ngModelChange
)="
ngChange
(
i
)"
>
<div
class=
"option-title"
>
<label
nz-radio
nzValue=
"img"
>
题目{{j+1}}
<span
[
style
]="{
color:question
.
type=
='img'
?
'#
169BD5
'
:
'#
000
'}"
>
图片
</span>
</label>
<label
nz-radio
nzValue=
"imgVideo"
>
<span
[
style
]="{
color:question
.
type=
='imgVideo'
?
'#
169BD5
'
:
'#
000
'}"
>
图片+音频
</span>
</label>
</nz-radio-group>
</div>
</div>
<div
class=
"option-content"
style=
"padding: 15px 30px;"
>
<!-- <div style="margin:-15px -30px;width: calc(100%+60px);height: 40px;padding:10px 20px;" [style]="{
backgroundColor: option.right ?'#169BD5':'#eee'}">
<label nz-checkbox [(ngModel)]="option.right" (ngModelChange)="save()"
[style]="{color: option.right ?'#fff':'#000'}">正确答案</label>
</div> -->
<div
style=
"margin-top: 15px;margin-left: 28px;"
>
<div
style=
"margin-top: 20px;"
>
<div
class=
"option-img"
>
<div
class=
"word-type-option-title"
>
<div
*
ngIf=
"question.type=='img'"
style=
"width: 200px;"
>
类型:
<span
style=
"font-size: 20px;"
>
图片:
</span>
</div>
<app-upload-image-with-preview
[
picUrl
]="
question
.
image
"
<div
style=
"margin-top: 5px;"
>
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
image
',
question
)"
>
<nz-radio-group
[(
ngModel
)]="
option
.
type
"
(
ngModelChange
)="
ngChange
(
i
,
j
)"
>
</app-upload-image-with-preview>
<label
nz-radio
nzValue=
"img"
>
<span
[
style
]="{
color:option
.
type=
='img'
?
'#
169BD5
'
:
'#
000
'}"
>
图片
</span>
</label>
<label
nz-radio
nzValue=
"img_txt"
>
<span
[
style
]="{
color:option
.
type=
='img_txt'
?
'#
169BD5
'
:
'#
000
'}"
>
图片+文本
</span>
</label>
<label
nz-radio
nzValue=
"img_audio"
>
<span
[
style
]="{
color:option
.
type=
='img_audio'
?
'#
169BD5
'
:
'#
000
'}"
>
图片+音频
</span>
</label>
<label
nz-radio
nzValue=
"img_txt_audio"
>
<span
[
style
]="{
color:option
.
type=
='img_txt_audio'
?
'#
169BD5
'
:
'#
000
'}"
>
图片+文本+音频
</span>
</label>
</nz-radio-group>
</div>
</div>
</div>
</div>
<div
class=
"option-text"
>
<div
style=
"margin-top: 25px;"
>
<div
*
ngIf=
"question.type=='imgVideo'"
style=
"width: 200px"
>
<div
class=
"option-img"
>
<span
style=
"font-size: 20px;"
>
图片
</span>
<div
style=
"width: 200px;"
>
<app-upload-image-with-preview
[
picUrl
]="
question
.
image
"
<span
style=
"font-size: 20px;"
>
图片:
</span>
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
image
',
question
)"
>
<app-upload-image-with-preview
[
picUrl
]="
option
.
image
"
</app-upload-image-with-preview>
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
image
',
option
)"
>
<div
class=
"option-audio"
>
</app-upload-image-with-preview>
<span
style=
"font-size: 20px;"
>
选项音频:
</span>
</div>
<div
style=
"display: flex"
>
</div>
<div>
<div
class=
"option-text"
>
<app-audio-recorder
[
audioUrl
]="
question
.
audio
"
<div
*
ngIf=
"option.type=='img_txt'|| option.type=='img_txt_audio' "
style=
"width: 200px"
>
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,'
audio
',
question
,'
audioName
')"
>
<span
style=
"font-size: 20px;"
>
文本
</span>
</app-audio-recorder>
<input
type=
"text"
nz-input
[(
ngModel
)]="
option
.
text
"
(
blur
)="
save
()"
>
</div>
</div>
<div
style=
"margin: 5px"
>
</div>
<span>
{{ question.audioName}}
<div
class=
"option-audio"
*
ngIf=
"option.type=='img_audio' || option.type=='img_txt_audio'"
>
</span>
<span
style=
"font-size: 20px;"
>
选项音频:
</span>
</div>
<div
style=
"display: flex"
>
<div>
<app-audio-recorder
[
audioUrl
]="
option
.
audio
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,'
audio
',
option
,'
audioName
')"
>
</app-audio-recorder>
</div>
<div
style=
"margin: 5px"
>
<span>
{{ option.audioName}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"option-time"
*
ngIf=
"item.recordFlag==true"
>
<div
class=
"word-type-option-title"
>
录音倒计时:
</div>
<input
type=
"number"
nz-input
[(
ngModel
)]="
option
.
duration
"
(
blur
)="
save
()"
>
<span
style=
"font-size: 20px;"
>
录音文本
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
option
.
content
"
(
blur
)="
save
()"
>
</div>
</div>
</div>
<!-- <div class="option-time">
</div> -->
</div>
</div>
<!-- </div> -->
</div>
<div
style=
"display: flex; margin-top: 20px;"
>
<span
style=
"font-size: 18px;"
>
预览:
</span>
<div
type=
"text"
name=
""
id=
""
style=
"margin-left: 32px;"
class=
"letterList-content"
>
<span
*
ngFor=
"let letterList of question.letterList; let j = index"
>
<!-- 字母{{j}}的值为: -->
{{letterList.text}}
</span>
</div>
</div>
<div
*
ngFor=
"let letterList of question.letterList; let j = index"
>
<div
style=
"display: flex;margin-top:20px"
>
<div
class=
"letterList-title"
>
选项{{j+1}}
</div>
<div
class=
"letterList-content"
style=
"padding: 15px 30px;"
>
<!-- <div style="margin:-15px -30px;width: calc(100%+60px);height: 40px;padding:10px 20px;" [style]="{
backgroundColor: option.right ?'#169BD5':'#eee'}">
<label nz-checkbox [(ngModel)]="option.right"
[style]="{color: option.right ?'#fff':'#000'}">正确答案</label>
</div> -->
字母:
<input
type=
"text"
[(
ngModel
)]="
letterList
.
text
"
(
ngModelChange
)="
save
()"
>
</div>
</div>
<div
class=
"option-btns"
>
<button
class=
"btn-red"
nz-button
nzType=
"default"
nzDanger
(
click
)="
removeoption
(
i
,
j
)"
>
删除题目
</button>
<div
class=
"letterList-btns"
>
<button
class=
"btn-red"
nz-button
nzType=
"default"
nzDanger
(
click
)="
removeoption
(
i
,
j
)"
>
减少选项
</button>
<button
class=
"btn-blue"
style=
"margin-top: 10px;"
nz-button
nzType=
"default"
nzDanger
<button
class=
"btn-blue"
style=
"margin-top: 10px;"
nz-button
nzType=
"default"
nzDanger
(
click
)="
copyOption
(
i
,
j
)"
>
复制
题目
</button>
(
click
)="
copyOption
(
i
,
j
)"
>
复制
选项
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div
style=
"margin-left: 69px;margin-top: 15px;"
>
<div
style=
"margin-left: 69px;margin-top: 15px;"
>
<button
class=
"btn-blue"
nz-button
nzType=
"default"
nzDanger
(
click
)="
addoption
(
i
)"
>
+增加
题目
</button>
<button
class=
"btn-blue"
nz-button
nzType=
"default"
nzDanger
(
click
)="
addoption
(
i
)"
>
+增加
选项
</button>
</div>
</div>
</div>
</div>
<div
style=
"margin:0 20px"
>
<div
style=
"margin:0 20px"
>
<
!-- <button class="btn-red" nz-button nzType="default" nzDanger (click)="removequestion(i)">删除题目</button> --
>
<
button
class=
"btn-red"
nz-button
nzType=
"default"
nzDanger
(
click
)="
removequestion
(
i
)"
>
删除题目
</button
>
</div>
</div>
</div>
</div>
</div>
</div>
<
!-- <
button class="btn-blue" style="margin-top:10px;width: 1000px; height: 50px;" nz-button nzType="default" nzDanger
<button
class=
"btn-blue"
style=
"margin-top:10px;width: 1000px; height: 50px;"
nz-button
nzType=
"default"
nzDanger
(click)="addquestion()">+增加题目</button>
-->
(
click
)="
addquestion
()"
>
+增加题目
</button>
</div>
</div>
...
...
form/src/app/form/form.component.ts
View file @
a328c39d
...
@@ -9,23 +9,18 @@ import { MetaFormCreator } from './mataFormCreator';
...
@@ -9,23 +9,18 @@ import { MetaFormCreator } from './mataFormCreator';
})
})
export
class
FormComponent
extends
ComponentBase
implements
OnInit
,
OnChanges
,
OnDestroy
{
export
class
FormComponent
extends
ComponentBase
implements
OnInit
,
OnChanges
,
OnDestroy
{
// 储存数据用
// 储存数据用
saveKey
=
"
hy
01_danci
"
;
saveKey
=
"
hy
_04
"
;
item
=
{
item
=
{
recordFla
g
:
false
,
onlineFl
g
:
false
,
title
:
""
,
title
:
""
,
questionText
:
""
,
questionText
:
""
,
questionTextAudio
:
""
,
questionTextAudio
:
""
,
questions
:
[{
questions
:
[],
questionAudio
:
""
,
duration
:
120
,
options
:
[]
}],
bgAudio
:
""
,
bgAudio
:
""
,
bgAudioName
:
""
,
bgAudioName
:
""
,
audioName
:
""
audioName
:
""
};
};
isVisible
=
false
;
isVisible
=
false
;
deleteTitle
=
"
是否删除题目
"
;
deleteTitle
=
"
是否删除题目
"
;
deleteCallback
=
function
()
{
};
deleteCallback
=
function
()
{
};
...
@@ -44,31 +39,25 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
...
@@ -44,31 +39,25 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
init
():
void
{
init
():
void
{
console
.
log
(
new
MetaFormCreator
().
create
());
/* console.log(new MetaFormCreator().create()); */
}
}
removeoption
(
i
,
j
)
{
removeoption
(
i
,
j
)
{
this
.
openDelete
(
"
确定
删除
选项?
"
,
()
=>
{
this
.
openDelete
(
"
确定
减少
选项?
"
,
()
=>
{
this
.
item
.
questions
[
i
].
options
.
splice
(
j
,
1
);
this
.
item
.
questions
[
i
].
letterList
.
splice
(
j
,
1
);
this
.
save
();
this
.
save
();
})
})
}
}
copyOption
(
i
,
j
)
{
copyOption
(
i
,
j
)
{
let
data
=
this
.
item
.
questions
[
i
].
options
[
j
];
let
data
=
this
.
item
.
questions
[
i
].
letterList
[
j
];
this
.
item
.
questions
[
i
].
options
.
push
(
JSON
.
parse
(
JSON
.
stringify
(
data
)));
this
.
item
.
questions
[
i
].
letterList
.
push
(
JSON
.
parse
(
JSON
.
stringify
(
data
)));
this
.
save
();
this
.
save
();
}
}
addoption
(
i
)
{
addoption
(
i
)
{
this
.
item
.
questions
[
i
].
options
.
push
({
this
.
item
.
questions
[
i
].
letterList
.
push
({
type
:
""
,
text
:
''
image
:
""
,
})
audio
:
""
,
text
:
""
,
duration
:
''
,
content
:
''
,
right
:
false
});
this
.
save
();
this
.
save
();
}
}
...
@@ -83,7 +72,12 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
...
@@ -83,7 +72,12 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this
.
item
.
questions
.
push
({
this
.
item
.
questions
.
push
({
questionAudio
:
""
,
questionAudio
:
""
,
duration
:
120
,
duration
:
120
,
options
:
[]
type
:
"
img
"
,
image
:
""
,
audio
:
""
,
text
:
""
,
right
:
false
,
letterList
:
[],
});
});
this
.
save
();
this
.
save
();
}
}
...
@@ -93,7 +87,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
...
@@ -93,7 +87,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this
.
item
.
bgAudioName
=
""
;
this
.
item
.
bgAudioName
=
""
;
this
.
save
();
this
.
save
();
}
}
ngChange
(
i
,
j
)
{
ngChange
(
i
)
{
this
.
save
();
this
.
save
();
}
}
}
}
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment