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,
    queryUpdatePlanFlagById,
  } from '@/views/projectLib/projectPlan/projectPlan.api';
  import { useRouter } from 'vue-router'; // 导入 useRouter
  import { message } from 'ant-design-vue';

  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();
    }
  }
  async function handlePlan(record: any) {
    if (record.stage == 5) {
      const res = await queryUpdatePlanFlagById({projectId:record.id});
      console.log(res)
      if (res) {
        type.value = '2';
        projectId.value = record.id;
        openProjectPlan();
      } else {
        message.warning('本条不支持项目计划修改');
      }
    } else {
      type.value = '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>