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

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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>
<el-text type="warning" class="uni-h6">如个人无法填报请寻找主管代为报工</el-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>