<template>
|
<div class="system-menu-dialog-container">
|
<el-dialog :title="equipmentDialogState.title" v-model="equipmentDialogState.equipmentDialogVisible" width="600px">
|
<el-form ref="EquipmentFormRef" :rules="equipmentDialogState.equipmentFormRules" :model="equipmentDialogState.equipmentForm" 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="deviceCode">
|
<el-input v-model="equipmentDialogState.equipmentForm.deviceCode" 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="deviceName">
|
<el-input v-model="equipmentDialogState.equipmentForm.deviceName" 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="devicePower">
|
<el-input v-model="equipmentDialogState.equipmentForm.devicePower" 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="deviceUnit">
|
<el-select v-model="equipmentDialogState.equipmentForm.deviceUnit" placeholder="计量单位" clearable class="input-length">
|
<el-option v-for="item in equipmentDialogState.deviceUnitList" :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="是否特种设备">
|
<el-select v-model="equipmentDialogState.equipmentForm.specialDevice" placeholder="是否特种设备" clearable class="input-length">
|
<el-option v-for="item in equipmentDialogState.specialDeviceList" :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="安全防护">
|
<el-input type="textarea" :rows="3" v-model="equipmentDialogState.equipmentForm.safeProtect" placeholder="安全防护" clearable class="input-length"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="equipmentDialogState.equipmentDialogVisible = !equipmentDialogState.equipmentDialogVisible" size="default">取 消</el-button>
|
<el-button type="primary" @click="onSubmitEquipment" 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 {equipmentApi} from "/@/api/basic/equipement";
|
|
const EquipmentFormRef = ref()
|
|
const equipmentDialogState = reactive<EquipmentDialogType>({
|
title: '',
|
equipmentDialogVisible: false,
|
equipmentForm: {
|
id: null,
|
deviceCode: '',
|
deviceName: '',
|
devicePower: '',
|
deviceUnit: null,
|
safeProtect: '',
|
},
|
equipmentFormRules: {
|
deviceCode: [{ required: true, message: '请填写设备编号', trigger: 'blur' }],
|
deviceName: [{ required: true, message: '请填写设备名称', trigger: 'blur' }],
|
devicePower: [{ required: true, message: '请填写设备功率', trigger: 'blur' }],
|
deviceUnit: [{ required: true, message: '请选择计量单位', trigger: 'change' }]
|
},
|
specialDeviceList: [],
|
deviceUnitList: [
|
{id:1, name: '台'},
|
{id:2, name: '个'},
|
{id:3, name: '件'}
|
]
|
})
|
|
const showEquipmentDialog = (title: string, value: EquipmentType, specialDeviceList: Type []) => {
|
|
equipmentDialogState.equipmentDialogVisible = true;
|
equipmentDialogState.specialDeviceList = specialDeviceList;
|
setTimeout(() => {
|
EquipmentFormRef.value.clearValidate();
|
});
|
if(title === '新增'){
|
equipmentDialogState.title = '新增';
|
equipmentDialogState.equipmentForm = {
|
id: null,
|
deviceCode: '',
|
deviceName: '',
|
devicePower: '',
|
deviceUnit: null,
|
safeProtect: '',
|
};
|
}else{
|
equipmentDialogState.title = '编辑'
|
equipmentDialogState.equipmentForm = {
|
id: value.id,
|
deviceCode: value.deviceCode,
|
deviceName: value.deviceName,
|
devicePower: value.devicePower,
|
deviceUnit: value.deviceUnit,
|
safeProtect: value.safeProtect,
|
};
|
}
|
};
|
|
const onSubmitEquipment = () => {
|
EquipmentFormRef.value.validate(async(valid: boolean) => {
|
if(valid){
|
if(equipmentDialogState.title === '新增'){
|
let res = await equipmentApi().addEquipment(equipmentDialogState.equipmentForm);
|
if(res.data.code === 100){
|
emit('refresh')
|
equipmentDialogState.equipmentDialogVisible = false;
|
ElMessage({
|
type: 'success',
|
message: '新增成功'
|
})
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg,
|
});
|
}
|
}else{
|
let res = await equipmentApi().modEquipment(equipmentDialogState.equipmentForm)
|
if(res.data.code === 100){
|
emit('refresh')
|
equipmentDialogState.equipmentDialogVisible = false;
|
ElMessage({
|
type: 'success',
|
message: '编辑成功'
|
})
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg,
|
});
|
}
|
}
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: '请完善基本信息',
|
});
|
}
|
})
|
}
|
|
const emit = defineEmits(['refresh'])
|
|
defineExpose({
|
showEquipmentDialog
|
})
|
</script>
|
|
<style scoped>
|
|
</style>
|
