oa初步完成

ruoyi-ui/src/views/oa/closure/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="container">
+    <h1>项目结项报告</h1>
+    <p><strong>项目名称：</strong> {{ project.projectName }}</p>
+    <p><strong>项目总成本：</strong> ¥{{ project.funds }}</p>
+    <p><strong>项目用时：</strong> {{ (new Date(project.postponeTime)-new Date(project.beginTime))/1000/60/60/24 }}天</p>
+
+    <div v-for="(item,index) in stepsList" :key="index">
+      <h2>{{item.dictLabel}}-人员情况</h2>
+      <div v-for="(task,index) in item.taskList" :key="index">
+        <h3>负责人-{{task.collaborator}}</h3>
+
+        <table>
+          <tr>
+            <th>姓名</th>
+
+            <th>工作时长 (天)</th>
+            <th>人力成本 (元/天)</th>
+            <th>总成本 (元)</th>
+          </tr>
+          <tr v-for="member in task.workerList" :key="member.name">
+            <td>{{ member.nickName }}</td>
+
+            <td>{{ member.workTime }}</td>
+            <td>{{ member.laborCost }}</td>
+            <td>{{ (member.workTime * member.laborCost).toLocaleString() }}</td>
+          </tr>
+          <tr class="summary">
+            <td colspan="3">总计</td>
+            <td>¥{{ task.projectCostTotal }}</td>
+          </tr>
+        </table>
+      </div>
+
+    </div>
+
+
+    <div class="footer">
+      <p>© 2024 项目结项报告 | 由项目团队生成</p>
+    </div>
+  </div>
+</template>
+<script>
+
+import {getProject} from "@/api/oa/project";
+import {getTaskByDictType} from "@/api/oa/task";
+
+export default {
+  name: "closure",
+  data() {
+    return {
+      // 项目名
+      projectName: "AI 数据分析系统开发",
+
+      // 项目涉及人员
+      teamMembers: [
+        {name: '李某某', role: '项目经理', hours: 160, rate: 300, completed: '已完成'},
+        {name: '王某', role: '前端开发', hours: 150, rate: 250, completed: '已完成'},
+        {name: '张某', role: '后端开发', hours: 170, rate: 280, completed: '进行中'},
+        {name: '陈某', role: '测试工程师', hours: 140, rate: 220, completed: '已完成'},
+        {name: '赵某', role: '产品经理', hours: 130, rate: 350, completed: '已完成'}
+      ],
+
+      // 项目花费
+      projectCost: 990000,
+      totalHumanCost: 10000,
+      project:{},
+      stepsList:[],
+      active:{}
+    }
+  },
+  created() {
+
+    this.projectId = this.$route.params.projectId;
+
+    this.getProject()
+    this.getTaskByDictType(this.projectId);
+  },
+  methods:{
+    getProject(){
+      getProject(this.projectId).then(response => {
+        this.project = response.data;
+      })
+    },
+
+    /**new-工作类型进度**/
+    getTaskByDictType(pid) {
+      getTaskByDictType(pid).then(res => {
+        //排序
+        this.stepsList = res.data.data.taskList.sort((a, b) => parseInt(a.dictValue) - parseInt(b.dictValue));
+        this.active = res.data.data.active;
+        console.log(this.stepsList)
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+* {
+  margin: 15px auto;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f5f5f5;
+  padding: 20px;
+}
+
+.container {
+  max-width: 800px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  margin: auto;
+}
+
+h1 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+
+th, td {
+  padding: 12px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+
+th {
+  background-color: #007bff;
+  color: #fff;
+}
+
+tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.summary {
+  font-weight: bold;
+  color: #007bff;
+}
+
+.footer {
+  text-align: center;
+  margin-top: 30px;
+  font-size: 14px;
+  color: #666;
+}
+
+</style>