From 6032c814e2c371d4b72facc6a2cabc0f3261c284 Mon Sep 17 00:00:00 2001
From: rdpnr_hemingxia <rdpnr_he.mingxia@unisinsight.com>
Date: Fri, 21 Mar 2025 18:01:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9C=80=E6=B1=82=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../project/demandManage/demandManage.vue     | 337 ++++++++++++++++++
 1 file changed, 337 insertions(+)
 create mode 100644 src/views/project/demandManage/demandManage.vue

diff --git a/src/views/project/demandManage/demandManage.vue b/src/views/project/demandManage/demandManage.vue
new file mode 100644
index 0000000..7c91f3f
--- /dev/null
+++ b/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>