You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1799 lines
60 KiB
Vue

<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="88px"
>
<el-form-item label="报修单号" prop="orderCode">
<el-input
v-model="queryParams.orderCode"
placeholder="请输入报修单号"
style="width: 200px"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="设备编码" prop="equipmentCode">
<el-input
v-model="queryParams.equipmentCode"
placeholder="请输入设备编码"
style="width: 200px"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="故障时间" prop="orderBreakdownTime">
<el-date-picker
v-model="queryParams.orderBreakdownTimeArray"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions1"
>
</el-date-picker>
</el-form-item>
<el-form-item label="报修来源" prop="orderSource">
<el-select
v-model="queryParams.orderSource"
style="width: 150px"
clearable
>
<el-option
v-for="dict in dict.type.device_order_source"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="报修人编号" prop="orderRepairmanCode">
<el-input
v-model="queryParams.orderRepairmanCode"
placeholder="请输入报修人编号"
style="width: 200px"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="联系方式" prop="orderConnection">
<el-input
v-model="queryParams.orderConnection"
placeholder="请输入联系方式"
style="width: 200px"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="报修时间" prop="orderTime">
<el-date-picker
v-model="queryParams.orderTimeArray"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions2"
>
</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="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['device:faultReport:add']"
>添加报修</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['device:faultReport:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['device:faultReport:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['device:faultReport:export']"
>导出</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-circle-check"
size="mini"
@click="handleCheck"
:disabled="single"
v-hasPermi="['device:faultReport:check']"
>审核</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="faultReportList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<!-- 序号 -->
<el-table-column
type="index"
width="90"
align="center"
:index="indexMethod"
label="序号"
fixed
/>
<el-table-column
label="报修单号"
align="center"
prop="orderCode"
width="200"
fixed
>
<template slot-scope="scope">
<el-button
type="text"
@click="handleView(scope.row)"
v-hasPermi="['device:faultReport:query']"
>{{ scope.row.orderCode }}</el-button
>
</template>
</el-table-column>
<el-table-column
label="设备编码"
align="center"
prop="equipmentCode"
width="100"
/>
<el-table-column
label="故障描述"
align="center"
prop="orderDesc"
width="200"
:show-overflow-tooltip="true"
/>
<el-table-column
label="故障时间"
align="center"
prop="orderBreakdownTime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.orderBreakdownTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="报修来源"
align="center"
prop="orderSource" />
<el-table-column
label="报修时间"
align="center"
prop="orderTime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.orderTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="报修人编号"
align="center"
prop="orderRepairmanCode"
width="150"
/>
<el-table-column
label="报修人名字"
align="center"
prop="orderRepairmanName"
width="150"
:show-overflow-tooltip="true"
/>
<el-table-column
label="联系方式"
align="center"
prop="orderConnection"
width="120"
/>
<el-table-column
label="处理状态"
align="center"
prop="orderStatus" />
<el-table-column
label="报修去向"
align="center"
prop="repairDestination"
width="120"
/>
<el-table-column
label="创建人"
align="center"
prop="createBy"
:show-overflow-tooltip="true"
/>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.orderBreakdownTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="180"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['device:faultReport:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['device:faultReport:remove']"
>删除</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-circle-check"
@click="handleCheck(scope.row)"
v-hasPermi="['device:faultReport:check']"
>审核</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 审核故障报修对话框 -->
<el-dialog
:title="title"
:visible.sync="openCheck"
width="1200px"
append-to-body
v-if="openCheck"
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-tabs type="border-card">
<el-tab-pane label="基本信息">
<el-descriptions
:column="3"
border
:contentStyle="CS"
:label-style="LS"
>
<el-descriptions-item label="设备编码">{{
form.equipmentCode
}}</el-descriptions-item>
<el-descriptions-item label="故障时间">{{
form.orderBreakdownTime
}}</el-descriptions-item>
<el-descriptions-item label="报修来源">{{
form.orderSource
}}</el-descriptions-item>
<el-descriptions-item label="报修时间">{{
form.orderTime
}}</el-descriptions-item>
<el-descriptions-item label="报修人名字">{{
form.orderRepairmanName
}}</el-descriptions-item>
<el-descriptions-item label="联系方式">{{
form.orderConnection
}}</el-descriptions-item>
<el-descriptions-item label="故障描述">{{
form.orderDesc
}}</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="1" border>
<el-descriptions-item
label="故障图片"
:contentStyle="CS"
:label-style="LSP"
>
<el-image
v-for="(item, index) in urlLists"
:key="index"
:src="item"
></el-image
></el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<el-tab-pane label="检查项信息" v-if="checkList != null">
<el-table
:data="checkList"
border
style="width: 100%"
:span-method="objectSpanMethod"
>
<el-table-column prop="itemTypeName" label="检查类型" width="100">
</el-table-column>
<el-table-column prop="itemName" label="检查项名称" width="160">
</el-table-column>
<el-table-column prop="itemMethod" label="方法" width="100">
</el-table-column>
<el-table-column prop="itemTools" label="工具" width="60">
</el-table-column>
<el-table-column prop="standardName" label="标准名称" width="180">
</el-table-column>
<el-table-column prop="standardType" label="标准类型" width="85">
</el-table-column>
<el-table-column prop="planLoopType" label="周期" width="50">
</el-table-column>
<el-table-column prop="planLoop" label="次" width="37">
</el-table-column>
<el-table-column prop="detailReach" label="是否达标" width="80">
<template slot-scope="scope">
<dict-tag
:options="dict.type.device_reach_standard"
:value="scope.row.detailReach"
/>
</template>
</el-table-column>
<el-table-column prop="actualValue" label="实际值" width="70">
</el-table-column>
<el-table-column prop="detailUpLimit" label="上限" width="50">
</el-table-column>
<el-table-column prop="detailDownLimit" label="下限" width="50">
</el-table-column>
<el-table-column prop="detailUnit" label="单位" width="45">
</el-table-column>
<el-table-column prop="picturePath" label="图片" width="60">
<template slot-scope="scope">
<el-popover placement="right" width="300" trigger="hover">
<div class="standardUrl_body">
<div
v-for="(url, index) in scope.row.standardUrlLists"
:key="index"
>
<el-image :src="url"></el-image>
</div>
</div>
<el-button
slot="reference"
type="primary"
icon="el-icon-picture"
circle
></el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="审核">
<el-row>
<el-col :span="24">
<el-form-item label="报修去向" prop="repairDestination">
<el-radio-group v-model="form.repairDestination">
<el-radio label="计划性维修">计划性维修</el-radio>
<el-radio label="不维修">不维修</el-radio>
<el-radio label="委外维修">委外维修</el-radio>
<el-radio label="立即维修" @click.native="timeBackFilling"
>立即维修</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8" v-if="form.repairDestination == '计划性维修'">
<el-form-item prop="workTeam" label="维修组">
<el-select
v-model="form.workTeam"
placeholder="请选择维修组"
@change="$forceUpdate()"
clearable
filterable
style="width: 200px"
>
<el-option
v-for="item in teamOption"
:key="item.teamCode"
:label="item.teamName"
:value="item.teamCode"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8" v-if="form.repairDestination == '计划性维修'">
<el-form-item prop="workPlanTime" label="计划维修时间">
<el-date-picker
clearable
v-model="form.workPlanTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择计划维修时间"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8" v-if="form.repairDestination == '计划性维修'">
<el-form-item label="是否停机维修" prop="workDownMachine">
<el-radio-group v-model="form.workDownMachine">
<el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col
:span="8"
v-if="
form.repairDestination == '计划性维修' &&
form.workDownMachine == '1'
"
>
<el-form-item prop="workPlanDownTime" label="计划停机时间">
<el-date-picker
clearable
v-model="form.workPlanDownTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择计划停机时间"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col
:span="8"
v-if="
form.repairDestination == '计划性维修' &&
form.workDownMachine == '0'
"
>
<el-form-item prop="workPlanDownTime" label="计划停机时间">
<el-date-picker
clearable
v-model="form.workPlanDownTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
disabled
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8" v-if="form.repairDestination == '立即维修'">
<el-form-item prop="workTeam" label="维修组">
<el-select
v-model="form.workTeam"
placeholder="请选择维修组"
@change="$forceUpdate()"
clearable
filterable
style="width: 200px"
>
<el-option
v-for="item in teamOption"
:key="item.teamCode"
:label="item.teamName"
:value="item.teamCode"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8" v-if="form.repairDestination == '立即维修'">
<el-form-item prop="workPlanTime" label="计划维修时间">
<el-date-picker
clearable
v-model="form.workPlanTime"
type="datetime"
disabled
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8" v-if="form.repairDestination == '立即维修'">
<el-form-item label="是否停机维修" prop="workDownMachine">
<el-radio-group v-model="form.workDownMachine">
<el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col
:span="8"
v-if="
form.repairDestination == '立即维修' &&
form.workDownMachine == '1'
"
>
<el-form-item prop="workPlanDownTime" label="计划停机时间">
<el-date-picker
clearable
v-model="form.workPlanDownTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择计划停机时间"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col
:span="8"
v-if="
form.repairDestination == '立即维修' &&
form.workDownMachine == '0'
"
>
<el-form-item prop="workPlanDownTime" label="计划停机时间">
<el-date-picker
clearable
v-model="form.workPlanDownTime"
type="datetime"
disabled
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8" v-if="form.repairDestination == '委外维修'">
<el-form-item prop="workOutsourcingUnit" label="委外单位">
<el-input
v-model="form.workOutsourcingUnit"
placeholder="请填写委外单位"
/>
</el-form-item>
</el-col>
<el-col :span="8" v-if="form.repairDestination == '委外维修'">
<el-form-item prop="outSourcePerson" label="委外维修人员">
<el-input
v-model="form.outSourcePerson"
placeholder="请填写委外维修人员"
/>
</el-form-item>
</el-col>
<el-col :span="8" v-if="form.repairDestination == '委外维修'">
<el-form-item prop="workConnection" label="联系方式">
<el-input
v-model="form.workConnection"
placeholder="请填写委外联系方式"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24" v-if="form.repairDestination == '委外维修'">
<el-form-item prop="outSourceReason" label="委外原因">
<el-input
v-model="form.outSourceReason"
placeholder="请输入委外原因"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitCheckForm">确 定</el-button>
<el-button @click="cancelCheckForm">返 回</el-button>
</div>
</el-dialog>
<!-- 查看审核故障报修对话框 -->
<el-dialog
:title="title"
:visible.sync="viewCheck"
width="1200px"
append-to-body
v-if="viewCheck"
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-tabs type="border-card">
<el-tab-pane label="基本信息">
<el-descriptions
:column="3"
border
:contentStyle="CS"
:label-style="LS"
>
<el-descriptions-item label="设备编码">{{
form.equipmentCode
}}</el-descriptions-item>
<el-descriptions-item label="设备名称">{{
form.equipmentName
}}</el-descriptions-item>
<el-descriptions-item label="设备类型">{{
form.equipmentTypeName
}}</el-descriptions-item>
<el-descriptions-item label="规格型号">{{
form.equipmentSpec
}}</el-descriptions-item>
<el-descriptions-item label="所在部门">{{
form.department
}}</el-descriptions-item>
<el-descriptions-item label="所在位置">{{
form.equipmentLocation
}}</el-descriptions-item>
<el-descriptions-item label="故障时间">{{
form.orderBreakdownTime
}}</el-descriptions-item>
<el-descriptions-item label="报修来源">{{
form.orderSource
}}</el-descriptions-item>
<el-descriptions-item label="报修时间">{{
form.orderTime
}}</el-descriptions-item>
<el-descriptions-item label="报修人名字">{{
form.orderRepairmanName
}}</el-descriptions-item>
<el-descriptions-item label="联系方式">{{
form.orderConnection
}}</el-descriptions-item>
<el-descriptions-item label="故障描述">{{
form.orderDesc
}}</el-descriptions-item>
</el-descriptions>
<el-descriptions
:column="1"
border
:contentStyle="CS"
:label-style="LSP"
>
<el-descriptions-item label="故障图片">
<el-image
v-for="(item, index) in urlLists"
:key="index"
:src="item"
></el-image
></el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<el-tab-pane label="检查项信息" v-if="checkList != null">
<el-table
:data="checkList"
border
style="width: 100%"
:span-method="objectSpanMethod"
>
<el-table-column prop="itemTypeName" label="检查类型" width="100">
</el-table-column>
<el-table-column prop="itemName" label="检查项名称" width="160">
</el-table-column>
<el-table-column prop="itemMethod" label="方法" width="100">
</el-table-column>
<el-table-column prop="itemTools" label="工具" width="60">
</el-table-column>
<el-table-column prop="standardName" label="标准名称" width="180">
</el-table-column>
<el-table-column prop="standardType" label="标准类型" width="85">
</el-table-column>
<el-table-column prop="planLoopType" label="周期" width="50">
</el-table-column>
<el-table-column prop="planLoop" label="次" width="37">
</el-table-column>
<el-table-column prop="detailReach" label="是否达标" width="80">
<template slot-scope="scope">
<dict-tag
:options="dict.type.device_reach_standard"
:value="scope.row.detailReach"
/>
</template>
</el-table-column>
<el-table-column prop="actualValue" label="实际值" width="70">
</el-table-column>
<el-table-column prop="detailUpLimit" label="上限" width="50">
</el-table-column>
<el-table-column prop="detailDownLimit" label="下限" width="50">
</el-table-column>
<el-table-column prop="detailUnit" label="单位" width="45">
</el-table-column>
<el-table-column prop="picturePath" label="图片" width="60">
<template slot-scope="scope">
<el-popover placement="right" width="300" trigger="hover">
<div class="standardUrl_body">
<div
v-for="(url, index) in scope.row.standardUrlLists"
:key="index"
>
<el-image :src="url"></el-image>
</div>
</div>
<el-button
slot="reference"
type="primary"
icon="el-icon-picture"
circle
></el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="报修审核结果">
<el-descriptions
:column="3"
border
:contentStyle="CS"
:label-style="LS"
v-if="form.repairDestination == '计划性维修'"
>
<el-descriptions-item label="审核结果">{{
form.orderStatus
}}</el-descriptions-item>
<el-descriptions-item label="报修去向">{{
form.repairDestination
}}</el-descriptions-item>
<el-descriptions-item label="维修组">{{
form.workTeam
}}</el-descriptions-item>
<el-descriptions-item label="计划维修时间">{{
form.workPlanTime
}}</el-descriptions-item>
<el-descriptions-item label="是否停机维修">{{
form.workDownMachine ? "是" : "否"
}}</el-descriptions-item>
<el-descriptions-item label="计划停机时间">{{
form.workPlanDownTime
}}</el-descriptions-item>
</el-descriptions>
<el-descriptions
:column="2"
border
v-if="form.repairDestination == '立即维修'"
>
<el-descriptions-item label="报修去向">{{
form.repairDestination
}}</el-descriptions-item>
<el-descriptions-item label="维修组">{{
form.workTeam
}}</el-descriptions-item>
<el-descriptions-item label="计划维修时间">{{
form.workPlanTime
}}</el-descriptions-item>
<el-descriptions-item label="是否停机维修">{{
form.workDownMachine ? "是" : "否"
}}</el-descriptions-item>
<el-descriptions-item label="计划停机时间">{{
form.workPlanDownTime
}}</el-descriptions-item>
</el-descriptions>
<el-descriptions
:column="1"
border
v-if="form.repairDestination == '不维修'"
>
<el-descriptions-item label="报修去向">{{
form.repairDestination
}}</el-descriptions-item>
</el-descriptions>
<el-descriptions
:column="2"
border
v-if="form.repairDestination == '委外维修'"
>
<el-descriptions-item label="报修去向">{{
form.repairDestination
}}</el-descriptions-item>
<el-descriptions-item label="委外单位">{{
form.workOutsourcingUnit
}}</el-descriptions-item>
<el-descriptions-item label="委外人员">{{
form.outSourcePerson
}}</el-descriptions-item>
<el-descriptions-item label="委外联系方式">{{
form.workConnection
}}</el-descriptions-item>
</el-descriptions>
<el-descriptions
:column="2"
border
v-if="form.repairDestination == '委外维修'"
>
<el-descriptions-item label="委外原因">{{
form.outSourceReason
}}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
</el-tabs>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelCheckForm">返 回</el-button>
</div>
</el-dialog>
<!-- 添加或修改故障报修对话框 -->
<el-dialog
:title="title"
:visible.sync="open"
width="1000px"
append-to-body
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row :gutter="10" class="mb8">
<el-col :span="8">
<el-form-item label="设备编码" prop="equipmentCode">
<el-input
v-model="form.equipmentCode"
placeholder="请选择设备编码"
style="width: 200px"
>
<el-button
slot="append"
@click="handleSelectEquipment"
icon="el-icon-search"
></el-button>
</el-input>
<ItemSelect
ref="itemSelect"
@onSelected="onItemSelectedEquipment"
>
</ItemSelect>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="故障时间" prop="orderBreakdownTime">
<el-date-picker
clearable
v-model="form.orderBreakdownTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="报修时间"
style="width: 200px"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="报修来源" prop="orderSource">
<el-select v-model="form.orderSource" style="width: 200px">
<el-option
v-for="dict in dict.type.device_order_source"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="8">
<el-form-item label="报修时间" prop="orderTime">
<el-date-picker
clearable
v-model="form.orderTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="报修时间"
style="width: 200px"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="报修人编号" prop="orderRepairmanCode">
<el-input
v-model="form.orderRepairmanCode"
placeholder="请选择报修人编号"
style="width: 200px"
>
<el-button
slot="append"
@click="handleSelectPerson"
icon="el-icon-search"
></el-button>
</el-input>
<ItemSelectPerson
ref="itemSelectPerson"
@onSelected="onItemSelectedPerson"
>
</ItemSelectPerson>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="报修人名字" prop="orderRepairmanName">
<el-input
v-model="form.orderRepairmanName"
style="width: 200px"
disabled
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系方式" prop="orderConnection">
<el-input
v-model="form.orderConnection"
style="width: 200px"
placeholder="请输入联系方式"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="故障描述" prop="orderDesc">
<el-select
v-model="form.orderDesc"
@change="$forceUpdate()"
@blur="selectBlur"
clearable
filterable
style="width: 200px"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="item in orderDescOption"
:key="item.faultCode"
:label="item.faultSubclass"
:value="item.faultSubclass"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="故障图片" prop="orderPicture">
<FileUpload v-model="form.fileList" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 查看报修对话框 -->
<el-dialog
:title="title"
:visible.sync="openView"
width="1200px"
append-to-body
v-if="openView"
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-tabs type="border-card" :key="new Date().getTime()">
<el-tab-pane label="基本信息">
<el-descriptions
:column="3"
border
:contentStyle="CS"
:label-style="LS"
>
<el-descriptions-item label="设备编码">{{
form.equipmentCode
}}</el-descriptions-item>
<el-descriptions-item label="故障时间">{{
form.orderBreakdownTime
}}</el-descriptions-item>
<el-descriptions-item label="报修来源">{{
form.orderSource
}}</el-descriptions-item>
<el-descriptions-item label="报修时间">{{
form.orderTime
}}</el-descriptions-item>
<el-descriptions-item label="报修人名字">{{
form.orderRepairmanName
}}</el-descriptions-item>
<el-descriptions-item label="联系方式">{{
form.orderConnection
}}</el-descriptions-item>
<el-descriptions-item label="故障描述">{{
form.orderDesc
}}</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="1" border>
<el-descriptions-item
label="故障图片"
:contentStyle="CS"
:label-style="LSP"
>
<div class="view_picture_body">
<el-image
v-for="(item, index) in urlLists"
:key="index"
:src="item"
></el-image>
</div>
</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<el-tab-pane label="检查项信息" v-if="checkList != null">
<el-table
:data="checkList"
border
style="width: 100%"
:span-method="objectSpanMethod"
>
<el-table-column prop="itemTypeName" label="检查类型" width="100">
</el-table-column>
<el-table-column prop="itemName" label="检查项名称" width="160">
</el-table-column>
<el-table-column prop="itemMethod" label="方法" width="100">
</el-table-column>
<el-table-column prop="itemTools" label="工具" width="60">
</el-table-column>
<el-table-column prop="standardName" label="标准名称" width="180">
</el-table-column>
<el-table-column prop="standardType" label="标准类型" width="85">
</el-table-column>
<el-table-column prop="planLoopType" label="周期" width="50">
</el-table-column>
<el-table-column prop="planLoop" label="次" width="37">
</el-table-column>
<el-table-column prop="detailReach" label="是否达标" width="80">
<template slot-scope="scope">
<dict-tag
:options="dict.type.device_reach_standard"
:value="scope.row.detailReach"
/>
</template>
</el-table-column>
<el-table-column prop="actualValue" label="实际值" width="70">
</el-table-column>
<el-table-column prop="detailUpLimit" label="上限" width="50">
</el-table-column>
<el-table-column prop="detailDownLimit" label="下限" width="50">
</el-table-column>
<el-table-column prop="detailUnit" label="单位" width="45">
</el-table-column>
<el-table-column prop="picturePath" label="图片" width="60">
<template slot-scope="scope">
<el-popover placement="right" width="300" trigger="hover">
<div class="standardUrl_body">
<div
v-for="(url, index) in scope.row.standardUrlLists"
:key="index"
>
<el-image :src="url"></el-image>
</div>
</div>
<el-button
slot="reference"
type="primary"
icon="el-icon-picture"
circle
></el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelView"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listFaultReport,
getFaultReport,
delFaultReport,
addFaultReport,
updateFaultReport,
getEquipmentList,
checkFaultReport,
} from "@/api/device/faultReport";
import ItemSelect from "./selectSingleEquipment.vue";
import ItemSelectPerson from "./selectSinglePerson.vue";
import { Message } from "element-ui";
import { getMaintenanceTeamList } from "@/api/device/equTeam";
import { listFaultDescription } from "@/api/device/faultDescription";
export default {
name: "FaultReport",
components: { ItemSelect, ItemSelectPerson },
dicts: ["device_order_source", "device_reach_standard"],
data() {
return {
CS: {
"text-align": "center", //文本居中
},
LS: {
"text-align": "center",
width: "110px",
},
LSP: {
"text-align": "center",
width: "110px",
},
LSP2: {
"text-align": "center",
width: "120px",
},
auxiliaryQueryParams: {
pageNum: 1,
pageSize: 1000,
},
//故障描述
orderDescOption: [],
teamOption: [],
//图片存储
fileList: [],
//设备选择
equipmentCodeOption: [],
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 故障报修表格数据
faultReportList: [],
//检查项表格数据
checkList: [],
//url表
urlLists: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
//报修显示弹出层
openView: false,
// 是否显示弹出层
openCheck: false,
//查看审核故障报修页面
viewCheck: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
orderCode: null,
equipmentCode: null,
orderDesc: null,
orderBreakdownTime: null,
orderSource: null,
orderTime: null,
orderHandle: null,
orderRepairmanCode: null,
orderRepairmanName: null,
orderConnection: null,
orderStatus: null,
orderRelevance: null,
orderPicture: null,
attr1: null,
attr2: null,
attr3: null,
createBy: null,
orderBreakdownTimeArray: [],
orderTimeArray: [],
},
// 日期范围选择快捷
pickerOptions1: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
pickerOptions2: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
// 表单参数
form: {},
// 表单校验
rules: {
equipmentCode: [
{ required: true, message: "设备编码不能为空", trigger: "blur" },
],
orderBreakdownTime: [
{ required: true, message: "故障时间不能为空", trigger: "blur" },
],
orderTime: [
{ required: true, message: "报修时间不能为空", trigger: "blur" },
],
},
};
},
created() {
this.getList();
this.getOrderDesc();
},
methods: {
// 生成表头序号
indexMethod(index) {
return index + 1;
},
timeBackFilling() {
var getTime = new Date().getTime(); //获取到当前时间戳
var time = new Date(getTime); //创建一个日期对象
function nowDate(time) {
var year = time.getFullYear(); // 年
var month = (time.getMonth() + 1).toString().padStart(2, "0"); // 月
var date = time.getDate().toString().padStart(2, "0"); // 日
var hour = time.getHours().toString().padStart(2, "0"); // 时
var minute = time.getMinutes().toString().padStart(2, "0"); // 分
var second = time.getSeconds().toString().padStart(2, "0"); // 秒
return (
year +
"-" +
month +
"-" +
date +
" " +
hour +
":" +
minute +
":" +
second
);
}
this.form.workPlanTime = nowDate(time);
},
/** 查询维修措施列表 */
getOrderDesc() {
this.loading = true;
listFaultDescription(this.auxiliaryQueryParams).then((response) => {
this.orderDescOption = response.rows;
});
},
//设备选择
handleSelectEquipment() {
this.$refs.itemSelect.showFlag = true;
},
//人员选择
handleSelectPerson() {
this.$refs.itemSelectPerson.showFlag = true;
},
//人员选择
onItemSelectedPerson(obj) {
this.form.orderRepairmanCode = obj[0].userName;
this.form.orderRepairmanName = obj[0].nickName;
this.form.orderConnection = obj[0].phonenumber;
},
//设备选择
onItemSelectedEquipment(obj) {
this.form.equipmentCode = obj;
},
/** 查询故障报修列表 */
getList() {
this.loading = true;
listFaultReport(this.queryParams).then((response) => {
this.faultReportList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 取消按钮
cancelView() {
this.openView = false;
},
// 审核返回按钮
cancelCheckForm() {
this.viewCheck = false;
},
// 表单重置
reset() {
this.form = {
//报修图片
fileList: null,
//
orderId: null,
orderCode: null,
equipmentCode: null,
orderDesc: null,
orderBreakdownTime: null,
orderSource: null,
orderTime: null,
orderHandle: null,
orderRepairman: null,
orderConnection: null,
orderStatus: null,
orderRelevance: null,
orderPicture: null,
attr1: null,
attr2: null,
attr3: null,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.orderBreakdownTimeArray = null;
this.queryParams.orderTimeArray = null;
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.orderId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.form.orderSource = "PC";
this.open = true;
this.title = "添加故障报修";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const orderId = row.orderId || this.ids;
getFaultReport(orderId).then((response) => {
this.form = response.data;
if (response.data.files != null) {
var newFiles = [];
response.data.files.forEach((item) => {
var newFile = {};
newFile.name = item.fileName;
newFile.url = item.fileAddress;
newFiles.push(newFile);
});
this.form.fileList = newFiles;
}
if (
this.form.orderSource == "点检" ||
this.form.orderSource == "巡检"
) {
Message.warning("点检、巡检报修信息自动生成,不可修改!");
} else {
this.open = true;
this.title = "修改故障报修";
}
});
},
/** 查看按钮操作 */
handleView(row) {
this.reset();
const orderId = row.orderId || this.ids;
getFaultReport(orderId).then((response) => {
this.form = response.data;
//报修故障照片上传
if (response.data.files != null) {
var newFiles = [];
response.data.files.forEach((item) => {
var newFile = {};
newFile.name = item.fileName;
newFile.url = item.fileAddress;
newFiles.push(newFile);
});
this.form.fileList = newFiles;
//报修故障照片
this.urlLists = null;
var urlLists = [];
this.form.fileList.forEach((item) => {
urlLists.push(item.url);
});
this.urlLists = urlLists;
} else if (response.data.files == null) {
this.urlLists = null;
}
//检查项
this.checkList = null;
this.checkList = response.data.checkList;
if (this.checkList != null) {
//检查项遍历
var standards = [];
this.checkList.forEach((item1) => {
//检查项名字
if (item1 != null) {
item1.standardList.forEach((item) => {
var standard = {};
standard.itemTypeName = item1.itemTypeName;
standard.itemName = item1.itemName;
standard.itemMethod = item1.itemMethod;
standard.itemTools = item1.itemTools;
standard.planLoop = item1.planLoop;
standard.planLoopType = item1.planLoopType;
standard.standardName = item.standardName;
standard.detailUpLimit = item.detailUpLimit;
standard.detailDownLimit = item.detailDownLimit;
standard.detailUnit = item.detailUnit;
standard.detailReach = item.detailReach;
standard.actualValue = item.actualValue;
standard.standardType = item.standardType;
//检查项图片
var standardUrlLists = [];
if (item.picturePaths != null) {
item.picturePaths.forEach((item2) => {
standardUrlLists.push(item2.fileAddress);
});
standard.standardUrlLists = standardUrlLists;
} else {
standard.standardUrlLists = null;
}
standards.push(standard);
});
}
});
this.checkList = standards;
}
this.openView = true;
this.title = "查看故障报修";
});
},
/** 审核按钮操作 */
handleCheck(row) {
this.reset();
const orderId = row.orderId || this.ids;
getMaintenanceTeamList(this.queryParams).then((response) => {
this.teamOption = response.rows;
});
getFaultReport(orderId).then((response) => {
this.form = response.data;
//报修故障照片上传
if (response.data.files != null) {
var newFiles = [];
response.data.files.forEach((item) => {
var newFile = {};
newFile.name = item.fileName;
newFile.url = item.fileAddress;
newFiles.push(newFile);
});
this.form.fileList = newFiles;
//报修故障照片
this.urlLists = null;
var urlLists = [];
this.form.fileList.forEach((item) => {
urlLists.push(item.url);
});
this.urlLists = urlLists;
} else if (response.data.files == null) {
this.urlLists = null;
}
//检查项
this.checkList = null;
this.checkList = response.data.checkList;
if (this.checkList != null) {
//检查项遍历
var standards = [];
this.checkList.forEach((item1) => {
//检查项名字
if (item1 != null) {
item1.standardList.forEach((item) => {
var standard = {};
standard.itemTypeName = item1.itemTypeName;
standard.itemName = item1.itemName;
standard.itemMethod = item1.itemMethod;
standard.itemTools = item1.itemTools;
standard.planLoop = item1.planLoop;
standard.planLoopType = item1.planLoopType;
standard.standardName = item.standardName;
standard.detailUpLimit = item.detailUpLimit;
standard.detailDownLimit = item.detailDownLimit;
standard.detailUnit = item.detailUnit;
standard.detailReach = item.detailReach;
standard.actualValue = item.actualValue;
standard.standardType = item.standardType;
//检查项图片
var standardUrlLists = [];
if (item.picturePaths != null) {
item.picturePaths.forEach((item2) => {
standardUrlLists.push(item2.fileAddress);
});
standard.standardUrlLists = standardUrlLists;
} else {
standard.standardUrlLists = null;
}
standards.push(standard);
});
}
});
this.checkList = standards;
}
if (
response.data.orderStatus == "审核通过" ||
response.data.orderStatus == "驳回"
) {
Message.warning("该报修记录已审核!");
this.form = response.data;
this.viewCheck = true;
this.title = "查看审核故障报修";
} else {
this.form = response.data;
this.openCheck = true;
this.title = "审核故障报修";
}
});
},
/** 提交按钮 */
submitForm() {
if (Array.isArray(this.form.fileList)) {
this.form.fileList = this.listToString(this.form.fileList);
}
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.orderId != null) {
updateFaultReport(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addFaultReport(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 审核提交按钮 */
submitCheckForm() {
if (Array.isArray(this.form.fileList)) {
this.form.fileList = this.listToString(this.form.fileList);
}
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.orderId != null) {
checkFaultReport(this.form).then((response) => {
this.$modal.msgSuccess("审核成功");
this.openCheck = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const orderIds = row.orderId || this.ids;
this.$modal
.confirm('是否确认删除故障报修编号为"' + orderIds + '"的数据项?')
.then(function () {
return delFaultReport(orderIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
// 对象转成指定字符串分隔
listToString(list, separator) {
let strs = "";
separator = separator || ",";
for (let i in list) {
strs += list[i].url + separator;
}
return strs != "" ? strs.substr(0, strs.length - 1) : "";
},
/** 导出按钮操作 */
handleExport() {
this.download(
"device/faultReport/export",
{
...this.queryParams,
},
`faultReport_${new Date().getTime()}.xlsx`
);
},
selectBlur(even) {
if (even.target.value) {
this.form.orderDesc = even.target.value;
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
// 获取当前单元格的值
const currentValue = row[column.property];
// 获取上一行相同列的值
const preRow = this.checkList[rowIndex - 1];
const preValue = preRow ? preRow[column.property] : null;
// 如果当前值和上一行的值相同,则将当前单元格隐藏
if (currentValue === preValue) {
return { rowspan: 0, colspan: 0 };
} else {
// 否则计算当前单元格应该跨越多少行
let rowspan = 1;
for (let i = rowIndex + 1; i < this.checkList.length; i++) {
const nextRow = this.checkList[i];
const nextValue = nextRow[column.property];
if (nextValue === currentValue) {
rowspan++;
} else {
break;
}
}
return { rowspan, colspan: 1 };
}
}
if (columnIndex === 1) {
// 获取当前单元格的值
const currentValue = row[column.property];
// 获取上一行相同列的值
const preRow = this.checkList[rowIndex - 1];
const preValue = preRow ? preRow[column.property] : null;
// 如果当前值和上一行的值相同,则将当前单元格隐藏
if (currentValue === preValue) {
return { rowspan: 0, colspan: 0 };
} else {
// 否则计算当前单元格应该跨越多少行
let rowspan = 1;
for (let i = rowIndex + 1; i < this.checkList.length; i++) {
const nextRow = this.checkList[i];
const nextValue = nextRow[column.property];
if (nextValue === currentValue) {
rowspan++;
} else {
break;
}
}
return { rowspan, colspan: 1 };
}
}
},
},
};
</script>
<style>
.standardUrl_body {
height: 400px;
overflow-y: auto;
}
.view_picture_body {
height: 300px;
overflow-y: auto;
}
</style>