blog的前端代码
view | history | commit | commitdiff
inleft
2022-08-17 bc95187efc506413cf85749fe36fe748cf75fed5
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"
1cf6d9 27                     :data="{'fileType':myConstant.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"
1cf6d9 105                         :data="{'fileType':myConstant.fileTypeCover}" @change="handleChangeCoverFile"
af029b 106                         :default-file-list="form.coverFileList" :beforeUpload="beforeUploadCover"
I 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 {
1cf6d9 216                 myConstant: myConstant,
6bcd13 217                 blogArticleType: [],
f5539f 218                 tags: [],
L 219                 inputVisible: false,
220                 inputValue: '',
221                 labelCol: {
1ad93b 222                     span: 7
f5539f 223                 },
L 224                 wrapperCol: {
1ad93b 225                     span: 13
f5539f 226                 },
L 227                 form: {
6bcd13 228                     secret: '',
06ee76 229                     online: false,
1ad93b 230                     preference: false,
f5539f 231                     title: '',
L 232                     content: '',
233                     class: [],
234                     tempSave: false,
c23efb 235                     blogType: "1",
f5539f 236                     publishDate: "",
L 237                     lock: false,
6bcd13 238                     top: false,
105729 239                     sliderValue: 50,
c23efb 240                     auth: 1,
f5539f 241                     password: "",
c23efb 242                     fileId: null,
I 243                     coverFile: null,
f5539f 244                     blogFileList: [],
1ad93b 245                     coverFileList: [],
f5539f 246                 },
1ad93b 247                 rules: {
I 248                     title: [{
249                             required: true,
250                             message: '标题不能为空',
251                             trigger: 'blur'
252                         },
253                         {
63f511 254                             min: 1,
1ad93b 255                             max: 50,
I 256                             message: '字数限制1~50',
257                             trigger: 'blur'
258                         },
259                     ],
6bcd13 260                     secret: [{
I 261                         required: true,
0dd41b 262                         message: '好像这里错了..',
6bcd13 263                         trigger: 'blur'
I 264                     }],
06ee76 265                     common: [{
L 266                         validator: validateContent,
267                         trigger: []
268                     }],
63f511 269                     // content: [{
I 270                     //     max: 10,
271                     //     required: true,
272                     //     message: '至少填一下上传内容',
273                     //     trigger: 'blur'
274                     // }, ],
275                     // blogFileList: [{
276                     //     max: 1,
277                     //     required: true,
278                     //     message: '文件未上传',
279                     // }],
1ad93b 280                     class: [{
I 281                         required: true,
282                         message: '至少选一个分类',
283                         trigger: 'blur'
284                     }, ],
63f511 285
1ad93b 286                 }
f5539f 287             };
L 288         },
289         methods: {
af029b 290             reset() {
I 291                 // this.form.blogFileList = [];
292                 // this.form.coverFileList = [];
105729 293             },
af029b 294             beforeUploadCover(file, fileList) {
6bcd13 295                 return new Promise((resolve, reject) => {
0dd41b 296                     if (this.form.secret == null || this.form.secret == "") {
I 297                         this.$message.error('需要正确的授权码');
298                         return reject(false);
299                     }
300
af029b 301                     if (this.form.coverFileList.length >= 1) {
6bcd13 302                         this.$message.error('这里最多上传一个文件');
I 303                         return reject(false);
304                     }
af029b 305                     if (file.size > myConstant.uploadFileSizeLimit) {
I 306                         this.$message.error('上传文件大小不能超过 2M!');
307                         return reject(false);
308                     }
309                     return resolve(true)
310                 });
311             },
312             beforeUpload(file, fileList) {
313                 return new Promise((resolve, reject) => {
0dd41b 314                     if (this.form.secret == null || this.form.secret == "") {
I 315                         this.$message.error('需要正确的口令..');
316                         return reject(false);
317                     }
318
af029b 319                     if (this.form.blogFileList.length >= 1) {
I 320                         this.$message.error('这里最多上传一个文件');
321                         return reject(false);
322                     }
63f511 323
af029b 324                     if (file.size > myConstant.uploadFileSizeLimit) {
63f511 325                         this.$message.error('上传文件大小不能超过 2M!');
I 326                         return reject(false);
327                     }
328                     return resolve(true)
329                 });
330
6bcd13 331             },
I 332             handleChange(info) {
af029b 333                 this.form.blogFileList = info.fileList;
I 334
6bcd13 335                 if (info.file.status !== 'uploading') {
I 336                     console.log(info.file, info.fileList);
337                 }
338                 if (info.file.status === 'done') {
c23efb 339                     this.form.fileId = info.file.response.data;
I 340                     this.$message.success(`${info.file.name} file uploaded successfully`);
341                 } else if (info.file.status === 'error') {
342                     this.$message.error(`${info.file.name} file upload failed.`);
343                 }
af029b 344
I 345                 if (this.form.blogFileList == null || this.form.blogFileList.length == 0) {
346                     this.form.fileId = null
347                 }
c23efb 348             },
I 349             handleChangeCoverFile(info) {
af029b 350                 this.form.coverFileList = info.fileList;
I 351
c23efb 352                 if (info.file.status !== 'uploading') {
I 353                     console.log(info.file, info.fileList);
354                 }
355                 if (info.file.status === 'done') {
356                     this.form.coverFile = info.file.response.data;
6bcd13 357                     this.$message.success(`${info.file.name} file uploaded successfully`);
I 358                 } else if (info.file.status === 'error') {
359                     this.$message.error(`${info.file.name} file upload failed.`);
af029b 360                 }
I 361
362                 if (this.form.coverFileList == null || this.form.coverFileList.length == 0) {
363                     this.form.coverFile = null
6bcd13 364                 }
I 365             },
366             /**
367              * 上传文件
368              */
369             customRequest(option) {
370                 const formData = new FormData()
371                 formData.append('file', option.file)
105729 372                 formData.append('fileType', option.data.fileType)
0dd41b 373                 formData.append('authCode', this.form.secret == "" ? "" : md5(this.form.secret))
105729 374                 myFileInfoUpload(formData).then((res) => {
6bcd13 375                     if (res.success) {
I 376                         this.$message.success('上传成功')
c23efb 377
6bcd13 378                         option.onSuccess(res, option.file)
I 379                     } else {
380                         this.$message.error('上传失败：' + res.message)
381                     }
382                 })
383             },
f5539f 384             disabledDate(current) {
L 385                 return current < moment().subtract(1, "day");
386             },
387             getCalendarContainer(trigger) {
388                 return trigger => trigger.parentNode;
389             },
390             handleClose(removedTag) {
af029b 391                 // const tags = this.tags.filter(tag => tag !== removedTag);
1ad93b 392                 //console.log(tags);
af029b 393                 this.tags = this.tags.filter(tag => tag !== removedTag);
f5539f 394             },
L 395
396             showInput() {
397                 this.inputVisible = true;
398                 this.$nextTick(function() {
399                     this.$refs.input.focus();
400                 });
401             },
402
403             handleInputChange(e) {
404                 this.inputValue = e.target.value;
405             },
406
407             handleInputConfirm() {
408                 const inputValue = this.inputValue;
409                 let tags = this.tags;
410                 if (inputValue && tags.indexOf(inputValue) === -1) {
411                     tags = [...tags, inputValue];
412                 }
1ad93b 413                 //console.log(tags);
f5539f 414                 Object.assign(this, {
L 415                     tags,
416                     inputVisible: false,
417                     inputValue: '',
418                 });
419             },
1ad93b 420
f5539f 421         },
L 422     };
423 </script>
424
425 <style lang="less">
1ad93b 426     @media screen and(max-width: 575px) {
I 427         .ant-form-item-label {
428             padding: 8px !important;
429         }
430     }
431
f5539f 432     .myTip {
L 433         font-size: 10px;
434         color: #999;
435     }
436
437     .myBorder {
438         border: 1px solid #999;
1ad93b 439         border-radius: 10px;
f5539f 440     }
L 441
442     .ant-upload-list-item-info {
443         a {
444             color: #999;
445         }
446     }
447
448     /* tile uploaded pictures */
449     .upload-list-inline>.ant-upload-list-item {
450         float: left;
451         width: 100px;
452         margin-right: 8px;
453     }
454
455     .upload-list-inline>.ant-upload-animate-enter {
456         animation-name: uploadAnimateInlineIn;
457     }
458
459     .upload-list-inline>.ant-upload-animate-leave {
460         animation-name: uploadAnimateInlineOut;
461     }
462 </style>