341 lines
10 KiB
Vue
341 lines
10 KiB
Vue
|
|
首页
|
|
工单管理
|
|
合并请求
|
|
里程碑
|
|
探索
|
|
通知469
|
|
创建…
|
|
个人信息和配置
|
|
mt-fe-group / yudao-dev
|
|
取消关注
|
|
11
|
|
点赞
|
|
0
|
|
派生
|
|
0
|
|
代码
|
|
工单
|
|
0
|
|
合并请求
|
|
0
|
|
版本发布
|
|
0
|
|
百科
|
|
动态
|
|
559 提交
|
|
25 分支
|
|
145 MiB
|
|
分支: projects/mes-test
|
|
yudao-dev/src/views/equipment/base/repair/CustomDialogForm.vue
|
|
346 行
|
|
8.9 KiB
|
|
原始文件
|
|
永久链接
|
|
Blame
|
|
文件历史
|
|
|
|
<!--
|
|
filename: dialogForm.vue
|
|
author: liubin
|
|
date: 2023-10-31 15:55:13
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="disabled" class="drawer"
|
|
custom-class="mes-drawer" size="65%" @closed="$emit('destroy')">
|
|
<small-title slot="title" :no-padding="true">
|
|
{{ disabled ? '查看详情' : !dataForm.maintenanceStatus ? '修改' : '完成' }}
|
|
</small-title>
|
|
<div class="drawer-body flex">
|
|
<div class="drawer-body__content">
|
|
<el-form ref="form" :model="dataForm" label-width="100px" label-position="top" v-loading="formLoading">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="维修单号" prop="repairOrderNumber">
|
|
<span>{{ dataForm.repairOrderNumber }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="设备名称" prop="equipmentName">
|
|
<span>{{ dataForm.equipmentName }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="维修工" prop="repairman">
|
|
<span>{{ dataForm.repairman }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="故障发生时间" prop="faultTime">
|
|
<span>{{ parseTime(dataForm.faultTime) }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="故障级别" prop="faultLevel">
|
|
<span>{{ getDictDataLabel('fault-level', dataForm.faultLevel) }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="联系方式" prop="repairmanPhone">
|
|
<span>{{ dataForm.repairmanPhone }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-divider style="margin-top: -10px" />
|
|
|
|
<small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true">
|
|
{{ '设备维修信息' }}
|
|
</small-title>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item label="维修开始时间" prop="maintenanceStartTime"
|
|
:rules="[{ required: true, message: '维修开始时间不能为空', trigger: 'blur' }]">
|
|
<el-date-picker v-model="dataForm.maintenanceStartTime" type="datetime" :disabled="disabled"
|
|
placeholder="请选择维修开始时间" value-format="timestamp" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="维修结束时间" prop="maintenanceFinishTime"
|
|
:rules="[{ required: true, message: '维修结束时间不能为空', trigger: 'blur' }]">
|
|
<el-date-picker v-model="dataForm.maintenanceFinishTime" type="datetime" :disabled="disabled"
|
|
placeholder="请选择维修开始时间" value-format="timestamp" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="维修方式" prop="repairMode"
|
|
:rules="[{ required: true, message: '维修方式不能为空', trigger: 'blur' }]">
|
|
<el-select :disabled="disabled" v-model="dataForm.repairMode" placeholder="请选择维修方式">
|
|
<el-option v-for="opt in getDictDatas('repair-mode')" :key="opt.value" :label="opt.label"
|
|
:value="opt.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="故障类型" prop="faultType">
|
|
<el-select :disabled="disabled" v-model="dataForm.faultType" placeholder="请选择故障类型">
|
|
<el-option v-for="opt in getDictDatas('fault-type')" :key="opt.value" :label="opt.label"
|
|
:value="opt.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col>
|
|
<el-form-item label="故障明细" prop="faultDetail"
|
|
:rules="[{ required: true, message: '故障明细不能为空', trigger: 'blur' }]">
|
|
<!-- // 富文本 -->
|
|
<editor v-model="dataForm.faultDetail" :read-only="disabled" :min-height="150" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col>
|
|
<el-form-item label="维修记录" prop="maintenanceDetail">
|
|
<!-- // 富文本 -->
|
|
<editor v-model="dataForm.maintenanceDetail" :read-only="disabled" :min-height="150" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col>
|
|
<el-form-item label="维修附件" prop="file">
|
|
<FileUpload v-model="file" :limit="1" :f-name="fileName" :disabled="disabled" @name="setFileName" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col>
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input v-model="dataForm.remark" :placeholder="`请输入备注`" :disabled="disabled" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<div v-if="!disabled" class="drawer-body__footer">
|
|
<el-button style="" @click="goback()">取消</el-button>
|
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import SmallTitle from '../../base/alarm/Record/SmallTitle.vue';
|
|
import { getEqRepair, updateEqRepair } from '@/api/equipment/base/repair'
|
|
import Editor from "@/components/Editor";
|
|
import FileUpload from "@/components/FileUpload";
|
|
import { getDictDatas } from "@/utils/dict";
|
|
import { parseTime } from '@/utils/ruoyi'
|
|
import { getDictDataLabel } from '@/utils/dict';
|
|
|
|
export default {
|
|
name: 'DialogForm',
|
|
model: {
|
|
prop: 'dataForm',
|
|
event: 'update',
|
|
},
|
|
emits: ['update'],
|
|
components: { SmallTitle, Editor, FileUpload },
|
|
props: {
|
|
// dataForm: {
|
|
// type: Object,
|
|
// default: () => ({}),
|
|
// },
|
|
// disabled: {
|
|
// type: Boolean,
|
|
// default: false
|
|
// },
|
|
},
|
|
data() {
|
|
return {
|
|
formLoading: true,
|
|
visible: false,
|
|
disabled: false,
|
|
dataForm: {},
|
|
file: '',
|
|
fileName: ''
|
|
};
|
|
},
|
|
mounted() { },
|
|
methods: {
|
|
setFileName(val) {
|
|
this.fileName = val
|
|
},
|
|
goback() {
|
|
this.$emit('refreshDataList');
|
|
this.visible = false;
|
|
},
|
|
goEdit() {
|
|
this.disabled = false;
|
|
},
|
|
/** 模拟透传 ref */
|
|
validate(cb) {
|
|
return this.$refs.form.validate(cb);
|
|
},
|
|
resetFields(args) {
|
|
return this.$refs.form.resetFields(args);
|
|
},
|
|
initData() {
|
|
this.file = ''
|
|
this.fileName = ''
|
|
},
|
|
init(row, isdetail) {
|
|
this.initData();
|
|
this.disabled = isdetail || false;
|
|
this.dataForm.id = row.id || undefined;
|
|
this.visible = true;
|
|
|
|
this.$nextTick(() => {
|
|
this.$refs['form'].resetFields();
|
|
|
|
if (this.dataForm.id) {
|
|
// 获取设备维修
|
|
getEqRepair(this.dataForm.id).then(response => {
|
|
this.formLoading = false
|
|
this.dataForm = response.data;
|
|
this.dataForm.maintenanceStatus = row.maintenanceStatus || 0
|
|
if (this.dataForm.files.length > 0) {
|
|
this.file = this.dataForm.files[0].fileUrl
|
|
this.fileName = this.dataForm.files[0].fileName
|
|
}
|
|
});
|
|
} else {
|
|
// if (this.urlOptions.isGetCode) {
|
|
// this.getCode()
|
|
// }
|
|
}
|
|
});
|
|
},
|
|
// 表单提交
|
|
dataFormSubmit() {
|
|
this.$refs["form"].validate((valid) => {
|
|
if (!valid) {
|
|
return false;
|
|
}
|
|
// 修改的提交
|
|
if (this.file) {
|
|
const temp = this.file.split(',') // 获取文件个数
|
|
let arry = []
|
|
temp.forEach(item => {
|
|
arry.push({
|
|
fileName: this.fileName,
|
|
fileType: 2,
|
|
fileUrl: item
|
|
})
|
|
})
|
|
this.dataForm.files = arry
|
|
}
|
|
if (this.dataForm.id) {
|
|
updateEqRepair(this.dataForm).then(response => {
|
|
this.$modal.msgSuccess("修改成功");
|
|
this.visible = false;
|
|
this.$emit("refreshDataList");
|
|
});
|
|
return;
|
|
}
|
|
// 添加的提交
|
|
// this.urlOptions.createURL(this.dataForm).then(response => {
|
|
// this.$modal.msgSuccess("新增成功");
|
|
// this.visible = false;
|
|
// this.$emit("refreshDataList");
|
|
// });
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.drawer>>>.el-drawer {
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
|
|
.drawer>>>.el-drawer__header {
|
|
margin: 0;
|
|
padding: 32px 32px 24px;
|
|
border-bottom: 1px solid #dcdfe6;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.small-title::before {
|
|
content: '';
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 4px;
|
|
height: 22px;
|
|
border-radius: 1px;
|
|
margin-right: 8px;
|
|
background-color: #0b58ff;
|
|
}
|
|
|
|
.drawer-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.drawer-body__content {
|
|
flex: 1;
|
|
/* background: #eee; */
|
|
padding: 20px 30px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.drawer-body__footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 18px;
|
|
}
|
|
</style>
|