|
@@ -1,450 +1,485 @@
|
|
|
<template>
|
|
|
- <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
|
|
|
- <template slot-scope="{activeKey, data}">
|
|
|
- <div v-if="activeKey == 'list'" class="app-container">
|
|
|
- <div class="screen-container">
|
|
|
- <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :xs="24" :sm="12" :lg="6">
|
|
|
- <el-form-item label="订单号" prop="orderId">
|
|
|
- <el-input v-model="screenForm.orderId" placeholder="请输入订单号"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :lg="6">
|
|
|
- <el-form-item label="商品名称" prop="goodsName">
|
|
|
- <el-input v-model="screenForm.goodsName" placeholder="请输入商品名称"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :lg="6">
|
|
|
- <el-form-item label="会员昵称" prop="memberName">
|
|
|
- <el-input v-model="screenForm.memberName" placeholder="请输入会员昵称"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :lg="6">
|
|
|
- <el-form-item label="手机号" prop="phone">
|
|
|
- <el-input v-model="screenForm.phone" placeholder="请输入手机号"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :xs="24" :sm="12" :lg="6">
|
|
|
- <el-form-item label="网点名称" prop="websitId">
|
|
|
- <el-select v-model="screenForm.websitId" placeholder="全部" filterable>
|
|
|
- <el-option label="全部" value=""></el-option>
|
|
|
- <el-option :label="item.name" :value="item.id" v-for="(item, index) in websiteList"
|
|
|
- :key="index"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :xs="24" :sm="12" :lg="6">
|
|
|
- <el-form-item label="兑换码" prop="exchangeCode">
|
|
|
- <el-input v-model="screenForm.exchangeCode" placeholder="请输入兑换码"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <!-- <el-col :xs="24" :sm="12" :lg="6">-->
|
|
|
- <!-- <el-form-item label="当前状态" prop="orderStatus">-->
|
|
|
- <!-- <el-select v-model="screenForm.orderStatus" placeholder="全部">-->
|
|
|
- <!-- <el-option label="全部" value=""></el-option>-->
|
|
|
- <!-- <el-option :label="item.label" :value="item.value" v-for="(item, index) in screen_status" :key="index"></el-option>-->
|
|
|
- <!-- </el-select>-->
|
|
|
- <!-- </el-form-item>-->
|
|
|
- <!-- </el-col>-->
|
|
|
-
|
|
|
- <el-col :xs="24" :sm="12" :lg="6">
|
|
|
- <el-form-item label="创建时间" prop="createDate" style="height: 33px;">
|
|
|
- <el-date-picker v-model="screenForm.createDate" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- range-separator="至" 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="payDate" style="height: 33px;">
|
|
|
- <el-date-picker v-model="screenForm.payDate" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- range-separator="至" 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="evaluateStatus">
|
|
|
- <el-select v-model="screenForm.evaluateStatus" placeholder="全部">
|
|
|
- <el-option label="全部" value=""></el-option>
|
|
|
- <el-option label="未评价订单" :value="0"></el-option>
|
|
|
- <el-option label="已评价订单" :value="3"></el-option>
|
|
|
- <el-option label="差评订单" :value="1"></el-option>
|
|
|
- <el-option label="好评订单" :value="2"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :xs="24" :sm="12" :lg="6">
|
|
|
- <el-form-item label="派单异常" prop="sendStatus">
|
|
|
- <el-select v-model="screenForm.sendStatus" placeholder="全部">
|
|
|
- <el-option label="全部" value=""></el-option>
|
|
|
- <el-option label="派单异常订单" :value="true"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :lg="6">
|
|
|
- <el-form-item label="信息编号" prop="workerOrderNo">
|
|
|
- <el-input v-model="screenForm.workerOrderNo" placeholder="请输入信息编号"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :xs="24" :sm="12" :lg="6" class="tr">
|
|
|
- <el-form-item label="">
|
|
|
- <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
|
|
|
- <el-button size="small" @click="resetScreenForm">清空</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="tabs-container order-tabs-container clearfix">
|
|
|
- <div class="fl">
|
|
|
- <el-tabs v-model="tabCurrent" type="card" @tab-click="changeTabs" class="fl" style="margin-right: 20px">
|
|
|
- <el-tab-pane label="全部" name="ALL"></el-tab-pane>
|
|
|
- <el-tab-pane label="待付款" name="NOPAY"></el-tab-pane>
|
|
|
- <el-tab-pane label="待发货" name="DFH"></el-tab-pane>
|
|
|
- <el-tab-pane label="已发货" name="YFH"></el-tab-pane>
|
|
|
- <el-tab-pane label="已完成" name="OVER"></el-tab-pane>
|
|
|
- <el-tab-pane label="已关闭" name="CLOSE"></el-tab-pane>
|
|
|
- <el-tab-pane label="已超时" name="TIMEOUT"></el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- <el-button v-if="$restrict('batchNote')" class="fl" type="primary" size="small" @click="batchRemark">批量备注</el-button>
|
|
|
- <el-button class="fl" type="primary" size="small" @click="batchShipmentVisible = true"
|
|
|
- v-show="tabCurrent == 'DFH' && $restrict('batchDelivery')">批量发货</el-button>
|
|
|
- <el-button class="fl" size="small" @click="downloadTemplate" v-show="tabCurrent == 'DFH' && $restrict('template')">下载批量发货模版</el-button>
|
|
|
- </div>
|
|
|
- <div class="fr">
|
|
|
- <el-button v-if="$restrict('exp')" size="small" type="primary" @click="handleExport">导出报表</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="order-main-container">
|
|
|
- <div class="table-top">
|
|
|
- <el-row style="width:100%">
|
|
|
- <el-col :span="6">
|
|
|
- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="allChange"
|
|
|
- style="margin-left: 10px"></el-checkbox>
|
|
|
- <span class="item product">商品信息</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="3" style="text-align: right"><span class="item">单价(元)/数量</span></el-col>
|
|
|
- <el-col :span="3" style="text-align: center"><span class="item">买家信息</span></el-col>
|
|
|
- <el-col :span="3" style="text-align: center"><span class="item">收货信息</span></el-col>
|
|
|
- <el-col :span="2" style="text-align: center"><span class="item">实付金额</span></el-col>
|
|
|
- <el-col :span="2" style="text-align: center"><span class="item">订单状态</span></el-col>
|
|
|
- <el-col :span="2" style="text-align: center"><span class="item">评价状态</span></el-col>
|
|
|
- <el-col :span="3" style="text-align: center"><span class="item">操作</span></el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div class="order-item" v-for="order in dataList" :key="order.orderId">
|
|
|
- <div class="order-top">
|
|
|
- <el-checkbox v-model="order.selected"></el-checkbox>
|
|
|
- <span><b>订单号</b>:{{ order.orderId }}</span>
|
|
|
- <span><b>下单时间</b>:{{ order.createTime }}</span>
|
|
|
- <span><b>商户</b>:{{ order.companyWechatName || '无' }}</span>
|
|
|
- <span><b>网点</b>:{{ order.websitName || '无' }}</span>
|
|
|
- <div class="fr">
|
|
|
- <el-link type="primary" v-if="$restrict('orderNote')" :underline="false" @click="showRemark(order)">订单备注</el-link>
|
|
|
- <el-link type="primary" v-if="$restrict('detail')" :underline="false" @click="queryDetail(order.orderId)">查看详情</el-link>
|
|
|
- <!-- <el-link type="primary" :underline="false" @click="queryWorkOrder(order.orderId)">订单工单</el-link> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="order-content">
|
|
|
- <el-row style="width:100%;">
|
|
|
- <el-col :span="9" style="height: 100%;">
|
|
|
- <div class="col-item-pro">
|
|
|
- <div class="pro-item" v-for="orderItem in order.orderDetails" :key="orderItem.orderDetailId">
|
|
|
- <div class="left">
|
|
|
- <div class="image">
|
|
|
- <img :src="orderItem.imgUrl" style="height:80px;width: 80px;">
|
|
|
- </div>
|
|
|
- <div class="main">
|
|
|
- <span>{{ orderItem.goodsName }}</span>
|
|
|
- <span class="spec"
|
|
|
- v-if="orderItem.goodsSpecName === '默认' && orderItem.goodsSpecValue === '默认'">默认</span>
|
|
|
- <span class="spec" v-else>{{ orderItem.goodsSpecName }}-{{ orderItem.goodsSpecValue }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <span>¥{{ orderItem.price }}</span>
|
|
|
- <span>x{{ orderItem.num }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="3" style="height: 100%;">
|
|
|
- <div class="col-item">
|
|
|
- <div>{{ order.userName }}</div>
|
|
|
- <div>{{ order.phone }}</div>
|
|
|
- <div style="color: #409EFF;">{{ order.isAddCorp ? '(已入驻企微)' : '' }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="3" style="height: 100%;">
|
|
|
- <div class="col-item">
|
|
|
- <div>{{ order.receUserName }}/{{ order.recePhone }}</div>
|
|
|
- <div class="ellipsis-2">{{ order.province + order.city + order.area + order.street + order.receAddress +
|
|
|
- order.houseNo }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" style="height: 100%;">
|
|
|
- <div class="col-item">
|
|
|
- <div class="totalprice">¥{{ order.payAmount }}</div>
|
|
|
- <div style="font-size: 12px" v-if="order.discountAmount">(<span>-{{ order.discountAmount }}</span><span
|
|
|
- v-if="order.promotionDiscountRate">/{{ order.promotionDiscountRate * 10 }}折</span>)</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" style="height: 100%;">
|
|
|
- <div class="col-item">
|
|
|
- <div style="display: flex; align-items: center;">
|
|
|
- <img src="@/assets/order/CLOSE.png" style="width: 16px; flex-shrink: 0;"
|
|
|
- v-if="order.orderStatus == 'CLOSE'">
|
|
|
- <img src="@/assets/order/DFH.png" style="width: 16px; flex-shrink: 0;"
|
|
|
- v-if="order.orderStatus == 'DFH'">
|
|
|
- <img src="@/assets/order/NOPAY.png" style="width: 16px; flex-shrink: 0;"
|
|
|
- v-if="order.orderStatus == 'NOPAY'">
|
|
|
- <img src="@/assets/order/OVER.png" style="width: 16px; flex-shrink: 0;"
|
|
|
- v-if="order.orderStatus == 'OVER'">
|
|
|
- <img src="@/assets/order/TIMEOUT.png" style="width: 16px; flex-shrink: 0;"
|
|
|
- v-if="order.orderStatus == 'TIMEOUT'">
|
|
|
- <img src="@/assets/order/YFH.png" style="width: 16px; flex-shrink: 0;"
|
|
|
- v-if="order.orderStatus == 'YFH'">
|
|
|
- <span style="margin-left: 4px">{{ order.orderStatus | ORDER_CURRENT_STATUS_FILTER }}</span>
|
|
|
- </div>
|
|
|
- <div>({{ order.toWorkOrder ? '已派单' : '未派单' }})</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" style="height: 100%;">
|
|
|
- <div class="col-item">
|
|
|
- <el-popover placement="top" width="220" trigger="hover" v-if="order.commentService">
|
|
|
- <div class="rate-list">
|
|
|
- <div style="display: flex; align-items: center; margin-bottom: 5px;">商品质量:<el-rate
|
|
|
- :value="order.commentGoods" disabled></el-rate></div>
|
|
|
- <div style="display: flex; align-items: center; margin-bottom: 5px;">服务质量:<el-rate
|
|
|
- :value="order.commentService" disabled></el-rate></div>
|
|
|
- <div style="display: flex; align-items: center;">配送质量:<el-rate :value="order.commentExpress"
|
|
|
- disabled></el-rate></div>
|
|
|
- </div>
|
|
|
- <el-button type="text" slot="reference">已评价</el-button>
|
|
|
- </el-popover>
|
|
|
- <div v-else>未评价</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="3" style="height: 100%;">
|
|
|
- <div class="col-item">
|
|
|
- <div class="operate">
|
|
|
- <el-popconfirm title="确定取消订单吗?" @confirm="cancelOrder(order.orderId)"
|
|
|
- v-if="order.orderStatus === 'NOPAY' && $restrict('cancelOrder')">
|
|
|
- <el-button slot="reference" type="text" size="small">取消订单</el-button>
|
|
|
- </el-popconfirm>
|
|
|
- <el-button type="text" size="small" v-if="order.orderStatus === 'DFH' && $restrict('deliver')"
|
|
|
- @click="showLogistics(order, 'add')">发货</el-button>
|
|
|
- <el-button type="text" size="small" v-if="order.orderStatus === 'DFH' && $restrict('changeShippingaddress')"
|
|
|
- @click="openAddressForm(order)">修改收货地址</el-button>
|
|
|
- <el-button type="text" size="small"
|
|
|
- v-if="order.orderStatus === 'YFH' && $restrict('changeDeliverynumber') && order.orderDetails.some(i => i.workOrderType === 'INSTALL')"
|
|
|
- @click="showLogistics(order, 'edit')">
|
|
|
- 修改快递单号
|
|
|
- </el-button>
|
|
|
- <el-button type="text" size="small"
|
|
|
- v-if="(order.orderStatus === 'YFH' || order.orderStatus === 'OVER') && $restrict('viewLogistics') && order.orderDetails.some(i => i.workOrderType === 'INSTALL')"
|
|
|
- @click="queryLogistics(order)">
|
|
|
- 查看物流
|
|
|
- </el-button>
|
|
|
- <!-- toWorkOrderDetail(order.orderId) -->
|
|
|
- <el-button type="text" size="small" v-if="order.toWorkOrder && $restrict('workOrder_detail')"
|
|
|
- @click="queryWorkOrder(order.orderId)">查看工单</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div class="order-remark buyer" v-if="order.buyerMsg">买家留言:{{ order.buyerMsg }}</div>
|
|
|
- <div class="order-remark saler" v-if="order.remark">商家备注:{{ order.remark }}</div>
|
|
|
- </div>
|
|
|
- <div class="no-data" v-if="dataList.length <= 0">暂无订单</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>
|
|
|
- <!-- 订单备注 -->
|
|
|
- <div v-if="activeKey == 'remark'" class="app-container">
|
|
|
- <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 16 }" placeholder="请输入备注内容" v-model="remark"
|
|
|
- maxlength="100" show-word-limit>
|
|
|
- </el-input>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button type="primary" @click="saveRemark(data.removeTab)">保 存</el-button>
|
|
|
- <el-button @click="data.removeTab();cancelRemark">取 消</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 物流信息 -->
|
|
|
- <div v-if="activeKey == 'materialDetail'" class="app-container">
|
|
|
- <el-table v-loading="logisticsLoading" :data="logistics" style="width: 100%" size="mini">
|
|
|
- <el-table-column prop="comName" label="物流公司" align="center"></el-table-column>
|
|
|
- <el-table-column prop="areaName" label="地区名称" align="center"></el-table-column>
|
|
|
- <el-table-column prop="time" label="物流时间" align="center"></el-table-column>
|
|
|
- <el-table-column prop="state" label="物流状态" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{ scope.row.state | EXPRESS_CURRENT_STATE_FILTER }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
|
|
|
- </el-table>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="logisticsVisible = false;data.removeTab()">关 闭</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 发货弹窗 -->
|
|
|
- <div v-if="activeKey == 'deliverGoods' || activeKey == 'editExpressage'" class="app-container">
|
|
|
- <el-form :model="logisticsForm" ref="logisticsForm" label-width="100px" label-position="left">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="快递单号" prop="logisticsNo" :rules="[{ required: true, message: '快递单号不能为空', trigger: 'blur' }]">
|
|
|
- <el-input v-model="logisticsForm.logisticsNo" placeholder="请输入快递单号"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="物流公司" prop="companyCode"
|
|
|
- :rules="[{ required: true, message: '请选择物流公司', trigger: 'change' }]">
|
|
|
- <el-select v-model="logisticsForm.companyCode" placeholder="请选择物流公司" style="width: 100%;">
|
|
|
- <el-option :label="item.name" :value="item.code" v-for="(item, index) in companyList"
|
|
|
- :key="index"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="仓储" prop="storageId" v-if="logisticsType === 'add'"
|
|
|
- :rules="[{ required: true, message: '请选择仓储', trigger: 'change' }]">
|
|
|
- <el-select v-model="logisticsForm.storageId" placeholder="请选择仓储" style="width: 100%;">
|
|
|
- <el-option :label="item.storageName" :value="item.storageId" v-for="(item, index) in storageList"
|
|
|
- :key="index"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="是否派单" prop="workOrder" v-if="logisticsType === 'add'">
|
|
|
- <el-radio-group v-model="logisticsForm.workOrder">
|
|
|
- <el-radio :label="true">是</el-radio>
|
|
|
- <el-radio :label="false">否</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="是否退换单" prop="exchange" v-if="logisticsType === 'add'">
|
|
|
- <el-radio-group v-model="logisticsForm.exchange">
|
|
|
- <el-radio :label="true">是</el-radio>
|
|
|
- <el-radio :label="false">否</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button type="primary" @click="saveLogistics(data.removeTab)">保 存</el-button>
|
|
|
- <el-button @click="cancelLogistics;data.removeTab()">取 消</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 修改收货地址 -->
|
|
|
- <div v-if="activeKey == 'editAddress'" class="app-container">
|
|
|
- <el-form :model="addressForm" :rules="addressFormRules" ref="addressForm" label-width="80px" label-position="left">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="姓名" prop="name">
|
|
|
- <el-input v-model="addressForm.name" placeholder="请输入姓名"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="电话" prop="phone">
|
|
|
- <el-input v-model="addressForm.phone" placeholder="请输入电话"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="省" prop="province">
|
|
|
- <el-select v-model="addressForm.province" placeholder="请选择省" @change="changeProvince" style="width: 100%">
|
|
|
- <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="市" prop="city">
|
|
|
- <el-select v-model="addressForm.city" placeholder="请选择市" @change="changeCity" style="width: 100%">
|
|
|
- <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="区" prop="area">
|
|
|
- <el-select v-model="addressForm.area" placeholder="请选择区" @change="changeArea" style="width: 100%">
|
|
|
- <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="街道" prop="street">
|
|
|
- <el-select v-model="addressForm.street" placeholder="请选择街道" @change="changeStreet" style="width: 100%">
|
|
|
- <el-option v-for="item in streetList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="详细地址" prop="address">
|
|
|
- <el-input v-model="addressForm.address" placeholder="请输入详细地址"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="门牌号" prop="house">
|
|
|
- <el-input v-model="addressForm.house" placeholder="请输入门牌号"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button type="primary" @click="submitAddressForm(data.removeTab)">保 存</el-button>
|
|
|
- <el-button @click="cancelAddressForm;data.removeTab()">取 消</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 批量发货 -->
|
|
|
- <el-dialog title="批量发货" :visible.sync="batchShipmentVisible" :show-close="false" width="30%"
|
|
|
- :close-on-click-modal="false">
|
|
|
- <el-form ref="batchShipmentForm" label-position="top" label-width="120px" style="height: 194px;">
|
|
|
- <el-form-item label="上传发货表格" prop="fileUrl">
|
|
|
- <el-upload ref="upload" class="upload-demo" :action="baseURL + 'order/goods/batch/deliver'" :headers="myHeaders"
|
|
|
- :on-remove="handleRemove" :on-change="handleChange" :before-upload="beforeUpload" :auto-upload="false"
|
|
|
- :file-list="fileList">
|
|
|
- <el-button size="small" type="primary">{{ fileList.length == 0 ? '点击上传' : '重新上传' }}</el-button>
|
|
|
- <div slot="tip" class="el-upload__tip">只支持上传excel表格文件</div>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="cancelBatchShipmentForm">取 消</el-button>
|
|
|
- <el-button type="primary" @click="submitBatchShipmentForm">发 货</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </zj-tab-page>
|
|
|
+ <div>
|
|
|
+ <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
|
|
|
+ <template slot-scope="{activeKey, data}">
|
|
|
+ <div v-if="activeKey == 'list'" class="app-container">
|
|
|
+ <div class="screen-container">
|
|
|
+ <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="订单号" prop="orderId">
|
|
|
+ <el-input v-model="screenForm.orderId" placeholder="请输入订单号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="商品名称" prop="goodsName">
|
|
|
+ <el-input v-model="screenForm.goodsName" placeholder="请输入商品名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="会员昵称" prop="memberName">
|
|
|
+ <el-input v-model="screenForm.memberName" placeholder="请输入会员昵称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="手机号" prop="phone">
|
|
|
+ <el-input v-model="screenForm.phone" placeholder="请输入手机号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="网点名称" prop="websitId">
|
|
|
+ <el-select v-model="screenForm.websitId" placeholder="全部" filterable>
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option :label="item.name" :value="item.id" v-for="(item, index) in websiteList"
|
|
|
+ :key="index"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="兑换码" prop="exchangeCode">
|
|
|
+ <el-input v-model="screenForm.exchangeCode" placeholder="请输入兑换码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- <el-col :xs="24" :sm="12" :lg="6">-->
|
|
|
+ <!-- <el-form-item label="当前状态" prop="orderStatus">-->
|
|
|
+ <!-- <el-select v-model="screenForm.orderStatus" placeholder="全部">-->
|
|
|
+ <!-- <el-option label="全部" value=""></el-option>-->
|
|
|
+ <!-- <el-option :label="item.label" :value="item.value" v-for="(item, index) in screen_status" :key="index"></el-option>-->
|
|
|
+ <!-- </el-select>-->
|
|
|
+ <!-- </el-form-item>-->
|
|
|
+ <!-- </el-col>-->
|
|
|
+
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="创建时间" prop="createDate" style="height: 33px;">
|
|
|
+ <el-date-picker v-model="screenForm.createDate" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ range-separator="至" 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="payDate" style="height: 33px;">
|
|
|
+ <el-date-picker v-model="screenForm.payDate" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ range-separator="至" 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="evaluateStatus">
|
|
|
+ <el-select v-model="screenForm.evaluateStatus" placeholder="全部">
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option label="未评价订单" :value="0"></el-option>
|
|
|
+ <el-option label="已评价订单" :value="3"></el-option>
|
|
|
+ <el-option label="差评订单" :value="1"></el-option>
|
|
|
+ <el-option label="好评订单" :value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="派单异常" prop="sendStatus">
|
|
|
+ <el-select v-model="screenForm.sendStatus" placeholder="全部">
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option label="派单异常订单" :value="true"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <el-form-item label="信息编号" prop="workerOrderNo">
|
|
|
+ <el-input v-model="screenForm.workerOrderNo" placeholder="请输入信息编号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" class="tr">
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
|
|
|
+ <el-button size="small" @click="resetScreenForm">清空</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tabs-container order-tabs-container clearfix">
|
|
|
+ <div class="fl">
|
|
|
+ <el-tabs v-model="tabCurrent" type="card" @tab-click="changeTabs" class="fl" style="margin-right: 20px">
|
|
|
+ <el-tab-pane label="全部" name="ALL"></el-tab-pane>
|
|
|
+ <el-tab-pane label="待付款" name="NOPAY"></el-tab-pane>
|
|
|
+ <el-tab-pane label="待发货" name="DFH"></el-tab-pane>
|
|
|
+ <el-tab-pane label="已发货" name="YFH"></el-tab-pane>
|
|
|
+ <el-tab-pane label="已完成" name="OVER"></el-tab-pane>
|
|
|
+ <el-tab-pane label="已退款" name="CLOSE"></el-tab-pane>
|
|
|
+ <el-tab-pane label="已超时" name="TIMEOUT"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <el-button v-if="$restrict('batchNote')" class="fl" type="primary" size="small" @click="batchRemark">批量备注</el-button>
|
|
|
+ <el-button class="fl" type="primary" size="small" @click="batchShipmentVisible = true"
|
|
|
+ v-show="tabCurrent == 'DFH' && $restrict('batchDelivery')">批量发货</el-button>
|
|
|
+ <el-button class="fl" size="small" @click="downloadTemplate" v-show="tabCurrent == 'DFH' && $restrict('template')">下载批量发货模版</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="fr">
|
|
|
+ <el-button v-if="$restrict('exp')" size="small" type="primary" @click="handleExport">导出报表</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="order-main-container">
|
|
|
+ <div class="table-top">
|
|
|
+ <el-row style="width:100%">
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="allChange"
|
|
|
+ style="margin-left: 10px"></el-checkbox>
|
|
|
+ <span class="item product">商品信息</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" style="text-align: right"><span class="item">单价(元)/数量</span></el-col>
|
|
|
+ <el-col :span="3" style="text-align: center"><span class="item">买家信息</span></el-col>
|
|
|
+ <el-col :span="3" style="text-align: center"><span class="item">收货信息</span></el-col>
|
|
|
+ <el-col :span="2" style="text-align: center"><span class="item">实付金额</span></el-col>
|
|
|
+ <el-col :span="2" style="text-align: center"><span class="item">订单状态</span></el-col>
|
|
|
+ <el-col :span="2" style="text-align: center"><span class="item">评价状态</span></el-col>
|
|
|
+ <el-col :span="2" style="text-align: center"><span class="item">业务员</span></el-col>
|
|
|
+ <el-col :span="2" style="text-align: center"><span class="item">分销员</span></el-col>
|
|
|
+ <el-col :span="2" style="text-align: center"><span class="item">操作</span></el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="order-item" v-for="order in dataList" :key="order.orderId">
|
|
|
+ <div class="order-top">
|
|
|
+ <el-checkbox v-model="order.selected"></el-checkbox>
|
|
|
+ <span><b>订单号</b>:{{ order.orderId }}</span>
|
|
|
+ <span><b>下单时间</b>:{{ order.createTime }}</span>
|
|
|
+ <span><b>商户</b>:{{ order.companyWechatName || '无' }}</span>
|
|
|
+ <span><b>网点</b>:{{ order.websitName || '无' }}</span>
|
|
|
+ <el-tag>{{order.saleType | saleTypeFilter}}</el-tag>
|
|
|
+ <div class="fr">
|
|
|
+ <el-link type="primary" v-if="$restrict('orderNote')" :underline="false" @click="showRemark(order)">订单备注</el-link>
|
|
|
+ <el-link type="primary" v-if="$restrict('detail')" :underline="false" @click="queryDetail(order.orderId)">查看详情</el-link>
|
|
|
+ <!-- <el-link type="primary" :underline="false" @click="queryWorkOrder(order.orderId)">订单工单</el-link> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="order-content">
|
|
|
+ <el-row style="width:100%;">
|
|
|
+ <el-col :span="6" style="height: 100%;">
|
|
|
+ <div class="col-item-pro">
|
|
|
+ <div class="pro-item" v-for="orderItem in order.orderDetails" :key="orderItem.orderDetailId">
|
|
|
+ <div class="left">
|
|
|
+ <div class="image">
|
|
|
+ <img :src="orderItem.imgUrl" style="height:80px;width: 80px;">
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <span>{{ orderItem.goodsName }}</span>
|
|
|
+ <span class="spec"
|
|
|
+ v-if="orderItem.goodsSpecName === '默认' && orderItem.goodsSpecValue === '默认'">默认</span>
|
|
|
+ <span class="spec" v-else>{{ orderItem.goodsSpecName }}-{{ orderItem.goodsSpecValue }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span>¥{{ orderItem.price }}</span>
|
|
|
+ <span>x{{ orderItem.num }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <div>{{ order.userName }}</div>
|
|
|
+ <div>{{ order.phone }}</div>
|
|
|
+ <div style="color: #409EFF;">{{ order.isAddCorp ? '(已入驻企微)' : '' }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <div>{{ order.receUserName }}/{{ order.recePhone }}</div>
|
|
|
+ <div class="ellipsis-2">{{ order.province + order.city + order.area + order.street + order.receAddress +
|
|
|
+ order.houseNo }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <div class="totalprice">¥{{ order.payAmount }}</div>
|
|
|
+ <div style="font-size: 12px" v-if="order.discountAmount">(<span>-{{ order.discountAmount }}</span><span
|
|
|
+ v-if="order.promotionDiscountRate">/{{ order.promotionDiscountRate * 10 }}折</span>)</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <div style="display: flex; align-items: center;">
|
|
|
+ <img src="@/assets/order/CLOSE.png" style="width: 16px; flex-shrink: 0;" v-if="order.orderStatus == 'CLOSE'">
|
|
|
+ <img src="@/assets/order/DFH.png" style="width: 16px; flex-shrink: 0;" v-if="order.orderStatus == 'DFH'">
|
|
|
+ <img src="@/assets/order/NOPAY.png" style="width: 16px; flex-shrink: 0;" v-if="order.orderStatus == 'NOPAY'">
|
|
|
+ <img src="@/assets/order/OVER.png" style="width: 16px; flex-shrink: 0;" v-if="order.orderStatus == 'OVER'">
|
|
|
+ <img src="@/assets/order/TIMEOUT.png" style="width: 16px; flex-shrink: 0;" v-if="order.orderStatus == 'TIMEOUT'">
|
|
|
+ <img src="@/assets/order/YFH.png" style="width: 16px; flex-shrink: 0;" v-if="order.orderStatus == 'YFH'">
|
|
|
+ <span style="margin-left: 4px">{{ order.orderStatus | ORDER_CURRENT_STATUS_FILTER }}</span>
|
|
|
+ </div>
|
|
|
+ <div>({{ order.toWorkOrder ? '已派单' : '未派单' }})</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <el-popover placement="top" width="220" trigger="hover" v-if="order.commentService">
|
|
|
+ <div class="rate-list">
|
|
|
+ <div style="display: flex; align-items: center; margin-bottom: 5px;">商品质量:<el-rate
|
|
|
+ :value="order.commentGoods" disabled></el-rate></div>
|
|
|
+ <div style="display: flex; align-items: center; margin-bottom: 5px;">服务质量:<el-rate
|
|
|
+ :value="order.commentService" disabled></el-rate></div>
|
|
|
+ <div style="display: flex; align-items: center;">配送质量:<el-rate :value="order.commentExpress"
|
|
|
+ disabled></el-rate></div>
|
|
|
+ </div>
|
|
|
+ <el-button type="text" slot="reference">已评价</el-button>
|
|
|
+ </el-popover>
|
|
|
+ <div v-else>未评价</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <div>{{order.saleName}}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <div>{{order.workerName}}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" style="height: 100%;">
|
|
|
+ <div class="col-item">
|
|
|
+ <div class="operate">
|
|
|
+ <el-popconfirm title="确定取消订单吗?" @confirm="cancelOrder(order.orderId)"
|
|
|
+ v-if="order.orderStatus === 'NOPAY' && $restrict('cancelOrder')">
|
|
|
+ <el-button slot="reference" type="text" size="small">取消订单</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ <el-button type="text" size="small" v-if="order.orderStatus === 'DFH' && $restrict('deliver')"
|
|
|
+ @click="showLogistics(order, 'add')">发货</el-button>
|
|
|
+ <el-button type="text" size="small" v-if="order.orderStatus === 'DFH' && $restrict('changeShippingaddress')"
|
|
|
+ @click="openAddressForm(order)">修改收货地址</el-button>
|
|
|
+ <el-button type="text" size="small"
|
|
|
+ v-if="order.orderStatus === 'YFH' && $restrict('changeDeliverynumber') && order.orderDetails.some(i => i.workOrderType === 'INSTALL')"
|
|
|
+ @click="showLogistics(order, 'edit')">
|
|
|
+ 修改快递单号
|
|
|
+ </el-button>
|
|
|
+ <el-button type="text" size="small"
|
|
|
+ v-if="(order.orderStatus === 'YFH' || order.orderStatus === 'OVER') && $restrict('viewLogistics') && order.orderDetails.some(i => i.workOrderType === 'INSTALL')"
|
|
|
+ @click="queryLogistics(order)">
|
|
|
+ 查看物流
|
|
|
+ </el-button>
|
|
|
+ <!-- toWorkOrderDetail(order.orderId) -->
|
|
|
+ <el-button type="text" size="small" v-if="order.toWorkOrder && $restrict('workOrder_detail')"
|
|
|
+ @click="queryWorkOrder(order.orderId)">查看工单</el-button>
|
|
|
+ <el-button type="text" size="small"
|
|
|
+ v-if="(order.orderStatus === 'DFH' || order.orderStatus === 'YFH')"
|
|
|
+ @click="toPrint(order)">
|
|
|
+ 打印
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="order-remark buyer" v-if="order.buyerMsg">买家留言:{{ order.buyerMsg }}</div>
|
|
|
+ <div class="order-remark saler" v-if="order.remark">商家备注:{{ order.remark }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="no-data" v-if="dataList.length <= 0">暂无订单</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>
|
|
|
+ <!-- 订单备注 -->
|
|
|
+ <div v-if="activeKey == 'remark'" class="app-container">
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 16 }" placeholder="请输入备注内容" v-model="remark"
|
|
|
+ maxlength="100" show-word-limit>
|
|
|
+ </el-input>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="saveRemark(data.removeTab)">保 存</el-button>
|
|
|
+ <el-button @click="data.removeTab();cancelRemark">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 物流信息 -->
|
|
|
+ <div v-if="activeKey == 'materialDetail'" class="app-container">
|
|
|
+ <el-table v-loading="logisticsLoading" :data="logistics" style="width: 100%" size="mini">
|
|
|
+ <el-table-column prop="comName" label="物流公司" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="areaName" label="地区名称" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="time" label="物流时间" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="state" label="物流状态" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.state | EXPRESS_CURRENT_STATE_FILTER }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="logisticsVisible = false;data.removeTab()">关 闭</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 发货弹窗 -->
|
|
|
+ <div v-if="activeKey == 'deliverGoods' || activeKey == 'editExpressage'" class="app-container">
|
|
|
+ <el-form :model="logisticsForm" ref="logisticsForm" label-width="100px" label-position="left">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="快递单号" prop="logisticsNo" :rules="[{ required: true, message: '快递单号不能为空', trigger: 'blur' }]">
|
|
|
+ <el-input v-model="logisticsForm.logisticsNo" placeholder="请输入快递单号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="物流公司" prop="companyCode"
|
|
|
+ :rules="[{ required: true, message: '请选择物流公司', trigger: 'change' }]">
|
|
|
+ <el-select v-model="logisticsForm.companyCode" placeholder="请选择物流公司" style="width: 100%;">
|
|
|
+ <el-option :label="item.name" :value="item.code" v-for="(item, index) in companyList"
|
|
|
+ :key="index"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="仓储" prop="storageId" v-if="logisticsType === 'add'"
|
|
|
+ :rules="[{ required: true, message: '请选择仓储', trigger: 'change' }]">
|
|
|
+ <el-select v-model="logisticsForm.storageId" placeholder="请选择仓储" style="width: 100%;">
|
|
|
+ <el-option :label="item.storageName" :value="item.storageId" v-for="(item, index) in storageList"
|
|
|
+ :key="index"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="是否派单" prop="workOrder" v-if="logisticsType === 'add'">
|
|
|
+ <el-radio-group v-model="logisticsForm.workOrder">
|
|
|
+ <el-radio :label="true">是</el-radio>
|
|
|
+ <el-radio :label="false">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="是否退换单" prop="exchange" v-if="logisticsType === 'add'">
|
|
|
+ <el-radio-group v-model="logisticsForm.exchange">
|
|
|
+ <el-radio :label="true">是</el-radio>
|
|
|
+ <el-radio :label="false">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="saveLogistics(data.removeTab)">保 存</el-button>
|
|
|
+ <el-button @click="cancelLogistics;data.removeTab()">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 修改收货地址 -->
|
|
|
+ <div v-if="activeKey == 'editAddress'" class="app-container">
|
|
|
+ <el-form :model="addressForm" :rules="addressFormRules" ref="addressForm" label-width="80px" label-position="left">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="姓名" prop="name">
|
|
|
+ <el-input v-model="addressForm.name" placeholder="请输入姓名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="电话" prop="phone">
|
|
|
+ <el-input v-model="addressForm.phone" placeholder="请输入电话"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="省" prop="province">
|
|
|
+ <el-select v-model="addressForm.province" placeholder="请选择省" @change="changeProvince" style="width: 100%">
|
|
|
+ <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="市" prop="city">
|
|
|
+ <el-select v-model="addressForm.city" placeholder="请选择市" @change="changeCity" style="width: 100%">
|
|
|
+ <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="区" prop="area">
|
|
|
+ <el-select v-model="addressForm.area" placeholder="请选择区" @change="changeArea" style="width: 100%">
|
|
|
+ <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="街道" prop="street">
|
|
|
+ <el-select v-model="addressForm.street" placeholder="请选择街道" @change="changeStreet" style="width: 100%">
|
|
|
+ <el-option v-for="item in streetList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="详细地址" prop="address">
|
|
|
+ <el-input v-model="addressForm.address" placeholder="请输入详细地址"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="门牌号" prop="house">
|
|
|
+ <el-input v-model="addressForm.house" placeholder="请输入门牌号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitAddressForm(data.removeTab)">保 存</el-button>
|
|
|
+ <el-button @click="cancelAddressForm;data.removeTab()">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 批量发货 -->
|
|
|
+ <el-dialog title="批量发货" :visible.sync="batchShipmentVisible" :show-close="false" width="30%"
|
|
|
+ :close-on-click-modal="false">
|
|
|
+ <el-form ref="batchShipmentForm" label-position="top" label-width="120px" style="height: 194px;">
|
|
|
+ <el-form-item label="上传发货表格" prop="fileUrl">
|
|
|
+ <el-upload ref="upload" class="upload-demo" :action="baseURL + 'order/goods/batch/deliver'" :headers="myHeaders"
|
|
|
+ :on-remove="handleRemove" :on-change="handleChange" :before-upload="beforeUpload" :auto-upload="false"
|
|
|
+ :file-list="fileList">
|
|
|
+ <el-button size="small" type="primary">{{ fileList.length == 0 ? '点击上传' : '重新上传' }}</el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">只支持上传excel表格文件</div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="cancelBatchShipmentForm">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitBatchShipmentForm">发 货</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </zj-tab-page>
|
|
|
+
|
|
|
+ <print-preview ref="preView" @initPrint="handleInitPrint" @refreshList="handleRefreshList" />
|
|
|
+ </div>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
-import { cancelOrder, getList, goodsDeliver, saveRemark, batchShipment, batchRemark, getWebsiteList, editLogistics, getRegion, editAddress } from "@/api/order";
|
|
|
+import { cancelOrder, getList, goodsDeliver, saveRemark, getOrderDetail, batchRemark, getWebsiteList, editLogistics, getRegion, editAddress } from "@/api/order";
|
|
|
import { getExpress, getCompanyList } from "@/api/common";
|
|
|
import { downloadFiles, handleImport } from '@/utils/util'
|
|
|
+import printPreview from '../components/preview.vue'
|
|
|
+import { disAutoConnect, hiprint } from 'vue-plugin-hiprint'
|
|
|
import * as Storage from "@/api/storage";
|
|
|
import '@/styles/order-list.scss'
|
|
|
|
|
|
export default {
|
|
|
name: "order_list",
|
|
|
+
|
|
|
+ components: {
|
|
|
+ printPreview
|
|
|
+ },
|
|
|
+
|
|
|
+ filters: {
|
|
|
+ saleTypeFilter(val) {
|
|
|
+ const MAP = {
|
|
|
+ 1: '商城销售',
|
|
|
+ 2: '线下销售',
|
|
|
+ }
|
|
|
+ return MAP[val];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
data() {
|
|
|
return {
|
|
|
baseURL: process.env.VUE_APP_BASE_API,
|
|
@@ -468,7 +503,7 @@ export default {
|
|
|
{ label: '待发货', value: 'DFH' },
|
|
|
{ label: '已发货', value: 'YFH' },
|
|
|
{ label: '已完成', value: 'OVER' },
|
|
|
- { label: '已关闭', value: 'CLOSE' }
|
|
|
+ { label: '已退款', value: 'CLOSE' }
|
|
|
],
|
|
|
tabCurrent: 'ALL',
|
|
|
currentPage: 1, // 当前页码
|
|
@@ -536,7 +571,21 @@ export default {
|
|
|
},
|
|
|
isIndeterminate() {
|
|
|
return !this.dataList.every(item => item.selected !== true) && !this.dataList.every(item => item.selected !== false)
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
+ filterArr() {
|
|
|
+ return function (arr, size) {
|
|
|
+ //判断如果不是数组(就没有length),或者size没有传值,size小于1,就返回空数组
|
|
|
+ if (!arr.length || !size || size < 1) return []
|
|
|
+ let [start, end, result] = [null, null, []]
|
|
|
+ for (let i = 0; i < Math.ceil(arr.length / size); i++) {
|
|
|
+ start = i * size
|
|
|
+ end = start + size
|
|
|
+ result.push(arr.slice(start, end))
|
|
|
+ }
|
|
|
+ return result
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
created() {
|
|
|
this.getList();
|
|
@@ -1055,6 +1104,162 @@ export default {
|
|
|
|
|
|
},
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 点击打印
|
|
|
+ async toPrint(row) {
|
|
|
+ let pagingData = []
|
|
|
+ const { data } = await getOrderDetail({
|
|
|
+ orderId: row.orderId
|
|
|
+ })
|
|
|
+ pagingData = this.filterArr(data.orderDetails, 4)
|
|
|
+ // 初始化模板,否则生成的模板叠加
|
|
|
+ hiprint.init()
|
|
|
+ this.hiprintTemplate = new hiprint.PrintTemplate()
|
|
|
+ // 兼容批量打印
|
|
|
+ let len = pagingData.length
|
|
|
+ let loadingLen = len
|
|
|
+ // 使用 i-- 提升for效率
|
|
|
+ this.$startLoading()
|
|
|
+ for (let i = 0; i < len; i++) {
|
|
|
+ try {
|
|
|
+ let html = ''
|
|
|
+ let num = 0
|
|
|
+ let totalAmount = 0
|
|
|
+ pagingData[i].forEach(item => {
|
|
|
+ totalAmount = (Number(item.payAmount) * 100 + totalAmount * 100) / 100
|
|
|
+ num += Number(item.num)
|
|
|
+ html += `
|
|
|
+ <tr align="center">
|
|
|
+ <td>${item.goodsName}</td>
|
|
|
+ <td>${item.goodsSpecName}</td>
|
|
|
+ <td>${item.goodsMaterialUnit || ''}</td>
|
|
|
+ <td>${item.num}</td>
|
|
|
+ <td>${item.price}</td>
|
|
|
+ <td>${item.payAmount}</td>
|
|
|
+ <td></td>
|
|
|
+ <td></td>
|
|
|
+ </tr>
|
|
|
+ `
|
|
|
+ })
|
|
|
+ // 模板基础配置
|
|
|
+ this.panel = this.hiprintTemplate.addPrintPanel({
|
|
|
+ height: 140,
|
|
|
+ width: 241,
|
|
|
+ fontFamily: '黑体',
|
|
|
+ fontSize: 13,
|
|
|
+ paperFooter: 340,
|
|
|
+ paperHeader: 10,
|
|
|
+ paperNumberDisabled: true
|
|
|
+ })
|
|
|
+
|
|
|
+ // 获取收款单模板和基础配置
|
|
|
+ this.panel.addPrintHtml({
|
|
|
+ options: {
|
|
|
+ width: 633,
|
|
|
+ top: 30,
|
|
|
+ left: 20,
|
|
|
+ fontFamily: '黑体',
|
|
|
+ fontSize: 13,
|
|
|
+ content: this.setTableDom(data, html, totalAmount, num, len, i)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ loadingLen--
|
|
|
+ } catch (error) {
|
|
|
+ console.log(999, error)
|
|
|
+ this.$endLoading()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (loadingLen === 0) {
|
|
|
+ this.$endLoading()
|
|
|
+ }
|
|
|
+ console.log(333)
|
|
|
+ // 预览打印内容
|
|
|
+ this.$refs.preView.show(this.hiprintTemplate, this.panel)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 打印模板
|
|
|
+ setTableDom(data, html, totalAmount, num, length, page) {
|
|
|
+ return `
|
|
|
+ <div style="font-family:'黑体';font-size: 16px;">
|
|
|
+ <div style="display: flex;justify-content: center;align-items: center;position: relative;">
|
|
|
+ <h1 style="text-align:center;margin: 10px 0;">${data.companyWechatName}销售单</h1>
|
|
|
+ <div style="position: absolute;right:0;">共 ${length}页 第 ${page+1} 页</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;justify-content: space-between;">
|
|
|
+ <div style="width: 28%;"></div>
|
|
|
+ <div>单据日期: ${data.createTime}</div>
|
|
|
+ <div>单据编号: ${data.orderId}</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;justify-content: space-between;font-size: 16px;margin: 10px 0;">
|
|
|
+ <div>客户: ${data.receUserName}</div>
|
|
|
+ <div>摘要: ${data.payType}</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;font-size: 16px;margin-bottom: 10px;">
|
|
|
+ <div>联系电话: ${data.recePhone}</div>
|
|
|
+ <div style="margin-left: 50px;">收货地址: ${data.province}${data.city}${data.area}${data.street}${data.receAddress}</div>
|
|
|
+ </div>
|
|
|
+ <div >
|
|
|
+ <table border=".5" cellspacing="0" width="856"
|
|
|
+ style="border-color: rgb(0,0,0);
|
|
|
+ border-collapse: collapse;
|
|
|
+ border-style: none;
|
|
|
+ border: 1px solid rgb(0,0,0);
|
|
|
+ font-weight: normal;
|
|
|
+
|
|
|
+ text-decoration: none;
|
|
|
+ vertical-align: middle;
|
|
|
+ box-sizing: border-box;
|
|
|
+ word-wrap: break-word;
|
|
|
+ word-break: break-all;">
|
|
|
+ <tr align="center">
|
|
|
+ <td>商品名称</td>
|
|
|
+ <td>规格</td>
|
|
|
+ <td>单位</td>
|
|
|
+ <td>数量</td>
|
|
|
+ <td>单价</td>
|
|
|
+ <td>金额</td>
|
|
|
+ <td>仓库</td>
|
|
|
+ <td>备注</td>
|
|
|
+ </tr>
|
|
|
+ ${html}
|
|
|
+ <tr align="center" align="center">
|
|
|
+ <td>小计: </td>
|
|
|
+ <td colspan="2"></td>
|
|
|
+ <td>${num}</td>
|
|
|
+ <td></td>
|
|
|
+ <td>${totalAmount}</td>
|
|
|
+ <td colspan="2">金额总计: ${totalAmount}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;justify-content: space-between;font-size: 16px;margin: 10px 0;">
|
|
|
+ <div>制单人: ${data.createBy || ''}</div>
|
|
|
+ <div>审核人: ${data.companyWechatName || ''}</div>
|
|
|
+ <div>业务员: </div>
|
|
|
+ <div>签收人: </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin:100px 0 0 0">
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ },
|
|
|
+
|
|
|
+ handleRefreshList() {
|
|
|
+ this.recordSelected = []
|
|
|
+ this.$refs.pageRef.refreshList()
|
|
|
+ },
|
|
|
+
|
|
|
+ handleInitPrint() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initPrint()
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|