<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
|
<el-form-item label="工单号" prop="workOrderNo">
|
<el-input
|
v-model="queryParams.workOrderNo"
|
placeholder="请输入工单号"
|
clearable
|
@clear="handleQuery"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="故障类型" prop="workOrderNo">
|
<el-select v-model="queryParams.errorType" placeholder="故障类型" clearable @clear="handleQuery">
|
<el-option label="市政施工" value="市政施工"></el-option>
|
<el-option label="设备遗失" value="设备遗失"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="审核状态" prop="status">
|
<el-select v-model="queryParams.status" placeholder="审核状态" clearable @clear="handleQuery">
|
<el-option label="已下发" value="DISTRIBUTED"></el-option>
|
<el-option label="运维已处理" value="YW_HANDLE"></el-option>
|
<el-option label="审核通过" value="AUDITING_SUCCESS"></el-option>
|
<el-option label="审核不通过" value="AUDITING_FAIL"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="运维处理时间">
|
<el-date-picker
|
clearable
|
@clear="handleQuery"
|
v-model="daterangeYwHandleTime"
|
style="width: 240px"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-row :gutter="20">
|
<el-col :xl="6" :lg="8" :md="12" :sm="24" v-for="item in workOrderList" :key="item" style="margin-bottom: 20px;">
|
<el-card :body-style="{ padding: '0px',display: 'flex' }">
|
<el-image :preview-src-list="['https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357']" fit="cover" src="https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357" class="image"/>
|
<div style="padding-right: 10px;padding-top: 10px;">
|
<el-row>
|
<el-col :span="24" class="time">故障类型：<el-tag size="small" type="danger">市政施工</el-tag></el-col>
|
</el-row>
|
<el-row class="work-order-item">
|
<el-col class="time" :span="24">运维人员：{{ item.ywPeopleName }}</el-col>
|
</el-row>
|
<el-row class="work-order-item">
|
<el-col class="time" :span="24">运维单位：{{ item.unitName }}</el-col>
|
</el-row>
|
<el-row class="work-order-item">
|
<el-col :span="24" class="time">工单编号：{{ item.workOrderNo }}</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24" class="time">处理时间：{{ item.ywHandleTime }}</el-col>
|
</el-row>
|
<el-row>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleAuditing(item)"
|
v-hasPermi="['work:order:audit']"
|
>审核</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleYwCondition(item)"
|
>运维情况</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleFlow(item)"
|
>过程图</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleReport(item)"
|
v-hasPermi="['system:report:add']"
|
>事后报备</el-button>
|
</el-row>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
|
<!-- 事后报备 -->
|
<el-dialog title="事后报备" :visible.sync="reportOpen" width="600px" append-to-body>
|
<el-form ref="reportForm" :model="reportForm" :rules="reportFormRules" label-width="80px">
|
<el-form-item label="点位" prop="source">
|
<el-input v-model="reportForm.source" disabled />
|
</el-form-item>
|
<el-form-item label="报备类型">
|
<el-input v-model="reportForm.reportType" disabled />
|
</el-form-item>
|
<el-form-item label="故障类型" prop="errorType">
|
<el-select v-model="reportForm.errorType">
|
<el-option label="市政施工" value="市政施工"/>
|
<el-option label="设备故障" value="设备故障"/>
|
<el-option label="设备遗失" value="设备遗失"/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="报备内容" prop="reportContent">
|
<editor v-model="reportForm.reportContent" :min-height="192"/>
|
</el-form-item>
|
<el-form-item label="上报材料" prop="reportMaterials">
|
<file-upload v-model="reportForm.reportMaterials"/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitReportForm">提 交</el-button>
|
<el-button @click="reportOpen = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
|
<el-dialog title="工单审核" :visible.sync="auditingOpen" width="500px" append-to-body>
|
<el-form ref="auditingForm" :model="auditingForm" :rules="auditingRules" label-width="80px">
|
<el-form-item label="工单号" prop="workOrderNo">
|
<el-input v-model="auditingForm.workOrderNo" disabled />
|
</el-form-item>
|
<el-form-item label="运维单位" prop="unitName">
|
<el-input v-model="auditingForm.unitName" disabled />
|
</el-form-item>
|
<el-form-item label="运维人员" prop="ywPeopleName">
|
<el-input v-model="auditingForm.ywPeopleName" disabled />
|
</el-form-item>
|
<el-form-item label="现场情况" v-if="auditingForm.condition">
|
<el-input type="textarea" v-html="auditingForm.condition" disabled />
|
</el-form-item>
|
<el-form-item label="佐证材料" v-if="auditingForm.proofMaterials">
|
<el-link v-for="item in auditingForm.proofMaterials != null ? auditingForm.proofMaterials.split(',') : auditingForm.proofMaterials" :underline="false" :key="item" @click="handleDownload(item)">{{ item.substring(item.lastIndexOf("/") + 1) }}</el-link>
|
</el-form-item>
|
<el-form-item label="审核结果" prop="auditingResult">
|
<el-radio v-model="auditingForm.auditingResult" label="AUDITING_SUCCESS">通过</el-radio>
|
<el-radio v-model="auditingForm.auditingResult" label="AUDITING_FAIL">驳回</el-radio>
|
</el-form-item>
|
<el-form-item label="审核备注" prop="auditingRemark">
|
<el-input v-model="auditingForm.auditingRemark" type="textarea" maxlength="30" show-word-limit/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitAuditing">确 定</el-button>
|
<el-button @click="cancelAuditing">取 消</el-button>
|
</div>
|
</el-dialog>
|
|
<el-dialog title="运维情况记录" :visible.sync="ywConditionOpen" width="500px" append-to-body>
|
<el-form ref="form" :model="form" :rules="ywConditionRules" label-width="80px">
|
<el-form-item label="工单号" prop="workOrderNo">
|
<el-input v-model="ywConditionForm.workOrderNo" disabled />
|
</el-form-item>
|
<el-form-item label="运维单位" prop="unitName">
|
<el-input v-model="ywConditionForm.unitName" disabled />
|
</el-form-item>
|
<el-form-item label="运维人员" prop="ywPeopleName">
|
<el-input v-model="ywConditionForm.ywPeopleName" disabled />
|
</el-form-item>
|
<el-form-item label="现场情况" prop="ywCondition">
|
<editor v-model="form.ywCondition" :min-height="192"/>
|
</el-form-item>
|
<el-form-item label="佐证材料" prop="ywProofMaterials">
|
<file-upload v-model="form.ywProofMaterials"/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitYwCondition">确 定</el-button>
|
<el-button @click="cancelYwCondition">取 消</el-button>
|
</div>
|
</el-dialog>
|
|
|
<!-- 过程图 -->
|
<el-dialog title="过程图" :visible.sync="flowOpen" width="1200px" :close-on-click-modal="false" append-to-body>
|
<div>
|
<el-steps :active="ywAuditingList.length != 0 ? 3 : ywHandleList.length != 0 ? 2 : 1" :space="500">
|
<el-step title="产生工单">
|
<template slot="description">
|
<div>
|
<div class="flow-item-x">
|
工单来源：<el-tag type="danger" size="small">{{flowForm.source}}</el-tag>
|
</div>
|
<div class="flow-item-x">
|
故障类型：{{flowForm.errorType}}
|
</div>
|
<div class="flow-item-x">
|
运维单位：{{flowForm.unitName}}
|
</div>
|
<div class="flow-item-x">
|
创建时间：{{flowForm.createTime}}
|
</div>
|
<div class="flow-item-x" v-if="flowForm.processingPeriod">
|
处理期限：<el-tag type="danger" size="small">{{ flowForm.processingPeriod }}</el-tag>
|
</div>
|
</div>
|
</template>
|
</el-step>
|
<el-step title="运维处理">
|
<template slot="description">
|
<div class="y-item" v-for="(item, index) in ywHandleList">
|
<div class="y-item-1">
|
<div class="flow-item-x">
|
现场情况：
|
<el-tooltip class="item" effect="dark" :content="item.ywCondition" placement="top">
|
<el-tag size="small" class="line-limit-length">{{ item.ywCondition }}</el-tag>
|
</el-tooltip>
|
</div>
|
<!-- <div class="flow-item-x">
|
<el-tag size="small" v-for="file in item.ywProofMaterials != null ? item.ywProofMaterials.split(',') : item.ywProofMaterials" :key="file" @click="handleDownload(file)">{{ file.substring(file.lastIndexOf("/") + 1) }}</el-tag>
|
</div> -->
|
</div>
|
<div class="y-item-2">
|
<div >
|
{{ parseTime(item.createTime) }}
|
</div>
|
<div >
|
第几次：{{ index + 1 }}
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-step>
|
<el-step title="结果审核">
|
<template slot="description">
|
<div class="y-item" v-for="(item, index) in ywAuditingList">
|
<div class="y-item-1">
|
<div class="flow-item-x">
|
审核结果：<el-tag :type="item.result == '审核通过' ? 'success' : 'danger'" size="small">{{ item.result }}</el-tag>
|
</div>
|
<div class="flow-item-x">
|
审核说明：<el-tag size="small" v-if="item.remark">{{ item.remark }}</el-tag>
|
</div>
|
</div>
|
<div class="y-item-2">
|
<div >
|
{{ parseTime(item.createTime) }}
|
</div>
|
<div >
|
第几次：{{ index + 1 }}
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-step>
|
</el-steps>
|
</div>
|
</el-dialog>
|
|
</div>
|
</template>
|
<style scoped>
|
.flow-item-x {
|
margin: 5px 0;
|
}
|
.y-item {
|
margin-bottom: 8px;
|
padding: 0 3px;
|
background-color: #d9d9d9;
|
display: flex;
|
flex-direction: row;
|
align-items: center
|
}
|
.y-item-2 {
|
flex: 1;
|
}
|
.y-item-1 {
|
flex: 2;
|
}
|
</style>
|
<script>
|
import { listWorkOrder, getWorkOrder, delWorkOrder, addWorkOrder, updateWorkOrder,auditing, ywCondition, getYwCondition, getYwConditionList, getYwAuditingList } from "@/api/platform/work-order";
|
import { addReport } from "@/api/platform/report";
|
export default {
|
name: "Work-order",
|
components: {
|
},
|
data() {
|
return {
|
ywHandleList: [],
|
ywAuditingList: [],
|
reportFormRules: {
|
reportContent: [
|
{ required: true, message: "报备内容不能为空", trigger: "blur" }
|
],
|
reportMaterials: [
|
{ required: true, message: "上报材料不能为空", trigger: "blur" }
|
],
|
},
|
reportOpen: false,
|
reportForm: {
|
reportType: "事后报备",
|
pointId: "",
|
errorType: "",
|
reportContent: "",
|
reportMaterials: ""
|
},
|
// 过程图
|
flowOpen: false,
|
flowForm: {},
|
certificateList:[],
|
pictureList: [],
|
// 遮罩层
|
loading: true,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 运维工单表格数据
|
workOrderList: [],
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
open: false,
|
// 运维检测结果时间范围
|
daterangeYwHandleTime: [],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
workOrderNo: null,
|
unitId: null,
|
ywPeopleId: null,
|
ywHandleTime: null,
|
ywResult: null,
|
ywCondition: null,
|
status: ''
|
},
|
// 表单参数
|
form: {},
|
// 审核表单
|
auditingForm: {},
|
auditingOpen: false,
|
// 运维情况表单
|
ywConditionForm: {},
|
ywConditionOpen: false,
|
// 运维结果表单
|
ywResultForm: {
|
|
},
|
ywResultOpen: false,
|
// 运维检测结果
|
checkResultForm: {
|
|
},
|
checkResultOpen: false,
|
// 审核表单校验
|
auditingRules: {
|
auditingResult: [
|
{ required: true, message: "审核结果不能为空", trigger: "blur" }
|
],
|
},
|
// 运维情况校验
|
ywConditionRules: {
|
ywCondition: [
|
{ required: true, message: "运维情况不能为空", trigger: "blur" }
|
],
|
},
|
// 运维结果校验
|
ywResultRules: {
|
ywResult: [
|
{ required: true, message: "运维结果不能为空", trigger: "blur" }
|
],
|
},
|
// 运维检测结果校验
|
checkResultRules: {
|
ywCheckResult: [
|
{ required: true, message: "运维检测结果不能为空", trigger: "blur" }
|
],
|
},
|
};
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
/** 下载按钮操作 */
|
handleDownload (data) {
|
this.$download.resource(data);
|
},
|
// 报备
|
submitReportForm() {
|
this.$refs["reportForm"].validate(valid => {
|
if (valid) {
|
addReport(this.reportForm).then(response => {
|
this.$modal.msgSuccess("成功提交报备");
|
this.reportOpen = false;
|
this.getList();
|
});
|
}
|
});
|
},
|
// 事后报备按钮
|
handleReport(row) {
|
this.reportForm.pointId = row.pointId;
|
this.reportForm.source = row.source;
|
this.reportOpen = true;
|
},
|
// 审核按钮
|
handleAuditing(row) {
|
this.auditingForm = row;
|
getYwCondition(row.id).then(response => {
|
if (response.data) {
|
this.auditingForm.condition = response.data.ywCondition;
|
this.auditingForm.proofMaterials = response.data.ywProofMaterials;
|
}
|
this.auditingOpen = true;
|
});
|
},
|
// 运维情况按钮
|
handleYwCondition(row) {
|
this.form = {};
|
this.ywConditionForm = row;
|
this.ywConditionOpen = true;
|
this.form.id = row.id;
|
},
|
// 运维结果按钮
|
handleYwResult(row) {
|
this.ywResultForm = row;
|
this.ywResultOpen = true;
|
},
|
// 运维检测结果按钮
|
handleCheckResult(row) {
|
this.checkResultForm = row;
|
this.checkResultOpen = true;
|
},
|
// 过程图查看
|
handleFlow(row) {
|
this.flowForm = row;
|
getYwAuditingList(row.id).then(response => {
|
if (response.data) {
|
this.ywAuditingList = response.data;
|
}
|
});
|
getYwConditionList(row.id).then(response => {
|
if (response.data) {
|
this.ywHandleList = response.data;
|
}
|
this.flowOpen = true;
|
});
|
},
|
// 提交审核
|
submitAuditing() {
|
this.$refs["auditingForm"].validate(valid => {
|
if (valid) {
|
auditing(this.auditingForm).then(res => {
|
this.auditingOpen = false;
|
this.$modal.msgSuccess("操作成功");
|
this.getList();
|
})
|
}
|
})
|
},
|
// 取消审核
|
cancelAuditing() {
|
this.auditingForm = {};
|
this.auditingOpen = false;
|
},
|
pictureRemove(file, fileList) {
|
this.form.picture = null,
|
|
this.pictureList = this.pictureList.filter(item => item.name !== file.name)
|
},
|
certificateRemove(file, fileList) {
|
this.form.certificate = null,
|
|
this.certificateList = this.certificateList.filter(item => item.name !== file.name)
|
},
|
pictureUploadSuccess(response, file, fileList) {
|
this.form.picture = response.fileName,
|
this.pictureList.push({
|
name: response.originalFilename,
|
url: response.url,
|
fileName: response.fileName
|
})
|
},
|
certificateUploadSuccess(response, file, fileList) {
|
this.form.certificate = response.fileName,
|
this.certificateList.push({
|
name: response.originalFilename,
|
url: response.url,
|
fileName: response.fileName
|
})
|
},
|
// 提交运维情况
|
submitYwCondition() {
|
this.$refs["form"].validate(valid => {
|
if (valid) {
|
ywCondition(this.form).then(res => {
|
this.ywConditionOpen = false;
|
this.$modal.msgSuccess("操作成功");
|
this.getList();
|
})
|
}
|
})
|
},
|
cancelYwCondition() {
|
this.ywConditionForm = {};
|
this.ywConditionOpen = false;
|
},
|
// 提交运维结果
|
submitYwResult() {
|
// todo
|
},
|
cancelYwResult() {
|
this.ywResultForm = {};
|
this.ywResultOpen = false;
|
},
|
// 提交检测结果
|
submitCheckResult() {
|
// todo
|
},
|
cancelCheckResult() {
|
this.checkResultForm = {};
|
this.checkResultOpen = false;
|
},
|
/** 查询运维工单列表 */
|
getList() {
|
this.loading = true;
|
this.queryParams.params = {};
|
this.queryParams["start"] = this.daterangeYwHandleTime[0];
|
this.queryParams["end"] = this.daterangeYwHandleTime[1];
|
if (this.queryParams["status"] == "") { this.queryParams["status"] = "DISTRIBUTED"; }
|
listWorkOrder(this.queryParams).then(response => {
|
this.workOrderList = response.data;
|
this.total = response.total;
|
this.loading = false;
|
});
|
},
|
// 取消按钮
|
cancel() {
|
this.open = false;
|
this.reset();
|
},
|
// 表单重置
|
reset() {
|
this.form = {
|
id: null,
|
workOrderNo: null,
|
unitId: null,
|
ywPeopleId: null,
|
ywHandleTime: null,
|
ywResult: null,
|
ywCondition: null,
|
ywCheckResult: null,
|
createTime: null,
|
updateTime: null,
|
deleted: null
|
};
|
this.resetForm("form");
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.daterangeYwHandleTime = [];
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.ids = selection.map(item => item.id)
|
this.single = selection.length!==1
|
this.multiple = !selection.length
|
},
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.reset();
|
this.open = true;
|
this.title = "添加运维工单";
|
},
|
/** 修改按钮操作 */
|
handleUpdate(row) {
|
this.reset();
|
const id = row.id || this.ids
|
getWorkOrder(id).then(response => {
|
this.form = response.data;
|
this.open = true;
|
this.title = "修改运维工单";
|
this.pictureList = JSON.parse(response.data.picture).map(item => {
|
return {
|
name: item,
|
url: process.env.VUE_APP_FILE_API + '/' + item,
|
fileName: item
|
}
|
})
|
this.certificateList = JSON.parse(row.certificate).map(item => {
|
return {
|
name: item,
|
url: process.env.VUE_APP_FILE_API + '/' + item,
|
fileName: item
|
}
|
})
|
});
|
},
|
/** 提交按钮 */
|
submitForm() {
|
this.$refs["form"].validate(valid => {
|
if (valid) {
|
if (this.form.id != null) {
|
updateWorkOrder(this.form).then(response => {
|
this.$modal.msgSuccess("修改成功");
|
this.open = false;
|
this.getList();
|
});
|
} else {
|
addWorkOrder(this.form).then(response => {
|
this.$modal.msgSuccess("新增成功");
|
this.open = false;
|
this.getList();
|
});
|
}
|
}
|
});
|
},
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
const ids = row.id || this.ids;
|
this.$modal.confirm('是否确认删除运维工单编号为"' + ids + '"的数据项？').then(function() {
|
return delWorkOrder(ids);
|
}).then(() => {
|
this.getList();
|
this.$modal.msgSuccess("删除成功");
|
}).catch(() => {});
|
},
|
/** 导出按钮操作 */
|
handleExport() {
|
this.download('/work-order/export', {
|
...this.queryParams
|
}, `work-order_${new Date().getTime()}.xlsx`)
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.work-order-item {
|
margin-bottom: 5px;
|
}
|
.time {
|
font-size: 13px;
|
color: #999;
|
}
|
|
.image {
|
width: 165px;
|
height: 150px;
|
padding: 10px;
|
}
|
|
.line-limit-length {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
width: 200px;
|
}
|
</style>
|
