需求管理页面

src/utils/api.js

@@ -196,4 +196,11 @@ export const taskApi = {
 
 
 
+}
+export const demandApi = {
+    getDemandTree: (data) => request({
+        url: `/projectVersion/tree`,
+        method: 'get',
+        params: data,
+    }),
 }

src/views/project/demandManage/demandManage.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="container">
+    <!-- 左侧区域 -->
+    <transition name="slide">
+      <div class="left-panel" v-show="isTreeVisible">
+        <!-- 操作栏 -->
+        <div class="tree-controls">
+          <span>根节点数量: {{ rootNodeCount }}</span>
+          <div class="buttons">
+            <el-button size="mini" @click="addNode">添加</el-button>
+            <el-button size="mini" @click="collapseAll">收起所有节点</el-button>
+            <el-button size="mini" @click="toggleTreeVisibility">
+              {{ isTreeVisible ? "隐藏树形" : "显示树形" }}
+            </el-button>
+          </div>
+        </div>
+
+        <!-- 树形表格 -->
+        <div class="tree-view">
+          <el-table
+            :data="treeData"
+            row-key="id"
+            border
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+            ref="treeTable"
+          >
+            <el-table-column
+              prop="name"
+              label="需求名称"
+            ></el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </transition>
+
+    <!-- 右侧表格 -->
+    <div
+      class="right-panel"
+      :style="{ flex: isTreeVisible ? '1' : '0 0 100%' }"
+    >
+      <el-button
+        v-show="!isTreeVisible"
+        size="mini"
+        @click="toggleTreeVisibility"
+      >
+        显示树形
+      </el-button>
+      <el-table :data="tableData" border>
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column
+          prop="version"
+          label="版本号"
+  
+        ></el-table-column>
+        <el-table-column
+          prop="status"
+          label="需求状态"
+ 
+        ></el-table-column>
+        <el-table-column
+          prop="owner"
+          label="负责人"
+  
+        ></el-table-column>
+        <el-table-column
+          prop="estimatedTime"
+          label="预计工时"
+       
+        ></el-table-column>
+        <el-table-column
+          prop="creationTime"
+          label="创建时间"
+
+        ></el-table-column>
+        <el-table-column
+          prop="endTime"
+          label="结束时间"
+  
+        ></el-table-column>
+        <el-table-column
+          prop="priority"
+          label="优先级"
+      
+        ></el-table-column>
+        <el-table-column label="操作" width="150">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.row)"
+              >编辑</el-button
+            >
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 添加节点弹框 -->
+    <el-dialog title="添加节点" :visible.sync="dialogVisible">
+      <el-form :model="newNode">
+        <el-form-item label="节点名称">
+          <el-input v-model="newNode.name"></el-input>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-input v-model="newNode.status"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmAddNode">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { demandApi } from "@/utils/api";
+
+export default {
+  data() {
+    return {
+      // 树形表格数据
+      treeData: [
+        {
+          id: 1,
+          name: "产品需求1.0",
+          status: "进行中",
+          children: [
+            {
+              id: 11,
+              name: "用户模块",
+              status: "已完成",
+              children: [
+                {
+                  id: 111,
+                  name: "登录功能",
+                  status: "已完成",
+                },
+                {
+                  id: 112,
+                  name: "注册功能",
+                  status: "已完成",
+                },
+              ],
+            },
+            {
+              id: 12,
+              name: "订单模块",
+              status: "进行中",
+              children: [
+                {
+                  id: 121,
+                  name: "购物车",
+                  status: "进行中",
+                },
+                {
+                  id: 122,
+                  name: "支付功能",
+                  status: "待开始",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 2,
+          name: "产品需求2.0",
+          status: "待开始",
+          children: [
+            {
+              id: 21,
+              name: "数据分析模块",
+              status: "待开始",
+            },
+            {
+              id: 22,
+              name: "报表模块",
+              status: "待开始",
+            },
+          ],
+        },
+      ],
+
+      // 右侧表格数据
+      tableData: [
+        {
+          version: "v1.0.0",
+          status: "进行中",
+          owner: "张三",
+          estimatedTime: "40h",
+          creationTime: "2024-01-01",
+          endTime: "2024-01-15",
+          priority: "高",
+        },
+        {
+          version: "v1.0.1",
+          status: "已完成",
+          owner: "李四",
+          estimatedTime: "20h",
+          creationTime: "2024-01-16",
+          endTime: "2024-01-25",
+          priority: "中",
+        },
+        {
+          version: "v1.1.0",
+          status: "待开始",
+          owner: "王五",
+          estimatedTime: "60h",
+          creationTime: "2024-02-01",
+          endTime: "2024-02-28",
+          priority: "高",
+        },
+        {
+          version: "v1.2.0",
+          status: "规划中",
+          owner: "赵六",
+          estimatedTime: "80h",
+          creationTime: "2024-03-01",
+          endTime: "2024-03-31",
+          priority: "低",
+        },
+      ],
+      dialogVisible: false,
+      newNode: {
+        name: "",
+        status: "",
+      },
+      isTreeVisible: true,
+    };
+  },
+  computed: {
+    rootNodeCount() {
+      return this.treeData.length;
+    },
+  },
+  watch: {
+    isTreeVisible(newVal) {
+      this.$refs.treeTable.doLayout();
+    },
+  },
+  methods: {
+    addNode() {
+      this.dialogVisible = true;
+    },
+    confirmAddNode() {
+      if (this.newNode.name && this.newNode.status) {
+        this.treeData.push({
+          id: Date.now(),
+          name: this.newNode.name,
+          status: this.newNode.status,
+          children: [],
+        });
+        this.dialogVisible = false;
+        this.newNode.name = "";
+        this.newNode.status = "";
+      }
+    },
+    collapseAll() {
+      this.treeData.forEach((node) => {
+        this.$refs.treeTable.toggleRowExpansion(node,false);
+      });
+    },
+    toggleTreeVisibility() {
+      this.isTreeVisible = !this.isTreeVisible;
+    },
+    handleEdit(row) {
+      console.log("编辑行:", row);
+    },
+    handleDelete(row) {
+      console.log("删除行:", row);
+    },
+    getDemandTree(){
+        demandApi.getDemandTree({
+            projectId:this.projectId,
+            demandStatusList:[]
+        })
+    }
+  },
+  mounted(){
+    this.projectId=this.$route.query.id
+    this.getDemandTree()
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  height: 100vh;
+}
+
+.left-panel {
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  background-color: #fff;
+  transition: width 0.3s ease;
+}
+
+.tree-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.buttons {
+  display: flex;
+  gap: 5px;
+}
+
+.tree-view {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.right-panel {
+  flex: 1;
+  transition: width 0.3s ease;
+  padding: 10px;
+  overflow-y: auto;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-enter, .slide-leave-to /* .slide-leave-active in <2.1.8 */ {
+  width: 0;
+  opacity: 0;
+}
+</style>

src/views/project/list.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="project-list">
+    <div class="table-actions mb10" style="text-align: right;">
+      <el-button
+        type="primary"
+        size="mini"
+        @click="addProject"
+        v-hasPermi="['project:list:add']"
+        style="height: 30px;"
+        >+ 新建项目</el-button
+      >
+    </div>
     <div class="search-bar">
       <el-form
         :inline="true"
@@ -33,23 +43,14 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item class="search-buttons">
+        <el-form-item class="formBtn">
-          <el-button type="primary" @click="onSearch">查询</el-button>
+          <el-button type="primary" size="medium" @click="onSearch">查询</el-button>
-          <el-button @click="onReset">重置</el-button>
+          <el-button @click="onReset" size="medium">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
 
-    <div class="table-actions mb10">
+
-      <el-button
-        type="primary"
-        size="mini"
-        @click="addProject"
-        v-hasPermi="['project:list:add']"
-        style="height: 36px;"
-        >+ 新建项目</el-button
-      >
-    </div>
     <div class="f1 df">
       <CustomTable
         :columns="columns"
@@ -64,6 +65,13 @@
       >
         <template slot="operation" slot-scope="{ row }">
           <div class="operation-buttons">
+            <el-button
+              @click="handleDemand(row)"
+              type="text"
+              size="mini"
+              v-hasPermi="['project:list:demand']"
+              >需求管理</el-button
+            >
             <el-button
               @click="handleEdit(row)"
               type="text"
@@ -76,6 +84,7 @@
               size="mini"
               @click="handleDelete(row)"
               v-hasPermi="['project:list:delete']"
+              style="color: #666;"
               >删除</el-button
             >
           </div>
@@ -134,34 +143,25 @@ export default {
           callback: (value) => {
             let status = this.statusList.find(
               (ele) => ele.dictValue == value
-            )?.dictLabel;
+            )?.dictLabel||'';
             let color = "#333";
-            // switch (status) {
+            switch (status) {
-            //   case "待启动":
+              case "待启动":
-            //     color = "#fa721d"; // 橙色
+                color = "#999999"; // 橙色
-            //     break;
+                break;
-            //   case "已提需求-待开发":
+              case "进行中":
-            //     color = "#dd242a"; // 红色
+                color = "#FF7D00"; // 红色
-            //     break;
+                break;
-            //   case "已提需求-开发中":
+              case "已完成":
-            //     color = "#1686d8"; // 绿色
+                color = "#50B6AA"; // 绿色
-            //     break;
+                break;
-            //   case "已提需求-已完成":
+              case "#50B6AA":
-            //     color = "#5cb85c"; // 红色
+                color = "#999999"; // 红色
-            //     break;
+                break;
-            //   case "开发完成-待验收":
+              default:
-            //     color = "#f7c731"; // 黄色
+                color = "#333"; // 默认白色
-            //     break;
+                break;
-            //   case "开发完成-已验收":
+            }
-            //     color = "#8C33FF"; // 蓝色
-            //     break;
-            //   case "开发完成-已计收":
-            //     color = "#08fb9e"; // 绿色
-            //     break;
-            //   default:
-            //     color = "#000"; // 默认白色
-            //     break;
-            // }
             return `<span style="color: ${color}">${status}</span>`;
           },
         },
@@ -170,7 +170,7 @@ export default {
         {
           prop: "operation",
           label: "操作",
-          width: "150",
+          width: "250",
           fixed: "right",
           className: "operation-column",
         },
@@ -201,6 +201,13 @@ export default {
         path: "/project/detail",
       });
     },
+    handleDemand(row){
+      this.$router.push({
+        path: "/demandManage",
+        query: { id: row.projectId },
+      });
+      
+    },
     handleEdit(row) {
       this.$router.push({
         path: "/project/detail",
@@ -287,8 +294,16 @@ export default {
 .demo-form-inline .el-form-item {
   // margin-right: 50px; /* 将间距设置为 30px */
   margin-bottom: 0;
+  border: 1px solid #ccc;
+  padding-left: 10px;
+  border-radius: 4px;
+  ::v-deep .el-form-item__label{
+    color: #999 !important;
+  }
+}
+.formBtn{
+  border: none !important;
 }
-
 .demo-form-inline .el-form-item:last-child {
   margin-right: 0; /* 移除最后一个元素的右边距 */
 }
@@ -304,10 +319,15 @@ export default {
 .form-item ::v-deep .el-input,
 .form-item ::v-deep .el-select {
   // width: 100%;
+  input,select{
+    border: none !important;
+
+  }
 }
 
 .search-buttons {
   white-space: nowrap;
+
 }
 
 ::v-deep .operation-buttons .el-button {

src/views/projectBank/projectUser.vue

@@ -74,7 +74,7 @@ import { projectBank, projectApi } from "@/utils/api";
 export default {
   name: "ProjectUser",
   components: {
-    CustomTable,
+    CustomTable,  
   },
   data() {
     return {