点击不同tab切换不同的component
<template>
<div class="my-case-page">
<mt-header title="双随机一公开">
<mt-button @click="backIndex()" icon="back" slot="left">返回</mt-button>
</mt-header>
<div class="container">
<div @click.prevent="handleManage('unprocess',1)" :class="{active:titleShow ==1}">待办</div>
<div @click.prevent="handleManage('processing',2)" :class="{active:titleShow ==2}">复查</div>
<div @click.prevent="handleManage('processed',3)" :class="{active:titleShow ==3}">已办</div>
</div>
<div class="container-all">
<div class="container-bottom">
<component :is="componentName"></component>
</div>
</div>
<div class="scanning-item" @click="handleScanning">扫描</div>
</div>
</template>
<script>
// 导入组件
import unprocess from "./components/unprocess.vue";
import processing from "./components/processing.vue";
import processed from "./components/processed.vue";
import {
apiGetRandomList,
FILE_OPEN_URL,
apiGetRandomCount,
} from "@/api/case";
let formatDate;
export default {
name: "index",
data() {
formatDate = this.$formatDate;
return {
list: [],
titleShow: 1, //控制头部切换样式-未处理，处理中，已处理
componentName: "unprocess",
pageNum: 1,
env: process.env.VUE_APP_SERVE_ENV,
FILE_OPEN_URL: FILE_OPEN_URL,
id:'',
};
},
created(){
this.componentName = this.$route.query.componentName || this.componentName ;
this.titleShow = this.$route.query.titleShow || this.titleShow;
},
// 注册组件
components: {
unprocess,
processing,
processed,
},
methods: {
backIndex() {
this.$router.go(-1);
},
handleScanning(){
this.$router.push({path:"/scanning/index"});
},
//点击title切换 -number控制active选中颜色
handleManage(process, number) {
this.componentName = process;
this.titleShow = number;
},
},
filters: {
formatDate(value, that) {
return that.$formatDate(value, "yyyy-MM-dd hh:mm");
},
},
};
</script>
<style lang="less" scoped>
// 头部fixed样式start
.mint-header {
background: white;
color: #333333;
// box-shadow: 0 0 * @toVw 5 * @toVw #f2f2f2;
// border-bottom: 1 * @toVw solid #f2f2f2;
border-bottom: 0 solid #fff !important;
position: fixed;
font-size: 14 * @toVw;
top: 0;
left: 0;
height: 45 * @toVw;
line-height: 45 * @toVw;
width: 100%;
z-index: 100;
.mint-button {
height: 41 * @toVw;
/deep/ .mintui {
font-size: 14 * @toVw;
}
/deep/ .mint-header-title {
font-size: 16 * @toVw;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: rgba(51, 51, 51, 1);
}
}
}
// 头部fixed样式end
.my-case-page {
background: #ffffffff;
height: 100vh;
overflow: auto;
.container {
width: 3.75rem; //1rem=100px
margin: 0 auto;
padding: 5px 0;
box-sizing: border-box;
display: flex;
position: fixed;
top: 12vw;
left: 0;
height: 12vw;
line-height: 12vw;
z-index: 99;
align-items: center;
justify-content: space-around;
border-top: 0.26666667vw solid #f2f2f2;
border-bottom: 0.26666667vw solid #f2f2f2;
background-color: #ffffffff;
.active {
border-bottom: 2px solid rgb(2, 167, 240);
}
}
.container-all {
background: #ffffffff;
margin-top: 24vw;
}
}
.scanning-item{
z-index: 666;
}
</style>
2.点击tab切换，然后切换到不同组件,这个是components文件processing.vue文件
<template>
<div class="unContainer">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list v-model="loading" :finished="finished" finished-text="没有更多数据了哦!" @load="onLoad">
<!-- item-all start -->
<div class="item-all" v-for="(item,index) in tableData" :key="index">
<div class="item">
<span class="itemLeft">检查对象名称(姓名)：</span>
<span class="item-right">{{item.checkObjectName}}</span>
</div>
<div class="item">
<span class="itemLeft">检查人名称：</span>
<span class="item-right">{{item.checkUserName}}</span>
</div>
<!-- <div class="item">
<span class="itemLeft">行业类型：</span>
<span class="item-right">{{item.tradeCategory}}</span>
</div>-->
<div class="item">
<span class="itemLeft">检查时间：</span>
<span class="item-right">{{item.startTime | switchTime}}-{{item.endTime | switchTime}}</span>
</div>
<div class="handle-button-box">
<div @click="handleDetail(item)" class="handle-button">处理详情</div>
<div @click="review(item)" class="handle-button">去复查</div>
</div>
</div>
<!-- item-all end -->
</van-list>
</van-pull-refresh>
</div>
</template>
<script>
import { apiPubSearchMyTask } from "@/api/case.js";
import { formatDate } from "@/common/wordBook";
export default {
name: "processing",
data() {
return {
refreshing: false, //控制下拉刷新
loading: false, //滚动到底部会触发@load将loading=true
finished: false, //数据全部加载完finished = true
pageNum: 1, //第一页start
pageSize: 5, //每页10条数据
total: 0, //列表总数量
tableData: [], //循环列表赋值的数组
};
},
created() {
},
methods: {
//组件滚动到底部触发事件==>初始化会触发一次load事件，用于加载第一屏数据
onLoad() {
this.getList(); //调用请求接口数据的方法
},
//调用接口请求数据
getList() {
apiPubSearchMyTask({
pageNum: this.pageNum,
pageSize: this.pageSize,
status:'2',
}).then((res) => {
this.total = res.data.total;
if (this.pageNum == 1) {
this.tableData = res.data.list;
} else {
//页数加1再次调用接口赋值数据
this.tableData = this.tableData.concat(res.data.list);
}
if (this.tableData.length < this.total) {
this.pageNum = this.pageNum + 1;
} else {
this.finished = true;
}
//如果loading为true,是不会触发@load事件，因为第一次一进来就触发@load事件把loading = true,
//所以这里要loading= false,这样滚动到底部才能触发@load事件
this.loading = false;
}).catch(()=>{
this.loading = false;
});
},
//下拉刷新触发事件
onRefresh() {
console.log('下拉刷新')
this.pageNum = 1
apiPubSearchMyTask({
pageNum: this.pageNum,
pageSize: this.pageSize,
status:'2',
}).then(res=>{
this.total = res.data.total;
this.tableData = res.data.list
this.refreshing =false
this.finished = false// 如果数据全部加载完毕之后，下拉刷新需要把finished质为false
this.$toast('刷新成功')
// 当此时tableData的数据长度<total,需要+1页数，不然当我在滚动到底部的时候调用接口还
// 是用pageNum=1第一页去调用接口数据，这样不对，应该是第二页了。
if(this.tableData.length < this.total){
this.pageNum = this.pageNum +1
}else{
this.finished = true
}
})
},
// 查看详情
handleDetail(e){
this.$router.push({
path:'/randomCheck/handleDetail',
query:{
id:e.id,
statusFlag:e.status,
pageType: 'look',
// tradeCategory:e.tradeCategory
}})
},
//复查
review(item) {
this.$router.replace({
name: 'review',
query: {
planId: item.id,
}
})
}
},//methods方法结束
// 局部过滤器filters
filters: {
switchTime(val) {
if(!val) return '';
return formatDate(val, "yyyy-MM-dd");
},
},
};
</script>
网友评论