cmc-oa/oa-ui/src/views/oa/staff/participate.vue

<!--
 * @Author: wrh
 * @Date: 2024-03-25 17:38:39
 * @LastEditors: wrh
 * @LastEditTime: 2026-02-27 11:08:31
-->
<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange" accordion>
      <el-collapse-item :name="item.projectId" v-for="item in tableData" :key="item.projectNumber">
        <template slot="title">
          <div :class="{ active: activeNames == item.projectId }">
            <svg-icon :icon-class="activeNames == item.projectId ? 'ArrowDown' : 'ArrowRight'"
              class="info-icon"></svg-icon>
            {{ item.projectNumber + ' ' + ' ' + item.projectName + ' ' + ' ' + getUserName(item.projectLeader) }}
          </div>
        </template>
        <div class="tables">
          <el-table :data="workData" style="width: 100%" align="center" v-loading="tableLoading" height="300px">
            <el-table-column type="index" label="序号" />
            <el-table-column prop="workType" label="工作类型" />
            <el-table-column prop="workItem" label="工作项目" />
            <el-table-column prop="workContent" label="工作内容" />
            <el-table-column prop="workLoad" label="工作量" />
          </el-table>
          <div class="mt10" style="text-align:right;">
            <el-pagination small layout="total,prev, pager, next" :total="workTotal" :current-page="pageNum"
              @current-change="changePageNum"></el-pagination>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      :autoScroll="false" @pagination="getListByPaticipates" />
  </div>
</template>

<script>
import { listProject } from "@/api/oa/project/project";
import { listDeclare } from "@/api/oa/declare/declare"
export default {
  props: {
    userId: {
      type: Number
    }
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        participates: null
      },
      // 总条数
      total: 0,
      tableData: [],
      activeNames: '',
      workData: [],
      workTotal: 0,
      tableLoading: false,
      pageNum: 1,
    }
  },
  created() {
    this.getListByPaticipates();
  },
  methods: {
    handleChange(val) {
      if (val) {
        this.getDeclareList();
      }
    },
    getDeclareList() {
      this.tableLoading = true
      listDeclare({ pageNum: this.pageNum, projectId: this.activeNames, userId: this.$route.query.userId }).then(res => {
        this.workData = res.rows;
        this.workTotal = res.total;
        this.tableLoading = false
      })
    },
    changePageNum(val) {
      this.pageNum = val;
      this.getDeclareList();
    },
    getListByPaticipates() {
      if (this.$route.query.userId)
        this.queryParams.participates = this.$route.query.userId;
      else
        this.queryParams.participates = this.userId;
      listProject(this.queryParams).then(res => {
        this.tableData = res.rows
        this.total = res.total
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.info-icon {
  font-size: 20px;
}

.active {
  color: var(--current-color);
}

.tables {
  border: 1px solid #e2e1e1;
  padding: 10px;
}
</style>