32 changed files with 31145 additions and 0 deletions
@ -0,0 +1,5 @@ |
|||||
|
node_modules |
||||
|
dist |
||||
|
.idea |
||||
|
.vscode/launch.json |
||||
|
|
||||
@ -0,0 +1,16 @@ |
|||||
|
module.exports = { |
||||
|
presets: [ |
||||
|
'@vue/cli-plugin-babel/preset' |
||||
|
], |
||||
|
"plugins": [ |
||||
|
[ |
||||
|
"import", |
||||
|
{ |
||||
|
"libraryName": "vant", |
||||
|
"libraryDirectory": "es", |
||||
|
"style": true |
||||
|
}, |
||||
|
"vant" |
||||
|
] |
||||
|
] |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,66 @@ |
|||||
|
{ |
||||
|
"name": "Report", |
||||
|
"version": "2.0.0", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"dev": "vue-cli-service serve", |
||||
|
"serve": "vue-cli-service serve", |
||||
|
"build": "vue-cli-service build", |
||||
|
"lint": "vue-cli-service lint" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"@jiaminghi/data-view": "^2.10.0", |
||||
|
"ag-grid-community": "^30.2.0", |
||||
|
"ag-grid-vue": "^30.2.0", |
||||
|
"axios": "^0.21.1", |
||||
|
"core-js": "^3.6.5", |
||||
|
"echarts": "^5.4.0", |
||||
|
"element-ui": "2.15.13", |
||||
|
"file-saver": "^2.0.2", |
||||
|
"js-cookie": "^3.0.1", |
||||
|
"postcss-px-to-viewport": "^1.1.1", |
||||
|
"quill": "^1.3.7", |
||||
|
"quill-emoji": "^0.2.0", |
||||
|
"svg-sprite-loader": "^6.0.11", |
||||
|
"vue": "^2.6.11", |
||||
|
"vue-json-excel": "^0.3.0", |
||||
|
"vue-property-decorator": "^8.0.0", |
||||
|
"vue-quill-editor": "^3.0.6", |
||||
|
"vue-router": "^3.2.0", |
||||
|
"vue-video-player": "^5.0.2", |
||||
|
"xlsx": "^0.16.0", |
||||
|
"xlsx-style": "^0.8.13" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@vue/cli-plugin-babel": "~4.5.0", |
||||
|
"@vue/cli-plugin-eslint": "~4.5.0", |
||||
|
"@vue/cli-plugin-router": "^4.5.13", |
||||
|
"@vue/cli-service": "~4.5.0", |
||||
|
"babel-eslint": "^10.1.0", |
||||
|
"babel-plugin-import": "^1.13.3", |
||||
|
"eslint": "^6.7.2", |
||||
|
"eslint-plugin-vue": "^6.2.2", |
||||
|
"less-loader": "^7.3.0", |
||||
|
"script-loader": "^0.7.2", |
||||
|
"vue-template-compiler": "^2.6.11" |
||||
|
}, |
||||
|
"eslintConfig": { |
||||
|
"root": true, |
||||
|
"env": { |
||||
|
"node": true |
||||
|
}, |
||||
|
"extends": [ |
||||
|
"plugin:vue/essential", |
||||
|
"eslint:recommended" |
||||
|
], |
||||
|
"parserOptions": { |
||||
|
"parser": "babel-eslint" |
||||
|
}, |
||||
|
"rules": {} |
||||
|
}, |
||||
|
"browserslist": [ |
||||
|
"> 1%", |
||||
|
"last 2 versions", |
||||
|
"not dead" |
||||
|
] |
||||
|
} |
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,3 @@ |
|||||
|
window.SITE_CONFIG['apiURL'] = 'http://192.168.0.157:60029' |
||||
|
//特殊使用埃驰pc端访问地址（如备料报表）
|
||||
|
window.SITE_CONFIG['businessURL'] = 'http://dev.ccwin-in.com:10099' |
||||
@ -0,0 +1,27 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang=""> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<!-- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> --> |
||||
|
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> |
||||
|
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> --> |
||||
|
<!-- <meta name="x5-fullscreen" content="true"> --> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> |
||||
|
<!-- <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"> --> |
||||
|
<link rel="icon" href="<%= BASE_URL %>WMS.svg"> |
||||
|
<title><%= htmlWebpackPlugin.options.title %></title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<script> |
||||
|
window.SITE_CONFIG = {}; |
||||
|
window.SITE_CONFIG['apiURL'] = '';// api请求地址 |
||||
|
</script> |
||||
|
<script src="./config.js"></script> |
||||
|
<noscript> |
||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,21 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<router-view/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style> |
||||
|
html, body { |
||||
|
margin: 0; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
#app { |
||||
|
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
color: #2c3e50; |
||||
|
height: 100%; |
||||
|
user-select: none; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,13 @@ |
|||||
|
import axiosUtil from '@/utils/request' |
||||
|
let baseURL = window.SITE_CONFIG['apiURL'] |
||||
|
let procApi = baseURL + '/api/app/report-proc/execute-procedure-by-proc?procName=' |
||||
|
|
||||
|
// 通用获取页面数据
|
||||
|
export function getReportPageList(procName, data) { |
||||
|
return axiosUtil.ajax_post(procApi+procName,data) |
||||
|
} |
||||
|
|
||||
|
// 获取 物料
|
||||
|
export function getItemCodeList() { |
||||
|
return axiosUtil.ajax_post(procApi+'Proc_Zheng_InputWhere_ItemCode',{}) |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
import axiosUtil from '@/utils/request' |
||||
|
let businessURL = window.SITE_CONFIG['businessURL'] |
||||
|
|
||||
|
// 备料看板
|
||||
|
export function getstockPreparationList() { |
||||
|
return axiosUtil.ajax_post(businessURL+'/api/wms/store/board/preparation-board-export') |
||||
|
} |
||||
|
After Width: | Height: | Size: 715 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,232 @@ |
|||||
|
<template> |
||||
|
<div class="AgTableComponent"> |
||||
|
<AgGridVue |
||||
|
:style="`width: 100%; height: ${tableHeight}`" |
||||
|
class="ag-theme-alpine" |
||||
|
:columnDefs="columnDefs" |
||||
|
@grid-ready="onGridReady" |
||||
|
:defaultColDef="defaultColDef" |
||||
|
:suppressDragLeaveHidesColumns="true" |
||||
|
:columnResized="columnResized" |
||||
|
@filterChanged="onFilterAndSortChanged" |
||||
|
@sortChanged="onFilterAndSortChanged" |
||||
|
:pagination="true" |
||||
|
:suppressPaginationPanel="true" |
||||
|
></AgGridVue> |
||||
|
<div class="paginationContent"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:page-sizes="pageSizes" |
||||
|
:page-size="currentPageSize" |
||||
|
:current-page="currentPage" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
:total="pageTotal"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import "ag-grid-community/styles/ag-grid.css"; |
||||
|
import "ag-grid-community/styles/ag-theme-alpine.css"; |
||||
|
import { AgGridVue } from 'ag-grid-vue'; |
||||
|
export default { |
||||
|
name: "AgTable", |
||||
|
components: { |
||||
|
AgGridVue |
||||
|
}, |
||||
|
props:{ |
||||
|
// 列数据 |
||||
|
columnDefs:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
// 底部汇总元素 |
||||
|
BottomFixedItem:{ |
||||
|
type:Array, |
||||
|
default:[] |
||||
|
}, |
||||
|
// 底部汇总配置-平均值 |
||||
|
averageFixedItem:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
gridApi: null, |
||||
|
gridColumnApi: null, |
||||
|
defaultColDef: { |
||||
|
flex:1, |
||||
|
filter: true, |
||||
|
sortable: true, |
||||
|
floatingFilter: true, |
||||
|
resizable:true, |
||||
|
cellClass:"cell-wrap-text", |
||||
|
headerClass: 'ag-header-center', |
||||
|
autoHeight:true |
||||
|
}, |
||||
|
tableHeight:null, |
||||
|
pageSizes:[10, 20,100, 300, 500, 1000, 3000, 5000, 10000], |
||||
|
pageTotal:null, |
||||
|
currentPage:1, |
||||
|
currentPageSize:100, |
||||
|
allPageData:null,//所有前端数据 |
||||
|
}; |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.setTableHeight() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 每页显示条数变化 |
||||
|
handleSizeChange(value){ |
||||
|
this.currentPageSize = Number(value) |
||||
|
this.gridApi.paginationSetPageSize(Number(value)); |
||||
|
this.setTableTotal(this.gridApi) |
||||
|
}, |
||||
|
// 页码更改 |
||||
|
handleCurrentChange(value){ |
||||
|
this.currentPage = Number(value) |
||||
|
this.gridApi.paginationGoToPage(Number(value) - 1); |
||||
|
this.setTableTotal(this.gridApi) |
||||
|
}, |
||||
|
// 获取当前页面的数据 |
||||
|
getCurrentPageData(gridApi){ |
||||
|
this.allPageData = []; |
||||
|
gridApi.forEachNodeAfterFilterAndSort(node => { |
||||
|
this.allPageData.push(node.data) |
||||
|
}); |
||||
|
let _begin = (this.currentPage - 1) * this.currentPageSize |
||||
|
let _end = this.currentPage * this.currentPageSize |
||||
|
let _pageData = this.allPageData.slice(_begin,_end) |
||||
|
return _pageData |
||||
|
}, |
||||
|
// 筛选后操作 |
||||
|
onFilterAndSortChanged(data){ |
||||
|
this.gridApi = data.api |
||||
|
this.handleCurrentChange(1) |
||||
|
// this.setTableTotal(data.api) |
||||
|
}, |
||||
|
// 自适应高度 |
||||
|
columnResized(event){ |
||||
|
if(event.finished){ |
||||
|
this.gridApi.resetRowHeights() |
||||
|
} |
||||
|
}, |
||||
|
// 总计 |
||||
|
setTableTotal(gridApi) { |
||||
|
// 设置页码器 |
||||
|
let _pageData = this.getCurrentPageData(gridApi) |
||||
|
this.pageTotal = this.allPageData.length |
||||
|
// 设置底部汇总 |
||||
|
if(!this.BottomFixedItem || this.BottomFixedItem.length <= 0)return |
||||
|
let result = [{}] |
||||
|
this.BottomFixedItem.forEach(item=>{ |
||||
|
result[0][item] = 0 |
||||
|
}) |
||||
|
_pageData.forEach((item,key) => { |
||||
|
for(let o in item){ |
||||
|
if(this.BottomFixedItem.indexOf(o) >= 0){ |
||||
|
result[0][o] += Number(item[o]) |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
// 平均值的特殊处理 |
||||
|
if(this.averageFixedItem){ |
||||
|
for(let i in result[0]){ |
||||
|
if(this.averageFixedItem.indexOf(i) >= 0){ |
||||
|
result[0][i] = result[0][i]/_pageData.length |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.gridApi.setPinnedBottomRowData(result); |
||||
|
}, |
||||
|
// 设置表格高度 |
||||
|
setTableHeight(){ |
||||
|
let _headerH = document.getElementsByClassName('reportPageHeader')[0].clientHeight |
||||
|
let _footH = 50; |
||||
|
|
||||
|
let _outH = _headerH + _footH |
||||
|
this.tableHeight = `calc(100vh - ${_outH}px)` |
||||
|
}, |
||||
|
// 更新table值 |
||||
|
updateTableData(data){ |
||||
|
this.currentPage = 1 |
||||
|
this.gridApi.setRowData(data) |
||||
|
this.setTableTotal(this.gridApi) |
||||
|
this.gridApi.resetRowHeights(); |
||||
|
}, |
||||
|
// 加载agGrid |
||||
|
onGridReady(params) { |
||||
|
this.gridApi = params.api; |
||||
|
this.gridColumnApi = params.columnApi; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="less"> |
||||
|
.AgTableComponent{ |
||||
|
|
||||
|
.ag-theme-alpine{ |
||||
|
// --ag-header-foreground-color: white; |
||||
|
// --ag-header-background-color: #5a81b7; |
||||
|
// --ag-header-cell-hover-background-color: #5a81b7; |
||||
|
// --ag-header-cell-moving-background-color: #5a81b7; |
||||
|
// --ag-border-color:#4d709f; |
||||
|
|
||||
|
--ag-header-foreground-color: #333; |
||||
|
--ag-header-background-color: #f2f2f2; |
||||
|
--ag-header-cell-hover-background-color: #f2f2f2; |
||||
|
--ag-header-cell-moving-background-color: #f2f2f2; |
||||
|
--ag-border-color:#cecece; |
||||
|
|
||||
|
.ag-floating-filter-input .ag-input-field-input{ |
||||
|
color:#333 !important |
||||
|
} |
||||
|
|
||||
|
.ag-header-icon{ |
||||
|
color:#fff !important |
||||
|
} |
||||
|
|
||||
|
.cell-wrap-text{ |
||||
|
white-space:normal !important |
||||
|
} |
||||
|
|
||||
|
.ag-row-pinned{ |
||||
|
background:#5a81b7; |
||||
|
color:#fff; |
||||
|
font-weight:bold |
||||
|
} |
||||
|
|
||||
|
.ag-cell{ |
||||
|
line-height:unset; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
&.rightAlign{ |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
&.centerAlign{ |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ag-cell-value{ |
||||
|
overflow: unset; |
||||
|
text-overflow: unset; |
||||
|
word-break:break-all; |
||||
|
padding-top:5px; |
||||
|
padding-bottom:5px |
||||
|
} |
||||
|
} |
||||
|
.paginationContent{ |
||||
|
padding:0 20px; |
||||
|
display:flex; |
||||
|
height:50px; |
||||
|
justify-content:flex-end; |
||||
|
align-items:center; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,111 @@ |
|||||
|
<template> |
||||
|
<el-popover |
||||
|
placement="bottom" |
||||
|
trigger="click" |
||||
|
> |
||||
|
<ul class="columnFilterList"> |
||||
|
<li v-for="(item,index) in columnCopy" :key="index" @click="filterSelectClick(item)"> |
||||
|
<div class="iconContent" :class="{'isSelect':!item.hide}"> |
||||
|
<i class="el-icon-check" v-if="!item.hide"></i> |
||||
|
</div> |
||||
|
<div class="title">{{item.field}}</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<el-button slot="reference" class="setBtn" size="small">字段设置</el-button> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: "columnFilter", |
||||
|
props:{ |
||||
|
// 列数据 |
||||
|
columnList:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
columnCopy:null |
||||
|
}; |
||||
|
}, |
||||
|
mounted(){ |
||||
|
// this.columnCopy = JSON.parse(JSON.stringify(this.columnList)) |
||||
|
this.columnCopy = [] |
||||
|
this.columnList.forEach(item=>{ |
||||
|
let _item = Object.assign({}, item) |
||||
|
if(item.hide){ |
||||
|
_item.hide = true |
||||
|
}else{ |
||||
|
_item.hide = false |
||||
|
} |
||||
|
this.columnCopy.push(_item) |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
filterSelectClick(data){ |
||||
|
this.columnCopy.forEach(item => { |
||||
|
if(item.field == data.field){ |
||||
|
item.hide = !item.hide |
||||
|
} |
||||
|
}); |
||||
|
this.$emit("columnFliterCallback",this.columnCopy) |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scope lang="less"> |
||||
|
.columnFilterList{ |
||||
|
margin:0; |
||||
|
padding:0; |
||||
|
max-height:calc(100vh - 200px); |
||||
|
overflow:auto; |
||||
|
|
||||
|
/* 滚动条 */ |
||||
|
&::-webkit-scrollbar { |
||||
|
width: 5px; |
||||
|
height: 5px; |
||||
|
background: transparent; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
|
||||
|
/* 内层轨道，它会覆盖外层轨道的样式 */ |
||||
|
&::-webkit-scrollbar-track-piece { |
||||
|
// background-color: #f3f3f3; |
||||
|
height: 5px; |
||||
|
width: 5px; |
||||
|
margin: 0 -2px 0; |
||||
|
} |
||||
|
|
||||
|
/* 滑块 */ |
||||
|
&::-webkit-scrollbar-thumb { |
||||
|
background-color: #ccc; |
||||
|
min-height: 60px; |
||||
|
min-width: 60px; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
|
||||
|
li{ |
||||
|
display:flex; |
||||
|
padding:10px 5px; |
||||
|
cursor:pointer; |
||||
|
|
||||
|
.iconContent{ |
||||
|
width:18px; |
||||
|
height:18px; |
||||
|
border-radius:50%; |
||||
|
border:#ddd solid 1px; |
||||
|
margin-right:10px; |
||||
|
|
||||
|
&.isSelect{ |
||||
|
background:#409eff; |
||||
|
color:#fff; |
||||
|
text-align:center; |
||||
|
line-height:18px; |
||||
|
border-color:#409eff |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,219 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-button |
||||
|
@click="exportExcel" |
||||
|
size="small" |
||||
|
type="warning" |
||||
|
>导出数据</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import XLSX from "xlsx"; |
||||
|
import XLSXS from "xlsx-style"; |
||||
|
import FileSaver from "file-saver"; |
||||
|
import util from '@/utils/util' |
||||
|
export default { |
||||
|
name: "exportExcel", |
||||
|
props:{ |
||||
|
// 报表标题 |
||||
|
title:{ |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
// 报表名称 |
||||
|
reportName:{ |
||||
|
type: String, |
||||
|
default: '导出' |
||||
|
}, |
||||
|
// 导出数据 |
||||
|
excelData:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
// 列数据 |
||||
|
columnList:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
excelDataList:null,//导出数据（格式化后） |
||||
|
excelKiloNumberHeader:null,//带数字表头暂存 |
||||
|
excelPercentHeader:null,//带百分比表头暂存 |
||||
|
}; |
||||
|
}, |
||||
|
watch:{ |
||||
|
excelData(n){ |
||||
|
this.init() |
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.init() |
||||
|
}, |
||||
|
methods:{ |
||||
|
init(){ |
||||
|
this.initExcelHeader() |
||||
|
this.initExcelData() |
||||
|
}, |
||||
|
// 格式化数据（转千位符） |
||||
|
initExcelData(){ |
||||
|
this.excelDataList = [] |
||||
|
let _downloadData = [] |
||||
|
// 初始化列表数据，更改为headerName格式 |
||||
|
this.excelData.forEach(item=>{ |
||||
|
let _item = {} |
||||
|
for(let prop in item){ |
||||
|
this.columnList.forEach(cItem=>{ |
||||
|
if(cItem.field == prop){ |
||||
|
let _name = cItem.headerName || cItem.field |
||||
|
_item[_name] = item[prop] |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
_downloadData.push(_item) |
||||
|
}) |
||||
|
_downloadData.forEach((item,key)=>{ |
||||
|
let _item = JSON.parse(JSON.stringify(item)) |
||||
|
for(let field in item){ |
||||
|
if(this.excelKiloNumberHeader.indexOf(field) >= 0){ |
||||
|
_item[field] = util.numberFixedFormatter(item[field],true) |
||||
|
} |
||||
|
if(this.excelPercentHeader.indexOf(field) >= 0){ |
||||
|
_item[field] = util.numberPercentFormatter(item[field]) |
||||
|
} |
||||
|
} |
||||
|
this.excelDataList.push(_item) |
||||
|
}) |
||||
|
}, |
||||
|
// 表头类型暂存（目的：转千位符/百分比） |
||||
|
initExcelHeader(){ |
||||
|
this.excelKiloNumberHeader = [] |
||||
|
this.excelPercentHeader = [] |
||||
|
this.columnList.forEach(item=>{ |
||||
|
// 千位符暂存 |
||||
|
if(item.type == 'kiloNumber'){ |
||||
|
let _name = item.headerName || item.field |
||||
|
this.excelKiloNumberHeader.push(_name) |
||||
|
} |
||||
|
// 百分比暂存 |
||||
|
if(item.type == 'percentNumber'){ |
||||
|
this.excelPercentHeader.push(item.headerName || item.field) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
s2ab(s){ |
||||
|
var buf = new ArrayBuffer(s.length); |
||||
|
var view = new Uint8Array(buf); |
||||
|
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff; |
||||
|
return buf; |
||||
|
}, |
||||
|
exportExcel(){ |
||||
|
// 设置表头 |
||||
|
let _head = [] |
||||
|
for(let item in this.excelDataList[0]){ |
||||
|
_head.push(item) |
||||
|
} |
||||
|
|
||||
|
// 设置标题 |
||||
|
let _title = [this.title] |
||||
|
for(let i =0;i<_head.length - 1;i++){ |
||||
|
_title.push(null) |
||||
|
} |
||||
|
|
||||
|
// 设置内容 |
||||
|
let excelAllData = [ |
||||
|
_title,// 标题 |
||||
|
_head, // 表头 |
||||
|
] |
||||
|
|
||||
|
// 需要导出的数据 |
||||
|
this.excelDataList.forEach((item,key)=>{ |
||||
|
let _row = [] |
||||
|
_head.forEach(head_item=>{ |
||||
|
_row.push(item[head_item]) |
||||
|
}) |
||||
|
excelAllData.push(_row) |
||||
|
}) |
||||
|
|
||||
|
// 导出的excel文件名 |
||||
|
const filename = this.reportName+".xlsx"; |
||||
|
|
||||
|
// Excel第一个sheet的名称 |
||||
|
const ws_name = "Sheet1"; |
||||
|
const wb = XLSX.utils.book_new(); |
||||
|
const ws = XLSX.utils.aoa_to_sheet(excelAllData); |
||||
|
XLSX.utils.book_append_sheet(wb, ws, ws_name); // 将数据添加到工作薄 |
||||
|
|
||||
|
// 设置标题行单元格合并 |
||||
|
// s即start, e即end, r即row, c即column |
||||
|
// 合并从--0行0列开始,到0行3列 |
||||
|
ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: _head.length - 1 } }]; |
||||
|
|
||||
|
// 设置单元格宽度 |
||||
|
ws["!cols"] = [] |
||||
|
for(let i =0;i<_head.length;i++){ |
||||
|
ws["!cols"].push({wpx:150}) |
||||
|
} |
||||
|
|
||||
|
// 设置单元格其他样式 可以遍历全部单元格,进行样式设置 |
||||
|
for (let i in ws) { |
||||
|
// 标题居中 |
||||
|
if(i == "A1"){ |
||||
|
ws[i].s = { |
||||
|
alignment: { |
||||
|
horizontal: "center", |
||||
|
vertical: "center", |
||||
|
wrapText: true, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
// if (i === "B2") { |
||||
|
// ws[i].s = { |
||||
|
// // 字体 |
||||
|
// font: { |
||||
|
// name: "仿宋", |
||||
|
// sz: 14, |
||||
|
// bold: true, |
||||
|
// }, |
||||
|
// }; |
||||
|
// } else if (i === "B3") { |
||||
|
// ws[i].s = { |
||||
|
// // 单元格边框 |
||||
|
// border: { |
||||
|
// top: { |
||||
|
// style: "thin", |
||||
|
// }, |
||||
|
// bottom: { |
||||
|
// style: "thin", |
||||
|
// }, |
||||
|
// left: { |
||||
|
// style: "thin", |
||||
|
// }, |
||||
|
// right: { |
||||
|
// style: "thin", |
||||
|
// }, |
||||
|
// }, |
||||
|
// }; |
||||
|
// } |
||||
|
} |
||||
|
|
||||
|
// 导出Excel, 注意这里用到的是XLSXS对象 |
||||
|
let wbout = XLSXS.write(wb, { |
||||
|
bookType: "xlsx", |
||||
|
bookSST: false, |
||||
|
type: "binary", |
||||
|
}); |
||||
|
let _this = this |
||||
|
FileSaver.saveAs( |
||||
|
new Blob([_this.s2ab(wbout)], { |
||||
|
type: "application/octet-stream", |
||||
|
}), |
||||
|
filename |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style> |
||||
|
</style> |
||||
@ -0,0 +1,127 @@ |
|||||
|
<template> |
||||
|
<div style="height:100%" class="reportPageTable" v-loading="pageLoading"> |
||||
|
<reportPageHeader |
||||
|
:columnList="columnList" |
||||
|
:downloadData="tableData" |
||||
|
@columnFliterCallback="columnFliterCallback" |
||||
|
:searchConfig="searchConfig" |
||||
|
:searchForm="searchForm" |
||||
|
:reportName="reportName" |
||||
|
@headerSearchHandle="headerSearchHandle" |
||||
|
:showReportTitle="showReportTitle" |
||||
|
></reportPageHeader> |
||||
|
<AgTable |
||||
|
ref="AgTable_Ref" |
||||
|
:columnDefs="columnList" |
||||
|
:BottomFixedItem="BottomFixedItem" |
||||
|
:averageFixedItem="averageFixedItem" |
||||
|
></AgTable> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {getReportPageList} from '@/api/api' |
||||
|
import reportPageHeader from "@/components/reportPageHeader/index" |
||||
|
import AgTable from "@/components/AgTable/index" |
||||
|
import util from '@/utils/util' |
||||
|
|
||||
|
export default { |
||||
|
name: "reportPage", |
||||
|
components: { |
||||
|
AgTable, |
||||
|
reportPageHeader, |
||||
|
}, |
||||
|
props:{ |
||||
|
// 是否显示报表表头 |
||||
|
showReportTitle:{ |
||||
|
type:Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 列数据 |
||||
|
columnList:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
// 搜索条件配置 |
||||
|
searchConfig:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
// 搜索值 |
||||
|
searchForm:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
// 底部汇总配置 |
||||
|
BottomFixedItem:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
// 底部汇总配置-平均值 |
||||
|
averageFixedItem:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
// 报表名称 |
||||
|
reportName:{ |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 方法名称 |
||||
|
procName:{ |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 是否为特殊的表格数据 |
||||
|
isSpecialData:{ |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
// 导出数据 |
||||
|
tableData:[], |
||||
|
pageLoading:false |
||||
|
}; |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.getList() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 字段设置点击事件 |
||||
|
columnFliterCallback(data){ |
||||
|
this.$refs.AgTable_Ref.gridApi.setColumnDefs(data) |
||||
|
}, |
||||
|
// 获取数据 |
||||
|
getList(){ |
||||
|
// 特殊的表格数据，不走procName的接口数据 |
||||
|
if(this.isSpecialData){return} |
||||
|
this.pageLoading = true |
||||
|
getReportPageList(this.procName,this.searchForm) |
||||
|
.then(res=>{ |
||||
|
this.updateTableData(res) |
||||
|
this.updateDownloadData(res) |
||||
|
this.pageLoading = false |
||||
|
}) |
||||
|
.catch(err=>{ |
||||
|
this.updateTableData([]) |
||||
|
this.updateDownloadData([]) |
||||
|
this.pageLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 查询事件 |
||||
|
headerSearchHandle(data){ |
||||
|
this.getList() |
||||
|
}, |
||||
|
// 更新表格数据 |
||||
|
updateTableData(data){ |
||||
|
this.$refs.AgTable_Ref.updateTableData(data) |
||||
|
}, |
||||
|
// 更新导出数据 |
||||
|
updateDownloadData(data){ |
||||
|
this.tableData = data |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,219 @@ |
|||||
|
<template> |
||||
|
<div class="reportPageHeader"> |
||||
|
<!-- 报表名称 --> |
||||
|
<div class="reportTitle" v-if="showReportTitle">{{reportName}}</div> |
||||
|
<!-- 搜索条件及按钮 --> |
||||
|
<div class="FormHeader"> |
||||
|
<!-- 左侧查询 --> |
||||
|
<div class="headerLeftSearch"> |
||||
|
<el-form |
||||
|
v-if="searchConfig && searchConfig.length > 0" |
||||
|
:inline="true" |
||||
|
:model="searchForm" |
||||
|
:rules="searchRules" |
||||
|
size="small" |
||||
|
> |
||||
|
<el-form-item |
||||
|
v-for="(item,index) in searchConfig" |
||||
|
:label="item.label" |
||||
|
:key="index" |
||||
|
:prop="item.prop" |
||||
|
> |
||||
|
<!-- 输入框 --> |
||||
|
<el-input |
||||
|
v-if="item.type == 'input'" |
||||
|
v-model="searchForm[item.prop]" |
||||
|
:placeholder="'请输入'+item.label" |
||||
|
:clearable="!item.noClear" |
||||
|
></el-input> |
||||
|
<!-- 下拉 --> |
||||
|
<el-select |
||||
|
v-if="item.type == 'select'" |
||||
|
v-model="searchForm[item.prop]" |
||||
|
filterable |
||||
|
:placeholder="'请选择'+item.label" |
||||
|
:clearable="!item.noClear" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="op in item.options" |
||||
|
:key="op[item.opV] || op.value" |
||||
|
:label="op[item.opL] || op.label" |
||||
|
:value="op[item.opV] || op.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
<!-- 日期 --> |
||||
|
<el-date-picker |
||||
|
v-if="item.type == 'date'" |
||||
|
:clearable="!item.noClear" |
||||
|
v-model="searchForm[item.prop]" |
||||
|
type="date" |
||||
|
placeholder="选择日期" |
||||
|
value-format="yyyyMMdd" |
||||
|
></el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="searchHandle">查询</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<!-- 右侧按钮 --> |
||||
|
<div class="headerRightBtn"> |
||||
|
<exportExcel |
||||
|
v-if="downloadData && downloadData.length > 0" |
||||
|
class="output-excel" |
||||
|
:reportName="reportName" |
||||
|
:excelData="downloadData" |
||||
|
:columnList="columnList" |
||||
|
:title="downloadExcelTitle()" |
||||
|
></exportExcel> |
||||
|
<columnFilter |
||||
|
:columnList="columnList" |
||||
|
@columnFliterCallback="columnFliterCallback" |
||||
|
></columnFilter> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import columnFilter from "@/components/columnFilter/index" |
||||
|
import exportExcel from "@/components/exportExcel/index" |
||||
|
import { |
||||
|
getItemCodeList, |
||||
|
} from '@/api/api' |
||||
|
export default { |
||||
|
name: "reportPageHeader", |
||||
|
props:{ |
||||
|
// 是否显示报表表头 |
||||
|
showReportTitle:{ |
||||
|
type:Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 列数据 |
||||
|
columnList:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
// 报表名称 |
||||
|
reportName:{ |
||||
|
type: String, |
||||
|
default: '导出' |
||||
|
}, |
||||
|
// 查询条件 |
||||
|
searchConfig:{ |
||||
|
type: Array, |
||||
|
default:null |
||||
|
}, |
||||
|
// 查询条件必填项 |
||||
|
searchRules:{ |
||||
|
type: Object, |
||||
|
default:null |
||||
|
}, |
||||
|
// 搜索值 |
||||
|
searchForm:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
// 导出数据 |
||||
|
downloadData:{ |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
}, |
||||
|
components: { |
||||
|
columnFilter, |
||||
|
exportExcel |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
}; |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.initSearchConfig() |
||||
|
}, |
||||
|
methods: { |
||||
|
initSearchConfig(){ |
||||
|
if(!this.searchConfig){return} |
||||
|
this.searchConfig.forEach(item=>{ |
||||
|
item.options = [] |
||||
|
if(item.type == 'select' && item.optionsProc){ |
||||
|
// 物料 |
||||
|
// if(item.optionsProc == 'itemCode'){ |
||||
|
// getItemCodeList().then(res=>{ |
||||
|
// item.options = res |
||||
|
// item.opL="ItemCode" |
||||
|
// item.opV="ItemCode" |
||||
|
// }) |
||||
|
// } |
||||
|
// //存储时效控制报表-是否超过时效 |
||||
|
// if(item.optionsProc == 'isExceedThreshold'){ |
||||
|
// item.options = [ |
||||
|
// {label:'是',value:'是'}, |
||||
|
// {label:'否',value:'否'}, |
||||
|
// {label:'全部',value:'全部'}, |
||||
|
// ] |
||||
|
// item.opL='label' |
||||
|
// item.opV="value" |
||||
|
// } |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 字段设置点击事件 |
||||
|
columnFliterCallback(data){ |
||||
|
this.$emit("columnFliterCallback",data) |
||||
|
}, |
||||
|
// 表头查询事件 |
||||
|
searchHandle(){ |
||||
|
this.$emit("headerSearchHandle",this.searchForm) |
||||
|
}, |
||||
|
downloadExcelTitle(){ |
||||
|
let _title = this.reportName |
||||
|
if(this.searchForm){ |
||||
|
let _begin = this.searchForm.beginDate ? this.searchForm.beginDate.slice(0,10) : '--' |
||||
|
let _end = this.searchForm.endDate ? this.searchForm.endDate.slice(0,10) : '--' |
||||
|
if(this.searchForm.beginDate || this.searchForm.endDate){ |
||||
|
_title = `${this.reportName} (${_begin}至${_end})` |
||||
|
} |
||||
|
} |
||||
|
return _title |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scope lang="less"> |
||||
|
.reportPageHeader{ |
||||
|
// background:#2d568e; |
||||
|
background:#eaf0f6; |
||||
|
|
||||
|
|
||||
|
.FormHeader{ |
||||
|
padding:20px 20px 0; |
||||
|
display:flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.headerRightBtn{ |
||||
|
display:flex; |
||||
|
justify-content: flex-end; |
||||
|
padding-bottom:18px; |
||||
|
|
||||
|
.output-excel{ |
||||
|
margin-right:10px |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// .el-form-item__label{ |
||||
|
// color:#fff |
||||
|
// } |
||||
|
} |
||||
|
|
||||
|
.reportTitle{ |
||||
|
background:#044c93; |
||||
|
color:#fff; |
||||
|
line-height:50px; |
||||
|
text-align:center; |
||||
|
font-size:16px; |
||||
|
font-weight:bold; |
||||
|
letter-spacing:2px; |
||||
|
border-bottom: #4d709f solid 1px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
|
||||
|
import Vue from 'vue' |
||||
|
import App from './App.vue' |
||||
|
|
||||
|
import router from './router' |
||||
|
import './styles/index.css' |
||||
|
import ElementUI from 'element-ui'; |
||||
|
import 'element-ui/lib/theme-chalk/index.css'; |
||||
|
|
||||
|
import JsonExcel from 'vue-json-excel' |
||||
|
Vue.component('downloadExcel', JsonExcel) |
||||
|
|
||||
|
Vue.use(ElementUI); |
||||
|
|
||||
|
Vue.config.productionTip = false |
||||
|
|
||||
|
new Vue({ |
||||
|
router, |
||||
|
render: h => h(App) |
||||
|
}).$mount('#app') |
||||
@ -0,0 +1,48 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import VueRouter from 'vue-router' |
||||
|
import Home from '../views/Home.vue' |
||||
|
import depositSummaryReport from '../views/report/depositSummaryReport.vue' |
||||
|
import depositDetailsReport from '../views/report/depositDetailsReport.vue' |
||||
|
|
||||
|
Vue.use(VueRouter) |
||||
|
|
||||
|
const routes = [ |
||||
|
{ |
||||
|
path: '/', |
||||
|
name: 'Home', |
||||
|
component: Home, |
||||
|
meta:{ |
||||
|
title:"报表首页", |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
path: '/depositSummaryReport', |
||||
|
name: 'depositSummaryReport', |
||||
|
component: depositSummaryReport, |
||||
|
meta:{ |
||||
|
title:"缴库汇总报表", |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
path: '/depositDetailsReport', |
||||
|
name: 'depositDetailsReport', |
||||
|
component: depositDetailsReport, |
||||
|
meta:{ |
||||
|
title:"缴库明细报表", |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
const router = new VueRouter({ |
||||
|
routes |
||||
|
}) |
||||
|
|
||||
|
router.beforeEach((to, from, next) => { |
||||
|
/* 路由发生变化修改页面title */ |
||||
|
if (to.meta.title) { |
||||
|
document.title = to.meta.title |
||||
|
} |
||||
|
next() |
||||
|
}) |
||||
|
|
||||
|
export default router |
||||
@ -0,0 +1,11 @@ |
|||||
|
.clearfix { |
||||
|
zoom: 1; |
||||
|
} |
||||
|
.clearfix:after { |
||||
|
clear: both; |
||||
|
display: block; |
||||
|
visibility: hidden; |
||||
|
height: 0; |
||||
|
line-height: 0; |
||||
|
content: ''; |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
.clearfix{ |
||||
|
zoom:1 |
||||
|
} |
||||
|
.clearfix:after{ |
||||
|
clear:both; |
||||
|
display:block; |
||||
|
visibility:hidden; |
||||
|
height:0; |
||||
|
line-height:0; |
||||
|
content:''; |
||||
|
} |
||||
@ -0,0 +1,59 @@ |
|||||
|
import axiosUtil from '../utils/request' |
||||
|
|
||||
|
var getAgoDay = function (n){ |
||||
|
let date = new Date() |
||||
|
let seperator = '-' |
||||
|
let newDate = new Date(date.getTime() - n*24*60*60*1000) |
||||
|
let year = newDate.getFullYear() |
||||
|
let month = newDate.getMonth()+1 |
||||
|
let day = newDate.getDate() |
||||
|
return year.toString() + seperator + month.toString() + seperator + day.toString() |
||||
|
} |
||||
|
|
||||
|
var getnowDay = function (){ |
||||
|
let date = new Date() |
||||
|
let seperator = '-' |
||||
|
let newDate = new Date(date.getTime()) |
||||
|
let year = newDate.getFullYear() |
||||
|
let month = newDate.getMonth()+1 |
||||
|
let day = newDate.getDate() |
||||
|
return year.toString() + seperator + month.toString() + seperator + day.toString() |
||||
|
} |
||||
|
|
||||
|
var getnowTime = function (){ |
||||
|
let date = new Date() |
||||
|
let seperator = ':' |
||||
|
let newDate = new Date(date.getTime()) |
||||
|
function __formatLength(value){ |
||||
|
if(Number(value) < 10){ |
||||
|
return "0"+value |
||||
|
}else{ |
||||
|
return value |
||||
|
} |
||||
|
} |
||||
|
let hour = __formatLength(newDate.getHours()); |
||||
|
let minute = __formatLength(newDate.getMinutes()); |
||||
|
let second = __formatLength(newDate.getSeconds()); |
||||
|
return hour.toString() + seperator + minute.toString() + seperator + second.toString() |
||||
|
} |
||||
|
|
||||
|
|
||||
|
var getServerTime = function (callback){ |
||||
|
axiosUtil.ajax_get('/api/dashboard/asn-time-window/get-server-date-time').then(res => { |
||||
|
let _res = new Date(res).getTime() |
||||
|
let date = getnowDay(_res) |
||||
|
let time = getnowTime(_res) |
||||
|
let datetime = date + ' ' + time |
||||
|
if(callback)callback(date,time,datetime,_res,res) |
||||
|
localStorage.setItem('currentServerDate', date); |
||||
|
}).catch(error => { |
||||
|
console.log(error) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
getAgoDay: getAgoDay, // 获取当前天前几天
|
||||
|
getnowDay: getnowDay, // 获取当前时间 yyyy-dd-mm
|
||||
|
getnowTime: getnowTime, // 获取当前时间 hh:mm:ss
|
||||
|
getServerTime:getServerTime,// 获取服务器时间 走接口
|
||||
|
} |
||||
@ -0,0 +1,57 @@ |
|||||
|
import axios from 'axios' |
||||
|
import qs from "querystring"; |
||||
|
|
||||
|
// http request拦截器 添加一个请求拦截器
|
||||
|
axios.interceptors.request.use(function (config) { |
||||
|
// Do something before request is sent
|
||||
|
let token = localStorage.getItem('token') //window.localStorage.getItem("accessToken")
|
||||
|
if (token) { |
||||
|
config.headers.token = token; //将token放到请求头发送给服务器
|
||||
|
return config; |
||||
|
//这里经常搭配token使用，将token值配置到tokenkey中，将tokenkey放在请求头中
|
||||
|
// config.headers['accessToken'] = Token;
|
||||
|
} |
||||
|
return config |
||||
|
}, function (error) { |
||||
|
// Do something with request error
|
||||
|
return Promise.reject(error); |
||||
|
}); |
||||
|
|
||||
|
// // 添加一个响应拦截器
|
||||
|
// axios.interceptors.response.use(function (response) {
|
||||
|
// // Do something with response data
|
||||
|
// return response;
|
||||
|
// }, function (error) {
|
||||
|
// // Do something with response error
|
||||
|
// return Promise.reject(error);
|
||||
|
// });
|
||||
|
|
||||
|
//是我封装的axios.post请求方式
|
||||
|
export default class Axios { |
||||
|
static ajax_post(url, params ) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
return axios.post(url, params).then(response => { |
||||
|
resolve(response.data); |
||||
|
return response.data |
||||
|
}).catch(error => { |
||||
|
reject(error); |
||||
|
return error |
||||
|
// 异常处理
|
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
static ajax_get(url, param ) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
return axios.get(url, { |
||||
|
params: param, |
||||
|
}).then(response => { |
||||
|
resolve(response.data); |
||||
|
return response.data |
||||
|
}).catch(error => { |
||||
|
reject(error); |
||||
|
return error |
||||
|
// 异常处理
|
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,82 @@ |
|||||
|
// 窗口改变，页面刷新
|
||||
|
var addEventResizeFlesh = function(){ |
||||
|
window.addEventListener('resize',function(){ |
||||
|
window.location.reload() |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 时间查询（agTable）
|
||||
|
var dateFilterParams = { |
||||
|
comparator: (filterLocalDateAtMidnight, cellValue) => { |
||||
|
var dateAsString = cellValue; |
||||
|
if (dateAsString == null) return -1; |
||||
|
var dateParts = dateAsString.split('/'); |
||||
|
var cellDate = new Date( |
||||
|
Number(dateParts[2]), |
||||
|
Number(dateParts[1]) - 1, |
||||
|
Number(dateParts[0]) |
||||
|
); |
||||
|
if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) { |
||||
|
return 0; |
||||
|
} |
||||
|
if (cellDate < filterLocalDateAtMidnight) { |
||||
|
return -1; |
||||
|
} |
||||
|
if (cellDate > filterLocalDateAtMidnight) { |
||||
|
return 1; |
||||
|
} |
||||
|
return 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 2022-08-31T09:45:51.9340433 转 2022-08-31 09:45:51
|
||||
|
var formatTimeStrToStr = function(timeStr) { |
||||
|
if (!timeStr || !new Date(timeStr)) { |
||||
|
return '' |
||||
|
} |
||||
|
if (timeStr.lastIndexOf('.') == -1) { |
||||
|
return timeStr.replace('T',' ').substring(0,timeStr.length) |
||||
|
} |
||||
|
return timeStr.replace('T',' ').substring(0,timeStr.lastIndexOf('.')) |
||||
|
} |
||||
|
|
||||
|
// 转换数字小数点保留+千位符
|
||||
|
/** |
||||
|
* @param {*} number 数值 |
||||
|
* @param {*} isKilo 是否用千位符，默认否（选填） |
||||
|
* @param {*} fixed 保留小数位数，默认2（选填） |
||||
|
* @returns |
||||
|
*/ |
||||
|
var numberFixedFormatter = function(number,isKilo,fixed){ |
||||
|
let _fixed = fixed || 2; |
||||
|
let _res = Number(number).toFixed(_fixed) |
||||
|
if(isKilo){ |
||||
|
_res = Number(Number(number).toFixed(_fixed)).toLocaleString('en-US'); |
||||
|
} |
||||
|
return _res; |
||||
|
} |
||||
|
|
||||
|
// 转换数字百分号+小数点保留
|
||||
|
/** |
||||
|
* @param {*} number 数值 |
||||
|
* @param {*} isPercent 是否需要手动转*100，默认否（选填） |
||||
|
* @param {*} fixed 保留小数位数，默认2（选填） |
||||
|
* @returns |
||||
|
*/ |
||||
|
var numberPercentFormatter = function(number,isPercent,fixed){ |
||||
|
let _fixed = fixed || 2; |
||||
|
let _res = Number(number).toFixed(_fixed) + ' %' |
||||
|
if(isPercent){ |
||||
|
_res = Number(Number(number)*100).toFixed(_fixed) + ' %' |
||||
|
} |
||||
|
return _res; |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
waitTime:20000,//滚屏列表刷新等待间隔配置项
|
||||
|
addEventResizeFlesh:addEventResizeFlesh, |
||||
|
dateFilterParams:dateFilterParams, |
||||
|
numberFixedFormatter, |
||||
|
numberPercentFormatter, |
||||
|
formatTimeStrToStr |
||||
|
} |
||||
@ -0,0 +1,38 @@ |
|||||
|
<template> |
||||
|
<div class="menuList"> |
||||
|
<div |
||||
|
class="menuItem" |
||||
|
v-for="(item,index) in menuList" |
||||
|
:key="index" |
||||
|
@click="goPage(item.path)" |
||||
|
>{{item.meta.title || item.name}}</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: "home", |
||||
|
data () { |
||||
|
return { |
||||
|
menuList:"" |
||||
|
}; |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.menuList = this.$router.options.routes |
||||
|
}, |
||||
|
methods: { |
||||
|
goPage(url){ |
||||
|
this.$router.push(url) |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
.menuList{ |
||||
|
padding:20px; |
||||
|
.menuItem{ |
||||
|
cursor: pointer; |
||||
|
padding:10px; |
||||
|
border-bottom:#e8e8e8 solid 1px |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,44 @@ |
|||||
|
<template> |
||||
|
<reportPage |
||||
|
:columnList="columnDefs" |
||||
|
:searchConfig="searchConfig" |
||||
|
:searchForm="searchForm" |
||||
|
:BottomFixedItem="BottomFixedItem" |
||||
|
:reportName="'缴库明细报表'" |
||||
|
:procName="'Bin_缴库明细对照'" |
||||
|
></reportPage> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import reportPage from "@/components/reportPage/index" |
||||
|
import util from '@/utils/util' |
||||
|
|
||||
|
export default { |
||||
|
name: "depositDetailsReport", |
||||
|
components: { |
||||
|
reportPage |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
columnDefs: [ |
||||
|
{ field: '零件号', cellClass:"centerAlign", filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: '条码', cellClass:"centerAlign", filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: '库位', cellClass:"centerAlign", filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: 'memo', cellClass:"centerAlign", filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: 'WMS数量', type:"kiloNumber", cellClass:"rightAlign", valueFormatter: ((data)=>{return util.numberFixedFormatter(data.value,true)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: 'MES数量', type:"kiloNumber", cellClass:"rightAlign", valueFormatter: ((data)=>{return util.numberFixedFormatter(data.value,true)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: '差', type:"kiloNumber", cellClass:"rightAlign", valueFormatter: ((data)=>{return util.numberFixedFormatter(data.value,true)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
], |
||||
|
searchConfig:[ |
||||
|
{type:'date',prop:'starttime',label:'起始'}, |
||||
|
{type:'date',prop:'endtime',label:'截止'}, |
||||
|
], |
||||
|
searchForm:{ |
||||
|
starttime:"", |
||||
|
endtime:'', |
||||
|
}, |
||||
|
BottomFixedItem:['MES数量','差','WMS数量'], |
||||
|
}; |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,48 @@ |
|||||
|
<template> |
||||
|
<reportPage |
||||
|
:columnList="columnDefs" |
||||
|
:searchConfig="searchConfig" |
||||
|
:searchForm="searchForm" |
||||
|
:BottomFixedItem="BottomFixedItem" |
||||
|
:reportName="'缴库汇总报表'" |
||||
|
:procName="'Bin_缴库汇总对照'" |
||||
|
></reportPage> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import reportPage from "@/components/reportPage/index" |
||||
|
import util from '@/utils/util' |
||||
|
|
||||
|
export default { |
||||
|
name: "depositSummaryReport", |
||||
|
components: { |
||||
|
reportPage |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
columnDefs: [ |
||||
|
{ field: '零件号', cellClass:"centerAlign", filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: '库位', cellClass:"centerAlign", filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: 'mes最后一条时间', filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: 'wms最后一条时间', filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: 'tyrp最后一条时间', filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: 'mes数量', type:"kiloNumber", cellClass:"rightAlign", valueFormatter: ((data)=>{return util.numberFixedFormatter(data.value,true)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: 'wms数量', type:"kiloNumber", cellClass:"rightAlign", valueFormatter: ((data)=>{return util.numberFixedFormatter(data.value,true)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: 'tyrp数量', type:"kiloNumber", cellClass:"rightAlign", valueFormatter: ((data)=>{return util.numberFixedFormatter(data.value,true)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: 'mes和wms差', type:"kiloNumber", cellClass:"rightAlign", valueFormatter: ((data)=>{return util.numberFixedFormatter(data.value,true)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: 'wms和tyrp差', filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
{ field: 'mes和tyrp差', filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } }, |
||||
|
], |
||||
|
searchConfig:[ |
||||
|
{type:'date',prop:'starttime',label:'起始'}, |
||||
|
{type:'date',prop:'endtime',label:'截止'}, |
||||
|
], |
||||
|
searchForm:{ |
||||
|
starttime:"", |
||||
|
endtime:'', |
||||
|
}, |
||||
|
BottomFixedItem:['mes数量','mes和wms差','tyrp数量','wms数量'], |
||||
|
}; |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,101 @@ |
|||||
|
/** |
||||
|
* 配置参考: https://cli.vuejs.org/zh/config/
|
||||
|
*/ |
||||
|
|
||||
|
var webpack = require('webpack'); |
||||
|
const path = require('path') |
||||
|
const pxtovw = require('postcss-px-to-viewport'); |
||||
|
function resolve(dir) { |
||||
|
return path.join(__dirname, dir) |
||||
|
} |
||||
|
|
||||
|
module.exports = { |
||||
|
publicPath: process.env.NODE_ENV === 'production' ? './' : '/', |
||||
|
chainWebpack: config => { |
||||
|
const svgRule = config.module.rule('svg') |
||||
|
svgRule.uses.clear() |
||||
|
svgRule |
||||
|
.test(/\.svg$/) |
||||
|
.use('svg-sprite-loader') |
||||
|
.loader('svg-sprite-loader') |
||||
|
|
||||
|
// svg图标加载
|
||||
|
config.module |
||||
|
.rule('svg') |
||||
|
.exclude.add(resolve('src/assets/svg/icons')) |
||||
|
.end() |
||||
|
|
||||
|
config.module |
||||
|
.rule('icons')// 定义一个名叫 icons 的规则
|
||||
|
.test(/\.svg$/)// 设置 icons 的匹配正则
|
||||
|
.include.add(resolve('src/assets/svg/icons'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则
|
||||
|
.end() |
||||
|
.use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置
|
||||
|
.loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader
|
||||
|
.options({// 该 svg-sprite-loader 的配置
|
||||
|
symbolId:'icon-[name]' |
||||
|
}) |
||||
|
.end() |
||||
|
}, |
||||
|
|
||||
|
configureWebpack: { |
||||
|
resolve: { |
||||
|
alias: { |
||||
|
'@': resolve('src') |
||||
|
} |
||||
|
}, |
||||
|
plugins: [], |
||||
|
}, |
||||
|
// eslint : false,
|
||||
|
// 默认打开eslint效验，如果需要关闭，设置成false即可
|
||||
|
lintOnSave: false, |
||||
|
productionSourceMap: false, |
||||
|
devServer: { |
||||
|
open: true, |
||||
|
port: 8082, |
||||
|
https: false, |
||||
|
hotOnly: false, |
||||
|
overlay: { |
||||
|
errors: true, |
||||
|
warnings: true |
||||
|
}, |
||||
|
// proxy: {
|
||||
|
// '/asn': {
|
||||
|
// target: 'http://192.168.0.67:8081',
|
||||
|
// changeOrigin: true,
|
||||
|
// // logLevel: 'debug',
|
||||
|
// pathRewrite: {
|
||||
|
// '^/asn': ''
|
||||
|
// }
|
||||
|
// }
|
||||
|
// }
|
||||
|
}, |
||||
|
// css: {
|
||||
|
// loaderOptions: {
|
||||
|
// sass: {
|
||||
|
// //给sass-loader传递选项
|
||||
|
// },
|
||||
|
// css: {
|
||||
|
// //给css-loader传递选项
|
||||
|
// },
|
||||
|
// postcss: {
|
||||
|
// //给postcss-loader传递选项
|
||||
|
// plugins: [
|
||||
|
// new pxtovw({
|
||||
|
// unitToConvert: 'px', //需要转换的单位，默认为"px"；
|
||||
|
// viewportWidth: 375, //设计稿的视口宽度
|
||||
|
// unitPrecision: 5, //单位转换后保留的小数位数
|
||||
|
// propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
|
||||
|
// viewportUnit: 'vw', //转换后的视口单位
|
||||
|
// fontViewportUnit: 'vw', //转换后字体使用的视口单位
|
||||
|
// selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
|
||||
|
// minPixelValue: 1, //设置最小的转换数值
|
||||
|
// mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
|
||||
|
// replace: true, //是否直接更换属性值，而不添加备用属性
|
||||
|
// exclude: [/node_modules/] //忽略某些文件夹下的文件
|
||||
|
// })
|
||||
|
// ]
|
||||
|
// }
|
||||
|
// }
|
||||
|
// }
|
||||
|
} |
||||
Loading…
Reference in new issue