From 8defdff039eb0c8ae2f5711a6dcd4b668a5eef20 Mon Sep 17 00:00:00 2001
From: wuyize <wuyize25@163.com>
Date: Wed, 6 Jul 2022 15:25:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=B7=A5=E4=BD=9C=E9=A1=B9?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/assignment.svg |   2 +
 src/assets/icons/defect.svg     |   2 +
 src/assets/icons/demand.svg     |   2 +
 src/views/Project.vue           |  36 ++++++---
 src/views/ProjectWorkitem.vue   | 134 +++++++++++++++++++++++++++++++-
 5 files changed, 162 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/icons/assignment.svg
 create mode 100644 src/assets/icons/defect.svg
 create mode 100644 src/assets/icons/demand.svg

diff --git a/src/assets/icons/assignment.svg b/src/assets/icons/assignment.svg
new file mode 100644
index 0000000..302e75e
--- /dev/null
+++ b/src/assets/icons/assignment.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1657075218554" class="icon" viewBox="0 0 1044 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2223" xmlns:xlink="http://www.w3.org/1999/xlink" width="522" height="512"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M840.454 62.442h-638.605c-76.445 0-139.409 63.68-139.409 141.007v614.048c0 77.326 62.963 141.007 139.408 141.007h638.605c76.454 0 139.408-63.68 139.408-141.007v-614.048c0-77.326-58.454-141.007-139.408-141.007zM912.409 822.050c0 40.931-31.473 72.772-71.954 72.772h-638.605c-40.473 0-71.954-31.84-71.954-72.772v-618.603c0-40.931 31.481-72.772 71.954-72.772h638.605c40.481 0 71.954 31.84 71.954 72.772v618.603zM399.73 285.32l-98.936 100.065-44.973-45.477c-13.5-13.647-35.981-13.647-44.973 0-13.5 13.638-13.5 36.386 0 45.477l71.954 72.781c4.5 4.546 13.492 9.092 26.981 9.092 13.5 0 13.5-4.546 26.981-9.092l121.426-122.813c13.5-13.647 13.5-36.386 0-45.487-26.981-13.638-44.973-13.638-58.463-4.546zM813.473 339.908h-310.308c-22.481 0-31.481 13.638-31.481 31.84 0 22.739 13.5 31.84 31.481 31.84h310.316c22.481 0 31.473-13.647 31.473-31.84 0-18.202-13.5-31.84-31.481-31.84zM318.775 544.584c-58.463 0-103.436 45.487-103.436 104.62 0 59.125 44.973 104.611 103.436 104.611 58.473 0 103.436-45.487 103.436-104.611 0-63.68-49.463-104.62-103.436-104.62zM318.775 681.043c-22.481 0-35.973-13.647-35.973-36.386 0-22.747 13.492-36.395 35.973-36.395 22.492 0 35.981 13.647 35.981 36.395 0 22.739-17.992 36.386-35.981 36.386zM813.473 612.808h-310.308c-22.481 0-31.481 13.647-31.481 31.849 0 18.184 13.5 31.84 31.481 31.84h310.316c22.481 0 31.473-13.647 31.473-31.84 0-18.202-13.5-31.84-31.481-31.84z" p-id="2224" fill="#409EFF"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/defect.svg b/src/assets/icons/defect.svg
new file mode 100644
index 0000000..e1df828
--- /dev/null
+++ b/src/assets/icons/defect.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1657078438192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4560" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M716.8 780.8V102.4H243.2A140.8 140.8 0 0 0 102.4 243.2v537.6A140.8 140.8 0 0 0 243.2 921.6h332.8A140.8 140.8 0 0 0 716.8 780.8zM243.2 179.2h396.8v601.6c0 35.328-28.672 64-64 64h-332.8c-35.328 0-64-28.672-64-64V243.2c0-35.328 28.672-64 64-64z" fill="#F56C6C" p-id="4561"></path><path d="M780.8 102.4a140.8 140.8 0 0 0-140.8 140.8V486.4h140.8A140.8 140.8 0 0 0 921.6 345.6v-102.4A140.8 140.8 0 0 0 780.8 102.4z m0 76.8c35.328 0 64 28.672 64 64v102.4l-0.3072 6.5536A64 64 0 0 1 780.8 409.6H716.8V243.2c0-35.328 28.672-64 64-64z" fill="#F56C6C" p-id="4562"></path><path d="M716.8 102.4h51.2v51.2h-51.2z" fill="#F56C6C" p-id="4563"></path><path d="M409.6 358.4a38.4 38.4 0 0 1 38.4 38.4v128a38.4 38.4 0 0 1-76.8 0V396.8A38.4 38.4 0 0 1 409.6 358.4z" fill="#F56C6C" p-id="4564"></path><path d="M409.6 627.2m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" fill="#F56C6C" p-id="4565"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/demand.svg b/src/assets/icons/demand.svg
new file mode 100644
index 0000000..c4f8110
--- /dev/null
+++ b/src/assets/icons/demand.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1657075012424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2153" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M726.613333 187.086667c-57.333333-57.326667-133.566667-88.906667-214.646667-88.906667-81.086667 0-157.306667 31.58-214.646667 88.906667-57.326667 57.333333-88.906667 133.566667-88.906667 214.646667 0 54.146667 14.44 107.313333 41.766667 153.726667 24.1 40.96 57.64 75.84 97.506667 101.566667l0 150.726667c0 37.473333 30.48 67.96 67.953333 67.96l192.26 0c37.473333 0 67.973333-30.486667 67.973333-67.96l0-150.506667c39.953333-25.686667 73.58-60.573333 97.766667-101.58 27.393333-46.473333 41.866667-99.713333 41.866667-153.94C815.513333 320.653333 783.953333 244.426667 726.613333 187.086667zM607.913333 827.166667 415.653333 827.166667c-10.706667 0-19.42-8.706667-19.42-19.42l0-65.966667 231.12 0 0 65.966667C627.353333 818.466667 618.62 827.166667 607.913333 827.166667zM731.82 531.006667c-22.34 37.9-54.273333 69.58-92.366667 91.62l-12.106667 7.013333 0 63.593333L396.233333 693.233333l0-63.793333-12.08-7.02c-37.993333-22.066667-69.846667-53.733333-92.133333-91.58-22.933333-38.98-35.053333-83.62-35.053333-129.12 0-68.12 26.52-132.153333 74.693333-180.32s112.2-74.68 180.306667-74.68c68.12 0 132.166667 26.52 180.326667 74.693333 48.16 48.173333 74.68 112.2 74.68 180.32C766.98 447.3 754.82 492.006667 731.82 531.006667zM605.06 905.92 418.88 905.92c-13.413333 0-24.273333 10.86-24.273333 24.273333 0 13.4 10.86 24.26 24.273333 24.26l186.18 0c13.413333 0 24.286667-10.86 24.286667-24.26C629.34 916.78 618.46 905.92 605.06 905.92z" p-id="2154" fill="#E6A23C" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path></svg>
\ No newline at end of file
diff --git a/src/views/Project.vue b/src/views/Project.vue
index a90a155..2d3dc8c 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -5,14 +5,15 @@
       <el-menu
           router
           style="height: 100%"
-          default-active="1">
+          :default-active="menuDefaultActive">
         <div
             style="width: 100%;height: 60px;margin: 30px 0 20px 20px; display: flex; flex-direction: row; align-items: center">
           <svg-icon style="width: 52px;height: 52px;margin: 10px" icon-class="logo"></svg-icon>
           <p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目<br/>管理系统</p>
         </div>
         <el-button style="width: 100%;height: 40px;display: flex;flex-direction: row;justify-content: flex-start"
-                   text :icon="ArrowLeft" @click="this.router.push({path: '/'})">返回</el-button>
+                   text :icon="ArrowLeft" @click="this.router.push({path: '/'})">返回
+        </el-button>
 
         <el-menu-item index="1" :route="'/project/'+$route.params.projectId">
           <span>概览</span>
@@ -20,10 +21,7 @@
         <el-menu-item index="2" :route="'/project/'+$route.params.projectId+'/workitem'">
           <span>工作项</span>
         </el-menu-item>
-        <el-menu-item index="3" :route="'/project/'+$route.params.projectId+'/demand'">
-          <span>需求</span>
-        </el-menu-item>
-        <el-menu-item index="4" :route="'/project/'+$route.params.projectId+'/group'">
+        <el-menu-item index="3" :route="'/project/'+$route.params.projectId+'/group'">
           <span>团队</span>
         </el-menu-item>
       </el-menu>
@@ -33,18 +31,23 @@
         <div style="height: 60px; margin: 30px 30px 30px 30px; background-color: white; border-radius: 10px;
                   display: flex; flex-direction: row; align-items: center;justify-content: space-between">
           <logout-button></logout-button>
-          <span style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">{{project.projectName}}</span>
+          <span
+              style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">{{ project.projectName }}</span>
           <div style="margin: 0 30px 0 30px; ;
                   display: flex; flex-direction: row-reverse; align-items: center">
             <div style="width: 42px;height: 42px; background-color: #409EFF; border-radius: 21px;
                       display: flex; justify-content: center;align-items: center;">
-              <span style="color: white">{{ this.$store.state.staff===null? this.$store.state.staff:this.$store.state.staff.staffFullname[0] }}</span>
+              <span style="color: white">{{
+                  this.$store.state.staff === null ? this.$store.state.staff : this.$store.state.staff.staffFullname[0]
+                }}</span>
             </div>
             <div style="height: 100%; margin-right: 10px;
                       display: flex; flex-direction: column;justify-content: center;align-items: flex-end;">
             <span
                 style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 14px;font-weight: bold; ">
-              {{ this.$store.state.staff===null? this.$store.state.staff: this.$store.state.staff.staffFullname }}</span>
+              {{
+                this.$store.state.staff === null ? this.$store.state.staff : this.$store.state.staff.staffFullname
+              }}</span>
               <span style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 12px;">{{
                   staffJob
                 }}</span>
@@ -76,17 +79,30 @@ export default {
         projectName: ''
       },
       staffJob: '项目经理',
+      menuDefaultActive: '1',
     }
   },
 
   created() {
+    switch (this.$route.path.split('/').pop()) {
+      case 'workitem':
+        this.menuDefaultActive = '2';
+        break
+      case 'group':
+        this.menuDefaultActive = '3';
+        break
+      default:
+        this.menuDefaultActive = '1';
+        break
+    }
+
     this.getProjectInfo();
   },
   methods: {
     getProjectInfo() {
       const that = this
       request({
-        url: 'project/'+this.$route.params.projectId,
+        url: 'project/' + this.$route.params.projectId,
         method: 'get'
 
       }).then(response => {
diff --git a/src/views/ProjectWorkitem.vue b/src/views/ProjectWorkitem.vue
index a67d37b..d4f6e43 100644
--- a/src/views/ProjectWorkitem.vue
+++ b/src/views/ProjectWorkitem.vue
@@ -1,13 +1,139 @@
 <template>
-<div>工作项</div>
-</template>
+  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: stretch;overflow: auto">
 
+    <div style="margin: 0 40px 0 40px;
+                display: flex;flex-direction: row;justify-content: space-between">
+      <p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">工作项</p>
+    </div>
+    <div style="flex: 1; margin: 30px 30px 10px 30px; background-color: white; border-radius: 10px;padding: 20px;
+              display: flex;flex-direction: column;justify-content: space-between">
+
+      <el-table
+          ref="tableRef"
+          class="projectTable"
+          row-key="taskId"
+          lazy
+          :load="loadChildren"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+          @row-click="onRowClick"
+          :height="tableHeight"
+          :data="workitems">
+        <el-table-column prop="taskName" label="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp标题"
+                         min-width="15%">
+          <template #default="scope">
+            <div style="display: inline-block;">
+              <div style="display: flex;align-items: center">
+                <div v-if="!scope.row.hasChildren" style="width: 20px"></div>
+                <div style="width: 24px;display: flex;justify-content: center">
+                  <svg-icon v-if="scope.row.taskType==='任务'" style="width: 20px;height: 20px;"
+                            icon-class="assignment"></svg-icon>
+                  <svg-icon v-if="scope.row.taskType==='需求'" style="width: 24px;height: 24px;"
+                            icon-class="demand"></svg-icon>
+                  <svg-icon v-if="scope.row.taskType==='缺陷'" style="width: 20px;height: 20px;"
+                            icon-class="defect"></svg-icon>
+                </div>
+                <span style="margin-left: 5px">{{ scope.row.taskName }}</span>
+              </div>
+
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="taskId" label="编号" min-width="10%"/>
+        <el-table-column prop="taskStatus" label="状态" min-width="10%">
+          <template #default="scope">
+            <el-select v-model="scope.row.taskStatus" class="m-2" placeholder="Select" size="large">
+              <el-option
+                  label="待进行"
+                  value="待进行"
+              />
+              <el-option
+                  label="进行中"
+                  value="进行中"
+              />
+              <el-option
+                  label="已完成"
+                  value="已完成"
+              />
+              <el-option
+                  label="关闭"
+                  value="关闭"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="taskHolderId" label="负责人" min-width="10%"/>
+        <el-table-column prop="taskCreatedTime" label="创建时间" min-width="10%" :formatter="dateFormatter"/>
+        <el-table-column prop="taskEndTime" label="截止时间" min-width="10%" :formatter="dateFormatter"/>
+        <el-table-column prop="taskPriority" label="优先级" min-width="10%"/>
+
+
+      </el-table>
+    </div>
+  </div>
+</template>
+<script setup>
+
+</script>
 <script>
+import request from "../utils/request";
+import moment from "moment";
+
 export default {
-  name: "ProjectWorkitem"
+  name: "ProjectWorkitem",
+  data() {
+    return {
+
+      workitems: []
+    }
+  },
+  created() {
+    this.getWorkitems()
+  },
+  methods: {
+    getWorkitems() {
+      const that = this;
+      request({
+        url: 'project/' + this.$route.params.projectId + '/task/0/subtask',
+        method: 'get',
+      }).then(response => {
+        if (response.data.code === 200) {
+          //console.log(response.data.records)
+          that.workitems = response.data.data.records
+        }
+      }).catch(function (error) {
+        console.log(error)
+      })
+    },
+    loadChildren(row, treeNode, resolve) {
+      const that = this;
+      request({
+        url: 'project/' + this.$route.params.projectId + '/task/' + row.taskId + '/subtask',
+        method: 'get',
+      }).then(response => {
+        if (response.data.code === 200) {
+          resolve(response.data.data.records)
+        }
+      }).catch(function (error) {
+        console.log(error)
+      })
+
+    },
+    dateFormatter(row, column) {
+      const moment = require('moment');
+      const date = row[column.property];
+      if (date === undefined || date === null) {
+        return ''
+      }
+      return moment(date * 1000).format("yyyy-MM-DD HH:mm")
+    },
+  }
 }
 </script>
 
 <style scoped>
-
+::v-deep .cell {
+  display: flex;
+  align-items: center;
+}
 </style>
\ No newline at end of file