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.

275 lines
9.1 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>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1400px">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-row>
<el-col :span="8">
<el-form-item label="工人">
{{userStore.getUser.nickname}}
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="报工日期" prop="reportDate">
<el-date-picker
:disabled="isDisableUpdate"
v-model="formData.reportDate"
type="date"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择报工日期"
@change="changeDate"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="班别" prop="groupType">
<el-radio-group v-model="formData.groupType">
<el-radio
:disabled="isDisableUpdate"
v-for="dict in getIntDictOptions(DICT_TYPE.MES_GROUP_TYPE)"
:key="dict.value"
:label="dict.value"
@change="changeDate"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="formData.groupType && formData.reportDate">
<el-col :span="8">
<el-form-item label="工位" prop="orgId">
<el-select
:disabled="isDisableUpdate"
v-model="formData.orgId"
clearable
filterable
placeholder="请选择工位"
>
<el-option
v-for="item in orgWorkerList"
:key="item.orgId"
:label="item.orgName"
:value="item.orgId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="工序" prop="orgType">
<el-select
disabled
v-model="formData.orgType"
placeholder=""
clearable
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.MES_ORG_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8" >
<el-text v-if="warningInfo" class="mx-1" type="warning">{{warningInfo}}</el-text>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="计时时段" prop="reportTime">
<el-input v-model="formData.reportTime" placeholder="请输入计件时段" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="计时时长" prop="totalTime">
<el-input-number v-model="formData.totalTime" :min="0" :precision="2" placeholder="请输入时长" class="!w-260px"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 子表的表单 -->
<el-tabs v-model="subTabsName">
<el-tab-pane label="生产报工明细" name="produceReportDetail">
<ProduceReportDetailForm ref="produceReportDetailFormRef" :report-id="formData.id" :org-type="formData.orgType"/>
</el-tab-pane>
</el-tabs>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { ProduceReportApi, ProduceReportVO } from '@/api/mes/producereport'
import ProduceReportDetailForm from './components/ProduceReportDetailForm.vue'
import {useUserStore} from "@/store/modules/user";
import {OrgWorkerApi, OrgWorkerVO} from "@/api/mes/orgworker";
import {formatToDateTime} from "@/utils/dateUtil";
/** 生产报工单 表单 */
defineOptions({ name: 'ProduceReportForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const userStore = useUserStore()
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
const formType = ref('') // 表单的类型create - 新增update - 修改
const formData = ref({
id: undefined,
processInstanceId: undefined,
reportCode: undefined,
userId: undefined,
orgId: undefined,
orgType: undefined,
reportTime: undefined,
totalTime: undefined,
reportStatus: undefined,
remark: undefined,
groupType: undefined,
reportType: undefined,
reportDateString: undefined,
reportDate: undefined
})
const formRules = reactive({
reportDate: [{ required: true, message: '日期不能为空', trigger: 'blur' }],
groupType: [{ required: true, message: '班别不能为空', trigger: 'blur' }],
productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
userId: [{ required: true, message: '工人不能为空', trigger: 'blur' }],
orgId: [{ required: true, message: '工位不能为空', trigger: 'blur' }],
orgType: [{ required: true, message: '工序不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref
const isDisableUpdate = ref(false)
/** 子表的表单 */
const subTabsName = ref('produceReportDetail')
const produceReportDetailFormRef = ref()
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)+"个人报工单"
formType.value = type
resetForm()
formData.value.reportDate = getCurrentDate()
formData.value.groupType = 1
formData.value.userId = userStore.getUser.id
formData.value.reportType = "个人"
warningInfo.value = ''
isDisableUpdate.value = false
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ProduceReportApi.getProduceReport(id)
formData.value.reportDate = formatToDateTime(new Date(formData.value.reportDate))
} finally {
formLoading.value = false
}
isDisableUpdate.value=true;
}
await changeDate()
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 校验子表单
try {
await produceReportDetailFormRef.value.validate()
} catch (e) {
subTabsName.value = 'produceReportDetail'
return
}
// 提交请求
formLoading.value = true
try {
formData.value.reportDateString = formData.value.reportDate
formData.value.userId = userStore.getUser.id
const data = formData.value as unknown as ProduceReportVO
// 拼接子表的数据
data.produceReportDetails = produceReportDetailFormRef.value.getData()
if (formType.value === 'create') {
await ProduceReportApi.createProduceReport(data)
message.success(t('common.createSuccess'))
} else {
await ProduceReportApi.updateProduceReport(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
processInstanceId: undefined,
reportCode: undefined,
userId: undefined,
orgId: undefined,
orgType: undefined,
reportTime: undefined,
totalTime: undefined,
reportStatus: undefined,
remark: undefined,
groupType: undefined,
reportType: undefined,
reportDate: undefined
}
formRef.value?.resetFields()
}
const warningInfo = ref()
const orgWorkerList = ref<OrgWorkerVO[]>([]) // 用户列表
//更改报工日期时查询用户在该日期绑定的工位信息
const changeDate = async () =>{
if(formData.value.reportDate && formData.value.groupType ){
orgWorkerList.value = await OrgWorkerApi.getOrgWorkerList1(formData.value)
if(orgWorkerList.value && orgWorkerList.value.length>0){
formData.value.orgId = orgWorkerList.value[0].orgId
formData.value.orgType = orgWorkerList.value[0].orgType
warningInfo.value=''
}
else{
formData.value.orgId = undefined
warningInfo.value = '该条件下未查询到工位安排信息!'
message.error(warningInfo.value)
}
}
}
const getCurrentDate = () =>{
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
if(month<10){month = '0'+month}
let day = now.getDate();
if(day<10)day = '0'+day;
return year + "-" + month + "-" + day +" 00:00:00";
}
</script>