<template>
|
<div>
|
<el-dialog
|
v-model="isShow"
|
title="编辑生产记录"
|
width="520px"
|
@close="closeModal"
|
>
|
<el-form
|
ref="formRef"
|
label-width="120px"
|
:model="formState"
|
label-position="top"
|
>
|
<el-form-item
|
label="参数项"
|
prop="parameterItem"
|
:rules="[{ required: true, message: '请输入参数项' }]"
|
>
|
<el-input v-model="formState.parameterItem" placeholder="请输入参数项" />
|
</el-form-item>
|
<el-form-item
|
label="参数类型"
|
prop="type"
|
:rules="[{ required: true, message: '请选择参数类型' }]"
|
>
|
<el-select v-model="formState.type" placeholder="请选择参数类型" style="width: 100%;">
|
<el-option
|
v-for="dict in parameter_tyep"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="单位"
|
prop="unit"
|
:rules="[{ required: true, message: '请输入单位' }]"
|
>
|
<el-input v-model="formState.unit" placeholder="请输入单位" />
|
</el-form-item>
|
<el-form-item label="参数格式" prop="parameterFormat">
|
<el-input v-model="formState.parameterFormat" placeholder="请输入参数格式（选填）" />
|
</el-form-item>
|
<el-form-item
|
label="是否必填"
|
prop="isRequired"
|
:rules="[{ required: true, message: '请选择是否必填' }]"
|
>
|
<el-select v-model="formState.isRequired" placeholder="请选择" style="width: 100%;">
|
<el-option label="是" value="1" />
|
<el-option label="否" value="0" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="handleSubmit">确认</el-button>
|
<el-button @click="closeModal">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed, getCurrentInstance, watch } from "vue";
|
import { update } from "@/api/productionManagement/productionRecords.js";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
required: true,
|
},
|
record: {
|
type: Object,
|
default: () => ({}),
|
},
|
});
|
|
const emit = defineEmits(["update:visible", "completed"]);
|
|
const formRef = ref(null);
|
const formState = ref({
|
id: undefined,
|
code: "",
|
parameterItem: "",
|
type: "",
|
unit: "",
|
parameterFormat: "",
|
isRequired: undefined,
|
});
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit("update:visible", val);
|
},
|
});
|
|
// 回显：监听 record 变化
|
watch(
|
() => props.record,
|
(newRecord) => {
|
if (newRecord && Object.keys(newRecord).length) {
|
formState.value = {
|
id: newRecord.id,
|
code: newRecord.code ?? "",
|
parameterItem: newRecord.parameterItem ?? "",
|
type: newRecord.type ?? "",
|
unit: newRecord.unit ?? "",
|
parameterFormat: newRecord.parameterFormat ?? "",
|
isRequired: newRecord.isRequired,
|
};
|
}
|
},
|
{ immediate: true, deep: true }
|
);
|
|
// 弹窗打开时重新回显
|
watch(
|
() => props.visible,
|
(visible) => {
|
if (visible && props.record && Object.keys(props.record).length) {
|
formState.value = {
|
id: props.record.id,
|
code: props.record.code ?? "",
|
parameterItem: props.record.parameterItem ?? "",
|
type: props.record.type ?? "",
|
unit: props.record.unit ?? "",
|
parameterFormat: props.record.parameterFormat ?? "",
|
isRequired: props.record.isRequired,
|
};
|
}
|
}
|
);
|
|
const { proxy } = getCurrentInstance();
|
const { parameter_tyep } = proxy.useDict("parameter_tyep");
|
|
const closeModal = () => {
|
isShow.value = false;
|
};
|
|
const handleSubmit = () => {
|
formRef.value.validate((valid) => {
|
if (valid) {
|
update(formState.value).then(() => {
|
isShow.value = false;
|
emit("completed");
|
proxy.$modal.msgSuccess("修改成功");
|
});
|
}
|
});
|
};
|
|
defineExpose({
|
closeModal,
|
handleSubmit,
|
isShow,
|
});
|
</script>
|
