|
|
|
@ -2,7 +2,7 @@ |
|
|
|
<div class="rightClass"> |
|
|
|
<div> |
|
|
|
<el-row style="margin-bottom: 8px;"> |
|
|
|
<el-col :span="16"> |
|
|
|
<el-col> |
|
|
|
<el-button type="primary" @click="addData" size="large"> |
|
|
|
<el-icon> |
|
|
|
<Plus /> |
|
|
|
@ -22,22 +22,38 @@ |
|
|
|
</el-icon> |
|
|
|
<span>清空</span> |
|
|
|
</el-button> |
|
|
|
<el-upload :show-file-list="false" v-model="fileOriData" :before-upload="beforeAvatarUpload" |
|
|
|
:http-request="successSubmit" accept=".xls,.xlsx,.csv" |
|
|
|
style="display: inline-block;position: relative;top: 3px;left: 12px;margin-right: 24px;"> |
|
|
|
<el-button type="success" size="large"> |
|
|
|
<el-icon> |
|
|
|
<Upload /> |
|
|
|
</el-icon> |
|
|
|
<span>导入</span> |
|
|
|
</el-button> |
|
|
|
</el-upload> |
|
|
|
<el-button type="primary" @click="openImport" size="large"> |
|
|
|
<el-icon> |
|
|
|
<Delete /> |
|
|
|
</el-icon> |
|
|
|
<span>导入数据</span> |
|
|
|
</el-button> |
|
|
|
<el-button type="primary" @click="exportData" size="large"> |
|
|
|
<el-icon> |
|
|
|
<Delete /> |
|
|
|
</el-icon> |
|
|
|
<span>导出</span> |
|
|
|
</el-button> |
|
|
|
<el-select v-model="searchObj.shopName" placeholder="请选择店铺名" class="selectClass" size="large"> |
|
|
|
<el-option v-for="item in shopOptions" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<el-select v-model="searchObj.month" placeholder="请选择月份" class="selectClass" size="large"> |
|
|
|
<el-option v-for="item in monthOptions" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<el-button type="primary" @click="updateSeach" size="large" style="margin-left: 16px;"> |
|
|
|
<el-icon> |
|
|
|
<Delete /> |
|
|
|
</el-icon> |
|
|
|
<span>搜索</span> |
|
|
|
</el-button> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<div v-loading="loading"> |
|
|
|
<tablecomponent :tableHeader="tableHeader" :tableData="tableData" @selectChange="selectChange" @edit="edit" |
|
|
|
@info="info" @del="del" ref="tableComponentRef"> |
|
|
|
@info="info" @del="del" @pageChange="pageChange" ref="tableComponentRef" :pageVO="pageVO"> |
|
|
|
</tablecomponent> |
|
|
|
</div> |
|
|
|
<el-dialog v-model="dialogFrom.visible" :title="dialogFrom.title" width="80%" :close-on-click-modal="false"> |
|
|
|
@ -51,6 +67,34 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
<el-dialog v-model="importShow" title="导入数据" width="80%" :close-on-click-modal="false"> |
|
|
|
<div> |
|
|
|
<el-select v-model="importObj.shopName" placeholder="请选择店铺名" class="selectClass" size="large"> |
|
|
|
<el-option v-for="item in shopOptions" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<el-select v-model="importObj.month" placeholder="请选择月份" class="selectClass" size="large"> |
|
|
|
<el-option v-for="item in monthOptionsList" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<el-upload :show-file-list="false" v-model="fileOriData" :before-upload="beforeAvatarUpload" |
|
|
|
:http-request="successSubmit" accept=".xls,.xlsx,.csv" |
|
|
|
style="display: inline-block;position: relative;top: 3px;left: 12px;margin-right: 24px;"> |
|
|
|
<el-button type="success" size="large"> |
|
|
|
<el-icon> |
|
|
|
<Upload /> |
|
|
|
</el-icon> |
|
|
|
<span>上传表格</span> |
|
|
|
</el-button> |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
<template #footer> |
|
|
|
<div> |
|
|
|
<el-button @click="cancelDialog">取消</el-button> |
|
|
|
<el-button type="primary" @click="submitImport"> 确认 </el-button> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -76,6 +120,7 @@ export default { |
|
|
|
formHeader: [], |
|
|
|
tableData: [], |
|
|
|
selectionData: [], |
|
|
|
importShow: false, |
|
|
|
dialogFrom: { |
|
|
|
visible: false, |
|
|
|
title: "新增数据堆", |
|
|
|
@ -83,12 +128,152 @@ export default { |
|
|
|
formHeader: [], |
|
|
|
formData: {} |
|
|
|
}, |
|
|
|
sortObj: {}, |
|
|
|
fileData: [], |
|
|
|
pageVO: { |
|
|
|
total: 0, |
|
|
|
currentPage: 1, |
|
|
|
pageSize: 16, |
|
|
|
pageSizes: [16, 30, 50, 100] |
|
|
|
}, |
|
|
|
searchObj: { |
|
|
|
shopName: "", |
|
|
|
month: "" |
|
|
|
}, |
|
|
|
importObj: { |
|
|
|
shopName: "", |
|
|
|
month: "" |
|
|
|
}, |
|
|
|
shopOptions: [ |
|
|
|
{ |
|
|
|
label: "门店1（天猫小店泰和苑店）", |
|
|
|
value: "1" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "门店2（天猫小店牡丹园店）", |
|
|
|
value: "2" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "门店3（金叶便利东方红店）", |
|
|
|
value: "3" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "门店4（天恩认养一头牛官旗店）", |
|
|
|
value: "4" |
|
|
|
} |
|
|
|
], |
|
|
|
monthOptions: [ |
|
|
|
{ |
|
|
|
label: "全部", |
|
|
|
value: "" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "1月", |
|
|
|
value: "1月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "2月", |
|
|
|
value: "2月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "3月", |
|
|
|
value: "3月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "4月", |
|
|
|
value: "4月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "5月", |
|
|
|
value: "5月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "6月", |
|
|
|
value: "6月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "7月", |
|
|
|
value: "7月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "8月", |
|
|
|
value: "8月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "9月", |
|
|
|
value: "9月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "10月", |
|
|
|
value: "10月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "11月", |
|
|
|
value: "11月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "12月", |
|
|
|
value: "12月" |
|
|
|
}, |
|
|
|
], |
|
|
|
monthOptionsList: [ |
|
|
|
{ |
|
|
|
label: "1月", |
|
|
|
value: "1月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "2月", |
|
|
|
value: "2月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "3月", |
|
|
|
value: "3月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "4月", |
|
|
|
value: "4月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "5月", |
|
|
|
value: "5月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "6月", |
|
|
|
value: "6月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "7月", |
|
|
|
value: "7月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "8月", |
|
|
|
value: "8月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "9月", |
|
|
|
value: "9月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "10月", |
|
|
|
value: "10月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "11月", |
|
|
|
value: "11月" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "12月", |
|
|
|
value: "12月" |
|
|
|
}, |
|
|
|
], |
|
|
|
tableName: "", |
|
|
|
loading: false, |
|
|
|
fileOriData: null, |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
openImport() { |
|
|
|
this.importShow = true |
|
|
|
}, |
|
|
|
beforeAvatarUpload(rawFile) { |
|
|
|
let imgList = ['text/csv', 'application/vnd.ms-excel', "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"] |
|
|
|
if (imgList.indexOf(rawFile.type) === -1) { |
|
|
|
@ -106,50 +291,14 @@ export default { |
|
|
|
let file = opts.file |
|
|
|
this.fileDealData = [] |
|
|
|
let fileReader = new FileReader() |
|
|
|
let dealDataObj = { |
|
|
|
"销售数量": 1.2, |
|
|
|
"销售金额": 1.2, |
|
|
|
"数量小计": 1.2, |
|
|
|
"金额小计": 1.2, |
|
|
|
} |
|
|
|
fileReader.onload = async function () { |
|
|
|
|
|
|
|
fileReader.onload = async function (e) { |
|
|
|
let data = this.result |
|
|
|
let workbook = XLSX.read(data, { type: 'binary' }) |
|
|
|
let sheetName = workbook.SheetNames[0] |
|
|
|
let sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]) |
|
|
|
console.log(132, sheetData); |
|
|
|
let allList = [] |
|
|
|
let dealData = [] |
|
|
|
for (let i = 0; i < sheetData.length; i++) { |
|
|
|
let element = sheetData[i]; |
|
|
|
let item = {} |
|
|
|
for (let key in element) { |
|
|
|
item[_.trim(key)] = _.trim(element[key]) |
|
|
|
} |
|
|
|
if (item["行号"] && item["品名"] && item["供应商名称"]) { |
|
|
|
for (let key in item) { |
|
|
|
if (dealDataObj[_.trim(key)]) { |
|
|
|
item[_.trim(key)] = (Number(_.trim(element[key])) * dealDataObj[_.trim(key)]).toFixed(2) |
|
|
|
} |
|
|
|
dealData.push(item[_.trim(key)]) |
|
|
|
} |
|
|
|
item["allInfo"] = `${_.join(dealData, ",")}` |
|
|
|
allList.push({ |
|
|
|
...item, |
|
|
|
create_at: dayjs().format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
update_at: dayjs().format('YYYY-MM-DD HH:mm:ss') |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
try { |
|
|
|
await myDatabase.sale.bulkAdd(allList) |
|
|
|
} catch (error) { |
|
|
|
ElMessage({ |
|
|
|
message: `销售数据重复,error:${error}`, |
|
|
|
type: 'error', |
|
|
|
}) |
|
|
|
} |
|
|
|
await that.updateSeach() |
|
|
|
that.fileData = _.cloneDeep(sheetData) |
|
|
|
|
|
|
|
} |
|
|
|
fileReader.onerror = function (error) { |
|
|
|
ElMessage({ |
|
|
|
@ -162,23 +311,64 @@ export default { |
|
|
|
//更新数据 |
|
|
|
async updateSeach() { |
|
|
|
this.loading = true |
|
|
|
let allSaleList = _.cloneDeep(await myDatabase.sale.toArray()) |
|
|
|
let dataTemp = [] |
|
|
|
dataTemp = _.cloneDeep(allSaleList) |
|
|
|
let dataTempSort = dataTemp |
|
|
|
if (_.get(this.sortObj, ["sort"], "")) { |
|
|
|
// 带条件排序 |
|
|
|
dataTempSort = _.orderBy(dataTemp, [this.sortObj.prop], [_.get(this.sortObj, ["sort"], "") === 1 ? 'desc' : 'asc']) |
|
|
|
let collection = myDatabase.sale |
|
|
|
let shopNameTemp = _.trim(_.trim(this.searchObj.shopName)) |
|
|
|
let monthTemp = _.trim(_.trim(this.searchObj.month)) |
|
|
|
if (shopNameTemp) { |
|
|
|
collection = collection.filter((equip) => equip.shopName === shopNameTemp) |
|
|
|
} |
|
|
|
if (monthTemp) { |
|
|
|
collection = collection.filter((equip) => equip.month === monthTemp) |
|
|
|
} |
|
|
|
this.tableData = _.uniqBy(dataTempSort, "id") |
|
|
|
this.pageVO.total = await collection.count() |
|
|
|
this.tableData = await collection.offset((this.pageVO.currentPage - 1) * this.pageVO.pageSize).limit(this.pageVO.pageSize).toArray() |
|
|
|
this.pageVO.pageSizes[5] = this.pageVO.total |
|
|
|
this.loading = false |
|
|
|
}, |
|
|
|
//选中数据 |
|
|
|
selectChange(selection) { |
|
|
|
this.selectionData = _.cloneDeep(selection) |
|
|
|
}, |
|
|
|
// 导出数据 |
|
|
|
async exportData() { |
|
|
|
let listCopy = _.cloneDeep(this.tableData) |
|
|
|
if (listCopy.length) { |
|
|
|
let allDataList = [] |
|
|
|
for (let i = 0; i < listCopy.length; i++) { |
|
|
|
let listItem = listCopy[i]; |
|
|
|
let item = {} |
|
|
|
for (let j = 0; j < this.tableHeader.length; j++) { |
|
|
|
let headerItem = this.tableHeader[j]; |
|
|
|
item[headerItem.label] = listItem[headerItem.prop] |
|
|
|
} |
|
|
|
allDataList.push({ ...item }) |
|
|
|
} |
|
|
|
let jsonWorkSheet = XLSX.utils.json_to_sheet(allDataList); |
|
|
|
let workBook = { |
|
|
|
SheetNames: ["sheet1"], |
|
|
|
Sheets: { |
|
|
|
["sheet1"]: jsonWorkSheet, |
|
|
|
} |
|
|
|
}; |
|
|
|
XLSX.writeFile(workBook, `销售表格${dayjs().format("YYYY-MM-DD_HH-mm-ss")}.xlsx`); |
|
|
|
} else { |
|
|
|
ElMessage({ |
|
|
|
type: 'error', |
|
|
|
message: '当前表格无数据，请有数据后在导出', |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
//切换数据 |
|
|
|
async pageChange({ pageSize, currentPage }) { |
|
|
|
this.pageVO.currentPage = currentPage |
|
|
|
this.pageVO.pageSize = pageSize |
|
|
|
console.log(186, this.pageVO); |
|
|
|
await this.updateSeach() |
|
|
|
}, |
|
|
|
//关闭模态框 |
|
|
|
cancelDialog() { |
|
|
|
this.importShow = false |
|
|
|
this.dialogFrom = { |
|
|
|
visible: false, |
|
|
|
title: "新增", |
|
|
|
@ -187,6 +377,53 @@ export default { |
|
|
|
formData: {} |
|
|
|
} |
|
|
|
}, |
|
|
|
//确认提交 |
|
|
|
async submitImport() { |
|
|
|
let that = this |
|
|
|
let dealDataObj = { |
|
|
|
"销售数量": 1.2, |
|
|
|
"销售金额": 1.2, |
|
|
|
"退货数量": 1, |
|
|
|
"退货金额": 1, |
|
|
|
"数量小计": 1.2, |
|
|
|
"金额小计": 1.2, |
|
|
|
} |
|
|
|
let allList = [] |
|
|
|
for (let i = 0; i < this.fileData.length; i++) { |
|
|
|
let element = this.fileData[i]; |
|
|
|
let item = {} |
|
|
|
for (let key in element) { |
|
|
|
item[_.trim(key)] = _.trim(element[key]) |
|
|
|
} |
|
|
|
if (item["行号"] && item["品名"] && item["供应商名称"]) { |
|
|
|
for (let key in item) { |
|
|
|
if (dealDataObj[_.trim(key)]) { |
|
|
|
item[_.trim(key)] = Number((Number(_.trim(element[key])) * dealDataObj[_.trim(key)]).toFixed(2)) |
|
|
|
} |
|
|
|
} |
|
|
|
allList.push({ |
|
|
|
shopName: that.importObj.shopName, |
|
|
|
month: that.importObj.month, |
|
|
|
...item, |
|
|
|
create_at: dayjs().format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
update_at: dayjs().format('YYYY-MM-DD HH:mm:ss') |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
try { |
|
|
|
await myDatabase.sale.bulkAdd(allList) |
|
|
|
this.cancelDialog() |
|
|
|
await that.updateSeach() |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
ElMessage({ |
|
|
|
message: `销售数据重复,error:${error}`, |
|
|
|
type: 'error', |
|
|
|
}) |
|
|
|
} |
|
|
|
await that.updateSeach() |
|
|
|
|
|
|
|
}, |
|
|
|
//确认模态框 |
|
|
|
async submitDialog() { |
|
|
|
let params = { ...this.dialogFrom.formData, } |
|
|
|
@ -228,7 +465,7 @@ export default { |
|
|
|
edit(row) { |
|
|
|
this.dialogFrom = { |
|
|
|
visible: true, |
|
|
|
title: `编辑${row.name}`, |
|
|
|
title: `编辑${row['货号']}`, |
|
|
|
type: "put", |
|
|
|
disabled: false, |
|
|
|
formHeader: this.formHeader, |
|
|
|
@ -239,7 +476,7 @@ export default { |
|
|
|
info(row) { |
|
|
|
this.dialogFrom = { |
|
|
|
visible: true, |
|
|
|
title: `查看${row.name}`, |
|
|
|
title: `查看${row['货号']}`, |
|
|
|
type: "info", |
|
|
|
disabled: true, |
|
|
|
formHeader: this.formHeader, |
|
|
|
@ -256,7 +493,7 @@ export default { |
|
|
|
let idList = [] |
|
|
|
for (let i = 0; i < delList.length; i++) { |
|
|
|
let element = delList[i]; |
|
|
|
tooltipList.push(element.name) |
|
|
|
tooltipList.push(element["货号"]) |
|
|
|
idList.push(element.id) |
|
|
|
} |
|
|
|
ElMessageBox.confirm( |
|
|
|
@ -333,4 +570,10 @@ export default { |
|
|
|
width: 200px; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.selectClass { |
|
|
|
display: inline-block; |
|
|
|
max-width: 200px; |
|
|
|
margin-left: 16px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
