|
@@ -9,7 +9,10 @@
|
|
|
style="width: 100%"
|
|
|
>
|
|
|
<el-form-item label="标题" prop="title">
|
|
|
- <el-input v-model.trim="form.title" placeholder="请输入标题"></el-input>
|
|
|
+ <el-input
|
|
|
+ v-model.trim="form.title"
|
|
|
+ placeholder="请输入标题"
|
|
|
+ ></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="排序值">
|
|
|
<el-input
|
|
@@ -54,11 +57,12 @@
|
|
|
:options="editorOption"
|
|
|
@change="onEditorChange($event)"
|
|
|
></quill-editor>
|
|
|
+ <!-- :on-success="handleSuccess" -->
|
|
|
|
|
|
<el-upload
|
|
|
class="ivu-upload"
|
|
|
:show-upload-list="false"
|
|
|
- :on-success="handleSuccess"
|
|
|
+ :http-request="handleSuccess"
|
|
|
accept=".jpg, .jpeg, .png, .gif"
|
|
|
:max-size="2048"
|
|
|
multiple
|
|
@@ -94,8 +98,8 @@
|
|
|
{
|
|
|
required: uploadType == 2 ? true : false,
|
|
|
message: '请上传封面图',
|
|
|
- trigger: 'blur',
|
|
|
- },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
]"
|
|
|
label-width="120px"
|
|
|
>
|
|
@@ -107,11 +111,15 @@
|
|
|
:show-file-list="false"
|
|
|
v-loading="uploadImgLoading"
|
|
|
accept=".jpg, .jpeg, .png, .gif"
|
|
|
- :on-success="handleImgSuccess"
|
|
|
+ :http-request="handleImgSuccess"
|
|
|
:on-error="handleUploadImgError"
|
|
|
:before-upload="beforeImgUpload"
|
|
|
>
|
|
|
- <img v-if="dialogForm.poster" :src="dialogForm.poster" class="avatar" />
|
|
|
+ <img
|
|
|
+ v-if="dialogForm.poster"
|
|
|
+ :src="dialogForm.poster"
|
|
|
+ class="avatar"
|
|
|
+ />
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
@@ -146,7 +154,7 @@
|
|
|
:action="ossUploadUrl"
|
|
|
:data="dataObj"
|
|
|
:before-upload="beforeUpload"
|
|
|
- :on-success="handleUploadSuccess"
|
|
|
+ :http-request="handleUploadSuccess"
|
|
|
:on-error="handleUploadError"
|
|
|
:show-file-list="false"
|
|
|
accept=".mp4"
|
|
@@ -173,7 +181,9 @@
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="onVideoComfirm('diologForm')">确 定</el-button>
|
|
|
+ <el-button type="primary" @click="onVideoComfirm('diologForm')"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
|
|
@@ -189,7 +199,10 @@
|
|
|
<p>{{ typeCheck(dataInfo.type) }}</p>
|
|
|
<p>{{ dataInfo.updateTime }}</p>
|
|
|
</div>
|
|
|
- <div class="msgWrap quill-editor ql-editor" v-html="dataInfo.content"></div>
|
|
|
+ <div
|
|
|
+ class="msgWrap quill-editor ql-editor"
|
|
|
+ v-html="dataInfo.content"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
@@ -197,6 +210,7 @@
|
|
|
<script>
|
|
|
import { policy } from "@/api/appTenant";
|
|
|
import { newsQueryId, newsAdd, newsUpdate } from "@/api/contentManager";
|
|
|
+import { getUploadSign, onOnlyFileUpload } from "@/helpers/oss-file-upload";
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
import { vaildStudentUrl } from "@/utils/validate";
|
|
|
import "quill/dist/quill.core.css";
|
|
@@ -219,7 +233,7 @@ const toolbarOptions = [
|
|
|
[{ font: [] }], // 字体种类
|
|
|
[{ align: [] }], // 对齐方式
|
|
|
["clean"], // 清除文本格式
|
|
|
- ["image", "video"], // 链接、图片、视频
|
|
|
+ ["image", "video"] // 链接、图片、视频
|
|
|
// ["link", "image", "video"] // 链接、图片、视频
|
|
|
];
|
|
|
// 标题
|
|
@@ -246,7 +260,7 @@ const titleConfig = {
|
|
|
"ql-image": "图片",
|
|
|
"ql-video": "视频",
|
|
|
"ql-clean": "清除字体样式",
|
|
|
- "ql-upload": "文件",
|
|
|
+ "ql-upload": "文件"
|
|
|
};
|
|
|
|
|
|
// 这里引入修改过的video模块并注册
|
|
@@ -257,7 +271,7 @@ export default {
|
|
|
props: ["options", "typeList"],
|
|
|
name: "contentOperation",
|
|
|
components: {
|
|
|
- quillEditor,
|
|
|
+ quillEditor
|
|
|
},
|
|
|
data() {
|
|
|
let that = this;
|
|
@@ -279,7 +293,7 @@ export default {
|
|
|
title: "",
|
|
|
type: query.type,
|
|
|
updateTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
|
|
- content: null,
|
|
|
+ content: null
|
|
|
},
|
|
|
editorIndex: 0, // 光标位置
|
|
|
editorOption: {
|
|
@@ -288,7 +302,7 @@ export default {
|
|
|
toolbar: {
|
|
|
container: toolbarOptions,
|
|
|
handlers: {
|
|
|
- image: function (value) {
|
|
|
+ image: function(value) {
|
|
|
if (value) {
|
|
|
// 调用iview图片上传
|
|
|
document.querySelector(".ivu-upload .el-upload").click();
|
|
@@ -296,7 +310,7 @@ export default {
|
|
|
this.quill.format("image", false);
|
|
|
}
|
|
|
},
|
|
|
- video: function (value) {
|
|
|
+ video: function(value) {
|
|
|
if (value) {
|
|
|
that.dialogFormVisible = true;
|
|
|
let editor = that.$refs.myQuillEditor.quill;
|
|
@@ -305,22 +319,22 @@ export default {
|
|
|
} else {
|
|
|
this.quill.format("image", false);
|
|
|
}
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
dialogForm: {
|
|
|
poster: null,
|
|
|
url: null,
|
|
|
- videoUrl: null,
|
|
|
+ videoUrl: null
|
|
|
},
|
|
|
uploadLoading: false,
|
|
|
uploadImgLoading: false,
|
|
|
fileList: [],
|
|
|
dialogFormRules: {
|
|
|
url: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
|
|
|
- videoUrl: [{ required: true, message: "请上传视频", trigger: "blur" }],
|
|
|
+ videoUrl: [{ required: true, message: "请上传视频", trigger: "blur" }]
|
|
|
},
|
|
|
outUrlRadio: 0, // 是否使用外部连接,默认不使用
|
|
|
form: {
|
|
@@ -330,7 +344,7 @@ export default {
|
|
|
type: query.type,
|
|
|
status: 0,
|
|
|
content: null,
|
|
|
- organIdList: [],
|
|
|
+ organIdList: []
|
|
|
},
|
|
|
rules: {
|
|
|
title: [
|
|
@@ -339,10 +353,12 @@ export default {
|
|
|
min: 2,
|
|
|
max: 30,
|
|
|
message: "长度在 2 到 30 个字符",
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
],
|
|
|
- organIdList: [{ required: true, message: "请选择分部", trigger: "change" }],
|
|
|
+ organIdList: [
|
|
|
+ { required: true, message: "请选择分部", trigger: "change" }
|
|
|
+ ]
|
|
|
},
|
|
|
imageSize: null,
|
|
|
dataObj: {
|
|
@@ -352,12 +368,12 @@ export default {
|
|
|
KSSAccessKeyId: "",
|
|
|
// dir: "",
|
|
|
acl: "public-read",
|
|
|
- name: "",
|
|
|
+ name: ""
|
|
|
// bucket_name: props.bucket_name
|
|
|
},
|
|
|
// ossUploadUrl: "https://ks3-cn-beijing.ksyuncs.com/" + "news-info",
|
|
|
ossUploadUrl: `https://gyt.ks3-cn-beijing.ksyuncs.com`,
|
|
|
- bucket_name: "gyt",
|
|
|
+ bucket_name: "gyt"
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -378,14 +394,14 @@ export default {
|
|
|
5: "图片不能超过 2M;",
|
|
|
6: "图片不能超过 2M;",
|
|
|
7: "图片不能超过 2M;",
|
|
|
- 8: "1242px * 2208px; 图片不能超过 2M;",
|
|
|
+ 8: "1242px * 2208px; 图片不能超过 2M;"
|
|
|
};
|
|
|
this.imageSize = tempTitle[this.form.type];
|
|
|
|
|
|
this.$refs["form"].clearValidate();
|
|
|
},
|
|
|
onVideoComfirm(formName) {
|
|
|
- this.$refs[formName].validate((valid) => {
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
if (valid) {
|
|
|
let dialogForm = this.dialogForm;
|
|
|
// 编辑器输入视频
|
|
@@ -394,7 +410,7 @@ export default {
|
|
|
// 插入图片,res为服务器返回的图片链接地址
|
|
|
const params = {
|
|
|
poster: dialogForm.poster,
|
|
|
- url: this.formRadio == 1 ? dialogForm.url : dialogForm.videoUrl,
|
|
|
+ url: this.formRadio == 1 ? dialogForm.url : dialogForm.videoUrl
|
|
|
};
|
|
|
quill.insertEmbed(this.editorIndex, "video", params);
|
|
|
// 调整光标到最后
|
|
@@ -404,7 +420,7 @@ export default {
|
|
|
this.dialogForm = {
|
|
|
poster: null,
|
|
|
url: null,
|
|
|
- videoUrl: null,
|
|
|
+ videoUrl: null
|
|
|
};
|
|
|
} else {
|
|
|
return false;
|
|
@@ -415,7 +431,7 @@ export default {
|
|
|
this.dialogForm = {
|
|
|
poster: null,
|
|
|
url: null,
|
|
|
- videoUrl: null,
|
|
|
+ videoUrl: null
|
|
|
};
|
|
|
this.$refs[diologForm].resetFields();
|
|
|
},
|
|
@@ -423,21 +439,23 @@ export default {
|
|
|
const oToolBar = document.querySelector(".ql-toolbar"),
|
|
|
aButton = oToolBar.querySelectorAll("button"),
|
|
|
aSelect = oToolBar.querySelectorAll("select");
|
|
|
- aButton.forEach(function (item) {
|
|
|
+ aButton.forEach(function(item) {
|
|
|
if (item.className === "ql-script") {
|
|
|
item.value === "sub" ? (item.title = "下标") : (item.title = "上标");
|
|
|
} else if (item.className === "ql-indent") {
|
|
|
- item.value === "+1" ? (item.title = "向右缩进") : (item.title = "向左缩进");
|
|
|
+ item.value === "+1"
|
|
|
+ ? (item.title = "向右缩进")
|
|
|
+ : (item.title = "向左缩进");
|
|
|
} else {
|
|
|
item.title = titleConfig[item.classList[0]];
|
|
|
}
|
|
|
});
|
|
|
- aSelect.forEach(function (item) {
|
|
|
+ aSelect.forEach(function(item) {
|
|
|
item.parentNode.title = titleConfig[item.classList[0]];
|
|
|
});
|
|
|
},
|
|
|
onSubmit(formName) {
|
|
|
- this.$refs[formName].validate(async (valid) => {
|
|
|
+ this.$refs[formName].validate(async valid => {
|
|
|
if (valid) {
|
|
|
let { organIdList, linkUrl, content, ...rest } = this.form;
|
|
|
if (this.outUrlRadio == 1) {
|
|
@@ -449,7 +467,7 @@ export default {
|
|
|
...rest,
|
|
|
linkUrl,
|
|
|
content,
|
|
|
- organIdList: organIdList ? organIdList.join(",") : null,
|
|
|
+ organIdList: organIdList ? organIdList.join(",") : null
|
|
|
};
|
|
|
if (this.pageType == "create") {
|
|
|
if (form.id) {
|
|
@@ -457,11 +475,11 @@ export default {
|
|
|
delete form.id;
|
|
|
}
|
|
|
// return false
|
|
|
- await newsAdd(form).then((res) => {
|
|
|
+ await newsAdd(form).then(res => {
|
|
|
this.messageTips("添加", res);
|
|
|
});
|
|
|
} else if (this.pageType == "update") {
|
|
|
- await newsUpdate(form).then((res) => {
|
|
|
+ await newsUpdate(form).then(res => {
|
|
|
this.messageTips("修改", res);
|
|
|
});
|
|
|
}
|
|
@@ -470,7 +488,7 @@ export default {
|
|
|
let isError = document.getElementsByClassName("is-error");
|
|
|
isError[0].scrollIntoView({
|
|
|
block: "center",
|
|
|
- behavior: "smooth",
|
|
|
+ behavior: "smooth"
|
|
|
});
|
|
|
});
|
|
|
return false;
|
|
@@ -486,24 +504,35 @@ export default {
|
|
|
this.$message.error(res.msg);
|
|
|
}
|
|
|
},
|
|
|
- handleSuccess(res) {
|
|
|
+ async handleSuccess(info) {
|
|
|
// 获取富文本组件实例
|
|
|
- this.uploadImgLoading = false;
|
|
|
- let quill = this.editor;
|
|
|
- // 如果上传成功
|
|
|
- let url = this.ossUploadUrl + "/" + this.dataObj.key;
|
|
|
- if (url) {
|
|
|
- // 获取光标所在位置
|
|
|
- let length = quill.getSelection().index;
|
|
|
+ try {
|
|
|
+ const obj = {
|
|
|
+ policy: info.data.policy,
|
|
|
+ signature: info.data.signature,
|
|
|
+ key: info.data.key,
|
|
|
+ KSSAccessKeyId: info.data.kssAccessKeyId,
|
|
|
+ acl: "public-read",
|
|
|
+ name: info.data.key,
|
|
|
+ file: info.file
|
|
|
+ };
|
|
|
+ const url = await onOnlyFileUpload(this.ossUploadUrl, obj);
|
|
|
+ let quill = this.editor;
|
|
|
+ // 如果上传成功
|
|
|
+ if (url) {
|
|
|
+ // 获取光标所在位置
|
|
|
+ let length = quill.getSelection().index;
|
|
|
|
|
|
- // 插入图片,res为服务器返回的图片链接地址
|
|
|
- quill.insertEmbed(length, "image", url);
|
|
|
- // 调整光标到最后
|
|
|
- quill.setSelection(length + 1);
|
|
|
- } else {
|
|
|
- // 提示信息,需引入Message
|
|
|
- this.$message.error("图片插入失败");
|
|
|
- }
|
|
|
+ // 插入图片,res为服务器返回的图片链接地址
|
|
|
+ quill.insertEmbed(length, "image", url);
|
|
|
+ // 调整光标到最后
|
|
|
+ quill.setSelection(length + 1);
|
|
|
+ } else {
|
|
|
+ // 提示信息,需引入Message
|
|
|
+ this.$message.error("图片插入失败");
|
|
|
+ }
|
|
|
+ } catch {}
|
|
|
+ this.uploadImgLoading = false;
|
|
|
},
|
|
|
onReSet(formName) {
|
|
|
this.form = {
|
|
@@ -513,7 +542,7 @@ export default {
|
|
|
type: this.type,
|
|
|
status: 1,
|
|
|
content: null,
|
|
|
- organIdList: [],
|
|
|
+ organIdList: []
|
|
|
};
|
|
|
this.$refs[formName].resetFields();
|
|
|
},
|
|
@@ -526,14 +555,14 @@ export default {
|
|
|
setTimeout(() => {
|
|
|
let imgNode = document.querySelectorAll(".msgWrap img");
|
|
|
if (imgNode.length > 0) {
|
|
|
- imgNode.forEach((item) => {
|
|
|
+ imgNode.forEach(item => {
|
|
|
item.style.width = "100%";
|
|
|
});
|
|
|
}
|
|
|
|
|
|
let videoNode = document.querySelectorAll(".msgWrap .ql-video");
|
|
|
if (videoNode.length > 0) {
|
|
|
- videoNode.forEach((item) => {
|
|
|
+ videoNode.forEach(item => {
|
|
|
item.style.width = "100%";
|
|
|
item.style.height = "195px";
|
|
|
});
|
|
@@ -545,7 +574,7 @@ export default {
|
|
|
if (this.pageType == "create") {
|
|
|
return;
|
|
|
} else {
|
|
|
- await newsQueryId({ id: this.options.id }).then((res) => {
|
|
|
+ await newsQueryId({ id: this.options.id }).then(res => {
|
|
|
if (res.code == 200) {
|
|
|
let result = res.data;
|
|
|
let organ = result.organIdList ? result.organIdList.split(",") : [];
|
|
@@ -562,11 +591,11 @@ export default {
|
|
|
linkUrl: result.linkUrl,
|
|
|
type: result.type,
|
|
|
status: result.status,
|
|
|
- organIdList: organ.map((item) => {
|
|
|
+ organIdList: organ.map(item => {
|
|
|
return +item;
|
|
|
}),
|
|
|
content: result.content,
|
|
|
- subType: result.subType,
|
|
|
+ subType: result.subType
|
|
|
};
|
|
|
this.dataInfo.updateTime = result.updateTime;
|
|
|
}
|
|
@@ -577,19 +606,30 @@ export default {
|
|
|
this.uploadImgLoading = false;
|
|
|
this.$message.error("上传失败");
|
|
|
},
|
|
|
- handleImgSuccess(res, file) {
|
|
|
+ async handleImgSuccess(info) {
|
|
|
+ try {
|
|
|
+ const obj = {
|
|
|
+ policy: info.data.policy,
|
|
|
+ signature: info.data.signature,
|
|
|
+ key: info.data.key,
|
|
|
+ KSSAccessKeyId: info.data.kssAccessKeyId,
|
|
|
+ acl: "public-read",
|
|
|
+ name: info.data.key,
|
|
|
+ file: info.file
|
|
|
+ };
|
|
|
+ const url = await onOnlyFileUpload(this.ossUploadUrl, obj);
|
|
|
+ if (url) {
|
|
|
+ this.dialogForm.poster = url;
|
|
|
+ } else {
|
|
|
+ this.$message.error("上传失败");
|
|
|
+ }
|
|
|
+ } catch {}
|
|
|
this.uploadImgLoading = false;
|
|
|
- let url = this.ossUploadUrl + "/" + this.dataObj.key;
|
|
|
- if (url) {
|
|
|
- this.dialogForm.poster = url;
|
|
|
- } else {
|
|
|
- this.$message.error("上传失败");
|
|
|
- }
|
|
|
},
|
|
|
async beforeImgUpload(file) {
|
|
|
const imageType = {
|
|
|
"image/png": true,
|
|
|
- "image/jpeg": true,
|
|
|
+ "image/jpeg": true
|
|
|
};
|
|
|
const isImage = imageType[file.type];
|
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
@@ -613,12 +653,12 @@ export default {
|
|
|
postData: {
|
|
|
filename: fileName,
|
|
|
acl: "public-read",
|
|
|
- key: key,
|
|
|
- unknowValueField: [],
|
|
|
- },
|
|
|
+ key: key
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
- const res = await policy(obj);
|
|
|
+ // const res = await policy(obj);
|
|
|
+ const res = await getUploadSign(obj);
|
|
|
this.dataObj = {
|
|
|
policy: res.data.policy,
|
|
|
signature: res.data.signature,
|
|
@@ -626,7 +666,7 @@ export default {
|
|
|
KSSAccessKeyId: res.data.kssAccessKeyId,
|
|
|
// dir: "",
|
|
|
acl: "public-read",
|
|
|
- name: fileName,
|
|
|
+ name: fileName
|
|
|
// bucket_name: props.bucket_name
|
|
|
};
|
|
|
} catch (e) {
|
|
@@ -641,7 +681,7 @@ export default {
|
|
|
2: "热门资讯",
|
|
|
4: "专项训练",
|
|
|
7: "知识库",
|
|
|
- 19: "系统通知",
|
|
|
+ 19: "系统通知"
|
|
|
};
|
|
|
return params[type] ? params[type] : "管乐迷";
|
|
|
},
|
|
@@ -655,7 +695,7 @@ export default {
|
|
|
6: 5,
|
|
|
7: 6,
|
|
|
8: 7,
|
|
|
- 19: 8,
|
|
|
+ 19: 8
|
|
|
};
|
|
|
return tempTitle[type];
|
|
|
},
|
|
@@ -683,11 +723,12 @@ export default {
|
|
|
filename: fileName,
|
|
|
acl: "public-read",
|
|
|
key: key,
|
|
|
- unknowValueField: [],
|
|
|
- },
|
|
|
+ unknowValueField: []
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
- const res = await policy(obj);
|
|
|
+ // const res = await policy(obj);
|
|
|
+ const res = await getUploadSign(obj);
|
|
|
this.dataObj = {
|
|
|
policy: res.data.policy,
|
|
|
signature: res.data.signature,
|
|
@@ -695,7 +736,7 @@ export default {
|
|
|
KSSAccessKeyId: res.data.kssAccessKeyId,
|
|
|
// dir: "",
|
|
|
acl: "public-read",
|
|
|
- name: fileName,
|
|
|
+ name: fileName
|
|
|
// bucket_name: props.bucket_name
|
|
|
};
|
|
|
} catch (e) {
|
|
@@ -708,25 +749,36 @@ export default {
|
|
|
this.uploadLoading = false;
|
|
|
this.$message.error("上传视频失败");
|
|
|
},
|
|
|
- handleUploadSuccess(file, fileList) {
|
|
|
+ async handleUploadSuccess(info) {
|
|
|
+ try {
|
|
|
+ const obj = {
|
|
|
+ policy: info.data.policy,
|
|
|
+ signature: info.data.signature,
|
|
|
+ key: info.data.key,
|
|
|
+ KSSAccessKeyId: info.data.kssAccessKeyId,
|
|
|
+ acl: "public-read",
|
|
|
+ name: info.data.key,
|
|
|
+ file: info.file
|
|
|
+ };
|
|
|
+ const url = await onOnlyFileUpload(this.ossUploadUrl, obj);
|
|
|
+ if (url) {
|
|
|
+ this.$message.success("上传视频成功");
|
|
|
+ this.dialogForm.videoUrl = url;
|
|
|
+ } else {
|
|
|
+ this.$message.error("上传视频失败");
|
|
|
+ }
|
|
|
+ } catch {}
|
|
|
this.uploadLoading = false;
|
|
|
- let url = this.ossUploadUrl + "/" + this.dataObj.key;
|
|
|
- if (url) {
|
|
|
- this.$message.success("上传视频成功");
|
|
|
- this.dialogForm.videoUrl = url;
|
|
|
- } else {
|
|
|
- this.$message.error("上传视频失败");
|
|
|
- }
|
|
|
},
|
|
|
handleExceed(files, fileList) {
|
|
|
this.$message.error("您已上传过视频");
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
computed: {
|
|
|
editor() {
|
|
|
return this.$refs.myQuillEditor.quill;
|
|
|
- },
|
|
|
- },
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|