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 >= 0">
            <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 >= 1">
            <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 >= 2">
            <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 >= 3">
            <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.repairName }}</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.repairLevel }}</a-descriptions-item>
        <a-descriptions-item label="故障地点">{{ mdl.repairLevel }}</a-descriptions-item>
        <a-descriptions-item label="门牌号">{{ mdl.repairLevel }}</a-descriptions-item>
        <a-descriptions-item label="派单员">{{ mdl.repairLevel }}</a-descriptions-item>
        <a-descriptions-item label="维修人">{{ mdl.repairUserId }}</a-descriptions-item>
        <a-descriptions-item label="故障时间">{{ mdl.repairTime }}</a-descriptions-item>
        <a-descriptions-item label="报修时间">{{ mdl.createTime }}</a-descriptions-item>
        <a-descriptions-item label="状态">{{ mdl.statusName }}</a-descriptions-item>
        <a-descriptions-item label="完成时间">{{ mdl.endDate }}</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">
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </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="服务评价">
          <a-rate v-model="mdl.evalService" disabled />
        </a-descriptions-item>
        <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
      },
      previewVisible: false,
      previewImage: '',
      fileList: [],
      // form
      form: this.$form.createForm(this)
    }
  },
  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
          }
          if (record.files.feedback) {
            record.files.feedback.forEach((item, i) => {
              item.url = process.env.VUE_APP_API_BASE_URL + item.url
            })
            console.log(record.files.feedback[0].url
            )
            this.fileList = record.files.feedback
            // this.previewImage = .url
          } else {
            this.fileList = []
          }
          // 报修图片
          // this.fileList = record.files.feedback
        })
      }
    },
    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>
/* 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;
}
</style>