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