表单的添加用户

<template>
  <el-form label-width="100px" :model="formModel" :rules="rules" ref="ruleForm" @success="submit">
    <el-form-item label="姓名" prop="username">
      <el-input v-model="formModel.username"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="formModel.password"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="tel">
      <el-input v-model="formModel.tel"></el-input>
    </el-form-item>

    <el-date-picker
      v-model="formModel.joindate"
      align="right"
      type="date"
      placeholder="选择日期"
     
    ></el-date-picker>

    <el-form-item label="所属部门" prop="department">
      <el-select placeholder="请选择用户组" v-model="formModel.department">
        <!-- 男： 1   女 ： 0 -->
        <!-- label是展示给用户看的   value 传给后端 -->
        <el-option label="一部" value="一部"></el-option>
        <el-option label="二部" value="二部"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="reset">重置</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { usersAdd } from "@/api/account.api";
import dayjs from "dayjs";
export default {
  // add： 添加账号  edit： 编辑账号
  data() {
    return {
      // 发给后端
      formModel: {
        username: "",
        password: "",
        tel: "",
        joindate: "",
        department: ""
      },
      rules: {
        username: {
          required: true,
          message: "请输入账号",
          trigger: ["change", "blur"]
        },
        password: {
          required: true,
          message: "请输入密码",
          trigger: ["change", "blur"]
        },
        tel: {
          required: true,
          message: "请输入电话",
          trigger: ["change", "blur"]
        },
        joindate: {
          required: true,
          message: "请输入时间",
          trigger: ["change", "blur"]
        },
        department: {
          required: true,
          message: "请输入部门",
          trigger: ["change", "blur"]
        }
      }
    };
  },
  methods: {
    submit() {
      // 校验表单
      this.$refs.ruleForm.validate(res => {
        console.log("自组件校验表单", res);
        if (res) {
          this.formModel.joindate = dayjs(this.formModel.joindate).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          usersAdd(this.formModel).then(res => {
            if (res.data.code === 0) {
              // console.log('成功了！')
              // localStorage.setItem("token", res.data.token);
              this.$router.push("/account/list");
            }
          });
        }
      });
    },
    reset() {
      // 1. 获取el-form， 2. 调用他的方法
      this.$refs.ruleForm.resetFields();
    },
    // 取消
    cancel() {
      this.$emit("cancel");
    }
  }
  // watch: {
  //   // 每次父组件传递的defalutValue改变，我们就重新回显
  //   defalutValue: {
  //     handler() {
  //       // 执行一次
  //       // 编辑的时候 才把defaultValue 赋值给  formModel
  //       if (this.type === "edit") {
  //         // 第三种【扩展】
  //         Object.keys(this.formModel).forEach(key => {
  //           this.formModel[key] = this.defalutValue[key];
  //         });
  //       }
  //     },
  //     deep: true,
  //     immediate: true
  //   }
  // }
  // destroyed() {
  //   console.log('表单组件销毁了！！！')
  // }
};
</script>

<style lang="scss" scoped>
</style>