工作台项目列表+优化

src/views/workbench/team/components/projectList.vue

@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <div class="search-control">
+      <span :class="{'color-blue': status===1}" @click="setStatus(1)">进行中的项目</span>
+      <span :class="{'color-blue': status===0}" @click="setStatus(0)">未开始的项目</span>
+      <span :class="{'color-blue': status===2}" @click="setStatus(2)">已完成的项目</span>
+    </div>
+    <el-table
+      ref="planTable"
+      :data="projectList"
+      style="width: 100%;"
+      size="mini"
+      row-key="id"
+      :header-cell-style="{ color: 'rgb(74, 74, 74)', fontSize: '14px', fontWeight: '500'}"
+      :row-style="{ fontSize: '14px' }"
+      show-overflow-tooltip="true"
+      :header-row-style="{height: '50px'}"
+    >
+      <el-table-column label="优先级" prop="priority" width="100" sortable align="center">
+        <template slot-scope="scope" style="text-align: center;">
+          <span class="div_priority" :class="scope.row.priorityStr">
+            {{ scope.row.priorityStr }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="项目名称" min-width="250" align="left" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <div class="table-project-name" @click="project_link(scope.row.id)">
+            <span class="id">PROJECT-{{ scope.row.id }}</span>
+            <span class="name">{{ scope.row.name }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="业务线" width="250" align="center" prop="bizStr" show-overflow-tooltip />
+      <el-table-column label="状态" width="250" align="center">
+        <template slot-scope="scope">
+          <el-select
+            v-model="scope.row.status"
+            :class="['status'+scope.row.status]"
+            class="btns"
+            size="mini"
+            @change="changeStatus(scope.row)"
+          >
+            <el-option v-for="item in allStatus" :key="'status'+item.value" :label="item.name" :value="item.value" />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="项目类型" width="200" align="center" prop="projectTypeStr" show-overflow-tooltip />
+      <el-table-column label="项目负责人" width="200" align="center" prop="projectOwnerZh" show-overflow-tooltip />
+    </el-table>
+    <div align="right">
+      <el-pagination
+        :page-sizes="[15, 30, 45, total]"
+        :current-page.sync="pages.curIndex"
+        :page-size="pages.pageSize"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import {
+  projectSelfList,
+  projectTeamList
+} from '@/api/workSchedule'
+import { projectUpdate } from '@/api/projectIndex'
+export default {
+  props: {
+    searchForm: {
+      type: Object,
+      default: () => {
+        return {
+          teamId: null,
+          bizId: null
+        }
+      },
+      required: true
+    },
+    type: {
+      type: String,
+      default: 'person',
+      required: true
+    }
+  },
+  data() {
+    return {
+      projectList: [], // 需求列表
+      allStatus: [ // 状态列表
+        { value: 0, name: '未开始' },
+        { value: 1, name: '进行中' },
+        { value: 2, name: '已完成' }
+      ],
+      pages: {
+        pageSize: 15,
+        curIndex: 1
+      },
+      total: 0,
+      status: null // 列表状态
+    }
+  },
+  watch: {
+    searchForm: {
+      handler(newV) {
+        this.getProjectList()
+      },
+      deep: true
+    },
+    type: {
+      handler(newV) {
+        this.getProjectList()
+      }
+    }
+  },
+  created() {
+    this.getProjectList()
+  },
+  methods: {
+    setStatus(val) {
+      this.status === val ? this.status = null : this.status = val
+      this.getProjectList()
+    },
+    handleSizeChange(val) {
+      this.pages.pageSize = val
+      this.getProjectList()
+    },
+    handleCurrentChange(val) {
+      this.pages.curIndex = val
+      this.getProjectList()
+    },
+    async getProjectList() { // 获取需求列表
+      const params = {
+        teamSearchInfo: this.searchForm,
+        status: this.status,
+        pageInfoDO: this.pages
+      }
+      let res = null
+      if (this.type === 'person') {
+        res = await projectSelfList(params)
+      } else if (this.type === 'team') {
+        res = await projectTeamList(params)
+      }
+      if (res && res.code === 200) {
+        this.projectList = res.data
+        this.total = res.total
+      }
+    },
+    async changeStatus(e) { // 状态改变
+      const user = {
+        name: localStorage.getItem('realname'),
+        ename: localStorage.getItem('username'),
+        id: ''
+      }
+      const projectInfo = e
+      const res = await projectUpdate({ projectInfo, user })
+      if (res.code === 200) {
+        this.getProjectList()
+        this.$message({ message: '修改成功', type: 'success', duration: 1000, offset: 150 })
+      }
+    },
+    project_link(id) {
+      this.$router.push({ name: '项目详情', query: { id: id }})
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@mixin setStatus($color) {
+  input {
+    color:$color;
+    border: 1px solid $color;
+  }
+  >>> .el-select__caret{
+    color:$color;
+  }
+  >>> .el-input__inner{
+    color:$color;
+    border-color: $color;
+  }
+  >>> .el-input__inner:focus {
+    border-color: $color;
+  }
+}
+>>>.el-row .el-col {
+  margin: 10px 0;
+}
+.color-blue {
+	color:#409EFF;
+}
+.P0 {
+  background-color: #F56C6C;
+}
+.P1 {
+  background-color: #FF8952;
+}
+.P2 {
+  background-color: #F5E300;
+}
+.P3 {
+  background-color: #7ED321;
+}
+.P4 {
+  background-color: #61D3B8;
+}
+.P5 {
+  background-color: #69B3FF;
+}
+.P6 {
+  background-color: #BDBDBD;
+}
+.status0 {
+  @include setStatus(#409EFF)
+}
+.status1 {
+  @include setStatus(#FF8952)
+}
+.status2 {
+  @include setStatus(#7ED321)
+}
+.search-control {
+	padding: 30px 17px 0;
+	color: #333B4A;
+	font-size: 14px;
+	span {
+		margin-right: 35px;
+		cursor: pointer;
+	}
+}
+.div_priority {
+  text-align: center;
+  color: #ffffff;
+  padding: inherit;
+  border-radius: 4px;
+  width: 40px;
+  display: inline-block;
+}
+.table-project-name {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  .id {
+    color: #A7AEBC;
+    font-size: 10px;
+  }
+  .name {
+    font-size: 14px;
+    color: #666666;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+</style>