工单详情页优化

xiangpei

2024-09-17 b32150d1fd576fa3b89e85e2f99be2edc67b9293

工单详情页优化

 src/components/WorkOrder/WorkOrderAuditing.vue

New file
@@ -0,0 +1,116 @@
<template>
  <div>
    <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="source">
              <el-input v-model="auditingForm.source" 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-group v-model="auditingForm.auditingResult">
                <el-radio label="AUDITING_SUCCESS">通过</el-radio>
                <el-radio label="AUDITING_FAIL">驳回</el-radio>
              </el-radio-group>

            </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.unitName + '___' + 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>
</template>

<script>
import { auditing } from '@/api/platform/work-order'
export default {
  name: "WorkOrderAuditing",
  props: {
    auditingOpen: {
      type: Boolean,
      required: true,
      default: false
    },
    dataForm: {
      type: Object,
      required: true,
    },
    ywConditions: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      auditingForm: {},
      auditingRules: {
        auditingResult: [
          { required: true, message: '审核结果不能为空', trigger: 'blur' }
        ]
      },
    }
  },
  methods: {
    // 提交审核
    submitAuditing() {
      this.$refs['auditingForm'].validate(valid => {
        if (valid) {
          auditing(this.auditingForm).then(res => {
            this.$emit('close', false);
            this.$modal.msgSuccess('操作成功')
            this.getList()
          })
        }
      })
    },
    // 取消审核
    cancelAuditing() {
      this.auditingForm = {}
      this.$emit('close');
    },
  },
  watch: {
    dataForm: {
      handler(n, o) {
        this.auditingForm = n
      },
      deep: true
    }
  }
}
</script>

<style scoped>

</style>

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

@@ -65,10 +65,10 @@
              </div>
              <div style="margin-left: 2px">是否报备</div>
            </div>
            <div class="warp">
            <div class="warp" style="display: flex;flex-direction: row;align-items: center">
              <div v-if="workOrderInfo.hasReport"><el-link @click type="primary">{{workOrderInfo.hasReport ? '已报备' : '未报备'}}</el-link></div>
              <div v-else>{{workOrderInfo.hasReport ? '已报备' : '未报备'}}</div>
              <div v-if="!workOrderInfo.hasReport"><el-link type="primary">事后报备</el-link></div>
              <div v-if="!workOrderInfo.hasReport"><el-link type="primary">(事后报备)</el-link></div>
            </div>
          </div>
          <div class="info-item weight4">
@@ -78,7 +78,12 @@
              </div>
              <div style="margin-left: 2px">处理结果</div>
            </div>
            <div class="warp">{{covertStatus(workOrderInfo.status)}}</div>
            <div class="warp" style="display: flex;flex-direction: row;align-items: center">
              <div>{{covertStatus(workOrderInfo.status)}}</div>
              <div v-if="workOrderInfo.status ==='YW_HANDLE'">
                <el-link type="primary" @click="handleAuditing">(审核)</el-link>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
@@ -159,16 +164,24 @@
        <div style="margin-top: 8px">{{img.createTime}}</div>
      </div>
    </div>

    <WorkOrderAuditing :auditingOpen="auditingOpen" :dataForm="auditingForm" :ywConditions="ywConditions" @close="closeAuditing"/>

  </div>
</template>

<script>
import {getWorkOrderInfo, getYwConditionList, getYwAuditingList} from '@/api/platform/work-order'
import {getWorkOrderInfo, getYwConditionList, getYwAuditingList, getYwCondition, listWorkOrder} from '@/api/platform/work-order'
import {getReportByGb} from '@/api/platform/report'
import WorkOrderAuditing from "@/components/WorkOrder/WorkOrderAuditing";
export default {
  name: "index",
  components: {WorkOrderAuditing},
  data() {
    return {
      ywConditions: [],
      auditingOpen: false,
      auditingForm: {},
      selectedTab: 'workorder',
      loading1: false,
      loading2: false,
@@ -200,6 +213,17 @@
    this.getWorkOrder()
  },
  methods: {
    closeAuditing() {
      this.auditingOpen = false
    },
    // 审核按钮
    handleAuditing() {
      this.auditingForm = this.workOrderInfo
      getYwCondition(this.workOrderInfo.workOrderNo).then(response => {
        this.ywConditions = response.data
        this.auditingOpen = true
      })
    },
    getImgUrl(path) {
      return this.$img + path;
    },

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

@@ -193,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">
@@ -452,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,
@@ -587,6 +589,9 @@
    this.getList()
  },
  methods: {
    closeAuditing() {
      this.auditingOpen = false
    },
    getTitle1() {
      return '产生工单' + (this.beforeReportMsg ? '(' + this.beforeReportMsg + ')' : '')
    },