yshop2.1.4,订单新增批量打印，图片修改为批量上传等

src/components/material/index.vue

@@ -79,8 +79,9 @@
                     :on-progress="handleProgress"
                     :before-upload="beforeUpload"
                     :on-success="handleSuccess"
+                    multiple
                   >
-                    <el-button size="small" type="primary">点击上传</el-button>
+                    <el-button size="small" type="primary">批量上传</el-button>
                   </el-upload>
                 </el-col>
               </el-row>
@@ -103,7 +104,7 @@
                         :src="item.url"
                         fit="contain"
                         :preview-src-list="[item.url]"
-                        :z-index=999
+                        :z-index="999"
                       />
                       <div>
                         <el-checkbox class="material-name" :label="item.url">
@@ -144,12 +145,12 @@
 </template>
 
 <script>
-import { getPage as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup'
+  import { getPage as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup'
-import { getPage, addObj, delObj, putObj } from '@/api/tools/material'
+  import { getPage, addObj, delObj, putObj } from '@/api/tools/material'
-import { getToken } from '@/utils/auth'
+  import { getToken } from '@/utils/auth'
-import { mapGetters } from 'vuex'
+  import { mapGetters } from 'vuex'
 
-export default {
+  export default {
     name: 'MaterialList',
     props: {
       // 素材数据
@@ -456,7 +457,7 @@ export default {
         this.listDialogVisible = false
       }
     }
-}
+  }
 </script>
 
 <style lang="scss" scoped>

src/views/shop/order/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="app-container">
+  <div class="app-container" style="position: relative; height: calc(100vh - 117px);">
+    <div class="container">
 
       <el-tabs v-model="status" type="card" @tab-click="handleOrder">
         <el-tab-pane name="-9">
@@ -46,6 +47,17 @@
             :value="item.value"
           />
         </el-select>
+        <el-date-picker
+          v-model="createTime"
+          :default-time="['00:00:00','23:59:59']"
+          type="daterange"
+          range-separator=":"
+          size="small"
+          class="date-item"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
         <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
         <!-- 新增 -->
         <el-button
@@ -62,9 +74,19 @@
       <eRefund ref="form2" :is-add="isAdd" />
       <editOrder ref="form3" :is-add="isAdd" />
       <eRemark ref="form4" :is-add="isAdd" />
+      <ePrint ref="form5" :is-add="isAdd" :print-list="checkList" :to-query="toQuery"/>
+
+      <!--订单数据统计-->
+      <div class="order-caculate">
+        <a class="caculate-title">订单数 : <span class="caculate-num">{{caculateInfo.orderNum}}</span></a>
+        <a class="caculate-title">商品数 : <span class="caculate-num">{{caculateInfo.storeNum}}</span></a>
+        <a class="caculate-title">订单金额 : <span class="caculate-num">{{caculateInfo.orderPrice}}</span></a>
+        <a class="caculate-title">客户数 : <span class="caculate-num">{{caculateInfo.userNum}}</span></a>
+      </div>
 
       <!--表格渲染-->
-    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
+      <el-table ref="multipleTable" v-loading="loading" :data="data" size="small" style="width: 100%;" @selection-change="handleSelectionChange">
+        <el-table-column :selectable="checkboxT" type="selection" width="50" />
         <el-table-column prop="orderId" width="140" label="订单号">
           <template slot-scope="scope">
             <span>{{ scope.row.orderId }}</span>
@@ -181,6 +203,28 @@
           </template>
         </el-table-column>
       </el-table>
+    </div>
+    <!--添加订单打印及订单导出功能 2020.04.13 changxh-->
+    <el-footer class="footer-contains">
+      <div class="footer-search">
+        <el-checkbox v-model="printChecked" @change="batchSelection" style="margin-right: 20px;"></el-checkbox>
+        <el-select v-model="batchHandle" @change="handlePrintOption" clearable placeholder="批量操作" class="filter-item" style="width: 130px; margin-right: 8px;">
+          <el-option
+            v-for="item in handleOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select v-model="batchExport" @change="handleExportOption" clearable placeholder="批量导出" class="filter-item" style="width: 130px">
+          <el-option
+            v-for="item in exportOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
       <!--分页组件-->
       <el-pagination
         :total="total"
@@ -190,25 +234,29 @@
         @size-change="sizeChange"
         @current-change="pageChange"
       />
+    </el-footer>
   </div>
 </template>
 
 <script>
-import checkPermission from '@/utils/permission'
+  import checkPermission from '@/utils/permission'
-import initData from '@/mixins/crud'
+  import initData from '@/mixins/crud'
-import { del } from '@/api/yxStoreOrder'
+  import { del } from '@/api/yxStoreOrder'
-import eForm from './form'
+  import eForm from './form'
-import eDetail from './detail'
+  import eDetail from './detail'
-import eRefund from './refund'
+  import eRefund from './refund'
-import editOrder from './edit'
+  import editOrder from './edit'
-import eRemark from './remark'
+  import eRemark from './remark'
-import { formatTime } from '@/utils/index'
+  import ePrint from './print'
-export default {
+  import { formatTime } from '@/utils/index'
-  components: { eForm, eDetail, eRefund, editOrder, eRemark },
+  import { gett } from '@/api/visits'
+
+  export default {
+    components: { eForm, eDetail, eRefund, editOrder, eRemark, ePrint },
     mixins: [initData],
     data() {
       return {
-      delLoading: false, status: '-9', orderType: '0',
+        delLoading: false, status: '-9', orderType: '0',createTime: '', checkList: [], printChecked: false, batchHandle: '', batchExport: '', listContent: [],
         queryTypeOptions: [
           { key: 'orderId', display_name: '订单号' },
           { key: 'realName', display_name: '用户姓名' },
@@ -231,7 +279,22 @@ export default {
           { value: '2', label: '拼团订单' },
           { value: '3', label: '秒杀订单' },
           { value: '4', label: '砍价订单' }
-      ]
+        ],
+        handleOptions: [
+          {value: '', label: '批量操作'},
+          {value: '0', label: '批量打印'},
+        ],
+        exportOptions: [
+          {value: '', label: '批量导出'},
+          {value: '0', label: '导出全部'},
+          {value: '1', label: '导出选中'},
+        ],
+        caculateInfo: {
+          orderNum : 0,
+          storeNum : 0,
+          orderPrice : 0,
+          userNum : 0,
+        },
       }
     },
     created() {
@@ -249,7 +312,7 @@ export default {
       beforeInit() {
         this.url = 'api/yxStoreOrder'
         const sort = 'id,desc'
-      this.params = { page: this.page, size: this.size, sort: sort, orderStatus: this.status, orderType: this.orderType }
+        this.params = { page: this.page, size: this.size, sort: sort, orderStatus: this.status, orderType: this.orderType, addTime: this.createTime, listContent: this.listContent  }
         const query = this.query
         const type = query.type
         const value = query.value
@@ -572,11 +635,186 @@ export default {
           nickname: data.userDTO.nickname
         }
         _this.dialog = true
+      },
+      getCaculateInfo(){
+        gett().then(res => {
+          this.caculateInfo = {
+            orderPrice : res.priceCount,
+            orderNum : res.orderCount,
+            storeNum : res.goodsCount,
+            userNum : res.userCount,
+          };
+        })
+      },
+      clearCaculateInfo(){
+        this.caculateInfo = {
+          orderPrice : 0,
+          storeNum : 0,
+          orderNum : 0,
+          userNum : 0,
+        };
+      },
+      handleSelectionChange(val) {
+        this.checkList = val;
+        let orderPrice = 0, storeNum = 0, orderNum = 0, userNum = 0;
+        if(val.length !=0 ){
+          this.printChecked = true;
+          let user = [];
+          val.forEach((item,index)=>{
+            orderNum += 1;
+            orderPrice += item.totalPrice;
+            storeNum += item.totalNum;
+            user.push(item.userDTO.account);
+          })
+          user = Array.from(new Set(user));
+          this.caculateInfo = {
+            orderPrice : orderPrice.toFixed(2),
+            storeNum : storeNum,
+            orderNum : orderNum,
+            userNum : user.length,
+          };
+        }else {
+          this.printChecked = false;
+          this.clearCaculateInfo();
+          // this.getCaculateInfo();
+        }
+      },
+      batchSelection(val){
+        let rows = this.data;
+        if (val) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row);
+          });
+        } else {
+          this.$refs.multipleTable.clearSelection();
+        }
+      },
+      handlePrintOption(val){
+        switch (val) {
+          case '0':
+            this.getPrintList();
+            this.batchHandle = '';
+            break;
+          default:
+            break;
+        }
+      },
+      handleExportOption(val){
+        let list = this.checkList;
+        this.page = 0;
+        this.size = 10000;
+        switch (val) {
+          case "0":
+            this.listContent = "";
+            this.beforeInit();
+            this.downloadMethod();
+            break;
+          case "1":
+            if(list.length == 0){
+              this.$message({
+                message: '请选择订单',
+                type: 'warning'
+              });
+            }else {
+              this.listContent = [];
+              list.forEach((item) => {
+                this.listContent.push(item.orderId);
+              })
+              this.listContent = JSON.stringify(this.listContent);
+              this.beforeInit();
+              this.downloadMethod();
+            }
+            break;
+          default:
+            break;
+        }
+        this.batchExport = "";
+      },
+      getPrintList(){
+        let list = this.checkList;
+        if(list.length == 0){
+          this.$message({
+            message: '请选择订单',
+            type: 'warning'
+          });
+        }else {
+          const _this = this.$refs.form5;
+          _this.dialog = true
+        }
+      },
+      checkboxT(row, rowIndex) {
+        return row.id !== 1
+      },
     }
   }
-}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  .container {
+    height: calc(100% - 80px);
+    position: absolute;
+    overflow: auto;
+    width: calc(100% - 20px);
 
+    .order-caculate {
+      font-size: 14px;
+      color: #909399;
+      border-top: 1px solid #f0f0f0;
+      padding: 20px 10px;
+      .caculate-title {
+        display: inline-block;
+        margin-right: 50px;
+      }
+      .caculate-num {
+        font-size: 20px;
+        color: #ff4949;
+      }
+    }
+
+    .el-table th {
+      background-color: #fafafa;
+    }
+  }
+
+  .footer-contains {
+    position: absolute;
+    display: -ms-flexbox;
+    display: flex;
+    background-color: #f6f6f6;
+    bottom: 0;
+    flex-align: center;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    z-index: 999;
+    padding: 0 20px 0 13px;
+  }
+
+  /*打印单样式编辑*/
+  .order-list {
+    /*  height: 297mm;*/
+    margin: 0 auto;
+    width: 210mm;
+
+    .order-title {
+      height: 16mm;
+      line-height: 16mm;
+      font-size: 8mm;
+      font-weight: bolder;
+      text-align: center;
+    }
+    .order-info {
+      span {
+        display: inline-block;
+        padding: 0 0 10px 0;
+        font-size: 3mm;
+      }
+      span.info {
+        width: 60mm;
+      }
+    }
+    .el-table--small th, .el-table--small td {
+      padding: 4px 0;
+    }
+  }
 </style>

src/views/shop/order/print.vue

@@ -0,0 +1,189 @@
+<template>
+  <el-dialog id="printDialog" :append-to-body="false" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" title="订单打印" width="220mm">
+
+    <el-button
+      type="warning"
+      class="filter-item"
+      size="mini"
+      icon="el-icon-printer"
+      onclick="doPrint()"
+    >打印</el-button>
+
+    <div id="printList">
+      <div class="order-list" v-for="(list, index) in printList">
+      <el-header class="order-title">订货单</el-header>
+
+      <div class="order-info">
+        <span class="info">{{list.orderId}}</span>
+        <span class="info">下单日期 : {{formatTimeTwo(list.addTime)}}</span>
+        <span>客户名称 : {{list.realName}}</span>
+      </div>
+      <div class="order-info">
+        <span class="info">联系人 : {{list.userDTO.account}}</span>
+        <span class="info">联系电话 : {{list.userPhone}}</span>
+        <span>收货地址 : {{list.userAddress}}</span>
+      </div>
+
+      <el-table border show-summary :data="list.cartInfoList"  :summary-method="getSummaries" size="small" style="width: 100%;">
+        <el-table-column type="index" label="行号" :index="indexMethod" width="60mm"/>
+
+        <el-table-column prop="cartInfoMap.productInfo.productId" width="80mm" label="商品编号" />
+
+        <el-table-column prop="cartInfoMap.productInfo.storeName" width="172mm" label="商品名称" />
+
+        <el-table-column prop="cartInfoMap.productInfo.unitName" width="80mm" label="商品规格" />
+
+        <el-table-column prop="cartInfoMap.productInfo.unitName" width="80mm" label="单位" />
+
+        <el-table-column prop="cartInfoMap.productInfo.price" width="80mm" label="单价" />
+
+        <el-table-column prop="cartInfoMap.cartNum" width="80mm" label="数量" />
+
+        <el-table-column prop="cartInfoMap" width="80mm" label="小计(元)" >
+          <template slot-scope="scope">
+            <span>{{ scope.row.cartInfoMap.productInfo.price*scope.row.cartInfoMap.cartNum }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="cartInfoMap.mark" width="80mm" label="备注" />
+
+      </el-table>
+    </div>
+    </div>
+
+  </el-dialog>
+</template>
+
+<script>
+import { formatTime, parseTime, formatTimeTwo } from '@/utils/index'
+export default {
+ props: {
+    printList: {
+      type: Array,
+      required: true
+    },
+    toQuery: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false, dialog: false
+    }
+  },
+  mounted() {
+    window.doPrint = this.doPrint;
+  },
+  methods: {
+    formatTime,
+    parseTime,
+    formatTimeTwo,
+    cancel() {
+      this.dialog = false
+    },
+    indexMethod(index){
+      return index+1;
+    },
+    doPrint(){
+      let printbox = document.querySelector("#printList").innerHTML;
+      document.querySelector("body").innerHTML = printbox;
+      window.print();
+      this.cancel();
+      // this.toQuery();
+      window.location.reload();
+    },
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }else if(index === 7){
+          const values = data.map(item => Number(item.cartInfoMap.productInfo.price*item.cartInfoMap.cartNum));
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return prev + curr;
+            } else {
+              return prev;
+            }
+          }, 0);
+          sums[index] += ' 元';
+        }
+      });
+      return sums;
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+  .container {
+    height: calc(100% - 80px);
+    position: absolute;
+    overflow: auto;
+    width: calc(100% - 20px);
+
+    .order-caculate {
+      font-size: 14px;
+      color: #909399;
+      border-top: 1px solid #f0f0f0;
+      padding: 20px 10px;
+      .caculate-title {
+        display: inline-block;
+        margin-right: 50px;
+      }
+      .caculate-num {
+        font-size: 20px;
+        color: #ff4949;
+      }
+    }
+
+    .el-table th {
+      background-color: #fafafa;
+    }
+  }
+
+  .footer-contains {
+    position: absolute;
+    display: -ms-flexbox;
+    display: flex;
+    background-color: #f6f6f6;
+    bottom: 0;
+    flex-align: center;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    z-index: 999;
+    padding: 0 20px 0 13px;
+  }
+
+  /*打印单样式编辑*/
+  .order-list {
+    /*  height: 297mm;*/
+    margin: 0 auto;
+    width: 210mm;
+
+    .order-title {
+      height: 16mm;
+      line-height: 16mm;
+      font-size: 8mm;
+      font-weight: bolder;
+      text-align: center;
+    }
+    .order-info {
+      span {
+        display: inline-block;
+        padding: 0 0 10px 0;
+        font-size: 3mm;
+      }
+      span.info {
+        width: 60mm;
+      }
+    }
+    .el-table--small th, .el-table--small td {
+      padding: 4px 0;
+    }
+  }
+</style>