src/components/mini/box10-add.vue

@@ -1,32 +1,32 @@
<template>
   <div class="myFrom">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
         <a-form-model-item label="标题">
   <div>
      <a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
         <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>
         </a-form-model-item>


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

         <a-form-model-item label="日志内容" v-show="form.online">
         <a-form-model-item label="日志内容" v-show="form.online" prop="content">
            <a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
         </a-form-model-item>

         <a-form-model-item label="分类">
         <a-form-model-item label="分类" prop="class">
            <a-select v-model="form.class" :allowClear="true" mode="multiple" placeholder="多选(至少一个)"
               :getPopupContainer="getCalendarContainer()">
               <a-select-option value="shanghai">
@@ -41,25 +41,25 @@
            </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
                     markdown
                  </a-radio>
                  <a-radio value="Html">
                     Html
                     html
                  </a-radio>
               </a-radio-group>
            </a-form-model-item>
@@ -72,16 +72,19 @@
                        {{ `${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>


@@ -92,17 +95,28 @@
                     <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-date-picker v-model="form.publishDate" show-time type="date" placeholder="发布时间"
               <a-date-picker v-model="form.publishDate" show-time type="datetime" placeholder="发布时间"
                  style="width: 100%;" :disabledDate="disabledDate"
                  :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.lock}">

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

               <a-form-model-item label="加锁">
                  <a-switch v-model="form.lock" />
@@ -124,7 +138,7 @@
                  </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-input v-model="form.password" type="password" placeholder="独立密码">
                        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                     </a-input>
                  </a-form-model-item>
@@ -142,7 +156,20 @@
   import moment from "moment";
   export default {
      data() {

         let validateContent = (rule, value, callback) => {
            if (this.form.online) {
               console.log("内容未填");
               this.$refs.myForm.validateField('content')
            } else {
               console.log("文件未传");
               this.$refs.myForm.validateField('blogFileList')
            }
            callback();
         };

         return {

            blogFileList: [],
            coverFileList: [
               // {
@@ -157,13 +184,14 @@
            inputVisible: false,
            inputValue: '',
            labelCol: {
               span: 5
               span: 7
            },
            wrapperCol: {
               span: 19
               span: 13
            },
            form: {
               preference: true,
               online: false,
               preference: false,
               title: '',
               content: '',
               class: [],
@@ -174,16 +202,68 @@
               auth: "private",
               password: "",
               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: [],
            },
            rules: {
               title: [{
                     required: true,
                     message: '标题不能为空',
                     trigger: 'blur'
                  },
                  {
                     min: 5,
                     max: 50,
                     message: '字数限制1~50',
                     trigger: 'blur'
                  },
               ],
               common: [{
                  validator: validateContent,
                  trigger: []
               }],
               content: [{
                  max: 10,
                  required: true,
                  message: '至少填一下上传内容',
                  trigger: 'blur'
               }, ],
               blogFileList: [{
                  min: 1,
                  required: true,
                  message: '文件未上传',
               }],
               class: [{
                  required: true,
                  message: '至少选一个分类',
                  trigger: 'blur'
               }, ],
               // region: [{
               //    required: true,
               //    message: 'Please select Activity zone',
               //    trigger: 'change'
               // }],
               // date1: [{
               //    required: true,
               //    message: 'Please pick a date',
               //    trigger: 'change'
               // }],
               // type: [{
               //    type: 'array',
               //    required: true,
               //    message: 'Please select at least one activity type',
               //    trigger: 'change',
               // }, ],
               // resource: [{
               //    required: true,
               //    message: 'Please select activity resource',
               //    trigger: 'change'
               // }, ],
               // desc: [{
               //    required: true,
               //    message: 'Please input activity form',
               //    trigger: 'blur'
               // }],
            }
         };
      },
      methods: {
@@ -195,7 +275,7 @@
         },
         handleClose(removedTag) {
            const tags = this.tags.filter(tag => tag !== removedTag);
            console.log(tags);
            //console.log(tags);
            this.tags = tags;
         },

@@ -216,21 +296,25 @@
            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 +322,7 @@

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

   .ant-upload-list-item-info {