src/components/mini/box10-add.vue

@@ -1,6 +1,12 @@
<template>
   <div>
      <a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
         <a-form-model-item label="认证" prop="secret">
            <a-input v-model="form.secret" autocomplete='new-password' type="password" placeholder="口令">
               <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
            </a-input>
         </a-form-model-item>

         <a-form-model-item label="标题" prop="title">
            <a-input v-model="form.title" placeholder="限 50字内" />
         </a-form-model-item>
@@ -13,11 +19,21 @@
         </a-form-model-item>


         <a-form-model-item label="日志文件" v-show="!form.online" prop="blogFileList">
            <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
         <a-form-model-item label="日志文件" v-show="!form.online">
            <!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
               :default-file-list="form.blogFileList">
               <a-button>
                  <a-icon type="upload" /> 限 markdown/html
               </a-button>
            </a-upload> -->

            <a-upload :customRequest="customRequest" name="file" :showUploadList="true" @change="handleChange"
               :default-file-list="form.blogFileList" 
               :beforeUpload="beforeUpload"
               >

               <a-button>
                  <a-icon type="upload" />限 markdown/html
               </a-button>
            </a-upload>
         </a-form-model-item>
@@ -27,17 +43,13 @@
         </a-form-model-item>

         <a-form-model-item label="分类" prop="class">
            <a-select v-model="form.class" :allowClear="true" mode="multiple" placeholder="多选(至少一个)"
            <a-select v-model="form.class" :allowClear="true" mode="default" placeholder="日志分类"
               :getPopupContainer="getCalendarContainer()">
               <a-select-option value="shanghai">
                  Zone one

               <a-select-option v-for="(item,index) in this.blogArticleType" :key="index" :value="item.id">
                  {{ item.typeName }}
               </a-select-option>
               <a-select-option value="beijing">
                  Zone two
               </a-select-option>
               <a-select-option value="beijing2">
                  Zone two
               </a-select-option>

            </a-select>
         </a-form-model-item>

@@ -89,15 +101,22 @@


            <a-form-model-item label="封面">
               <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
               <!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
                  :default-file-list="form.coverFileList" class="upload-list-inline">
                  <a-button>
                     <a-icon type="upload" /> jpg/png/jpeg..
                  </a-button>
               </a-upload> -->

               <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
                  :default-file-list="form.coverFileList">
                  <a-button>
                     <a-icon type="upload" />jpg/png/jpeg..
                  </a-button>
               </a-upload>
               <span class="myTip">
               <!-- <span class="myTip">
                  自动转码,可以传高清图
               </span>
               </span> -->
            </a-form-model-item>

            <a-form-model-item label="定时">
@@ -106,14 +125,21 @@
                  :getCalendarContainer="getCalendarContainer()" />
            </a-form-model-item>

            <a-form-model-item label="置顶权重">
               <a-slider v-model="form.sliderValue" :default-value="20" :step="5"
                  :getTooltipPopupContainer="getCalendarContainer()" />
               <span class="myTip">
                  越小越靠前
               </span>
            </a-form-model-item>
            <div v-bind:class="{'myBorder':form.top}" style="padding: 3px;">
               <a-form-model-item label="置顶">
                  <a-switch v-model="form.top" />
               </a-form-model-item>

               <div v-show="form.top">
                  <a-form-model-item label="权重">
                     <a-slider v-model="form.sliderValue" :default-value="80" :step="5"
                        :getTooltipPopupContainer="getCalendarContainer()" />
                     <span class="myTip">
                        越小越靠前
                     </span>
                  </a-form-model-item>
               </div>
            </div>


            <div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;">
@@ -138,7 +164,8 @@
                  </a-form-model-item>

                  <a-form-model-item label="授权密码" v-show="form.auth=='password'">
                     <a-input v-model="form.password" type="password" placeholder="独立密码">
                     <a-input v-model="form.password" autocomplete='new-password' type="password"
                        placeholder="独立密码">
                        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                     </a-input>
                  </a-form-model-item>
@@ -154,7 +181,18 @@

<script>
   import moment from "moment";
   import {
      sysFileInfoUpload
   } from '../../api/fileManage.js';
   import {
      queryBlogArticleType
   } from '../../api/blogArticleType.js'
   export default {
      beforeMount() {
         queryBlogArticleType({}).then((res) => {
            this.blogArticleType = res.data;
         })
      },
      data() {

         let validateContent = (rule, value, callback) => {
@@ -169,17 +207,17 @@
         };

         return {

            blogFileList: [],
            coverFileList: [
               // {
               // uid: '-1',
               // name: 'xxx.png',
               // status: 'done',
               // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
               // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
               // } 
            ],
            blogArticleType: [],
            // blogFileList: [],
            // coverFileList: [
            //    // {
            //    // uid: '-1',
            //    // name: 'xxx.png',
            //    // status: 'done',
            //    // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            //    // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            //    // } 
            // ],
            tags: [],
            inputVisible: false,
            inputValue: '',
@@ -190,6 +228,7 @@
               span: 13
            },
            form: {
               secret: '',
               online: false,
               preference: false,
               title: '',
@@ -199,6 +238,7 @@
               blogType: "Markdown",
               publishDate: "",
               lock: false,
               top: false,
               auth: "private",
               password: "",
               blogFileList: [],
@@ -217,6 +257,11 @@
                     trigger: 'blur'
                  },
               ],
               secret: [{
                  required: true,
                  message: '不正经的人..',
                  trigger: 'blur'
               }],
               common: [{
                  validator: validateContent,
                  trigger: []
@@ -228,7 +273,7 @@
                  trigger: 'blur'
               }, ],
               blogFileList: [{
                  min: 1,
                  max: 1,
                  required: true,
                  message: '文件未上传',
               }],
@@ -267,6 +312,55 @@
         };
      },
      methods: {
         beforeUpload(file, fileList) {
            console.log(333);
            console.log(this.blogFileList);
            return new Promise((resolve, reject) => {
               if(fileList.length>=2){
                  this.$message.error('这里最多上传一个文件');
                  return reject(false);
               }
                // var testmsg=/^image\/(jpeg|png|jpg)$/.test(file.type)
                // // var testmsg=/^image\/(md|html|markdown)$/.test(file.type)
                // if (!testmsg) {
                //   this.$message.error('上传文件格式不对!');
                //   return reject(false);
                // }
					
                const isLt2M = file.size / 1024 / 1024 <=2//图片大小不超过2MB
                if(!isLt2M) {
                  this.$message.error('上传文件大小不能超过 2M!');
                  return reject(false);
                }
                return resolve(true)
              });
				
         },
         handleChange(info) {
            if (info.file.status !== 'uploading') {
               console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
               this.$message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
               this.$message.error(`${info.file.name} file upload failed.`);
            }
         },
         /**
          * 上传文件
          */
         customRequest(option) {
            const formData = new FormData()
            formData.append('file', option.file)
            sysFileInfoUpload(formData).then((res) => {
               if (res.success) {
                  this.$message.success('上传成功')
                  option.onSuccess(res, option.file)
               } else {
                  this.$message.error('上传失败：' + res.message)
               }
            })
         },
         disabledDate(current) {
            return current < moment().subtract(1, "day");
         },