欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-08 14:48:53
...

场景

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

 

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

注:

博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先设计数据库

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

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

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

 

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

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

              <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中通过反射实现

 

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

            <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中通过反射实现

 

这样在勾选后就会将所勾选的多选框的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是要设置属性的对象,后面的参数是要设置的内容。