报告管理最新需求修改

src/components/reportList/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="rl_pre">
+    <div class="rp_top adfacjb" @click.prevent="toggleReport">
+      <div class="rlp_l adfac">
+        <div class="rlpl_l">
+          <img src="@/assets/images/agent/report.png">
+        </div>
+        <div class="rlpl_r adfac">
+          <div class="rr_pre rp1">
+            <p class="text">{{ item.companyName||'' }}</p>
+            <p class="tip">{{ item.wjName||'' }}</p>
+          </div>
+          <div class="rr_pre rp2" v-if="!isTeam">
+            <p class="text">{{ item.userName||'' }}</p>
+            <p class="tip">姓名</p>
+          </div>
+          <div class="rr_pre rp2">
+            <p class="text">{{ item.teamType||'' }}</p>
+            <p class="tip">团队类型</p>
+          </div>
+          <div class="rr_pre rp3" v-if="isTeam">
+            <p class="text">{{ item.jzDatetime||'' }}</p>
+            <p class="tip">截止日期</p>
+          </div>
+          <div class="rr_pre rp6" v-if="!isTeam">
+            <p class="text">{{ item.jzDatetime||'' }}</p>
+            <p class="tip">截止日期</p>
+          </div>
+          <div class="rr_pre rp4" v-if="isTeam">
+            <p class="text">{{ item.zdPersons||0 }}</p>
+            <p class="tip">作答人数</p>
+          </div>
+          <div class="rr_pre rp5" v-if="isTeam">
+            <p class="text">{{ item.tdPersons||0 }}</p>
+            <p class="tip">团队人数</p>
+          </div>
+        </div>
+      </div>
+      <div class="rlp_r">
+        <el-button type="primary" @click.stop="reviewReport(item)">查看报告</el-button>
+      </div>
+    </div>
+    <div class="rp_bottom" v-if="showMore">
+      <el-table :data="reportList" border cell-class-name="vertical-top-cell" empty-text="暂无报告" max-height="578px">
+        <el-table-column label="报告名称" prop="reportName" min-width="200"></el-table-column>
+        <el-table-column label="生成时间" prop="reprtTime"></el-table-column>
+        <el-table-column label="状态" prop="status" width="150">
+          <template #default="{ row }">
+            <div class="rp_status adfac">
+              <div class="rps_l" :style="{'background':sColorCfg[row.status]||'#1D2129'}"></div>
+              <div class="rps_r" :style="{'color':sColorCfg[row.status]||'#1D2129'}">{{ sTextCfg[row.status]||'未知' }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="300">
+            <template #default="scope">
+                <el-button link type="text" size="mini" @click="handleReive(scope.row)">查看</el-button>
+                <el-button link type="text" size="mini" @click="handledDelete(scope.row)">删除</el-button>
+                <el-button link type="text" size="mini" @click="handleSend(scope.row)" v-if="![1,3].includes(scope.row.status)">发送报告</el-button>
+                <el-button link type="text" size="mini" @click="handleCreate(scope.row)" v-if="scope.row.status==3">重新生成</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup name="ReportList">
+  const props = defineProps({
+    item: {
+      type: Object,
+      default: () => {}
+    },
+    reportList: {
+      type: Array,
+      default: () => []
+    },
+    isTeam: {
+      type: Boolean,
+      default: true
+    },
+    showMore: {
+      type: Boolean,
+      default: false
+    }
+  })
+  
+  import { ref, getCurrentInstance } from 'vue'
+  const { proxy } = getCurrentInstance();
+
+  const sTextCfg = {
+    0: '未发送',
+    1: '生成中',
+    2: '生成成功',
+    3: '生成失败'
+  }
+  const sColorCfg = {
+    0: '#F31616',
+    1: '#FEA400',
+    2: '#2E69EB',
+    3: '#F31616'
+  }
+
+  const emit = defineEmits(['toggleReport','reviewReport'])
+  const toggleReport = () => {
+    emit('toggleReport')
+  }
+
+  const reviewReport = (item) => {
+    emit('reviewReport', item)
+  }
+
+  const handleReive = (row) => {
+    console.log(row)
+  }
+  const handledDelete = (row) => {
+    console.log(row)
+  }
+  const handleSend = (row) => {
+    console.log(row)
+  }
+  const handleCreate = (row) => {
+    console.log(row)
+  }
+</script>
+
+<style scoped lang="scss">
+  .rl_pre{
+    padding: 24px;
+    background: #FFFFFF;
+    border-radius: 6px;
+    margin-top: 12px;
+    cursor: pointer;
+
+    .rp_top{
+      .rlp_l{
+        width: calc(100% - 112px);
+        .rlpl_l{
+          img{
+            width: 23px;
+            height: 22px;
+          }
+        }
+        .rlpl_r{
+          width: calc(100% - 23px);
+          padding-left: 24px;
+          box-sizing: border-box;
+          .rr_pre{
+            padding-right: 20px;
+            box-sizing: border-box;
+            .text{
+              font-family: PingFang-SC, PingFang-SC;
+              font-weight: bold;
+              font-size: 14px;
+              color: #252525;
+              line-height: 16px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            .tip{
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 400;
+              font-size: 14px;
+              color: #86909C;
+              line-height: 16px;
+              margin-top: 10px;
+            }
+            &.rp1{
+              flex: 1;
+            }
+            &.rp2{
+              width: 140px;
+            }
+            &.rp3,&.rp4, &.rp5{
+              width: 260px;
+            }
+            &.rp6{
+              width: 540px;
+            }
+          }
+        }
+      }
+    }
+
+    .rp_bottom{
+      border-top: 1px solid #E5E7EB;
+      margin-top: 24px;
+      padding-top: 19px;
+    }
+
+    .rp_status{
+      .rps_l{
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+      }
+      .rps_r{
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        margin-left: 10px;
+      }
+    }
+  }
+</style>

src/views/modules/agent/report.vue

@@ -20,54 +20,25 @@
         </div>
         <template v-if="tidx===1">
             <div class="list">
-                <div class="l_item adfacjb" v-for="(item, index) in teamList" :key="index">
-                    <div class="li_l adfac">
-                        <div class="li_pre">
-                            <p class="lit_text">{{item.title}}</p>
-                            <p class="lit_tip">产品研发 · 创新科技</p>
-                        </div>
-                        <div class="li_pre">
-                            <p class="lit_text">{{item.time}}</p>
-                            <p class="lit_tip">报告时间</p>
-                        </div>
-                        <div class="li_pre">
-                            <p class="lit_text">{{item.persons}}/{{ item.sum }}</p>
-                            <p class="lit_tip">答卷人数</p>
-                        </div>
-                    </div>
-                    <div class="li_r">
-                        <el-button type="primary">查看报告</el-button>
-                    </div>
-                </div>
+                <reportList :item="item" :reportList="item.reportList" :showMore="item.showMore"
+                    v-for="(item, index) in teamList" :key="index"
+                    @toggleReport="e=>toggleReportTeam(e,index)">
+                </reportList>
             </div>
         </template>
         <template v-else-if="tidx===2">
             <div class="list">
-                <div class="l_item adfacjb" v-for="(item, index) in personList" :key="index">
-                    <div class="li_l adfac">
-                        <div class="li_pre">
-                            <p class="lit_text">{{item.title}}</p>
-                            <p class="lit_tip">产品研发 · 创新科技</p>
-                        </div>
-                        <div class="li_pre">
-                            <p class="lit_text">{{item.time}}</p>
-                            <p class="lit_tip">报告时间</p>
-                        </div>
-                        <div class="li_pre">
-                            <p class="lit_text">{{item.name}}</p>
-                            <p class="lit_tip">用户名</p>
-                        </div>
-                    </div>
-                    <div class="li_r">
-                        <el-button type="primary">查看报告</el-button>
-                    </div>
-                </div>
+                <reportList :item="item" :reportList="item.reportList" :showMore="item.showMore" :isTeam="false"
+                    v-for="(item, index) in personList" :key="index"
+                    @toggleReport="e=>toggleReportPerson(e,index)">
+                </reportList>
             </div>
         </template>
     </div>
 </template>
 
 <script setup name="">
+    import reportList from '@/components/reportList/index.vue'
     import { ref, getCurrentInstance } from 'vue'
     const { proxy } = getCurrentInstance();
     
@@ -78,21 +49,94 @@
         sort: ''
     })
     const teamList = ref([
-        {title:'TechCorp 领导团队评估',time:'2023-05-18 12:00:30',sum:20,persons:20},
-        {title:'TechCorp 领导团队评估',time:'2023-05-18 12:00:30',sum:20,persons:20},
-        {title:'TechCorp 领导团队评估',time:'2023-05-18 12:00:30',sum:20,persons:20}
-
+        {
+            companyName:'甜梦巧克力工厂',
+            wjName:'问卷名称问卷名称问卷名称问卷名称问卷名称',
+            teamType:'市场部',
+            jzDatetime:'2025-06-18 12:00:30',
+            zdPersons:20,
+            tdPersons:99,
+            showMore:false,
+            reportList:[]
+        },
+        {
+            companyName:'甜梦巧克力工厂',
+            wjName:'问卷名称问卷名称问卷名称问卷名称问卷名称',
+            teamType:'市场部',
+            jzDatetime:'2025-06-18 12:00:30',
+            zdPersons:20,
+            tdPersons:99,
+            showMore:false,
+            reportList:[]
+        },
+        {
+            companyName:'甜梦巧克力工厂',
+            wjName:'问卷名称问卷名称问卷名称问卷名称问卷名称',
+            teamType:'市场部',
+            jzDatetime:'2025-06-18 12:00:30',
+            zdPersons:20,
+            tdPersons:99,
+            showMore:false,
+            reportList:[]
+        }
     ])
 
     const personList = ref([
-        {title:'TechCorp 领导团队评估',time:'2023-05-18 12:00:30',name:'张三'},
-        {title:'TechCorp 领导团队评估',time:'2023-05-18 12:00:30',name:'张三'},
-        {title:'TechCorp 领导团队评估',time:'2023-05-18 12:00:30',name:'张三'}
+        {
+            companyName:'甜梦巧克力工厂',
+            wjName:'问卷名称问卷名称问卷名称问卷名称问卷名称',
+            userName:'刘俊',
+            teamType:'市场部',
+            jzDatetime:'2025-06-18 12:00:30',
+            showMore:false,
+            reportList:[]
+        },
+        {
+            companyName:'甜梦巧克力工厂',
+            wjName:'问卷名称问卷名称问卷名称问卷名称问卷名称',
+            userName:'刘俊',
+            teamType:'市场部',
+            jzDatetime:'2025-06-18 12:00:30',
+            showMore:false,
+            reportList:[]
+        },
+        {
+            companyName:'甜梦巧克力工厂',
+            wjName:'问卷名称问卷名称问卷名称问卷名称问卷名称',
+            userName:'刘俊',
+            teamType:'市场部',
+            jzDatetime:'2025-06-18 12:00:30',
+            showMore:false,
+            reportList:[]
+        }
     ])
 
     const handleChangeTab = (idx) => {
         tidx.value = idx
     }
+
+    const toggleReportTeam = (e,idx) => {
+        teamList.value[idx].showMore = !teamList.value[idx].showMore;
+        if(teamList.value[idx].showMore){
+            teamList.value[idx].reportList = [
+                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:1},
+                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:3},
+                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:0},
+                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:2}
+            ];
+        }else teamList.value[idx].reportList = [];
+    }
+    const toggleReportPerson = (e,idx) => {
+        personList.value[idx].showMore = !personList.value[idx].showMore;
+        if(personList.value[idx].showMore){
+            personList.value[idx].reportList = [
+                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:1},
+                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:3},
+                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:0},
+                {reportName:'报告名称报告名称报告名称报告名称',reprtTime:'2025-06-18 12:00:30',status:2}
+            ];
+        }else personList.value[idx].reportList = [];
+    }
 </script>
 
 <style scoped lang="scss">