From 87317f44d9cc20ad70b6971168667e1c843e03d8 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 26 Aug 2022 01:16:50 +0800
Subject: [PATCH] 添加上传进度条 添加日志统计文字
---
src/components/mini/box10-add.vue | 372 ++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 298 insertions(+), 74 deletions(-)
diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue
index 8a33c45..e7f0ea4 100644
--- a/src/components/mini/box10-add.vue
+++ b/src/components/mini/box10-add.vue
@@ -1,23 +1,32 @@
<template>
- <div class="myFrom">
- <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-form-model-item label="标题">
+ <div>
+ <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="模式切换">
+ <a-form-model-item label="模式切换" prop="common">
<a-switch v-model="form.online" />
- <span class="myTip">
- 本地编辑/由系统生成文件
+ <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 action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
- :default-file-list="form.blogFileList">
+ <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 文件
+ <a-icon type="upload" />限 markdown/html
</a-button>
</a-upload>
</a-form-model-item>
@@ -26,42 +35,51 @@
<a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
</a-form-model-item>
- <a-form-model-item label="分类">
- <a-select v-model="form.class" :allowClear="true" mode="multiple" placeholder="多选(至少一个)"
+ <a-form-model-item label="分类" prop="class">
+ <a-select v-model="form.class" :allowClear="true" mode="default" placeholder="日志分类"
:getPopupContainer="getCalendarContainer()">
- <a-select-option value="shanghai">
- Zone one
+
+ <a-select-option v-for="(item,index) in this.blogArticleType" :key="index" :value="item.id">
+ {{ item.typeName }}
</a-select-option>
- <a-select-option value="beijing">
- Zone two
- </a-select-option>
- <a-select-option value="beijing2">
- Zone two
- </a-select-option>
+
</a-select>
</a-form-model-item>
- <a-form-model-item label="偏好">
+ <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-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-radio-group v-model="form.blogType">
- <a-radio value="Markdown">
- Markdown
- </a-radio>
- <a-radio value="Html">
- Html
- </a-radio>
- </a-radio-group>
+ <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>
@@ -72,37 +90,61 @@
{{ `${tag.slice(0, 20)}...` }}
</a-tag>
</a-tooltip>
- <a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
+ <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>
<a-form-model-item label="封面">
- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
- :default-file-list="form.coverFileList" class="upload-list-inline">
+ <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">
+ <!-- :disabled="form.coverFileList.length>=1" -->
<a-button>
- <a-icon type="upload" /> jpg/png/jpeg..
+ <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-date-picker v-model="form.publishDate" show-time type="date" placeholder="发布时间"
+ <a-date-picker v-model="form.publishDate" show-time type="datetime" placeholder="发布时间"
style="width: 100%;" :disabledDate="disabledDate"
:getCalendarContainer="getCalendarContainer()" />
</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}">
+ <div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;">
<a-form-model-item label="加锁">
<a-switch v-model="form.lock" />
@@ -114,19 +156,20 @@
<div v-show="form.lock ">
<a-form-model-item label="阅读权限">
<a-radio-group v-model="form.auth">
- <a-radio value="private">
+ <a-radio value="2">
私人
</a-radio>
- <a-radio value="password">
+ <a-radio value="3">
密码授权
</a-radio>
</a-radio-group>
</a-form-model-item>
- <a-form-model-item label="授权密码" v-show="form.auth=='password'">
- <a-input v-model="form.password" type="password" placeholder="Password">
+ <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>
+ </a-input-password>
</a-form-model-item>
</div>
@@ -140,53 +183,229 @@
<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';
+
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 {
- blogFileList: [],
- coverFileList: [
- // {
- // uid: '-1',
- // name: 'xxx.png',
- // status: 'done',
- // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
- // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
- // }
- ],
+ bucketName: myConstant.bucketName,
+ blogArticleType: [],
tags: [],
inputVisible: false,
inputValue: '',
labelCol: {
- span: 5
+ span: 7
},
wrapperCol: {
- span: 19
+ span: 13
},
form: {
- preference: true,
+ secret: '',
+ online: false,
+ preference: false,
title: '',
content: '',
class: [],
tempSave: false,
- blogType: "Markdown",
+ blogType: "1",
publishDate: "",
lock: false,
- auth: "private",
+ top: false,
+ sliderValue: 50,
+ auth: 1,
password: "",
+ fileId: null,
+ coverFile: null,
blogFileList: [],
- coverFileList: [
- // {
- // uid: '-1',
- // name: 'xxx.png',
- // status: 'done',
- // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
- // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
- // }
- ],
+ coverFileList: [],
},
+ rules: {
+ title: [{
+ required: true,
+ message: '标题不能为空',
+ trigger: 'blur'
+ },
+ {
+ min: 1,
+ max: 50,
+ message: '字数限制1~50',
+ 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: {
+ reset() {
+ // this.form.blogFileList = [];
+ // this.form.coverFileList = [];
+ },
+ 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} file uploaded successfully`);
+ } else if (info.file.status === 'error') {
+ this.$message.error(`${info.file.name} file upload failed.`);
+ }
+
+ 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} file uploaded successfully`);
+ } else if (info.file.status === 'error') {
+ this.$message.error(`${info.file.name} file upload failed.`);
+ }
+
+ if (this.form.coverFileList == null || this.form.coverFileList.length == 0) {
+ this.form.coverFile = 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))
+ myFileInfoUpload(formData).then((res) => {
+ if (res.success) {
+ this.$message.success('上传成功')
+ option.onSuccess(res, option.file)
+ // 在上传成功后进度条显示为99
+ progress.percent = 100
+ } 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");
},
@@ -194,9 +413,9 @@
return trigger => trigger.parentNode;
},
handleClose(removedTag) {
- const tags = this.tags.filter(tag => tag !== removedTag);
- console.log(tags);
- this.tags = tags;
+ // const tags = this.tags.filter(tag => tag !== removedTag);
+ //console.log(tags);
+ this.tags = this.tags.filter(tag => tag !== removedTag);
},
showInput() {
@@ -216,21 +435,25 @@
if (inputValue && tags.indexOf(inputValue) === -1) {
tags = [...tags, inputValue];
}
- console.log(tags);
+ //console.log(tags);
Object.assign(this, {
tags,
inputVisible: false,
inputValue: '',
});
},
- onSubmit() {
- console.log('submit!', this.form);
- },
+
},
};
</script>
<style lang="less">
+ @media screen and(max-width: 575px) {
+ .ant-form-item-label {
+ padding: 8px !important;
+ }
+ }
+
.myTip {
font-size: 10px;
color: #999;
@@ -238,6 +461,7 @@
.myBorder {
border: 1px solid #999;
+ border-radius: 10px;
}
.ant-upload-list-item-info {
--
Gitblit v1.9.1