From 63f5119bcc714c36fe8db21e5461d73eb5a0eaa0 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Mon, 21 Feb 2022 18:47:52 +0800
Subject: [PATCH] 统计数据添加,文章接口对接
---
src/components/mini/box10-add.vue | 221 ++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 145 insertions(+), 76 deletions(-)
diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue
index 8a2ca36..70509ef 100644
--- a/src/components/mini/box10-add.vue
+++ b/src/components/mini/box10-add.vue
@@ -1,43 +1,56 @@
<template>
<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="模式切换" 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" prop="blogFileList">
- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+ <a-form-model-item label="日志文件" v-show="!form.online">
+ <!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:default-file-list="form.blogFileList">
<a-button>
<a-icon type="upload" /> 限 markdown/html
</a-button>
+ </a-upload> -->
+
+ <a-upload :customRequest="customRequest" name="file" :showUploadList="true" @change="handleChange"
+ :default-file-list="form.blogFileList" :beforeUpload="beforeUpload">
+
+ <a-button>
+ <a-icon type="upload" />限 markdown/html
+ </a-button>
</a-upload>
</a-form-model-item>
- <a-form-model-item label="日志内容" v-show="form.online" prop="content">
+ <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="multiple" placeholder="多选(至少一个)"
+ <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>
@@ -53,7 +66,7 @@
</span>
</a-form-model-item>
- <a-form-model-item label=" 文件类型">
+ <a-form-model-item label=" 日志类型">
<a-radio-group v-model="form.blogType">
<a-radio value="Markdown">
markdown
@@ -89,15 +102,22 @@
<a-form-model-item label="封面">
- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
+ <!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
:default-file-list="form.coverFileList" class="upload-list-inline">
<a-button>
<a-icon type="upload" /> jpg/png/jpeg..
</a-button>
+ </a-upload> -->
+
+ <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
+ :default-file-list="form.coverFileList">
+ <a-button>
+ <a-icon type="upload" />jpg/png/jpeg..
+ </a-button>
</a-upload>
- <span class="myTip">
+ <!-- <span class="myTip">
自动转码,可以传高清图
- </span>
+ </span> -->
</a-form-model-item>
<a-form-model-item label="定时">
@@ -106,14 +126,21 @@
:getCalendarContainer="getCalendarContainer()" />
</a-form-model-item>
- <a-form-model-item label="置顶权重">
- <a-slider v-model="form.sliderValue" :default-value="20" :step="5"
- :getTooltipPopupContainer="getCalendarContainer()" />
- <span class="myTip">
- 越小越靠前
- </span>
- </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;">
@@ -138,9 +165,10 @@
</a-form-model-item>
<a-form-model-item label="授权密码" v-show="form.auth=='password'">
- <a-input v-model="form.password" type="password" placeholder="独立密码">
+ <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>
@@ -154,32 +182,42 @@
<script>
import moment from "moment";
+ import {
+ sysFileInfoUpload
+ } from '../../api/fileManage.js';
+
+ import {
+ queryBlogArticleType
+ } from '../../api/blogArticleType.js'
+
+
export default {
+ beforeMount() {
+ queryBlogArticleType({}).then((res) => {
+ this.blogArticleType = res.data;
+ })
+ },
data() {
let validateContent = (rule, value, callback) => {
if (this.form.online) {
console.log("内容未填");
this.$refs.myForm.validateField('content')
+ if (this.form.content == null || this.form.content == "") {
+ callback(new Error('内容未填'));
+ }
} else {
console.log("文件未传");
this.$refs.myForm.validateField('blogFileList')
+ if (this.form.blogFileList == null || this.form.blogFileList.length == 0) {
+ 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',
- // }
- ],
+ blogArticleType: [],
tags: [],
inputVisible: false,
inputValue: '',
@@ -190,6 +228,7 @@
span: 13
},
form: {
+ secret: '',
online: false,
preference: false,
title: '',
@@ -199,6 +238,7 @@
blogType: "Markdown",
publishDate: "",
lock: false,
+ top: false,
auth: "private",
password: "",
blogFileList: [],
@@ -211,62 +251,91 @@
trigger: 'blur'
},
{
- min: 5,
+ 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: [{
- min: 1,
- required: true,
- message: '文件未上传',
- }],
+ // content: [{
+ // max: 10,
+ // required: true,
+ // message: '至少填一下上传内容',
+ // trigger: 'blur'
+ // }, ],
+ // blogFileList: [{
+ // max: 1,
+ // required: true,
+ // message: '文件未上传',
+ // }],
class: [{
required: true,
message: '至少选一个分类',
trigger: 'blur'
}, ],
- // region: [{
- // required: true,
- // message: 'Please select Activity zone',
- // trigger: 'change'
- // }],
- // date1: [{
- // required: true,
- // message: 'Please pick a date',
- // trigger: 'change'
- // }],
- // type: [{
- // type: 'array',
- // required: true,
- // message: 'Please select at least one activity type',
- // trigger: 'change',
- // }, ],
- // resource: [{
- // required: true,
- // message: 'Please select activity resource',
- // trigger: 'change'
- // }, ],
- // desc: [{
- // required: true,
- // message: 'Please input activity form',
- // trigger: 'blur'
- // }],
+
}
};
},
methods: {
+ beforeUpload(file, fileList) {
+ console.log(333);
+ console.log(this.blogFileList);
+ return new Promise((resolve, reject) => {
+ if (fileList.length >= 2) {
+ this.$message.error('这里最多上传一个文件');
+ return reject(false);
+ }
+ // var testmsg=/^image\/(jpeg|png|jpg)$/.test(file.type)
+ // // var testmsg=/^image\/(md|html|markdown)$/.test(file.type)
+ // if (!testmsg) {
+ // this.$message.error('上传文件格式不对!');
+ // return reject(false);
+ // }
+
+ const isLt2M = file.size / 1024 / 1024 <= 2 //图片大小不超过2MB
+ if (!isLt2M) {
+ this.$message.error('上传文件大小不能超过 2M!');
+ return reject(false);
+ }
+ return resolve(true)
+ });
+
+ },
+ handleChange(info) {
+ if (info.file.status !== 'uploading') {
+ console.log(info.file, info.fileList);
+ }
+ if (info.file.status === 'done') {
+ this.$message.success(`${info.file.name} file uploaded successfully`);
+ } else if (info.file.status === 'error') {
+ this.$message.error(`${info.file.name} file upload failed.`);
+ }
+ },
+ /**
+ * 上传文件
+ */
+ customRequest(option) {
+ const formData = new FormData()
+ formData.append('file', option.file)
+ sysFileInfoUpload(formData).then((res) => {
+ if (res.success) {
+ this.$message.success('上传成功')
+ option.onSuccess(res, option.file)
+ } else {
+ this.$message.error('上传失败：' + res.message)
+ }
+ })
+ },
disabledDate(current) {
return current < moment().subtract(1, "day");
},
--
Gitblit v1.9.1