You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

345 lines
13 KiB
Vue

<template>
<view>
<u-sticky
class="sticky"
:custom-nav-height="0"
>
<u-navbar
title="生产报工"
bg-color="transparent"
:title-style="{ fontWeight: 'bold' }"
:auto-back="true"
safe-area-inset-top
placeholder
/>
</u-sticky>
<uni-card :is-shadow="false" is-full>
<u-text type="warning" class="uni-h6" text="如个人无法填报,请寻找主管代为报工"></u-text>
</uni-card>
<view class="container">
<!-- 自定义表单校验 -->
<uni-forms ref="customForm" :rules="customRules" label-width="75px" :modelValue="customFormData">
<uni-forms-item label="工序" required name="orgType">
<uni-data-checkbox v-model="customFormData.orgType" :localdata="processTypes()" @change="handleOrgTypeChange" />
</uni-forms-item>
<uni-forms-item label="班别" required name="groupType" label-width="75px">
<uni-data-checkbox v-model="customFormData.groupType" :localdata="groupTypes()" />
</uni-forms-item>
<uni-forms-item label="日期" required name="reportDateString" label-width="75px">
<uni-datetime-picker v-model="customFormData.reportDateString" type="date" :clear-icon="true" @change="maskClick" />
</uni-forms-item>
<uni-forms-item label="工位" required name="orgId" label-width="75px">
<uni-data-select v-model="customFormData.orgId" :localdata="orgIdList"></uni-data-select>
</uni-forms-item>
<uni-forms-item label="计时时段" name="reportTime" label-width="75px">
<uni-easyinput type="text" v-model="customFormData.reportTime" placeholder="如:8:00-12:00" />
</uni-forms-item>
<uni-forms-item label="总计时/h" required name="totalTime" label-width="75px">
<uni-easyinput type="number" v-model="customFormData.totalTime" placeholder="" />
</uni-forms-item>
<uni-group title="card 模式" mode="card" v-for="(item,index) in customFormData.produceReportDetails" :key="item.id"
:name="['produceReportDetails',index,'value']">
<template v-slot:title>
<view class="uni-group-title">
<uni-row>
<uni-col :span="22">
<uni-forms-item label="产品" required name="planId" label-width="50px">
<uni-data-select v-model="customFormData.produceReportDetails[index].planId" :localdata="planProductList"></uni-data-select>
</uni-forms-item>
</uni-col>
<uni-col :span="2" class="u-p-t-10">
<!-- <button class="button" size="mini" type="warn" @click="del(item.id)">删除</button>-->
<uni-icons type="trash" size="25" color="red" @click="del(item.id)"></uni-icons>
</uni-col>
</uni-row>
</view>
</template>
<uni-row>
<uni-col :span="12" class="u-p-r-30">
<uni-forms-item label="成品数" required name="qualityNumber">
<uni-easyinput type="number" v-model="customFormData.produceReportDetails[index].qualityNumber" @change="changeNumber(item.id)"/>
</uni-forms-item>
</uni-col>
<uni-col :span="12">
<uni-forms-item label="废品数" name="wasteNumber">
<uni-easyinput type="number" v-model="customFormData.produceReportDetails[index].wasteNumber" @change="changeNumber(item.id)"/>
</uni-forms-item>
</uni-col>
</uni-row>
<uni-row>
<uni-col :span="12" class="u-p-r-30">
<uni-forms-item label="总数" name="totalNumber">
<uni-easyinput disabled v-model="customFormData.produceReportDetails[index].totalNumber" placeholder="" />
</uni-forms-item>
</uni-col>
<uni-col :span="12">
<uni-forms-item label="成品率%" required name="qualityRate">
<uni-easyinput disabled type="number" v-model="customFormData.produceReportDetails[index].qualityRate" />
</uni-forms-item>
</uni-col>
</uni-row>
<uni-row>
<uni-col :span="12" class="u-p-r-30">
<uni-forms-item label="打包数" name="packageNumber">
<uni-easyinput type="number" v-model="customFormData.produceReportDetails[index].packageNumber" />
</uni-forms-item>
</uni-col>
<uni-col :span="12">
<uni-forms-item label="备注" name="remark">
<uni-easyinput type="text" v-model="customFormData.produceReportDetails[index].remark" />
</uni-forms-item>
</uni-col>
</uni-row>
</uni-group>
</uni-forms>
<view class="u-flex justify-end">
<view class="u-flex u-m-t-30">
<u-button type="primary" @click="add" class="u-m-r-30">
<uni-icons type="plus" class="u-m-r-10"/>新增产品
</u-button>
<u-button type="success" @click="submit('customForm')">
<uni-icons type="checkbox" class="u-m-r-10"/>保存
</u-button>
</view>
</view>
</view>
</view>
</template>
<script>
import useUserStore from "@/store/modules/user";
import { processTypes, groupTypes } from "@/api/system/dict/data";
import { getOrgList, createReport, getPlanProductList} from "@/api/mes/organization"
import { getCurrentDate, timestampToTime } from "@/utils/dateUtil"
import { showConfirm } from "@/utils/common";
import tab from "@/plugins/tab";
import modal from "@/plugins/modal";
import { getById, getDetailByReportId, update } from "@/api/mes/report";
export default {
components: {},
data() {
return {
// 自定义表单数据
customFormData: {
id: undefined,
name: this.getUserInfo().name,
userId: this.getUserInfo().userId,
orgId: undefined,
orgType: undefined,
reportTime: undefined,
totalTime: 0,
reportStatus: undefined,
remark: undefined,
groupType: undefined,
reportType: undefined,
reportDateString: getCurrentDate(),
reportDate: undefined,
produceReportDetails: []
},
// 自定义表单校验规则
customRules: {
userId: {rules: [{required: true, errorMessage: '姓名不能为空'}]},
orgId: {rules: [{required: true, errorMessage: '工位不能为空'}]},
orgType: {rules: [{required: true, errorMessage: '工序不能为空'}]},
reportDateString: {rules: [{required: true, errorMessage: '报工日期不能为空'}]},
totalTime: {rules: [{required: true, errorMessage: '总计时不能为空'},
{format: 'number', errorMessage: '总计时格式错误,应填计时小时数'}]},
groupType: {rules: [{required: true, errorMessage: '班别不能为空'}]},
produceReportDetails: {rules: [
{format: 'array', errorMessage: '产品列表格式错误'},
{validateFunction: function(rule, value, data, callback) {
if (value.length < 2) {
callback('产品信息不能为空')
}
return true
}
}]
}
},
orgIdList:[],
planProductList:[],
updateId: undefined
}
},
onLoad() {
this.getOrgIdList()
// this.getPlanProductList()
this.updateId = tab.getParams();
if(this.updateId){
this.disableEnable = true
//请求编辑数据
getById(this.updateId).then(response => {
this.customFormData = response.data
this.customFormData.reportDateString = timestampToTime(this.customFormData.reportDate)
getDetailByReportId(this.updateId).then(res => {
this.customFormData.produceReportDetails = res.data
})
this.getPlanProductList()
})
}
},
onReady() {
// 设置自定义表单校验规则,必须在节点渲染完毕后执行
this.$refs.customForm.setRules(this.customRules)
},
methods: {
getUserInfo() {
return useUserStore()
},
processTypes() {
return processTypes
},
groupTypes() {
return groupTypes
},
submit(ref) {
if(this.customFormData.reportDateString.length<11)this.customFormData.reportDateString+=' 00:00:00';
this.customFormData.reportType = '';
this.$refs[ref].validate().then(res => {
var ok = 1;
if(this.customFormData.produceReportDetails && this.customFormData.produceReportDetails.length > 0) {
for (let i = 0; i < this.customFormData.produceReportDetails.length; i++) {
if(!this.customFormData.produceReportDetails[i].planId || this.customFormData.produceReportDetails[i].planId===''
|| !this.customFormData.produceReportDetails[i].qualityNumber|| this.customFormData.produceReportDetails[i].qualityNumber <= 0) {
ok = 0;
uni.showToast({
title: `产品信息不能为空!`,
icon: 'error'
})
break;
}
}
}
if(ok===1){
showConfirm("确认保存生产报工单吗?").then(res => {
if (res.confirm) {
if(this.updateId){
this.customFormData.id = this.updateId
update(this.customFormData).then(response => {
modal.msgSuccess("修改成功")
tab.navigateBack()
uni.$emit('handleSuccess', true)
})
}else {
this.customFormData.id = null
createReport(this.customFormData).then(response => {
modal.msgSuccess("保存成功")
tab.switchTab('/pages/report')
// 通知组件刷新列表
uni.$emit('handleSuccess', true)
})
}
}
})
}
}).catch(err => {
})
},
maskClick(e){
this.customFormData.reportDateString =e
this.getOrgIdList()
},
getOrgIdList() {
let data = {
'orgType': this.customFormData.orgType,
'reportDate': this.customFormData.reportDateString+" 00:00:00",
'groupType': this.customFormData.groupType
}
getOrgList(data).then(response => {
this.orgIdList = response.data;
if(!this.orgIdList || this.orgIdList.length===0){
uni.showToast({
title: '日期:'+this.customFormData.reportDateString+`未查询到工位安排!`,
icon: 'error'
})
}
else if(this.orgIdList.length===1){
this.customFormData.orgId = this.orgIdList[0].value
}
})
},
getPlanProductList() {
if(this.customFormData.orgType)
getPlanProductList(this.customFormData.orgType).then(response => {
this.planProductList = response.data;
if(!this.planProductList || this.orgIdList.planProductList===0){}
})
},
add() {
if(this.customFormData.orgType){
this.customFormData.produceReportDetails.push({
id: Date.now(),
productId: undefined,
planId: undefined,
qualityNumber: 0,
wasteNumber: 0,
totalNumber: 0,
qualityRate:0,
packageNumber: 0,
remark: ''
})
}else{
uni.showToast({
title: `请先选择工序!`,
icon: 'error'
})
}
},
del(id) {
let index = this.customFormData.produceReportDetails.findIndex(v => v.id === id)
this.customFormData.produceReportDetails.splice(index, 1)
},
changeNumber(id){
let index = this.customFormData.produceReportDetails.findIndex(v => v.id === id)
if(!this.customFormData.produceReportDetails[index].qualityNumber)
this.customFormData.produceReportDetails[index].qualityNumber=0;
if(!this.customFormData.produceReportDetails[index].wasteNumber)
this.customFormData.produceReportDetails[index].wasteNumber=0;
this.customFormData.produceReportDetails[index].totalNumber =
Number(this.customFormData.produceReportDetails[index].qualityNumber) + Number(this.customFormData.produceReportDetails[index].wasteNumber);
this.customFormData.produceReportDetails[index].qualityRate =
(Number(this.customFormData.produceReportDetails[index].qualityNumber)*100/Number(this.customFormData.produceReportDetails[index].totalNumber)).toFixed(2);
},
handleOrgTypeChange(e){
this.getPlanProductList()
}
}
}
</script>
<style lang="scss" scoped>
.sticky {
background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
backdrop-filter: blur(27.18px);
box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
0 0.5px 0 0 rgba(0, 0, 0, 0.1);
}
.container {
padding: 15px;
background-color: #fff;
}
.uniui-plus:before{
color: #ffffff
}
.uniui-checkbox:before{
color: #ffffff
}
.u-button {
height: 35px;
width: auto;
}
.uni-group-title{
height: 55px;
padding: 10px;
background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
}
.uni-group--card {
margin :0
}
</style>