<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="faultTime"> <span>{{ parseTime(dataForm.faultTime) }}</span> </el-form-item> </el-col> <!-- <el-col :span="8"> <el-form-item label="故障级别" prop="faultLevel"> <span> {{ dataForm.faultLevel ? getDictDatas(DICT_TYPE.FAULT_LEVEL).find( (item) => item.value == dataForm.faultLevel )?.label : '---' }} </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="faultType"> <span> {{ getDictDataLabel('fault-type', dataForm.faultType) }} </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-col :span="8"> <el-form-item label="联系方式" prop="repairmanPhone"> <span>{{ dataForm.repairmanPhone }}</span> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="维修方式" prop="repairMode"> <span> {{ getDictDataLabel('repair-mode', dataForm.repairMode) }} </span> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="维修附件" prop="files"> <div v-if="dataForm.files && dataForm.files.length > 0"> <uploadedFile class="file" v-for="file in dataForm.files" :file="file" :key="file.fileUrl" :disabled="disabled" @delete="!disabled && handleDeleteFile(file, col.prop)" /> </div> <p v-else>暂无附件</p> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="创建时间" prop="createTime"> <span>{{ parseTime(dataForm.createTime) }}</span> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="创建人" prop="creator"> <span>{{ dataForm.creator }}</span> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="备注" prop="remark"> <span>{{ dataForm.remark }}</span> </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 './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'; import tupleImg from '@/assets/images/tuple.png'; const uploadedFile = { name: 'UploadedFile', props: ['file', 'disabled'], data() { return {}; }, methods: { handleDelete() { this.$emit('delete', this.file); }, async handleDownload() { const data = await this.$axios({ url: this.file.fileUrl, method: 'get', responseType: 'blob', }); await this.$message.success('开始下载'); // create download link const url = window.URL.createObjectURL(data); const link = document.createElement('a'); link.href = url; link.download = this.file.fileName; document.body.appendChild(link); link.click(); document.body.removeChild(link); }, }, mounted() { }, render: function (h) { return ( <div title={this.file.fileName} onClick={this.handleDownload} style={{ background: `url(${tupleImg}) no-repeat`, backgroundSize: '14px', backgroundPosition: '0 55%', paddingLeft: '20px', paddingRight: '24px', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden', cursor: 'pointer', display: 'inline-block', }}> {this.file.fileName} {!this.disabled && ( <el-button type="text" icon="el-icon-close" style="float: right; position: relative; top: 2px; left: 8px; z-index: 100" class="dialog__upload_component__close" onClick={this.handleDelete} /> )} </div> ); }, }; export default { name: 'DialogForm', model: { prop: 'dataForm', event: 'update', }, emits: ['update'], components: { SmallTitle, uploadedFile }, //, 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); }, init(row, isdetail) { 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; }); } }); }, handleDeleteFile(file, prop) { this.dataForm.files = this.dataForm.files.filter( (item) => item.fileUrl != file.fileUrl ); }, // 表单提交 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>