wangedit

<template>
    <el-row  id="AddRoom">
        <el-col :span="5">.</el-col>
            <el-col :span="14">
                <el-card class="box-card">
                      <div slot="header" class="clearfix">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                              <el-breadcrumb-item :to="{ path: '/' }">找室友信息</el-breadcrumb-item>
                              <el-breadcrumb-item>{{action}}</el-breadcrumb-item>
                        </el-breadcrumb>

                      </div>

                        <div class="text item">

                          <el-form ref="form" :model="form" :rules="rules" label-width="80px">

                            <el-form-item label="位置"  required>
                              <el-col :span="10">
                              <el-form-item prop="areaname">
                              <el-select v-model="form.areaname" placeholder="所在区(如朝阳)" >
                                <el-option label="建邺" value="建邺"></el-option>
                                <el-option label="玄武" value="玄武"></el-option>
                                <el-option label="江宁" value="江宁"></el-option>
                              </el-select>
                              </el-form-item>
                             </el-col>
                              <el-col :span="4"><el-form-item label="位置" required></el-form-item></el-col>
                              <el-col :span="10">
                              <el-form-item prop="courtname">
                              <el-input v-model="form.courtname" placeholder="输入期待租房位置(如万达附近)" ></el-input>
                              </el-form-item>
                              </el-col>
                            </el-form-item>

                            <el-form-item label="标签"  required>
                            <el-col :span="7">
                              <el-form-item prop="tag1">
                              <el-input v-model="form.tag1"   placeholder="可输年龄信息(如80后、90后)"></el-input>
                              </el-form-item>
                            </el-col>

                              <el-col :span="1">.</el-col>
                              <el-col :span="7">
                              <el-form-item prop="tag2">
                              <el-input v-model="form.tag2"  placeholder="可输职业信息(如it、金融等)"></el-input>
                              </el-form-item>
                              </el-col>
                              <el-col :span="1">.</el-col>
                              <el-col :span="8">
                              <el-form-item prop="tag3">
                              <el-input v-model="form.tag3"  placeholder="其他标签"></el-input>
                              </el-form-item>
                              </el-col>
                            </el-form-item>

                            </el-form-item>

                            <el-form-item label="小区周边" require prop="surroundinginfo">
                             <el-radio-group v-model="form.identification">
                                <el-radio  label="0">无房共同找</el-radio>
                                <el-radio  label="1">有房求室友</el-radio>
                             </el-radio-group>
                            </el-form-item>
                            <el-form-item label="正文" require prop="roominfo">
                              <el-input type="textarea" placeholder="介绍一下自己和期待租房的价位、位置、装修、室友要求等..." v-model="form.roominfo"></el-input>
                              <div id="editorElem" style="text-align:left"></div>
                              <button v-on:click="getContent">查看内容</button>

                            </el-form-item>
                              <el-form-item>
                              <el-button type="primary" @click="submitForm('form')">{{gonext}}</el-button>
                              <el-button @click="resetForm('form')">重置</el-button>
                            </el-form-item>
                          </el-form>

                      </div>
                </el-card>
            </el-col>
        <el-col :span="5">.</el-col>
    </el-row>
</template>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card{
    margin-top:30px;
  }

  #AddRoom {
    text-align: left;
  }

</style>

<script>
  import E from 'wangeditor'
  var editor = new E('#editorElem')
export default {
    data() {
      return {
        editorContent: '',
        radio: '1',
        action:"添加",
        gonext:"立即创建",
        form: {
          areaname:'',
          courtname:'',
          tag1:'',
          tag2:'',
          tag3:'',
          identification:'0',
          surroundinginfo:'',

        },
        rules: {
          courtname: [
            { required: true, message: '请输入位置', trigger: 'blur' },
            { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
          ],
          areaname: [
            { required: true, message: '请选择所在区', trigger: 'change' }
          ],
          tag1: [
            {  required: true, message: '请输入标签', trigger: 'change' }
          ],
          tag2: [
            {  required: true, message: '请输入标签', trigger: 'change' }
          ],
          tag3: [
            {  required: true, message: '请输入标签', trigger: 'change' }
          ],
          identification: [
            {  required: true, message: '请选择', trigger: 'change' }
          ],
          roominfo: [
            { required: true, message: '请输入正文', trigger: 'blur' }
          ]
        }
      }
    },
    mounted:function () {

      editor.customConfig.onchange = (html) => {
        this.editorContent = html
      }
      editor.create()
      if(this.$route.params.id)
          this.getRoom();
      },
    methods: {
      getContent: function () {
        alert(this.editorContent)
      },
      cancelForm(){
        this.$router.push("/postrooms");
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getRoom(){
            var id=this.$route.params.id;
            //alert(id);
            //alert(this.dynamicSegment);
           this.editorContent='111';
            var gvue=this;
            this.$ajax({
                  method: 'get',
                  url: 'api/room/'+id+'?time='+new Date().getTime(),
                  changeOrigin:true,
                }).then(function (response) {
                  console.log(response.data);
                  gvue.form=response.data[0];
                  gvue.form.identification=response.data[0].identification+'';
                  gvue.action="编辑 (房间号:"+id+")";
                  gvue.gonext="立即修改";
                  gvue.editorContent=response.data[0].roominfo;
              editor.txt.html(response.data[0].roominfo);
                })
                .catch(function (error) {
                  console.log(error);
                });
          },
      submitForm(form) {//2表示是求组
        console.log('submit!');
        this.$refs[form].validate((valid) => {
          if (valid) {
              //alert('submit!');
              var url = 'api/roommate/add?time='+new Date().getTime();
              if(this.$route.params.id)
                 url = 'api/room/edit?time='+new Date().getTime();
              var gvue=this;
             this.form.roominfo=this.editorContent;

              this.$ajax({
                  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.ret_code===0){
                      gvue.$message({
                        showClose: true,
                        message: response.data.ret_msg+'，操作成功1',
                        type: 'success'
                      });
                      //gvue.$router.push("/addroom2/"+response.data.ret_roomid);
                      gvue.$router.push("/postrooms");
                  }

                })
                .catch(function (error) {
                  console.log(error);
                });

          } else {
                  console.log('error submit!!');
                  return false;
          }
        });
      }
    }
  }
</script>

<small v-html="room.roominfo"></small>