97 lines
3.3 KiB
Vue
97 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import type { ColumnsType } from 'ant-design-vue/es/table/interface';
|
|
import { message } from 'ant-design-vue';
|
|
|
|
interface MaterialTableItem {
|
|
key: string;
|
|
materialCode: string;
|
|
materialName: string;
|
|
num: number;
|
|
unit: string;
|
|
[key: string]: any;
|
|
}
|
|
|
|
const materialColumns = [
|
|
{ title: '序号', dataIndex: 'index', key: 'index', align: 'center', width: 80 },
|
|
{ title: '物料编码', dataIndex: 'materialCode', key: 'materialCode', align: 'center' },
|
|
{ title: '物料名称', dataIndex: 'materialName', key: 'materialName', align: 'center' },
|
|
{ title: '数量', dataIndex: 'num', key: 'num', align: 'center' },
|
|
{ title: '单位', dataIndex: 'unit', key: 'unit', align: 'center' },
|
|
{ title: '操作', key: 'action', align: 'center' },
|
|
]
|
|
|
|
// 材料表格
|
|
const materialTableData = ref<MaterialTableItem[]>([
|
|
{ key: '1', materialCode: '123', materialName: '物料1', num: 10, unit: '片' },
|
|
{ key: '2', materialCode: '123', materialName: '物料1', num: 10, unit: '片' },
|
|
{ key: '3', materialCode: '123', materialName: '物料1', num: 10, unit: '片' },
|
|
{ key: '4', materialCode: '123', materialName: '物料1', num: 10, unit: '片' },
|
|
{ key: '5', materialCode: '123', materialName: '物料1', num: 10, unit: '片' },
|
|
{ key: '6', materialCode: '123', materialName: '物料1', num: 10, unit: '片' },
|
|
{ key: '7', materialCode: '123', materialName: '物料1', num: 10, unit: '片' },
|
|
{ key: '8', materialCode: '123', materialName: '物料1', num: 10, unit: '片' },
|
|
{ key: '9', materialCode: '123', materialName: '物料1', num: 10, unit: '片' },
|
|
{ key: '10', materialCode: '123', materialName: '物料1', num: 10, unit: '片' },
|
|
{ key: '11', materialCode: '123', materialName: '物料1', num: 10, unit: '片' },
|
|
{ key: '12', materialCode: '123', materialName: '物料1', num: 10, unit: '片' },
|
|
]);
|
|
|
|
// 确认材料
|
|
const handleSubmitMaterial = (index: number) => {
|
|
message.success(`${ index + 1 } 号进站`)
|
|
}
|
|
|
|
// 计算表格高度
|
|
const customTable = ref<HTMLElement | null>(null)
|
|
const tableHeight = ref(200)
|
|
const renderTableHeight = () => {
|
|
if (customTable.value) {
|
|
tableHeight.value = customTable.value.clientHeight - 60
|
|
console.log('元素高度：', tableHeight.value)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
renderTableHeight()
|
|
})
|
|
|
|
defineExpose({
|
|
renderTableHeight
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="raw-material__container">
|
|
<Title name="材料确认" showRefresh @refresh="" />
|
|
<div class="table-wrapper" ref="customTable">
|
|
<a-table :dataSource="materialTableData" :columns="materialColumns as ColumnsType<MaterialTableItem>"
|
|
:pagination="false" bordered sticky :scroll="{ y: tableHeight }">
|
|
<template #bodyCell="{ column, index }">
|
|
<template v-if="column.key === 'index'">{{ index + 1 }}</template>
|
|
<template v-if="column.key === 'action'">
|
|
<a-button @click="handleSubmitMaterial(index)">确认</a-button>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.raw-material__container {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
|
|
.table-wrapper {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
</style>
|