blog的前端代码
view | history | commit | commitdiff
inleft
2022-08-11 859ec7a60a9a1f30c898dbf1ae05c50dccfc40e5
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">
I 25
26                 <a-upload :customRequest="customRequest" name="file" :showUploadList="true" @change="handleChange"
105729 27                     :default-file-list="form.blogFileList" :beforeUpload="beforeUpload"
I 28                     :data="{'fileType':fileTypeMarkDown}">
6bcd13 29
I 30                     <a-button>
31                         <a-icon type="upload" />限 markdown/html
f5539f 32                     </a-button>
L 33                 </a-upload>
34             </a-form-model-item>
35
63f511 36             <a-form-model-item label="日志内容" v-show="form.online">
f5539f 37                 <a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
L 38             </a-form-model-item>
39
1ad93b 40             <a-form-model-item label="分类" prop="class">
6bcd13 41                 <a-select v-model="form.class" :allowClear="true" mode="default" placeholder="日志分类"
f5539f 42                     :getPopupContainer="getCalendarContainer()">
6bcd13 43
I 44                     <a-select-option v-for="(item,index) in this.blogArticleType" :key="index" :value="item.id">
45                         {{ item.typeName }}
f5539f 46                     </a-select-option>
6bcd13 47
f5539f 48                 </a-select>
L 49             </a-form-model-item>
50
1ad93b 51             <a-form-model-item label="额外设置">
f5539f 52                 <a-switch v-model="form.preference" />
L 53             </a-form-model-item>
54
55             <div v-show="form.preference" class="myBorder" style="padding:10px;">
1ad93b 56                 <a-form-model-item label="起个草稿">
f5539f 57                     <a-switch v-model="form.tempSave" />
L 58                     <span v-show="form.tempSave" class="myTip">
1ad93b 59                         临时存储,游客无法浏览
f5539f 60                     </span>
L 61                 </a-form-model-item>
62
4b854c 63                 <a-form-model-item label=" 日志类型">
00e46d 64                     <a-select v-model="form.blogType" mode="default" placeholder=""
I 65                         :getPopupContainer="getCalendarContainer()">
105729 66                         <a-select-option value="1">
1ad93b 67                             markdown
00e46d 68                         </a-select-option>
105729 69                         <a-select-option value="2">
1ad93b 70                             html
00e46d 71                         </a-select-option>
105729 72                         <a-select-option value="3">
I 73                             video
74                         </a-select-option>
75                         <a-select-option value="5">
00e46d 76                             fast(闪念)
I 77                         </a-select-option>
78                     </a-select>
f5539f 79                 </a-form-model-item>
L 80
81
82                 <a-form-model-item label="标签">
83                     <template v-for="(tag, index) in tags">
84                         <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
85                             <a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
86                                 {{ `${tag.slice(0, 20)}...` }}
87                             </a-tag>
88                         </a-tooltip>
1ad93b 89                         <a-tag v-else :key="tag" :closable="index >= 0" @close="() => handleClose(tag)">
f5539f 90                             {{ tag }}
L 91                         </a-tag>
92                     </template>
1ad93b 93
f5539f 94                     <a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
L 95                         :value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
96                         @keyup.enter="handleInputConfirm" />
1ad93b 97
f5539f 98                     <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
L 99                         <a-icon type="plus" /> New Tag
100                     </a-tag>
1ad93b 101
f5539f 102                 </a-form-model-item>
L 103
104
105                 <a-form-model-item label="封面">
6bcd13 106                     <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
105729 107                         @change="handleChangeCoverFile" :default-file-list="form.coverFileList" 
I 108                         :beforeUpload="beforeUploadCover" :data="{'fileType':fileTypeCover}">
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() {
06ee76 198
L 199             let validateContent = (rule, value, callback) => {
200                 if (this.form.online) {
201                     console.log("内容未填");
202                     this.$refs.myForm.validateField('content')
63f511 203                     if (this.form.content == null || this.form.content == "") {
I 204                         callback(new Error('内容未填'));
205                     }
06ee76 206                 } else {
L 207                     console.log("文件未传");
208                     this.$refs.myForm.validateField('blogFileList')
c23efb 209                     if (this.form.fileId == null) {
63f511 210                         callback(new Error('文件未传'));
I 211                     }
06ee76 212                 }
L 213                 callback();
214             };
215
f5539f 216             return {
105729 217                 fileTypeMarkDown: myConstant.fileTypeMarkDown,
I 218                 fileTypeCover: myConstant.fileTypeCover,
6bcd13 219                 blogArticleType: [],
f5539f 220                 tags: [],
L 221                 inputVisible: false,
222                 inputValue: '',
223                 labelCol: {
1ad93b 224                     span: 7
f5539f 225                 },
L 226                 wrapperCol: {
1ad93b 227                     span: 13
f5539f 228                 },
L 229                 form: {
6bcd13 230                     secret: '',
06ee76 231                     online: false,
1ad93b 232                     preference: false,
f5539f 233                     title: '',
L 234                     content: '',
235                     class: [],
236                     tempSave: false,
c23efb 237                     blogType: "1",
f5539f 238                     publishDate: "",
L 239                     lock: false,
6bcd13 240                     top: false,
105729 241                     sliderValue: 50,
c23efb 242                     auth: 1,
f5539f 243                     password: "",
c23efb 244                     fileId: null,
I 245                     coverFile: null,
f5539f 246                     blogFileList: [],
1ad93b 247                     coverFileList: [],
f5539f 248                 },
1ad93b 249                 rules: {
I 250                     title: [{
251                             required: true,
252                             message: '标题不能为空',
253                             trigger: 'blur'
254                         },
255                         {
63f511 256                             min: 1,
1ad93b 257                             max: 50,
I 258                             message: '字数限制1~50',
259                             trigger: 'blur'
260                         },
261                     ],
6bcd13 262                     secret: [{
I 263                         required: true,
264                         message: '不正经的人..',
265                         trigger: 'blur'
266                     }],
06ee76 267                     common: [{
L 268                         validator: validateContent,
269                         trigger: []
270                     }],
63f511 271                     // content: [{
I 272                     //     max: 10,
273                     //     required: true,
274                     //     message: '至少填一下上传内容',
275                     //     trigger: 'blur'
276                     // }, ],
277                     // blogFileList: [{
278                     //     max: 1,
279                     //     required: true,
280                     //     message: '文件未上传',
281                     // }],
1ad93b 282                     class: [{
I 283                         required: true,
284                         message: '至少选一个分类',
285                         trigger: 'blur'
286                     }, ],
63f511 287
1ad93b 288                 }
f5539f 289             };
L 290         },
291         methods: {
105729 292
I 293             beforeUploadCover(file, fileList) {
294                 if (this.form.coverFileList.length > 1) {
295                     this.$message.error('这里最多上传一个文件');
296                     return false;
297                 }
298             },
6bcd13 299             beforeUpload(file, fileList) {
I 300                 return new Promise((resolve, reject) => {
c23efb 301                     if (this.form.fileId != null) {
6bcd13 302                         this.$message.error('这里最多上传一个文件');
I 303                         return reject(false);
304                     }
63f511 305                     // var testmsg=/^image\/(jpeg|png|jpg)$/.test(file.type)
I 306                     // // var testmsg=/^image\/(md|html|markdown)$/.test(file.type)
307                     // if (!testmsg) {
308                     //   this.$message.error('上传文件格式不对!');
309                     //   return reject(false);
310                     // }
311
312                     const isLt2M = file.size / 1024 / 1024 <= 2 //图片大小不超过2MB
313                     if (!isLt2M) {
314                         this.$message.error('上传文件大小不能超过 2M!');
315                         return reject(false);
316                     }
317                     return resolve(true)
318                 });
319
6bcd13 320             },
I 321             handleChange(info) {
322                 if (info.file.status !== 'uploading') {
323                     console.log(info.file, info.fileList);
324                 }
325                 if (info.file.status === 'done') {
c23efb 326                     this.form.fileId = info.file.response.data;
I 327                     this.$message.success(`${info.file.name} file uploaded successfully`);
328                 } else if (info.file.status === 'error') {
329                     this.$message.error(`${info.file.name} file upload failed.`);
330                 }
331             },
332             handleChangeCoverFile(info) {
333                 if (info.file.status !== 'uploading') {
334                     console.log(info.file, info.fileList);
335                 }
336                 if (info.file.status === 'done') {
337                     this.form.coverFile = info.file.response.data;
6bcd13 338                     this.$message.success(`${info.file.name} file uploaded successfully`);
I 339                 } else if (info.file.status === 'error') {
340                     this.$message.error(`${info.file.name} file upload failed.`);
341                 }
342             },
343             /**
344              * 上传文件
345              */
346             customRequest(option) {
347                 const formData = new FormData()
348                 formData.append('file', option.file)
105729 349                 formData.append('fileType', option.data.fileType)
I 350                 formData.append('authCode', this.form.secret)
351                 myFileInfoUpload(formData).then((res) => {
6bcd13 352                     if (res.success) {
I 353                         this.$message.success('上传成功')
c23efb 354
6bcd13 355                         option.onSuccess(res, option.file)
I 356                     } else {
357                         this.$message.error('上传失败：' + res.message)
358                     }
359                 })
360             },
f5539f 361             disabledDate(current) {
L 362                 return current < moment().subtract(1, "day");
363             },
364             getCalendarContainer(trigger) {
365                 return trigger => trigger.parentNode;
366             },
367             handleClose(removedTag) {
368                 const tags = this.tags.filter(tag => tag !== removedTag);
1ad93b 369                 //console.log(tags);
f5539f 370                 this.tags = tags;
L 371             },
372
373             showInput() {
374                 this.inputVisible = true;
375                 this.$nextTick(function() {
376                     this.$refs.input.focus();
377                 });
378             },
379
380             handleInputChange(e) {
381                 this.inputValue = e.target.value;
382             },
383
384             handleInputConfirm() {
385                 const inputValue = this.inputValue;
386                 let tags = this.tags;
387                 if (inputValue && tags.indexOf(inputValue) === -1) {
388                     tags = [...tags, inputValue];
389                 }
1ad93b 390                 //console.log(tags);
f5539f 391                 Object.assign(this, {
L 392                     tags,
393                     inputVisible: false,
394                     inputValue: '',
395                 });
396             },
1ad93b 397
f5539f 398         },
L 399     };
400 </script>
401
402 <style lang="less">
1ad93b 403     @media screen and(max-width: 575px) {
I 404         .ant-form-item-label {
405             padding: 8px !important;
406         }
407     }
408
f5539f 409     .myTip {
L 410         font-size: 10px;
411         color: #999;
412     }
413
414     .myBorder {
415         border: 1px solid #999;
1ad93b 416         border-radius: 10px;
f5539f 417     }
L 418
419     .ant-upload-list-item-info {
420         a {
421             color: #999;
422         }
423     }
424
425     /* tile uploaded pictures */
426     .upload-list-inline>.ant-upload-list-item {
427         float: left;
428         width: 100px;
429         margin-right: 8px;
430     }
431
432     .upload-list-inline>.ant-upload-animate-enter {
433         animation-name: uploadAnimateInlineIn;
434     }
435
436     .upload-list-inline>.ant-upload-animate-leave {
437         animation-name: uploadAnimateInlineOut;
438     }
439 </style>