Jsl-OA-Web-Re/src/views/personal/project/childmodel/manage.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="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-button type="primary" style="width:80px">新增</el-button>
          
        </div>
      </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="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="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>
    <router-view />
  </div>
</template>

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



const router = useRouter();



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

interface User {
  id: number
  name: string
  principalId: number
  principalUser:string
  workLoad: number
  description: { description: string }
  status: string
  deadLine: string
}

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

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

const input = ref('');

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



//获取参数
const route = useRoute();
const sysId = route.query.id;


//处理接口方法
const parseData = (data) => {
    const description = JSON.parse(data.description);


  return{
      id: data.id,
      name: data.name,
      principalId: data.principalId,
      principalUser: data.principalUser,
      workLoad: data.workLoad,
      description: description,
      status: data.status,
      deadLine: data.deadLine,

  }

}

//接口处理
const fetchData = ()=>{
  //请求数据
  const project = getProjectModList(sysId,getToken());
  console.log(project);
  //处理数据
  project.then(res=>{
    const data = res.data.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

      }
  }).catch(err=>{
    console.log(err);
  })
  
}
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>