<template>
|
<div>
|
<slot name="function"/>
|
|
<div class="content-container">
|
<a-form-model ref="form" :model="model" :rules="validateRules" :labelCol="{span:10}" :wrapperCol="{span:6}">
|
<a-form-model-item label="设备名称" prop="equipmentId">
|
<a-select placeholder="请选择设备" v-model="model.equipmentId"></a-select>
|
</a-form-model-item>
|
<a-form-model-item label="故障原因" prop="faultReasonId">
|
<a-select placeholder="请选择故障原因" v-model="model.faultReasonId"></a-select>
|
</a-form-model-item>
|
<a-form-model-item label="故障描述" prop="faultDescription">
|
<a-textarea placeholder="请输入故障描述" v-model="model.faultDescription"/>
|
</a-form-model-item>
|
|
<div style="text-align: center">
|
<a-space>
|
<a-button @click="handleReportFault">故障上报</a-button>
|
<a-button>故障解除</a-button>
|
</a-space>
|
</div>
|
</a-form-model>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'ReportEquipmentFault',
|
data() {
|
return {
|
model: {},
|
validateRules: {
|
equipmentId: [{ required: true, message: '请选择设备！' }],
|
faultReasonId: [{ required: true, message: '请选择故障原因！' }],
|
faultDescription: [{ required: true, message: '请输入故障描述！' }]
|
}
|
}
|
},
|
methods: {
|
handleReportFault() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
|
} else {
|
return false
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.content-container {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
/deep/ .ant-form {
|
width: 100%;
|
}
|
}
|
</style>
|
