hospital-accompaniment-web/src/views/order/orderList/details.vue

<template>
  <div class="app-container">
    <el-form :model="form" ref="form" inline v-loading="loading">
      <h3>基础信息</h3>
      <el-form-item label="订单号：" prop="name">{{form.orderNo}}</el-form-item>
      <br>
      <el-form-item label="下单人姓名：" prop="name">{{form.userName}}</el-form-item>
      <el-form-item label="下单人手机号：" prop="name">{{form.userMobile}}</el-form-item>
      <el-form-item label="下单时间：" prop="name">{{ parseTime(form.createTime, '{y}-{m}-{d} {h}:{i}') }}</el-form-item>
      <el-form-item label="订单状态：" prop="name">
        {{dealStatus(form.status)}}
      </el-form-item>
      <h3>服务信息</h3>
      <el-form-item label="下单医院：" prop="name">{{form.hospitalVo.name}}</el-form-item>
      <el-form-item label="所在科室：" prop="name">{{form.hospitalDepartmentName}}</el-form-item>
      <el-form-item label="医院地址：" prop="name">{{form.hospitalVo.address}}</el-form-item>
      <el-form-item label="期望时间：" prop="name">{{parseTime(form.expectedTime, '{y}-{m}-{d} {h}:{i}')||'-'}}</el-form-item>
      <el-form-item label="服务名称：" prop="name">{{form.serviceName}}</el-form-item>
      <el-form-item label="房床号：" prop="name">{{form.roomNumber}}</el-form-item>
      <el-form-item label="下单数量：" prop="name">{{form.orderNum}}{{dealServiceUnitList(form.serviceUnit)}}</el-form-item>
      <el-form-item label="销售价格：" prop="name">{{form.sellingPrice}}</el-form-item>
      <el-form-item label="应付金额：" prop="name">{{form.totalPrice}}</el-form-item>
      <el-form-item label="特殊需求：" prop="name">{{form.remarks||'-'}}</el-form-item>
      <div class="w20">
        <h3>就诊人信息</h3>
        <el-form-item label="就诊人姓名：" prop="name">{{ form.patientVo.name}}</el-form-item>
        <el-form-item label="电话：" prop="name">{{form.patientVo.mobile}}</el-form-item>
        <el-form-item label="性别：" prop="name">{{dealGender(form.patientVo.gender)}}</el-form-item>
        <el-form-item label="年龄：" prop="name">{{form.patientVo.age}}</el-form-item>
        <el-form-item label="关系：" prop="name">
          <div v-for="(v,i) in dict.type.patient_relationship" :key="i" v-if="v.value==form.patientVo.relationship">{{v.label}}</div>
        </el-form-item>
      </div>
      <div class="w20" v-if="form.status==2||form.status==3||form.status==4||form.status==5">
        <h3>护工信息信息</h3>
        <el-form-item label="护工姓名：" prop="name">{{ form.orderWorkerChangeRecord.workerName}}</el-form-item>
        <el-form-item label="电话：" prop="name">{{ form.orderWorkerChangeRecord.workerPhoneNumber}}</el-form-item>
        <el-form-item label="性别：" prop="name">{{ form.orderWorkerChangeRecord.sex==1?'男':form.orderWorkerChangeRecord.sex==2?'女':'--'}}</el-form-item>
        <el-form-item label="分单时间：" prop="name">{{parseTime(form.orderWorkerChangeRecord.createTime, '{y}-{m}-{d} {h}:{i}')}}</el-form-item>
        <el-form-item label="操作老师：" prop="name">{{ form.orderWorkerChangeRecord.operatingTeacherName}}</el-form-item>
        <el-form-item label="开始时间：" prop="name">{{ parseTime(form.orderWorkerChangeRecord.workerStartTime,'{y}-{m}-{d} {h}:{i}')||'--'}}</el-form-item>
        <el-form-item label="结束时间：" prop="name">{{ parseTime(form.orderWorkerChangeRecord.workerEndTime,'{y}-{m}-{d} {h}:{i}')||'--'}}</el-form-item>
      </div>
      <div class="w50" v-if="form.status==6">
        <h3>取消信息</h3>
        <el-form-item label="取消原因：" prop="name">{{ form.cancellationReason}}</el-form-item>
        <el-form-item label="取消时间：" prop="name">{{ form.cancellationTime}}</el-form-item>
      </div>
      <div v-if="form.status==5">
        <h3>评价信息</h3>
        <el-form-item label="服务态度" prop="name"> <el-rate disabled v-model="form.orderReviews.serviceAttitude"></el-rate></el-form-item>
        <el-form-item label="着装仪态" prop="name"> <el-rate disabled v-model="form.orderReviews.dressAppearance"></el-rate></el-form-item>
        <el-form-item label="沟通能力" prop="name"> <el-rate disabled v-model="form.orderReviews.communicationAbility"></el-rate></el-form-item>
        <br>
        <el-form-item class="w100" label="文字评价" prop="name"> <el-rate disabled v-model="form.orderReviews.content"></el-rate></el-form-item>
        <el-form-item class="w100" label="评价时间" prop="name">{{ parseTime(form.orderReviews.createTime,'{y}-{m}-{d} {h}:{i}')||'--'}}</el-form-item>
      </div>
      <div class="w50" v-if="form.hasRefund">
        <h3>退款信息</h3>
        <el-table :data="form.refundList">
          <el-table-column type="index" width="55" label="序号" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="退款订单号" align="center" prop="orderRefundNo" />
          <el-table-column label="服务名称" align="center" prop="serviceName" />
          <el-table-column label="销售价格" align="center" prop="sellingPrice" />
          <el-table-column label="购买数" align="center" prop="orderNum" />
          <el-table-column label="实付金额" align="center" prop="payPrice" />
          <el-table-column label="退款数" align="center" prop="refundQuantity" />
          <el-table-column label="应退金额" align="center" prop="totalPrice" />
          <el-table-column label="实退金额" align="center" prop="actualRefundAmount" />
          <el-table-column label="申请时间" align="center" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="refundStatus">
            <template slot-scope="{row}">
              <div v-for="(v,i) in refundStatusList" :key="i" :type="v.tag" v-if="row.refundStatus==v.code">{{v.value}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <div class="form-footer">
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import { orderInfo, orderEnum, orderRefundEnum } from '@/api/hospitalOrder.js'
import { serviceProductEnum } from '@/api/service.js'

export default {
  dicts: ['patient_relationship'],
  data () {
    return {
      form: {
        hospitalVo: {},
        patientVo: {}
      },
      couponList: [],
      gameRecord: {},
      statusList: [],
      genderList: [
        { label: '0', value: '未知' },
        { label: '1', value: '男' },
        { label: '2', value: '女' }
      ],
      serviceUnitList: [],
      refundStatusList: [],
      loading: false
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getDetails();
      this.getOrderEnum();
      this.getServiceUnitList();
      this.getOrderRefundEnum()
    },
    // 获取服务单位列表
    getServiceUnitList () {
      serviceProductEnum().then(res => {
        this.serviceUnitList = res.data.serviceUnit
      })
    },
    dealStatus (status) {
      for (let i = 0; i < this.statusList.length; i++) {
        if (this.statusList[i].code == status) {
          return this.statusList[i].value
        }
      }
    },
    dealGender (gender) {
      for (let i = 0; i < this.genderList.length; i++) {
        if (this.genderList[i].label == gender) {
          return this.genderList[i].value
        }
      }
    },
    dealServiceUnitList (val) {
      for (let i = 0; i < this.serviceUnitList.length; i++) {
        if (this.serviceUnitList[i].code == val) {
          return this.serviceUnitList[i].value
        }
      }
    },
    back () {
      this.$router.go(-1)
    },
    getOrderEnum () {
      orderEnum().then(res => {
        this.statusList = res.data.orderStatus;
      })
    },
    getOrderRefundEnum () {
      orderRefundEnum().then(res => {
        this.refundStatusList = res.data.refundStatus;
      })
    },
    getDetails () {
      this.loading = true
      orderInfo(this.$route.query.id).then(res => {
        this.form = res.data
      }).finally(() => {
        this.loading = false
      })
    },
  }

}
</script>

<style lang='scss' scoped>
h3 {
  font-weight: 700;
}
.el-form--inline .el-form-item {
  width: 24%;
}
.active {
  color: rgb(64, 158, 255);
  cursor: pointer;
}
.form-footer {
  margin-top: 20px;
  text-align: center;
}
::v-deep .el-form-item__content {
  width: calc(100% - 120px);
}
.w20 {
  .el-form-item {
    width: calc(20% - 10px);
  }
}
.el-rate {
  height: 36px;
  line-height: 46px;
}
.w100 {
  width: 100% !important;
}
</style>