add.vue

<template>
  <el-dialog
    custom-class="party-dialog"
    title="新建机构"
    :visible.sync="dialogVisible"
    width="468px"
    :before-close="handleClose"
  >
    <div class="dialog-content">
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="80px"
        label-position="top"
        class="party-form"
      >
        <el-form-item label="新增类别:" prop="level">
          <el-radio-group v-model="form.level">
            <el-radio
              v-for="(item, index) in levelOption"
              :key="index"
              :label="item.label"
            >
              {{ item.value }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="机构名称:" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请填写"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="机构地理位置:" prop="areaId">
          <el-cascader
            v-model="form.areaId"
            change-on-select
            :props="cascaderProps"
            :options="areaOptions"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="form.remarks"
            type="textarea"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer btn-group">
      <el-button @click="handleCancle()">取 消</el-button>
      <el-button type="primary" @click="handleSubmit()" :disabled="disabled"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { getAreas } from "@/config/area";
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: "",
        areaId: [],
        level: "",
        remarks: "",
      },
      disabled: false,
      areaOptions:  [],
      cascaderProps: {
        label: "name",
        value: "id",
        checkStrictly: true
      },
      levelOption: [],
      rules: {
        level: [
          { required: true, message: "请选择用户类别", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入机构名称", trigger: "change" },
        ],
        areaId: [
          { required: true, message: "请选择地理位置", trigger: "change" },
        ],
      },
    };
  },
  props: {
    level: {
      type: Number,
      default: 1,
    },
    parentId:{
      type: String,
      default: '0',
    }
  },
  mounted() {
    this.getLevelOption();
    getAreas().then((res) => {
      this.areaOptions = res;
    });
  },
  methods: {
    // 弹窗关闭
    handleClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.handleReset()  
        })
        .catch((_) => {});
    },
    handleReset(){
        this.dialogVisible = false
        this.$refs.form.resetFields()
        this.form = {
            name: "",
            areaId: [],
            level: "",
            remarks: "",
        }
    },
    handleCancle() {
      this.handleClose();
    },
    handleSubmit() {
      // 校验用户输入值
      this.$refs.form.validate((valid) => {
        if (valid) {
          let params = {};
          params.name = this.form.name;
          params.areaId = [...this.form.areaId].pop();
          params.remarks = this.form.remarks;
          params.level = this.form.level;
          params.parentId = this.parentId
          let requestparams = this.$qs.stringify(params);
          this.$https(
            {
              method: "post",
              url: "organ/add",
              authType: this.backToken,
            },
            requestparams
          )
            .then((res) => {
              if(res.status == 200 ){
                if (res.data.resultCode == 200  ) {
                    this.$message({
                        type: "success",
                        message: res.data.message,
                    });
                    this.handleReset()  
                    this.$emit('success',true)
                } else {
                     this.$message.error(res.data.message);
                     this.$emit('success',false)
               } 
              } else {
                   this.$message.error(res.data);
                   this.$emit('success',false)
              }    
            })
            .catch((err) => {
              console.log(res);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getLevelOption() {
      this.form.level = this.level;
      if (this.level === 1) {
        this.levelOption = [
          { label: 1, value: "平级机构" },
          { label: 2, value: "下级机构" },
        ];
      } else if (this.level === 2) {
        this.levelOption = [
          { label: 1, value: "上级机构" },
          { label: 2, value: "平级机构" },
          { label: 3, value: "下级机构" },
        ];
      } else if (this.level === 3) {
        this.levelOption = [
          { label: 2, value: "上级机构" },
          { label: 3, value: "平级机构" },
        ];
      } else {
        this.levelOption = [];
      }
    },
  },
  watch: {
    level() {
      // level 1 没有上级 level 3 没有下级
      this.getLevelOption();
    },
  },
};
</script>
<style lang="less" scoped>
</style>