feat:编辑和新建收货单

src/lang/en/label.js

@@ -813,6 +813,7 @@ export default {
   flashPurchase: "Flash Sale",
   exchangePurchase: "Exchange",
   needPayWithCustomers: "Customers need to pay the difference",
+  manyfoldFlagTips: 'The current order has multiple items with multiple discounts and cannot be edited. Please cancel the refund order and reapply',
   promotionBuyTyper: [{
     label: 'One-time purchase',
     value: 1

src/lang/ja/label.js

@@ -802,6 +802,7 @@ export default {
       value: 3
     },
   ],
+  manyfoldFlagTips: '現在の注文には複数の割引が適用される複数の商品が含まれており、編集できません。払い戻し注文をキャンセルして再度申請してください',
   shippingRatesValue: '一定額を超える送料を除外する',
   needPayWithCustomers: "差額はお客様がお支払いいただきます",
   paidTips: '現在の注文には未払いの価格差額注文があります。適用する前に顧客に支払いまたはキャンセルを促してください。',

src/lang/zh/label.js

@@ -846,6 +846,7 @@ export default {
   ],
   shippingRates: '运费',
   shippingRatesValue: '排除超过特定金额的运费',
+  manyfoldFlagTips: '当前订单种有多件多折的商品，无法编辑。请取消退款单后，重新申请',
   promotionBuyTyper: [{
     label: '一次性购买',
     value: 1

src/views/oms/order/components/orderInfoDialog.vue

@@ -11,29 +11,6 @@
         </div>
       </div>
 
-      <div class="box" style="margin-top: 15px;">
-        <el-collapse
-          class="collapseContainer"
-          v-model="collapse.promotionActive"
-          accordion
-        >
-          <el-collapse-item
-            :title="$t('multiBuyDiscount.promotionMessage')"
-            name="2"
-          >
-            <div class="ptitle">
-              <promotionInfoTab :orderInfo="orderInfo"></promotionInfoTab>
-            </div>
-          </el-collapse-item>
-        </el-collapse>
-        <!-- <div class="item_title">
-          <span>{{ $t("multiBuyDiscount.promotionMessage") }}</span>
-        </div>
-        <div class="ptitle">
-          <promotionInfoTab :orderInfo="orderInfo"></promotionInfoTab>
-        </div> -->
-      </div>
-
       <div class="box" style="margin-top: 15px;">
         <el-collapse
           class="collapseContainer"

src/views/oms/refund/components/createRefundDialog copy.vue

@@ -0,0 +1,1417 @@
+<template>
+  <div v-loading.fullscreen.lock="detailLoading">
+    <div class="head"></div>
+    <div class="app-container">
+      <div class="filter-container">
+        <el-input
+          :placeholder="$t('place.onlineShopNumber')"
+          clearable
+          style="width: 200px;"
+          class="filter-item"
+          v-model="listQuery.ormorder"
+          @change="validateParams"
+        />
+        <el-input
+          :placeholder="$t('place.shopifyNumber')"
+          clearable
+          style="width: 200px;"
+          class="filter-item"
+          v-model="listQuery.shopify"
+          @change="validateParams"
+        />
+        <el-select
+          :placeholder="$t('place.afterSalesType')"
+          clearable
+          style="width: 200px;"
+          class="filter-item"
+          v-model="listQuery.refundType"
+          @change="validateParams"
+        >
+          <el-option
+            v-for="afterSaleType in afterSaleTypes"
+            :key="afterSaleType.value"
+            :label="$t(afterSaleType.label)"
+            :value="afterSaleType.value"
+          >
+          </el-option>
+        </el-select>
+        <el-button
+          v-waves
+          class="filter-item"
+          type="success"
+          icon="el-icon-search"
+          @click="getDetail(null)"
+          >{{ $t("view.search") }}</el-button
+        >
+      </div>
+    </div>
+    <div class="main" v-if="show">
+      <div class="box" style="margin-top: 15px;">
+        <div class="item_title">
+          <span>{{ $t("view.shippingInfo") }}</span>
+        </div>
+        <div class="ptitle">
+          <template>
+            <el-descriptions
+              class="margin-top"
+              :title="$t('title.addressInfo')"
+              :column="4"
+              direction="horizontal"
+              v-if="addressInfo.length == 1"
+            >
+              <el-descriptions-item :label="$t('country')">{{
+                addressInfo[0].receiverCountryCode
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('label.postalCode')">{{
+                addressInfo[0].receiverZip
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('state')">{{
+                addressInfo[0].receiverState
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('city')">{{
+                addressInfo[0].receiverCity
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('suburb')">{{
+                addressInfo[0].receiverDistrict
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('street')">{{
+                addressInfo[0].receiverStreet
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('address')">{{
+                addressInfo[0].receiverAddress
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('dooeNo')">{{
+                addressInfo[0].receiverAddress2
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('recipient')">{{
+                addressInfo[0].receiverName
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('telephone')">{{
+                addressInfo[0].receiverPhone
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('moPhone')">{{
+                addressInfo[0].receiverMobile
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('post')">{{
+                addressInfo[0].email
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('label.shippingFee')">{{
+                addressInfo[0].freight
+              }}</el-descriptions-item>
+            </el-descriptions>
+            <div class="container" width="500px" v-if="addressInfo.length > 1">
+              <div
+                v-for="(item, index) in addressInfo"
+                :key="index"
+                width="100px"
+                margin-right="50px"
+              >
+                <el-popover
+                  placement="top"
+                  :title="$t('title.addressInfo')"
+                  width="300"
+                  offset="300"
+                  trigger="hover"
+                >
+                  <el-descriptions
+                    class="margin-top"
+                    title=""
+                    :column="1"
+                    direction="horizontal"
+                  >
+                    <el-descriptions-item :label="$t('country')">{{
+                      item.receiverCountryCode
+                    }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('address')">{{
+                      item.receiverAddress
+                    }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('recipient')">{{
+                      item.receiverName
+                    }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('post')">{{
+                      item.email
+                    }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('label.shippingFee')">{{
+                      item.freight
+                    }}</el-descriptions-item>
+                  </el-descriptions>
+                  <el-button
+                    slot="reference"
+                    @click="chooseClick(item.idList)"
+                    >{{ item.receiverCountryCode }}</el-button
+                  >
+                </el-popover>
+              </div>
+            </div>
+            <!-- <el-descriptions class="margin-top" :title="'地址信息-' + (index + 1)" :column="4" direction="horizontal" v-for="(item, index) in addressInfo" :key="index"> -->
+            <!-- <el-descriptions-item :label="$t('country')">{{item.receiverCountryCode}}</el-descriptions-item> -->
+            <!-- <el-descriptions-item :label="$t('label.postalCode')">{{item.receiverZip}}</el-descriptions-item>
+                            <el-descriptions-item :label="$t('state')">{{item.receiverState}}</el-descriptions-item>
+                            <el-descriptions-item :label="$t('city')" >{{item.receiverCity}}</el-descriptions-item>
+                            <el-descriptions-item :label="$t('suburb')" >{{item.receiverDistrict}}</el-descriptions-item> -->
+            <!-- <el-descriptions-item :label="$t('street')" >{{item.receiverStreet}}</el-descriptions-item> -->
+            <!-- <el-descriptions-item :label="$t('address')" >{{item.receiverAddress}}</el-descriptions-item> -->
+            <!-- <el-descriptions-item :label="$t('dooeNo')" >{{item.receiverAddress2}}</el-descriptions-item> -->
+            <!-- <el-descriptions-item :label="$t('recipient')" >{{item.receiverName}}</el-descriptions-item> -->
+            <!-- <el-descriptions-item :label="$t('telephone')" >{{item.receiverPhone}}</el-descriptions-item>
+                            <el-descriptions-item :label="$t('moPhone')" >{{item.receiverMobile}}</el-descriptions-item> -->
+            <!-- <el-descriptions-item :label="$t('post')" >{{item.email}}</el-descriptions-item> -->
+            <!-- <el-descriptions-item :label="$t('label.shippingFee')" >{{item.freight}}</el-descriptions-item> -->
+            <!-- <el-descriptions-item v-if=" addressInfo.length !=0 && addressInfo.length !=1 " :label="$t('actions')">
+                                <el-button
+                                type="success"
+                                @click="chooseClick(item.idList)"
+                                v-loading="btnLoading"
+                                >选择</el-button
+                                >
+                            </el-descriptions-item> -->
+            <!-- </el-descriptions> -->
+          </template>
+        </div>
+      </div>
+      <div
+        class="box"
+        style="margin-top: 15px;padding-bottom: 10px;"
+        v-loading="fromLoading"
+        v-if="
+          (this.listQuery.ormorder || this.listQuery.shopify) &&
+            this.listQuery.refundType
+        "
+      >
+        <div class="item_title">
+          <span>{{ $t("view.refundInfo") }}</span>
+        </div>
+        <div class="ptitle">
+          <el-form
+            ref="addRefundForm"
+            :model="addRefundForm"
+            label-width="auto"
+          >
+            <el-form-item :label="$t('currency')">
+              <el-input
+                disabled
+                v-model="addRefundForm.currency"
+                placeholder
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('label.expectedRefundAmount')" required>
+              <el-input
+                v-model="addRefundForm.refundTotalAmount"
+                :disabled="true"
+              />
+            </el-form-item>
+
+            <el-form-item :label="$t('label.refundMethod')" required>
+              <el-radio-group v-model="addRefundForm.refundMethod">
+                <el-radio label="system">{{
+                  $t("view.systemRefund")
+                }}</el-radio>
+                <el-radio label="manual">{{
+                  $t("view.manualRefund")
+                }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="addRefundForm.refundMethod == 'manual'"
+              :label="$t('label.accountType')"
+              required
+            >
+              <el-radio-group v-model="addRefundForm.refundAccountType">
+                <el-radio label="PayPal">PayPal</el-radio>
+                <!-- 银行卡暂时隐藏 -->
+                <!-- <el-radio label="bankCard">银行卡</el-radio> -->
+                <!-- <el-radio label="Gift Card">Gift Card</el-radio> -->
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              :label="$t('label.receivingAccount')"
+              v-if="
+                addRefundForm.refundMethod == 'manual' &&
+                  addRefundForm.refundAccountType == 'PayPal'
+              "
+              required
+            >
+              <el-input
+                v-model="addRefundForm.refundAccount"
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('label.taxRefund')">
+              <el-radio-group
+                v-model="addRefundForm.refundTaxAble"
+                @change="calculateRefundAmount"
+              >
+                <el-radio label="0">{{ $t("view.noTaxRefund") }}</el-radio>
+                <el-radio label="1">{{ $t("view.taxRefund") }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="addRefundForm.refundTaxAble == 1"
+              :label="$t('label.taxRefundAmount')"
+            >
+              <el-input-number
+                v-model="addRefundForm.refundTaxAmount"
+                :min="0.0"
+                :step="0.01"
+                step-strictly
+                @change="calculateRefundAmount"
+              ></el-input-number>
+            </el-form-item>
+            <!-- 选择是否退运费-->
+            <el-form-item :label="$t('label.shippingFee')">
+              <el-radio-group
+                v-model="addRefundForm.refundPostage"
+                @change="calculateRefundAmount"
+              >
+                <el-radio label="0">{{ $t("view.noRefund") }}</el-radio>
+                <el-radio label="1">{{
+                  $t("view.refundShippingFee")
+                }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="addRefundForm.refundPostage == 1"
+              :label="$t('label.returnShippingFeeAmount')"
+            >
+              <el-input-number
+                v-model="addRefundForm.refundPostageAmount"
+                :min="0.0"
+                :step="0.01"
+                step-strictly
+                @change="calculateRefundAmount"
+              ></el-input-number>
+            </el-form-item>
+
+            <el-form-item
+              v-if="this.queryRefundType == 3"
+              :label="$t('label.receivingReturnWarehouse')"
+            >
+              <el-select
+                :placeholder="$t('place.pleaseSelect')"
+                clearable
+                style="width: 200px;"
+                class="filter-item"
+                v-model="addRefundForm.warehouseCode"
+                @change="ShippingLabelOption"
+              >
+                <el-option
+                  v-for="item in warehouseItems"
+                  :key="item.key"
+                  :label="item.key"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item
+              v-if="
+                addRefundForm.warehouseCode == 'PSJ-G001001' ||
+                  addRefundForm.warehouseCode == 'PSJ-G001003' ||
+                  addRefundForm.warehouseCode == 'PSJ-H0000024' ||
+                  addRefundForm.warehouseCode == 'PSJ-H0000019' ||
+                  addRefundForm.warehouseCode == 'PSJ-H0000011' ||
+                  addRefundForm.warehouseCode == 'PSJ-G001004'
+              "
+              label="ShippingLabel"
+            >
+              <el-radio-group
+                v-model="addRefundForm.slUseable"
+                @change="changeSlradio()"
+              >
+                <el-radio label="0" value="0">{{
+                  $t("view.notEnabled")
+                }}</el-radio>
+                <el-radio label="1" value="1">{{
+                  $t("view.enabled")
+                }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <el-form-item
+              v-if="
+                this.queryRefundType == 3 && this.addRefundForm.slUseable == 0
+              "
+              :label="$t('label.returnLogisticsCompanyCode')"
+            >
+              <el-input
+                v-model="addRefundForm.shipmodeId"
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                this.queryRefundType == 3 && this.addRefundForm.slUseable == 0
+              "
+              :label="$t('label.returnLogisticsNumber')"
+            >
+              <el-input
+                v-model="addRefundForm.shippingNo"
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+
+            <el-form-item :label="$t('label.afterSalesInstructions')">
+              <el-input
+                type="textarea"
+                :placeholder="$t('place.enterContent')"
+                v-model="addRefundForm.notes"
+                maxlength="150"
+                show-word-limit
+              >
+              </el-input>
+            </el-form-item>
+
+            <el-form-item :label="$t('label.uploadVoucher')">
+              <el-upload
+                class="avatar-uploader"
+                :action="uploadPhotos"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload"
+                :headers="headers"
+              >
+                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 因为要多选的问题 不考虑分页 -->
+        <div class="box" style="margin-top: 15px;">
+          <div class="item_title">
+            <span>{{ $t("view.selectItems") }}</span>
+            <el-select
+              v-if="this.multipleSelection && this.multipleSelection.length > 0"
+              v-model="refundReasonAss"
+              :placeholder="$t('place.selectCheckedRefundReasons')"
+              clearable
+              @change="chooseReason(refundReasonAss, reasonListAll)"
+            >
+              <el-option
+                v-for="status in reasonListAll"
+                :key="status.id"
+                :label="status.reasonContentChinese"
+                :value="String(status.id)"
+              >
+              </el-option>
+            </el-select>
+            <el-input
+              v-if="otherReasonFlag == '1'"
+              :placeholder="$t('place.enterReason')"
+              clearable
+              style="width: 200px;"
+              class="filter-item"
+              v-model="refundOtherReasonAss"
+              @change="writeReason(refundOtherReasonAss)"
+            />
+          </div>
+          <div>
+            <el-table
+              ref="multipleTable"
+              @selection-change="handleSelectionChange"
+              style="width: 100%;"
+              v-loading="listLoading"
+              :key="tableKey"
+              :data="tableOrderDeatils"
+              row-key="id"
+              stripe
+              border
+              fit
+              highlight-current-row
+            >
+              <el-table-column
+                type="selection"
+                width="55"
+                :selectable="checkSelectable"
+              >
+              </el-table-column>
+
+              <el-table-column
+                :label="$t('label.orderNumber')"
+                width="150"
+                align="center"
+                prop="ordersId"
+              >
+              </el-table-column>
+
+              <el-table-column
+                :label="$t('goodsCode')"
+                width="150"
+                align="center"
+                prop="skuCode"
+              >
+              </el-table-column>
+
+              <el-table-column
+                :label="$t('onlyCode')"
+                min-width="180"
+                align="center"
+                prop=""
+              >
+                <template slot-scope="scope">
+                  <div v-if="scope.row.uniqueCode">
+                    <div
+                      v-for="(item, index) in scope.row.uniqueCode"
+                      :key="index"
+                    >
+                      {{ item }}
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+
+              <el-table-column
+                :label="$t('goodsName')"
+                width="300"
+                align="center"
+                prop="productName"
+              ></el-table-column>
+
+              <el-table-column
+                :label="$t('bagSkuCode')"
+                width="180"
+                align="center"
+                prop="bagSkuCode"
+              ></el-table-column>
+
+              <el-table-column
+                :label="$t('label.originalQuantity')"
+                width="80"
+                align="center"
+                prop="oldQuantity"
+              ></el-table-column>
+
+              <el-table-column
+                :label="$t('goodsPrice')"
+                width="80"
+                align="center"
+                prop="price"
+              ></el-table-column>
+
+              <el-table-column
+                :label="$t('offerAmount')"
+                width="80"
+                align="center"
+                prop="discountFee"
+              ></el-table-column>
+
+              <el-table-column
+                :label="$t('payAmount')"
+                width="80"
+                align="center"
+                prop="totalFee"
+              ></el-table-column>
+
+              <el-table-column
+                :label="$t('label.refundPercentage')"
+                width="150"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <div v-if="multipleSelection.indexOf(scope.row) == -1">
+                    <div>{{ scope.row.refundSales }}</div>
+                  </div>
+                  <div v-else>
+                    <el-input-number
+                      v-model="scope.row.refundSales"
+                      @change="changeQuantity(scope.row)"
+                      size="mini"
+                      :min="0"
+                      :max="1"
+                      :step="0.01"
+                      step-strictly
+                    ></el-input-number>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('label.eligibleQuantity')"
+                width="150"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <div v-if="multipleSelection.indexOf(scope.row) == -1">
+                    <div>{{ scope.row | quantityFilter }}</div>
+                  </div>
+                  <div v-else>
+                    <!-- <tableEdit :row.sync="scope.row"></tableEdit> -->
+                    <el-input-number
+                      v-model="scope.row.quantity"
+                      @change="changeQuantity(scope.row)"
+                      size="mini"
+                      :min="0"
+                      :max="scope.row.maxq"
+                      :step="1"
+                      step-strictly
+                    ></el-input-number>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('label.refundedAmount')"
+                width="150"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <div v-if="multipleSelection.indexOf(scope.row) == -1">
+                    <div>0</div>
+                  </div>
+                  <div v-else>
+                    <el-input-number
+                      v-model="scope.row.refundAmount"
+                      size="mini"
+                      @change="refundAmountChange"
+                      :min="0.0"
+                      :max="scope.row.totalFee"
+                    ></el-input-number>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('label.refundReason')"
+                width="150"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <div v-if="multipleSelection.indexOf(scope.row) == -1"></div>
+                  <div v-else>
+                    <el-select
+                      v-model="scope.row.refundReason"
+                      :placeholder="$t('place.pleaseSelect')"
+                      clearable
+                      @change="refundChange(scope.row.refundReason, scope.row)"
+                    >
+                      <el-option
+                        v-for="status in scope.row.refundReasonList"
+                        :key="status.id"
+                        :label="status.reasonContentChinese"
+                        :value="String(status.id)"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('label.reasonExplanation')"
+                width="150"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <div v-if="multipleSelection.indexOf(scope.row) == -1"></div>
+                  <div v-else>
+                    <el-input
+                      v-if="scope.row.customOpen == '1'"
+                      :placeholder="$t('place.enterReason')"
+                      clearable
+                      style="width: 200px;"
+                      class="filter-item"
+                      v-model="scope.row.otherReason"
+                    />
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                width="55"
+                :label="$t('label.flashPurchase')"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <el-checkbox
+                    v-model="scope.row.flashPurchaseFlag == 1"
+                  ></el-checkbox>
+                </template>
+              </el-table-column>
+              <el-table-column
+                width="55"
+                :label="$t('label.exchangePurchase')"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <el-checkbox
+                    v-model="scope.row.exchangePurchaseFlag == 1"
+                  ></el-checkbox>
+                </template>
+              </el-table-column>
+
+              <el-table-column
+                :label="$t('label.refundedQuantity')"
+                width="80"
+                align="center"
+                prop="refundQuantity"
+              ></el-table-column>
+              <el-table-column
+                :label="$t('status')"
+                width="80"
+                align="center"
+                prop="status"
+              >
+                <template slot-scope="scope">
+                  {{ scope.row.status | statusFilter }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('label.signedForTheReturn')"
+                width="80"
+                align="center"
+                prop="matchStatus"
+              >
+                <template slot-scope="scope">
+                  <span v-if="scope.row.matchStatus == 'unmatch'">
+                    {{ $t("label.notMatched") }}
+                  </span>
+                  <span
+                    v-if="
+                      scope.row.matchStatus == 'order_matched' ||
+                        scope.row.matchStatus == 'matched'
+                    "
+                  >
+                    {{ $t("label.matchedSuccess") }}
+                  </span>
+                  <span v-if="scope.row.matchStatus == null">
+                    {{ $t("label.not") }}
+                  </span>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="box" style="width:50%;margin-top: 15px;float:left">
+              {{ $t("view.totalRefund") }}：{{
+                addRefundForm.refundTotalAmount
+              }}
+            </div>
+            <div class="box" style="width:50%; margin-top: 10px;float:left">
+              <el-button
+                :style="btnStyle"
+                type="primary"
+                @click="submit(this)"
+                v-loading="btnLoading"
+                >{{ $t("save") }}</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import {getRefundReason} from '@/api/oms/refund/refund'
+import global from "@/views/oms/global";
+import waves from "@/directive/waves";
+import { getToken } from "@/utils/auth";
+import { dcmSub } from "@/utils/toolUtil";
+import { getDetailListForRefund, statusKeyValue } from "@/api/oms/order/order";
+import {
+  saveRefundNew,
+  validPromotionReq,
+  warehouseList
+} from "@/api/oms/refund/refund";
+import { BigNumber } from "bignumber.js";
+import { write } from "xlsx";
+
+import tableEdit from "./tableEdit";
+
+export default {
+  name: "createRefundDialog",
+  directives: {
+    waves
+  },
+  components: {
+    global,
+    tableEdit
+  },
+  filters: {
+    statusFilter(key) {
+      return statusKeyValue[key];
+    },
+    quantityFilter(row) {
+      if (row.refundQuantity > 0) {
+        return dcmSub(row.oldQuantity, row.refundQuantity);
+      }
+      return row.oldQuantity;
+    }
+  },
+  data() {
+    return {
+      matchStatus: null,
+      listLoading: false,
+      detailLoading: false,
+      fromLoading: false,
+      btnLoading: false,
+      addressInfo: [],
+      listQuery: {
+        ormorder: null,
+        shopify: null,
+        refundType: null,
+        idList: null
+      },
+      show: false,
+      tableOrderDeatils: [],
+      multipleSelection: [],
+      addRefundForm: {
+        refundMethod: "system",
+        refundAccountType: "PayPal",
+        refundAccount: "",
+        refundType: "",
+        refundPostage: "0",
+        refundAmount: 0.0, //商品退款金额
+        refundPostageAmount: 0.0,
+        warehouseCode: "",
+        annexPath: "",
+        items: [],
+        oldQuantity: 0,
+        refundTaxAble: "0", //是否退税
+        refundTaxAmount: 0.0, //退税金额
+        refundTotalAmount: 0.0, //总计退款金额 = 商品退款金额 + 退运费金额 + 退税金额 。 实际执行时，refundAmount=商品退款金额 + 退税金额；退运费金额单独计算
+        // refundReason:'', // 退款原因
+        // otherReason:'', // 其他退款理由
+        slUseable: "0", //是否开启ShippingLabel选项
+        currency: "", //币种
+        shipmodeId: "", //退货物流公司编号
+        shippingNo: "", //退货物流单号
+        notes: ""
+      },
+      afterSaleTypes: global.afterSaleType, //售后类型
+      warehouseItems: [],
+      queryRefundType: "",
+      queryOrmorder: "",
+      queryShopify: "",
+      btnStyle: "",
+      imageUrl: "",
+      uploadPhotos: process.env.VUE_APP_OMS_API + "ordersRefund/uploadPhotos",
+      reasonListAll: [],
+      refundReasonAss: "",
+      refundOtherReasonAss: "",
+      otherReasonFlag: "",
+      tableKey: Math.random()
+    };
+  },
+  created() {
+    //情况清空数据
+    this.getWarehouseList();
+  },
+  computed: {
+    // 计算属性的 getter
+    headers: function() {
+      return {
+        "X-Token": getToken()
+      };
+    }
+  },
+  methods: {
+    getDetail(idList) {
+      this.ShippingLabelOption();
+      //非空判断
+      if (!this.listQuery.ormorder && !this.listQuery.shopify) {
+        this.$message.error("网店单号和shopify单号不能同时为空");
+        return;
+      }
+      if (!this.listQuery.refundType) {
+        this.$message.error("请选择售后类型");
+        return;
+      }
+      //初始化数据
+      this.addRefundForm.refundAmount = 0.0;
+      this.addRefundForm.refundPostage = "0";
+      this.addRefundForm.refundPostageAmount = 0.0;
+      this.addRefundForm.warehouseCode = "";
+      this.addRefundForm.annexPath = "";
+      this.addRefundForm.items = [];
+      this.addRefundForm.oldQuantity = 0.0;
+      this.addRefundForm.refundTaxAble = "0"; //是否退税
+      this.addRefundForm.refundTaxAmount = 0.0; //退税金额
+      this.addRefundForm.refundTotalAmount = 0.0;
+      this.addRefundForm.shipmodeId = "";
+      this.addRefundForm.shippingNo = "";
+      this.addRefundForm.refundMethod = "system";
+      this.addRefundForm.refundAccountType = "PayPal";
+      this.addRefundForm.refundAccount = "";
+      this.addRefundForm.notes = "";
+      this.addressInfo = [];
+      this.listQuery.idList = null;
+      // this.listQuery.addressId = addressId;
+      if (idList) {
+        var addressIds = "";
+        for (let id in idList) {
+          addressIds = addressIds + idList[id] + ",";
+        }
+        this.listQuery.idList = addressIds.slice(0, addressIds.length - 1);
+      }
+      this.reasonListAll = [];
+      this.refundReasonAss = "";
+      this.refundOtherReasonAss = "";
+      this.otherReasonFlag = "";
+
+      //查询满足条件的所有订单项
+      this.listLoading = true;
+      getDetailListForRefund(this.listQuery).then(res => {
+        if (200 == res.code) {
+          this.show = true;
+          //第一次查询的退款类型
+          this.queryRefundType = res.data.refundType;
+          this.queryOrmorder = res.data.ormorder;
+          this.queryShopify = res.data.shopify;
+          this.tableOrderDeatils = res.data.list;
+          this.addRefundForm.currency = res.data.currency;
+          this.addressInfo = res.data.addressList;
+
+          this.reasonListAll = res.data.refundReasonList;
+
+          let goodsRefundAmount = BigNumber(0);
+
+          if (this.tableOrderDeatils) {
+            for (let ind in this.tableOrderDeatils) {
+              if (this.tableOrderDeatils[ind].refundFlag == "0") {
+                this.tableOrderDeatils[ind].refundQuantity = 0;
+              }
+              this.tableOrderDeatils[ind].oldQuantity = this.tableOrderDeatils[
+                ind
+              ].quantity;
+            }
+
+            //退商品金额计算
+            this.refundAmount = goodsRefundAmount.toFixed(2);
+            this.$nextTick(() => {
+              this.tableOrderDeatils.forEach(row => {
+                if (row.selectedRow == 1) {
+                  this.$refs.multipleTable.toggleRowSelection(row, true);
+                }
+              });
+            });
+          }
+        } else {
+          this.$message.error(res.msg);
+          this.show = false;
+        }
+        this.listLoading = false;
+      });
+    },
+    //获取退货仓库信息
+    getWarehouseList() {
+      warehouseList().then(res => {
+        if (200 == res.code) {
+          this.warehouseItems = res.data;
+        }
+      });
+    },
+    //计算退款总额 商品退款金额 + 退运费金额 +退税金额
+    calculateRefundAmount() {
+      //如果没选择退税
+      if (this.addRefundForm.refundTaxAble != "1") {
+        this.addRefundForm.refundTaxAmount = BigNumber(0)
+          .toNumber()
+          .toFixed(2);
+      }
+      //如果没选择退运费
+      if (this.addRefundForm.refundPostage != "1") {
+        this.addRefundForm.refundPostageAmount = BigNumber(0)
+          .toNumber()
+          .toFixed(2);
+      }
+
+      var taxAndShippingAmount = BigNumber(this.addRefundForm.refundTaxAmount)
+        .plus(BigNumber(this.addRefundForm.refundPostageAmount))
+        .toNumber()
+        .toFixed(2);
+      this.addRefundForm.refundTotalAmount = BigNumber(taxAndShippingAmount)
+        .plus(BigNumber(this.addRefundForm.refundAmount))
+        .toNumber()
+        .toFixed(2);
+    },
+    handleSelectionChange(val) {
+      console.log("handleSelectionChange", val);
+      this.refundAmount = 0;
+      this.multipleSelection = val;
+      if (this.multipleSelection && this.multipleSelection.length > 0) {
+        for (let uy in this.multipleSelection) {
+          var row = this.multipleSelection[uy];
+          row.refundAmount = BigNumber(row.totalFee)
+            .div(BigNumber(row.oldQuantity))
+            .multipliedBy(BigNumber(row.quantity))
+            .multipliedBy(BigNumber(row.refundSales))
+            .toNumber()
+            .toFixed(2);
+        }
+      } else {
+        this.refundAmount = 0;
+        this.addRefundForm.refundAmount = this.refundAmount;
+      }
+      this.jisuan();
+    },
+    refundAmountChange() {
+      this.jisuan();
+    },
+    jisuan() {
+      this.taxAndShippingAmount = BigNumber(this.addRefundForm.refundTaxAmount)
+        .plus(BigNumber(this.addRefundForm.refundPostageAmount))
+        .toNumber();
+
+      var refundAmount = BigNumber(0);
+      if (this.multipleSelection && this.multipleSelection.length > 0) {
+        for (let uy in this.multipleSelection) {
+          var row = this.multipleSelection[uy];
+          refundAmount = refundAmount.plus(BigNumber(row.refundAmount));
+        }
+        this.refundAmount = refundAmount.toNumber().toFixed(2);
+      }
+      this.$set(this.addRefundForm, "refundAmount", this.refundAmount);
+      this.$set(
+        this.addRefundForm,
+        "refundTotalAmount",
+        refundAmount
+          .plus(BigNumber(this.taxAndShippingAmount))
+          .toNumber()
+          .toFixed(2)
+      );
+      console.log(this.addRefundForm.refundTotalAmount, "总退款金额");
+    },
+    checkSelectable(row) {
+      console.log("----");
+      if (row.refundQuantity > 0) {
+        var refcount = dcmSub(row.oldQuantity, row.refundQuantity);
+        //发生退款
+        if (refcount <= 0 && this.queryRefundType != "1") {
+          return false; //不可选择
+        }
+        row["maxq"] = refcount;
+      } else {
+        row["maxq"] = row.oldQuantity;
+      }
+      // if( row.status == "delivery" && (row.exchangePurchaseFlag == 1)){
+      //   return false; //不可选择
+      // }
+      // if (row.quantity != 0) {
+      //   row.quantity = row["maxq"];
+      // }
+      //未发货
+      if (
+        this.queryRefundType == "2" &&
+        (row.status == "delivery" ||
+          row.status == "off" ||
+          row.status == "partdelivery")
+      ) {
+        return false; //不可选择
+      }
+      //退货退款
+      else if (
+        this.queryRefundType == "3" &&
+        (row.status == "unchecked" ||
+          row.status == "check" ||
+          row.status == "undelivery")
+      ) {
+        return false; //不可选择
+      }
+      // 促销赠品
+      // if (row.isGift === "1" && row.isPromotion === 1) {
+      //   return false; //不可选择
+      // }
+      return true;
+    },
+    refundChange(id, arr) {
+      if (id) {
+        arr.refundReasonList.forEach(item => {
+          if (item.id == id) {
+            arr.customOpen = item.custom;
+            if (arr.customOpen && arr.customOpen != 1) {
+              arr.otherReason = "";
+            }
+          }
+        });
+      } else {
+        arr.customOpen = "";
+      }
+    },
+    writeReason(otherReason) {
+      if (this.multipleSelection && this.multipleSelection.length > 0) {
+        for (let uy in this.multipleSelection) {
+          var row = this.multipleSelection[uy];
+          if (row.customOpen == 1) {
+            row.otherReason = otherReason;
+          }
+        }
+      }
+    },
+    chooseReason(id, arr) {
+      if (id) {
+        arr.forEach(item => {
+          if (item.id == id) {
+            this.otherReasonFlag = item.custom;
+          }
+        });
+      } else {
+        this.otherReasonFlag = "";
+      }
+
+      if (this.multipleSelection && this.multipleSelection.length > 0) {
+        for (let uy in this.multipleSelection) {
+          var row = this.multipleSelection[uy];
+          row.refundReason = String(id);
+          row.customOpen = this.otherReasonFlag;
+          if (row.customOpen != 1) {
+            row.otherReason = "";
+          }
+        }
+      }
+    },
+    changeQuantity(row) {
+      //当前行的退款金额
+      row.refundAmount = BigNumber(row.totalFee)
+        .div(BigNumber(row.oldQuantity))
+        .multipliedBy(BigNumber(row.quantity))
+        .multipliedBy(BigNumber(row.refundSales))
+        .toNumber()
+        .toFixed(2);
+      console.log("当前行可退金额", row.refundAmount);
+      this.jisuan();
+    },
+
+    handleAvatarSuccess(res, file) {
+      console.log("图片上传结果", res);
+      this.imageUrl = res.accessUrl;
+      if (this.imageUrl) {
+        this.addRefundForm.annexPath = this.imageUrl;
+      }
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
+    chooseClick(idList) {
+      this.getDetail(idList);
+    },
+    //创建退款单
+    submit() {
+      if (this.multipleSelection.some(it => it.matchStatus == "unmatch")) {
+        this.$message.error("已签收退货状态匹配错误，请匹配成功后重试!");
+        return false;
+      }
+
+      var flag = false;
+      var str = "";
+      if (this.addressInfo.length != 1) {
+        this.$message.error("请确保地址信息为1!");
+        return false;
+      }
+      //验证 ormorder refundType
+      if (!this.listQuery.ormorder && !this.listQuery.shopify) {
+        str = str + "网店单号shopify单号不能同时为空。";
+        flag = true;
+      }
+      if (this.queryRefundType != this.listQuery.refundType) {
+        str = str + "退款类型不匹配。";
+        flag = true;
+      }
+      if (
+        this.listQuery.ormorder &&
+        this.listQuery.ormorder != this.queryOrmorder
+      ) {
+        str = str + "网店单号不匹配";
+        flag = true;
+      }
+      if (
+        this.listQuery.shopify &&
+        this.listQuery.shopify != this.queryShopify
+      ) {
+        str = str + "shopify单号不匹配";
+        flag = true;
+      }
+      if (flag) {
+        this.$message.error(str + ",请点击查询后继续此操作");
+        return false;
+      }
+
+      //验证通过 保存逻辑
+      this.addRefundForm.ormorder = this.queryOrmorder;
+      this.addRefundForm.refundType = this.queryRefundType;
+      //退货退款仓库验证
+      if (
+        this.addRefundForm.refundType == 3 &&
+        !this.addRefundForm.warehouseCode
+      ) {
+        this.$message.error("请选择收退货仓库!");
+        return false;
+      }
+
+      if (this.multipleSelection.length == 0) {
+        this.$message.error("请选择要退的货品!");
+        return false;
+      }
+
+      var items = [];
+      this.btnLoading = true;
+      this.$confirm(
+        "退款总计：" + this.addRefundForm.refundTotalAmount + "，是否确认?",
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      )
+        .then(async () => {
+          for (let ind in this.multipleSelection) {
+            var obj = this.multipleSelection[ind];
+            if (!obj.refundReason) {
+              this.$alert(obj.ordersId + ":请选择退款原因");
+              this.btnLoading = false;
+              return;
+            }
+            var newobj = {
+              productName: obj.productName,
+              quantity: obj.quantity,
+              orderitemId: obj.orderitemId,
+              skuCode: obj.skuCode,
+              refundAmount: obj.refundAmount,
+              refundReason: obj.refundReason,
+              otherReason: obj.otherReason,
+              soOrdersId: obj.ordersId,
+              isGift: obj.isGift,
+              isPromotion: obj.isPromotion
+            };
+            items.push(newobj);
+          }
+          this.addRefundForm.items = items;
+          //这里默认客服发起
+          this.addRefundForm.originatorFlag = 1;
+          console.log(this.addRefundForm, "newobj");
+          const saveRefund = () => {
+            saveRefundNew(this.addRefundForm).then(
+              res => {
+                if (200 == res.code) {
+                  this.$message({
+                    message: this.$t("optSuccess"),
+                    type: "success"
+                  });
+                  items = [];
+                  this.btnStyle = "display:none";
+                }
+              },
+              error => {
+                this.btnLoading = false;
+              }
+            );
+          };
+          const validPromotion = async () => {
+            // 校验是否包含促销赠品，不包含直接返回true
+            if (
+              !this.tableOrderDeatils.some(
+                item => item.isGift === "1" && item.isPromotion === 1
+              )
+            ) {
+              return true;
+            }
+            // TODO 解开注释请求校验
+            // 校验是否满足促销条件 满足返回true(不提示)
+            const { code, data } = await validPromotionReq(this.addRefundForm);
+            if (code === 200) {
+              return data.valid;
+            }
+            return false;
+          };
+          // TODO 存在赠品的订单，在客服创建未发货退款售后单时，需判断扣除已退款明细之后是否还满足促销条件，若不满足，需弹窗提示客服，由客服判断是否继续执行退款。
+          if (await validPromotion()) {
+            saveRefund();
+          } else {
+            const res = await this.$confirm(
+              "退款后订单将不满足促销条件，是否确认?",
+              "提示",
+              {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+              }
+            );
+            if (res === "confirm") {
+              saveRefund();
+            }
+          }
+        })
+        .catch(() => {
+          this.btnLoading = false;
+          this.$message({
+            type: "info",
+            message: "已取消操作"
+          });
+        });
+    },
+    //TODO 暂时关闭SL
+    ShippingLabelOption() {
+      this.addRefundForm.slUseable = "0";
+
+      if (
+        this.listQuery.refundType == 3 &&
+        this.queryRefundType == 3 &&
+        this.addressInfo &&
+        this.addressInfo.length > 0 &&
+        this.addressInfo[0].receiverCountryCode == "US" &&
+        (this.addRefundForm.warehouseCode == "PSJ-H0000024" ||
+          this.addRefundForm.warehouseCode == "PSJ-H0000019" ||
+          this.addRefundForm.warehouseCode == "PSJ-H0000011" ||
+          this.addRefundForm.warehouseCode == "PSJ-G001001" ||
+          this.addRefundForm.warehouseCode == "PSJ-G001003" ||
+          this.addRefundForm.warehouseCode == "PSJ-G001004")
+      ) {
+        this.addRefundForm.slUseable = "1";
+      } else {
+        this.addRefundForm.slUseable = "0";
+      }
+    },
+    changeSlradio() {
+      if (this.addRefundForm.slUseable == "0") {
+        this.addRefundForm.shipmodeId = "";
+        this.addRefundForm.shippingNo = "";
+      }
+    },
+    //查询条件等发生变化时触发的方法
+    validateParams() {
+      //如果退款类型，单号都有
+      if (
+        (this.listQuery.ormorder || this.listQuery.shopify) &&
+        this.listQuery.refundType
+      ) {
+        //直接触发一次重新查询
+        this.getDetail();
+      } else {
+        //参数不完整的情况，清空之前的选项 初始化数据
+        this.ShippingLabelOption();
+        //初始化数据
+        this.addRefundForm.refundAmount = 0.0;
+        this.addRefundForm.refundPostage = "0";
+        this.addRefundForm.refundPostageAmount = 0.0;
+        this.addRefundForm.warehouseCode = "";
+        this.addRefundForm.annexPath = "";
+        this.addRefundForm.items = [];
+        this.addRefundForm.oldQuantity = 0.0;
+        this.addRefundForm.refundTaxAble = "0"; //是否退税
+        this.addRefundForm.refundTaxAmount = 0.0; //退税金额
+        this.addRefundForm.refundTotalAmount = 0.0;
+        this.addRefundForm.shipmodeId = "";
+        this.addRefundForm.shippingNo = "";
+        this.addRefundForm.refundMethod = "system";
+        this.addRefundForm.refundAccountType = "PayPal";
+        this.addRefundForm.refundAccount = "";
+        this.addRefundForm.notes = "";
+        this.addressInfo = [];
+        this.listQuery.idList = null;
+        this.reasonListAll = [];
+        this.refundReasonAss = "";
+        this.refundOtherReasonAss = "";
+        this.otherReasonFlag = "";
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.head {
+  padding: 0 20px;
+  height: 25px;
+  box-shadow: 0px 7px 6px -6px #f8eeee;
+  display: flex;
+  justify-content: space-between;
+  span:nth-child(1) {
+    font-size: 15px;
+    line-height: 25px;
+    color: #909399;
+    font-weight: 600;
+  }
+  span:nth-child(2) {
+    line-height: 25px;
+    cursor: pointer;
+    color: #ae8878;
+    font-size: 13px;
+  }
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+
+.main {
+  margin-top: 15px;
+  .box {
+    text-align: center;
+    position: relative;
+    .box_item {
+      padding: 0 20px;
+      display: flex;
+      .item_title {
+        line-height: 40px;
+        font-size: 18px;
+        text-align: left;
+        font-weight: 600;
+      }
+      .item_list {
+        text-align: left;
+        font-size: 14px;
+        color: #606266;
+        display: flex;
+        p {
+          margin: 10px 0;
+        }
+        div:nth-child(2) {
+          margin-left: 30px;
+        }
+      }
+    }
+    .item_title {
+      padding-left: 20px;
+      line-height: 40px;
+      font-size: 18px;
+      text-align: left;
+      font-weight: 600;
+    }
+  }
+}
+
+.ptitle {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px;
+  color: #1f2d3d;
+  text-align: left;
+  font-weight: bold;
+}
+
+.container {
+  display: flex; /* 使用 Flexbox 布局 */
+  justify-content: space-between; /* 将盒子平均分布在容器中 */
+}
+</style>

src/views/oms/refund/components/createRefundDialog.vue

@@ -530,7 +530,7 @@
                   <div v-else>
                     <el-input-number
                       v-model="scope.row.refundSales"
-                      @change="changeQuantity(scope.row)"
+                      @change="changePercentage(scope.row)"
                       size="mini"
                       :min="0"
                       :max="1"
@@ -810,8 +810,6 @@ import {
 import { BigNumber } from "bignumber.js";
 import tableEdit from "./tableEdit";
 import i18n from "@/lang";
-import data2blob from "@/components/ImageCropper/utils/data2blob";
-import { dataURItoBlob } from "dropzone";
 
 export default {
   name: "createRefundDialog",
@@ -1280,6 +1278,17 @@ export default {
         }
       }
     },
+    changePercentage(row) {
+      //当前行的退款金额
+      row.refundAmount = BigNumber(row.originRefundAmount)
+        .div(BigNumber(row.quantity))
+        .multipliedBy(BigNumber(row.newQuantity))
+        .multipliedBy(BigNumber(row.refundSales))
+        .toNumber()
+        .toFixed(2);
+      this.jisuan();
+    },
+
     changeQuantity() {
       this.reCalReturn();
     },

src/views/oms/refund/components/orderRefundDialog copy.vue

@@ -0,0 +1,816 @@
+<template>
+  <div v-loading.fullscreen.lock="detailLoading">
+    <div class="head">
+      <!--		<span>销售单详情</span>
+ 			<span>返回</span>
+ -->
+    </div>
+    <div class="main">
+      <!-- <div class="box" style="margin-top: 15px;">
+				<div class="item_title">
+					<span>基本信息</span>
+				</div>
+				<div class="ptitle">
+					<baseInfoTab :orderInfo="orderInfo"></baseInfoTab>
+				</div>
+			</div> -->
+
+      <div class="box" style="margin-top: 15px;">
+        <div class="item_title">
+          <span>{{ $t("view.shippingInfo") }}</span>
+        </div>
+        <div class="ptitle">
+          <!-- <receivingInfoTab :addressInfo="addressInfo" :orderInfo="orderInfo"></receivingInfoTab> -->
+          <el-descriptions
+            class="margin-top"
+            :title="$t('title.addressInfo')"
+            :column="4"
+            direction="horizontal"
+          >
+            <el-descriptions-item :label="$t('country')">{{
+              addressInfo.receiverCountryCode
+            }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('label.postalCode')">{{
+              addressInfo.receiverZip
+            }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('state')">{{
+              addressInfo.receiverState
+            }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('city')">{{
+              addressInfo.receiverCity
+            }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('suburb')">{{
+              addressInfo.receiverDistrict
+            }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('street')">{{
+              addressInfo.receiverStreet
+            }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('address')">{{
+              addressInfo.receiverAddress
+            }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('dooeNo')">{{
+              addressInfo.receiverAddress2
+            }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('recipient')">{{
+              addressInfo.receiverName
+            }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('telephone')">{{
+              addressInfo.receiverPhone
+            }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('moPhone')">{{
+              addressInfo.receiverMobile
+            }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('post')">{{
+              addressInfo.email
+            }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('label.shippingFee')">{{
+              addressInfo.freight
+            }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </div>
+
+      <div
+        class="box"
+        style="margin-top: 15px;padding-bottom: 10px;"
+        v-if="invoiceInfo != null"
+      >
+        <div class="item_title">
+          <span>{{ $t("view.invoiceDetails") }}</span>
+        </div>
+        <div class="ptitle">
+          <invoiceInfoTab :invoiceInfo="invoiceInfo"></invoiceInfoTab>
+        </div>
+      </div>
+
+      <div
+        class="box"
+        style="margin-top: 15px;padding-bottom: 10px;"
+        v-loading="fromLoading"
+      >
+        <div class="item_title">
+          <span>{{ $t("view.refundInfo") }}</span>
+        </div>
+        <div class="ptitle">
+          <el-form
+            ref="addRefundForm"
+            :model="addRefundForm"
+            label-width="auto"
+          >
+            <el-form-item :label="$t('currency')">
+              <el-input
+                disabled
+                v-model="addRefundForm.currency"
+                placeholder
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('label.afterSalesType')" required>
+              <el-select
+                :disabled="editIs"
+                :placeholder="$t('place.pleaseSelect')"
+                clearable
+                style="width: 200px;"
+                class="filter-item"
+                v-model="addRefundForm.refundType"
+              >
+                <el-option
+                  v-for="afterSaleType in afterSaleTypes"
+                  disabled
+                  :key="afterSaleType.value"
+                  :label="$t(afterSaleType.label)"
+                  :value="afterSaleType.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('label.expectedRefundAmount')" required>
+              <el-input
+                v-model="addRefundForm.refundTotalAmount"
+                :disabled="true"
+              />
+            </el-form-item>
+            <el-form-item :label="$t('label.refundMethod')" required>
+              <!-- <el-input  v-model="addRefundForm.refundMethod" :placeholder="$t('place.pleaseFillIn')" class="normal-input"></el-input> -->
+              <el-radio-group v-model="addRefundForm.refundMethod">
+                <el-radio label="system">{{
+                  $t("view.systemRefund")
+                }}</el-radio>
+                <el-radio label="manual">{{
+                  $t("view.manualRefund")
+                }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="addRefundForm.refundMethod == 'manual'"
+              :label="$t('label.accountType')"
+              required=""
+            >
+              <el-radio-group v-model="addRefundForm.refundAccountType">
+                <el-radio label="PayPal">PayPal</el-radio>
+                <!-- 银行卡暂时隐藏 -->
+                <!-- <el-radio label="bankCard">银行卡</el-radio> -->
+                <!-- <el-radio label="Gift Card">Gift Card</el-radio> -->
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              :label="$t('label.receivingAccount')"
+              v-if="
+                addRefundForm.refundMethod == 'manual' &&
+                  addRefundForm.refundAccountType == 'PayPal'
+              "
+              required
+            >
+              <el-input
+                v-model="addRefundForm.refundAccount"
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <!-- 选择是否退税-->
+            <el-form-item
+              v-if="addRefundForm.refundType"
+              :label="$t('label.taxRefund')"
+            >
+              <el-radio-group
+                v-model="addRefundForm.refundTaxAble"
+                @change="calculateRefundAmount"
+              >
+                <el-radio label="0">{{ $t("view.noTaxRefund") }}</el-radio>
+                <el-radio label="1">{{ $t("view.taxRefund") }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="addRefundForm.refundTaxAble == 1"
+              :label="$t('label.taxRefundAmount')"
+            >
+              <el-input-number
+                v-model="addRefundForm.refundTaxAmount"
+                :min="0.0"
+                :step="0.01"
+                step-strictly
+                @change="calculateRefundAmount"
+              ></el-input-number>
+            </el-form-item>
+            <!-- 选择是否退运费-->
+            <el-form-item
+              v-if="addRefundForm.refundType"
+              :label="$t('label.shippingFee')"
+            >
+              <el-radio-group
+                v-model="addRefundForm.refundPostage"
+                @change="calculateRefundAmount"
+              >
+                <el-radio label="0">{{ $t("view.noRefund") }}</el-radio>
+                <el-radio label="1">{{
+                  $t("view.refundShippingFee")
+                }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="addRefundForm.refundPostage == 1"
+              :label="$t('label.returnShippingFeeAmount')"
+            >
+              <el-input-number
+                v-model="addRefundForm.refundPostageAmount"
+                :min="0.0"
+                :step="0.01"
+                step-strictly
+                @change="calculateRefundAmount"
+              ></el-input-number>
+            </el-form-item>
+            <el-form-item
+              v-if="addRefundForm.refundType == 3"
+              :label="$t('label.receivingReturnWarehouse')"
+            >
+              <el-select
+                :placeholder="$t('place.pleaseSelect')"
+                clearable
+                style="width: 200px;"
+                class="filter-item"
+                v-model="addRefundForm.warehouseCode"
+                @change="ShippingLabelOption"
+              >
+                <el-option
+                  v-for="item in warehouseItems"
+                  :key="item.key"
+                  :label="item.key"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- TODO 暂时关闭SL -->
+            <el-form-item
+              v-if="addRefundForm.warehouseCode"
+              label="ShippingLabel" hidden
+            >
+              <el-radio-group v-model="addRefundForm.slUseable">
+                <el-radio label="0" value="0">{{
+                  $t("view.notEnabled")
+                }}</el-radio>
+                <el-radio label="1" value="1">{{
+                  $t("view.enabled")
+                }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <el-form-item
+              v-if="
+                addRefundForm.refundType == 3 && addRefundForm.slUseable == '1'
+              "
+              :label="$t('label.returnLogisticsCompanyCode')"
+            >
+              <el-input
+                v-model="addRefundForm.shipmodeId"
+                disabled
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                addRefundForm.refundType == 3 && addRefundForm.slUseable == '1'
+              "
+              :label="$t('label.returnLogisticsNumber')"
+            >
+              <el-input
+                v-model="addRefundForm.shippingNo"
+                disabled
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+
+            <el-form-item
+              v-if="
+                addRefundForm.refundType == 3 && addRefundForm.slUseable == '0'
+              "
+              :label="$t('label.returnLogisticsCompanyCode')"
+            >
+              <el-input
+                v-model="addRefundForm.shipmodeId"
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                addRefundForm.refundType == 3 && addRefundForm.slUseable == '0'
+              "
+              :label="$t('label.returnLogisticsNumber')"
+            >
+              <el-input
+                v-model="addRefundForm.shippingNo"
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <!-- <el-form-item v-if="addRefundForm.refundType==1" clearable :label="$t('label.refundReason')">
+              <el-select  :placeholder="$t('place.pleaseSelect')" clearable v-model="addRefundForm.refundReason" class="filter-item"  @change="refundChange(allReason,addRefundForm.refundReason)">
+                <el-option v-for="status in allReason"
+                           v-if="status.reasonType=='1'"
+                           :key="status.id"
+                           :label="status.reasonContentChinese"
+                           :value="status.id">
+                </el-option>
+              </el-select>
+            </el-form-item> -->
+            <!-- <el-form-item v-if="addRefundForm.refundType==2" clearable :label="$t('label.refundReason')" >
+              <el-select  :placeholder="$t('place.pleaseSelect')" clearable v-model="addRefundForm.refundReason" class="filter-item"  @change="refundChange(allReason,addRefundForm.refundReason)">
+                <el-option v-for="status in allReason"
+                           v-if="status.reasonType=='2'"
+                           :key="status.id"
+                           :label="status.reasonContentChinese"
+                           :value="status.id">
+                </el-option>
+              </el-select>
+            </el-form-item> -->
+            <!-- <el-form-item v-if="addRefundForm.refundType==3" clearable :label="$t('label.refundReason')">
+              <el-select  :placeholder="$t('place.pleaseSelect')" clearable v-model="addRefundForm.refundReason" class="filter-item" @change="refundChange(allReason,addRefundForm.refundReason)">
+                <el-option v-for="status in allReason"
+                           v-if="status.reasonType=='3'"
+                           :key="status.id"
+                           :label="status.reasonContentChinese"
+                           :value="status.id">
+                </el-option>
+              </el-select>
+            </el-form-item> -->
+            <!-- <el-form-item v-if="customOpen=='1'" :label="$t('label.reasonExplanation')">
+              <el-input type="textarea" :placeholder="$t('place.enterReason')" v-model="addRefundForm.otherReason" style="width: 200px;" :rows="3"></el-input>
+            </el-form-item> -->
+
+            <el-form-item :label="$t('label.afterSalesInstructions')">
+              <el-input
+                type="textarea"
+                :placeholder="$t('place.enterContent')"
+                v-model="addRefundForm.notes"
+                maxlength="150"
+                show-word-limit
+              >
+              </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('label.uploadVoucher')">
+              <el-upload
+                class="avatar-uploader"
+                :action="uploadPhotos"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload"
+                :headers="headers"
+              >
+                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+
+      <div class="box" style="margin-top: 15px;" v-if="refundType">
+        <div class="item_title">
+          <span>{{ $t("view.selectItems") }}</span>
+        </div>
+        <div class="ptitle">
+          <!-- <orderRefundItemListTab v-if="refundType" :addRefundForm="addRefundForm" :refundType="addRefundForm.refundType" :orderDeatils="orderDeatils" :orderInfo="orderInfo"></orderRefundItemListTab> -->
+          <orderRefundItemListTab
+            v-if="refundType"
+            :addRefundForm="addRefundForm"
+            :refundType="addRefundForm.refundType"
+          ></orderRefundItemListTab>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getById,
+  queryOrderDetails,
+  getAllReason
+} from "@/api/oms/order/order";
+import { queryByOrdersId as getAddress } from "@/api/oms/order/address";
+import { getById as getInvoice } from "@/api/oms/order/invoice";
+import global from "@/views/oms/global";
+import baseInfoTab from "@/views/oms/order/components/baseInfoTab";
+import invoiceInfoTab from "@/views/oms/order/components/invoiceInfoTab";
+import optLogTab from "@/views/oms/order/components/optLogTab";
+import orderRefundItemListTab from "./orderRefundItemListTab";
+import receivingInfoTab from "@/views/oms/order/components/receivingInfoTab";
+import {
+  warehouseList,
+  getRefundInfo,
+  getDetailListByRefundId
+} from "@/api/oms/refund/refund";
+import { getToken } from "@/utils/auth";
+import { dcmAdd, dcmSub, accDiv, accMul } from "@/utils/toolUtil";
+import { BigNumber } from "bignumber.js";
+export default {
+  name: "orderRefundDialog",
+  props: ["refundId"],
+  components: {
+    baseInfoTab,
+    invoiceInfoTab,
+    optLogTab,
+    orderRefundItemListTab,
+    receivingInfoTab
+  },
+  data() {
+    return {
+      orderInfo: {},
+      addressInfo: {},
+      orderDeatils: [],
+      invoiceInfo: null,
+      detailLoading: false,
+      imageUrl: "",
+      allReason: {},
+      customOpen: "",
+      addRefundForm: {
+        refundMethod: "system",
+        refundPostage: "0",
+        refundAmount: 0.0, //商品退款金额
+        refundPostageAmount: 0.0,
+        warehouseCode: "",
+        annexPath: "",
+        items: [],
+        oldQuantity: 0,
+        refundTaxAble: "0", //是否退税
+        refundTaxAmount: 0.0, //退税金额
+        refundTotalAmount: 0.0, //总计退款金额 = 商品退款金额 + 退运费金额 + 退税金额 。 实际执行时，refundAmount=商品退款金额 + 退税金额；退运费金额单独计算
+        refundReason: "", // 退款原因
+        otherReason: "", // 其他退款理由
+        refundAccount: "",
+        refundAccountType: "",
+        ormorder: "",
+        slUseable: "0" //是否开启ShippingLabel选项
+      },
+      afterSaleTypes: "",
+      warehouseItems: [],
+      fromLoading: false,
+      uploadPhotos: process.env.VUE_APP_OMS_API + "ordersRefund/uploadPhotos",
+      editIs: true,
+      refundType: false
+    };
+  },
+  created() {
+    // if(!this.refundId) {
+    // 	this.editIs = false;
+    // }
+    // this.getOrderInfo();
+    //这里只考虑编辑的情况
+    this.getDetailListByRefundId(this.refundId);
+  },
+  computed: {
+    // 计算属性的 getter
+    headers: function() {
+      return {
+        "X-Token": getToken()
+      };
+    }
+  },
+  methods: {
+    //计算退款总额 商品退款金额 + 退运费金额 +退税金额
+    calculateRefundAmount() {
+      //如果没选择退税
+      if (this.addRefundForm.refundTaxAble != "1") {
+        this.addRefundForm.refundTaxAmount = BigNumber(0)
+          .toNumber()
+          .toFixed(2);
+      }
+      //如果没选择退运费
+      if (this.addRefundForm.refundPostage != "1") {
+        this.addRefundForm.refundPostageAmount = BigNumber(0)
+          .toNumber()
+          .toFixed(2);
+      }
+
+      var taxAndShippingAmount = BigNumber(this.addRefundForm.refundTaxAmount)
+        .plus(BigNumber(this.addRefundForm.refundPostageAmount))
+        .toNumber()
+        .toFixed(2);
+      console.log(taxAndShippingAmount, this.addRefundForm.refundAmount);
+      this.addRefundForm.refundTotalAmount = BigNumber(taxAndShippingAmount)
+        .plus(BigNumber(this.addRefundForm.refundAmount))
+        .toNumber()
+        .toFixed(2);
+    },
+    getDetailListByRefundId(refundId) {
+      //初始化数据
+      this.addRefundForm.refundAmount = 0.0;
+      this.addRefundForm.refundPostage = "0";
+      this.addRefundForm.refundPostageAmount = 0.0;
+      this.addRefundForm.warehouseCode = "";
+      this.addRefundForm.annexPath = "";
+      this.addRefundForm.items = [];
+      this.addRefundForm.oldQuantity = 0.0;
+      this.addRefundForm.refundTaxAble = "0"; //是否退税
+      this.addRefundForm.refundTaxAmount = 0.0; //退税金额
+      this.addRefundForm.refundTotalAmount = 0.0;
+      this.addRefundForm.shipmodeId = "";
+      this.addRefundForm.shippingNo = "";
+      this.addRefundForm.refundMethod = "system";
+      this.addRefundForm.refundAccountType = "PayPal";
+      this.addRefundForm.refundAccount = "";
+      this.addRefundForm.notes = "";
+      this.addressInfo = [];
+      this.reasonListAll = [];
+      this.refundReasonAss = "";
+      this.refundOtherReasonAss = "";
+      this.otherReasonFlag = "";
+      //查询该退款单的数据
+      this.detailLoading = true;
+      let _this = this;
+      getDetailListByRefundId(refundId).then(res => {
+        if (200 == res.code) {
+          this.addRefundForm = res.data;
+          this.addressInfo = res.data.address;
+          this.afterSaleTypes = global.afterSaleType; //售后类型
+          //循环订单项信息
+          let refundGoodsAmount = BigNumber(0);
+          if (this.addRefundForm.items) {
+            for (let ind in this.addRefundForm.items) {
+              refundGoodsAmount = refundGoodsAmount.plus(
+                BigNumber(this.addRefundForm.items[ind].refundAmount)
+              );
+            }
+          }
+          _this.$set(
+            this.addRefundForm,
+            "refundAmount",
+            BigNumber(refundGoodsAmount.toFixed(2))
+          ); //this.addRefundForm.refundAmount= refundGoodsAmount.toFixed(2);
+          //原单的退税金额 = 原单的退款总金额 - 退商品金额 - 退运费金额
+          let oldRefundTaxAmount = BigNumber(
+            this.addRefundForm.refundTotalAmount
+          )
+            .plus(BigNumber(-this.addRefundForm.refundPostageAmount))
+            .plus(BigNumber(-this.addRefundForm.refundAmount))
+            .toFixed(2);
+
+          if (oldRefundTaxAmount > 0) {
+            _this.$set(this.addRefundForm, "refundTaxAble", "1"); //是否退税
+          } else {
+            oldRefundTaxAmount = 0;
+            _this.$set(this.addRefundForm, "refundTaxAble", "0"); //是否退税
+          }
+          _this.$set(this.addRefundForm, "refundTaxAmount", oldRefundTaxAmount); //是否退税 this.addRefundForm.refundTaxAmount=oldRefundTaxAmount;
+          this.refundType = true;
+
+          this.detailLoading = false;
+
+          //退货退款场景
+          if (this.addRefundForm.refundType == 3) {
+            warehouseList().then(res => {
+              if (200 == res.code) {
+                this.warehouseItems = res.data;
+              }
+            });
+          }
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    handleAvatarSuccess(res, file) {
+      console.log("图片上传结果", res);
+      this.imageUrl = res.accessUrl;
+      if (this.imageUrl) {
+        this.addRefundForm.annexPath = this.imageUrl;
+      }
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG) {
+        this.$message.error("上传图片只能是 JPG 格式或者PNG格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
+
+    refundChange(arr, id) {
+      console.log(arr, id);
+      arr.forEach(item => {
+        if (item.id == id) {
+          this.customOpen = item.custom;
+        }
+      });
+    },
+    // changeRefund() {
+    // 	this.fromLoading = true;
+    // 	this.refundType=false;
+    // 	this.orderDeatils = [];
+    // 	this.addRefundForm.refundAmount = 0.00;
+    // 	this.addRefundForm.refundPostage = '0';
+    // 	this.addRefundForm.refundPostageAmount = 0.00;
+    // 	this.addRefundForm.refundTaxAble='0';//是否退税
+    // 	this.addRefundForm.refundTaxAmount=0.00;//退税金额
+    // 	this.addRefundForm.refundTotalAmount=0.00; //总计退款金额 = 退款金额 + 退运费金额 + 退税金额 。 实际执行时，refundAmount=商品退款金额 + 退税金额；退运费金额单独计算
+    // 	this.addRefundForm.warehouseCode = '';
+    // 	this.addRefundForm.annexPath = '';
+    // 	this.addRefundForm.items = [];
+    // 	this.addRefundForm.oldQuantity = 0;
+    // 	this.warehouseItems = [];
+    // 	this.addRefundForm.refundReason='';
+    // 	this.addRefundForm.otherReason='';
+    // 	//退货退款场景
+    // 	if(this.addRefundForm.refundType == 3) {
+    // 		warehouseList().then(res => {
+    // 			if(200 == res.code) {
+    // 				this.warehouseItems = res.data;
+    // 			}
+    // 		})
+    // 	}
+    // queryOrderDetails(this.orderInfo.ordersId).then(res => {
+    // 		if(200 == res.code) {
+
+    // 			this.orderDeatils = res.data;
+    // 			if(this.orderDeatils) {
+    // 				for(let ind in this.orderDeatils) {
+    // 					this.orderDeatils[ind].oldQuantity = this.orderDeatils[ind].quantity;
+    //     if(this.addRefundForm.refundType==1){
+    //       this.orderDeatils[ind].quantity=0;
+    //     }
+    // 					var fee=this.orderDeatils[ind].totalFee;
+    // 					if(fee==null||fee==""){
+    // 						fee=0.00;
+    // 					}
+    // 					this.$set(this.orderDeatils[ind], "refundAmount", fee)
+    // 					if(this.orderDeatils[ind].refundQuantity == null) {
+    // 						this.orderDeatils[ind].refundQuantity = 0;
+    // 					}
+    // 				}
+    // 				this.refundType=true;
+    // 			}
+
+    // 		}
+    // 		this.fromLoading = false;
+    // 		console.log("this.orderDeatils",this.orderDeatils)
+    // 	})
+
+    // },
+    ShippingLabelOption() {
+      // if (
+      //   this.addRefundForm.refundType == 3 &&
+      //   this.addressInfo.receiverCountryCode == "US" &&
+      //     this.addRefundForm.warehouseCode == "USNY-C1"
+      // ) {
+      //   this.addRefundForm.slUseable = "1";
+      // } else {
+      //   this.addRefundForm.slUseable = "0";
+      // }
+      //暂时关闭SL
+      this.addRefundForm.slUseable = "0";
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.head {
+  padding: 0 20px;
+  height: 25px;
+  box-shadow: 0px 7px 6px -6px #f8eeee;
+  display: flex;
+  justify-content: space-between;
+  span:nth-child(1) {
+    font-size: 15px;
+    line-height: 25px;
+    color: #909399;
+    font-weight: 600;
+  }
+  span:nth-child(2) {
+    line-height: 25px;
+    cursor: pointer;
+    color: #ae8878;
+    font-size: 13px;
+  }
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+
+.big_box {
+  min-width: 650px;
+  border: 1px solid #e4e7ed;
+  border-bottom: none;
+}
+
+.big_box div {
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+}
+
+.big_box p {
+  margin: 0;
+  height: 30px;
+  line-height: 30px;
+  font-size: 13px;
+  font-weight: bold;
+  border-right: 1px solid #e4e7ed;
+  padding: 0 5px;
+  text-align: center;
+  color: #909399;
+  min-width: 100px;
+}
+
+.w {
+  font-weight: 500 !important;
+  color: #606266 !important;
+  text-align: left !important;
+  padding-left: 20px !important;
+}
+
+.main {
+  margin-top: 15px;
+  .box {
+    text-align: center;
+    position: relative;
+    .box_item {
+      padding: 0 20px;
+      display: flex;
+      .item_title {
+        line-height: 40px;
+        font-size: 18px;
+        text-align: left;
+        font-weight: 600;
+      }
+      .item_list {
+        text-align: left;
+        font-size: 14px;
+        color: #606266;
+        display: flex;
+        p {
+          margin: 10px 0;
+        }
+        div:nth-child(2) {
+          margin-left: 30px;
+        }
+      }
+    }
+    .item_title {
+      padding-left: 20px;
+      line-height: 40px;
+      font-size: 18px;
+      text-align: left;
+      font-weight: 600;
+    }
+  }
+}
+
+.ptitle {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px;
+  color: #1f2d3d;
+  text-align: left;
+  font-weight: bold;
+}
+
+.pcode {
+  color: #8f5842;
+  font-weight: 500;
+}
+
+.demo-table-expand {
+  font-size: 0;
+}
+
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+</style>

src/views/oms/refund/components/orderRefundDialog.vue

@@ -1,10 +1,5 @@
 <template>
   <div v-loading.fullscreen.lock="detailLoading">
-    <div class="head">
-      <!--		<span>销售单详情</span>
- 			<span>返回</span>
- -->
-    </div>
     <div class="main">
       <!-- <div class="box" style="margin-top: 15px;">
 				<div class="item_title">
@@ -95,273 +90,260 @@
           <el-form
             ref="addRefundForm"
             :model="addRefundForm"
-            label-width="auto"
+            label-position="left"
           >
-            <el-form-item :label="$t('currency')">
-              <el-input
-                disabled
-                v-model="addRefundForm.currency"
-                placeholder
-                class="normal-input"
-              ></el-input>
-            </el-form-item>
-            <el-form-item :label="$t('label.afterSalesType')" required>
-              <el-select
-                :disabled="editIs"
-                :placeholder="$t('place.pleaseSelect')"
-                clearable
-                style="width: 200px;"
-                class="filter-item"
-                v-model="addRefundForm.refundType"
-              >
-                <el-option
-                  v-for="afterSaleType in afterSaleTypes"
-                  disabled
-                  :key="afterSaleType.value"
-                  :label="$t(afterSaleType.label)"
-                  :value="afterSaleType.value"
+            <div class="row">
+              <div class="row-item">
+                <div class="row">
+                  <el-form-item :label="$t('currency')">
+                    <el-input
+                      disabled
+                      v-model="addRefundForm.currency"
+                      placeholder
+                      class="normal-input"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item
+                    class="marginleft"
+                    :label="$t('label.afterSalesType')"
+                    required
+                  >
+                    <el-select
+                      :disabled="editIs"
+                      :placeholder="$t('place.pleaseSelect')"
+                      clearable
+                      style="width: 200px;"
+                      class="filter-item"
+                      v-model="addRefundForm.refundType"
+                    >
+                      <el-option
+                        v-for="afterSaleType in afterSaleTypes"
+                        disabled
+                        :key="afterSaleType.value"
+                        :label="$t(afterSaleType.label)"
+                        :value="afterSaleType.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item
+                    :label="$t('label.expectedRefundAmount')"
+                    required
+                  >
+                    <el-input
+                      v-model="addRefundForm.refundTotalAmount"
+                      :disabled="true"
+                    />
+                  </el-form-item>
+                </div>
+                <el-form-item :label="$t('label.refundMethod')" required>
+                  <el-radio-group v-model="addRefundForm.refundMethod">
+                    <el-radio label="system">{{
+                      $t("view.systemRefund")
+                    }}</el-radio>
+                    <el-radio label="manual">{{
+                      $t("view.manualRefund")
+                    }}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="addRefundForm.refundMethod == 'manual'"
+                  :label="$t('label.accountType')"
+                  required=""
                 >
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('label.expectedRefundAmount')" required>
-              <el-input
-                v-model="addRefundForm.refundTotalAmount"
-                :disabled="true"
-              />
-            </el-form-item>
-            <el-form-item :label="$t('label.refundMethod')" required>
-              <!-- <el-input  v-model="addRefundForm.refundMethod" :placeholder="$t('place.pleaseFillIn')" class="normal-input"></el-input> -->
-              <el-radio-group v-model="addRefundForm.refundMethod">
-                <el-radio label="system">{{
-                  $t("view.systemRefund")
-                }}</el-radio>
-                <el-radio label="manual">{{
-                  $t("view.manualRefund")
-                }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item
-              v-if="addRefundForm.refundMethod == 'manual'"
-              :label="$t('label.accountType')"
-              required=""
-            >
-              <el-radio-group v-model="addRefundForm.refundAccountType">
-                <el-radio label="PayPal">PayPal</el-radio>
-                <!-- 银行卡暂时隐藏 -->
-                <!-- <el-radio label="bankCard">银行卡</el-radio> -->
-                <!-- <el-radio label="Gift Card">Gift Card</el-radio> -->
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item
-              :label="$t('label.receivingAccount')"
-              v-if="
-                addRefundForm.refundMethod == 'manual' &&
-                  addRefundForm.refundAccountType == 'PayPal'
-              "
-              required
-            >
-              <el-input
-                v-model="addRefundForm.refundAccount"
-                :placeholder="$t('place.pleaseFillIn')"
-                class="normal-input"
-              ></el-input>
-            </el-form-item>
-            <!-- 选择是否退税-->
-            <el-form-item
-              v-if="addRefundForm.refundType"
-              :label="$t('label.taxRefund')"
-            >
-              <el-radio-group
-                v-model="addRefundForm.refundTaxAble"
-                @change="calculateRefundAmount"
-              >
-                <el-radio label="0">{{ $t("view.noTaxRefund") }}</el-radio>
-                <el-radio label="1">{{ $t("view.taxRefund") }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item
-              v-if="addRefundForm.refundTaxAble == 1"
-              :label="$t('label.taxRefundAmount')"
-            >
-              <el-input-number
-                v-model="addRefundForm.refundTaxAmount"
-                :min="0.0"
-                :step="0.01"
-                step-strictly
-                @change="calculateRefundAmount"
-              ></el-input-number>
-            </el-form-item>
-            <!-- 选择是否退运费-->
-            <el-form-item
-              v-if="addRefundForm.refundType"
-              :label="$t('label.shippingFee')"
-            >
-              <el-radio-group
-                v-model="addRefundForm.refundPostage"
-                @change="calculateRefundAmount"
-              >
-                <el-radio label="0">{{ $t("view.noRefund") }}</el-radio>
-                <el-radio label="1">{{
-                  $t("view.refundShippingFee")
-                }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item
-              v-if="addRefundForm.refundPostage == 1"
-              :label="$t('label.returnShippingFeeAmount')"
-            >
-              <el-input-number
-                v-model="addRefundForm.refundPostageAmount"
-                :min="0.0"
-                :step="0.01"
-                step-strictly
-                @change="calculateRefundAmount"
-              ></el-input-number>
-            </el-form-item>
-            <el-form-item
-              v-if="addRefundForm.refundType == 3"
-              :label="$t('label.receivingReturnWarehouse')"
-            >
-              <el-select
-                :placeholder="$t('place.pleaseSelect')"
-                clearable
-                style="width: 200px;"
-                class="filter-item"
-                v-model="addRefundForm.warehouseCode"
-                @change="ShippingLabelOption"
-              >
-                <el-option
-                  v-for="item in warehouseItems"
-                  :key="item.key"
-                  :label="item.key"
-                  :value="item.value"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-            <!-- TODO 暂时关闭SL -->
-            <el-form-item
-              v-if="addRefundForm.warehouseCode"
-              label="ShippingLabel" hidden
-            >
-              <el-radio-group v-model="addRefundForm.slUseable">
-                <el-radio label="0" value="0">{{
-                  $t("view.notEnabled")
-                }}</el-radio>
-                <el-radio label="1" value="1">{{
-                  $t("view.enabled")
-                }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-
-            <el-form-item
-              v-if="
-                addRefundForm.refundType == 3 && addRefundForm.slUseable == '1'
-              "
-              :label="$t('label.returnLogisticsCompanyCode')"
-            >
-              <el-input
-                v-model="addRefundForm.shipmodeId"
-                disabled
-                :placeholder="$t('place.pleaseFillIn')"
-                class="normal-input"
-              ></el-input>
-            </el-form-item>
-            <el-form-item
-              v-if="
-                addRefundForm.refundType == 3 && addRefundForm.slUseable == '1'
-              "
-              :label="$t('label.returnLogisticsNumber')"
-            >
-              <el-input
-                v-model="addRefundForm.shippingNo"
-                disabled
-                :placeholder="$t('place.pleaseFillIn')"
-                class="normal-input"
-              ></el-input>
-            </el-form-item>
-
-            <el-form-item
-              v-if="
-                addRefundForm.refundType == 3 && addRefundForm.slUseable == '0'
-              "
-              :label="$t('label.returnLogisticsCompanyCode')"
-            >
-              <el-input
-                v-model="addRefundForm.shipmodeId"
-                :placeholder="$t('place.pleaseFillIn')"
-                class="normal-input"
-              ></el-input>
-            </el-form-item>
-            <el-form-item
-              v-if="
-                addRefundForm.refundType == 3 && addRefundForm.slUseable == '0'
-              "
-              :label="$t('label.returnLogisticsNumber')"
-            >
-              <el-input
-                v-model="addRefundForm.shippingNo"
-                :placeholder="$t('place.pleaseFillIn')"
-                class="normal-input"
-              ></el-input>
-            </el-form-item>
-            <!-- <el-form-item v-if="addRefundForm.refundType==1" clearable :label="$t('label.refundReason')">
-              <el-select  :placeholder="$t('place.pleaseSelect')" clearable v-model="addRefundForm.refundReason" class="filter-item"  @change="refundChange(allReason,addRefundForm.refundReason)">
-                <el-option v-for="status in allReason"
-                           v-if="status.reasonType=='1'"
-                           :key="status.id"
-                           :label="status.reasonContentChinese"
-                           :value="status.id">
-                </el-option>
-              </el-select>
-            </el-form-item> -->
-            <!-- <el-form-item v-if="addRefundForm.refundType==2" clearable :label="$t('label.refundReason')" >
-              <el-select  :placeholder="$t('place.pleaseSelect')" clearable v-model="addRefundForm.refundReason" class="filter-item"  @change="refundChange(allReason,addRefundForm.refundReason)">
-                <el-option v-for="status in allReason"
-                           v-if="status.reasonType=='2'"
-                           :key="status.id"
-                           :label="status.reasonContentChinese"
-                           :value="status.id">
-                </el-option>
-              </el-select>
-            </el-form-item> -->
-            <!-- <el-form-item v-if="addRefundForm.refundType==3" clearable :label="$t('label.refundReason')">
-              <el-select  :placeholder="$t('place.pleaseSelect')" clearable v-model="addRefundForm.refundReason" class="filter-item" @change="refundChange(allReason,addRefundForm.refundReason)">
-                <el-option v-for="status in allReason"
-                           v-if="status.reasonType=='3'"
-                           :key="status.id"
-                           :label="status.reasonContentChinese"
-                           :value="status.id">
-                </el-option>
-              </el-select>
-            </el-form-item> -->
-            <!-- <el-form-item v-if="customOpen=='1'" :label="$t('label.reasonExplanation')">
-              <el-input type="textarea" :placeholder="$t('place.enterReason')" v-model="addRefundForm.otherReason" style="width: 200px;" :rows="3"></el-input>
-            </el-form-item> -->
-
-            <el-form-item :label="$t('label.afterSalesInstructions')">
-              <el-input
-                type="textarea"
-                :placeholder="$t('place.enterContent')"
-                v-model="addRefundForm.notes"
-                maxlength="150"
-                show-word-limit
-              >
-              </el-input>
-            </el-form-item>
-            <el-form-item :label="$t('label.uploadVoucher')">
-              <el-upload
-                class="avatar-uploader"
-                :action="uploadPhotos"
-                :show-file-list="false"
-                :on-success="handleAvatarSuccess"
-                :before-upload="beforeAvatarUpload"
-                :headers="headers"
-              >
-                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-              </el-upload>
-            </el-form-item>
+                  <el-radio-group v-model="addRefundForm.refundAccountType">
+                    <el-radio label="PayPal">PayPal</el-radio>
+                    <!-- 银行卡暂时隐藏 -->
+                    <!-- <el-radio label="bankCard">银行卡</el-radio> -->
+                    <!-- <el-radio label="Gift Card">Gift Card</el-radio> -->
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  :label="$t('label.receivingAccount')"
+                  v-if="
+                    addRefundForm.refundMethod == 'manual' &&
+                      addRefundForm.refundAccountType == 'PayPal'
+                  "
+                  required
+                >
+                  <el-input
+                    v-model="addRefundForm.refundAccount"
+                    :placeholder="$t('place.pleaseFillIn')"
+                    class="normal-input"
+                  ></el-input>
+                </el-form-item>
+                <!-- 选择是否退税-->
+                <el-form-item
+                  v-if="addRefundForm.refundType"
+                  :label="$t('label.taxRefund')"
+                >
+                  <el-radio-group
+                    v-model="addRefundForm.refundTaxAble"
+                    @change="calculateRefundAmount"
+                  >
+                    <el-radio label="0">{{ $t("view.noTaxRefund") }}</el-radio>
+                    <el-radio label="1">{{ $t("view.taxRefund") }}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="addRefundForm.refundTaxAble == 1"
+                  :label="$t('label.taxRefundAmount')"
+                >
+                  <el-input-number
+                    v-model="addRefundForm.refundTaxAmount"
+                    :min="0.0"
+                    :step="0.01"
+                    step-strictly
+                    @change="calculateRefundAmount"
+                  ></el-input-number>
+                </el-form-item>
+                <!-- 选择是否退运费-->
+                <el-form-item
+                  v-if="addRefundForm.refundType"
+                  :label="$t('label.shippingFee')"
+                >
+                  <el-radio-group
+                    v-model="addRefundForm.refundPostage"
+                    @change="calculateRefundAmount"
+                  >
+                    <el-radio label="0">{{ $t("view.noRefund") }}</el-radio>
+                    <el-radio label="1">{{
+                      $t("view.refundShippingFee")
+                    }}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="addRefundForm.refundPostage == 1"
+                  :label="$t('label.returnShippingFeeAmount')"
+                >
+                  <el-input-number
+                    v-model="addRefundForm.refundPostageAmount"
+                    :min="0.0"
+                    :step="0.01"
+                    step-strictly
+                    @change="calculateRefundAmount"
+                  ></el-input-number>
+                </el-form-item>
+                <el-form-item
+                  v-if="addRefundForm.refundType == 3"
+                  :label="$t('label.receivingReturnWarehouse')"
+                >
+                  <el-select
+                    :placeholder="$t('place.pleaseSelect')"
+                    clearable
+                    style="width: 200px;"
+                    class="filter-item"
+                    v-model="addRefundForm.warehouseCode"
+                    @change="ShippingLabelOption"
+                  >
+                    <el-option
+                      v-for="item in warehouseItems"
+                      :key="item.key"
+                      :label="item.key"
+                      :value="item.value"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+                <!-- TODO 暂时关闭SL -->
+                <el-form-item
+                  v-if="addRefundForm.warehouseCode"
+                  label="ShippingLabel"
+                  hidden
+                >
+                  <el-radio-group v-model="addRefundForm.slUseable">
+                    <el-radio label="0" value="0">{{
+                      $t("view.notEnabled")
+                    }}</el-radio>
+                    <el-radio label="1" value="1">{{
+                      $t("view.enabled")
+                    }}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+
+                <el-form-item
+                  v-if="
+                    addRefundForm.refundType == 3 &&
+                      addRefundForm.slUseable == '1'
+                  "
+                  :label="$t('label.returnLogisticsCompanyCode')"
+                >
+                  <el-input
+                    v-model="addRefundForm.shipmodeId"
+                    disabled
+                    :placeholder="$t('place.pleaseFillIn')"
+                    class="normal-input"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item
+                  v-if="
+                    addRefundForm.refundType == 3 &&
+                      addRefundForm.slUseable == '1'
+                  "
+                  :label="$t('label.returnLogisticsNumber')"
+                >
+                  <el-input
+                    v-model="addRefundForm.shippingNo"
+                    disabled
+                    :placeholder="$t('place.pleaseFillIn')"
+                    class="normal-input"
+                  ></el-input>
+                </el-form-item>
+
+                <el-form-item
+                  v-if="
+                    addRefundForm.refundType == 3 &&
+                      addRefundForm.slUseable == '0'
+                  "
+                  :label="$t('label.returnLogisticsCompanyCode')"
+                >
+                  <el-input
+                    v-model="addRefundForm.shipmodeId"
+                    :placeholder="$t('place.pleaseFillIn')"
+                    class="normal-input"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item
+                  v-if="
+                    addRefundForm.refundType == 3 &&
+                      addRefundForm.slUseable == '0'
+                  "
+                  :label="$t('label.returnLogisticsNumber')"
+                >
+                  <el-input
+                    v-model="addRefundForm.shippingNo"
+                    :placeholder="$t('place.pleaseFillIn')"
+                    class="normal-input"
+                  ></el-input>
+                </el-form-item>
+              </div>
+              <div class="row-item">
+                <el-form-item :label="$t('label.afterSalesInstructions')">
+                  <el-input
+                    type="textarea"
+                    class="afertextarea"
+                    :placeholder="$t('place.enterContent')"
+                    v-model="addRefundForm.notes"
+                    maxlength="150"
+                    :rows="4"
+                    show-word-limit
+                  >
+                  </el-input>
+                </el-form-item>
+                <el-form-item :label="$t('label.uploadVoucher')">
+                  <el-upload
+                    class="avatar-uploader"
+                    :action="uploadPhotos"
+                    :show-file-list="false"
+                    :on-success="handleAvatarSuccess"
+                    :before-upload="beforeAvatarUpload"
+                    :headers="headers"
+                  >
+                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                  </el-upload>
+                </el-form-item>
+              </div>
+            </div>
           </el-form>
         </div>
       </div>
@@ -370,12 +352,13 @@
         <div class="item_title">
           <span>{{ $t("view.selectItems") }}</span>
         </div>
-        <div class="ptitle">
-          <!-- <orderRefundItemListTab v-if="refundType" :addRefundForm="addRefundForm" :refundType="addRefundForm.refundType" :orderDeatils="orderDeatils" :orderInfo="orderInfo"></orderRefundItemListTab> -->
+        <div class="ptitle item_table">
           <orderRefundItemListTab
             v-if="refundType"
+            ref="orderRefundItemListTab"
             :addRefundForm="addRefundForm"
             :refundType="addRefundForm.refundType"
+            @back="back"
           ></orderRefundItemListTab>
         </div>
       </div>
@@ -407,7 +390,7 @@ import { dcmAdd, dcmSub, accDiv, accMul } from "@/utils/toolUtil";
 import { BigNumber } from "bignumber.js";
 export default {
   name: "orderRefundDialog",
-  props: ["refundId"],
+  props: ["params"],
   components: {
     baseInfoTab,
     invoiceInfoTab,
@@ -415,6 +398,11 @@ export default {
     orderRefundItemListTab,
     receivingInfoTab
   },
+  watch: {
+    "$refs.orderRefundItemListTab"(val) {
+      console.log(val, "test");
+    }
+  },
   data() {
     return {
       orderInfo: {},
@@ -453,12 +441,13 @@ export default {
     };
   },
   created() {
-    // if(!this.refundId) {
-    // 	this.editIs = false;
-    // }
-    // this.getOrderInfo();
-    //这里只考虑编辑的情况
-    this.getDetailListByRefundId(this.refundId);
+    this.getDetailListByRefundId(this.params.id);
+  },
+  mounted() {
+    console.log(
+      this.$refs.orderRefundItemListTab,
+      "$refs.orderRefundItemListTab.manyfoldFlag"
+    );
   },
   computed: {
     // 计算属性的 getter
@@ -488,7 +477,6 @@ export default {
         .plus(BigNumber(this.addRefundForm.refundPostageAmount))
         .toNumber()
         .toFixed(2);
-      console.log(taxAndShippingAmount, this.addRefundForm.refundAmount);
       this.addRefundForm.refundTotalAmount = BigNumber(taxAndShippingAmount)
         .plus(BigNumber(this.addRefundForm.refundAmount))
         .toNumber()
@@ -572,7 +560,6 @@ export default {
       });
     },
     handleAvatarSuccess(res, file) {
-      console.log("图片上传结果", res);
       this.imageUrl = res.accessUrl;
       if (this.imageUrl) {
         this.addRefundForm.annexPath = this.imageUrl;
@@ -592,7 +579,6 @@ export default {
     },
 
     refundChange(arr, id) {
-      console.log(arr, id);
       arr.forEach(item => {
         if (item.id == id) {
           this.customOpen = item.custom;
@@ -664,6 +650,9 @@ export default {
       // }
       //暂时关闭SL
       this.addRefundForm.slUseable = "0";
+    },
+    back() {
+      this.$emit("back");
     }
   }
 };
@@ -705,12 +694,14 @@ export default {
 .avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
-  width: 178px;
-  height: 178px;
-  line-height: 178px;
+  width: 82px;
+  height: 82px;
+  line-height: 82px;
   text-align: center;
+  border-radius: 3px;
+  border: 1px solid #dcdfe6;
+  margin-left: 49px;
 }
-
 .avatar {
   width: 178px;
   height: 178px;
@@ -784,14 +775,90 @@ export default {
     }
   }
 }
-
+.main {
+  margin-top: 15px;
+  .box {
+    .item_title {
+      color: #606266;
+      font-size: 16px !important;
+      line-height: 16px;
+      position: relative;
+      padding-left: 8px !important;
+      &:before {
+        position: absolute;
+        left: 0px;
+        top: 13px;
+        content: "";
+        display: inline-block;
+        width: 3px;
+        height: 13px;
+        background: #ae8877;
+        border-radius: 0px 0px 0px 0px;
+      }
+    }
+    .box_item {
+      padding: 0 20px;
+      display: flex;
+      .item_title {
+        line-height: 40px;
+        font-size: 18px;
+        text-align: left;
+        font-weight: 600;
+      }
+      .item_list {
+        text-align: left;
+        font-size: 14px;
+        color: #606266;
+        display: flex;
+        p {
+          margin: 10px 0;
+        }
+        div:nth-child(2) {
+          margin-left: 30px;
+        }
+      }
+    }
+    .item_title {
+      padding-left: 20px;
+      line-height: 40px;
+      font-size: 18px;
+      text-align: left;
+      font-weight: 600;
+    }
+  }
+}
+.row {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  /deep/.el-form-item {
+    display: flex;
+  }
+  .marginleft {
+    margin-left: 30px;
+    margin-right: 30px;
+  }
+  .row-item {
+    margin-right: 10vw;
+    &:last-child {
+      margin-right: 0px;
+    }
+  }
+  .afertextarea {
+    width: 306px;
+  }
+}
 .ptitle {
   display: flex;
   justify-content: space-between;
-  margin: 20px;
+  margin: 20px 0px;
   color: #1f2d3d;
   text-align: left;
   font-weight: bold;
+  width: 100%;
+  /deep/.el-descriptions__title {
+    color: #606266;
+  }
 }
 
 .pcode {
@@ -813,4 +880,7 @@ export default {
   margin-bottom: 0;
   width: 50%;
 }
+.item_table {
+  position: relative;
+}
 </style>

src/views/oms/refund/components/orderRefundDialogNew.vue

@@ -0,0 +1,1604 @@
+<template>
+  <div class="dialog_container" v-loading.fullscreen.lock="detailLoading">
+    <div class="main">
+      <div class="box" style="margin-top: 15px;">
+        <div class="item_title">{{ $t("view.shippingInfo") }}</div>
+        <div class="ptitle">
+          <template>
+            <el-descriptions
+              class="margin-top"
+              :title="$t('title.addressInfo')"
+              :column="4"
+              direction="horizontal"
+              v-if="addressInfo.length == 1"
+            >
+              <el-descriptions-item :label="$t('country')">{{
+                addressInfo[0].receiverCountryCode
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('label.postalCode')">{{
+                addressInfo[0].receiverZip
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('state')">{{
+                addressInfo[0].receiverState
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('city')">{{
+                addressInfo[0].receiverCity
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('suburb')">{{
+                addressInfo[0].receiverDistrict
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('street')">{{
+                addressInfo[0].receiverStreet
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('address')">{{
+                addressInfo[0].receiverAddress
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('dooeNo')">{{
+                addressInfo[0].receiverAddress2
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('recipient')">{{
+                addressInfo[0].receiverName
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('telephone')">{{
+                addressInfo[0].receiverPhone
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('moPhone')">{{
+                addressInfo[0].receiverMobile
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('post')">{{
+                addressInfo[0].email
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('label.shippingFee')">{{
+                addressInfo[0].freight
+              }}</el-descriptions-item>
+            </el-descriptions>
+            <div class="container" width="500px" v-if="addressInfo.length > 1">
+              <div
+                v-for="(item, index) in addressInfo"
+                :key="index"
+                width="100px"
+                margin-right="50px"
+              >
+                <el-popover
+                  placement="top"
+                  :title="$t('title.addressInfo')"
+                  width="300"
+                  offset="300"
+                  trigger="hover"
+                >
+                  <el-descriptions
+                    class="margin-top"
+                    title=""
+                    :column="1"
+                    direction="horizontal"
+                  >
+                    <el-descriptions-item :label="$t('country')">{{
+                      item.receiverCountryCode
+                    }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('address')">{{
+                      item.receiverAddress
+                    }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('recipient')">{{
+                      item.receiverName
+                    }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('post')">{{
+                      item.email
+                    }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('label.shippingFee')">{{
+                      item.freight
+                    }}</el-descriptions-item>
+                  </el-descriptions>
+                  <el-button
+                    slot="reference"
+                    @click="chooseClick(item.idList)"
+                    >{{ item.receiverCountryCode }}</el-button
+                  >
+                </el-popover>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div
+        class="box"
+        style="margin-top: 15px;padding-bottom: 10px;"
+        v-loading="fromLoading"
+      >
+        <div class="item_title">{{ $t("view.refundInfo") }}</div>
+        <div class="ptitle">
+          <el-form
+            label-position="left"
+            ref="addRefundForm"
+            :model="addRefundForm"
+          >
+            <div class="row">
+              <div class="row-item">
+                <div class="row">
+                  <el-form-item :label="$t('currency')">
+                    <el-input
+                      disabled
+                      v-model="addRefundForm.currency"
+                      placeholder
+                      class="normal-input"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item
+                    class="inputleft"
+                    :label="$t('label.afterSalesType')"
+                    required
+                  >
+                    <el-select
+                      :placeholder="$t('place.pleaseSelect')"
+                      disabled
+                      @change="changeRefund(null)"
+                      clearable
+                      style="width: 200px;"
+                      class="filter-item"
+                      v-model="addRefundForm.refundType"
+                    >
+                      <el-option
+                        v-for="afterSaleType in afterSaleTypes"
+                        :key="afterSaleType.value"
+                        :label="$t(afterSaleType.label)"
+                        :value="afterSaleType.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item
+                    :label="$t('label.expectedRefundAmount')"
+                    required
+                  >
+                    <el-input
+                      v-model="addRefundForm.refundTotalAmount"
+                      :disabled="true"
+                    />
+                  </el-form-item>
+                </div>
+                <el-form-item :label="$t('label.refundMethod')" required>
+                  <el-radio-group v-model="addRefundForm.refundMethod">
+                    <el-radio label="system">{{
+                      $t("view.systemRefund")
+                    }}</el-radio>
+                    <el-radio label="manual">{{
+                      $t("view.manualRefund")
+                    }}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="addRefundForm.refundMethod == 'manual'"
+                  :label="$t('label.accountType')"
+                  required
+                >
+                  <el-radio-group v-model="addRefundForm.refundAccountType">
+                    <el-radio label="PayPal">PayPal</el-radio>
+                    <!-- 银行卡暂时隐藏 -->
+                    <!-- <el-radio label="bankCard">银行卡</el-radio> -->
+                    <!-- <el-radio label="Gift Card">Gift Card</el-radio> -->
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  :label="$t('label.receivingAccount')"
+                  v-if="
+                    addRefundForm.refundMethod == 'manual' &&
+                      addRefundForm.refundAccountType == 'PayPal'
+                  "
+                  required
+                >
+                  <el-input
+                    v-model="addRefundForm.refundAccount"
+                    :placeholder="$t('place.pleaseFillIn')"
+                    class="normal-input"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item :label="$t('label.taxRefund')">
+                  <el-radio-group
+                    v-model="addRefundForm.refundTaxAble"
+                    @change="calculateRefundAmount"
+                  >
+                    <el-radio label="0">{{ $t("view.noTaxRefund") }}</el-radio>
+                    <el-radio label="1">{{ $t("view.taxRefund") }}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="addRefundForm.refundTaxAble == 1"
+                  :label="$t('label.taxRefundAmount')"
+                >
+                  <el-input-number
+                    v-model="addRefundForm.refundTaxAmount"
+                    :min="0.0"
+                    :step="0.01"
+                    step-strictly
+                    @change="calculateRefundAmount"
+                  ></el-input-number>
+                </el-form-item>
+                <!-- 选择是否退运费-->
+                <el-form-item :label="$t('label.shippingFee')">
+                  <el-radio-group
+                    v-model="addRefundForm.refundPostage"
+                    @change="calculateRefundAmount"
+                  >
+                    <el-radio label="0">{{ $t("view.noRefund") }}</el-radio>
+                    <el-radio label="1">{{
+                      $t("view.refundShippingFee")
+                    }}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="addRefundForm.refundPostage == 1"
+                  :label="$t('label.returnShippingFeeAmount')"
+                >
+                  <el-input-number
+                    v-model="addRefundForm.refundPostageAmount"
+                    :min="0.0"
+                    :step="0.01"
+                    step-strictly
+                    @change="calculateRefundAmount"
+                  ></el-input-number>
+                </el-form-item>
+
+                <el-form-item
+                  v-if="this.queryRefundType == 3"
+                  :label="$t('label.receivingReturnWarehouse')"
+                >
+                  <el-select
+                    :placeholder="$t('place.pleaseSelect')"
+                    clearable
+                    style="width: 200px;"
+                    class="filter-item"
+                    v-model="addRefundForm.warehouseCode"
+                    @change="ShippingLabelOption"
+                  >
+                    <el-option
+                      v-for="item in warehouseItems"
+                      :key="item.key"
+                      :label="item.key"
+                      :value="item.value"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+
+                <el-form-item
+                  v-if="
+                    addRefundForm.warehouseCode == 'PSJ-G001001' ||
+                      addRefundForm.warehouseCode == 'PSJ-G001003' ||
+                      addRefundForm.warehouseCode == 'PSJ-H0000024' ||
+                      addRefundForm.warehouseCode == 'PSJ-H0000019' ||
+                      addRefundForm.warehouseCode == 'PSJ-H0000011' ||
+                      addRefundForm.warehouseCode == 'PSJ-G001004'
+                  "
+                  label="ShippingLabel"
+                >
+                  <el-radio-group
+                    v-model="addRefundForm.slUseable"
+                    @change="changeSlradio()"
+                  >
+                    <el-radio label="0" value="0">{{
+                      $t("view.notEnabled")
+                    }}</el-radio>
+                    <el-radio label="1" value="1">{{
+                      $t("view.enabled")
+                    }}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+
+                <el-form-item
+                  v-if="
+                    this.queryRefundType == 3 &&
+                      this.addRefundForm.slUseable == 0
+                  "
+                  :label="$t('label.returnLogisticsCompanyCode')"
+                >
+                  <el-input
+                    v-model="addRefundForm.shipmodeId"
+                    :placeholder="$t('place.pleaseFillIn')"
+                    class="normal-input"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item
+                  v-if="
+                    this.queryRefundType == 3 &&
+                      this.addRefundForm.slUseable == 0
+                  "
+                  :label="$t('label.returnLogisticsNumber')"
+                >
+                  <el-input
+                    v-model="addRefundForm.shippingNo"
+                    :placeholder="$t('place.pleaseFillIn')"
+                    class="normal-input"
+                  ></el-input>
+                </el-form-item>
+              </div>
+              <div class="row-item">
+                <el-form-item :label="$t('label.afterSalesInstructions')">
+                  <el-input
+                    type="textarea"
+                    class="afertextarea"
+                    :placeholder="$t('place.enterContent')"
+                    v-model="addRefundForm.notes"
+                    :rows="4"
+                    maxlength="150"
+                    show-word-limit
+                  >
+                  </el-input>
+                </el-form-item>
+
+                <el-form-item :label="$t('label.uploadVoucher')">
+                  <el-upload
+                    class="avatar-uploader"
+                    :action="uploadPhotos"
+                    :show-file-list="false"
+                    :on-success="handleAvatarSuccess"
+                    :before-upload="beforeAvatarUpload"
+                    :headers="headers"
+                  >
+                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                  </el-upload>
+                </el-form-item>
+              </div>
+            </div>
+          </el-form>
+        </div>
+
+        <!-- 因为要多选的问题 不考虑分页 -->
+        <div class="box" style="margin-top: 15px;">
+          <div class="item_title">
+            <span>{{ $t("view.selectItems") }}</span>
+            <el-select
+              v-if="this.multipleSelection && this.multipleSelection.length > 0"
+              v-model="refundReasonAss"
+              style="width: 260px;"
+              :placeholder="$t('place.selectCheckedRefundReasons')"
+              clearable
+              @change="chooseReason(refundReasonAss, reasonListAll)"
+            >
+              <el-option
+                v-for="status in reasonListAll"
+                :key="status.id"
+                :label="status.reasonContentChinese"
+                :value="String(status.id)"
+              >
+              </el-option>
+            </el-select>
+            <el-input
+              v-if="otherReasonFlag == '1'"
+              :placeholder="$t('place.enterReason')"
+              clearable
+              style="width: 220px;"
+              class="filter-item"
+              v-model="refundOtherReasonAss"
+              @change="writeReason(refundOtherReasonAss)"
+            />
+          </div>
+          <div>
+            <el-table
+              class="itemtable"
+              ref="multipleTable"
+              @select="handleSelectionChange"
+              @select-all="handleSelectionChange"
+              style="width: 100%;"
+              v-loading="listLoading"
+              :key="tableKey"
+              :data="tableOrderDeatils"
+              row-key="id"
+              stripe
+              border
+              fit
+              highlight-current-row
+            >
+              <el-table-column
+                type="selection"
+                width="55"
+                :selectable="() => false"
+              >
+              </el-table-column>
+
+              <el-table-column
+                :label="$t('label.orderNumber')"
+                width="150"
+                align="center"
+                prop="ordersId"
+              >
+              </el-table-column>
+
+              <el-table-column
+                :label="$t('goodsCode')"
+                width="150"
+                align="center"
+                prop="skuCode"
+              >
+              </el-table-column>
+
+              <el-table-column
+                :label="$t('onlyCode')"
+                min-width="180"
+                align="center"
+                prop=""
+              >
+                <template slot-scope="scope">
+                  <div v-if="scope.row.uniqueCode">
+                    <div
+                      v-for="(item, index) in scope.row.uniqueCode"
+                      :key="index"
+                    >
+                      {{ item }}
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+
+              <el-table-column
+                :label="$t('goodsName')"
+                width="300"
+                align="center"
+                prop="productName"
+              ></el-table-column>
+
+              <el-table-column
+                :label="$t('bagSkuCode')"
+                width="180"
+                align="center"
+                prop="bagSkuCode"
+              ></el-table-column>
+
+              <el-table-column
+                :label="$t('label.originalQuantity')"
+                width="80"
+                align="center"
+                prop="quantity"
+              ></el-table-column>
+
+              <el-table-column
+                :label="$t('goodsPrice')"
+                width="80"
+                align="center"
+                prop="price"
+              ></el-table-column>
+
+              <el-table-column
+                :label="$t('offerAmount')"
+                width="80"
+                align="center"
+                prop="discountFee"
+              ></el-table-column>
+
+              <el-table-column
+                :label="$t('payAmount')"
+                width="80"
+                align="center"
+                prop="totalFee"
+              ></el-table-column>
+
+              <el-table-column
+                :label="$t('label.refundPercentage')"
+                width="150"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <div v-if="multipleSelection.indexOf(scope.row) == -1">
+                    <div>{{ scope.row.refundSales }}</div>
+                  </div>
+                  <div v-else>
+                    <el-input-number
+                      v-model="scope.row.refundSales"
+                      @change="changeQuantity(scope.row)"
+                      size="mini"
+                      :min="0"
+                      :max="1"
+                      :step="0.01"
+                      step-strictly
+                    ></el-input-number>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('label.eligibleQuantity')"
+                width="150"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <div v-if="multipleSelection.indexOf(scope.row) == -1">
+                    <div>{{ scope.row.newQuantity }}</div>
+                  </div>
+                  <div v-else>
+                    <el-input-number
+                      :disabled="scope.row.selectedRow == 1 ? true : false"
+                      v-model="scope.row.newQuantity"
+                      @change="changeQuantity(scope.row)"
+                      size="mini"
+                      :min="0"
+                      :max="scope.row.maxq"
+                      :step="1"
+                      step-strictly
+                    ></el-input-number>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('label.refundedAmount')"
+                width="150"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <div v-if="multipleSelection.indexOf(scope.row) == -1">
+                    <div>0</div>
+                  </div>
+                  <div v-else>
+                    <el-input-number
+                      v-model="scope.row.refundAmount"
+                      size="mini"
+                      @change="refundAmountChange"
+                      :min="0.0"
+                      :max="scope.row.originRefundAmount"
+                    ></el-input-number>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('label.needPayWithCustomers')"
+                width="150"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <div v-if="multipleSelection.indexOf(scope.row) == -1">
+                    <div>0</div>
+                  </div>
+                  <div v-else>
+                    <el-input-number
+                      v-model="scope.row.differenceAmount"
+                      size="mini"
+                      :min="0.0"
+                      :max="scope.row.originPaidAmount"
+                      @change="refundAmountChange"
+                    ></el-input-number>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('label.refundReason')"
+                width="150"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <div v-if="multipleSelection.indexOf(scope.row) == -1"></div>
+                  <div v-else>
+                    <el-select
+                      v-model="scope.row.refundReason"
+                      :placeholder="$t('place.pleaseSelect')"
+                      clearable
+                      @change="refundChange(scope.row.refundReason, scope.row)"
+                    >
+                      <el-option
+                        v-for="status in scope.row.refundReasonList"
+                        :key="status.id"
+                        :label="status.reasonContentChinese"
+                        :value="String(status.id)"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('label.reasonExplanation')"
+                width="150"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <div v-if="multipleSelection.indexOf(scope.row) == -1"></div>
+                  <div v-else>
+                    <el-input
+                      v-if="scope.row.customOpen == '1'"
+                      :placeholder="$t('place.enterReason')"
+                      clearable
+                      style="width: 200px;"
+                      class="filter-item"
+                      v-model="scope.row.otherReason"
+                    />
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                width="55"
+                :label="$t('label.flashPurchase')"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <el-checkbox
+                    v-model="scope.row.flashPurchaseFlag == 1"
+                  ></el-checkbox>
+                </template>
+              </el-table-column>
+              <el-table-column
+                width="55"
+                :label="$t('label.exchangePurchase')"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <el-checkbox
+                    v-model="scope.row.exchangePurchaseFlag == 1"
+                  ></el-checkbox>
+                </template>
+              </el-table-column>
+
+              <el-table-column
+                :label="$t('label.refundedQuantity')"
+                width="80"
+                align="center"
+                prop="refundQuantity"
+              ></el-table-column>
+              <el-table-column
+                :label="$t('status')"
+                width="80"
+                align="center"
+                prop="status"
+              >
+                <template slot-scope="scope">
+                  {{ scope.row.status | statusFilter }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('label.signedForTheReturn')"
+                width="80"
+                align="center"
+                prop="matchStatus"
+              >
+                <template slot-scope="scope">
+                  <span v-if="scope.row.matchStatus == 'unmatch'">
+                    {{ $t("label.notMatched") }}
+                  </span>
+                  <span
+                    v-if="
+                      scope.row.matchStatus == 'order_matched' ||
+                        scope.row.matchStatus == 'matched'
+                    "
+                  >
+                    {{ $t("label.matchedSuccess") }}
+                  </span>
+                  <span v-if="scope.row.matchStatus == null">
+                    {{ $t("label.not") }}
+                  </span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <!-- 多件多折折扣重算 -->
+        <div class="box" v-has="'priceRule:list'">
+          <div class="item_title">
+            {{ $t("multipleDiscountInfo.multipleDiscountReCal") }}
+          </div>
+          <div>
+            <el-table
+              :key="tableKey"
+              :data="returnPreviewDatas"
+              row-key="id"
+              stripe
+              border
+              fit
+              highlight-current-row
+            >
+              <el-table-column type="index" width="40" />
+              <el-table-column
+                :label="$t('multipleDiscountInfo.OriginalDiscount')"
+                align="center"
+                prop="originTip"
+              />
+              <el-table-column
+                :label="$t('multipleDiscountInfo.OriginalMoneny')"
+                align="center"
+                prop="originalOrderAmount"
+              />
+              <el-table-column
+                :label="$t('multipleDiscountInfo.afterReturnDiscount')"
+                align="center"
+                prop="currentTip"
+              />
+              <el-table-column
+                :label="$t('multipleDiscountInfo.afterReturnMoney')"
+                align="center"
+                prop="currentOrderAmount"
+              />
+              <el-table-column
+                :label="$t('multipleDiscountInfo.returnMoney')"
+                align="center"
+                prop="refundAmount"
+              >
+                <template slot-scope="scope">
+                  {{ scope.row.refundAmount || 0 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                :label="$t('multipleDiscountInfo.needPayMoney')"
+                align="center"
+                prop="differenceAmount"
+              >
+                <template slot-scope="scope">
+                  {{ scope.row.differenceAmount || 0 }}
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <div class="box total_box">
+          <div class="item_title">
+            {{ $t("view.totalRefund") }}
+          </div>
+          <div class="item_box">
+            {{ $t("view.totalRefund") }}：{{ addRefundForm.refundTotalAmount }}
+          </div>
+        </div>
+        <div class="box btn_box">
+          <el-button
+            :style="btnStyle"
+            class="save_btn"
+            type="primary"
+            @click="submit(this)"
+            v-loading="btnLoading"
+            >{{ $t("save") }}</el-button
+          >
+          <el-button type="danger" class="backbtn" @click="back">{{
+            $t("back")
+          }}</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import {getRefundReason} from '@/api/oms/refund/refund'
+import global from "@/views/oms/global";
+import waves from "@/directive/waves";
+import { getToken } from "@/utils/auth";
+import { dcmSub } from "@/utils/toolUtil";
+import {
+  queryOrderDetailsByOrmorder,
+  statusKeyValue
+} from "@/api/oms/order/order";
+import {
+  validPromotionReq,
+  warehouseList,
+  checkSubmitRefund,
+  backstageSubmitRefund,
+  getDetailListByRefundId
+} from "@/api/oms/refund/refund";
+import { BigNumber } from "bignumber.js";
+import tableEdit from "./tableEdit";
+
+export default {
+  name: "orderRefundNewDialog",
+  props: ["params"],
+  directives: {
+    waves
+  },
+  components: {
+    global,
+    tableEdit
+  },
+  filters: {
+    statusFilter(key) {
+      return statusKeyValue[key];
+    }
+  },
+  data() {
+    return {
+      matchStatus: null,
+      listLoading: false,
+      detailLoading: false,
+      fromLoading: false,
+      btnLoading: false,
+      addressInfo: [],
+      tableOrderDeatils: [],
+      multipleSelection: [],
+      returnPreviewDatas: [], // 勾选后，退款预览数据
+      originReturnPreviewDatas: {}, //记录下来的，退款原来预览数据
+      addRefundForm: {
+        refundMethod: "system",
+        refundAccountType: "PayPal",
+        refundAccount: "",
+        refundType: "",
+        refundPostage: "0",
+        refundAmount: 0.0, //商品退款金额
+        differenceAmount: 0, // 补款金额
+        refundPostageAmount: 0.0,
+        warehouseCode: "",
+        annexPath: "",
+        items: [],
+        quantity: 0,
+        refundTaxAble: "0", //是否退税
+        refundTaxAmount: 0.0, //退税金额
+        refundTotalAmount: 0.0, //总计退款金额 = 商品退款金额 + 退运费金额 + 退税金额 。 实际执行时，refundAmount=商品退款金额 + 退税金额；退运费金额单独计算
+        // refundReason:'', // 退款原因
+        // otherReason:'', // 其他退款理由
+        slUseable: "0", //是否开启ShippingLabel选项
+        currency: "", //币种
+        shipmodeId: "", //退货物流公司编号
+        shippingNo: "", //退货物流单号
+        notes: ""
+      },
+      afterSaleTypes: global.afterSaleType, //售后类型
+      warehouseItems: [],
+      queryRefundType: "",
+      queryOrmorder: "",
+      btnStyle: "",
+      imageUrl: "",
+      uploadPhotos: process.env.VUE_APP_OMS_API + "ordersRefund/uploadPhotos",
+      reasonListAll: [],
+      refundReasonAss: "",
+      refundOtherReasonAss: "",
+      otherReasonFlag: "",
+      tableKey: Math.random(),
+      isRefund: true //是否是退款 true:退款 false:补款
+    };
+  },
+  created() {
+    //情况清空数据
+    this.getWarehouseList();
+    this.getDetail();
+  },
+  computed: {
+    // 计算属性的 getter
+    headers: function() {
+      return {
+        "X-Token": getToken()
+      };
+    }
+  },
+  methods: {
+    getDetail() {
+      this.ShippingLabelOption();
+      //初始化数据
+      this.addRefundForm.refundAmount = 0.0;
+      this.addRefundForm.differenceAmount = 0.0;
+      this.addRefundForm.noTaxRefundAmount = 0.0;
+      this.addRefundForm.noTaxDifferenceAmount = 0.0;
+      this.addRefundForm.refundPostage = "0";
+      this.addRefundForm.refundPostageAmount = 0.0;
+      this.addRefundForm.warehouseCode = "";
+      this.addRefundForm.annexPath = "";
+      this.addRefundForm.items = [];
+      this.addRefundForm.quantity = 0.0;
+      this.addRefundForm.refundTaxAble = "0"; //是否退税
+      this.addRefundForm.refundTaxAmount = 0.0; //退税金额
+      this.addRefundForm.refundTotalAmount = 0.0;
+      this.addRefundForm.shipmodeId = "";
+      this.addRefundForm.shippingNo = "";
+      this.addRefundForm.refundMethod = "system";
+      this.addRefundForm.refundAccountType = "PayPal";
+      this.addRefundForm.refundAccount = "";
+      this.addRefundForm.notes = "";
+      this.addressInfo = [];
+      this.reasonListAll = [];
+      this.refundReasonAss = "";
+      this.refundOtherReasonAss = "";
+      this.otherReasonFlag = "";
+
+      //查询满足条件的所有订单项
+      this.detailLoading = true;
+      getDetailListByRefundId(this.params.id)
+        .then(res => {
+          if (200 == res.code) {
+            //第一次查询的退款类型
+            this.queryRefundType = res.data.refundType;
+            this.queryOrmorder = res.data.ormorder;
+
+            this.addRefundForm = res.data;
+            this.addressInfo = res.data.addressList;
+            this.reasonListAll = res.data.refundReasonList;
+            this.selectIds = res.data.items.map(item => item.orderitemId);
+            this.getOrders();
+            let oldRefundTaxAmount = BigNumber(
+              this.addRefundForm.refundTotalAmount
+            )
+              .plus(BigNumber(-this.addRefundForm.refundPostageAmount))
+              .plus(BigNumber(-this.addRefundForm.refundAmount))
+              .toFixed(2);
+
+            if (oldRefundTaxAmount > 0) {
+              this.$set(this.addRefundForm, "refundTaxAble", "1"); //是否退税
+            } else {
+              oldRefundTaxAmount = 0;
+              this.$set(this.addRefundForm, "refundTaxAble", "0"); //是否退税
+            }
+            this.$set(
+              this.addRefundForm,
+              "refundTaxAmount",
+              oldRefundTaxAmount
+            ); //是否退税 this.addRefundForm.
+          } else {
+            this.$message.error(res.msg);
+          }
+        })
+        .finally(() => {
+          this.detailLoading = false;
+        });
+    },
+    // 获取订单项
+    getOrders() {
+      this.listLoading = true;
+      let _this = this;
+      //查询订单详情
+      let query = { ...this.params };
+      queryOrderDetailsByOrmorder(query)
+        .then(res => {
+          if (res.code === 200) {
+            let goodsRefundAmount = BigNumber(0);
+            this.tableOrderDeatils = res.data;
+            let details = [];
+            this.refundReasonList = this.addRefundForm.refundReasonList;
+            const selectDatas = this.addRefundForm.items;
+            const multipleSelection = []; // 默认选中的列
+            if (res.data) {
+              details = res.data.map(row => {
+                // 可用退款件数
+                let quantity = 0;
+                if (row.refundQuantity > 0) {
+                  quantity = dcmSub(row.quantity, row.refundQuantity);
+                } else {
+                  quantity = row.quantity;
+                }
+                row.newQuantity = quantity;
+                for (let ind2 in selectDatas) {
+                  //明细属于当前退款单
+                  row.refundReasonList = selectDatas[ind2].refundReasonList;
+                  if (selectDatas[ind2].orderitemId === row.orderitemId) {
+                    row.refundAmount = selectDatas[ind2].refundAmount;
+                    row.newQuantity = selectDatas[ind2].quantity;
+                    row.refundReason = String(selectDatas[ind2].refundReason);
+                    row.customOpen = this.getCustopen(
+                      row.refundReason,
+                      selectDatas[ind2].refundReasonList
+                    );
+                    row.otherReason = selectDatas[ind2].otherReason;
+                    row.refundReasonList = selectDatas[ind2].refundReasonList;
+                    row.refundItemId = selectDatas[ind2].id;
+                    row.selectedRow = 1;
+                    goodsRefundAmount = goodsRefundAmount.plus(
+                      BigNumber(selectDatas[ind2].refundAmount)
+                    );
+                    // 选中当前行
+                    _this.$nextTick(() => {
+                      _this.$refs.multipleTable.toggleRowSelection(row, true);
+                    });
+                    multipleSelection.push(row);
+                  }
+                }
+                return row;
+              });
+              // 默认选中
+              this.multipleSelection = multipleSelection;
+              //退商品金额计算一下
+              this.refundAmount = goodsRefundAmount.toFixed(2);
+              // this.tableOrderDeatils = details;
+              this.reCalReturn(); // 获取折扣信息
+
+              this.tableOrderDeatils = details;
+            }
+            // this.$set(this, "tableOrderDeatils", details);
+          }
+        })
+        .finally(() => {
+          this.listLoading = false;
+        });
+    },
+    getCustopen(id, arr) {
+      let customOpen = "";
+      if (id) {
+        arr.forEach(item => {
+          if (item.id == id) {
+            customOpen = item.custom;
+          }
+        });
+      }
+      return customOpen;
+    },
+    //获取退货仓库信息
+    getWarehouseList() {
+      warehouseList().then(res => {
+        if (200 == res.code) {
+          this.warehouseItems = res.data;
+        }
+      });
+    },
+    //计算退款总额 商品退款金额 + 退运费金额 +退税金额
+    calculateRefundAmount() {
+      //如果没选择退税 或者税费为空
+      if (
+        this.addRefundForm.refundTaxAble != "1" ||
+        this.addRefundForm.refundTaxAmount === "NaN" ||
+        !this.addRefundForm.refundTaxAmount
+      ) {
+        this.addRefundForm.refundTaxAmount = BigNumber(0)
+          .toNumber()
+          .toFixed(2);
+      }
+      //如果没选择退运费 或者运费为空
+      if (
+        this.addRefundForm.refundPostage != "1" ||
+        !this.addRefundForm.refundPostageAmount ||
+        this.addRefundForm.refundPostageAmount === "NaN"
+      ) {
+        this.addRefundForm.refundPostageAmount = BigNumber(0)
+          .toNumber()
+          .toFixed(2);
+      }
+      var taxAndShippingAmount = BigNumber(this.addRefundForm.refundTaxAmount)
+        .plus(BigNumber(this.addRefundForm.refundPostageAmount))
+        .toNumber()
+        .toFixed(2);
+      let price =
+        this.addRefundForm.noTaxRefundAmount !== "NaN" &&
+        this.addRefundForm.noTaxRefundAmount > 0
+          ? BigNumber(this.addRefundForm.noTaxRefundAmount)
+          : BigNumber(this.addRefundForm.noTaxDifferenceAmount).negated();
+      this.addRefundForm.refundTotalAmount = BigNumber(taxAndShippingAmount)
+        .plus(BigNumber(price))
+        .toNumber()
+        .toFixed(2);
+    },
+    // 重新计算退款的金额
+    reCalReturn() {
+      const formData = {
+        ormOrderId: this.queryOrmorder,
+        promotionRefundDetails: this.multipleSelection.map(item => ({
+          soOrderId: item.ordersId,
+          orderItemId: item.orderitemId,
+          ormOrderItemId: item.ormOrderItemId,
+          quantity: item.newQuantity
+        }))
+      };
+      this.listLoading = true;
+      checkSubmitRefund(formData)
+        .then(res => {
+          if (res.code === 200) {
+            const { orderPreviewVO, ordersRefund } = res.data;
+            const { isRefund, titleAmount } = orderPreviewVO;
+            const refundAmount = isRefund ? titleAmount : 0;
+            const differenceAmount = isRefund ? 0 : titleAmount;
+            this.returnPreviewDatas = [
+              { ...orderPreviewVO, refundAmount, differenceAmount }
+            ];
+            this.originReturnPreviewDatas = orderPreviewVO;
+            this.isRefund = orderPreviewVO.isRefund;
+            const totalPrice = this.multipleSelection.reduce((prev, cur) => {
+              return prev + cur.totalFee;
+            }, 0);
+            for (let k in this.multipleSelection) {
+              let row = this.multipleSelection[k];
+              let data = ordersRefund.items.find(
+                item => item.ormOrderItemId === row.ormOrderItemId
+              );
+              if (orderPreviewVO.isRefund) {
+                // 退款
+                row.refundAmount = data.refundAmount;
+                row.originRefundAmount = data.refundAmount;
+                row.differenceAmount = 0;
+              } else {
+                // 补差价
+                const val = this.calNeedPaidMoney(
+                  k,
+                  row,
+                  orderPreviewVO.titleAmount,
+                  totalPrice
+                );
+                row.originPaidAmount = val;
+                row.differenceAmount = val;
+                row.refundAmount = 0;
+              }
+            }
+            this.jisuan();
+          } else {
+            this.$message.error(res.msg);
+          }
+        })
+        .finally(() => {
+          this.listLoading = false;
+        });
+    },
+    // 计算补差价的金额
+    calNeedPaidMoney(i, row, differenceAmount, totalPrice) {
+      let data = 0;
+      if (this.multipleSelection.length === 1) {
+        data = differenceAmount;
+      } else if (i === String(this.multipleSelection.length - 1)) {
+        const price = this.multipleSelection.reduce((prev, cur) => {
+          const amont = cur.differenceAmount || 0;
+          return prev + amont;
+        }, 0);
+        // 最后一个的时候，需要用减法
+        data = (differenceAmount - price).toFixed(2);
+      } else {
+        data = ((row.totalFee / totalPrice) * differenceAmount).toFixed(2);
+      }
+      return Number(data);
+    },
+    // 当前选中的 退款金额
+    handleSelectionChange(val) {
+      this.refundAmount = 0;
+      this.differenceAmount = 0;
+      this.multipleSelection = val;
+      // 当数组没有变动时，不用重算
+      // if (JSON.stringify(this.selectIds) === JSON.stringify(ids)) return false;
+      if (this.multipleSelection && this.multipleSelection.length > 0) {
+        // 如果是退款新版本，包含多件多折 需要重算退款金额
+        this.reCalReturn();
+      } else {
+        this.refundAmount = 0;
+        this.addRefundForm.refundAmount = 0;
+        this.addRefundForm.differenceAmount = 0;
+        this.addRefundForm.noTaxRefundAmount = 0;
+        this.addRefundForm.noTaxDifferenceAmount = 0;
+        this.differenceAmount = 0;
+        this.returnPreviewDatas = [];
+        this.addRefundForm.refundTotalAmount = 0;
+      }
+    },
+    refundAmountChange() {
+      this.jisuan();
+    },
+    jisuan() {
+      this.taxAndShippingAmount = BigNumber(this.addRefundForm.refundTaxAmount)
+        .plus(BigNumber(this.addRefundForm.refundPostageAmount))
+        .toNumber();
+
+      let refundAmount = BigNumber(0); // 退款金额
+      let differenceAmount = BigNumber(0); // 补款单金额
+      if (this.multipleSelection && this.multipleSelection.length > 0) {
+        for (let uy in this.multipleSelection) {
+          var row = this.multipleSelection[uy];
+          refundAmount = refundAmount.plus(BigNumber(row.refundAmount));
+          differenceAmount = differenceAmount.plus(
+            BigNumber(row.differenceAmount)
+          );
+        }
+        this.refundAmount = refundAmount.toNumber().toFixed(2);
+        this.differenceAmount = differenceAmount.toNumber().toFixed(2);
+      }
+      this.$set(this.addRefundForm, "noTaxRefundAmount", this.refundAmount);
+      this.$set(
+        this.addRefundForm,
+        "noTaxDifferenceAmount",
+        this.differenceAmount
+      );
+      const refundNewAmount =
+        this.refundAmount === "NaN" ? 0 : this.refundAmount;
+      const differenceNewAmount =
+        this.differenceAmount === "NaN" ? 0 : this.differenceAmount;
+      this.returnPreviewDatas[0].refundAmount = refundNewAmount;
+      this.returnPreviewDatas[0].differenceAmount = differenceNewAmount;
+
+      let total = 0;
+      let price =
+        refundNewAmount > 0 ? refundAmount : differenceAmount.negated();
+      // 退款
+      total = price
+        .plus(BigNumber(this.taxAndShippingAmount))
+        .toNumber()
+        .toFixed(2);
+      this.$set(this.addRefundForm, "refundTotalAmount", total);
+    },
+    refundChange(id, arr) {
+      if (id) {
+        arr.refundReasonList.forEach(item => {
+          if (item.id == id) {
+            arr.customOpen = item.custom;
+            if (arr.customOpen && arr.customOpen != 1) {
+              arr.otherReason = "";
+            }
+          }
+        });
+      } else {
+        arr.customOpen = "";
+      }
+    },
+    writeReason(otherReason) {
+      if (this.multipleSelection && this.multipleSelection.length > 0) {
+        for (let uy in this.multipleSelection) {
+          var row = this.multipleSelection[uy];
+          if (row.customOpen == 1) {
+            row.otherReason = otherReason;
+          }
+          ``;
+        }
+      }
+    },
+    chooseReason(id, arr) {
+      if (id) {
+        arr.forEach(item => {
+          if (item.id == id) {
+            this.otherReasonFlag = item.custom;
+          }
+        });
+      } else {
+        this.otherReasonFlag = "";
+      }
+
+      if (this.multipleSelection && this.multipleSelection.length > 0) {
+        for (let uy in this.multipleSelection) {
+          var row = this.multipleSelection[uy];
+          row.refundReason = String(id);
+          row.customOpen = this.otherReasonFlag;
+          if (row.customOpen != 1) {
+            row.otherReason = "";
+          }
+        }
+      }
+    },
+    changeQuantity() {
+      this.reCalReturn();
+    },
+
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = res.accessUrl;
+      if (this.imageUrl) {
+        this.addRefundForm.annexPath = this.imageUrl;
+      }
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
+    chooseClick(idList) {
+      this.getDetail(idList);
+    },
+    //创建退款单
+    submit() {
+      if (this.multipleSelection.some(it => it.matchStatus == "unmatch")) {
+        this.$message.error("已签收退货状态匹配错误，请匹配成功后重试!");
+        return false;
+      }
+
+      var flag = false;
+      var str = "";
+      if (this.addressInfo.length != 1) {
+        this.$message.error("请确保地址信息为1!");
+        return false;
+      }
+
+      if (flag) {
+        this.$message.error(str + ",请点击查询后继续此操作");
+        return false;
+      }
+
+      //验证通过 保存逻辑
+      this.addRefundForm.ormorder = this.queryOrmorder;
+      this.addRefundForm.refundType = this.queryRefundType;
+      //退货退款仓库验证
+      if (
+        this.addRefundForm.refundType == 3 &&
+        !this.addRefundForm.warehouseCode
+      ) {
+        this.$message.error("请选择收退货仓库!");
+        return false;
+      }
+
+      if (this.multipleSelection.length == 0) {
+        this.$message.error("请选择要退的货品!");
+        return false;
+      }
+
+      var items = [];
+      this.$confirm(
+        "退款总计：" + this.addRefundForm.refundTotalAmount + "，是否确认?",
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      )
+        .then(async () => {
+          for (let ind in this.multipleSelection) {
+            var obj = this.multipleSelection[ind];
+            if (!obj.refundReason) {
+              this.$alert(obj.ordersId + ":请选择退款原因");
+              return;
+            }
+            var newobj = {
+              productName: obj.productName,
+              quantity: obj.newQuantity,
+              ormOrderItemId: obj.ormOrderItemId,
+              orderitemId: obj.orderitemId,
+              skuCode: obj.skuCode,
+              refundAmount: obj.refundAmount,
+              differenceAmount: obj.differenceAmount,
+              refundReason: obj.refundReason,
+              otherReason: obj.otherReason,
+              soOrdersId: obj.ordersId,
+              isGift: obj.isGift,
+              isPromotion: obj.isPromotion
+            };
+            items.push(newobj);
+          }
+          this.addRefundForm.items = items;
+          //这里默认客服发起
+          this.addRefundForm.originatorFlag = 1;
+          // 总金额, 正数为退款  负数为补款
+          let val = Number(this.addRefundForm.refundTotalAmount);
+          if (val < 0) {
+            this.addRefundForm.differenceAmount = Math.abs(val);
+            this.addRefundForm.refundAmount = 0;
+          } else {
+            this.addRefundForm.refundAmount = val;
+            this.addRefundForm.differenceAmount = 0;
+          }
+          this.btnLoading = true;
+          const saveRefund = () => {
+            let query = {
+              orderPreviewVO: this.originReturnPreviewDatas,
+              ordersRefund: this.addRefundForm
+            };
+            backstageSubmitRefund(query)
+              .then(res => {
+                if (200 == res.code) {
+                  this.$message({
+                    message: this.$t("optSuccess"),
+                    type: "success"
+                  });
+                  items = [];
+                  this.btnStyle = "display:none";
+                }
+              })
+              .finally(() => {
+                this.btnLoading = false;
+              });
+          };
+          const validPromotion = async () => {
+            // 校验是否包含促销赠品，不包含直接返回true
+            if (
+              !this.tableOrderDeatils.some(
+                item => item.isGift === "1" && item.isPromotion === 1
+              )
+            ) {
+              return true;
+            }
+            // TODO 解开注释请求校验
+            // 校验是否满足促销条件 满足返回true(不提示)
+            const { code, data } = await validPromotionReq(this.addRefundForm);
+            if (code === 200) {
+              return data.valid;
+            }
+            return false;
+          };
+          // TODO 存在赠品的订单，在客服创建未发货退款售后单时，需判断扣除已退款明细之后是否还满足促销条件，若不满足，需弹窗提示客服，由客服判断是否继续执行退款。
+          if (await validPromotion()) {
+            saveRefund();
+          } else {
+            const res = await this.$confirm(
+              "退款后订单将不满足促销条件，是否确认?",
+              "提示",
+              {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+              }
+            );
+            if (res === "confirm") {
+              saveRefund();
+            }
+          }
+        })
+        .catch(() => {
+          this.btnLoading = false;
+          this.$message({
+            type: "info",
+            message: "已取消操作"
+          });
+        });
+    },
+    //TODO 暂时关闭SL
+    ShippingLabelOption() {
+      this.addRefundForm.slUseable = "0";
+
+      if (
+        this.refundType == 3 &&
+        this.queryRefundType == 3 &&
+        this.addressInfo &&
+        this.addressInfo.length > 0 &&
+        this.addressInfo[0].receiverCountryCode == "US" &&
+        (this.addRefundForm.warehouseCode == "PSJ-H0000024" ||
+          this.addRefundForm.warehouseCode == "PSJ-H0000019" ||
+          this.addRefundForm.warehouseCode == "PSJ-H0000011" ||
+          this.addRefundForm.warehouseCode == "PSJ-G001001" ||
+          this.addRefundForm.warehouseCode == "PSJ-G001003" ||
+          this.addRefundForm.warehouseCode == "PSJ-G001004")
+      ) {
+        this.addRefundForm.slUseable = "1";
+      } else {
+        this.addRefundForm.slUseable = "0";
+      }
+    },
+    changeSlradio() {
+      if (this.addRefundForm.slUseable == "0") {
+        this.addRefundForm.shipmodeId = "";
+        this.addRefundForm.shippingNo = "";
+      }
+    },
+    back() {
+      this.$emit("back");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.head {
+  padding: 0px 20px;
+  display: flex;
+  justify-content: space-between;
+  span:nth-child(1) {
+    font-size: 15px;
+    line-height: 25px;
+    color: #909399;
+    font-weight: 600;
+  }
+  span:nth-child(2) {
+    line-height: 25px;
+    cursor: pointer;
+    color: #ae8878;
+    font-size: 13px;
+  }
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 82px;
+  height: 82px;
+  line-height: 82px;
+  text-align: center;
+  border-radius: 3px;
+  border: 1px solid #dcdfe6;
+  margin-left: 49px;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.dialog_container {
+  position: relative;
+}
+.main {
+  margin-top: 15px;
+  .box {
+    .item_title {
+      color: #606266;
+      font-size: 16px !important;
+      line-height: 16px;
+      position: relative;
+      padding-left: 8px !important;
+      &:before {
+        position: absolute;
+        left: 0px;
+        top: 13px;
+        content: "";
+        display: inline-block;
+        width: 3px;
+        height: 13px;
+        background: #ae8877;
+        border-radius: 0px 0px 0px 0px;
+      }
+    }
+    .box_item {
+      padding: 0 20px;
+      display: flex;
+      .item_title {
+        line-height: 40px;
+        font-size: 18px;
+        text-align: left;
+        font-weight: 600;
+      }
+      .item_list {
+        text-align: left;
+        font-size: 14px;
+        color: #606266;
+        display: flex;
+        p {
+          margin: 10px 0;
+        }
+        div:nth-child(2) {
+          margin-left: 30px;
+        }
+      }
+    }
+    .item_title {
+      padding-left: 20px;
+      line-height: 40px;
+      font-size: 18px;
+      text-align: left;
+      font-weight: 600;
+    }
+  }
+}
+
+.ptitle {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0px;
+  color: #1f2d3d;
+  text-align: left;
+  font-weight: bold;
+  width: 100%;
+  /deep/.el-descriptions__title {
+    color: #606266;
+  }
+}
+.filter-container {
+  .filter-item {
+    margin-right: 11px;
+  }
+}
+.container {
+  display: flex; /* 使用 Flexbox 布局 */
+  justify-content: space-between; /* 将盒子平均分布在容器中 */
+}
+.row {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  /deep/.el-form-item {
+    display: flex;
+  }
+  .inputleft {
+    margin-right: 30px;
+    margin-left: 30px;
+  }
+  .row-item {
+    margin-right: 10vw;
+    &:last-child {
+      margin-right: 0px;
+    }
+  }
+  .afertextarea {
+    width: 306px;
+  }
+}
+.el-table {
+  font-size: 12px;
+  margin: 20px 0px;
+}
+.itemtable {
+  /deep/.has-gutter {
+    .el-table__cell {
+      background: #f5f0ee;
+      padding: 0px;
+    }
+  }
+}
+.total_box {
+  margin-bottom: 20px;
+  .item_box {
+    margin-top: 15px;
+  }
+}
+.btn_box {
+  position: absolute;
+  right: 0px;
+  bottom: -24px;
+  .el-button {
+    padding: 10px 37px;
+  }
+}
+</style>

src/views/oms/refund/components/orderRefundItemListTab.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div>
+    <div class="reason">
       <el-select
         v-if="this.multipleSelection && this.multipleSelection.length > 0"
         v-model="refundReasonAss"
@@ -27,6 +27,7 @@
       />
     </div>
     <el-table
+      class="itemtable"
       ref="multipleTable"
       @selection-change="handleSelectionChange"
       style="width: 100%;"
@@ -60,11 +61,8 @@
         align="center"
         prop=""
       >
-        <template slot-scope="scope">
-          <div
-            v-if="scope.row.uniqueCode"
-            v-for="(item, index) in scope.row.uniqueCode"
-          >
+        <template slot-scope="scope" v-if="scope.row.uniqueCode">
+          <div v-for="(item, index) in scope.row.uniqueCode" :key="index">
             {{ item }}
           </div>
         </template>
@@ -86,7 +84,7 @@
       ></el-table-column>
       <el-table-column
         :label="$t('goodsPrice')"
-        width="80"
+        width="100"
         align="center"
         prop="price"
       >
@@ -94,7 +92,7 @@
 
       <el-table-column
         :label="$t('offerAmount')"
-        width="80"
+        width="100"
         align="center"
         prop="discountFee"
       >
@@ -102,7 +100,7 @@
 
       <el-table-column
         :label="$t('payAmount')"
-        width="80"
+        width="100"
         align="center"
         prop="totalFee"
       >
@@ -238,10 +236,18 @@
       <!--<el-table-column :label="$t('gifts')"  width="80" align="center" prop="">
         </el-table-column>-->
     </el-table>
-    <div class="box" style="width:100%;margin-top: 15px;float:right">
-      退款总计：{{ addRefundForm.refundTotalAmount }}
+    <div class="box total_box">
+      <div class="item_title">
+        {{ $t("view.totalRefund") }}
+      </div>
+      <div class="item_box">
+        {{ $t("view.totalRefund") }}：{{ addRefundForm.refundTotalAmount }}
+      </div>
     </div>
-    <div class="box" style="margin-top: 15px;float:right">
+    <!-- <div class="box" style="width:100%;margin-top: 15px;float:right">
+      退款总计：{{ addRefundForm.refundTotalAmount }}
+    </div> -->
+    <div class="save_button">
       <!-- <el-button
         :style="btnStyle"
         v-if="!addRefundForm.id"
@@ -252,12 +258,15 @@
       > -->
       <el-button
         :style="btnStyle"
-        v-if="addRefundForm.id"
+        v-if="addRefundForm.id && !manyfoldFlag"
         type="primary"
         @click="submitUpdate(this)"
         v-loading="btnLoading"
         >{{ $t("save") }}</el-button
       >
+      <el-button type="danger" class="backbtn" @click="back">{{
+        $t("back")
+      }}</el-button>
     </div>
   </div>
 </template>
@@ -273,6 +282,7 @@ import {
   getRefundInfo,
   updateRefund
 } from "@/api/oms/refund/refund";
+import i18n from "@/lang";
 import { dcmAdd, dcmSub, accDiv, accMul } from "@/utils/toolUtil";
 import { BigNumber } from "bignumber.js";
 export default {
@@ -303,7 +313,8 @@ export default {
       refundReasonList: [],
       refundReasonAss: "",
       refundOtherReasonAss: "",
-      otherReasonFlag: ""
+      otherReasonFlag: "",
+      manyfoldFlag: false
     };
   },
   created() {
@@ -322,16 +333,18 @@ export default {
         var params = {
           ormorder: _this.addRefundForm.ormorder,
           refundType: _this.addRefundForm.refundType,
-          storeId: _this.addRefundForm.storeId,
+          storeId: _this.addRefundForm.storeId
         };
         this.listLoading = true;
         queryOrderDetailsByOrmorder(params).then(res2 => {
           if (200 == res2.code) {
             //修改退款申请，订单项列表
             _this.tableOrderDeatils = res2.data;
-            console.log(JSON.stringify(res2.data), "查询到的订单明细");
-
             let goodsRefundAmount = BigNumber(0);
+            this.manyfoldFlag = res2.data.some(item => item.manyfoldFlag === 2); // 是否有多件多折的商品
+            if (this.manyfoldFlag) {
+              this.$message.error(i18n.t("label.manyfoldFlagTips"));
+            }
             this.refundReasonList = _this.addRefundForm.refundReasonList;
             if (_this.tableOrderDeatils) {
               for (let ind in _this.tableOrderDeatils) {
@@ -352,7 +365,7 @@ export default {
                       "refundAmount",
                       _this.addRefundForm.items[ind2].refundAmount
                     );
-                    
+
                     //退款原因
                     _this.$set(
                       _this.tableOrderDeatils[ind],
@@ -422,8 +435,6 @@ export default {
                 this.tableOrderDeatils.forEach(row => {
                   if (row.selectedRow == 1) {
                     this.$refs.multipleTable.toggleRowSelection(row, true);
-
-                    console.log(row, "回显的明细");
                   } else {
                     //											row.oldQuantity = row.quantity;
                     //											var fee=row.totalFee;
@@ -509,15 +520,14 @@ export default {
       if (this.multipleSelection && this.multipleSelection.length > 0) {
         for (let uy in this.multipleSelection) {
           var row = this.multipleSelection[uy];
-          if(!row.refundAmount){
+          if (!row.refundAmount) {
             row.refundAmount = BigNumber(row.totalFee)
-            .div(BigNumber(row.oldQuantity))
-            .multipliedBy(BigNumber(row.quantity))
-            .multipliedBy(BigNumber(row.refundSales))
-            .toNumber()
-            .toFixed(2);
+              .div(BigNumber(row.oldQuantity))
+              .multipliedBy(BigNumber(row.quantity))
+              .multipliedBy(BigNumber(row.refundSales))
+              .toNumber()
+              .toFixed(2);
           }
-          
         }
       } else {
         this.refundAmount = 0;
@@ -577,8 +587,6 @@ export default {
       this.taxAndShippingAmount = BigNumber(this.addRefundForm.refundTaxAmount)
         .plus(BigNumber(this.addRefundForm.refundPostageAmount))
         .toNumber();
-      console.log(this.taxAndShippingAmount, "退运费和退税金额之和");
-
       var refundAmount = BigNumber(0);
       if (this.multipleSelection && this.multipleSelection.length > 0) {
         for (let uy in this.multipleSelection) {
@@ -587,7 +595,6 @@ export default {
         }
         this.refundAmount = refundAmount.toNumber().toFixed(2);
       }
-      console.log(this.refundAmount, "商品退款金额");
       this.$set(this.addRefundForm, "refundAmount", this.refundAmount);
       this.$set(
         this.addRefundForm,
@@ -597,7 +604,6 @@ export default {
           .toNumber()
           .toFixed(2)
       );
-      console.log(this.addRefundForm.refundTotalAmount, "总退款金额");
     },
     //改变退款金额
     refundAmountChange() {
@@ -613,7 +619,6 @@ export default {
         .multipliedBy(BigNumber(row.refundSales))
         .toNumber()
         .toFixed(2);
-      console.log("当前行可退金额", row.refundAmount);
       this.jisuan();
     },
     //     submit() {
@@ -756,8 +761,8 @@ export default {
         .then(() => {
           for (let ind in this.multipleSelection) {
             var obj = this.multipleSelection[ind];
-            if(!obj.refundReason){
-              this.$alert(obj.ordersId+":请选择退款原因");
+            if (!obj.refundReason) {
+              this.$alert(obj.ordersId + ":请选择退款原因");
               this.btnLoading = false;
               return;
             }
@@ -798,9 +803,67 @@ export default {
             message: "已取消操作"
           });
         });
+    },
+    back() {
+      this.$emit("back");
     }
   }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.reason {
+  position: absolute;
+  top: -58px;
+  left: 118px;
+}
+.el-table {
+  font-size: 12px;
+  margin: 20px 0px;
+  width: 96vw !important;
+  overflow-x: auto;
+}
+.itemtable {
+  /deep/.has-gutter {
+    .el-table__cell {
+      background: #f5f0ee;
+      padding: 0px;
+    }
+  }
+}
+.el-table {
+  margin: 0px !important;
+}
+.box {
+  position: relative;
+  .item_title {
+    color: #606266;
+    font-size: 16px !important;
+    line-height: 16px;
+    position: relative;
+    padding-left: 8px !important;
+    &:before {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      content: "";
+      display: inline-block;
+      width: 3px;
+      height: 13px;
+      background: #ae8877;
+      border-radius: 0px 0px 0px 0px;
+    }
+  }
+  .item_box {
+    margin-top: 15px;
+  }
+}
+.total_box {
+  margin-bottom: 20px;
+  margin-top: 30px;
+}
+.save_button {
+  margin-top: 30px;
+  text-align: right;
+}
+</style>

src/views/oms/refund/components/orderRefundNewDialog copy.vue

@@ -0,0 +1,919 @@
+<template>
+  <div v-loading.fullscreen.lock="detailLoading">
+    <div class="head">
+      <!--		<span>销售单详情</span>
+ 			<span>返回</span>
+ -->
+    </div>
+    <div class="main">
+      <!-- <div class="box" style="margin-top: 15px;">
+				<div class="item_title">
+					<span>基本信息</span>
+				</div>
+				<div class="ptitle">
+					<baseInfoTab :orderInfo="orderInfo"></baseInfoTab>
+				</div>
+			</div> -->
+
+      <div class="box" style="margin-top: 15px;">
+        <div class="item_title">
+          <span>{{ $t("view.shippingInfo") }}</span>
+        </div>
+        <div class="ptitle">
+          <!-- <receivingInfoTab :addressInfo="addressInfo" :orderInfo="orderInfo"></receivingInfoTab> -->
+          <template>
+            <el-descriptions
+              class="margin-top"
+              :title="$t('title.addressInfo')"
+              :column="4"
+              direction="horizontal"
+              v-if="addressInfo.length == 1"
+            >
+              <el-descriptions-item :label="$t('country')">{{
+                addressInfo[0].receiverCountryCode
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('label.postalCode')">{{
+                addressInfo[0].receiverZip
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('state')">{{
+                addressInfo[0].receiverState
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('city')">{{
+                addressInfo[0].receiverCity
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('suburb')">{{
+                addressInfo[0].receiverDistrict
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('street')">{{
+                addressInfo[0].receiverStreet
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('address')">{{
+                addressInfo[0].receiverAddress
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('dooeNo')">{{
+                addressInfo[0].receiverAddress2
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('recipient')">{{
+                addressInfo[0].receiverName
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('telephone')">{{
+                addressInfo[0].receiverPhone
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('moPhone')">{{
+                addressInfo[0].receiverMobile
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('post')">{{
+                addressInfo[0].email
+              }}</el-descriptions-item>
+              <el-descriptions-item :label="$t('label.shippingFee')">{{
+                addressInfo[0].freight
+              }}</el-descriptions-item>
+            </el-descriptions>
+
+            <div class="container" width="500px" v-if="addressInfo.length > 1">
+              <div
+                v-for="(item, index) in addressInfo"
+                :key="index"
+                width="100px"
+                margin-right="50px"
+              >
+                <el-popover
+                  placement="top"
+                  :title="$t('title.addressInfo')"
+                  width="300"
+                  offset="300"
+                  trigger="hover"
+                >
+                  <el-descriptions
+                    class="margin-top"
+                    title=""
+                    :column="1"
+                    direction="horizontal"
+                  >
+                    <el-descriptions-item :label="$t('country')">{{
+                      item.receiverCountryCode
+                    }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('address')">{{
+                      item.receiverAddress
+                    }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('recipient')">{{
+                      item.receiverName
+                    }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('post')">{{
+                      item.email
+                    }}</el-descriptions-item>
+                    <el-descriptions-item :label="$t('label.shippingFee')">{{
+                      item.freight
+                    }}</el-descriptions-item>
+                  </el-descriptions>
+                  <el-button
+                    slot="reference"
+                    @click="changeRefund(item.idList)"
+                    >{{ item.receiverCountryCode }}</el-button
+                  >
+                </el-popover>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <div
+        class="box"
+        style="margin-top: 15px;padding-bottom: 10px;"
+        v-if="invoiceInfo != null"
+      >
+        <div class="item_title">
+          <span>{{ $t("view.invoiceDetails") }}</span>
+        </div>
+        <div class="ptitle">
+          <invoiceInfoTab :invoiceInfo="invoiceInfo"></invoiceInfoTab>
+        </div>
+      </div>
+
+      <div
+        class="box"
+        style="margin-top: 15px;padding-bottom: 10px;"
+        v-loading="fromLoading"
+      >
+        <div class="item_title">
+          <span>{{ $t("view.refundInfo") }}</span>
+        </div>
+        <div class="ptitle">
+          <el-form
+            ref="addRefundForm"
+            :model="addRefundForm"
+            label-width="auto"
+          >
+            <el-form-item :label="$t('currency')">
+              <el-input
+                disabled
+                v-model="addRefundForm.currency"
+                placeholder
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('label.afterSalesType')" required>
+              <el-select
+                :placeholder="$t('place.pleaseSelect')"
+                @change="changeRefund(null)"
+                clearable
+                style="width: 200px;"
+                class="filter-item"
+                v-model="addRefundForm.refundType"
+              >
+                <el-option
+                  v-for="afterSaleType in afterSaleTypes"
+                  :disabled="afterSaleType.disabled"
+                  :key="afterSaleType.value"
+                  :label="$t(afterSaleType.label)"
+                  :value="afterSaleType.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('label.expectedRefundAmount')" required>
+              <el-input
+                v-model="addRefundForm.refundTotalAmount"
+                :disabled="true"
+              />
+            </el-form-item>
+            <el-form-item :label="$t('label.refundMethod')" required="">
+              <!-- <el-input  v-model="addRefundForm.refundMethod" :placeholder="$t('place.pleaseFillIn')" class="normal-input"></el-input> -->
+              <el-radio-group v-model="addRefundForm.refundMethod">
+                <el-radio label="system">{{
+                  $t("view.systemRefund")
+                }}</el-radio>
+                <el-radio label="manual">{{
+                  $t("view.manualRefund")
+                }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="addRefundForm.refundMethod == 'manual'"
+              :label="$t('label.accountType')"
+              required=""
+            >
+              <el-radio-group v-model="addRefundForm.refundAccountType">
+                <el-radio label="PayPal">PayPal</el-radio>
+                <!-- 银行卡暂时隐藏 -->
+                <!-- <el-radio label="bankCard">银行卡</el-radio> -->
+                <!-- <el-radio label="Gift Card">Gift Card</el-radio> -->
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              :label="$t('label.receivingAccount')"
+              v-if="
+                addRefundForm.refundMethod == 'manual' &&
+                  addRefundForm.refundAccountType == 'PayPal'
+              "
+              required
+            >
+              <el-input
+                v-model="addRefundForm.refundAccount"
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <!-- 选择是否退税-->
+            <el-form-item
+              v-if="addRefundForm.refundType"
+              :label="$t('label.taxRefund')"
+            >
+              <el-radio-group
+                v-model="addRefundForm.refundTaxAble"
+                @change="calculateRefundAmount"
+              >
+                <el-radio label="0">{{ $t("view.noTaxRefund") }}</el-radio>
+                <el-radio label="1">{{ $t("view.taxRefund") }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="addRefundForm.refundTaxAble == 1"
+              :label="$t('label.taxRefundAmount')"
+            >
+              <el-input-number
+                v-model="addRefundForm.refundTaxAmount"
+                :min="0.0"
+                :step="0.01"
+                step-strictly
+                @change="calculateRefundAmount"
+              ></el-input-number>
+            </el-form-item>
+            <!-- 选择是否退运费-->
+            <el-form-item
+              v-if="addRefundForm.refundType"
+              :label="$t('label.shippingFee')"
+            >
+              <el-radio-group
+                v-model="addRefundForm.refundPostage"
+                @change="calculateRefundAmount"
+              >
+                <el-radio label="0">{{ $t("view.noRefund") }}</el-radio>
+                <el-radio label="1">{{
+                  $t("view.refundShippingFee")
+                }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="addRefundForm.refundPostage == 1"
+              :label="$t('label.returnShippingFeeAmount')"
+            >
+              <el-input-number
+                v-model="addRefundForm.refundPostageAmount"
+                :min="0.0"
+                :step="0.01"
+                step-strictly
+                @change="calculateRefundAmount"
+              ></el-input-number>
+            </el-form-item>
+            <!-- <el-form-item v-if="addRefundForm.refundType==3" :label="$t('label.receivingReturnWarehouse')"> -->
+            <!-- <el-select :placeholder="$t('place.pleaseSelect')" clearable style="width: 200px;" class="filter-item" v-model="addRefundForm.warehouseCode"> -->
+            <!-- <el-option v-for="item in warehouseItems" :key="item.key" :label="item.key" :value="item.value"></el-option> -->
+            <!-- </el-select> -->
+            <!-- </el-form-item> -->
+            <el-form-item
+              v-if="addRefundForm.refundType == 3"
+              :label="$t('label.receivingReturnWarehouse')"
+            >
+              <el-select
+                :placeholder="$t('place.pleaseSelect')"
+                clearable
+                style="width: 200px;"
+                class="filter-item"
+                v-model="addRefundForm.warehouseCode"
+                @change="ShippingLabelOption"
+              >
+                <el-option
+                  v-for="item in warehouseItems"
+                  :key="item.key"
+                  :label="item.key"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+
+            <!-- TODO 暂时关闭SL -->
+            <el-form-item
+              v-if="
+                addRefundForm.warehouseCode == 'PSJ-G001001' ||
+                  addRefundForm.warehouseCode == 'PSJ-G001003' ||
+                  addRefundForm.warehouseCode == 'PSJ-H0000019' ||
+                  addRefundForm.warehouseCode == 'PSJ-H0000011' ||
+                  addRefundForm.warehouseCode == 'PSJ-H0000024' ||
+                  addRefundForm.warehouseCode == 'PSJ-G001004'
+              "
+              label="ShippingLabel"
+            >
+              <el-radio-group
+                v-model="addRefundForm.slUseable"
+                @change="changeSlradio()"
+              >
+                <el-radio label="0" value="0">{{
+                  $t("view.notEnabled")
+                }}</el-radio>
+                <el-radio label="1" value="1">{{
+                  $t("view.enabled")
+                }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <el-form-item
+              v-if="
+                addRefundForm.refundType == 3 && addRefundForm.slUseable == '1'
+              "
+              :label="$t('label.returnLogisticsCompanyCode')"
+            >
+              <el-input
+                v-model="addRefundForm.shipmodeId"
+                disabled
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                addRefundForm.refundType == 3 && addRefundForm.slUseable == '1'
+              "
+              :label="$t('label.returnLogisticsNumber')"
+            >
+              <el-input
+                v-model="addRefundForm.shippingNo"
+                disabled
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+
+            <el-form-item
+              v-if="
+                addRefundForm.refundType == 3 && addRefundForm.slUseable == '0'
+              "
+              :label="$t('label.returnLogisticsCompanyCode')"
+            >
+              <el-input
+                v-model="addRefundForm.shipmodeId"
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                addRefundForm.refundType == 3 && addRefundForm.slUseable == '0'
+              "
+              :label="$t('label.returnLogisticsNumber')"
+            >
+              <el-input
+                v-model="addRefundForm.shippingNo"
+                :placeholder="$t('place.pleaseFillIn')"
+                class="normal-input"
+              ></el-input>
+            </el-form-item>
+            <!-- <el-form-item v-if="addRefundForm.refundType==1" clearable :label="$t('label.refundReason')">
+              <el-select  :placeholder="$t('place.pleaseSelect')" clearable v-model="addRefundForm.refundReason" class="filter-item"  @change="refundChange(allReason,addRefundForm.refundReason)">
+                <el-option v-for="status in allReason"
+                           v-if="status.reasonType=='1'"
+                           :key="status.id"
+                           :label="status.reasonContentChinese"
+                           :value="status.id">
+                </el-option>
+              </el-select>
+            </el-form-item> -->
+            <!-- <el-form-item v-if="addRefundForm.refundType==2" clearable :label="$t('label.refundReason')" >
+              <el-select  :placeholder="$t('place.pleaseSelect')" clearable v-model="addRefundForm.refundReason" class="filter-item"  @change="refundChange(allReason,addRefundForm.refundReason)">
+                <el-option v-for="status in allReason"
+                           v-if="status.reasonType=='2'"
+                           :key="status.id"
+                           :label="status.reasonContentChinese"
+                           :value="status.id">
+                </el-option>
+              </el-select>
+            </el-form-item> -->
+            <!-- <el-form-item v-if="addRefundForm.refundType==3" clearable :label="$t('label.refundReason')">
+              <el-select  :placeholder="$t('place.pleaseSelect')" clearable v-model="addRefundForm.refundReason" class="filter-item" @change="refundChange(allReason,addRefundForm.refundReason)">
+                <el-option v-for="status in allReason"
+                           v-if="status.reasonType=='3'"
+                           :key="status.id"
+                           :label="status.reasonContentChinese"
+                           :value="status.id">
+                </el-option>
+              </el-select>
+            </el-form-item> -->
+            <!-- <el-form-item v-if="customOpen=='1'" :label="$t('label.reasonExplanation')">
+              <el-input type="textarea" :placeholder="$t('place.enterReason')" v-model="addRefundForm.otherReason" style="width: 200px;" :rows="3"></el-input>
+            </el-form-item> -->
+
+            <el-form-item :label="$t('label.afterSalesInstructions')">
+              <el-input
+                type="textarea"
+                :placeholder="$t('place.enterContent')"
+                v-model="addRefundForm.notes"
+                maxlength="150"
+                show-word-limit
+              >
+              </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('label.uploadVoucher')">
+              <el-upload
+                class="avatar-uploader"
+                :action="uploadPhotos"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload"
+                :headers="headers"
+              >
+                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+
+      <div class="box" style="margin-top: 15px;" v-if="refundType">
+        <div class="item_title">
+          <span>{{ $t("view.selectItems") }}</span>
+        </div>
+        <div class="ptitle">
+          <orderRefundItemListNewTab
+            v-if="refundType"
+            :addRefundForm="addRefundForm"
+            :refundType="addRefundForm.refundType"
+          ></orderRefundItemListNewTab>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getById,
+  queryOrderDetails,
+  getAllReason,
+  getDetailListForRefund
+} from "@/api/oms/order/order";
+import { queryByOrdersId as getAddress } from "@/api/oms/order/address";
+import { getById as getInvoice } from "@/api/oms/order/invoice";
+import global from "@/views/oms/global";
+import baseInfoTab from "@/views/oms/order/components/baseInfoTab";
+import invoiceInfoTab from "@/views/oms/order/components/invoiceInfoTab";
+import optLogTab from "@/views/oms/order/components/optLogTab";
+import orderRefundItemListNewTab from "./orderRefundItemListNewTab";
+import receivingInfoTab from "@/views/oms/order/components/receivingInfoTab";
+import {
+  warehouseList,
+  getNewRefundInfo,
+  getDetailListByRefundId
+} from "@/api/oms/refund/refund";
+import { getToken } from "@/utils/auth";
+import { dcmAdd, dcmSub, accDiv, accMul } from "@/utils/toolUtil";
+import { BigNumber } from "bignumber.js";
+export default {
+  name: "orderRefundNewDialog",
+  props: ["refundId"],
+  components: {
+    baseInfoTab,
+    invoiceInfoTab,
+    optLogTab,
+    orderRefundItemListNewTab,
+    receivingInfoTab
+  },
+  data() {
+    return {
+      orderInfo: {},
+      addressInfo: {},
+      orderDeatils: [],
+      invoiceInfo: null,
+      detailLoading: false,
+      imageUrl: "",
+      allReason: {},
+      customOpen: "",
+      listQuery: {
+        ormorder: null,
+        shopify: null,
+        refundType: null,
+        idList: null
+      },
+      addRefundForm: {
+        refundMethod: "system",
+        refundPostage: "0",
+        refundAmount: 0.0, //商品退款金额
+        refundPostageAmount: 0.0,
+        warehouseCode: "",
+        annexPath: "",
+        items: [],
+        oldQuantity: 0,
+        refundTaxAble: "0", //是否退税
+        refundTaxAmount: 0.0, //退税金额
+        refundTotalAmount: 0.0, //总计退款金额 = 商品退款金额 + 退运费金额 + 退税金额 。 实际执行时，refundAmount=商品退款金额 + 退税金额；退运费金额单独计算
+        refundReason: "", // 退款原因
+        otherReason: "", // 其他退款理由
+        slUseable: "0", //是否开启ShippingLabel选项
+        refundAccount: "",
+        refundAccountType: "",
+        ormorder: "",
+        refundReasonList: ""
+      },
+      afterSaleTypes: "",
+      warehouseItems: [],
+      fromLoading: false,
+      uploadPhotos: process.env.VUE_APP_OMS_API + "ordersRefund/uploadPhotos",
+      refundType: false
+    };
+  },
+  created() {
+    // this.getOrderInfo();
+    this.getDetailListByRefundId(this.refundId);
+  },
+  computed: {
+    // 计算属性的 getter
+    headers: function() {
+      return {
+        "X-Token": getToken()
+      };
+    }
+  },
+  methods: {
+    //计算退款总额 商品退款金额 + 退运费金额 +退税金额
+    calculateRefundAmount() {
+      //如果没选择退税
+      if (this.addRefundForm.refundTaxAble != "1") {
+        this.addRefundForm.refundTaxAmount = BigNumber(0)
+          .toNumber()
+          .toFixed(2);
+      }
+      //如果没选择退运费
+      if (this.addRefundForm.refundPostage != "1") {
+        this.addRefundForm.refundPostageAmount = BigNumber(0)
+          .toNumber()
+          .toFixed(2);
+      }
+
+      var taxAndShippingAmount = BigNumber(this.addRefundForm.refundTaxAmount)
+        .plus(BigNumber(this.addRefundForm.refundPostageAmount))
+        .toNumber()
+        .toFixed(2);
+
+      this.addRefundForm.refundTotalAmount = BigNumber(taxAndShippingAmount)
+        .plus(BigNumber(this.addRefundForm.refundAmount))
+        .toNumber()
+        .toFixed(2);
+    },
+    getDetailListByRefundId(refundId) {
+      //初始化数据
+      this.addRefundForm.refundAmount = 0.0;
+      this.addRefundForm.refundPostage = "0";
+      this.addRefundForm.refundPostageAmount = 0.0;
+      this.addRefundForm.warehouseCode = "";
+      this.addRefundForm.annexPath = "";
+      this.addRefundForm.items = [];
+      this.addRefundForm.oldQuantity = 0.0;
+      this.addRefundForm.refundTaxAble = "0"; //是否退税
+      this.addRefundForm.refundTaxAmount = 0.0; //退税金额
+      this.addRefundForm.refundTotalAmount = 0.0;
+      this.addRefundForm.shipmodeId = "";
+      this.addRefundForm.shippingNo = "";
+      this.addRefundForm.refundMethod = "system";
+      this.addRefundForm.refundAccountType = "PayPal";
+      this.addRefundForm.refundAccount = "";
+      this.addRefundForm.notes = "";
+      this.addressInfo = [];
+      this.reasonListAll = [];
+      this.refundReasonAss = "";
+      this.refundOtherReasonAss = "";
+      this.otherReasonFlag = "";
+      //查询该退款单的数据
+      this.detailLoading = true;
+      let _this = this;
+      getDetailListByRefundId(refundId).then(res => {
+        if (200 == res.code) {
+          this.addRefundForm = res.data;
+          this.addressInfo = res.data.addressList;
+          this.afterSaleTypes = global.afterSaleType; //售后类型
+
+          //循环订单项信息
+          let refundGoodsAmount = BigNumber(0);
+          if (this.addRefundForm.items) {
+            for (let ind in this.addRefundForm.items) {
+              refundGoodsAmount = refundGoodsAmount.plus(
+                BigNumber(this.addRefundForm.items[ind].refundAmount)
+              );
+            }
+          }
+          _this.$set(
+            this.addRefundForm,
+            "refundAmount",
+            BigNumber(refundGoodsAmount.toFixed(2))
+          ); //this.addRefundForm.refundAmount= refundGoodsAmount.toFixed(2);
+          //原单的退税金额 = 原单的退款总金额 - 退商品金额 - 退运费金额
+          let oldRefundTaxAmount = BigNumber(
+            this.addRefundForm.refundTotalAmount
+          )
+            .plus(BigNumber(-this.addRefundForm.refundPostageAmount))
+            .plus(BigNumber(-this.addRefundForm.refundAmount))
+            .toFixed(2);
+
+          if (oldRefundTaxAmount > 0) {
+            _this.$set(this.addRefundForm, "refundTaxAble", "1"); //是否退税
+          } else {
+            oldRefundTaxAmount = 0;
+            _this.$set(this.addRefundForm, "refundTaxAble", "0"); //是否退税
+          }
+          _this.$set(this.addRefundForm, "refundTaxAmount", oldRefundTaxAmount); //是否退税 this.addRefundForm.refundTaxAmount=oldRefundTaxAmount;
+          this.refundType = true;
+
+          this.detailLoading = false;
+
+          //退货退款场景
+          if (this.addRefundForm.refundType == 3) {
+            warehouseList().then(res => {
+              if (200 == res.code) {
+                this.warehouseItems = res.data;
+              }
+            });
+          }
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    handleAvatarSuccess(res, file) {
+      console.log("图片上传结果", res);
+      this.imageUrl = res.accessUrl;
+      if (this.imageUrl) {
+        this.addRefundForm.annexPath = this.imageUrl;
+      }
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG) {
+        this.$message.error("上传图片只能是 JPG 格式或者PNG格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
+
+    refundChange(arr, id) {
+      console.log(arr, id);
+      arr.forEach(item => {
+        if (item.id == id) {
+          this.customOpen = item.custom;
+        }
+      });
+    },
+    changeRefund(idList) {
+      this.fromLoading = true;
+      this.refundType = false;
+      this.orderDeatils = [];
+      this.addRefundForm.refundAmount = 0.0;
+      this.addRefundForm.refundPostage = "0";
+      this.addRefundForm.refundPostageAmount = 0.0;
+      this.addRefundForm.refundTaxAble = "0"; //是否退税
+      this.addRefundForm.refundTaxAmount = 0.0; //退税金额
+      this.addRefundForm.refundTotalAmount = 0.0; //总计退款金额 = 退款金额 + 退运费金额 + 退税金额 。 实际执行时，refundAmount=商品退款金额 + 退税金额；退运费金额单独计算
+      this.addRefundForm.warehouseCode = "";
+      this.addRefundForm.annexPath = "";
+      this.addRefundForm.items = [];
+      this.addRefundForm.oldQuantity = 0;
+      this.warehouseItems = [];
+      this.addRefundForm.refundReason = "";
+      this.addRefundForm.otherReason = "";
+      //退货退款场景
+      if (this.addRefundForm.refundType == 3) {
+        warehouseList().then(res => {
+          if (200 == res.code) {
+            this.warehouseItems = res.data;
+          }
+        });
+      }
+      this.listQuery.refundType = this.addRefundForm.refundType;
+      this.listQuery.ormorder = this.addRefundForm.ormorder;
+      if (idList) {
+        var addressIds = "";
+        for (let id in idList) {
+          addressIds = addressIds + idList[id] + ",";
+        }
+        this.listQuery.idList = addressIds.slice(0, addressIds.length - 1);
+      }
+      getDetailListForRefund(this.listQuery).then(res => {
+        console.log("调用log中接口getDetailListForRefund");
+        if (200 == res.code) {
+          // this.queryRefundType = res.data.refundType;
+          // this.queryShopify = res.data.shopify;
+          // this.tableOrderDeatils = res.data.list;
+          this.addRefundForm.currency = res.data.currency;
+          this.addressInfo = res.data.addressList;
+          this.addRefundForm.ormorder = res.data.ormorder;
+          this.addRefundForm.refundReasonList = res.data.refundReasonList;
+          // this.reasonListAll = res.data.refundReasonList;
+
+          this.orderDeatils = res.data.list;
+          if (this.orderDeatils) {
+            this.addRefundForm.items = this.orderDeatils;
+            for (let ind in this.orderDeatils) {
+              this.orderDeatils[ind].oldQuantity = this.orderDeatils[
+                ind
+              ].quantity;
+              if (this.addRefundForm.refundType == 1) {
+                this.orderDeatils[ind].quantity = 0;
+              }
+              var fee = this.orderDeatils[ind].totalFee;
+              if (fee == null || fee == "") {
+                fee = 0.0;
+              }
+              this.$set(this.orderDeatils[ind], "refundAmount", fee);
+              if (this.orderDeatils[ind].refundQuantity == null) {
+                this.orderDeatils[ind].refundQuantity = 0;
+              }
+              this.orderDeatils[ind].refundReason = "";
+            }
+            this.refundType = true;
+          }
+        } else {
+          this.fromLoading = false;
+          this.$message.error(res.msg);
+        }
+        this.fromLoading = false;
+      });
+      this.fromLoading = false;
+    },
+    ShippingLabelOption() {
+      this.addRefundForm.slUseable = "0";
+
+      if (
+        this.listQuery.refundType == 3 &&
+        this.queryRefundType == 3 &&
+        this.addressInfo &&
+        this.addressInfo.length > 0 &&
+        this.addressInfo[0].receiverCountryCode == "US" &&
+        (this.addRefundForm.warehouseCode == "PSJ-H0000024" ||
+          this.addRefundForm.warehouseCode == "PSJ-H0000019" ||
+          this.addRefundForm.warehouseCode == "PSJ-H0000011" ||
+          this.addRefundForm.warehouseCode == "PSJ-G001001" ||
+          this.addRefundForm.warehouseCode == "PSJ-G001003" ||
+          this.addRefundForm.warehouseCode == "PSJ-G001004")
+      ) {
+        this.addRefundForm.slUseable = "1";
+      } else {
+        this.addRefundForm.slUseable = "0";
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.head {
+  padding: 0 20px;
+  height: 25px;
+  box-shadow: 0px 7px 6px -6px #f8eeee;
+  display: flex;
+  justify-content: space-between;
+  span:nth-child(1) {
+    font-size: 15px;
+    line-height: 25px;
+    color: #909399;
+    font-weight: 600;
+  }
+  span:nth-child(2) {
+    line-height: 25px;
+    cursor: pointer;
+    color: #ae8878;
+    font-size: 13px;
+  }
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+
+.big_box {
+  min-width: 650px;
+  border: 1px solid #e4e7ed;
+  border-bottom: none;
+}
+
+.big_box div {
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+}
+
+.big_box p {
+  margin: 0;
+  height: 30px;
+  line-height: 30px;
+  font-size: 13px;
+  font-weight: bold;
+  border-right: 1px solid #e4e7ed;
+  padding: 0 5px;
+  text-align: center;
+  color: #909399;
+  min-width: 100px;
+}
+
+.w {
+  font-weight: 500 !important;
+  color: #606266 !important;
+  text-align: left !important;
+  padding-left: 20px !important;
+}
+
+.main {
+  margin-top: 15px;
+  .box {
+    text-align: center;
+    position: relative;
+    .box_item {
+      padding: 0 20px;
+      display: flex;
+      .item_title {
+        line-height: 40px;
+        font-size: 18px;
+        text-align: left;
+        font-weight: 600;
+      }
+      .item_list {
+        text-align: left;
+        font-size: 14px;
+        color: #606266;
+        display: flex;
+        p {
+          margin: 10px 0;
+        }
+        div:nth-child(2) {
+          margin-left: 30px;
+        }
+      }
+    }
+    .item_title {
+      padding-left: 20px;
+      line-height: 40px;
+      font-size: 18px;
+      text-align: left;
+      font-weight: 600;
+    }
+  }
+}
+
+.ptitle {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px;
+  color: #1f2d3d;
+  text-align: left;
+  font-weight: bold;
+}
+
+.pcode {
+  color: #8f5842;
+  font-weight: 500;
+}
+
+.demo-table-expand {
+  font-size: 0;
+}
+
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+
+.container {
+  display: flex; /* 使用 Flexbox 布局 */
+  justify-content: space-between; /* 将盒子平均分布在容器中 */
+}
+</style>

src/views/oms/refund/refundList.vue

@@ -537,7 +537,7 @@
             "
             type="success"
             size="mini"
-            @click="handleRefund(scope.row.id)"
+            @click="handleRefund(scope.row)"
             >{{ $t("view.edit") }}
           </el-button>
           <el-button
@@ -545,7 +545,7 @@
             v-if="scope.row.status == '7'"
             type="success"
             size="mini"
-            @click="createRefund(scope.row.id)"
+            @click="createRefund(scope.row)"
             >{{ $t("view.create") }}
           </el-button>
           <!--          <el-button-->
@@ -762,31 +762,33 @@
         >
       </div>
     </el-dialog>
-    <!--售后-->
+    <!--售后 编辑-->
     <el-dialog
       :title="$t('orderRefund')"
       :fullscreen="true"
       v-if="orderRefundVisible"
       :visible.sync="orderRefundVisible"
     >
-      <orderRefundDialog :refundId="currentRefundId"></orderRefundDialog>
-      <el-button type="danger" style="float:right" @click="backTable">{{
-        $t("back")
-      }}</el-button>
+      <orderRefundDialog :params="{ ...currentObj }" @back="backTable" />
     </el-dialog>
-
+    <!--售后 新建-->
     <el-dialog
       :title="$t('orderRefund')"
       :fullscreen="true"
       v-if="orderRefundNewVisible"
       :visible.sync="orderRefundNewVisible"
     >
-      <orderRefundNewDialog :refundId="currentRefundId"></orderRefundNewDialog>
-      <el-button type="danger" style="float:right" @click="backTable">{{
+      <orderRefundNewDialog :params="{ ...currentObj }" @back="backTable" />
+      <!-- <orderRefundNewDialog
+        :refundId="currentRefundId"
+        :ormorder="currentOrmorder"
+        :refundType="currentrefundType"
+      ></orderRefundNewDialog> -->
+      <!-- <el-button type="danger" style="float:right" @click="backTable">{{
         $t("back")
-      }}</el-button>
+      }}</el-button> -->
     </el-dialog>
-
+    <!--创建退款单-->
     <el-dialog
       :title="$t('title.createRefundOrder')"
       :fullscreen="true"
@@ -1034,6 +1036,7 @@ export default {
       stores: [],
       refundInfoVisible: false,
       currentRefundId: "",
+      currentObj: {},
       upload: {
         // 是否显示弹出层（导入）
         open: false,
@@ -1373,16 +1376,27 @@ export default {
     },
 
     //编辑退款申请
-    handleRefund(currentRefundId) {
-      this.currentRefundId = currentRefundId;
+    handleRefund(row) {
+      const { refundType, ormorder, id, storeId } = row;
+      this.currentObj = {
+        refundType,
+        ormorder,
+        id,
+        storeId
+      };
       // this.currentOrdersId = ordersId;
       this.orderRefundVisible = true;
     },
 
     //新建退款信息
-    createRefund(currentRefundId) {
-      this.currentRefundId = currentRefundId;
-      // this.currentOrdersId = ordersId;
+    createRefund(row) {
+      const { refundType, ormorder, id, storeId } = row;
+      this.currentObj = {
+        refundType,
+        ormorder,
+        id,
+        storeId
+      };
       this.orderRefundNewVisible = true;
     },