项目视图

src/api/task/project.js

@@ -59,3 +59,13 @@ export function getProjectList(categoryId) {
     method: 'get'
   })
 }
+
+// 新增项目
+export function projectTaskList(data) {
+  return request({
+    url: '/task/project/projectTaskList',
+    method: 'post',
+    data: data
+  })
+}
+

src/views/task/projectView.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="app-container">
+    <el-form v-model="queryParams" size="mini" :inline="true">
+      <el-form-item>
+        <el-radio-group v-model="viewType" size="mini">
+          <el-radio-button label="表格视图"></el-radio-button>
+          <el-radio-button label="甘特图视图"></el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="项目">
+        <el-select v-model="queryParams.projectIds" multiple collapse-tags size="mini" @change="selectProjectChange">
+          <el-option v-for="(item,index) in projectList" :label="item.projectName" :key="index"
+                     :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-tag type="info" size="mini"><i class="el-icon-info"/>请选择要查看的项目</el-tag>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="tableData"
+              border
+              :span-method="objectSpanMethod"
+              size="mini">
+      <el-table-column label="项目" prop="projectName"/>
+      <el-table-column label="模块" prop="moduleName"/>
+      <el-table-column label="任务名称" prop="taskName" min-width="150"/>
+      <el-table-column label="进度" prop="progressValue" width="60"/>
+      <el-table-column label="周期" width="160">
+        <template slot-scope="scope">
+          <span>{{ scope.row.beginDate + '~' + scope.row.endDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="负责人" prop="executorName"/>
+      <el-table-column label="预计工时(小时)" prop="planHours"/>
+      <el-table-column label="已用工时（小时）" prop="useHours"/>
+    </el-table>
+
+  </div>
+</template>
+
+<script>
+import {getProjectTree, listProject, projectTaskList} from "@/api/task/project";
+
+export default {
+  name: "projectView",
+  data() {
+    return {
+      viewType: '表格视图',
+      queryParams: {
+        pageSize: 1000,
+        pageNum: 1,
+        projectIds: []
+      },
+      tableData: [],
+      projectList: []
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      listProject({type: '2'}).then(res => {
+        this.projectList = res.data
+      })
+    },
+    selectProjectChange(val) {
+      this.getList()
+    },
+    getList() {
+      projectTaskList(this.queryParams).then(res => {
+          this.tableData = res.data
+        }
+      );
+    },
+    objectSpanMethod({row, column, rowIndex, columnIndex}) {
+      if (columnIndex === 0) {
+        if (row.moduleNum) {
+          return {
+            rowspan: row.moduleNum,
+            colspan: 1
+          };
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          };
+        }
+      }
+      if (columnIndex === 1) {
+        if (row.taskNum) {
+          return {
+            rowspan: row.taskNum,
+            colspan: 1
+          };
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          };
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/task/view.vue

@@ -6,7 +6,8 @@
           v-model="queryParams.projectId"
           :options="projectTree"
           @change="selectProjectChange"
-          :props="{ expandTrigger: 'hover',value:'id',label:'name' }"
+          :props="{ expandTrigger: 'hover',value:'id',label:'name', checkStrictly: true }"
+          collapse-tags
           :show-all-levels="false"></el-cascader>
       </el-form-item>
       <el-form-item label="月份" prop="month">