<template>
|
<el-container>
|
<el-header class="m-header" style="height: auto">
|
<el-row :gutter="10">
|
<el-col :span="6">
|
<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">
|
<el-table :data="tableData" style="width: 100%" height="620" border show-summary sum-text=" "
|
empty-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="name" label="库存组织" width="150"/>
|
<el-table-column prop="wlNumber" label="物料编码" width="150"/>
|
<el-table-column prop="state" label="物料名称" width="120"/>
|
<el-table-column prop="city" label="产地" width="120"/>
|
<el-table-column prop="kcNumber" label="库存编号" width="150"/>
|
<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="zip" label="库位" width="120"/>
|
<el-table-column prop="zip" label="积压库存" width="120"/>
|
<el-table-column prop="zip" label="备注" width="120"/>
|
|
|
</el-table>
|
</el-main>
|
</el-container>
|
</template>
|
|
|
<script setup>
|
|
import {ref} from 'vue'
|
import dayjs from 'dayjs'
|
|
const now = new Date()
|
|
const tableData = ref([
|
|
])
|
|
const autoAddRow = () => {
|
for (let i = 0; i < 10; i++) {
|
const randomKCInt = Math.floor(Math.random() * 9999) + 10000;
|
const randomInt = Math.floor(Math.random() * 999) + 1000;
|
const randomZZInt = Math.floor(Math.random() * 99) + 100;
|
const randomSumInt = Math.floor(Math.random() * 99) + 10;
|
const kcThick = i % 3 === 0 ? 5 : i % 4 === 0 ? 6 : i % 5 === 0 ? 8 : 10;
|
now.setDate(now.getDate() + 1)
|
tableData.value.push({
|
date: dayjs(now).format('YYYY-MM-DD'),
|
name: '物料组织' + randomZZInt,
|
state: '物料' + randomSumInt,
|
city: '产地' + (randomSumInt * 6),
|
address: 'No. 189, Grove St, Los Angeles',
|
zip: 'CA 90036',
|
number: 666 + 66 * i,
|
width: '3660',
|
height: '2440',
|
rIndex: tableData.value.length + 1,
|
wlNumber: 'NGWL1000' + randomInt,
|
kcNumber: 'NGKC100' + randomKCInt,
|
thick: kcThick
|
})
|
}
|
}
|
|
</script>
|
|
|
<style scoped>
|
.el-row {
|
margin-bottom: 20px;
|
}
|
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
|
.el-col {
|
border-radius: 4px;
|
}
|
|
.m-header {
|
height: 32px;
|
}
|
|
#main {
|
width: 100%;
|
height: 100%;
|
}
|
|
#div-title {
|
height: 5%;
|
width: 100%;
|
padding-left: 20px;
|
}
|
|
#main-body {
|
width: 100%;
|
height: 64%;
|
margin-top: 1%;
|
}
|
</style>
|
