add.vue

<template>
  <el-dialog
     :title='isEdit?"编辑":"新增"'
    class="manage-dialog"
    v-if="addDialogVisible"
    :visible.sync="addDialogVisible"
    :close-on-click-modal="false"
    @close="addDialogClose()"
  >
    <el-form :model="addForm" status-icon :rules="rules" ref="addForm">
      <el-form-item label="业态名称" prop="name">
        <el-input v-model.trim="addForm.name"></el-input>
        <i class="error-tip">*</i>
      </el-form-item>
      <el-form-item label="介绍" prop="intro">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model.trim="addForm.intro"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
      <el-button
        type="primary"
        @click="addSubmit('addForm')"
        class="dialog-btn dialog-confirm-btn"
      >{{$t('dialog.confirm')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      addDialogVisible: false,
      addForm: {
        name: "",
        pid: -1,
        intro: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入业态名称", trigger: "blur" }
        ]
      },
      isEdit:'',
      isChild:''
    };
  },
  methods: {
    dialogInit(type,parmas,child) {
      this.isChild = child;
      if(child){
        // 新增子级
        if(type=='add'){
          this.addForm = {
            name: "",
            pid: parmas.id,
            intro: "",
          }
        }else{
          this.addForm = {
            name: parmas.name,
            intro: parmas.intro,
            id:parmas.id,
            pid:parmas.pid
          }
        }
      }else{
        if(parmas){
          this.addForm = {
            name: parmas.name,
            intro: parmas.intro,
            id:parmas.id
          }
        }else{
          this.addForm = {
            name: "",
            pid: -1,
            intro: "",
          }
        }
      }
      this.isEdit = type

      this.addDialogVisible = true;
    },
    addSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.isEdit=='add'){
            this.$api.management.addFormat(this.addForm)
              .then(data => {
                let result = data.data;
                if (result.code == 200) {
                  this.$message({
                    showClose: true,
                    type: "success",
                    message: result.msg
                  });
                  this.addDialogVisible = false;
                  if(this.isChild){
                    let obj = {
                      id:this.addForm.pid
                    }
                    this.$parent.handleClick(obj)
                  }else{
                    this.$parent.getTableData()
                  }
                } else {
                  this.$message({
                    showClose: true,
                    type: "error",
                    message: result.msg
                  });
                }
              })
          }else{
            this.$api.management.editFormat(this.addForm)
              .then(data => {
                let result = data.data;
                if (result.code == 200) {
                  this.$message({
                    showClose: true,
                    type: "success",
                    message: result.msg
                  });
                  this.addDialogVisible = false;
                  if(this.isChild){
                    // 子级的table
                    this.$parent.getTableData(this.addForm.pid)
                  }else{
                    this.$parent.getTableData()
                  }
                } else {
                  this.$message({
                    showClose: true,
                    type: "error",
                    message: result.msg
                  });
                }
              })
          }

        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.bdmap-btn {
  margin-left: 17px;
  width: 100%;
  margin: 0;
  padding: 0 8px;
  height: 30px;
  box-sizing: border-box;
  border-radius: 2px;
  font-size: 13px;
}
</style>