Guoyan
/
new_huozhou_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
zhouhaibin 2 months ago
parent
573bdc715b
commit
b1ef23818b
2 changed files with 478 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 466
      src/views/projectLib/projectPlan/childViewPlanDetail.vue
  2. 14
      src/views/projectLib/projectPlan/index.vue

466
src/views/projectLib/projectPlan/childViewPlanDetail.vue
View File

@ -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>

14
src/views/projectLib/projectPlan/index.vue
View File

@ -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"

Write Preview
Loading…
Cancel
Save