厂改园

liukangdong

2024-06-07 ac44819c6bb4e71161c0b042d27a91c4f2c6666e

 h5/n_pages/applicationRecord/applicationRecord.vue

@@ -1,410 +1,430 @@
<template>
   <view class="box">
      <scroll-view scroll-x class="box_head">
         <view class="box_head_search">
            <view class="box_head_search_ipt">
               <image src="@/static/n/ic_search@2x.png" mode="widthFix"></image>
               <input type="text" placeholder="搜索任务名称" />
            </view>
            <view class="box_head_search_sha" @click="show = true">
               <image src="@/static/n/ic_shaixuan@2x.png" mode="widthFix"></image>
               <text>筛选</text>
            </view>
         </view>
         <view class="box_head_list">
            <view class="box_head_item active">待处理 12</view>
            <view class="box_head_item">已处理</view>
            <view class="box_head_item">我发起的</view>
         </view>
      </scroll-view>
      <view class="box_list">
         <view class="box_list_item" v-for="(item, index) in 3" :key="index">
            <view class="box_list_item_head">
               <text>丁恩凯的劳务入厂申请</text>
               <text class="loading">待审核</text>
            </view>
            <view class="box_list_item_nr">
               <view class="box_list_item_nr_item">
                  <text>被访问人：</text>
                  <text>人事部-王亚蓝</text>
               </view>
               <view class="box_list_item_nr_item">
                  <text>进厂时间：</text>
                  <text>12-12 09:00</text>
               </view>
               <view class="box_list_item_nr_item">
                  <text>离厂时间：</text>
                  <text>12-12 12:00</text>
               </view>
               <view class="box_list_item_nr_item">
                  <text>入厂人数：</text>
                  <text>10</text>
               </view>
               <view class="box_list_item_nr_item">
                  <text>来访事由：</text>
                  <text>业务来往</text>
               </view>
               <view class="box_list_item_nr_x"></view>
               <view class="box_list_item_nr_text">
                  2023-12-12 09:00提交
               </view>
            </view>
         </view>
      </view>
      <!-- 筛选 -->
      <u-popup :show="show" mode="bottom" :round="10" :closeable="true" @close="show = false">
         <view class="search">
            <view class="search_head">任务筛选</view>
            <view class="search_list">
               <view class="search_list_item">
                  <view class="search_list_item_label">创建日期</view>
                  <view class="search_list_item_val">
                     <view class="search_list_item_val_row" @click="tiemShow = true" :style="{ color: search.startTime ? '#000' : '' }">{{search.startTime ? search.startTime : '开始日期'}}</view>
                     <view class="search_list_item_val_z">-</view>
                     <view class="search_list_item_val_row" @click="tiemShow1 = true" :style="{ color: search.endTime ? '#000' : '' }">{{search.endTime ? search.endTime : '结束日期'}}</view>
                  </view>
               </view>
               <view class="search_list_item">
                  <view class="search_list_item_label">订单来源</view>
                  <view class="search_list_item_cates">
                     <view :class="index === i ? 'search_list_item_cates_row active' : 'search_list_item_cates_row'"
                     v-for="(item, index) in cate"
                     :key="index"
                     @click="clickItem(index)">
                        {{item.name}}
                     </view>
                  </view>
               </view>
            </view>
            <view class="search_footer">
               <view class="search_footer_item" @click="show = false">取消</view>
               <view class="search_footer_item t">提交</view>
            </view>
         </view>
      </u-popup>
      <u-datetime-picker
         :show="tiemShow"
         v-model="time"
         mode="datetime"
         @confirm="confirmLeft"
         @cancel="tiemShow = false"
      ></u-datetime-picker>
      <u-datetime-picker
         :show="tiemShow1"
         v-model="time1"
         mode="datetime"
         @confirm="confirmRight"
         @cancel="tiemShow1 = false"
      ></u-datetime-picker>
   </view>
  <view class="box">
    <scroll-view scroll-x class="box_head">
      <view class="box_head_search">
        <view class="box_head_search_ipt">
          <image src="@/static/n/ic_search@2x.png" mode="widthFix"></image>
          <input type="text" placeholder="搜索任务名称" />
        </view>
        <view class="box_head_search_sha" @click="show = true">
          <image src="@/static/n/ic_shaixuan@2x.png" mode="widthFix"></image>
          <text>筛选</text>
        </view>
      </view>
      <view class="box_head_list">
        <view class="box_head_item active">待处理 12</view>
        <view class="box_head_item">已处理</view>
        <view class="box_head_item">我发起的</view>
      </view>
    </scroll-view>
    <view class="box_list">
      <view class="box_list_item" v-for="(item, index) in 3" :key="index">
        <view class="box_list_item_head">
          <text>丁恩凯的劳务入园申请</text>
          <text class="loading">待审核</text>
        </view>
        <view class="box_list_item_nr">
          <view class="box_list_item_nr_item">
            <text>被访问人：</text>
            <text>人事部-王亚蓝</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>进厂时间：</text>
            <text>12-12 09:00</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>离园时间：</text>
            <text>12-12 12:00</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>入园人数：</text>
            <text>10</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>来访事由：</text>
            <text>业务来往</text>
          </view>
          <view class="box_list_item_nr_x"></view>
          <view class="box_list_item_nr_text"> 2023-12-12 09:00提交 </view>
        </view>
      </view>
    </view>
    <!-- 筛选 -->
    <u-popup
      :show="show"
      mode="bottom"
      :round="10"
      :closeable="true"
      @close="show = false"
    >
      <view class="search">
        <view class="search_head">任务筛选</view>
        <view class="search_list">
          <view class="search_list_item">
            <view class="search_list_item_label">创建日期</view>
            <view class="search_list_item_val">
              <view
                class="search_list_item_val_row"
                @click="tiemShow = true"
                :style="{ color: search.startTime ? '#000' : '' }"
                >{{ search.startTime ? search.startTime : "开始日期" }}</view
              >
              <view class="search_list_item_val_z">-</view>
              <view
                class="search_list_item_val_row"
                @click="tiemShow1 = true"
                :style="{ color: search.endTime ? '#000' : '' }"
                >{{ search.endTime ? search.endTime : "结束日期" }}</view
              >
            </view>
          </view>
          <view class="search_list_item">
            <view class="search_list_item_label">订单来源</view>
            <view class="search_list_item_cates">
              <view
                :class="
                  index === i
                    ? 'search_list_item_cates_row active'
                    : 'search_list_item_cates_row'
                "
                v-for="(item, index) in cate"
                :key="index"
                @click="clickItem(index)"
              >
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
        <view class="search_footer">
          <view class="search_footer_item" @click="show = false">取消</view>
          <view class="search_footer_item t">提交</view>
        </view>
      </view>
    </u-popup>
    <u-datetime-picker
      :show="tiemShow"
      v-model="time"
      mode="datetime"
      @confirm="confirmLeft"
      @cancel="tiemShow = false"
    ></u-datetime-picker>
    <u-datetime-picker
      :show="tiemShow1"
      v-model="time1"
      mode="datetime"
      @confirm="confirmRight"
      @cancel="tiemShow1 = false"
    ></u-datetime-picker>
  </view>
</template>

<script>
   export default {
      data() {
         return {
            show: false,
            tiemShow: false,
            tiemShow1: false,
            time: '',
            i: null,
            time: '',
            time1: '',
            search: {
               startTime: '',
               endTime: ''
            },
            cate: [
               { name: '访客申请', id: 1 },
               { name: '劳务申请', id: 2 },
               { name: '用车申请', id: 3 }
            ]
         };
      },
      methods: {
         clickItem(index) {
            this.i = index
         },
         confirmLeft(e) {
            console.log(uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss'))
            this.search.startTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
            this.tiemShow = false
         },
         confirmRight(e) {
            this.search.endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
            this.tiemShow1 = false
         }
      }
   }
export default {
  data() {
    return {
      show: false,
      tiemShow: false,
      tiemShow1: false,
      time: '',
      i: null,
      time: '',
      time1: '',
      search: {
        startTime: '',
        endTime: ''
      },
      cate: [
        { name: '访客申请', id: 1 },
        { name: '劳务申请', id: 2 },
        { name: '用车申请', id: 3 }
      ]
    }
  },
  methods: {
    clickItem(index) {
      this.i = index
    },
    confirmLeft(e) {
      console.log(uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss'))
      this.search.startTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
      this.tiemShow = false
    },
    confirmRight(e) {
      this.search.endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
      this.tiemShow1 = false
    }
  }
}
</script>
<style>
   page {
      background-color: #F7F7F7 !important;
   }
page {
  background-color: #f7f7f7 !important;
}
</style>
<style lang="scss" scoped>
   .box {
      width: 100%;
      .box_head {
         width: 100%;
         height: 190rpx;
         padding: 12rpx 30rpx;
         box-sizing: border-box;
         background: #FFFFFF;
         position: sticky;
         top: 0;
         left: 0;
         .box_head_search {
            width: 100%;
            height: 76rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24rpx;
            .box_head_search_ipt {
               flex: 1;
               height: 100%;
               padding: 0 30rpx;
               box-sizing: border-box;
               display: flex;
               align-items: center;
               background: #F7F7F7;
               border-radius: 8rpx;
               margin-right: 30rpx;
               image {
                  flex-shrink: 0;
                  width: 28rpx;
                  height: 28rpx;
                  margin-right: 16rpx;
               }
               input {
                  flex: 1;
                  height: 100%;
                  font-size: 26rpx;
                  font-weight: 400;
                  color: #B2B2B2;
               }
            }
            .box_head_search_sha {
               flex-shrink: 0;
               display: flex;
               align-items: center;
               image {
                  width: 28rpx;
                  height: 28rpx;
                  margin-right: 8rpx;
               }
               text {
                  font-size: 26rpx;
                  font-weight: 400;
                  color: #333333;
               }
            }
         }
         .box_head_list {
            width: 100%;
            display: flex;
            align-items: center;
            .active {
               border: 1rpx solid #025EEF !important;
               color: #025EEF !important;
            }
            .box_head_item {
               padding: 0 30rpx;
               height: 60rpx;
               line-height: 60rpx;
               box-sizing: border-box;
               border-radius: 30rpx;
               border: 1rpx solid #999999;
               font-size: 26rpx;
               font-weight: 400;
               color: #333333;
               margin-right: 20rpx;
            }
         }
      }
      .box_list {
         width: 100%;
         padding: 30rpx;
         box-sizing: border-box;
         .box_list_item {
            width: 100%;
            margin-bottom: 20rpx;
            &:last-child {
               margin: 0 !important;
            }
            .box_list_item_head {
               width: 100%;
               height: 100rpx;
               padding: 0 30rpx;
               box-sizing: border-box;
               background: linear-gradient(270deg, #FEFEFF 0%, #E1F7FE 100%);
               border-radius: 8rpx 8rpx 0rpx 0rpx;
               display: flex;
               align-items: center;
               justify-content: space-between;
               .loading {
                  color: #025EEF;
               }
               .success {
                  color: #03C68F;
               }
               .error {
                  color: #E0312A;
               }
               text {
                  &:nth-child(1) {
                     font-size: 32rpx;
                     font-weight: 500;
                     color: #222222;
                  }
                  &:nth-child(2) {
                     font-size: 26rpx;
                     font-weight: 400;
                  }
               }
            }
            .box_list_item_nr {
               padding: 30rpx;
               width: 100%;
               box-sizing: border-box;
               background-color: #FFFFFF;
               .box_list_item_nr_x {
                  width: 100%;
                  height: 1rpx;
                  background-color: #E5E5E5;
               }
               .box_list_item_nr_text {
                  width: 100%;
                  font-size: 26rpx;
                  font-weight: 400;
                  color: #999999;
                  margin-top: 32rpx;
               }
               .box_list_item_nr_item {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  margin-bottom: 20rpx;
                  text {
                     &:nth-child(1) {
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #666666;
                     }
                     &:nth-child(2) {
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #333333;
                     }
                  }
               }
            }
         }
      }
      .search {
         width: 100%;
         padding: 30rpx;
         box-sizing: border-box;
         .search_head {
            width: 100%;
            text-align: center;
            font-size: 32rpx;
            font-weight: 500;
            color: #222222;
         }
         .search_list {
            width: 100%;
            margin-top: 34rpx;
            .search_list_item {
               width: 100%;
               display: flex;
               flex-direction: column;
               margin-bottom: 48rpx;
               .search_list_item_label {
                  font-size: 30rpx;
                  font-weight: 400;
                  color: #222222;
                  margin-bottom: 24rpx;
               }
               .search_list_item_cates {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  flex-wrap: wrap;
                  .active {
                     background: #025EEF !important;
                     color: #ffffff !important;
                  }
                  .search_list_item_cates_row {
                     padding: 0 26rpx;
                     height: 64rpx;
                     line-height: 64rpx;
                     background: #F7F7F7;
                     border-radius: 36rpx;
                     margin-right: 20rpx;
                     font-size: 26rpx;
                     font-weight: 400;
                     color: #333333;
                     &:last-child {
                        margin: 0;
                     }
                  }
               }
               .search_list_item_val {
                  width: 100%;
                  height: 64rpx;
                  background: #F7F7F7;
                  border-radius: 36rpx;
                  border: 1rpx solid #E5E5E5;
                  display: flex;
                  align-items: center;
                  .search_list_item_val_row {
                     flex: 1;
                     height: 100%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     font-size: 26rpx;
                     font-weight: 400;
                     color: #999999;
                  }
                  .search_list_item_val_z {
                     flex-shrink: 0;
                     font-size: 26rpx;
                     font-weight: 400;
                     color: #999999;
                     margin: 0 30rpx;
                  }
               }
            }
         }
         .search_footer {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .t {
               background: #025EEF !important;
               color: #ffffff !important;
            }
            .search_footer_item {
               flex: 1;
               height: 88rpx;
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 32rpx;
               font-weight: 400;
               color: #025EEF;
               margin-right: 18rpx;
               border: 1rpx solid #025EEF;
               border-radius: 44rpx;
               &:last-child {
                  margin: 0 !important;
               }
            }
         }
      }
   }
.box {
  width: 100%;
  .box_head {
    width: 100%;
    height: 190rpx;
    padding: 12rpx 30rpx;
    box-sizing: border-box;
    background: #ffffff;
    position: sticky;
    top: 0;
    left: 0;
    .box_head_search {
      width: 100%;
      height: 76rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;
      .box_head_search_ipt {
        flex: 1;
        height: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background: #f7f7f7;
        border-radius: 8rpx;
        margin-right: 30rpx;
        image {
          flex-shrink: 0;
          width: 28rpx;
          height: 28rpx;
          margin-right: 16rpx;
        }
        input {
          flex: 1;
          height: 100%;
          font-size: 26rpx;
          font-weight: 400;
          color: #b2b2b2;
        }
      }
      .box_head_search_sha {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        image {
          width: 28rpx;
          height: 28rpx;
          margin-right: 8rpx;
        }
        text {
          font-size: 26rpx;
          font-weight: 400;
          color: #333333;
        }
      }
    }
    .box_head_list {
      width: 100%;
      display: flex;
      align-items: center;
      .active {
        border: 1rpx solid #025eef !important;
        color: #025eef !important;
      }
      .box_head_item {
        padding: 0 30rpx;
        height: 60rpx;
        line-height: 60rpx;
        box-sizing: border-box;
        border-radius: 30rpx;
        border: 1rpx solid #999999;
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        margin-right: 20rpx;
      }
    }
  }
  .box_list {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    .box_list_item {
      width: 100%;
      margin-bottom: 20rpx;
      &:last-child {
        margin: 0 !important;
      }
      .box_list_item_head {
        width: 100%;
        height: 100rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        background: linear-gradient(270deg, #fefeff 0%, #e1f7fe 100%);
        border-radius: 8rpx 8rpx 0rpx 0rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .loading {
          color: #025eef;
        }
        .success {
          color: #03c68f;
        }
        .error {
          color: #e0312a;
        }
        text {
          &:nth-child(1) {
            font-size: 32rpx;
            font-weight: 500;
            color: #222222;
          }
          &:nth-child(2) {
            font-size: 26rpx;
            font-weight: 400;
          }
        }
      }
      .box_list_item_nr {
        padding: 30rpx;
        width: 100%;
        box-sizing: border-box;
        background-color: #ffffff;
        .box_list_item_nr_x {
          width: 100%;
          height: 1rpx;
          background-color: #e5e5e5;
        }
        .box_list_item_nr_text {
          width: 100%;
          font-size: 26rpx;
          font-weight: 400;
          color: #999999;
          margin-top: 32rpx;
        }
        .box_list_item_nr_item {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          text {
            &:nth-child(1) {
              font-size: 26rpx;
              font-weight: 400;
              color: #666666;
            }
            &:nth-child(2) {
              font-size: 26rpx;
              font-weight: 400;
              color: #333333;
            }
          }
        }
      }
    }
  }
  .search {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    .search_head {
      width: 100%;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #222222;
    }
    .search_list {
      width: 100%;
      margin-top: 34rpx;
      .search_list_item {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 48rpx;
        .search_list_item_label {
          font-size: 30rpx;
          font-weight: 400;
          color: #222222;
          margin-bottom: 24rpx;
        }
        .search_list_item_cates {
          width: 100%;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .active {
            background: #025eef !important;
            color: #ffffff !important;
          }
          .search_list_item_cates_row {
            padding: 0 26rpx;
            height: 64rpx;
            line-height: 64rpx;
            background: #f7f7f7;
            border-radius: 36rpx;
            margin-right: 20rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #333333;
            &:last-child {
              margin: 0;
            }
          }
        }
        .search_list_item_val {
          width: 100%;
          height: 64rpx;
          background: #f7f7f7;
          border-radius: 36rpx;
          border: 1rpx solid #e5e5e5;
          display: flex;
          align-items: center;
          .search_list_item_val_row {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26rpx;
            font-weight: 400;
            color: #999999;
          }
          .search_list_item_val_z {
            flex-shrink: 0;
            font-size: 26rpx;
            font-weight: 400;
            color: #999999;
            margin: 0 30rpx;
          }
        }
      }
    }
    .search_footer {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .t {
        background: #025eef !important;
        color: #ffffff !important;
      }
      .search_footer_item {
        flex: 1;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        font-weight: 400;
        color: #025eef;
        margin-right: 18rpx;
        border: 1rpx solid #025eef;
        border-radius: 44rpx;
        &:last-child {
          margin: 0 !important;
        }
      }
    }
  }
}
</style>