场景

在某管理系统中,需要对指定员工的指定月份的指定天设置为指定的状态

 

SpringBoot+ElementUI实现多选设置一月中指定几天的属性,SpringBoot中通过反射实现_vue

注:

关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先设计数据库

 

SpringBoot+ElementUI实现多选设置一月中指定几天的属性,SpringBoot中通过反射实现_vue_02

依次添加d1到d31代表每月的1到31号,设置类型为varchar,存储的是字符串类型。

然后生成相应的实体类和各业务层代码,实体类属性如下

 

SpringBoot+ElementUI实现多选设置一月中指定几天的属性,SpringBoot中通过反射实现_d3_03

然后在前端,选择某条记录点击修改时

<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>

调用handleUpdate方法

handleUpdate(row) {
this.reset();
const id = row.id || this.checkedId;
getKqyb(id).then((response) => {
this.form.id = response.data.id;
this.form.xm = response.data.xm;
this.form.gh = response.data.gh;
this.form.dabh = response.data.dabh;
this.form.bm = response.data.bm;
this.form.year = response.data.year;
this.form.mouth = response.data.mouth;
this.open = true;
this.title = "修改月统计";
});
},

上面是根据选中的id查询出要设置的员工的信息以及设置的是哪一年的哪个月,然后将隐藏的修改的dialog进行显示

<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="10">
<el-form-item label="工号:" prop="gh">
<el-input v-model="form.gh" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="姓名:" prop="gh">
<el-input v-model="form.xm" :disabled="true" />
</el-form-item>
</el-col>
</el-row>

<el-row>
<el-col :span="10">
<el-form-item label="部门:" prop="bm">
<el-input v-model="form.bm" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="档案编号:" prop="dabh">
<el-input v-model="form.dabh" :disabled="true" />
</el-form-item>
</el-col>
</el-row>

<el-row>
<el-col :span="10">
<el-form-item label="年:" prop="year">
<el-input v-model="form.year" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="月:" prop="mouth">
<el-input v-model="form.mouth" :disabled="true" />
</el-form-item>
</el-col>
</el-row>

<el-row>
<el-col :span="20">
<el-form-item label="请勾选要设置的当月号数" label-width="200"></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-checkbox-group v-model="form.checkList" @change="handleCheckedDatesChange">
<el-checkbox v-for="date in dates" :label="date.key" :key="date.key">{{date.label}}</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>

<el-row>
<el-col>
<el-form-item label="设置考勤状态为:" prop="kqzt" label-width="300">
<el-select
v-model="form.kqzt"
placeholder="请选择考勤状态"
clearable
:style="{ width: '300px' }"
>
<el-option
v-for="dict in kqztOptions"
:key="dict.bbmc"
:label="dict.jqmc"
:value="dict.bbmc"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>

上面的输入框用来显示基本信息,下面是勾选要设置的每月几号和要设置为的状态

SpringBoot+ElementUI实现多选设置一月中指定几天的属性,SpringBoot中通过反射实现_d3_04

 

怎样对这些个多选框进行初始化

<el-checkbox-group v-model="form.checkList" @change="handleCheckedDatesChange">
<el-checkbox v-for="date in dates" :label="date.key" :key="date.key">{{date.label}}</el-checkbox>
</el-checkbox-group>

使用多选框组,循环的是dates这个对象数组 ,绑定的label属性就是此多选框的值,即勾选后获取到的内容,要显示的内容

是通过{{}}来显示,显示的是每个对像的label属性即实际要显示的值。

因为每月每天的对象属性是固定的,所以将dates声明

dates: dateOptions,

然后声明并赋值dateOptions

const dateOptions = [
{
key: "d1",
label: "1号",
},
{
key: "d2",
label: "2号",
},
{
key: "d3",
label: "3号",
},
{
key: "d4",
label: "4号",
},
{
key: "d5",
label: "5号",
},
{
key: "d6",
label: "6号",
},
{
key: "d7",
label: "7号",
},
{
key: "d8",
label: "8号",
},
{
key: "d9",
label: "9号",
},
{
key: "d10",
label: "10号",
},
{
key: "d11",
label: "11号",
},
{
key: "d12",
label: "12号",
},
{
key: "d13",
label: "13号",
},
{
key: "d13",
label: "13号",
},
{
key: "d14",
label: "14号",
},
{
key: "d15",
label: "15号",
},
{
key: "d16",
label: "16号",
},
{
key: "d17",
label: "17号",
},
{
key: "d18",
label: "18号",
},
{
key: "d19",
label: "19号",
},
{
key: "d20",
label: "20号",
},
{
key: "d21",
label: "21号",
},
{
key: "d22",
label: "22号",
},
{
key: "d23",
label: "23号",
},
{
key: "d24",
label: "24号",
},
{
key: "d25",
label: "25号",
},
{
key: "d26",
label: "26号",
},
{
key: "d27",
label: "27号",
},
{
key: "d28",
label: "28号",
},
{
key: "d29",
label: "29号",
},
{
key: "d30",
label: "30号",
},
{
key: "d31",
label: "31号",
},
];

声明位置

SpringBoot+ElementUI实现多选设置一月中指定几天的属性,SpringBoot中通过反射实现_vue_05

 

这样在勾选后就会将所勾选的多选框的label属性对应的值绑定在改多选组的v-model绑定的属性。

绑定的是form对象的checklist属性,此属性是数组。

form: {
id: undefined,
gh: undefined,
xm: undefined,
dabh: undefined,
bm: undefined,
year: undefined,
mouth: undefined,
checkList: [],
kqzt: undefined,
},

然后在点击确定时会将此表单提交,并将form参数进行传递

<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>

在提交按钮对应的方法中

submitForm: function () {
this.$refs["form"].validate((valid) => {

if (valid) {
if (this.form.id != undefined) {
updateKqyb(this.form).then((response) => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
}
}
});
},

将form参数传递给请求接口js的方法

export function updateKqyb(data) {
return request({
url: '/kqbb/kqyb',
method: 'put',
data: data
})
}

然后传递到SpringBoot后台

@PutMapping
public AjaxResult edit(@RequestBody KqbbKqyb kqbbKqyb)
{

}

使用后台生成的实体类进行接收,因为传递的选中的月份的数组的在原实体类中不存在,所以需要新增

private String[] checkList;

属性以及get和set方法来接受参数

然后接受到参数后是数组,每一项对应后台实体类的属性d1 d2这种

怎样根据属性名设置属性值

先获取要设置哪些天即要设置哪些属性

String[] checkList = kqbbKqyb.getCheckList();

然后

KqbbKqyb kqbbKqybNew = new KqbbKqyb();
kqbbKqybNew.setId(kqbbKqyb.getId());
for (String shuxing:checkList) {
Field field = kqbbKqybNew.getClass().getDeclaredField(shuxing);
if(field!=null)
{
field.setAccessible(true);
if(kqzt!=null)
{
field.set(kqbbKqybNew, kqzt+"(改)");
}
}
}

kqbbKqybService.updateKqbbKqyb(kqbbKqybNew);

声明一个要设置属性的对象,赋予修改时要用到的id,然后遍历传递过来的所有属性

利用JDK的反射,根据属性名获取属性,再设置属性可访问然后调用set方法设置其值

field.set(kqbbKqybNew, kqzt+"(改)");

其中kqbbKqybNew是要设置属性的对象,后面的参数是要设置的内容。