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

<template>
  <div>
    <el-row :gutter="24">
<!--      <el-col :span="17" style="padding-right: 0">-->
      <el-col :span="24" style="padding-right: 0">
        <el-card class="top-left">
          <el-descriptions class="margin-top" :column="3" :size="'mini'" border>
            <template slot="extra">
              <el-button v-if="createTicketType" type="success" size="small" @click="updateUserInfo(false)">
                新增客户信息
              </el-button>
              <el-button v-if="createTicketType" type="primary" size="small" @click="updateUserInfo(true)"
                         :disabled="!selectUser.id">
                完善更多客户信息
              </el-button>
            </template>
            <el-descriptions-item>
              <template slot="label">
                用户选择
              </template>
              <UserChoose v-model="selectUser" :in-list="userInData"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                车辆选择
              </template>
              <CarChoose v-model="selectCar" :cus-name="selectUser.cusName" :in-list="carInData"/>
            </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.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="formData.mileageTraveled" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                三包单位
              </template>
              <el-input v-model="formData.threePackUnits" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                保险名称
              </template>
              <el-input v-model="formData.insuranceName" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                管理费
              </template>
              <el-input v-model="formData.managerMoney" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                救援费
              </template>
              <el-input v-model="formData.rescueMoney" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                三包费
              </template>
              <el-input v-model="formData.threePackMoney" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                定损费
              </template>
              <el-input v-model="formData.confirmFaultMoney" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                预约订单选择
              </template>
              <el-select v-model="formData.bookingId" size="small">
                <el-option v-for="item in bookingList" :key="item.id" :value="item.id"
                           :label="item.bookingTime"/>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                服务顾问
              </template>
              <StaffChoose v-model="selectStaff" :is-get="'true'"/>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
<!--      <el-col :span="7" style="padding-left: 0">-->
<!--        <el-card style="margin-left: 0">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span style="font-weight: bold; font-size: 16px;"> 会员卡券</span>-->
<!--          </div>-->
<!--          <el-table-->
<!--            :data="couponList"-->
<!--            border-->
<!--            size="mini"-->
<!--            height="270"-->
<!--            style="width: 100%">-->
<!--            <el-table-column prop="couponName" label="卡券名称"/>-->
<!--            <el-table-column label="卡券类型" width="80" align="center" prop="couponType">-->
<!--              <template v-slot="scope">-->
<!--                <dict-tag :type="DICT_TYPE.MEMBER_COUPON_TYPE" :value="scope.row.couponType"/>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="剩余金额/次数" width="120" align="right" prop="balance">-->
<!--              <template v-slot="scope">-->
<!--                {{ scope.row.balance }}{{ scope.row.outRule == 'mehx' ? '元' : '次' }}-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="适用车型" width="80" align="center" prop="carModel">-->
<!--              <template v-slot="scope">-->
<!--                <span v-if="scope.row.carModel == null">不限</span>-->
<!--                <dict-tag :type="DICT_TYPE.MEMBER_CAR" :value="scope.row.carModel"/>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="核销规则" width="100" align="center" prop="outRule">-->
<!--              <template v-slot="scope">-->
<!--                <dict-tag :type="DICT_TYPE.MEMBER_COUPON_OUT_RULE" :value="scope.row.outRule"/>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="开始有效期" align="center" prop="beginTime" width="150">-->
<!--              <template v-slot="scope">-->
<!--                <span>{{ parseTime(scope.row.beginTime) }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="结束有效期" align="center" prop="endTime" width="150">-->
<!--              <template v-slot="scope">-->
<!--                <span>{{ parseTime(scope.row.endTime) }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-card>-->
<!--      </el-col>-->
    </el-row>
    <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"
                :coupon-list="couponList" @changeCoupon="changeCoupon"/>
    <TicketItem v-if="createTicketType" :in-list-data="partList" item-type="part" @tableData="partData"
                :coupon-list="couponList" @changeCoupon="changeCoupon"
                ref="partTable"/>
    <TicketItem v-if="createTicketType" :in-list-data="otherList" item-type="other" @tableData="otherData"
                :coupon-list="couponList" @changeCoupon="changeCoupon"
                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" :disabled="isEnable">完成</el-button>
<!--        <el-button type="danger" @click="handlePaid" :disabled="isEnable">结算</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"/>
    <UserAndCarForm ref="userAndCarInfo" @success="successCusAndCar"/>
  </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";
import request from "@/utils/request";
import * as CustomerMainApi from "@/api/base/customer";
import UserAndCarForm from "@/views/repair/tickets/form/UserAndCarForm.vue";
import {getByNameAndMobile} from "@/api/base/customer";
import {getByLicenseNumber} from "@/api/base/carmain";

export default {
  name: "UserInfo",
  components: {
    UserAndCarForm,
    TicketChoose, QualityExplain, RepairAdvice, CarChoose, TicketItem, StaffChoose, UserChoose
  },
  props: {
    createTicketType: {
      type: Boolean,
      required: true,
    }
  },
  watch: {
    selectUser(val) {
      if (val) {
        if (!val.isRes) {
          this.selectCar = {}
          this.bookingList = []
          this.couponList = []
          if (val.userId) {
            this.getBooking(val.userId)
          }
          if (val.id) {
            this.getCouponList(val.id)
          }
        }
      } else {
        this.selectCar = {}
        this.bookingList = []
        this.couponList = []
      }
    },
    selectCar(val) {
      if (!val) {
        this.selectCar = {}
      }
    }
  },
  data() {
    return {
      isEnable: false,
      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",
        bookingId: null,
        mileageTraveled: null,
        threePackUnits: null,
        insuranceName: null,
        managerMoney: null,
        rescueMoney: null,
        threePackMoney: null,
        confirmFaultMoney: null,
      },
      selectUser: {},
      selectCar: {},
      selectStaff: {},
      projectList: [],
      partList: [],
      otherList: [],
      bookingList: [],
      couponList: [],
      finaCouponList: [],
      userInData: null,
      carInData: null,
    }
  },
  methods: {
    async getCouponList(id) {
      const res = await CustomerMainApi.getCustomerMain(id);
      this.couponList = res.data.couponList
      this.finaCouponList = [
        ...this.couponList,
      ]
      this.finaCouponList.map(item => item["isChoose"] = false)
    },
    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.isEnable = true
      this.createInit()
      this.createItemInit()
      try {
        const count = this.handleValidate()
        if (count > 0){
          return
        }
        await createTickets(this.formData)
        this.$modal.msgSuccess("新增成功")
        this.init()
      } catch {
      } finally {
        this.formData.ticketNo = null
        this.isEnable = false
      }
    },
    // 初始化
    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",
        mileageTraveled: null,
        threePackUnits: null,
        insuranceName: null,
        managerMoney: null,
        rescueMoney: null,
        threePackMoney: null,
        confirmFaultMoney: null,
      }
      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.bookingId = this.formData?.bookingId?.toString() || null
      // 生成工单号
      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.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)]
    },
    // 非空验证
    handleValidate(){
      let count = 0
      this.formData.itemList.forEach(item => {
        if (count !== 0) return count
        if (!item.repairIds || !item.saleId){
          let message = ""
          switch (item.itemType){
            case "01":
              message += "项目："
              break
            case "02":
              message += "配件："
              break
            case "03":
              message += "其他："
          }
          this.$modal.msgError(message + item.itemName + (!item.repairIds ? "施工人员" : "销售人员") + "不能为空")
          count++
        }
      })
      return count
    },
    // 子表信息预处理
    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,
          repairIds: item?.repair.map(i => i.userId).join(','),
          repairNames: item?.repair.map(i => i.userName).join(','),
          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,
          cusName: data.userName,
          id: data.userId,
          phoneNumber: data.userMobile,
          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()
    },
    // 结算
    handlePaid() {
      // this.formData.ticketsStatus = '02'
      this.handleSave()
    },
    // 查看用户的预约记录
    async getBooking(userId) {
      const res = await request({
        url: "/repair/booking/list?userId=" + userId,
        method: "get"
      })
      this.bookingList = res.data
      if (this.bookingList.length > 0) {
        this.bookingList.forEach(item => {
          item.bookingTime = this.parseTime(item.bookingTime, '{y}-{m}-{d} {h}:{m}')
        })
      }
    },
    // 权益更改
    changeCoupon(data) {
      this.finaCouponList.map(item => {
        item.isChoose = data.includes(item)
      })
      this.finaCouponList.forEach(item => console.log(item.isChoose))
      this.couponList = this.finaCouponList.filter(item => !item.isChoose)
    },
    // 新增客户信息
    updateUserInfo(flag) {
      const data = {}
      if (flag) {
        if (this.selectUser) {
          data.userInfo = this.selectUser
        }
        if (this.selectCar) {
          data.carInfo = this.selectCar
        }
      }
      this.$refs.userAndCarInfo.open(data)
    },
    // 新增客户信息回调
    async successCusAndCar(data) {
      const cus = {
        cusName: data.userInfo.cusName,
        phoneNumber: data.userInfo.phoneNumber
      }
      const car = {
        licenseNumber: data.carInfo.licenseNumber
      }
      // 查客户
      const cusRes = await getByNameAndMobile(cus)
      this.userInData = {
        ...cusRes.data,
        isRes: true
      }
      // 查车辆
      const carRes = await getByLicenseNumber(car)
      this.carInData = {
        ...carRes.data,
        brandAndModel: car.data.carInfo.brandAndModel
      }
    }
    // // 权益选择
    // handleSelectionChange(val){
    //
    // }
  }
}
</script>

<style scoped lang="scss">
.top-left {
  margin-bottom: 1rem;
}

.el-card__body {
  min-height: 100rem;
}
</style>