|
|
@@ -11,38 +11,49 @@
|
|
|
ref="form"
|
|
|
label-width="120px"
|
|
|
style="width: 100%">
|
|
|
- <el-form-item label="标题"
|
|
|
- prop="title">
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
<el-input v-model.trim="form.title"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="排序值">
|
|
|
<el-input v-model.trim="form.order"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="适用范围"
|
|
|
- prop="tenantId">
|
|
|
+ <el-form-item label="适用范围" prop="tenantId">
|
|
|
<el-select v-model="form.tenantId">
|
|
|
- <el-option label="对内"
|
|
|
- value="1"></el-option>
|
|
|
- <el-option label="对外"
|
|
|
- value="2"></el-option>
|
|
|
+ <el-option label="对内" value="1"></el-option>
|
|
|
+ <el-option label="对外" value="2"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<!-- banner图 && app按钮管理，才需要添加版本号 -->
|
|
|
- <el-form-item label="版本号"
|
|
|
- v-if="type == 3 || type == 6 || type == 8">
|
|
|
+ <el-form-item label="版本号" v-if="type == 3 || type == 6 || type == 8">
|
|
|
<el-input v-model="form.memo"></el-input>
|
|
|
</el-form-item>
|
|
|
<!-- -->
|
|
|
- <el-form-item v-if="type == 3 || type == 6 || type == 5 || type == 8"
|
|
|
- label="链接地址">
|
|
|
+ <el-form-item v-if="type == 3 || type == 6 || type == 5 || type == 8" label="链接地址">
|
|
|
<el-input v-model.trim="form.linkUrl"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item v-else
|
|
|
- label="链接地址"
|
|
|
- prop="linkUrl">
|
|
|
+ <el-form-item v-else label="链接地址" prop="linkUrl">
|
|
|
<el-input v-model.trim="form.linkUrl"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item :label="type == 8 ? '广告图' : '封面图'"
|
|
|
+ <!-- 广告管理才有类型 -->
|
|
|
+ <el-form-item label="广告类型" v-if="type == 8">
|
|
|
+ <el-select v-model="uploadType" :disabled="pageType != 'create'">
|
|
|
+ <el-option label="图片" :value="1"></el-option>
|
|
|
+ <el-option label="视频" :value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item v-if="uploadType == 2 && type == 8" key="coverImage" label="广告视频" prop="coverImage">
|
|
|
+ <div @click="addAdvVideo" style="display: inline-block;">
|
|
|
+ <video class="avatar"
|
|
|
+ v-if="form.coverImage"
|
|
|
+ type="video/mp4"
|
|
|
+ preload="auto"
|
|
|
+ :poster="form.videoCoverImage"
|
|
|
+ :src="form.coverImage"></video>
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-else key="coverImage" :label="type == 8 ? '广告图' : '封面图'"
|
|
|
prop="coverImage">
|
|
|
<el-upload class="avatar-uploader"
|
|
|
action="/api-web/uploadFile"
|
|
|
@@ -51,15 +62,23 @@
|
|
|
accept=".jpg, .jpeg, .png"
|
|
|
:on-success="handleAvatarSuccess"
|
|
|
:before-upload="beforeAvatarUpload">
|
|
|
+ <!-- 判断是图片还是视频 -->
|
|
|
<img v-if="form.coverImage"
|
|
|
- :src="form.coverImage"
|
|
|
- class="avatar" />
|
|
|
+ :src="form.coverImage"
|
|
|
+ class="avatar" />
|
|
|
<i v-else
|
|
|
class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
<p class="imageSize"
|
|
|
v-if="imageSize">上传图片尺寸为：{{ imageSize }}</p>
|
|
|
</el-form-item>
|
|
|
+ <!-- 广告管理才有时长 -->
|
|
|
+ <el-form-item label="显示时长(秒)" prop="attribute1" v-if="type == 8">
|
|
|
+ <el-input type="number" v-model.number="form.attribute1"></el-input>
|
|
|
+ <p style="color: red">建议时长不超过5秒</p>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 知识库管理才会有类型 -->
|
|
|
<el-form-item v-if="type == 7"
|
|
|
label="知识类别"
|
|
|
prop="subType">
|
|
|
@@ -75,7 +94,8 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="内容"
|
|
|
- prop="content">
|
|
|
+ prop="content"
|
|
|
+ :rules="[{ required: type == 8 ? false : true, message: '请编辑内容', trigger: 'blur' }]">
|
|
|
<!-- bidirectional data binding（双向数据绑定） -->
|
|
|
<quill-editor class="ql-editor"
|
|
|
v-model="form.content"
|
|
|
@@ -105,15 +125,15 @@
|
|
|
|
|
|
<el-dialog title="插入视频"
|
|
|
width="500px"
|
|
|
+ @close="onDialogClose('diologForm')"
|
|
|
:visible.sync="dialogFormVisible">
|
|
|
<el-form :model="dialogForm"
|
|
|
ref="diologForm"
|
|
|
:rules="dialogFormRules">
|
|
|
<el-form-item label="封面图地址"
|
|
|
- label-width="90px">
|
|
|
- <!-- <el-input v-model="dialogForm.poster"
|
|
|
- style="width: 100%;"
|
|
|
- autocomplete="off"></el-input> -->
|
|
|
+ prop="poster"
|
|
|
+ :rules="[{required: uploadType == 2 ? true : false, message: '请上传封面图', trigger: 'blur'}]"
|
|
|
+ label-width="120px">
|
|
|
<el-upload class="avatar-uploader"
|
|
|
style="line-height: 0;display: inline-block"
|
|
|
action="/api-web/uploadFile"
|
|
|
@@ -132,7 +152,7 @@
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="视频类型"
|
|
|
- label-width="90px">
|
|
|
+ label-width="120px">
|
|
|
<el-radio-group v-model="formRadio">
|
|
|
<el-radio :label="1">外部链接</el-radio>
|
|
|
<el-radio :label="2">上传</el-radio>
|
|
|
@@ -140,7 +160,7 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="formRadio == 1"
|
|
|
label="视频地址"
|
|
|
- label-width="90px"
|
|
|
+ label-width="120px"
|
|
|
prop="url">
|
|
|
<el-input v-model="dialogForm.url"
|
|
|
style="width: 100%;"
|
|
|
@@ -150,9 +170,6 @@
|
|
|
label="上传视频"
|
|
|
label-width="90px"
|
|
|
prop="videoUrl">
|
|
|
- <!-- <el-input v-model="dialogForm.url"
|
|
|
- style="width: 100%;"
|
|
|
- autocomplete="off"></el-input> -->
|
|
|
<el-upload class="upload-demo"
|
|
|
style="display: inline-block"
|
|
|
v-loading="uploadLoading"
|
|
|
@@ -172,7 +189,11 @@
|
|
|
<i v-else
|
|
|
class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
- <p class="imageSize">只能上传mp4文件, 且不超过100M</p>
|
|
|
+ <p class="imageSize">
|
|
|
+ <!-- 广告管理 & 广告类型为 视频 -->
|
|
|
+ <span v-if="uploadType == 2 && type == 8">上传视频尺寸建议：1242px * 2208px；</span><br />
|
|
|
+ 只能上传mp4文件, 且不超过100M
|
|
|
+ </p>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div slot="footer"
|
|
|
@@ -255,6 +276,15 @@ const titleConfig = {
|
|
|
"ql-upload": "文件"
|
|
|
};
|
|
|
|
|
|
+let validNum = (rule, value, callback) => {
|
|
|
+ if (typeof value == 'string' || value == null) {
|
|
|
+ callback(new Error('请输入显示时长'))
|
|
|
+ } else if (value < 0) {
|
|
|
+ callback(new Error('输入显示时长必须大于0'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+}
|
|
|
// 这里引入修改过的video模块并注册
|
|
|
import Video from "../quill/video.js";
|
|
|
import dayjs from 'dayjs'
|
|
|
@@ -267,8 +297,18 @@ export default {
|
|
|
data () {
|
|
|
let that = this;
|
|
|
const query = this.$route.query
|
|
|
- const url = query.type == 7 ? vaildStudentUrl() + "/#/knowledge" : vaildStudentUrl() + "/#/specialdetail"
|
|
|
+ let url = ''
|
|
|
+ // let url = query.type == 7 ? vaildStudentUrl() + "/#/knowledge" : vaildStudentUrl() + "/#/specialdetail"
|
|
|
+ if(query.type == 7) {
|
|
|
+ url = vaildStudentUrl() + "/#/knowledge"
|
|
|
+ } else if(query.type == 8) {
|
|
|
+ url = ''
|
|
|
+ } else {
|
|
|
+ url = vaildStudentUrl() + "/#/specialdetail"
|
|
|
+ }
|
|
|
return {
|
|
|
+ uploadType: 1, // 上传类型
|
|
|
+ uploadStatus: false,
|
|
|
categoryList: [],
|
|
|
type: query.type,
|
|
|
pageType: query.pageType,
|
|
|
@@ -281,7 +321,7 @@ export default {
|
|
|
formRadio: 1,
|
|
|
lookVisible: false,
|
|
|
dataInfo: {
|
|
|
- title: '知识库13',
|
|
|
+ title: '',
|
|
|
type: query.type,
|
|
|
updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
content: null
|
|
|
@@ -331,6 +371,8 @@ export default {
|
|
|
title: null,
|
|
|
order: null,
|
|
|
coverImage: null,
|
|
|
+ videoCoverImage: null,
|
|
|
+ attribute1: null, // 时长
|
|
|
linkUrl: url,
|
|
|
type: query.type,
|
|
|
status: 1,
|
|
|
@@ -346,10 +388,12 @@ export default {
|
|
|
linkUrl: [
|
|
|
{ required: true, message: "请输入连接地址", trigger: "blur" }
|
|
|
],
|
|
|
+ attribute1: [
|
|
|
+ {required: true, validator: validNum, trigger: 'blur'}
|
|
|
+ ],
|
|
|
coverImage: [
|
|
|
- { required: true, message: "请选择封面图", trigger: "blur" }
|
|
|
+ { required: true, message: '请选择封面图或广告视频', trigger: "blur" }
|
|
|
],
|
|
|
- content: [{ required: true, message: "请编辑内容", trigger: "blur" }],
|
|
|
tenantId: [{ required: true, message: "请选择适用范围", trigger: "change" }],
|
|
|
subType: [{ required: true, message: "请选择知识类别", trigger: "change" }],
|
|
|
},
|
|
|
@@ -363,11 +407,21 @@ export default {
|
|
|
activated () {
|
|
|
const query = this.$route.query
|
|
|
if (query.pageType == "create") {
|
|
|
+ let url = ''
|
|
|
+ if(query.type == 7) {
|
|
|
+ url = vaildStudentUrl() + "/#/knowledge"
|
|
|
+ } else if(query.type == 8) {
|
|
|
+ url = ''
|
|
|
+ } else {
|
|
|
+ url = vaildStudentUrl() + "/#/specialdetail"
|
|
|
+ }
|
|
|
this.form = {
|
|
|
title: null,
|
|
|
order: null,
|
|
|
coverImage: null,
|
|
|
- linkUrl: query.type == 7 ? vaildStudentUrl() + "/#/knowledge" : vaildStudentUrl() + "/#/specialdetail",
|
|
|
+ videoCoverImage: null,
|
|
|
+ attribute1: null,
|
|
|
+ linkUrl: url,
|
|
|
type: query.type,
|
|
|
status: 1,
|
|
|
content: null,
|
|
|
@@ -391,7 +445,9 @@ export default {
|
|
|
init () {
|
|
|
this.getList();
|
|
|
this.addQuillTitle();
|
|
|
-
|
|
|
+ const query = this.$route.query
|
|
|
+ this.type = query.type;
|
|
|
+ this.pageType = query.pageType;
|
|
|
// this.form.type
|
|
|
let tempTitle = {
|
|
|
1: "468px * 552px；图片不能超过 2M；",
|
|
|
@@ -401,24 +457,46 @@ export default {
|
|
|
5: "图片不能超过 2M；",
|
|
|
6: "图片不能超过 2M；",
|
|
|
7: "图片不能超过 2M；",
|
|
|
- 8: "1920px * 1080px； 图片不能超过 2M；"
|
|
|
+ 8: "1242px * 2208px； 图片不能超过 2M；"
|
|
|
};
|
|
|
this.imageSize = tempTitle[this.form.type];
|
|
|
},
|
|
|
+ addAdvVideo() {
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ let dialogForm = this.dialogForm
|
|
|
+ dialogForm.poster = this.form.videoCoverImage
|
|
|
+ if(this.formRadio == 1) {
|
|
|
+ dialogForm.url = this.form.coverImage
|
|
|
+ } else {
|
|
|
+ dialogForm.videoUrl = this.form.coverImage
|
|
|
+ }
|
|
|
+
|
|
|
+ this.uploadStatus = true
|
|
|
+ },
|
|
|
onVideoComfirm (formName) {
|
|
|
this.$refs[formName].validate(valid => {
|
|
|
if (valid) {
|
|
|
let dialogForm = this.dialogForm;
|
|
|
- // 获取富文本组件实例
|
|
|
- let quill = this.editor;
|
|
|
- // 插入图片，res为服务器返回的图片链接地址
|
|
|
- const params = {
|
|
|
- poster: dialogForm.poster,
|
|
|
- url: this.formRadio == 1 ? dialogForm.url : dialogForm.videoUrl,
|
|
|
+ if(this.uploadStatus) {
|
|
|
+ // 添加视频类型
|
|
|
+ let form = this.form
|
|
|
+ form.coverImage = this.formRadio == 1 ? dialogForm.url : dialogForm.videoUrl
|
|
|
+ form.videoCoverImage = dialogForm.poster
|
|
|
+
|
|
|
+ this.uploadStatus = false
|
|
|
+ } else {
|
|
|
+ // 编辑器输入视频
|
|
|
+ // 获取富文本组件实例
|
|
|
+ let quill = this.editor;
|
|
|
+ // 插入图片，res为服务器返回的图片链接地址
|
|
|
+ const params = {
|
|
|
+ poster: dialogForm.poster,
|
|
|
+ url: this.formRadio == 1 ? dialogForm.url : dialogForm.videoUrl,
|
|
|
+ }
|
|
|
+ quill.insertEmbed(this.editorIndex, "video", params);
|
|
|
+ // 调整光标到最后
|
|
|
+ quill.setSelection(this.editorIndex + 1, { preload: false });
|
|
|
}
|
|
|
- quill.insertEmbed(this.editorIndex, "video", params);
|
|
|
- // 调整光标到最后
|
|
|
- quill.setSelection(this.editorIndex + 1, { preload: false });
|
|
|
|
|
|
this.dialogFormVisible = false;
|
|
|
this.dialogForm = {
|
|
|
@@ -431,6 +509,14 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ onDialogClose(diologForm) {
|
|
|
+ this.dialogForm = {
|
|
|
+ poster: null,
|
|
|
+ url: null,
|
|
|
+ videoUrl: null
|
|
|
+ }
|
|
|
+ this.$refs[diologForm].resetFields()
|
|
|
+ },
|
|
|
addQuillTitle () {
|
|
|
const oToolBar = document.querySelector(".ql-toolbar"),
|
|
|
aButton = oToolBar.querySelectorAll("button"),
|
|
|
@@ -544,11 +630,18 @@ export default {
|
|
|
if (res.code == 200) {
|
|
|
let result = res.data;
|
|
|
let form = this.form;
|
|
|
+ if(result.videoCoverImage) {
|
|
|
+ this.uploadType = 2
|
|
|
+ } else {
|
|
|
+ this.uploadType = 1
|
|
|
+ }
|
|
|
this.form = {
|
|
|
id: result.id,
|
|
|
title: result.title,
|
|
|
order: result.order,
|
|
|
coverImage: result.coverImage,
|
|
|
+ videoCoverImage: result.videoCoverImage,
|
|
|
+ attribute1: Number(result.attribute1),
|
|
|
linkUrl: result.linkUrl,
|
|
|
type: result.type,
|
|
|
status: result.status,
|
|
|
@@ -577,7 +670,7 @@ export default {
|
|
|
};
|
|
|
const isImage = imageType[file.type];
|
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
- console.log(isImage, isLt2M)
|
|
|
+ // console.log(isImage, isLt2M)
|
|
|
if (!isImage) {
|
|
|
this.$message.error("只能上传图片格式!");
|
|
|
}
|
|
|
@@ -797,5 +890,6 @@ export default {
|
|
|
}
|
|
|
.imageSize {
|
|
|
color: red;
|
|
|
+ line-height: 1.5;
|
|
|
}
|
|
|
</style>
|
