Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
jj_video_practice
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
jj_video_practice
Commits
d0c9452a
Commit
d0c9452a
authored
Dec 19, 2025
by
kingweight
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
更新视频上传组件
parent
edac7bc6
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
30 additions
and
438 deletions
+30
-438
form.component.html
src/app/form/form.component.html
+18
-11
form.component.ts
src/app/form/form.component.ts
+12
-427
No files found.
src/app/form/form.component.html
View file @
d0c9452a
...
...
@@ -12,28 +12,35 @@
<div
class=
"model-content"
>
<div
<
!-- <
div
id="drop-area"
(dragover)="onDragOver($event)"
(drop)="onDrop($event)"
>
拖拽文件到此区域进行批量上传
</div>
</div>
-->
<div
style=
"width: 100%; display: inline-flex;flex-direction: row;flex-wrap: wrap;"
>
<div
style=
"width: 30% ; margin-left: 2.5%; min-width: 300px;margin-top: 20px;border: 2px dashed;padding: 20px 10px 5px 10px;"
align=
'center'
*
ngFor=
"let data of item.dataArr;index as i"
>
<div
style=
"width: 100px; background-color: white; transform: translateY(-30px);"
>
视频 {{i+1}}
</div>
<div
style=
"width: 80%;"
align=
'center'
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
data
.
title
"
(
blur
)="
save
()"
>
<div
style=
"width: 50% ; margin-left: 2.5%; min-width: 300px; max-width: 650px; margin-top: 20px;border: 2px dashed;padding: 20px 10px 5px 10px;"
align=
'center'
>
<div
style=
"width: 100px; background-color: white; transform: translateY(-30px);"
>
视频
</div>
<div
style=
"margin: 30px; display: flex; align-items: center; "
>
<h3>
单元名称:
</h3>
<textarea
nz-input
[(
ngModel
)]="
item
.
title
"
(
blur
)="
save
()"
style=
" width: 350px; min-height: 60px;"
></textarea>
</div>
<div
style=
"margin: 30px; display: flex; align-items: center; "
>
<h3>
视频互动课名称:
</h3>
<textarea
nz-input
[(
ngModel
)]="
item
.
video_title
"
(
blur
)="
save
()"
style=
" width: 350px; min-height: 60px;"
></textarea>
</div>
<br>
<app-upload-image-with-preview
style=
"width: 80%;"
[
picUrl
]="
data
.
cover
"
(
imageUploaded
)="
onImageUploadSuccess_new
($
event
,
i
)"
>
<app-upload-image-with-preview
style=
"width: 80%;"
[
picUrl
]="
item
.
cover
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
)"
>
</app-upload-image-with-preview>
<app-upload-video
[
videoUrl
]="
data
.
video_url
.
replace
('.
mp4
',
'
_h
.
mp4
')"
[
showUploadBtn
]="
true
"
(
videoUploaded
)="
onVideoUploaded_new
($
event
,
i
)"
(
onCapture
)="
handleOnCapture
($
event
,
i
)"
(
parentRef
)="
onParentRef
($
event
,
i
)"
></app-upload-video>
<app-upload-video
[
videoUrl
]="
item
.
video_url
.
replace
('.
mp4
',
'
_h
.
mp4
')"
[
showUploadBtn
]="
true
"
(
videoUploaded
)="
onVideoUploaded
($
event
)"
(
onCapture
)="
handleOnCapture
($
event
)"
(
parentRef
)="
onParentRef
($
event
)"
></app-upload-video>
<div
style=
"padding: 5px 0;"
align=
'center'
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
data
.
video_url
"
(
blur
)="
save
()"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
video_url
"
(
blur
)="
save
()"
>
</div>
<button
style=
"margin-top: 10px; "
(
click
)="
onRemoveData
(
i
)"
>
删除
</button>
<button
style=
"margin-top: 10px; "
(
click
)="
onRemoveData
(
)"
>
删除视频
</button>
</div>
<button
style=
"width: 30% ;min-width: 300px;height: 170px; margin-top: 20px; margin-left:2.5%;"
(
click
)="
onAddData
()"
>
添加视频
</button>
...
...
src/app/form/form.component.ts
View file @
d0c9452a
...
...
@@ -19,7 +19,10 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
// 储存对象
item
:
any
=
{
dataArr
:
[]
video_url
:
""
,
cover
:
""
,
title
:
""
,
video_title
:
""
,
};
//临时储存对象
tempItem
;
...
...
@@ -52,382 +55,6 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
customTypeGroupArr
=
[
{
name
:
'
输入型文本
'
,
rect
:
true
,
isShowPos
:
true
,
labelArr
:
[
{
type
:
"
inputText
"
,
key
:
"
title
"
,
title
:
"
标题
"
},
{
key
:
"
key
"
,
title
:
"
key
"
},
{
key
:
"
fontName
"
,
title
:
"
字体
"
},
{
key
:
"
fontSize
"
,
title
:
"
大小
"
},
{
key
:
"
fontColor
"
,
title
:
"
颜色
"
},
],
checkbox
:
{
title
:
''
,
list
:
[
{
label
:
'
自动换行
'
,
value
:
'
warp
'
}
]
}
},
{
name
:
'
固定型文本
'
,
text
:
true
,
audio
:
true
,
isShowPos
:
true
,
labelArr
:
[
{
key
:
"
fontName
"
,
title
:
"
字体
"
},
{
key
:
"
fontSize
"
,
title
:
"
大小
"
},
{
key
:
"
fontColor
"
,
title
:
"
颜色
"
},
]
},
{
name
:
'
输入型图片
'
,
rect
:
true
,
isShowPos
:
true
,
labelArr
:
[
{
type
:
"
inputPic
"
,
key
:
"
title
"
,
title
:
"
标题
"
},
{
key
:
"
key
"
,
title
:
"
key
"
,
value
:
""
},
]
},
{
name
:
'
固定型图片
'
,
pic
:
true
,
audio
:
true
,
anchorGroup
:
true
,
isShowPos
:
true
,
},
{
name
:
'
输入型动画
'
,
rect
:
true
,
isShowPos
:
true
,
labelArr
:
[
{
key
:
"
title
"
,
title
:
"
标题
"
},
]
},
{
name
:
'
固定型动画
'
,
rect
:
true
,
anima
:
true
,
audio
:
true
,
isShowPos
:
true
,
},
{
name
:
'
输入型音频
'
,
rect
:
true
,
isShowPos
:
true
,
labelArr
:
[
{
type
:
"
inputAudio
"
,
key
:
"
title
"
,
title
:
"
标题
"
},
{
key
:
"
key
"
,
title
:
"
key
"
,
value
:
""
},
]
},
{
name
:
'
固定型音频
'
,
rect
:
true
,
audio
:
true
,
pic
:
true
,
anim
:
true
,
isShowPos
:
true
,
},
{
name
:
'
数据型文本
'
,
data
:
true
,
labelArr
:
[
{
type
:
"
inputText
"
,
key
:
"
title
"
,
title
:
"
标题
"
},
{
key
:
"
key
"
,
title
:
"
key
"
},
]
},
{
name
:
'
数据型图片
'
,
// data: true,
labelArr
:
[
{
type
:
"
inputPic
"
,
key
:
"
title
"
,
title
:
"
标题
"
,
value
:
""
},
{
key
:
"
key
"
,
title
:
"
key
"
,
value
:
""
},
]
},
{
name
:
'
翻页按钮组
'
,
rect
:
true
,
audio
:
true
,
// radio: {
// title: "按钮",
// list: [
// {label: '上一页', key: 'prev'},
// {label: '下一页', key: 'next'},
// {label: '翻页文本', key: 'text'},
// ]
// },
isShowPos
:
true
,
},
{
name
:
'
录音按钮组
'
,
rect
:
true
,
audio
:
true
,
isShowPos
:
true
,
},
{
name
:
'
文字选项组
'
,
rect
:
true
,
picArr
:
[
{
title
:
'
默认图
'
},
{
title
:
'
正确图
'
},
{
title
:
'
错误图
'
},
],
labelArr
:
[
{
type
:
"
inputText
"
,
key
:
"
title
"
,
title
:
"
标题
"
},
{
key
:
"
key
"
,
title
:
"
key
"
},
{
key
:
"
fontSize
"
,
title
:
"
字体大小
"
},
{
key
:
"
fontName1
"
,
title
:
"
普通字体
"
},
{
key
:
"
fontColor1
"
,
title
:
"
普通颜色
"
},
{
key
:
"
fontName2
"
,
title
:
"
正确字体
"
},
{
key
:
"
fontColor2
"
,
title
:
"
正确颜色
"
},
{
key
:
"
fontName3
"
,
title
:
"
错误字体
"
},
{
key
:
"
fontColor3
"
,
title
:
"
错误颜色
"
},
],
checkbox
:
{
title
:
''
,
list
:
[
{
label
:
'
适配矩形
'
,
key
:
'
isScale
'
},
]
},
isOption
:
true
,
isShowPos
:
true
,
isCopy
:
true
,
},
{
name
:
'
图片选项组
'
,
rect
:
true
,
picArr
:
[
{
title
:
'
输入参考图
'
},
{
title
:
'
默认背景图
'
},
{
title
:
'
正确背景图
'
},
{
title
:
'
错误背景图
'
},
],
labelArr
:
[
{
type
:
"
inputPic
"
,
key
:
"
title
"
,
title
:
"
标题
"
},
{
key
:
"
key
"
,
title
:
"
key
"
},
],
checkbox
:
{
title
:
''
,
list
:
[
{
label
:
'
遮罩
'
,
key
:
'
isMask
'
},
{
label
:
'
适配矩形
'
,
key
:
'
isScale
'
},
]
},
isOption
:
true
,
isShowPos
:
true
,
isCopy
:
true
,
},
{
name
:
'
音频型动画
'
,
rect
:
true
,
anima
:
true
,
labelArr
:
[
{
type
:
"
inputAudio
"
,
key
:
"
title
"
,
title
:
"
标题
"
},
{
key
:
"
key
"
,
title
:
"
key
"
},
],
isShowPos
:
true
,
isCopy
:
true
,
},
{
name
:
'
选项效果组
'
,
picArr
:
[
{
title
:
'
正确效果
'
},
{
title
:
'
错误效果
'
},
],
audioArr
:
[
{
title
:
'
正确音效
'
},
{
title
:
'
错误音效
'
},
],
anchorGroup
:
true
,
isCopy
:
true
,
},
{
name
:
'
数组排列区
'
,
rect
:
true
,
checkbox
:
{
title
:
''
,
list
:
[
{
label
:
'
横向排列
'
,
key
:
'
hor
'
},
]
},
// select: {
// title: '类型',
// list:[
// {label: '拖拽开始区', value:'dragStart'},
// {label: '拖拽结束区', value:'dragEnd'},
// ]
// },
labelArr
:
[
{
key
:
"
id
"
,
title
:
"
id
"
},
{
key
:
"
distanceX
"
,
title
:
"
横向间距
"
},
{
key
:
"
distanceY
"
,
title
:
"
纵向间距
"
},
],
isShowPos
:
true
,
isShowSize
:
true
,
isCopy
:
true
,
},
{
name
:
'
文字排列物
'
,
rect
:
true
,
picArr
:
[
{
title
:
'
默认图
'
},
{
title
:
'
正确图
'
},
{
title
:
'
错误图
'
},
],
labelArr
:
[
{
type
:
"
listInputText
"
,
key
:
"
title
"
,
title
:
"
标题
"
},
{
key
:
"
key
"
,
title
:
"
key
"
},
{
key
:
"
id
"
,
title
:
"
id
"
},
{
key
:
"
fontSize
"
,
title
:
"
字体大小
"
},
{
key
:
"
fontName1
"
,
title
:
"
普通字体
"
},
{
key
:
"
fontColor1
"
,
title
:
"
普通颜色
"
},
{
key
:
"
fontName2
"
,
title
:
"
正确字体
"
},
{
key
:
"
fontColor2
"
,
title
:
"
正确颜色
"
},
{
key
:
"
fontName3
"
,
title
:
"
错误字体
"
},
{
key
:
"
fontColor3
"
,
title
:
"
错误颜色
"
},
],
radio
:
{
title
:
"
文字位置
"
,
list
:
[
{
label
:
'
开头
'
,
key
:
'
start
'
},
{
label
:
'
中间
'
,
key
:
'
middle
'
},
{
label
:
'
结尾
'
,
key
:
'
end
'
},
]
},
// checkbox: {
// title: '',
// list: [
// {label: '结束块', key:'isEndRect'},
// ]
// },
isShowPos
:
true
,
isCopy
:
true
,
},
{
name
:
'
图片排列物
'
,
rect
:
true
,
picArr
:
[
{
title
:
'
输入参考图
'
},
{
title
:
'
默认背景图
'
},
{
title
:
'
正确背景图
'
},
{
title
:
'
错误背景图
'
},
],
labelArr
:
[
{
type
:
"
listInputPic
"
,
key
:
"
title
"
,
title
:
"
标题
"
},
{
key
:
"
key
"
,
title
:
"
key
"
},
{
key
:
"
id
"
,
title
:
"
id
"
},
],
checkbox
:
{
title
:
''
,
list
:
[
{
label
:
'
遮罩
'
,
key
:
'
isMask
'
},
// {label: '结束块', key:'isEndRect'},
]
},
isShowPos
:
true
,
isCopy
:
true
,
},
{
name
:
'
拖拽文字组
'
,
rect
:
true
,
picArr
:
[
{
title
:
'
默认图
'
},
{
title
:
'
正确图
'
},
{
title
:
'
错误图
'
},
],
labelArr
:
[
{
type
:
"
listInputText
"
,
key
:
"
title
"
,
title
:
"
标题
"
},
{
key
:
"
key
"
,
title
:
"
key
"
},
{
key
:
"
fontSize
"
,
title
:
"
字体大小
"
},
{
key
:
"
fontName1
"
,
title
:
"
普通字体
"
},
{
key
:
"
fontColor1
"
,
title
:
"
普通颜色
"
},
{
key
:
"
fontName2
"
,
title
:
"
正确字体
"
},
{
key
:
"
fontColor2
"
,
title
:
"
正确颜色
"
},
{
key
:
"
fontName3
"
,
title
:
"
错误字体
"
},
{
key
:
"
fontColor3
"
,
title
:
"
错误颜色
"
},
],
checkbox
:
{
title
:
''
,
list
:
[
{
label
:
'
结束块
'
,
key
:
'
isEndRect
'
},
]
},
isShowPos
:
true
,
isCopy
:
true
,
},
{
name
:
'
拖拽图片组
'
,
rect
:
true
,
picArr
:
[
{
title
:
'
输入参考图
'
},
{
title
:
'
默认背景图
'
},
{
title
:
'
正确背景图
'
},
{
title
:
'
错误背景图
'
},
],
labelArr
:
[
{
type
:
"
listInputPic
"
,
key
:
"
title
"
,
title
:
"
标题
"
},
{
key
:
"
key
"
,
title
:
"
key
"
},
],
checkbox
:
{
title
:
''
,
list
:
[
{
label
:
'
遮罩
'
,
key
:
'
isMask
'
},
{
label
:
'
结束块
'
,
key
:
'
isEndRect
'
},
]
},
isShowPos
:
true
,
isCopy
:
true
,
},
];
curSelectItem
;
...
...
@@ -528,7 +155,6 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
console
.
log
(
"
this.item:
"
,
JSON
.
stringify
(
this
.
item
));
this
.
init
();
this
.
changeDetectorRef
.
markForCheck
();
this
.
changeDetectorRef
.
detectChanges
();
this
.
refresh
();
...
...
@@ -733,41 +359,6 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
}
init
()
{
if
(
!
this
.
item
.
quesArr
)
{
this
.
item
.
quesArr
=
[];
}
if
(
!
this
.
item
.
partArr
)
{
this
.
item
.
partArr
=
[];
}
// 兼容旧数据结构:如果视频节点没有questionArr,则转换为新结构
if
(
this
.
item
.
quesArr
)
{
this
.
item
.
quesArr
.
forEach
(
ques
=>
{
if
(
!
ques
.
questionArr
)
{
// 旧数据结构:直接有type和optionArr
if
(
ques
.
type
)
{
ques
.
questionArr
=
[{
type
:
ques
.
type
,
text
:
ques
.
text
||
""
,
optionArr
:
ques
.
optionArr
||
[]
}];
// 保留原有属性,但主要使用questionArr
}
else
{
// 新节点但没有questionArr,初始化
ques
.
questionArr
=
[{
type
:
"
select
"
,
text
:
""
,
optionArr
:
[]
}];
}
}
});
}
}
...
...
@@ -919,7 +510,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
onImageUploadSuccess
(
e
)
{
this
.
item
.
file_url
=
e
.
url
;
this
.
item
.
video_cover_pic
=
e
.
url
;
this
.
save
();
}
...
...
@@ -1152,11 +743,11 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
}
// 截图
handleOnCapture
(
e
,
index
)
{
handleOnCapture
(
e
)
{
console
.
log
(
e
)
const
href
=
URL
.
createObjectURL
(
e
)
const
box
=
document
.
createElement
(
'
a
'
)
box
.
download
=
this
.
item
.
dataArr
[
index
].
title
?
this
.
item
.
dataArr
[
index
]
.
title
+
"
.jpg
"
:
"
未命名
"
+
"
.jpg
"
box
.
download
=
this
.
item
.
title
?
this
.
item
.
title
+
"
.jpg
"
:
"
未命名
"
+
"
.jpg
"
box
.
href
=
href
box
.
click
()
}
...
...
@@ -1178,12 +769,9 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
/**
* 删除卡片
*/
onRemoveData
(
index
)
{
let
data
=
this
.
item
.
dataArr
[
index
]
if
(
data
)
{
this
.
item
.
dataArr
.
splice
(
index
,
1
)
this
.
save
()
}
onRemoveData
()
{
}
/** 添加卡片 */
...
...
@@ -1196,11 +784,8 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this
.
save
()
}
onParentRef
(
e
,
index
)
{
const
item
=
this
.
item
.
dataArr
[
index
];
if
(
item
.
video_url
||
!
item
.
batch
){
return
;
}
onParentRef
(
e
)
{
const
item
=
this
.
item
;
const
uploadXHRArgs
:
UploadXHRArgs
=
{
file
:
item
.
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