lanan-repair-app/pages-order/addOrder/editOrder.vue

<template>
  <view class="container">
    <view class="containerBody">
      <VNavigationBar background-color="rgba(0,0,0,0)" title="编辑工单" title-color="#333"></VNavigationBar>
      <view class="body">
        <view class="card cardInfo userCard">
          <template>
            <view class="userTitle">工单信息</view>
            <view class="userContainer" style="padding-bottom: 20rpx">
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">客户姓名</text>
                  <input type="text" style="text-align: left" v-model="formData.userName" placeholder="请填写客户姓名"/>
                </view>
                <view class="infoItem" style="flex: 1">
                  <text class="label">客户电话</text>
                  <input type="text" style="text-align: left" v-model="formData.userMobile" placeholder="请填写客户电话"/>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">经办人姓名</text>
                  <input type="text" style="text-align: left" v-model="formData.handleName" placeholder="请填写经办人姓名"/>
                </view>
                <view class="infoItem" style="flex: 1">
                  <text class="label">经办人电话</text>
                  <input type="text" style="text-align: left" v-model="formData.handleMobile" placeholder="请填写经办人电话"/>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">进厂时间</text>

                  <picker
                      mode="date"
                      :value="formData.inTime"
                      start="2020-01-01"
                      end="2030-12-31"
                      @change="bindDateChange1">
                    <view style="margin-left: 10rpx">
                      {{ formData.inTime}}
                    </view>
                  </picker>
                </view>
                <view class="infoItem" style="flex: 1">
                  <text class="label">预计完工</text>
                  <picker
                      mode="date"
                      :value="formData.outTime"
                      start="2020-01-01"
                      end="2030-12-31"
                      @change="bindDateChange2">
                    <view style="margin-left: 10rpx">
                      {{ formData.outTime}}
                    </view>
                  </picker>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">表显里程</text>
                  <input type="text" style="text-align: left" v-model="formData.mileageTraveled" placeholder="请填写表显里程"/>
                </view>
                <view class="infoItem" style="flex: 1">
                  <text class="label">三包单位</text>
                  <input type="text" style="text-align: left" v-model="formData.threePackUnits" placeholder="请填写三包单位"/>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">最近保养日期</text>
                  <picker
                      mode="date"
                      :value="formData.maintenanceDate"
                      start="2020-01-01"
                      @change="bindDateChange3">
                    <view style="margin-left: 10rpx">
                      {{ formData.maintenanceDate}}
                    </view>
                  </picker>
                </view>
                <view class="infoItem" style="flex: 1">
                  <text class="label">最近保养公里数</text>
                  <input type="text" style="text-align: left" v-model="formData.maintenanceMileage" placeholder="请填写最近保养公里数"/>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">年检到期时间</text>
                  <picker
                      mode="date"
                      :value="formData.nextInspectionDate"
                      start="2020-01-01"
                      @change="bindDateChange4">
                    <view style="margin-left: 10rpx">
                      {{ formData.nextInspectionDate}}
                    </view>
                  </picker>
                </view>
                <view class="infoItem" style="flex: 1">
                  <text class="label">保险到期时间</text>
                  <picker
                      mode="date"
                      :value="formData.insuranceExpiryDate"
                      start="2020-01-01"
                      @change="bindDateChange5">
                    <view style="margin-left: 10rpx">
                      {{ formData.insuranceExpiryDate}}
                    </view>
                  </picker>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1" v-if="cusFromList && cusFromList.length>0">
                  <text class="label">客户来源</text>
                  <picker @change="cusFromChange" :value="cusFromIndex" :range="cusFromList" range-key="label" >
                    <view class="uni-input">{{ cusFromList[cusFromIndex].label}}</view>
                  </picker>
                </view>
                <view class="infoItem" style="flex: 1" v-if="busiFromList && busiFromList.length>0">
                  <text class="label">业务来源</text>
                  <picker @change="busiFromChange" :value="busiFromIndex" :range="busiFromList" range-key="label" >
                    <view class="uni-input">{{ busiFromList[busiFromIndex].label}}</view>
                  </picker>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">保险名称</text>
                  <input type="text" style="text-align: left" v-model="formData.insuranceName" placeholder="请填写保险名称"/>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">承保险种</text>
                  <uni-data-checkbox multiple v-model="insuranceTypeArray" :localdata="insuranceTypeList"></uni-data-checkbox>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">上年保费</text>
                  <view style="display: flex">
                    交：<input type="decimal" style="text-align: left" v-model="formData.jiaoqiang" placeholder="请输入交强险保费"/>
                    商：<input type="decimal" style="text-align: left" v-model="formData.shangye" placeholder="请输入商业险保费"/>
                  </view>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">救援费</text>
                  <input type="text" style="text-align: left" v-model="formData.rescueMoney" placeholder="请填写救援费"/>
                </view>
                <view class="infoItem" style="flex: 1">
                  <text class="label">三包费</text>
                  <input type="text" style="text-align: left" v-model="formData.threePackMoney" placeholder="请填写救援费"/>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">定损费</text>
                  <input type="text" style="text-align: left" v-model="formData.confirmFaultMoney" placeholder="请填写定损费"/>
                </view>
                <view class="infoItem" style="flex: 1">
                  <text class="label">管理费</text>
                  <input type="text" style="text-align: left" v-model="formData.managerMoney" placeholder="请填写管理费"/>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1" v-if="partDisposals && partDisposals.length>0">
                  <text class="label">旧件处置方式</text>
                  <picker @change="partDisposalChange" :value="partDisposalIndex" :range="partDisposals" range-key="label" >
                    <view class="uni-input">{{ partDisposals[partDisposalIndex].label}}</view>
                  </picker>
                </view>
                <view class="infoItem" style="flex: 1" v-if="repairTypes && repairTypes.length>0">
                  <text class="label">维修类型</text>
                  <picker @change="repairTypeChange" :value="repairTypeIndex" :range="repairTypes" range-key="label" >
                    <view class="uni-input">{{ repairTypes[repairTypeIndex].label}}</view>
                  </picker>
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="footer">
        <view class="btn" @click="submitUpload">保存工单</view>
      </view>
    </view>
    <!-- 普通弹窗---拍照上传 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <view class="dl-avatar-box">
          <uni-file-picker :value="fileList" :sizeType="sizeType" @select="afterRead" @delete="deleteFile" limit="9" title="请上传诊断维修单和车辆维修前照片"></uni-file-picker>
        </view>
        <button type="primary" @click="applyData">保存</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import request from "@/utils/request";
import upload from "@/utils/upload";
import config from "@/config";
import {getToken, setUserInfo, getUserInfo,getStorageWithExpiry,setStorageWithExpiry} from '@/utils/auth.js'
import {getDictByCode,formatDate} from "@/utils/utils";

export default {
  components: {
    VNavigationBar,
  },
  data() {
    return {
      //上传的图片数组
      fileList: [],
      sizeType:['compressed'],
      phone: '',
      repairTypes:[],
      repairTypeIndex:0,
      cusFromList:[],
      cusFromIndex:0,
      busiFromList:[],
      busiFromIndex:0,
      partDisposals:[],
      partDisposalIndex:0,
      //是否可以点击
      canClick:true,
      formData:{
        userName: "",
        userMobile: "",
        inTime: null,
        outTime: null,
        handleName: null,
        handleMobile: null,
        mileageTraveled:null,
        threePackUnits:null,
        insuranceName:null,
        managerMoney:0.00,
        rescueMoney:0.00,
        threePackMoney:0.00,
        confirmFaultMoney:0.00,
        partDisposal:null,
        repairType:null,
        nextInspectionDate:null,
        insuranceExpiryDate:null,
        jiaoqiang:null,
        shangye:null,
        cusFrom:null,
        busiFrom:null,
      },
      //承保险种-、三者、车损、驾乘、不计
      insuranceTypeList:[{
        text: '交强',
        value: '交强'
      }, {
        text: '三者',
        value: '三者'
      }, {
        text: '车损',
        value: '车损'
      },{
        text: '驾乘',
        value: '驾乘'
      },{
        text: '不计',
        value: '不计'
      }],
      //选中的险种
      insuranceTypeArray:[],
      //ticketId 工单Id
      ticketId:null,
    }
  },
  onLoad(data) {
    this.ticketId = data.ticketId
    // this.formData.inTime = formatDate(Date.now())
    // this.formData.outTime = formatDate(Date.now())
    // this.formData.maintenanceDate = formatDate(Date.now())
    this.initDict("repair_busi_from")
    this.initDict("insurance_type")
    this.initDict("repair_type")
    this.initDict("cus_data_from")
    this.initDict("repair_part_disposal")
    this.getOrderDetail()
  },
  onShow() {
  },
  methods: {
    afterRead(file) {
      uni.showLoading({
        title: '正在上传中...',
        mask:true
      });
      for (let i = 0; i < file.tempFilePaths.length; i++) {
        upload({
          url:'/admin-api/infra/file/upload',
          filePath: file.tempFilePaths[i]
        }).then((res)=>{
          this.fileList.push({
            url: config.baseImageUrl+res.data
          })
          if(i==file.tempFilePaths.length-1){
            uni.hideLoading()
          }
          console.log(this.fileList)
        })
      }
    },

    deleteFile(file, index) {
      this.fileList.splice(index, 1);
    },
    getOrderDetail(){
      request({
        url: '/admin-api/repair/tickets/getById',
        method: 'get',
        params:{id:this.ticketId}
      }).then((res)=> {
       let resultObj= res.data
        //进厂日期
        if (null != resultObj.inTime){
          resultObj.inTime = formatDate(resultObj.inTime)
        }
        //最近保养日期
        if (null != resultObj.maintenanceDate){
          resultObj.maintenanceDate = formatDate(resultObj.maintenanceDate)
        }
        //预计竣工日期
        if (null != resultObj.outTime){
          resultObj.outTime = formatDate(resultObj.outTime)
        }
        //年检到期时间
        if (null != resultObj.nextInspectionDate){
          resultObj.nextInspectionDate = formatDate(resultObj.nextInspectionDate)
        }
        //保险到期时间
        if (null != resultObj.insuranceExpiryDate){
          resultObj.insuranceExpiryDate = formatDate(resultObj.insuranceExpiryDate)
        }
        if(resultObj.insuranceType){
          this.insuranceTypeArray = resultObj.insuranceType.split(",")
        }
        for (let i = 0; i < this.cusFromList.length; i++) {
          if(this.cusFromList[i].value==resultObj.customerInfo.dataFrom){
            this.cusFromIndex = i
            resultObj.cusFrom = this.cusFromList[i].value
            break
          }
        }
        for (let i = 0; i < this.busiFromList.length; i++) {
          if(this.busiFromList[i].value==resultObj.busiFrom){
            this.busiFromIndex = i
            resultObj.busiFrom = this.busiFromList[i].value
            break
          }
        }
        for (let i = 0; i < this.partDisposals.length; i++) {
          if(this.partDisposals[i].value==resultObj.partDisposal){
            this.partDisposalIndex = i
            break
          }
        }
        for (let i = 0; i < this.repairTypes.length; i++) {
          if(this.repairTypes[i].value==resultObj.repairType){
            this.repairTypeIndex = i
            break
          }
        }
        this.formData = resultObj
      })
    },
    // 日期选择 事件
    bindDateChange1(e) {
      this.formData.inTime = e.target.value; // 更新选择的日期到data中的date变量
    },
    // 日期选择 事件
    bindDateChange3(e) {
      this.formData.maintenanceDate = e.target.value; // 更新选择的日期到data中的date变量
    },
    // 日期选择 事件
    bindDateChange4(e) {
      this.formData.nextInspectionDate = e.target.value; // 更新选择的日期到data中的date变量
    },
    // 日期选择 事件
    bindDateChange5(e) {
      this.formData.insuranceExpiryDate = e.target.value; // 更新选择的日期到data中的date变量
    },
    // 日期选择 事件
    bindDateChange2(e) {
      this.formData.outTime = e.target.value; // 更新选择的日期到data中的date变量
    },
    repairTypeChange(event){
      const newIndex = event.detail.value;
      this.repairTypeIndex = newIndex;
      this.formData.repairType = this.repairTypes[newIndex].value;
    },
    cusFromChange(event){
      const newIndex = event.detail.value;
      this.cusFromIndex = newIndex;
      this.formData.cusFrom = this.cusFromList[newIndex].value;
    },
    busiFromChange(event){
      const newIndex = event.detail.value;
      this.busiFromIndex = newIndex;
      this.formData.busiFrom = this.busiFromList[newIndex].value;
    },
    partDisposalChange(event){
      const newIndex = event.detail.value;
      this.partDisposalIndex = newIndex;
      this.formData.partDisposal = this.repairTypes[newIndex].value;
    },
    async initDict(dictCode){
      let dictArray = getStorageWithExpiry(dictCode);
      console.log(dictArray,"partDisposals")
      if(null==dictArray || undefined==dictArray){
        request({
          url: '/admin-api/system/dict-data/type',
          method: 'get',
          params:{type:dictCode}
        }).then((res) => {
          console.log(res)
          if (res.code == 200) {
            setStorageWithExpiry(dictCode,res.data,3600)
            this.$nextTick(()=>{
              if("repair_type"==dictCode){
                this.repairTypes = res.data
              }else if("repair_part_disposal"==dictCode){
                this.partDisposals = res.data
              }else if("insurance_type"==dictCode){
                this.buildInsuranceTypeList()
              }else if("cus_data_from"==dictCode){
                this.cusFromList = res.data
              }else if("repair_busi_from"==dictCode){
                this.busiFromList = res.data
              }
            })
          }
        })
      }else{
        this.$nextTick(()=>{
          if("repair_type"==dictCode){
            this.repairTypes = dictArray
          }else if("repair_part_disposal"==dictCode){
            this.partDisposals = dictArray
          }else if("insurance_type"==dictCode){
            this.buildInsuranceTypeList()
          }else if("cus_data_from"==dictCode){
            this.cusFromList = dictArray
          }else if("repair_busi_from"==dictCode){
            this.busiFromList = dictArray
          }
        })
      }
    },
    /**
     * 组装承保险种待选值
     */
    buildInsuranceTypeList(data){
      if(data && data.length>0){
        this.insuranceTypeList=[]
        data.map((item)=>{
          let thisObj={
            text:item.label,
            value:item.value
          }
          this.insuranceTypeList.push(thisObj)
        })
      }
    },
    /**
     * 创建工单前上传图片
     */
    submitUpload(){
      this.$refs.popup.open("bottom")
    },
    applyData(){
      if(!this.canClick){
        return
      }
      this.canClick = false
      let fileStr = this.fileList.map(item=>item.url.replace(config.baseImageUrl,"")).join(",")
      let dataObj = this.formData
      dataObj.image=fileStr
      if(this.insuranceTypeArray.length>0){
        dataObj.insuranceType= this.insuranceTypeArray.join(",")
      }
      request({
        url: '/admin-api/repair/tickets/updateById',
        method: 'POST',
        data: this.formData
      }).then(res => {
        this.canClick =true
        this.$refs.popup.close()
        uni.showToast({
          title: '修改成功',
          icon: 'success'
        })
        setTimeout(()=>{
          uni.navigateTo({
            url: `/pages-home/home/home`
          });
        },600)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.popup-content {
@include flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: auto;
  background-color: #fff;
}
.container {
  height: 100%;
  background-color: #F3F5F7;

  .containerBody {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #C1DEFF 0%, rgba(193, 222, 255, 0) 100%);
    background-size: 100% 500rpx;
    background-repeat: no-repeat;
  }

  .body {
    flex: 1;
    height: 0;
    overflow: auto;

    .card {
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      margin: 20rpx 32rpx;
    }

    .phone {
      background: #0174F6;

      .phoneHeader {
        padding: 20rpx 30rpx;

        .title {
          font-weight: bold;
          font-size: 32rpx;
          color: #FFFFFF;
          margin-bottom: 10rpx;
        }

        .desc {
          font-weight: 500;
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.7);
        }
      }

      .phoneBody {
        background: #FFFFFF;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 0 30rpx;

        .searchBox {
          padding: 40rpx 0;
          border-bottom: 1rpx solid #EEEEEE;
        }

        .btn {
          padding: 40rpx 0;

          display: flex;
          align-items: center;
          justify-content: center;
          column-gap: 10rpx;

          font-weight: 500;
          font-size: 32rpx;
          color: #0174F6;

          .btnIcon {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }

    .cardInfo {
      &.none {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        .cardNoneIcon {
          width: 336rpx;
        }

        .btn {
          position: absolute;
          bottom: 40rpx;
          left: 50%;
          transform: translateX(-50%);

          display: flex;
          align-items: center;
          column-gap: 10rpx;

          font-weight: 500;
          font-size: 28rpx;
          color: #0174F6;
        }
      }
    }

    .projTitle, .userTitle, .carTitle {
      padding: 30rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
    }

    .carCard {
      .carListTab {
        display: flex;
        align-items: center;
        column-gap: 32rpx;
        padding: 0 26rpx 22rpx;

        .carTabItem {
          display: flex;
          flex-direction: column;
          align-items: center;
          row-gap: 10rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;

          &.active {
            .carImage {
              border: 2rpx solid #0174F6;
            }

            color: #0174F6;
          }

          .carImage {
            width: 128rpx;
            height: 80rpx;
            background: #F2F2F7;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
          }
        }

        .carTabItemNew {
          display: flex;
          flex-direction: column;
          align-items: center;
          row-gap: 10rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;
          border: 2rpx solid #0174F6; /* 默认边框颜色为透明 */
          justify-content: center; /* 垂直居中 */
          font-weight: bold;
          font-size: 32rpx;
          padding: 10rpx; /* 可以根据需要调整内边距 */
          width: 128rpx; /* 与 .carImage 宽度一致 */
          height: 80rpx; /* 与 .carImage 高度一致 */
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          margin-top: -37rpx;
        }

      }

      .carDetail {
        background: linear-gradient(180deg, rgba(1, 116, 246, 0.15) 0%, rgba(255, 255, 255, 0) 100%) no-repeat;
        background-size: 100% 184rpx;
        padding: 30rpx 30rpx 0;

        .carHeader {
          border-radius: 8rpx 8rpx 8rpx 8rpx;

          display: flex;
          align-items: center;
          column-gap: 20rpx;

          padding-bottom: 30rpx;

          .carImage {
            width: 192rpx;
            height: 120rpx;
            background: #F2F2F7;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
          }

          .carHeaderRight {
            display: flex;
            flex-direction: column;
            row-gap: 20rpx;
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;

            .carType {
              font-weight: 500;
              font-size: 28rpx;
              color: #858BA0;
            }
          }
        }

        .carBody {
          display: flex;
          flex-direction: column;
          row-gap: 30rpx;
          padding-top: 30rpx;
          border-top: 1rpx solid #DDDDDD;
        }

        .carFoot {

        }
      }
    }

    .projCard {
      .projList {
        padding: 0 30rpx;
        display: flex;
        gap: 20rpx;
        flex-wrap: wrap;

        .projItem {
          padding: 10rpx 16rpx;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          border: 2rpx solid #0174F6;
          font-weight: 500;
          font-size: 24rpx;
          color: #0174F6;
        }
      }
    }

    .userCard {
      .userContainer {
        display: flex;
        flex-direction: column;
        row-gap: 30rpx;
        margin: 0 30rpx;
      }
    }

    .infoItem {
      display: flex;
      flex-direction: column;

      .label {
        font-weight: 500;
        font-size: 28rpx;
        color: #858BA0;
      }

      .value {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
      }
    }

    .projFoot, .userFoot, .carFoot {
      padding: 30rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #0174F6;
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 6rpx;
    }
  }

  .footer {
    height: 136rpx;
    background: #FFFFFF;
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
      width: 510rpx;
      height: 76rpx;
      background: #0174F6;
      border-radius: 38rpx 38rpx 38rpx 38rpx;

      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;

      display: flex;
      align-items: center;
      justify-content: center;

    }
  }

  .radio-label {
    //display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .radio-label text {
    margin-left: 10rpx;
  }

}
</style>