工单详情页优化

xiangpei

2024-09-17 b32150d1fd576fa3b89e85e2f99be2edc67b9293

 src/views/system/work-order/index.vue

@@ -1,10 +1,10 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="工单号" prop="workOrderNo">
      <el-form-item label="关键词" prop="keyword">
        <el-input
          v-model="queryParams.workOrderNo"
          placeholder="请输入工单号"
          v-model="queryParams.keyword"
          placeholder="工单号/点位名称搜索"
          clearable
          @clear="handleQuery"
          @keyup.enter.native="handleQuery"
@@ -88,7 +88,7 @@
                    <el-col :span="24" class="time">故障时间：{{ item.createTime }}</el-col>
                  </el-row>
                  <el-row class="work-order-item">
                    <el-col class="time" :span="24" style="display: flex;flex-direction: row"><div style="min-width: 66px">故障点位：</div><div style="word-break: break-word">{{ item.source }}</div></el-col>
                    <el-col class="time" :span="24"><div>故障点位：</div><div>{{ item.source }}</div></el-col>
                  </el-row>
                  <el-row style="position: absolute;bottom: 10px">
                    <el-button
@@ -107,7 +107,7 @@
                      v-hasPermi="['work:order:condition:add']"
                      v-show="item.status !== 'AUDITING_SUCCESS'"
                      @click="handleYwCondition(item)"
                    >运维情况
                    >处理上报
                    </el-button>
                    <el-button
                      class="my-button"
@@ -124,6 +124,14 @@
                      v-hasPermi="['system:report:add']"
                      v-show="item.status !== 'AUDITING_SUCCESS'"
                    >事后报备
                    </el-button>
                    <el-button
                      class="my-button"
                      size="mini"
                      type="text"
                      @click="handleDetail(item)"
                      v-hasPermi="['system:workorder:detail']"
                    >详情
                    </el-button>
                  </el-row>
                </div>
@@ -185,49 +193,50 @@
      </div>
    </el-dialog>

    <el-dialog title="工单审核" :visible.sync="auditingOpen" width="1000px" append-to-body>
      <el-row :gutter="20">
        <el-col :span="10">
          <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="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>
        </el-col>
        <el-col :span="14" style="max-height: 500px; overflow-y: auto">
          <el-timeline v-if="ywConditions && ywConditions.length > 0">
            <el-timeline-item v-for="(condition, index) in ywConditions" :key="index"
                              :timestamp="condition.commitUserName + '___' + condition.createTime" placement="top"
            >
              <el-card>
                <div v-html="condition.ywCondition"></div>
                <el-link type="primary"
                         v-for="item in condition.ywProofMaterials != null ? condition.ywProofMaterials.split(',') : condition.ywProofMaterials"
                         :underline="false" :key="item.id" @click="handleDownload(item)"
                >{{ item.substring(item.lastIndexOf('/') + 1) }}
                </el-link>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-empty v-else description="没有处理记录"></el-empty>
        </el-col>
      </el-row>
    <WorkOrderAuditing :auditingOpen="auditingOpen" :dataForm="auditingForm" :ywConditions="ywConditions" @close="closeAuditing"/>
<!--    <el-dialog title="工单审核" :visible.sync="auditingOpen" width="1000px" append-to-body>-->
<!--      <el-row :gutter="20">-->
<!--        <el-col :span="10">-->
<!--          <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="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>-->
<!--        </el-col>-->
<!--        <el-col :span="14" style="max-height: 500px; overflow-y: auto">-->
<!--          <el-timeline v-if="ywConditions && ywConditions.length > 0">-->
<!--            <el-timeline-item v-for="(condition, index) in ywConditions" :key="index"-->
<!--                              :timestamp="condition.commitUserName + '___' + condition.createTime" placement="top"-->
<!--            >-->
<!--              <el-card>-->
<!--                <div v-html="condition.ywCondition"></div>-->
<!--                <el-link type="primary"-->
<!--                         v-for="item in condition.ywProofMaterials != null ? condition.ywProofMaterials.split(',') : condition.ywProofMaterials"-->
<!--                         :underline="false" :key="item.id" @click="handleDownload(item)"-->
<!--                >{{ item.substring(item.lastIndexOf('/') + 1) }}-->
<!--                </el-link>-->
<!--              </el-card>-->
<!--            </el-timeline-item>-->
<!--          </el-timeline>-->
<!--          <el-empty v-else description="没有处理记录"></el-empty>-->
<!--        </el-col>-->
<!--      </el-row>-->

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAuditing">取 消</el-button>
        <el-button type="primary" @click="submitAuditing">审 核</el-button>
      </div>
    </el-dialog>
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="cancelAuditing">取 消</el-button>-->
<!--        <el-button type="primary" @click="submitAuditing">审 核</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">
@@ -274,7 +283,7 @@
    <el-dialog title="过程图" :visible.sync="flowOpen" width="1200px" append-to-body>
      <div>
        <el-steps :active="ywAuditingList.length != 0 ? 3 : ywHandleList.length != 0 ? 2 : 1" :space="500">
          <el-step title="产生工单">
          <el-step :title="getTitle1()">
            <template slot="description">
              <div>
                <div class="row flow-item-x">
@@ -300,7 +309,7 @@
              </div>
            </template>
          </el-step>
          <el-step title="运维处理">
          <el-step :title="getTitle2()">
            <template slot="description">
              <div style="max-height: 450px;overflow-y: scroll">
                <div v-for="(item, index) in ywHandleList" :key="index">
@@ -444,11 +453,12 @@
  process
} from '@/api/platform/work-order'
import { addReport } from '@/api/platform/report'
import WorkOrderAuditing from "@/components/WorkOrder/WorkOrderAuditing";

export default {
  name: 'Work-order',
  dicts: ['error_type', 'report_error_type'],
  components: {},
  components: {WorkOrderAuditing},
  data() {
    return {
      drawer: false,
@@ -463,6 +473,8 @@
      },
      ywHandleList: [],
      ywAuditingList: [],
      beforeReportMsg: '',
      afterReportMsg: '',
      reportFormRules: {
        reportContent: [
          { required: true, message: '报备内容不能为空', trigger: 'blur' }
@@ -577,6 +589,15 @@
    this.getList()
  },
  methods: {
    closeAuditing() {
      this.auditingOpen = false
    },
    getTitle1() {
      return '产生工单' + (this.beforeReportMsg ? '(' + this.beforeReportMsg + ')' : '')
    },
    getTitle2() {
      return '运维处理' + (this.afterReportMsg ? '(' + this.afterReportMsg + ')' : '')
    },
    openDrawer(item) {
      this.ywData = {
        content: '',
@@ -620,6 +641,10 @@
        }
      })
    },
    // 详情
    handleDetail(item) {
      this.$router.push({name: '/work-order-center/maintenance/detail', query: {workOrderNo: item.workOrderNo}})
    },
    // 事后报备按钮
    handleReport(row) {
      this.reportForm.pointId = row.serialNumber
@@ -658,6 +683,8 @@
        if (response.data) {
          this.ywAuditingList = response.data.auditingList
          this.ywHandleList = response.data.ywList
          this.afterReportMsg = response.data.afterReportMsg
          this.beforeReportMsg = response.data.beforeReportMsg
          this.flowOpen = true
        }
      })
@@ -905,6 +932,9 @@
}
.work-order-item {
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time {