logpm_page/src/views/aftersales/aftersalesWorkOrderend.vue

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>{{ routerState == 'end' ? '工单完结' : '添加异常记录' }}</span>
        <el-button class="button" @click="submit">提交</el-button>
      </div>
    </template>
    <el-form :model="endFrom" label-width="120px">
      <el-form-item label="运单商场">
        <el-input v-model="endFrom.waybillMall" placeholder="请输入运单商场" />
      </el-form-item>

      <el-form-item label="运单号">
        <el-input v-model="endFrom.waybillNumber" placeholder="请输入运单号" />
      </el-form-item>

      <el-form-item label="订单自编号">
        <el-input v-model="endFrom.orderCode" placeholder="请输入订单自自编号" />
      </el-form-item>

      <el-form-item label="包条码">
        <el-input v-model="endFrom.orderPackageCode" placeholder="请输入包条码" />
      </el-form-item>

      <el-form-item label="品类">
        <el-input v-model="endFrom.name" placeholder="请输入品类" />
      </el-form-item>

      <el-form-item label="异常状态">
        <el-input v-model="endFrom.name" disabled placeholder="异常状态" />
      </el-form-item>

      <div class="el_Transport">
        <el-form-item label="运损发现节点">
          <el-radio-group v-model="endFrom.transportloss" @change="TransportChange">
            <el-radio v-for="item in TransportlossList" :label="item.label">{{
              item.txt
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>

      <el-form-item label="车次号">
        <el-input v-model="endFrom.trainNumber" placeholder="请输入车次号" />
      </el-form-item>

      <el-form-item label="运损发现时间">
        <el-date-picker
          v-model="endFrom.warehousingTime"
          type="datetime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择运损发现时间"
          :disabled="FromDisabled"
        />
      </el-form-item>

      <el-form-item label="发货时间">
        <el-date-picker
          v-model="endFrom.warehousingTime"
          type="datetime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择发货时间"
          :disabled="FromDisabled"
        />
      </el-form-item>

      <div class="DingTalk">
        <el-form-item label="钉钉流程号">
          <el-input v-model="endFrom.name" placeholder="请输入钉钉流程号" />
        </el-form-item>
      </div>

      <div class="selector">
        <div class="el-form-item">
          <span class="el-form-item__label">处理方</span>
          <el-select
            v-model="endFrom.processor"
            multiple
            filterable
            default-first-option
            :reserve-keyword="false"
            placeholder="请选择处理方"
            @change="css"
          >
            <el-option
              v-for="item in warehouseData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="selector">
        <div class="el-form-item selector">
          <span class="el-form-item__label">责任方</span>
          <el-select
            v-model="endFrom.duty"
            multiple
            filterable
            default-first-option
            :reserve-keyword="false"
            placeholder="请选择责任方"
          >
            <el-option
              v-for="item in warehouseData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>

      <div class="selector">
        <div class="el-form-item selector">
          <span class="el-form-item__label">处理结果</span>
          <el-select
            v-model="endFrom.result"
            multiple
            filterable
            default-first-option
            :reserve-keyword="false"
            placeholder="请选择处理结果"
            @change="changeProcessingResults"
          >
            <el-option
              v-for="item in ProcessingResults"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            />
          </el-select>
        </div>
      </div>

      <div class="ProcessingResults" v-if="ProcessingList.length">
        <div class="title">处理结果-理赔金额</div>
        <div class="Listadmiration">
          <div class="name" v-for="(item, index) in ProcessingList" :key="index">
            <span>{{ item.name }}:</span>
            <el-input-number
              v-model="item.input"
              :min="item.min"
              :max="item.max"
              @change="handleChange"
            />
            <div class="Paymentname" @click="PaymentSelection(item)">支付方式</div>
          </div>
        </div>
        <el-divider>
          <span class="ZFname">请选择支付方式</span>
        </el-divider>
        <div class="ZFlptime">
          <!-- <span class="name">支付方式（此处单选）</span> -->
          <!-- <el-radio-group v-model="endFrom.compensationMethod">
            <el-radio :label="item.dictKey" v-for="item in Paymentmethod" :key="item.dictKey" size="large" border>{{
              item.dictValue
            }}</el-radio>
          </el-radio-group> -->
          <!-- 支付方式多选 -->
          <!-- <el-checkbox-group v-model="endFrom.compensationMethod">
         
            <el-checkbox
              :label="item.dictValue"
              border
              v-for="item in Paymentmethod"
              :key="item.dictKey"
            />
          </el-checkbox-group> -->
        </div>
        <el-divider>
          <span class="ZFname">理赔支付时间</span>
        </el-divider>
        <div class="lptime">
          <!-- <span class="name">理赔支付时间</span> -->
          <el-date-picker
            v-model="endFrom.compensationTime"
            type="datetime"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择运理赔支付时间"
            :disabled="FromDisabled"
          />
        </div>
      </div>
      <!-- 处理结果说明  -->
      <el-form-item label="处理结果说明">
        <el-input
          v-model="endFrom.resultDescription"
          :disabled="FromDisabled"
          placeholder="请输入处理结果说明"
          clearable
        />
      </el-form-item>

      <!-- 备注信息 -->
      <div class="notes">
        <el-form-item label="异常问题描述">
          <el-input
            v-model="endFrom.problemDescription"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入异常问题描述"
          />
        </el-form-item>
      </div>

      <!-- 图片  -->
      <div class="Transport_damage_photos">
        <span class="title">图片</span>
        <el-upload
          v-model:file-list="endFrom.packageImage"
          list-type="picture-card"
          :on-preview="pictureList"
          :on-remove="ImgListRemove"
          :action="doubledCount"
          :on-success="ImgSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="headers"
          multiple
          drag
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </div>

      <!-- 视频  -->
      <div class="Transport_damage_photos void">
        <span class="title">视频</span>
        <el-upload
          class="upload-demo"
          drag
          :action="doubledCount"
          :headers="headers"
          :on-success="ViodSuccess"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            点击上传
            <span v-if="videoUrl" class="PreviewVoid" @click.stop="Clickviod">点击预览</span>
          </div>
        </el-upload>
      </div>
      <!-- 视频预览弹窗 -->
      <el-dialog v-model="VideoPreviewStatus" title="视频预览" width="40%">
        <video height="360" controls class="video-player">
          <source :src="videoUrl" type="video/mp4" />
        </video>
      </el-dialog>

      <!-- 处理记录  -->
      <div class="ProcessingRecords" v-if="routerState == 'end'">
        <el-tabs type="border-card" class="demo-tabs">
          <el-tab-pane>
            <template #label>
              <span class="custom-tabs-label">
                <el-icon><calendar /></el-icon>
                <span>处理记录</span>
              </span>
            </template>
            <el-row>
              <!-- 列表模块 -->
              <tablecmt
                :columnList="recordList"
                :tableData="recorddata"
                :loading="loadingObj.list"
                @inputTxt="recordinputsc"
                @timeCheck="recordtimesc"
                @btnCheck="recordbtnsc"
                @selectCheck="recordselectsc"
                @selection="recordselectionChange"
              >
              </tablecmt>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 完善信息 -->
      <div class="Improveinformation">
        <el-tabs type="border-card" class="demo-tabs">
          <el-tab-pane>
            <template #label>
              <span class="custom-tabs-label">
                <el-icon><calendar /></el-icon>
                <span>完结信息</span>
              </span>
            </template>

            <div class="el-ckbtn">
              <el-button type="primary" @click="AddCompensation">添加赔款方</el-button>
              <el-button type="primary" @click="AddPayee">添加收款方</el-button>
            </div>

            <div class="payanindemnity" v-for="(item, index) in CompensationParty" :key="index">
              <span class="title" :style="{ color: item.state != 0 ? '#000' : '#F56C6C' }"
                >{{ item.state == 0 ? '赔款方' : '收款方' }}{{ item.cld }}</span
              >
              <div class="sk_input">
                <el-input
                  v-model="item.name"
                  :placeholder="item.state == 0 ? '请填写赔款方' : '请填写收款方'"
                />
              </div>
              <div class="sk_input">
                <el-input v-model="item.reason" placeholder="请填写原因" />
              </div>
              <div class="sk_input">
                <el-input @input="amountMoney" :min="0" v-model="item.num" placeholder="金额" />
              </div>
              <el-button type="danger" round @click="payremove(item.state, index)">移除</el-button>
            </div>
            <div class="paySum">
              <span>
                <el-icon><Coin /></el-icon>赔款金额总和:<b>{{ TotalamountCompensation }}</b></span
              >
              <span>
                <el-icon><Coin /></el-icon>收款金额总和:<b>{{ TotalamountReceived }}</b></span
              >
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 仲裁原因 -->
      <div class="arbitrate" v-if="routerState == 'end'">
        <el-tabs type="border-card" class="demo-tabs">
          <el-tab-pane>
            <template #label>
              <span class="custom-tabs-label">
                <el-icon><calendar /></el-icon>
                <span>仲裁原因</span>
              </span>
            </template>

            <el-input
              v-model="endFrom.arbitrate"
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 4 }"
              placeholder="请输入仲裁原因"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>

    <!-- 支付方式选择 -->
    <el-dialog
      v-model="ZFdialog"
      title="支付方式选择"
      width="40%"
      :before-close="handleClose"
      class="ZFfsLoad"
    >
      <el-radio-group v-model="endFrom.compensationMethod">
        <el-radio
          :label="item.dictKey"
          v-for="item in Paymentmethod"
          :key="item.dictKey"
          size="large"
          border
          >{{ item.dictValue }}</el-radio
        >
      </el-radio-group>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="ZFdialog = false">取消</el-button>
          <el-button type="primary" @click="PaymentConfirmation(endFrom.compensationMethod)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
import { getDetailWarehouse, getDeptWarehouse } from '@/api/basicdata/basicdataWarehouse'; //处理方
import { $_getInfo, $_addSubmit, $_addCompletionEnd } from '@/api/aftersales/aftersalesWorkOrder';
import { columnList, recordList } from '@/option/aftersales/vueTvemp.js';
import { getToken } from '@/utils/auth';
import { useRoute, useRouter } from 'vue-router';
import { getDictionaryBiz } from '@/api/system/dict';
import { computeNumber, isNumer } from '@/utils/util';
const ZFdialog = ref(false); //支付方式弹出
const $route = useRoute();
const $router = useRouter();
const Paymentmethod = ref([]); //支付方式
const ZFname = ref(''); //支付名字预留状态
const routeData = ref(false); //路由参数
const routerState = ref(''); //路由状态
const TotalamountCompensation = ref(0); //赔款金额合计
const TotalamountReceived = ref(0); //收款金额合计
const endFrom = ref({
  packageImage: [
    //图片
  ],
  videoUrl: {}, //视频
  result: [],
});
const viodUrl = ref({});
const videoUrl = ref(null); //视频预览
const VideoPreviewStatus = ref(false); //视频预览状态
const warehouseData = ref([]); //处理方

const CompensationParty = ref([
  { name: '', state: 0, num: null, reason: '', cld: 1 }, //赔款方
  { name: '', state: 1, num: null, reason: '', cld: 1 }, //收款方
]); //收/赔
const ProcessingList = ref([]); //处理结果已经选择的列表
const TransportlossList = ref([
  //运损发现节点
  {
    label: 1,
    txt: '无',
  },
  {
    label: 2,
    txt: '在库操作环节',
  },
  {
    label: 3,
    txt: '入库环节',
  },
  {
    label: 4,
    txt: '配送环节',
  },
  {
    label: 5,
    txt: '中转卸车环节',
  },
  {
    label: 6,
    txt: '安装环节',
  },
]); //运损发现节点
const ProcessingResults = ref([]); //处理结果列表选项
// 运损触发事件
const details = reactive({
  /** 是否开启搜索 */
  search: false,
  /** 表格搜索条件 */
  query: {},
  /** 时间快捷选择设置 */
  shortcuts: [
    {
      text: '最近一周',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        return [start, end];
      },
    },
    {
      text: '最近一个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        return [start, end];
      },
    },
    {
      text: '最近三个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        return [start, end];
      },
    },
  ],
  /** 时间选择器数据 */
  stockupDate: [],
  /** 列表 */
  columnList,

  /** 列表数据 */
  data: [{}],
  // 处理记录
  recordList,
  // 处理记录数据
  recorddata: [
    { entryTime: '测试' },
    { entryTime: '测试' },
    { entryTime: '测试' },
    { entryTime: '测试' },
    { entryTime: '测试' },
    { entryTime: '测试' },
    { entryTime: '测试' },
    { entryTime: '测试' },
    { entryTime: '测试' },
    { entryTime: '测试' },
    { entryTime: '测试' },
    { entryTime: '测试' },
    { entryTime: '测试' },
    { entryTime: '测试' },
  ],
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    packageListLoading: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    currentPage: 1,
    pageSize: 5,
    total: 0,
  },

  /** 弹出层显示 */
  popUpShow: {
    /** 包件明细 */
    packageOrderListlVisited: false,
    /** 二维码 */
    QRCodeVisible: false,
    /** 修改客户信息 */
    editClientInfoVisible: false,
  },
  /** 列表Dom节点 */
  listNode: '',
  form: {},
  /** 全屏 */
  fullscreenObj: {
    /** 包明细 */
    packageOrderListlVisited: false,
  },
});

const {
  search,
  query,
  shortcuts,
  stockupDate,
  data,
  loadingObj,
  selectionList,
  drawerShow,
  page,
  trickleLoadingPage,
  zeroAdditionalRecordingInfo,
  popUpShow,
  recorddata,
} = toRefs(details);
const TransportChange = val => {
  console.log(val, '运损触发事件');
};
// 页面初始化数据
const onLoad = () => {
  // 获取页面参数
  if ($route.query.id) {
    console.log($route.query);
    routerState.value = $route.query.RouterState; //当前是新增记录
    console.log(routerState.value, '当前状态');
    $_getInfo({ id: $route.query.id }).then(res => {
      console.log(res, '回显返回值参数');
      endFrom.value = res.data.data;
      endFrom.value.sss = 123123;
      endFrom.value.result = [];
      endFrom.value.processor = [];
      // 处理结果回显
      res.data.data.processingResultsVO.processingMoneyEntityList.forEach(item => {
        ProcessingList.value.push({
          input: item.money,
          min: 0,
          max: 9999999999999,
          state: item.resultType,
          payment: item.compensationMethod,
          name: item.resultTypeName,
        });
        endFrom.value.result.push(item.resultType);
      });
      res.data.data.processorVOList.forEach(item => {
        if (item.typesOf == 2) {
          // 处理方
          endFrom.value.processor.push(String(item.id));
        }
      });
      console.log(ProcessingList.value, '价格');
      //图片处理回显
      res.data.data.decreaseImageVOList.forEach(res => {
        endFrom.value['packageImage'].push({
          name: res.imageName,
          url: res.imagePath,
        });
      });

      // 处理结果回显

      console.log(endFrom.value, '当前参数');
    });
  }
  getDictionaryBiz('result_handling').then(res => {
    //处理结果字典
    console.log(res);
    ProcessingResults.value = res.data.data;
  });

  // 支付方式字典
  getDictionaryBiz('payment_method').then(res => {
    //处理结果字典
    console.log(res);
    Paymentmethod.value = res.data.data;
  });

  getDeptWarehouse({}).then(res => {
    console.log(res, '处理方');
    res.data.data.forEach(item => {
      warehouseData.value.push({
        value: item.id,
        label: item.name,
      });
    });
  });
};
onLoad();
const changeProcessingResults = val => {
  // 首先删除取消的项目
  ProcessingList.value = ProcessingList.value.filter(item => val.includes(item.state - 1));

  // 然后添加或保持新的项目
  val.forEach(num => {
    let newItem = { input: 0, min: 0, max: 9999999999999, state: num + 1, payment: '' };
    // 根据num为newItem的name字段赋值
    switch (num) {
      case '1':
        newItem.name = '下补单';
        break;
      case '2':
        newItem.name = '维修/补漆';
        break;
      case '3':
        newItem.name = '客户未要求理赔';
        break;
      case '4':
        newItem.name = '用库存';
        break;
      case '5':
        newItem.name = '赔商家';
        break;
      case '6':
        newItem.name = '赔付运费';
        break;
      case '7':
        newItem.name = '工厂考核';
        break;
      default:
        return;
    }

    // 如果列表中不存在则加入新项目
    if (!ProcessingList.value.some(item => item.state === newItem.state)) {
      ProcessingList.value.push(newItem);
      console.log(`添加：${newItem.name}`);
    }
  });
};
// 测试功能
const css = () => {
  console.log(endFrom.value.processor);
};
// 图片上传必须携带TOKEN
const headers = computed(() => {
  return { 'Blade-Auth': 'Bearer ' + getToken() };
});
// 图片上传接口
const doubledCount = computed(() => {
  return '/api/blade-resource/oss/endpoint/put-file';
});
// 图片上传成功回调函数
const ImgSuccess = (response, uploadFile) => {
  if (response.success == true) {
    console.log(response);

    console.log(endFrom.value['packageImage'], '图片列表');
  }
};
// 视频上传成功
const ViodSuccess = response => {
  if (response.success == true) {
    console.log(response, '视频上传成功');
    console.log(videoUrl.value, '预览视频添加前');
    videoUrl.value = response.data.link; //放入预览视频中
    console.log(videoUrl.value, '预览视频添加后');
    viodUrl.value = { nmae: response.data.originalName, url: response.data.link };
    console.log(viodUrl.value, '视频对象');
  }
};
// 上传图片规则
const beforeAvatarUpload = rawFile => {
  if (!/^image\/(png|jpeg|gif)$|^video\/mp4$/.test(rawFile.type)) {
    ElMessage.error('上传格式只支持 png、jpeg、gif 和 mp4 类型!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 40) {
    ElMessage.error('上传大小不能超过 40MB!');
    return false;
  }
  return true;
};
// 点击图片列表回调
const pictureList = val => {
  console.log(val, '图片列表');
};
// 点击图片移除
const ImgListRemove = val => {
  console.log(val, '移除图片');
};
// 查看已上传视频列表
const Clickviod = () => {
  console.log('点击了预览');
  VideoPreviewStatus.value = true; //开启预览视频弹窗
};
// 添加赔款方
const AddCompensation = () => {
  console.log('添加赔款方');
  let som = 1;
  CompensationParty.value.forEach(item => {
    if (item.state == 0) {
      som++;
    }
  });
  CompensationParty.value.push({ name: '', state: 0, num: 0, reason: '', cld: som });
};
// 添加收款方
const AddPayee = () => {
  let som = 1;
  CompensationParty.value.forEach(item => {
    if (item.state == 1) {
      som++;
    }
  });
  CompensationParty.value.push({ name: '', state: 1, num: 0, reason: '', cld: som });
};
// 移除按钮
const payremove = (state, val) => {
  // 判断赔付方，至少保留一条数据
  let som = 0;
  if (state == 0) {
    CompensationParty.value.forEach(item => {
      if (item.state == 0) {
        som++;
      }
    });
    if (som == 1) {
      ElMessage({
        message: '赔款必填最少一条',
        type: 'warning',
      });
      return;
    }
  }
  CompensationParty.value.splice(val, 1);
  console.log('CompensationParty :>> ', CompensationParty);
  amountMoney();
};
// 金额输入汇总
const amountMoney = () => {
  // 计算赔款金额总数
  TotalamountCompensation.value = 0;
  TotalamountReceived.value = 0;
  CompensationParty.value.forEach(item => {
    const _num = isNumer(item.num) ? item.num : 0;
    // 统计赔款方【0】
    if (item.state == 0) {
      TotalamountCompensation.value = computeNumber(
        TotalamountCompensation.value,
        '+',
        _num
      ).result;
    }
    // 统计收款方金额【1】
    if (item.state == 1) {
      TotalamountReceived.value = computeNumber(TotalamountReceived.value, '+', _num).result;
    }
  });
  console.log('赔款总计金额', TotalamountCompensation.value);
  console.log('收款总计金额', TotalamountReceived.value);
};
// 支付方式选择
const PaymentSelection = val => {
  console.log(val, '支付');
  console.log(Paymentmethod.value);
  if (val.payment) {
    //支付方式回显
    let data = Paymentmethod.value.find(item => item.dictKey == val.payment);
    endFrom.value.compensationMethod = data.dictKey;
  } else {
    endFrom.value.compensationMethod = null; //清空上一次选择
  }
  ZFdialog.value = true; //展开支付方式选择弹窗
  ZFname.value = val.name; //存放的当前点击的名字
};
// 支付方式选择确定
const PaymentConfirmation = val => {
  let data = ProcessingList.value.find(item => item.name == ZFname.value);
  data.payment = val;
  console.log(data, '支付方式选择');
  ZFdialog.value = false; //关闭支付方式选择弹窗
  ElMessage({
    message: '支付方式选择成功',
    type: 'success',
  });
  console.log(ProcessingList.value, '选择好的支付列表');
};
// 提交信息
const submit = () => {
  // 完结的逻辑
  if (routerState.value == 'end') {
    console.log(CompensationParty.value);
    let pay = CompensationParty.value.find(item => item.cld == 1);
    console.log(pay);
    if (!pay.name || pay.num == null || !pay.reason) {
      ElMessage({
        message: '请填写赔款方【1】完整信息',
        type: 'warning',
      });
      return;
    }
    if (!endFrom.value.arbitrate) {
      ElMessage({
        message: '请填写仲裁原因',
        type: 'warning',
      });
      return;
    }
    console.log(CompensationParty.value, 'CompensationParty');
    let info = JSON.parse(JSON.stringify(endFrom.value)); //拷贝要提交的数据
    console.log(info, 'info');
    let data = [
      {
        completionRecipientEntities: [], //收款方
        completionRecordEntities: [],
        ...info,
      },
    ];
    console.log(endFrom.value.duty, '责任方');
    console.log('赔款总计金额', TotalamountCompensation.value);
    console.log('收款总计金额', TotalamountReceived.value);

    CompensationParty.value.forEach(item => {
      if (item.state == 0) {
        // 赔款
        data[0]['completionRecordEntities'].push({
          indemnitor: item.name, //赔款方
          reason: item.reason, //原因
          money: Number(item.num), //金额
          reasonArbitration: endFrom.value.arbitrate, //仲裁原因
          workOrderId: info.id, //异常工单
          warehouseId: info.warehouseId, //仓库ID
        });
      } else {
        // 收款方
        data[0]['completionRecipientEntities'].push({
          recipient: item.name, //收款方
          reasonReceivingPayment: item.reason, //收款原因
          money: Number(item.num), //金额
          responsibleParty: endFrom.value.duty.length ? endFrom.value.duty.join(',') : '', //责任方
          workOrderNumber: info.workOrderNumber, //工单号
          workOrderId: info.id, //异常工单
          warehouseId: info.warehouseId, //仓库ID
        });
      }
    });

    // 赔款方

    console.log(data, '处理好的值');
    $_addCompletionEnd(data).then(res => {
      $router.push('/aftersales/aftersalesWorkOrder');
      console.log(res, '完结成功返回值');
      if (res.data.code == 200) {
        ElMessage({
          showClose: true,
          message: res.data.msg,
          type: 'success',
        });
      }
    });
  } else {
    // 新增记录
    console.log(ProcessingList.value, 'ProcessingList12312');
    let info = JSON.parse(JSON.stringify(endFrom.value)); //拷贝要提交的数据
    let data = {
      processingMoneyEntityList: [], //赔付方式
      ...info,
    };
    data['workOrderId'] = info.id; //异常工单ID
    let sum = 0; //金额总计
    for (let i = 0; i < ProcessingList.value.length; i++) {
      console.log(ProcessingList.value[i].input);
      sum = computeNumber(sum, '+', ProcessingList.value[i].input).result;
    }
    data['money'] = sum; //金额汇总
    // data['compensationMethod'] = Paymentmethod.value.filter(
    //   item => item.dictKey == endFrom.value.compensationMethod
    // )[0].dictValue; //目前是单选

    // data['compensationMethod'] = endFrom.value.compensationMethod.join(','); //赔付方式多选
    // console.log(data['compensationMethod']);
    console.log(Paymentmethod.value, 'Paymentmethod.value');
    data['compensationMethod'] = ProcessingList.value.map(item => item.name).join(',');

    data['processingMoneyEntityList'] = ProcessingList.value
      .map(item => {
        console.log(item);
        let match = ProcessingResults.value.find(element => element.dictValue == item.name);
        if (match) {
          let paymentMethodMatch = Paymentmethod.value.find(
            paymentMethod => paymentMethod.dictKey == item.payment
          );
          return {
            resultType: match.dictKey, //赔方式的key
            money: item.input, //金额
            typesOf: 1, //固定参数
            compensationMethod: paymentMethodMatch ? paymentMethodMatch.dictKey : '未知支付方式',
            compensationMethodName: paymentMethodMatch
              ? paymentMethodMatch.dictValue
              : '未知支付方式',
            resultName: item.name, //处理结果名字
          };
        } else {
          return null;
        }
      })
      .filter(item => item !== null);
    data['resultType'] = ProcessingList.value.map(item => item.name).join(','); //处理结果说明文字拼接
    let imgLink = ''; //存储图片地址
    if (endFrom.value['packageImage'].length) {
      imgLink = endFrom.value['packageImage'].map(item => item.response.data.link).join(','); //图片处理
    }
    if (videoUrl.value && imgLink) {
      data['annex'] = videoUrl.value + ',' + imgLink;
    } else {
      data['annex'] = imgLink;
    }
    console.log(data['annex'], '附件路径');
    console.log(data['resultType'], '处理结果');
    console.log(data['processingMoneyEntityList']);
    console.log(data, '处理好的数据');
    delete data['id']; //删除ID字段
    delete data['packageImage']; //删除默认图片字段
    $_addSubmit(data).then(res => {
      console.log(res, '提交后的参数');
      $router.push('/aftersales/aftersalesWorkOrder');
      console.log(res, '完结成功返回值');
      if (res.code == 200) {
        ElMessage({
          showClose: true,
          message: res.data.msg,
          type: 'success',
        });
      }
    });
  }
};
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
  height: 100%;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  :deep(.el-form-item) {
    height: 2.39583vw;
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: 0.9375vw;
    flex: 1 0 30%;
  }
  :deep(.el-form-item__label) {
    width: 100px !important;
    margin-left: 26px;
  }
  :deep(.el-input--prefix) {
    width: 100%;
    height: 28.68px !important;
  }
}
.el_Transport {
  width: 100%;
}
.DingTalk {
  width: 100%;
}
.selector {
  width: 100%;
  :deep(.el-select) {
    width: 100%;
  }
}
.ProcessingResults {
  width: 100%;
  min-height: 260px;
  border: 1px solid #ccc;
  position: relative;
  padding: 26px;
  box-sizing: border-box;
  margin-top: 20px;
  color: #606266;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .title {
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 26px;
    background-color: #fff;
  }
  .Listadmiration {
    display: flex;
    flex-wrap: wrap;
    margin-top: 26px;
    .name {
      display: flex;
      margin-right: 5%;
      margin-bottom: 20px;
      height: 30px;
      span {
        display: block;
        width: 120px;
        color: #606266;
        font-size: 16px;
      }
    }
  }

  .lptime,
  .ZFlptime {
    display: flex;
    .name {
      width: 10%;
      color: #606266;
    }
    .el-input {
      width: auto;
    }
    :deep(.el-input--prefix) {
      width: 200px;
    }
  }
  .ZFlptime {
    margin: 10px 0;
  }
}
.notes {
  width: 100%;
  margin-top: 20px;
}
.Transport_damage_photos {
  width: 100%;
  display: flex;
  margin-left: 26px;
  .title {
    width: 100px;
    color: #606266;
    font-size: 14px;
    margin-bottom: 9px;
    display: block;
  }
  :deep(.el-upload-dragger) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.upload-demo {
  width: 100%;
}
.box-card {
  overflow-y: scroll;
}
.void {
  margin-top: 10px;
  :deep(.el-upload-list) {
    display: none;
  }
  .title {
    width: 100px;
  }
}
.PreviewVoid {
  font-weight: bold;
  color: #172e60;
}

.video-player {
  width: 100%;
}
.ProcessingRecords {
  margin-left: 26px;
  width: 100%;
  margin-top: 20px;
  .title {
    font-size: 16px;
    color: #606266;
    width: 100px;
  }
  :deep(.custom-tabs-label) {
    display: flex;
    align-items: center;
  }
}
.el-row {
  height: 300px;
}
:deep(.maboxhi) {
  height: 300px !important;
}
.Improveinformation {
  margin-top: 20px;
  margin-left: 26px;
  width: 100%;
  :deep(.custom-tabs-label) {
    display: flex;
    align-items: center;
  }
}
.payanindemnity {
  display: flex;
  align-items: center;
  margin-top: 20px;
  .title {
    width: 76px;
    height: 100%;
    display: flex;
    display: block;
    align-items: center;
  }
  .sk_input {
    margin: 0 5px;
    width: 300px;
  }
  .el-button {
    background-color: #ff0000;
    border: none;
  }
}
.arbitrate {
  width: 100%;
  margin-top: 20px;
  margin-left: 26px;
}
.ZFname {
  font-size: 16px;
}
.Paymentname {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #bfbfbf;
  margin-left: 2px;
  border-radius: 4px;
  width: 100px;
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
}
.Paymentname:hover {
  border: 1px solid #172e60;
}
:deep(.ZFfsLoad) {
  .el-radio {
    padding: 0 8px;
  }
}
.paySum {
  margin-top: 36px;
  font-size: 14px;
  display: flex;
  span {
    margin-right: 30px;
    display: flex;
    align-items: center;
  }
}
// 数字输入框
:deep(.el-input-number) {
  width: 100%;
}
</style>