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>
              {{ info.handleName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                经办人电话
              </template>
              {{ info.handleMobile }}
            </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>
              {{ info.mileageTraveled }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                三包单位
              </template>
              {{ info.threePackUnits }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                保险名称
              </template>
              {{ info.insuranceName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                管理费
              </template>
              {{ info.managerMoney }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                救援费
              </template>
              {{ info.rescueMoney }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                三包费
              </template>
              {{ info.threePackMoney }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                定损费
              </template>
              {{ info.confirmFaultMoney }}
            </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>
              {{ parseTime(info.maintenanceDate, '{y}-{m}-{d}') }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                最近保养里程
              </template>
              {{ info.maintenanceMileage }}
            </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>
          <el-switch v-if="userRole === 'service_advisor'" style="float: right; padding: 3px 0"
                     v-model="info.partShow"
                     active-text="客户可见"
                     inactive-text="客户不可见"
                     active-value="1"
                     inactive-value="0"
                     @change="changeShow"
          >
          </el-switch>
        </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>

      <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="2" :size="'medium'" border style="margin-bottom: 1rem">
            <el-descriptions-item>
              <template slot="label">
                总数量
              </template>
              {{ totalCount }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                总金额
              </template>
              {{ totalMoney}}
            </el-descriptions-item>
          </el-descriptions>
        </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, updateShow} from "@/api/repair/tickets/Tickets";

export default {
  name: "TicketsShow",
  props: {
    userRole: String
  },
  components: {TicketItemShow},
  data() {
    return {
      dialogVisible: false,
      info: {},
      projects: [],
      wares: [],
      others: [],
      allList: [],
      totalCount: 0,
      totalMoney: 0
    }
  },
  methods: {
    async open(row) {
      this.reset()
      const res = await getTicketsById(row.id)
      this.allList = res.data.items
      this.computed()
      this.projects = this.allList.filter(item => item.project)
      this.wares = this.allList.filter(item => item.ware)
      this.others = this.allList.filter(item => item.other)
      this.info = row
      this.dialogVisible = true
    },
    async changeShow() {
      try {
        await updateShow(this.info.id, this.info.partShow)
      } catch {
      }
    },
    reset() {
      this.info = {}
      this.projects = []
      this.wares = []
      this.others = []
      this.allList = []
    },
    computed(){
      this.totalCount = 0
      this.totalMoney = 0
      if (this.allList && this.allList.length > 0){
        this.totalCount = this.allList.reduce((acc, cur) => {return acc + cur.itemCount}, 0)
        this.totalMoney = this.allList.reduce((acc, cur) => {return acc + cur.itemMoney}, 0)
      }
    }
  }
}
</script>

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