blog的前端代码
view | history | commit | commitdiff
inleft
2022-08-11 af029bdfb645bd2b75fbab687c1a5f45b428d801
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"
63f511 190
f5539f 191     export default {
6bcd13 192         beforeMount() {
I 193             queryBlogArticleType({}).then((res) => {
194                 this.blogArticleType = res.data;
195             })
196         },
f5539f 197         data() {
af029b 198             let _this = this;
06ee76 199             let validateContent = (rule, value, callback) => {
af029b 200                 if (_this.form.online) {
I 201                     //this.$refs.myForm.validateField('content')
202                     if (_this.form.content == null || _this.form.content == "") {
63f511 203                         callback(new Error('内容未填'));
I 204                     }
06ee76 205                 } else {
af029b 206                     //this.$refs.myForm.validateField('blogFileList')
I 207                     if (_this.form.fileId == null) {
63f511 208                         callback(new Error('文件未传'));
I 209                     }
06ee76 210                 }
L 211                 callback();
212             };
213
f5539f 214             return {
105729 215                 fileTypeMarkDown: myConstant.fileTypeMarkDown,
I 216                 fileTypeCover: myConstant.fileTypeCover,
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,
262                         message: '不正经的人..',
263                         trigger: 'blur'
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) => {
af029b 296                     if (this.form.coverFileList.length >= 1) {
6bcd13 297                         this.$message.error('这里最多上传一个文件');
I 298                         return reject(false);
299                     }
af029b 300                     if (file.size > myConstant.uploadFileSizeLimit) {
I 301                         this.$message.error('上传文件大小不能超过 2M!');
302                         return reject(false);
303                     }
304                     return resolve(true)
305                 });
306             },
307             beforeUpload(file, fileList) {
308                 return new Promise((resolve, reject) => {
309                     if (this.form.blogFileList.length >= 1) {
310                         this.$message.error('这里最多上传一个文件');
311                         return reject(false);
312                     }
63f511 313
af029b 314                     if (file.size > myConstant.uploadFileSizeLimit) {
63f511 315                         this.$message.error('上传文件大小不能超过 2M!');
I 316                         return reject(false);
317                     }
318                     return resolve(true)
319                 });
320
6bcd13 321             },
I 322             handleChange(info) {
af029b 323                 this.form.blogFileList = info.fileList;
I 324
6bcd13 325                 if (info.file.status !== 'uploading') {
I 326                     console.log(info.file, info.fileList);
327                 }
328                 if (info.file.status === 'done') {
c23efb 329                     this.form.fileId = info.file.response.data;
I 330                     this.$message.success(`${info.file.name} file uploaded successfully`);
331                 } else if (info.file.status === 'error') {
332                     this.$message.error(`${info.file.name} file upload failed.`);
333                 }
af029b 334
I 335                 if (this.form.blogFileList == null || this.form.blogFileList.length == 0) {
336                     this.form.fileId = null
337                 }
c23efb 338             },
I 339             handleChangeCoverFile(info) {
af029b 340                 this.form.coverFileList = info.fileList;
I 341
c23efb 342                 if (info.file.status !== 'uploading') {
I 343                     console.log(info.file, info.fileList);
344                 }
345                 if (info.file.status === 'done') {
346                     this.form.coverFile = info.file.response.data;
6bcd13 347                     this.$message.success(`${info.file.name} file uploaded successfully`);
I 348                 } else if (info.file.status === 'error') {
349                     this.$message.error(`${info.file.name} file upload failed.`);
af029b 350                 }
I 351
352                 if (this.form.coverFileList == null || this.form.coverFileList.length == 0) {
353                     this.form.coverFile = null
6bcd13 354                 }
I 355             },
356             /**
357              * 上传文件
358              */
359             customRequest(option) {
360                 const formData = new FormData()
361                 formData.append('file', option.file)
105729 362                 formData.append('fileType', option.data.fileType)
I 363                 formData.append('authCode', this.form.secret)
364                 myFileInfoUpload(formData).then((res) => {
6bcd13 365                     if (res.success) {
I 366                         this.$message.success('上传成功')
c23efb 367
6bcd13 368                         option.onSuccess(res, option.file)
I 369                     } else {
370                         this.$message.error('上传失败：' + res.message)
371                     }
372                 })
373             },
f5539f 374             disabledDate(current) {
L 375                 return current < moment().subtract(1, "day");
376             },
377             getCalendarContainer(trigger) {
378                 return trigger => trigger.parentNode;
379             },
380             handleClose(removedTag) {
af029b 381                 // const tags = this.tags.filter(tag => tag !== removedTag);
1ad93b 382                 //console.log(tags);
af029b 383                 this.tags = this.tags.filter(tag => tag !== removedTag);
f5539f 384             },
L 385
386             showInput() {
387                 this.inputVisible = true;
388                 this.$nextTick(function() {
389                     this.$refs.input.focus();
390                 });
391             },
392
393             handleInputChange(e) {
394                 this.inputValue = e.target.value;
395             },
396
397             handleInputConfirm() {
398                 const inputValue = this.inputValue;
399                 let tags = this.tags;
400                 if (inputValue && tags.indexOf(inputValue) === -1) {
401                     tags = [...tags, inputValue];
402                 }
1ad93b 403                 //console.log(tags);
f5539f 404                 Object.assign(this, {
L 405                     tags,
406                     inputVisible: false,
407                     inputValue: '',
408                 });
409             },
1ad93b 410
f5539f 411         },
L 412     };
413 </script>
414
415 <style lang="less">
1ad93b 416     @media screen and(max-width: 575px) {
I 417         .ant-form-item-label {
418             padding: 8px !important;
419         }
420     }
421
f5539f 422     .myTip {
L 423         font-size: 10px;
424         color: #999;
425     }
426
427     .myBorder {
428         border: 1px solid #999;
1ad93b 429         border-radius: 10px;
f5539f 430     }
L 431
432     .ant-upload-list-item-info {
433         a {
434             color: #999;
435         }
436     }
437
438     /* tile uploaded pictures */
439     .upload-list-inline>.ant-upload-list-item {
440         float: left;
441         width: 100px;
442         margin-right: 8px;
443     }
444
445     .upload-list-inline>.ant-upload-animate-enter {
446         animation-name: uploadAnimateInlineIn;
447     }
448
449     .upload-list-inline>.ant-upload-animate-leave {
450         animation-name: uploadAnimateInlineOut;
451     }
452 </style>