jsy-app/pages/work/land/index.vue
2024-11-25 19:32:59 +08:00

260 lines
7.3 KiB
Vue

<template>
<custom-nav-bar :left="true" title="地块管理">
<template v-slot:right>
<view class="fixed">
<view align="right" class="iconfont icon-jia icon" v-hasPermi="['system:land:add']" @click="onAdd"></view>
</view>
</template>
</custom-nav-bar>
<view class="index-container" :style="{ height: `${windowHeight}px` }" @touchmove.stop.prevent="() => {}">
<z-paging ref="paging" use-virtual-list @query="getListData" bg-color="#F3F3F3" :loading-more-enabled="false">
<template #top>
<!--搜索框-->
<view class="search" style="margin-top: 30px;">
<u-search placeholder="请输入地块名称/编号" @search="onSearchValue" @custom="onSearchValue"
@clear="onSearchValue(null)" shape="square"></u-search>
<uni-forms ref="form" :model="form" labelWidth="0px" style="margin-top: 5px;">
<uni-forms-item label="" name="">
<cxk-dropdown-tree :dataOptions="treeList" labelField="label" valueField="id" :defaultCheckedKeys="defaultCheckedKeys"
@change="handleTreeChange"></cxk-dropdown-tree>
</uni-forms-item>
</uni-forms>
</view>
</template>
<template #cell="{ item }">
<view class="item-container">
<view style="display: flex; align-items: center; justify-content: space-between;">
<view class="flex-text" style="margin: 15px;">
<view class="flex-text-one" style="color: black;">地块编号:</view>
<view>{{item.landNum}}</view>
</view>
<view style="margin-right: 10px;">
<u-tag text="启用" type="success" v-if="item.status == 0" plain plainFill></u-tag>
<u-tag text="禁用" type="error" v-if="item.status == 1" plain plainFill></u-tag>
</view>
<view style="margin-right: 5px;" v-hasPermi="['system:land:edit']">
<u-button text="编辑" type="primary" plain plainFill @click="edit(item)"></u-button>
</view>
</view>
<u-gap height="1" bgColor="#D2D2D2"></u-gap>
<view style="display: flex;justify-content: space-between;align-items: center;" @click="onItemClick(item)">
<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">
<view class="flex-text-one">地块面积:</view>
<view>{{item.landArea}}</view>
</view>
<view class="flex-text global-font-size-1" style="margin-top: 5px;">
<view class="flex-text-one">负责人:</view>
<view v-if="item.user && item.user.userName">{{item.user.userName}}</view>
</view>
<!-- <view class="flex-text global-font-size-1" style="margin-top: 5px;">
<view class="flex-text-one">手机号码:</view>
<view v-if="item.user && item.user.mobilePhone">{{item.user.mobilePhone}}</view>
</view> -->
<view class="flex-text global-font-size-1" style="margin-top: 5px;">
<view class="flex-text-one">所属公司:</view>
<view v-if="item.companyGroup && item.companyGroup.companyFullName">
{{item.companyGroup.companyFullName}}</view>
</view>
</view>
<view>
<view v-hasPermi="['land:land:query']" style="margin-right: 10px;">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
</view>
</view>
</template>
</z-paging>
</view>
</template>
<script>
import {
checkPermi
} from "@/utils/permission"
import store from "@/store"
import plugin from "@/plugins"
export default {
data() {
return {
windowHeight: null,
defaultCheckedKeys:"",
paging: null,
form: null,
treeList: [],
query: {
companyId: null,
landName: null
},
selectCompanyObj: {}
}
},
created() {
this.windowHeight = uni.getSystemInfoSync().windowHeight;
},
onShow() {
if (this.paging != null) {
this.$refs.paging.reload()
}
this.getCompanyTree();
this.getListData();
},
// onNavigationBarButtonTap(e) {
// //如果点击了添加地块
// if (e.index == 0) {
// if (!this.query.companyId) {
// plugin.modal.msgError("请选择要添加地块的公司")
// return;
// }
// if (checkPermi(["system:land:add"])) {
// uni.navigateTo({
// url: "/pages/work/land/create-new?companyObj=" + encodeURIComponent(JSON.stringify(this
// .selectCompanyObj))
// })
// } else {
// plugin.modal.msgError("抱歉暂无权限")
// }
// }
// },
methods: {
/** 查询公司下拉树结构 */
getCompanyTree() {
store
.dispatch("companyTreeSelect", null)
.then(res => {
this.treeList = res.data;
if(this.treeList && this.treeList.length){
let companyList= this.treeList[0].children.filter(x=>x.id!=100);
if(companyList && companyList.length){
this.defaultCheckedKeys = companyList[0].id+"";
}
}
})
.catch(error => {
plugin.modal.msgError(error)
})
.finally(() => {
plugin.modal.closeLoading()
})
},
getListData() {
if (!checkPermi(["system:land:list"])) {
plugin.modal.msgError("抱歉暂无权限")
return
}
if(!this.query.companyId){
return;
}
plugin.modal.loading("获取地块列表...")
if (this.query.landName == null || this.query.landName == "") {
delete this.query["landName"]
}
store
.dispatch("getLandList", this.query)
.then(res => {
this.list = res.data;
this.$refs.paging.complete(this.list)
})
.catch(error => {
plugin.modal.msgError(error)
})
.finally(() => {
plugin.modal.closeLoading()
})
},
onAdd(){
if (!this.query.companyId) {
plugin.modal.msgError("请选择要添加地块的公司")
return;
}
if (checkPermi(["system:land:add"])) {
uni.navigateTo({
url: "/pages/work/land/create-new?companyObj=" + encodeURIComponent(JSON.stringify(this
.selectCompanyObj))
})
} else {
plugin.modal.msgError("抱歉暂无权限")
}
},
onItemClick(item) {
uni.navigateTo({
url: "/pages/work/land/index-detail?item=" + encodeURIComponent(JSON.stringify(item))
})
},
onSearchValue(e) {
this.query.landName = e;
this.getListData();
},
handleTreeChange(values, currentItem) {
this.query.companyId = values;
this.selectCompanyObj = currentItem;
this.getListData();
},
edit(item) {
if (checkPermi(["system:land:edit"])) {
uni.navigateTo({
url: "/pages/work/land/create-new?item=" + encodeURIComponent(JSON.stringify(item))
})
} else {
plugin.modal.msgError("抱歉暂无权限")
}
}
}
}
</script>
<style lang="scss">
::v-deep.uni-navbar__header-container {
align-items: center;
justify-content: center;
&>view {
font-size: 34rpx;
}
}
::v-deep.uni-navbar__header-btns-right .icon {
font-size: 44rpx;
margin-left: 10px;
}
.index-container {
height: 100%;
background-color: #f3f3f3;
.list {
margin: 0px 10px;
}
.search {
background-color: white;
padding: 10px;
}
.item-container {
margin: 10px 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: 10px 20px;
}
}
</style>