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

228 lines
6.9 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="costMachineList.length>0">
<view v-for="(item,index) in costMachineList" :key="index">
<view class="flex aic jcsa background-color-fff margin-top-20">
<view class="width-100 flex jcc ">
<u-icon name="car-fill" size="28" color="#2b7"></u-icon>
</view>
<view class="width-390 padding-20">
<view class="">
{{ transformMachineName(item.machineId)}}({{item.machineCount}}台)
</view>
<view class="">
{{item.workingHours}}小时
</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="workingHours" type="number">
<uni-easyinput type="text" v-model="form.workingHours" primaryColor="#2b7" placeholder="请输入工时" />
</uni-forms-item>
<uni-forms-item label="数量" name="machineCount" type="number">
<uni-easyinput type="text" v-model="form.machineCount" primaryColor="#2b7" placeholder="请输入数量" />
</uni-forms-item>
<uni-forms-item label="机械" name="machineId">
<uni-data-select v-model="form.machineId" :localdata="fmtMachineList" 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 {
//任务ID
taskId:null,
popupVisiable: false,
form: {},
//机械工时列表
costMachineList: [],
//机械列表
machineList: [],
queryParams: {
pageSize: null,
pageNum: null,
machineId: null,
taskId:null
},
//表单校验规则
rules:{
workingHours:{rules:[{required: true,errorMessage: '请填写工时'},{format:'number',errorMessage:'工时必须为数字'}]},
machineCount:{rules:[{required: true,errorMessage: '请填写数量'},{format:'number',errorMessage:'数量必须为数字'}]},
machineId:{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
console.log(option)
this.getCostMachineList();
this.getMachineList();
},
async onPullDownRefresh() {
await this.getCostMachineList();
uni.stopPullDownRefresh();
},
computed: {
// 格式化 machineList 的数据给下拉选择使用
fmtMachineList() {
return this.machineList.map(item => ({
text: item.machineName,
value: item.machineId,
disable: false
}));
}
},
methods: {
//翻译机械工时中的机械姓名
transformMachineName(val) {
let machineName = ""
this.machineList.forEach((item, index) => {
if (item.machineId == val) {
machineName = item.machineName;
}
})
return machineName;
},
//重置表单
reset(){
this.form={
taskId:this.taskId,
costId:null,
machineCount:null,
workingStart: null,
workingFinish: null,
workingHours: null,
machineId: null
}
},
//获取机械工时列表
async getCostMachineList() {
const {
rows
} = await uni.$u.http.get('/agriculture/costMachine/list', {
params: this.queryParams
});
this.costMachineList = rows;
},
//获取机械列表
async getMachineList() {
const {
rows
} = await uni.$u.http.get('/agriculture/machineInfo/list');
this.machineList = rows;
},
//处理新增
handleAdd(){
this.popupVisiable=true;
this.reset();
},
//表单提交
submit(){
this.$refs.form.validate().then(res => {
if(this.form.costId == null){
uni.$u.http.post('/agriculture/costMachine',this.form).then(res=>{
//提示
this.$refs.uToast.show({type: 'success',message: '新增成功'});
//关闭弹出层
this.popupVisiable=false;
//刷新列表
this.getCostMachineList();
})
}else{
uni.$u.http.put('/agriculture/costMachine',this.form).then(res=>{
//提示
this.$refs.uToast.show({type: 'success',message: '修改成功'});
//关闭弹出层
this.popupVisiable=false;
//刷新列表
this.getCostMachineList();
})
}
})
},
//删除
del(costId){
uni.$u.http.delete('/agriculture/costMachine/' + costId).then(res=>{
//提示
this.$refs.uToast.show({type: 'success',message: '删除成功'});
//刷新列表
this.getCostMachineList();
});
},
//查看
edit(costId){
uni.$u.http.get('/agriculture/costMachine/' + 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>