From 6bcd135673be57b00ea68e58f1ae6aef2ac19e21 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Thu, 17 Feb 2022 18:30:05 +0800 Subject: [PATCH] 友链接口对接 --- src/components/mini/box10-add.vue | 162 ++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 128 insertions(+), 34 deletions(-) diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue index 8a2ca36..c51dcde 100644 --- a/src/components/mini/box10-add.vue +++ b/src/components/mini/box10-add.vue @@ -1,6 +1,12 @@ <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> @@ -13,11 +19,21 @@ </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> @@ -27,17 +43,13 @@ </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> @@ -89,15 +101,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 +125,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;"> + <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="80" :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,7 +164,8 @@ </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 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-form-model-item> @@ -154,7 +181,18 @@ <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) => { @@ -169,17 +207,17 @@ }; 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: [], + // 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', + // // } + // ], 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: [], @@ -217,6 +257,11 @@ trigger: 'blur' }, ], + secret: [{ + required: true, + message: '不正经的人..', + trigger: 'blur' + }], common: [{ validator: validateContent, trigger: [] @@ -228,7 +273,7 @@ trigger: 'blur' }, ], blogFileList: [{ - min: 1, + max: 1, required: true, message: '文件未上传', }], @@ -267,6 +312,55 @@ }; }, 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