#27334

Tower: 4.7 web 云端工作管理列表：表格样式优化 https://tower.im/teams/106866/todos/27334/

pages/main/index/cloud_job.vue

@@ -38,7 +38,10 @@
           >
             <div>
               {{item.name}}
-              <span class="num" :style="`background: ${item.color};`">{{item.num}}</span>
+              <span
+                class="num"
+                :style="`color: ${STATUS_COLOR[item.name]};`"
+              >{{item.num}}</span>
             </div>
           </el-option>
         </el-select>
@@ -65,13 +68,9 @@
     <div class="table">
       <el-table
         v-if="tableData.length"
-        width="100%"
-        height="100%"
-        border
+        stripe
         style="width: 100%"
         :data="tableData"
-        :row-class-name="tableRowClassName"
-        :row-style="tableRowClassName"
         @row-click="clickRow"
       >
         <el-table-column
@@ -88,7 +87,10 @@
               v-if="prop === 'ctrl'"
               @click="clickDetail(scope.row['id'])"
             >{{scope.row[prop]}}</el-button>
-            <span v-else-if="prop === 'status'">{{scope.row['statusName']}}</span>
+            <span
+              v-else-if="prop === 'status'"
+              :style="`color: ${STATUS_COLOR[scope.row['statusName']]};`"
+            >{{scope.row['statusName']}}</span>
             <span v-else-if="prop === 'id'">
               {{scope.row['id']}}
               <span v-if="!scope.row.deposit_status" style="color: red;">(待托管)</span>
@@ -158,7 +160,16 @@ const tableProps = [
   "companyTotalPrice",
   "personTotalPrice",
 ]
-
+const STATUS_COLOR = {
+  '待审核': '#F56C6C',
+  '审核拒绝': 'rgb(253, 226, 226)',
+  '对接开发者': '#E6A23C',
+  '面试中': '#E6A23C',
+  '确认聘用': '#E6A23C',
+  '开发中': '#67C23A',
+  '结束合作': '#E6A23C',
+  '取消': '#E6A23C'
+};
 export default {
   data() {
     return {
@@ -186,6 +197,8 @@ export default {
       tableHeaders,
       // 列表头字段
       tableProps,
+      // 状态颜色
+      STATUS_COLOR,
       // 列表数据
       tableData: [],
       nums: {},
@@ -242,7 +255,7 @@ export default {
         "info": "返回统计数据",
         "status": "yes"
       }// await this.$post('https://dev.test.proginn.com/rooter/ajaxrooternums')
-      if(res) {
+      if (res) {
         console.log(res.data)
       }
     },
@@ -261,7 +274,7 @@ export default {
         not_deposit: this.unDeposit ? '1' : '0',
         page: this.currentPage,
       })
-      if(res) {
+      if (res) {
         this.tableData = []
         const data = res.data.listData
         const list = data.list
@@ -275,7 +288,7 @@ export default {
      */
     async getDirection() {
       let res = await this.$post('/api/admin/job/get_direction')
-      if(res) {
+      if (res) {
         this.directions = res.data
       }
     },
@@ -284,12 +297,12 @@ export default {
      */
     async getJobStatus() {
       let res = await this.$post('/api/admin/job/getJobStatus')
-      if(res) {
+      if (res) {
         let numObj = res.data.status_num
         this.nums = numObj
         this.statuses = res.data.status_name.map(name => {
           let item = { name }
-          switch(name) {
+          switch (name) {
             case '全部':
               item.num = numObj.all.num
               break
@@ -342,7 +355,7 @@ export default {
     // 根据状态显示图表样式
     tableRowClassName({ row, rowIndex }) {
       let className
-      switch(row.statusName) {
+      switch (row.statusName) {
         case '待审核':
           className = 'background: #E1F3D8;'
           break
@@ -402,7 +415,7 @@ export default {
      */
     async createPeriod() {
       let res = await this.$post('/api/admin/job/create_period')
-      if(res) {
+      if (res) {
         this.$message({
           message: '生成成功',
           type: 'success'
@@ -414,7 +427,7 @@ export default {
      */
     async finishPeriod() {
       let res = await this.$post('/api/admin/job/create_period')
-      if(res) {
+      if (res) {
         this.$message({
           message: '更新成功',
           type: 'success'
@@ -430,7 +443,7 @@ export default {
     clickRow(row) {
       let id = row.id
       // 前往老的后台
-      if(location.hostname  == 'rooter.proginn.com') window.open(`https://www.proginn.com/rooter/cloudjobitem/${id}`)
+      if (location.hostname == 'rooter.proginn.com') window.open(`https://www.proginn.com/rooter/cloudjobitem/${id}`)
       else window.open(`https://dev.test.proginn.com/rooter/cloudjobitem/${id}`)
     },
     /**