ZLJ_UI_V6.0/CallCenterWe.../src/views/memberManage.../memberBasicS.../detail.vue

<template>
  <div class="order_detail">
    <el-row :gutter="20">
      <el-col :md="24" class="order_detail_body">
        <el-card shadow="hover">
          <el-col :md="3">
            <div class="round_img">
              <img :src="avatar" alt="头像">
            </div>
          </el-col>
          <el-col :md="21">
            <h1 class="title"><svg-icon class="title_icon" icon-class="hongqi" />工单编号：{{ ordercode }}</h1>
            <!-- <p class="title_sub"><span class="green">{{ name }}</span> {{ createtime }}</p> -->
            <p class="title_sub"><span class="green">{{ name }}</span> 	河南阜外华中心血管病医院 {{ createtime }}</p>
            <p class="title_sub">催单次数：<span class="red">10</span>次 | 工单状态： <span class="done">已完成</span></p>
          </el-col>
          <el-col :md="24" class="order_detail_content">
            <el-col :md="6" class="order_detail_item">
              客户电话：{{ phone }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              客户性别：{{ sex }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              工单来源：{{ sourcename }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              工单类型：{{ sourcetype }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              地址：{{ address }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              创建人：{{ createuser }}
            </el-col>
            <el-col :md="24" class="order_detail_item">
              工单内容：
              <div class="order_content" v-html="content"/>
            </el-col>
            <el-col v-if="fileList.length > 0" :md="24" class="order_detail_item">
              <p>附件：<span class="yellow">（可以下载查看）</span></p>

              <el-col v-for="(item, index) in fileList" :md="3" :key="index">
                <el-card class="order_file">
                  <span class="img_mask">
                    <a :href="item.fileurl" download="filename" title="点击下载">
                      <i class="el-icon-download"/>
                    </a>
                  </span>
                  <img v-if="item.filesmallurl" :src="item.filesmallurl" :large="item.fileurl" :preview-text="item.filename" preview="0" height="68" width="80%">
                  <i v-else class="el-icon-document file_icon"/>
                  <p :title="item.filename"> {{ item.filename }} </p>
                </el-card>
              </el-col>

            </el-col>
            <el-col :md="6">
              <i class="el-icon-time"/>
              已持续 <span class="red">20</span> 小时 <span class="red">20</span> 分 <span class="red">20</span> 秒
            </el-col>
            <el-col :md="6" :offset="12">
              <el-button type="primary" size="mini" plain>催单</el-button>
              <el-button type="primary" size="mini" plain>转派</el-button>
              <el-button type="primary" size="mini" plain>完成</el-button>
            </el-col>
          </el-col>
        </el-card>
      </el-col>

      <el-col :md="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>工单动态</span>
          </div>
          <div class="order_steps">
            <el-steps :active="0" :space="100" direction="vertical" process-status="success">
              <el-step title="已完成" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
              <el-step title="已转派" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
              <el-step title="已创建" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
            </el-steps>
          </div>
        </el-card>
      </el-col>
      <el-col :md="12">
        <el-card shadow="hover" class="order_record">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="催单记录(2)" name="first">
              <div class="tab_body">
                催单记录
              </div>
            </el-tab-pane>
            <el-tab-pane label="录音记录(3)" name="second">
              <div class="tab_body">
                录音记录
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getOrder } from '@/api/order/orderSearch'
import { mapGetters } from 'vuex'
import { filterContent } from '@/utils'

export default {
  name: 'Detail',
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: 'first',
      ordercode: '', // 工单编号
      name: '', // 姓名
      phone: '', // 电话
      sex: '', // 性别
      address: '', // 地址
      sourcename: '', // 工单来源
      sourcetype: '', // 工单类型
      content: '', // 工单内容
      createtime: '', // 创建时间
      createuser: '', // 创建人
      fileList: [] // 附件
    }
  },
  computed: {
    ...mapGetters([
      'avatar'
    ])
  },
  created() {
    if (this.rowid) {
      this.getDetail(this.rowid)
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 详情
    getDetail(rid) {
      getOrder(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data.model
          this.ordercode = res.ordercode // 工单编号
          this.name = res.name // 姓名
          this.phone = res.phone // 电话
          this.sex = res.sex // 性别
          res.provincename = res.provincename === null ? '' : res.provincename
          res.cityname = res.cityname === null ? '' : res.cityname
          res.address = res.address === null ? '' : res.address
          this.address = res.provincename + res.cityname + res.address // 地址
          this.sourcename = res.sourcename // 工单来源
          this.sourcetype = res.typename // 工单类型
          this.content = filterContent.content(res.content) // 工单内容
          this.createtime = res.createtime // 创建时间
          this.createuser = res.createuser + '-' + res.createusername // 创建人
          // 附件
          if (res.files) {
            this.fileList = res.files
          }
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
	.order_detail{
		.el-col{
			margin-bottom: 20px;
		}
		.el-icon-time{
			color: #d81e06;
		}
		.el-card__header{
			padding-top: 14px;
			padding-bottom: 14px;
			background-color: #F5F5F6;
		}
		.order_file{
			.el-card__body{
				padding: 22px 0 0 0;
				text-align: center;
			}
		}
		.order_steps{
			.el-step__icon-inner{
				display: none;
			}
		}
		.order_record {
			.el-card__body{
				padding: 0;
			}
			.el-tabs__header{
				padding: 0px 20px;
				background-color: #F5F5F6;
					.el-tabs__item{
						font-size: 16px;
						height: 47px;
						line-height: 47px;
					}
			}
		}
	}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
	.order_detail{
		.order_detail_body{
			margin-bottom: 20px;
			.round_img{
				width: 90px;
				height: 90px;
				border-radius: 50%;
				overflow: hidden;
				margin: 14px;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.title{
				font-size: 20px;
				.title_icon{
					color: #d81e06;
					font-size: 16px;
					margin-right: 20px;
				}
			}
			.title_sub{
				font-size: 14px;
				color: #666666;
			}
			.order_detail_content{
				background-color: #F5F5F6;
				padding-top: 20px;
				color: #4c4c4c;
				font-size: 14px;
				.order_detail_item{
					margin-bottom: 10px;
					.order_content{
						margin-top: 10px;
					}
					.order_file {
						position: relative;
						cursor: pointer;
						.img_mask {
							display: none;
							position: absolute;
							left: 0px;
							top: 0px;
							background-color: rgba(0, 0, 0, 0.3);
							width: 100%;
							height: 22px;
							text-align: right;
							z-index: 1;
							i {
								font-size: 20px;
								line-height: 22px;
								display: inline-block;
								margin-right: 15px;
								color: #fff;
							}
						}
						p {
							margin-top: 5px;
							padding-left: 14px;
							padding-right: 14px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.file_icon{
							height: 68px;
							line-height: 68px;
							font-size: 68px;
							color: #409EFF;
						}
					}
					.order_file:hover .img_mask {
						display: block;
					}
				}
			}
		}
		.green {
			color: #00c1de;
		}
		.done {
			color: #198120;
		}
		.red {
			color: #d81e06;
		}
		.yellow{
			color: #e6a23c;
		}
		.order_steps{
			// height: 240px;
			.el-step__icon-inner{
				display: none;
			}
		}

		.tab_body{
			padding: 0 20px 20px 20px;
		}
	}
</style>