editorDialog.vue 4.89 KB
<template>
  <el-dialog
    :title="editorObj.title"
    :visible.sync="editorObj.show"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal="false"
    :center="true"
    :fullscreen="true">
    <el-tabs v-model="activeName2" type="card" >
      <el-tab-pane label="基本信息" name="base">
        <base-block :formData="formData"/>
      </el-tab-pane>
      <el-tab-pane label="课程内容" name="content">
        <lesson-content :formData="formData"/>
      </el-tab-pane>
      <el-tab-pane label="爸妈看一看" name="look">
        <look-block :formData="formData.content"/>
      </el-tab-pane>
      <el-tab-pane label="宝贝玩一玩" name="play">
        <play-block :formData="formData.content"/>
      </el-tab-pane>
      <el-tab-pane label="磨磨小耳朵" name="fun">
        <fun-block :formData="formData.content"/>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="editorObj.show= false">取 消</el-button>
      <el-button type="primary" @click="onSave">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {getElemenetDetailApi,editElementApi,addElementApi} from "../../service/api";
  import baseBlock from '../mould/baseBlock'
  import lookBlock from '../mould/lookBlock'
  import playBlock from '../mould/playBlock'
  import funBlock from '../mould/funBlock'
  import lessonContent from '../mould/lessonContent'
  export default {
    props:[
      'editorObj'
    ],
    components:{
      lessonContent,
      baseBlock,
      lookBlock,
      playBlock,
      funBlock
    },
    data() {
      return {
        activeName2:'base',
        formData:{
          title:'',
          cover:'',
          content:{
            base:{},
            tips:{
              content:'',
              title1:'',
              title1_content:'',
              title2:'',
              title2_content:''
            },
            look:{
              content:'',
            },
            play:{
              type:false,
              audio:[],
              audio2:[],
              video:[],
              video2:[],
              change:false,
              change2:false,
              age:false
            },
            fun:{
              type:false,
              audio:[],
              audio2:[],
              video:[],
              video2:[],
              change:false,
              change2:false,
              age:false
            }
          },
          type:0
        }
      }
    },
    methods:{
      onSave(){
        if(this.editorObj.type===1){
          let json = {
            category_id:this.editorObj.category_id,
            title:this.formData.title,
            content:JSON.stringify(this.formData.content),
            cover:this.formData.cover
          };
          editElementApi(json,this.editorObj.id).then(res=>{
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
            this.$emit('reflash');
            this.editorObj.show=false
          })
        }else if(this.editorObj.type===0){
          let json = {
            category_id:this.editorObj.category_id,
            title:this.formData.title,
            content:JSON.stringify(this.formData.content),
            cover:this.formData.cover
          };
          addElementApi(json,0).then(res=>{
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
            this.$emit('reflash');
          })
        }
      }
    },
    watch:{
      'editorObj.show'(t){
        if(t){
          let value = this.editorObj.id
          if(value){
            getElemenetDetailApi(value).then(res=>{
              res.content = JSON.parse(res.content);
              this.formData = res
            })
          }else{
            this.formData={
              title:'',
              cover:'',
              content:{
                base:{},
                tips:{
                  content:'',
                  title1:'',
                  title1_content:'',
                  title2:'',
                  title2_content:''
                },
                look:{
                  content:'',
                },
                play:{
                  type:false,
                  audio:[],
                  audio2:[],
                  video:[],
                  video2:[],
                  change:false,
                  change2:false,
                  age:false
                },
                fun:{
                  type:false,
                  audio:[],
                  audio2:[],
                  video:[],
                  video2:[],
                  change:false,
                  change2:false,
                  age:false
                }
              },
              type:0
            }
          }
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";

</style>