基于jeecg-boot的OA日程安排开发（五）-阿里云开发者社区

基于jeecg-boot的OA日程安排开发（五）

2024-05-10 76

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 基于jeecg-boot的OA日程安排开发（五）

这部分主要是增加我的日历，日程可以分多钟日历，这样可以灵活一点显示也可以根据不通的日历来显示。

1、日历可以通过在线开发进行代码生成，只需要修改颜色就可以

<a-col :span="24">
            <a-form-model-item label="颜色" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="color">
              <el-color-picker v-model="model.color"
                  :predefine="['#188ae2', '#35b8e0', '#26bf8c','#f9c851','#ff5b5b', '#5b69bc', '#ff8acc', '#3b3e47','#282828' ]" />
              </el-form-item>
            </a-form-model-item>
          </a-col>

2、日程选择日历的时候带过来相应的参数到日程上面来

<a-col :span="12">
            <a-form-model-item label="日历类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="calId">
              <j-popup
                v-model="model.calId"
                field="calId"
                org-fields="id,color,taker,owner"
                dest-fields="calId,color,taker,owner"
                code="SelectCalendar"
                :multi="false"
                @input="popupCallback"
                />
                <!--<a-input v-model="model.calName"></a-input>-->
            </a-form-model-item>
          </a-col>

3、可以增加日历的新增与显示，当然新增也可以去掉，在单独列表进行录入编辑

<a-row :gutter="24">
      <!--<a-col :span="2">
        <a-button @click="handleCalAdd" style="margin-bottom: 20px" type="primary">新建日历</a-button>
      </a-col>-->
      <a-col :span="4">
        <a-button @click="handleSchAdd" style="margin-bottom: 20px" type="primary">新建日程</a-button>
      </a-col>
      <a-col :span="20">
        <j-checkbox
          v-model="jCheckbox"
          :options="jCheckboxOptions"
          @change="onSelCalChange"
        />
      </a-col>
    </a-row>

4、初始化日历，这里同时也调用初始化日程，同时选择不通的日历更新日程表

initCalData() {
      GetCalList().then(res => {
        if (res.success) {
          console.log("GetCalList result=",res.result)
          this.jCheckboxOptions = res.result.map(o => (
          {label: o.name, value: o.id}))
          this.jCheckboxOptions.forEach((item, index) => {
            this.jCheckboxlist.push(item.value)
          })
          this.jCheckbox = JSON.stringify(this.jCheckboxlist)
          this.jCheckbox = this.jCheckbox.replace(/\"/g,"")
          this.jCheckbox = this.jCheckbox.replace("[","")
          this.jCheckbox = this.jCheckbox.replace("]","")
          console.log("jCheckboxOptions",this.jCheckboxOptions)
          console.log("jCheckboxlist ",this.jCheckboxlist)
          console.log("jCheckbox ",this.jCheckbox)
          this.initData();
        }  
        
      })
    },
onSelCalChange(checkedValues) {
      console.log("onSelCalChange ",checkedValues)
      console.log("onSelCalChange jCheckbox",this.jCheckbox)
      this.initData();
    },

5、后端方面的代码，主要是日历获取以及日程获取修改

@Override
  public List<OaCalendar> getList() {
    SysUser loginUser = iEstarThirdService.getLoginUser();
        String userId = loginUser.getUsername();
    QueryWrapper<OaCalendar> queryWrapper = new QueryWrapper<>();
        queryWrapper.lambda().eq(OaCalendar::getCreateBy,userId)
                .orderByAsc(OaCalendar::getCreateTime);
        return this.list(queryWrapper);
  }

@Override
  public List<OaSchedule> getList(ScheduleTime scheduleTime) {
    SysUser loginUser = iEstarThirdService.getLoginUser();
        String userId = loginUser.getUsername();
    QueryWrapper<OaSchedule> queryWrapper = new QueryWrapper<>();
        Date startTimes = DateUtil.stringToDates(scheduleTime.getStartTime());
        Date endTimes = DateUtil.stringToDates(scheduleTime.getEndTime());
        List<String>  idlist= Arrays.asList(scheduleTime.getIds().split(","));
        queryWrapper.lambda().eq(OaSchedule::getCreateBy,userId)
                .in(OaSchedule::getCalId, idlist)
                .ge(OaSchedule::getStartTime,startTimes)
                .le(OaSchedule::getEndTime,endTimes)
                .orderByAsc(OaSchedule::getCreateTime);
        return this.list(queryWrapper);
  }