SpringBoot+ElementUI實現多選設定一月中指定幾天的屬性，SpringBoot中通過反射實現
阿新 • • 發佈：2020-08-18
場景
在某管理系統中，需要對指定員工的指定月份的指定天設定為指定的狀態
注：
部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。
實現
首先設計資料庫
依次新增d1到d31代表每月的1到31號，設定型別為varchar，儲存的是字串型別。
然後生成相應的實體類和各業務層程式碼，實體類屬性如下
然後在前端，選擇某條記錄點選修改時
<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>
上面的輸入框用來顯示基本資訊，下面是勾選要設定的每月幾號和要設定為的狀態
怎樣對這些個多選框進行初始化
<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號", }, ];
宣告位置
這樣在勾選後就會將所勾選的多選框的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是要設定屬性的物件，後面的引數是要設定的內容。