Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
X
xy_camera
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
xy_camera
Commits
cd81da97
Commit
cd81da97
authored
May 06, 2022
by
范雪寒
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 表单页更新
parent
c5e5cbd5
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
183 additions
and
122 deletions
+183
-122
ComponentBase.ts
form_angular/src/app/form/ComponentBase.ts
+89
-0
form.component.css
form_angular/src/app/form/form.component.css
+27
-0
form.component.html
form_angular/src/app/form/form.component.html
+50
-28
form.component.ts
form_angular/src/app/form/form.component.ts
+17
-94
No files found.
form_angular/src/app/form/ComponentBase.ts
0 → 100644
View file @
cd81da97
import
{
ApplicationRef
,
ChangeDetectorRef
,
ElementRef
,
ViewChild
}
from
"
@angular/core
"
;
export
class
ComponentBase
{
// 储存数据用
saveKey
=
""
;
// 储存对象
item
:
any
=
{};
ngOnChanges
()
{
}
ngOnDestroy
()
{
}
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
}
ngOnInit
()
{
// 获取存储的数据
(
<
any
>
window
).
courseware
.
getData
((
data
)
=>
{
if
(
data
)
{
this
.
item
=
data
;
this
.
itemStr
=
JSON
.
stringify
(
this
.
item
,
null
,
4
).
trim
();
}
this
.
init
();
this
.
changeDetectorRef
.
markForCheck
();
this
.
changeDetectorRef
.
detectChanges
();
this
.
refresh
();
},
this
.
saveKey
);
}
@
ViewChild
(
"
itemTextarea
"
,
{
static
:
true
})
itemTextarea
:
ElementRef
;
copyData
()
{
this
.
itemTextarea
.
nativeElement
.
select
();
document
.
execCommand
(
"
copy
"
);
}
/**
* 储存图片数据
* @param e
*/
onAssetUploadSuccess
(
e
:
any
,
...
key
:
Array
<
string
>
)
{
let
item
=
this
.
item
;
for
(
let
i
=
0
;
i
<
key
.
length
;
i
++
)
{
if
(
i
+
1
==
key
.
length
)
{
item
[
key
[
i
]]
=
e
.
url
;
this
.
save
();
return
;
}
item
=
item
[
key
[
i
]];
}
}
save
()
{
(
<
any
>
window
).
courseware
.
setData
(
this
.
item
,
null
,
this
.
saveKey
);
this
.
itemStr
=
JSON
.
stringify
(
this
.
item
,
null
,
4
).
trim
();
this
.
refresh
();
console
.
log
(
'
this.item =
'
+
JSON
.
stringify
(
this
.
item
));
}
itemStr
=
""
;
load
()
{
this
.
itemStr
=
this
.
itemTextarea
.
nativeElement
.
value
;
if
(
this
.
isJSON
(
this
.
itemStr
))
{
this
.
item
=
JSON
.
parse
(
this
.
itemStr
);
this
.
init
();
this
.
changeDetectorRef
.
markForCheck
();
this
.
changeDetectorRef
.
detectChanges
();
this
.
refresh
();
}
}
isJSON
(
str
)
{
if
(
typeof
str
==
'
string
'
)
{
try
{
var
obj
=
JSON
.
parse
(
str
);
if
(
typeof
obj
==
'
object
'
&&
obj
)
{
return
true
;
}
return
false
;
}
catch
(
e
)
{
return
false
;
}
}
return
false
;
}
/**
* 刷新 渲染页面
*/
refresh
()
{
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
},
1
);
}
init
()
{
}
}
form_angular/src/app/form/form.component.css
View file @
cd81da97
...
...
@@ -33,3 +33,30 @@
padding
:
10px
;
margin
:
10px
;
}
.button-right
{
border-style
:
dotted
;
border-color
:
rgb
(
42
,
142
,
72
);
width
:
100px
;
height
:
50px
;
color
:
rgb
(
42
,
142
,
72
);
background-color
:
white
;
}
.button-wrong
{
border-style
:
dotted
;
border-color
:
rgb
(
180
,
0
,
0
);
width
:
100px
;
height
:
50px
;
color
:
rgb
(
180
,
0
,
0
);
background-color
:
white
;
}
.button-disable
{
border-style
:
dotted
;
border-color
:
black
;
width
:
100px
;
height
:
50px
;
color
:
black
;
background-color
:
white
;
}
\ No newline at end of file
form_angular/src/app/form/form.component.html
View file @
cd81da97
<div
class=
"model-content"
>
<div
style=
"padding: 10px;"
>
<div
style=
"width: 300px;"
align=
'center'
>
<span>
图1:
</span>
<app-upload-image-with-preview
[
picUrl
]="
item
.
pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url
')"
>
</app-upload-image-with-preview>
</div>
<div
style=
"width: 300px; margin-top: 5px;"
align=
'center'
>
<span>
图2:
</span>
<app-upload-image-with-preview
[
picUrl
]="
item
.
pic_url_2
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url_2
')"
>
</app-upload-image-with-preview>
<div
class=
"border"
style=
"width: 1000px;"
>
<textarea
style=
"width: 955px; height: 300px;"
(
blur
)="
load
()"
#
itemTextarea
>
{{itemStr}}
</textarea>
<button
(
click
)="
copyData
();"
>
Copy
</button>
</div>
<div
style=
"width: 300px; margin-top: 15px;"
>
<span>
文本:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
text
"
(
blur
)="
save
()"
>
<div
class=
"border"
style=
"width: 1000px;"
>
<span
style=
"font-size: 20px;"
>
标题:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
title
"
(
blur
)="
save
()"
>
<span
style=
"font-size: 20px;"
>
题目说明:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
questionText
"
(
blur
)="
save
()"
>
<span
style=
"font-size: 20px;"
>
题目说明音频:
</span>
<app-audio-recorder
[
audioUrl
]="
item
.
questionTextAudio
"
(
audioUploaded
)="
onAssetUploadSuccess
($
event
,
'
item
','
questionTextAudio
')"
></app-audio-recorder>
</div>
<div
style=
"margin-top: 5px"
>
<span>
音频:
</span>
<app-audio-recorder
[
audioUrl
]="
item
.
audio_url
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio_url
')"
></app-audio-recorder>
</div>
<div
class=
"border"
style=
"width: 1000px;"
>
<div
*
ngFor=
"let question of item.questions; let i = index"
>
<div
class=
"border"
style=
"width: 950px;"
>
<span
style=
"font-size: 20px;"
>
选项类型:
</span>
<div
*
ngIf=
"question.type=='img'"
>
<button
class=
"button-right"
>
图片
</button>
<button
class=
"button-disable"
(
click
)="
question
.
type=
'txt'
;
save
();"
>
文字
</button>
</div>
<div
*
ngIf=
"question.type=='txt'"
>
<button
class=
"button-disable"
(
click
)="
question
.
type=
'img'
;
save
();"
>
图片
</button>
<button
class=
"button-right"
>
文字
</button>
</div>
<div
*
ngIf=
"question.type=='img'"
>
图片:
<div
style=
"width: 300px;"
>
<app-upload-image-with-preview
[
picUrl
]="
question
.
image
"
(
imageUploaded
)="
onAssetUploadSuccess
($
event
,
'
questions
',
i
,
'
image
')"
>
</app-upload-image-with-preview>
</div>
</div>
<span>
音频:
</span>
<app-audio-recorder
[
audioUrl
]="
question
.
audio
"
(
audioUploaded
)="
onAssetUploadSuccess
($
event
,
'
questions
',
i
,
'
audio
')"
>
</app-audio-recorder>
<div
*
ngIf=
"question.type=='txt'"
>
<span>
文本:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
question
.
text
"
(
blur
)="
save
()"
>
</div>
<br>
<button
style=
"width: 900px; height: 30px; color: red;"
(
click
)="
removeQuestion
(
i
)"
>
删除题目
</button>
</div>
</div>
<div
class=
"border"
style=
"width: 950px;"
>
<button
style=
"width: 900px; height: 100px;"
(
click
)="
addQuestion
()"
>
增加题目
</button>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
form_angular/src/app/form/form.component.ts
View file @
cd81da97
import
{
Component
,
EventEmitter
,
Input
,
OnDestroy
,
OnChanges
,
OnInit
,
Output
,
ApplicationRef
,
ChangeDetectorRef
}
from
'
@angular/core
'
;
import
{
JsonPipe
}
from
'
@angular/common
'
;
import
{
ComponentBase
}
from
'
./ComponentBase
'
;
@
Component
({
...
...
@@ -7,108 +8,30 @@ import { JsonPipe } from '@angular/common';
templateUrl
:
'
./form.component.html
'
,
styleUrls
:
[
'
./form.component.css
'
]
})
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
export
class
FormComponent
extends
ComponentBase
implements
OnInit
,
OnChanges
,
OnDestroy
{
// 储存数据用
saveKey
=
"
test_001
"
;
saveKey
=
"
card_machine
"
;
// 储存对象
item
;
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
}
createShell
()
{
this
.
item
.
wordList
.
push
({
word
:
''
,
item
:
any
=
{
title
:
''
,
questionText
:
''
,
questionTextAudio
:
''
,
questions
:
[],
};
addQuestion
()
{
this
.
item
.
questions
.
push
({
type
:
'
img
'
,
audio
:
''
,
backWord
:
''
,
backWordAudio
:
''
,
text
:
''
,
image
:
''
});
this
.
save
();
}
removeShell
(
idx
)
{
this
.
item
.
wordList
.
splice
(
idx
,
1
);
this
.
save
();
}
ngOnInit
()
{
this
.
item
=
{};
// 获取存储的数据
(
<
any
>
window
).
courseware
.
getData
((
data
)
=>
{
if
(
data
)
{
this
.
item
=
data
;
}
this
.
init
();
this
.
changeDetectorRef
.
markForCheck
();
this
.
changeDetectorRef
.
detectChanges
();
this
.
refresh
();
},
this
.
saveKey
);
}
ngOnChanges
()
{
}
ngOnDestroy
()
{
}
init
()
{
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess
(
e
,
key
)
{
this
.
item
[
key
]
=
e
.
url
;
this
.
save
();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess
(
e
,
key
)
{
this
.
item
[
key
]
=
e
.
url
;
this
.
save
();
}
onWordAudioUploadSuccess
(
e
,
idx
)
{
this
.
item
.
wordList
[
idx
].
audio
=
e
.
url
;
removeQuestion
(
idx
)
{
this
.
item
.
questions
.
splice
(
idx
,
1
);
this
.
save
();
}
onBackWordAudioUploadSuccess
(
e
,
idx
)
{
this
.
item
.
wordList
[
idx
].
backWordAudio
=
e
.
url
;
this
.
save
();
}
/**
* 储存数据
*/
save
()
{
(
<
any
>
window
).
courseware
.
setData
(
this
.
item
,
null
,
this
.
saveKey
);
this
.
refresh
();
console
.
log
(
'
this.item =
'
+
JSON
.
stringify
(
this
.
item
));
}
/**
* 刷新 渲染页面
*/
refresh
()
{
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
},
1
);
}
}
\ 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