Jsl-OA-Web-Re/src/views/personal/project/participate.vue

<template>
  <div style=" width:100%">
    <el-card style="max-width: 100vw;margin: 1.5vw;">
      <template #header><strong>我参与的</strong></template>
      <div style="display:flex;flex-direction:row;justify-content: space-around ">
        <div>
          名称
          <el-input v-model="input1" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
        </div>
        <div>
          状态
          <el-input v-model="input2" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
        </div>
        <div>
          <el-button type="primary" style="width:80px" @click="search">查询</el-button>
          <el-button style="width:80px" @click="reset">重置</el-button>
        </div>
      </div>
    </el-card>
    <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
      <div style="display:flex;flex-direction: row;justify-content: space-between">
        <el-button text type=''>项目列表</el-button>
      </div>
      <el-table ref="multipleTableRef" :data="tableData" style="max-width: 100vw;"
        @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column label="序号" width="120">
          <template #default="{row}">{{ row.id }}</template>
        </el-table-column>
        <el-table-column property="name" label="项目名称" width="120" />
        <el-table-column property="workLoad" label="工作量" show-overflow-tooltip />
        <el-table-column property="cycle" label="周期" />
        <el-table-column property="principalUser" label="负责人" />
        <el-table-column property="status" label="状态" />
        <el-table-column property="tags" label="标签">
          <template #default="{ row }">
            <el-tag v-for="tag in row.tags" :key="tag">{{ tag.toString() }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="files" label="文档(点击下载)">
          <template #default="{ row }">
            <template v-if="row.files && row.files.URI">
              <a :href="row.files.URI" target="_blank" style="color: deepskyblue">
                下载文档
              </a>
            </template>
            <template v-else>
              无
            </template>
          </template>
        </el-table-column>

        <el-table-column property="description" label="项目简介" />
        <el-table-column property="deadline" label="截止时间" />
        <el-table-column property="address" label="操作" #default="{ row }">
          
            <el-button link style="color:deepskyblue" @click="toChildSystem( row.id)">查看详情</el-button>
          
          
        </el-table-column>
      </el-table>
      <el-pagination larger background layout="prev, pager, next" :total="total" class="mt-4" :page-size="pageSize" :current-page="currentPage"
      @current-change="handleCurrentChange" style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh" />
    </el-card>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';
import { useRouter } from 'vue-router';
import { getParticipateProjectList } from '@/api/participate.js';
import { getToken } from '@/utils/auth';

const router = useRouter();

// 设置页码
const pageSize = ref(2);
const currentPage = ref(1);
const total = ref(4);

// 定义用户数据接口
interface User {
  id: number;
  cycle: number;
  name: string;
  description: string;
  workLoad: number;
  files: { URI: string };
  status: string;
  principalUser: string;
  deadline: string;
  tags: Array<any>;
}

// 响应式数据
const input1 = ref('');
const input2 = ref('');
const tableData = ref<User[]>([

]);
const initialTableData = ref<User[]>([]);

// 处理返回数据函数
const parseData = (data) => {
  const files = JSON.parse(data.files);
  const tags = JSON.parse(data.tags);

  return {
    id: data.id,
    cycle: data.cycle,
    name: data.name,
    description: data.description,
    workLoad: data.workLoad,
    files: files,
    status: data.status,
    principalUser: data.principalUser,
    deadline: data.deadLine,
    tags: tags
  };
};

// 处理接口数据
const fetchData = () => {
  const project = getParticipateProjectList(getToken());
  console.log(project);
  
  project.then(res => {
    const data = res.data.data.list;
    const dataTotal = res.data.data.total;
    const dataPageSize = res.data.data.pageSize;

    console.log(dataTotal, dataPageSize);
    
    total.value = dataTotal;
    pageSize.value = dataPageSize;

    if (data) {
      const dataProject = data.map(item => parseData(item));
      tableData.value = [...dataProject, ...tableData.value];
      initialTableData.value = tableData.value.slice();
    } else {
      console.log('没有数据');
    }
  }).catch(err => {
    console.log(err);
  });
};

// 调用获取数据的函数
fetchData();

// 处理路由跳转
const toChildSystem = (id) => {
  router.push({ name: 'ChildSysParticipate', query: { projectId: id } });
};

// 监听表格行选择事件
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

// 统一检索函数
const search = () => {
  const keyword = input1.value.trim().toLowerCase();
  const status = input2.value.trim().toLowerCase();

  // 如果搜索关键词和状态都为空，则恢复初始数据
  if (keyword === '' && status === '') {
    tableData.value = initialTableData.value.slice();
    return;
  }

  // 根据关键词和状态进行检索
  tableData.value = initialTableData.value.filter(item => {
    const matchKeyword = (keyword === '' || item.name.toLowerCase().includes(keyword));
    const matchStatus = (status === '' || item.status.toLowerCase().includes(status));
    return matchKeyword && matchStatus;
  });
};


// 定义处理当前页码变化的函数
const handleCurrentChange = (page) => {
  currentPage.value = page;
};
// 重置检索条件
const reset = () => {
  input1.value = '';
  input2.value = '';
  tableData.value = initialTableData.value.slice();
};
</script>

<style>
.my-autocomplete li {
  line-height: normal;
  padding: 7px;
}

.my-autocomplete li .name {
  text-overflow: ellipsis;
  overflow: hidden;
}

.my-autocomplete li .addr {
  font-size: 12px;
  color: #b4b4b4;
}

.my-autocomplete li .highlighted .addr {
  color: #ddd;
}
</style>