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" @click="openModfiyInfoPage()">项目计划修改记录</el-button>
      </template>
    </BasicTable>

  <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>
</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 { isShowByRoles } from '@/views/projectLib/projectInfo/projectInfo.api';

import { columns, searchFormSchema } from '@/views/projectLib/projectInfo/projectInfo.data';

import { projectPlanPageList } from '@/views/projectLib/projectPlan/projectPlan.api';
import { useUserStore } from '@/store/modules/user';
import { useRouter } from 'vue-router';  // 导入 useRouter
const router = useRouter();
let projectId = ref();
let type = ref();
let projectStage = ref();
const [registeViewPlanDetail, { openModal: openViewPlanDetail }] = 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,
    }

});


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)
    },
  ];
}


function handleDetailpage(record) {
  projectId.value = record.id
  projectStage.value=record.stage
  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>