389 lines
9.8 KiB
Vue
389 lines
9.8 KiB
Vue
<template>
|
|
<view>
|
|
<view class="topTab">
|
|
<tabHeader title="设备领用" @filter="filter" @addDevice="addDevice" filte="true" add="true"></tabHeader>
|
|
</view>
|
|
|
|
<view class="page-content">
|
|
<!-- 设备列表 -->
|
|
<view class="list-box">
|
|
<u-list @scrolltolower="scrolltolower" height="89vh">
|
|
<u-list-item v-for="(item, index) in listData" :key="index">
|
|
<view class="list-item">
|
|
<view class="item-header">
|
|
<text style="margin-left: 20rpx;">{{item.name1}}</text>
|
|
</view>
|
|
<view class="item-content">
|
|
<view class="content-box">
|
|
<view class="item-text">
|
|
<text class="label">工程名称：</text>
|
|
<text class="info">{{item.name2}}</text>
|
|
</view>
|
|
<view class="item-text">
|
|
<text class="label">所属班组：</text>
|
|
<text class="info">{{item.name3}}</text>
|
|
</view>
|
|
<view class="item-text">
|
|
<text class="label">联系方式：</text>
|
|
<text class="info">{{item.name4}}</text>
|
|
</view>
|
|
<view class="item-text">
|
|
<text class="label">手环型号：</text>
|
|
<text class="info">{{item.name5}}</text>
|
|
</view>
|
|
<view class="item-text">
|
|
<text class="label">使用时间：</text>
|
|
<text class="info">{{item.name6}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item-footer">
|
|
<view class="foot-btn" @click="backDevice(item)">归还</view>
|
|
|
|
</view>
|
|
</view>
|
|
</u-list-item>
|
|
</u-list>
|
|
</view>
|
|
<!-- 筛选表单 -->
|
|
<u-popup :show="showPopup" mode="right" @close="close" @open="open">
|
|
<view>
|
|
<view style="width: 100%;height: 100%;">
|
|
<u--form class="visitor-form" :model="filterForm" ref="vForm">
|
|
<view class="visitor-input-box">
|
|
<u-form-item prop='projectName' style="width:100%;height: 100%;" >
|
|
<u--input
|
|
v-model="filterForm.projectName"
|
|
type="text" placeholder="工程名称"
|
|
maxlength="15" border="surround"
|
|
clearable></u--input>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="visitor-input-box">
|
|
<u-form-item prop='temporaryName' style="width:100%;height: 100%;" >
|
|
<u--input
|
|
v-model="filterForm.temporaryName"
|
|
type="text" placeholder="项目部"
|
|
maxlength="15" border="surround"
|
|
clearable></u--input>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="visitor-input-box">
|
|
<u-form-item prop='userPhone' style="width:100%;height: 100%;" >
|
|
<u--input
|
|
v-model="filterForm.userPhone"
|
|
type="number" placeholder="领用班组"
|
|
maxlength="11" border="surround"
|
|
clearable></u--input>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="visitor-input-box">
|
|
<u-form-item prop='userUnit' style="width:100%;height: 100%;" >
|
|
<searchSelect
|
|
v-model="filterForm.userUnit" :localdata="options"
|
|
dataKey="label" dataValue="value" placeholder="请选择类型"
|
|
clearable="true" :filterable="true" ></searchSelect>
|
|
|
|
</u-form-item>
|
|
</view>
|
|
<view class="visitor-input-box">
|
|
<u-form-item prop='userName' style="width:100%;height: 100%;" >
|
|
<u--input
|
|
v-model="filterForm.userName"
|
|
type="text" placeholder="设备名称"
|
|
maxlength="15" border="surround"
|
|
clearable></u--input>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="visitor-input-box">
|
|
<u-form-item prop='IntervieweeDepartment' style="width:100%;height: 100%;" >
|
|
<u--input
|
|
v-model="filterForm.IntervieweeDepartment"
|
|
type="text" placeholder="设备编码"
|
|
maxlength="15" border="surround"
|
|
clearable></u--input>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="visitor-input-box ">
|
|
<u-form-item prop='userTime' style="width:100%;height: 100%;" >
|
|
<u--input
|
|
v-model="filterForm.userTime"
|
|
type="text" placeholder="领用时间"
|
|
maxlength="15" border="surround"
|
|
clearable></u--input>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="visitor-input-box ">
|
|
<u-form-item prop='backTime' style="width:100%;height: 100%;" >
|
|
<u--input
|
|
v-model="filterForm.backTime"
|
|
type="text" placeholder="归还时间"
|
|
maxlength="15" border="surround"
|
|
clearable></u--input>
|
|
</u-form-item>
|
|
</view>
|
|
<view class="submit-box">
|
|
<u-button type="primary" shape="circle" class="submit-btn">查 询</u-button>
|
|
<u-button shape="circle" class="submit-btn">重置</u-button>
|
|
</view>
|
|
</u--form>
|
|
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<!-- 确认归还 -->
|
|
<u-modal :show="showModal" :title="modalTitle" width="450rpx"
|
|
@cancel="cancel" @confirm="confirm" :content='content'
|
|
:showCancelButton="true" :buttonReverse="true"></u-modal>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { getInformation,getWarnData } from '@/service/url.js';
|
|
import tabHeader from '@/components/tab-Header.vue';
|
|
import searchSelect from '@/components/search-select.vue';
|
|
import AES from "@/utils/cryptoJs/aes.js";
|
|
export default {
|
|
components: {
|
|
tabHeader,
|
|
searchSelect
|
|
},
|
|
data() {
|
|
return {
|
|
item:{
|
|
name1:"xxxxx项目部",
|
|
name2:"xxxxx工程",
|
|
name3:"王鹏宇班组",
|
|
name4:"王鹏宇 15918198822",
|
|
name5:"一号手环箱 XXXXXXXXXXXXXXXXX",
|
|
name6:"2024-07-01"
|
|
},
|
|
showPopup: false,
|
|
showModal: false,
|
|
showDate: false,
|
|
modalTitle:'设备归还确认',
|
|
content:'确定该设备已归还?',
|
|
listData:[],
|
|
page:1,
|
|
filterForm: {
|
|
projectName:'',
|
|
temporaryName:'',
|
|
userPhone: '',
|
|
userUnit: '',
|
|
userName: '',
|
|
IntervieweeDepartment: '',
|
|
userTime:'',
|
|
backTime: '',
|
|
temporaryTime: '',
|
|
reason: '',
|
|
remarks:'',
|
|
imageUrl:'',
|
|
|
|
},
|
|
options: [{
|
|
value: "1",
|
|
label: "手环箱"
|
|
}, {
|
|
value: "2",
|
|
label: "吊臂检测设备",
|
|
}, {
|
|
value: "3",
|
|
label: "近电感应设备",
|
|
}],
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.loadmore()
|
|
},
|
|
methods: {
|
|
scrolltolower() {
|
|
this.page += 1;
|
|
this.loadmore()
|
|
},
|
|
loadmore() {
|
|
// let obj = {
|
|
// "keyWord":this.searchValue,
|
|
// "userPhone":this.userPhone,
|
|
// "page":this.page,
|
|
// "limit":"10"
|
|
// }
|
|
// let param = {
|
|
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
|
// }
|
|
// console.log(obj)
|
|
// let option = {
|
|
// contentType:'form',
|
|
// header:{
|
|
// Authorization:'',
|
|
// }
|
|
// }
|
|
// this.$http.post(getVisitorPageList,param,false,option).then(res => {
|
|
// if (res) {
|
|
// console.log(res)
|
|
// if(res.code == 200){
|
|
// console.log(res.data)
|
|
// if(res.data?.length>0){
|
|
// if(this.page == 1){
|
|
// this.listData = res.data;
|
|
// }else{
|
|
// this.listData = [...this.listData, ...res.data];
|
|
// }
|
|
// }else{
|
|
// console.log("没有更多了")
|
|
// }
|
|
// }
|
|
// }
|
|
// }).catch(error => {
|
|
// console.log(error)
|
|
// // this.$utils.showHttpError(error)
|
|
// })
|
|
for (let i = 0; i < 10; i++) {
|
|
this.listData.push(
|
|
this.item
|
|
)
|
|
}
|
|
console.log(this.listData)
|
|
},
|
|
//侧边筛选Popup
|
|
open() {
|
|
console.log('open');
|
|
},
|
|
close() {
|
|
this.showPopup = false
|
|
console.log('close');
|
|
},
|
|
|
|
filter(){
|
|
this.showPopup = true;
|
|
console.log("筛选")
|
|
},
|
|
//新增按钮触发
|
|
addDevice(){
|
|
console.log("新增")
|
|
uni.navigateTo({
|
|
url: "/pages/devices/addDevices"
|
|
})
|
|
},
|
|
//确认归还modal
|
|
backDevice(item){
|
|
console.log("归还")
|
|
this.showModal = true;
|
|
},
|
|
cancel() {
|
|
this.showModal = false
|
|
console.log('close');
|
|
},
|
|
confirm() {
|
|
this.showModal = false
|
|
console.log('确认归还');
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-content{
|
|
width: 100%;
|
|
height: 90vh;
|
|
position: absolute;
|
|
top:5vh;
|
|
padding: 40rpx 0;
|
|
|
|
.list-box{
|
|
width: 94%;
|
|
height: auto;
|
|
// border: 1px solid #000;
|
|
margin: 40rpx auto;
|
|
margin-top: 40rpx;
|
|
|
|
.list-item{
|
|
width: 100%;
|
|
height: auto;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
margin: 20rpx 0;
|
|
|
|
.item-header{
|
|
width: 100%;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
font-size: 28rpx;
|
|
border: 1px dashed #E3E9FA;
|
|
}
|
|
|
|
.item-content{
|
|
width: 100%;
|
|
height: auto;
|
|
border: 1px dashed #E3E9FA;
|
|
font-size: 24rpx;
|
|
.content-box{
|
|
width: 94%;
|
|
height: auto;
|
|
margin: 20rpx;
|
|
background-color: #F8F9FC;
|
|
padding: 20rpx 0;
|
|
|
|
.item-text{
|
|
margin-left: 20rpx;
|
|
margin-top: 15rpx;
|
|
.label{
|
|
color: rgba(10,38,64,0.5);
|
|
}
|
|
.info{
|
|
color: #0A2640;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.item-footer{
|
|
width: 100%;
|
|
height: 72rpx;
|
|
position: relative;
|
|
.foot-btn{
|
|
width: 100rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 5%;
|
|
top: 20%;
|
|
background: rgba(0,133,255,0.05);
|
|
border-radius: 32rpx;
|
|
border: 1px solid rgba(0,133,255,0.8);
|
|
color: #0085FF;
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.visitor-form{
|
|
width: auto;
|
|
padding: 80rpx 20rpx;
|
|
}
|
|
.visitor-input-box{
|
|
|
|
}
|
|
.submit-box {
|
|
margin-top: 86rpx;
|
|
margin-bottom: 80rpx;
|
|
.submit-btn {
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
height: 66rpx;
|
|
font-size: 26rpx;
|
|
// background: linear-gradient( 90deg, #5193FE 0%, #00EEF0 100%);
|
|
box-shadow: 0px 4px 2px 0px rgba(81,147,254,0.15);
|
|
border-radius: 32rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
}
|
|
</style>
|