goelia-ai-admin/src/views/oms/refund/refundCwList.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        :placeholder="$t('place.afterSalesType')"
        clearable
        style="width: 200px;"
        class="filter-item"
        v-model="listQuery.refundType"
      >
        <el-option
          v-for="afterSaleType in afterSaleTypes"
          :key="afterSaleType.value"
          :label="$t(afterSaleType.label)"
          :value="afterSaleType.value"
        >
        </el-option>
      </el-select>
      <el-select
        :placeholder="$t('label.returnWarehouse')"
        style="width: 200px;"
        class="filter-item"
        clearable
        filterable
        v-model="listQuery.warehouseCode"
      >
        <el-option
          v-for="item in warehouse"
          :key="item.returnWarehouseCode"
          :label="item.returnWarehouseName"
          :value="item.returnWarehouseCode"
        />
      </el-select>

      <el-select
        v-model="listQuery.exchangeFlag"
        :clearable="true"
        class="filter-item"
        style="width: 200px;"
        :placeholder="$t('exchangeFlag')"
      >
        <el-option key="1" :label="$t('label.yes')" value="1"></el-option>
        <el-option key="0" :label="$t('label.no')" value="0"></el-option>
      </el-select>

      <el-select
        v-model="listQuery.channelCode"
        :clearable="true"
        filterable
        class="filter-item"
        style="width: 200px;"
        :placeholder="$t('place.channel')"
        @change="getStore"
      >
        <el-option
          v-for="item in channel"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="listQuery.storeId"
        :clearable="true"
        filterable
        class="filter-item"
        style="width: 200px;"
        :placeholder="$t('place.shopName')"
        @change="getChannel"
      >
        <el-option
          v-for="item in store"
          :key="item.storeId"
          :label="item.storeName"
          :value="item.storeId"
        >
        </el-option>
      </el-select>

      <el-input
        :placeholder="$t('place.refundNumber')"
        clearable
        style="width: 200px;"
        class="filter-item"
        v-model="listQuery.refundNo"
      />
      <el-input
        :placeholder="$t('place.onlineRefundNumber')"
        clearable
        style="width: 200px;"
        class="filter-item"
        v-model="listQuery.ormRefundId"
      />
      <el-input
        :placeholder="$t('place.shopifyNumber')"
        clearable
        style="width: 200px;"
        class="filter-item"
        v-model="listQuery.shopify"
      />

      <el-input
        :placeholder="$t('place.onlineShopNumber')"
        clearable
        style="width: 200px;"
        class="filter-item"
        v-model="listQuery.ormorder"
      />

      <el-date-picker
        class="filter-item"
        style="display: inline-flex;"
        v-model="createTimePicker"
        type="datetimerange"
        :range-separator="$t('to')"
        :start-placeholder="$t('place.refundCreationStart')"
        :end-placeholder="$t('place.refundCreationEnd')"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00', '23:59:59']"
      >
      </el-date-picker>

      <el-select
        :placeholder="$t('place.inboundStatus')"
        clearable
        style="width: 200px;"
        class="filter-item"
        v-model="listQuery.inboundStatus"
      >
        <el-option value="success" :label="$t('label.normalReturn')" />
        <el-option value="returning" :label="$t('label.inReturnTransit')" />
        <el-option value="shipLost" :label="$t('label.shipmentLost')" />
        <el-option value="returnLost" :label="$t('label.returnLost')" />
      </el-select>
      <!--<el-input placeholder="收件人电话" style="width: 200px;"
        	class="filter-item"	v-model="listQuery.receiverMobile"/>-->

      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >{{ $t("view.search") }}</el-button
      >
    </div>

    <!--<div class="filter-container">
			<el-button v-waves class="filter-item" type="primary" @click="orderExport('orderItem')">退款明细导出</el-button>
		</div>-->
    <!--      展示红色背景-->
    <el-table
      style="width: 100%;"
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      row-key="id"
      stripe
      border
      fit
      highlight-current-row
      :cell-style="tableRowStyleName"
      @sort-change="sortMethod"
    >
      <el-table-column align="center" type="index"> </el-table-column>
      <el-table-column
        :label="$t('label.refundNumber')"
        width="200"
        align="center"
        prop="refundNo"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.onlineRefundNumber')"
        width="250"
        align="center"
        prop="ormRefundId"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.shopifyNumber')"
        width="200"
        align="center"
        prop="cutUser"
      >
      </el-table-column>
      <el-table-column
        :label="$t('storeName')"
        align="center"
        min-width="180"
        prop="storeName"
      ></el-table-column>
      <el-table-column
        :label="$t('label.onlineShopOrder')"
        width="150"
        align="center"
        prop="ormorder"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.onlineShopStatus')"
        width="150"
        align="center"
        prop="channelStatus"
      >
        <template slot-scope="scope">
          {{ scope.row.channelStatus | channelStatusFilter(that) }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('label.afterSalesType')"
        width="100"
        align="center"
        prop="refundType"
      >
        <template slot-scope="scope">
          {{ scope.row.refundType | refundTypeFilter(that) }}
        </template>
      </el-table-column>

      <!-- <el-table-column :label="$t('label.exchangeGoods')" prop="exchangeFlag" width = "100" >
        <template slot-scope="scope" >
         	{{ scope.row.exchangeFlag === "1" ? $t('label.yes') : $t('label.no') }}
        </template>
      </el-table-column> -->

      <el-table-column
        :label="$t('label.afterSalesInitiation')"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.originatorFlag == '1'">
            {{ $t("label.customerService") }}
          </div>
          <div v-if="scope.row.originatorFlag == '2'">
            {{ $t("label.buyer") }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('label.afterSalesStatus')"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag effect="dark" type="warning" v-if="scope.row.status == '4'">
            {{ scope.row.status | statusFilte(that) }}
          </el-tag>
          <el-tag effect="dark" type="info" v-else-if="scope.row.status == '7'">
            {{ scope.row.status | statusFilter(that) }}
          </el-tag>
          <el-tag effect="dark" type="success" v-else>
            {{ scope.row.status | statusFilter(that) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('label.applicationTime')"
        width="160"
        align="center"
        prop="timeplaced"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.applicant')"
        width="120"
        align="center"
        prop="userName"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.returnWarehouse')"
        width="120"
        align="center"
        prop="warehouseName"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.refundAmount')"
        width="100"
        align="center"
        prop="refundAmount"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.shippingRefund')"
        width="100"
        align="center"
        prop="refundPostageAmount"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.serviceNote')"
        width="150"
        align="center"
        prop="notes"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.buyerReasonNote')"
        width="150"
        align="center"
        prop="buyNotes"
      >
      </el-table-column>

      <el-table-column
        label="自动退款失败原因"
        width="150"
        align="center"
        :show-overflow-tooltip="true"
        prop="autoRefundFailureReason"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.channelID')"
        width="120"
        align="center"
        prop="channelCode"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.channelName')"
        width="140"
        align="center"
        prop="channelName"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.updateTime')"
        width="160"
        align="center"
        prop="lastupdate"
        :sortable="'custom'"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.updater')"
        width="120"
        align="center"
        prop="lastUserName"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.operation')"
        fixed="right"
        width="300"
        align="left"
      >
        <template slot-scope="scope">
          <!--          <el-button type="primary" size="mini" @click="handleInfo(scope.row.id,'view')">详情</el-button>-->
          <el-button
            v-has="'ordersRefund:checkKf'"
            v-if="
              scope.row.refundType == '3' &&
                (scope.row.status == '0' || scope.row.status == '4')
            "
            type="success"
            size="mini"
            @click="editInfo(scope.row)"
            >{{ $t("view.logistics") }}</el-button
          >
          <!--
					<el-button v-has="'ordersRefund:checkKf'" v-if="scope.row.status=='0' " type="success" size="mini" @click="handleInfo(scope.row.id,'cus_check')">审核</el-button>
-->
          <!--
					<el-button v-has="'ordersRefund:checkKf'" v-if="scope.row.status=='0' " type="success" size="mini" @click="handleRefund(scope.row.id,scope.row.ordersId)">编辑</el-button>
-->
          <el-button
            v-has="'ordersRefund:checkCw'"
            v-if="scope.row.status == '5'"
            type="success"
            size="mini"
            @click="handleInfo(scope.row.id, 'f_check')"
            >{{ $t("view.financialReview") }}</el-button
          >
          <!--	<el-button v-has="'ordersRefund:checkCw'" v-if="scope.row.status=='5' "  size="mini" type="success" @click="handleSuccess(scope.row)">退款成功
					</el-button>-->
          <el-button
            v-if="scope.row.status == '0' || scope.row.status == '4'"
            type="danger"
            size="mini"
            @click="cancelInfo(scope.row)"
            >{{ $t("view.cancel") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <swPage
      v-if="total > 0"
      key="2"
      :listQuery="listQuery"
      :total="total"
      pos="btmRight"
      @retPage="retPage"
    />
    <el-drawer
      :title="$t('title.afterSalesDetails')"
      :visible.sync="refundInfoVisible"
      v-if="refundInfoVisible"
      :direction="direction"
      size="90%"
    >
      <refundInfoDialog
        @refresh="refresh"
        :refundId="currentRefundId"
        :action="action"
      ></refundInfoDialog>
    </el-drawer>
    <el-dialog
      :title="$t('title.returnLogisticsInfo')"
      :visible.sync="dialogShippFormVisible"
      v-if="dialogShippFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="editShipp">
        <el-form-item :label="$t('label.returnWarehouse')" label-width="150px">
          <el-select
            :placeholder="$t('place.pleaseSelect')"
            clearable
            style="width: 200px;"
            class="filter-item"
            v-model="editShipp.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
          :label="$t('label.returnLogisticsCompany')"
          label-width="150px"
        >
          <el-input
            size="mini"
            v-model="editShipp.shipmodeId"
            :placeholder="$t('place.pleaseFillIn')"
            class="normal-input"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('label.returnExpressNumber')"
          label-width="150px"
        >
          <el-input
            size="mini"
            v-model="editShipp.shippingNo"
            :placeholder="$t('place.pleaseFillIn')"
            class="normal-input"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShippFormVisible = false">{{
          $t("view.cancel")
        }}</el-button>
        <!--        <el-button-->
        <!--          type="primary"-->
        <!--          @click="editShippSub(1)"-->
        <!--          v-loading="btnLoading"-->
        <!--          >暂存</el-button-->
        <!--        >-->
        <el-button
          type="primary"
          @click="editShippSub(1)"
          v-loading="btnLoading"
          >{{ $t("view.save") }}</el-button
        >
        <el-button
          type="primary"
          @click="editShippSub('')"
          v-loading="btnLoading"
          >{{ $t("view.confirm") }}</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('title.nullify')"
      :visible.sync="dialogFormCancelVisible"
      v-if="dialogFormCancelVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="cancelForm">
        <el-form-item :label="$t('label.cancellationNote')" label-width="120px">
          <el-input
            type="textarea"
            :placeholder="$t('place.enterContent')"
            v-model="cancelForm.zfnotes"
            maxlength="150"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormCancelVisible = false">{{
          $t("view.cancel")
        }}</el-button>
        <el-button
          type="primary"
          @click="cancelSubmit"
          v-loading="btnLoading"
          >{{ $t("view.confirm") }}</el-button
        >
      </div>
    </el-dialog>
    <!--售后-->
    <el-dialog
      :title="$t('orderRefund')"
      :fullscreen="true"
      v-if="orderRefundVisible"
      :visible.sync="orderRefundVisible"
    >
      <orderRefundDialog
        :refundId="currentRefundId"
        :ordersId="currentOrdersId"
      ></orderRefundDialog>
      <el-button type="danger" style="float:right" @click="backTable">{{
        $t("back")
      }}</el-button>
    </el-dialog>
  </div>
</template>

<script>
import waves from "@/directive/waves";
import swPage from "@/views/common/swPage";
import global from "@/views/oms/global";
import refundInfoDialog from "./refundDetail";
import { getToken } from "@/utils/auth";
import {
  fetchList,
  updateshipping,
  cancel,
  warehouseList,
  queryTWarehouseNameALL,
  manualRefundSuccess
} from "@/api/oms/refund/refund";
import { dcmAdd } from "@/utils/toolUtil";
import orderRefundDialog from "@/views/oms/refund/components/orderRefundDialog";
import { queryChannelStore, queryChannel } from "@/api/oms/inventory/inventory";
export default {
  name: "refundList",
  directives: {
    waves
  },
  components: {
    swPage,
    refundInfoDialog,
    global,
    orderRefundDialog
  },
  filters: {
    statusFilter(key, that) {
      var value = "";
      global.afterSaleStatus.forEach(status => {
        if (status.value == key) {
          value = that.$t(status.label);
        }
      });
      return value;
    },
    refundTypeFilter(key, that) {
      var value = "";
      global.afterSaleType.forEach(refundType => {
        if (refundType.value == key) {
          value = that.$t(refundType.label);
        }
      });
      return value;
    },
    channelStatusFilter(key, that) {
      var value = "";
      global.channelStatus.forEach(status => {
        if (status.value == key) {
          value = that.$t(status.label);
        }
      });
      return value;
    }
  },
  data() {
    return {
      that: this,
      direction: "rtl",
      fileList: [],
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      store: [],
      channel: [],
      //查询条件
      listQuery: {
        page: 1,
        limit: 20,
        storeId: "",
        channelCode: "",
        refundType: "",
        shopify: "",
        status: "5",
        cutUser: "",
        ormRefundId: "",
        ormorder: "",
        refundNo: "",
        timeplacedLaggerThanEqual: "",
        timeplacedLessThanEqual: "",
        warehouseCode: "",
        sort: "",
        inboundStatus: null
      },
      warehouse: [],
      returnStatusList: global.returnStatus,
      createTimePicker: null,
      channelCodes: global.channelCodes, //渠道编码
      afterSaleStatus: global.afterSaleStatus, //售后状态
      afterSaleTypes: global.afterSaleType, //售后类型
      applyTypes: global.applyType, //售后来源
      stores: [],
      refundInfoVisible: false,
      currentRefundId: "",
      editShipp: {
        id: null,
        shipmodeId: "",
        shippingNo: "",
        warehouseCode: ""
      },
      dialogShippFormVisible: false,
      dialogFormCancelVisible: false,
      cancelForm: {
        refundNo: "",
        zfnotes: ""
      },
      warehouseItems: [],
      btnLoading: false,
      orderRefundVisible: false,
      currentOrdersId: "",
      action: "" //  view  cus_check  t_check
    };
  },
  created() {
    //获取店铺列表
    this.getList();
    this.getChannel();
    this.getStore();
    this.queryWarehouseName();
  },
  activated() {
    this.getList();
  },
  computed: {
    // 计算属性的 getter
    headers: function() {
      return {
        "X-Token": getToken()
      };
    }
  },
  methods: {
    handleSuccess(e) {
      this.$confirm("确认退款成功吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var params = { id: e.id };

          manualRefundSuccess(params).then(res => {
            if (200 == res.code) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    queryWarehouseName() {
      queryTWarehouseNameALL().then(response => {
        this.warehouse = response.data;
      });
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then(res => {
        if (200 == res.code) {
          this.total = res.data.total;
          this.list = res.data.list;
        }
        this.listLoading = false;
      });
    },
    getChannel() {
      queryChannel({ storeId: this.listQuery.storeId }).then(res => {
        if (200 == res.code) {
          this.channel = res.data;
        }
      });
    },
    getStore() {
      queryChannelStore({ channelCode: this.listQuery.channelCode }).then(
        res => {
          if (200 == res.code) {
            this.store = res.data;
          }
        }
      );
    },
    // 展示红色背景
    tableRowStyleName({ row }) {
      if (row.totalCount) {
        return "color: red !important;";
      }
    },
    retPage() {
      //分页
      this.getList();
    },

    handleFilter() {
      this.listQuery.page = 1;
      if (this.createTimePicker == null) {
        this.listQuery.timeplacedLaggerThanEqual = "";
        this.listQuery.timeplacedLessThanEqual = "";
      } else {
        this.listQuery.timeplacedLaggerThanEqual = this.createTimePicker[0];
        this.listQuery.timeplacedLessThanEqual = this.createTimePicker[1];
      }
      this.getList();
    },
    //查看退款单详情
    handleInfo(refundId, action) {
      //进入退款单详情查看
      this.action = action;
      this.currentRefundId = refundId;
      this.refundInfoVisible = true;
    },
    editInfo(row) {
      //进入退款单详情查看
      this.editShipp.id = row.id;
      this.editShipp.shipmodeId = row.shipmodeId;
      this.editShipp.shippingNo = row.shippingNo;
      this.editShipp.warehouseCode = row.warehouseCode;
      warehouseList().then(res => {
        if (200 == res.code) {
          this.warehouseItems = res.data;
          this.dialogShippFormVisible = true;
        }
      });
    },
    editShippSub(flag) {
      if (!this.editShipp.warehouseCode) {
        this.$message.error("请选择收退仓库!");
        return false;
      }
      if (!this.editShipp.shipmodeId) {
        this.$message.error("请填写退货物流公司!");
        return false;
      }
      if (!this.editShipp.shippingNo) {
        this.$message.error("请填写退货快递单号!");
        return false;
      }
      this.btnLoading = true;
      updateshipping(this.editShipp).then(
        res => {
          if (200 == res.code) {
            this.$message({
              message: this.$t("optSuccess"),
              type: "success"
            });
            this.editShipp = {
              id: null,
              shipmodeId: "",
              shippingNo: "",
              warehouseCode: "",
              flag: flag
            };
            this.btnLoading = false;
            this.dialogShippFormVisible = false;
            this.getList();
          }
        },
        error => {
          this.btnLoading = false;
        }
      );
    },
    cancelInfo(row) {
      this.cancelForm = {
        refundNo: "",
        zfnotes: ""
      };
      this.cancelForm.refundNo = row.refundNo;
      this.dialogFormCancelVisible = true;
    },
    cancelSubmit() {
      this.$confirm("确认作废/撤销, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.btnLoading = true;
          cancel(this.cancelForm).then(
            res => {
              if (200 == res.code) {
                this.$message({
                  type: "success",
                  message: "作废成功!"
                });
                this.cancelForm = {
                  refundNo: "",
                  zfnotes: ""
                };
                this.btnLoading = false;
                this.dialogFormCancelVisible = false;
                this.getList();
              }
            },
            error => {
              this.btnLoading = false;
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    refresh() {
      // 财务审核后关闭组件
      this.refundInfoVisible = false;
      this.getList();
    },
    handleRefund(currentRefundId, ordersId) {
      this.currentRefundId = currentRefundId;
      this.currentOrdersId = ordersId;
      this.orderRefundVisible = true;
    },
    backTable() {
      this.orderRefundVisible = false;
      this.getList();
    },

    sortMethod(column) {
      if (column.order === "ascending") {
        this.listQuery.sort = "asc";
      } else if (column.order === "descending") {
        this.listQuery.sort = "desc";
      } else {
        this.listQuery.sort = "";
      }
      this.getList();
    }
  }
};
</script>

<style scoped lang="scss">
.cell > span {
  white-space: nowrap !important;
}
//::v-deep .el-icon-d-caret:hover
//{color: #ffc400 !important;}
</style>