yzzn-middleground-supplier/src/views/supplier/saleOrder/index.vue

<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!--      <el-form-item label="客户联系方式" prop="clientelePhone">-->
      <!--        <el-input v-model="queryParams.clientelePhone" placeholder="请输入客户联系方式" clearable-->
      <!--                  @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="客户类型" prop="clienteleType">-->
      <!--        <el-select v-model="queryParams.clienteleType" placeholder="请选择客户类型" clearable size="small">-->
      <!--          <el-option label="请选择字典生成" value=""/>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="收货地址" prop="cneeAddress">-->
      <!--        <el-input v-model="queryParams.cneeAddress" placeholder="请输入收货地址" clearable @keyup.enter.native="handleQuery"/>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="售后状态" prop="afterSale">-->
      <!--        <el-input v-model="queryParams.afterSale" placeholder="请输入售后状态" clearable @keyup.enter.native="handleQuery"/>-->
      <!--      </el-form-item>-->
      <el-form-item label="订单编号" prop="orderNo">
        <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="客户名称" prop="clienteleName">
        <el-input v-model="queryParams.clienteleName" placeholder="请输入客户名称" clearable
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable size="small">
          <el-option label="请选择字典生成" value=""/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-popover
            placement="bottom"
            width="400"
            trigger="click"
        >
          <el-form-item label="订单编号" prop="orderNo">
            <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>

          <el-form-item label="订单类型" prop="orderType">
            <el-select v-model="queryParams.orderType" placeholder="请选择订单类型">
              <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SALE_ORDER_TYPE)"
                         :key="dict.value" :label="dict.label" :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="订单状态" prop="orderStatus">
            <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable size="small">
              <el-option label="请选择字典生成" value=""/>
            </el-select>
          </el-form-item>

          <el-form-item label="客户名称" prop="clienteleName">
            <el-input v-model="queryParams.clienteleName" placeholder="请输入客户名称" clearable
                      @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="客户类型" prop="clienteleType">
            <el-select v-model="form.clienteleType" placeholder="请选择客户类型">
              <el-option label="请选择字典生成" value=""/>
            </el-select>
          </el-form-item>

          <el-button slot="reference">复合查询</el-button>

          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        </el-popover>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['supplier:sale-order:create']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                   :loading="exportLoading"
                   v-hasPermi="['supplier:sale-order:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list" border
              @expand-change="toggleExpand"
    >
      <!--      <el-table-column label="主键id" align="center" prop="id" />-->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.goodslist" border style="margin-left: 50px">
            <el-table-column label="商品信息" align="center" width="300">
              <template slot-scope="scope">
                <el-descriptions :column="1" :contentStyle="{width:'40%'}">
                  <el-descriptions-item>
                    <template slot="label">
                      商品编号
                    </template>
                    {{ scope.row.goodsInfo.code }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      商品名称
                    </template>
                    {{ scope.row.goodsInfo.name }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      商品品牌
                    </template>
                    {{ scope.row.goodsInfo.brand }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      商品型号
                    </template>
                    {{ scope.row.goodsInfo.category }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      商品单价
                    </template>
                    {{ scope.row.goodsInfo.price }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      商品单位
                    </template>
                    {{ scope.row.goodsInfo.unit }}
                  </el-descriptions-item>
                </el-descriptions>
              </template>
            </el-table-column>
            <!-- 商品数量 -->
            <el-table-column label="商品数量" width="100"></el-table-column>

            <!-- 成交单价 -->
            <el-table-column label="成交单价" width="120"></el-table-column>

            <!-- 成交价格 -->
            <el-table-column label="成交价格" width="120"></el-table-column>

            <!-- 收款方式 -->
            <el-table-column label="收款方式" width="150"></el-table-column>

            <!-- 收款状态 -->
            <el-table-column label="收款状态" width="100"></el-table-column>

            <!-- 发货状态 -->
            <el-table-column label="发货状态" width="100"></el-table-column>

            <!-- 发货地址 -->
            <el-table-column label="发货地址" width="200"></el-table-column>

            <!-- 发货时间 -->
            <el-table-column label="发货时间" width="180"></el-table-column>

            <!-- 发货人 -->
            <el-table-column label="发货人" width="100"></el-table-column>

          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="序号" align="center" width="50">
        <template v-slot="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单信息" align="center">
        <template v-slot="scope">
          <el-descriptions :column="1" :contentStyle="{width:'40%'}">
            <el-descriptions-item>
              <template slot="label">
                订单编号
              </template>
              {{ scope.row.orderNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                订单类型
              </template>
              <dict-tag :type="DICT_TYPE.SALE_ORDER_TYPE" :value="scope.row.orderType"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                订单状态
              </template>
              <dict-tag :type="DICT_TYPE.SALE_ORDER_STATUS" :value="scope.row.orderStatus"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                订单总金额
              </template>
              {{ scope.row.orderNo }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <!--      <el-table-column label="客户ID" align="center" prop="clienteleId" />-->
      <el-table-column label="客户信息" align="center">
        <template v-slot="scope">
          <el-descriptions :column="1" :contentStyle="{width:'40%'}">
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                客户名称
              </template>
              {{ scope.row.clienteleName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                客户联系方式
              </template>
              {{ scope.row.clientelePhone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-share"></i>
                客户类型
              </template>
              {{ scope.row.clienteleType }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column label="收货地址" align="center" prop="cneeAddress"/>
      <!--      <el-table-column label="订单状态" align="center" prop="orderStatus"></el-table-column>-->
      <el-table-column label="预计发货时间" align="center" prop="predictShipmentsTime">
        <template v-slot="scope">
          {{ parseTime(scope.row.predictShipmentsTime, '{y}-{m}-{d}') }}
        </template>
      </el-table-column>
      <el-table-column label="售后状态" align="center" prop="afterSale"/>
      <el-table-column label="订单生成时间" align="center" prop="createTime">
        <template v-slot="scope">
          {{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
        </template>
      </el-table-column>
      <!--      <el-table-column label="商品ID" align="center" prop="goodsId" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template v-slot="scope">
          <div>
            <el-button size="mini" type="text"
            >操作记录
            </el-button>
          </div>
          <div>
            <el-button size="mini" type="text" @click="afterSaleTreatment(scope.row)"
            >售后处理
            </el-button>
          </div>
          <div>
            <el-button size="mini" type="text"
            >评论处理
            </el-button>
          </div>
          <div>
            <el-button size="mini" type="text" @click="consignment(scope.row)"
            >发货
            </el-button>
          </div>
          <div>
            <el-button size="mini" type="text" icon="el-icon-tickets"
                       v-hasPermi="['supplier:sale-order:update']"
                       @click="handleUpdate(scope.row)"
            >详情
            </el-button>
          </div>
          <!--          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"-->
          <!--                     v-hasPermi="['supplier:sale-order:delete']">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"
    />

    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="title" :visible.sync="open" width="650px" v-dialogDrag append-to-body>
      <div>
        <div style="font-size: 20px;color: #454545;margin-bottom: 10px;font-weight: bold">
          订单信息
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="订单编号" prop="orderNo">
                <el-input v-model="form.orderNo" placeholder="请输入订单编号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单类型" prop="orderType">
                <el-select v-model="form.orderType +''" placeholder="请选择订单类型">
                  <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SALE_ORDER_TYPE)"
                             :key="dict.value" :label="dict.label" :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="客户名称" prop="clienteleName">
                <el-input v-model="form.clienteleName" placeholder="请输入客户名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户联系方式" prop="clientelePhone">
                <el-input v-model="form.clientelePhone" placeholder="请输入客户联系方式"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="客户类型" prop="clienteleType">
                <el-select v-model="form.clienteleType" placeholder="请选择客户类型">
                  <el-option label="请选择字典生成" value=""/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单状态" prop="orderStatus">
                <el-radio-group v-model="form.orderStatus">
                  <el-radio label="1">请选择字典生成</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="收货地址" prop="cneeAddress">
            <el-input v-model="form.cneeAddress" placeholder="请输入收货地址" type="textarea" :rows="3"/>
          </el-form-item>
          <!--        <el-form-item label="客户ID" prop="clienteleId">-->
          <!--          <el-input v-model="form.clienteleId" placeholder="请输入客户ID" />-->
          <!--        </el-form-item>-->
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="预计发货时间" prop="predictShipmentsTime">
                <el-date-picker clearable v-model="form.predictShipmentsTime" type="date" value-format="timestamp"
                                placeholder="选择预计发货时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="售后状态" prop="afterSale">
                <el-select v-model="form.afterSale +''" placeholder="请选择售后状态">
                  <el-option label="请选择字典生成" value=""/>
                </el-select>
              </el-form-item>

            </el-col>
          </el-row>

          <!--        <el-form-item label="商品ID" prop="goodsId">-->
          <!--          <el-input v-model="form.goodsId" placeholder="请输入商品ID" />-->
          <!--        </el-form-item>-->
        </el-form>
      </div>
      <div>
        <div style="font-size: 20px;color: #454545;margin-bottom: 10px;font-weight: bold">
          物流信息
        </div>
        <div>
          <el-form label-width="100px">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="运输单位">
                  <el-input placeholder="请输入运输单位"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="物流编号">
                  <el-input placeholder="请输入物流编号"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="物流状态">
                  <el-select placeholder="请选择物流状态">
                    <el-option label="请选择字典生成" value=""/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">

              </el-col>
            </el-row>
            <el-form-item label="物流信息">
              <div style="background: #e0f2ff;padding: 10px;border-radius: 10px">
                <el-steps direction="vertical" :active="1" :space="50">
                  <el-step title="2024-03-04 10:00:00  承运单位揽件"></el-step>
                  <el-step title="XXXXXX"></el-step>
                  <el-step title="派件"></el-step>
                </el-steps>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!--      <div>-->
      <!--        <div style="font-size: 20px;color: #454545;margin-bottom: 10px;font-weight: bold">-->
      <!--          售后信息-->
      <!--        </div>-->
      <!--      </div>-->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 对话框(售后工单) -->
    <el-dialog title="售后工单" :visible.sync="isOpenAfterSale" width="700px" v-dialogDrag append-to-body>
      <el-row :gutter="10">
        <el-form ref="form" :model="formDetail" label-width="105px">
          <el-col :span="11">
            <el-form-item label="订单编号" prop="orderNo">
              <el-input v-model="formDetail.orderNo" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-button size="mini" type="text" icon="el-icon-copy-document"></el-button>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="orderCode">
              <el-input v-model="formDetail.clienteleName" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="售后类型" prop="category">
              <el-select v-model="formDetail.category" disabled>
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.AFTERSALE_CATEGORY)" :key="parseInt(dict.value)"
                           :label="dict.label" :value="parseInt(dict.value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期望处理方式" prop="state">
              <el-select v-model="formDetail.state" disabled>
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.AFTERSALE_STATE)" :key="parseInt(dict.value)"
                           :label="dict.label" :value="parseInt(dict.value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="问题描述" prop="questionDescriptive">
              <el-input type="textarea" v-model="formDetail.questionDescriptive" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="问题照片" prop="questionPicture">
              <el-input v-model="formDetail.questionPicture" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="处理建议" prop="processRecommendation">
              <el-input type="textarea" v-model="formDetail.processRecommendation"/>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 对话框(发货) -->
    <el-dialog title="发货提交" :visible.sync="isOpenShipments" width="850px" v-dialogDrag append-to-body>
      <el-form ref="form" :model="formDetail2" :rules="rules" label-width="120px">
        <el-row>
          <!-- 发货单号 -->
          <el-col :span="12">
            <el-form-item label="发货单号" prop="shipmentsNo">
              <el-input v-model="formDetail2.shipmentsNo" placeholder="请输入发货单号"/>
            </el-form-item>
          </el-col>

          <!-- 订单编号 -->
          <el-col :span="12">
            <el-form-item label="订单编号" prop="orderNo">
              <el-input v-model="formDetail2.orderNo" placeholder="请输入订单编号" disabled/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户名称" prop="clienteleName">
              <el-input v-model="formDetail2.clienteleName" disabled/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户联系方式" prop="clientelePhone">
              <el-input v-model="formDetail2.clientelePhone" disabled/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="承运单位" prop="sellerInfo">
              <el-input v-model="formDetail2.sellerInfo" placeholder="请输入卖家信息"/>
            </el-form-item>
          </el-col>

          <!-- 物流订单号 -->
          <el-col :span="12">
            <el-form-item label="运单编号" prop="logisticsOrderNo">
              <el-input v-model="formDetail2.logisticsOrderNo" placeholder="请输入物流订单号"/>
            </el-form-item>
          </el-col>

          <!-- 发货状态 -->
          <el-col :span="12">
            <el-form-item label="发货状态" prop="shipmentsStatus">
              <el-select v-model="formDetail2.shipmentsStatus" placeholder="请选择发货状态">
                <el-option
                    v-for="dict in this.getDictDatas(DICT_TYPE.SHIPMENTS_STATUS)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 发货地址 -->
          <el-col :span="24">
            <el-form-item label="发货地址" prop="cneeAddress">
              <el-input v-model="formDetail2.shipmentsStore" placeholder="请输入收货地址" type="textarea"/>
            </el-form-item>
          </el-col>

          <!-- 客户地址 -->
          <el-col :span="24">
            <el-form-item label="客户地址" prop="cneeAddress">
              <el-input v-model="formDetail2.cneeAddress" placeholder="请输入客户地址" type="textarea"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="margin-bottom: 20px;margin-left: 50px">
          <el-table v-loading="loading" :data="list">
            <el-table-column label="商品编号" align="center" prop="code"/>
            <el-table-column label="商品名称" align="center" prop="name"/>
            <el-table-column label="商品品牌" align="center" prop="brand"/>
            <el-table-column label="商品型号" align="center" prop="model"/>
            <el-table-column label="单位" align="center" prop="unit"/>
            <el-table-column label="成交单价" align="center" prop="marketPrice"/>
            <el-table-column label="应发数量" align="center" prop="num"/>
            <el-table-column label="实发数量" align="center" prop="num"/>
            <el-table-column label="操作" align="center">
              <template v-slot="scope">
                <el-button size="mini" type="text"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formDetail2.remark" placeholder="请输入备注" type="textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGoods
} from '@/api/supplier/goods'

import {
  createSaleOrder,
  updateSaleOrder,
  deleteSaleOrder,
  getSaleOrder,
  getSaleOrderPage,
  exportSaleOrderExcel
} from '@/api/supplier/saleOrder'

// import PortalSlideshowConfig from '@/views/supplier/portalSlideshowConfig'

export default {
  name: 'SaleOrder',
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 已售订单列表
      list: [],
      goodsMap: new Map(),
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      isOpenAfterSale: false,
      isOpenShipments: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        createTime: [],
        orderNo: null,
        orderType: null,
        clienteleId: null,
        clienteleName: null,
        clientelePhone: null,
        clienteleType: null,
        cneeAddress: null,
        orderStatus: null,
        predictShipmentsTime: [],
        afterSale: null,
        goodsId: null
      },
      // 表单参数
      form: {},
      formDetail: {},
      formDetail2: {},
      // 表单校验
      rules: {}
    }
  },
  watch: {
    // 'list': {
    //   handler: function(newValue) {
    //     console.log(newValue)
    //   },
    //   deep: true
    // }
  },
  created() {
    this.getList()
  },
  methods: {

    toggleExpand(row, expandedRows) {
      getGoods(row.goodsId).then(res => {
        row.goodslist.splice(0, 1, {
          goodsInfo: res.data,
          id: 'update'
        })
      })
    },
    afterSaleTreatment(row) {
      this.isOpenAfterSale = true
      this.formDetail = row
    },
    //发货
    consignment(row) {
      this.isOpenShipments = true
      this.formDetail2 = row
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      // 执行查询
      getSaleOrderPage(this.queryParams).then(response => {
        response.data.list.forEach(item => {
          item.goodslist = []
          item.goodslist.push({})
        })
        this.list = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 取消按钮 */
    cancel() {
      this.open = false
      this.isOpenShipments = false
      this.isOpenAfterSale = false
      this.reset()
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        orderNo: undefined,
        orderType: undefined,
        clienteleId: undefined,
        clienteleName: undefined,
        clientelePhone: undefined,
        clienteleType: undefined,
        cneeAddress: undefined,
        orderStatus: undefined,
        predictShipmentsTime: undefined,
        afterSale: undefined,
        goodsId: undefined
      }
      this.formDetail = {}
      this.formDetail2 = {}
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加已售订单'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id
      getSaleOrder(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改已售订单'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        // 修改的提交
        if (this.form.id != null) {
          updateSaleOrder(this.form).then(response => {
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.getList()
          })
          return
        }
        // 添加的提交
        createSaleOrder(this.form).then(response => {
          this.$modal.msgSuccess('新增成功')
          this.open = false
          this.getList()
        })
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id
      this.$modal.confirm('是否确认删除已售订单编号为"' + id + '"的数据项?').then(function() {
        return deleteSaleOrder(id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = { ...this.queryParams }
      params.pageNo = undefined
      params.pageSize = undefined
      this.$modal.confirm('是否确认导出所有已售订单数据项?').then(() => {
        this.exportLoading = true
        return exportSaleOrderExcel(params)
      }).then(response => {
        this.$download.excel(response, '已售订单.xls')
        this.exportLoading = false
      }).catch(() => {
      })
    }
  }
}
</script>