feat：商城订单-订单列表增加进销存相关字段

src/views/mallManagement/order/components/preview.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :show-close="false"
+    :maskClosable="false"
+    :close-on-click-modal="false"
+    @cancel="hideModal"
+    :width="350 + 'mm'"
+  >
+    <div v-loading="spinning" style="min-height: 100px">
+      <div id="preview_content" ref="printDom"></div>
+    </div>
+    <template slot="title">
+      <div>
+        <el-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</el-button>
+      </div>
+    </template>
+    <template slot="footer">
+      <el-button key="close" type="info" @click="hideModal"> 关闭 </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+    name: 'PrintPreview',
+  props: {
+    addPrint: {
+      type: Function,
+      default: null
+    },
+  },
+ 
+  data() {
+    return {
+      visible: false,
+      spinning: true,
+      waitShowPrinter: false,
+      // 纸张宽 mm
+      width: 0,
+      // 模板
+      hiprintTemplate: {},
+      // 数据
+      printData: {}
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    hideModal() {
+      this.visible = false
+      this.waitShowPrinter = false
+      // console.log(this.$parent);
+    },
+    show(hiprintTemplate, printData, width = '210') {
+      this.visible = true
+      this.width = width
+      this.hiprintTemplate = hiprintTemplate
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        $('#preview_content').html(hiprintTemplate.getHtml(printData))
+        this.spinning = false
+      }, 500)
+    },
+    print() {
+      this.hiprintTemplate.print()
+      setTimeout(() => {
+        this.hideModal()
+        this.$emit('refreshList')
+      }, 2000)
+
+    }
+    // toPdf() {
+    //   downloadPDF(this.$refs.printDom);
+    //   this.hiprintTemplate.toPdf({}, '打印预览');
+    // },
+  }
+}
+</script>
+
+<style scoped>
+::v-deep .el-dialog__body {
+  padding: 0;
+}
+
+::v-deep tr {
+  height: 40px !important;
+}
+
+::v-deep .hiprint-printPaper {
+  margin: 0 auto;
+}
+
+/* ::v-deep tr td {
+  border: 0 !important;
+
+} */
+
+::v-deep .hiprint-paperNumber {
+  display: none;
+}
+
+.ant-modal-body {
+  padding: 0px;
+}
+
+.ant-modal-content {
+  margin-bottom: 24px;
+}
+</style>

src/views/mallManagement/order/order_list/index.vue

@@ -1,450 +1,496 @@
 <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="1" style="text-align: center"><span class="item">业务员</span></el-col>
+                <el-col :span="1" 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>
+                <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.saleType | saleTypeFilter}}</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="1" style="height: 100%;">
+                    <div class="col-item">
+                      <div>{{order.saleName}}</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="1" 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 +514,7 @@ export default {
         { label: '待发货', value: 'DFH' },
         { label: '已发货', value: 'YFH' },
         { label: '已完成', value: 'OVER' },
-        { label: '已关闭', value: 'CLOSE' }
+        { label: '已退款', value: 'CLOSE' }
       ],
       tabCurrent: 'ALL',
       currentPage: 1, // 当前页码
@@ -536,7 +582,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 +1115,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()
+			})
+		},
+
   }
 }