新增工单管理/进出站界面

src/views/pwoManage/infeed/rawMaterial/index.vue

@@ -0,0 +1,103 @@
+<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">
+    <div class="main-title">材料确认</div>
+    <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%;
+
+  .main-title {
+    font-size: 20px;
+    font-weight: 600;
+    border-bottom: 1px solid #c9c9c9;
+    padding: 0 0 8px;
+  }
+
+  .table-wrapper {
+    flex: 1;
+    overflow: auto;
+  }
+}
+</style>