soc_app/src/views/menu/visitRecord/index.vue

<template>
  <div class="visitRecord">
    <NavBar/>
    <div class="page-container">
      <van-search v-model="query.userName" class="van-hairline--bottom" placeholder="请输入人员姓名" @clear="refreshData"  @change="refreshData"/>
      <div class="search-flex">
        <select-cell
          style="border-right: 1px solid #f5f5f5;"
          title="介绍信类型"
          is-all
          :border="false"
          v-model="query.type"
          :data-list="getDictItem('out_in_type')"
          @change="refreshData"/>
        <date-cell title="日期" is-all v-model="query.arrivalTime" date-type="date" @change="refreshData"/>
      </div>
      <select-cell
          style="border-right: 1px solid #f5f5f5;"
          title="审批状态"
          :isAll="true"
          :border="false"
          v-model="query.approveStatus"
          :data-list="getDictItem('out_in_approve_status')"
          @change="refreshData"/>
      <div class="card-list">
        <Scroll
          ref="Scroll"
          @refresh="refreshData"
          @loadMore="getDataList"
          :pullup="pullup">
          <empty  v-if="!dataList || dataList.length === 0"/>
          <card v-else v-for="(v,i) in dataList" :key="v.id">
            <van-cell
              :border="false"
              class="item-title"
              :title-style="{color:'#008cd6'}"
              :title="`介绍信类型: ${getDictLabel(v.letterType,'out_in_type')}`"
              @click="clickItem(v.id)">
              <template #right-icon>
                <span v-if="v.approveStatus==1 && v.status==3" style="color:#D7000F">
                    已失效
                  </span>
                <van-button v-if="v.approveStatus==0" @click.stop="cancelOutInRequest(v.id)" type="info" size="mini">取消出入申请</van-button>
                <van-button v-if="v.approveStatus==1 && v.status!=3 &&!v.arrivalTime" type="info" size="mini">登记达到时间</van-button>
                <van-button v-if="v.approveStatus==1 && v.status!=3 && v.arrivalTime&&!v.departureTime" type="info" size="mini">登记离开时间</van-button>
              </template>
            </van-cell>
            <van-cell
              :border="false"
              class="item-value"
              @click="clickItem(v.id)">
              <template #default>
                <div class="info-box">
                  <div class="info-item">
                    <div class="item-label">审批状态</div>
                    <div class="item-value" :style="{color:getState(getDictLabel(v.approveStatus,'out_in_approve_status'))}">
                      {{getDictLabel(v.approveStatus,'out_in_approve_status') }}
                    </div>
                  </div>
                  <div class="info-item" v-if="v.approveRemark">
                    <div class="item-label">审批说明</div>
                    <div class="item-value"> {{v.approveRemark}}</div>
                  </div>
                  <div class="info-item">
                    <div class="item-label">审批时间</div>
                    <div class="item-value">
                       <!-- {{v.approveTime}} -->
                       {{v.approveTime? dayjs(v.approveTime).format('YYYY-MM-DD HH:mm') : '暂无'}}
                      </div>
                  </div>
                
                  <div class="info-item">
                    <div class="item-label">人员姓名</div>
                    <div class="item-value"> {{v.userName}}</div>
                  </div>
                  <div class="info-item">
                    <div class="item-label">到达时间</div>
                    <div class="item-value">
                      <!-- {{ dayjs(v.arrivalTime).format('YYYY-MM-DD HH:mm')}} -->
                      {{v.arrivalTime? dayjs(v.arrivalTime).format('YYYY-MM-DD HH:mm') : '暂无'}}
                    </div>
                  </div>
                  <div class="info-item">
                    <div class="item-label">离开时间</div>
                    <div class="item-value">
                      {{v.departureTime? dayjs(v.departureTime).format('YYYY-MM-DD HH:mm') : '暂无'}}
                    </div>
                  </div>
                </div>
              </template>
            </van-cell>
          </card>


<!--          <card v-else v-for="(v,i) in dataList" :key="v.id">-->
<!--            <van-cell-->
<!--              :title-style="{color:'#008cd6'}"-->
<!--              :title="`介绍信类型: ${getDictLabel(v.type,'out_in_type')}`"-->
<!--            @click="clickItem(v.id)">-->
<!--              <template #right-icon>-->
<!--                <van-button v-if="!v.departureTime" type="info" size="mini">登记离开时间</van-button>-->
<!--                <van-button v-else type="info" size="mini">查看登记详情</van-button>-->
<!--              </template>-->
<!--              <template #label>-->
<!--              <div class="info-box">-->
<!--                <div class="info-item">-->
<!--                  <div class="item-label">人员姓名：</div>-->
<!--                  <div class="item-value"> {{v.userName}}</div>-->
<!--                </div>-->
<!--&lt;!&ndash;                <div class="info-item">&ndash;&gt;-->
<!--&lt;!&ndash;                  <div class="item-label">证件号码：</div>&ndash;&gt;-->
<!--&lt;!&ndash;                  <div class="item-value">{{v.idCard}}</div>&ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->
<!--                <div class="info-item">-->
<!--                  <div class="item-label">到达时间：</div>-->
<!--                  <div class="item-value">-->
<!--                    {{ dayjs(v.arrivalTime).format('YYYY-MM-DD HH:mm')}}-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="info-item">-->
<!--                  <div class="item-label">离开时间：</div>-->
<!--                  <div class="item-value">-->
<!--                    {{v.departureTime? dayjs(v.departureTime).format('YYYY-MM-DD HH:mm') : '暂无'}}-->
<!--                  </div>-->
<!--                </div>-->
<!--&lt;!&ndash;                <div class="info-item">&ndash;&gt;-->
<!--&lt;!&ndash;                  <div class="item-label">出入事由：</div>&ndash;&gt;-->
<!--&lt;!&ndash;                  <div class="item-value">&ndash;&gt;-->
<!--&lt;!&ndash;                    {{v.reasons}}&ndash;&gt;-->
<!--&lt;!&ndash;                  </div>&ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->
<!--              </div>-->
<!--            </template>-->
<!--            </van-cell>-->
<!--          </card>-->
        </Scroll>
      </div>
     
    </div>
    <!-- <drag-button @btnClick="clickAdd"></drag-button> -->
  </div>
</template>
<script>
import NavBar from '@/components/NavBar/index.vue'
import OrgTree from '@/components/orgTree/index.vue'
import Scroll from '@/components/scroll/scroll.vue'
import Card from '@/components/card/index.vue'
import dateCell from '@/components/dateCell/index.vue'
import selectCell from '@/components/selectCell/index.vue'
import {dataList,deleteUserRegister} from './api'
import {mapGetters} from "vuex";
import {formatDate} from "@/filters/filter";
import DragButton from "@/components/DragButton/index.vue";
import dayjs from "dayjs";

export default {
  name: 'visitRecord',
  components: {
   
    DragButton,
    NavBar,
    OrgTree,
    Scroll,
    Card,
    dateCell,
    selectCell,
  },
  data() {
    return {
      query:{
        arrivalTime:null,
        userName:null,
        pageSize:10,
        pageNum:1,
      },
      dataList:[],
      pullup:false,
      dicts:['out_in_type','out_in_approve_status']
    }
  },
  beforeRouteEnter(to,from,next){
    next(vm=>{
      if(to.params.event === 'refresh'){
        vm.refreshData();
      }
    })
  },
  mounted() {
    this.initData();
  },
  computed:{
    ...mapGetters(['orgId','id','dictionary']),
  },
  methods: {
    dayjs,
    getState(state){
      switch (state){
        case '待审批':
          return '#008cd6';
        case '不同意':
          return '#bc9f71';
        case '同意':
          return '#009240';
        case '已失效':
          return '#D7000F';
      }
    },
    clickAdd(){
      this.$router.push({
        path:'/visitUserRecord',
      });
    },
    refreshData(){
      this.pullup = true;
      this.query.pageNum = 1;
      this.total = 0;
      this.dataList = [];
      this.getDataList();
    },
    //初始化数据
    initData(){
      this.getDataList();
    },
    //获取数据列表
    getDataList(){
      if( this.dataList.length !== 0 && this.dataList.length >= this.total) {
        this.pullup = false;
        this.$toast('已加载完毕');
        return;
      }
      let data = {
        ...this.query,
        orgId:this.orgId
      }
      dataList(data).then(res=>{
        if(res.total === '0'){
          this.pullup = false;
          this.$toast('已加载完毕');
          return
        }
        this.total = res.total;
        if(this.dataList.length < res.total) {
          this.dataList = [...this.dataList,...res.rows] ;
          this.pullup = true;
          this.query.pageNum++;
          this.$refs.Scroll.refresh();
        }
      })
    },
    clickItem(id){
      this.$router.push({
        path:'/visitRecordDetail',
        query:{id}
      });
    },
    cancelOutInRequest(id)
    {
      // let data = {
      //   id:this.selectedUser.id,
      //   accompanyingPerson:this.selectedUser.accompanyingPerson?this.selectedUser.accompanyingPerson:accompanyingPerson,
      //   arrivalTime: this.selectedUser.arrivalTime ? this.selectedUser.arrivalTime:arrivalTime,
      //   departureTime,
      // }
      //alert(JSON.stringify(data))
      let ids=[id];
      deleteUserRegister(ids).then(res=>{
        this.$toast.success('提交成功');
        this.refreshData();
      })
    }
  }
}
</script>
<style lang="scss">
.visitRecord{
  .card {
    >.van-cell{
      padding: 0;
    }
  }
  .van-cell-group{
    margin-bottom: 20px;
  }
  .van-cell-group:last-child{
    margin-bottom: 0;
  }
  .vue-table-root{
    tr,td,th{
      font-size: 25px!important;
      color:#666!important;
    }
  }
}
</style>
<style lang="scss" scoped>
.problem-item{

}
.app-container{

}
.card-list{
  padding:0 20px 20px 20px;
  height: calc(100vh - 426px);
  overflow:  auto;
}
.item-title{
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 20px !important;
}
.card-num{
  display: flex;
  align-items: center;
  font-size: 28px;
  color: #009dff;
}
.search-flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
  >div{
    width: 50%;
  }
}
.btn-box{
  width: 100%;
  height: 100%;
  padding: 30px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-box{
  color:#555;
  padding-top: 20px;
}
.info-desc{
  padding-top: 10px;
  min-height: 50px;
  line-height: 36px;
  max-height: 250px;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示为3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  >span{
    color:#999;
  }
}
.info-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26px;
  .item-label{
    flex:.25;
    text-align: left;
    color:#333;
  }
  .item-value{
    flex:.75;
    color:#666;
    min-height: 50px;
    max-height: 250px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 限制显示为3行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>