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

<template>
  <div style=" width:100%">
    <el-card style="max-width: 100vw;margin: 1.5vw;">
      <template #header><strong>项目{{ projectId }}</strong></template>
      <div style="display:flex;flex-direction:row;justify-content: space-around ">
        <div>
          名称
          <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
        </div>
        <div>
          状态
          <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
        </div>
        <div>
          <el-button type="primary" style="width:80px">查询</el-button>
          <el-button style="width:80px">重置</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="principalName" label="负责人" />
        <el-table-column property="status" label="状态" />
        <el-table-column property="description" label="子系统简介"  >
          <template #default="{row}">
            <span >{{ row.description.description }}</span>
          </template>
            
        </el-table-column>
        <el-table-column property="deadLine" label="截止时间" #default="{row}">
            <span>{{ new Date(row.deadLine).toLocaleDateString() }}</span>
        </el-table-column>
        <el-table-column property="address" label="操作" #default="{row}">
          <el-button link style="color:deepskyblue" @click="toChildModel(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>
    <el-alert >
            <router-view />
        </el-alert>
  </div>
</template>

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

//跳转到子模块
const router = useRouter();

const toChildModel = (id) => {
  router.push({ name: 'ChildModManage' , query: { id: 3 } })
};

const input = ref('');

interface User {
    cycle:number
    deadLine:string
    description: {description :string}
    id:number
    isDelete:number
    name:string
    principalName:string
    projectId:number
    status:string
    workLoad:number
}

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

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





// console.log(searchSys);

const tableData = ref<User[]>([

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

// 获取projectid
  const route = useRoute();
  const projectId = route.query.id;

  //处理数据函数
  const parseData = (data)=>{
    const description = JSON.parse(data.description);

    return{
            cycle:data.cycle,
            deadLine:data.deadLine,
            description:description,
            id:data.id,
            isDelete:data.isDelete,
            name:data.name,
            principalName:data.principalName,
            projectId:data.projectId,
            status:data.status,
            workLoad:data.workLoad,
    }
  }
  
  const fetchData = () => {
    
    const project = getProjectSysList( projectId ? Number(projectId) - 1 : 0,getToken());

    //处理数据
    project.then(res=>{
      const data = res.data.data
      console.log(data);
      
      
      if(data){
           const newData = data.map(item=>parseData(item))
           console.log(newData);
           
           tableData.value = [...newData,...tableData.value];
           initialTableData.value = tableData.value.slice();  // 将tableData的内容赋值给initialTableData

      }
      

    })
  }

  fetchData();
      
      
   
    
      










</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>