feat：生产报表-添加详情页

src/locales/en.ts

@@ -4367,7 +4367,12 @@ export default {
       detailTabRelatedPlan: 'Related Plans',
       detailTabQualityInfo: 'Quality Info',
       detailTabBaogongInfo: 'Work Report',
-      exportFilename: 'ProductionReport'
+      exportFilename: 'ProductionReport',
+      tableOperate: 'Operate',
+      detail: 'Detail'
+    },
+    Detail: {
+      invalidId: 'Invalid parameter, task ID cannot be empty'
     },
     BasicInfo: {
       buttonRefresh: 'Refresh',

src/locales/zh-CN.ts

@@ -4578,7 +4578,12 @@ export default {
       detailTabRelatedPlan: '关联计划',
       detailTabQualityInfo: '质检信息',
       detailTabBaogongInfo: '报工信息',
-      exportFilename: '生产报表'
+      exportFilename: '生产报表',
+      tableOperate: '操作',
+      detail: '详情'
+    },
+    Detail: {
+      invalidId: '参数错误，任务单ID不能为空'
     },
     BasicInfo: {
       buttonRefresh: '刷新',

src/router/modules/remaining.ts

@@ -672,6 +672,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: '/mes/plan'
         },
         component: () => import('@/views/mes/plan/index.vue')
+      },
+      {
+        path: 'production-report/detail/:id',
+        name: 'MesProductionReportDetail',
+        meta: {
+          title: '生产报工详情',
+          noCache: true,
+          hidden: true,
+          activeMenu: '/mes/productionReport'
+        },
+        component: () => import('@/views/mes/productionReport/detail/index.vue')
       }
     ]
   }

src/views/mes/productionReport/detail/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <ContentWrap>
+    <div v-loading="detailLoading" class="production-report-detail-body">
+      <el-descriptions :column="3" class="production-report-detail-desc">
+        <el-descriptions-item :label="t('ProductionReport.Index.tableCode')">
+          {{ detailData?.code ?? '' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('ProductionReport.Index.tableOrderDate')">
+          {{ formatDetailDate(detailData?.orderDate) }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('ProductionReport.Index.tableDeliveryDate')">
+          {{ formatDetailDate(detailData?.deliveryDate ?? detailData?.finishDate) }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('ProductionReport.Index.tableStatus')">
+          <dict-tag :type="DICT_TYPE.MES_TASK_STATUS" :value="detailData?.status" />
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('ProductionReport.Index.tableIsScheduled')">
+          <el-tag :type="detailData?.isScheduled ? 'success' : 'info'">
+            {{ detailData?.isScheduled ? t('ProductionReport.Index.yes') : t('ProductionReport.Index.no') }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('ProductionReport.Index.tableProductionProgress')">
+          <div class="production-progress-cell">
+            <el-progress
+              type="circle"
+              :percentage="productionProgress"
+              :width="40"
+              :stroke-width="4"
+              :show-text="false"
+              :color="productionProgress === 100 ? '#67c23a' : undefined"
+            />
+            <span class="production-progress-text">{{ productionProgress }}%</span>
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('ProductionReport.Index.tableRemark')" :span="3">
+          {{ detailData?.remark ?? '' }}
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <div class="production-report-detail-tabs">
+        <el-tabs v-model="activeTabName" class="mt-12px">
+          <el-tab-pane :label="t('ProductionReport.Index.detailTabBasicInfo')" name="basicInfo">
+            <ProductionReportBasicInfo :task-id="taskId" :task-delivery-date="detailData?.deliveryDate" />
+          </el-tab-pane>
+          <el-tab-pane :label="t('ProductionReport.Index.detailTabRelatedPlan')" name="relatedPlan">
+            <ProductionReportRelatedPlan :task-id="taskId" />
+          </el-tab-pane>
+          <el-tab-pane :label="t('ProductionReport.Index.detailTabQualityInfo')" name="qualityInfo">
+            <ProductionReportQualityInfo :task-id="taskId" />
+          </el-tab-pane>
+          <el-tab-pane :label="t('ProductionReport.Index.detailTabBaogongInfo')" name="baogongInfo">
+            <ProductionReportBaogongInfo :task-id="taskId" />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import { TaskApi, TaskVO } from '@/api/mes/task'
+import ProductionReportBasicInfo from '../components/ProductionReportBasicInfo.vue'
+import ProductionReportRelatedPlan from '../components/ProductionReportRelatedPlan.vue'
+import ProductionReportQualityInfo from '../components/ProductionReportQualityInfo.vue'
+import ProductionReportBaogongInfo from '../components/ProductionReportBaogongInfo.vue'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+
+defineOptions({ name: 'MesProductionReportDetail' })
+
+const { t } = useI18n()
+const message = useMessage()
+const route = useRoute()
+const { delView } = useTagsViewStore()
+const { currentRoute } = useRouter()
+
+const taskId = computed(() => Number(route.params.id))
+const detailLoading = ref(false)
+const detailData = ref<TaskVO | null>(null)
+const activeTabName = ref('basicInfo')
+
+const formatDetailDate = (value: any) => {
+  if (!value) return ''
+  return formatDate(new Date(value), 'YYYY-MM-DD')
+}
+
+const productionProgress = computed(() => {
+  const storedPlanNumber = Number(detailData.value?.storedPlanNumber ?? 0)
+  const totalNumber = Number(detailData.value?.totalNumber ?? detailData.value?.number ?? 0)
+  if (!Number.isFinite(storedPlanNumber) || !Number.isFinite(totalNumber) || totalNumber <= 0) return 0
+  const rawPercent = (storedPlanNumber / totalNumber) * 100
+  return Math.max(0, Math.min(100, Number(rawPercent.toFixed(2))))
+})
+
+const getDetail = async () => {
+  if (!taskId.value) {
+    message.warning(t('ProductionReport.Detail.invalidId'))
+    delView(unref(currentRoute))
+    return
+  }
+  detailLoading.value = true
+  try {
+    detailData.value = await TaskApi.getTask(taskId.value)
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+onMounted(async () => {
+  await getDetail()
+})
+</script>
+
+<style scoped>
+.production-report-detail-body {
+  max-height: 85vh;
+}
+
+.production-report-detail-desc {
+  margin-bottom: 16px;
+}
+
+.production-report-detail-tabs {
+  padding-right: 4px;
+}
+
+:deep(.el-tabs__content) {
+  max-height: 65vh;
+  overflow-y: auto;
+}
+
+.production-progress-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  flex-wrap: nowrap;
+  height: 100%;
+}
+
+.production-progress-cell :deep(.el-progress-circle) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.production-progress-text {
+  font-size: 12px;
+  white-space: nowrap;
+}
+</style>

src/views/mes/productionReport/index.vue

@@ -90,8 +90,6 @@
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
-      highlight-current-row
-      @current-change="handleCurrentChange"
     >
       <el-table-column :label="t('ProductionReport.Index.tableCode')" align="center" prop="code" width="200px" sortable />
       <el-table-column :label="t('ProductionReport.Index.tableOrderDate')" align="center" prop="orderDate" :formatter="dateFormatter2" sortable />
@@ -128,6 +126,13 @@
         </template>
       </el-table-column>
       <el-table-column :label="t('ProductionReport.Index.tableRemark')" align="center" prop="remark" />
+      <el-table-column :label="t('ProductionReport.Index.tableOperate')" align="center" fixed="right" width="100px">
+        <template #default="scope">
+          <el-button link @click="openDetail(scope.row.id)">
+            {{ t('ProductionReport.Index.detail') }}
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <Pagination
       :total="total"
@@ -136,23 +141,6 @@
       @pagination="getList"
     />
   </ContentWrap>
-
-  <ContentWrap v-if="currentRow && currentRow.id">
-    <el-tabs v-model="activeTabName">
-      <el-tab-pane :label="t('ProductionReport.Index.detailTabBasicInfo')" name="basicInfo">
-        <ProductionReportBasicInfo :task-id="currentRow.id" :task-delivery-date="currentRow.deliveryDate" />
-      </el-tab-pane>
-      <el-tab-pane :label="t('ProductionReport.Index.detailTabRelatedPlan')" name="relatedPlan">
-        <ProductionReportRelatedPlan :task-id="currentRow.id" />
-      </el-tab-pane>
-      <el-tab-pane :label="t('ProductionReport.Index.detailTabQualityInfo')" name="qualityInfo">
-        <ProductionReportQualityInfo :task-id="currentRow.id" />
-      </el-tab-pane>
-      <el-tab-pane :label="t('ProductionReport.Index.detailTabBaogongInfo')" name="baogongInfo">
-        <ProductionReportBaogongInfo :task-id="currentRow.id" />
-      </el-tab-pane>
-    </el-tabs>
-  </ContentWrap>
 </template>
 
 <script setup lang="ts">
@@ -160,10 +148,6 @@ import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter2 } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { TaskApi, TaskVO } from '@/api/mes/task'
-import ProductionReportBasicInfo from './components/ProductionReportBasicInfo.vue'
-import ProductionReportRelatedPlan from './components/ProductionReportRelatedPlan.vue'
-import ProductionReportQualityInfo from './components/ProductionReportQualityInfo.vue'
-import ProductionReportBaogongInfo from './components/ProductionReportBaogongInfo.vue'
 import { useI18n } from '@/hooks/web/useI18n'
 
 defineOptions({ name: 'ProductionReport' })
@@ -187,7 +171,6 @@ const queryParams = reactive({
 const queryFormRef = ref()
 const exportLoading = ref(false)
 
-const activeTabName = ref('basicInfo')
 const activeStatusTab = ref('')
 
 const deliveryDateFormatter = (_row: any, _column: any, value: any) => {
@@ -236,17 +219,13 @@ const handleExport = async () => {
   }
 }
 
-const currentRow = ref<TaskVO>({} as TaskVO)
+const { push } = useRouter()
-const handleCurrentChange = (row: TaskVO | null) => {
+const openDetail = (id: number) => {
-  if (row) {
+  push({ name: 'MesProductionReportDetail', params: { id } })
-    currentRow.value = row
-    activeTabName.value = 'basicInfo'
-  }
 }
 
 const handleTabClick = (tab: any) => {
   queryParams.status = tab.paneName === '' ? undefined : tab.paneName
-  currentRow.value = {} as TaskVO
   queryParams.pageNo = 1
   getList()
 }