891 lines
25 KiB
Vue
891 lines
25 KiB
Vue
<template>
|
||
<div class="maintennce-details" v-loading="loading">
|
||
<el-divider content-position="left">工单信息</el-divider>
|
||
<div class="info-wrap">
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="item-block">
|
||
<span>工单 I D ：</span>
|
||
<span>{{ workDetails.maintenanceId }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="item-block">
|
||
<span>工单状态：</span>
|
||
<span>{{ workStateList[workDetails.maintenanceStatus] }}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="item-block">
|
||
<span>设备名称：</span>
|
||
<span>{{ workDetails.deviceName }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="item-block">
|
||
<span>故障类型：</span>
|
||
<span>{{ fanltTypeList[workDetails.faultType] }}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="item-block">
|
||
<span>上报人员：</span>
|
||
<span>{{ workDetails.reporterName }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="item-block">
|
||
<span>上报时间：</span>
|
||
<span>{{ workDetails.createTime }}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row
|
||
:gutter="20"
|
||
v-if="
|
||
!(
|
||
workDetails.reporterId === logUser &&
|
||
workDetails.maintenanceStatus === '1'
|
||
)
|
||
"
|
||
>
|
||
<el-col :span="24">
|
||
<div class="item-block">
|
||
<span>工单内容：</span>
|
||
<span>{{ workDetails.maintenanceContext }}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<el-divider
|
||
content-position="left"
|
||
v-if="
|
||
showForm === '0' &&
|
||
((workDetails.handlerId === logUser &&
|
||
workDetails.maintenanceStatus === '1') ||
|
||
(workDetails.reporterId === logUser &&
|
||
workDetails.maintenanceStatus === '1') ||
|
||
(workDetails.maintenanceStatus === '3' && showForm === '0') ||
|
||
(workDetails.maintenanceStatus === '4' && showForm === '0') ||
|
||
(workDetails.maintenanceStatus === '5' && showForm === '0'))
|
||
"
|
||
>处理反馈信息</el-divider
|
||
>
|
||
<div
|
||
class="info-wrap feedback-wrap"
|
||
v-if="
|
||
showForm === '0' &&
|
||
((workDetails.handlerId === logUser &&
|
||
workDetails.maintenanceStatus === '1') ||
|
||
(workDetails.reporterId === logUser &&
|
||
workDetails.maintenanceStatus === '1') ||
|
||
(workDetails.maintenanceStatus === '3' && showForm === '0') ||
|
||
(workDetails.maintenanceStatus === '4' && showForm === '0') ||
|
||
(workDetails.maintenanceStatus === '5' && showForm === '0'))
|
||
"
|
||
>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="item-block">
|
||
<span>处理人员：</span>
|
||
<span>{{ workDetails.handlerName }}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="item-block">
|
||
<span>处理时间：</span>
|
||
<span>{{ workDetails.handleTime }}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row
|
||
:gutter="20"
|
||
v-show="!(workDetails.handlerId === logUser && showForm === '3')"
|
||
>
|
||
<el-col :span="12">
|
||
<div class="item-block">
|
||
<span>处理反馈：</span>
|
||
<span class="value-span">{{
|
||
workDetails.feedbackInformation
|
||
}}</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="item-block">
|
||
<span>处理意见：</span>
|
||
<span class="value-span">{{ workDetails.advice }}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row
|
||
:gutter="20"
|
||
v-show="!(workDetails.handlerId === logUser && showForm === '3')"
|
||
>
|
||
<el-col :span="24">
|
||
<div
|
||
class="item-block"
|
||
style="width: 100%; display: flex; height: 100px"
|
||
>
|
||
<span>现场图片：</span>
|
||
<div style="width: calc(100% - 85px); display: flex">
|
||
<img
|
||
style="
|
||
width: 100px;
|
||
height: 100px;
|
||
margin-right: 10px;
|
||
border: 1px solid #cfcece;
|
||
border-radius: 3px;
|
||
"
|
||
:src="getIotFileUrl(val)"
|
||
v-for="(val, index) in pictures"
|
||
:key="val"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<el-divider
|
||
content-position="left"
|
||
v-if="
|
||
workDetails.maintenanceStatus === '1' && workDetails.maintenanceNodeList.length > 0
|
||
"
|
||
>退回意见</el-divider
|
||
>
|
||
<div
|
||
v-if="
|
||
workDetails.maintenanceStatus === '1' && workDetails.maintenanceNodeList.length > 0
|
||
"
|
||
>
|
||
<el-card>
|
||
<div class="info-block-sh">
|
||
<div class="item-block">
|
||
<span>审核人员：</span>
|
||
<span>{{ workDetails.maintenanceNodeList[0]["auditorName"] }}</span>
|
||
</div>
|
||
<div class="item-block">
|
||
<span>审核时间：</span>
|
||
<span>{{ workDetails.maintenanceNodeList[0]["auditTime"] }}</span>
|
||
</div>
|
||
|
||
<div class="item-block text">
|
||
<span>审核结果：</span>
|
||
<span>{{ workDetails.maintenanceNodeList[0]["auditResult"] }}</span>
|
||
</div>
|
||
|
||
<div class="item-block text">
|
||
<span>审核意见：</span>
|
||
<span>{{
|
||
workDetails.maintenanceNodeList[0]["auditOpinion"]
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
|
||
<el-divider
|
||
content-position="left"
|
||
v-if="
|
||
workDetails.maintenanceStatus === '4' ||
|
||
workDetails.maintenanceStatus === '5'
|
||
"
|
||
>审核结果</el-divider
|
||
>
|
||
<div
|
||
v-if="
|
||
workDetails.maintenanceStatus === '4' ||
|
||
workDetails.maintenanceStatus === '5'
|
||
"
|
||
>
|
||
<el-timeline style="margin-top: 20px">
|
||
<el-timeline-item
|
||
v-for="item in workDetails.maintenanceNodeList"
|
||
reverse
|
||
:hide-timestamp="true"
|
||
:key="item.auditResult"
|
||
:icon="item.auditResult === '通过' ? 'el-icon-trophy' : 'el-icon-aim'"
|
||
type="large"
|
||
:color="item.auditResult === '通过' ? '#52ce90' : '#328ff0'"
|
||
:timestamp="item.auditTime"
|
||
>
|
||
<el-card>
|
||
<div class="info-block-sh">
|
||
<div class="item-block">
|
||
<span>审核人员：</span>
|
||
<span>{{ item["auditorName"] }}</span>
|
||
</div>
|
||
<div class="item-block">
|
||
<span>审核时间：</span>
|
||
<span>{{ item["auditTime"] }}</span>
|
||
</div>
|
||
|
||
<div class="item-block text">
|
||
<span>审核结果：</span>
|
||
<span>{{ item["auditResult"] }}</span>
|
||
</div>
|
||
|
||
<div class="item-block text">
|
||
<span>审核意见：</span>
|
||
<span>{{ item["auditOpinion"] }}</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
|
||
<el-divider
|
||
content-position="left"
|
||
v-if="
|
||
tempType !== 'examine' &&
|
||
showForm === '0' &&
|
||
((workDetails.handlerId !== logUser &&
|
||
(workDetails.maintenanceStatus === '2' ||
|
||
workDetails.maintenanceStatus === '0')) ||
|
||
(workDetails.reporterId !== logUser &&
|
||
workDetails.maintenanceStatus === '1') ||
|
||
(workDetails.maintenanceStatus === '3' && showForm === '0') ||
|
||
(workDetails.handlerId !== logUser &&
|
||
workDetails.maintenanceStatus === '4'))
|
||
"
|
||
>订单进程</el-divider
|
||
>
|
||
<div
|
||
v-if="
|
||
tempType !== 'examine' &&
|
||
showForm === '0' &&
|
||
((workDetails.handlerId !== logUser &&
|
||
(workDetails.maintenanceStatus === '2' ||
|
||
workDetails.maintenanceStatus === '0')) ||
|
||
(workDetails.reporterId !== logUser &&
|
||
workDetails.maintenanceStatus === '1') ||
|
||
(workDetails.maintenanceStatus === '3' && showForm === '0') ||
|
||
(workDetails.handlerId !== logUser &&
|
||
workDetails.maintenanceStatus === '4'))
|
||
"
|
||
>
|
||
<span
|
||
style="margin-left: 20px; height: 50px; display: block"
|
||
v-show="workDetails.maintenanceStatus === '4' && showForm === '0'"
|
||
v-text="'工单审核被退回，正在重新处理中...'"
|
||
></span>
|
||
<span
|
||
style="margin-left: 20px; height: 50px; display: block"
|
||
v-show="
|
||
workDetails.handlerId !== logUser &&
|
||
workDetails.maintenanceStatus === '2'
|
||
"
|
||
v-text="'工单已经确认，正在处理中...'"
|
||
></span>
|
||
<span
|
||
style="margin-left: 20px; height: 50px; display: block"
|
||
v-show="workDetails.maintenanceStatus === '3' && showForm === '0'"
|
||
v-text="' 订单已经处理完成，等待审核...'"
|
||
></span>
|
||
<span
|
||
style="margin-left: 20px; height: 50px; display: block"
|
||
v-show="
|
||
workDetails.handlerId !== logUser &&
|
||
workDetails.maintenanceStatus === '0'
|
||
"
|
||
v-text="'工单正在等待处理人确认...'"
|
||
></span>
|
||
<span
|
||
style="margin-left: 20px; height: 50px; display: block"
|
||
v-show="
|
||
workDetails.reporterId !== logUser &&
|
||
workDetails.maintenanceStatus === '1'
|
||
"
|
||
v-text="'此工单已经退回，等待处理...'"
|
||
></span>
|
||
</div>
|
||
<el-divider
|
||
content-position="left"
|
||
v-if="tempType === 'myWork' && expFromShow(workDetails)"
|
||
>操作</el-divider
|
||
>
|
||
<el-form
|
||
:model="form"
|
||
:rules="rules"
|
||
v-if="tempType === 'myWork' && expFromShow(workDetails)"
|
||
ref="ruleForm"
|
||
label-width="100px"
|
||
class="demo-ruleForm"
|
||
>
|
||
<el-form-item
|
||
label="工单内容："
|
||
v-if="
|
||
workDetails.reporterId === logUser &&
|
||
workDetails.maintenanceStatus === '1'
|
||
"
|
||
prop="name"
|
||
>
|
||
<el-input
|
||
type="textarea"
|
||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||
placeholder
|
||
v-model="form.maintenanceContext"
|
||
></el-input>
|
||
</el-form-item>
|
||
|
||
<span
|
||
v-if="
|
||
workDetails.handlerId === logUser &&
|
||
workDetails.maintenanceStatus === '0'
|
||
"
|
||
v-text="'您是此工单处理人，您可做如下操作...'"
|
||
></span>
|
||
|
||
<span
|
||
v-else-if="workDetails.maintenanceStatus === '2'"
|
||
v-text="'订单已经确认，正在处理中...'"
|
||
></span>
|
||
|
||
<span
|
||
v-else-if="
|
||
workDetails.handlerId === logUser &&
|
||
workDetails.maintenanceStatus === '4'
|
||
"
|
||
v-text="'工单审核被退回，请重新处理...'"
|
||
></span>
|
||
|
||
<el-row
|
||
:gutter="20"
|
||
v-if="
|
||
workDetails.handlerId === logUser &&
|
||
(workDetails.maintenanceStatus === '3' ||
|
||
workDetails.maintenanceStatus === '1')
|
||
"
|
||
>
|
||
<el-col :span="24">
|
||
<el-form-item label="处理反馈：" prop="name">
|
||
<el-input
|
||
type="textarea"
|
||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||
placeholder
|
||
v-model="form.feedbackInformation"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="24">
|
||
<el-form-item label="处理意见：" prop="name">
|
||
<el-input
|
||
type="textarea"
|
||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||
placeholder
|
||
v-model="form.advice"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<div
|
||
v-show="
|
||
workDetails.handlerId === logUser &&
|
||
(workDetails.maintenanceStatus === '3' ||
|
||
workDetails.maintenanceStatus === '1')
|
||
"
|
||
class="item-block-img"
|
||
>
|
||
<span class="label-wrap">现场图片：</span>
|
||
<div class="img-list-wrap">
|
||
<div class="img-show" v-for="(val, index) in pictures" :key="val">
|
||
<img
|
||
:src="getIotFileUrl(val)"
|
||
@mouseout="
|
||
() => {
|
||
showIndex = null;
|
||
}
|
||
"
|
||
@mouseenter="
|
||
() => {
|
||
showIndex = index;
|
||
}
|
||
"
|
||
/>
|
||
<div
|
||
class="img-option-wrap"
|
||
@mouseout="
|
||
() => {
|
||
showIndex = null;
|
||
}
|
||
"
|
||
@mouseover="
|
||
() => {
|
||
showIndex = index;
|
||
}
|
||
"
|
||
v-show="showIndex === index"
|
||
>
|
||
<i
|
||
class="el-icon-search"
|
||
title="查看图片"
|
||
@click="handlePictureCardPreview(val)"
|
||
></i>
|
||
<i
|
||
class="el-icon-delete"
|
||
title="删除图片"
|
||
@click="handelDelFile(val)"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
<el-upload
|
||
action
|
||
class="avatar-uploader"
|
||
:show-file-list="false"
|
||
:http-request="uploud"
|
||
:before-upload="beforeAvatarUpload"
|
||
>
|
||
<i class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-submit-div">
|
||
<el-button
|
||
type="primary"
|
||
v-show="
|
||
workDetails.reporterId === logUser &&
|
||
workDetails.maintenanceStatus === '1'
|
||
"
|
||
size="mini"
|
||
@click="repSrouSubmit()"
|
||
>确定订单</el-button
|
||
>
|
||
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
v-if="workDetails.maintenanceStatus === '0' && showForm === '0'"
|
||
@click="handelReject()"
|
||
>退回</el-button
|
||
>
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
v-if="
|
||
(workDetails.maintenanceStatus === '0' ||
|
||
workDetails.maintenanceStatus === '4') &&
|
||
showForm === '0'
|
||
"
|
||
@click="handelConfirm()"
|
||
>确认工单</el-button
|
||
>
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
v-if="
|
||
workDetails.handlerId === logUser &&
|
||
workDetails.maintenanceStatus === '2'
|
||
"
|
||
@click="handelComplete()"
|
||
>处理完成</el-button
|
||
>
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
v-if="
|
||
showForm === '1' &&
|
||
workDetails.maintenanceStatus === '1' &&
|
||
workDetails.handlerId === logUser
|
||
"
|
||
@click="RejectSubmitForm()"
|
||
>提交</el-button
|
||
>
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
v-if="showForm === '1' && workDetails.maintenanceStatus === '3'"
|
||
@click="submitForm('3')"
|
||
>提交</el-button
|
||
>
|
||
</div>
|
||
</el-form>
|
||
|
||
<el-dialog :visible.sync="dialogVisible" append-to-body>
|
||
<img width="100%" :src="getIotFileUrl(dialogImageUrl)" alt />
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { updateMaintenance, getMaintenance } from "@/api/power/maintenance";
|
||
import { uploadFile } from "@/api/file";
|
||
import { getIotFileUrl } from "@/utils/hciot";
|
||
// 工单状态(0:工单已创建 1:工单执行中 2:工单审核失败 3:工单审核成功)
|
||
const workStateList = {
|
||
0: "工单已创建",
|
||
1: "退回工单",
|
||
2: "确认工单",
|
||
3: "处理完成",
|
||
4: "退回处理",
|
||
5: "审核通过",
|
||
};
|
||
// 故障类型(0:设备离线 1:设备超警)
|
||
const fanltTypeList = {
|
||
0: "设备离线",
|
||
1: "设备超警",
|
||
};
|
||
export default {
|
||
name: "DetailsWrap",
|
||
props: ["maintenanceId", "maintenanceInfo", "tempType"],
|
||
data() {
|
||
return {
|
||
workStateList,
|
||
fanltTypeList,
|
||
loading: false,
|
||
logUser: "",
|
||
form: {},
|
||
showIndex: null,
|
||
rules: {},
|
||
fileType: ["image/jpeg", "image/png"],
|
||
fileSize: 1024 * 1024 * 20,
|
||
temp: {
|
||
maintenanceId: "",
|
||
handelTime: "",
|
||
feedbackInformation: "",
|
||
maintenanceStatus: "",
|
||
pictures: [],
|
||
},
|
||
showForm: "0",
|
||
workDetails: {},
|
||
pictures: [],
|
||
dialogVisible: false,
|
||
dialogImageUrl: "",
|
||
};
|
||
},
|
||
created() {
|
||
this.logUser = this.$store.getters.userId;
|
||
this.handleDetails();
|
||
},
|
||
methods: {
|
||
getIotFileUrl,
|
||
// 限制图片大小和类型
|
||
beforeAvatarUpload(file) {
|
||
const isJPG = this.fileType.indexOf(file.type) >= 0;
|
||
const isLt2M = file.size < this.fileSize;
|
||
|
||
if (!isJPG) {
|
||
this.$message.error("上传头像图片只能是 JPG 格式!");
|
||
}
|
||
if (!isLt2M) {
|
||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||
}
|
||
return isJPG && isLt2M;
|
||
},
|
||
// 图片上传
|
||
handlePictureCardPreview(file) {
|
||
this.dialogImageUrl = file;
|
||
this.dialogVisible = true;
|
||
},
|
||
handelDelFile(file) {
|
||
// console.log(file);
|
||
this.pictures.splice(this.pictures.indexOf(file), 1);
|
||
},
|
||
uploud(file) {
|
||
var formData = new FormData();
|
||
formData.append("file", file.file);
|
||
uploadFile(formData)
|
||
.then((response) => {
|
||
if (response.code === 200) {
|
||
// this.temp.pictures.push(response.data.filePath)
|
||
this.pictures.push(response.url);
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
console.log(e);
|
||
});
|
||
},
|
||
// 条件查询详情
|
||
handleDetails() {
|
||
this.loading = true;
|
||
// this.workDetails = this.maintenanceInfo;
|
||
// 模拟数据开发测试
|
||
// 登录用户是 上报人
|
||
// this.workDetails.reporterId = this.logUser;
|
||
// 登录用户是 处理人
|
||
// this.workDetails.handlerId = this.logUser;
|
||
// this.workDetails.maintenanceStatus = "5";
|
||
// this.workDetails.maintenanceNodeList = [
|
||
// {
|
||
// auditResult: '通过',
|
||
// auditorName: 'admin',
|
||
// auditTime: '2021-03-04 10:29:25',
|
||
// auditOpinion: '合格通过！'
|
||
// },
|
||
// {
|
||
// auditResult: '不通过',
|
||
// auditorName: 'admin',
|
||
// auditTime: '2021-03-04 10:10:25',
|
||
// auditOpinion: '不合格通过！'
|
||
// }
|
||
// ]
|
||
getMaintenance(this.maintenanceId).then((response) => {
|
||
this.workDetails = response.data;
|
||
this.newTemp();
|
||
this.pictures = this.workDetails.scenePictures
|
||
? this.workDetails.scenePictures.split(",")
|
||
: [];
|
||
this.showForm = "0";
|
||
this.loading = false;
|
||
});
|
||
},
|
||
// 处理人提交表单
|
||
repSrouSubmit() {
|
||
this.showForm = "0";
|
||
this.form.maintenanceStatus = "0";
|
||
updateMaintenance(this.form).then((res) => {
|
||
if (res.code === 200) {
|
||
this.workDetails = Object.assign(this.workDetails, this.form);
|
||
}
|
||
});
|
||
},
|
||
// 处理人退回操作
|
||
handelReject() {
|
||
this.newTemp();
|
||
this.showForm = "1";
|
||
this.workDetails.maintenanceStatus = "1";
|
||
},
|
||
// 退回提交
|
||
RejectSubmitForm() {
|
||
this.form.maintenanceStatus = "1";
|
||
this.showForm = "0";
|
||
// this.form.handleTime = this.parseTime(new Date(), "{y}-{m}-{d}");
|
||
if (this.pictures) {
|
||
this.form.scenePictures = this.pictures.join(",");
|
||
} else {
|
||
this.form.scenePictures = "";
|
||
}
|
||
updateMaintenance(this.form).then((res) => {
|
||
if (res.code === 200) {
|
||
this.workDetails = Object.assign(this.workDetails, this.form);
|
||
}
|
||
});
|
||
},
|
||
// 处理人确认工单
|
||
handelConfirm() {
|
||
this.newTemp();
|
||
this.showForm = "1";
|
||
this.form.maintenanceStatus = "2";
|
||
updateMaintenance(this.form).then((res) => {
|
||
if (res.code === 200) {
|
||
this.workDetails = Object.assign(this.workDetails, this.form);
|
||
}
|
||
});
|
||
},
|
||
// 处理人完成工单
|
||
handelComplete() {
|
||
this.newTemp();
|
||
this.workDetails.maintenanceStatus = "3";
|
||
this.showForm = "1";
|
||
},
|
||
// 处理人处理完成提价
|
||
submitForm() {
|
||
this.form.maintenanceStatus = "3";
|
||
this.showForm = "0";
|
||
// this.form.handleTime = this.parseTime(new Date(), "{y}-{m}-{d}");
|
||
if (this.pictures) {
|
||
this.form.scenePictures = this.pictures.join(",");
|
||
} else {
|
||
this.form.scenePictures = "";
|
||
}
|
||
updateMaintenance(this.form).then((res) => {
|
||
if (res.code === 200) {
|
||
this.workDetails = Object.assign(this.workDetails, this.form);
|
||
}
|
||
});
|
||
},
|
||
expFromShow(row) {
|
||
if (row.reporterId === this.logUser && row.maintenanceStatus === "1") {
|
||
return true;
|
||
} else if (
|
||
row.handlerId === this.logUser &&
|
||
(row.maintenanceStatus === "2" || row.maintenanceStatus === "0")
|
||
) {
|
||
return true;
|
||
} else if (
|
||
row.handlerId === this.logUser &&
|
||
row.maintenanceStatus === "1" &&
|
||
this.showForm === "1"
|
||
) {
|
||
return true;
|
||
} else if (
|
||
row.handlerId === this.logUser &&
|
||
row.maintenanceStatus === "3" &&
|
||
this.showForm === "1"
|
||
) {
|
||
return true;
|
||
} else if (
|
||
row.handlerId === this.logUser &&
|
||
row.maintenanceStatus === "4" &&
|
||
this.showForm === "0"
|
||
) {
|
||
return true;
|
||
}
|
||
return false;
|
||
},
|
||
newTemp() {
|
||
this.form = {
|
||
maintenanceId: this.workDetails.maintenanceId,
|
||
maintenanceStatus: this.workDetails.maintenanceStatus,
|
||
};
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.maintennce-details {
|
||
max-height: calc(100vh - 150px);
|
||
overflow: auto;
|
||
padding: 0 20px;
|
||
.el-upload--picture-card {
|
||
width: 100px;
|
||
height: 100px;
|
||
cursor: pointer;
|
||
line-height: 106px;
|
||
}
|
||
.el-upload-list--picture-card .el-upload-list__item {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
.el-timeline-item__wrapper {
|
||
width: 90%;
|
||
}
|
||
.el-divider--horizontal {
|
||
margin: 20px 0;
|
||
}
|
||
.info-wrap {
|
||
width: 100%;
|
||
padding: 10px 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
background: gainsboro;
|
||
margin-bottom: 10px;
|
||
min-height: 150px;
|
||
height: 100%;
|
||
.el-row {
|
||
width: 100%;
|
||
}
|
||
}
|
||
.feedback-wrap {
|
||
min-height: 200px;
|
||
height: 100%;
|
||
}
|
||
.form-submit-div {
|
||
width: 100%;
|
||
height: 50px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
.item-block-img {
|
||
width: 100%;
|
||
display: flex;
|
||
height: 100%;
|
||
flex-wrap: wrap;
|
||
.label-wrap {
|
||
display: block;
|
||
height: 50px;
|
||
width: 100px;
|
||
text-align: right;
|
||
padding-right: 12px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
.img-list-wrap {
|
||
width: calc(100% - 120px);
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.img-show {
|
||
overflow: hidden;
|
||
display: flex;
|
||
width: 100px;
|
||
margin-right: 10px;
|
||
flex-wrap: wrap;
|
||
height: 100px;
|
||
> img {
|
||
width: 100px;
|
||
height: 100px;
|
||
margin-right: 10px;
|
||
border: 1px solid #cfcece;
|
||
border-radius: 3px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.img-option-wrap {
|
||
width: 99px;
|
||
height: 99px;
|
||
position: relative;
|
||
background: #d4d3d380;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #464444;
|
||
left: 0px;
|
||
display: flex;
|
||
top: -110px;
|
||
> i {
|
||
font-size: 16px;
|
||
margin-right: 10px;
|
||
}
|
||
> i:hover {
|
||
color: #409eff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.avatar-uploader .el-upload:hover {
|
||
border-color: #409eff;
|
||
}
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 100px;
|
||
height: 100px;
|
||
line-height: 100px;
|
||
text-align: center;
|
||
}
|
||
.avatar {
|
||
width: 100px;
|
||
height: 100px;
|
||
display: block;
|
||
}
|
||
.item-block {
|
||
.value-span {
|
||
color: #3f9ab5;
|
||
}
|
||
}
|
||
}
|
||
.maintennce-details::-webkit-scrollbar {
|
||
/*滚动条整体样式*/
|
||
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
||
height: 5px;
|
||
}
|
||
.maintennce-details::-webkit-scrollbar-thumb {
|
||
/*滚动条里面小方块*/
|
||
border-radius: 10px;
|
||
box-shadow: inset 0 0 5px #c4c4c4;
|
||
background: #dededea6;
|
||
}
|
||
.maintennce-details::-webkit-scrollbar-track {
|
||
/*滚动条里面轨道*/
|
||
box-shadow: inset 0 0 5px #f6f6f6;
|
||
border-radius: 10px;
|
||
background: #ffffff;
|
||
}
|
||
</style>
|