<template>
|
<view class="workstation">
|
<view class="search">
|
<u-search placeholder="请输入工作站名称搜索" v-model="keyword" bgColor="#fff"
|
placeholderColor="#999999" :showAction="false"
|
searchIconColor="#6A6A6A" height="74" @search="search" @change="search"></u-search>
|
</view>
|
<scroll-view :scroll-top="20" scroll-y="true" class="scroll-Y">
|
<view v-for="(item,index) in list" :key="'item'+index" class="list-item" @click="choose(item,index)" :class="{active:current==index}">
|
<span>
|
{{ '(' + item.workCenter + ')' + item.name }}
|
</span><u-icon class="icon_choose" size="20rpx" v-if="current==index"/>
|
</view>
|
<u-loading mode="circle" :show="loadingList" class="loading"></u-loading>
|
<p v-if="list.length==0" style="text-align: center;margin-top: 100rpx;color: rgb(96, 98, 102);font-size: 28rpx;">暂无数据</p>
|
</scroll-view>
|
<view class="bottom">
|
<u-button type="primary" :loading="loading" @click="submit" class="btn">确定</u-button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import UIcon from "../../../uview-ui/components/u-icon/u-icon.vue";
|
|
export default {
|
components: {UIcon},
|
data() {
|
return {
|
scrollTop: 200,
|
keyword:'',
|
list:[],
|
current:0,
|
currentChoose: {},
|
loadingList:false,
|
loading:false,
|
}
|
},
|
onLoad() {
|
this.loadList();
|
},
|
methods: {
|
// 在此加载列表
|
loadList(){
|
// this.loadingList = true;
|
this.$u.api.dailyPaper.getWorkstation().then(res => {
|
if (res.code === 0) {
|
this.list = res.data
|
this.currentChoose = this.list[0]
|
} else {
|
this.$u.toast(res.msg)
|
}
|
})
|
},
|
// 搜索
|
search(e){
|
let params =null
|
if(this.isEnglish(e)){
|
params = {
|
workstationNo: e
|
}
|
|
}else{
|
params = {
|
name: e
|
}
|
}
|
|
this.$u.api.dailyPaper.getWorkstation(params).then(res => {
|
if (res.code === 0) {
|
this.list = res.data
|
this.currentChoose = this.list[0]
|
} else {
|
this.$u.toast(res.msg)
|
}
|
})
|
},
|
choose(item,index){
|
this.current = index;
|
this.currentChoose = item
|
},
|
submit(){
|
this.loading = true;
|
uni.$emit('returnData',this.currentChoose)
|
uni.navigateBack({
|
//关闭当前页面，返回上一页面或多级页面。
|
delta:1
|
});
|
this.loading = false;
|
},
|
isEnglish(str) {
|
// 英文字符正则表达式
|
const englishPattern = /^[A-Za-z ]*$/;
|
return englishPattern.test(str);
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.workstation{
|
width: 100%;
|
height: 100vh;
|
background: #E6EFFF;
|
padding: 0 30rpx;
|
display: flex;
|
flex-direction: column;
|
position: fixed;
|
.search{
|
width: 100%;
|
margin: 24rpx 0;
|
}
|
.scroll-Y {
|
width: 100%;
|
height: calc(100vh - 340rpx);
|
overflow-y: auto;
|
box-sizing: border-box;
|
.loading{
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%,-50%);
|
}
|
.list-item{
|
background: #FFFFFF;
|
border-radius: 10rpx;
|
box-sizing: border-box;
|
padding: 22rpx 43rpx;
|
margin-bottom: 20rpx;
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #333333;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
&.active{
|
background: #F4F9FF;
|
border: 1px solid #ACBDF8;
|
color: #214DED;
|
}
|
}
|
.icon_choose {
|
background-image: url('~@/static/custom/daily/icon_choose.png');
|
background-repeat: no-repeat;
|
background-size: cover;
|
height: 20rpx;
|
width: 20rpx;
|
position: relative;
|
}
|
}
|
.bottom {
|
box-sizing: border-box;
|
margin-top: 40rpx;
|
//height: 100rpx;
|
.btn {
|
height: 80rpx;
|
background: #214DED;
|
border-radius: 8rpx;
|
font-weight: 500;
|
font-size: 34rpx;
|
color: #FFFFFF;
|
z-index: 99;
|
}
|
}
|
}
|
</style>
|
