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,319 +145,319 @@
 </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',
+    name: 'MaterialList',
-  props: {
+    props: {
-    // 素材数据
+      // 素材数据
-    value: {
+      value: {
-      type: Array,
+        type: Array,
-      default() {
+        default() {
-        return []
+          return []
-      }
+        }
-    },
-    // 素材类型
-    type: {
-      type: String
-    },
-    // 素材限制数量，默认5个
-    num: {
-      type: Number,
-      default() {
-        return 5
-      }
-    },
-    // 宽度
-    width: {
-      type: Number,
-      default() {
-        return 150
-      }
-    },
-    // 宽度
-    height: {
-      type: Number,
-      default() {
-        return 150
-      }
-    }
-  },
-  data() {
-    return {
-      headers: {
-        Authorization: getToken()
       },
-      dialogVisible: false,
+      // 素材类型
-      url: '',
+      type: {
-      listDialogVisible: false,
+        type: String
-      materialgroupList: [],
-      materialgroupObjId: '',
-      materialgroupObj: {},
-      materialgroupLoading: false,
-      tableData: [],
-      page: {
-        total: 0, // 总页数
-        currentPage: 1, // 当前页数
-        pageSize: 12, // 每页显示多少条
-        ascs: [], // 升序字段
-        descs: 'create_time'// 降序字段
       },
-      tableLoading: false,
+      // 素材限制数量，默认5个
-      groupId: null,
+      num: {
-      urls: []
+        type: Number,
-    }
+        default() {
-  },
+          return 5
-  computed: {
+        }
-    ...mapGetters([
+      },
-      'uploadApi'
+      // 宽度
-    ])
+      width: {
-  },
+        type: Number,
-  methods: {
+        default() {
-    moveMaterial(index, type) {
+          return 150
-      if (type == 'up') {
+        }
-        const tempOption = this.value[index - 1]
+      },
-        this.$set(this.value, index - 1, this.value[index])
+      // 宽度
-        this.$set(this.value, index, tempOption)
+      height: {
-      }
+        type: Number,
-      if (type == 'down') {
+        default() {
-        const tempOption = this.value[index + 1]
+          return 150
-        this.$set(this.value, index + 1, this.value[index])
+        }
-        this.$set(this.value, index, tempOption)
       }
     },
-    zoomMaterial(index) {
+    data() {
-      this.dialogVisible = true
+      return {
-      this.url = this.value[index]
+        headers: {
-    },
+          Authorization: getToken()
-    deleteMaterial(index) {
+        },
-      const that = this
+        dialogVisible: false,
-      this.$confirm('是否确认删除？', '提示', {
+        url: '',
-        confirmButtonText: '确定',
+        listDialogVisible: false,
-        cancelButtonText: '取消',
+        materialgroupList: [],
-        type: 'warning'
+        materialgroupObjId: '',
-      }).then(function() {
+        materialgroupObj: {},
-        that.value.splice(index, 1)
+        materialgroupLoading: false,
-        that.urls = []
+        tableData: [],
-      })
+        page: {
-    },
+          total: 0, // 总页数
-    toSeleteMaterial() {
+          currentPage: 1, // 当前页数
-      this.listDialogVisible = true
+          pageSize: 12, // 每页显示多少条
-      if (this.tableData.length <= 0) {
+          ascs: [], // 升序字段
-        this.materialgroupPage()
+          descs: 'create_time'// 降序字段
+        },
+        tableLoading: false,
+        groupId: null,
+        urls: []
       }
     },
-    materialgroupPage() {
+    computed: {
-      this.materialgroupLoading = true
+      ...mapGetters([
-      materialgroupPage({
+        'uploadApi'
-        total: 0, // 总页数
+      ])
-        currentPage: 1, // 当前页数
+    },
-        pageSize: 100, // 每页显示多少条
+    methods: {
-        ascs: [], // 升序字段
+      moveMaterial(index, type) {
-        descs: 'create_time'// 降序字段
+        if (type == 'up') {
-      }).then(response => {
+          const tempOption = this.value[index - 1]
-        this.materialgroupLoading = false
+          this.$set(this.value, index - 1, this.value[index])
-        const materialgroupList = response.content
+          this.$set(this.value, index, tempOption)
-        materialgroupList.unshift({
+        }
-          id: '-1',
+        if (type == 'down') {
-          name: '全部分组'
+          const tempOption = this.value[index + 1]
+          this.$set(this.value, index + 1, this.value[index])
+          this.$set(this.value, index, tempOption)
+        }
+      },
+      zoomMaterial(index) {
+        this.dialogVisible = true
+        this.url = this.value[index]
+      },
+      deleteMaterial(index) {
+        const that = this
+        this.$confirm('是否确认删除？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(function() {
+          that.value.splice(index, 1)
+          that.urls = []
         })
-        this.materialgroupList = materialgroupList
+      },
-        this.tabClick({
+      toSeleteMaterial() {
-          index: 0
+        this.listDialogVisible = true
-        })
+        if (this.tableData.length <= 0) {
-      })
+          this.materialgroupPage()
-    },
+        }
-    materialgroupDelete(materialgroupObj) {
+      },
-      const that = this
+      materialgroupPage() {
-      this.$confirm('是否确认删除该分组？', '提示', {
+        this.materialgroupLoading = true
-        confirmButtonText: '确定',
+        materialgroupPage({
-        cancelButtonText: '取消',
+          total: 0, // 总页数
-        type: 'warning'
+          currentPage: 1, // 当前页数
-      }).then(function() {
+          pageSize: 100, // 每页显示多少条
-        materialgroupDel(materialgroupObj.id)
+          ascs: [], // 升序字段
-          .then(function() {
+          descs: 'create_time'// 降序字段
-            that.$delete(that.materialgroupList, materialgroupObj.index)
+        }).then(response => {
+          this.materialgroupLoading = false
+          const materialgroupList = response.content
+          materialgroupList.unshift({
+            id: '-1',
+            name: '全部分组'
+          })
+          this.materialgroupList = materialgroupList
+          this.tabClick({
+            index: 0
           })
-      })
-    },
-    materialgroupEdit(materialgroupObj) {
-      const that = this
-      this.$prompt('请输入分组名', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        inputValue: materialgroupObj.name
-      }).then(({ value }) => {
-        materialgroupEdit({
-          id: materialgroupObj.id,
-          name: value
-        }).then(function() {
-          materialgroupObj.name = value
-          that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj)
         })
-      }).catch(() => {
+      },
-
+      materialgroupDelete(materialgroupObj) {
-      })
+        const that = this
-    },
+        this.$confirm('是否确认删除该分组？', '提示', {
-    materialgroupAdd() {
+          confirmButtonText: '确定',
-      const that = this
+          cancelButtonText: '取消',
-      this.$prompt('请输入分组名', '提示', {
+          type: 'warning'
-        confirmButtonText: '确定',
-        cancelButtonText: '取消'
-      }).then(({ value }) => {
-        materialgroupAdd({
-          name: value
         }).then(function() {
-          that.materialgroupPage()
+          materialgroupDel(materialgroupObj.id)
+            .then(function() {
+              that.$delete(that.materialgroupList, materialgroupObj.index)
+            })
         })
-      }).catch(() => {
+      },
+      materialgroupEdit(materialgroupObj) {
+        const that = this
+        this.$prompt('请输入分组名', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          inputValue: materialgroupObj.name
+        }).then(({ value }) => {
+          materialgroupEdit({
+            id: materialgroupObj.id,
+            name: value
+          }).then(function() {
+            materialgroupObj.name = value
+            that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj)
+          })
+        }).catch(() => {
 
-      })
+        })
-    },
+      },
-    tabClick(tab, event) {
+      materialgroupAdd() {
-      this.urls = []
+        const that = this
-      const index = Number(tab.index)
+        this.$prompt('请输入分组名', '提示', {
-      const materialgroupObj = this.materialgroupList[index]
+          confirmButtonText: '确定',
-      materialgroupObj.index = index
+          cancelButtonText: '取消'
-      this.materialgroupObj = materialgroupObj
+        }).then(({ value }) => {
-      this.materialgroupObjId = materialgroupObj.id
+          materialgroupAdd({
-      this.page.currentPage = 1
+            name: value
-      this.page.total = 0
+          }).then(function() {
-      if (materialgroupObj.id != '-1') {
+            that.materialgroupPage()
-        this.groupId = materialgroupObj.id
+          })
-      } else {
+        }).catch(() => {
-        this.groupId = null
+
-      }
+        })
-      this.getPage(this.page)
+      },
-    },
+      tabClick(tab, event) {
-    getPage(page, params) {
+        this.urls = []
-      this.tableLoading = true
+        const index = Number(tab.index)
-      getPage(Object.assign({
+        const materialgroupObj = this.materialgroupList[index]
-        page: page.currentPage - 1,
+        materialgroupObj.index = index
-        size: page.pageSize,
+        this.materialgroupObj = materialgroupObj
-        descs: this.page.descs,
+        this.materialgroupObjId = materialgroupObj.id
-        ascs: this.page.ascs,
+        this.page.currentPage = 1
-        sort: 'createTime,desc'
+        this.page.total = 0
-      }, {
+        if (materialgroupObj.id != '-1') {
-        groupId: this.groupId
+          this.groupId = materialgroupObj.id
-      })).then(response => {
+        } else {
-        const tableData = response.content
+          this.groupId = null
-        this.page.total = response.totalElements
+        }
-        this.page.currentPage = page.currentPage
+        this.getPage(this.page)
-        this.page.pageSize = page.pageSize
+      },
-        this.tableData = tableData
+      getPage(page, params) {
-        this.tableLoading = false
+        this.tableLoading = true
-      }).catch(() => {
+        getPage(Object.assign({
-        this.tableLoading = false
+          page: page.currentPage - 1,
-      })
+          size: page.pageSize,
-    },
+          descs: this.page.descs,
-    sizeChange(val) {
+          ascs: this.page.ascs,
-      console.log(val)
+          sort: 'createTime,desc'
-      this.page.currentPage = 1
+        }, {
-      this.page.pageSize = val
+          groupId: this.groupId
-      this.getPage(this.page)
+        })).then(response => {
-    },
+          const tableData = response.content
-    pageChange(val) {
+          this.page.total = response.totalElements
-      console.log(val)
+          this.page.currentPage = page.currentPage
-      this.page.currentPage = val
+          this.page.pageSize = page.pageSize
-      // this.page.pageSize = val
+          this.tableData = tableData
-      this.getPage(this.page)
+          this.tableLoading = false
-    },
+        }).catch(() => {
-    materialRename(item) {
+          this.tableLoading = false
-      const that = this
+        })
-      this.$prompt('请输入素材名', '提示', {
+      },
-        confirmButtonText: '确定',
+      sizeChange(val) {
-        cancelButtonText: '取消',
+        console.log(val)
-        inputValue: item.name
+        this.page.currentPage = 1
-      }).then(({ value }) => {
+        this.page.pageSize = val
+        this.getPage(this.page)
+      },
+      pageChange(val) {
+        console.log(val)
+        this.page.currentPage = val
+        // this.page.pageSize = val
+        this.getPage(this.page)
+      },
+      materialRename(item) {
+        const that = this
+        this.$prompt('请输入素材名', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          inputValue: item.name
+        }).then(({ value }) => {
+          putObj({
+            id: item.id,
+            name: value
+          }).then(function() {
+            that.getPage(that.page)
+          })
+        }).catch(() => {
+
+        })
+      },
+      materialUrl(item) {
+        const that = this
+        this.$prompt('素材链接', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          inputValue: item.url
+        }).then(({ value }) => {
+
+        }).catch(() => {
+
+        })
+      },
+      materialDel(item) {
+        const that = this
+        this.$confirm('是否确认删除该素材？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(function() {
+          delObj(item.id)
+            .then(function() {
+              that.getPage(that.page)
+            })
+        })
+      },
+      handleCommand(command) {
+        const that = this
+        const s = command.split('-')
         putObj({
-          id: item.id,
+          id: s[0],
-          name: value
+          groupId: s[1]
         }).then(function() {
           that.getPage(that.page)
         })
-      }).catch(() => {
+      },
-
+      handleProgress(event, file, fileList) {
-      })
+        // let uploadProgress = file.percentage.toFixed(0)
-    },
+        // this.uploadProgress = uploadProgress
-    materialUrl(item) {
+      },
-      const that = this
+      handleSuccess(response, file, fileList) {
-      this.$prompt('素材链接', '提示', {
+        const that = this
-        confirmButtonText: '确定',
+        this.uploadProgress = 0
-        cancelButtonText: '取消',
+        addObj({
-        inputValue: item.url
+          type: '1',
-      }).then(({ value }) => {
+          groupId: this.groupId != '-1' ? this.groupId : null,
-
+          name: file.name,
-      }).catch(() => {
+          url: response.link
-
+        }).then(function() {
-      })
+          that.getPage(that.page)
-    },
+        })
-    materialDel(item) {
+      },
-      const that = this
+      beforeUpload(file) {
-      this.$confirm('是否确认删除该素材？', '提示', {
+        const isPic =
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function() {
-        delObj(item.id)
-          .then(function() {
-            that.getPage(that.page)
-          })
-      })
-    },
-    handleCommand(command) {
-      const that = this
-      const s = command.split('-')
-      putObj({
-        id: s[0],
-        groupId: s[1]
-      }).then(function() {
-        that.getPage(that.page)
-      })
-    },
-    handleProgress(event, file, fileList) {
-      // let uploadProgress = file.percentage.toFixed(0)
-      // this.uploadProgress = uploadProgress
-    },
-    handleSuccess(response, file, fileList) {
-      const that = this
-      this.uploadProgress = 0
-      addObj({
-        type: '1',
-        groupId: this.groupId != '-1' ? this.groupId : null,
-        name: file.name,
-        url: response.link
-      }).then(function() {
-        that.getPage(that.page)
-      })
-    },
-    beforeUpload(file) {
-      const isPic =
           file.type === 'image/jpeg' ||
           file.type === 'image/png' ||
           file.type === 'image/gif' ||
           file.type === 'image/jpg'
-      const isLt2M = file.size / 1024 / 1024 < 2
+        const isLt2M = file.size / 1024 / 1024 < 2
-      if (!isPic) {
+        if (!isPic) {
-        this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
+          this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
-        return false
+          return false
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!')
+        }
+        return isPic && isLt2M
+      },
+      sureUrls() {
+        this.urls.forEach(item => {
+          this.$set(this.value, this.value.length, item)
+        })
+        this.listDialogVisible = false
       }
-      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
-      }
-      return isPic && isLt2M
-    },
-    sureUrls() {
-      this.urls.forEach(item => {
-        this.$set(this.value, this.value.length, item)
-      })
-      this.listDialogVisible = false
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>

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>