Browse Source

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

master
hupeng 5 years ago
parent
commit
9021519fe3
  1. 579
      src/components/material/index.vue
  2. 1338
      src/views/shop/order/index.vue
  3. 189
      src/views/shop/order/print.vue

579
src/components/material/index.vue

@ -79,8 +79,9 @@
:on-progress="handleProgress" :on-progress="handleProgress"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:on-success="handleSuccess" :on-success="handleSuccess"
multiple
> >
<el-button size="small" type="primary">点击上传</el-button> <el-button size="small" type="primary">批量上传</el-button>
</el-upload> </el-upload>
</el-col> </el-col>
</el-row> </el-row>
@ -103,7 +104,7 @@
:src="item.url" :src="item.url"
fit="contain" fit="contain"
:preview-src-list="[item.url]" :preview-src-list="[item.url]"
:z-index=999 :z-index="999"
/> />
<div> <div>
<el-checkbox class="material-name" :label="item.url"> <el-checkbox class="material-name" :label="item.url">
@ -144,319 +145,319 @@
</template> </template>
<script> <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() {
type: { return {
type: String headers: {
}, Authorization: getToken()
// 5 },
num: { dialogVisible: false,
type: Number, url: '',
default() { listDialogVisible: false,
return 5 materialgroupList: [],
materialgroupObjId: '',
materialgroupObj: {},
materialgroupLoading: false,
tableData: [],
page: {
total: 0, //
currentPage: 1, //
pageSize: 12, //
ascs: [], //
descs: 'create_time'//
},
tableLoading: false,
groupId: null,
urls: []
} }
}, },
// computed: {
width: { ...mapGetters([
type: Number, 'uploadApi'
default() { ])
return 150
}
}, },
// methods: {
height: { moveMaterial(index, type) {
type: Number, if (type == 'up') {
default() { const tempOption = this.value[index - 1]
return 150 this.$set(this.value, index - 1, this.value[index])
} this.$set(this.value, index, tempOption)
} }
}, if (type == 'down') {
data() { const tempOption = this.value[index + 1]
return { this.$set(this.value, index + 1, this.value[index])
headers: { this.$set(this.value, index, tempOption)
Authorization: getToken() }
}, },
dialogVisible: false, zoomMaterial(index) {
url: '', this.dialogVisible = true
listDialogVisible: false, this.url = this.value[index]
materialgroupList: [],
materialgroupObjId: '',
materialgroupObj: {},
materialgroupLoading: false,
tableData: [],
page: {
total: 0, //
currentPage: 1, //
pageSize: 12, //
ascs: [], //
descs: 'create_time'//
}, },
tableLoading: false, deleteMaterial(index) {
groupId: null, const that = this
urls: [] this.$confirm('是否确认删除?', '提示', {
} confirmButtonText: '确定',
}, cancelButtonText: '取消',
computed: { type: 'warning'
...mapGetters([ }).then(function() {
'uploadApi' that.value.splice(index, 1)
]) that.urls = []
},
methods: {
moveMaterial(index, type) {
if (type == 'up') {
const tempOption = this.value[index - 1]
this.$set(this.value, index - 1, this.value[index])
this.$set(this.value, index, tempOption)
}
if (type == 'down') {
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 = []
})
},
toSeleteMaterial() {
this.listDialogVisible = true
if (this.tableData.length <= 0) {
this.materialgroupPage()
}
},
materialgroupPage() {
this.materialgroupLoading = true
materialgroupPage({
total: 0, //
currentPage: 1, //
pageSize: 100, //
ascs: [], //
descs: 'create_time'//
}).then(response => {
this.materialgroupLoading = false
const materialgroupList = response.content
materialgroupList.unshift({
id: '-1',
name: '全部分组'
})
this.materialgroupList = materialgroupList
this.tabClick({
index: 0
}) })
}) },
}, toSeleteMaterial() {
materialgroupDelete(materialgroupObj) { this.listDialogVisible = true
const that = this if (this.tableData.length <= 0) {
this.$confirm('是否确认删除该分组?', '提示', { this.materialgroupPage()
confirmButtonText: '确定', }
cancelButtonText: '取消', },
type: 'warning' materialgroupPage() {
}).then(function() { this.materialgroupLoading = true
materialgroupDel(materialgroupObj.id) materialgroupPage({
.then(function() { total: 0, //
that.$delete(that.materialgroupList, materialgroupObj.index) currentPage: 1, //
pageSize: 100, //
ascs: [], //
descs: 'create_time'//
}).then(response => {
this.materialgroupLoading = false
const materialgroupList = response.content
materialgroupList.unshift({
id: '-1',
name: '全部分组'
}) })
}) this.materialgroupList = materialgroupList
}, this.tabClick({
materialgroupEdit(materialgroupObj) { index: 0
const that = this })
this.$prompt('请输入分组名', '提示', { })
confirmButtonText: '确定', },
cancelButtonText: '取消', materialgroupDelete(materialgroupObj) {
inputValue: materialgroupObj.name const that = this
}).then(({ value }) => { this.$confirm('是否确认删除该分组?', '提示', {
materialgroupEdit({ confirmButtonText: '确定',
id: materialgroupObj.id, cancelButtonText: '取消',
name: value type: 'warning'
}).then(function() { }).then(function() {
materialgroupObj.name = value materialgroupDel(materialgroupObj.id)
that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj) .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(() => {
})
},
materialgroupAdd() {
const that = this
this.$prompt('请输入分组名', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
materialgroupAdd({
name: value
}).then(function() {
that.materialgroupPage()
}) })
}).catch(() => { },
materialgroupAdd() {
const that = this
this.$prompt('请输入分组名', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
materialgroupAdd({
name: value
}).then(function() {
that.materialgroupPage()
})
}).catch(() => {
})
},
tabClick(tab, event) {
this.urls = []
const index = Number(tab.index)
const materialgroupObj = this.materialgroupList[index]
materialgroupObj.index = index
this.materialgroupObj = materialgroupObj
this.materialgroupObjId = materialgroupObj.id
this.page.currentPage = 1
this.page.total = 0
if (materialgroupObj.id != '-1') {
this.groupId = materialgroupObj.id
} else {
this.groupId = null
}
this.getPage(this.page)
},
getPage(page, params) {
this.tableLoading = true
getPage(Object.assign({
page: page.currentPage - 1,
size: page.pageSize,
descs: this.page.descs,
ascs: this.page.ascs,
sort: 'createTime,desc'
}, {
groupId: this.groupId
})).then(response => {
const tableData = response.content
this.page.total = response.totalElements
this.page.currentPage = page.currentPage
this.page.pageSize = page.pageSize
this.tableData = tableData
this.tableLoading = false
}).catch(() => {
this.tableLoading = false
})
},
sizeChange(val) {
console.log(val)
this.page.currentPage = 1
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(() => { },
tabClick(tab, event) {
this.urls = []
const index = Number(tab.index)
const materialgroupObj = this.materialgroupList[index]
materialgroupObj.index = index
this.materialgroupObj = materialgroupObj
this.materialgroupObjId = materialgroupObj.id
this.page.currentPage = 1
this.page.total = 0
if (materialgroupObj.id != '-1') {
this.groupId = materialgroupObj.id
} else {
this.groupId = null
}
this.getPage(this.page)
},
getPage(page, params) {
this.tableLoading = true
getPage(Object.assign({
page: page.currentPage - 1,
size: page.pageSize,
descs: this.page.descs,
ascs: this.page.ascs,
sort: 'createTime,desc'
}, {
groupId: this.groupId
})).then(response => {
const tableData = response.content
this.page.total = response.totalElements
this.page.currentPage = page.currentPage
this.page.pageSize = page.pageSize
this.tableData = tableData
this.tableLoading = false
}).catch(() => {
this.tableLoading = false
})
},
sizeChange(val) {
console.log(val)
this.page.currentPage = 1
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) { materialUrl(item) {
const that = this const that = this
this.$prompt('素材链接', '提示', { this.$prompt('素材链接', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
inputValue: item.url inputValue: item.url
}).then(({ value }) => { }).then(({ value }) => {
}).catch(() => { }).catch(() => {
}) })
}, },
materialDel(item) { materialDel(item) {
const that = this const that = this
this.$confirm('是否确认删除该素材?', '提示', { this.$confirm('是否确认删除该素材?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(function() { }).then(function() {
delObj(item.id) delObj(item.id)
.then(function() { .then(function() {
that.getPage(that.page) that.getPage(that.page)
}) })
}) })
}, },
handleCommand(command) { handleCommand(command) {
const that = this const that = this
const s = command.split('-') const s = command.split('-')
putObj({ putObj({
id: s[0], id: s[0],
groupId: s[1] groupId: s[1]
}).then(function() { }).then(function() {
that.getPage(that.page) that.getPage(that.page)
}) })
}, },
handleProgress(event, file, fileList) { handleProgress(event, file, fileList) {
// let uploadProgress = file.percentage.toFixed(0) // let uploadProgress = file.percentage.toFixed(0)
// this.uploadProgress = uploadProgress // this.uploadProgress = uploadProgress
}, },
handleSuccess(response, file, fileList) { handleSuccess(response, file, fileList) {
const that = this const that = this
this.uploadProgress = 0 this.uploadProgress = 0
addObj({ addObj({
type: '1', type: '1',
groupId: this.groupId != '-1' ? this.groupId : null, groupId: this.groupId != '-1' ? this.groupId : null,
name: file.name, name: file.name,
url: response.link url: response.link
}).then(function() { }).then(function() {
that.getPage(that.page) that.getPage(that.page)
}) })
}, },
beforeUpload(file) { beforeUpload(file) {
const isPic = const isPic =
file.type === 'image/jpeg' || file.type === 'image/jpeg' ||
file.type === 'image/png' || file.type === 'image/png' ||
file.type === 'image/gif' || file.type === 'image/gif' ||
file.type === 'image/jpg' 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) { if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!') this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isPic && isLt2M
},
sureUrls() {
this.urls.forEach(item => {
this.$set(this.value, this.value.length, item)
})
this.listDialogVisible = false
} }
return isPic && isLt2M
},
sureUrls() {
this.urls.forEach(item => {
this.$set(this.value, this.value.length, item)
})
this.listDialogVisible = false
} }
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

1338
src/views/shop/order/index.vue

File diff suppressed because it is too large Load Diff

189
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>
Loading…
Cancel
Save