TraceabilityAPP/pages/growRecord/index.vue

605 lines
13 KiB
Vue

<template>
<view :class="{popupShow:showPop}">
<view class="cont">
<!-- <view class="card">
<view class="tit">
<view class="">
1号土地
</view>
<view class="">
溯源码: 12302
</view>
</view>
<view class="card-li">
<view class="">
当前种植: 土豆
</view>
<view class="">
种植品牌: 的划分等级
</view>
</view>
<view class="card-li">
<view class="">
土地面积: 20
</view>
<view class="">
种子品牌: 的划分等级
</view>
</view>
<view class="card-li">
<view class="">
播种时间: 2020.12.01
</view>
</view>
</view> -->
<landInfo :land_id='land_id'></landInfo>
<view class="operate" v-for="(item,index) in actionData" :key="index">
<view class="tit">
{{index}}
</view>
<view class="card">
<view class="operate-li" style="margin: 20rpx 0;margin-right: 20rpx;" @click="showPopFn(items.id)"
v-for="items,indexs in item.actions" :key='indexs'>
{{items.name}}
</view>
<!-- <view class="operate-li" @tap="navgo('')">
喂食
</view>
<view class="operate-li" @tap="navgo('/pages/feedIng/vaccineInfo')">
注射疫苗
</view>
<view class="operate-li">
胶水dassdd
</view>
<view class="operate-li">
胶水
</view>
<view class="operate-li">
胶水
</view> -->
</view>
<view class="">
</view>
</view>
<view class="fertilize" v-for="(item,index) in actionList" :key="index">
<view class="card" style="padding-bottom: 0;">
<view class="fertilize-tit">
<view class="">
{{item.action_name}}
</view>
<view class="fertilize-tit-r">
<view class="" style="color: red;" @tap="del(item.id)">
删除
</view>
<view style="margin-left: 40rpx;color: #00A15E;" @tap='editFn(item)'>
编辑
</view>
</view>
</view>
<view class="fertilize-li">
<view class="fertilize-li-a" v-for="(items,indexs) in item.action_content" :key="indexs">
<view class="" v-if="indexs=='pic'">
{{items.tit}}: <text style="color: #3274F9;"
@click="previewImage(items.value)">图片</text>
</view>
<view class="" v-else>
<view class="" v-if="items.value">
{{items.tit}}: {{items.value}}
</view>
</view>
</view>
</view>
<!-- <view class="fertilize-li">
<view class="">
兑水浓度: 地生上的飞机
</view>
<view class="">
备注: 地生上的
</view>
</view> -->
</view>
</view>
</view>
<view class="ripe-btn" @click="navgo(`/pages/detail/plant?land_id=${land_id}`)">
完成今日操作
</view>
<!-- 组件 -->
<view class="">
<u-popup :show="showPop" :round="10" :closeable='true' @close="showPop=false" @open="showPop=true">
<scroll-view scroll-y style="max-height: 90vh;">
<!-- 滚动内容 -->
<view class="pop-content" v-for="item,index in popList" :key='index'>
<!-- 文本框 -->
<view class="" v-if="item.type==1">
<view class="">
{{item.title}}
</view>
<view class="pop-li">
<up-input placeholder="请输入" border="surround" v-model="formData.text.value"
@change="change1(item.title)"></up-input>
</view>
</view>
<!-- 下拉框 -->
<view class="" v-if="item.type==4">
<view class="">
{{item.title}}
</view>
<view class="pop-li">
<up-input placeholder="点击选择" @change="change2(item.title)" border="surround"
v-model="formData.select.value" @tap="showPicker=true"></up-input>
</view>
</view>
<!-- 上传图片 -->
<view class="" v-if="item.type==2">
<view class="">
{{item.title}}
</view>
<view class="pop-li" @click="updateImgFn(item.title)">
<view v-if="formData.pic.value">
<u--image :src="formData.pic.value" width="100%" height="196.26rpx"></u--image>
</view>
<view class="code-img" v-else>
<view class="carime-icon">
<u--image src="/static/img/DJSC.png" width="91.12rpx"
height="91.12rpx"></u--image>
<view class="">
点击上传图片
</view>
</view>
</view>
</view>
</view>
<!-- 搜索框 -->
<view class="" v-if="item.type==3">
<view class="">
{{item.title}}
</view>
<view class="pop-li">
<up-input placeholder="请输入品种" border="surround" v-model="formData.serch.value"
@change="change4(item.title)"></up-input>
</view>
<view style="margin-bottom: 20rpx;" v-for="item in [1]" :key="item">
<u-swipe-action>
<u-swipe-action-item :options="options1"
style="border-radius: 20rpx;border: 1px solid #C7C6CD;">
<view class="" style="padding: 20rpx 30rpx;">
<view class="swipe-action-tit">
<view class="">
编号: 123456
</view>
<view class="" style="color: #00A15E;" v-if="true">
健康
</view>
<view class="" style="color: #FFD736;" v-if="0">
怀孕中
</view>
<view class="" style="color: #3274F9;" v-if="0">
可出栏
</view>
</view>
<view class="swipe-action-li">
<view class="">
养殖品种:黑山猪
</view>
<view class="">
年龄: 5
</view>
<view class="">
体重: 150kg
</view>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</view>
</view>
</view>
<view class="pop-confirm" @tap="confirm">
确认
</view>
</scroll-view>
</u-popup>
</view>
<!-- 组件 -->
<u-picker :show="showPicker" :columns="columns" @confirm="confirmFn" @close="showPicker=false"
@cancel="showModal=false"></u-picker>
<u-modal :show="showModal" :showCancelButton='true' :closeOnClickOverlay="true" @close="showModal=false"
content='确认删除吗?' @confirm="delFn" @cancel="showModal=false"></u-modal>
</view>
</template>
<script setup>
import {
ref,
reactive
} from "vue"
import landInfo from "@/components/plant/landInfo.vue"
import {
actionsListAPI,
actionsDetailAPI,
addLandCropRecordAPI,
landCropRecordListAPI,
delLandCropRecordAPI,
ediLandCropRecordAPI
} from "@/api/plant.js"
import {
onLoad
} from "@dcloudio/uni-app"
import {
addFishRecordAPI
} from "@/api/aquatic.js"
import uplodeImg from "@/utils/uplodeImg.js"
const actionList = reactive([])
const options1 = reactive([{
text: '删除'
}])
const showPicker = ref(false)
const columns = reactive([
['中国', '美国', '日本']
], )
const confirmFn = (e) => {
showPicker.value = false
formData.select.value = e.value[0]
}
const land_id = ref(0)
const pond_id = ref(0)
const crop_id = ref(0)
const type = ref(0)
const actionData = reactive({})
const delIndex = ref(0)
onLoad((options) => {
land_id.value = options.land_id
pond_id.value = options.pond_id
crop_id.value = options.crop_id
// landCropRecordListAPI({
// crop_id: crop_id.value
// }).then(res => {
// res.data.forEach(item => {
// actionList.push(item)
// })
// })
getAcyionListFn()
actionsListAPI({
type: options.type
}).then(res => {
for (let key in res.data) {
actionData[key] = res.data[key]
}
})
})
const getAcyionListFn = () => {
actionList.splice(0, actionList.length)
landCropRecordListAPI({
crop_id: crop_id.value
}).then(res => {
res.data.forEach(item => {
actionList.push(item)
})
})
}
const showPop = ref(false)
const baseData = reactive({
text: {
value: "",
tit: ""
},
select: {
value: "",
tit: ""
},
pic: {
value: "",
tit: ""
},
serch: {
value: "",
tit: ""
},
})
const formData = reactive({
text: {
value: "",
tit: ""
},
select: {
value: "",
tit: ""
},
pic: {
value: "",
tit: ""
},
serch: {
value: "",
tit: ""
},
})
// 操作类型,true为添加,false为编辑
const actionType = ref(false)
const confirm = () => {
showPop.value = false
// console.log(formData)
if (actionType.value) {
addLandCropRecordAPI({
crop_id: Number(crop_id.value),
action_id: action_id.value,
action_content: JSON.stringify(formData)
}).then(res => {
getAcyionListFn()
})
} else {
ediLandCropRecordAPI({
record_id: delIndex.value,
action_content: JSON.stringify(formData)
})
}
objFn(baseData, formData)
}
const navgo = (url) => {
uni.navigateTo({
url
})
}
const del = (index) => {
showModal.value = true
delIndex.value = index
}
const showModal = ref(false)
const delFn = () => {
showModal.value = false
delLandCropRecordAPI({
record_id: delIndex.value
}).then(res => {
getAcyionListFn()
})
}
const editFn = (item) => {
delIndex.value = item.id
showPopFn(item.action_id)
objFn(item.action_content, formData)
actionType.value = false
}
const popList = reactive([])
const action_id = ref("")
const showPopFn = (id) => {
actionType.value = true
objFn(baseData, formData)
action_id.value = id
popList.splice(0, popList.length)
showPop.value = true
columns[0].splice(0, columns[0].length)
actionsDetailAPI({
action_id: id
}).then(res => {
res.data.forEach(item => {
popList.push(item)
if (item.type == 4) {
columns[0] = item.options.split(',')
// console.log()
}
})
})
}
const updateImgFn = (tit) => {
// const title = tit
change3(tit)
uplodeImg().then(res => {
formData.pic.value = res.data.image
})
}
const previewImage = (src) => {
uni.previewImage({
urls: [src],
})
}
const change1 = (tit) => {
formData.text.tit = tit
}
const change2 = (tit) => {
formData.select.tit = tit
}
const change3 = (tit) => {
formData.pic.tit = tit
}
const change4 = (tit) => {
formData.serch.tit = tit
}
const objFn = (res, data, clear) => {
// if (clear) {
// for (let key in data) {
// data[key] = ''
// }
// } else {
// for (let key in res) {
// data[key] = res[key]
// }
// }
for (let key in res) {
data[key] = res[key]
}
}
const arrFn = (res, data) => {
res.forEach((item, index) => {
data[index] = item
})
}
</script>
<style lang="scss" scoped>
.cont {
padding-top: 30rpx;
background-color: #F4F4F4;
min-height: 100vh;
}
.card {
.tit {
display: flex;
padding-bottom: 20rpx;
border-bottom: 1px solid #EBF1EF;
}
.card-li {
margin-top: 20rpx;
display: flex;
}
}
.operate {
width: 693.93rpx;
margin: auto;
.tit {
margin: 20rpx 0;
}
.card {
display: flex;
flex-wrap: wrap;
.operate-li {
font-size: 29.79rpx;
padding: 0 60rpx;
background-color: #F4F4F4;
margin-bottom: 28rpx;
height: 63.08rpx;
line-height: 63rpx;
border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
}
}
}
.ripe-btn {
position: fixed;
bottom: 50rpx;
left: 50%;
transform: translateX(-50%);
width: 588.79rpx;
height: 84.11rpx;
background-color: #00A15E;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
background: linear-gradient(to right, #00A15E, #4CC593);
}
.fertilize {
.fertilize-tit {
display: flex;
// justify-self: center;
justify-content: space-between;
padding-bottom: 20rpx;
border-bottom: 1px solid #F4F4F4;
margin-bottom: 20rpx;
.fertilize-tit-r {
display: flex;
}
}
.fertilize-li {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
flex-wrap: wrap;
.fertilize-li-a {
margin-bottom: 20rpx;
min-width: 40vw;
}
}
}
.pop-content {
padding: 20rpx;
padding-bottom: 0;
.pop-tit {
margin-bottom: 20rpx;
font-weight: bold;
}
.pop-li {
margin: 20rpx 0;
// margin-bottom: 40rpx;
}
}
.pop-confirm {
width: 693.93rpx;
height: 84.11rpx;
background: linear-gradient(to right, #00A15E, #4CC593);
color: white;
border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
text-align: center;
line-height: 84rpx;
margin-top: 70rpx;
margin: 0 auto;
}
.code-img {
background-color: #F4F4F4;
height: 196.26rpx;
position: relative;
.carime-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
}
}
.swipe-action-tit {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #F4F4F4;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
}
.swipe-action-li {
display: flex;
justify-content: space-between;
// align-items: ;
}
.popupShow {
// overflow: hidden;
position: fixed;
left: 30rpx;
}
</style>