工单新增添加处理结果

src/views/aftersales/aftersalesWorkOrder.vue

@@ -515,7 +515,6 @@ import { useRouter } from 'vue-router';
 import dayjs from 'dayjs';
 const $router = useRouter();
 const $useStore = useStore();
-
 const $route = useRoute();
 /** vuex */
 const accessControl = $useStore.getters.permission;

src/views/aftersales/aftersalesWorkOrderAdd.vue

@@ -445,6 +445,72 @@
       </el-tab-pane>
     </el-tabs>
 
+    <el-tabs type="border-card">
+      <el-tab-pane label="处理结果">
+        <div class="selector">
+          <el-select
+            v-model="Indexform.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 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>
+              <div class="payment_right">
+                <el-input-number
+                  v-model="item.input"
+                  :min="item.min"
+                  :max="item.max"
+                  @change="TotalChange"
+                />
+                <div class="Paymentname" @click="PaymentSelection(item)">
+                  {{ item.payment ? item.text : '支付方式' }}
+                </div>
+                <el-date-picker
+                  v-model="item.compensationTime"
+                  type="datetime"
+                  format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  placeholder="理赔支付时间"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="el_tool">
+            <span>总金额:{{ TotalClaimAmount }}</span>
+          </div>
+          <!-- <el-divider>
+            <span class="ZFname">理赔支付时间</span>
+          </el-divider>
+          <div class="lptime">
+            <el-date-picker
+              v-model="Indexform.compensationTime"
+              type="datetime"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择运理赔支付时间"
+            />
+          </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 ? '窜货照片' : '照片'
@@ -556,6 +622,28 @@
       </span>
     </template>
   </el-dialog>
+
+  <!-- 支付方式选择 -->
+  <el-dialog v-model="ZFdialog" title="支付方式选择" width="45%" class="ZFfsLoad">
+    <el-radio-group v-model="Indexform.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(Indexform.compensationMethod)">
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -573,6 +661,7 @@ import {
   $_getAbnormalPackage,
   $_shippingInformation,
 } from '@/api/aftersales/aftersalesWorkOrder';
+import { computeNumber } from '@/utils/util';
 import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
 import { getToken } from '@/utils/auth';
 const $router = useRouter();
@@ -581,7 +670,9 @@ const Indexform = ref({
   packList: [],
   decreaseImageEntityList: [], //处理好的图片数据
 }); //首页新增表单
+const ProcessingResults = ref([]); //处理结果列表选项
 const IndexException = ref([]); //异常类型下拉选择
+const ZFname = ref(''); //支付名字预留状态
 const DiscoveringNodes = ref([]); //发现节点下拉选择
 const warehouseData = ref([]); //处理方
 const SelectType = ref(null); //类型
@@ -590,6 +681,7 @@ const HistoricalPackageinput = ref(''); //历史包件选择
 const dialogImageUrl = ref(null); //图片
 const dialogVisible = ref(null); //图片
 const groundlineSet = ref(true); //干线条件都满足
+const TotalClaimAmount = ref(0); //总金额
 const groundlineType = ref(null); //干线状态
 const ShortageState = ref(false); //少货件数弹窗状态
 const fleeingState = ref(false); //窜货件数弹窗
@@ -599,6 +691,7 @@ const valueStrictly = ref();
 const routerID = ref(null); //路由参数ID
 const routerState = ref(''); //路由状态
 const personResponsibleList = ref([]); //责任人列表
+const ZFdialog = ref(false); //支付方式弹出
 const companyProportion = ref(0); //公司占比
 const identifying = ref(1); //订单，零担状态
 const dialogHistoricalPackage = ref(false); //历史包件弹窗
@@ -608,6 +701,8 @@ const NumberPackages = ref(0); //包件个数
 const dialogImgList = ref(false); //图片预览弹窗
 const amplifyurl = ref(''); //当前点击的图片
 const amplifysrcList = ref([]); //图片循环列表
+const ProcessingList = ref([]); //处理结果已经选择的列表
+const Paymentmethod = ref([]); //支付方式
 const PackageInfo = ref([
   //包件信息
   { packageCode: '', orderCode: '', waybillNumber: '', brandName: '' },
@@ -725,8 +820,70 @@ const onLoad = () => {
   updateDictionary(IndexException.value, 'pc_work_order'); //异常类型
   updateDictionary(DiscoveringNodes.value, 'pc_discovery_node'); //发现环节
   handle(); //处理方和责任方信息
+  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;
+  });
 };
 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: '',
+      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 abnormalChange = val => {
   console.log(val, '异常事件类型');
@@ -782,6 +939,43 @@ function DeliveryTrainnumber() {
     }
   });
 }
+// 理赔总金额计算
+const TotalChange = () => {
+  TotalClaimAmount.value = 0;
+  ProcessingList.value.forEach(item => {
+    console.log(item);
+    TotalClaimAmount.value += item.input;
+  });
+};
+// 支付方式选择
+const PaymentSelection = val => {
+  console.log(val, '支付');
+  console.log(Paymentmethod.value);
+  if (val.payment) {
+    //支付方式回显
+    let data = Paymentmethod.value.find(item => item.dictKey == val.payment);
+    Indexform.value.compensationMethod = data.dictKey;
+  } else {
+    Indexform.value.compensationMethod = null; //清空上一次选择
+  }
+  ZFdialog.value = true; //展开支付方式选择弹窗
+  ZFname.value = val.name; //存放的当前点击的名字
+};
+
+// 支付方式选择确定
+const PaymentConfirmation = val => {
+  console.log(val, '支付方式选择确定');
+  let data = ProcessingList.value.find(item => item.name == ZFname.value);
+  console.log(data, '处理好的');
+  data.text = Paymentmethod.value.find(item => item.dictKey == val).dictValue;
+  data.payment = val;
+  ZFdialog.value = false; //关闭支付方式选择弹窗
+  ElMessage({
+    message: '支付方式选择成功',
+    type: 'success',
+  });
+  console.log(ProcessingList.value, '选择好的支付列表');
+};
 
 // 照片
 const handleRemove = (uploadFile, uploadFiles) => {
@@ -848,6 +1042,8 @@ const ConfirmForm = () => {
     personResponsibleDTO: [],
     packageEntityList: [], ////包件信息
     decreaseImageEntityList: [], //图片信息
+    processingMoneyEntityList: [], //赔付方式
+    aftersalesProcessingResultsDTO: {}, //处理结果
     ...Indexform.value,
   }; //解构表单参数
 
@@ -1033,18 +1229,39 @@ const ConfirmForm = () => {
 
   console.log(processorEntityList, '老责任方处理好的数据');
 
-  // //责任方信息处理
-  // if (Indexform.value.duty.length) {
-  //   Indexform.value.forEach(item => {
-  //     let found = warehouseData.value.find(element => element.value == item.toString());
-  //     processorEntityList.push({
-  //       businessName: found ? found.label : '',
-  //       businessId: item,
-  //       conditions: 1,
-  //       typesOf: 1,
-  //     });
-  //   });
-  // }
+  // 处理结果填写
+
+  if (ProcessingList.value.length) {
+    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;
+    }
+    DataSubmit.aftersalesProcessingResultsDTO.money = sum; //金额汇总
+    DataSubmit.aftersalesProcessingResultsDTO.processingMoneyEntityList = ProcessingList.value
+        .map(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, //处理结果名字
+              compensationTime:item.compensationTime,//支付时间
+            };
+          } else {
+            return null;
+          }
+        })
+        .filter(item => item !== null);
+  }
 
   delete DataSubmit.duty, //移除多余字段
     delete DataSubmit.packList; //移除图片原始字段
@@ -1187,7 +1404,7 @@ const ChangePackageInfo = (val, index) => {
     console.log(res.data.data, '包件信息');
     if (res.data.data.length) {
       const packageData = res.data.data[0];
-      console.log(packageData,'获取的第一个参数');
+      console.log(packageData, '获取的第一个参数');
       PackageInfo.value[index].orderCode = packageData.orderCode; //订单自编码
       PackageInfo.value[index].waybillNumber = packageData.waybillNumber; //运单号
       PackageInfo.value[index].orderId = packageData.orderId; //运单号
@@ -1206,7 +1423,7 @@ const ChangePackageInfo = (val, index) => {
 
       Indexform.value.first = packageData.firsts; //一级品
       Indexform.value.secondary = packageData.second; //二级品
-      Indexform.value.waybillMall = packageData.mallName;//客户名称（运单商场）
+      Indexform.value.waybillMall = packageData.mallName; //客户名称（运单商场）
     }
     // packageCode; //包件码
     // //订单自编码
@@ -1527,4 +1744,93 @@ const ViewPackageDetails = val => {
   height: 100% !important;
   overflow-y: scroll;
 }
+:deep(.selector) {
+  .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;
+  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;
+    .name {
+      display: flex;
+      margin-bottom: 20px;
+      height: 30px;
+      width: 42%;
+      justify-content: space-between;
+      .payment_right {
+        display: flex;
+        :deep(.el-input) {
+          height: 100% !important;
+        }
+      }
+      span {
+        display: block;
+        color: #606266;
+        font-size: 16px;
+        margin-right: 8px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .lptime,
+  .ZFlptime {
+    display: flex;
+    .name {
+      width: 10%;
+      color: #606266;
+    }
+    .el-input {
+      width: auto;
+    }
+    :deep(.el-input--prefix) {
+      width: 200px;
+    }
+  }
+  .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: 100px;
+  margin: 0 10px;
+}
+.Paymentname:hover {
+  border: 1px solid #172e60;
+}
 </style>

src/views/aftersales/aftersalesWorkOrderend.vue

@@ -1733,6 +1733,7 @@ const submit = () => {
               ? paymentMethodMatch.dictValue
               : '未知支付方式',
             resultName: item.name, //处理结果名字
+            
           };
         } else {
           return null;