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

<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 @click="item.showChildren=!item.showChildren" style="cursor:pointer">
                {{ item.taskName }}
              </div>
              <div @click="item.showChildren=!item.showChildren" style="cursor:pointer">
                {{ item.scheduledStartTime + '--' + item.scheduledEndTime }}
              </div>
            </template>
            <template #description v-if="item.showChildren">
              <childElstepchild v-if="item.children != null" :child="item.children"></childElstepchild>
            </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 childElstepchild from './childElstepchild.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 { 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 activities = ref([]);
  let type = ref(1);
  let fileArr = ref([]);
  let planinfoid = ref();
  let taskName = ref();
  let UnitedTechnicalReviewmode = ref('');
  let messageInfo = ref('');
  const [registeruploadFile, { openModal: openPlanFile, closeModal: closePlanFile }] = 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;
      activities.value.forEach((i:any)=>{
        i.showChildren  = false
      })
      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')&&record.taskLevel.charAt(0) != '1') {
              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();
  }
  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>