Merge branch 'feature/Feature-displace' into develop

src/api/supply/displace.js

@@ -89,3 +89,33 @@ export function returnOrder(params) {
     data: params
   })
 }
+
+
+
+
+// 获取物料列表
+export function getGoodsList(params) {
+  return request({
+    url: '/k3/material/list',
+    method: 'get',
+    params
+  })
+}
+
+// 获取订单列表
+export function getOrderList(params) {
+  return request({
+    url: '/retail/exec/list/total',
+    method: 'get',
+    params
+  })
+}
+
+// 添加置换单
+export function addDisplace(params) {
+  return request({
+    url: '/displace/order/v2/add',
+    method: 'post',
+    data: params
+  })
+}

src/views/supply/displace/displace_list copy.vue

@@ -0,0 +1,400 @@
+<template>
+  <div class="app-container">
+    <div v-show="!isShowDetail && !isShowForm && !isShowExamine && !isShowReturn">
+      <!-- 筛选条件 -->
+      <div class="screen-container">
+        <el-form ref="screenForm" :model="screenForm" label-width="85px" size="mini" label-position="left">
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="订单号" prop="orderNum">
+                <el-input v-model="screenForm.orderNum" placeholder="请输入订单号"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="原订单号" prop="originOrderNo">
+                <el-input v-model="screenForm.originOrderNo" placeholder="请输入原订单号"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="经销商名称" prop="customerKeyword">
+                <el-input v-model="screenForm.customerKeyword" placeholder="请输入经销商名称"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="产品名称" prop="productName">
+                <el-input v-model="screenForm.productName" placeholder="请输入产品名称"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="订单日期" prop="date">
+                <el-date-picker
+                  v-model="screenForm.date"
+                  type="datetimerange"
+                  range-separator="至"
+                  style="width: 100%;"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="申请人" prop="createName">
+                <el-input v-model="screenForm.createName" placeholder="请输入申请人"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="审核人" prop="confirmName">
+                <el-input v-model="screenForm.confirmName" placeholder="请输入审核人"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+              <el-form-item label="订单类型" prop="orderType">
+                <el-select v-model="screenForm.orderType" placeholder="选择订单类型" style="width: 100%">
+                  <el-option label="全部" value="" />
+                  <el-option v-for="item in orderType" :key="item.val" :label="item.label" :value="item.val"></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="resetScreenForm">清空</el-button>
+                <el-button type="primary" @click="submitScreenForm">搜索</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+
+      <div class="mymain-container">
+        <div class="btn-group clearfix">
+          <div class="fl">
+            <el-button size="mini" type="primary" icon="el-icon-plus" @click="toForm()">新增</el-button>
+          </div>
+          <div class="fr">
+            <ExportButton :exUrl="'admin/user/mch/export'" :exParams="exParams" />
+          </div>
+        </div>
+        <div class="table">
+          <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
+            <el-table-column align="left" label="订单号" prop="displaceOrderId" min-width="160" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <CopyButton :copyText="scope.row.displaceOrderId" />
+                <span>{{scope.row.displaceOrderId}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column align="left" label="订单日期" prop="orderDate" min-width="160" show-overflow-tooltip></el-table-column>
+            <el-table-column align="left" label="原订单号" prop="orderNo" min-width="160" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <CopyButton :copyText="scope.row.orderNo" />
+                <span>{{scope.row.orderNo}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column align="left" label="订单类型" min-width="160" show-overflow-tooltip>
+              <template slot-scope="{ row }">
+                {{ findOrderType(row.orderType) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="left" label="经销商编码" prop="customerNumber" min-width="100" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <CopyButton :copyText="scope.row.customerNumber" />
+                <span>{{scope.row.customerNumber}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column align="left" label="经销商名称" prop="customerName" min-width="250" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <CopyButton :copyText="scope.row.customerName" />
+                <span>{{scope.row.customerName}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column align="left" label="物料编码" prop="materialNumber" min-width="120" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <CopyButton :copyText="scope.row.materialNumber" />
+                <span>{{scope.row.materialNumber}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column align="left" label="产品编码" prop="materialOldNumber" min-width="140" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <CopyButton :copyText="scope.row.materialOldNumber" />
+                <span>{{scope.row.materialOldNumber}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <CopyButton :copyText="scope.row.materialName" />
+                <span>{{scope.row.materialName}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column align="left" label="规格型号" prop="specification" min-width="350" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <CopyButton :copyText="scope.row.specification" />
+                <span>{{scope.row.specification}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column align="left" label="业务员" prop="serviceName" min-width="100" show-overflow-tooltip></el-table-column>
+            <el-table-column align="left" label="申请人" prop="createName" min-width="100" show-overflow-tooltip></el-table-column>
+            <el-table-column align="left" label="申请日期" prop="createTime" min-width="160" show-overflow-tooltip></el-table-column>
+            <el-table-column align="left" label="审核人" prop="confirmName" min-width="100" show-overflow-tooltip></el-table-column>
+            <el-table-column align="left" label="审核日期" prop="confirmTime" min-width="160" show-overflow-tooltip></el-table-column>
+            <el-table-column align="left" label="审核状态" min-width="100" show-overflow-tooltip>
+              <template slot-scope="{ row }">
+                {{ findExamineStatus(row.examineStatus) }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="操作" width="160" fixed="right">
+              <template slot-scope="scope">
+                <el-popconfirm style="margin-right: 10px;" title="确定撤回吗？" @onConfirm="handleWithdraw(scope.row.displaceOrderId)" v-if="scope.row.examineStatus === 'WAIT'" >
+                  <el-button slot="reference" type="text">撤回</el-button>
+                </el-popconfirm>
+                <el-button type="text" @click="toForm(scope.row)" v-if="scope.row.examineStatus === 'SAVE'">编辑</el-button>
+                <el-button type="text" @click="toExamine(scope.row)" v-if="scope.row.examineStatus === 'WAIT'">审批</el-button>
+                <el-button type="text" @click="toReturn(scope.row)" v-if="scope.row.examineStatus === 'OK'">退订</el-button>
+                <el-button type="text" @click="toDetail(scope.row)">详情</el-button>
+                <el-popconfirm style="margin-left: 10px;" title="确定提审吗？" @onConfirm="handleSubmit(scope.row.displaceOrderId)" v-if="scope.row.examineStatus === 'SAVE'" >
+                  <el-button slot="reference" type="text">提审</el-button>
+                </el-popconfirm>
+                <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="handleDelete(scope.row.displaceOrderId)" >
+                  <el-button slot="reference" type="text">删除</el-button>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div class="pagination clearfix">
+        <div class="fr">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="listTotal">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+
+    <DisplaceDetail :listItem="queryItem" v-if="isShowDetail" @backListFormDetail="backList" />
+    <DisplaceForm :listItem="queryItem" v-if="isShowForm" @backListFormDetail="backList" />
+    <DisplaceExamine :listItem="queryItem" v-if="isShowExamine" @backListFormDetail="backList" />
+    <DisplaceReturn :listItem="queryItem" v-if="isShowReturn" @backListFormDetail="backList" />
+  </div>
+</template>
+
+<script>
+import {deleteOrder, getList, revokeOrder, submitData} from "@/api/supply/displace";
+import DisplaceDetail from "@/views/supply/displace/components/displace_detail";
+import DisplaceForm from "@/views/supply/displace/components/displace_form";
+import DisplaceExamine from "@/views/supply/displace/components/displace_examine";
+import DisplaceReturn from "@/views/supply/displace/components/displace_return";
+
+export default {
+  components: {
+    DisplaceDetail,
+    DisplaceForm,
+    DisplaceExamine,
+    DisplaceReturn
+  },
+  data() {
+    return {
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页数量
+      listTotal: 0, // 列表总数
+      dataList: null, // 列表数据
+      listLoading: false, // 列表加载loading
+      screenForm: { // 筛选表单数据
+        orderNum: '',
+        originOrderNo: '',
+        customerKeyword: '',
+        productName: '',
+        date: '',
+        createName: '',
+        confirmName: '',
+        orderType: '',
+      },
+      queryItem: {},
+      isShowDetail: false,
+      isShowForm: false,
+      isShowExamine: false,
+      isShowReturn: false,
+      orderType : [
+        { label: '商用工程', val: 'TRADE'},
+        { label: '家用工程', val: 'HOME'},
+        { label: '零售订单', val: 'RETAIL'},
+        { label: '销售政策单', val: 'RETAIL_POLICY'}
+      ],
+      examineStatus : [
+        { label: '保存', val: 'SAVE'},
+        { label: '待审核', val: 'WAIT'},
+        { label: '通过', val: 'OK'},
+        { label: '不通过', val: 'FAIL'},
+        { label: '关闭', val: 'CLOSE'}
+      ],
+
+    }
+  },
+
+  computed: {
+    exParams() {
+      return {
+        retreatOrderNo: this.screenForm.orderNum,
+        customerKeyword: this.screenForm.jxsNum,
+        productName: this.screenForm.chName,
+        specification: this.screenForm.model,
+        startTime: this.screenForm.date ? this.screenForm.date[0] : '',
+        endTime: this.screenForm.date ? this.screenForm.date[1] : '',
+        status: 1, // 1:退货单，2:电商退货单
+      }
+    }
+  },
+
+  created() {
+    this.getList();
+  },
+
+  methods: {
+    // 查询按钮权限
+    checkBtnRole(value) {
+      // let btnRole = this.$route.meta.roles;
+      // if(!btnRole) {return true}
+      // let index = btnRole.indexOf(value);
+      // return index >= 0;
+      return true
+    },
+
+    // 查询列表
+    getList() {
+      this.listLoading = true;
+
+      let params = {
+        pageNum: this.currentPage,
+        pageSize: this.pageSize,
+        displaceOrderId: this.screenForm.orderNum,
+        originOrderNo: this.screenForm.originOrderNo,
+        customerKeyword: this.screenForm.customerKeyword,
+        productName: this.screenForm.productName,
+        createName: this.screenForm.createName,
+        confirmName: this.screenForm.confirmName,
+        orderType: this.screenForm.orderType,
+        startOrderTime: this.screenForm.date ? this.screenForm.date[0] : '',
+        endOrderTime: this.screenForm.date ? this.screenForm.date[1] : ''
+      };
+      getList(params).then((res) => {
+        this.dataList = res.data.records;
+        this.listTotal = res.data.total;
+        this.listLoading = false;
+      })
+    },
+
+    // 提交筛选表单
+    submitScreenForm() {
+      this.currentPage = 1;
+      this.getList();
+    },
+
+    // 重置筛选表单
+    resetScreenForm() {
+      this.$refs.screenForm.resetFields();
+      this.currentPage = 1;
+      this.getList();
+    },
+
+    // 更改每页数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.getList();
+    },
+
+    // 更改当前页
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getList();
+    },
+    // 进入表单
+    toForm(item) {
+      this.queryItem = item;
+      this.isShowForm = true;
+    },
+
+    // 进入审批
+    toExamine(item) {
+      this.queryItem = item;
+      this.isShowExamine = true;
+    },
+
+    // 进入详情
+    toDetail(item) {
+      this.queryItem = item;
+      this.isShowDetail = true;
+    },
+
+    // 进入退订
+    toReturn(item) {
+      this.queryItem = item;
+      this.isShowReturn = true;
+    },
+
+    backList() {
+      this.queryItem = {};
+      this.isShowDetail = false;
+      this.isShowForm = false;
+      this.isShowExamine = false;
+      this.isShowReturn = false;
+    },
+    handleSubmit(id) {
+      submitData({id}).then(res => {
+        this.$successMsg();
+        this.getList();
+      })
+    },
+    // 撤回
+    handleWithdraw(id) {
+      revokeOrder({id}).then(res => {
+        this.$successMsg();
+        this.getList();
+      })
+    },
+
+    // 删除
+    handleDelete(id) {
+      deleteOrder({ids: id}).then(res => {
+        this.$successMsg();
+        this.getList();
+      })
+    },
+
+    // 批量删除
+    batchDelete() {
+      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let ids = this.multipleSelection.map(item => {
+          return item.parentId;
+        });
+        deleteOrder({ids: ids.join(',')}).then(res => {
+          this.$successMsg();
+          this.getList();
+        })
+      }).catch(() => {});
+    },
+    findOrderType(val) {
+      const obj = this.orderType.find((value) => value.val === val)
+      return obj ? obj.label : ''
+    },
+    findExamineStatus(val) {
+      const obj = this.examineStatus.find((value) => value.val === val)
+      return obj ? obj.label : ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/supply/displace/displace_list.vue

@@ -1,400 +1,782 @@
 <template>
   <div class="app-container">
-    <div v-show="!isShowDetail && !isShowForm && !isShowExamine && !isShowReturn">
-      <!-- 筛选条件 -->
-      <div class="screen-container">
-        <el-form ref="screenForm" :model="screenForm" label-width="85px" size="mini" label-position="left">
-          <el-row :gutter="20">
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item label="订单号" prop="orderNum">
-                <el-input v-model="screenForm.orderNum" placeholder="请输入订单号"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item label="原订单号" prop="originOrderNo">
-                <el-input v-model="screenForm.originOrderNo" placeholder="请输入原订单号"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item label="经销商名称" prop="customerKeyword">
-                <el-input v-model="screenForm.customerKeyword" placeholder="请输入经销商名称"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item label="产品名称" prop="productName">
-                <el-input v-model="screenForm.productName" placeholder="请输入产品名称"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item label="订单日期" prop="date">
-                <el-date-picker
-                  v-model="screenForm.date"
-                  type="datetimerange"
-                  range-separator="至"
-                  style="width: 100%;"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期">
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item label="申请人" prop="createName">
-                <el-input v-model="screenForm.createName" placeholder="请输入申请人"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item label="审核人" prop="confirmName">
-                <el-input v-model="screenForm.confirmName" placeholder="请输入审核人"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="6">
-              <el-form-item label="订单类型" prop="orderType">
-                <el-select v-model="screenForm.orderType" placeholder="选择订单类型" style="width: 100%">
-                  <el-option label="全部" value="" />
-                  <el-option v-for="item in orderType" :key="item.val" :label="item.label" :value="item.val"></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="resetScreenForm">清空</el-button>
-                <el-button type="primary" @click="submitScreenForm">搜索</el-button>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
+    <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="mymain-container">
-        <div class="btn-group clearfix">
-          <div class="fl">
-            <el-button size="mini" type="primary" icon="el-icon-plus" @click="toForm()">新增</el-button>
-          </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">
-            <ExportButton :exUrl="'admin/user/mch/export'" :exParams="exParams" />
+            <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 class="table">
-          <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
-            <el-table-column align="left" label="订单号" prop="displaceOrderId" min-width="160" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copyText="scope.row.displaceOrderId" />
-                <span>{{scope.row.displaceOrderId}}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="订单日期" prop="orderDate" min-width="160" show-overflow-tooltip></el-table-column>
-            <el-table-column align="left" label="原订单号" prop="orderNo" min-width="160" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copyText="scope.row.orderNo" />
-                <span>{{scope.row.orderNo}}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="订单类型" min-width="160" show-overflow-tooltip>
-              <template slot-scope="{ row }">
-                {{ findOrderType(row.orderType) }}
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="经销商编码" prop="customerNumber" min-width="100" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copyText="scope.row.customerNumber" />
-                <span>{{scope.row.customerNumber}}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="经销商名称" prop="customerName" min-width="250" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copyText="scope.row.customerName" />
-                <span>{{scope.row.customerName}}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="物料编码" prop="materialNumber" min-width="120" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copyText="scope.row.materialNumber" />
-                <span>{{scope.row.materialNumber}}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="产品编码" prop="materialOldNumber" min-width="140" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copyText="scope.row.materialOldNumber" />
-                <span>{{scope.row.materialOldNumber}}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copyText="scope.row.materialName" />
-                <span>{{scope.row.materialName}}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="规格型号" prop="specification" min-width="350" show-overflow-tooltip>
-              <template slot-scope="scope">
-                <CopyButton :copyText="scope.row.specification" />
-                <span>{{scope.row.specification}}</span>
-              </template>
-            </el-table-column>
-            <el-table-column align="left" label="业务员" prop="serviceName" min-width="100" show-overflow-tooltip></el-table-column>
-            <el-table-column align="left" label="申请人" prop="createName" min-width="100" show-overflow-tooltip></el-table-column>
-            <el-table-column align="left" label="申请日期" prop="createTime" min-width="160" show-overflow-tooltip></el-table-column>
-            <el-table-column align="left" label="审核人" prop="confirmName" min-width="100" show-overflow-tooltip></el-table-column>
-            <el-table-column align="left" label="审核日期" prop="confirmTime" min-width="160" show-overflow-tooltip></el-table-column>
-            <el-table-column align="left" label="审核状态" min-width="100" show-overflow-tooltip>
-              <template slot-scope="{ row }">
-                {{ findExamineStatus(row.examineStatus) }}
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="操作" width="160" fixed="right">
-              <template slot-scope="scope">
-                <el-popconfirm style="margin-right: 10px;" title="确定撤回吗？" @onConfirm="handleWithdraw(scope.row.displaceOrderId)" v-if="scope.row.examineStatus === 'WAIT'" >
-                  <el-button slot="reference" type="text">撤回</el-button>
-                </el-popconfirm>
-                <el-button type="text" @click="toForm(scope.row)" v-if="scope.row.examineStatus === 'SAVE'">编辑</el-button>
-                <el-button type="text" @click="toExamine(scope.row)" v-if="scope.row.examineStatus === 'WAIT'">审批</el-button>
-                <el-button type="text" @click="toReturn(scope.row)" v-if="scope.row.examineStatus === 'OK'">退订</el-button>
-                <el-button type="text" @click="toDetail(scope.row)">详情</el-button>
-                <el-popconfirm style="margin-left: 10px;" title="确定提审吗？" @onConfirm="handleSubmit(scope.row.displaceOrderId)" v-if="scope.row.examineStatus === 'SAVE'" >
-                  <el-button slot="reference" type="text">提审</el-button>
-                </el-popconfirm>
-                <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="handleDelete(scope.row.displaceOrderId)" >
-                  <el-button slot="reference" type="text">删除</el-button>
-                </el-popconfirm>
-              </template>
-            </el-table-column>
-          </el-table>
+      </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>
-      <div class="pagination clearfix">
-        <div class="fr">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[10, 20, 30, 50]"
-            :page-size="10"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="listTotal">
-          </el-pagination>
+
+      <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>
-    </div>
 
-    <DisplaceDetail :listItem="queryItem" v-if="isShowDetail" @backListFormDetail="backList" />
-    <DisplaceForm :listItem="queryItem" v-if="isShowForm" @backListFormDetail="backList" />
-    <DisplaceExamine :listItem="queryItem" v-if="isShowExamine" @backListFormDetail="backList" />
-    <DisplaceReturn :listItem="queryItem" v-if="isShowReturn" @backListFormDetail="backList" />
+      <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 {deleteOrder, getList, revokeOrder, submitData} from "@/api/supply/displace";
-import DisplaceDetail from "@/views/supply/displace/components/displace_detail";
-import DisplaceForm from "@/views/supply/displace/components/displace_form";
-import DisplaceExamine from "@/views/supply/displace/components/displace_examine";
-import DisplaceReturn from "@/views/supply/displace/components/displace_return";
+import { getGoodsList, getOrderList, addDisplace } from "@/api/supply/displace";
 
 export default {
-  components: {
-    DisplaceDetail,
-    DisplaceForm,
-    DisplaceExamine,
-    DisplaceReturn
-  },
   data() {
     return {
-      currentPage: 1, // 当前页码
-      pageSize: 10, // 每页数量
-      listTotal: 0, // 列表总数
-      dataList: null, // 列表数据
-      listLoading: false, // 列表加载loading
-      screenForm: { // 筛选表单数据
-        orderNum: '',
-        originOrderNo: '',
-        customerKeyword: '',
-        productName: '',
-        date: '',
-        createName: '',
-        confirmName: '',
-        orderType: '',
+      // 主表单信息
+      type: 2,
+      beiGoodsList: [], // 被置换产品列表
+      keGoodsList: [], // 可置换产品列表
+      orderList: [], // 被置换订单列表
+
+      // 被置换产品弹窗信息
+      beiGoodsDialog_show: false,
+      beiGoodsDialog_screenForm: {
+        number: '',
+        oldNumber: '',
+        name: '',
+        specification: '',
       },
-      queryItem: {},
-      isShowDetail: false,
-      isShowForm: false,
-      isShowExamine: false,
-      isShowReturn: false,
-      orderType : [
-        { label: '商用工程', val: 'TRADE'},
-        { label: '家用工程', val: 'HOME'},
-        { label: '零售订单', val: 'RETAIL'},
-        { label: '销售政策单', val: 'RETAIL_POLICY'}
-      ],
-      examineStatus : [
-        { label: '保存', val: 'SAVE'},
-        { label: '待审核', val: 'WAIT'},
-        { label: '通过', val: 'OK'},
-        { label: '不通过', val: 'FAIL'},
-        { label: '关闭', val: 'CLOSE'}
-      ],
+      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,
 
-  computed: {
-    exParams() {
-      return {
-        retreatOrderNo: this.screenForm.orderNum,
-        customerKeyword: this.screenForm.jxsNum,
-        productName: this.screenForm.chName,
-        specification: this.screenForm.model,
-        startTime: this.screenForm.date ? this.screenForm.date[0] : '',
-        endTime: this.screenForm.date ? this.screenForm.date[1] : '',
-        status: 1, // 1:退货单，2:电商退货单
-      }
+      // 被置换订单弹窗信息
+      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() {
-    this.getList();
+    
   },
 
   methods: {
-    // 查询按钮权限
-    checkBtnRole(value) {
-      // let btnRole = this.$route.meta.roles;
-      // if(!btnRole) {return true}
-      // let index = btnRole.indexOf(value);
-      // return index >= 0;
-      return true
+    
+    // 
+    changeType() {
+      this.beiGoodsList = [];
+      this.keGoodsList = [];
+      this.orderList = [];
     },
 
-    // 查询列表
-    getList() {
-      this.listLoading = true;
+    // 查询重复值并禁选
+    checkboxSelect(row, rowIndex) {
+      if (row.selected) {
+        return false // 禁用
+      }else{
+        return true // 不禁用
+      }
+    },
 
-      let params = {
-        pageNum: this.currentPage,
-        pageSize: this.pageSize,
-        displaceOrderId: this.screenForm.orderNum,
-        originOrderNo: this.screenForm.originOrderNo,
-        customerKeyword: this.screenForm.customerKeyword,
-        productName: this.screenForm.productName,
-        createName: this.screenForm.createName,
-        confirmName: this.screenForm.confirmName,
-        orderType: this.screenForm.orderType,
-        startOrderTime: this.screenForm.date ? this.screenForm.date[0] : '',
-        endOrderTime: this.screenForm.date ? this.screenForm.date[1] : ''
-      };
-      getList(params).then((res) => {
-        this.dataList = res.data.records;
-        this.listTotal = res.data.total;
-        this.listLoading = false;
+    // 获取列表 - 被置换产品
+    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;
       })
     },
 
-    // 提交筛选表单
-    submitScreenForm() {
-      this.currentPage = 1;
-      this.getList();
+    // 收藏商品
+    handleCollect(id) {
+      if(!this.token) {
+        return console.log('请先登录');
+      }
+      collectData({id}).then(res => { // api请求
+        console.log('收藏成功', res.data);
+      })
     },
 
-    // 重置筛选表单
-    resetScreenForm() {
-      this.$refs.screenForm.resetFields();
-      this.currentPage = 1;
-      this.getList();
+    // 加入购物车
+    addToCart(id) {
+      if(!this.token) {
+        return console.log('请先登录');
+      }
+      addData({id}).then(res => { // api请求
+        console.log('加入购物车成功', res.data);
+      })
     },
 
-    // 更改每页数量
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.getList();
+    // 立即购买
+    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) { }
+        })
+      })
     },
 
-    // 更改当前页
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.getList();
+    // 打开弹窗 - 被置换产品
+    openBeiGoodsDialog() {
+      if(this.orderList.length > 0) {
+        return this.$errorMsg('已选择订单不可更改产品');
+      }
+      this.beiGoodsDialog_show = true;
+      this.getBeiGoodsList();
     },
-    // 进入表单
-    toForm(item) {
-      this.queryItem = item;
-      this.isShowForm = true;
+
+    // 关闭弹窗 - 被置换产品
+    closeBeiGoodsDialog() {
+      this.beiGoodsDialog_show = false;
     },
 
-    // 进入审批
-    toExamine(item) {
-      this.queryItem = item;
-      this.isShowExamine = true;
+    // 提交筛选表单 - 被置换产品
+    submitBeiGoodsDialogScreenForm() {
+      this.beiGoodsDialog_currentPage = 1;
+      this.getBeiGoodsList();
     },
 
-    // 进入详情
-    toDetail(item) {
-      this.queryItem = item;
-      this.isShowDetail = true;
+    // 重置筛选表单 - 被置换产品
+    resetBeiGoodsDialogScreenForm() {
+      this.$refs.beiGoodsDialog_screenForm.resetFields();
+      this.beiGoodsDialog_currentPage = 1;
+      this.beiGoodsDialog_list = [];
+      this.getBeiGoodsList();
     },
 
-    // 进入退订
-    toReturn(item) {
-      this.queryItem = item;
-      this.isShowReturn = true;
+    // 更改列表页码 - 被置换产品
+    changeBeiGoodsDialogPage(val) {
+      this.beiGoodsDialog_currentPage = val;
+      this.getBeiGoodsList();
     },
 
-    backList() {
-      this.queryItem = {};
-      this.isShowDetail = false;
-      this.isShowForm = false;
-      this.isShowExamine = false;
-      this.isShowReturn = false;
+    // 确认选择产品 - 被置换产品
+    submitChooseBeiGoods(item) {
+      this.beiGoodsList = [item];
+      this.closeBeiGoodsDialog();
     },
-    handleSubmit(id) {
-      submitData({id}).then(res => {
-        this.$successMsg();
-        this.getList();
-      })
+
+    // 删除产品 - 被置换产品
+    deleteBeiGoodsList(index) {
+      if(this.orderList.length > 0) {
+        return this.$errorMsg('已选择订单不可更改产品');
+      }
+      this.beiGoodsList.splice(index, 1);
     },
-    // 撤回
-    handleWithdraw(id) {
-      revokeOrder({id}).then(res => {
-        this.$successMsg();
-        this.getList();
+
+
+    // 获取列表 - 可置换产品
+    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;
       })
     },
 
-    // 删除
-    handleDelete(id) {
-      deleteOrder({ids: id}).then(res => {
-        this.$successMsg();
-        this.getList();
+    // 打开弹窗 - 可置换产品
+    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;
       })
     },
 
-    // 批量删除
-    batchDelete() {
-      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        let ids = this.multipleSelection.map(item => {
-          return item.parentId;
+    // 打开弹窗 - 被置换订单
+    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 = '';
         });
-        deleteOrder({ids: ids.join(',')}).then(res => {
-          this.$successMsg();
-          this.getList();
-        })
-      }).catch(() => {});
+        this.orderList = this.orderList.concat(orderList);
+      }
+      this.closeOrderDialog();
+    },
+
+    // 删除产品 - 被置换订单
+    deleteOrderList(index) {
+      this.orderList.splice(index, 1);
     },
-    findOrderType(val) {
-      const obj = this.orderType.find((value) => value.val === val)
-      return obj ? obj.label : ''
+
+    // 判断是否存在被置换订单
+    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();
+      })
     },
-    findExamineStatus(val) {
-      const obj = this.examineStatus.find((value) => value.val === val)
-      return obj ? obj.label : ''
+
+    // 重置
+    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>