xianmen-antd/src/views/repair/application-form/modules/DetailRepairOut.vue

<template>
  <div>
    <a-card :bordered="false" v-show="visible" class="card" :title="modalTitle">
      <a-row :gutter="48" slot="extra">
        <a-col :md="48" :sm="48">
          <span class="table-page-search-submitButtons" style="float: right">
            <a-button
              v-if="DictCache.VALUE.REPAIR_ENTRUST_STATUS && model.status === 1"
              style="margin-left: 8px"
              type="primary"
              @click="handleFinish()">完成</a-button>
            <a-button style="margin-left: 8px" @click="handleCancel">返回</a-button>
          </span>
        </a-col>
      </a-row>
      <a-layout>
        <a-layout-content style="background-color: rgb(255, 255, 255)">
          <a-divider orientation="left">委外基本信息</a-divider>
          <detail-list title="" :col="3">
            <detail-list-item term="委外单号">{{ model.entrustNo }}</detail-list-item>
            <detail-list-item term="工单号">{{ model.repairNo }}</detail-list-item>
            <detail-list-item term="委外类别">{{ outTypeMap[model.outType] }}</detail-list-item>
            <detail-list-item term="委外申请人">{{ model.entrustUserName }}</detail-list-item>
            <detail-list-item term="委外维修人">{{ model.repairUserName }}</detail-list-item>
            <detail-list-item term="设备名称">{{ model.sbName }}</detail-list-item>
            <detail-list-item term="设备编号">{{ model.sbNo }}</detail-list-item>
            <detail-list-item term="委外状态">
              <badge :text="entrustStatusMap[model.status]" :status="model.status === 1 ? 'processing' : 'success'"/>
            </detail-list-item>
            <detail-list-item term="创建时间">{{ model.createdTime }}</detail-list-item>
          </detail-list>
          <detail-list title="" :col="1">
            <detail-list-item term="委外原因">{{ model.reason }}</detail-list-item>
          </detail-list>

          <a-divider orientation="left" v-if="model.status === 2">完成信息</a-divider>
          <detail-list title="" :col="3" v-if="model.status === 2">
            <detail-list-item term="完成时间">{{ model.finishTime }}</detail-list-item>
          </detail-list>
          <detail-list title="" :col="1" v-if="model.status === 2">
            <detail-list-item term="维修情况">{{ model.finishRemark }}</detail-list-item>
          </detail-list>
          <detail-list title="完成图片：" :col="6" v-if="model.status === 2 && model.finishFileList && model.finishFileList.length > 0">
            <upload-image-detail :images-list="model.finishFileList"/>
          </detail-list>
          <div v-if="model.status === 2 && model.finishAttachmentList && model.finishAttachmentList.length > 0" style="margin-bottom: 16px;">
            <div style="font-weight: bold; margin-bottom: 8px; color: rgba(0, 0, 0, 0.85);">完成附件：</div>
            <div v-for="file in model.finishAttachmentList" :key="file.id" style="margin-bottom: 4px;">
              <a-icon type="paper-clip" />
              <a @click="handleDownloadFile(file)" style="margin-left: 4px;">{{ file.name }}</a>
            </div>
          </div>
        </a-layout-content>
      </a-layout>
    </a-card>
    <finish-form ref="finishForm" @ok="handleOk" />
  </div>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
import { fetchRepairEntrust } from '@/api/repair/entrust'
import FinishForm from './FinishOutForm'

const DetailListItem = DetailList.Item

export default {
  name: 'DetailRepairOut',
  components: {
    DetailList,
    DetailListItem,
    FinishForm
  },
  data () {
    return {
      confirmLoading: false,
      modalTitle: '委外详情',
      visible: false,
      outTypeMap: {},
      entrustStatusMap: {
        1: '委外维修中',
        2: '已完成'
      },
      model: {}
    }
  },
  created () {
    this.outTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_OUT_TYPE)
  },
  methods: {
    base (record) {
      this.visible = true
      this.model = record
      this.loadDetail(record.id)
    },
    loadDetail (id) {
      fetchRepairEntrust(id).then(res => {
        this.model = res.data
      })
    },
    handleDownloadFile (file) {
      const baseUrl = process.env.VUE_APP_API_BASE_URL || ''
      const link = document.createElement('a')
      link.href = baseUrl + file.url
      link.download = file.name || '下载'
      link.target = '_blank'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.$emit('ok')
    },
    handleFinish () {
      const modal = this.$refs.finishForm
      modal.base(this.model)
    },
    handleOk () {
      this.loadDetail(this.model.id)
      this.$emit('ok')
    }
  }
}
</script>