[update 首页] 标准状态颜色

src/views/dashboard/modules/SearchAndWarningCard.vue

@@ -36,7 +36,7 @@
         <template v-slot:standardState="text, record">
           <a-tooltip overlay-class-name="tooltip-style">
             <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
-            <div v-if="text" class="status-style" :class="getStandardStateClass(record)">{{ text }}</div>
+            <div v-if="text" class="status-style" :style="getStandardStateStyle(record)">{{ text }}</div>
             <div v-else class="table-text">{{ global.emptyLine }}</div>
           </a-tooltip>
         </template>
@@ -328,34 +328,48 @@ export default {
   },
   methods: {
     // 获取标准状态
-    getStandardStateClass (row) {
+    getStandardStateStyle (row) {
+      let color = ''
       switch (row.standardState + '') {
-        // 起草
+        // 草案
         case StandardStatus.DRAFT.value:
-          return 'status-style-1'
-          // 征求意见
+          color = '243, 129, 65'
+          break
+        // 征求意见
         case StandardStatus.SEEK_FOR_OPTIONS.value:
-          return 'status-style-2'
-          // 审查
+          color = '129, 206, 94'
+          break
+        // 审查
         case StandardStatus.EXAMINE.value:
-          return 'status-style-3'
-          // 报批
+          color = '255, 98, 98'
+          break
+        // 报批
         case StandardStatus.APPROVAL.value:
-          return 'status-style-4'
-          // 发布
+          color = '48, 175, 255'
+          break
+        // 发布
         case StandardStatus.RELEASE.value:
-          return 'status-style-5'
-          // 现行有效(外部标准\企标)
+          color = '6, 176, 140'
+          break
+        // 现行有效(外部标准\企标)
         case StandardStatus.CURRENTLY_EFFECTIVE.value:
         case EnterpriseStandardStatus.CURRENTLY_EFFECTIVE.value:
-          return 'status-style-6'
-          // 废止(外部标准\企标)
+          color = '137, 138, 233'
+          break
+        // 废止(外部标准\企标)
         case StandardStatus.ABOLISH.value:
         case EnterpriseStandardStatus.ABOLISH.value:
-          return 'status-style-7'
-        default:
-          return ''
+          color = '156, 177, 208'
+          break
       }
+      if (color) {
+        return {
+          backgroundColor: `rgba(${color}, 0.1)`,
+          border: `1px solid rgba(${color}, 0.5)`,
+          color: `rgba(${color}, 1)`
+        }
+      }
+      return {}
     },
     /**
      * 查看标准分解单
@@ -595,46 +609,4 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-// 起草
-.status-style-1 {
-  background-color: rgba(243, 129, 65, 0.1);
-  border: 1px solid rgba(243, 129, 65, 0.5);
-  color: rgba(243, 129, 65, 1);
-}
-// 征求意见
-.status-style-2 {
-  background-color: rgba(129, 206, 94, 0.1);
-  border: 1px solid rgba(129, 206, 94, 0.5);
-  color: rgba(129, 206, 94, 1);
-}
-// 审查
-.status-style-3 {
-  background-color: rgba(255, 98, 98, 0.1);
-  border: 1px solid rgba(255, 98, 98, 0.5);
-  color: rgba(255, 98, 98, 1);
-}
-// 报批
-.status-style-4 {
-  background-color: rgba(48, 175, 255, 0.1);
-  border: 1px solid rgba(48, 175, 255, 0.5);
-  color: rgba(48, 175, 255, 1);
-}
-// 发布
-.status-style-5 {
-  background-color: rgba(6, 176, 140, 0.1);
-  border: 1px solid rgba(6, 176, 140, 0.5);
-  color: rgba(6, 176, 140, 1);
-}
-// 现行有效
-.status-style-6 {
-  background-color: rgba(137, 138, 233, 0.1);
-  border: 1px solid rgba(137, 138, 233, 0.5);
-  color: rgba(137, 138, 233, 1);
-}
-// 废止
-.status-style-7 {
-  background-color: rgba(156, 177, 208, 0.1);
-  border: 1px solid rgba(156, 177, 208, 0.5);
-  color: rgba(156, 177, 208, 1);
-}
 </style>