src/components/mini/box10-add.vue

@@ -1,23 +1,35 @@
<template>
   <div class="myFrom">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
         <a-form-model-item label="标题">
   <div>
      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
         <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
      <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>

         <a-form-model-item label="模式切换">
         <a-form-model-item label="模式切换" prop="common">
            <a-switch v-model="form.online" />
            <span class="myTip">
               本地编辑/由系统生成文件
            <span class="myTip" v-if="form.online">
               由系统生成文件
            </span>
            <span class="myTip" v-else>
               本地文件上传
            </span>
         </a-form-model-item>


         <a-form-model-item label="日志文件" v-show="!form.online">
            <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
               :default-file-list="form.blogFileList">
            <a-upload ref="blogFileUpload" :customRequest="customRequest" name="file" :showUploadList="true"
               @change="handleChange" :default-file-list="form.blogFileList" :beforeUpload="beforeUpload"
               :data="{'bucketName':bucketName.bucket_article}" accept=".md,.html,.htm,.txt">
               <a-button>
                  <a-icon type="upload" /> 限 md/html 文件
                  <a-icon type="upload" />限 md/html/txt
               </a-button>
            </a-upload>
         </a-form-model-item>
@@ -26,45 +38,100 @@
            <a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
         </a-form-model-item>

         <a-form-model-item label="分类">
            <a-select v-model="form.class" :allowClear="true" mode="multiple" placeholder="多选(至少一个)"
         <a-form-model-item label="分类" prop="class">
            <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>

         <a-form-model-item label="偏好">
         <a-form-model-item label="额外设置">
            <a-switch v-model="form.preference" />
         </a-form-model-item>

         <div v-show="form.preference" class="myBorder" style="padding:10px;">
            <a-form-model-item label="草稿模式">
            <a-form-model-item label="起个草稿">
               <a-switch v-model="form.tempSave" />
               <span v-show="form.tempSave" class="myTip">
                  临时存储,将不会发布该篇日志
                  临时存储,游客无法浏览
               </span>
            </a-form-model-item>

            <a-form-model-item label=" 文件类型">
               <a-radio-group v-model="form.blogType">
                  <a-radio value="Markdown">
                     Markdown
                  </a-radio>
                  <a-radio value="Html">
                     Html
                  </a-radio>
               </a-radio-group>
            <a-form-model-item label=" 主类型">
               <a-select v-model="form.blogType" mode="default" placeholder=""
                  :getPopupContainer="getCalendarContainer()">
                  <a-select-option value="1">
                     markdown
                  </a-select-option>
                  <a-select-option value="2">
                     html
                  </a-select-option>
                  <a-select-option value="3">
                     视频
                  </a-select-option>
                  <a-select-option value="4">
                     音频
                  </a-select-option>
                  <a-select-option value="5">
                     图组
                  </a-select-option>
                  <a-select-option value="9">
                     taking
                  </a-select-option>
               </a-select>
            </a-form-model-item>

            <a-form-model-item label="引言" prop="introduce">
               <a-input v-model="form.introduce" type="textarea" placeholder="限700字数" />
            </a-form-model-item>
				
            <a-form-model-item label="封面">
               <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
                  :data="{'bucketName':bucketName.bucket_cover}" @change="handleChangeCoverFile"
                  :default-file-list="form.coverFileList" :beforeUpload="beforeUploadCover"
                  accept=".jpg,.png,.jpeg" @preview="handlePreview">
                  <!-- :disabled="form.coverFileList.length>=1" -->
                  <a-button>
                     <a-icon type="upload" />jpg/png/jpeg..
                  </a-button>
               </a-upload>
               <!-- <span class="myTip">
                  自动转码,可以传高清图
               </span> -->
            </a-form-model-item>

            <a-form-model-item label="图组">
               <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture-card"
                  :data="{'bucketName':bucketName.bucket_picture}" @change="handleChangePictureFile"
                  :default-file-list="form.pictureList" :beforeUpload="beforeUploadPicture"
                  accept=".jpg,.png,.jpeg" :multiple="true" @preview="handlePreview">
                  <a-button>
                     <a-icon type="upload" />jpg/png/jpeg..
                  </a-button>
               </a-upload>
            </a-form-model-item>

            <a-form-model-item label="视频组">
               <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="text"
                  :data="{'bucketName':bucketName.bucket_video}" @change="handleChangeVideoFile"
                  :default-file-list="form.videoList" :beforeUpload="beforeUploadVideo" :multiple="true"
                  accept=".mp4">
                  <a-button>
                     <a-icon type="upload" />mp4
                  </a-button>
               </a-upload>
            </a-form-model-item>

            <a-form-model-item label="定时">
               <a-date-picker v-model="momentDate" show-time type="datetime" placeholder="发布时间"
                  style="width: 100%;" :disabledDate="disabledDate" @change="formatDate"
                  :getCalendarContainer="getCalendarContainer()" />
            </a-form-model-item>
				
            <a-form-model-item label="标签">
               <template v-for="(tag, index) in tags">
                  <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
@@ -72,37 +139,38 @@
                        {{ `${tag.slice(0, 20)}...` }}
                     </a-tag>
                  </a-tooltip>
                  <a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
                  <a-tag v-else :key="tag" :closable="index >= 0" @close="() => handleClose(tag)">
                     {{ tag }}
                  </a-tag>
               </template>
				
               <a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
                  :value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
                  @keyup.enter="handleInputConfirm" />
				
               <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                  <a-icon type="plus" /> New Tag
               </a-tag>
            </a-form-model-item>

            <div v-bind:class="{'myBorder':form.top}" style="padding: 3px;margin-bottom: 10px;">
               <a-form-model-item label="置顶">
                  <a-switch v-model="form.top" />
               </a-form-model-item>

            <a-form-model-item label="封面">
               <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-form-model-item>

            <a-form-model-item label="定时">
               <a-date-picker v-model="form.publishDate" show-time type="date" placeholder="发布时间"
                  style="width: 100%;" :disabledDate="disabledDate"
                  :getCalendarContainer="getCalendarContainer()" />
            </a-form-model-item>
               <div v-show="form.top">
                  <a-form-model-item label="权重">
                     <a-slider v-model="form.sliderValue" :default-value="50" :step="5"
                        :getTooltipPopupContainer="getCalendarContainer()" />
                     <span class="myTip">
                        越小越靠前
                     </span>
                  </a-form-model-item>
               </div>
            </div>



            <div v-bind:class="{'myBorder':form.lock}">
            <div v-bind:class="{'myBorder':form.lock}" style="padding: 3px;">

               <a-form-model-item label="加锁">
                  <a-switch v-model="form.lock" />
@@ -114,19 +182,20 @@
               <div v-show="form.lock ">
                  <a-form-model-item label="阅读权限">
                     <a-radio-group v-model="form.auth">
                        <a-radio value="private">
                        <a-radio value="2">
                           私人
                        </a-radio>
                        <a-radio value="password">
                        <a-radio value="3">
                           密码授权
                        </a-radio>
                     </a-radio-group>
                  </a-form-model-item>

                  <a-form-model-item label="授权密码" v-show="form.auth=='password'">
                     <a-input v-model="form.password" type="password" placeholder="Password">
                  <a-form-model-item label="授权密码" v-show="form.auth==3">
                     <a-input-password 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-input-password>
                  </a-form-model-item>
               </div>

@@ -140,53 +209,342 @@

<script>
   import moment from "moment";
   import {
      sysFileInfoUpload,
      myFileInfoUpload
   } from '../../api/fileManage.js';

   import {
      queryBlogArticleType
   } from '../../api/blogArticleType.js'

   import myConstant from "../../config/myConstant.js"
   import md5 from 'js-md5';

   function getBase64(file) {
      return new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = () => resolve(reader.result);
         reader.onerror = error => reject(error);
      });
   }

   export default {
      beforeMount() {
         queryBlogArticleType({}).then((res) => {
            this.blogArticleType = res.data;
         })
      },
      data() {
         let _this = this;
         let validateContent = (rule, value, callback) => {
            if (_this.form.online) {
               //this.$refs.myForm.validateField('content')
               if (_this.form.content == null || _this.form.content == "") {
                  callback(new Error('内容未填'));
               }
            } else {
               //this.$refs.myForm.validateField('blogFileList')
               if (_this.form.fileId == null) {
                  callback(new Error('文件未传'));
               }
            }
            callback();
         };

         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',
               // } 
            ],
            previewVisible: false,
            previewImage: '',
            bucketName: myConstant.bucketName,
            momentDate: undefined,
            blogArticleType: [],
            tags: [],
            inputVisible: false,
            inputValue: '',
            labelCol: {
               span: 5
               span: 7
            },
            wrapperCol: {
               span: 19
               span: 13
            },
            form: {
               preference: true,
               introduce: '',
               secret: '',
               title: '',
               content: '',
               class: [],
               tempSave: false,
               blogType: "Markdown",
               blogType: "1",
               publishDate: "",
               lock: false,
               auth: "private",
               top: false,
               sliderValue: 50,
               auth: 1,
               password: "",
               fileId: null,
               coverFile: null,
               pictureIds: null,
               videoIds: null,
               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',
                  // } 
               ],
               coverFileList: [],
               pictureList: [],
               videoList: [],
               online: false,
               preference: false,
            },
            rules: {
               title: [{
                     required: true,
                     message: '标题不能为空',
                     trigger: 'blur'
                  },
                  {
                     min: 1,
                     max: 50,
                     message: '字数限制1~50',
                     trigger: 'blur'
                  },
               ],
               introduce: [{
                  max: 5,
                  message: '字数限制700',
                  trigger: 'blur'
               }, ],
               secret: [{
                  required: true,
                  message: '好像这里错了..',
                  trigger: 'blur'
               }],
               common: [{
                  validator: validateContent,
                  trigger: []
               }],
               // content: [{
               //    max: 10,
               //    required: true,
               //    message: '至少填一下上传内容',
               //    trigger: 'blur'
               // }, ],
               // blogFileList: [{
               //    max: 1,
               //    required: true,
               //    message: '文件未上传',
               // }],
               class: [{
                  required: true,
                  message: '至少选一个分类',
                  trigger: 'blur'
               }, ],

            }
         };
      },
      methods: {
         handleCancel() {
            this.previewVisible = false;
         },
         async handlePreview(file) {
            if (!file.url && !file.preview) {
               file.preview = await getBase64(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
         },
         reset() {
            // this.form.blogFileList = [];
            // this.form.coverFileList = [];
         },
         formatDate(date, dateString) {
            this.form.publishDate = dateString;
         },
         beforeUploadVideo(file, fileList) {
            return new Promise((resolve, reject) => {
               if (this.form.secret == null || this.form.secret == "") {
                  this.$message.error('需要正确的授权码');
                  return reject(false);
               }

               if (this.form.coverFileList.length > 10) {
                  this.$message.error('这里最多上传10个文件');
                  return reject(false);
               }
               if (file.size > myConstant.uploadVideoSizeLimit) {
                  this.$message.error('上传文件大小不能超过 200M!');
                  return reject(false);
               }
               return resolve(true)
            });
         },
         beforeUploadPicture(file, fileList) {
            return new Promise((resolve, reject) => {
               if (this.form.secret == null || this.form.secret == "") {
                  this.$message.error('需要正确的授权码');
                  return reject(false);
               }

               if (this.form.coverFileList.length > 10) {
                  this.$message.error('这里最多上传10个文件');
                  return reject(false);
               }
               if (file.size > myConstant.uploadFileSizeLimit) {
                  this.$message.error('上传文件大小不能超过 2M!');
                  return reject(false);
               }
               return resolve(true)
            });
         },
         beforeUploadCover(file, fileList) {
            return new Promise((resolve, reject) => {
               if (this.form.secret == null || this.form.secret == "") {
                  this.$message.error('需要正确的授权码');
                  return reject(false);
               }

               if (this.form.coverFileList.length >= 1) {
                  this.$message.error('这里最多上传一个文件');
                  return reject(false);
               }
               if (file.size > myConstant.uploadFileSizeLimit) {
                  this.$message.error('上传文件大小不能超过 2M!');
                  return reject(false);
               }
               return resolve(true)
            });
         },
         beforeUpload(file, fileList) {
            return new Promise((resolve, reject) => {
               if (this.form.secret == null || this.form.secret == "") {
                  this.$message.error('需要正确的口令..');
                  return reject(false);
               }

               if (this.form.blogFileList.length >= 1) {
                  this.$message.error('这里最多上传一个文件');
                  return reject(false);
               }

               if (file.size > myConstant.uploadFileSizeLimit) {
                  this.$message.error('上传文件大小不能超过 2M!');
                  return reject(false);
               }
               return resolve(true)
            });

         },
         handleChange(info) {
            this.form.blogFileList = info.fileList;

            if (info.file.status !== 'uploading') {
               console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
               this.form.fileId = info.file.response.data;
               this.$message.success(`${info.file.name} 上传成功`);
            } else if (info.file.status === 'error') {
               this.$message.error(`${info.file.name} 上传失败`);
            }

            if (this.form.blogFileList == null || this.form.blogFileList.length == 0) {
               this.form.fileId = null
            }
         },
         handleChangeCoverFile(info) {
            this.form.coverFileList = info.fileList;

            if (info.file.status !== 'uploading') {
               console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
               this.form.coverFile = info.file.response.data;
               this.$message.success(`${info.file.name} 上传成功`);
            } else if (info.file.status === 'error') {
               this.$message.error(`${info.file.name} 上传失败`);
            }

            if (this.form.coverFileList == null || this.form.coverFileList.length == 0) {
               this.form.coverFile = null
            }
         },
         handleChangePictureFile(info) {
            this.form.pictureList = info.fileList;

            if (info.file.status !== 'uploading') {
               console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
               if (this.form.pictureIds == null || this.form.pictureIds == "") {
                  this.form.pictureIds = info.file.response.data;
               } else {
                  this.form.pictureIds = this.form.pictureIds + "," + info.file.response.data;
               }
               this.$message.success(`${info.file.name} 上传成功`);
            } else if (info.file.status === 'error') {
               this.$message.error(`${info.file.name} 上传失败`);
            }

            if (this.form.pictureList == null || this.form.pictureList.length == 0) {
               this.form.pictureIds = null
            }
         },
         handleChangeVideoFile(info) {
            this.form.videoList = info.fileList;

            if (info.file.status !== 'uploading') {
               console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
               if (this.form.videoIds == null || this.form.videoIds == "") {
                  this.form.videoIds = info.file.response.data;
               } else {
                  this.form.videoIds = this.form.videoIds + "," + info.file.response.data
               }
               this.$message.success(`${info.file.name} 上传成功`);
            } else if (info.file.status === 'error') {
               this.$message.error(`${info.file.name} 上传失败`);
            }

            if (this.form.videoList == null || this.form.videoList.length == 0) {
               this.form.videoIds = null
            }
         },
         /**
          * 上传文件
          */
         customRequest(option) {
            const formData = new FormData()
            formData.append('file', option.file)
            formData.append('bucketName', option.data.bucketName)
            formData.append('authCode', this.form.secret == "" ? "" : md5(this.form.secret))
            let _this = this
            myFileInfoUpload(formData).then((res) => {
               if (res.success) {
                  option.onSuccess(res, option.file)
                  // 在上传成功后进度条显示为99
                  progress.percent = 100
                  // this.$message.success('上传成功')
               } else {
                  this.$message.error('上传失败：' + res.message)
               }
            })

            let progress = {
               percent: 1
            }
            let speed = 100 / (option.file.size / 65000) //上传速度
            const intervalId = setInterval(() => {
               // 控制进度条防止在未上传成功时进度条达到100
               if (progress.percent < 99 && progress.percent + speed < 100) {
                  progress.percent += speed //控制进度条速度
                  option.onProgress(progress) //onProgress接收一个对象{ percent: 进度 }在进度条上显示
               } else if ((progress.percent < 100)) {
                  progress.percent++
               } else if (progress.percent >= 100) {
                  clearInterval(intervalId)
               }
            }, 500)

         },
         disabledDate(current) {
            return current < moment().subtract(1, "day");
         },
@@ -194,43 +552,44 @@
            return trigger => trigger.parentNode;
         },
         handleClose(removedTag) {
            const tags = this.tags.filter(tag => tag !== removedTag);
            console.log(tags);
            this.tags = tags;
            // const tags = this.tags.filter(tag => tag !== removedTag);
            //console.log(tags);
            this.tags = this.tags.filter(tag => tag !== removedTag);
         },

         showInput() {
            this.inputVisible = true;
            this.$nextTick(function() {
               this.$refs.input.focus();
            });
         },

         handleInputChange(e) {
            this.inputValue = e.target.value;
         },

         handleInputConfirm() {
            const inputValue = this.inputValue;
            let tags = this.tags;
            if (inputValue && tags.indexOf(inputValue) === -1) {
               tags = [...tags, inputValue];
            }
            console.log(tags);
            //console.log(tags);
            Object.assign(this, {
               tags,
               inputVisible: false,
               inputValue: '',
            });
         },
         onSubmit() {
            console.log('submit!', this.form);
         },

      },
   };
</script>

<style lang="less">
   @media screen and(max-width: 575px) {
      .ant-form-item-label {
         padding: 8px !important;
      }
   }

   .myTip {
      font-size: 10px;
      color: #999;
@@ -238,6 +597,7 @@

   .myBorder {
      border: 1px solid #999;
      border-radius: 10px;
   }

   .ant-upload-list-item-info {