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

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

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { message } from 'ant-design-vue';
+import type { ColumnsType } from 'ant-design-vue/es/table/interface';
+import { listMaskCombination, listCombinationAssignMask } from "@/api/pwoManage/fixtureCombination";
+
+interface FixtureTableItem {
+  key: string;
+  operationTitle: string;
+  operationCode: string;
+  maskName: string;
+  maskCode: string;
+  [key: string]: any;
+}
+
+interface FixtureCombinationItem {
+  key: string;
+  combinationCode: string;
+  combinationName: string;
+  combinationStatus: string;
+  [key: string]: any;
+}
+
+const fixtureColumns = [
+  { title: '序号', dataIndex: 'index', key: 'index', align: 'center', width: 80 },
+  { title: '工序编码', dataIndex: 'operationCode', key: 'operationCode', align: 'center' },
+  { title: '工序名称', dataIndex: 'operationTitle', key: 'operationTitle', align: 'center' },
+  { title: '治具编码', dataIndex: 'maskCode', key: 'maskCode', align: 'center' },
+  { title: '治具名称', dataIndex: 'maskName', key: 'maskName', align: 'center' },
+];
+
+// 治具表格
+const fixtureTableData = ref<FixtureTableItem[]>([]);
+
+const fixtureInput = ref<string>('');
+
+const openFixtureModal = ref(false)
+const fixtureCombinationColumns = [
+  { title: '序号', dataIndex: 'index', key: 'index', align: 'center', width: 80 },
+  { title: '组合编码', dataIndex: 'combinationCode', key: 'combinationCode', align: 'center' },
+  { title: '组合名称', dataIndex: 'combinationName', key: 'combinationName', align: 'center' },
+  { title: '组合状态', dataIndex: 'combinationStatus', key: 'combinationStatus', align: 'center' },
+  { title: '操作', dataIndex: 'action', key: 'action', align: 'center', width: 100 },
+]
+const fixtureCombinationTableData = ref<FixtureCombinationItem[]>([])
+const fetchCombinationList = async () => {
+  try {
+    const { rows, total } = await listMaskCombination({})
+    if (total as number <= 0) throw new Error('未查询到组合列表');
+    fixtureCombinationTableData.value = rows;
+  } catch (error: any) {
+    message.error(error.message || '获取工单信息失败');
+  }
+}
+
+const existingCombination = ref(new Set())
+const handleBind = async (id: number) => {
+  const { rows } = await listCombinationAssignMask(id, {
+    maskStatus: "AVAILABLE",
+    orderByColumn: 'id',
+    orderBy: 'desc',
+  })
+
+  const newCombination = rows.filter(item => !existingCombination.value.has(item.id))
+  newCombination.forEach(item => {
+    fixtureTableData.value.push({
+      key: item.id,
+      operationCode: item.operationCode,
+      operationTitle: item.operationTitle,
+      maskCode: item.maskCode,
+      maskName: item.maskName
+    })
+    existingCombination.value.add(item.id)
+  })
+
+  message.success('绑定成功')
+  openFixtureModal.value = false
+}
+
+// 计算表格高度
+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
+});
+
+fetchCombinationList()
+</script>
+
+<template>
+  <div class="fixture__container">
+    <a-row class="main-content" :gutter="24">
+      <a-col :span="14" class="fixture-item__container">
+        <div class="main-title">治具组合信息</div>
+        <a-button size="large" @click="() => openFixtureModal = true">绑定治具组合</a-button>
+        <div class="table-wrapper" ref="customTable">
+          <a-table :dataSource="fixtureTableData" :columns="fixtureColumns as ColumnsType<FixtureTableItem>"
+            :pagination="false" bordered sticky size="middle" :scroll="{ y: tableHeight }">
+            <template #bodyCell="{ column, index }">
+              <template v-if="column.key === 'index'">{{ index + 1 }}</template>
+            </template>
+          </a-table>
+        </div>
+      </a-col>
+      <a-col :span="10" class="fixture-item__container">
+        <div class="main-title">治具校验</div>
+        <a-row>
+          <a-col :span="20">
+            <a-input size="large" v-model:value="fixtureInput" @pressEnter="" placeholder="按下回车校验" />
+          </a-col>
+          <a-col :span="3" :offset="1">
+            <a-button size="large" @click="">校验</a-button>
+          </a-col>
+        </a-row>
+        <div class="table-wrapper">
+          <a-descriptions bordered :column="1">
+            <a-descriptions-item label="治具编码">Cloud Database</a-descriptions-item>
+            <a-descriptions-item label="治具名称">Prepaid</a-descriptions-item>
+            <a-descriptions-item label="治具组合">YES</a-descriptions-item>
+            <a-descriptions-item label="标准使用次数">YES</a-descriptions-item>
+            <a-descriptions-item label="当前使用次数">YES</a-descriptions-item>
+            <a-descriptions-item label="关联工序">YES</a-descriptions-item>
+          </a-descriptions>
+        </div>
+      </a-col>
+    </a-row>
+
+    <a-modal v-model:open="openFixtureModal" title="绑定治具组合" width="50vw" :bodyStyle="{ padding: '20px 0' }">
+      <a-table :dataSource="fixtureCombinationTableData" :columns="fixtureCombinationColumns as ColumnsType<FixtureCombinationItem>"
+        :pagination="false" bordered sticky :scroll="{ y: tableHeight }">
+        <template #bodyCell="{ column, index, record }">
+          <template v-if="column.key === 'index'">{{ index + 1 }}</template>
+          <template v-if="column.key === 'action'">
+            <a-button @click="handleBind(record.id)">绑定</a-button>
+          </template>
+        </template>
+      </a-table>
+    </a-modal>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.fixture__container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  flex: 1;
+  overflow: hidden;
+
+  .fixture-item__container {
+    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>

src/views/pwoManage/infeed/layout.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+
+const menuItems = [
+  { label: '主材', key: 'PrimaryMaterial', progress: 30 },
+  { label: '材料', key: 'RawMaterial', progress: 50 },
+  { label: '治具', key: 'Fixture', progress: 80 },
+];
+
+const activeKey = computed(() => route.name as string);
+
+const handleMenuClick = (key: string) => {
+  router.push({ name: key });
+};
+
+const infeedChildRef = ref<any>(null);
+
+/** 父组件对外暴露的方法 */
+function renderTableHeight() {
+  infeedChildRef.value?.renderTableHeight();
+}
+
+defineExpose({
+  renderTableHeight
+});
+</script>
+
+<template>
+  <a-row :gutter="24" class="infeed-layout">
+    <a-col :span="4">
+      <div class="menu-list">
+        <span class="infeed-title">进站</span>
+        <div 
+          v-for="item in menuItems" 
+          :key="item.key" 
+          class="menu-item"
+          :class="{ active: activeKey === item.key }"
+          @click="handleMenuClick(item.key)"
+        >
+          <div class="menu-content">
+            <span class="menu-title">{{ item.label }}</span>
+            <a-progress 
+              :percent="item.progress" 
+              :show-info="false" 
+              size="small" 
+              :stroke-color="activeKey === item.key ? '#1890ff' : undefined"
+              class="menu-progress"
+            />
+          </div>
+        </div>
+        <a-button type="primary" size="large">确认进站</a-button>
+      </div>
+    </a-col>
+    <a-col :span="20" class="content-wrapper">
+      <router-view v-slot="{ Component }">
+        <component :is="Component" ref="infeedChildRef" />
+      </router-view>
+    </a-col>
+  </a-row>
+</template>
+
+<style scoped lang="scss">
+.infeed-layout {
+  height: 100%;
+}
+
+.menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+}
+
+.infeed-title {
+  font-size: 20px;
+  font-weight: 600;
+  border-bottom: 1px solid #c9c9c9;
+  padding: 0 0 8px;
+}
+
+.menu-item {
+  flex: 1;
+  background: #fff;
+  border-radius: 8px;
+  padding: 1vh 1vw;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid #f0f0f0;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+  position: relative;
+  overflow: hidden;
+
+  &.active {
+    background: #e6f7ff;
+    border-color: #1890ff;
+    
+    .menu-title {
+      color: #1890ff;
+    }
+  }
+
+  &:hover {
+    border-color: #47a5fd;
+  }
+}
+
+.menu-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+}
+
+.menu-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  line-height: 1.5;
+}
+
+.menu-progress {
+  margin-bottom: 0 !important;
+  
+  :deep(.ant-progress-bg) {
+    transition: all 0.3s;
+  }
+}
+
+.content-wrapper {
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,119 @@
+<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>

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>

src/views/pwoManage/outfeed/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    outfeed
+  </div>
+</template>
+
+<style scoped lang="scss"></style>