<template>
|
<div>
|
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
<img alt="example" style="width: 100%" :src="previewImage" />
|
</a-modal>
|
<a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
|
<a-form-model-item label="认证" prop="secret">
|
<a-input v-model="form.secret" autocomplete='new-password' type="password" placeholder="口令">
|
<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
|
</a-input>
|
</a-form-model-item>
|
|
<a-form-model-item label="标题" prop="title">
|
<a-input v-model="form.title" placeholder="限 50字内" />
|
</a-form-model-item>
|
|
<a-form-model-item label="模式切换" prop="common">
|
<a-switch v-model="form.online" />
|
<span class="myTip" v-if="form.online">
|
由系统生成文件
|
</span>
|
<span class="myTip" v-else>
|
本地文件上传
|
</span>
|
</a-form-model-item>
|
|
<a-form-model-item label="日志文件" v-show="!form.online">
|
<a-upload ref="blogFileUpload" :customRequest="customRequest" name="file" :showUploadList="true"
|
@change="handleChange" :default-file-list="form.blogFileList" :beforeUpload="beforeUpload"
|
:data="{'bucketName':bucketName.bucket_article}" accept=".md,.html,.htm,.txt">
|
<a-button>
|
<a-icon type="upload" />限 md/html/txt
|
</a-button>
|
</a-upload>
|
</a-form-model-item>
|
|
<a-form-model-item label="日志内容" v-show="form.online">
|
<a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
|
</a-form-model-item>
|
|
<a-form-model-item label="分类" prop="class">
|
<a-select v-model="form.class" :allowClear="true" mode="default" placeholder="日志分类"
|
:getPopupContainer="getCalendarContainer()">
|
<a-select-option v-for="(item,index) in this.blogArticleType" :key="index" :value="item.id">
|
{{ item.typeName }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
|
<a-form-model-item label="额外设置">
|
<a-switch v-model="form.preference" />
|
</a-form-model-item>
|
|
<div v-show="form.preference" class="myBorder" style="padding:10px;">
|
<a-form-model-item label="起个草稿">
|
<a-switch v-model="form.tempSave" />
|
<span v-show="form.tempSave" class="myTip">
|
临时存储,游客无法浏览
|
</span>
|
</a-form-model-item>
|
|
<a-form-model-item label=" 主类型">
|
<a-select v-model="form.blogType" mode="default" placeholder=""
|
:getPopupContainer="getCalendarContainer()">
|
<a-select-option value="1">
|
markdown
|
</a-select-option>
|
<a-select-option value="2">
|
html
|
</a-select-option>
|
<a-select-option value="3">
|
视频
|
</a-select-option>
|
<a-select-option value="4">
|
音频
|
</a-select-option>
|
<a-select-option value="5">
|
图组
|
</a-select-option>
|
<a-select-option value="9">
|
taking
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
|
<a-form-model-item label="引言" prop="introduce">
|
<a-input v-model="form.introduce" type="textarea" placeholder="限700字数" />
|
</a-form-model-item>
|
|
<a-form-model-item label="封面">
|
<a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
|
:data="{'bucketName':bucketName.bucket_cover}" @change="handleChangeCoverFile"
|
:default-file-list="form.coverFileList" :beforeUpload="beforeUploadCover"
|
accept=".jpg,.png,.jpeg" @preview="handlePreview">
|
<!-- :disabled="form.coverFileList.length>=1" -->
|
<a-button>
|
<a-icon type="upload" />jpg/png/jpeg..
|
</a-button>
|
</a-upload>
|
<!-- <span class="myTip">
|
自动转码,可以传高清图
|
</span> -->
|
</a-form-model-item>
|
|
<a-form-model-item label="图组">
|
<a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture-card"
|
:data="{'bucketName':bucketName.bucket_picture}" @change="handleChangePictureFile"
|
:default-file-list="form.pictureList" :beforeUpload="beforeUploadPicture"
|
accept=".jpg,.png,.jpeg" :multiple="true" @preview="handlePreview">
|
<a-button>
|
<a-icon type="upload" />jpg/png/jpeg..
|
</a-button>
|
</a-upload>
|
</a-form-model-item>
|
|
<a-form-model-item label="视频组">
|
<a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="text"
|
:data="{'bucketName':bucketName.bucket_video}" @change="handleChangeVideoFile"
|
:default-file-list="form.videoList" :beforeUpload="beforeUploadVideo" :multiple="true"
|
accept=".mp4">
|
<a-button>
|
<a-icon type="upload" />mp4
|
</a-button>
|
</a-upload>
|
</a-form-model-item>
|
|
<a-form-model-item label="定时">
|
<a-date-picker v-model="momentDate" show-time type="datetime" placeholder="发布时间"
|
style="width: 100%;" @change="formatDate"
|
:getCalendarContainer="getCalendarContainer()" /><!-- :disabledDate="disabledDate" -->
|
</a-form-model-item>
|
|
<a-form-model-item label="标签">
|
<template v-for="(tag, index) in tags">
|
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
|
<a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
|
{{ `${tag.slice(0, 20)}...` }}
|
</a-tag>
|
</a-tooltip>
|
<a-tag v-else :key="tag" :closable="index >= 0" @close="() => handleClose(tag)">
|
{{ tag }}
|
</a-tag>
|
</template>
|
|
<a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
|
:value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
|
@keyup.enter="handleInputConfirm" />
|
|
<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
|
<a-icon type="plus" /> New Tag
|
</a-tag>
|
</a-form-model-item>
|
|
<div v-bind:class="{'myBorder':form.top}" style="padding: 3px;margin-bottom: 10px;">
|
<a-form-model-item label="置顶">
|
<a-switch v-model="form.top" />
|
</a-form-model-item>
|
|
<div v-show="form.top">
|
<a-form-model-item label="权重">
|
<a-slider v-model="form.sliderValue" :default-value="50" :step="5"
|
:getTooltipPopupContainer="getCalendarContainer()" />
|
<span class="myTip">
|
越小越靠前
|
</span>
|
</a-form-model-item>
|
</div>
|
</div>
|
|
|
<div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;">
|
|
<a-form-model-item label="加锁">
|
<a-switch v-model="form.lock" />
|
<span v-show="!form.lock" class="myTip">
|
默认为公开
|
</span>
|
</a-form-model-item>
|
|
<div v-show="form.lock ">
|
<a-form-model-item label="阅读权限">
|
<a-radio-group v-model="form.auth">
|
<a-radio value="2">
|
私人
|
</a-radio>
|
<a-radio value="3">
|
密码授权
|
</a-radio>
|
</a-radio-group>
|
</a-form-model-item>
|
|
<a-form-model-item label="授权密码" v-show="form.auth==3">
|
<a-input-password v-model="form.password" autocomplete='new-password' type="password"
|
placeholder="独立密码">
|
<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
|
</a-input-password>
|
</a-form-model-item>
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-form-model>
|
</div>
|
</template>
|
|
<script>
|
import moment from "moment";
|
import {
|
sysFileInfoUpload,
|
myFileInfoUpload
|
} from '../../api/fileManage.js';
|
|
import {
|
queryBlogArticleType
|
} from '../../api/blogArticleType.js'
|
|
import myConstant from "../../config/myConstant.js"
|
import md5 from 'js-md5';
|
|
function getBase64(file) {
|
return new Promise((resolve, reject) => {
|
const reader = new FileReader();
|
reader.readAsDataURL(file);
|
reader.onload = () => resolve(reader.result);
|
reader.onerror = error => reject(error);
|
});
|
}
|
|
export default {
|
beforeMount() {
|
queryBlogArticleType({}).then((res) => {
|
this.blogArticleType = res.data;
|
})
|
},
|
data() {
|
let _this = this;
|
let validateContent = (rule, value, callback) => {
|
if (_this.form.online) {
|
//this.$refs.myForm.validateField('content')
|
if (_this.form.content == null || _this.form.content == "") {
|
callback(new Error('内容未填'));
|
}
|
} else {
|
//this.$refs.myForm.validateField('blogFileList')
|
if (_this.form.fileId == null) {
|
callback(new Error('文件未传'));
|
}
|
}
|
callback();
|
};
|
|
return {
|
previewVisible: false,
|
previewImage: '',
|
bucketName: myConstant.bucketName,
|
momentDate: undefined,
|
blogArticleType: [],
|
tags: [],
|
inputVisible: false,
|
inputValue: '',
|
labelCol: {
|
span: 7
|
},
|
wrapperCol: {
|
span: 13
|
},
|
form: {
|
introduce: '',
|
secret: '',
|
title: '',
|
content: '',
|
class: [],
|
tempSave: false,
|
blogType: "1",
|
publishDate: "",
|
lock: false,
|
top: false,
|
sliderValue: 50,
|
auth: 1,
|
password: "",
|
fileId: null,
|
coverFile: null,
|
pictureIds: null,
|
videoIds: null,
|
blogFileList: [],
|
coverFileList: [],
|
pictureList: [],
|
videoList: [],
|
online: false,
|
preference: false,
|
},
|
rules: {
|
title: [{
|
required: true,
|
message: '标题不能为空',
|
trigger: 'blur'
|
},
|
{
|
min: 1,
|
max: 50,
|
message: '字数限制1~50',
|
trigger: 'blur'
|
},
|
],
|
introduce: [{
|
max: 700,
|
message: '字数限制700',
|
trigger: 'blur'
|
}, ],
|
secret: [{
|
required: true,
|
message: '好像这里错了..',
|
trigger: 'blur'
|
}],
|
common: [{
|
validator: validateContent,
|
trigger: []
|
}],
|
// content: [{
|
// max: 10,
|
// required: true,
|
// message: '至少填一下上传内容',
|
// trigger: 'blur'
|
// }, ],
|
// blogFileList: [{
|
// max: 1,
|
// required: true,
|
// message: '文件未上传',
|
// }],
|
class: [{
|
required: true,
|
message: '至少选一个分类',
|
trigger: 'blur'
|
}, ],
|
|
}
|
};
|
},
|
methods: {
|
handleCancel() {
|
this.previewVisible = false;
|
},
|
async handlePreview(file) {
|
if (!file.url && !file.preview) {
|
file.preview = await getBase64(file.originFileObj);
|
}
|
this.previewImage = file.url || file.preview;
|
this.previewVisible = true;
|
},
|
reset() {
|
// this.form.blogFileList = [];
|
// this.form.coverFileList = [];
|
},
|
formatDate(date, dateString) {
|
this.form.publishDate = dateString;
|
},
|
beforeUploadVideo(file, fileList) {
|
return new Promise((resolve, reject) => {
|
if (this.form.secret == null || this.form.secret == "") {
|
this.$message.error('需要正确的授权码');
|
return reject(false);
|
}
|
|
if (this.form.coverFileList.length > 10) {
|
this.$message.error('这里最多上传10个文件');
|
return reject(false);
|
}
|
if (file.size > myConstant.uploadVideoSizeLimit) {
|
this.$message.error('上传文件大小不能超过 200M!');
|
return reject(false);
|
}
|
return resolve(true)
|
});
|
},
|
beforeUploadPicture(file, fileList) {
|
return new Promise((resolve, reject) => {
|
if (this.form.secret == null || this.form.secret == "") {
|
this.$message.error('需要正确的授权码');
|
return reject(false);
|
}
|
|
if (this.form.coverFileList.length > 10) {
|
this.$message.error('这里最多上传10个文件');
|
return reject(false);
|
}
|
if (file.size > myConstant.uploadFileSizeLimit) {
|
this.$message.error('上传文件大小不能超过 2M!');
|
return reject(false);
|
}
|
return resolve(true)
|
});
|
},
|
beforeUploadCover(file, fileList) {
|
return new Promise((resolve, reject) => {
|
if (this.form.secret == null || this.form.secret == "") {
|
this.$message.error('需要正确的授权码');
|
return reject(false);
|
}
|
|
if (this.form.coverFileList.length >= 1) {
|
this.$message.error('这里最多上传一个文件');
|
return reject(false);
|
}
|
if (file.size > myConstant.uploadFileSizeLimit) {
|
this.$message.error('上传文件大小不能超过 2M!');
|
return reject(false);
|
}
|
return resolve(true)
|
});
|
},
|
beforeUpload(file, fileList) {
|
return new Promise((resolve, reject) => {
|
if (this.form.secret == null || this.form.secret == "") {
|
this.$message.error('需要正确的口令..');
|
return reject(false);
|
}
|
|
if (this.form.blogFileList.length >= 1) {
|
this.$message.error('这里最多上传一个文件');
|
return reject(false);
|
}
|
|
if (file.size > myConstant.uploadFileSizeLimit) {
|
this.$message.error('上传文件大小不能超过 2M!');
|
return reject(false);
|
}
|
return resolve(true)
|
});
|
|
},
|
handleChange(info) {
|
this.form.blogFileList = info.fileList;
|
|
if (info.file.status !== 'uploading') {
|
console.log(info.file, info.fileList);
|
}
|
if (info.file.status === 'done') {
|
this.form.fileId = info.file.response.data;
|
this.$message.success(`${info.file.name} 上传成功`);
|
} else if (info.file.status === 'error') {
|
this.$message.error(`${info.file.name} 上传失败`);
|
}
|
|
if (this.form.blogFileList == null || this.form.blogFileList.length == 0) {
|
this.form.fileId = null
|
}
|
},
|
handleChangeCoverFile(info) {
|
this.form.coverFileList = info.fileList;
|
|
if (info.file.status !== 'uploading') {
|
console.log(info.file, info.fileList);
|
}
|
if (info.file.status === 'done') {
|
this.form.coverFile = info.file.response.data;
|
this.$message.success(`${info.file.name} 上传成功`);
|
} else if (info.file.status === 'error') {
|
this.$message.error(`${info.file.name} 上传失败`);
|
}
|
|
if (this.form.coverFileList == null || this.form.coverFileList.length == 0) {
|
this.form.coverFile = null
|
}
|
},
|
handleChangePictureFile(info) {
|
this.form.pictureList = info.fileList;
|
|
if (info.file.status !== 'uploading') {
|
console.log(info.file, info.fileList);
|
}
|
if (info.file.status === 'done') {
|
if (this.form.pictureIds == null || this.form.pictureIds == "") {
|
this.form.pictureIds = info.file.response.data;
|
} else {
|
this.form.pictureIds = this.form.pictureIds + "," + info.file.response.data;
|
}
|
this.$message.success(`${info.file.name} 上传成功`);
|
} else if (info.file.status === 'error') {
|
this.$message.error(`${info.file.name} 上传失败`);
|
}
|
|
if (this.form.pictureList == null || this.form.pictureList.length == 0) {
|
this.form.pictureIds = null
|
}
|
},
|
handleChangeVideoFile(info) {
|
this.form.videoList = info.fileList;
|
|
if (info.file.status !== 'uploading') {
|
console.log(info.file, info.fileList);
|
}
|
if (info.file.status === 'done') {
|
if (this.form.videoIds == null || this.form.videoIds == "") {
|
this.form.videoIds = info.file.response.data;
|
} else {
|
this.form.videoIds = this.form.videoIds + "," + info.file.response.data
|
}
|
this.$message.success(`${info.file.name} 上传成功`);
|
} else if (info.file.status === 'error') {
|
this.$message.error(`${info.file.name} 上传失败`);
|
}
|
|
if (this.form.videoList == null || this.form.videoList.length == 0) {
|
this.form.videoIds = null
|
}
|
},
|
/**
|
* 上传文件
|
*/
|
customRequest(option) {
|
const formData = new FormData()
|
formData.append('file', option.file)
|
formData.append('bucketName', option.data.bucketName)
|
formData.append('authCode', this.form.secret == "" ? "" : md5(this.form.secret))
|
let _this = this
|
myFileInfoUpload(formData).then((res) => {
|
if (res.success) {
|
option.onSuccess(res, option.file)
|
// 在上传成功后进度条显示为99
|
progress.percent = 100
|
// this.$message.success('上传成功')
|
} else {
|
this.$message.error('上传失败：' + res.message)
|
}
|
})
|
|
let progress = {
|
percent: 1
|
}
|
let speed = 100 / (option.file.size / 65000) //上传速度
|
const intervalId = setInterval(() => {
|
// 控制进度条防止在未上传成功时进度条达到100
|
if (progress.percent < 99 && progress.percent + speed < 100) {
|
progress.percent += speed //控制进度条速度
|
option.onProgress(progress) //onProgress接收一个对象{ percent: 进度 }在进度条上显示
|
} else if ((progress.percent < 100)) {
|
progress.percent++
|
} else if (progress.percent >= 100) {
|
clearInterval(intervalId)
|
}
|
}, 500)
|
|
},
|
disabledDate(current) {
|
return current < moment().subtract(1, "day");
|
},
|
getCalendarContainer(trigger) {
|
return trigger => trigger.parentNode;
|
},
|
handleClose(removedTag) {
|
// const tags = this.tags.filter(tag => tag !== removedTag);
|
//console.log(tags);
|
this.tags = this.tags.filter(tag => tag !== removedTag);
|
},
|
showInput() {
|
this.inputVisible = true;
|
this.$nextTick(function() {
|
this.$refs.input.focus();
|
});
|
},
|
handleInputChange(e) {
|
this.inputValue = e.target.value;
|
},
|
handleInputConfirm() {
|
const inputValue = this.inputValue;
|
let tags = this.tags;
|
if (inputValue && tags.indexOf(inputValue) === -1) {
|
tags = [...tags, inputValue];
|
}
|
//console.log(tags);
|
Object.assign(this, {
|
tags,
|
inputVisible: false,
|
inputValue: '',
|
});
|
},
|
|
},
|
};
|
</script>
|
|
<style lang="less">
|
@media screen and(max-width: 575px) {
|
.ant-form-item-label {
|
padding: 8px !important;
|
}
|
}
|
|
.myTip {
|
font-size: 10px;
|
color: #999;
|
}
|
|
.myBorder {
|
border: 1px solid #999;
|
border-radius: 10px;
|
}
|
|
.ant-upload-list-item-info {
|
a {
|
color: #999;
|
}
|
}
|
|
/* tile uploaded pictures */
|
.upload-list-inline>.ant-upload-list-item {
|
float: left;
|
width: 100px;
|
margin-right: 8px;
|
}
|
|
.upload-list-inline>.ant-upload-animate-enter {
|
animation-name: uploadAnimateInlineIn;
|
}
|
|
.upload-list-inline>.ant-upload-animate-leave {
|
animation-name: uploadAnimateInlineOut;
|
}
|
</style>
|
