|
@@ -1,52 +1,59 @@
|
|
|
<template>
|
|
|
- <HcCard actionUi="text-center" title="焦作至唐河高速公路方城至唐河段">
|
|
|
+ <HcCard actionUi="text-center" :title="detailData?.projectName">
|
|
|
<template #extra>
|
|
|
<HcNewSwitch :datas="tabTab" :keys="tabKey" @change="tabChange" :round="false"/>
|
|
|
</template>
|
|
|
<template #search>
|
|
|
<div class="hc-program-project-form-radio-group">
|
|
|
<el-radio-group v-model="radioType" size="large">
|
|
|
- <el-radio-button label="key1">市场部</el-radio-button>
|
|
|
- <el-radio-button label="key2">实施部</el-radio-button>
|
|
|
- <el-radio-button label="key3">研发部</el-radio-button>
|
|
|
- <el-radio-button label="key4">维护部</el-radio-button>
|
|
|
- <el-radio-button label="key5">管理支出</el-radio-button>
|
|
|
- <el-radio-button label="key6">外包劳务</el-radio-button>
|
|
|
+ <el-radio-button label="1">市场部</el-radio-button>
|
|
|
+ <el-radio-button label="2">实施部</el-radio-button>
|
|
|
+ <el-radio-button label="3">研发部</el-radio-button>
|
|
|
+ <el-radio-button label="4">维护部</el-radio-button>
|
|
|
+ <el-radio-button label="5">管理支出</el-radio-button>
|
|
|
+ <el-radio-button label="6">外包劳务</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
</div>
|
|
|
</template>
|
|
|
<HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :row-style="tableRowStyle">
|
|
|
- <template #key4="{row,index}">
|
|
|
- <el-select v-model="row.key4" v-if="row.isEdit">
|
|
|
+ <template #planTaskType="{row,index}">
|
|
|
+ <el-select v-model="row.planTaskType" v-if="row.isEdit">
|
|
|
<el-option label="选项1" value="选项1"/>
|
|
|
<el-option label="选项2" value="选项2"/>
|
|
|
</el-select>
|
|
|
- <span v-else>{{row.key4}}</span>
|
|
|
+ <span v-else>{{row.planTaskType}}</span>
|
|
|
</template>
|
|
|
- <template #key5="{row,index}">
|
|
|
- <el-input v-model="row.key5" v-if="row.isEdit"/>
|
|
|
- <span v-else>{{row.key5}}</span>
|
|
|
+ <template #planTaskDesc="{row,index}">
|
|
|
+ <el-input v-model="row.planTaskDesc" v-if="row.isEdit"/>
|
|
|
+ <span v-else>{{row.planTaskDesc}}</span>
|
|
|
</template>
|
|
|
- <template #key6="{row,index}">
|
|
|
- <el-input v-model="row.key6" v-if="row.isEdit"/>
|
|
|
- <span v-else>{{row.key6}}</span>
|
|
|
+ <template #planTarget="{row,index}">
|
|
|
+ <el-input v-model="row.planTarget" v-if="row.isEdit"/>
|
|
|
+ <span v-else>{{row.planTarget}}</span>
|
|
|
</template>
|
|
|
<template #key7="{row,index}">
|
|
|
- <HcDatePicker :dates="betweenTime" @change="betweenTimeUpdate" v-if="row.isEdit"/>
|
|
|
- <span v-else>{{row.key7}}</span>
|
|
|
+ <HcDatePicker :dates="row?.betweenTime" @change="betweenTimeUpdate($event,row)" v-if="row.isEdit"/>
|
|
|
+ <!-- <span v-else>{{row.key7}}</span> -->
|
|
|
+ <span v-else>
|
|
|
+ <span >{{row.planStartDate?row.planStartDate:''}}</span>
|
|
|
+ <span v-if="row.planStartDate">~</span>
|
|
|
+ <span >{{row.planStartDate?row.planStartDate:''}}</span>
|
|
|
+ </span>
|
|
|
+
|
|
|
+
|
|
|
</template>
|
|
|
- <template #key8="{row,index}">
|
|
|
- <el-input v-model="row.key8" v-if="row.isEdit"/>
|
|
|
- <span v-else>{{row.key8}}</span>
|
|
|
+ <template #planDays="{row,index}">
|
|
|
+ <el-input v-model="row.planDays" v-if="row.isEdit"/>
|
|
|
+ <span v-else>{{row.planDays}}</span>
|
|
|
</template>
|
|
|
- <template #key9="{row,index}">
|
|
|
+ <!-- <template #key9="{row,index}">
|
|
|
<el-input v-model="row.key9" v-if="row.isEdit"/>
|
|
|
<span v-else>{{row.key9}}</span>
|
|
|
- </template>
|
|
|
+ </template> -->
|
|
|
<template #action="{row,index}">
|
|
|
<el-button size="small" type="success" v-if="row.isEdit" @click="row.isEdit = false">保存</el-button>
|
|
|
<el-button size="small" type="primary" v-else @click="row.isEdit = true">编辑</el-button>
|
|
|
- <el-button size="small" type="warning" @click="relatedModalShow">关联回款</el-button>
|
|
|
+ <el-button size="small" type="warning" @click="relatedModalShow(row)">关联回款</el-button>
|
|
|
<el-button size="small" type="danger" @click="subplanModalShow(row)">分解子计划</el-button>
|
|
|
</template>
|
|
|
</HcTable>
|
|
@@ -70,23 +77,28 @@
|
|
|
@save="subplanSaveClick"
|
|
|
>
|
|
|
<HcTable :isIndex="false" :column="tableSubplanColumn" :datas="tableSubplanData">
|
|
|
- <template #key4="{row,index}">
|
|
|
- <el-select v-model="row.key4">
|
|
|
+ <template #planTaskType="{row,index}">
|
|
|
+ <el-select v-model="row.planTaskType">
|
|
|
<el-option label="选项1" value="选项1"/>
|
|
|
<el-option label="选项2" value="选项2"/>
|
|
|
</el-select>
|
|
|
</template>
|
|
|
- <template #key5="{row,index}">
|
|
|
- <el-input v-model="row.key5"/>
|
|
|
+ <template #planTaskDesc="{row,index}">
|
|
|
+ <el-input v-model="row.planTaskDesc"/>
|
|
|
</template>
|
|
|
- <template #key6="{row,index}">
|
|
|
- <el-input v-model="row.key6"/>
|
|
|
+ <template #planTarget="{row,index}">
|
|
|
+ <el-input v-model="row.planTarget"/>
|
|
|
</template>
|
|
|
<template #key7="{row,index}">
|
|
|
- <HcDatePicker :dates="betweenTime" @change="betweenTimeUpdate"/>
|
|
|
+ <HcDatePicker :dates="[row.planStartTime,row.planEndTime]" @change="subbetweenTimeUpdate($event,row)" v-if="true"/>
|
|
|
+ <span v-else>
|
|
|
+ <span >{{row.planStartTime?row.planStartTime:''}}</span>
|
|
|
+ <span v-if="row.planEndTime">~</span>
|
|
|
+ <span >{{row.planEndTime?row.planEndTime:''}}</span>
|
|
|
+ </span>
|
|
|
</template>
|
|
|
- <template #key8="{row,index}">
|
|
|
- <el-input v-model="row.key8"/>
|
|
|
+ <template #planDays="{row,index}">
|
|
|
+ <el-input v-model="row.planDays"/>
|
|
|
</template>
|
|
|
<template #key9="{row,index}">
|
|
|
<el-input v-model="row.key9"/>
|
|
@@ -108,13 +120,58 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {ref} from "vue";
|
|
|
-import {useRouter} from 'vue-router'
|
|
|
|
|
|
+import {useRouter, useRoute} from 'vue-router'
|
|
|
+import {onActivated, ref,watch} from "vue";
|
|
|
+import projectApi from '~api/program/project.js';
|
|
|
+import contractApi from '~api/project/project-contract.js';
|
|
|
+import {getArrValue,getObjValue} from "js-fast-way"
|
|
|
+
|
|
|
+//初始变量
|
|
|
const router = useRouter()
|
|
|
+const useRoutes = useRoute()
|
|
|
+const dataId = ref(useRoutes?.query?.id ?? '')
|
|
|
+const dataType = ref(useRoutes?.query?.type ?? '')
|
|
|
+//缓存页面被激活时
|
|
|
+onActivated(() => {
|
|
|
+ dataId.value = useRoutes?.query?.id ?? ''
|
|
|
+ dataType.value = useRoutes?.query?.type ?? ''
|
|
|
+
|
|
|
+ if(dataType.value!=='add'){
|
|
|
+ getPlanByProjectId()
|
|
|
+
|
|
|
+ }else if(dataType.value=='add'){
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+const detailData=ref({})
|
|
|
+const constructionData=ref([])
|
|
|
+const buildData=ref([])
|
|
|
+const supervisorUnitData=ref([])
|
|
|
+//获取详情
|
|
|
+const getPlanByProjectId=async()=>{
|
|
|
+ const {error, code, data} = await projectApi.getPlanByProjectId({id: dataId.value})
|
|
|
+ if (!error && code === 200) {
|
|
|
+ console.log(getObjValue(data),'详情');
|
|
|
+ detailData.value=getObjValue(data)
|
|
|
+ constructionData.value=detailData.value?.constructUnit||[]
|
|
|
+ buildData.value=detailData.value?.buildDatatUnit||[]
|
|
|
+ supervisorUnitData.value=detailData.value?.supervisorUnit||[]
|
|
|
+ tabKey.value='construction'
|
|
|
+ radioType.value=1
|
|
|
+
|
|
|
+ // milestoneData.value=getArrValue(data)
|
|
|
+
|
|
|
|
|
|
+ } else {
|
|
|
+ // milestoneData.value=[]
|
|
|
+ }
|
|
|
+}
|
|
|
//类型tab数据和相关处理
|
|
|
-const tabKey = ref('construction')
|
|
|
+const tabKey = ref('')
|
|
|
const tabTab = ref([
|
|
|
{key: 'construction', name: '施工单位成本'},
|
|
|
{key: 'supervision', name: '监理单位成本'},
|
|
@@ -124,22 +181,37 @@ const tabChange = ({key}) => {
|
|
|
tabKey.value = key
|
|
|
}
|
|
|
|
|
|
-const radioType = ref('key1')
|
|
|
-
|
|
|
-
|
|
|
+const radioType = ref('')
|
|
|
+//深度监听
|
|
|
+watch(() => [
|
|
|
+radioType.value,
|
|
|
+tabKey.value
|
|
|
+], ([radioType]) => {
|
|
|
+ console.log(radioType,'radioType');
|
|
|
+ if(tabKey.value==='construction'){
|
|
|
+ console.log(constructionData.value[radioType],'constructionData.value');
|
|
|
+ tableData.value=constructionData.value[radioType]
|
|
|
+ }else if(tabKey.value==='build'){
|
|
|
+ console.log(buildData.value[radioType],'buildData.value');
|
|
|
+ tableData.value=buildData.value[radioType]
|
|
|
+ }else if(tabKey.value==='supervision'){
|
|
|
+ console.log(supervisorUnitData.value[radioType],'supervisorUnitData.value');
|
|
|
+ tableData.value=supervisorUnitData.value[radioType]
|
|
|
+ }
|
|
|
+}, {deep: true})
|
|
|
//表格
|
|
|
const tableColumn = [
|
|
|
- {key: 'key1', name: '项目环节', width: '160', align: 'center'},
|
|
|
- {key: 'key2', name: '预算类型', width: '160', align: 'center'},
|
|
|
- {key: 'key3', name: '任务明细', width: '160', align: 'center'},
|
|
|
- {key: 'key4', name: '任务类型', width: '160', align: 'center'},
|
|
|
- {key: 'key5', name: '任务描述', minWidth: '200', align: 'center', isTooltip: true},
|
|
|
- {key: 'key6', name: '完成指标', minWidth: '200', align: 'center', isTooltip: true},
|
|
|
+ {key: 'projectProcessValue', name: '项目环节', width: '160', align: 'center'},
|
|
|
+ {key: 'budgetTypeValue', name: '预算类型', width: '160', align: 'center'},
|
|
|
+ {key: 'taskDetailValue', name: '任务明细', width: '160', align: 'center'},
|
|
|
+ {key: 'planTaskType', name: '任务类型', width: '160', align: 'center'},
|
|
|
+ {key: 'planTaskDesc', name: '任务描述', minWidth: '200', align: 'center', isTooltip: true},
|
|
|
+ {key: 'planTarget', name: '完成指标', minWidth: '200', align: 'center', isTooltip: true},
|
|
|
{key: 'key7', name: '计划起止日期', width: '280', align: 'center'},
|
|
|
- {key: 'key8', name: '预计工作量(小数/整数/天)', width: '160', align: 'center'},
|
|
|
- {key: 'key9', name: '投入岗位类型(日单价)', width: '160', align: 'center'},
|
|
|
- {key: 'key10', name: '投入人员数量', width: '160', align: 'center'},
|
|
|
- {key: 'key11', name: '关联回款里程碑', minWidth: '200', isTooltip: true},
|
|
|
+ {key: 'planDays', name: '预计工作量(小数/整数/天)', width: '160', align: 'center'},
|
|
|
+ {key: 'postType', name: '投入岗位类型(日单价)', width: '160', align: 'center'},
|
|
|
+ {key: 'staffCount', name: '投入人员数量', width: '160', align: 'center'},
|
|
|
+ {key: 'returnedValue', name: '关联回款里程碑', minWidth: '200', isTooltip: true},
|
|
|
{key: 'action', name: '操作', width: '280', align: 'center', fixed: 'right'},
|
|
|
]
|
|
|
const tableData = ref([
|
|
@@ -153,13 +225,13 @@ const tableData = ref([
|
|
|
|
|
|
//表格行样式
|
|
|
const tableRowStyle = ({row, rowIndex}) => {
|
|
|
- if (row.id === 2) {
|
|
|
+ if (row.taskFinishedStatus === 1) {
|
|
|
return {
|
|
|
'background-color': '#E99D42',
|
|
|
'--el-fill-color-lighter': '#E99D42',
|
|
|
'--el-table-row-hover-bg-color': '#E99D42'
|
|
|
}
|
|
|
- } else if (row.id === 4 || row.id === 5) {
|
|
|
+ } else if (row.taskFinishedStatus === 2 ) {
|
|
|
return {
|
|
|
'background-color': '#7e9559',
|
|
|
'--el-fill-color-lighter': '#7e9559',
|
|
@@ -170,25 +242,38 @@ const tableRowStyle = ({row, rowIndex}) => {
|
|
|
|
|
|
//日期时间被选择
|
|
|
const betweenTime = ref(null)
|
|
|
-const betweenTimeUpdate = ({arr, query}) => {
|
|
|
+const betweenTimeUpdate = ({arr, query},item) => {
|
|
|
+ betweenTime.value = arr
|
|
|
betweenTime.value = arr
|
|
|
+ item.planStartDate=arr[0]
|
|
|
+ item.planEndtDate=arr[1]
|
|
|
+ item.betweenTime=arr
|
|
|
+}
|
|
|
+//日期时间被选择
|
|
|
+const subbetweenTime = ref(null)
|
|
|
+const subbetweenTimeUpdate = ({arr, query},item) => {
|
|
|
+ console.log(item,'item');
|
|
|
+ item.planStartTime=arr[0]
|
|
|
+ item.planEndTime=arr[1]
|
|
|
+ item.subbetweenTime=arr
|
|
|
}
|
|
|
-
|
|
|
|
|
|
const subplanModal = ref(false)
|
|
|
const subplanModalShow = (row) => {
|
|
|
+ console.log(row,'row');
|
|
|
subplanModal.value = true
|
|
|
+ tableSubplanData.value=row?.childrenList||[]
|
|
|
}
|
|
|
//表格
|
|
|
const tableSubplanColumn = [
|
|
|
- {key: 'key1', name: '项目环节', width: '160', align: 'center'},
|
|
|
- {key: 'key2', name: '预算类型', width: '160', align: 'center'},
|
|
|
- {key: 'key3', name: '任务明细', width: '160', align: 'center'},
|
|
|
- {key: 'key4', name: '任务类型', width: '160', align: 'center'},
|
|
|
- {key: 'key5', name: '任务描述', minWidth: '200', align: 'center', isTooltip: true},
|
|
|
- {key: 'key6', name: '完成指标', minWidth: '200', align: 'center', isTooltip: true},
|
|
|
+ {key: 'projectProcessValue', name: '项目环节', width: '160', align: 'center'},
|
|
|
+ {key: 'budgetTypeValue', name: '预算类型', width: '160', align: 'center'},
|
|
|
+ {key: 'taskDetailValue', name: '任务明细', width: '160', align: 'center'},
|
|
|
+ {key: 'planTaskType', name: '任务类型', width: '160', align: 'center'},
|
|
|
+ {key: 'planTaskDesc', name: '任务描述', minWidth: '200', align: 'center', isTooltip: true},
|
|
|
+ {key: 'planTarget', name: '完成指标', minWidth: '200', align: 'center', isTooltip: true},
|
|
|
{key: 'key7', name: '计划起止日期', width: '280', align: 'center'},
|
|
|
- {key: 'key8', name: '预计工作量(小数/整数/天)', width: '160', align: 'center'},
|
|
|
+ {key: 'planDays', name: '预计工作量(小数/整数/天)', width: '160', align: 'center'},
|
|
|
]
|
|
|
const tableSubplanData = ref([
|
|
|
{id: 1, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
|
|
@@ -212,13 +297,14 @@ const subplanSaveClick = () => {
|
|
|
const relatedModal = ref(false)
|
|
|
const relatedModalShow = (row) => {
|
|
|
relatedModal.value = true
|
|
|
+ getListByProjectId(row.projectId)
|
|
|
}
|
|
|
//表格
|
|
|
const tableRelatedColumn = [
|
|
|
- {key: 'key1', name: '回款条件', minWidth: '260'},
|
|
|
- {key: 'key2', name: '应收回款时间', width: '160', align: 'center'},
|
|
|
- {key: 'key3', name: '应收回款金额(元)', width: '160', align: 'center'},
|
|
|
- {key: 'key4', name: '催款执行人', width: '160', align: 'center'},
|
|
|
+ {key: 'returnedCondition', name: '回款条件', minWidth: '260'},
|
|
|
+ {key: 'shouldReturnedTime', name: '应收回款时间', width: '160', align: 'center'},
|
|
|
+ {key: 'shouldReturnedMoney', name: '应收回款金额(元)', width: '160', align: 'center'},
|
|
|
+ {key: 'reminderUserName', name: '催款执行人', width: '160', align: 'center'},
|
|
|
{key: 'action', name: '操作', width: '130', align: 'center'},
|
|
|
]
|
|
|
const tableRelatedData = ref([
|
|
@@ -229,6 +315,18 @@ const tableRelatedData = ref([
|
|
|
{id: 5, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
|
|
|
{id: 6, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
|
|
|
])
|
|
|
+//合同里程碑
|
|
|
+
|
|
|
+const getListByProjectId=async(projectId)=>{
|
|
|
+ const {error, code, data} = await contractApi.getListByProjectId({projectId})
|
|
|
+ if (!error && code === 200) {
|
|
|
+ tableRelatedData.value=getArrValue(data)
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ tableRelatedData.value=[]
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
const relatedCloseClick = () => {
|
|
|
relatedModal.value = false
|