vue3/src/views/projectLib/projectPlan/index.vue

<template>
  <div>
    <!--引用表格-->
    <BasicTable @register="registerTable" @expand="tableExpand">
      <!--插槽:table标题-->
      <!--操作栏-->
      <!-- <template #expandedRowRender="{ record }" class="your-custom-expanded-row">
        <el-timeline class="timeline">
          <el-timeline-item 
          class="lineitem"
          v-for="(item,index) in activities"
          @click.native="handleChangeVideo(activities)"
          :key="index"
          :timestamp="item.scheduledStartTime+'--'+item.scheduledEndTime"
          :color="item.actualEndTime!=null?'green':''"
          style="border-top: #0048d8!important;"
          >
          {{ item.taskName }}
          </el-timeline-item>
        </el-timeline>
      </template> -->
      <template #action="{ record }">
        <!-- <TableAction :actions="getTableAction(record)" /> -->
        <TableAction :actions="getTableAction(record)"  />
      </template>
    </BasicTable>
  </div>
  <BasicModal @register="registeViewPlanDetail" title="项目信息详情" width="1200px" :showOkBtn="false">
    <viewPlanDetail :projectId="projectId" :projectStage="projectStage"/>
  </BasicModal>
  <BasicModal @register="registerProjectPlan" title="发起项目计划审批" width="1200px" :showOkBtn="false" :showCancelBtn="false">
    <addPlan :type="type" :projectid="projectId" @close="closeProjectPlanModal()" />
  </BasicModal>
</template>

<script lang="ts" name="system-user" setup>
//ts语法
import { ref,reactive,defineAsyncComponent  } from 'vue';
import { ActionItem, BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';

import { useModal } from '/@/components/Modal';
import { BasicModal } from '/@/components/Modal';
import addPlan from './addPlan.vue'
import viewPlanDetail from "./viewPlanDetail.vue";

// const viewPlanDetail = defineAsyncComponent(() =>
//   import('./viewPlanDetail.vue')
// )
import { columns, searchFormSchema } from '../projectInfo/projectInfo.data';

import { projectApprovedPageList,queryPlanInfoMainTimeline } from './projectPlan.api';

let projectId = ref();
let type = ref();
let activities = ref([])
let projectStage = ref();
const [registeViewPlanDetail, { openModal: openViewPlanDetail }] = useModal();//查看计划审批的
const [registerProjectPlan, { openModal: openProjectPlan, closeModal: closeProjectPlan }] = useModal();//发起计划审批的

const { tableContext } = useListPage({
  designScope: 'basic-table-demo-ajax',
  tableProps: {
    title: '项目信息',
    api: projectApprovedPageList,
    columns: columns,
    actionColumn: {
      width: 120,
      fixed: "right",
    },
    //表单查询项设置
    formConfig: {
      schemas: searchFormSchema,
    }
  },
});
//BasicTable绑定注册
const [registerTable, { reload }] = tableContext;

function getTableAction(record): ActionItem[] {
  return [
    {
      label: '详情',
      ifShow: () => {
        return record.stage >= 4
      },
      onClick: handleDetailpage.bind(null, record),
    },
    {
      label: '设计项目计划',
      ifShow: () => {
        return record.stage == 3
      },
      onClick: handlePlan.bind(null, record)
    },
    {
      label: '修改项目计划',
      ifShow: () => {
        return record.stage == 5
      },
      onClick: handlePlan.bind(null, record)
    },
  ];
}


function handleDetailpage(record) {
  projectId.value = record.id
  projectStage.value=record.stage
  openViewPlanDetail()


  // console.log(selectedRows.value);
  // console.log(selectedRowKeys.value);
}
function handlePlan(record) {
  type.value =record.stage==5?"2":"1"
  projectId.value = record.id
  openProjectPlan()

  // console.log(selectedRows.value);
  // console.log(selectedRowKeys.value);
}

function closeProjectPlanModal() {
  closeProjectPlan()
  reload()
}
async function tableExpand(expanded, record) {
  console.log("wwwwwwwwwwww", expanded, record)
  
  if(expanded){
    activities.value = await queryPlanInfoMainTimeline({
      projectid:record.id
    })
    console.log("22222222222222",activities)
  }
  //API发请求查询
}
function handleChangeVideo(record) {
  console.log("qqqqqqqqqqqqqqq", record)
}
</script>

<style scoped>
.timeline {
  display: flex;
  width: 100%;
  margin-bottom: 100px;

  .lineitem {
    transform: translateX(50%);
    width: 25%;
  }
}

::v-deep .el-timeline-item__tail {
  border-left: none;
  width: 100%;
  border-top: 2px solid #e4e7ed;
  position: absolute;
  top: 6px;
}

::v-deep .el-timeline-item__wrapper {
  padding-left: 0;
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  text-align: center;
}

::v-deep .el-timeline-item__timestamp {
  font-size: 14px;
}

.nested-timeline {
  margin-left: 20px;
  border-left: 1px dashed #ccc;
  padding-left: 20px;
}

.nested-timeline-item {
  margin-bottom: 10px;
}


::v-deep .ant-table-expanded-row {
  height: auto !important;
  /* 其他样式 */
}

/* .processBox {
  background-color: #fff;
  height: 210px;
 
  .title {
    font-size: 16px;
    font-weight: 600;
    padding-left: 32px;
    padding-top: 16px;
  }
  .timelineProcessBox {
    .timeline {
      display: flex;
      width: 95%;
      margin: 40px auto;
      .lineitem {
        transform: translateX(50%);
        width: 25%;
      }
    }
  }
}
 
:deep(.el-timeline-item__tail) {
  border-left: none;
  border-top: 2px solid #e4e7ed;
  width: 100%;
  position: absolute;
  top: 6px;
}
:deep(.el-timeline-item__wrapper) {
  padding-left: 0;
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  text-align: center;
}
:deep(.el-timeline-item__timestamp) {
  font-size: 14px;
}
.active {
  :deep(.el-timeline-item__node) {
    background-color: $login_word;
  }
  :deep(.el-timeline-item__tail) {
    border-color: $login_word;
  }
}
.active + li {
  :deep(.el-timeline-item__node) {
    background-color: $login_word;
  }
} */
</style>