Browse Source

页面导出功能新加了XLSX工具

java8
han\hanst 9 months ago
parent
commit
1d73d01131
  1. 2
      src/api/ecss/ecss.js
  2. 36
      src/utils/ajax.js
  3. 156
      src/utils/excel-util.js
  4. 74
      src/utils/export-options.js
  5. 165
      src/views/modules/ecss/codelnotify.vue
  6. 22
      src/views/modules/ecss/codelnotifyConfirm.vue
  7. 2
      src/views/modules/ecss/declaration.vue
  8. 2
      src/views/modules/ecss/ecssWalMartOrder.vue
  9. 34
      src/views/modules/ecss/pallet_upload_excel.vue
  10. 8
      src/views/modules/ecss/partHsCode.vue

2
src/api/ecss/ecss.js

@ -103,4 +103,6 @@ export const saveWalMartOrderByExcel = data => createAPI(`/ecss/coDel/saveWalMar
export const getPropertiesListByDeclaration = data => createAPI(`/ecss/coDel/getPropertiesListByDeclaration`,'post',data)
export const queryPartListAll = data => createAPI(`/ecss/coDel/queryPartListAll`,'post',data)

36
src/utils/ajax.js

@ -1,8 +1,40 @@
import Vue from "vue";
import axios from 'axios';
const qs = require('qs');
var apiServer = (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl);
var http = axios.create({
timeout: 10000,
headers: {},
transformRequest: data => {
if (typeof data === 'object') {
return qs.stringify(data, { arrayFormat: 'brackets' });
}
return data;
}
});
export default {
axios: http,
$post(url, data, callback, error) {
// 添加 headers 配置项
const config = {
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'token': Vue.cookie.get('token')
}
};
let p = http.post(apiServer +url, JSON.stringify(data), config);
if (callback) {
p.then(res => {
callback(res);
})
}
if (error) {
p.catch(err => {
error(err);
});
}
return p;
},
file:(url, data, succ, err )=>{
let requestUrl = apiServer + url;
var xhr = new XMLHttpRequest();

156
src/utils/excel-util.js

@ -0,0 +1,156 @@
import XLSX from "xlsx";
import ajax from '@/utils/ajax'
import {
Message
} from 'element-ui';
const excelHeaderName = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
/**
* excel导出默认选项
*/
const exportOptionDefault = {
url: "",//*必填,导出请求地址
tableRef: undefined,//#1组合必填 导出数据对应列信息,el-table引用
columnMapping: undefined,//#1组合必填 自定义导出列映射
fileName: "export.xlsx",//导出文件名
params: {},//导出请求参数
rowFetcher: res => {//从请求结果中获取导出行的方式,默认取请求结果中的data作为导出数据
return (res || {data: []}).data;
},
columnFormatter: [],//需要格式化的列
mergeSetting: {
refs: [], //检测需要合并的数据列属性名
columns: [] //检测需要合并后,要合并的列,以第一条数据为准合并
}
};
let HEADERS = [];
for (let i =0;i< 200;i++) {
let c = parseInt(i / 26);
let m = i % 26;
HEADERS.push((c > 0 ? excelHeaderName[c - 1] : "") + excelHeaderName[m]);
}
let validOption = opt => {
let option = Object.assign({}, opt);
if (!option.url) {
throw new Error("request url is required.");
}
if (!option.tableRef && !option.columnMapping) {
throw new Error("element table ref object or columnMapping is required.");
}
if (option.rowFetcher != undefined && typeof option.rowFetcher != "function") {
throw new Error("rowFetcher must be a function with one param.");
}
}
let getMergeSetting = (data, s, allCols) => {
let refCols = s.refs;
let mcols = s.columns;
let mergeList = [];
let refRow = data[0];
let mergeSetting = {
s: 0,
e: 0
};
for (let i = 0; i < data.length; i++) {
let same = refCols.map(c => data[i][c] === refRow[c]).filter(r => !!r).length == refCols.length;
if (!same) {
mergeSetting.e > mergeSetting.s && (mergeList.push(mergeSetting));
refRow = data[i];
mergeSetting = {
s: i,
e: i
};
} else {
i > mergeSetting.e && (mergeSetting.e = i);
i == data.length - 1 && (mergeList.push(mergeSetting));
}
}
let setting = [];
mergeList.forEach(e => {
mcols.forEach(c => {
let ci = allCols.indexOf(c);
setting.push({
s: {
r: e.s + 1,
c: ci
},
e: {
r: e.e + 1,
c: ci
}
});
});
});
return setting;
}
let setStyle = (ws, s) => {}
let getColSetting = mapping => {
let columns = [];
for (let i = 0; i < mapping.length; i++) {
let c = mapping[i];
columns.push({
property: c.prop || c.property,
label: c.label,
type: "default"
});
}
return {
columns: columns
};
}
let export2Excel = opt => {
validOption(opt);
let options = Object.assign({}, exportOptionDefault, opt);
let expColSetting = !!options.tableRef ? options.tableRef : getColSetting(options.columnMapping);
ajax.$post(options.url, options.params, resp => {
if (resp.status !== 200) {
Message.error({
message: resp.description
});
}
let rows = options.rowFetcher(resp).rows;
var columns = [
[]
];
var keys = [];
let formaters = new Array();
expColSetting.columns.forEach(column => {
if (!!column.label && column.type === "default") {
columns[0].push(column.label);
keys.push(column.property);
let formater = options.columnFormatter.find(f => !!f[column.property] && typeof f[column.property] == 'function');
!!formater && (formaters[column.property] = formater[column.property]);
}
});
rows.forEach(o => {
let list = [];
keys.forEach(k => {
let formater = formaters[k];
if (!!formater) {
list.push(formater(o[k]));
} else {
list.push(o[k]);
}
});
columns.push(list);
});
const ws = XLSX.utils.aoa_to_sheet(columns);
if (!!options.mergeSetting && !!options.mergeSetting.refs && options.mergeSetting.refs.length > 0) {
let merges = getMergeSetting(rows, options.mergeSetting, keys);
ws["!merges"] = merges;
setStyle(ws, merges);
}
// console.log(ws);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "sheet1");
XLSX.writeFile(wb, options.fileName);
});
}
export default {
exportTable: export2Excel
}

74
src/utils/export-options.js

@ -0,0 +1,74 @@
const PalletSku = {
columnMapping: [
{
prop: "seqNo",
label: "序号",
},
{
prop: "cmcInvoice",
label: "发票号",
},
{
prop: "seqNo",
label: "托盘号/箱号",
},
{
prop: "customerPO",
label: "PO",
},
{
prop: "pn",
label: "PN",
},
{
prop: "qty",
label: "数量",
},
{
prop: "seqNo",
label: "箱数",
},
{
prop: "seqNo",
label: "Rolls",
},
{
prop: "seqNo",
label: "托数",
},
{
prop: "seqNo",
label: "长(M)",
},
{
prop: "seqNo",
label: "宽(M)",
},
{
prop: "seqNo",
label: "高(M)",
},
{
prop: "seqNo",
label: "体积",
},
{
prop: "seqNo",
label: "毛重",
},
{
prop: "seqNo",
label: "净重",
}
],
mergeSetting: {
mergeSetting: {
refs: [],
columns: []
}
}
}
export default {
PalletSku,
};

165
src/views/modules/ecss/codelnotify.vue

@ -268,7 +268,7 @@
</el-col>
<el-col :span="6">
<el-form-item :label="'PN'">
<!-- <span slot="label" @click="getBaseList(507)"><a herf="#">PN</a></span>-->
<span slot="label" @click="queryComponentPartModal"><a herf="#">PN</a></span>
<el-input v-model="updateDetailModel.pn" ></el-input>
</el-form-item>
</el-col>
@ -399,6 +399,57 @@
<del-upload-excel ref="delUploadExcel" @refreshTable="searchTable" v-drag></del-upload-excel>
<!--列表的组件-->
<Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>
<el-dialog title="物料清单" top="17vh" :close-on-click-modal="false" v-drag :visible.sync="componentPartModelFlag" width="700px">
<el-form :inline="true" label-position="top" :model="componentPartData">
<el-form-item :label="'PN'">
<el-input v-model="componentPartData.sku" clearable style="width: 120px"></el-input>
</el-form-item>
<el-form-item :label="'物料编码'">
<el-input v-model="componentPartData.partNo" clearable style="width: 120px"></el-input>
</el-form-item>
<el-form-item :label="'物料描述'">
<el-input v-model="componentPartData.partDesc" clearable style="width: 120px"></el-input>
</el-form-item>
<el-form-item :label="' '">
<el-button type="primary" @click="queryComponentPartList">查询</el-button>
</el-form-item>
</el-form>
<el-table
:height="250"
:data="componentPartList"
@row-dblclick="getComponentRowData"
border
style="width: 100%;">
<el-table-column
v-for="(item,index) in componentPartColumnList" :key="index"
:sortable="item.columnSortable"
:prop="item.columnProp"
:header-align="item.headerAlign"
:show-overflow-tooltip="item.showOverflowTooltip"
:align="item.align"
:fixed="item.fixed==''?false:item.fixed"
:min-width="item.columnWidth"
:label="item.columnLabel">
<template slot-scope="scope">
<span v-if="!item.columnHidden">{{scope.row[item.columnProp]}}</span>
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
</template>
</el-table-column>
</el-table>
<!-- 分页插件 -->
<el-pagination
@size-change="sizeChangeHandle3"
@current-change="currentChangeHandle3"
:current-page="pageIndex3"
:page-sizes="[20, 50, 100, 200, 500]"
:page-size="pageSize3"
:total="totalPage3"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<el-footer style="height:35px;margin-top:10px;text-align:center">
<el-button type="primary" @click="componentPartModelFlag = false">关闭</el-button>
</el-footer>
</el-dialog>
</div>
</template>
@ -415,6 +466,7 @@
updateEcssDelDetail,
deleteEcssDelDetail,
searchCoDelPalletData,
queryPartListAll
}from "@/api/ecss/ecss.js"
import {getBuList}from '@/api/factory/site.js'
export default {
@ -429,6 +481,56 @@
pageSize: 100,
totalPage: 0,
height: 200,
componentPartModelFlag: false,
componentPartData: {
site: '',
buNo: '',
sku: '',
partNo: '',
partDesc: '',
page: 1,
limit: 10
},
pageIndex3: 1,
pageSize3: 20,
totalPage3: 0,
componentPartList: [],
componentPartColumnList: [
{
columnProp: 'sku',
headerAlign: "center",
align: "center",
columnLabel: 'PN',
columnHidden: false,
columnImage: false,
status: true,
fixed: '',
columnWidth: 120
},
{
columnProp: 'partNo',
headerAlign: "center",
align: "center",
columnLabel: '物料编码',
columnHidden: false,
columnImage: false,
status: true,
fixed: '',
columnWidth: 120
},
{
columnProp: 'partDesc',
headerAlign: "center",
align: "center",
columnLabel: '物料描述',
columnHidden: false,
columnImage: false,
status: true,
fixed: '',
columnWidth: 300
},
],
walMartOrderFlag: 'N',
walMartOrderDialog:false,
buList:[],
@ -1588,6 +1690,12 @@
})
},
xiadaChoose(){
if (this.dataList2.length===0) {
this.$alert('该发货通知单下没有明细无法下达!', '错误', {
confirmButtonText: '确定'
})
return false
}
if (this.currentRow.buNo=='03-RFID') {
this.walMartOrderDialog=true;
this.walMartOrderFlag='N';
@ -1645,6 +1753,61 @@
})
})
},
//
sizeChangeHandle3 (val) {
this.pageSize3 = val
this.pageIndex3 = 1
this.queryComponentPartModal()
},
//
currentChangeHandle3 (val) {
this.pageIndex3 = val
this.queryComponentPartModal()
},
//
queryComponentPartModal () {
this.componentPartData.limit = this.pageSize3
this.componentPartData.page = this.pageIndex3
this.componentPartData.site = this.currentRow.site
this.componentPartData.buNo = this.currentRow.buNo
//
queryPartListAll(this.componentPartData).then(({data}) => {
if (data && data.code === 0) {
this.componentPartList = data.page.list
this.pageIndex3 = data.page.currPage
this.pageSize3 = data.page.pageSize
this.totalPage3 = data.page.totalCount
this.componentPartModelFlag = true
} else {
this.componentPartList = []
}
})
},
//
queryComponentPartList () {
this.componentPartData.limit = this.pageSize3
this.componentPartData.page = this.pageIndex3
//
queryPartListAll(this.componentPartData).then(({data}) => {
if (data && data.code === 0) {
this.componentPartList = data.page.list
this.pageIndex3 = data.page.currPage
this.pageSize3 = data.page.pageSize
this.totalPage3 = data.page.totalCount
} else {
this.componentPartList = []
}
})
},
//
getComponentRowData (row) {
this.updateDetailModel.partDescription = row.partDesc
this.updateDetailModel.pa = row.sku
this.updateDetailModel.partNo = row.partNo
this.componentPartModelFlag = false
},
doUpdateDetail(){
if(this.updateDetailModel.partNo==null||this.updateDetailModel.partNo==''){
this.$alert('请输入PN!', '错误', {

22
src/views/modules/ecss/codelnotifyConfirm.vue

@ -451,6 +451,16 @@
<el-input v-model="boxModelData.rolls" ></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="'毛重'" >
<el-input v-model="boxModelData.grossWeight"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="'净重'" >
<el-input v-model="boxModelData.netWeight" ></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-footer style="height:40px;margin-top: 10px;text-align:center">
@ -2119,12 +2129,12 @@
})
return false
}
if(this.currentRow.notifyStatus!=='仓库已确认'){
/* if(this.currentRow.notifyStatus!==''){
this.$alert('仓库未确认无法导入装箱清单!', '错误', {
confirmButtonText: '确定'
})
return false
}
} */
let inData={
site:this.currentRow.site,
buNo:this.currentRow.buNo,
@ -2352,6 +2362,13 @@
this.dataList5 = data.rows
}
})
searchCoDelPalletData(this.currentRow).then(({data}) => {
if (data && data.code == 0) {
this.dataList3 = data.rows
} else {
this.dataList3 = [];
}
});
this.boxModelFlag=false;
this.$message({
message: '操作成功',
@ -2365,7 +2382,6 @@
})
}
})
},
deleteBox(row){
this.$confirm('确认删除此明细?', '提示').then(() => {

2
src/views/modules/ecss/declaration.vue

@ -51,7 +51,7 @@
<el-form-item label=" ">
<el-button @click="exportGoodsList()" type="primary" style="margin-left: 2px">{{'导出出口货物委托书'}}</el-button>
</el-form-item>
<!-- <el-form-item label=" ">
<!-- <el-form-item label=" ">
<el-button @click="exportContract()" type="primary" style="margin-left: 2px">{{'导出合同'}}</el-button>
</el-form-item>-->
</el-form>

2
src/views/modules/ecss/ecssWalMartOrder.vue

@ -238,7 +238,7 @@ import walUploadExcel from "./walmart_upload_excel.vue";
columnProp: "grossWeight",
headerAlign: "center",
align: "center",
columnLabel: "重量",
columnLabel: "重量(KG)",
columnHidden: false,
columnImage: false,
columnSortable: false,

34
src/views/modules/ecss/pallet_upload_excel.vue

@ -17,7 +17,7 @@
<el-input v-model="pageData.cmcInvoice" disabled style="width: 120px"></el-input>
</el-form-item>
<el-form-item label=" ">
<download-excel
<!-- <download-excel
:fields="fields()"
:data="exportData"
type="xls"
@ -28,10 +28,10 @@
:before-generate="startDownload"
:before-finish="finishDownload"
worksheet="导出信息"
class="el-button el-button--primary el-button--medium">
class="el-button el-button&#45;&#45;primary el-button&#45;&#45;medium">
{{ '导出模版' }}
</download-excel>
<!-- <el-button type="primary" @click="downloadFile()">下载文件模板</el-button>-->
</download-excel>-->
<el-button type="primary" @click="exportExcel()">下载文件模板</el-button>
</el-form-item>
</el-row>
<el-row>
@ -57,6 +57,8 @@
import {saveCoDelPalletDataByExcel,searchEcssCoDelNotifyDetail} from '@/api/ecss/ecss.js'
import {downLoadObjectFile} from '@/api/eam/eam_object_list.js'
import {getBuList}from '@/api/factory/site.js'
import excel from "@/utils/excel-util.js";
import excelOpts from '@/utils/export-options.js'
export default {
name: 'bomComponentUpload',
data() {
@ -143,7 +145,25 @@
}
},
methods: {
async exportExcel() {
let searchData={
site: this.pageData.site,
buNo: this.pageData.buNo,
delNo: this.pageData.delNo,
cmcInvoice: this.pageData.cmcInvoice,
createBy: this.$store.state.user.name,
}
let columnMapping = excelOpts.PalletSku.columnMapping;
excel.exportTable({
url: "/ecss/coDel/searchEcssCoDelNotifyDetail",
columnMapping: columnMapping,
mergeSetting: excelOpts.PalletSku.mergeSetting,
params: searchData,
fileName: this.exportName+".xlsx",
rowFetcher: res => res.data,
columnFormatter: []
});
},
//
init (inData) {
this.fileList = []
@ -218,7 +238,9 @@
//
this.closeDialog()
} else {
this.$message.warning(data.msg)
this.$alert(data.msg, '错误', {
confirmButtonText: '确定'
})
}
})
},

8
src/views/modules/ecss/partHsCode.vue

@ -11,10 +11,10 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="'物料编码'">
<el-form-item :label="'ERP物料编码'">
<el-input v-model="searchData.partNo" clearable style="width: 120px"></el-input>
</el-form-item>
<el-form-item :label="'ERP物料编码'">
<el-form-item :label="'SKU'">
<el-input v-model="searchData.sku" clearable style="width: 120px"></el-input>
</el-form-item>
<el-form-item :label="'物料描述'">
@ -387,7 +387,7 @@
columnProp: 'partNo',
headerAlign: 'center',
align: 'left',
columnLabel: '物料编码',
columnLabel: 'ERP物料编码',
columnHidden: false,
columnImage: false,
columnSortable: false,
@ -405,7 +405,7 @@
columnProp: 'sku',
headerAlign: 'center',
align: 'left',
columnLabel: 'ERP物料编码',
columnLabel: 'SKU',
columnHidden: false,
columnImage: false,
columnSortable: false,

Loading…
Cancel
Save