<template>
|
<FormDialog
|
v-model="isShow"
|
title="编辑工序"
|
width="800px"
|
@confirm="handleSubmit"
|
@cancel="closeModal"
|
>
|
<el-form label-width="180px" :model="formState" label-position="top" ref="formRef">
|
<el-form-item
|
label="部件："
|
prop="name"
|
:rules="[
|
{
|
required: true,
|
message: '请输入部件',
|
},
|
{
|
max: 100,
|
message: '最多100个字符',
|
}
|
]">
|
<el-input v-model="formState.name" />
|
</el-form-item>
|
<el-form-item label="工序编号" prop="no">
|
<el-input v-model="formState.no" />
|
</el-form-item>
|
<el-form-item
|
label="工序类型"
|
prop="processType"
|
:rules="[
|
{
|
required: true,
|
message: '请选择工序类型',
|
}
|
]"
|
>
|
<el-select v-model="formState.processType" placeholder="请选择工序类型" style="width: 100%">
|
<el-option v-for="item in processTypeOptions"
|
:key="item"
|
:label="item"
|
:value="item" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="计划工时(小时)" prop="salaryQuota">
|
<el-input v-model="formState.salaryQuota" type="number" :step="0.5" />
|
</el-form-item>
|
<el-form-item label="计划人员" prop="planPerson">
|
<el-select v-model="formState.planPerson"
|
placeholder="请选择计划人员"
|
clearable
|
filterable
|
style="width: 100%">
|
<el-option v-for="item in employeeOptions"
|
:key="item.id"
|
:label="item.staffName"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="计划执行人员" prop="executor">
|
<el-select v-model="formState.executor"
|
placeholder="请选择计划执行人员"
|
clearable
|
filterable
|
style="width: 100%">
|
<el-option v-for="item in employeeOptions"
|
:key="item.id"
|
:label="item.staffName"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="是否质检" prop="isQuality">
|
<el-switch v-model="formState.isQuality" :active-value="true" inactive-value="false"/>
|
</el-form-item>
|
<el-form-item label="是否入库" prop="inbound">
|
<el-switch v-model="formState.inbound" :active-value="true" inactive-value="false"/>
|
</el-form-item>
|
<el-form-item label="是否报工" prop="reportWork">
|
<el-switch v-model="formState.reportWork" :active-value="true" inactive-value="false"/>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="formState.remark" type="textarea" />
|
</el-form-item>
|
</el-form>
|
</FormDialog>
|
</template>
|
|
<script setup>
|
import { ref, computed, getCurrentInstance, watch, onMounted } from "vue";
|
import { update } from "@/api/productionManagement/productionProcess.js";
|
import { staffOnJobListPage } from "@/api/personnelManagement/staffOnJob.js";
|
import FormDialog from "@/components/Dialog/FormDialog.vue";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
required: true,
|
},
|
|
record: {
|
type: Object,
|
required: true,
|
}
|
});
|
|
const emit = defineEmits(['update:visible', 'completed']);
|
|
const processTypeOptions = [
|
"机加工",
|
"刮板冷芯制作",
|
"管路组对",
|
"罐体连接及调试",
|
"测试打压",
|
"其他",
|
];
|
|
const employeeOptions = ref([]);
|
|
const formState = ref({
|
id: props.record.id,
|
name: props.record.name,
|
no: props.record.no,
|
processType: props.record.processType || '',
|
remark: props.record.remark,
|
salaryQuota: props.record.salaryQuota,
|
planPerson: props.record.planPerson || null,
|
executor: props.record.executor || null,
|
isQuality: props.record.isQuality,
|
inbound: props.record.inbound,
|
reportWork: props.record.reportWork,
|
});
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit('update:visible', val);
|
},
|
});
|
|
watch(() => props.record, (newRecord) => {
|
if (newRecord && isShow.value) {
|
formState.value = {
|
id: newRecord.id,
|
name: newRecord.name || '',
|
no: newRecord.no || '',
|
processType: newRecord.processType || '',
|
remark: newRecord.remark || '',
|
salaryQuota: newRecord.salaryQuota || '',
|
planPerson: newRecord.planPerson || null,
|
executor: newRecord.executor || null,
|
isQuality: props.record.isQuality,
|
inbound: newRecord.inbound,
|
reportWork: newRecord.reportWork,
|
};
|
}
|
}, { immediate: true, deep: true });
|
|
watch(() => props.visible, (visible) => {
|
if (visible && props.record) {
|
formState.value = {
|
id: props.record.id,
|
name: props.record.name || '',
|
no: props.record.no || '',
|
processType: props.record.processType || '',
|
remark: props.record.remark || '',
|
salaryQuota: props.record.salaryQuota || '',
|
planPerson: props.record.planPerson || null,
|
executor: props.record.executor || null,
|
isQuality: props.record.isQuality,
|
inbound: props.record.inbound,
|
reportWork: props.record.reportWork,
|
};
|
}
|
});
|
|
let { proxy } = getCurrentInstance()
|
|
const closeModal = () => {
|
isShow.value = false;
|
};
|
|
const handleSubmit = () => {
|
proxy.$refs["formRef"].validate(valid => {
|
if (valid) {
|
update(formState.value).then(res => {
|
isShow.value = false;
|
emit('completed');
|
proxy.$modal.msgSuccess("提交成功");
|
})
|
}
|
})
|
};
|
|
const loadEmployees = async () => {
|
try {
|
const res = await staffOnJobListPage({ current: -1, size: -1, staffState: 1 });
|
employeeOptions.value = res.data?.records || [];
|
} catch (error) {
|
console.error("加载员工列表失败", error);
|
}
|
};
|
|
onMounted(() => {
|
loadEmployees();
|
});
|
|
defineExpose({
|
closeModal,
|
handleSubmit,
|
isShow,
|
});
|
</script>
|
