lanan-system-vue/src/views/repair/tickets/Components/TicketsShow.vue

<template>
  <div class="app-container">
    <el-dialog title="单据详情" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
      <el-card class="box-card">
        <!-- 卡片头 -->
        <div slot="header" class="clearfix">
          <i class="el-icon-plus"/>
          <span>工单信息</span>
        </div>
        <!-- 卡片内容 -->
        <div>
          <el-descriptions class="margin-top" :column="4" :size="'medium'" border style="margin-bottom: 1rem">
            <el-descriptions-item>
              <template slot="label">
                订单编号
              </template>
              {{ info.ticketNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                维修类别
              </template>
              <dict-tag :type="DICT_TYPE.REPAIR_TYPE" v-model="info.repairType"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                状态
              </template>
              <dict-tag :type="DICT_TYPE.REPAIR_TICKETS_WORK_STATUS" v-model="info.ticketsWorkStatus"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                客户名称
              </template>
              {{ info.userName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                车牌号
              </template>
              {{ info.carNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                车系
              </template>
              {{ info.carBrandName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                手机号
              </template>
              {{ info.userMobile }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                创建时间
              </template>
              {{ parseTime(info.createTime, '{y}-{m}-{d}') }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                预计完工
              </template>
              {{ parseTime(info.outTime, '{y}-{m}-{d}') }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                合计金额
              </template>
              {{ info.totalPrice }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                参考成本
              </template>
              {{ info.cost }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                参考毛利
              </template>
              {{ info.profit }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                领料状态
              </template>
              <dict-tag :type="DICT_TYPE.REPAIR_PART_STATUS" v-model="info.partStatus"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                服务顾问
              </template>
              {{ info.adviserName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                所属门店
              </template>
              {{ info.corpId }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                工单状态
              </template>
              <dict-tag :type="DICT_TYPE.REPAIR_TICKETS_STATUS" v-model="info.ticketsStatus"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                备注
              </template>
              {{ info.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <el-card class="box-card" v-if="projects && projects.length > 0">
        <!-- 卡片头 -->
        <div slot="header" class="clearfix">
          <i class="el-icon-plus"/>
          <span>项目信息</span>
        </div>
        <!-- 卡片内容 -->
        <div>
          <TicketItemShow :list="projects" list-type="project"/>
        </div>
      </el-card>
      <el-card class="box-card" v-if="wares && wares.length > 0">
        <!-- 卡片头 -->
        <div slot="header" class="clearfix">
          <i class="el-icon-plus"/>
          <span>材料信息</span>
        </div>
        <!-- 卡片内容 -->
        <div>
          <TicketItemShow :list="wares" list-type="ware"/>
        </div>
      </el-card>
      <el-card class="box-card" v-if="others && others.length > 0">
        <!-- 卡片头 -->
        <div slot="header" class="clearfix">
          <i class="el-icon-plus"/>
          <span>附加信息</span>
        </div>
        <!-- 卡片内容 -->
        <div>
          <TicketItemShow :list="others" list-type="other"/>
        </div>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TicketItemShow from "@/views/repair/tickets/Components/TicketItemShow.vue";
import {getTicketsById} from "@/api/repair/tickets/Tickets";

export default {
  name: "TicketsShow",
  components: {TicketItemShow},
  data() {
    return {
      dialogVisible: false,
      info: {},
      projects: [],
      wares: [],
      others: []
    }
  },
  methods: {
    async open(row) {
      const res = await getTicketsById(row.id)
      const data = res.data.items
      this.projects = data.filter(item => item.project)
      this.wares = data.filter(item => item.ware)
      this.others = data.filter(item => item.other)
      this.info = row
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin-bottom: 10px;
}
</style>