digital-agriculture-app/pages/farm/detail/materialUsedCount.vue
2025-04-16 02:11:26 +01:00

227 lines
6.8 KiB
Vue

<template>
<view class="">
<!-- #ifndef MP-WEIXIN -->
<u-navbar title="农资用量" :autoBack="true" :safeAreaInsetTop="true" bgColor="#eee" color="#fff"
leftIconColor="#000" rightText="添加" titleStyle="color:#000;font-weight:bold;" placeholder
@rightClick="handleAdd">
</u-navbar>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="addBtn" @click="handleAdd">
+
</view>
<!-- #endif -->
<!-- <view class=" background-color-fff box-sizing-border-box padding-20">
<u-search></u-search>
</view> -->
<template v-if="costMaterialList.length>0">
<view v-for="(item,index) in costMaterialList" :key="index">
<view class="flex aic jcsa background-color-fff margin-top-20">
<view class="width-100 flex jcc ">
<u-icon name="bag-fill" size="28" color="#2b7"></u-icon>
</view>
<view class="width-390 padding-20">
<view class="">
{{ transformMaterialName(item.materialId)}}
</view>
<view class="">
{{item.materialCount}}{{item.measureUnit}}
</view>
<view class="font-size-25 font-color-l3">
{{item.workingStart}}到{{item.workingFinish}}
</view>
</view>
<view class="font-size-28 flex1 padding-right-20 font-color-2b7 flex jcsb">
<view @click="edit(item.costId)"
class="border-radius-10 background-color-2b7 font-color-fff padding-tb-10 padding-lr-20">
查看
</view>
<view @click="del(item.costId)"
class="border-radius-10 background-color-danger font-color-fff padding-tb-10 padding-lr-20">
删除
</view>
</view>
</view>
</view>
</template>
<!-- 无数据控件 -->
<u-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"/>
<!-- 弹出层 -->
<u-popup :show="popupVisiable" @close="popupVisiable=false" closeable closeOnClickOverlay>
<view class="padding-70">
<uni-forms ref="form" :rules="rules" :model="form">
<uni-forms-item label="数量" name="materialCount" type="number">
<uni-easyinput type="text" v-model="form.materialCount" primaryColor="#2b7" placeholder="请输入数量" />
</uni-forms-item>
<uni-forms-item label="计量单位" name="measureUnit" >
<uni-easyinput type="text" v-model="form.measureUnit" primaryColor="#2b7" placeholder="请输入计量单位" />
</uni-forms-item>
<uni-forms-item label="农资" name="materialId">
<uni-data-select v-model="form.materialId" :localdata="fmtMaterialList" placeholder="请选择农资"></uni-data-select>
</uni-forms-item>
<uni-forms-item label="开始时间" name="workingStart">
<uni-datetime-picker type="date" :clear-icon="false" v-model="form.workingStart" placeholder="请选择开始时间" />
</uni-forms-item>
<uni-forms-item label="结束时间" name="workingFinish">
<uni-datetime-picker type="date" :clear-icon="false" v-model="form.workingFinish" placeholder="请选择结束时间"/>
</uni-forms-item>
</uni-forms>
<u-button @click="submit" type="primary" customStyle="background-color:#2b7; border:none;margin-top:20rpx" text="确定"></u-button>
</view>
</u-popup>
<!-- 提示组建 -->
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
export default {
data() {
return {
//taskID
taskId:null,
popupVisiable: false,
form: {},
//农资工时列表
costMaterialList: [],
//农资列表
materialList: [],
queryParams: {
pageSize: null,
pageNum: null,
materialId: null,
taskId:null
},
//表单校验规则
rules:{
materialCount:{rules:[{required: true,errorMessage: '请填写数量'},{format:'number',errorMessage:'数量必须为数字'}]},
measureUnit:{rules:[{required: true,errorMessage: '请填计量单位'}]},
materialId:{rules:[{required: true,errorMessage: '请选择农资'}]},
workingStart:{rules:[{required: true,errorMessage: '请选择开始时间'}]},
workingFinish:{rules:[{required: true,errorMessage: '请选择结束时间'}]}
},
}
},
onLoad(option) {
this.taskId = option.taskId;
this.queryParams.taskId = this.taskId;
this.getCostMaterialList();
this.getMaterialList();
},
async onPullDownRefresh() {
await this.getCostMaterialList();
uni.stopPullDownRefresh();
},
computed: {
// 格式化 materialList 的数据给下拉选择使用
fmtMaterialList() {
return this.materialList.map(item => ({
text: item.materialName,
value: item.materialId,
disable: false
}));
}
},
methods: {
//翻译农资工时中的农资姓名
transformMaterialName(val) {
let materialName = ""
this.materialList.forEach((item, index) => {
if (item.materialId == val) {
materialName = item.materialName;
}
})
return materialName;
},
//重置表单
reset(){
this.form={
costId:null,
taskId :this.taskId,
materialCount:null,
workingStart: null,
workingFinish: null,
materialId: null,
measureUnit:null,
}
},
//获取农资工时列表
async getCostMaterialList() {
const {
rows
} = await uni.$u.http.get('/agriculture/costMaterial/list', {
params: this.queryParams
});
this.costMaterialList = rows;
},
//获取农资列表
async getMaterialList() {
const {
rows
} = await uni.$u.http.get('/agriculture/materialInfo/list');
this.materialList = rows;
},
//处理新增
handleAdd(){
this.popupVisiable=true;
this.reset();
},
//表单提交
submit(){
this.$refs.form.validate().then(res => {
if(this.form.costId == null){
uni.$u.http.post('/agriculture/costMaterial',this.form).then(res=>{
//提示
this.$refs.uToast.show({type: 'success',message: '新增成功'});
//关闭弹出层
this.popupVisiable=false;
//刷新列表
this.getCostMaterialList();
})
}else{
uni.$u.http.put('/agriculture/costMaterial',this.form).then(res=>{
//提示
this.$refs.uToast.show({type: 'success',message: '修改成功'});
//关闭弹出层
this.popupVisiable=false;
//刷新列表
this.getCostMaterialList();
})
}
})
},
//删除
del(costId){
uni.$u.http.delete('/agriculture/costMaterial/' + costId).then(res=>{
//提示
this.$refs.uToast.show({type: 'success',message: '删除成功'});
//刷新列表
this.getCostMaterialList();
});
},
//查看
edit(costId){
uni.$u.http.get('/agriculture/costMaterial/' + costId).then(res=>{
this.form = res.data;
this.popupVisiable=true;
})
}
}
}
</script>
<style lang="scss" scoped>
.addBtn{
position: fixed;
right: 40rpx;
bottom: 160rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50rpx;
background: #2b7;
color: #fff;
font-size: 80rpx;
text-align: center;
line-height: 90rpx;
}
</style>