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.
357 lines
8.7 KiB
357 lines
8.7 KiB
<template>
|
|
<view class="v-page">
|
|
<view class="m-top-bar">
|
|
<uni-search-bar cancelButton="always" v-model="queryParams.agriculturalName" bgColor="#EEEEEE" placeholder="请输入农资名称" @confirm="search" @cancel="cacel" />
|
|
</view>
|
|
<view class="data-box" v-if="dataList.length > 0">
|
|
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
|
<view v-for="(item, index) in dataList" :key="index" :class="{ 'm-item-checked': item.checked }" class="item" @click="detailIt(item, index)">
|
|
<view class="m-item-top">
|
|
{{ item.agriculturalName || '-' }}
|
|
<span><dict-tag :type="'agricultural_type'" :value="item.agriculturalType" class="m-dic-tag" /></span>
|
|
</view>
|
|
<view class="m-item-com">
|
|
{{ item.manufacturer || '-' }}
|
|
</view>
|
|
<uni-transition :mode-class="['fade', 'slide-left']" :show="item.checked">
|
|
<view class="use-box">
|
|
<view class="use-num">用量：</view>
|
|
<view class="m-agr-use-box">
|
|
<input class="m-agr-use-input" type="digit" v-model="item.agriculturalUsed" placeholder="请输入使用量" @blur="handlerInput($event, index)" @click.stop="getUsed" />
|
|
<span class="m-agr-use-unit">{{ item.agriculturalUnit }}</span>
|
|
</view>
|
|
</view>
|
|
</uni-transition>
|
|
</view>
|
|
</view>
|
|
<view class="no-data" v-else>
|
|
<image src="@/static/images/default-data.svg" mode=""></image>
|
|
暂无数据
|
|
</view>
|
|
<button class="m-next-step" @click="nextStep">保存</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mix from '@/utils/mix.js';
|
|
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
|
|
import { getNzList } from '@/api/system/addNoteJob/addNoteJob';
|
|
import DictTag from '@/components/DictTag/index.vue';
|
|
|
|
export default {
|
|
components: {
|
|
DictTag
|
|
},
|
|
mixins: [mix],
|
|
data() {
|
|
return {
|
|
dataList: [],
|
|
allData: [],
|
|
|
|
reviceData: null,
|
|
// 查询参数
|
|
queryParams: {
|
|
agriculturalName: null
|
|
}
|
|
};
|
|
},
|
|
computed: {},
|
|
onLoad(options) {
|
|
if (options.params) {
|
|
this.reviceData = JSON.parse(decodeURIComponent(options.params));
|
|
if (!this.reviceData.selectItems) {
|
|
this.reviceData.selectItems = [];
|
|
}
|
|
this.getNzList(this.reviceData.husbandryId);
|
|
}
|
|
console.log(this.reviceData);
|
|
// setTimeout(()=>{
|
|
// this.$refs.paging.reload()
|
|
// },1000)
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
search(res) {
|
|
console.log(res);
|
|
this.dataList = this.searchByProductName(res.value);
|
|
console.log(this.dataList);
|
|
},
|
|
cacel() {
|
|
this.dataList = this.allData;
|
|
},
|
|
getNzList(id) {
|
|
getNzList(id)
|
|
.then((res) => {
|
|
res.data.forEach((item) => {
|
|
item.checked = false;
|
|
item.agriculturalUsed = 0;
|
|
});
|
|
this.dataList = res.data;
|
|
this.allData = res.data;
|
|
console.log(this.dataList, this.allData);
|
|
this.$nextTick(() => {
|
|
if (this.reviceData.selectItems.length > 0) {
|
|
this.handler(this.reviceData.selectItems, res.data);
|
|
}
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
searchByProductName(val) {
|
|
return this.allData.filter((item) => item.agriculturalName.includes(val));
|
|
},
|
|
queryList(pageNo, pageSize) {
|
|
let this_ = this;
|
|
//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
|
//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
|
//模拟请求服务器获取分页数据，请替换成自己的网络请求
|
|
this_.$nextTick(() => {
|
|
const params = {
|
|
pageNo: pageNo,
|
|
pageSize: pageSize,
|
|
agriculturalName: this_.queryParams.agriculturalName
|
|
};
|
|
getAgriculturalPage(params)
|
|
.then((res) => {
|
|
//将请求的结果数组传递给z-paging
|
|
res.data.list.forEach((item) => {
|
|
item.checked = false;
|
|
item.agriculturalUsed = 0;
|
|
});
|
|
this.$nextTick(() => {
|
|
this.$refs.paging.complete(res.data.list);
|
|
if (this.reviceData.selectItems.length > 0) {
|
|
this.handler(this.reviceData.selectItems, res.data.list);
|
|
}
|
|
});
|
|
})
|
|
.catch((res) => {
|
|
//如果请求失败写this.$refs.paging.complete(false);
|
|
//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
|
//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
|
this.$refs.paging.complete(false);
|
|
});
|
|
});
|
|
},
|
|
detailIt(val, index) {
|
|
console.log(this.reviceData);
|
|
val.checked = !val.checked;
|
|
const ind = this.reviceData.selectItems.findIndex((selected) => selected.id === val.id);
|
|
if (ind !== -1) {
|
|
// 如果已经选中，则移除
|
|
this.reviceData.selectItems.splice(ind, 1);
|
|
} else {
|
|
// 如果未选中，则添加到selectedItems数组
|
|
this.reviceData.selectItems.push(val);
|
|
}
|
|
},
|
|
getUsed(val, index) {
|
|
// console.log(val,this.reviceData)
|
|
},
|
|
handlerInput(event, index) {
|
|
this.$nextTick(() => {
|
|
const num = parseFloat(event.target.value).toFixed(2);
|
|
this.$forceUpdate();
|
|
this.dataList[index].agriculturalUsed = num;
|
|
});
|
|
},
|
|
nextStep() {
|
|
if (this.reviceData.selectItems.length === 0) {
|
|
uni.showToast({
|
|
title: '请选择农资',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
let canUpdata = true;
|
|
for (let item of this.reviceData.selectItems) {
|
|
console.log(parseFloat(item.agriculturalUsed).toFixed(2));
|
|
if (!/^(?=.*[1-9])\d*(?:\.\d+)?$/.test(parseFloat(item.agriculturalUsed).toFixed(2))) {
|
|
canUpdata = false;
|
|
break; // 当条件为 false 时，立即停止循环
|
|
}
|
|
}
|
|
if (!canUpdata) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '农资用量输入有误，请检查！'
|
|
});
|
|
return;
|
|
}
|
|
let arr = [];
|
|
this.reviceData.selectItems.forEach((item) => {
|
|
arr.push(item.agriculturalName);
|
|
});
|
|
this.reviceData.agriculturalName = arr.join(',');
|
|
this.reviceData.agriculturalJson = JSON.stringify(this.reviceData.selectItems);
|
|
this.$store.commit('updateFormData', this.reviceData);
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
// const data = encodeURIComponent(JSON.stringify(this.reviceData));
|
|
// uni.redirectTo({
|
|
// url: '/sunPages/addNoteJobForm/addNoteJobForm?params=' + data
|
|
// });
|
|
},
|
|
handler(selectArr, dataList) {
|
|
dataList.forEach((item) => {
|
|
selectArr.forEach((selected) => {
|
|
if (item.id === selected.id) {
|
|
item.checked = true;
|
|
item.agriculturalUsed = selected.agriculturalUsed;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/ .m-block-pick {
|
|
.uni-section {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: unset;
|
|
}
|
|
|
|
.uni-select {
|
|
border: none;
|
|
}
|
|
}
|
|
.v-page {
|
|
background-color: #fff;
|
|
min-height: 100vh;
|
|
height: fit-content;
|
|
padding-bottom: 160rpx;
|
|
}
|
|
.item {
|
|
width: 95%;
|
|
height: fit-content;
|
|
margin: 30rpx auto;
|
|
padding: 20rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 0 9px 1px #d4d4d4;
|
|
overflow: hidden;
|
|
border: 1px solid #fff;
|
|
|
|
.m-item-top {
|
|
padding-bottom: 10rpx;
|
|
display: flex;
|
|
color: #333;
|
|
align-items: center;
|
|
|
|
.m-variety-img {
|
|
margin-right: 20rpx;
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
overflow: hidden;
|
|
border-radius: 10rpx;
|
|
}
|
|
.item-detail {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.m-item-detal-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10rpx;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.m-item-com {
|
|
padding-bottom: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.m-item-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 20rpx 0 0;
|
|
float: right;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.m-dic-tag {
|
|
font-size: 24rpx;
|
|
color: #14c171;
|
|
background-color: rgba(20, 193, 113, 0.1);
|
|
border: 2rpx solid rgba(20, 193, 113, 0.1);
|
|
margin-left: 15rpx;
|
|
}
|
|
|
|
.m-add-block {
|
|
position: fixed;
|
|
background-color: aliceblue;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
bottom: 50rpx;
|
|
right: 50rpx;
|
|
box-shadow: 0 0 5px 1px #929292;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.m-item-checked {
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
border: 1px solid #14c171;
|
|
}
|
|
.use-box {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #666;
|
|
border-top: solid #d2d2d2 1rpx;
|
|
padding-top: 20rpx;
|
|
}
|
|
.m-agr-use-box {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.m-agr-use-input {
|
|
width: 85%;
|
|
background-color: #eee;
|
|
margin-right: 15rpx;
|
|
padding: 0 20rpx;
|
|
height: 55rpx;
|
|
}
|
|
.m-agr-use-unit {
|
|
flex: 1;
|
|
}
|
|
}
|
|
.m-next-step {
|
|
margin-top: 20rpx;
|
|
width: 650rpx;
|
|
height: 80rpx;
|
|
background-color: #14c171;
|
|
border: 2rpx solid #14c171;
|
|
border-radius: 50rpx;
|
|
color: #fff;
|
|
line-height: 80rpx;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 55rpx;
|
|
z-index: 97;
|
|
}
|
|
.no-data{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #666;
|
|
}
|
|
</style>
|
|
|