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-radio-group v-model="isEquivalent" :disabled="orderList.length">
          <el-radio
            v-for="item in [
              { label: '同价置换', value: 0 },
              { label: '非同价置换', value: 1 }
            ]"
            :key="item.value"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group> -->
        <el-button size="mini" type="primary" @click="openKeGoodsDialog">选择机型</el-button>
      </div>
    </div>
    <div class="table">
      <el-table v-show="isEquivalent === 0" :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>
      <el-table v-show="isEquivalent === 1" :data="keGoodsList" border fit highlight-current-row stripe>
        <el-table-column align="left" label="销售类型" prop="saleTypeCode" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.saleTypeCode"
              placeholder="请选择"
              size="mini"
              clearable
              filterable
              @change="handleChange($event, scope.row)"
            >
              <el-option v-for="item in saleList" :key="item.saleCode" :label="item.saleName" :value="item.saleCode">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <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="price" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input
              type="number"
              v-model.number="scope.row.price"
              placeholder="请输入"
              size="mini"
              clearable
              @change=""
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="left" label="格力折扣" prop="discAmount" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input
              type="number"
              v-model.number="scope.row.discAmount"
              placeholder="请输入"
              size="mini"
              clearable
              @change=""
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="left" label="返利类型" prop="walletRebateId" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.walletRebateId"
              placeholder="请选择"
              size="mini"
              clearable
              filterable
              @change="handleChangeRebate($event, scope.row)"
            >
              <el-option
                v-for="item in rebateSaletypelist"
                :key="item.walletRebateId"
                :label="item.name"
                :value="item.walletRebateId"
              >
              </el-option>
            </el-select>
          </template>
        </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="ke_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="ke_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="ke_rebateWalletName"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="right"
            label="使用返利金额"
            prop="singleRebateAmount"
            min-width="100"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <!-- {{ scope.row.singleRebateAmount * scope.row.ke_refundableQty }} -->
              {{
                (scope.row.ke_price * scope.row.ke_refundableQty -
                  scope.row.ke_discAmount * scope.row.ke_refundableQty) *
                scope.row.ke_rebateRate
              }}
            </template>
          </el-table-column>
          <el-table-column
            align="right"
            label="格力折扣"
            prop="ke_discAmount"
            min-width="100"
            show-overflow-tooltip
          >
          <template slot-scope="scope">
              {{
                  scope.row.ke_discAmount * scope.row.ke_refundableQty
              }}
            </template>
        </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.ke_price * scope.row.ke_refundableQty -
                scope.row.singleRebateAmount * scope.row.ke_refundableQty -
                scope.row.ke_discAmount
              }} -->
              {{
                scope.row.ke_price * scope.row.ke_refundableQty -
                scope.row.ke_discAmount * scope.row.ke_refundableQty -
                (scope.row.ke_price * scope.row.ke_refundableQty -
                  scope.row.ke_discAmount * scope.row.ke_refundableQty) *
                  scope.row.ke_rebateRate
              }}
            </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="100"
              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="100"
              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">
            <el-form-item prop="priceType" label="价格类型">
              <el-select
                v-model="orderDialog_screenForm.priceType"
                placeholder="请选择价格类型"
                size="mini"
                clearable
                filterable
              >
                <el-option
                  v-for="item in priceTypeLilst"
                  :key="item.priceTypeId"
                  :label="item.priceTypeName"
                  :value="item.priceTypeName"
                >
                </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="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="priceType"
            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="100"
              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 { getTypeList } from '@/api/common.js'
import { getProductPriceListV2 } from '@/api/priceType.js'
import { getWalletRebateSaletypelist } from '@/api/policy_list'
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: '',
        priceType: ''
      },
      orderDialog_list: [],
      orderDialog_selection: [],
      orderDialog_currentPage: 1,
      orderDialog_listTotal: 0,

      // 其他
      displaceTypeList: [
        { label: '基础产品价格表', value: '1' },
        { label: '家用产品价格表', value: '2' },
        { label: '商用产品价格表', value: '3' }
      ],
      isEquivalent: 1,
      saleList: [],
      rebateSaletypelist: [],
      priceTypeLilst: []
    }
  },
  watch: {
    keGoodsList: {
      deep: true,
      handler: function (val, oal) {
        if (this.orderList.length && this.type === 2) {
          this.orderList.forEach(item => {
            item.ke_materialName = val[0].name
            item.ke_specification = val[0].specification
            item.ke_refundableQty = ''
            item.ke_saleTypeName = val[0].saleTypeName
            item.ke_saleTypeCode = val[0].saleTypeCode
            item.ke_saleTypeId = val[0].saleTypeId
            item.ke_price = val[0].price
            item.ke_rebateWalletName = val[0].rebateWalletName
            item.ke_walletRebateId = val[0].walletRebateId
            item.ke_discAmount = val[0].discAmount
          })
        }
      }
    }
  },
  created() {
    this.getTypeList()
  },

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

    // 查询重复值并禁选
    checkboxSelect(row, rowIndex) {
      if (row.selected) {
        return false // 禁用
      } else {
        return true // 不禁用
      }
    },
    handleChange(e, row) {
      if (e) {
        const item = this.saleList.find(k => e == k.saleCode)
        if (Object.keys(item).length) {
          this.$set(row, 'saleTypeName', item.saleName)
          this.$set(row, 'saleTypeCode', item.saleCode)
          this.$set(row, 'saleTypeId', item.id)
        }
        this.getWalletRebateSaletypelist(e)
      } else {
        this.$set(row, 'saleTypeName', '')
        this.$set(row, 'saleTypeCode', '')
        this.$set(row, 'saleTypeId', '')
      }
    },
    handleChangeRebate(e, row) {
      if (e) {
        const item = this.rebateSaletypelist.find(k => e == k.walletRebateId)
        if (Object.keys(item).length) {
          this.$set(row, 'rebateWalletName', item.name)
          this.$set(row, 'walletRebateId', item.walletRebateId)
          this.$set(row, 'rebateRate', item.rebateRate)
        }
      } else {
        this.$set(row, 'rebateWalletName', '')
        this.$set(row, 'walletRebateId', '')
      }
    },
    getTypeList() {
      getTypeList({ pageNum: 1, pageSize: -1 }).then(res => {
        this.saleList = res.data.records
      })
      return this.saleList
    },
    getWalletRebateSaletypelist(saleTypeCode) {
      getWalletRebateSaletypelist({ pageNum: 1, pageSize: -1, saleTypeCode, status: 1 }).then(res => {
        this.rebateSaletypelist = res.data.records
      })
    },
    getProductPriceListV2() {
      getProductPriceListV2({ pageNum: 1, pageSize: -1 }).then(res => {
        this.priceTypeLilst = res.data.records
      })
    },
    // 获取列表 - 被置换产品
    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.$set(item, 'saleTypeName', '')
        this.$set(item, 'saleTypeCode', '')
        this.$set(item, 'saleTypeId', '')
        this.$set(item, 'price', 0)
        this.$set(item, 'discAmount', 0)
        this.$set(item, 'rebateWalletName', '')
        this.$set(item, 'walletRebateId', '')
        this.$set(item, 'rebateRate', '')

        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,
        isOver: false,
        ...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()
      this.getProductPriceListV2()
    },

    // 关闭弹窗 - 被置换订单
    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 = ''
          item.ke_saleTypeName = this.keGoodsList[0].saleTypeName
          item.ke_saleTypeCode = this.keGoodsList[0].saleTypeCode
          item.ke_saleTypeId = this.keGoodsList[0].saleTypeId
          item.ke_price = this.keGoodsList[0].price
          item.ke_rebateWalletName = this.keGoodsList[0].rebateWalletName
          item.ke_walletRebateId = this.keGoodsList[0].walletRebateId
          item.ke_discAmount = this.keGoodsList[0].discAmount
          item.ke_rebateRate = this.keGoodsList[0].rebateRate
        })
        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,
        newDiscAmount: this.keGoodsList[0].discAmount,
        newPrice: this.keGoodsList[0].price,
        saleTypeId: this.keGoodsList[0].saleTypeId,
        walletId2: this.keGoodsList[0].walletRebateId,
        newMaterialIds: this.keGoodsList.map(item => {
          return item.id
        }),
        orderItems: this.orderList.map(item => {
          return {
            orderId: item.id,
            orderItemId: item.orderItemId,
            displaceQty: item.ke_refundableQty
          }
        })
      }
      console.log(params, 999)
      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: 0 30px;
}
</style>