soc_app/src/views/menu/introduceLetter/letter/index.vue

<template>
  <div class="introduce-letter-page">
    <NavBar />
    <div class="header">
      <van-search
        v-model="query.keyWords"
        class="van-hairline--bottom"
        placeholder="请输入人员姓名关键字"
        @clear="refreshData"  @change="refreshData"
      />
      <div class="seg-tabs">
        <van-tabs v-model="query.status" type="card" color="rgb(0, 140, 214)" style="border-color: rgb(0, 140, 214);" shrink animated @change="refreshData">
          <van-tab title="全部" :name="-1" />
          <van-tab title="使用中" :name="1" />
          <van-tab title="已失效" :name="2" />
        </van-tabs>
      </div>
      <div class="status-filter">
        <van-tabs v-model="query.outInRequestStatus" color="rgb(0, 140, 214)" line-width="0" @change="refreshData">
          <van-tab title="全部" :name="-1" />
          <!-- <van-tab title="待办" :name="0" />
           <van-tab title="逾期" :name="2" />
          <van-tab title="补登" :name="3" />
          <van-tab title="已完成" :name="4" />
          <van-tab title="已拒绝" :name="5" /> -->
          <van-tab title="待审批" :name="0" />
          <van-tab title="待登记" :name="1" />
          <van-tab title="已完成" :name="2" />
          <van-tab title="已拒绝" :name="3" />
          <van-tab title="已逾期" :name="4" />
          <van-tab title="已补登" :name="5" />
        </van-tabs>
      </div>
    </div>
    <div class="card-list">
    <Scroll 
      ref="Scroll"
      @refresh="refreshData"
      @loadMore="getDataList"
      :pullup="pullup"
    >
    <div class="list-section">
      <div v-for="item in dataList" :key="item.id">
        <div class="letter-card" @click="goLetterDetail(item.id)">
          <div class="card-header">
            <div class="title">{{ item.letterNo ==null || item.letterNo==''?"紧急出入": item.letterNo }}</div>
            <van-tag size="large" v-if="item.status === 1" type="success" round>使用中</van-tag>
            <van-tag size="large" v-else-if="item.status === 2" type="danger" round>已失效</van-tag>
          </div>
            <van-divider />
          <div class="period">
            <span>有效期：</span>
            <span>{{ item.startTime }} 至 {{ item.endTime }}</span>
          </div>

          <div class="certs" @click.stop>
            <div class="cert-thumb" v-for="user in item.userInfos" :key="user.id">
              <div class="cert" >
              <div class="cert-img">
                  <ImageThumbnail
                    :image-list="user.imgFile"
                    height="60px"
                    width="80px"
                    radius="8px"
                    />
                </div>
               <div class="cert-img-name"><span>{{user.userName}}</span></div>
              </div>
            </div>
          </div>

          <div class="records" v-if="item.recentOutInRequestRecords.length > 0">
            <div style="display: flex;align-items: center;">
                <!-- <van-icon name="underway-o" class="rec-icon"/> -->
                <img src="../../../../assets/svg/history.svg" width="15px" height="15px" class="rec-icon"/>
                <span class="rec-text">最新申请记录</span>
            </div>
            <!-- <van-icon name="more" /> -->
            <div>
                <!-- <van-icon size="25px" name="ellipsis" /> -->
                <span class="rec-title" @click.stop="goOutInList()" >更多</span>
            </div>
          </div>

          <div class="entries">
            <div class="entry" v-for="(e, idx) in item.recentOutInRequestRecords" :key="idx" @click.stop="handleOutInRequestRecordClick(e)">
              <div class="entry-left">
                <div class="entry-title">出入名单：{{ e.userNames }}</div>
                <div class="entry-sub">核对人：{{ e.createBy }}</div>
                <div class="entry-time" >
                  <span>申请时间:{{ dayjs(e.createTime).format("YYYY-MM-DD HH:mm") }}</span>
                  <span v-if="e.approveTime"> | 审核时间:{{ dayjs(e.approveTime).format("YYYY-MM-DD HH:mm") }}</span>
                </div>
                <!-- <div class="entry-time" v-if="e.approveTime">审核时间：{{ dayjs(e.approveTime).format("YYYY-MM-DD HH:mm") }}</div> -->
                                
              </div>
              <div class="entry-right">
                <van-tag size="large" v-if="e.status===0" type="warning" plain>待审批</van-tag>
                <van-tag size="large" v-else-if="e.status===1" type="primary" plain>待登记</van-tag>
                <van-tag size="large" v-else-if="e.status===2" type="success" plain>已完成</van-tag>
                <van-tag size="large" v-else-if="e.status===3" type="danger" plain>已拒绝</van-tag>
                <van-tag size="large" v-else-if="e.status===4" type="danger" plain>已逾期</van-tag>
                <van-tag size="large" v-else-if="e.status===5" type="success" plain>已补登</van-tag>
              </div>
            </div>
          </div>

          <div class="card-footer" v-if="item.status === 1">
            <van-button v-hasPermi="['core:outinrequest:add']" block round size="small" type="info" @click.stop="addOutInRequest(item)">提交出入申请</van-button>
          </div>
        </div>
      </div>

      <van-empty v-if="dataList.length === 0" description="暂无数据" />
    </div>
    </Scroll>
    </div>
     <!-- <drag-button></drag-button> -->
     <drag-button @btnClick="clickAdd" v-hasPermi="['core:letter:add']"></drag-button>
  </div>
  
</template>

<script>
import NavBar from '@/components/NavBar'
import dayjs from "dayjs";
import Scroll from '@/components/scroll/scroll'
import Card from '@/components/card'
import dateCell from '@/components/dateCell'
import selectCell from '@/components/selectCell'
import DragButton from '@/components/DragButton'
import { ImagePreview } from 'vant'
import {mapGetters} from "vuex";
import {imgUrl} from "@/utils";
import ImageThumbnail from './imageThumbnail.vue';
import {dataList} from './api'
export default {
  name: 'IntroduceLetterPage',
    components: {
    NavBar,
    Scroll,
    Card,
    dateCell,
    selectCell,
    DragButton,
    ImageThumbnail
  },
  data() {
    return {      
      pullup:false,
      total: 0,
      query: {
        pageSize:10,
        pageNum:1,
        status: -1,
        outInRequestStatus: -1,
        keyWords: ''
      },
      dataList:[]
    }
  },
  beforeRouteEnter(to,from,next){
    next(vm=>{
      if(to.params.event === 'refresh'){
        vm.refreshData();
      }
    })
  },  
  mounted() {
    this.initData();
  },
  computed: {
    ...mapGetters(['orgId','id','dictionary']),
  },
  methods: {
    // handleTopTabChange() {},
    // handleStatusChange() {},
    addOutInRequest(item) {
      // this.$toast(`提交：${item.id}`)      
      this.$router.push({
          path:'/new/letter/AddOutInRequset',
          query: {letterId:item.id}
        });
    },
    onCreate() {
      this.$toast('新建介绍信')
    },
    // preView(val) {
    //   if(Array.isArray(val)){
    //    let arr = val.map(v=>{
    //       return imgUrl(v);
    //     })
    //     ImagePreview(arr);
    //   }else {
    //     ImagePreview(["http://47.92.229.224:8081/statics/2025/09/01/564978e86d5042fe8e3d9e266a10ca04/20250901141424A018.png"]);
    //   }
    // },
    goOutInList()
    {
        // console.log()
        this.$router.push({
          path:'/new/outIn',
        });
    },
    goLetterDetail(id){
      // if(isAddOutInRequest)
      // {
      //   console.log(id,'isAddOutInRequest')
      //   this.$router.push({
      //     path:'/visitAddOutInRequset',
      //     query: {id}
      //   });
      // }
      // else{
        console.log(id,'letterId')
        this.$router.push({
          path:'/new/letter/detail',
          query: {letterId:id}
        });
      // }
    },
    handleOutInRequestRecordClick(outInRequest)
    {
      console.log('outInRequest',outInRequest);
      // 待审批
      if(outInRequest.status === 0)
      {
        this.$router.push({
          path:'/new/letter/approvalOutInRequest',
          query: {outInRequestId:outInRequest.id}
        });
      }
      //待登记 / 已过期
      else if(outInRequest.status === 1 || outInRequest.status === 4) 
      {
        this.$router.push({
          path:'/new/outIn/fillOutInInfo',
          query: {outInRequestId:outInRequest.id}
        });
        
      }
      //已完成 / 已补登
      else if(outInRequest.status === 2 || outInRequest.status === 5) 
      { 
        this.$router.push({
          path:'/new/outIn/outInRequest/completeDetail',
          query: {outInRequestId:outInRequest.id}
        });
      }
      //已拒绝
      else if(outInRequest.status === 3)
      { 
        this.$router.push({
          path:'/new/letter/outInRequest/refuseDetail',
          query: {outInRequestId:outInRequest.id}
        });
      }
    },
    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
      }
      if(data.status === -1){
        delete data.status;
      }
      if(data.outInRequestStatus === -1){
        delete data.outInRequestStatus;
      }
      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();
        }
      })
    },
    clickAdd(){
      this.$router.push({
        path:'/new/addletter',
        query:{type:'add'}
      });
    },
  }
}
</script>
<style lang="scss">
.introduce-letter-page{
    .van-search{
        margin: 0px !important;
    }
    .van-divider{
        margin: 1.266667vw 0 !important;
    }
    .van-tabs__nav--card {
    border-radius: 25px !important;
    margin: 0 0 !important;
    }
    .van-tabs--card .van-tab:first-child {
    border-bottom-left-radius: 20px !important;
    border-top-left-radius: 20px !important;
    }
    .van-tabs--card .van-tab:last-child {
    border-bottom-right-radius: 20px !important;
    border-top-right-radius: 20px !important;
    }
    .van-tabs--line{
        .van-tab {
            border-radius: 25px !important;
            background: white !important;
            border: 1px solid #008cd6 !important;
            // margin-right: 10px;             
            color:#999;
            
        }
        .van-tab--active
        {
            background: #008cd6 !important;
            color:white;
        }
    }
    .van-tabs__wrap--scrollable .van-tab
    {
      padding: 0 0 !important;
    }
    .van-tabs--line .van-tabs__wrap{
        padding-right: 0 !important;
        height: 8vw;
    }
    .van-tag {
      font-size:26px;
    }
    .van-tabs__nav--line.van-tabs__nav--complete
    {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
}

</style>
<style scoped>


.introduce-letter-page {
  min-height: 100vh;
  background: #f5f7fb;
  padding-bottom: 80px;
}
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  margin: 16px 21px 0 21px;
}
.seg-tabs {
    margin-bottom: 16px;
}
.status-filter {
    padding-bottom: 16px;
}
 .card-list{
    padding:0 5px 0px 5px;
    height: calc(100vh - 370px);
    overflow: auto;
  }
.list-section {
  padding: 16px;
}
.letter-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 550;
  font-size: 30px;
  margin-bottom: 8px;
  margin-left: 15px;
}
.period {
  font-size: 24px;
  color: #969799;
  margin-bottom: 5px;
}
.certs {
  display: flex;
  flex-wrap:wrap;
  margin: 10px 0;
}
.cert-thumb {
  border-radius: 16px;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cert-img{
  /* width: 150px; */
  /* height: 115px; */
  /* background: #e6ebf5; */
  /* border-radius: 10px; */
}
.cert-img-name{
  font-size:20px;
  height: 25px;
  /* width: 150px;
  height: 120px; */
  /* background: #e6ebf5; */
  /* border-radius: 10px; */
}
.cert-label {
  margin-top: 6px;
  font-size: 16px;
  color: #888;
}
.records {
  display: flex;
  align-items: center;
  color: #888;
  font-size: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f2f3f5;
  justify-content:space-between;
}
.rec-icon { margin-right: 4px; }
.rec-text { font-size: 24px; }
.rec-title { font-size: 24px; color: #333; }
.entries { margin-top: 0px;margin-left: 15px; }
.entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f2f3f5;
}
.entry-right{
  margin-bottom: 50px;
}
.entry:last-child { border-bottom: none; }
.entry-title { font-size: 28px; color: #333; }
.entry-sub { font-size: 24px; color: #999; margin-top: 8px; }
.entry-time { font-size: 20px; color: #999; margin-top: 8px; }

.card-footer { 
    margin-top: 8px; 
  }

.fab {
  position: fixed;
  right: 16px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #2f6bff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(47,107,255,0.35);
}

/* 深度选择器覆盖 Vant 组件圆角 */
::v-deep .van-search {
  border-radius: 16px;
  overflow: hidden;
  margin: 8px 16px 0;
}
::v-deep .van-search__content {
  border-radius: 24px;
}
::v-deep .van-tab--card {
  border-radius: 16px !important;
}
::v-deep .van-tabs--card .van-tabs__wrap {
  border-radius: 16px;
  overflow: hidden;
}
::v-deep .van-button--round {
  border-radius: 24px;
}
</style>