优化追溯

src/apis/workOrder/workOrder.ts

@@ -12,7 +12,6 @@ export interface WorkOrderResp {
   photoUrl: string
   totalWeight: string
   totalCount: string
-  workOrderInfos: Array<WorkOrderInfoResp>
   createUserString: string
   updateUserString: string
 }
@@ -24,6 +23,7 @@ export interface WorkOrderInfoResp {
   weightTime: string
   quantity: string
   weight: string
+  imgUrl: string
   calculatedWeight: string
 }
 
@@ -46,7 +46,7 @@ export function listWorkOrder(query: WorkOrderPageQuery) {
 
 /** @desc 查询工作订单详情 */
 export function getWorkOrder(id: string) {
-  return http.get<WorkOrderResp>(`${BASE_URL}/${id}`)
+  return http.get<Array<WorkOrderInfoResp>>(`${BASE_URL}/${id}`)
 }
 
 /** @desc 删除工作订单 */

src/views/workOrder/index.vue

@@ -72,6 +72,35 @@
       </template>
     </GiTable>
 
+    <!-- 详情弹窗 -->
+    <a-modal
+      v-model:visible="detailModalVisible"
+      title="称重详情"
+      width="800px"
+      :loading="detailLoading"
+    >
+      <GiTable
+        v-if="detailData.length > 0"
+        row-key="id"
+        :data="detailData"
+        :columns="detailColumns"
+        :scroll="{ x: '100%', y: '100%', minWidth: 700 }"
+      >
+        <template #imgUrl="{ record }">
+          <a-image :src="record.imgUrl" width="50" />
+        </template>
+        <template #calculatedWeight="{ record }">
+          {{ record.calculatedWeight + 'g' }}
+        </template>
+        <template #weight="{ record }">
+          {{ record.weight + 'g' }}
+        </template>
+      </GiTable>
+      <div v-else class="no-data">
+        <icon-loading style="font-size: 48px; color: rgb(var(--arcoblue-6));" />
+        <p>暂无称重数据</p>
+      </div>
+    </a-modal>
 
   </div>
 </template>
@@ -82,11 +111,11 @@ import { useDownload, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
 import type GiTable from "@/components/GiTable/index.vue";
-import {ref} from "vue";
+import {ref, reactive} from "vue";
 import {Message} from "@arco-design/web-vue";
 import {
   deleteWorkOrder,
-  exportWorkOrder,
+  exportWorkOrder, getWorkOrder,
   listWorkOrder,
   type WorkOrderQuery,
   type WorkOrderResp
@@ -164,10 +193,36 @@ const reset = () => {
   search()
 }
 
-// 详情
-const onDetail = (record: WorkOrderResp) => {
+// 详情弹窗状态
+const detailModalVisible = ref(false)
+const detailLoading = ref(false)
+const detailData = ref<any[]>([])
 
-}
+// 详情列配置
+const detailColumns = ref<TableInstanceColumns[]>([
+  { title: '称重次数', dataIndex: 'weightTime' },
+  { title: '物料名称', dataIndex: 'materialName' },
+  { title: '数量', dataIndex: 'quantity' },
+  { title: '重量', dataIndex: 'weight', slotName: 'weight' },
+  { title: '计算重量', dataIndex: 'calculatedWeight', slotName: 'calculatedWeight' },
+  { title: '抓拍图片', dataIndex: 'imgUrl', slotName: 'imgUrl' }
+])
+
+// 详情
+const onDetail = async (record: WorkOrderResp) => {
+  detailLoading.value = true
+  detailModalVisible.value = true
+  detailData.value = []
+
+  getWorkOrder(record.id).then(res => {
+    if (res.code == '0') {
+      detailData.value = res.data;
+      detailLoading.value = false
+    } else {
+      Message.error('获取详情失败')
+    }
+  });
+};
 
 // 删除
 const onDeleteOne = (id) => {
@@ -195,4 +250,18 @@ const onExport = () => {
 
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  color: var(--color-text-4);
+  
+  p {
+    margin-top: 16px;
+    font-size: 14px;
+  }
+}
+</style>