You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
324 lines
7.7 KiB
324 lines
7.7 KiB
<template>
|
|
<view class="v-pages-l">
|
|
<view class="m-top-bar">
|
|
<uni-search-bar cancelButton="always" v-model="queryParams.blockName" bgColor="#EEEEEE" placeholder="请输入地块名称" @confirm="search" @cancel="cacel" />
|
|
<uni-section class="m-block-pick" title="地块类型">
|
|
<uni-data-select v-model="queryParams.blockType" :localdata="range" @change="change"></uni-data-select>
|
|
</uni-section>
|
|
</view>
|
|
<z-paging ref="paging" v-model="dataList" :pagingStyle="padingStyle" @query="queryList">
|
|
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
|
<view v-for="(item, index) in dataList" :key="index" class="item" @click="detailBlock(item, index)">
|
|
<view class="m-item-top">
|
|
<view class="item-detail">
|
|
<span>{{ item.blockName }}</span>
|
|
<view class="item-title">{{ item.blockArea }}亩</view>
|
|
</view>
|
|
<view class="m-item-detal-box">
|
|
<view class="item-title" v-if="item.productName">{{ item.productName == null || item.productName == undefined ? '-' : item.productName }}</view>
|
|
<dict-tag :type="'land_type'" :value="item.blockType" class="m-dic-tag" />
|
|
</view>
|
|
</view>
|
|
<view class="m-item-bottom">
|
|
<view class="v-secondary-btn" @click.stop="editBlock(item, index)">
|
|
<text class="iconfont icon-edit"></text>
|
|
编辑
|
|
</view>
|
|
<view class="v-secondary-btn del" @click.stop="deleteBlock(item, index)">
|
|
<text class="iconfont icon-delete"></text>
|
|
删除
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
<view class="m-add-block" @click.stop="addBlock">
|
|
圈地
|
|
<br />
|
|
+
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniSection from '@/components/uni-section/uni-section';
|
|
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
|
|
import { getBlockPage, deleteBlock } from '@/api/system/block/block';
|
|
import DictTag from '@/components/DictTag/index.vue';
|
|
|
|
export default {
|
|
components: {
|
|
DictTag,
|
|
uniSection
|
|
},
|
|
data() {
|
|
return {
|
|
range: [],
|
|
dataList: [],
|
|
padingStyle: {
|
|
top: '190rpx'
|
|
},
|
|
// 查询参数
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
baseId: this.$store.state.user.baseId,
|
|
blockName: null,
|
|
blockType: null
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
"$store.state.user.baseId"(newValue, oldVal) {
|
|
this.baseId=newValue
|
|
this.$refs.paging.reload();
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.dataList = [];
|
|
// setTimeout(()=>{
|
|
// this.$refs.paging.reload()
|
|
// },1000)
|
|
},
|
|
onShow() {
|
|
let arr = this.getDictDatas(DICT_TYPE.LAND_TYPE);
|
|
arr.forEach((item) => {
|
|
item.text = item.label;
|
|
});
|
|
this.range = arr;
|
|
},
|
|
methods: {
|
|
search(res) {
|
|
this.$refs.paging.reload();
|
|
},
|
|
cacel() {
|
|
this.queryParams.blockName = null;
|
|
this.$refs.paging.reload();
|
|
},
|
|
change(e) {
|
|
this.$refs.paging.reload();
|
|
},
|
|
queryList(pageNo, pageSize) {
|
|
let this_ = this;
|
|
//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
|
//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
|
//模拟请求服务器获取分页数据，请替换成自己的网络请求
|
|
this_.$nextTick(() => {
|
|
// this_.queryParams.pageNo = pageNo;
|
|
// this_.queryParams.pageSize = pageSize;
|
|
// this_.queryParams.baseId = this.$store.state.user.baseId;
|
|
// const params = this_.queryParams;
|
|
const params = {
|
|
pageNo: pageNo,
|
|
pageSize: pageSize,
|
|
baseId: this.$store.state.user.baseId,
|
|
blockName: this_.queryParams.blockName,
|
|
blockType: this_.queryParams.blockType
|
|
};
|
|
console.log(params, '90909');
|
|
getBlockPage(params)
|
|
.then((res) => {
|
|
//将请求的结果数组传递给z-paging
|
|
this.$nextTick(() => {
|
|
this.$refs.paging.complete(res.data.list);
|
|
});
|
|
})
|
|
.catch((res) => {
|
|
//如果请求失败写this.$refs.paging.complete(false);
|
|
//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
|
//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
|
this.$refs.paging.complete(false);
|
|
});
|
|
});
|
|
},
|
|
addBlock() {
|
|
uni.navigateTo({
|
|
url: '/sunPages/addBlock/addBlock'
|
|
});
|
|
},
|
|
editBlock(item) {
|
|
const data = JSON.stringify(item);
|
|
uni.navigateTo({
|
|
url: '/sunPages/editBlock/editBlock?data=' + data
|
|
});
|
|
},
|
|
detailBlock(item) {
|
|
const obj = JSON.stringify(item);
|
|
uni.navigateTo({
|
|
url: '/sunPages/blockDetail/blockDetail?val=' + obj
|
|
});
|
|
},
|
|
deleteBlock(val) {
|
|
let this_ = this;
|
|
if (val.id) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
// content: '确定删除' + val.blockName + '这个地块吗',
|
|
content: '确定删除此地块吗？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
deleteBlock(val.id)
|
|
.then((res) => {
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'success',
|
|
success() {
|
|
this_.queryList();
|
|
}
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '该条数据有问题，请检查数据。'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/ .m-block-pick {
|
|
.uni-section {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: unset;
|
|
}
|
|
|
|
.uni-select {
|
|
border: none;
|
|
}
|
|
}
|
|
.m-top-bar {
|
|
background: #fff;
|
|
}
|
|
.item {
|
|
width: 95%;
|
|
height: fit-content;
|
|
margin: 20rpx auto;
|
|
padding: 20rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 0 2px 0px #d2d2d2;
|
|
overflow: hidden;
|
|
|
|
.m-item-top {
|
|
border-bottom: solid 0.5rpx #e8e8e8;
|
|
padding-bottom: 20rpx;
|
|
|
|
.item-detail {
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #1b1b1b;
|
|
line-height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
padding-left: 20rpx;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 8rpx;
|
|
height: 32rpx;
|
|
-webkit-transform: translate(0, -50%);
|
|
transform: translate(0, -50%);
|
|
border-radius: 8rpx;
|
|
background-color: #14c171;
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
|
|
.item-title {
|
|
margin-right: 20rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #14c171;
|
|
padding: 0rpx 15rpx;
|
|
background-color: #14c1711a;
|
|
border-radius: 22rpx;
|
|
line-height: 48rpx;
|
|
}
|
|
}
|
|
|
|
.m-item-detal-box {
|
|
display: flex;
|
|
margin-top: 20rpx;
|
|
|
|
.item-title {
|
|
color: #ffa800;
|
|
background-color: rgba(255, 168, 0, 0.1);
|
|
border: 2rpx solid rgba(255, 168, 0, 0.1);
|
|
padding: 2rpx 20rpx;
|
|
font-size: 24rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.m-dic-tag {
|
|
margin-left: 16rpx;
|
|
color: #14c171;
|
|
background-color: rgba(20, 193, 113, 0.1);
|
|
border: 2rpx solid rgba(20, 193, 113, 0.1);
|
|
padding: 2rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
/deep/ .m-dic-tag .v-dict-text {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.m-item-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin: 20rpx 0 0;
|
|
float: right;
|
|
width: 55%;
|
|
|
|
.v-secondary-btn {
|
|
margin-right: 20rpx;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
.del {
|
|
color: #c11414;
|
|
border: 2rpx solid #c11414;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/ .m-dic-tag .v-dict-text {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.m-add-block {
|
|
position: fixed;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
bottom: 50rpx;
|
|
right: 50rpx;
|
|
background: #EBFFF5;
|
|
box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(20,193,113,0.15);
|
|
border: 1px solid #FFFFFF;
|
|
padding-top: 20rpx;
|
|
}
|
|
</style>
|
|
|