dialog.vue

<template>
  <el-dialog
    :title="title"
    center
    append-to-body
    :visible.sync="show"
    width="800px">
    <div v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" >
        <el-row v-if="type===1">
          <el-col :span="4"><label>ID</label></el-col>
          <el-col :span="8">
            {{teacherDetail.id}}
          </el-col>
          <el-col :span="4"><label>创建时间</label></el-col>
          <el-col :span="8">{{teacherDetail.created_at}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><label>昵称</label></el-col>
          <el-col :span="8">
            <span v-if="type === 1">{{teacherDetail.name}}</span>
            <el-form-item v-if="type !== 1"  prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4"><label>微信号</label></el-col>
          <el-col :span="8">
            <span v-if="type===1">{{teacherDetail.alias}}</span>
            <el-form-item v-if="type !== 1">
              <el-input v-model="form.alias"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="4"><label>状态</label></el-col>
          <el-col :span="8">
            <span v-if="type===1">{{teacherDetail.status}}</span>
            <el-form-item v-if="type !== 1">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option v-for="data in statusOption" :key="data.value" :label="data.label"
                           :value="data.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4"><label>类型</label></el-col>
          <el-col :span="8">
            <span v-if="type===1">{{teacherDetail.type}}</span>
            <el-form-item v-if="type !== 1">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option v-for="data in typeOption" :key="data.value" :label="data.label"
                           :value="data.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><label>二维码</label></el-col>
          <el-col :span="8">
            <img class="qr-img" v-if="type===1" :src="teacherDetail.qr"/>
            <el-form-item v-if="type !== 1">
              <!--<el-input v-model="form.qr"></el-input>-->
              <el-upload
                action="/api/public/upload/zone"
                :http-request="uploadFile"
                :class="{disabled:!uploadShow}"
                :before-upload="beforeAvatarUpload"
                list-type="picture-card"
                :file-list="imageList"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>

          <template v-if="type===1">
            <el-col :span="4"><label>邀请码</label></el-col>
            <el-col :span="8">
              <span v-if="type===1">{{teacherDetail.invite_code}}</span>
            </el-col>
          </template>
          <el-col :span="4"><label>分组</label></el-col>
          <el-col :span="8">
            <el-select v-model="form.squad" placeholder="请选择">
              <el-option
                v-for="i in 10"
                :key="i"
                :label="'T'+i"
                :value="i">
              </el-option>
            </el-select>
          </el-col>

        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="type !== 1">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
    </div>
  </el-dialog>

</template>

<script>
  import {getTeacherDetailApi,addTeacherApi,editTeacherApi,uploadFileApi} from "../../service/api";
  export default {
    name: "dialogObj",
    props:[
      'dialogObj'
    ],
    data(){
      return{
        show:false,
        id: '',
        statusOption:[
          {
            label:'正常',
            value:0
          },
          {
            label:'禁用',
            value:1
          }
        ],
        typeOption:[
          {
            label:'老师',
            value:0
          },{
            label:'新星妈妈',
            value:1
          },{
            label:'推广人',
            value:2
          },{
            label:'市场',
            value:3
          }
        ],
        loading:true,
        type:0,
        title:'',
        form:{
          name:'',
          type:0,
          squad:'',
          qr:'',
          alias:'',
          status:0,
          media_id:''
        },
        rules:{
          name:[
            { required: true, message: '请输入名称', trigger: 'change' }
          ],
          qr:[
            { required: true, message: '请输入二维码', trigger: 'change' }
          ]
        },
        teacherDetail:{},
        imageList: [],
        uploadShow: true
      }
    },
    methods:{
      sub(){
        if(this.imageList.length > 0){
            this.form.qr = this.imageList[0].url;
        }
        let json = {
          name:this.form.name,
          type:this.form.type,
          qr:this.form.qr,
          squad:this.form.squad,
          alias:this.form.alias,
          status:this.form.status,
          media_id: this.form.media_id
        };
        switch(this.dialogObj.type){
          case 2:
            this.$refs['form'].validate((valid) => {
                if(valid){
                  editTeacherApi(this.id,json).then(res=>{
                    this.$message({
                      type: 'success',
                      message: '修改成功!'
                    });
                    this.$emit("reflash");
                    this.show = false;
                  })
                }
            });
            break;
          case 0:
            this.$refs['form'].validate((valid) => {
              if(valid){
                addTeacherApi(json).then(res=>{
                  this.$message({
                    type: 'success',
                    message: '新增成功!'
                  });
                  this.$emit("reflash");
                  this.show = false;
                })
              }
            });
            break
        }
      },
      beforeAvatarUpload(){
        this.uploadShow = false
      },
      handleRemove(){
        this.uploadShow = true
      },
      handleAvatarSuccess(res) {
        this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
      },
      uploadFile(a) {
        this.loading = true;
        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
        this.fileUid = a.file.uid;
        uploadFileApi({file:a.file,type:'all'}).then(res=>{
          this.form.media_id = res.wechat_info ? res.wechat_info.media_id : '';
          this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}];
          this.uploadShow = false;
          this.loading = false;
          this.$message({
            type: 'success',
            message: '上传成功!'
          });
        }).catch(()=>{
          this.loading = false;
        })
      },
      initDialog(){
        switch(this.dialogObj.type){
          case 0:
            this.title = '新增教师';
            this.show = this.dialogObj.show;
            this.type = 0;
              this.form.name = "";
              this.form.alias = "";
              this.form.qr = "";

            this.form.squad = "";
              this.form.type = 0;
              this.form.status = 0;
              this.imageList = [];
              this.loading = false;
              this.uploadShow = true;
              this.form.media_id = '';
            break;
          case 1:
            this.title = '教师详情';
            this.show = this.dialogObj.show;
            this.id = this.dialogObj.id;
            this.type = 1;
            getTeacherDetailApi(this.id).then(res=>{
              this.teacherDetail = res;
              this.loading = false
            });
            break;
          case 2:
            this.title = '编辑';
            this.show = this.dialogObj.show;
            this.id = this.dialogObj.id;
            this.type = 2;
            getTeacherDetailApi(this.id).then(res=>{
              this.form.name = res.name;
              this.form.squad = res.squad;
              this.form.alias = res.alias;
              this.form.qr = res.qr;
              this.form.type = res.type;
              this.form.status = res.status;
              this.form.media_id = res.media_id ? res.media_id : '';
              this.imageList = [{name:res.qr,url:res.qr}];
              this.uploadShow = !res.qr;
              this.loading = false;
            });
            break
        }

      }
    },
    watch:{
      dialogObj:{
        handler: function () {
          this.loading = true;
          this.initDialog()
        },
        deep: true
      },
      show(value){
        this.$emit("changeShow",value);
      }
    }
  }
</script>

<style scoped lang="less">
  .el-col{
    min-height: 50px;
    text-align: center;
    margin-bottom: 20px;
    line-height: 40px;
    .el-select{
      width: 100%;
    }
    img{
      width: 50px;
      border-radius: 100px;
    }
    label{
      color: #5982e6;
    }
  }
  .qr-img {
    width: 148px !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .dialog-footer{
    display: block;
    text-align: center;
  }
</style>
<style>
  .disabled .el-upload--picture-card {
    display: none !important;
  }
</style>