| | |
| | | <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> |
| | | |
| | | |
| | | <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> |
| | | |
| | | <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> |
| | | |
| | |
| | | |
| | | |
| | | <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="定时"> |
| | |
| | | :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;"> |
| | |
| | | </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> |
| | |
| | | |
| | | <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) => { |
| | |
| | | }; |
| | | |
| | | 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: '', |
| | |
| | | span: 13 |
| | | }, |
| | | form: { |
| | | secret: '', |
| | | online: false, |
| | | preference: false, |
| | | title: '', |
| | |
| | | blogType: "Markdown", |
| | | publishDate: "", |
| | | lock: false, |
| | | top: false, |
| | | auth: "private", |
| | | password: "", |
| | | blogFileList: [], |
| | |
| | | trigger: 'blur' |
| | | }, |
| | | ], |
| | | secret: [{ |
| | | required: true, |
| | | message: '不正经的人..', |
| | | trigger: 'blur' |
| | | }], |
| | | common: [{ |
| | | validator: validateContent, |
| | | trigger: [] |
| | |
| | | trigger: 'blur' |
| | | }, ], |
| | | blogFileList: [{ |
| | | min: 1, |
| | | max: 1, |
| | | required: true, |
| | | message: '文件未上传', |
| | | }], |
| | |
| | | }; |
| | | }, |
| | | 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"); |
| | | }, |