blog的前端代码
view | history | commit | commitdiff
inleft
2022-08-12 0dd41bd8cee430d3a948b89c664cb511c400993c
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"
27                     :data="{'fileType':fileTypeMarkDown}" 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
4b854c 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">
I 71                             video
72                         </a-select-option>
73                         <a-select-option value="5">
00e46d 74                             fast(闪念)
I 75                         </a-select-option>
76                     </a-select>
f5539f 77                 </a-form-model-item>
L 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 :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
af029b 105                         :data="{'fileType':fileTypeCover}" @change="handleChangeCoverFile"
I 106                         :default-file-list="form.coverFileList" :beforeUpload="beforeUploadCover"
107                         accept=".jpg,.png,.jpeg">
108                         <!-- :disabled="form.coverFileList.length>=1" -->
6bcd13 109                         <a-button>
I 110                             <a-icon type="upload" />jpg/png/jpeg..
111                         </a-button>
f5539f 112                     </a-upload>
6bcd13 113                     <!-- <span class="myTip">
15bd39 114                         自动转码,可以传高清图
6bcd13 115                     </span> -->
f5539f 116                 </a-form-model-item>
L 117
118                 <a-form-model-item label="定时">
06ee76 119                     <a-date-picker v-model="form.publishDate" show-time type="datetime" placeholder="发布时间"
f5539f 120                         style="width: 100%;" :disabledDate="disabledDate"
L 121                         :getCalendarContainer="getCalendarContainer()" />
06ee76 122                 </a-form-model-item>
L 123
7b98c8 124                 <div v-bind:class="{'myBorder':form.top}" style="padding: 3px;margin-bottom: 10px;">
6bcd13 125                     <a-form-model-item label="置顶">
I 126                         <a-switch v-model="form.top" />
127                     </a-form-model-item>
f5539f 128
6bcd13 129                     <div v-show="form.top">
I 130                         <a-form-model-item label="权重">
7b98c8 131                             <a-slider v-model="form.sliderValue" :default-value="50" :step="5"
6bcd13 132                                 :getTooltipPopupContainer="getCalendarContainer()" />
I 133                             <span class="myTip">
134                                 越小越靠前
135                             </span>
136                         </a-form-model-item>
137                     </div>
138                 </div>
f5539f 139
L 140
1ad93b 141                 <div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;">
f5539f 142
L 143                     <a-form-model-item label="加锁">
144                         <a-switch v-model="form.lock" />
145                         <span v-show="!form.lock" class="myTip">
146                             默认为公开
147                         </span>
148                     </a-form-model-item>
149
150                     <div v-show="form.lock ">
151                         <a-form-model-item label="阅读权限">
152                             <a-radio-group v-model="form.auth">
c23efb 153                                 <a-radio value="2">
f5539f 154                                     私人
L 155                                 </a-radio>
c23efb 156                                 <a-radio value="3">
f5539f 157                                     密码授权
L 158                                 </a-radio>
159                             </a-radio-group>
160                         </a-form-model-item>
161
fc0c10 162                         <a-form-model-item label="授权密码" v-show="form.auth==3">
7b98c8 163                             <a-input-password v-model="form.password" autocomplete='new-password' type="password"
6bcd13 164                                 placeholder="独立密码">
f5539f 165                                 <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
7b98c8 166                             </a-input-password>
f5539f 167                         </a-form-model-item>
L 168                     </div>
169
170                 </div>
171
172             </div>
173
174         </a-form-model>
175     </div>
176 </template>
177
178 <script>
179     import moment from "moment";
6bcd13 180     import {
105729 181         sysFileInfoUpload,
I 182         myFileInfoUpload
6bcd13 183     } from '../../api/fileManage.js';
63f511 184
6bcd13 185     import {
I 186         queryBlogArticleType
187     } from '../../api/blogArticleType.js'
63f511 188
105729 189     import myConstant from "../../config/myConstant.js"
0dd41b 190     import md5 from 'js-md5';
63f511 191
f5539f 192     export default {
6bcd13 193         beforeMount() {
I 194             queryBlogArticleType({}).then((res) => {
195                 this.blogArticleType = res.data;
196             })
197         },
f5539f 198         data() {
af029b 199             let _this = this;
06ee76 200             let validateContent = (rule, value, callback) => {
af029b 201                 if (_this.form.online) {
I 202                     //this.$refs.myForm.validateField('content')
203                     if (_this.form.content == null || _this.form.content == "") {
63f511 204                         callback(new Error('内容未填'));
I 205                     }
06ee76 206                 } else {
af029b 207                     //this.$refs.myForm.validateField('blogFileList')
I 208                     if (_this.form.fileId == null) {
63f511 209                         callback(new Error('文件未传'));
I 210                     }
06ee76 211                 }
L 212                 callback();
213             };
214
f5539f 215             return {
105729 216                 fileTypeMarkDown: myConstant.fileTypeMarkDown,
I 217                 fileTypeCover: myConstant.fileTypeCover,
6bcd13 218                 blogArticleType: [],
f5539f 219                 tags: [],
L 220                 inputVisible: false,
221                 inputValue: '',
222                 labelCol: {
1ad93b 223                     span: 7
f5539f 224                 },
L 225                 wrapperCol: {
1ad93b 226                     span: 13
f5539f 227                 },
L 228                 form: {
6bcd13 229                     secret: '',
06ee76 230                     online: false,
1ad93b 231                     preference: false,
f5539f 232                     title: '',
L 233                     content: '',
234                     class: [],
235                     tempSave: false,
c23efb 236                     blogType: "1",
f5539f 237                     publishDate: "",
L 238                     lock: false,
6bcd13 239                     top: false,
105729 240                     sliderValue: 50,
c23efb 241                     auth: 1,
f5539f 242                     password: "",
c23efb 243                     fileId: null,
I 244                     coverFile: null,
f5539f 245                     blogFileList: [],
1ad93b 246                     coverFileList: [],
f5539f 247                 },
1ad93b 248                 rules: {
I 249                     title: [{
250                             required: true,
251                             message: '标题不能为空',
252                             trigger: 'blur'
253                         },
254                         {
63f511 255                             min: 1,
1ad93b 256                             max: 50,
I 257                             message: '字数限制1~50',
258                             trigger: 'blur'
259                         },
260                     ],
6bcd13 261                     secret: [{
I 262                         required: true,
0dd41b 263                         message: '好像这里错了..',
6bcd13 264                         trigger: 'blur'
I 265                     }],
06ee76 266                     common: [{
L 267                         validator: validateContent,
268                         trigger: []
269                     }],
63f511 270                     // content: [{
I 271                     //     max: 10,
272                     //     required: true,
273                     //     message: '至少填一下上传内容',
274                     //     trigger: 'blur'
275                     // }, ],
276                     // blogFileList: [{
277                     //     max: 1,
278                     //     required: true,
279                     //     message: '文件未上传',
280                     // }],
1ad93b 281                     class: [{
I 282                         required: true,
283                         message: '至少选一个分类',
284                         trigger: 'blur'
285                     }, ],
63f511 286
1ad93b 287                 }
f5539f 288             };
L 289         },
290         methods: {
af029b 291             reset() {
I 292                 // this.form.blogFileList = [];
293                 // this.form.coverFileList = [];
105729 294             },
af029b 295             beforeUploadCover(file, fileList) {
6bcd13 296                 return new Promise((resolve, reject) => {
0dd41b 297                     if (this.form.secret == null || this.form.secret == "") {
I 298                         this.$message.error('需要正确的授权码');
299                         return reject(false);
300                     }
301
af029b 302                     if (this.form.coverFileList.length >= 1) {
6bcd13 303                         this.$message.error('这里最多上传一个文件');
I 304                         return reject(false);
305                     }
af029b 306                     if (file.size > myConstant.uploadFileSizeLimit) {
I 307                         this.$message.error('上传文件大小不能超过 2M!');
308                         return reject(false);
309                     }
310                     return resolve(true)
311                 });
312             },
313             beforeUpload(file, fileList) {
314                 return new Promise((resolve, reject) => {
0dd41b 315                     if (this.form.secret == null || this.form.secret == "") {
I 316                         this.$message.error('需要正确的口令..');
317                         return reject(false);
318                     }
319
af029b 320                     if (this.form.blogFileList.length >= 1) {
I 321                         this.$message.error('这里最多上传一个文件');
322                         return reject(false);
323                     }
63f511 324
af029b 325                     if (file.size > myConstant.uploadFileSizeLimit) {
63f511 326                         this.$message.error('上传文件大小不能超过 2M!');
I 327                         return reject(false);
328                     }
329                     return resolve(true)
330                 });
331
6bcd13 332             },
I 333             handleChange(info) {
af029b 334                 this.form.blogFileList = info.fileList;
I 335
6bcd13 336                 if (info.file.status !== 'uploading') {
I 337                     console.log(info.file, info.fileList);
338                 }
339                 if (info.file.status === 'done') {
c23efb 340                     this.form.fileId = info.file.response.data;
I 341                     this.$message.success(`${info.file.name} file uploaded successfully`);
342                 } else if (info.file.status === 'error') {
343                     this.$message.error(`${info.file.name} file upload failed.`);
344                 }
af029b 345
I 346                 if (this.form.blogFileList == null || this.form.blogFileList.length == 0) {
347                     this.form.fileId = null
348                 }
c23efb 349             },
I 350             handleChangeCoverFile(info) {
af029b 351                 this.form.coverFileList = info.fileList;
I 352
c23efb 353                 if (info.file.status !== 'uploading') {
I 354                     console.log(info.file, info.fileList);
355                 }
356                 if (info.file.status === 'done') {
357                     this.form.coverFile = info.file.response.data;
6bcd13 358                     this.$message.success(`${info.file.name} file uploaded successfully`);
I 359                 } else if (info.file.status === 'error') {
360                     this.$message.error(`${info.file.name} file upload failed.`);
af029b 361                 }
I 362
363                 if (this.form.coverFileList == null || this.form.coverFileList.length == 0) {
364                     this.form.coverFile = null
6bcd13 365                 }
I 366             },
367             /**
368              * 上传文件
369              */
370             customRequest(option) {
371                 const formData = new FormData()
372                 formData.append('file', option.file)
105729 373                 formData.append('fileType', option.data.fileType)
0dd41b 374                 formData.append('authCode', this.form.secret == "" ? "" : md5(this.form.secret))
105729 375                 myFileInfoUpload(formData).then((res) => {
6bcd13 376                     if (res.success) {
I 377                         this.$message.success('上传成功')
c23efb 378
6bcd13 379                         option.onSuccess(res, option.file)
I 380                     } else {
381                         this.$message.error('上传失败：' + res.message)
382                     }
383                 })
384             },
f5539f 385             disabledDate(current) {
L 386                 return current < moment().subtract(1, "day");
387             },
388             getCalendarContainer(trigger) {
389                 return trigger => trigger.parentNode;
390             },
391             handleClose(removedTag) {
af029b 392                 // const tags = this.tags.filter(tag => tag !== removedTag);
1ad93b 393                 //console.log(tags);
af029b 394                 this.tags = this.tags.filter(tag => tag !== removedTag);
f5539f 395             },
L 396
397             showInput() {
398                 this.inputVisible = true;
399                 this.$nextTick(function() {
400                     this.$refs.input.focus();
401                 });
402             },
403
404             handleInputChange(e) {
405                 this.inputValue = e.target.value;
406             },
407
408             handleInputConfirm() {
409                 const inputValue = this.inputValue;
410                 let tags = this.tags;
411                 if (inputValue && tags.indexOf(inputValue) === -1) {
412                     tags = [...tags, inputValue];
413                 }
1ad93b 414                 //console.log(tags);
f5539f 415                 Object.assign(this, {
L 416                     tags,
417                     inputVisible: false,
418                     inputValue: '',
419                 });
420             },
1ad93b 421
f5539f 422         },
L 423     };
424 </script>
425
426 <style lang="less">
1ad93b 427     @media screen and(max-width: 575px) {
I 428         .ant-form-item-label {
429             padding: 8px !important;
430         }
431     }
432
f5539f 433     .myTip {
L 434         font-size: 10px;
435         color: #999;
436     }
437
438     .myBorder {
439         border: 1px solid #999;
1ad93b 440         border-radius: 10px;
f5539f 441     }
L 442
443     .ant-upload-list-item-info {
444         a {
445             color: #999;
446         }
447     }
448
449     /* tile uploaded pictures */
450     .upload-list-inline>.ant-upload-list-item {
451         float: left;
452         width: 100px;
453         margin-right: 8px;
454     }
455
456     .upload-list-inline>.ant-upload-animate-enter {
457         animation-name: uploadAnimateInlineIn;
458     }
459
460     .upload-list-inline>.ant-upload-animate-leave {
461         animation-name: uploadAnimateInlineOut;
462     }
463 </style>