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

<template>
  <div>
    <el-descriptions class="margin-top" :column="4" :size="'medium'" border style="margin-bottom: 1rem">
<!--      <template slot="extra">-->
<!--        <el-button v-if="createTicketType" type="success" size="small">新增客户信息</el-button>-->
<!--        <el-button v-if="createTicketType" type="primary" size="small" :disabled="!selectUser.id">完善更多客户信息</el-button>-->
<!--        <el-button type="primary" size="small">选择业务</el-button>-->
<!--      </template>-->
      <el-descriptions-item>
        <template slot="label">
          用户选择
        </template>
        <UserChoose v-model="selectUser"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          车辆选择
        </template>
        <CarChoose v-model="selectCar" :cus-name="selectUser.cusName"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          手机
        </template>
        <el-input disabled v-model="selectUser.phoneNumber"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          车架号
        </template>
        <el-input disabled v-model="selectCar.vin"/>
      </el-descriptions-item>
<!--      <el-descriptions-item>-->
<!--        <template slot="label">-->
<!--          车牌-->
<!--        </template>-->
<!--        <el-input disabled v-model="selectCar.licenseNumber"/>-->
<!--      </el-descriptions-item>-->
      <el-descriptions-item>
        <template slot="label">
          品牌车系
        </template>
        <el-input disabled v-model="selectCar.modelStr"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          保险到期
        </template>
        <el-date-picker disabled
                        v-model="selectCar.insuranceExpiryDate"
                        type="date">
        </el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          年检到期
        </template>
        <el-date-picker disabled
                        v-model="selectCar.nextInspectionDate"
                        type="date">
        </el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          进厂时间
        </template>
        <el-date-picker
          v-model="formData.inTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          预计完工
        </template>
        <el-date-picker
          v-model="formData.outTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          上次里程
        </template>
        <el-input v-model="selectCar.maintenanceMileage"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          本次里程
        </template>
        <el-input v-model="selectCar.newMaintenanceMileage"/>
      </el-descriptions-item>
<!--      <el-descriptions-item :span="3">-->
<!--        <template slot="label">-->
<!--          备注-->
<!--        </template>-->
<!--        <el-input v-model="formData.remark"/>-->
<!--      </el-descriptions-item>-->
      <el-descriptions-item>
        <template slot="label">
          服务顾问
        </template>
        <StaffChoose v-model="selectStaff" />
      </el-descriptions-item>
    </el-descriptions>
    <el-row :gutter="5" style="margin-bottom: 1rem">
      <el-col v-if="createTicketType" :span="4.8">
        <el-button size="small" @click="$refs['repairAdvice'].open()">维修建议</el-button>
      </el-col>
      <el-col v-if="createTicketType" :span="4.8">
        <el-button size="small" @click="$refs['qualityExplain'].open()">质保说明</el-button>
      </el-col>
      <el-col v-if="createTicketType" :span="4.8">
        <el-button size="small" v-if="formData.endCheck.toString() === '1'" @click="formData.endCheck = 0">终检</el-button>
        <el-button size="small" v-if="formData.endCheck.toString() === '0'" @click="formData.endCheck = 1">不终检</el-button>
      </el-col>
      <el-col v-if="createTicketType" :span="4.8">
        <el-select v-model="formData.partDisposal" size="small">
          <el-option v-for="item in this.getDictDatas(DICT_TYPE.REPAIR_PART_DISPOSAL)" :key="item.value"
                     :label="item.label" :value="item.value"/>
        </el-select>
      </el-col>
      <el-col v-if="createTicketType" :span="4.8">
        <el-select v-model="formData.repairType" size="small">
          <el-option v-for="item in this.getDictDatas(DICT_TYPE.REPAIR_TYPE)" :key="item.value" :label="item.label"
                     :value="item.value"/>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button size="small" v-if="formData.ticketType === '01'" @click="formData.ticketType = '02'">A单</el-button>
        <el-button size="small" v-if="formData.ticketType === '02'" @click="formData.ticketType = '01'">B单</el-button>
      </el-col>
    </el-row>
    <TicketItem item-type="project" :in-list-data="projectList" @tableData="projectData" ref="projectTable"/>
    <TicketItem v-if="createTicketType" :in-list-data="partList" item-type="part" @tableData="partData" ref="partTable"/>
    <TicketItem v-if="createTicketType" :in-list-data="otherList" item-type="other" @tableData="otherData" ref="otherTable"/>
    <el-row :gutter="createTicketType ? 2 : 3" style="margin-top: 1rem">
      <el-col :span="createTicketType ? 12 : 16">
        <el-descriptions class="margin-top" :column="createTicketType ? 2 : 3" border :size="'medium'"
                         style="margin-bottom: 1rem">
<!--          <el-descriptions-item>-->
<!--            <template slot="label">-->
<!--              工单号-->
<!--            </template>-->
<!--           <TicketChoose @selected="getTickets"/>-->
<!--          </el-descriptions-item>-->
          <el-descriptions-item>
            <template slot="label">
              时间
            </template>
            <el-date-picker
              v-model="formData.ticketTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-descriptions-item>
          <el-descriptions-item v-if="!createTicketType">
            <template slot="label">
              备注
            </template>
            <el-input v-model="formData.remark"/>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col v-if="createTicketType" :span="12">
        <el-descriptions class="margin-top" :column="5" :size="'medium'"
                         style="margin-left: 1rem;margin-top: 1rem">
          <el-descriptions-item label="数量">{{ formData.count }}</el-descriptions-item>
          <el-descriptions-item label="项目">{{ formData.projectPrice }}</el-descriptions-item>
          <el-descriptions-item label="配件">{{ formData.partPrice }}</el-descriptions-item>
          <el-descriptions-item label="附加">{{ formData.otherPrice }}</el-descriptions-item>
          <el-descriptions-item label="合计">{{ formData.totalPrice }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col v-else :span="8" style="margin-top:1rem;display: flex;justify-content: right">
        <el-button type="danger">结算</el-button>
        <el-button type="warning" @click="handlePendingSave">挂单</el-button>
      </el-col>
    </el-row>
    <el-row v-if="createTicketType" :gutter="2">
      <el-col :span="12">
        <el-descriptions border class="margin-top" :column="1" :size="'medium'">
          <el-descriptions-item>
            <template slot="label">
              备注
            </template>
            <el-input v-model="formData.remark"/>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="12" style="margin-top:1rem;display: flex;justify-content: right">
        <el-button type="success" @click="handleSave">完成</el-button>
        <el-button type="danger">结算</el-button>
<!--        <el-button type="primary">通知施工</el-button>-->
<!--        <el-button type="primary">领料</el-button>-->
<!--        <el-button type="primary">退料</el-button>-->
      </el-col>
    </el-row>

    <RepairAdvice ref="repairAdvice" v-model="formData.repairAdvice"/>
    <QualityExplain ref="qualityExplain" v-model="formData.quality" />
  </div>
</template>

<script>
import UserChoose from "@/views/repair/Components/UserChoose.vue";
import StaffChoose from "@/views/repair/Components/StaffChoose.vue";
import TicketItem from "@/views/repair/tickets/Components/TicketItem.vue";
import CarChoose from "@/views/repair/Components/CarChoose.vue";
import {createUniqueCodeByHead} from "@/utils/createUniqueCode";
import {createTickets, getTicketsById} from "@/api/repair/tickets/Tickets";
import RepairAdvice from "@/views/repair/tickets/form/RepairAdvice.vue";
import QualityExplain from "@/views/repair/tickets/form/QualityExplain.vue";
import TicketChoose from "@/views/repair/tickets/Components/TicketChoose.vue";

export default {
  name: "UserInfo",
  components: {TicketChoose, QualityExplain, RepairAdvice, CarChoose, TicketItem, StaffChoose, UserChoose},
  props: {
    createTicketType: {
      type: Boolean,
      required: true,
    }
  },
  watch: {
    selectUser(val) {
      if (!val) {
        this.selectUser = {}
      }
    },
    selectCar(val) {
      if (!val) {
        this.selectCar = {}
      }
    }
  },
  data() {
    return {
      formData: {
        endCheck: 1,
        partDisposal: '01',
        repairType: '01',
        ticketNo: null,
        remark: null,
        inTime: Date.now(),
        outTime: null,
        ticketTime: Date.now(),
        projectPrice: 0,
        partPrice: 0,
        otherPrice: 0,
        totalPrice: 0,
        count: 0,
        userId: null,
        userName: null,
        userMobile: null,
        carId: null,
        carNo: null,
        carVin: null,
        carBrandId: null,
        carBrandName: null,
        carBrandType: null,
        adviserId: null,
        adviserName: null,
        payType: null,
        repairAdvice: null,
        quality: {
          qualityMileage: 3000,
          qualityDay: 30
        },
        qualityMileage: null,
        qualityDay: null,
        ticketType: "01",
        itemList: [],
        ticketsStatus: "01",
      },
      selectUser: {},
      selectCar: {},
      selectStaff: {},
      projectList: [],
      partList: [],
      otherList: []
    }
  },
  methods: {
    projectData(data) {
      // 去掉最后一行
      this.projectList = [...data]
      this.projectList.pop()
      // 通知计算
      this.computedData()
    },
    partData(data) {
      // 去掉最后一行
      this.partList = [...data]
      this.partList.pop()
      // 通知计算
      this.computedData()
    },
    otherData(data) {
      // 去掉最后一行
      this.otherList = [...data]
      this.otherList.pop()
      // 通知计算
      this.computedData()
    },
    computedData() {
      const data = this.formData
      this.formData = {
        ...data,
        projectPrice: 0,
        partPrice: 0,
        otherPrice: 0,
        totalPrice: 0,
        count: 0
      }
      // 项目
      if (this.projectList) {
        this.formData.projectPrice = this.computeByItem(this.projectList)
      }
      // 配件
      if (this.partList) {
        this.formData.partPrice = this.computeByItem(this.partList)
      }
      // 其他
      if (this.otherList) {
        this.formData.otherPrice = this.computeByItem(this.otherList)
      }
    },
    computeByItem(item) {
      const count = item.reduce((x, y) => {
        return x + y.count
      }, 0)
      const totalPrice = item.reduce((x, y) => {
        return x + y.totalPrice
      }, 0)
      this.formData.count += parseInt(count)
      this.formData.totalPrice += parseFloat(totalPrice)
      return parseFloat(totalPrice)
    },
    // 登记保存
    async handleSave() {
      this.createInit()
      this.createItemInit()
      try {
        await createTickets(this.formData)
        this.$modal.msgSuccess("新增成功")
        this.init()
      }catch{}finally {
        this.formData.ticketNo = null
      }
    },
    // 初始化
    init(){
      this.formData = {
        endCheck: 1,
        partDisposal: '01',
        repairType: '01',
        ticketNo: null,
        remark: null,
        inTime: Date.now(),
        outTime: null,
        ticketTime: Date.now(),
        projectPrice: 0,
        partPrice: 0,
        otherPrice: 0,
        totalPrice: 0,
        count: 0,
        userId: null,
        userName: null,
        userMobile: null,
        carId: null,
        carNo: null,
        carVin: null,
        carBrandId: null,
        carBrandName: null,
        carBrandType: null,
        adviserId: null,
        adviserName: null,
        payType: null,
        repairAdvice: null,
        quality: {
          qualityMileage: 3000,
          qualityDay: 30
        },
        qualityMileage: null,
        qualityDay: null,
        ticketType: null,
        itemList: [],
        ticketStatus: "01"
      }
      this.selectUser ={}
      this.selectCar = {}
      this.selectStaff = {}
      this.projectList = []
      this.partList = []
      this.otherList = []
      this.resetTable()
    },
    resetTable(){
      this.$refs['projectTable'].resetTable()
      this.$refs['partTable'].resetTable()
      this.$refs['otherTable'].resetTable()
    },
    // 新增基础信息init
    createInit() {
      // 生成工单号
      this.formData.ticketNo = this.formData.ticketNo || createUniqueCodeByHead("GD")
      // 质保说明
      this.formData.qualityMileage = this.formData.quality.qualityMileage
      this.formData.qualityDay = this.formData.quality.qualityDay
      // 选择的用户
      this.formData.userId = this.selectUser?.id
      this.formData.userName = this.selectUser?.cusName
      this.formData.userMobile = this.selectUser?.phoneNumber

      // 选择的车辆
      this.formData.carId = this.selectCar?.id
      this.formData.carNo = this.selectCar?.licenseNumber
      this.formData.carVin = this.selectCar?.vin
      this.formData.carBrandId = this.selectCar?.carBrand
      this.formData.carBrandName = this.selectCar?.brandStr
      this.formData.carBrandType = this.selectCar?.brandType

      // 服务顾问
      this.formData.adviserId = this.selectStaff?.id
      this.formData.adviserName = this.selectStaff?.name
    },
    // 新增子表信息init
    createItemInit() {
      // 项目
      this.formData.itemList = [...this.formData.itemList, ...this.formatItem("project", this.projectList)]
      // 配件
      this.formData.itemList = [...this.formData.itemList, ...this.formatItem("part", this.partList)]
      // 其他
      this.formData.itemList = [...this.formData.itemList, ...this.formatItem("other", this.otherList)]
    },
    // 子表信息预处理
    formatItem(type, list) {
      if (!(list && list.length > 0)){
        return []
      }
      return list.map(item => {
        const temp = {
          ...item,
          itemName: item.name,
          itemCount: item?.count,
          itemUnit: item.unit,
          itemPrice: item.price,
          itemDiscount: item.discount,
          itemMoney: item.totalPrice,
          repairId: item?.repair?.id,
          repairName: item?.repair?.name,
          saleId: item?.sale?.id,
          saleName: item?.sale?.name,
          itemTypeId: item?.type?.id,
          remark: item.remark,
          itemStatus: item.itemStatus,
          id: null
        }
        switch (type) {
          case 'project':
            temp['itemType'] = "01"
            break;
          case 'part':
            temp['itemType'] = "02"
            break;
          case 'other':
            temp['itemType'] = "03"
            break;
          default:
            return "";
        }
        temp[type + 'Id'] = item.id
        return temp;
      })
    },
    // 查看工单
    async getTickets(id){
      try {
        const res = await getTicketsById(id)
        const data= res.data
        this.formData = {
          ...data,
          quality: {qualityMileage: data.qualityMileage, qualityDay: data.qualityDay}
        }
        const itemList = this.formData.itemList
        this.selectUser = {id: data.userId}
        this.selectCar = {id: data.carId}
        this.projectList = [itemList.find(item => item.itemType === '01')]
        this.partList = [itemList.find(item => item.itemType === '02')]
        this.otherList = [itemList.find(item => item.itemType === '03')]
      }catch{}
    },
    // 挂单
    handlePendingSave(){
      this.formData.ticketsStatus = "06"
      this.handleSave()
    }
  }
}
</script>

<style scoped lang="scss">
</style>