supply-front/src/views/supply/displace/displace_list.vue

<template>
  <div class="app-container">
    <div class="main-top">
      <div class="title">选择置换方式</div>
      <el-radio-group v-model="type" @change="changeType">
        <!-- <el-radio :label="1">订单置换</el-radio> -->
        <el-radio :label="2">批量置换</el-radio>
      </el-radio-group>
    </div>

    <div class="main-title">
      <div class="title">被置换产品信息</div>
      <div>
        <el-button size="mini" type="primary" @click="openBeiGoodsDialog">选择机型</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="beiGoodsList" border fit highlight-current-row stripe>
        <el-table-column align="left" label="物料编码" prop="number" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="产品编码" prop="oldNumber" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="产品名称" prop="name" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="规格型号" prop="specification" min-width="350" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="单位" prop="baseUnitId" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteBeiGoodsList(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="main-title">
      <div class="title">可置换产品信息</div>
      <div>
        <el-button size="mini" type="primary" @click="openKeGoodsDialog">选择机型</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="keGoodsList" border fit highlight-current-row stripe>
        <el-table-column align="left" label="物料编码" prop="number" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="产品编码" prop="oldNumber" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="产品名称" prop="name" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="规格型号" prop="specification" min-width="350" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="单位" prop="baseUnitId" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteKeGoodsList(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="main-title">
      <div class="title">被置换订单信息</div>
      <div>
        <el-button size="mini" type="primary" @click="openOrderDialog">选择置换订单</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="orderList" border fit highlight-current-row stripe>
        <el-table-column align="left" label="订单号" prop="id" min-width="120" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="经销商信息" prop="displaceOrderId" min-width="250" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.customerName + '(' + scope.row.customerNumber + ')' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="被置换机型" prop="displaceOrderId" min-width="160" show-overflow-tooltip>
          <el-table-column align="left" label="销售类型" prop="saleTypeName" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="规格型号" prop="specification" min-width="250" show-overflow-tooltip></el-table-column>
          <el-table-column align="right" label="单价" prop="price" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="right" label="可被置换数量" prop="refundableQty" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="返利类型" prop="rebateWalletName" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="right" label="使用返利金额" prop="payRebateAmount" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="right" label="格力折扣" prop="totalDiscAmount" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="现金钱包" prop="walletName" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="right" label="实付金额" prop="payAmount" min-width="100" show-overflow-tooltip></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="置换机型" prop="displaceOrderId" min-width="160" show-overflow-tooltip>
          <el-table-column align="left" label="销售类型" prop="saleTypeName" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="产品名称" prop="ke_materialName" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="规格型号" prop="ke_specification" min-width="350" show-overflow-tooltip></el-table-column>
          <el-table-column align="right" label="单价" prop="price" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="right" label="置换数量" prop="ke_refundableQty" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model="scope.row.ke_refundableQty" size="mini" type="number"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="left" label="返利类型" prop="rebateWalletName" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="right" label="使用返利金额" prop="payRebateAmount" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="right" label="格力折扣" prop="totalDiscAmount" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="现金钱包" prop="walletName" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="right" label="实付金额" prop="payAmount" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{(scope.row.price * scope.row.ke_refundableQty) - (scope.row.payRebateAmount * scope.row.ke_refundableQty) - scope.row.totalDiscAmount}}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteOrderList(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-footer">
      <div class="footer">
        <el-button type="primary" @click="submitForm">提交置换</el-button>
        <el-popconfirm title="确定要重置吗？" @onConfirm="resetForm" style="margin-left: 10px;">
          <el-button slot="reference">重 置</el-button>
        </el-popconfirm>
      </div>
    </div>

    <el-dialog title="选择被置换产品" :visible.sync="beiGoodsDialog_show" width="80%">
      <el-form ref="beiGoodsDialog_screenForm" :model="beiGoodsDialog_screenForm" size="mini" label-position="left" label-width="80px">
        <el-row :gutter="20">
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="number" label="物料编码">
              <el-input v-model="beiGoodsDialog_screenForm.number" placeholder="请输入物料编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="oldNumber" label="产品编码">
              <el-input v-model="beiGoodsDialog_screenForm.oldNumber" placeholder="请输入产品编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="keyword" label="产品名称">
              <el-input v-model="beiGoodsDialog_screenForm.keyword" placeholder="请输入产品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item label="规格型号" prop="specification">
              <el-input v-model="beiGoodsDialog_screenForm.specification" placeholder="请输入规格型号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24" class="tr">
            <el-form-item label="">
              <el-button @click="resetBeiGoodsDialogScreenForm">清空</el-button>
              <el-button type="primary" @click="submitBeiGoodsDialogScreenForm">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="table">
        <el-table :data="beiGoodsDialog_list" element-loading-text="Loading" border fit highlight-current-row stripe height="400">
          <el-table-column align="center" width="80">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="submitChooseBeiGoods(scope.row)" :disabled="scope.row.selected">选择</el-button>
            </template>
          </el-table-column>
          <el-table-column align="left" label="物料编码" prop="number" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="产品编码" prop="oldNumber" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="产品名称" prop="name" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="是否可被置换" prop="unit" min-width="80" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="pagination clearfix" style="margin-top: 10px">
          <div class="fr">
            <el-pagination
              @current-change="changeBeiGoodsDialogPage"
              :current-page="beiGoodsDialog_currentPage"
              :page-size="10"
              background
              layout="prev, pager, next"
              :total="beiGoodsDialog_listTotal">
            </el-pagination>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeBeiGoodsDialog">取 消</el-button>
      </span>
    </el-dialog>


    <el-dialog title="选择可置换产品" :visible.sync="keGoodsDialog_show" width="80%">
      <el-form ref="keGoodsDialog_screenForm" :model="keGoodsDialog_screenForm" size="mini" label-position="left" label-width="80px">
        <el-row :gutter="20">
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="number" label="物料编码">
              <el-input v-model="keGoodsDialog_screenForm.number" placeholder="请输入物料编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="oldNumber" label="产品编码">
              <el-input v-model="keGoodsDialog_screenForm.oldNumber" placeholder="请输入产品编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="keyword" label="产品名称">
              <el-input v-model="keGoodsDialog_screenForm.keyword" placeholder="请输入产品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item label="规格型号" prop="specification">
              <el-input v-model="keGoodsDialog_screenForm.specification" placeholder="请输入规格型号"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item label="置换产品价格类型" prop="displaceType" label-width="125px">
              <el-select v-model="keGoodsDialog_screenForm.displaceType" placeholder="请选择置换产品价格类型">
                <el-option
                  v-for="item in displaceTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="24" :lg="24" class="tr">
            <el-form-item label="">
              <el-button @click="resetKeGoodsDialogScreenForm">清空</el-button>
              <el-button type="primary" @click="submitKeGoodsDialogScreenForm">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="table">
        <el-table :data="keGoodsDialog_list" element-loading-text="Loading" border fit highlight-current-row stripe height="400" @selection-change="changeKeGoodsDialogSelection" v-show="type === 1">
          <el-table-column align="center" type="selection" width="55" :selectable="checkboxSelect"></el-table-column>
          <el-table-column align="left" label="物料编码" prop="number" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="产品编码" prop="oldNumber" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="产品名称" prop="name" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-table :data="keGoodsDialog_list" element-loading-text="Loading" border fit highlight-current-row stripe height="400" v-show="type === 2">
          <el-table-column align="center" width="80">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="submitChooseKeGoods(scope.row)" :disabled="scope.row.selected">选择</el-button>
            </template>
          </el-table-column>
          <el-table-column align="left" label="物料编码" prop="number" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="产品编码" prop="oldNumber" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="产品名称" prop="name" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="pagination clearfix" style="margin-top: 10px">
          <div class="fr">
            <el-pagination
              @current-change="changeKeGoodsDialogPage"
              :current-page="keGoodsDialog_currentPage"
              :page-size="10"
              background
              layout="prev, pager, next"
              :total="keGoodsDialog_listTotal">
            </el-pagination>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeKeGoodsDialog">取 消</el-button>
        <el-button type="primary" @click="submitChooseKeGoods" v-if="type === 1">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="选择被置换订单" :visible.sync="orderDialog_show" width="80%">
      <el-form ref="orderDialog_screenForm" :model="orderDialog_screenForm" size="mini" label-position="left" label-width="85px">
        <el-row :gutter="20">
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="id" label="订单号">
              <el-input v-model="orderDialog_screenForm.id" placeholder="请输入订单号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="customerName" label="经销商名称">
              <el-input v-model="orderDialog_screenForm.customerName" placeholder="请输入经销商名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="6" :lg="6">
            <el-form-item prop="customerNumber" label="经销商编号">
              <el-input v-model="orderDialog_screenForm.customerNumber" placeholder="请输入经销商编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="6" :lg="6" class="tr">
            <el-form-item label="">
              <el-button @click="resetOrderDialogScreenForm">清空</el-button>
              <el-button type="primary" @click="submitOrderDialogScreenForm">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="table">
        <el-table :data="orderDialog_list" element-loading-text="Loading" border fit highlight-current-row stripe height="400" v-show="type === 1">
          <el-table-column align="center" width="80">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="submitChooseOrder(scope.row)" :disabled="scope.row.selected">选择</el-button>
            </template>
          </el-table-column>
          <el-table-column align="left" label="订单号" prop="id" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="直调状态" prop="directTransferStatusName" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="经销商信息" prop="materialName" min-width="250" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.customerName + '(' + scope.row.customerNumber + ')' }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="销售类型" prop="saleTypeName" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="规格型号" prop="specification" min-width="250" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="可被置换数量" prop="refundableQty" min-width="100" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-table :data="orderDialog_list" element-loading-text="Loading" border fit highlight-current-row stripe height="400" @selection-change="changeOrderDialogSelection" v-show="type === 2">
          <el-table-column align="center" type="selection" width="55" :selectable="checkboxSelect" v-if="type === 2"></el-table-column>
          <el-table-column align="left" label="订单号" prop="id" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="直调状态" prop="directTransferStatusName" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="经销商信息" prop="materialName" min-width="250" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.customerName + '(' + scope.row.customerNumber + ')' }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="销售类型" prop="saleTypeName" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="规格型号" prop="specification" min-width="250" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="可被置换数量" prop="refundableQty" min-width="100" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="pagination clearfix" style="margin-top: 10px">
          <div class="fr">
            <el-pagination
              @current-change="changeOrderDialogPage"
              :current-page="orderDialog_currentPage"
              :page-size="10"
              background
              layout="prev, pager, next"
              :total="orderDialog_listTotal">
            </el-pagination>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeOrderDialog">取 消</el-button>
        <el-button type="primary" @click="submitChooseOrder" v-if="type === 2">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getGoodsList, getOrderList, addDisplace } from "@/api/supply/displace";

export default {
  data() {
    return {
      // 主表单信息
      type: 2,
      beiGoodsList: [], // 被置换产品列表
      keGoodsList: [], // 可置换产品列表
      orderList: [], // 被置换订单列表

      // 被置换产品弹窗信息
      beiGoodsDialog_show: false,
      beiGoodsDialog_screenForm: {
        number: '',
        oldNumber: '',
        name: '',
        specification: '',
      },
      beiGoodsDialog_list: [],
      beiGoodsDialog_currentPage: 1,
      beiGoodsDialog_listTotal: 0,

      // 可置换产品弹窗信息
      keGoodsDialog_show: false,
      keGoodsDialog_screenForm: {
        number: '',
        oldNumber: '',
        name: '',
        specification: '',
      },
      keGoodsDialog_list: [],
      keGoodsDialog_selection: [],
      keGoodsDialog_currentPage: 1,
      keGoodsDialog_listTotal: 0,

      // 被置换订单弹窗信息
      orderDialog_show: false,
      orderDialog_screenForm: {
        id: '',
        customerName: '',
        customerNumber: '',
      },
      orderDialog_list: [],
      orderDialog_selection: [],
      orderDialog_currentPage: 1,
      orderDialog_listTotal: 0,

      // 其他
      displaceTypeList: [
        {label: '基础产品价格表', value: '1'},
        {label: '家用产品价格表', value: '2'},
        {label: '商用产品价格表', value: '3'},
      ]
    }
  },

  created() {
    
  },

  methods: {
    
    // 切换置换类型
    changeType() {
      this.resetForm();
    },

    // 查询重复值并禁选
    checkboxSelect(row, rowIndex) {
      if (row.selected) {
        return false // 禁用
      }else{
        return true // 不禁用
      }
    },

    // 获取列表 - 被置换产品
    getBeiGoodsList() {
      getGoodsList({
        pageNum: this.beiGoodsDialog_currentPage,
        pageSize: 100,
        ...this.beiGoodsDialog_screenForm
      }).then(res => {
        let oldGoodsList = this.beiGoodsList;
        let newGoodsList = res.data.records;
        for(let i = 0; i < oldGoodsList.length; i++) {
          let oldItem = oldGoodsList[i]
          for(let j = 0; j < newGoodsList.length; j++) {
            let newItem = newGoodsList[j]
            if(newItem.id === oldItem.id){
              newGoodsList[j].selected = true;
              break;
            }
          }
        }

        this.beiGoodsDialog_list = newGoodsList;
        this.beiGoodsDialog_listTotal = res.data.total;
      })
    },

    // 收藏商品
    handleCollect(id) {
      if(!this.token) {
        return console.log('请先登录');
      }
      collectData({id}).then(res => { // api请求
        console.log('收藏成功', res.data);
      })
    },

    // 加入购物车
    addToCart(id) {
      if(!this.token) {
        return console.log('请先登录');
      }
      addData({id}).then(res => { // api请求
        console.log('加入购物车成功', res.data);
      })
    },

    // 立即购买
    bug() {
      if(!this.token) {
        return console.log('请先登录');
      }
      buyData({id}).then(res => { // api请求
        console.log('下单成功', res.data);
        wx.requestPayment({ // 支付
          timeStamp: '',
          nonceStr: '',
          package: '',
          signType: 'MD5',
          paySign: '',
          success (res) { },
          fail (res) { }
        })
      })
    },

    // 打开弹窗 - 被置换产品
    openBeiGoodsDialog() {
      if(this.orderList.length > 0) {
        return this.$errorMsg('已选择订单不可更改产品');
      }
      this.beiGoodsDialog_show = true;
      this.getBeiGoodsList();
    },

    // 关闭弹窗 - 被置换产品
    closeBeiGoodsDialog() {
      this.beiGoodsDialog_show = false;
    },

    // 提交筛选表单 - 被置换产品
    submitBeiGoodsDialogScreenForm() {
      this.beiGoodsDialog_currentPage = 1;
      this.getBeiGoodsList();
    },

    // 重置筛选表单 - 被置换产品
    resetBeiGoodsDialogScreenForm() {
      this.$refs.beiGoodsDialog_screenForm.resetFields();
      this.beiGoodsDialog_currentPage = 1;
      this.beiGoodsDialog_list = [];
      this.getBeiGoodsList();
    },

    // 更改列表页码 - 被置换产品
    changeBeiGoodsDialogPage(val) {
      this.beiGoodsDialog_currentPage = val;
      this.getBeiGoodsList();
    },

    // 确认选择产品 - 被置换产品
    submitChooseBeiGoods(item) {
      this.beiGoodsList = [item];
      this.closeBeiGoodsDialog();
    },

    // 删除产品 - 被置换产品
    deleteBeiGoodsList(index) {
      if(this.orderList.length > 0) {
        return this.$errorMsg('已选择订单不可更改产品');
      }
      this.beiGoodsList.splice(index, 1);
    },


    // 获取列表 - 可置换产品
    getKeGoodsList() {
      getGoodsList({
        pageNum: this.keGoodsDialog_currentPage,
        pageSize: 100,
        ...this.keGoodsDialog_screenForm
      }).then(res => {
        let oldGoodsList = this.keGoodsList;
        let newGoodsList = res.data.records;
        for(let i = 0; i < oldGoodsList.length; i++) {
          let oldItem = oldGoodsList[i]
          for(let j = 0; j < newGoodsList.length; j++) {
            let newItem = newGoodsList[j]
            if(newItem.id === oldItem.id){
              newGoodsList[j].selected = true;
              break;
            }
          }
        }

        this.keGoodsDialog_list = newGoodsList;
        this.keGoodsDialog_listTotal = res.data.total;
      })
    },

    // 打开弹窗 - 可置换产品
    openKeGoodsDialog() {
      if(this.orderList.length > 0) {
        return this.$errorMsg('已选择订单不可更改产品');
      }
      this.keGoodsDialog_show = true;
      this.getKeGoodsList();
    },

    // 关闭弹窗 - 可置换产品
    closeKeGoodsDialog() {
      this.keGoodsDialog_show = false;
    },

    // 提交筛选表单 - 可置换产品
    submitKeGoodsDialogScreenForm() {
      this.keGoodsDialog_currentPage = 1;
      this.getKeGoodsList();
    },

    // 重置筛选表单 - 可置换产品
    resetKeGoodsDialogScreenForm() {
      this.$refs.keGoodsDialog_screenForm.resetFields();
      this.keGoodsDialog_currentPage = 1;
      this.keGoodsDialog_list = [];
      this.getKeGoodsList();
    },

    // 更改列表页码 - 可置换产品
    changeKeGoodsDialogPage(val) {
      this.keGoodsDialog_currentPage = val;
      this.getKeGoodsList();
    },

    // 选择列 - 可置换产品
    changeKeGoodsDialogSelection(val) {
      this.keGoodsDialog_selection = val;
    },

    // 确认选择产品 - 可置换产品
    submitChooseKeGoods(item) {
      // 订单置换（多选）
      if(this.type === 1) {
        this.keGoodsList = this.keGoodsList.concat(this.keGoodsDialog_selection);
      }
      // 批量置换（单选）
      else {
        this.keGoodsList = [item];
      }
      this.closeKeGoodsDialog();
    },
    
    // 删除产品 - 可置换产品
    deleteKeGoodsList(index) {
      if(this.orderList.length > 0) {
        return this.$errorMsg('已选择订单不可更改产品');
      }
      this.keGoodsList.splice(index, 1);
    },


    // 获取列表 - 被置换订单
    getOrderList() {
      getOrderList({
        pageNum: this.orderDialog_currentPage,
        pageSize: 100,
        type: 2,
        materialOldNumber: this.beiGoodsList[0].oldNumber,
        ...this.orderDialog_screenForm
      }).then(res => {
        let oldGoodsList = this.orderList;
        let newGoodsList = res.data.records;
        for(let i = 0; i < oldGoodsList.length; i++) {
          let oldItem = oldGoodsList[i]
          for(let j = 0; j < newGoodsList.length; j++) {
            let newItem = newGoodsList[j]
            if(newItem.orderItemId === oldItem.orderItemId){
              newGoodsList[j].selected = true;
              break;
            }
          }
        }

        this.orderDialog_list = newGoodsList;
        this.orderDialog_listTotal = res.data.total;
      })
    },

    // 打开弹窗 - 被置换订单
    openOrderDialog() {
      if(this.beiGoodsList.length < 1) {
        return this.$errorMsg('请先选择被置换产品');
      }
      if(this.keGoodsList.length < 1) {
        return this.$errorMsg('请先选择可置换产品');
      }
      this.orderDialog_show = true;
      this.getOrderList();
    },

    // 关闭弹窗 - 被置换订单
    closeOrderDialog() {
      this.orderDialog_show = false;
    },

    // 提交筛选表单 - 被置换订单
    submitOrderDialogScreenForm() {
      this.orderDialog_currentPage = 1;
      this.getOrderList();
    },

    // 重置筛选表单 - 被置换订单
    resetOrderDialogScreenForm() {
      this.$refs.orderDialog_screenForm.resetFields();
      this.orderDialog_currentPage = 1;
      this.orderDialog_list = [];
      this.getOrderList();
    },

    // 更改列表页码 - 被置换订单
    changeOrderDialogPage(val) {
      this.orderDialog_currentPage = val;
      this.getOrderList();
    },

    // 选择列 - 被置换订单
    changeOrderDialogSelection(val) {
      this.orderDialog_selection = val;
    },

    // 确认选择产品 - 被置换订单
    submitChooseOrder(item) {
      // 订单置换（单选）
      if(this.type === 1) {
        this.orderList = [item];
      }
      // 批量置换（多选）
      else {
        let orderList = JSON.parse(JSON.stringify(this.orderDialog_selection));
        orderList.forEach(item => {
          item.ke_materialName = this.keGoodsList[0].name;
          item.ke_specification = this.keGoodsList[0].specification;
          item.ke_refundableQty = '';
        });
        this.orderList = this.orderList.concat(orderList);
      }
      this.closeOrderDialog();
    },

    // 删除产品 - 被置换订单
    deleteOrderList(index) {
      this.orderList.splice(index, 1);
    },

    // 判断是否存在被置换订单
    checkOrder() {
      if(this.orderList.length > 0) {
        return this.$errorMsg('已选择订单不可更改产品');
      }
      return true;
    },

    
    // 提交
    submitForm() {
      for(let i=0; i<this.orderList.length; i++) {
        if(!this.orderList[i].ke_refundableQty || this.orderList[i].ke_refundableQty < 1) {
          this.$errorMsg('置换数量需大于0');
          return;
        }
      }

      let params = {
        type: this.type,
        newMaterialIds: this.keGoodsList.map(item => {
          return item.id
        }),
        orderItems: this.orderList.map(item => {
          return {
            orderId: item.id,
            orderItemId: item.orderItemId,
            displaceQty: item.ke_refundableQty,
          }
        }),
      }
      addDisplace(params).then(res => {
        this.$successMsg('提交成功');
        this.resetForm();
      })
    },

    // 重置
    resetForm() {
      this.beiGoodsList = [];
      this.keGoodsList = [];
      this.orderList = [];
    }
  }
}
</script>

<style lang="scss" scoped>
  .main-top {
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #DCDFE6;
    margin-bottom: 20px;
    .title {
      font-size: 16px;
      padding-left: 10px;
      font-weight: 600;
    }
    .el-radio-group {
      margin-left: 30px;
    }
  }
</style>