初始化
This commit is contained in:
hezhidong
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div class='box'>
|
||||
<header class="tabbar">
|
||||
<div @click="onClickTabbar(item)" v-for="item in stateEnum" class="tabbar-li" :key="item.status" :class="query.status == item.status ? 'active' : ''">
|
||||
{{ item.statusName }}
|
||||
<img v-if="query.status == item.status" src="../assets/maomaochong.png" alt="">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div v-if="recordArr.length" class="content">
|
||||
<div @click="onClcikItem(item)" v-for="item in recordArr" class="wait-list" :key="item.id">
|
||||
<h5>被拜访人：{{ item.visitingName }}</h5>
|
||||
<h5>拜访时间：{{ item.hours }}</h5>
|
||||
<div class="apply-box">
|
||||
<p><span>访客姓名：</span><span>{{ item.name }}</span></p>
|
||||
<p><span>联系方式：</span><span>{{ item.phone }}</span></p>
|
||||
<p><span>随行人数：</span><span>{{ item.visitingNum }} </span></p>
|
||||
<p><span>来访事由：</span><span>{{ item.reason }}</span></p>
|
||||
</div>
|
||||
<!-- refuse 拒绝 pass 通过 状态 -->
|
||||
<div class="status" :class="stateEnum[item.status].className">{{ stateEnum[item.status].statusName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isLoading && recordArr.length == 0" class="content">
|
||||
<div class="no-have">
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import dd from 'dingtalk-jsapi'
|
||||
import { Toast, ImagePreview } from 'vant';
|
||||
|
||||
import { rulesForm, resetForm, rulesPhone } from '@/com/index'
|
||||
import { getToken, getVisitorRecord } from '@/api/admin.js'
|
||||
|
||||
/* @data */
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
const stateEnum = store.state.stateEnum
|
||||
const recordArr = ref([])
|
||||
const isLoading = ref(false)
|
||||
|
||||
const query = reactive({
|
||||
status: 0,
|
||||
size: -1,
|
||||
current: 1,
|
||||
})
|
||||
|
||||
console.log(route)
|
||||
/* @setup */
|
||||
|
||||
/* @method */
|
||||
const onClcikItem = (item) =>{
|
||||
// window.location.href = item.instanceUrl
|
||||
// window.open(item.instanceUrl, '审批详情');
|
||||
dd.openLink({
|
||||
url: item.instanceUrl,
|
||||
success: () => {},
|
||||
fail: () => {},
|
||||
complete: () => {},
|
||||
});
|
||||
}
|
||||
const onClickTabbar = (item) =>{
|
||||
if(query.status != item.status){
|
||||
query.status = item.status
|
||||
recordArr.value = []
|
||||
visitorList()
|
||||
}
|
||||
|
||||
}
|
||||
const visitorList = () =>{
|
||||
Toast.loading({ duration: 0, forbidClick: true, message: '加载中', });
|
||||
getVisitorRecord(query).then(res =>{
|
||||
isLoading.value = true
|
||||
recordArr.value = res.data
|
||||
}).catch(err =>{
|
||||
isLoading.value = true
|
||||
})
|
||||
}
|
||||
visitorList()
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.box{
|
||||
background: #F9FBFC;;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.tabbar{
|
||||
height: 1.8933rem /* 142/75 */;
|
||||
line-height: .6133rem /* 46/75 */;
|
||||
display: flex;
|
||||
font-size: $md-size;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
padding: .56rem /* 42/75 */ .4rem /* 30/75 */ 0;
|
||||
box-sizing: border-box;
|
||||
.tabbar-li{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
img{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: .48rem /* 36/75 */;
|
||||
width: .6133rem /* 46/75 */;
|
||||
height: .2667rem /* 20/75 */;
|
||||
}
|
||||
}
|
||||
.active{
|
||||
font-size: $size30;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
padding: 0 .4rem /* 30/75 */;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
.wait-list{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 470px;
|
||||
background: #FFFFFF;
|
||||
border-radius: .2667rem /* 20/75 */;
|
||||
padding: .48rem /* 36/75 */;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: .2667rem /* 20/75 */;
|
||||
h5{
|
||||
height: .6667rem /* 50/75 */;
|
||||
font-size: $md-size;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #222222;
|
||||
}
|
||||
.apply-box{
|
||||
|
||||
width: 100%;
|
||||
padding: .4rem /* 30/75 */ .3733rem /* 28/75 */ .5067rem /* 38/75 */;
|
||||
box-sizing: border-box;
|
||||
border-radius: .1333rem /* 10/75 */;
|
||||
font-size: $md-size;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
line-height: .72rem /* 54/75 */;
|
||||
background: #F5F7F9;
|
||||
span:last-child{
|
||||
color: #5F6583;
|
||||
}
|
||||
}
|
||||
.status{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1.52rem /* 114/75 */;
|
||||
height: .6667rem /* 50/75 */;
|
||||
line-height: .6667rem /* 50/75 */;
|
||||
background: #FFE9E4;
|
||||
border-radius: 0px .2667rem /* 20/75 */ 0px .1333rem /* 10/75 */;
|
||||
color: #FF6643;
|
||||
font-size: $sm-size;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FF6643;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.refuse{
|
||||
color: #5F6583;
|
||||
background: #EAEEF6;
|
||||
}
|
||||
.pass{
|
||||
color: #30BF78;
|
||||
background: #E7F8F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user