考勤功能完成

ruoyi-ui/src/views/index.vue

@@ -101,7 +101,9 @@
 <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
           </div>
           <div v-for="(v, k) in noticeList" :key="k" class="text item" @click="toDrawer(v.noticeId)" type="primary" style="margin-left: 3px;margin-bottom: 5px;">
-            <span class="pull-right">{{ parseTime(v.createTime, '{y}-{m}-{d}') }}</span> <i class="el-icon-arrow-right"></i> {{v.noticeTitle}}
+            <span class="pull-right">{{ parseTime(v.createTime, '{y}-{m}-{d}') }}</span>
+            <i class="el-icon-arrow-right"></i>
+            {{v.noticeTitle}}
           </div>
         </el-card>
 

ruoyi-ui/src/views/oa/attendance/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="app-container" v-loading="loading">
+    <el-row :gutter="20">
+      <el-col :span="14">
+        签到表
+        <table>
+          <thead>
+          <tr>
+            <th width="80"></th>
+            <th v-for="(item,index) in 31" :class="selectHead===index+1?'selectBox':''" @click="selectMany(index+1)">
+              {{ index + 1 }}
+            </th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr v-for="(item,index) in userList">
+            <td :class="(item.userId===selectUser.userId || selectAll)?'selectBox':''">{{ item.nickName }}</td>
+                        <td v-for="(item2,index2) in 31" @click="selectAttendDay(item,index,index2+1)"
+                            :style="{backgroundColor:(item.attendances.length>0 && item.attendances.findIndex(i=>i.attendanceDay === index2+1) >-1) ?item.attendances[item.attendances.findIndex(i=>i.attendanceDay === index2+1)].color:(index2+1===selectIndex&&(item.userId===selectUser.userId || selectAll)?'#f3ff52':'')}"></td>
+          </tr>
+          </tbody>
+        </table>
+      </el-col>
+      <el-col :span="5">
+
+
+        <el-card class="box-card">
+          <div slot="" class="">
+            <span><i class="el-icon-s-order"></i> 项目列表</span>
+            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
+          </div>
+          <div v-for="(item,index) in projectList" style="display: flex;justify-content: space-between">
+            <el-button class="text" :style="{backgroundColor:item.color===''?'':item.color}"  @click="signIn(item)">{{ item.projectName }}
+            </el-button>
+            <el-color-picker class="text" v-model="item.color" @change="changeItemColor(item)"></el-color-picker>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="5">
+
+
+        <el-card class="box-card">
+          <div slot="" class="">
+            <span><i class="el-icon-timer"></i>工作时长</span>
+            <div style="margin: 20px 0 ">
+              <el-radio-group v-model="timeFlag">
+                <el-radio :label="0">天计</el-radio>
+                <el-radio :label="1">小时计</el-radio>
+              </el-radio-group>
+            </div>
+            <el-select v-if="timeFlag===0" v-model="form.dayLength" placeholder="请选择工作时长">
+              <el-option
+                  v-for="dict in dict.type.work_time_length"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+              ></el-option>
+            </el-select>
+
+            <el-select v-if="timeFlag===1" v-model="form.hour" placeholder="请选择工作时长">
+              <el-option
+                  v-for="dict in dict.type.work_time_length_hour"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-card>
+
+
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+
+import {listWorker} from "@/api/system/user";
+import {listProject, updateProject} from "@/api/oa/project";
+import {listOaAttendance} from "@/api/oa/oaAttendance";
+import {addBatchOaAttendance, addOaAttendance} from "../../../api/oa/oaAttendance";
+
+export default {
+  name: "Project",
+  dicts: ['work_time_length','work_time_length_hour'],
+  data() {
+    return {
+      // 选择索引
+      selectIndex: new Date().getDate(),
+      // 用户列表
+      userList: [],
+      // 项目列表
+      projectList: [],
+      loading: true,
+      selectHead: new Date().getDate(),
+      // 提交表单
+      form: {},
+      // 查询参数
+      userQueryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userName: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        deptId: undefined
+      },
+      queryParams:{
+        pageNum: 1,
+        pageSize: 50,
+      },
+      selectArrayIndex:new Date().getDate(),
+      timeFlag: 0,
+      // 项目查询参数
+      projectQueryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        projectName: undefined,
+        projectNum: undefined,
+        beginTime: undefined,
+        finishTime: undefined
+      },
+      selectUser: {},
+      // 日期范围
+      dateRange: [],
+      selectAll: true,
+    }
+  },
+  mounted() {
+    const day = new Date().getDate();
+  },
+  created() {
+
+    this.getList();
+  },
+
+  methods: {
+    selectAttendDay(item,index, index2) {
+      this.selectIndex = index2;
+      this.selectAll = false;
+      this.selectUser = item;
+      this.selectHead = index2
+      this.selectArrayIndex = index
+    },
+
+    selectMany(index) {
+      this.selectAll = true;
+      this.selectIndex = index;
+      this.selectHead = index
+    },
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listOaAttendance(this.queryParams).then(res=>{
+        console.log(res.data)
+        this.userList = res.data;
+        this.total = res.total;
+      });
+      listProject(this.projectQueryParams).then(response => {
+        this.projectList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      })
+    },
+
+    changeItemColor(item) {
+      updateProject(item);
+      this.getList();
+    },
+    signIn(project){
+      // 一个签到
+      if (this.form.dayLength === undefined && this.timeFlag === 0) {
+        this.$message({ message: '请选择工作时长', type: 'warning' })
+        return;
+      }
+      if (this.form.hour === undefined && this.timeFlag === 1) {
+        this.$message({ message: '请选择工作时长', type: 'warning' })
+        return;
+      }
+      let time = this.timeFlag===0?this.form.dayLength:this.form.hour
+
+
+      if (!this.selectAll){
+        this.form = {
+          projectId:project.projectId,
+          userId:this.selectUser.userId,
+          attendanceDay:this.selectIndex,
+          dayLength: this.timeFlag===0?this.form.dayLength:undefined,
+          hour:this.timeFlag===1?this.form.hour:undefined
+        }
+        addOaAttendance(this.form).then(res=>{
+          this.selectUser = this.selectArrayIndex>=this.userList.length-1?this.selectUser:this.userList[this.selectArrayIndex+1]
+
+          this.getList()
+
+        })
+      }else{
+
+        this.form = {
+          projectId:project.projectId,
+          attendanceDay:this.selectIndex,
+          dayLength: this.timeFlag===0?this.form.dayLength:undefined,
+          hour:this.timeFlag===1?this.form.hour:undefined
+        }
+        // 集体赋予状态
+        addBatchOaAttendance(this.form).then(res=>{
+          this.getList()
+        })
+      }
+
+    },
+
+  }
+};
+</script>
+<style scoped>
+table {
+  border: 1px solid #000;
+  table-layout: fixed;
+  width: 100%;
+}
+
+th {
+  border: 1px solid;
+
+  height: 15px;
+  overflow: hidden;
+}
+
+td {
+  border: 1px solid;
+  white-space: nowrap;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+.selectDay {
+  background-color: #00afff;
+}
+
+.selectBox {
+  background-color: #f3ff52;
+}
+
+.text {
+  font-size: 16px;
+  border-bottom: #cccccc 1px dashed;
+  margin: 5px 0;
+}
+</style>