Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
D
DG_FAF
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
DG_FAF
Commits
ab64f8b3
Commit
ab64f8b3
authored
Feb 18, 2023
by
李维
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
部分完成表单部分
圈出正确单词部分还有问题
parent
7396c13d
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
281 additions
and
33 deletions
+281
-33
custom-hot-zone.component.scss
...app/common/custom-hot-zone/custom-hot-zone.component.scss
+1
-1
form.component.html
form_angular/src/app/form/form.component.html
+156
-21
form.component.ts
form_angular/src/app/form/form.component.ts
+124
-11
No files found.
form_angular/src/app/common/custom-hot-zone/custom-hot-zone.component.scss
View file @
ab64f8b3
...
@@ -13,7 +13,7 @@
...
@@ -13,7 +13,7 @@
margin
:
auto
;
margin
:
auto
;
width
:
95%
;
width
:
95%
;
height
:
35
vw
;
height
:
100
vw
;
border
:
2px
dashed
#ddd
;
border
:
2px
dashed
#ddd
;
border-radius
:
0
.5rem
;
border-radius
:
0
.5rem
;
...
...
form_angular/src/app/form/form.component.html
View file @
ab64f8b3
<div
class=
"model-content"
>
<div
class=
"model-content"
>
<!-- <app-formula-input style="position: absolute;right:0;" [(ngfModel)]="item.title" (ngfBlur)="save()"></app-formula-input><br>
<!-- <app-formula-input style="position: absolute;right:0;" [(ngfModel)]="item.title" (ngfBlur)="save()"></app-formula-input><br>
<app-formula-input [(ngfModel)]="item.title" (ngfBlur)="save()"></app-formula-input><br> -->
<app-formula-input [(ngfModel)]="item.title" (ngfBlur)="save()"></app-formula-input><br> -->
<div
style=
"padding: 20px;"
>
<div
style=
"padding: 20px;"
>
<h2>
页面参数
</h2>
<div
style=
"font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px; width: 500px;"
>
<div
style=
"display: flex; justify-content: center; align-items: center;"
>
<span
style=
"width: 120px; margin-right: 20px;"
align=
"right"
>
page_id:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
page_id
"
(
blur
)="
save
()"
style=
"margin-top: 5px"
>
</div>
<div
style=
"display: flex; justify-content: center; align-items: center;"
>
<span
style=
"width: 120px; margin-right: 20px;"
align=
"right"
>
book_id:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
book_id
"
(
blur
)="
save
()"
style=
"margin-top: 5px"
>
</div>
<div
style=
"display: flex; justify-content: center; align-items: center;"
>
<span
style=
"width: 120px; margin-right: 20px;"
align=
"right"
>
part_name:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
part_name
"
(
blur
)="
save
()"
style=
"margin-top: 5px"
>
</div>
</div>
<h2
style=
"margin-top: 20px"
>
音频配置:
</h2>
<div
style=
"margin: 30px;"
></div>
<div
style=
"margin: 30px;"
></div>
<h2
>
热区配置:
</h2>
<h2
>
热区
位置
配置:
</h2>
<app-custom-hot-zone
<app-custom-hot-zone
[
bgItem
]="
item
.
bgItem
"
[
bgItem
]="
item
.
bgItem
"
[
hotZoneItemArr
]="
item
.
hotZoneItemArr
"
[
hotZoneItemArr
]="
item
.
hotZoneItemArr
"
...
@@ -29,9 +11,162 @@
...
@@ -29,9 +11,162 @@
>
>
</app-custom-hot-zone>
</app-custom-hot-zone>
<div
style=
"margin-top: 30px; width: 200px; height: 50px; border: 1px solid #ccc ; border-radius: 5px; display: flex; align-items: center; justify-content: center;"
>
<h2
style=
"margin-top: 10px;"
>
热区内容配置:
</h2>
<div
style=
"font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px;"
>
<div
*
ngFor=
"let it of item.hotZoneConfigArr; let i = index"
style=
"border: 2px dashed #ddd; border-radius: 5px; padding: 10px; margin-bottom: 10px; position: relative;"
>
<span
style=
"position: absolute; right: 50px; top: 10px; font-size: 64px;"
>
{{i + 1}}
</span>
<div
style=
"margin: 10px 10px;"
>
<span
style=
"display: inline-block; text-align: right; width: 100px;"
>
关联热区:
</span>
<nz-select
[(
ngModel
)]="
it
.
linkHotZoneIndex
"
style=
"width: 50px;"
(
ngModelChange
)="
save
()"
>
<nz-option
*
ngFor=
"let itOption of item.hotZoneItemArr"
[
nzValue
]="
itOption
.
index
"
[
nzLabel
]="
itOption
.
index
+
1
"
></nz-option>
</nz-select>
<span
style=
"margin-left: 10px;"
>
热区名:{{item.hotZoneItemArr
&&
item.hotZoneItemArr[it.linkHotZoneIndex] ? item.hotZoneItemArr[it.linkHotZoneIndex].itemName : "未配置"}}
</span>
</div>
<div
style=
"margin: 10px 10px;"
>
<span
style=
"display: inline-block; text-align: right; width: 100px;"
>
热区内容:
</span>
<nz-select
[(
ngModel
)]="
it
.
hotZoneType
"
style=
"width: 100px;"
(
ngModelChange
)="
save
()"
>
<nz-option
nzValue=
"0"
nzLabel=
"文字选项"
></nz-option>
<nz-option
nzValue=
"1"
nzLabel=
"图片选项"
></nz-option>
<nz-option
nzValue=
"2"
nzLabel=
"播放音频"
></nz-option>
<nz-option
nzValue=
"3"
nzLabel=
"热区选项"
></nz-option>
<nz-option
nzValue=
"4"
nzLabel=
"文字输入"
></nz-option>
<nz-option
nzValue=
"5"
nzLabel=
"语音评测"
nzDisabled
></nz-option>
</nz-select>
<div
*
ngIf=
"it.hotZoneType == '0' || it.hotZoneType == '1' || it.hotZoneType == '3'"
style=
"padding: 10px 0 10px 100px;"
>
<div
style=
"margin-bottom: 16px;"
>
<span
style=
"font-size: 14px; color: #000000d9;"
>
内容清单
</span>
<button
nz-button
nzSize=
"small"
nzType=
"primary"
style=
"float: right;"
(
click
)="
addHotZoneConfigItem
(
it
)"
>
<span
nz-icon
nzType=
"plus-circle"
></span>
添加内容
</button>
</div>
<nz-table
#
contentTable
[
nzData
]="
it
.
contentList
"
[
nzShowPagination
]="
false
"
>
<thead>
<tr>
<th
nzWidth=
"100px"
nzAlign=
"center"
>
序号
</th>
<th
nzWidth=
"200px"
nzAlign=
"center"
>
正确答案
</th>
<th
*
ngIf=
"it.hotZoneType == '0'"
>
文字
</th>
<th
*
ngIf=
"it.hotZoneType == '1'"
>
图片
</th>
<th
*
ngIf=
"it.hotZoneType == '3'"
>
热区索引
</th>
<th
nzWidth=
"10%"
>
操作
</th>
</tr>
</thead>
<tbody>
<tr
*
ngFor=
"let data of contentTable.data; let i = index;"
>
<ng-container
*
ngIf=
"!(editCache[i] && editCache[i].edit); else editTemplate"
>
<td
nzWidth=
"100px"
nzAlign=
"center"
>
{{ i + 1 }}
</td>
<td
nzWidth=
"200px"
nzAlign=
"center"
>
{{ data.isCorrect?'正确':'错误' }}
</td>
<td
*
ngIf=
"it.hotZoneType == '0'"
>
{{ data.text }}
</td>
<td
*
ngIf=
"it.hotZoneType == '1'"
>
<img
*
ngIf=
"data.image_url"
[
src
]="
data
.
image_url
"
width=
"200"
height=
"200"
style=
"object-fit: contain;"
/>
<span
*
ngIf=
"!data.image_url"
>
暂无图片
</span>
</td>
<td
*
ngIf=
"it.hotZoneType == '3'"
>
<span
style=
"margin-left: 10px;"
>
索引: {{data.selectHotZoneIndex + 1}} 热区名:{{item.hotZoneItemArr
&&
item.hotZoneItemArr[data.selectHotZoneIndex] ? item.hotZoneItemArr[data.selectHotZoneIndex].itemName : "未配置"}}
</span>
</td>
<td
nzWidth=
"10%"
>
<a
(
click
)="
startHotZoneConfigEdit
(
i
,
data
)"
>
编辑
</a>
<nz-divider
nzType=
"vertical"
></nz-divider>
<a
(
click
)="
deleteHotZoneConfigItem
(
it
,
i
)"
>
删除
</a>
</td>
</ng-container>
<ng-template
#
editTemplate
>
<td
nzWidth=
"100px"
nzAlign=
"center"
>
{{ i + 1 }}
</td>
<td
nzWidth=
"200px"
nzAlign=
"center"
>
<label
nz-checkbox
[(
ngModel
)]="
editCache
[
i
].
data
.
isCorrect
"
></label>
</td>
<td
*
ngIf=
"it.hotZoneType == '0'"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
editCache
[
i
].
data
.
text
"
/>
</td>
<td
*
ngIf=
"it.hotZoneType == '1'"
>
<div
style=
"width: 200px; height: 112px;"
>
<app-upload-image-with-preview
[
picUrl
]="
editCache
[
i
].
data
.
image_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
image_url
',
editCache
[
i
].
data
)"
>
</app-upload-image-with-preview>
</div>
</td>
<td
*
ngIf=
"it.hotZoneType == '3'"
>
<nz-select
[(
ngModel
)]="
data
.
selectHotZoneIndex
"
style=
"width: 50px;"
(
ngModelChange
)="
save
()"
>
<nz-option
*
ngFor=
"let itOption of item.hotZoneItemArr"
[
nzValue
]="
itOption
.
index
"
[
nzLabel
]="
itOption
.
index
+
1
"
></nz-option>
</nz-select>
<span
style=
"margin-left: 10px;"
>
热区名:{{item.hotZoneItemArr
&&
item.hotZoneItemArr[data.selectHotZoneIndex] ? item.hotZoneItemArr[data.selectHotZoneIndex].itemName : "未配置"}}
</span>
</td>
<td
nzWidth=
"10%"
>
<a
(
click
)="
saveHotZoneConfigEdit
(
i
,
it
)"
class=
"save"
>
保存
</a>
<nz-divider
nzType=
"vertical"
></nz-divider>
<a
nz-popconfirm
nzPopconfirmTitle=
"Sure to cancel?"
(
nzOnConfirm
)="
cancelHotZoneConfigEdit
(
i
,
data
)"
>
取消
</a>
</td>
</ng-template>
</tr>
</tbody>
</nz-table>
</div>
<div
*
ngIf=
"it.hotZoneType == '2'"
style=
"padding: 10px 0 10px 100px;"
>
<app-audio-recorder
[
audioUrl
]="
it
.
audio_url
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio_url
',
it
)"
></app-audio-recorder>
</div>
</div>
<div
*
ngIf=
"it.hotZoneType == '4'"
style=
"margin: 10px 10px;"
>
<span
style=
"display: inline-block; text-align: right; width: 100px;"
>
正确文字:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
inputText
"
(
blur
)="
save
"
style=
"display: inline-block; width: 300px;"
>
</div>
<div
style=
"margin: 10px 10px;"
>
<span
style=
"display: inline-block; text-align: right; width: 100px;"
>
分数:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
score
"
(
blur
)="
save
"
style=
"display: inline-block; width: 150px;"
>
</div>
</div>
<button
nz-button
nzType=
"dashed"
(
click
)="
addHotZoneConfig
()"
class=
"add-btn"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
添加热区内容配置
</button>
</div>
<h2
style=
"margin-top: 10px;"
>
分数配置:
</h2>
<div
style=
"font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px;"
>
<div
*
ngFor=
"let it of item.scoreConfigArr; let i = index"
style=
"border: 2px dashed #ddd; border-radius: 5px; padding: 10px; margin-bottom: 10px;"
>
<div
style=
"margin: 10px 10px;"
>
<span
style=
"display: inline-block; text-align: right; width: 150px;"
>
分数显示热区:
</span>
<nz-select
[(
ngModel
)]="
it
.
linkHotZoneIndex
"
style=
"width: 50px;"
(
ngModelChange
)="
save
()"
>
<nz-option
*
ngFor=
"let itOPtion of item.hotZoneItemArr"
[
nzValue
]="
itOPtion
.
index
"
[
nzLabel
]="
itOPtion
.
index
+
1
"
></nz-option>
</nz-select>
<span
style=
"margin-left: 10px;"
>
热区名:{{item.hotZoneItemArr
&&
item.hotZoneItemArr[it.linkHotZoneIndex] ? item.hotZoneItemArr[it.linkHotZoneIndex].itemName : "未配置"}}
</span>
</div>
<div
style=
"margin: 10px 10px;"
>
<span
style=
"display: inline-block; text-align: right; width: 150px;"
>
包含分数的热区:
</span>
<nz-select
[(
ngModel
)]="
it
.
linkHotZoneIndexArr
"
nzMode=
"multiple"
style=
"width: 300px;"
(
ngModelChange
)="
save
()"
>
<nz-option
*
ngFor=
"let itOPtion of item.hotZoneItemArr"
[
nzValue
]="
itOPtion
.
index
"
[
nzLabel
]="
itOPtion
.
index
+
1
"
></nz-option>
</nz-select>
</div>
</div>
<div
style=
"margin: 10px 10px;"
>
<span
style=
"display: inline-block; text-align: right; width: 100px;"
>
提交按钮:
</span>
<nz-select
[(
ngModel
)]="
item
.
submitHotZoneIndex
"
style=
"width: 50px;"
(
ngModelChange
)="
save
()"
>
<nz-option
*
ngFor=
"let itOPtion of item.hotZoneItemArr"
[
nzValue
]="
itOPtion
.
index
"
[
nzLabel
]="
itOPtion
.
index
+
1
"
></nz-option>
</nz-select>
<span
style=
"margin-left: 10px;"
>
热区名:{{item.hotZoneItemArr
&&
item.hotZoneItemArr[item.submitHotZoneIndex] ? item.hotZoneItemArr[item.submitHotZoneIndex].itemName : "未配置"}}
</span>
</div>
<div
style=
"margin: 10px 10px;"
>
<span
style=
"display: inline-block; text-align: right; width: 100px;"
>
重做按钮:
</span>
<nz-select
[(
ngModel
)]="
item
.
replayHotZoneIndex
"
style=
"width: 50px;"
(
ngModelChange
)="
save
()"
>
<nz-option
*
ngFor=
"let itOPtion of item.hotZoneItemArr"
[
nzValue
]="
itOPtion
.
index
"
[
nzLabel
]="
itOPtion
.
index
+
1
"
></nz-option>
</nz-select>
<span
style=
"margin-left: 10px;"
>
热区名:{{item.hotZoneItemArr
&&
item.hotZoneItemArr[item.replayHotZoneIndex] ? item.hotZoneItemArr[item.replayHotZoneIndex].itemName : "未配置"}}
</span>
</div>
<button
nz-button
nzType=
"dashed"
(
click
)="
addScoreConfig
()"
class=
"add-btn"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
添加分数组配置
</button>
</div>
<div
style=
"margin-top: 50px; padding-bottom: 100px;"
>
<div
style=
"width: 200px; height: 50px; border: 1px solid #ccc ; border-radius: 5px; display: flex; align-items: center; justify-content: center; float: left;"
>
<label
nz-checkbox
[(
ngModel
)]="
item
.
isDebug
"
(
ngModelChange
)="
save
()"
>
调试模式
</label>
<label
nz-checkbox
[(
ngModel
)]="
item
.
isDebug
"
(
ngModelChange
)="
save
()"
>
调试模式
</label>
</div>
</div>
<button
nz-button
nzType=
"primary"
(
click
)="
copyChangeData
()"
style=
"float: right;"
><i
nz-icon
nzType=
"copy"
></i>
复制数据表单
</button>
</div>
</div>
</div>
</div>
</div>
form_angular/src/app/form/form.component.ts
View file @
ab64f8b3
...
@@ -12,7 +12,7 @@ import {
...
@@ -12,7 +12,7 @@ import {
}
from
'
@angular/core
'
;
}
from
'
@angular/core
'
;
import
{
JsonPipe
}
from
'
@angular/common
'
;
import
{
JsonPipe
}
from
'
@angular/common
'
;
import
{
removeItemFromArr
}
from
'
../play/Unit
'
;
import
{
removeItemFromArr
}
from
'
../play/Unit
'
;
import
{
NzMessageService
}
from
'
ng-zorro-antd
'
;
@
Component
({
@
Component
({
selector
:
'
app-form
'
,
selector
:
'
app-form
'
,
...
@@ -26,10 +26,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
...
@@ -26,10 +26,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
// 储存对象
// 储存对象
item
;
item
;
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
// 表格编辑缓存
editCache
:
{
[
key
:
string
]:
{
edit
:
boolean
;
data
}
}
=
{};
}
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
,
private
nzMessageService
:
NzMessageService
)
{
}
ngOnInit
()
{
ngOnInit
()
{
this
.
item
=
{};
this
.
item
=
{};
...
@@ -44,26 +46,137 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
...
@@ -44,26 +46,137 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
},
this
.
saveKey
);
},
this
.
saveKey
);
}
}
ngAfterViewInit
()
{
saveHotZone
(
group
,
e
)
{
console
.
log
(
'
e:
'
,
e
);
const
{
bgItem
,
hotZoneItemArr
}
=
e
;
group
.
bgItem
=
bgItem
;
group
.
hotZoneItemArr
=
hotZoneItemArr
;
this
.
save
();
}
// 添加热区配置
addHotZoneConfig
()
{
if
(
!
this
.
item
.
hotZoneConfigArr
)
{
this
.
item
.
hotZoneConfigArr
=
[];
}
this
.
item
.
hotZoneConfigArr
.
push
({
linkHotZoneIndex
:
1
,
contentList
:
[
{
index
:
0
,
text
:
"
item-1
"
}
]
})
this
.
save
()
}
}
ngOnChanges
()
{
// 添加热区内容配置
addHotZoneConfigItem
(
it
)
{
console
.
log
(
it
.
contentList
)
if
(
!
it
.
contentList
)
{
it
.
contentList
=
[];
}
it
.
contentList
=
[
...
it
.
contentList
,
this
.
getDefaultConfigContentItem
()
];
const
lastIndex
=
it
.
contentList
.
length
-
1
;
const
lastItem
=
it
.
contentList
[
lastIndex
];
this
.
startHotZoneConfigEdit
(
lastIndex
,
lastItem
);
this
.
save
();
}
}
ngOnDestroy
()
{
// 删除热区内容配置
deleteHotZoneConfigItem
(
it
,
index
)
{
if
(
!
it
.
contentList
)
{
it
.
contentList
=
[];
}
it
.
contentList
.
splice
(
index
,
1
);
it
.
contentList
=
[
...
it
.
contentList
];
this
.
save
();
}
}
saveHotZone
(
group
,
e
)
{
// 获取默认热区内容配置
console
.
log
(
'
e:
'
,
e
);
getDefaultConfigContentItem
()
{
const
{
bgItem
,
hotZoneItemArr
}
=
e
;
return
{
group
.
bgItem
=
bgItem
;
text
:
""
,
group
.
hotZoneItemArr
=
hotZoneItemArr
;
image_url
:
""
,
hotZoneIndex
:
null
,
score
:
0
}
}
// 开始编辑表格的一行
startHotZoneConfigEdit
(
id
:
number
,
originData
)
{
if
(
!
this
.
editCache
[
id
+
''
])
{
this
.
editCache
[
id
+
''
]
=
{
edit
:
true
,
data
:
{
...
originData
}
};
}
else
{
this
.
editCache
[
id
+
''
].
edit
=
true
;
}
}
// 取消表格一行的编辑
cancelHotZoneConfigEdit
(
id
:
number
,
originData
):
void
{
this
.
editCache
[
id
+
''
]
=
{
data
:
{
...
originData
},
edit
:
false
};
}
// 保存表格内容
saveHotZoneConfigEdit
(
id
:
number
,
it
):
void
{
Object
.
assign
(
it
.
contentList
[
id
],
this
.
editCache
[
id
+
''
].
data
);
this
.
editCache
[
id
+
''
].
edit
=
false
;
this
.
save
();
this
.
save
();
}
}
// 添加分数组
addScoreConfig
()
{
if
(
!
this
.
item
.
scoreConfigArr
)
{
this
.
item
.
scoreConfigArr
=
[];
}
this
.
item
.
scoreConfigArr
.
push
({
linkHotZoneIndex
:
1
})
this
.
save
()
}
// 复制数据
copyChangeData
()
{
const
jsonData
=
this
.
item
;
const
oInput
=
document
.
createElement
(
'
input
'
);
oInput
.
value
=
JSON
.
stringify
(
jsonData
);
document
.
body
.
appendChild
(
oInput
);
oInput
.
select
();
// 选择对象
document
.
execCommand
(
'
Copy
'
);
// 执行浏览器复制命令
document
.
body
.
removeChild
(
oInput
);
this
.
nzMessageService
.
success
(
'
复制成功
'
);
}
ngAfterViewInit
()
{
}
ngOnChanges
()
{
}
ngOnDestroy
()
{
}
/**
/**
* 储存图片数据
* 储存图片数据
* @param e
* @param e
...
...
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