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">完善更多客户信息</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 v-if="createTicketType" :gutter="5" style="margin-bottom: 1rem">
      <el-col :span="4.8">
        <el-button size="small">维修建议</el-button>
      </el-col>
      <el-col :span="4.8">
        <el-button size="small">质保说明</el-button>
      </el-col>
      <el-col :span="4.8">
        <el-button size="small" v-if="formData.endCheck" @click="formData.endCheck = 0">终检</el-button>
        <el-button size="small" v-if="!formData.endCheck" @click="formData.endCheck = 1">不终检</el-button>
      </el-col>
      <el-col :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 :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-row>
    <TicketItem item-type="project"/>
    <TicketItem v-if="createTicketType" item-type="part"/>
    <TicketItem v-if="createTicketType" item-type="other"/>
    <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>
            <el-select v-model="formData.ticketNo" size="small">
            </el-select>
          </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/>
          </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="数量">0</el-descriptions-item>
          <el-descriptions-item label="项目">0</el-descriptions-item>
          <el-descriptions-item label="配件">0</el-descriptions-item>
          <el-descriptions-item label="附加">0</el-descriptions-item>
          <el-descriptions-item label="合计">0</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">挂单</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/>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="12" style="margin-top:1rem;display: flex;justify-content: right">
        <el-button type="danger">结算</el-button>
        <el-button type="success">完成</el-button>
        <el-button type="primary">通知施工</el-button>
        <el-button type="primary">领料</el-button>
        <el-button type="primary">退料</el-button>
      </el-col>
    </el-row>
  </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 {parseTime} from "../../../../utils/ruoyi";

export default {
  name: "UserInfo",
  components: {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()
      },
      selectUser: {},
      selectCar: {},
      selectStaff: {},
    }
  },
  methods: {
    parseTime
  }
}
</script>

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