flowable_management/base-vue/src/views/modules/tickets/detail.vue

<template>
  <div class="mod-config">
    <el-descriptions class="margin-top" title="工单详情" :column="2" :size="size" border>
      <!-- <template slot="extra">
        <el-button type="primary" size="small">操作</el-button>
      </template> -->
      <el-descriptions-item>
        <template slot="label">
          <!-- <i class="el-icon-user"></i> -->
          工单ID
        </template>
        {{ ticketsData.ticketsId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          小车类型
        </template>
        {{ ticketsData.carName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          异常类型
        </template>
        {{ ticketsData.errorType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          合同编号
        </template>
        {{ ticketsData.contractNumber }}
        <!-- <el-tag size="small">学校</el-tag> -->
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          客户
        </template>
        {{ ticketsData.clientName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          故障描述
        </template>
        {{ ticketsData.description }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          部门对接人
        </template>
        {{ ticketsData.deptPeople }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          客户联系电话
        </template>
        {{ ticketsData.deptPhone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建者
        </template>
        {{ ticketsData.createUserId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建时间
        </template>
        {{ ticketsData.createTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          是否验收
        </template>
        {{ ['否', '是'][Number(ticketsData.isCheck)] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          工单状态
        </template>
        {{ statusOpt | findByValue(ticketsData.status) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          工单关闭时间
        </template>
        {{ ticketsData.updateTime }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        ticketsData: {},
        statusOpt: [{value: '0', label: '未开始'}, {value: '1', label: '已指派'}, {value: '2', label: '处理中'}, {value: '3', label: '已完成'}]
      }
    },
    created () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.$http({
          url: this.$http.adornUrl(`/tickets/tickets/info/${this.$route.query.id}`),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.ticketsData = data.tickets
          }
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      }
    }
  }
</script>

<style scoped>
.mod-config {
  padding: 20px 10px;
}
.el-pagination {
  margin-top: 15px;
  text-align: right;
}
</style>