logpm_page/src/views/aftersales/aftersalesWorkOrderInfo.vue

<template>
  <el-card class="box-card">
    <el-tabs type="border-card" class="PackageInformation">
      <el-tab-pane label="包件信息">
        <div class="ResponsibilityBoxS">
          <div class="el_btbox" v-for="(item, index) in PackageInfo" :key="index">
            <div class="leftbox">
              <div class="maxBox">
                <span class="title">包条码:</span>
                <el-input
                  disabled
                  v-model="item.packageCode"
                  placeholder="请输入包条码"
                  clearable
                  :rows="2"
                  @change="ChangePackageInfo(item.packageCode, index)"
                />
              </div>

              <div class="maxBox">
                <span class="title">订单自编码:</span>
                <el-input
                  disabled
                  v-model="item.orderCode"
                  placeholder="请输入订单自编号"
                  clearable
                />
              </div>

              <div class="maxBox">
                <span class="title">运单号:</span>
                <el-input
                  disabled
                  v-model="item.waybillNumber"
                  placeholder="请输入运单号"
                  clearable
                />
              </div>
              <div class="maxBox">
                <span class="title">品牌:</span>
                <el-input disabled v-model="item.brandName" placeholder="请输入品牌" clearable />
              </div>
            </div>
          </div>
          <div class="NumTotal">
            <span>总件数:{{ PackageInfo.length }}</span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-form disabled :model="Indexform" label-width="100px" class="IndexFrom" ref="IndexForm">
      <el-form-item label="异常类型">
        <el-select
          v-model="Indexform.workOrderType"
          clearable
          placeholder="选择工单异常类型"
          @change="abnormalChange"
        >
          <el-option
            v-for="item in IndexException"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="发现节点">
        <el-select
          v-model="Indexform.discoveryNode"
          clearable
          placeholder="选择发现节点"
          @change="DiscoveringNodesChange"
        >
          <el-option
            v-for="item in DiscoveringNodes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="异常工单号">
        <el-input v-model="Indexform.workOrderNumber" disabled placeholder="异常工单号" clearable />
      </el-form-item>

      <el-form-item
        label="车次号"
        v-if="
          groundlineSet ||
          groundlineType == 1 ||
          groundlineType == 3 ||
          groundlineType == 4 ||
          groundlineType == 8 ||
          groundlineType == 5 ||
          groundlineType == 7 ||
          groundlineType == 8
        "
      >
        <el-input
          v-model="Indexform.trainNumber"
          placeholder="请输入车次号(干线卸车环节)"
          clearable
        />
      </el-form-item>
      <!-- 必填 -->
      <el-form-item label="一级品">
        <el-input v-model="Indexform.first" placeholder="请输入一级品类" clearable />
      </el-form-item>
      <!-- 必填 -->
      <el-form-item label="二级品">
        <el-input v-model="Indexform.secondary" placeholder="请输入二级品类" clearable />
      </el-form-item>

      <el-form-item label="车辆路线" v-if="groundlineSet || groundlineType == 3">
        <el-input v-model="Indexform.vehicleRoute" placeholder="请输入车辆路线车次号" clearable />
      </el-form-item>

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

      <el-form-item
        label="发现时间"
        v-if="
          groundlineSet ||
          groundlineType == 2 ||
          groundlineType == 3 ||
          groundlineType == 4 ||
          groundlineType == 8 ||
          groundlineType == 5 ||
          groundlineType == 7 ||
          groundlineType == 8
        "
      >
        <el-date-picker
          v-model="Indexform.discoveryTime"
          type="datetime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择发现时间"
        />
      </el-form-item>

      <el-form-item
        label="配送时间"
        v-if="
          groundlineSet ||
          groundlineType == 3 ||
          groundlineType == 4 ||
          groundlineType == 8 ||
          groundlineType == 5 ||
          groundlineType == 7 ||
          groundlineType == 8
        "
      >
        <el-date-picker
          v-model="Indexform.deliveryTime"
          type="datetime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择配送时间"
        />
      </el-form-item>

      <el-form-item
        label="入库时间"
        v-if="groundlineSet || groundlineType == 2 || groundlineType == 4"
      >
        <el-date-picker
          v-model="Indexform.warehousingTime"
          type="datetime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择入库"
        />
      </el-form-item>
      <!-- 必填 -->
      <el-form-item label="运单商场">
        <el-input v-model="Indexform.waybillMall" placeholder="请输入运单商场" clearable />
      </el-form-item>
      <el-form-item label="钉钉流程号">
        <el-input v-model="Indexform.processNumber" placeholder="请输入钉钉流程号" />
      </el-form-item>
      <el-form-item
        label="配送司机"
        v-if="
          groundlineSet ||
          groundlineType == 3 ||
          groundlineType == 4 ||
          groundlineType == 8 ||
          groundlineType == 5 ||
          groundlineType == 7 ||
          groundlineType == 8
        "
      >
        <el-select
          v-model="Indexform.deliveryDriver"
          filterable
          default-first-option
          :reserve-keyword="false"
          placeholder="请输入配送司机"
        >
          <el-option
            v-for="item in DeliveryDriver"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 必填 -->
      <!-- <el-form-item label="异常问题描述">
        <el-input v-model="Indexform.problemDescription" placeholder="请输入异常问题" clearable />
      </el-form-item> -->

      <!-- 必填 -->

      <el-form-item label="调查经过">
        <el-input
          disabled
          v-model="Indexform.investigationProcess"
          placeholder="请输入调查经过"
          clearable
          :rows="2"
          type="textarea"
        />
      </el-form-item>

      <el-form-item label="处理方">
        <el-select
          v-model="Indexform.processor"
          clearable
          filterable
          multiple
          placeholder="请选择处理方"
          disabled
        >
          <el-option
            v-for="item in warehouseData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="处理结果">
        <el-select
          v-model="Indexform.result"
          multiple
          filterable
          default-first-option
          :reserve-keyword="false"
          placeholder="请选择处理结果"
          @change="changeProcessingResults"
          disabled
        >
          <el-option
            v-for="item in ProcessingResults"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey"
          />
        </el-select>
      </el-form-item>
      <el-form-item> </el-form-item>
    </el-form>

    <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="TotalChange"
            disabled
          />
          <div class="Paymentname">
            {{ item.payment ? item.text : '支付方式' }}
          </div>

          <el-date-picker
            disabled
            v-model="item.compensationTime"
            type="datetime"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="理赔支付时间"
          />
        </div>
      </div>

      <div class="el_tool">
        <span>总金额:{{ TotalClaimAmount }}</span>
      </div>
    </div>
    <!-- 处理结果说明  -->
    <el-form-item label="处理结果说明" class="el_resj">
      <el-input
        v-model="Indexform.resultDescription"
        placeholder="请输入处理结果说明"
        clearable
        :autosize="{ minRows: 3, maxRows: 4 }"
        type="textarea"
        disabled
      />
    </el-form-item>

    <el-tabs type="border-card">
      <el-tab-pane label="内部责任划分">
        <div class="ResponsibilityBox">
          <div class="el_btbox" v-for="(item, index) in FangAddList" :key="index">
            <div class="leftbox">
              <div class="maxBox">
                <span class="title">责任方:</span>
                <!-- 提货环节  -->
                <el-select
                  v-model="item.businessName"
                  clearable
                  placeholder="请选提货择责任方"
                  v-if="groundlineType == 1"
                  disabled
                >
                  <el-option
                    v-for="item in responsible"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>

                <el-select
                  v-else
                  v-model="item.businessName"
                  filterable
                  placeholder="请选择责任方"
                  @change="ResponsiblePartychange(item.businessName, index)"
                  disabled
                >
                  <el-option
                    v-for="item in warehouseData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>

              <div class="maxBox">
                <span class="title">责任人：</span>
                <el-select
                  v-model="item.personResponsibleName"
                  clearable
                  filterable
                  placeholder="请选责任人"
                  disabled
                >
                  <el-option
                    v-for="item in personResponsibleList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </div>
              <div class="maxBox">
                <span class="title">占比:</span>
                <el-input
                  v-model="item.responsibilityRatio"
                  placeholder="请输入占比 "
                  :rows="2"
                  disabled
                />
              </div>

              <div class="maxBox">
                <span class="title">说明:</span>
                <el-input
                  disabled
                  v-model="item.description"
                  placeholder="请输入说明 "
                  clearable
                  :rows="2"
                />
              </div>
            </div>
          </div>
          <div class="Proportion">
            <span class="title">公司占比:{{ companyProportion }}%</span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="Transport_damage_photos" v-if="SelectType == 1 || SelectType == 3 || StateType">
      <span class="title">{{
        SelectType == 1 ? '运损照片' : SelectType == 3 ? '窜货照片' : '照片'
      }}</span>
      <el-upload
        disabled
        v-model:file-list="Indexform.packList"
        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="dialogImgList" width="30%">
        <el-image
          :src="amplifyurl"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="amplifysrcList"
          :initial-index="4"
          fit="cover"
        />
      </el-dialog>
    </div>
    <div class="foot_btn">
      <!-- v-if="PermissionButton.reply"
      v-if="PermissionButton.processing_completed"
      v-if="PermissionButton.work_order_completion"
      v-if="PermissionButton.repulse"
      v-if="PermissionButton.arbitration_completed"
      v-if="PermissionButton.information_editing" -->
      <el-button  type="primary" @click="addireply">回复</el-button>
      <el-button  type="primary" @click="addingRecord">处理结果</el-button>
      <el-button  type="primary" @click="EndJump">完结 </el-button>
      <el-button  type="primary" @click="BatchReturn">打回 </el-button>
      <el-button  type="primary" @click="CustomerServiceCompleted">客服仲裁完结 </el-button>
      <el-button  @click="EditInformation">信息编辑</el-button>
    </div>
  </el-card>
  <!-- 批量打回弹窗 -->
  <el-dialog v-model="dialogReturn" title="批量打回" width="40%" draggable class="plAllret">
    <el-form
      v-loading="repulse"
      element-loading-text="正在打回中..."
      label-position="top"
      label-width="100px"
      :model="BatchFrom"
    >
      <el-form-item label="打回原因">
        <el-input v-model="BatchFrom.txt" type="textarea" :rows="4" />
      </el-form-item>

      <el-form-item label="流转营业部">
        <el-select
          v-model="BatchFrom.businessDepartment"
          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>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogReturn = false">取消</el-button>
        <el-button type="primary" @click="ConfirmReturn" :disabled="repulse"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { getDictionaryBiz } from '@/api/system/dict'; //字典
import { getDetailWarehouse, getDeptWarehouse } from '@/api/basicdata/basicdataWarehouse'; //处理方
import { AddressClosed } from '@/utils/util';
import { useStore } from 'vuex';
import {
  $_getList,
  $_submit,
  $_getDetail,
  $_remove,
  $_getBusinessDepartmentUser,
  $_getAbnormalPackage,
  $_getInfo,
  $_batchReturn,
} from '@/api/aftersales/aftersalesWorkOrder';
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';

import { getToken } from '@/utils/auth';
const $router = useRouter();
const $route = useRoute();
const Indexform = ref({
  packList: [],
  decreaseImageEntityList: [], //处理好的图片数据
}); //首页新增表单
const dialogImgList = ref(false);
const IndexException = ref([]); //异常类型下拉选择
const DiscoveringNodes = ref([]); //发现节点下拉选择
const ProcessingResults = ref([]); //处理结果列表选项
const warehouseData = ref([]); //处理方
const SelectType = ref(null); //类型
const BatchFrom = ref({}); //打回内容
const StateType = ref(true); //类型
const HistoricalPackageinput = ref(''); //历史包件选择
const dialogImageUrl = ref(null); //图片
const dialogVisible = ref(null); //图片
const ProcessingList = ref([]); //处理结果已经选择的列表
const groundlineSet = ref(true); //干线条件都满足
const groundlineType = ref(null); //干线状态
const ShortageState = ref(false); //少货件数弹窗状态
const fleeingState = ref(false); //窜货件数弹窗
const ShortageList = ref([]); //少货件数
const fleeingList = ref([]); //窜货件数
const valueStrictly = ref();
const routerID = ref(null); //路由参数ID
const routerState = ref(''); //路由状态
const personResponsibleList = ref([]); //责任人列表
const companyProportion = ref(0); //公司占比
const identifying = ref(1); //订单，零担状态
const dialogHistoricalPackage = ref(false); //历史包件弹窗
const HistoricalPackageList = ref([]); //历史包件数组
const HistorIndex = ref(0); //历史包件索引
const TotalClaimAmount = ref(0); //总金额
const dialogReturn = ref(false); //打回弹窗
const ProcessingRecords = ref([]); //处理放记录用于匹配按钮
const ProcessingRecordsName = ref([]); //匹配的处理方中文名字
const repulse = ref(false); //加载效果
const amplifyurl = ref(''); //当前点击的图片
const amplifysrcList = ref([]); //图片循环列表
const RouteIndexs = ref(''); //进入前的页面索引
const UserPermissions = ref(''); //当前状态
const warehouseInfo = ref(''); //仓库信息
const warehouseState = ref(false); //仓库权限
const $useStore = useStore();
const accessControl = $useStore.getters.permission;
const PackageInfo = ref([
  //包件信息
  { packageCode: '', orderCode: '', waybillNumber: '', brandName: '' },
]);
// 责任方列表
const FangAddList = ref([
  { businessName: '', personResponsibleName: '', responsibilityRatio: '', description: '' },
]);
// 提货责任方
const responsible = ref([
  {
    value: '1',
    label: '工厂',
  },
  {
    value: '2',
    label: '外包搬运',
  },
  {
    value: '3',
    label: '物流',
  },
]);

const DeliveryDriver = ref([
  {
    value: '0',
    label: '兰溪',
  },
  {
    value: '1',
    label: '李华',
  },
  {
    value: '2',
    label: '唐飞',
  },
]);
// 图片列表
const fileList = ref([]);
// 字典公共函数
function updateDictionary(targetArray, dictionaryType) {
  getDictionaryBiz(dictionaryType).then(res => {
    console.log(res, '字典');
    res.data.data.forEach(item => {
      targetArray.push({
        value: item.dictKey,
        label: item.dictValue,
      });
    });
  });
}

// 获取角色权限
getDictionaryBiz('after_sales_visits').then(res => {
  console.log(res, '角色字典');
  const matchingItem = res.data.data.find(
    item => item.dictValue == JSON.parse(localStorage.getItem('TWMS-userInfo')).content.role_name
  );
  if (matchingItem) {
    UserPermissions.value = matchingItem.dictValue;
  } else {
    UserPermissions.value = '仓库客服';
  }
  console.log(UserPermissions.value, '当前角色权限');
});

warehouseInfo.value = localStorage.getItem('WarehouseName');

// 图片上传必须携带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);
    Indexform.value['packList'].push({
      name: response.data.originalName,
      url: response.data.link,
    });
    console.log(Indexform.value['packList'], '图片列表');
  }
};

// 后台控制权限按钮
const PermissionButton = computed(() => {
  return {
    workAdd: accessControl.workAdd, //新增
    batch_return: accessControl.batch_return, //批量打回
    assign: accessControl.assign, //工单指派
    apply_arbitration: accessControl.apply_arbitration, //申请仲裁
    batch_completion: accessControl.batch_completion, //批量完结
    representations: accessControl.representations, //申诉
    reply: accessControl.reply, //回复
    processing_completed: accessControl.processing_completed, //处理完结
    work_order_completion: accessControl.work_order_completion, //完结
    repulse: accessControl.repulse, //打回
    arbitration_completed: accessControl.arbitration_completed, //仲裁完结
    information_editing: accessControl.information_editing, //信息编辑
  };
});
// const PermissionButtonS = computed(() => {
//   return {
//     workAdd:accessControl.workAdd,//新增
//     batch_return:accessControl.batch_return,//批量打回
//     assign:accessControl.assign, //工单指派
//     apply_arbitration:accessControl.apply_arbitration,//申请仲裁
//     batch_completion:accessControl.batch_completion,//批量完结
//     representations:accessControl.representations,//申诉
//     reply:accessControl.reply,//回复
//     processing_completed:accessControl.processing_completed,//处理完结
//     work_order_completion:accessControl.work_order_completion,//完结
//     repulse:accessControl.repulse,//打回
//     arbitration_completed:accessControl.arbitration_completed,//仲裁完结
//     information_editing:accessControl.information_editing,//信息编辑
//   }
// });
// 详情按钮权限
const ButtonPermissions = computed(() => {
  // 根据 TabPermissions 的状态，决定每个按钮的显示隐藏逻辑
  switch (RouteIndexs.value != 'null') {
    case RouteIndexs.value == 0: //全部
      return {
        reply: false, //回复按钮(都可以查看)
        ProcessingResults: false, //处理结果按钮
        end: false, //完结按钮
        repulse: false, //打回按钮
        ArbitrationCompleted: false, //客服仲裁完结
        edit: false, //编辑
      };
    case RouteIndexs.value == 1: //处理中
      return {
        reply: false, //回复按钮
        ProcessingResults: false, //处理结果按钮
        end: false, //完结按钮
        repulse: false, //打回按钮
        ArbitrationCompleted: false, //客服仲裁完结
        edit: false, //编辑
      };
    case RouteIndexs.value == 2: //处理完毕
      return {
        reply: false, //回复按钮
        ProcessingResults: false, //处理结果按钮
        end: UserPermissions.value == '职能客服', //完结按钮
        repulse: UserPermissions.value == '客服经理', //打回按钮
        ArbitrationCompleted: false, //客服仲裁完结
        edit: false, //编辑
      };
    case RouteIndexs.value == 3: //待处理
      return {
        reply: UserPermissions.value == '仓库客服', //回复按钮
        ProcessingResults: UserPermissions.value == '仓库客服', //处理结果按钮
        end: UserPermissions.value != '仓库客服', //完结按钮
        repulse: UserPermissions.value != '仓库客服', //打回按钮
        ArbitrationCompleted: false, //客服仲裁完结
        edit: UserPermissions.value == '仓库客服', //编辑
      };
    case RouteIndexs.value == 4: //理赔金额未出
      return {
        reply: false, //回复按钮
        ProcessingResults: false, //处理结果按钮
        end: false, //完结按钮
        repulse: false, //打回按钮
        ArbitrationCompleted: false, //客服仲裁完结
        edit: false, //编辑
      };
    case RouteIndexs.value == 5: //仲裁中
      return {
        reply: UserPermissions.value == '职能客服', //回复按钮
        ProcessingResults: false, //处理结果按钮
        end: false, //完结按钮
        repulse: false, //打回按钮
        ArbitrationCompleted: UserPermissions.value == '职能客服', //客服仲裁完结
        edit: false, //编辑
      };
    case RouteIndexs.value == 6: //完结
      return {
        reply: false, //回复按钮
        ProcessingResults: false, //处理结果按钮
        end: false, //完结按钮
        repulse: false, //打回按钮
        ArbitrationCompleted: false, //客服仲裁完结
        edit: false, //编辑
      };
    case RouteIndexs.value == 7: //超时未处理
      return {
        reply: false, //回复按钮
        ProcessingResults: false, //处理结果按钮
        end: false, //完结按钮
        repulse: false, //打回按钮
        ArbitrationCompleted: false, //客服仲裁完结
        edit: false, //编辑
      };

      case RouteIndexs.value == 8: //待回复
      return {
        reply: UserPermissions.value == '仓库客服', //回复按钮
        ProcessingResults: UserPermissions.value == '仓库客服', //处理结果按钮
        end: UserPermissions.value != '仓库客服', //完结按钮
        repulse: UserPermissions.value != '仓库客服', //打回按钮
        ArbitrationCompleted: false, //客服仲裁完结
        edit: UserPermissions.value == '仓库客服', //编辑
      };

    // 其他任何情况下的默认情况
    default:
      return {
        reply: false, //回复按钮
        ProcessingResults: false, //处理结果按钮
        end: false, //完结按钮
        repulse: false, //打回按钮
        ArbitrationCompleted: false, //客服仲裁完结
        edit: false, //编辑
      };
  }
});

// 上传图片规则
const beforeAvatarUpload = rawFile => {
  if (rawFile.type !== 'image/png') {
    ElMessage.error('图片格式只能为image/png!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能大于2MB!');
    return false;
  }
  return true;
};
// 点击图片列表回调
const pictureList = val => {
  dialogImgList.value = true;
  console.log(val, '图片列表');
  amplifyurl.value = val.url;
};
// 点击图片移除
const ImgListRemove = val => {
  console.log(val, '移除图片');
};
// 处理方和责任方获取数据
const handle = () => {
  getDeptWarehouse().then(res => {
    res.data.data.forEach(item => {
      warehouseData.value.push({
        value: item.id,
        label: item.name,
      });
    });
  });
};
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: '',
      text: '',
      compensationTime: '',
    };
    // 根据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 ResponsiblePartychange = (val, index) => {
  FangAddList.value[index].personResponsibleName = null; //清空当前选择的责任人
  $_getBusinessDepartmentUser({
    warehouseId: val,
  }).then(res => {
    console.log(res, '获取责任人列表');
    personResponsibleList.value = res.data.data;
  });
};
const onLoad = () => {
  if ($route.query.RouteIndexs != 'null') {
    RouteIndexs.value = $route.query.RouteIndexs; //记录当前状态
  }

  console.log($route.query.id, '页面初始化');
  routerState.value = $route.query.routerState;
  updateDictionary(IndexException.value, 'pc_work_order'); //异常类型
  updateDictionary(DiscoveringNodes.value, 'pc_discovery_node'); //发现环节
  updateDictionary(DiscoveringNodes.value, 'pc_discovery_node'); //发现环节
  handle(); //处理方和责任方信息

  $_getInfo({ id: $route.query.id }).then(res => {
    console.log(res, '回显返回值参数');
    Indexform.value = res.data.data;

    Indexform.value['result'] = [];
    Indexform.value['processor'] = [];
    //图片处理回显
    Indexform.value.packList = res.data.data.decreaseImageVOList.map(res => {
      amplifysrcList.value.push(res.imagePath);
      return {
        name: res.imageName,
        url: res.imagePath,
      };
    });
    // 包件回显
    PackageInfo.value = res.data.data.abnormalPackageVOList;
    console.log(res.data.data.abnormalPackageVOList, '包件信息');
    // 责任方回显

    FangAddList.value = res.data.data.processorVOList
      .filter(item => item && item.typesOf && item.typesOf == '1')
      .map(item => {
        return { businessName: item.businessId };
      });
    console.log(FangAddList.value,'责任方回显问题');
   
    // 公司占比回显计算
    let sum = 0;
    res.data.data.personResponsibleVOS.forEach(item => {
      sum = Number(item.responsibilityRatio) + sum;
    });
    FangAddList.value = res.data.data.personResponsibleVOS.map(res => {
      return {
        businessName: res.businessId, //责任人ID
        personResponsibleName: res.personResponsibleName, //责任人名称
        responsibilityRatio: res.responsibilityRatio + '%', //占比
        description: res.description, //说明
      };
    });
    console.log(FangAddList.value,'责任方回显问题');
    res.data.data.processorVOList.forEach(item => {
        if (item) {
          if (item.typesOf == 2) {
            // 处理方
            Indexform.value.processor.push(item.businessId);
          }
        }
      });
    companyProportion.value = 100 - sum;
    ProcessingRecordsName.value = ProcessingRecords.value.filter(item =>
      warehouseData.value.includes(item.value)
    ).label;
    console.log(ProcessingRecordsName.value, '匹配到的中文处理方');
    // updateDictionary(columnList[2].checkarr, 'pc_work_order'); //异常类型
    // updateDictionary(columnList[3].checkarr, 'pc_discovery_node'); //发现环节
    getDictionaryBiz('result_handling').then(res => {
      console.log(res, '发现环节');
      ProcessingResults.value = res.data.data;
    });
    // 处理结果回显
    if (res.data.data.processingResultsVO.processingMoneyEntityList) {
      ProcessingList.value = res.data.data.processingResultsVO.processingMoneyEntityList.map(
        item => {
          Indexform.value.result.push(item.resultType);
          return {
            input: item.money,
            min: 0,
            max: 9999999999999999999999999999,
            state: item.resultType,
            payment: item.compensationMethod,
            name: item.resultTypeName,
            text: item.compensationMethodName,
            compensationTime: item.compensationTime,
          };
        }
      );
    }
    // 总金额回显
    TotalClaimAmount.value = res.data.data.processingResultsVO.money;
    // 理赔支付时间
    Indexform.value.compensationTime = res.data.data.processingResultsVO.compensationTime;
    // 处理结果说明回显
    Indexform.value.resultDescription = res.data.data.processingResultsVO.resultDescription;
  });
};
onLoad(); //初始化程序
// 异常类型事件
const abnormalChange = val => {
  console.log(val, '异常事件类型');
  console.log(StateType.value);
  StateType.value = false;
  if (val == 1 || val == 2 || val == 3) {
    SelectType.value = val;
  } else {
    StateType.value = true;
  }
  // 运损无数据默认0
  if (val == 1) {
    Indexform.value.packageCode = 0;
  } else {
    Indexform.value.packageCode = null;
  }
};

// 发现节点事件
const DiscoveringNodesChange = val => {
  groundlineSet.value = false; //干线条件都不满足
  if (val == 1 || val == 2 || val == 3 || val == 4 || val == 5 || val == 8 || val == 7) {
    groundlineType.value = val; //干线状态
    console.log(val);
  } else {
    groundlineSet.value = true; //展示所有搜索框
  }
};

// 照片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview = uploadFile => {
  dialogImageUrl.value = uploadFile.url;
  dialogVisible.value = true;
};

// 添加包件
const AddPackage = () => {
  PackageInfo.value.push({ packageCode: '', orderCode: '', waybillNumber: '' });
};
// 包件移除
const PackagRemoval = val => {
  PackageInfo.value.splice(val, 1); //移除当前点击的按钮
};
// 责任方添加
const responsibleParty = () => {
  FangAddList.value.push({
    businessName: '',
    personResponsibleName: '',
    responsibilityRatio: '',
    description: '',
  });
};

// 责任移除
const ResponsibilityRemoval = val => {
  FangAddList.value.splice(val, 1); //移除当前点击的按钮
};
// 顶部标签切换
const TopChange = val => {
  console.log(val);
  if (val == 0) {
    identifying.value = 1;
  } else {
    identifying.value = 2;
  }
};

// 批量打回
const BatchReturn = () => {
  BatchFrom.value.businessDepartment = [];
  BatchFrom.value.txt = null;
  dialogReturn.value = true;
};

// 打回按钮

const ConfirmReturn = () => {
  repulse.value = true; //开启加载并关闭按钮
  let data = {
    processorList: [],
  };
  // 过滤满足条件的对象
  let foundObjs = warehouseData.value.filter(obj =>
    BatchFrom.value.businessDepartment.includes(obj.value)
  );
  data['businessId'] = foundObjs.map(item => item.value).join(',');
  data['businessName'] = foundObjs.map(item => item.label).join(',');
  // 营业部处理
  foundObjs.forEach(item => {
    data['processorList'].push({ id: item.value, name: item.label });
  });
  data.reasonReturn = BatchFrom.value.txt; //打回原因
  data.workOrderIds = [$route.query.id]; //异常工单ID
  console.log(data, '处理好的值');
  $_batchReturn(data)
    .then(res => {
      repulse.value = false; //关闭加载并关闭按钮
      dialogReturn.value = false; //关闭打回弹窗
      if (res.data.code == 200) {
        ElMessage({
          message: res.data.msg,
          type: 'success',
        });
        $router.push('/aftersales/aftersalesWorkOrder'); //打回成功跳转到列表
      }
    })
    .catch(error => {
      repulse.value = false; //关闭加载并关闭按钮
      dialogReturn.value = false; //关闭打回弹窗
    });
};

// 少货件数对应事件
const ShortageTtems = val => {
  ShortageList.value = []; //进入之前重置参数
  const pattern = /\s+/g;
  const result = val.replace(pattern, '');
  console.log(result); // 输出 "33"
  Indexform.value.number = result;
  if (Indexform.value.number > 1) {
    ShortageState.value = true; //数量大于1，开启弹窗输入
  }
  for (let i = 0; i < val; i++) {
    ShortageList.value.push({
      number: i + 1, //件数
      packageCode: null, //输入框
    });
  }
};
// 少货关闭回调
const ShortageStateFun = () => {
  ShortageList.value.forEach(item => {
    if (item.packageCode == null) {
      Indexform.value.number = null;
    }
  });
};
// 少货按钮取消
const ShortageCancellation = () => {
  Indexform.value.number = null; //少货件数
  ShortageList.value = []; //进入之前重置参数
  ShortageState.value = false; //关闭弹窗
};
// 窜货关闭回调
const fleeingFun = () => {
  fleeingList.value.forEach(item => {
    if (item.packageCode == null) {
      Indexform.value.number = null;
    }
  });
};
// 窜货取消事件
const fleeingCancellation = () => {
  Indexform.value.number = null; //少货件数
  fleeingList.value = []; //进入之前重置参数
  fleeingState.value = false; //关闭弹窗
};
// 窜货输入框
const fleeingTtems = val => {
  fleeingList.value = []; //进入之前重置参数
  const pattern = /\s+/g;
  const result = val.replace(pattern, '');
  console.log(result); // 输出 "33"
  Indexform.value.number = result;
  if (Indexform.value.number > 1) {
    fleeingState.value = true; //数量大于1，开启弹窗输入
  }
  for (let i = 0; i < val; i++) {
    fleeingList.value.push({
      number: i + 1, //件数
      packageCode: null, //输入框
    });
  }
};
// 少货编辑
const moneyBtnA = () => {
  if (!Indexform.value.number) {
    ElMessage({
      message: '请输入少货数量',
      type: 'warning',
    });
    return;
  }
  ShortageState.value = true; //开启弹窗输入
};
// 窜货编辑
const moneyBtnB = () => {
  if (!Indexform.value.number) {
    ElMessage({
      message: '请输入窜货数量',
      type: 'warning',
    });
    return;
  }
  fleeingState.value = true; //开启弹窗输入
};
// 查询包件信息自动回显
const ChangePackageInfo = (val, index) => {
  let data = {
    packageCode: val,
  };
  $_getAbnormalPackage(data).then(res => {
    console.log(res, '包件信息');
    console.log(res.data.data, '包件信息');
    if (res.data.data.length) {
      const packageData = res.data.data[0];
      PackageInfo.value[index].orderCode = packageData.orderCode; //订单自编码
      PackageInfo.value[index].waybillNumber = packageData.waybillNumber; //运单号
      PackageInfo.value[index].orderId = packageData.orderId; //运单号
      PackageInfo.value[index].brandName = packageData.brandName; //品牌
      PackageInfo.value[index].state = false; //状态

      if (res.data.data.length > 1) {
        HistoricalPackageList.value = res.data.data;
        PackageInfo.value[index].state = true; //状态
      }
    }
    // packageCode; //包件码
    // //订单自编码
    // orderCode: orderId; //运单号
    // workOrderId; //工单id
    // workOrderNumber; //工单名称
    console.log(PackageInfo.value, '处理好的参数');
  });
};

// 查看历史包件
const historicalPackages = val => {
  dialogHistoricalPackage.value = true; //打开历史包件弹窗
  HistorIndex.value = val;
  console.log(val);
};
// 历史包件确定选择
const HistoricalPackage = val => {
  let info = HistoricalPackageList.value.find(obj => obj.workOrderId == val);
  PackageInfo.value[HistorIndex.value].orderCode = info.orderCode; //订单自编码
  PackageInfo.value[HistorIndex.value].waybillNumber = info.waybillNumber; //运单号
  PackageInfo.value[HistorIndex.value].orderId = info.orderId; //运单号
  PackageInfo.value[HistorIndex.value].brandName = packageData.brandName; //品牌
  dialogHistoricalPackage.value = false; //关闭历史包件弹窗

  PackageInfo.value[HistorIndex.value].relatedWorkOrdersId = info.workOrderId;
  console.log(PackageInfo.value, '处理好的参数');
};
// 历史包件里面的查看
const ViewPackageDetails = val => {
  if (!val) {
    ElMessage({
      message: '请选择要查看的数据',
      type: 'warning',
    });
    return;
  }
  console.log(val);
  let info = HistoricalPackageList.value.find(obj => obj.workOrderId == val);
  console.log(info, '筛选的值');
  $router.push({
    path: '/aftersales/aftersalesWorkOrderInfo',
    query: {
      id: info.workOrderId,
      name: info.workOrderId + '-信息查看',
      routerState: 'view',
    },
  });
  dialogHistoricalPackage.value = false; //打开历史包件弹窗
};

// 回复
const addireply = () => {
  $router.push({
    path: '/aftersales/aftersalesWorkOrderend',
    query: {
      id: $route.query.id,
      name: $route.query.workOrderNumber + '-回复',
      businessId: $route.query.workOrderNumber,
      RouterState: 'determine',
      index: '0',
    },
  });
};
// 新增记录跳转
const addingRecord = () => {
  $router.push({
    path: '/aftersales/aftersalesWorkOrderend',
    query: {
      id: $route.query.id,
      name: $route.query.workOrderNumber + '-添加异常记录',
      businessId: $route.query.workOrderNumber,
      RouterState: 'record',
      index: '1',
    },
  });
};
// 客服仲裁完结
const CustomerServiceCompleted = () => {
  $router.push({
    path: '/aftersales/aftersalesWorkOrdermodify',
    query: {
      id: $route.query.id,
      name: $route.query.workOrderNumber + '-客服仲裁完结',
      businessId: $route.query.businessId,
      warehouseId: $route.query.warehouseId,
      workOrderNumber: $route.query.workOrderNumber,
      RouterState: 'Kfend',
      index: '1',
    },
  });
};
// 编辑信息
const EditInformation = () => {
  $router.push({
    path: '/aftersales/aftersalesWorkOrdermodify',
    query: {
      id: $route.query.id,
      name: $route.query.workOrderNumber + '-编辑',
      businessId: $route.query.businessId,
      warehouseId: $route.query.warehouseId,
      workOrderNumber: $route.query.workOrderNumber,
      RouterState: 'Infoedit',
      ProcessType: $route.query.ProcessType, //类型 1 待处理 2 已处理
    },
  });
};
const EndJump = () => {
  $router.push({
    path: '/aftersales/aftersalesWorkOrderend',
    query: {
      id: $route.query.id,
      name: $route.query.workOrderNumber + '-完结填写',
      RouterState: 'end',
      index: '2',
    },
  });
};
</script>

<style scoped lang="scss">
.IndexFrom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  border: 1px solid #dcdfe6;

  .el-form-item {
    height: 46px;
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: 18px;
    flex: 1 0 30%;
    :deep(.el-form-item__label) {
      width: 100px !important;
      justify-content: flex-start;
    }
  }
  :deep(.el-form-item__content) {
    height: 100%;
    width: 70% !important;
    flex: none;
    .el-input {
      height: 100% !important;
      display: flex;
      align-items: center;
    }
  }
  .el-input__wrapper {
    height: 32px !important;
  }
  :deep(.el-input) {
    width: 100% !important;
  }
  :deep(.el-input__wrapper) {
    height: 30px !important;
  }
  :deep(.el-select) {
    width: 100%;
  }
  :deep(.el-form-item__label) {
    margin-left: 20px;
  }
}
.el_clzr {
  margin-top: 40px;

  :deep(.el-select) {
    width: 100%;
  }
  :deep(.el-input) {
    height: 38px;
  }
  :deep(.el-form-item__label) {
    margin-left: 20px;
    font-size: 14px;
    width: 100px !important;
    justify-content: flex-start;
  }
  .el-form-item {
    margin: 0;
    margin-bottom: 34px;
  }
  :deep(.el-input__wrapper) {
    height: 35px !important;
  }
  :deep(.el-form-item__content) {
    height: 100%;
    width: 90% !important;
    flex: none;
    .el-input {
      height: 100% !important;
      display: flex;
      align-items: center;
    }
  }
}
.Transport_damage_photos {
  display: flex;
  padding: 0 15px;
  margin-top: 20px;
  .title {
    width: 100px;
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
  }
  :deep(.el-upload-dragger) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0 10px;
  box-sizing: border-box;
  padding-right: 36px;
}
.investigate {
  :deep(.el-form-item__content) {
    width: 90% !important;
    box-sizing: border-box;
  }
}
.ShortageStatenum {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .title {
    width: 80px;
  }
  .remove {
    width: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ff0000;
  }
}
.moneyNum {
  display: flex;
  flex: 1;
  .el_btn {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    margin-left: 3px;
    border-radius: 4px;
    cursor: pointer;
  }
}
.ResponsibilityBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  .leftbox {
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
  .maxBox {
    display: flex;
    align-items: center;
    width: 30%;
    margin-right: 16px;
    .title {
      width: 80px;
      font-size: 14px;
      color: #606266;
    }
    .el-select {
      width: 100%;
    }
  }
  .el-btn {
    margin-left: 5%;
    border: none;
  }
  .el_btbox {
    display: flex;
    margin-top: 10px;
  }
}
.ResponsibilityBoxS {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;

  .leftbox {
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
  .maxBox {
    display: flex;
    align-items: center;
    width: 30%;
    margin-right: 20px;
    .title {
      width: 140px;
      color: #606266;
      font-size: 14px;
    }
    .el-select {
      width: 100%;
    }
  }
  .el-btn {
    margin-left: 5%;
    border: none;
  }
  .el_btbox {
    display: flex;
    margin-top: 10px;
  }
}
.PackageInformation {
  margin-bottom: 10px;
}
.NumTotal {
  width: 30%;
  margin-top: 16px;
  display: flex;
  align-items: center;
  span {
    width: 120px;
    font-size: 14px;
  }
}
.Proportion {
  margin-top: 16px;
  .title {
    font-size: 14px;
    color: #606266;
  }
}

:deep(.is-active) {
  border-bottom: 1px solid #e4e7ed !important;
}
.topClass {
  :deep(.el-tabs__content) {
    padding: 0;
  }
}
.foot_btn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 50%;
  height: 40px;
  display: flex;
  align-items: center;
}
:deep(.el-card__body) {
  margin-bottom: 50px;
}
.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;
  margin-bottom: 16px;
  .title {
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 26px;
    background-color: #fff;
  }
  .Listadmiration {
    display: flex;
    flex-wrap: wrap;
    margin-top: 26px;
    justify-content: space-between;
    justify-content: flex-start;
    .name {
      display: flex;
      margin-bottom: 20px;
      height: 30px;
      width: 30%;
      margin-right: 38px;
      span {
        display: block;
        width: 30%;
        color: #606266;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .lptime,
  .ZFlptime {
    display: flex;
    .name {
      width: 10%;
      color: #606266;

      :deep(.el-input--prefix) {
        width: 200px;
      }
    }
    :deep(.el-input) {
      width: auto;
    }
  }
  .ZFlptime {
    margin: 10px 0;
  }
}
.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;
  width: 180px;
  margin: 0 10px;
}
.Paymentname:hover {
  border: 1px solid #172e60;
}
.el_resj {
  margin-top: 20px !important;
  :deep(.el-form-item__label) {
    justify-content: flex-start;
    margin-left: 20px;
    font-size: 14px;
    width: 100px !important;
  }
}
.lptime {
  height: 30px !important;
}
:deep(.el-image) {
  width: 100% !important;
  height: 300px !important;
}
:deep(.el-input) {
  height: 100% !important;
}
</style>