From 10572998aa54d61c45df3e334eb01e44a15df729 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 10 Aug 2022 18:35:59 +0800 Subject: [PATCH] 常量提取,优化视频模块布局 --- src/components/mini/box10-add.vue | 190 +++++++++++++++++++++++------------------------ 1 files changed, 92 insertions(+), 98 deletions(-) diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue index 437000d..705e398 100644 --- a/src/components/mini/box10-add.vue +++ b/src/components/mini/box10-add.vue @@ -21,19 +21,11 @@ </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-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" - > + :default-file-list="form.blogFileList" :beforeUpload="beforeUpload" + :data="{'fileType':fileTypeMarkDown}"> <a-button> <a-icon type="upload" />限 markdown/html @@ -41,7 +33,7 @@ </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> @@ -69,14 +61,21 @@ </a-form-model-item> <a-form-model-item label=" 日志类型"> - <a-radio-group v-model="form.blogType"> - <a-radio value="Markdown"> + <a-select v-model="form.blogType" mode="default" placeholder="" + :getPopupContainer="getCalendarContainer()"> + <a-select-option value="1"> markdown - </a-radio> - <a-radio value="Html"> + </a-select-option> + <a-select-option value="2"> html - </a-radio> - </a-radio-group> + </a-select-option> + <a-select-option value="3"> + video + </a-select-option> + <a-select-option value="5"> + fast(闪念) + </a-select-option> + </a-select> </a-form-model-item> @@ -104,15 +103,9 @@ <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-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"> + @change="handleChangeCoverFile" :default-file-list="form.coverFileList" + :beforeUpload="beforeUploadCover" :data="{'fileType':fileTypeCover}"> <a-button> <a-icon type="upload" />jpg/png/jpeg.. </a-button> @@ -157,16 +150,16 @@ <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-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)" /> @@ -185,11 +178,16 @@ <script> import moment from "moment"; import { - sysFileInfoUpload + sysFileInfoUpload, + myFileInfoUpload } from '../../api/fileManage.js'; + import { queryBlogArticleType } from '../../api/blogArticleType.js' + + import myConstant from "../../config/myConstant.js" + export default { beforeMount() { queryBlogArticleType({}).then((res) => { @@ -202,25 +200,23 @@ 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.fileId == null) { + callback(new Error('文件未传')); + } } callback(); }; return { + fileTypeMarkDown: myConstant.fileTypeMarkDown, + fileTypeCover: myConstant.fileTypeCover, 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: '', @@ -238,12 +234,15 @@ content: '', class: [], tempSave: false, - blogType: "Markdown", + blogType: "1", publishDate: "", lock: false, top: false, - auth: "private", + sliderValue: 50, + auth: 1, password: "", + fileId: null, + coverFile: null, blogFileList: [], coverFileList: [], }, @@ -254,7 +253,7 @@ trigger: 'blur' }, { - min: 5, + min: 1, max: 50, message: '字数限制1~50', trigger: 'blur' @@ -269,81 +268,73 @@ validator: validateContent, trigger: [] }], - content: [{ - max: 10, - required: true, - message: '至少填一下上传内容', - trigger: 'blur' - }, ], - blogFileList: [{ - max: 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: { + + beforeUploadCover(file, fileList) { + if (this.form.coverFileList.length > 1) { + this.$message.error('这里最多上传一个文件'); + return false; + } + }, beforeUpload(file, fileList) { - console.log(333); - console.log(this.blogFileList); return new Promise((resolve, reject) => { - if(fileList.length>=2){ + if (this.form.fileId != null) { 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) - }); - + // 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.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.`); + } + }, + handleChangeCoverFile(info) { + 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.`); @@ -355,9 +346,12 @@ customRequest(option) { const formData = new FormData() formData.append('file', option.file) - sysFileInfoUpload(formData).then((res) => { + formData.append('fileType', option.data.fileType) + formData.append('authCode', this.form.secret) + myFileInfoUpload(formData).then((res) => { if (res.success) { this.$message.success('上传成功') + option.onSuccess(res, option.file) } else { this.$message.error('上传失败:' + res.message) -- Gitblit v1.9.1