add.vue

<template>
  <div>
    <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="父级节点:">
            <el-input v-model="form.parentName"></el-input>
            <el-button @click="handlefocus" round>修改</el-button>
          </el-form-item>
          <el-form-item label="机构名称:" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请填写"
              clearable
              oninput="value = value.trim()"
            ></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>
    <org-trees
      ref="orgTree"
      :treeData="treeData"
      @selected="handleSelectParent"
    />
  </div>
</template>
<script>
import { getAreas } from "@/config/area";
import orgTrees from './orgTree'
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: "",
        areaId: [],
        remarks: "",
        parentId: "",
        parentName: "",
      },
      disabled: false,
      areaOptions: [],
      cascaderProps: {
        label: "name",
        value: "code",
        checkStrictly: true,
      },
      rules: {
        name: [
          { required: true, message: "请输入机构名称", trigger: "change" },
          { min: 1, max: 20, message: "请输入1到20个字" },
        ],
        areaId: [
          { required: true, message: "请选择地理位置", trigger: "change" },
        ],
      },
    };
  },
  components: { orgTrees },
  props: {
    treeData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  mounted() {
    getAreas().then((res) => {
      this.areaOptions = res;
    });
  },
  methods: {
    handlefocus() {
      this.$refs.orgTree.dialogVisible = true;
    },
    handleSelectParent(parentData) {
      this.form.parentId = parentData.id;
      this.form.parentName = parentData.name;
    },
    // 弹窗关闭
    handleClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.handleReset();
        })
        .catch((_) => {});
    },
    handleReset() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
      this.form = {
        name: "",
        areaId: [],
        remarks: "",
        parentId: "",
        parentName: "",
      };
    },
    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.parentId = this.form.parentName ? this.form.parentId : "0";
          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(err);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
</style>