267 lines
7.3 KiB
Vue
267 lines
7.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 筛选及搜索区域 -->
|
|
<view class="search-bar">
|
|
<input v-model="searchParams.visitorName" class="search-input" placeholder="访客姓名"/>
|
|
<input v-model="searchParams.visitedPerson" class="search-input" placeholder="被访人"/>
|
|
<input v-model="searchParams.visitedUnit" class="search-input" placeholder="被访单位"/>
|
|
<!-- <picker mode="selector" :range="statusOptions" @change="onStatusChange">
|
|
<view class="picker-view">
|
|
{{ searchParams.bookStatus || '预约状态' }}
|
|
</view>
|
|
</picker> -->
|
|
<input v-model="searchParams.phoneSuffix" class="search-input" placeholder="手机号后四位"/>
|
|
<button class="search-btn" @click="handleSearch">搜索</button>
|
|
<button class="reset-btn" @click="handleReset">重置</button>
|
|
</view>
|
|
|
|
<!-- 表格区域 -->
|
|
<view class="table-wrap">
|
|
<view class="table-header">
|
|
<view class="table-cell">序号</view>
|
|
<view class="table-cell">访客姓名</view>
|
|
<view class="table-cell">访客电话</view>
|
|
<view class="table-cell">所属公司</view>
|
|
<view class="table-cell">被访人</view>
|
|
<view class="table-cell">联系电话</view>
|
|
<view class="table-cell">被访单位</view>
|
|
<view class="table-cell">拜访事由</view>
|
|
<view class="table-cell">拜访时间</view>
|
|
<!-- <view class="table-cell">是否预约车位</view>
|
|
<view class="table-cell">预约状态</view> -->
|
|
<view class="table-cell">提交时间</view>
|
|
<!-- <view class="table-cell">操作</view> -->
|
|
</view>
|
|
<view v-for="(item, index) in filteredList" :key="index" class="table-row">
|
|
<view class="table-cell">{{ index + 1 }}</view>
|
|
<view class="table-cell">{{ item.visitorName }}</view>
|
|
<view class="table-cell">{{ item.visitorPhone }}</view>
|
|
<view class="table-cell">{{ item.visitorUnit }}</view>
|
|
<view class="table-cell">{{ item.interviewedPerson }}</view>
|
|
<view class="table-cell">{{ item.interviewedPhone }}</view>
|
|
<view class="table-cell">{{ item.interviewedUnit || '无' }}</view>
|
|
<view class="table-cell">{{ item.visitingReason }}</view>
|
|
<view class="table-cell">{{ item.visitingBeginTime }}</view>
|
|
<!-- <view class="table-cell">{{ item.bookingParkingSpace === 1 ? '是' : '否' }}</view>
|
|
<view class="table-cell" :class="{'status-confirm': item.serveStatus === 1, 'status-wait': item.serveStatus === 0}">
|
|
{{ item.serveStatus === 1 ? '已确认' : '待确认' }}
|
|
</view> -->
|
|
<view class="table-cell">{{ item.createTime }}</view>
|
|
<!-- <view class="table-cell operation-cell">
|
|
<button class="operation-btn" @click="handleDetail(item)">详情</button>
|
|
<button class="operation-btn" @click="handleAudit(item)">确认</button>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<VisitorDetailModal
|
|
:visible="showDetailModal"
|
|
:visitorInfo="currentVisitor"
|
|
:showActionButtons="currentVisitor.serveStatus === 0"
|
|
@close="closeDetailModal"
|
|
@audit="handleAudit"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import VisitorDetailModal from '@/components/VisitorDetailModal.vue';
|
|
|
|
export default {
|
|
components: {
|
|
VisitorDetailModal
|
|
},
|
|
data() {
|
|
return {
|
|
showDetailModal: false,
|
|
currentVisitor: {},
|
|
loading: false,
|
|
tableData: [],
|
|
searchParams: {
|
|
visitorName: '',
|
|
visitedPerson: '',
|
|
visitedUnit: '',
|
|
bookStatus: '',
|
|
phoneSuffix: ''
|
|
},
|
|
statusOptions: ['已确认', '待确认']
|
|
}
|
|
},
|
|
computed: {
|
|
filteredList() {
|
|
return this.tableData.filter(item => {
|
|
if (this.searchParams.visitorName && !item.visitorName.includes(this.searchParams.visitorName)) return false;
|
|
if (this.searchParams.visitedPerson && !item.interviewedPerson.includes(this.searchParams.visitedPerson)) return false;
|
|
if (this.searchParams.visitedUnit && !item.interviewedUnit.includes(this.searchParams.visitedUnit)) return false;
|
|
if (this.searchParams.bookStatus) {
|
|
const statusMap = {'已确认': 1, '待确认': 0};
|
|
return item.serveStatus === statusMap[this.searchParams.bookStatus];
|
|
}
|
|
if (this.searchParams.phoneSuffix) {
|
|
const phone = item.visitorPhone || '';
|
|
return phone.slice(-4) === this.searchParams.phoneSuffix;
|
|
}
|
|
return true;
|
|
});
|
|
}
|
|
},
|
|
onLoad() {
|
|
// #ifdef APP-PLUS
|
|
plus.screen.lockOrientation('default');
|
|
// #endif
|
|
this.onload();
|
|
},
|
|
methods: {
|
|
handleDetail(item) {
|
|
console.log('点击详情，传递的数据：', item);
|
|
this.currentVisitor = item;
|
|
this.showDetailModal = true;
|
|
},
|
|
closeDetailModal() {
|
|
this.showDetailModal = false;
|
|
},
|
|
handleAudit(item) {
|
|
console.log("eee", item)
|
|
this.loading = true;
|
|
item.serveStatus = 1
|
|
this.$u.api.spfk(item).then(res => {
|
|
console.log(res)
|
|
})
|
|
},
|
|
onReady() {
|
|
// #ifdef APP-PLUS
|
|
plus.screen.lockOrientation('landscape-primary');
|
|
// #endif
|
|
},
|
|
onload() {
|
|
this.$u.api.fklist().then(res => {
|
|
this.tableData = res.rows;
|
|
}).catch(err => {
|
|
console.error('获取数据失败：', err);
|
|
uni.showToast({title: '获取数据失败', icon: 'none'});
|
|
});
|
|
},
|
|
onStatusChange(e) {
|
|
const index = e.detail.value;
|
|
this.searchParams.bookStatus = this.statusOptions[index];
|
|
},
|
|
handleSearch() {
|
|
this.onload();
|
|
console.log('当前筛选参数：', this.searchParams);
|
|
},
|
|
handleReset() {
|
|
this.searchParams = {
|
|
visitorName: '',
|
|
visitedPerson: '',
|
|
visitedUnit: '',
|
|
bookStatus: '',
|
|
phoneSuffix: ''
|
|
};
|
|
this.onload();
|
|
},
|
|
// handleAudit(item) {
|
|
// console.log('审核操作，当前数据：', item);
|
|
// handleAudit(item)
|
|
// }
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.search-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.picker-view {
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
min-width: 120px;
|
|
text-align: center;
|
|
}
|
|
|
|
.search-btn,
|
|
.reset-btn {
|
|
padding: 8px 15px;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
height: 40px;
|
|
text-align: center;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.search-btn {
|
|
background-color: #007aff;
|
|
border: none;
|
|
}
|
|
|
|
.reset-btn {
|
|
background-color: #f0f0f0;
|
|
color: #333;
|
|
border: none;
|
|
}
|
|
|
|
.table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table-header,
|
|
.table-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.table-header {
|
|
background-color: #f8f8f8;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.table-cell {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 8px 0;
|
|
border-right: 1px solid #eee;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.operation-cell {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex: 2;
|
|
}
|
|
|
|
.operation-btn {
|
|
margin: 0 5px;
|
|
padding: 5px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.status-confirm {
|
|
color: #52c41a;
|
|
}
|
|
|
|
.status-wait {
|
|
color: #fa8c16;
|
|
}
|
|
</style> |