| commit | author | age | ||
| f5539f | 1 | <template> |
| 1ad93b | 2 | <div> |
| I | 3 | <a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules"> |
| 6bcd13 | 4 | <a-form-model-item label="认证" prop="secret"> |
| I | 5 | <a-input v-model="form.secret" autocomplete='new-password' type="password" placeholder="口令"> |
| 6 | <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" /> | |
| 7 | </a-input> | |
| 8 | </a-form-model-item> | |
| 9 | ||
| 1ad93b | 10 | <a-form-model-item label="标题" prop="title"> |
| f5539f | 11 | <a-input v-model="form.title" placeholder="限 50字内" /> |
| L | 12 | </a-form-model-item> |
| 13 | ||
| 06ee76 | 14 | <a-form-model-item label="模式切换" prop="common"> |
| f5539f | 15 | <a-switch v-model="form.online" /> |
| L | 16 | <span class="myTip"> |
| 1ad93b | 17 | 本地文件/由系统生成文件 |
| f5539f | 18 | </span> |
| L | 19 | </a-form-model-item> |
| 20 | ||
| 21 | ||
| 6bcd13 | 22 | <a-form-model-item label="日志文件" v-show="!form.online"> |
| I | 23 | <!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
| f5539f | 24 | :default-file-list="form.blogFileList"> |
| L | 25 | <a-button> |
| 1ad93b | 26 | <a-icon type="upload" /> 限 markdown/html |
| 6bcd13 | 27 | </a-button> |
| I | 28 | </a-upload> --> |
| 29 | ||
| 30 | <a-upload :customRequest="customRequest" name="file" :showUploadList="true" @change="handleChange" | |
| 31 | :default-file-list="form.blogFileList" | |
| 32 | :beforeUpload="beforeUpload" | |
| 33 | > | |
| 34 | ||
| 35 | <a-button> | |
| 36 | <a-icon type="upload" />限 markdown/html | |
| f5539f | 37 | </a-button> |
| L | 38 | </a-upload> |
| 39 | </a-form-model-item> | |
| 40 | ||
| 1ad93b | 41 | <a-form-model-item label="日志内容" v-show="form.online" prop="content"> |
| f5539f | 42 | <a-input v-model="form.content" type="textarea" placeholder="限10k字数" /> |
| L | 43 | </a-form-model-item> |
| 44 | ||
| 1ad93b | 45 | <a-form-model-item label="分类" prop="class"> |
| 6bcd13 | 46 | <a-select v-model="form.class" :allowClear="true" mode="default" placeholder="日志分类" |
| f5539f | 47 | :getPopupContainer="getCalendarContainer()"> |
| 6bcd13 | 48 | |
| I | 49 | <a-select-option v-for="(item,index) in this.blogArticleType" :key="index" :value="item.id"> |
| 50 | {{ item.typeName }} | |
| f5539f | 51 | </a-select-option> |
| 6bcd13 | 52 | |
| f5539f | 53 | </a-select> |
| L | 54 | </a-form-model-item> |
| 55 | ||
| 1ad93b | 56 | <a-form-model-item label="额外设置"> |
| f5539f | 57 | <a-switch v-model="form.preference" /> |
| L | 58 | </a-form-model-item> |
| 59 | ||
| 60 | <div v-show="form.preference" class="myBorder" style="padding:10px;"> | |
| 1ad93b | 61 | <a-form-model-item label="起个草稿"> |
| f5539f | 62 | <a-switch v-model="form.tempSave" /> |
| L | 63 | <span v-show="form.tempSave" class="myTip"> |
| 1ad93b | 64 | 临时存储,游客无法浏览 |
| f5539f | 65 | </span> |
| L | 66 | </a-form-model-item> |
| 67 | ||
| 68 | <a-form-model-item label=" 文件类型"> | |
| 69 | <a-radio-group v-model="form.blogType"> | |
| 70 | <a-radio value="Markdown"> | |
| 1ad93b | 71 | markdown |
| f5539f | 72 | </a-radio> |
| L | 73 | <a-radio value="Html"> |
| 1ad93b | 74 | html |
| f5539f | 75 | </a-radio> |
| L | 76 | </a-radio-group> |
| 77 | </a-form-model-item> | |
| 78 | ||
| 79 | ||
| 80 | <a-form-model-item label="标签"> | |
| 81 | <template v-for="(tag, index) in tags"> | |
| 82 | <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag"> | |
| 83 | <a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)"> | |
| 84 | {{ `${tag.slice(0, 20)}...` }} | |
| 85 | </a-tag> | |
| 86 | </a-tooltip> | |
| 1ad93b | 87 | <a-tag v-else :key="tag" :closable="index >= 0" @close="() => handleClose(tag)"> |
| f5539f | 88 | {{ tag }} |
| L | 89 | </a-tag> |
| 90 | </template> | |
| 1ad93b | 91 | |
| f5539f | 92 | <a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }" |
| L | 93 | :value="inputValue" @change="handleInputChange" @blur="handleInputConfirm" |
| 94 | @keyup.enter="handleInputConfirm" /> | |
| 1ad93b | 95 | |
| f5539f | 96 | <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput"> |
| L | 97 | <a-icon type="plus" /> New Tag |
| 98 | </a-tag> | |
| 1ad93b | 99 | |
| f5539f | 100 | </a-form-model-item> |
| L | 101 | |
| 102 | ||
| 103 | <a-form-model-item label="封面"> | |
| 6bcd13 | 104 | <!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture" |
| f5539f | 105 | :default-file-list="form.coverFileList" class="upload-list-inline"> |
| L | 106 | <a-button> |
| 107 | <a-icon type="upload" /> jpg/png/jpeg.. | |
| 108 | </a-button> | |
| 6bcd13 | 109 | </a-upload> --> |
| I | 110 | |
| 111 | <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture" | |
| 112 | :default-file-list="form.coverFileList"> | |
| 113 | <a-button> | |
| 114 | <a-icon type="upload" />jpg/png/jpeg.. | |
| 115 | </a-button> | |
| f5539f | 116 | </a-upload> |
| 6bcd13 | 117 | <!-- <span class="myTip"> |
| 15bd39 | 118 | 自动转码,可以传高清图 |
| 6bcd13 | 119 | </span> --> |
| f5539f | 120 | </a-form-model-item> |
| L | 121 | |
| 122 | <a-form-model-item label="定时"> | |
| 06ee76 | 123 | <a-date-picker v-model="form.publishDate" show-time type="datetime" placeholder="发布时间" |
| f5539f | 124 | style="width: 100%;" :disabledDate="disabledDate" |
| L | 125 | :getCalendarContainer="getCalendarContainer()" /> |
| 06ee76 | 126 | </a-form-model-item> |
| L | 127 | |
| 6bcd13 | 128 | <div v-bind:class="{'myBorder':form.top}" style="padding: 3px;"> |
| I | 129 | <a-form-model-item label="置顶"> |
| 130 | <a-switch v-model="form.top" /> | |
| 131 | </a-form-model-item> | |
| f5539f | 132 | |
| 6bcd13 | 133 | <div v-show="form.top"> |
| I | 134 | <a-form-model-item label="权重"> |
| 135 | <a-slider v-model="form.sliderValue" :default-value="80" :step="5" | |
| 136 | :getTooltipPopupContainer="getCalendarContainer()" /> | |
| 137 | <span class="myTip"> | |
| 138 | 越小越靠前 | |
| 139 | </span> | |
| 140 | </a-form-model-item> | |
| 141 | </div> | |
| 142 | </div> | |
| f5539f | 143 | |
| L | 144 | |
| 1ad93b | 145 | <div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;"> |
| f5539f | 146 | |
| L | 147 | <a-form-model-item label="加锁"> |
| 148 | <a-switch v-model="form.lock" /> | |
| 149 | <span v-show="!form.lock" class="myTip"> | |
| 150 | 默认为公开 | |
| 151 | </span> | |
| 152 | </a-form-model-item> | |
| 153 | ||
| 154 | <div v-show="form.lock "> | |
| 155 | <a-form-model-item label="阅读权限"> | |
| 156 | <a-radio-group v-model="form.auth"> | |
| 157 | <a-radio value="private"> | |
| 158 | 私人 | |
| 159 | </a-radio> | |
| 160 | <a-radio value="password"> | |
| 161 | 密码授权 | |
| 162 | </a-radio> | |
| 163 | </a-radio-group> | |
| 164 | </a-form-model-item> | |
| 165 | ||
| 166 | <a-form-model-item label="授权密码" v-show="form.auth=='password'"> | |
| 6bcd13 | 167 | <a-input v-model="form.password" autocomplete='new-password' type="password" |
| I | 168 | placeholder="独立密码"> |
| f5539f | 169 | <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" /> |
| L | 170 | </a-input> |
| 171 | </a-form-model-item> | |
| 172 | </div> | |
| 173 | ||
| 174 | </div> | |
| 175 | ||
| 176 | </div> | |
| 177 | ||
| 178 | </a-form-model> | |
| 179 | </div> | |
| 180 | </template> | |
| 181 | ||
| 182 | <script> | |
| 183 | import moment from "moment"; | |
| 6bcd13 | 184 | import { |
| I | 185 | sysFileInfoUpload |
| 186 | } from '../../api/fileManage.js'; | |
| 187 | import { | |
| 188 | queryBlogArticleType | |
| 189 | } from '../../api/blogArticleType.js' | |
| f5539f | 190 | export default { |
| 6bcd13 | 191 | beforeMount() { |
| I | 192 | queryBlogArticleType({}).then((res) => { |
| 193 | this.blogArticleType = res.data; | |
| 194 | }) | |
| 195 | }, | |
| f5539f | 196 | data() { |
| 06ee76 | 197 | |
| L | 198 | let validateContent = (rule, value, callback) => { |
| 199 | if (this.form.online) { | |
| 200 | console.log("内容未填"); | |
| 201 | this.$refs.myForm.validateField('content') | |
| 202 | } else { | |
| 203 | console.log("文件未传"); | |
| 204 | this.$refs.myForm.validateField('blogFileList') | |
| 205 | } | |
| 206 | callback(); | |
| 207 | }; | |
| 208 | ||
| f5539f | 209 | return { |
| 6bcd13 | 210 | blogArticleType: [], |
| I | 211 | // blogFileList: [], |
| 212 | // coverFileList: [ | |
| 213 | // // { | |
| 214 | // // uid: '-1', | |
| 215 | // // name: 'xxx.png', | |
| 216 | // // status: 'done', | |
| 217 | // // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', | |
| 218 | // // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', | |
| 219 | // // } | |
| 220 | // ], | |
| f5539f | 221 | tags: [], |
| L | 222 | inputVisible: false, |
| 223 | inputValue: '', | |
| 224 | labelCol: { | |
| 1ad93b | 225 | span: 7 |
| f5539f | 226 | }, |
| L | 227 | wrapperCol: { |
| 1ad93b | 228 | span: 13 |
| f5539f | 229 | }, |
| L | 230 | form: { |
| 6bcd13 | 231 | secret: '', |
| 06ee76 | 232 | online: false, |
| 1ad93b | 233 | preference: false, |
| f5539f | 234 | title: '', |
| L | 235 | content: '', |
| 236 | class: [], | |
| 237 | tempSave: false, | |
| 238 | blogType: "Markdown", | |
| 239 | publishDate: "", | |
| 240 | lock: false, | |
| 6bcd13 | 241 | top: false, |
| f5539f | 242 | auth: "private", |
| L | 243 | password: "", |
| 244 | blogFileList: [], | |
| 1ad93b | 245 | coverFileList: [], |
| f5539f | 246 | }, |
| 1ad93b | 247 | rules: { |
| I | 248 | title: [{ |
| 249 | required: true, | |
| 250 | message: '标题不能为空', | |
| 251 | trigger: 'blur' | |
| 252 | }, | |
| 253 | { | |
| 254 | min: 5, | |
| 255 | max: 50, | |
| 256 | message: '字数限制1~50', | |
| 257 | trigger: 'blur' | |
| 258 | }, | |
| 259 | ], | |
| 6bcd13 | 260 | secret: [{ |
| I | 261 | required: true, |
| 262 | message: '不正经的人..', | |
| 263 | trigger: 'blur' | |
| 264 | }], | |
| 06ee76 | 265 | common: [{ |
| L | 266 | validator: validateContent, |
| 267 | trigger: [] | |
| 268 | }], | |
| 1ad93b | 269 | content: [{ |
| 06ee76 | 270 | max: 10, |
| 1ad93b | 271 | required: true, |
| 06ee76 | 272 | message: '至少填一下上传内容', |
| 1ad93b | 273 | trigger: 'blur' |
| I | 274 | }, ], |
| 275 | blogFileList: [{ | |
| 6bcd13 | 276 | max: 1, |
| 1ad93b | 277 | required: true, |
| I | 278 | message: '文件未上传', |
| 06ee76 | 279 | }], |
| 1ad93b | 280 | class: [{ |
| I | 281 | required: true, |
| 282 | message: '至少选一个分类', | |
| 283 | trigger: 'blur' | |
| 284 | }, ], | |
| 285 | // region: [{ | |
| 286 | // required: true, | |
| 287 | // message: 'Please select Activity zone', | |
| 288 | // trigger: 'change' | |
| 289 | // }], | |
| 290 | // date1: [{ | |
| 291 | // required: true, | |
| 292 | // message: 'Please pick a date', | |
| 293 | // trigger: 'change' | |
| 294 | // }], | |
| 295 | // type: [{ | |
| 296 | // type: 'array', | |
| 297 | // required: true, | |
| 298 | // message: 'Please select at least one activity type', | |
| 299 | // trigger: 'change', | |
| 300 | // }, ], | |
| 301 | // resource: [{ | |
| 302 | // required: true, | |
| 303 | // message: 'Please select activity resource', | |
| 304 | // trigger: 'change' | |
| 305 | // }, ], | |
| 306 | // desc: [{ | |
| 307 | // required: true, | |
| 308 | // message: 'Please input activity form', | |
| 309 | // trigger: 'blur' | |
| 310 | // }], | |
| 311 | } | |
| f5539f | 312 | }; |
| L | 313 | }, |
| 314 | methods: { | |
| 6bcd13 | 315 | beforeUpload(file, fileList) { |
| I | 316 | console.log(333); |
| 317 | console.log(this.blogFileList); | |
| 318 | return new Promise((resolve, reject) => { | |
| 319 | if(fileList.length>=2){ | |
| 320 | this.$message.error('这里最多上传一个文件'); | |
| 321 | return reject(false); | |
| 322 | } | |
| 323 | // var testmsg=/^image\/(jpeg|png|jpg)$/.test(file.type) | |
| 324 | // // var testmsg=/^image\/(md|html|markdown)$/.test(file.type) | |
| 325 | // if (!testmsg) { | |
| 326 | // this.$message.error('上传文件格式不对!'); | |
| 327 | // return reject(false); | |
| 328 | // } | |
| 329 | ||
| 330 | const isLt2M = file.size / 1024 / 1024 <=2//图片大小不超过2MB | |
| 331 | if(!isLt2M) { | |
| 332 | this.$message.error('上传文件大小不能超过 2M!'); | |
| 333 | return reject(false); | |
| 334 | } | |
| 335 | return resolve(true) | |
| 336 | }); | |
| 337 | ||
| 338 | }, | |
| 339 | handleChange(info) { | |
| 340 | if (info.file.status !== 'uploading') { | |
| 341 | console.log(info.file, info.fileList); | |
| 342 | } | |
| 343 | if (info.file.status === 'done') { | |
| 344 | this.$message.success(`${info.file.name} file uploaded successfully`); | |
| 345 | } else if (info.file.status === 'error') { | |
| 346 | this.$message.error(`${info.file.name} file upload failed.`); | |
| 347 | } | |
| 348 | }, | |
| 349 | /** | |
| 350 | * 上传文件 | |
| 351 | */ | |
| 352 | customRequest(option) { | |
| 353 | const formData = new FormData() | |
| 354 | formData.append('file', option.file) | |
| 355 | sysFileInfoUpload(formData).then((res) => { | |
| 356 | if (res.success) { | |
| 357 | this.$message.success('上传成功') | |
| 358 | option.onSuccess(res, option.file) | |
| 359 | } else { | |
| 360 | this.$message.error('上传失败：' + res.message) | |
| 361 | } | |
| 362 | }) | |
| 363 | }, | |
| f5539f | 364 | disabledDate(current) { |
| L | 365 | return current < moment().subtract(1, "day"); |
| 366 | }, | |
| 367 | getCalendarContainer(trigger) { | |
| 368 | return trigger => trigger.parentNode; | |
| 369 | }, | |
| 370 | handleClose(removedTag) { | |
| 371 | const tags = this.tags.filter(tag => tag !== removedTag); | |
| 1ad93b | 372 | //console.log(tags); |
| f5539f | 373 | this.tags = tags; |
| L | 374 | }, |
| 375 | ||
| 376 | showInput() { | |
| 377 | this.inputVisible = true; | |
| 378 | this.$nextTick(function() { | |
| 379 | this.$refs.input.focus(); | |
| 380 | }); | |
| 381 | }, | |
| 382 | ||
| 383 | handleInputChange(e) { | |
| 384 | this.inputValue = e.target.value; | |
| 385 | }, | |
| 386 | ||
| 387 | handleInputConfirm() { | |
| 388 | const inputValue = this.inputValue; | |
| 389 | let tags = this.tags; | |
| 390 | if (inputValue && tags.indexOf(inputValue) === -1) { | |
| 391 | tags = [...tags, inputValue]; | |
| 392 | } | |
| 1ad93b | 393 | //console.log(tags); |
| f5539f | 394 | Object.assign(this, { |
| L | 395 | tags, |
| 396 | inputVisible: false, | |
| 397 | inputValue: '', | |
| 398 | }); | |
| 399 | }, | |
| 1ad93b | 400 | |
| f5539f | 401 | }, |
| L | 402 | }; |
| 403 | </script> | |
| 404 | ||
| 405 | <style lang="less"> | |
| 1ad93b | 406 | @media screen and(max-width: 575px) { |
| I | 407 | .ant-form-item-label { |
| 408 | padding: 8px !important; | |
| 409 | } | |
| 410 | } | |
| 411 | ||
| f5539f | 412 | .myTip { |
| L | 413 | font-size: 10px; |
| 414 | color: #999; | |
| 415 | } | |
| 416 | ||
| 417 | .myBorder { | |
| 418 | border: 1px solid #999; | |
| 1ad93b | 419 | border-radius: 10px; |
| f5539f | 420 | } |
| L | 421 | |
| 422 | .ant-upload-list-item-info { | |
| 423 | a { | |
| 424 | color: #999; | |
| 425 | } | |
| 426 | } | |
| 427 | ||
| 428 | /* tile uploaded pictures */ | |
| 429 | .upload-list-inline>.ant-upload-list-item { | |
| 430 | float: left; | |
| 431 | width: 100px; | |
| 432 | margin-right: 8px; | |
| 433 | } | |
| 434 | ||
| 435 | .upload-list-inline>.ant-upload-animate-enter { | |
| 436 | animation-name: uploadAnimateInlineIn; | |
| 437 | } | |
| 438 | ||
| 439 | .upload-list-inline>.ant-upload-animate-leave { | |
| 440 | animation-name: uploadAnimateInlineOut; | |
| 441 | } | |
| 442 | </style> | |
