<template>
|
<div class="system-menu-dialog-container">
|
<el-dialog :title="materialDialogState.title" v-model="materialDialogState.materialDialogVisible" :close-on-click-modal="false" width="600px">
|
<el-form ref="MaterialFormRef" :rules="materialDialogState.materialFormRules" :model="materialDialogState.materialForm" size="default" label-width="120px">
|
<el-row :gutter="35">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="实验材料" prop="stuffName">
|
<el-input v-model="materialDialogState.materialForm.stuffName" placeholder="实验材料" clearable class="input-length"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="编号" prop="stuffCode">
|
<el-input v-model="materialDialogState.materialForm.stuffCode" placeholder="编号" clearable class="input-length"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="材料类型" prop="stuffType">
|
<el-select v-model="materialDialogState.materialForm.stuffType" placeholder="材料类型" clearable class="input-length">
|
<el-option v-for="item in materialDialogState.stuffTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="材料储存" prop="stuffStorage">
|
<el-select v-model="materialDialogState.materialForm.stuffStorage" placeholder="材料储存" clearable class="input-length">
|
<el-option v-for="item in materialDialogState.stuffStorageList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="计量单位" prop="stuffUnit">
|
<el-select v-model="materialDialogState.materialForm.stuffUnit" placeholder="计量单位" clearable class="input-length">
|
<el-option v-for="item in materialDialogState.stuffUnitList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="materialDialogState.materialDialogVisible = !materialDialogState.materialDialogVisible" size="default">取 消</el-button>
|
<el-button type="primary" @click="onSubmitMaterial" size="default">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref } from "vue";
|
import {useMenuApi} from "/@/api/systemManage/menu";
|
import {ElMessage} from "element-plus";
|
import {materialApi} from "/@/api/basic/material";
|
|
const MaterialFormRef = ref()
|
|
const materialDialogState = reactive<MaterialDialogType>({
|
title: '',
|
materialDialogVisible: false,
|
materialForm: {
|
stuffCode: '',
|
stuffName: '',
|
stuffStorage: null,
|
stuffType: null,
|
stuffUnit: null,
|
},
|
materialFormRules: {
|
stuffCode: [{ required: true, message: '请填写实验材料', trigger: 'blur' }],
|
stuffName: [{ required: true, message: '请填写编号', trigger: 'blur' }],
|
stuffStorage: [{ required: true, message: '请选择材料类型', trigger: 'change' }],
|
stuffType: [{ required: true, message: '请选择材料储存', trigger: 'change' }],
|
stuffUnit: [{ required: true, message: '请选择计量单位', trigger: 'change' }]
|
},
|
stuffTypeList: [
|
{id: 1, name: '化学试剂'},
|
{id:2, name: '基础材料'}
|
],
|
stuffStorageList: [
|
{id:1, name: '智能试剂柜'},
|
{id:2, name: '普通储存柜'},
|
],
|
stuffUnitList: [
|
{id:1, name: 'g'},
|
{id:2, name: 'kg'},
|
{id:3, name: 'ml'},
|
{id:4, name: 'l'},
|
]
|
})
|
|
const showMaterialDialog = (title: string, value: MaterialType) => {
|
materialDialogState.materialDialogVisible = true;
|
setTimeout(() => {
|
MaterialFormRef.value.clearValidate();
|
});
|
if(title === '新增'){
|
materialDialogState.title = '新增';
|
materialDialogState.materialForm = {
|
stuffName: '',
|
stuffCode: '',
|
stuffType: null,
|
stuffStorage: null,
|
stuffUnit: null,
|
};
|
}else{
|
materialDialogState.title = '编辑'
|
materialDialogState.materialForm = {
|
id: value.id,
|
stuffName: value.stuffName,
|
stuffCode: value.stuffCode,
|
stuffType: value.stuffType,
|
stuffStorage: value.stuffStorage,
|
stuffUnit: value.stuffUnit,
|
};
|
}
|
};
|
|
const onSubmitMaterial = () => {
|
MaterialFormRef.value.validate(async(valid: boolean) => {
|
if(valid){
|
if(materialDialogState.title === '新增'){
|
let res = await materialApi().addMaterial(materialDialogState.materialForm);
|
if(res.data.code === 100){
|
emit('refresh')
|
materialDialogState.materialDialogVisible = false;
|
ElMessage({
|
type: 'success',
|
message: '新增成功'
|
})
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg,
|
});
|
}
|
}else{
|
let res = await materialApi().modMaterial(materialDialogState.materialForm)
|
if(res.data.code === 100){
|
emit('refresh')
|
materialDialogState.materialDialogVisible = false;
|
ElMessage({
|
type: 'success',
|
message: '编辑成功'
|
})
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg,
|
});
|
}
|
}
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: '请完善基本信息',
|
});
|
}
|
})
|
}
|
|
const emit = defineEmits(['refresh'])
|
|
defineExpose({
|
showMaterialDialog
|
})
|
</script>
|
|
<style scoped>
|
|
</style>
|
