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

<template>
  <div>
    <!-- 维修进度 -->
    <a-card :bordered='false' title='维修进度'>
      <a-steps :current="nowStep" progressDot style='width: 80%;margin: 0px auto'>
        <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'>
              <div>{{ mdl.createTime }}</div>
            </div>
          </template>
        </a-step>
        <a-step v-if='mdl.status != 11'>
          <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'>
              <div>{{ mdl.updateTime }}</div>
            </div>
          </template>
        </a-step>
        <a-step v-if='mdl.status != 11'>
          <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'>
              <div>{{ mdl.updateTime }}</div>
            </div>
          </template>
        </a-step>
        <a-step v-if='mdl.status != 11'>
          <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'>
              <div>{{ mdl.updateTime }}</div>
            </div>
          </template>
        </a-step>
        <a-step v-if='mdl.status == 11'>
          <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'>
              <div>{{ mdl.updateTime }}</div>
            </div>
          </template>
        </a-step>
        <a-step v-if='mdl.status != 11'>
          <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'>
              <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.name }}</a-descriptions-item>
        <a-descriptions-item label='联系电话'>{{ mdl.phone }}</a-descriptions-item>
        <a-descriptions-item label='故障类型'>{{ mdl.typeName }} / {{ mdl.deviceName }}</a-descriptions-item>
        <a-descriptions-item label='报修地点'>{{ mdl.address }} / {{ mdl.floor }}</a-descriptions-item>
        <a-descriptions-item label='门牌号（地点）'>{{ mdl.room }}</a-descriptions-item>
        <a-descriptions-item label='故障描述'>{{ mdl.explain }}</a-descriptions-item>
        <a-descriptions-item label='报修时间'>{{ mdl.createTime }}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <a-descriptions-item label='报修图片'>
          <div style='margin-left: 30px' class='clearfix'>
            <div class='fileList'>
              <img @click='openFile($event)' 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>

        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card style='margin-top: 10px' :bordered='false' title='派单信息'>
      <a-descriptions>
        <a-descriptions-item label='派单员'>{{ mdl.perUserName }}</a-descriptions-item>
        <a-descriptions-item label='故障等级'>{{ mdl.repairLevel }}</a-descriptions-item>
        <a-descriptions-item label='状态'>{{ mdl.statusName }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card v-if='mdl.status >= 5 && mdl.status != 11' style='margin-top: 10px' :bordered='false' title='维修反馈'>
      <a-descriptions>
        <a-descriptions-item label='维修员'>{{ mdl.repairUserName }}</a-descriptions-item>
        <a-descriptions-item label='故障类型'>{{ mdl.failureTypeName }}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <a-descriptions-item label='故障原因'>{{ mdl.cause }}</a-descriptions-item>
        <a-descriptions-item label='解决方案'>{{ mdl.solution }}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <a-descriptions-item label='反馈图片'>
          <div style='margin-left: 30px' class='clearfix'>
            <div class='fileList'>
              <img @click='openFile($event)' class='file image' :src='item.url' v-for='item in files.feedback'
                   v-if="item.fileType== 'image'" />
              <video class='file video' :src='item.url' v-for='item in files.feedback'
                     v-if="item.fileType== 'video'" controls />
            </div>
          </div>

        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card v-if='mdl.status >= 9 && mdl.status != 11' 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.feedback }}
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <a-descriptions-item label='评价图片'>
          <div style='margin-left: 30px' class='clearfix'>
            <div class='fileList'>
              <img @click='openFile($event)' class='file image' :src='item.url' v-for='item in files.eval'
                   v-if="item.fileType== 'image'" />
              <video class='file video' :src='item.url' v-for='item in files.eval'
                     v-if="item.fileType== 'video'" controls />
            </div>
          </div>

        </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: 'recUserName'
        },
        {
          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: {},
      nowStep: 0
    }
  },
  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 => {
          const status = record.repair.status
          console.log(status)
          if (status == '1' || status == '3') {
            // 待分配或重新分配
            this.nowStep = 0
          } else if (status == '5') {
            // 已派单
            this.nowStep = 1
          } else if (status == '7') {
            this.nowStep = 2
          } else if (status == '9') {
            this.nowStep = 3
          } else if (status == '13') {
            this.nowStep = 4
          }
          if (status == '11') {
            // 已关闭，此时只有已关闭
            this.nowStep = 1
          }
          console.log(this.nowStep)
          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.feedback = record.files.feedback.map((item) => {
            item.url = process.env.VUE_APP_MODEL_BASE_URL + item.url
            item.fileType = this.checkMediaType(item.url)
            return item
          })
          record.files.eval = record.files.eval.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
        })
      }
    },
    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')
    },
    openFile(e) {
      window.open(e.target.currentSrc)
    }
  }
}

</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>