347 lines
8.0 KiB
Vue
347 lines
8.0 KiB
Vue
<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>
|