feat(common): 新增请假、打卡、签退功能

- 添加了请假、打卡、签退相关的 API 接口
- 实现了请假、打卡、签退的前端逻辑和界面
- 增加了用户信息获取和校区选择功能
- 优化了考勤列表的展示方式

api/apiRoute.js

@@ -38,6 +38,20 @@ export default {
             return res;
         })
     },
+    //教师/销售端请假/打卡/签退-编辑
+    common_attendanceEdit(data = {}) {
+        let url = '/attendance/edit'
+        return http.post(url, data).then(res => {
+            return res;
+        })
+    },
+    //教师/销售端请假/打卡/签退-列表
+    common_attendanceIndex(data = {}) {
+        let url = '/attendance/index'
+        return http.post(url, data).then(res => {
+            return res;
+        })
+    },
     //获取字典数据
     common_Dictionary(data = {}) {
         let url = '/common/getDictionary'

pages/common/my_attendance.vue

@@ -3,7 +3,7 @@
   <view class="main_box">
     <fui-segmented-control
         :values="optionTable"
-        :current="(Number(filteredData.status))"
+        :current="(Number(currentIndex))"
         type="text"
         activeColor="#29d3b4"
         color="#fff"
@@ -11,13 +11,11 @@
     </fui-segmented-control>
 
     <view class="main_section">
-<!--      教练端-->
+      <view>
-      <view v-if="userType == 1">
-
         <!--全部-->
         <scroll-view
             class="section_1"
-            v-if="filteredData.status == '0'"
+            v-if="currentIndex == '0'"
             scroll-y="true"
             :lower-threshold="lowerThreshold"
             @scrolltolower="loadMoreData"
@@ -25,108 +23,28 @@
         >
           <view class="ul">
             <view class="li"
-                  v-for="(v,k) in tableList"
+              v-for="(v,k) in tableList"
-                  :key="k"
+              :key="k"
             >
               <view class="left">
-                <image :src="$util.img(v.courses.thumbnail)" model="aspectFill"></image>
+<!--                <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>-->
               </view>
               <view class="right">
-                <view class="content">{{v.courses.name}}</view>
+                <view class="content">普通考勤</view>
                 <view class="content">
-                  {{v.status == 1 ? '考勤正常':'请假'}}
+                  {{v.status_name}}
-
                 </view>
-                <view class="content">{{v.add_time}} - {{v.end_time}}</view>
-              </view>
-            </view>
-          </view>
-        </scroll-view>
-
-        <!--考勤-->
-        <scroll-view
-            class="section_1"
-            v-if="filteredData.status == '1'"
-            scroll-y="true"
-            :lower-threshold="lowerThreshold"
-            @scrolltolower="loadMoreData"
-            style="height: 80vh;"
-        >
-          <view class="ul">
-            <view class="li"
-                  v-for="(v,k) in tableList"
-                  :key="k"
-            >
-              <view class="left">
-                <image :src="$util.img(v.courses.thumbnail)" model="aspectFill"></image>
-              </view>
-              <view class="right">
-                <view class="content">{{v.courses.name}}</view>
                 <view class="content">
-                  {{v.status == 1 ? '考勤正常':'请假'}}
+                  校区：{{v.campus_id_name}}
-
                 </view>
-                <view class="content">{{v.add_time}} - {{v.end_time}}</view>
-              </view>
-            </view>
-          </view>
-        </scroll-view>
-
-        <!--请假-->
-        <scroll-view
-            class="section_1"
-            v-if="filteredData.status == '2'"
-            scroll-y="true"
-            :lower-threshold="lowerThreshold"
-            @scrolltolower="loadMoreData"
-            style="height: 80vh;"
-        >
-          <view class="ul">
-            <view class="li"
-                  v-for="(v,k) in tableList"
-                  :key="k"
-            >
-              <view class="left">
-                <image :src="$util.img(v.courses.thumbnail)" model="aspectFill"></image>
-              </view>
-              <view class="right">
-                <view class="content">{{v.courses.name}}</view>
                 <view class="content">
-                  {{v.status == 1 ? '考勤正常':'请假'}}
+                  备注：{{v.remarks || ''}}
-
                 </view>
-                <view class="content">{{v.add_time}} - {{v.end_time}}</view>
-              </view>
-            </view>
-          </view>
-        </scroll-view>
-
-      </view>
-<!--      销售端-->
-      <view v-else>
-        <!--全部-->
-        <scroll-view
-            class="section_1"
-            v-if="filteredData.status == '0'"
-            scroll-y="true"
-            :lower-threshold="lowerThreshold"
-            @scrolltolower="loadMoreData"
-            style="height: 80vh;"
-        >
-          <view class="ul">
-            <view class="li"
-              v-for="(v,k) in tableList"
-              :key="k"
-            >
-              <view class="left">
-<!--                <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>-->
-              </view>
-              <view class="right">
-                <view class="content">普通考勤</view>
                 <view class="content">
-                  {{v.status == 1 ? '考勤正常':'请假'}}
+                  <text>{{v.attendance_date}} {{v.check_in_time}}</text>
+                  <text v-if="v.check_out_time" style="padding: 0 20rpx">-</text>
+                  <text v-if="v.check_out_time">{{v.attendance_date}} {{v.check_out_time}}</text>
                 </view>
-                <view class="content">{{v.add_time}} - {{v.end_time}}</view>
               </view>
             </view>
           </view>
@@ -136,7 +54,7 @@
         <!--考勤-->
         <scroll-view
             class="section_1"
-            v-if="filteredData.status == '1'"
+            v-if="currentIndex == '1'"
             scroll-y="true"
             :lower-threshold="lowerThreshold"
             @scrolltolower="loadMoreData"
@@ -153,19 +71,28 @@
               <view class="right">
                 <view class="content">普通考勤</view>
                 <view class="content">
-                  {{v.status == 1 ? '考勤正常':'请假'}}
+                  {{v.status_name}}
+                </view>
+                <view class="content">
+                  校区：{{v.campus_id_name}}
+                </view>
+                <view class="content">
+                  备注：{{v.remarks || ''}}
+                </view>
+                <view class="content">
+                  <text>{{v.attendance_date}} {{v.check_in_time}}</text>
+                  <text v-if="v.check_out_time" style="padding: 0 20rpx">-</text>
+                  <text v-if="v.check_out_time">{{v.attendance_date}} {{v.check_out_time}}</text>
                 </view>
-                <view class="content">{{v.add_time}} - {{v.end_time}}</view>
               </view>
             </view>
           </view>
-
         </scroll-view>
 
         <!--请假-->
         <scroll-view
             class="section_1"
-            v-if="filteredData.status == '2'"
+            v-if="currentIndex == '2'"
             scroll-y="true"
             :lower-threshold="lowerThreshold"
             @scrolltolower="loadMoreData"
@@ -182,9 +109,19 @@
               <view class="right">
                 <view class="content">普通考勤</view>
                 <view class="content">
-                  {{v.status == 1 ? '考勤正常':'请假'}}
+                  {{v.status_name}}
+                </view>
+                <view class="content">
+                  校区：{{v.campus_id_name}}
+                </view>
+                <view class="content">
+                  备注：{{v.remarks || ''}}
+                </view>
+                <view class="content">
+                  <text>{{v.attendance_date}} {{v.check_in_time}}</text>
+                  <text v-if="v.check_out_time" style="padding: 0 20rpx">-</text>
+                  <text v-if="v.check_out_time">{{v.attendance_date}} {{v.check_out_time}}</text>
                 </view>
-                <view class="content">{{v.add_time}} - {{v.end_time}}</view>
               </view>
             </view>
           </view>
@@ -192,19 +129,100 @@
 
       </view>
 
-      <!--请假按钮-->
+
       <view class="section_btn">
-        <view class="btn" @click="openShow()">请假</view>
+        <!--打卡按钮-->
+        <view class="btn" style="background-color: #20CAAFFF;" @click="openSignInShow('present')">打卡</view>
+
+        <!--请假按钮-->
+        <view class="btn" style="background-color: #ffb703;" @click="openSignInShow('leave')">请假</view>
+
+        <!--签退按钮-->
+        <view class="btn" style="background-color: #465cff;" @click="openSignInShow('sign_out')">签退</view>
       </view>
 
     </view>
 
-<!--    请假提示框-->
+    <!--打卡提示框-->
-    <fui-dialog :show="show" :content="content" maskClosable @click="onClick" @close="closeShow"></fui-dialog>
+    <fui-modal :buttons="[]" width="600" :show="signIn_show">
+      <text class="fui-title">{{signIn_title}}</text>
+      <text class="fui-descr">{{signIn_content}}</text>
+      <fui-form class="form-section" ref="form" top="0" :model="formData" :show="false">
+        <view class="input-style">
+          <!--校区选择-->
+          <fui-form-item
+              label="选择校区"
+              asterisk
+              asteriskPosition="right"
+              labelSize='26'
+              prop=""
+              background='#fff'
+              labelColor='#000'
+              :bottomBorder='true'
+          >
+            <view class="input-title" style="margin-right:14rpx;">
+              <view
+                  class="input-title"
+                  style="margin-right:14rpx;"
+                  @click="openCicker()">
+                {{ (formData.campus_id) ? formData.campus_id_name : '点击选择' }}
+              </view>
+            </view>
+          </fui-form-item>
+          <!--备注-->
+          <fui-form-item
+              v-if="formData.status == 'leave'"
+              label="备注"
+              labelSize='26'
+              prop=""
+              background='#fff'
+              labelColor='#000'
+              :bottomBorder='true'
+          >
+            <view class="input-title" style="margin-right:14rpx;">
+              <fui-input
+                  :borderBottom="false"
+                  :padding="[0]"
+                  placeholder="请输入备注"
+                  v-model="formData.remarks"
+                  backgroundColor="#fff"
+                  size="26"
+                  color="#000"
+              ></fui-input>
+            </view>
+          </fui-form-item>
+        </view>
+        <view class="button_box">
+          <fui-button background="#fff" color="#414141" borderColor="#465CFF" btnSize="small" @click="closeSignInShow">取消</fui-button>
+          <fui-button background="#fff" color="#465CFF" borderColor="#465CFF" btnSize="small" @click="clickSignIn({index:1})">确定</fui-button>
+
+        </view>
+      </fui-form>
+
+
+      <view class="fui-icon__close" @tap="closeSignInShow">
+        <fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon>
+      </view>
+    </fui-modal>
+
+
+
+
+    <!-- 选择器 -->
+    <fui-picker
+        :linkage='picker_linkage'
+        :options="picker_options"
+        :layer="1"
+        :show="picker_show"
+        @change="changeCicker"
+        @cancel="cancelCicker">
+    </fui-picker>
+
   </view>
 </template>
 
 <script>
+import apiRoute from '@/api/apiRoute.js';
 import commonApi from '@/api/common.js';
 import marketApi from '@/api/market.js';
 import AQTabber from "@/components/AQ/AQTabber.vue"
@@ -221,17 +239,23 @@ export default {
       optionTable: [
         {
           id: 0,
-          name: '全部'
+          name: '全部',
+          value:[]
         },
         {
           id: 1,
-          name: '考勤'
+          name: '考勤',
+          value:['present']
         },
         {
           id: 2,
-          name: '请假'
+          name: '请假',
+          value:['leave']
         }
       ],
+      currentIndex:0,
+
+      userInfo:{},//用户信息
 
 
       loading:false,//加载状态
@@ -243,18 +267,43 @@ export default {
         page:1,//当前页码
         limit:10,//每页返回数据条数
         total:10,//数据总条数
-        status:'0'//0全部 1考勤 2请假
+        status_arr:[]//考勤状态: present-出勤, absent-缺勤, late-迟到, leave_early-早退,leave-请假
       },
       tableList:[],//表格数据
 
-      //请假表单
+      //请假-打卡-签退表单
       formData:{
-        date:'',//请假日期
+        campus_id:'',//校区ID
+        campus_id_name:'',//校区ID
+        status:'',//考勤状态: present-出勤, absent-缺勤, late-迟到, leave_early-早退,leave-请假,sign_out-签退
+        remarks:'',//备注
+        attendance_date:'',//请假/打卡日期
+        longitude:'',//经度
+        latitude:'',//纬度
       },
 
       //请假提示框相关
       show:false,//是否展示
       content:'',//请假提示语
+
+      //打开签到相关
+      signIn_show:false,
+      signIn_title:'',//打卡签到标题
+      signIn_content:'',//打卡签到提示语
+
+
+      //下拉选择器相关
+      picker_input_name:'',//下拉组件的input_name
+      picker_show:false,//下拉组件是否展示
+      picker_linkage:true,//选择器是否为联动选择
+      picker_options:[
+        // {
+        //   text:'张三',
+        //   value:'1'
+        // },
+      ],//选择器可选值列表
+
+
     }
   },
   onLoad(options) {},
@@ -265,9 +314,32 @@ export default {
     //初始化
     async init(){
       this.userType = uni.getStorageSync('userType')
-      // this.userType = 2
       this.getCurrentDate()//获取并格式化当前日期
-      await this.getList();
+      await this.getUserInfo()//获取用户信息
+      // await this.getList();
+      this.getList();
+    },
+
+    //获取用户信息
+    async getUserInfo(){
+      let res = await apiRoute.getPersonnelInfo({})
+      if (res.code != 1) {
+        uni.showToast({
+          title: res.msg,
+          icon: 'none'
+        })
+        return
+      }
+
+      this.userInfo = res.data
+      this.picker_options = []
+      res.data.cameus_dept_arr.forEach((v,k)=>{
+        this.picker_options.push({
+          text: v.campus_id_name,
+          value: v.campus_id
+        })
+      })
+      console.log(123123,this.picker_options)
     },
 
     // 获取并格式化当前日期
@@ -280,20 +352,32 @@ export default {
 
       let res = `${year}-${month}-${day}`
 
-      this.content = `${res} 是否确认请假?`
 
-      this.formData.date = res
+
+      this.formData.attendance_date = res
     },
 
     //切换tag列表
     async segmented(e) {
       console.log(e)
+      this.currentIndex = e.id
       //重置为第一页
       await this.resetFilteredData()
 
+
       //e.id|0全部 1考勤 2请假
       let status = e.id
-      this.filteredData.status = String(status)
+      let status_arr = []
+      switch (status) {
+        case 1:
+          status_arr = ['present']
+          break;
+        case 2:
+          status_arr = ['leave']
+          break;
+      }
+
+      this.filteredData.status_arr = status_arr
       await this.getList()
     },
 
@@ -333,7 +417,7 @@ export default {
         this.tableList = []
       }
 
-      let res = await commonApi.clockingList(data)
+      let res = await apiRoute.common_attendanceIndex(data)
       this.loading = false
       this.isReachedBottom = false;
       if (res.code != 1){
@@ -346,7 +430,7 @@ export default {
 
       this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中
 
-      console.log('列表',this.tableList)
+      console.log('列表',res.data.data)
       this.filteredData.total = res.data.total
       this.filteredData.page++
     },
@@ -360,24 +444,139 @@ export default {
       this.show = false
     },
     //点击确认请假按钮
-    onClick(e){
+    async onClick(e){
       console.log('xxx',e)
       if(e.index == 0){
         //取消按钮
         this.closeShow()
       }else{
+        if(!this.formData.campus_id){
+          uni.showToast({
+            title: '请选择校区',
+            icon: 'none'
+          })
+          return
+        }
         //确认按钮
-        this.submitRest()
+        this.formData.status='absent'//考勤类型|present-出勤, absent-缺勤
+        await this.getLocation()//获取经纬度
+        await this.submitFormData()
       }
     },
 
-    //发起请假请求
-    async submitRest() {
 
-      this.closeShow()
+    //打卡签到相关
+    //显示打卡弹窗
+    openSignInShow(status){
+      this.signIn_show = true
+      this.formData.status = status
+
+      switch (status){
+        case 'present':
+          this.signIn_title = `是否确认打卡?`
+          this.signIn_content = `${this.formData.attendance_date} 是否确认打卡?`
+          break;
+        case 'leave':
+          this.signIn_title = `是否确认请假?`
+          this.signIn_content = `${this.formData.attendance_date} 是否确认请假?`
+          break;
+        case 'sign_out':
+          this.signIn_title = `是否确认签退?`
+          this.signIn_content = `${this.formData.attendance_date} 是否确认签退?`
+          break;
+      }
+
+      //重置的数据
+      this.formData.campus_id = ''
+      this.formData.campus_id_name = ''
+      this.formData.remarks = ''
+      this.formData.longitude = ''
+      this.formData.latitude = ''
+    },
+    //关闭打卡弹窗
+    closeSignInShow(){
+      this.signIn_show = false
+    },
+    //监听-打卡签到回调
+    async clickSignIn(e){
+      console.log('xxx',e)
+      if(e.index == 0){
+        //取消按钮
+        this.closeSignInShow()
+      }else{
+        if(!this.formData.campus_id){
+          uni.showToast({
+            title: '请选择校区',
+            icon: 'none'
+          })
+          return
+        }
+        await this.getLocation()//获取经纬度
+        await this.submitFormData()
+      }
+    },
+
+    //下拉选择器-校区选择器
+    openCicker(e){
+      // 使用 nextTick 确保数据更新后再打开 picker
+      this.$nextTick(() => {
+        this.picker_show = true
+      })
+    },
+    //监听-下拉选择器
+    changeCicker(e) {
+      console.log('监听-下拉选择器', e)
+      this.formData.campus_id = e.value
+      this.formData.campus_id_name = e.text
+      this.cancelCicker()
+    },
+    //关闭下拉选择器
+    cancelCicker() {
+      this.picker_show = false
+    },
+
+
+    //获取用户经纬度
+    async getLocation() {
+      try {
+        const location = await new Promise((resolve, reject) => {
+          uni.getLocation({
+            type: 'wgs84', // 坐标类型，wgs84 返回 gps 坐标，gcj02 返回国测局坐标
+            success: (res) => {
+              resolve(res);
+            },
+            fail: (err) => {
+              reject(err);
+            }
+          });
+        });
+
+        console.log('纬度:', location.latitude); // 纬度
+        console.log('经度:', location.longitude); // 经度
+
+        // 在这里可以对获取到的经纬度进行操作，比如保存到 data 中
+        this.formData.latitude = location.latitude;
+        this.formData.longitude = location.longitude;
+
+        // uni.showToast({
+        //   title: '位置获取成功',
+        //   icon: 'success'
+        // });
+      } catch (error) {
+        uni.showToast({
+          title: '获取位置失败',
+          icon: 'none'
+        });
+        console.error('获取位置失败:', error);
+      }
+    },
+
+    //发起请假/打卡请求
+    async submitFormData() {
+      this.closeSignInShow()
 
       let param = {...this.formData}
-      let res = await commonApi.clockingRest(param)
+      let res = await apiRoute.common_attendanceEdit(param)
       if (res.code != 1) {
         uni.showToast({
           title: res.msg,
@@ -443,6 +642,9 @@ export default {
       flex-direction: column;
       gap: 24rpx;
       .li{
+        border: 1px solid #5f5f5f;
+        border-radius: 15rpx;
+        padding: 20rpx 0;
         display: flex;
         align-items: center;
         gap: 43rpx;
@@ -480,12 +682,13 @@ export default {
   .section_btn{
     display: flex;
     justify-content: center;
+    display: flex;
+    justify-content: space-between;
     .btn{
-      width: 722rpx;
+      width: 30%;
       height: 64rpx;
       line-height: 64rpx;
       border-radius: 8rpx;
-      background-color: rgba(32,202,175,1);
       color: rgba(255,255,255,1);
       font-size: 28rpx;
       text-align: center;
@@ -495,4 +698,42 @@ export default {
 }
 
 
+
+
+//请假模态框
+.fui-title {
+  font-size: 32rpx;
+  padding-top: 24rpx;
+}
+
+.fui-descr {
+  font-size: 24rpx;
+  color: #B2B2B2;
+  padding-top: 12rpx;
+  padding-bottom: 48rpx;
+}
+
+.fui-icon__close {
+  position: absolute;
+  right: 24rpx;
+  top: 20rpx;
+}
+
+
+
+.form-section{
+
+  .input-style {
+    text-align: right !important;
+  }
+  .button_box{
+    margin-top: 30rpx;
+    padding: 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20rpx;
+  }
+}
+
 </style>