addq

Posted 2021-02-01 cnchengv

<template>
    <el-row  id="AddRoom">
        <el-col :xs="0" :sm="2" :md="3" :lg="4">.</el-col>
        <el-col :xs="24" :sm="19" :md="16" :lg="13">
        <el-card class="box-card">

  
            <el-form ref="form" :model="form" >
                <el-form-item label="标题" prop="title" :rules="[
                { required: true, message: ‘标题不能为空‘},
                {min: 5, max: 15, message: ‘长度在 5 到 80‘, trigger: ‘blur‘ }
              ]">
                  <el-input v-model="form.title" style="width: 100%" placeholder="输入文章标题" ></el-input>
                </el-form-item>
                <el-form-item label="类型" >
                    <el-form-item prop="mainTag">
                        <el-select v-model="form.mainTag" style="width: 100%" placeholder="文章类型" >
                          <el-option label="预测" value="预测"></el-option>
                          <el-option label="讨论" value="讨论"></el-option>
                          <el-option label="知识" value="知识"></el-option>
                          <el-option label="不限" value="不限"></el-option>
                        </el-select>
                      </el-form-item>
                  </el-form-item>
                  <el-form-item  >
                    <section class="container" style="margin-top: 10px">
                      <div class="quill-editor" 
                          :content="content"
                          @change="onEditorChange($event)"
                          @blur="onEditorBlur($event)"
                          @focus="onEditorFocus($event)"
                          @ready="onEditorReady($event)"
                          v-quill:myQuillEditor="editorOption">
                      </div>

                      <el-button type="primary" style="margin-top:20px;" @click="submitForm(‘form‘)">{{gonext}}</el-button>
              
                      <el-button style="margin-top:20px;" @click="resetForm(‘form‘)">重置</el-button>
                      <el-button style="margin-top:20px;" @click="submit">提交</el-button>
                    </section>
                  </el-form-item>
            </el-form>    
          </el-card>
        </el-col>


    </el-row>

</template>
 
<style  scoped>
  /*
  .container {
    width: 60%;
    margin: 0 auto;
    padding: 50px 0;

  }
 */

   .box-card{
    margin-top:30px;
  }
  .quill-editor {
      min-height: 350px;
     /* max-height: 400px;*/
      overflow-y: auto;
    }
   
</style>

<script>
  export default {
    data () {
      return {
        content: ‘<p>I am Example</p>‘,
        editorOption: {
          // some quill options
          modules: {
            toolbar: [
              [‘bold‘, ‘italic‘, ‘underline‘, ‘strike‘],
              [‘blockquote‘, ‘code-block‘, ‘image‘]
            ]
          }
        },
        gonext:"立即创建",
        form: {
          title:‘‘,
          content:‘‘,
          mainTag:‘不限‘,
          tags:‘‘,
        },
        roomid:this.$route.params.id,
        action:"api/room/upload/"+this.$route.params.id,
        pantext:"添加",



        rules: {
          title: [
            { required: true, message: ‘请输入标题‘, trigger: ‘blur‘ },
            { min: 5, max: 64, message: ‘长度在 5 到 64 个字符‘, trigger: ‘blur‘ }
          ],
        }

      }
    },
    mounted() {
      console.log(‘app init, my quill insrance object is:‘, this.myQuillEditor)
      setTimeout(() => {
        this.content = ‘i am changed‘
      }, 3000)

    if(this.$route.params.id) {
        this.getRoom();
        //this.getFilelist();
        this.pantext = "修改";
      }
    },
    methods: {
      submit(){

          alert(this.content );
      },
      onEditorBlur(editor) {
        console.log(‘editor blur!‘, editor)
      },
      onEditorFocus(editor) {
        console.log(‘editor focus!‘, editor)
      },
      onEditorReady(editor) {
        console.log(‘editor ready!‘, editor)
      },
      onEditorChange({ editor, html, text }) {
        console.log(‘editor change!‘, editor, html, text)
        this.content = html
      },


    //
    getRoom(){
        var id=this.$route.params.id;
        this.editorContent=‘111‘;
        var gvue=this;
        this.$axios({
          method: ‘get‘,
          url: ‘api/article/one/‘+id+‘?time=‘+new Date().getTime(),
          changeOrigin:true,
        }).then(function (response) {
          console.log(response.data);
          gvue.form=response.data;//[0];
          gvue.gonext="立即修改";
          gvue.content=response.data.content;
          editor.txt.html(response.data.content);
        })
          .catch(function (error) {
            console.log(error);
          });
      },

      submitForm(form) {//2表示是求组
        console.log(‘submit!‘);
        this.$refs[form].validate((valid) => {
          if (valid) {
            //alert(‘submit!‘);
            var url = ‘api/article/add?time=‘+new Date().getTime();
            if(this.$route.params.id)
              url = ‘api/article/edit?time=‘+new Date().getTime();
            var gvue=this;
            this.form.content=this.content;
            this.$axios({
              method: ‘post‘,
              url:url ,
              changeOrigin:true,
              data: this.form//"courtname="+this.form.courtname+"&areaname="+this.form.areaname
            }).then(function (response) {
              console.log(response);
              if(response.data=="00"){
                gvue.$message({
                  showClose: true,
                  message: response.data.ret_msg+‘，操作成功1‘,
                  type: ‘success‘
                });
                //gvue.$router.push("/addroom2/"+response.data.ret_roomid);
                gvue.$router.push("/postarticles");
              }

            })
              .catch(function (error) {
                console.log(error);
              });
          } else {
            console.log(‘error submit!!‘);
            return false;
          }
        });
      }


    }
  }
</script>