165 lines
4.5 KiB
Vue
165 lines
4.5 KiB
Vue
<template>
|
||
<view class="index-container">
|
||
<z-paging class="paging" ref="paging" use-virtual-list @query="queryList" bg-color="#F6F3F3" :loading-more-enabled="false">
|
||
<template #top>
|
||
<view class="title">
|
||
<u--image style="margin-right: 10px" :src="user.avatarURL ? user.avatarURL : avatar" shape="circle" width="50px" height="50px"></u--image>
|
||
<text>{{ user.name }}</text>
|
||
<text>{{ user.roleName }}</text>
|
||
<text>{{ `地块数量：${listSize}块` }}</text>
|
||
</view>
|
||
<u-gap height="5" bgColor="#F6F3F3"></u-gap>
|
||
<view class="search">
|
||
<u-search placeholder="请输入地块名称" @search="onSearchValue" @custom="onSearchValue" @clear="onSearchValue(null)" shape="square"></u-search>
|
||
</view>
|
||
<u-gap height="5" bgColor="#F6F3F3"></u-gap>
|
||
</template>
|
||
<template #cell="{ item }">
|
||
<view class="item-container">
|
||
<view style="display: flex; align-items: center; justify-content: flex-start; margin-bottom: 5px">
|
||
<view class="flex-text">
|
||
<view class="flex-text-one" style="color: black">地块编号：</view>
|
||
<view>{{ item.landNum }}</view>
|
||
</view>
|
||
<view style="margin-right: 10px">
|
||
<u-tag text="启用" type="success" plain v-if="item.status == 0"></u-tag>
|
||
<u-tag text="禁用" type="error" plain v-if="item.status == 1"></u-tag>
|
||
</view>
|
||
</view>
|
||
<u-line color="#D2D2D2"></u-line>
|
||
<view class="data">
|
||
<view class="flex-text global-font-size-1">
|
||
<view class="flex-text-one">地块名称：</view>
|
||
<view>{{ item.landName }}</view>
|
||
</view>
|
||
<view class="flex-text global-font-size-1" style="margin-top: 5px">
|
||
<view class="flex-text-one">地块地址：</view>
|
||
<view>{{ item.landAddress || "-" }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="button" v-hasPermi="['device:control:list']">
|
||
<view style="flex-grow: 1"></view>
|
||
<u-button style="width: 80px; height: 30px; margin-right: 0px" type="success" text="禁控设备" size="mini" @click="onClickPermission(item.landId, item.userId)"></u-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</z-paging>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue"
|
||
import { onShow, onLoad, onReady } from "@dcloudio/uni-app"
|
||
import store from "@/store"
|
||
import plugin from "@/plugins"
|
||
import storage from "@/utils/storage"
|
||
import avatar from "../../../static/images/mine/userAvatar.png"
|
||
|
||
const userId = ref(0)
|
||
const listSize = ref(0)
|
||
const user = ref({
|
||
name: "",
|
||
avatarURL: "",
|
||
roleName: ""
|
||
})
|
||
const paging = ref(null)
|
||
const query = ref({ userId: null, landName: null })
|
||
|
||
onLoad(params => {
|
||
userId.value = params.id
|
||
query.value.userId = params.id
|
||
user.value.name = params.name
|
||
user.value.avatarURL = params.avatar
|
||
user.value.roleName = params.roleName
|
||
})
|
||
|
||
onShow(() => {
|
||
if (paging.value != null) {
|
||
paging.value.reload()
|
||
}
|
||
})
|
||
|
||
function queryList() {
|
||
if (query.value.landName == null || query.value.landName == "") {
|
||
delete query.value["landName"]
|
||
}
|
||
//获取该用户地块列表
|
||
store
|
||
.dispatch("onGetUserManagerLandList", query.value)
|
||
.then(res => {
|
||
//将请求的结果数组传递给z-paging
|
||
paging.value.complete(res.data)
|
||
if (query.value.landName == null || query.value.landName == "") {
|
||
listSize.value = res.data.length
|
||
}
|
||
})
|
||
.catch(error => {
|
||
paging.value.complete(false)
|
||
plugin.modal.msgError(error)
|
||
})
|
||
.finally(() => {
|
||
plugin.modal.closeLoading()
|
||
})
|
||
}
|
||
//查找地块
|
||
function onSearchValue(keyword) {
|
||
query.value.landName = keyword
|
||
paging.value.reload()
|
||
}
|
||
|
||
//跳转到权限页面
|
||
function onClickPermission(param) {
|
||
plugin.tab.navigateTo(`/pages/work/user/device?landId=${param.landID}&userId=${param.userID}`)
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus">
|
||
.index-container{
|
||
background-color: #F6F3F3;
|
||
height: 100%;
|
||
.paging{
|
||
background-color: #F6F3F3;
|
||
.item{
|
||
margin: 10px 10px;
|
||
}
|
||
}
|
||
.search{
|
||
background-color: white;
|
||
padding: 10px;
|
||
}
|
||
.title{
|
||
height: 50px;
|
||
display: flex;
|
||
padding: 15px 15px;
|
||
background: white;
|
||
align-items: center
|
||
text{
|
||
font-size: 14px
|
||
margin-right: 10px
|
||
}
|
||
}
|
||
.item-container {
|
||
padding: 20px;
|
||
margin-top: 10px;
|
||
background-color: white;
|
||
padding-bottom: 10px;
|
||
border-radius: 10px;
|
||
box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.05);
|
||
}
|
||
.flex-text {
|
||
display: flex;
|
||
align-items: center;
|
||
.flex-text-one {
|
||
color: #939393;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.data {
|
||
margin-top: 10px;
|
||
margin-top: 10px;
|
||
margin-left: 5px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
</style>
|