feat（通知单管理）：查看详情搭建

src/api/notificationContent/list.js

@@ -66,3 +66,10 @@ export function completeTheMaintenance(id) {
         method: 'get'
     })
 }
+// 取消维护-维护变更记录
+export function cencalWeihu(id) {
+    return request({
+        url: '/control/sysNotificationContent/cencalWeihu/'+id,
+        method: 'get'
+    })
+}

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

@@ -239,7 +239,7 @@
         <template #default="scope">
           <el-button type="text"  style="color: rgb(0,0,255)"  @click="handleView(scope.row)">查看</el-button>
           <el-button type="text" v-if="scope.row.certificationStatus !== '1'" 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>
+          <el-button type="text" v-if="scope.row.notificationStatus	 === '1' && scope.row.certificationStatus === '1'" style="color: rgb(255,153,0)"  @click="cancelFinish(scope.row)">取消完成</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -272,6 +272,7 @@ import {
   getUnitList
 } from "@/api/notificationManagement/list.js"
 import {
+  cencalWeihu,
   list
 } from "@/api/notificationContent/list.js"
 import {ref} from "vue";
@@ -406,6 +407,16 @@ function handleView(row){
     }
   });
 }
+//取消完成
+function cancelFinish(row){
+  console.log(row)
+  cencalWeihu(row.id).then(res=>{
+    console.log(res)
+    if(res.code === 200){
+     getList()
+    }
+  })
+}
 
 //维护变更记录
 function changeRecords(row) {

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

@@ -249,7 +249,7 @@
 
       <el-table-column label="操作" align="center" width="140">
         <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(0,0,255)"  @click="handleDetail(scope.row)">查看详情</el-button>
             <el-button type="text" v-if="scope.row.notificationStatus === '1' || scope.row.notificationStatus === '4'"  style="color: rgb(255,54,54)" @click="delNotification(scope.row)">删除</el-button>
             <el-button type="text" v-if="scope.row.notificationStatus === '2'"  style="color: rgb(255,153,0)"  @click="copeAdd(scope.row)">撤回</el-button>
           <el-button type="text" v-if="scope.row.notificationStatus === '3'" style="color: rgb(255,153,0)"  @click="copeAdd(scope.row)">作废</el-button>
@@ -524,6 +524,7 @@ import {
 } from "@/api/notificationManagement/list.js"
 import {ref} from "vue";
 import {ElMessage,ElMessageBox } from 'element-plus'
+import {useRouter} from "vue-router";
 const allUserList = ref([])
 const undoDialogVisible = ref(false)
 const personTableList = ref([])
@@ -686,6 +687,16 @@ function  getUnitDataList(){
     unitList.value = res.data
   })
 }
+const router = useRouter();
+function handleDetail(row){
+  // 使用查询参数传递 id
+  router.push({
+    path: '/control/controlPlanNotice/managerInfo',
+    query: {
+      id: row.id
+    }
+  });
+}
 
 function getDictList(v){
 

src/views/controlPlan/controlPlanNotice/notificationManagement/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="goBack">返回</el-button>
+        <span>通知单编号:{{topDetailInfo.notificationNumber}}</span>
+        <span>认证机构:{{topDetailInfo.certificationBody}}</span>
+        <span>事业部:{{topDetailInfo.businessUnitName}}</span>
+        <span>车型代码:{{topDetailInfo.vehicleModelCode}}</span>
+        <span>车型系列:{{getLabelByKey(topDetailInfo.vehicleSeries)}}</span>
+        <span>生产地址:{{topDetailInfo.productionAddress}}</span>
+      </div>
+
+      <div style="width: 20%;display: flex;align-items: center;justify-content: space-evenly">
+        <span>
+          认证负责人：<span :style="item.certificationStatus === '0'?'':'color:#19be6b'" v-for="(item,i) in topDetailInfo.renzhengStatusList">{{item.userName}}<span v-if="i !== topDetailInfo.renzhengStatusList.length - 1">、</span></span>
+
+        </span>
+        <span> <dict-tag :options="notification_status" :value="topDetailInfo.notificationStatus" /></span>
+      </div>
+    </div>
+
+    <!-- 顶部表单 -->
+    <el-form v-model="queryParams" ref="queryRef" :inline="true" class="form-container">
+      <el-form-item label="车型公告号:" prop="vehicleAnnouncementNumber">
+        <el-input placeholder="请输入" v-model="queryParams.vehicleAnnouncementNumber" style="width: 120px" />
+      </el-form-item>
+      <el-form-item label="变更类型:" prop="changeType">
+        <el-select
+            v-model="queryParams.changeType"
+            placeholder="请选择"
+            clearable
+            style="width: 120px"
+        >
+          <el-option
+              v-for="dict in changeType"
+              :label="dict"
+              :value="dict"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="项目负责人:" prop="projectResponsiblePerson">
+        <el-input placeholder="请输入" v-model="queryParams.projectResponsiblePerson" style="width: 120px" />
+
+      </el-form-item>
+      <el-form-item label="认证负责人:" prop="certificationResponsiblePerson">
+        <el-input placeholder="请输入" v-model="queryParams.certificationResponsiblePerson" style="width: 120px" />
+
+      </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 v-if="pageType ==='maintain'" class="button-container right-align" style="position: relative;">
+        <div >
+          <el-button type="primary" class="btn-C" @click="addWeiHu">添加</el-button>
+          <el-button @click="finishWeiHu" 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="vehicleAnnouncementNumber" >
+
+      </el-table-column>
+      <el-table-column label="动力类型" align="center" prop="powerType" >
+        <template #default="scope">
+          <dict-tag :options="power_type" :value="scope.row.powerType" />
+        </template>
+
+      </el-table-column>
+      <el-table-column label="变更类型" align="center" prop="changeType" />
+      <el-table-column label="车辆类型" align="center" prop="vehicleType" >
+        <template #default="scope">
+          <dict-tag :options="car_type" :value="scope.row.vehicleType" />
+
+        </template>
+      </el-table-column>
+      <el-table-column label="项目负责人" align="center" prop="projectResponsiblePerson"  />
+      <el-table-column label="RTX/TEL" align="center" prop="rtxTel" >
+        <template #default="scope">
+          {{scope.row.rtxTel || '--'}}
+        </template>
+      </el-table-column>
+      <el-table-column label="认证负责人" align="center" prop="certificationResponsiblePersonName"  />
+
+      <el-table-column label="完成时间" align="center" prop="completionTime" >
+        <template #default="scope">
+          {{scope.row.completionTime || '--'}}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="160"  v-if="pageType ==='maintain'">
+        <template #default="scope">
+          <el-button type="text"  style="color: rgb(0,0,255)"  @click="handleEdit(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>
+
+
+
+    <pagination
+        v-show="total>0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+    />
+  </div>
+</template>
+<script setup>
+import {
+  getTopDetailInfo,
+  getVehicleModelAnnouncementNumber,
+  getCurrentLoginUser,
+  getInList,
+  editChangeRecord,
+  completeTheMaintenance
+} from "@/api/notificationContent/list.js"
+import {useRoute, useRouter} from 'vue-router';
+import {ElMessage} from "element-plus";
+// 获取当前路由实例
+const route = useRoute();
+const router = useRouter(); // 获取 router 实例
+const total = ref(0)
+const drawerTitle = ref('')
+const drawer  = ref(false)
+const drawerQueryRef  =ref()
+const tableList = ref([])
+// 从路由参数中获取 id
+const id = route.query.id;
+//页面类型
+const pageType = route.query.type;
+const topDetailInfo = ref({})
+const { proxy } = getCurrentInstance();
+const modelAnnouncementNumber = ref([])
+const drawerQueryParams = ref({
+  notificationId:id
+})
+const changeType = ref([
+  "扩展","新增"
+])
+
+const { power_type } = proxy.useDict('power_type')
+const { car_type } = proxy.useDict('car_type')
+const { notification_status } = proxy.useDict('notification_status')
+const currentLoginInfo = ref([])
+// 从全局字典中获取事业部 icar 才能选择的车型系列数据
+const { vehicle_model_series_icar } = proxy.useDict('vehicle_model_series_icar')
+// 从全局字典中获取除事业部 icar 外可选择的车型系列数据
+const { vehicle_model_series } = proxy.useDict('vehicle_model_series')
+
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  notificationId:id
+})
+
+
+
+
+
+function goBack(){
+  router.go(-1);
+}
+
+//编辑
+function handleEdit(row){
+  getCurrentLoginInfo()
+  console.log(row)
+  drawerTitle.value = '编辑'
+  drawer.value = true
+  drawerQueryParams.value = JSON.parse(JSON.stringify(row))
+}
+//查询
+function handleQuery(){
+  queryParams.value.pageNum = 1
+  queryParams.value.notificationId = id
+  getList()
+}
+
+//完成维护
+function finishWeiHu(){
+  completeTheMaintenance(id).then(res=>{
+    console.log(res)
+    if(res.code === 200){
+      ElMessage.success('完成维护成功')
+      // getTopInfo()
+      goBack()
+    }
+  })
+}
+
+//重置
+function resetQuery(){
+  queryParams.value = {
+    pageNum: 1,
+    pageSize: 10,
+    notificationId:id,
+    vehicleAnnouncementNumber: '',
+    changeType: '',
+    projectResponsiblePerson: '',
+    certificationResponsiblePerson: ''
+  }
+  getList()
+}
+
+function getTopInfo(){
+  getTopDetailInfo(id).then(res=>{
+    topDetailInfo.value = res.data
+  })
+}
+
+function getChexing(){
+  getVehicleModelAnnouncementNumber(id).then(res=>{
+    console.log(res.data)
+    modelAnnouncementNumber.value = res.data
+  })
+}
+
+const getLabelByKey = (key) => {
+  // 先在 vehicle_model_series_icar 中查找
+  const itemInIcar = vehicle_model_series_icar._object.vehicle_model_series_icar.find(item => item.value === key);
+  if (itemInIcar) {
+    return itemInIcar.label;
+  }
+  // 若 vehicle_model_series_icar 中未找到，再在 vehicle_model_series 中查找
+  const itemInSeries = vehicle_model_series._object.vehicle_model_series.find(item => item.value === key);
+  if (itemInSeries) {
+    return itemInSeries.label;
+  }
+  // 若两个字典都未找到，返回空字符串
+  return '';
+};
+
+
+
+function getCurrentLoginInfo(){
+  getCurrentLoginUser().then(res=>{
+    console.log(res.data)
+    currentLoginInfo.value = [res.data]
+
+    drawerQueryParams.value.certificationResponsiblePerson = res.data.userId;
+  })
+}
+
+
+
+function getList(){
+  getInList(queryParams.value).then(res=>{
+    console.log(res)
+    tableList.value =res.rows
+    total.value = res.total
+  })
+}
+getList()
+
+getTopInfo()
+getChexing()
+</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>