120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted } from 'vue';
|
||
|
|
import type { ColumnsType } from 'ant-design-vue/es/table/interface';
|
||
|
|
|
||
|
|
interface MaterialTableItem {
|
||
|
|
key: string;
|
||
|
|
carrierCode: string;
|
||
|
|
qrCode: string;
|
||
|
|
[key: string]: any;
|
||
|
|
}
|
||
|
|
|
||
|
|
const materialColumns = [
|
||
|
|
{ title: '序号', dataIndex: 'index', key: 'index', align: 'center', width: 80 },
|
||
|
|
{ title: '载具 ID', dataIndex: 'carrierCode', key: 'carrierCode', align: 'center' },
|
||
|
|
{ title: '二维码', dataIndex: 'qrCode', key: 'qrCode', align: 'center' },
|
||
|
|
{ title: '操作', key: 'action', align: 'center', width: 120 },
|
||
|
|
]
|
||
|
|
|
||
|
|
const carrierInput = ref<string>('');
|
||
|
|
// 录入载具
|
||
|
|
const insertCarrier = () => {
|
||
|
|
if (!carrierInput.value) return;
|
||
|
|
materialTableData.value.push({
|
||
|
|
key: String(Date.now()),
|
||
|
|
carrierCode: String(carrierInput.value),
|
||
|
|
qrCode: String(materialInput.value),
|
||
|
|
})
|
||
|
|
carrierInput.value = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
// 主物料表格
|
||
|
|
const materialTableData = ref<MaterialTableItem[]>([]);
|
||
|
|
const materialInput = ref<string>('');
|
||
|
|
// 录入主物料
|
||
|
|
const insertMaterial = () => {
|
||
|
|
if (!materialInput.value) return;
|
||
|
|
materialTableData.value.push({
|
||
|
|
key: String(Date.now()),
|
||
|
|
carrierCode: String(carrierInput.value),
|
||
|
|
qrCode: String(materialInput.value),
|
||
|
|
})
|
||
|
|
materialInput.value = '';
|
||
|
|
}
|
||
|
|
// 移除主物料
|
||
|
|
const handleRemoveMaterial = (index: number) => {
|
||
|
|
console.log(index)
|
||
|
|
materialTableData.value.splice(index, 1)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 计算表格高度
|
||
|
|
const customTable = ref<HTMLElement | null>(null)
|
||
|
|
const tableHeight = ref(200)
|
||
|
|
const renderTableHeight = () => {
|
||
|
|
if (customTable.value) {
|
||
|
|
tableHeight.value = customTable.value.clientHeight - 50
|
||
|
|
console.log('元素高度：', tableHeight.value)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
renderTableHeight()
|
||
|
|
})
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
renderTableHeight
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="primary-material__container">
|
||
|
|
<div class="main-title">主物料进站</div>
|
||
|
|
<a-form layout="inline" :model="{}" size="large">
|
||
|
|
<a-form-item label="载具 ID">
|
||
|
|
<a-input v-model:value="carrierInput" @pressEnter="insertCarrier" placeholder="按下回车录入" />
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item label="物料编码">
|
||
|
|
<a-input v-model:value="materialInput" @pressEnter="insertMaterial" placeholder="按下回车录入" />
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item>
|
||
|
|
<a-button type="primary" @click="insertMaterial">录入</a-button>
|
||
|
|
</a-form-item>
|
||
|
|
</a-form>
|
||
|
|
<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 type="text" danger @click="handleRemoveMaterial(index)">删除</a-button>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</a-table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.primary-material__container {
|
||
|
|
flex: 1;
|
||
|
|
overflow: hidden;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 16px;
|
||
|
|
overflow: hidden;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.main-title {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 600;
|
||
|
|
border-bottom: 1px solid #c9c9c9;
|
||
|
|
padding: 0 0 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-wrapper {
|
||
|
|
flex: 1;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|