CCAP历史控制计划-CCAP控制计划管理列表状态信息样式

src/assets/styles/btn.scss

@@ -59,6 +59,22 @@
     color: #0148d6;
   }
 }
+.status-progress {
+  font-size: 14px;
+  color: #EE9B3A;
+}
+.status-completed {
+  font-size: 14px;
+  color: #0154FB;
+}
+.status-finalized {
+  font-size: 14px;
+  color: #49C92B;
+}
+.status-cancelled {
+  font-size: 14px;
+  color: #9099AB;
+}
 .blue-btn {
   @include colorBtn($blue);
 }

src/views/controlPlan/CCAPControlPlan/CCAPControlPlanManagement/index.vue

@@ -228,7 +228,7 @@
           </div>
         </template>
         <template #default="scope">
-          <span >{{ changeControlPlanStatus(scope.row.controlPlanStatus) }}</span>
+          <span :class="getStatusClass(changeControlPlanStatus(scope.row.controlPlanStatus))">{{ changeControlPlanStatus(scope.row.controlPlanStatus) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" fixed="right"  align="center" class-name="small-padding fixed-width">
@@ -281,7 +281,6 @@ const businessList = ref([]);
 const tableList = ref([]);
 const controlPlanStatusOptions = ref([]);
 
-
 function getAllBusinessUnit() {
   getAllBusinessUnitName().then(res => {
     businessList.value = res.data
@@ -307,6 +306,21 @@ function changeControlPlanStatus(before) {
   let item = controlPlanStatusOptions.value.find(item=>item.dictValue === before)
   return item.dictLabel
 }
+// 根据转换后的状态文字返回对应的类名
+function getStatusClass(statusText) {
+  switch (statusText) {
+    case '编制中':
+      return 'status-progress';
+    case '编制完成':
+      return 'status-completed';
+    case '已最终确认':
+      return 'status-finalized';
+    case '已撤销':
+      return 'status-cancelled';
+    default:
+      return '';
+  }
+}
 
 /** 搜索按钮操作 */
 function handleQuery() {
@@ -335,8 +349,11 @@ function toHistory() {
   proxy.$router.push({ path: '/control/CCAPControlPlan/history' });
 }
 
-getList()
-getAllBusinessUnit()
+onMounted(()=>{
+  getList()
+  getAllBusinessUnit()
+})
+
 </script>
 
 <style scoped lang="scss">
@@ -354,4 +371,5 @@ getAllBusinessUnit()
 :deep(.el-pagination.is-background .el-pager li.is-active){
   background-color: #0154FB;
 }
+
 </style>