-

zhangwei

2025-03-06 8c047f7da19d7e59136a322e1a851d4b6b0eab97

 src/pages/checkin/index.vue

@@ -1,128 +1,319 @@
<template>
   <view class="full-page">
      <up-sticky>
         <view class="coreshop-ff content c-p-10">
            <up-search placeholder="请点击选择日期" v-model="value15" search-icon="calendar"></up-search>
         </view>
         <up-subsection :list="list" :current="current4" activeColor="#f9ae3d"
            @change="sectionChange"></up-subsection>
      </up-sticky>
      <view class="listrecord c-p-20">
         <view class="coreshop-ff chuany-bradius20">
            <view class="bgblue c-p-18 chuany-flex chuany-justify-between chuany-font34 chuany-text-bold">
               <text class=''>
                  日期：2024-08-12
               </text>
   <view class="full-page" scroll-y using-sticky>
      <view class="">
         <up-sticky>
            <view class="coreshop-ff content c-p-l-10 c-p-t-10 c-p-r-10">
               <up-search placeholder="请点击选择打卡日期" @click='clickIcon' :show-action="false"
                  @clear='init' disabled v-model="wordDate" search-icon="calendar"
                  @search='init'></up-search>
               <!-- <up-input shape="round" class="u-search__content__input"></up-input> -->
               <!-- <up-search placeholder="请输入公司名称" :show-action="false" v-model="Suppliername" @clear='PostMyDakaListPage'
                  @search='PostMyDakaListPage'></up-search> -->
            </view>
            <view class="c-p-26">
               <view class="chuany-flex chuany-justify-between">
                  <text class="chuany-font34 chuany-text-bold">
                     临时工
                  </text>
                  <view class="chuany-flex chuany-justify-between">
                     <!-- <text class="c-p-r-20">
								
                     </text> -->
                     <up-tag class='c-m-r-10' text="已结算" shape="circle" type="success" plain plainFill size='mini'></up-tag>
                     <up-tag text="已确认" shape="circle" type="success" plain plainFill size='mini'></up-tag>
                  </view>
               </view>
               <view class="c-p-t-20">
                  打卡记录：08:00-12:00 13:00-17:00
               </view>
               <view class="chuany-flex chuany-justify-between c-p-t-20">
                  <text class="chuany-width50">
                     工作时长：8小时
                  </text>
                  <view class="chuany-width50">
                     <text>
                        方式：计时
                     </text>
                  </view>
               </view>
               <view class="chuany-flex chuany-justify-between c-p-t-20">
                  <text class="chuany-width50">
                     工价：17元/小时
                  </text>
                  <view class="chuany-width50">
                     <text>
                        当日工资：136元
                     </text>
                  </view>
               </view>
            <view class="coreshop-ff content c-p-10">
               <up-search placeholder="请输入公司名称" v-model="Suppliername" @clear='init'
                  @custom='init' @search='init'></up-search>
               <!-- <up-search placeholder="请点击选择打卡日期" @click='clickIcon' @clear='PostMyDakaListPage' disabled
                  v-model="wordDate" search-icon="calendar" @search='PostMyDakaListPage'
                  @custom='PostMyDakaListPage'></up-search> -->
            </view>
         </view>
      </view>
      <view class="listrecord c-p-20">
         <view class="coreshop-ff chuany-bradius20">
            <view class="bgblue c-p-18 chuany-flex chuany-justify-between chuany-font34 chuany-text-bold">
               <text class=''>
                  日期：2024-08-12
               </text>
            </view>
            <view class="c-p-26">
               <view class="chuany-flex chuany-justify-between">
                  <text class="chuany-font34 chuany-text-bold">
                     临时工
                  </text>
                  <view class="chuany-flex chuany-justify-between">
                     <!-- <text class="c-p-r-20">
								
                     </text> -->
                     <up-tag class='c-m-r-10' text="未结算" shape="circle" type="warning" plain plainFill size='mini'></up-tag>
                     <up-tag text="未确认" shape="circle" type="warning" plain plainFill size='mini'></up-tag>
                  </view>
               </view>
               <view class="c-p-t-20">
                  打卡记录：08:00-12:00 13:00-17:00
               </view>
               <!-- <view class="chuany-flex chuany-justify-between c-p-t-20">
						
               </view> -->
               <view class="chuany-flex chuany-justify-between chuany-flex-wrap c-p-t-20">
                  <text class="chuany-width50">
                     工作时长：8小时
                  </text>
                  <view class="chuany-width50">
                     <text>
                        方式：计件
            <up-subsection :list="list" current='1' activeColor="#f9ae3d" @change="sectionChange"></up-subsection>
         </up-sticky>
         <view class="full-page-content c-p-b-100" v-if="viewList&&viewList.length>0">
            <view class="listrecord c-p-t-28 c-p-l-28 c-p-r-28" v-for="item in viewList" :key='item.id'>
               <view class="coreshop-ff chuany-bradius20">
                  <view @click='jumpWorkDetail(item)'
                     class="bgblue c-p-l-18 c-p-r-18 c-p-t-10 c-p-b-10 chuany-flex chuany-justify-between chuany-font30">
                     <text class=''>
                        打卡日期：{{$util.formatDate(item.workDate)}}
                     </text>
                  </view>
                  <text class="chuany-width50 c-p-t-20">
                     工价：0.5元/件
                  </text>
                  <view class="chuany-width50 chuany-flex c-p-t-20">
                     <text>
                        数量：
                     </text>
                     <up-input style="padding: 0;" size='mini' border="surround"></up-input>
                  </view>
                  <view class="chuany-width50 c-p-t-20">
                     <text>
                        当日工资：136元
                     </text>
                  </view>
                  <view class="chuany-width50 c-p-t-20">
                     <view class="chuany-width10">
                        <up-button class="button-layout__item" text="工资申报" size="mini" type="warning"></up-button>
                  <view class="c-p-20">
                     <view class="chuany-flex chuany-justify-between">
                        <text class="chuany-font32">
                           {{item.suppliername}}
                        </text>
                        <view class="chuany-flex chuany-justify-between">
                           <!-- <text class="c-p-r-20">
										
                           </text> -->
                           <!-- <up-tag class='c-m-r-10' :text="item.isShenPiName" shape="circle" type="success" plain
                              plainFill size='mini'></up-tag> -->
                           <view class="chuany-width10" v-if="item.isShenPi==0">
                              <!-- v-if="item.isShenPiName!=='已结算'" -->
                              <up-button class="button-layout__item"
                                 :text="item.workerType==0?'结束今日工作':'计件申报'" size="mini"
                                 :loading='item.isLoading' :loadingText="item.workerType==0?'结束中':'申报中'"
                                 @click.stop='saveDakaDetail(item)' type="warning"></up-button>
                           </view>
                           <up-text v-else type="success" :text="item.isShenPiName" size='14'></up-text>
                           <!-- <up-tag text="已确认" shape="circle" type="success" plain plainFill size='mini'></up-tag> -->
                        </view>
                     </view>
                     <view class="text-69 chuany-font28 c-p-t-8">
                        打卡记录：{{item.dakaMingxi}}
                     </view>
                     <view
                        class="chuany-flex chuany-justify-between chuany-flex-wrap c-p-t-8 text-69 chuany-font28">
                        <text class="chuany-width48">
                           时长：{{item.workTime}}
                        </text>
                        <!-- <view class="chuany-width48">
                           <text>
                              方式：{{item.workerTypeName}}
                           </text>
                        </view> -->
                        <text class="chuany-width48 ">
                           工价：{{item.workPrice}}{{item.workerType==0?'元/小时':'元/件'}}
                        </text>
                        <view class="chuany-width48 chuany-flex c-p-t-8" v-if="item.workerType==1">
                           <text>
                              数量：
                           </text>
                           <up-input v-if="item.isShenPi==0" type="digit" style="padding: 0;" size='mini'
                              border="surround"
                              @blur='(val) => {item.todaySalary=$util.roundToTwo(item.workCount*item.workPrice)}'
                              v-model="item.workCount"></up-input>
                           <text v-else>{{item.workCount}}</text>
                        </view>
                        <view class="chuany-width48 c-p-t-8">
                           <text>
                              工资：{{item.todaySalary}}元
                           </text>
                        </view>
                        <view class="chuany-width48 c-p-t-8">
                           <!-- <view class="chuany-width10" v-if="item.isShenPi==0"> -->
                           <!-- v-if="item.isShenPiName!=='已结算'" -->
                           <!-- <up-button class="button-layout__item"
                                 :text="item.workerType==0?'结束今日工作':'计件申报'" size="mini"
                                 :loading='item.isLoading' :loadingText="item.workerType==0?'结束中':'申报中'"
                                 @click.stop='saveDakaDetail(item)' type="warning"></up-button> -->
                           <!-- </view> -->
                        </view>
                     </view>
                  </view>
               </view>
            </view>
            <!-- <view class="listrecord c-p-18">
               <view class="coreshop-ff chuany-bradius20">
                  <view class="bgblue c-p-18 chuany-flex chuany-justify-between chuany-font30">
                     <text class=''>
                        日期：2024-08-12
                     </text>
                  </view>
                  <view class="c-p-26">
                     <view class="chuany-flex chuany-justify-between">
                        <text class="chuany-font32 ">
                           临时工
                        </text>
                        <view class="chuany-flex chuany-justify-between">
                           <text class="c-p-r-20">
										
                           </text>
                           <up-tag class='c-m-r-10' text="未结算" shape="circle" type="warning" plain plainFill
                              size='mini'></up-tag>
                           <up-tag text="未确认" shape="circle" type="warning" plain plainFill size='mini'></up-tag>
                        </view>
                     </view>
                     <view class="c-p-t-20">
                        打卡记录：08:00-12:00 13:00-17:00
                     </view>
                     <view class="chuany-flex chuany-justify-between c-p-t-20">
								
                     </view>
                     <view class="chuany-flex chuany-justify-between chuany-flex-wrap c-p-t-20">
                        <text class="chuany-width48">
                           工作时长：8小时
                        </text>
                        <view class="chuany-width48">
                           <text>
                              方式：计件
                           </text>
                        </view>
                        <text class="chuany-width48 c-p-t-20">
                           工价：0.5元/件
                        </text>
                        <view class="chuany-width48 chuany-flex c-p-t-20">
                           <text>
                              数量：
                           </text>
                           <up-input style="padding: 0;" size='mini' border="surround"></up-input>
                        </view>
                        <view class="chuany-width48 c-p-t-20">
                           <text>
                              当日工资：136元
                           </text>
                        </view>
                        <view class="chuany-width48 c-p-t-20">
                           <view class="chuany-width10">
                              <up-button class="button-layout__item" text="工资申报" size="mini"
                                 type="warning"></up-button>
                           </view>
                        </view>
                     </view>
                  </view>
               </view>
            </view> -->
            <up-loadmore :status="loadStatus" />
         </view>
         <view v-else>
            <up-empty text='暂无' icon="/static/order.png">
            </up-empty>
         </view>
         <fui-date-picker :show="datePickerShow" range :value="$util.formatDate(new Date())" type="3"
            @change="changePicker" @cancel="cancel"></fui-date-picker>
         <view class="tabbtns">
            合计：{{heji}} 元
         </view>
      </view>

   </view>
</template>

<script setup>
   import {
      ref
   } from 'vue'
   let value15 = ref('')
   const list = ref(['全部', '未结算', '已结算']);
   const sectionChange = (index) => {
      current4.value = index;
<script>
   export default {
      data() {
         return {
            pageIndex: 1,
            pageSize: 20,
            Suppliername: '',
            wordDate: '',
            isJieSuan: false,
            list: ['全部', '未结算', '已结算'],
            datePickerShow: false,
            viewList: [],
            loadStatus: 'loadmore',
            isLoading: false,
            heji: '',
            WordDateStart: '', //工作日期开始
            WordDateEnd: '' //工作日期结束
         }
      },
      onLoad() {
         this.PostMyDakaListPage();
      },
      onReachBottom() {
         if (this.loadStatus != 'nomore') {
            this.PostMyDakaListPage();
         }
      },
      onPullDownRefresh() {
         this.wordDate = ''
         this.WordDateStart = '' //工作日期开始
         this.WordDateEnd = '' //工作日期结束
         this.Suppliername = ''
         this.init()
         uni.stopPullDownRefresh();
      },
      methods: {
         init() {
            this.pageIndex = 1
            this.pageSize = 20
            this.loadStatus = 'loadmore'
            this.PostMyDakaListPage();
         },
         sectionChange(val) {
            switch (val) {
               case 0:
                  this.isJieSuan = null
                  break;
               case 1:
                  this.isJieSuan = false
                  break;
               case 2:
                  this.isJieSuan = true
                  break;
            }
            this.init()
         },
         saveDakaDetail(item) {
            if (item.workerType == 1 && !item.workCount) {
               this.$util.showToast({
                  title: '请填写数量！',
                  icon: 'error'
               })
               return
            }
            let obj = {
               orderBiddingDetailId: item.orderBiddingDetailId, //招工打卡Id
               workTime: item.workTime, //工作时长
               todaySalary: item.todaySalary //当日工资
            }
            if (item.workCount) {
               obj.workCount = item.workCount
            }
            item.isLoading = true
            this.$api.saveDakaDetail(obj).then(res => {
               if (res.code == 1) {
                  this.$util.showToast({
                     title: item.workerType == 0 ? '结束今日工作成功！' : '计件申报成功！',
                     icon: 'success'
                  })
                  this.init()
               } else {
                  this.$util.showToast({
                     title: res.error ? res.error : '失败！'
                  })
               }
               item.isLoading = false
            })
         },
         PostMyDakaListPage() {
            let data = {
               pageIndex: this.pageIndex,
               pageSize: this.pageSize,
               isJieSuan: this.isJieSuan
            }
            if (this.wordDate) {
               data.WordDateStart = this.WordDateStart //工作日期开始
               data.WordDateEnd = this.WordDateEnd //工作日期结束
            }
            if (this.Suppliername) {
               data.Suppliername = this.Suppliername
            }
            this.$api.PostMyDakaListPage(data).then(res => {
               if (res.code == 1) {
                  this.heji = res.data.heji
                  if (this.pageIndex == 1) {
                     this.viewList = res.data.items
                  } else {
                     this.viewList = this.viewList.concat(...res.data.items)
                  }
                  console.log(this.viewList, this.viewList.length, 'this.viewList');
                  this.viewList.forEach(item => {
                     item.isLoading = false
                  })
                  // totalPages.value = res.data.totalCount
                  // 根据count数量判断是否还有数据
                  if (res.data.totalCount > this.viewList.length) {
                     this.loadStatus = 'loadmore'
                     this.pageIndex++
                  } else {
                     // 数据已加载完毕
                     this.loadStatus = 'nomore'
                  }
               }
            })
         },
         changePicker(val) {
            this.wordDate = val.startDate.result + '至' + val.endDate.result
            this.WordDateStart = new Date(val.startDate.result) //工作日期开始
            this.WordDateEnd = new Date(val.endDate.result) //工作日期结束
            this.datePickerShow = false
            this.PostMyDakaListPage()
            console.log(this.wordDate, this.WordDateStart, this.WordDateEnd, this.Suppliername);
         },
         cancel() {
            this.datePickerShow = false
         },
         clickIcon() {
            this.datePickerShow = true
         },
         jumpWorkDetail(item) {
            uni.navigateTo({
               url: `/pages/checkin/workdetail?id=${item.orderBiddingDetailId}`
            })
         }
      }
   }
</script>