用户添加和数据校验

用户添加和数据校验

子组件UserEdit.vue

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <el-form-item label="用户名" label-width="120px" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="120px">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" label-width="120px">
        <el-input v-model="form.email" type="email"></el-input>
      </el-form-item>
      <el-form-item label="手机" label-width="120px">
        <el-input v-model="form.mobile" type="email"></el-input>
      </el-form-item>
      <el-form-item label="状态" label-width="120px">
        <el-switch
            v-model="form.status"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="0"
            inactive-color="#ff4949">
        </el-switch>

      </el-form-item>
      <el-form-item label="部门" label-width="120px">
        <el-select v-model="form.dept.deptId" placeholder="部门">
          <el-option v-for="d in deptList" :label="d.name" :value="d.deptId" :key="d.deptId+'option'"></el-option>

        </el-select>
      </el-form-item>
      <el-form-item label="角色" label-width="120px">
        <el-select multiple v-model="form.roleIds" placeholder="角色">
          <el-option v-for="r in roleList" :label="r.roleName" :value="r.roleId" :key="r.roleId+'option'"></el-option>

        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消{{ userId }}</el-button>
      <el-button type="primary"  @click="submitForm('ruleForm')">确 定</el-button>
      {{ form }}
    </div>
  </div>
</template>

<script>
import request from "@/util/request";

export default {
  name: "UserEdit",
  // props:["userId"],
  props: {userId: {type: Number, default: 0}},//props用作接收从父组件传过来的参数
  async created() {
    this.deptList = await request("dept/findAll", {})
    this.roleList = await request("role/findAll", {})
  },
  data() {
    return {
      deptList: [],
      roleList: [],
      form: {
        status: 1,
        dept: {deptId: 1},
        roleIds: []
      },
      rules: {
        username: {required: true, message: '请输入用户名称', trigger: 'blur'}
      }
      ,
    }
  }, methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await request('/user/add',this.form)
          this.$message("添加成功")
          //关闭 子组件给父组件传值 必须通过自定义事件完成 close-dialogs事件名
          this.$emit("close-dialog",false)
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    }
  },
}
</script>

<style scoped>

</style>

父组件UserManager.vue

<template>
  <div>
    <h1>用户管理</h1>
<!--    查询栏-->
    <el-form :inline="true" :model="formInline" size="medium" >
      <el-form-item>
        <el-button type="primary" size="medium" @click="showDialog=true">添加</el-button>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="formInline.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="formInline.mobile" placeholder="电话"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="formInline.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
<!--    页面表格-->
<!--    @sort-change="sortChange"，sortable="custom"用来做排序-->
    <el-table :data="tableData" @sort-change="sortChange">
      <el-table-column sortable="custom" prop="userId" label="用户ID" width="140">
      </el-table-column>
      <el-table-column sortable="custom" prop="username" label="用户名" width="120">
      </el-table-column>
      <el-table-column sortable="custom" prop="mobile" label="手机号">
      </el-table-column>
      <el-table-column sortable="custom" prop="email" label="邮箱">
      </el-table-column>
      <el-table-column sortable="custom" prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column  label="状态">
        <template v-slot="scope"><!--状态栏修改按钮 插槽表达式-->
          <el-switch
              @change="switchChange(scope.row)"
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <el-button type="info" size="mini" >修改</el-button>
        <el-button type="danger" size="mini">删除</el-button>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[2, 10, 20, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-dialog title="用户添加/修改" :visible.sync="showDialog">
      <user-edit :user-id="userId" @close-dialog="changeShowDialog"></user-edit><!--传参数到子组件加：做数据绑定-->
    </el-dialog>
  </div>
</template>

<script>
import request from "@/util/request";
import UserEdit from "@/components/edit/UserEdit";

export default {
  name: "UserManger",
  components: {UserEdit},
  created() {
    this.loadData();
  },
  data() {
    return {
      page: 1,
      size: 2,
      tableData: [],
      total: 3,
      formInline:{},
      showDialog:false,//子组件传过来
      userId:0//被修改的用户id，如果是添加0
    }
  }, methods: {
    changeShowDialog(obj){
      this.showDialog = obj
      console.info(obj)
    },
    async loadData() {
      let data = await request(`user/findAll?page=${this.page}&size=${this.size}`, {}, )
      this.tableData = data.list;
      this.total=data.total;
    },
    handleSizeChange(obj) {
      this.size = obj;
      this.loadData();
    },
    handleCurrentChange(obj) {
      this.page = obj;
      this.loadData();
    },
    async onSubmit(){
      let data = await request(`user/findAll?page=${this.page}&size=${this.size}`, this.formInline)
      this.tableData = data.list;
      this.total=data.total;
    },
    async sortChange(obj){
      console.info(obj)
      let orderBy
      if (obj.order === "ascending"){
        orderBy = obj.prop + ' asc'
      }else {
        orderBy = obj.prop + ' desc'
      }
      let data = await request(`user/findAll?page=${this.page}&size=${this.size}&orderBy=${orderBy}`, this.formInline)
      this.tableData = data.list;
      this.total=data.total;
    },
    //上面传过来一个对象，但是不需要他的全部属性，打一个{}解构赋值：只取里面的XXX属性
    async switchChange({userId,status}){
      let data = await request("user/update",{userId,status})
      if (data){
        this.$message("修改成功")
      }
    }
  }
}
</script>

<style scoped>

</style>