feat（通知单内容维护）：列表搭建

src/api/notificationContent/list.js

+import request from '@/utils/request'
+
+// 查询列表
+export function list(query) {
+    return request({
+        url: '/control/sysNotificationContent/list',
+        method: 'get',
+        params: query
+    })
+}

src/views/controlPlan/controlPlanNotice/notificationContent/index.vue

@@ -142,7 +142,7 @@
       </el-table-column>
       <el-table-column label="我的维护状态" align="center" prop="notificationStatus"  width="120">
         <template #default="scope">
-          <dict-tag :options="notification_status" :value="scope.row.notificationStatus" />
+          <dict-tag :options="content_my_status" :value="scope.row.certificationStatus" />
         </template>
       </el-table-column>
       <el-table-column label="通知单状态" align="center" prop="notificationStatus"  >
@@ -153,10 +153,10 @@
       <el-table-column label="创建人" align="center" prop="createUserName"  />
       <el-table-column label="批准人" align="center" prop="approvalUserName"  />
 
-      <el-table-column label="操作" align="center" width="140">
+      <el-table-column label="操作" align="center" width="160">
         <template #default="scope">
           <el-button type="text"  style="color: rgb(0,0,255)"  @click="handleMaintain(scope.row)">查看</el-button>
-          <el-button type="text"  style="color: rgb(255,54,54)" @click="delNotification(scope.row)">维护变更记录</el-button>
+          <el-button type="text"  style="color: rgb(0,0,255)" @click="changeRecords(scope.row)">维护变更记录</el-button>
           <el-button type="text"  style="color: rgb(255,153,0)"  @click="copeAdd(scope.row)">取消完成</el-button>
 
         </template>
@@ -190,13 +190,11 @@ import {
   getALLManufacturerList,
   getAllModelCode,
   getALLUserList,
-  getPersonnelInfoByIdsInfoByIds,
-  getUnitList,
-  insert,
-  list,
-  updateCertificationManager,
-  deleteNotificationManagementById
+  getUnitList
 } from "@/api/notificationManagement/list.js"
+import {
+  list
+} from "@/api/notificationContent/list.js"
 import {ref} from "vue";
 import {ElMessage,ElMessageBox } from 'element-plus'
 const allUserList = ref([])
@@ -212,6 +210,7 @@ const Prompt = ref('')
 const { certification_body } = proxy.useDict('certification_body')
 // 从全局字典中获取通知单状态相关的数据
 const { notification_status } = proxy.useDict('notification_status')
+const { content_my_status } = proxy.useDict('content_my_status')
 // 从全局字典中获取事业部 icar 才能选择的车型系列数据
 const { vehicle_model_series_icar } = proxy.useDict('vehicle_model_series_icar')
 // 从全局字典中获取除事业部 icar 外可选择的车型系列数据
@@ -314,8 +313,19 @@ function getDictList(v){
 }
 
 
+//引入路由实例
+const router = useRouter();
 
-
+//维护变更记录
+function changeRecords(row) {
+  // 使用查询参数传递 id
+  router.push({
+    path: '/control/controlPlanNotice/noticeAcceptanceInfo',
+    query: {
+      id: row.id
+    }
+  });
+}
 
 
 

src/views/controlPlan/controlPlanNotice/notificationContent/info.vue

+<template>
+  <div class="app-container">
+    <!-- 头部信息 -->
+    <div class="top">
+      <div style="display: flex;align-items: center;width: 70%;justify-content: space-between">
+        <el-button type="primary" @click="handleClick">返回</el-button>
+        <span>通知单编号:20241201-001</span>
+        <span>认证机构：CCAP</span>
+        <span>事业部：奇瑞</span>
+        <span>车型代码：T18</span>
+        <span>车型系列：CJ1B</span>
+        <span>生产地址：中国安徽省芜湖市经济技术开发区长春路8号</span>
+      </div>
+
+      <div>
+        <span>
+          认证负责人：xxx、xxx、xxx、xxx
+        </span>
+        <span class="status-progress" style="margin-left: 10px">
+          ● 收集中
+        </span>
+      </div>
+    </div>
+
+    <!-- 顶部表单 -->
+    <el-form v-model="queryParams" ref="queryRef" :inline="true" class="form-container">
+      <el-form-item label="车型公告号:" prop="notificationNumber">
+        <el-input placeholder="请输入" v-model="queryParams.notificationNumber" style="width: 120px" />
+      </el-form-item>
+      <el-form-item label="变更类型:" prop="certificationBody">
+        <el-select
+          v-model="queryParams.certificationBody"
+          placeholder="请选择"
+          clearable
+          style="width: 120px"
+        >
+          <el-option
+            v-for="dict in certification_body"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="项目负责人:" prop="businessDivisionId">
+        <el-select
+          v-model="queryParams.businessDivisionId"
+          placeholder="请选择"
+          clearable
+          style="width: 120px"
+        >
+          <el-option
+            v-for="dict in unitList"
+            :label="dict.businessUnitName"
+            :value="dict.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="认证负责人:" prop="vehicleModelCode">
+        <el-select
+          v-model="queryParams.vehicleModelCode"
+          placeholder="请选择"
+          clearable
+          style="width: 120px"
+        >
+          <el-option
+            v-for="dict in modelCodeList"
+            :label="dict.vehicleModelCode"
+            :value="dict.vehicleModelCode"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item class="button-container" style="position: relative;">
+        <el-button type="primary" class="btn-A" @click="handleQuery">查询</el-button>
+        <el-button @click="resetQuery" class="btn-B">重置</el-button>
+      </el-form-item>
+
+      <!-- 为该表单项添加 right-align 类 -->
+      <el-form-item class="button-container right-align" style="position: relative;">
+        <div >
+          <el-button type="primary" class="btn-C" @click="handleQuery">添加</el-button>
+          <el-button @click="resetQuery" class="btn-A">完成维护</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+
+
+    <el-table  :data="tableList">
+      <el-table-column type="index" width="55" align="center" label="序号"/>
+      <el-table-column label="车型公告号" align="center" prop="notificationNumber" >
+
+      </el-table-column>
+      <el-table-column label="动力类型" align="center" prop="certificationBody" />
+      <el-table-column label="变更类型" align="center" prop="businessUnitName" />
+      <el-table-column label="车辆类型" align="center" prop="brand" />
+      <el-table-column label="项目负责人" align="center" prop="vehicleModelCode"  />
+      <el-table-column label="RTX/TEL" align="center" prop="vehicleSeries" >
+        <template #default="scope">
+          <dict-tag :options="getDictList(scope.row.vehicleSeries)?vehicle_model_series_icar:vehicle_model_series" :value="scope.row.vehicleSeries" />
+        </template>
+      </el-table-column>
+      <el-table-column label="认证负责人" align="center" prop="productionAddress" width="150" />
+
+      <el-table-column label="完成时间" align="center" prop="changeType" >
+        <template #default="scope">
+          <span>{{scope.row.vehicleAnnouncementNumber || '--'}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="160">
+        <template #default="scope">
+          <el-button type="text"  style="color: rgb(0,0,255)"  @click="handleMaintain(scope.row)">编辑</el-button>
+          <el-button type="text" style="color: rgb(234,57,57)" @click="changeRecords(scope.row)">删除</el-button>
+
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script setup>
+import { useRoute } from 'vue-router';
+
+const tableList = ref([])
+// 获取当前路由实例
+const route = useRoute();
+// 从路由参数中获取 id
+const id = route.query.id;
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10
+})
+</script>
+
+<style scoped lang="scss">
+.top{
+  width:100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.form-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.right-align {
+  margin-left: auto; /* 让该元素靠右 */
+}
+</style>