cmanager/src/views/manage/cuser/talents/Dialog/addGroups.vue

<template>
  <!-- 新建分组模板 -->
  <el-dialog
    :title="title"
    append-to-body
    :visible.sync="box"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @closed="closed"
    width="555px"
  >
    <el-form
      :model="form"
      @submit.native.prevent
      :rules="rules"
      ref="groups"
      label-position="right"
      label-width="100px"
    >
      <el-form-item label="分组名称" prop="groupName">
        <el-input v-model="form.groupName" placeholder="请输入 分组名称" size="small" :disabled="loading" maxlength="40" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align:right">
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-check"
        @click="handleSubmit"
        :loading="loading"
      >提交</el-button>
      <el-button size="mini" icon="el-icon-circle-close" @click=" box = false" :loading="loading">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addDept, updateDept } from "@/api/tenant/talents";
export default {
  data() {
    return {
      type: "",
      title: "",
      groupId: "",
      loading: false,
      box: false,
      form: {
        groupName: "",
      },
      rules: {
        groupName: [
          {
            required: true,
            whitespace: true,
            message: "请填写分组名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    closed() {
      this.form = {
        groupName: "",
      };
      if (this.$refs.groups) {
        this.$refs.groups.resetFields();
      }
      this.loading = false;
    },
    openDialog(type, data) {
      this.type = type;
      if (this.type === "add") {
        this.title = "新建分组";
        this.box = true;
      } else if (this.type === "edit") {
        this.title = "编辑分组";
        this.groupId = data.id;
        this.form.groupName = data.groupName;
        this.box = true;
      }
    },
    handleSubmit() {
      if(this.form.groupName){
        this.$refs.groups.validate(valid=>{
          if(valid){
            if (this.type === "add") {
          //提交新建分组接口
          this.loading = true;
          addDept({
            groupName: this.form.groupName,
            groupType: 9,
          }).then(
            () => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.box = false;
              this.$emit("refresh");
              this.loading = false;
            },
            (error) => {
              window.console.log(error);
              this.loading = false;
            }
          );
        } else if (this.type == "edit") {
          //提交编辑分组接口
          this.loading = true;
          updateDept({
            id: this.groupId,
            groupName: this.form.groupName,
          }).then(
            () => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.box = false;
              this.$emit("refresh");
              this.loading = false;
            },
            (error) => {
              window.console.log(error);
              this.loading = false;
            }
          );
        }
          }
          else{
            this.$message.error('请输入分组名称');
          }
        })
      }


    },
  },
};
</script>

<style>
</style>