<template>
|
<el-container>
|
<el-header class="m-header" style="height: auto">
|
<el-row :gutter="10" style="margin-bottom: 5px">
|
|
<el-col :span="7">
|
<el-date-picker
|
v-model="datevalue"
|
type="daterange"
|
unlink-panels
|
range-separator="到"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:shortcuts="shortcuts"
|
:size="size"
|
format="YYYY/MM/DD"
|
value-format="YYYY-MM-DD"
|
/>
|
|
</el-col>
|
|
<el-col :span="2">
|
<el-button
|
id="select"
|
type="primary"
|
:icon="Search"
|
@click="autoAddRow">查询
|
</el-button>
|
</el-col>
|
</el-row>
|
|
</el-header>
|
<el-main style="padding-top: 5px">
|
<div @scroll="handleTableScroll">
|
|
<el-table :data="tableData" empty-text="暂无数据" style="width: 100%" max-height="550px" border
|
show-summary
|
sum-text=" ">
|
<el-table-column fixed="left" prop="rIndex" label="" width="50" align="center"></el-table-column>
|
|
<el-table-column fixed="left" label="操作" width="120">
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
size="small"
|
@click.prevent="deleteRow(scope.$index)"
|
>
|
编辑
|
</el-button>
|
<el-button
|
link
|
type="primary"
|
size="small"
|
@click.prevent="deleteRow(scope.$index)"
|
>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
|
|
<el-table-column prop="ordernumber" label="采购单号" width="150"/>
|
<el-table-column prop="name" label="供应商" width="120"/>
|
<el-table-column prop="strockNumber" label="物料编号" width="200"/>
|
<el-table-column prop="city" label="物料名称" width="120"/>
|
<el-table-column prop="width" sortable label="宽度" width="120"/>
|
<el-table-column prop="height" sortable label="高度" width="120"/>
|
<el-table-column prop="thick" sortable label="厚度" width="120"/>
|
<el-table-column prop="zip" label="型号" width="120"/>
|
<el-table-column prop="number" label="单位" width="120"/>
|
<el-table-column prop="number" sortable label="不含税单价" width="120"/>
|
<el-table-column prop="number" label="数量" width="120" show-summary="ture"/>
|
<el-table-column prop="number" label="已采购数量" width="120"/>
|
<el-table-column prop="zip" sortable label="金额" width="120"/>
|
<el-table-column prop="zip" label="不含税金额" width="120"/>
|
<el-table-column prop="date" label="税率" width="120"/>
|
<el-table-column prop="date" label="库存" width="120"/>
|
<el-table-column prop="zip" label="周用量" width="120"/>
|
<el-table-column prop="zip" label="月用量" width="120"/>
|
<el-table-column prop="state" label="单据状态" width="120"/>
|
<el-table-column prop="ordernumber" label="销售单号" width="200"/>
|
<el-table-column prop="date" label="制单日期" width="120"/>
|
<el-table-column prop="zip" label="制单人" width="120"/>
|
<el-table-column prop="zip" label="采购部门" width="120"/>
|
<el-table-column prop="zip" label="采购组织" width="120"/>
|
<el-table-column prop="zip" label="备注" width="200"/>
|
|
|
</el-table>
|
|
|
</div>
|
</el-main>
|
</el-container>
|
</template>
|
|
|
<script setup>
|
|
import {nextTick, ref} from 'vue'
|
import {Search} from "@element-plus/icons-vue";
|
|
const s_wuliaomingcheng = ref('')
|
const s_buyOrderNumber = ref('')
|
const s_width = ref('')
|
const s_height = ref('')
|
const s_thick = ref('')
|
|
|
const options = [
|
{
|
value: '0',
|
label: '全部'
|
},
|
{
|
value: '1',
|
label: '原片'
|
},
|
{
|
value: '2',
|
label: '化学品'
|
},
|
{
|
value: '3',
|
label: '工具'
|
},
|
{
|
value: '4',
|
label: '木箱'
|
},
|
{
|
value: '5',
|
label: '白玻'
|
},
|
]
|
|
const buyerOptions = [
|
{
|
value: '0',
|
label: '全部'
|
},
|
{
|
value: '1',
|
label: '采购甲'
|
},
|
{
|
value: '2',
|
label: '采购乙'
|
},
|
]
|
|
const stateOptions = [
|
{
|
value: '0',
|
label: '待审核'
|
},
|
{
|
value: '1',
|
label: '待采购'
|
},
|
{
|
value: '2',
|
label: '已采购'
|
},
|
]
|
|
import dayjs from 'dayjs'
|
import 'dayjs/locale/zh-cn'
|
|
const now = new Date()
|
|
const tableData = ref([])
|
|
const autoAddRow = () => {
|
for (let i = 0; i < 10; i++) {
|
now.setDate(now.getDate() + 1)
|
const randomInt = Math.floor(Math.random() * 999) + 1000;
|
const randomOrderInt = Math.floor(Math.random() * 99) + 100;
|
const randomSumInt = Math.floor(Math.random() * 99) + 10;
|
var t = i % 2 === 0 ? 5 : 6;
|
var s = i % 3 === 0 ? '' : i % 4 === 0 ? '已采购' : '待审核';
|
var oNo = 'NGNO100000' + randomOrderInt;//订单编号
|
var wlNo = 'NGWL100000' + randomInt
|
tableData.value.push({
|
|
date: dayjs(now).format('YYYY-MM-DD'),
|
name: '供应商' + randomSumInt,
|
state: s,
|
city: 'Los Angeles',
|
address: 'No. 189, Grove St, Los Angeles',
|
zip: 'CA 90036',
|
number: randomInt,
|
width: '3660',
|
height: '2440',
|
rIndex: tableData.value.length + 1,
|
ordernumber: oNo,
|
strockNumber: wlNo,
|
thick: t
|
})
|
}
|
}
|
|
const datevalue = ref('')
|
|
const shortcuts = [
|
{
|
text: '近一周',
|
value: () => {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
return [start, end]
|
},
|
},
|
{
|
text: '近一个月',
|
value: () => {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
return [start, end]
|
},
|
},
|
{
|
text: '近三个月',
|
value: () => {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
return [start, end]
|
},
|
},
|
]
|
|
</script>
|
|
|
<style scoped>
|
.el-row {
|
margin-bottom: 20px;
|
}
|
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
|
.el-col {
|
border-radius: 4px;
|
}
|
|
.m-header {
|
height: 32px;
|
}
|
</style>
|
