0826会务倒退表

src/components/OP/AffairsBackward.vue

@@ -0,0 +1,230 @@
+<template>
+    <div class="affairbackward-all">
+        <el-table :data="tableDatass" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
+            <el-table-column prop="title" label="项目">
+            </el-table-column>
+            <el-table-column prop="date" label="时间">
+            </el-table-column>
+            <el-table-column prop="content" label="内容">
+            </el-table-column>
+            <el-table-column prop="remark" label="备注">
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            tableData: [
+                {
+                    title:'嘉宾邀约',
+                    Childdate:[
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                    ],
+                },
+                {
+                    title:'服务方案',
+                    Childdate:[
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                    ],
+                },
+                {
+                    title:'场地协调',
+                    Childdate:[
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                    ],
+                },
+                {
+                    title:'视觉呈现',
+                    Childdate:[
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                    ],
+                },
+                {
+                    title:'物料制作',
+                    Childdate:[
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
+                    ],
+                },
+            ],
+            tableDatas:[
+                {
+                    title:'1',
+                    date:'提前45天',
+                    content:'初筛邀请对象，结合客户需求，梳理邀请名单',
+                    Remark:'实际根据项目启动时间，倒推时间是否足够'
+                },
+                {
+                    title:'1',
+                    date:'提前45天',
+                    content:'初筛邀请对象，结合客户需求，梳理邀请名单',
+                    Remark:'实际根据项目启动时间，倒推时间是否足够'
+                },
+                {
+                    title:'2',
+                    date:'提前45天',
+                    content:'初筛邀请对象，结合客户需求，梳理邀请名单',
+                    Remark:'实际根据项目启动时间，倒推时间是否足够'
+                },
+                {
+                    title:'2',
+                    date:'提前45天',
+                    content:'初筛邀请对象，结合客户需求，梳理邀请名单',
+                    Remark:'实际根据项目启动时间，倒推时间是否足够'
+                },
+                {
+                    title:'2',
+                    date:'提前45天',
+                    content:'初筛邀请对象，结合客户需求，梳理邀请名单',
+                    Remark:'实际根据项目启动时间，倒推时间是否足够'
+                },
+                {
+                    title:'3',
+                    date:'提前45天',
+                    content:'初筛邀请对象，结合客户需求，梳理邀请名单',
+                    Remark:'实际根据项目启动时间，倒推时间是否足够'
+                },
+                {
+                    title:'3',
+                    date:'提前45天',
+                    content:'初筛邀请对象，结合客户需求，梳理邀请名单',
+                    Remark:'实际根据项目启动时间，倒推时间是否足够'
+                },
+                {
+                    title:'3',
+                    date:'提前45天',
+                    content:'初筛邀请对象，结合客户需求，梳理邀请名单',
+                    Remark:'实际根据项目启动时间，倒推时间是否足够'
+                },
+                {
+                    title:'3',
+                    date:'提前45天',
+                    content:'初筛邀请对象，结合客户需求，梳理邀请名单',
+                    Remark:'实际根据项目启动时间，倒推时间是否足够'
+                },
+                {
+                    title:'4',
+                    date:'提前45天',
+                    content:'初筛邀请对象，结合客户需求，梳理邀请名单',
+                    Remark:'实际根据项目启动时间，倒推时间是否足够'
+                },
+            ],
+            tableDatass:[],
+            rowarr:[],
+            spanArr: [], // 存储每个项目对应的行数
+            position: 0   // 存储spanArr的索引位置
+        }
+    },
+    created() {
+        this.getSpanArr();
+        this.flattenData();
+    },
+    methods:{
+        // 将嵌套的数据结构转换为扁平结构
+        flattenData() {
+            this.tableDatass = [];
+            this.tableData.forEach(item => {
+                item.Childdate.forEach(child => {
+                    this.tableDatass.push({
+                        title: item.title,
+                        date: child.date,
+                        content: child.content,
+                        remark: child.Remark
+                    });
+                });
+            });
+            console.log(this.tableDatass);
+            
+        },
+        // 计算每个项目对应的行数
+        getSpanArr() {
+            this.spanArr = [];
+            this.position = 0;
+            
+            this.tableData.forEach(item => {
+                this.spanArr.push(item.Childdate.length);
+            });
+        },
+        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+            if (columnIndex === 0) {
+                let currentRowTitle = row.title;
+                let spanCount = 0;
+                let pos = 0;
+
+                // 找到当前项目在spanArr中的位置
+                for (let i = 0; i < this.tableData.length; i++) {
+                    if (this.tableData[i].title === currentRowTitle) {
+                        spanCount = this.spanArr[i];
+                        break;
+                    }
+                    pos += this.spanArr[i];
+                }
+
+                // 如果是当前项目的第一个行，返回合并行数
+                if (rowIndex === pos) {
+                    return {
+                        rowspan: spanCount,
+                        colspan: 1
+                    };
+                } else {
+                    return {
+                        rowspan: 0,
+                        colspan: 0
+                    };
+                }
+                // if (rowIndex % 2 === 0) {
+                //     return {
+                //         rowspan: 2,
+                //         colspan: 1
+                //     };
+                // } else {
+                //     return {
+                //         rowspan: 0,
+                        // colspan: 0
+                //     };
+                // }
+            }
+        }
+    }
+}
+</script>
+<style>
+    .affairbackward-all {
+    background-color: #fff;
+    padding: 10px;
+    box-shadow: 0 0 5px #0005;
+    border-radius: 10px;
+    min-height: 830px;
+}
+</style>

src/router/index.js

@@ -139,6 +139,7 @@ import SharedFile from '@/components/OP/SharedFile';
 import tesseractTest from '@/components/OP/tesseractTest';
 import WorldGamescost from '@/components/Resource/WorldGamescost'
 import ConferenceCost from '@/components/Finance/ConferenceCost'
+import AffairsBackward from '@/components/OP/AffairsBackward';
 
 Vue.use(Router)
 
@@ -830,6 +831,11 @@ export default new Router({
           name: 'ConferenceCost',
           component: ConferenceCost
         },
+        {
+          path: '/home/AffairsBackward',
+          name: 'AffairsBackward',
+          component: AffairsBackward
+        },
       ]
     },
     {