新增项目计划详情子计划页面

src/views/projectLib/projectPlan/childViewPlanDetail.vue

@@ -0,0 +1,466 @@
+<template>
+  <!-- 自定义表单 -->
+  <el-divider content-position="left">项目名称：{{ dataTo.projectName }}</el-divider>
+  <el-divider content-position="left">项目计划进程</el-divider>
+  <!-- <BasicTable @register="registerPlanDetail" /> -->
+  <div>
+    <!-- <el-row>
+      <el-col :span="24">
+        时间进度：
+      </el-col>
+      <el-col :span="24">
+
+        <Progress :percent="50" class="componentB" status="exception" :size="20" style="width: 80%;">
+
+        </Progress>
+        <Progress :percent="100" class="componentA" status="success" :size="20" style="width: 80%;">
+        </Progress>
+        <ClockCircleFilled class="custom-content" :style="{ left: '88%', fontSize: '40px', color: 'red' }" />
+        <span class="italicize" :style="{ left: '88%' }">计划一</span>
+
+        <ClockCircleFilled class="custom-content" :style="{ left: '48%', fontSize: '40px', color: 'red' }" />
+
+          <span class="italicize" :style="{ left: '48%' }">计划一</span>
+
+      </el-col>
+
+
+    </el-row> -->
+    <el-row>
+      <el-col :span="24">
+        项目进度：<Progress :size="15" :percent="activities[0]?.totalPercent"></Progress>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-steps finish-status="success" :active="activities.status">
+          <el-step
+            v-for="(item, index) in activities"
+            :key="index"
+            :status="item.isfinish == 2 ? 'success' : 'wait'"
+          >
+            <template #title>
+              <div>
+                {{ item.taskName }}
+              </div>
+              <div>
+                {{ item.scheduledStartTime + '--' + item.scheduledEndTime }}
+              </div>
+            </template>
+            <template #description>
+              <elstepchild v-if="item.children != null" :child="item.children"></elstepchild>
+            </template>
+            <template #icon>
+              <Progress
+                type="circle"
+                :percent="item.percent"
+                :size="40"
+                :status="item.progressStatus"
+              ></Progress>
+            </template>
+          </el-step>
+        </el-steps>
+      </el-col>
+    </el-row>
+  </div>
+
+  <el-divider content-position="left">项目计划阶段详情</el-divider>
+  <BasicTable @register="registerTable">
+    <template #action="{ record }">
+      <!-- <TableAction :actions="getTableAction(record)" /> -->
+      <TableAction :actions="getTableAction(record)" />
+    </template>
+    <template #tableTitle>
+      <el-button type="primary" @click="handledownload" v-if="isShowByRoles('manageOrg,supervisor')"
+        >下载</el-button
+      >
+    </template>
+  </BasicTable>
+
+  <BasicModal
+    @register="registeruploadFile"
+    title="上传文件"
+    width="1200px"
+    :showOkBtn="false"
+    :showCancelBtn="false"
+  >
+    <addPlanFile
+      :type="type"
+      :planinfoid="planinfoid"
+      :files="fileArr"
+      :taskName="taskName"
+      @close="closePlanFileModal()"
+    />
+  </BasicModal>
+  <planinfoFileDetail @register="registerFileInfo" />
+  <BasicModal
+    @register="registerplanFileApproval"
+    title="文件审批"
+    width="1200px"
+    :showOkBtn="false"
+    :showCancelBtn="false"
+  >
+    <planFileApproval :record="recordData" @close="closeplanFile" />
+  </BasicModal>
+  <uploadURTfile @register="registerUnitedTechnicalReview" @close="closePlanFileModal" />
+  <BasicModal
+    @register="registerMessageInfo"
+    title="提示信息"
+    :showOkBtn="true"
+    :showCancelBtn="true"
+    @ok="okMessageInfo"
+  >
+    <h1>{{ messageInfo }}</h1>
+  </BasicModal>
+</template>
+<script lang="ts" name="viewPlanDetail" setup>
+  import { ref, onMounted } from 'vue';
+  import elstepchild from './elstepchild.vue';
+  import addPlanFile from './addPlanFile.vue';
+  import planinfoFileDetail from './planinfoFileDetail.vue';
+  import { Progress, message } from 'ant-design-vue';
+  import { BasicModal } from '@/components/Modal';
+  import { PlaninfoColumn } from './projectPlan.data';
+  import {
+    queryPlanInfoMainTimeline,
+    getPlanFileApprovalInfoByPlaninfoId,
+    planUploadFile,
+    downloadPlanInfo,
+  } from './projectPlan.api';
+  import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table';
+  import { useModal } from '@/components/Modal';
+  import planFileApproval from '@/views/ProcessApprovalSubPage/planFileApproval.vue';
+  import { isShowByRoles } from '../../projectLib/projectInfo/projectInfo.api';
+  import uploadURTfile from '@/views/projectLib/projectPlan/uploadURTfile.vue';
+  let dataTo = defineProps(['projectId', 'projectStage', 'projectName']);
+  let projectId = ref(dataTo.projectId);
+  let isfinish = ref();
+  let activities = ref([]);
+  let type = ref(1);
+  let fileArr = ref([]);
+  let planinfoid = ref();
+  let taskName = ref();
+  let UnitedTechnicalReviewmode = ref('');
+  let messageInfo = ref('');
+  let recordData = ref({});
+  const [registeruploadFile, { openModal: openPlanFile, closeModal: closePlanFile }] = useModal(); //文件上传和查看
+  const [
+    registerplanFileApproval,
+    { openModal: openplanFileApproval, closeModal: closeplanFileApproval },
+  ] = useModal(); //文件上传和查看
+  const [registerFileInfo, { openModal: openFileInfo }] = useModal(); //文件上传和查看
+  const [
+    registerUnitedTechnicalReview,
+    { openModal: openUnitedTechnicalReviewmode, closeModal: closeUnitedTechnicalReviewmode },
+  ] = useModal(); //新增修改周月报页面
+  const [registerMessageInfo, { openModal: openMessageInfo, closeModal: closeMessageInfo }] =
+    useModal(); //显示消息
+
+  onMounted(() => {
+    queryPlanInfoMainTimeline({
+      projectid: dataTo.projectId,
+    }).then((res) => {
+      activities.value = res;
+      console.log('activities', activities);
+    });
+    console.log('projectid1111111111', activities, dataTo.projectId);
+  });
+
+  // 项目入库审批table
+  const [registerTable, { reload, getDataSource }] = useTable({
+    size: 'small', //紧凑型表格
+    title: '项目计划阶段详情',
+    api: queryPlanInfoMainTimeline,
+    columns: PlaninfoColumn,
+    // showActionColumn: true,
+    rowKey: 'taskName',
+    showIndexColumn: false,
+    useSearchForm: false,
+    actionColumn: {
+      width: 140,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+    beforeFetch(params) {
+      params.projectid = projectId.value;
+    },
+  });
+
+  function getTableAction(record): ActionItem[] {
+    if (dataTo.projectStage == 4) {
+      return [];
+    }
+    return [
+      {
+        label: '详情',
+        ifShow: () => {
+          if (record.isfinish >= 1&&record.taskLevel.charAt(0) != '1') {
+            return true;
+          }
+          return false;
+        },
+        onClick: handleDetail.bind(null, record),
+      },
+      {
+        label: '上传资料',
+        ifShow: () => {
+          if (
+            record.isfinish == 0 &&
+            record.taskFile?.length > 0 &&
+            record.taskName != '可研技术审查报告确认' &&
+            record.taskName != '造价评估报告确认'
+          ) {
+            if (isShowByRoles('projectContact')&&record.taskLevel.charAt(0) != '1') {
+              return true;
+            }
+            return false;
+          }
+          return false;
+        },
+        onClick: handleuploadfile.bind(null, record),
+      },
+      {
+        label: '完成',
+        ifShow: () => {
+          if (record.isfinish == 0 && record.children == null && record.taskFile?.length == 0) {
+            //归档流程中不允许修改
+            if (isShowByRoles('projectContact')) {
+              return true;
+            }
+            return false;
+          }
+          return false;
+        },
+        // onClick: handleModifyuploadfile.bind(null, record)
+        popConfirm: {
+          title: '确定完成该阶段吗?',
+          confirm: handlefinish.bind(null, record),
+        },
+      },
+      {
+        label: '重新上传',
+        ifShow: () => {
+          if (
+            record.isfinish == 2 &&
+            record.taskFile?.length > 0 &&
+            (record.taskName == '可研报告初稿编制' || record.taskName == '可研报告送审稿编制')
+          ) {
+            if (isShowByRoles('projectContact')) {
+              return true;
+            }
+            return false;
+          }
+          return false;
+        },
+        onClick: handleREuploadfile.bind(null, record),
+      },
+    ];
+  }
+
+  function handleDetail(record) {
+    openFileInfo(true, {
+      planinfoid: record.id,
+      taskName: record.taskName,
+      isfinish: record.isfinish,
+      projectid: dataTo.projectId,
+    });
+  }
+  async function handleREuploadfile(record) {
+    //重新上传
+    taskName.value = record.taskName;
+    type.value = record.isfinish;
+    if (record.taskFile.includes(',')) {
+      fileArr.value = record.taskFile.split(',');
+    } else {
+      fileArr.value = record.taskFile.split('，');
+    }
+    if (record.taskName.indexOf('可研报告初稿编制') >= 0) {
+      fileArr.value.push('《项目建议书》');
+    } else if (record.taskName.indexOf('可研报告送审稿编制') >= 0) {
+      fileArr.value.push('《项目建议书》');
+      fileArr.value.push('《补充说明》');
+    }
+    planinfoid.value = record.id;
+    openPlanFile();
+  }
+  async function handleuploadfile(record) {
+    taskName.value = record.taskName;
+    type.value = record.isfinish;
+    if (record.taskFile.includes(',')) {
+      fileArr.value = record.taskFile.split(',');
+    } else {
+      fileArr.value = record.taskFile.split('，');
+    }
+    if (record.taskName.indexOf('可研报告初稿编制') >= 0) {
+      fileArr.value.push('《项目建议书》');
+    } else if (record.taskName.indexOf('可研报告送审稿编制') >= 0) {
+      fileArr.value.push('《项目建议书》');
+      fileArr.value.push('《补充说明》');
+    }
+    fileArr.value.push();
+    planinfoid.value = record.id;
+    let tableData = await getDataSource();
+    console.log('tableData', tableData);
+    //项目采购阶段先后顺序限制取消
+
+    for (let x = 1; x < tableData.length; x++) {
+      for (let i = 0; i < tableData[x].children.length; i++) {
+        let child = tableData[x].children[i];
+        //得到当前计划,当前计划在当前阶段第二个开始
+        if (i >= 1) {
+          if (child.id == record.id) {
+            //获取上一个计划
+            let pre = tableData[x].children[i - 1];
+            if (pre.isfinish != 2) {
+              message.error('请先完成【' + pre.taskName + '】');
+              return;
+            }
+          }
+        } else {
+          //如果我当前阶段的第一个，拿比较当前前一个阶段的最后一个任务是否完成
+          if (child.id == record.id) {
+            //获取上一个阶段
+            let preLength = tableData[x - 1].children.length; //上一个阶段的长度
+            let pre = tableData[x - 1].children[preLength - 1];
+            if (pre.isfinish != 2) {
+              message.error('请先完成【' + pre.taskName + '】');
+              return;
+            }
+          }
+        }
+      }
+    }
+    if (record.taskName.indexOf('联合技术审查') >= 0) {
+      UnitedTechnicalReviewmode.value = record.id;
+      messageInfo.value = '如项目涉及申报资金变更的，请先进行资金变更流程';
+      openMessageInfo();
+      //先给提示信息，在打开
+    } else {
+      if (record.taskName.indexOf('招标文件编制') >= 0) {
+        messageInfo.value = '要求在招标文件公示前请线下与任务牵头处室进行交流，在公示后再进行上传';
+        openMessageInfo();
+      } else {
+        openPlanFile();
+      }
+    }
+  }
+
+  async function okMessageInfo() {
+    closeMessageInfo();
+    if (taskName.value.indexOf('联合技术审查') >= 0) {
+      openUnitedTechnicalReviewmode(true, {
+        planinfoid: UnitedTechnicalReviewmode.value,
+        projectid: dataTo.projectId,
+      });
+    } else {
+      openPlanFile();
+    }
+  }
+  async function handlefinish(record) {
+    let params = {
+      planinfoid: record.id,
+    };
+    await planUploadFile(params);
+    reload();
+  }
+  async function handleModifyuploadfile(record) {
+    //更加record.id获取当前阶段的流程信息。返回流程信息，然后打开文件上传弹窗
+    let res = await getPlanFileApprovalInfoByPlaninfoId({ planinfoid: record.id });
+    if (res.isEdit == 1) {
+      recordData.value = res;
+      openplanFileApproval();
+    }
+    record.id;
+  }
+  function closeplanFile() {
+    closeplanFileApproval();
+    reload();
+  }
+  function closePlanFileModal() {
+    closePlanFile();
+    closeUnitedTechnicalReviewmode();
+    reload();
+    queryPlanInfoMainTimeline({
+      projectid: dataTo.projectId,
+    }).then((res) => {
+      activities.value = res;
+      console.log('activities', activities);
+    });
+  }
+  async function handledownload() {
+    //下载
+    await downloadPlanInfo({ projectid: dataTo.projectId });
+  }
+</script>
+<style scoped>
+  .timeline {
+    display: flex;
+    width: 100%;
+    margin-bottom: 100px;
+
+    .lineitem {
+      transform: translateX(50%);
+      width: 25%;
+    }
+  }
+
+  :deep(.el-timeline-item__tail) {
+    border-left: none;
+    border-top: 2px solid #e4e7ed;
+    width: 100%;
+    position: absolute;
+    top: 9px;
+  }
+
+  :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;
+  }
+
+  .el-row {
+    margin-bottom: 25px;
+    margin-top: 25px;
+  }
+
+  .componentA {
+    position: absolute;
+    z-index: 1;
+    /* 设置较低的z-index值 */
+    /* 其他样式 */
+  }
+
+  .componentB {
+    position: absolute;
+    z-index: 2;
+    /* 设置较高的z-index值 */
+    /* 其他样式 */
+  }
+
+  .custom-content {
+    position: absolute;
+    top: 0;
+    transform: translateX(-50%);
+    transition: left 0.3s;
+    z-index: 3;
+    margin-top: 20px;
+  }
+
+  .italicize {
+    /* transform: skew(15deg); 使用 transform 属性进行倾斜 */
+    transform: rotate(-45deg);
+    display: inline-block;
+    /* 需要将元素设为块级元素才能应用transform属性 */
+    z-index: 4;
+    margin-top: -20px;
+    color: #ea1212;
+    font-size: large;
+  }
+</style>

src/views/projectLib/projectPlan/index.vue

@@ -15,6 +15,10 @@
     <BasicModal @register="registeViewPlanDetail" title="项目计划详情" width="1200px" :showOkBtn="false">
       <viewPlanDetail :projectId="projectId" :projectStage="projectStage" :projectName="projectName"/>
     </BasicModal>
+
+    <BasicModal @register="registeChildViewPlanDetail" title="子项目计划详情" width="1200px" :showOkBtn="false">
+      <viewPlanDetail :projectId="projectId" :projectStage="projectStage" :projectName="projectName"/>
+    </BasicModal>
     <BasicModal @register="registerProjectPlan" title="发起项目计划审批" width="1200px" :showOkBtn="false"
       :showCancelBtn="false">
       <addPlan :type="type" :projectid="projectId" @close="closeProjectPlanModal()" />
@@ -32,6 +36,7 @@ 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 } from '@/views/projectLib/projectInfo/projectInfo.api';
 
 import { columns } from '@/views/projectLib/projectInfo/projectInfo.data';
@@ -44,7 +49,9 @@ let projectId = ref();
 let type = ref();
 let projectStage = ref();
 let projectName= ref();
-const [registeViewPlanDetail, { openModal: openViewPlanDetail }] = useModal();//查看计划审批的
+const [registeViewPlanDetail, { openModal: openViewPlanDetail }] = useModal();
+const [registeChildViewPlanDetail, { openModal: openChildViewPlanDetail }] = useModal();
+
 const [registerProjectPlan, { openModal: openProjectPlan, closeModal: closeProjectPlan }] = useModal();//发起计划审批的
 
 const [registerTable, { reload }] = useTable({
@@ -108,8 +115,11 @@ function handleDetailpage(record) {
   projectId.value = record.id
   projectStage.value = record.stage
   projectName.value = record.projectName
+  await 
+  //判断是不是子项目，打开子项目的详情页面
   openViewPlanDetail()
-
+  //是子项目
+  openChildViewPlanDetail()
 }
 function handlePlan(record) {
   type.value = record.stage == 5 ? "2" : "1"