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">
        总进度：<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>
  </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" :planinfoid="planinfoid" :taskName="taskName" :isfinish="isfinish" />
  <BasicModal @register="registerplanFileApproval" title="文件审批" width="1200px" :showOkBtn="false" :showCancelBtn="false">
    <planFileApproval :record="recordData" @close="closeplanFile"  />
  </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 } from 'ant-design-vue';
import { BasicModal } from '@/components/Modal';
import { PlaninfoColumn } from './projectPlan.data';
import { queryPlanInfoMainTimeline,getPlanFileApprovalInfoByPlaninfoId } 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 { message } from 'ant-design-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();//文件上传和查看

onMounted(() => {
  queryPlanInfoMainTimeline({
    projectid: dataTo.projectId
  }).then(res => {
    activities.value = res
    console.log("activities", activities)
  })
  console.log("projectid1111111111", activities, dataTo.projectId)

})



// 项目入库审批table
const [registerTable, { reload }] = 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.taskFile?.length > 0) {
          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.isEdit == 1 && record.taskFile?.length>0) {//归档流程中不允许修改
          return true
        }
        return false
      },
      onClick: handleModifyuploadfile.bind(null, record)
    },
  ];
}

function handleDetail(record) {
  planinfoid.value = record.id
  taskName.value = record.taskName
  isfinish.value = record.isfinish
  openFileInfo()

}
function handleuploadfile(record) {
  type.value = record.isfinish
  fileArr = record.taskFile.split(",")
  planinfoid.value = record.id
  openPlanFile()
}
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()
  reload()
  queryPlanInfoMainTimeline({
    projectid: dataTo.projectId
  }).then(res => {
    activities.value = res
    console.log("activities", activities)
  })
}
</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;

}
</style>