155 lines
3.3 KiB
Vue
155 lines
3.3 KiB
Vue
<!--/*
|
||
* @Author: zwq
|
||
* @Date: 2020-12-29 15:41:11
|
||
* @LastEditTime: 2022-04-15
|
||
* @LastEditors: juzi
|
||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||
*/
|
||
-->
|
||
<template>
|
||
<div class="app-container">
|
||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||
<div style="text-align:right">
|
||
<span>合计： 265395</span>
|
||
</div>
|
||
<base-table
|
||
:page="listQuery.current"
|
||
:limit="listQuery.size"
|
||
:height="tableH"
|
||
:table-config="tableProps"
|
||
:table-data="list"
|
||
/>
|
||
<pagination
|
||
v-show="total > 0"
|
||
:total="total"
|
||
:page.sync="listQuery.current"
|
||
:limit.sync="listQuery.size"
|
||
@pagination="getList()"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import HeadForm from '@/components/basicData/HeadForm'
|
||
import BaseTable from '@/components/BaseTable'
|
||
import Pagination from '@/components/Pagination'
|
||
import { tableHeight } from '@/utils/index'
|
||
import { getOutboundNoList, getProductSpecList, getMaterialCodeList } from '@/utils/wmsDic'
|
||
import moment from 'moment'
|
||
const tableProps = [
|
||
{
|
||
prop: 'orderCode',
|
||
label: '单号'
|
||
},
|
||
{
|
||
prop: 'type',
|
||
label: '类型'
|
||
},
|
||
{
|
||
prop: 'productName',
|
||
label: '品名'
|
||
},
|
||
{
|
||
prop: 'spec',
|
||
label: '规格'
|
||
},
|
||
{
|
||
prop: 'materialCode',
|
||
label: '物料编码'
|
||
},
|
||
{
|
||
prop: 'num',
|
||
label: '数量'
|
||
},
|
||
{
|
||
prop: 'time',
|
||
label: '时间'
|
||
}
|
||
]
|
||
export default {
|
||
name: 'OutStoreReport',
|
||
components: { HeadForm, BaseTable, Pagination },
|
||
data() {
|
||
return {
|
||
headFormConfig: [
|
||
{
|
||
type: 'input',
|
||
label: '关键字',
|
||
placeholder: '单号,品名,物料编码',
|
||
param: 'name',
|
||
width: 300
|
||
},
|
||
{
|
||
type: 'datePicker',
|
||
label: '时间范围',
|
||
dateType: 'daterange',
|
||
format: 'yyyy-MM-dd',
|
||
valueFormat: 'yyyy-MM-dd',
|
||
rangeSeparator: '-',
|
||
startPlaceholder: '开始时间',
|
||
endPlaceholder: '结束时间',
|
||
param: 'searchTime'
|
||
},
|
||
{
|
||
type: 'button',
|
||
btnName: 'btn.search',
|
||
name: 'search',
|
||
color: 'primary'
|
||
}
|
||
],
|
||
listQuery: {
|
||
current: 1,
|
||
size: 20
|
||
},
|
||
tableH: tableHeight(295),
|
||
tableProps,
|
||
list: [],
|
||
listLoading: false,
|
||
total: 0,
|
||
showTitle: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
window.addEventListener('resize', () => {
|
||
this.tableH = tableHeight(295)
|
||
})
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
getList() {
|
||
const temp = []
|
||
const num = 20
|
||
for (let i = 0; i < num; i++) {
|
||
const obj = {}
|
||
obj.orderCode = getOutboundNoList()
|
||
obj.type = ''
|
||
obj.productName = ''
|
||
const sj = Math.floor(Math.random() * 5)
|
||
obj.spec = getProductSpecList()
|
||
obj.materialCode = getMaterialCodeList()
|
||
obj.time = moment().subtract(sj, 'days').subtract(sj, 'hour').subtract(sj, 'minutes').subtract(sj, 'seconds').format('YYYY-MM-DD hh:mm:ss')
|
||
obj.num = Math.floor(Math.random() * 2000 + 200)
|
||
temp.push(obj)
|
||
}
|
||
this.list = temp
|
||
this.total = num
|
||
},
|
||
btnClick(val) {
|
||
console.log(val)
|
||
this.getList()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.edit-input {
|
||
padding-right: 100px;
|
||
}
|
||
.cancel-btn {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 10px;
|
||
}
|
||
</style>
|