版本页面优化

src/views/projectManage/requirement/details/index.vue

@@ -126,14 +126,15 @@
         </div>
       </el-aside>
     </el-container>
-    <el-main id="requirement_details" style="margin: 0 2% 0 2%;" class="layout_main">
-      <div style="font-size: 18px;margin-bottom: 2%">
+    <el-main id="requirement_details" style="margin: 0 2% 0 2%;padding: 0" class="layout_main">
+      <div style="font-size: 18px;margin: 2%">
         <b style="color: #409EFF;">I</b>任务
       </div>
-      <el-radio-group v-model="radio" size="mini" style="float: right;margin-bottom: 1%">
+      <el-radio-group v-model="radio" size="mini" style="float: right;margin: 0 1% 1% 0">
         <el-radio-button label="列表" />
         <el-radio-button label="甘特图" />
       </el-radio-group>
+      <br>
       <el-table
         v-if="radio === '列表'"
         v-loading="loading.table"
@@ -176,7 +177,8 @@
           <template v-slot="scope">{{ getQaOrRdNameList(scope.row.qaList) }}</template>
         </el-table-column>
       </el-table>
-      <el-container style="margin-top: 2%;font-size: 14px;color: #333333">
+      123
+      <el-container style="margin: 2%;font-size: 14px;color: #333333">
         <el-aside width="30%">
           <div>预期上线版本:123</div>
           <div>

src/views/projectManage/requirement/list/index.vue

@@ -115,7 +115,7 @@
       >
         <el-table-column prop="priority" label="优先级" sortable min-width="8%">
           <template v-slot="scope">
-            <el-tag size="mini" :type="getType(scope.row.priority)">{{ 'P'+scope.row.priority }}</el-tag>
+            <div class="div_priority" :style="{background: priorityColors[scope.row.priority % priorityColors.length]}">{{ 'P'+scope.row.priority }}</div>
           </template>
         </el-table-column>
         <el-table-column prop="name" label="需求名称" min-width="15%" />
@@ -172,6 +172,7 @@ export default {
   },
   data() {
     return {
+      priorityColors: ['#F56C6C', '#FF8952', '#7ED321', '#61D3B8', '#F7AD3F', '#69B3FF', '#C889FF'],
       currentRow: null,
       searchInfo: {
         belongingProject: [],
@@ -267,21 +268,15 @@ export default {
         case 0:
           type = 'danger'
           break
-        case 2:
+        case 1:
           type = 'warning'
           break
-        case 3:
+        case 2:
           type = ''
           break
-        case 4:
+        case 3:
           type = 'success'
           break
-        case 5:
-          type = 'info'
-          break
-        case 6:
-          type = 'info'
-          break
         default:
           type = 'info'
       }
@@ -373,6 +368,12 @@ export default {
   width: -moz-fit-content;
   color: #ffffff;
 }
+.div_priority {
+  color: #ffffff;
+  width:fit-content;
+  padding: 0 12px;
+  border-radius: 4px;
+}
 </style>
 
 <style>

src/views/projectManage/version/list/index.vue

@@ -48,9 +48,9 @@
         :cell-style="{textAlign: 'center'}"
         @current-change="handleCurrentRowChange"
       >
-        <el-table-column prop="priority" label="优先级" min-width="10%">
+        <el-table-column prop="priority" label="优先级" min-width="8%">
           <template v-slot="scope">
-            <el-tag size="mini" :type="getPriorityTagType(scope.row.priority)">{{ 'P'+scope.row.priority }}</el-tag>
+            <div class="div_priority" :style="{background: priorityColors[scope.row.priority%priorityColors.length]}">{{ 'P'+scope.row.priority }}</div>
           </template>
         </el-table-column>
         <el-table-column prop="requirementName" label="需求名称" min-width="10%" />
@@ -61,7 +61,7 @@
         </el-table-column>
         <el-table-column prop="pmName" label="PM" min-width="10%" />
         <el-table-column prop="status" label="状态" min-width="10%" />
-        <el-table-column prop="statusInfoCountList" label="任务" min-width="30%">
+        <el-table-column prop="statusInfoCountList" label="任务" min-width="35%">
           <template v-slot="scope">
             <version-chart
               :chart-id="'taskCount' + scope.$index"
@@ -104,6 +104,7 @@ export default {
   },
   data() {
     return {
+      priorityColors: ['#F56C6C', '#FF8952', '#7ED321', '#61D3B8', '#F7AD3F', '#69B3FF', '#C889FF'],
       tableData: [],
       loading: false,
       searchInfo: {
@@ -268,21 +269,15 @@ export default {
         case 0:
           type = 'danger'
           break
-        case 2:
+        case 1:
           type = 'warning'
           break
-        case 3:
+        case 2:
           type = ''
           break
-        case 4:
+        case 3:
           type = 'success'
           break
-        case 5:
-          type = 'info'
-          break
-        case 6:
-          type = 'info'
-          break
         default:
           type = 'info'
       }
@@ -325,6 +320,7 @@ export default {
       this.getVersionHomePageList()
     },
     getVersionHomePageList() {
+      this.loading = true
       getVersionHomePageList(this.searchForm)
         .then(res => {
           if (res.code === 200) {
@@ -336,6 +332,7 @@ export default {
             this.tableData = null
             this.$message.warning(res.msg)
           }
+          this.loading = false
         })
     },
     createTaskOption(data) {
@@ -403,7 +400,6 @@ export default {
             for (const i in enums.taskStage) {
               this.versionEnum.taskStageMap[enums.taskStage[i].code] = enums.taskStage[i].msg
             }
-            console.log(this.versionEnum)
           } else {
             this.$message.warning(res.msg)
           }
@@ -423,6 +419,9 @@ export default {
   border-radius: 8px;
   background-color: #ffffff;
 }
+.layout_main {
+  padding: 0
+}
 .layout_header {
   margin: 2%;
   line-height: 60px;
@@ -430,4 +429,10 @@ export default {
 .layout_main {
   margin: 0 2% 2% 2%
 }
+.div_priority {
+  color: #ffffff;
+  width:fit-content;
+  padding: 0 12px;
+  border-radius: 4px;
+}
 </style>