faultdevice-add-or-update.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :close-on-press-escape="false">
  3. <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
  4. <el-form-item label="设备名称" prop="deviceName">
  5. <el-input v-model="dataForm.deviceName" placeholder="设备名称"></el-input>
  6. </el-form-item>
  7. <el-form-item label="故障原因描述" prop="faultReason">
  8. <el-input v-model="dataForm.faultReason" placeholder="故障原因描述"></el-input>
  9. </el-form-item>
  10. <el-form-item label="故障发生时间" prop="faultTime">
  11. <el-date-picker style="width:100%;"
  12. v-model="dataForm.faultTime"
  13. type="datetime"
  14. placeholder="故障发生时间"
  15. format="YYYY-MM-DD HH:mm:ss"
  16. />
  17. </el-form-item>
  18. <el-form-item label="维修完成时间" prop="repairCompleteTime">
  19. <el-date-picker style="width:100%;"
  20. v-model="dataForm.repairCompleteTime"
  21. type="datetime"
  22. placeholder="维修完成时间"
  23. format="YYYY-MM-DD HH:mm:ss"
  24. />
  25. </el-form-item>
  26. <el-form-item label="状态" prop="status">
  27. <el-select v-model="dataForm.status" placeholder="状态">
  28. <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in state.getDictByKey('failureDeviceStatus')"></el-option>
  29. </el-select>
  30. </el-form-item>
  31. <el-form-item label="备注" prop="remark">
  32. <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
  33. </el-form-item>
  34. </el-form>
  35. <template #footer>
  36. <el-button @click="visible = false">取消</el-button>
  37. <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
  38. </template>
  39. </el-dialog>
  40. </template>
  41. <script lang="ts" setup>
  42. import { parseTime } from '@/utils/ruoyi'
  43. import { reactive, ref } from "vue";
  44. import baseService from "@/service/baseService";
  45. import { ElMessage } from "element-plus";
  46. const emit = defineEmits(["refreshDataList"]);
  47. import useView from "@/hooks/useView";
  48. const state = reactive({ ...useView({}) });
  49. const visible = ref(false);
  50. const dataFormRef = ref();
  51. const dataForm = reactive({
  52. id: '', deviceName: '', faultReason: '', faultTime: '', repairCompleteTime: '', status: '', creator: '', createDate: '', updater: '', updateDate: '', remark: ''});
  53. const rules = ref({
  54. deviceName: [
  55. { required: true, message: '必填项不能为空', trigger: 'blur' }
  56. ],
  57. faultReason: [
  58. { required: true, message: '必填项不能为空', trigger: 'blur' }
  59. ],
  60. faultTime: [
  61. { required: true, message: '必填项不能为空', trigger: 'blur' }
  62. ],
  63. repairCompleteTime: [
  64. { required: true, message: '必填项不能为空', trigger: 'blur' }
  65. ],
  66. status: [
  67. { required: true, message: '必填项不能为空', trigger: 'blur' }
  68. ]
  69. });
  70. const init = (id?: number) => {
  71. visible.value = true;
  72. dataForm.id = "";
  73. // 重置表单数据
  74. if (dataFormRef.value) {
  75. dataFormRef.value.resetFields();
  76. }
  77. if (id) {
  78. getInfo(id);
  79. }
  80. };
  81. // 获取信息
  82. const getInfo = (id: number) => {
  83. baseService.get("/emergency/faultdevice/" + id).then((res) => {
  84. Object.assign(dataForm, res.data);
  85. });
  86. };
  87. // 表单提交
  88. const dataFormSubmitHandle = () => {
  89. dataFormRef.value.validate((valid: boolean) => {
  90. if (!valid) {
  91. return false;
  92. }
  93. dataForm.faultTime = dataForm.faultTime ? parseTime(new Date(dataForm.faultTime), '{yy}-{mm}-{dd} {hh}:{ii}:{ss}') : null;
  94. dataForm.repairCompleteTime = dataForm.repairCompleteTime ? parseTime(new Date(dataForm.repairCompleteTime), '{yy}-{mm}-{dd} {hh}:{ii}:{ss}') : null;
  95. console.log(dataForm);
  96. (!dataForm.id ? baseService.post : baseService.put)("/emergency/faultdevice", dataForm).then((res) => {
  97. ElMessage.success({
  98. message: '成功',
  99. duration: 500,
  100. onClose: () => {
  101. visible.value = false;
  102. emit("refreshDataList");
  103. }
  104. });
  105. });
  106. });
  107. };
  108. defineExpose({
  109. init
  110. });
  111. </script>