Java Spring Boot + Vue 实习项目10：查询界面选项布局

1. 提交选中的权限
1.1 前端提交数据的方法中，this.$myPut方法的第一个参数是服务器访问的路径，第二个参数是一个payload，这里是通过这一路径向服务器发送的一个数组，数组内是选中的权限编号。
//设置权限
setModule(){
    this.$confirm('您确实要更新用户权限吗？', '提示', {
   confirmButtonText: '确认',
   cancelButtonText: '取消',
   type: 'warning'
}).then(()=>{ //正向操作后的逻辑
   //this.$myPut方法的第二个参数表示向服务器传送的数据，是以payload方式发送的
   this.$myPut('security/module/setModule/' + this.moduleUser.u_id, this.menuIdList);
   this.dialogFormVisible = false;
}).catch(()=>{ //负向操作后的逻辑
   this.$message('操作已取消');
   })
}
1.2 后端Controller中，@RequestBody说明的参数用于接受payload方式提交的JSON数据
@PutMapping("/setModule/{u_id}")
public Result setModule(@PathVariable String u_id, @RequestBody Integer[] moduleIds) {
    securityModuleService.setModule(u_id, moduleIds);
    return Result.success("用户" + u_id + "的权限已被更新成功！");
}
1.3 对于payload传来数组的情况，MyBatis提供了动态SQL的机制，在mapper文件中可以使用foreach循环生成SQL语句。
其中，collection属性是数组的名称，item是自定义的单个参数名称，提供给下面#{}使用，separator为SQL语句的分隔符，一般是逗号。
<insert id="insertUserModules">
        insert into t_um(u_id, m_id) values
        <foreach collection="moduleIds" item="moduleId" separator="," open="" close="">
            (#{u_id}, #{moduleId})
        </foreach>
    </insert>
2. 显示员工信息
2.1 表单中可以添加一个Element UI提供的自定义验证规则，这里验证月薪是否为数字。
在data中定义：
const CHECKNUM = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('不能为空'));
        } else if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
        } else {
            callback();
        }
      };
返回值：
queryRules: {
                e_sal_start: [{ validator: CHECKNUM, trigger: 'blur' }],
                e_sal_end: [{ validator: CHECKNUM, trigger: 'blur' }]
            }
代表失去焦点时验证，如果失败则阻止提交表单。
2.2 可以使用v-for动态生成下拉框的选项。
<el-option v-for="dep in depList" :key="dep.d_id" :label="dep.d_name" :value="dep.d_id"></el-option>
2.3 对按钮使用@click.prevent属性，阻止它的默认操作（向其他页面提交表单），改为自己想要的操作，这里是显示第1页的数据。
<el-button type="primary" icon="el-icon-search" @click.prevent="getPage(1)">查询</el-button>
2.4 表单获取服务器传来的数据时，除了Vue提供的$refs用于获取表单，Element UI提供了validate方法用于自动验证。
getPage(pageNum){
    this.$refs['queryForm'].validate((ok)=>{
    if(ok) {
        this.$myGet("info/emp")
        .then((data)=>{
            this.list = data;
        })
    } else{
        this.$message.error('查询条件不正确');
        }
    })
}