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

<template>
  <!-- 自定义表单 -->
  <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>
  <div v-if="dataTo.projectStage == 4">
    <ApprovalDetails :projectid="projectId" stage="createPlaninfo" />
  </div>
  <BasicModal @register="registeruploadFile" title="上传文件" width="1200px" :showOkBtn="false" :showCancelBtn="false">
    <addPlanFile :type="type" :planinfoid="planinfoid" :files="fileArr" @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" />

</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 ApprovalDetails from "../../ProcessApprovalSubPage/component/ApprovalDetails.vue"
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"])
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 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();//新增修改周月报页面

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) {
          return true
        }
        return false
      },
      onClick: handleDetail.bind(null, record),
    },
    {
      label: '上传资料',
      ifShow: () => {
        if (record.isfinish == 0 && record.taskFile?.length > 0) {
          if (isShowByRoles('projectContact')) {
            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),
      },
    },
  ];
}

function handleDetail(record) {

  openFileInfo(true, { planinfoid: record.id, taskName: record.taskName, isfinish: record.isfinish })

}
 async function handleuploadfile(record) {
  type.value = record.isfinish
  fileArr = record.taskFile.split(",")
  planinfoid.value = record.id
  let tableData = await getDataSource()
  console.log("tableData",tableData)
  //项目立项阶段
  for(let i = 0;i<tableData[0].children.length;i++)
 {
  let child=tableData[0].children[i]
  //得到当前计划
  if(child.id==record.id){
    //获取上一个计划
    let pre=tableData[0].children[i-1]
    if(pre.isfinish!=2){
      message.error("请先完成【"+pre.taskName+"】")
      return
    }
  }
 }
  if(record.taskName=="联合技术审查"){
    openUnitedTechnicalReviewmode(true,{planinfoid:record.id})
  }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>