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

<template>
  <div style=" width:100%">
    <el-card style="max-width: 100vw;margin: 1.5vw;">
      <template #header><strong>子系统{{ SysId }}</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="description" label="子模块简介" #default="{ row }">
          <span>{{ row.description.description }}</span>
        </el-table-column>
        <el-table-column property="address" label="截止时间" />
        <el-table-column property="address" label="操作" #default="{ row }">
          <el-button link style="color:deepskyblue" @click="toDetail(row.id)">查看详情</el-button>
        </el-table-column>
      </el-table>
      <el-pagination larger background layout="prev, pager, next" :total="50" class="mt-4"
        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 { getParticipateModuleList } from '@/api/participate';
import { useRouter, useRoute } from 'vue-router';
import { getToken } from '@/utils/auth';



const router = useRouter();
//取值
const route = useRoute()
const SysId = route.query.SysId;

// 路由跳转
const toDetail = (ModId) => {
  router.push({ name: 'ParticipateDetail', query: { ModId: ModId } }); // 跳转到子系统详情页面
};

interface User {
  beginTime: string;
  childSystemName: string;
  completeTime: string;
  cycle: string;
  description: { description: string };
  id: number;
  isDelete: number
  isFinishi: string
  name: string;
  pid: string
  principalId: number
  principalUser: string
  projectId: number
  status: string
  type: string
  workLoad: number
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);

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



//列表
const tableData = ref<User[]>([
  {
    beginTime: '2021-11-11',
    childSystemName: '子系统1',
    completeTime: '2021-11-11',
    cycle: "10tian",
    description: { description: '子系统1描述' },
    id: 1,
    isDelete: 0,
    isFinishi: '否',
    name: '子模块1',
    pid: '1',
    principalId: 1,
    principalUser: '负责人1',
    projectId: 1,
    status: '待完成',
    type: '子系统',
    workLoad: 10
  }
  

]);
const initialTableData = ref<User[]>([]);
const parseData = (data) => {
  const descripation = JSON.parse(data.description);

  return {
    beginTime: data.beginTime,
    childSystemName: data.childSystemName,
    completeTime: data.completeTime,
    cycle: data.cycle,
    description: descripation,
    id: data.id,
    isDelete: data.isDelete,
    isFinishi: data.isFinishi,
    name: data.name,
    pid: data.pid,
    principalId: data.principalId,
    principalUser: data.principalUser,
    projectId: data.projectId,
    status: '待完成',
    type: data.type,
    workLoad: data.workLoad
  }
}

//接口获取内容
const fetchData = () => {
  const project = getParticipateModuleList(SysId, getToken());
  console.log(project);

  project.then((res) => {
    const data = res.data.data
    console.log(data);

    if (data) {
      const newData = data.map((item) => parseData(item));
      tableData.value = [...newData, ...tableData.value]
      
      
      initialTableData.value = tableData.value.slice();
    }
  }).catch((err) => {
    console.log(err);
  });

}

fetchData();

// 统一检索函数
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 input1 = ref('');
const input2 = ref('');

// 重置检索条件
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>