frontend_hmi_station/src/views/traceOrderManage/outfeed/layout.vue

<script setup lang="ts">
import { ref, computed, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import { listStorageLocation } from '@/api/traceOrderManage/location';
import { completeStation, isLastStation as getIsLastStation } from '@/api/traceOrderManage/station';
import { useTraceOrderStore } from '@/store';

const router = useRouter();
const route = useRoute();

const traceOrderStore = useTraceOrderStore();

const menuItems = [
  { label: '主材报工', key: 'JobReport', progress: 30 },
  { label: '工序参数', key: 'ParameterConfiguration', progress: 80 },
  { label: '流转指引', key: 'ProcessGuidance', progress: 80 },
];

const activeKey = computed(() => route.name as string);

const handleMenuClick = (name: string) => {
  router.push({ name });
};

const locationOptions = ref<any>([]);
const fetchLocationList = async () => {
  try {
    const { rows } = await listStorageLocation({});
    locationOptions.value = rows;
  } catch (error: any) {
    message.error(error.message || '获取库位列表失败');
  }
};

const openSelectLocation = ref(false);
const handleOutfeed = async () => {
  // 判断是否为末站点
  const { data: isLastStation } = await getIsLastStation(traceOrderStore.currentStationId);
  if (isLastStation || outfeedChildRef.value?.totals.ngNum) {
    fetchLocationList();
    openSelectLocation.value = true;
  } else {
    submitOutfeed();
  }
};

const storage = reactive({});
const handleChangeLocation = (value: any, option: any) => {
  Object.assign(storage, option);
};

const closeOutfeed = () => {
  openSelectLocation.value = false;
};

// 确认出站
const outfeeding = ref(false);
const submitOutfeed = async () => {
  outfeeding.value = true;
  try {
    await completeStation(traceOrderStore.currentStationId, storage);
    openSelectLocation.value = false;
    message.success('出站成功');
    traceOrderStore.fetchStationInfo();
    traceOrderStore.fetchStationList();
    router.push({ name: 'TraceOrderManage' });
  } catch (error: any) {
    message.error(error.message || '出站失败');
  } finally {
    outfeeding.value = false;
  }
};

const outfeedChildRef = ref<any>(null);

/** 父组件对外暴露的方法 */
function renderTableHeight() {
  outfeedChildRef.value?.renderTableHeight();
}

defineExpose({
  renderTableHeight
});

fetchLocationList();
</script>

<template>
  <a-spin :spinning="outfeeding">
    <a-row class="outfeed-layout">
      <a-col :span="20" class="content-wrapper">
        <router-view v-slot="{ Component }">
          <component :is="Component" ref="outfeedChildRef" />
        </router-view>
      </a-col>
      <a-col :span="4" class="menu-wrapper">
        <div class="menu-list">
          <span class="outfeed-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" @click="handleOutfeed">确认出站</a-button>
        </div>
      </a-col>
    </a-row>

    <a-modal title="选择出站库位" :open="openSelectLocation" @ok="submitOutfeed" @cancel="closeOutfeed">
      <a-select style="width: 100%" @change="handleChangeLocation" :options="locationOptions" :fieldNames="{ label: 'storageLocationCode', value: 'id' }" />
    </a-modal>
  </a-spin>
</template>

<style scoped lang="scss">
.outfeed-layout {
  height: 100%;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.outfeed-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;
  }
}

.menu-wrapper {
  padding: 12px;
  border-radius: 7px;
  background-color: #f3f3f3;
}

.content-wrapper {
  height: 100%;
  padding: 12px;
}
</style>