sop的历史作业功能开发

src/api/job/index.ts

@@ -23,6 +23,7 @@ export interface PageParam {
   ticketName?: string
   ticketType?: string
   machineryId?: string
+  sopId?: number,
   workstationId: number,
 }
 

src/router/modules/remaining.ts

@@ -323,6 +323,20 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: '/sopm/sop'
         }
       },
+      {
+        path: 'sopm/sop/HistoricalSopJob',
+        component: () => import('@/views/sopm/sop/HistoricalSopJob.vue'),
+        name: 'HistoricalSopJob',
+        meta: {
+          title: 'sop历史作业',
+          noCache: true,
+          noTagsView: true,
+          hidden: true,
+          canTo: true,
+          icon: 'ep:view',
+          activeMenu: '/sopm/sop'
+        }
+      },
     ]
   },
   {

src/views/sopm/sop/HistoricalSopJob.vue

@@ -0,0 +1,109 @@
+<template>
+  <ContentWrap>
+    <!--    顶部标题-->
+    <div class="topTitle">
+      <span class="tab-title">SOP名称：{{route.query.sopName}}</span>
+      <div class="set-btn" @click="goBack">
+        <img src="../../../assets/images/返回.png" alt="" />
+        返回
+      </div>
+    </div>
+  </ContentWrap>
+
+  <ContentWrap>
+    <el-table v-loading="loading" :data="jobList" >
+      <el-table-column label="ID" prop="id" align="center" />
+      <el-table-column label="作业名称" prop="ticketName" />
+      <el-table-column label="作业类型" prop="ticketType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.TICKET_TYPE" :value="scope.row.ticketType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="作业状态" prop="ticketStatus">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.TICKET_STATUS" :value="scope.row.ticketStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column label="所属区域" prop="workstationName" :show-overflow-tooltip="true" />
+      <el-table-column label="设备/工艺" prop="machineryName" align="center" />
+    </el-table>
+
+    <!-- 分页组件 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+</template>
+
+<script setup lang="ts">
+import {DICT_TYPE} from "@/utils/dict";
+import * as JobApi from '@/api/job/index'
+import {ref} from 'vue'
+
+const router = useRouter()
+const route = useRoute()
+const loading = ref(true) // 列表的加载中
+const jobList=ref([])
+const total = ref(0) // 总条数
+const queryParams = reactive(
+  {
+    pageNo: 1,
+    pageSize: -1,
+    sopId: route.query.id,
+  }
+)
+
+
+
+onMounted(()=>{
+  getList()
+})
+// 返回
+const goBack = () => {
+  router.push('/sopm/sop')
+}
+
+/** 查询作业列表 */
+const getList = async () => {
+  loading.value = true
+
+  try {
+    const data = await JobApi.getJobTicketPage(queryParams)
+    jobList.value = data.list
+    console.log(jobList,'作业列表')
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+
+
+<style scoped lang="scss">
+.topTitle {
+  width: 100%;
+  line-height: 40px;
+}
+
+.set-btn {
+  width: 60px;
+  height: 30px;
+  border: 1px solid black;
+  border-radius: 6px;
+  text-align: center;
+  line-height: 30px;
+  float: right;
+  cursor: pointer;
+  margin: 10px 0;
+
+  img {
+    width: 14px;
+    height: 14px;
+  }
+}
+</style>