jsy-app/pages/work/user/selectOtherDevice.vue

174 lines
3.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- 顶部导航栏 -->
<custom-nav-bar :left="true" leftText="" @leftClick="" title="其它设备选择">
</custom-nav-bar>
<view class="index-container">
<z-paging ref="paging" use-virtual-list @query="queryList" bg-color="#F6F3F3" :loading-more-enabled="false">
<template #top>
<view class="search">
<u-search placeholder="请输入设备编号" @search="onSearchValue" @custom='onSearchValue'
@clear="onSearchClear" shape="square"></u-search>
</view>
</template>
<!--其它设备类别列表-->
<template #cell="{item}">
<view class="item-container">
<view class="check-item">
<u-checkbox-group placement="row">
<u-checkbox activeColor="#35842E" @change="onSelect($event,item)"></u-checkbox>
</u-checkbox-group>
</view>
<view>
<view class="text">设备编号{{item.deviceCode}}</view>
<view class="text">设备类型{{item.deviceTypeName}}</view>
</view>
</view>
</template>
<template #bottom>
<!--按钮-->
<view class="buttons">
<u-button type="success" text="确认" @click="submit"></u-button>
<u-button text="取消" @click="cancel"></u-button>
</view>
</template>
</z-paging>
</view>
</template>
<script>
import plugin from "@/plugins";
import {
getUseDevicePermission,
getUnUseDeviceList,
addBatch,
delDeviceUserPermission
} from "@/api/system/deviceUserPermission";
export default {
data() {
return {
dataList: [],
query: {
landId: null,
deviceCode: null,
userId: null
},
selectList: []
};
},
onLoad(options) {
this.query.landId = options.landId;
this.query.userId = options.userId;
this.queryList();
},
methods: {
queryList() {
if (!this.query.landId) {
return;
}
this.dataList = [];
getUnUseDeviceList(this.query).then(res => {
this.dataList = res.data;
this.$refs.paging.complete(this.dataList);
});
},
onSearchValue(e) {
this.query.deviceCode = e;
this.queryList();
},
onSearchClear() {
this.query.deviceCode = null;
this.queryList();
},
onSelect(e, item) {
let index = this.selectList.findIndex(x => x.deviceId == item.deviceId);
if (e) {
if (index == -1) {
this.selectList.push(item)
}
} else {
if (index != -1) {
this.selectList.splice(index, 1);
}
}
},
submit() {
let addObj = {
userId: this.query.userId,
deviceUserPermissionVos: this.selectList
}
addBatch(addObj).then(res => {
plugin.tab.navigateBack();
});
},
cancel() {
plugin.tab.navigateBack();
}
}
};
</script>
<style lang="scss">
.index-container {
background-color: #F6F3F3;
height: 100%;
.flex {
display: flex;
align-items: center;
margin-top: 5px;
.icon {
margin: 10px 10px;
}
}
.search {
background-color: white;
padding: 10px;
}
.list-item {
margin: 10px 10px;
padding: 10px;
}
.buttons {
display: flex;
justify-content: space-between;
background: white;
button {
margin: 20px;
}
}
.item-container {
background: white;
height: 100%;
border-radius: 1px;
box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.05);
display: flex;
margin-top: 1px;
.check-item {
margin: 0px 10px;
}
.icon {
margin-right: 5px;
}
.text {
margin-bottom: 5px;
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
</style>