dbd-meeting-html/src/views/admin/RepairView.vue

<template>
  <div>
    <!-- 维修进度 -->
    <a-card :bordered="false" title="维修进度">
      <a-steps :current="mdl.status" progressDot>
        <a-step>
          <template v-slot:title>
            <span>待分配</span>
          </template>
          <template v-slot:description v-if="mdl.status >= 1">
            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
              {{ mdl.createBy }}
              <div>{{ mdl.createTime }}</div>
            </div>
          </template>
        </a-step>
        <a-step>
          <template v-slot:title>
            <span>待处理</span>
          </template>
          <template v-slot:description v-if="mdl.status >= 5">
            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
              {{ mdl.updateBy }}
              <div>{{ mdl.updateTime }}</div>
            </div>
          </template>
        </a-step>
        <a-step>
          <template v-slot:title>
            <span>处理中</span>
          </template>
          <template v-slot:description v-if="mdl.status >= 7">
            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
              {{ mdl.updateBy }}
              <div>{{ mdl.updateTime }}</div>
            </div>
          </template>
        </a-step>
        <a-step>
          <template v-slot:title>
            <span>已完成</span>
          </template>
          <template v-slot:description v-if="mdl.status >= 9">
            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
              {{ mdl.updateBy }}
              <div>{{ mdl.updateTime }}</div>
            </div>
          </template>
        </a-step>
        <a-step>
          <template v-slot:title>
            <span>已废弃</span>
          </template>
          <template v-slot:description v-if="mdl.status == 11">
            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
              {{ mdl.updateBy }}
              <div>{{ mdl.updateTime }}</div>
            </div>
          </template>
        </a-step>
        <a-step>
          <template v-slot:title>
            <span>已评价</span>
          </template>
          <template v-slot:description v-if="mdl.status == 13">
            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
              {{ mdl.updateBy }}
              <div>{{ mdl.updateTime }}</div>
            </div>
          </template>
        </a-step>
      </a-steps>
    </a-card>
    <!-- 维修信息 -->
    <a-card style="margin-top: 10px" :bordered="false" title="报修信息">
      <a-descriptions>
        <a-descriptions-item label="维修单号">{{ mdl.sn }}</a-descriptions-item>
        <a-descriptions-item label="设备类型">{{ mdl.typeName }}</a-descriptions-item>
        <a-descriptions-item label="设备名称">{{ mdl.deviceName }}</a-descriptions-item>
        <a-descriptions-item label="发起人">{{ mdl.name }}</a-descriptions-item>
        <a-descriptions-item label="电话">{{ mdl.phone }}</a-descriptions-item>
        <a-descriptions-item label="故障等级">{{ mdl.repairLevel }}</a-descriptions-item>
        <a-descriptions-item label="故障类型">{{ mdl.failureTypeName }}</a-descriptions-item>
        <a-descriptions-item label="报修地点">{{ mdl.address }}</a-descriptions-item>
        <a-descriptions-item label="楼层">{{ mdl.floor }}</a-descriptions-item>
        <a-descriptions-item label="门牌号">{{ mdl.room }}</a-descriptions-item>
        <a-descriptions-item label="派单员">{{ mdl.perUserName }}</a-descriptions-item>
        <a-descriptions-item label="维修人">{{ mdl.repairUserName }}</a-descriptions-item>
        <a-descriptions-item label="报修时间">{{ mdl.createTime }}</a-descriptions-item>
        <a-descriptions-item label="状态">{{ mdl.statusName }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card style="margin-top: 10px" :bordered="false" title="维修信息">
      <div style="display: flex;">
          <span style="margin:40px">
            报修图片
          </span>
        <div style="margin-bottom: 50px; margin-left: 30px" class="clearfix">
          <div class="fileList">
            <video class="file video"  :src="item.url" v-for="item in files.voice"
                     controls/>
            <img class="file image"  :src="item.url" v-for="item in files.repair"
                 v-if="item.fileType== 'image'" />
            <video class="file video"  :src="item.url" v-for="item in files.repair"
                   v-if="item.fileType== 'video'"  controls/>
          </div>
        </div>
      </div>
      <div>
        <div>
          <a-descriptions layout="vertical" bordered>
            <a-descriptions-item label="解决方案">
              {{ mdl.solution }}
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions layout="vertical" bordered>
            <a-descriptions-item label="故障原因">
              {{ mdl.cause }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </a-card>
    <a-card style="margin-top: 10px" :bordered="false" title="评价">
      <a-descriptions>
        <a-descriptions-item label="服务评价">
          <a-rate v-model="mdl.evalService" disabled />
        </a-descriptions-item>
        <a-descriptions-item label="意见建议">
          {{ mdl.remark }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <!-- 操作 -->
    <a-card style="margin-top: 10px" :bordered="false" title="维修日志">
      <a-table rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="false">
        <span slot="type" slot-scope="text">
          {{ text | typeFilter }}
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { getRepair } from '@/api/admin/repair'

export default {
  name: 'BaseForm',
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      // 表头
      columns: [
        {
          title: '操作类型',
          dataIndex: 'to',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '操作人',
          dataIndex: 'sendUserName'
        },
        {
          title: '操作详情',
          dataIndex: 'content'
        },
        {
          title: '操作时间',
          dataIndex: 'createTime'
        }
      ],
      dataSource: [],
      mdl: {
        customerVO: { name: '' },
        parkVO: { name: '' },
        // 工人信息
        userVO: { userName: '', mobile: '' },
        // 工单评价
        repairScore: 0,
        // 工人评价
        workerScore: 0
      },
      // form
      form: this.$form.createForm(this),
      files: {}
    }
  },
  filters: {
    typeFilter (type) {
      const typeMap = {
        '1': '待分配',
        '3': '重新派单',
        '5': '已派单',
        '7': '处理中',
        '9': '已完成,待评价',
        '11': '已关闭',
        '13': '已评价'
      }
      return typeMap[type]
    }
  },
  created () {
    this.handleInit()
  },
  methods: {
    typeFilterRQ (type) {
      const typeMap = {
        '1': '待分配',
        '3': '重新派单',
        '5': '已派单',
        '7': '处理中',
        '9': '已完成,待评价',
        '11': '已关闭',
        '13': '已评价'
      }
      return typeMap[type]
    },
    handleInit () {
      const { repairId } = this.$route.query
      if (repairId) {
        const data = {
          'id': repairId
        }
        getRepair(data).then(record => {
          this.mdl = Object.assign(record.repair)
          this.mdl.statusName = this.typeFilterRQ(this.mdl.status)
          // 维修记录
          if (record.log.length > 0) {
            this.dataSource = record.log
          }
          record.files.repair = record.files.repair.map((item) => {
            item.url = process.env.VUE_APP_MODEL_BASE_URL + item.url
            item.fileType = this.checkMediaType(item.url)
            return item
          })
          record.files.voice = record.files.voice.map((item) => {
            item.url = process.env.VUE_APP_MODEL_BASE_URL + item.url
            return item
          })
          this.files = record.files
          console.log(this.files.voice)
        })
      }
    },
    checkMediaType (url) {
      // 创建URL对象
      let link = new URL(url)

      // 获取路径部分（去除参数）
      let path = link.pathname

      // 获取路径的最后一个点之后的内容作为文件扩展名
      let extension = path.split('.').pop().toLowerCase()

      // 声明支持的图片和视频文件扩展名
      let imageExtensions = ['jpg', 'jpeg', 'gif', 'png']
      let videoExtensions = ['mp4', 'wmv', 'avi', 'mov']

      // 判断文件扩展名是否在图片扩展名数组中
      if (imageExtensions.includes(extension)) {
        return 'image'
      }

      // 判断文件扩展名是否在视频扩展名数组中
      if (videoExtensions.includes(extension)) {
        return 'video'
      }

      // 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
      return null
    },

    handleCancel () {
      this.previewVisible = false
    },
    async handlePreview (file) {
      console.log(this.fileList)
      this.previewImage = file.url || file.preview
    },
    handleChange ({ fileList }) {
      this.fileList = fileList
    },
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          console.log('Received values of form: ', values)
        }
      })
    },
    rollback () {
      this.$router.push('/repair/repairList')
    }
  }
}

function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
</script>

<style scoped >
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.fileList{
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
}

.fileList .file{
  margin-right: 20px;
  margin-bottom: 20px;
}

.fileList .image{
  width: 100px;
  height: 100px;
}

.fileList .video{
  width: 160px;
  height: 100px;
}
</style>