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