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