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

<template>
  <PageWrapper dense>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <!-- <TableAction :actions="getTableAction(record)" /> -->
        <TableAction :actions="getTableAction(record)" />
      </template>
      <template #tableTitle>
        <el-button color="#626aef" :dark="true"  round @click="openModfiyInfoPage()">项目计划修改记录</el-button>

      </template>
    </BasicTable>

    <BasicModal @register="registeViewPlanDetail" title="项目计划详情" width="1200px" :showOkBtn="false">
      <viewPlanDetail :projectId="projectId" :projectStage="projectStage" :projectName="projectName"/>
    </BasicModal>

    <BasicModal @register="registeChildViewPlanDetail" title="子项目计划详情" width="1200px" :showOkBtn="false">
      <childViewPlanDetail :projectId="projectId" :projectStage="projectStage" :projectName="projectName"/>
    </BasicModal>
    <BasicModal @register="registerProjectPlan" title="发起项目计划审批" width="1200px" :showOkBtn="false"
      :showCancelBtn="false">
      <addPlan :type="type" :projectid="projectId" @close="closeProjectPlanModal()" />
    </BasicModal>
  </PageWrapper>

</template>

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

import { useModal, BasicModal } from '@/components/Modal';
import addPlan from '@/views/projectLib/projectPlan/addPlan.vue'
import viewPlanDetail from "@/views/projectLib/projectPlan/viewPlanDetail.vue";
import childViewPlanDetail from "@/views/projectLib/projectPlan/childViewPlanDetail.vue";
import { isShowByRoles,queryIsSubProject } from '@/views/projectLib/projectInfo/projectInfo.api';

import { columns } from '@/views/projectLib/projectInfo/projectInfo.data';
import { searchFormSchema } from '@/views/projectLib/projectInfo/projectInfo.data';
import { projectPlanPageList } from '@/views/projectLib/projectPlan/projectPlan.api';
import { useRouter } from 'vue-router';  // 导入 useRouter

const router = useRouter();
let projectId = ref();
let type = ref();
let projectStage = ref();
let projectName= ref();
const [registeViewPlanDetail, { openModal: openViewPlanDetail }] = useModal();
const [registeChildViewPlanDetail, { openModal: openChildViewPlanDetail }] = useModal();

const [registerProjectPlan, { openModal: openProjectPlan, closeModal: closeProjectPlan }] = useModal();//发起计划审批的

const [registerTable, { reload }] = useTable({
  title: '项目信息',
  api: projectPlanPageList,
  columns: columns,
  useSearchForm: true,
  showIndexColumn: false,
  actionColumn: {
    width: 140,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
  },
  //表单查询项设置
  formConfig: {
    schemas: searchFormSchema,
  },
  beforeFetch: (param) => {

    if(param.stage == undefined||param.stage == null){
      param.stage = "2"
    }else{
      param.newStage=param.stage
      param.stage = "2"
    }

  },

});


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


async function handleDetailpage(record) {
  projectId.value = record.id
  projectStage.value = record.stage
  projectName.value = record.projectName
  let res = await queryIsSubProject({ projectid: record.id })
  console.log("queryIsSubProject",res)
  //判断是不是子项目，打开子项目的详情页面
  if(res){
  //是子项目
      openChildViewPlanDetail()
  }else{
      openViewPlanDetail()
  }


}
function handlePlan(record) {
  type.value = record.stage == 5 ? "2" : "1"
  projectId.value = record.id
  openProjectPlan()

}

function closeProjectPlanModal() {
  closeProjectPlan()
  reload()
}
function openModfiyInfoPage() {
  router.push({ path: '/projectLib/planinfoHistory/index' })

}

</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;
  /* 其他样式 */
}
</style>