123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- <template>
- <div class="_ProjectDetail">
- <div class="detailHeader">
- <div>
- <div>
- <h2>
- {{ projectDetail['xmmc'] }}
- <span class="subTitle">({{ projectDetail['xmbh'] }})</span>
- <span class="statu">进行中</span>
- </h2>
- </div>
- <ul>
- <li @click="editorProject">{{ !isEditorProject ? '编辑' : '保存' }}</li>
- <li v-if="projectDetail['isSign'] === 1" @click="handleStartContractSign">合同签订</li>
- <li @click="addSubProject">添加子项目</li>
- <li>验收</li>
- <li>结项</li>
- <li>查看流程</li>
- </ul>
- </div>
- <div>
- <ul>
- <li @click="switchComponent(XmxxComp, 0)" :class="currentIndex === 0 ? 'active' : ''"
- ><i class="icon"></i>项目信息
- </li>
- <!-- v-if="projectDetail['isSign'] === 1" -->
- <li @click="switchComponent(XmhtComp, 1)" :class="currentIndex === 1 ? 'active' : ''"
- ><i class="icon"></i>项目合同
- </li>
- <li @click="switchComponent(XmcbComp, 2)" :class="currentIndex === 2 ? 'active' : ''"
- ><i class="icon"></i>项目成本
- </li>
- <li @click="switchComponent(FjclComp, 3)" :class="currentIndex === 3 ? 'active' : ''"
- ><i class="icon"></i>附件材料
- </li>
- </ul>
- <div class="projectInfo">
- <p>
- <span class="title">合同额(元):</span>
- <span class="value">{{ projectDetail['contractAmount'] }}</span>
- </p>
- <p>
- <span class="title">应收款(元):</span>
- <span class="value">{{ projectDetail['receivableAmount'] }}</span>
- </p>
- <p>
- <span class="title">合同余额(元):</span>
- <span class="value">{{ projectDetail['contractBalance'] }}</span>
- </p>
- </div>
- </div>
- </div>
- <div class="detailContent">
- <component
- :is="currentComponent"
- :detailData="projectDetail"
- ref="dynamicRef"
- :editor="isEditorProject"
- />
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { type Component } from 'vue'
- import { useRoute } from 'vue-router'
- import request from '@/config/axios'
- defineOptions({ name: 'ProjectDetail' })
- const dynamicRef = shallowRef<Component>()
- const XmxxComp = defineAsyncComponent(() => {
- return import('./components/xmxx/index.vue')
- })
- import XmhtComp from './components/xmht/index.vue'
- import { startContractSign, startOutsourcing } from '@/service/contract'
- import { openFlow } from '@/utils/flow'
- import { useMutation } from '@tanstack/vue-query'
- import { ContractId } from '@/interface/contract'
- import { ProjectId } from '@/interface/project'
- const XmcbComp = defineAsyncComponent(() => {
- return import('./components/xmcb/index.vue')
- })
- const FjclComp = defineAsyncComponent(() => {
- return import('./components/fjcl/index.vue')
- })
- const currentComponent = shallowRef<Component>(XmxxComp)
- const currentIndex = shallowRef<number>(0)
- const switchComponent: (c: Component, i: number) => void = (c: Component, i: number) => {
- currentComponent.value = c
- currentIndex.value = i
- }
- const addSubProject: () => void = () => {
- //@ts-ignore
- dynamicRef.value?.switchSubProject()
- }
- /**
- * 项目详情后台接口
- * **/
- const projectDetail = shallowRef({
- xmmc: '',
- contractAmount: '',
- receivableAmount: '',
- contractBalance: ''
- })
- const queryProjectDetail = async (id: any): Promise<void> => {
- const urlApi = `/project`
- const sendData = {
- id: id
- }
- const result = await request.get({ url: urlApi, params: sendData }, '/business')
- projectDetail.value = result
- }
- const route = useRoute()
- const query = route.query
- if (query.id) {
- queryProjectDetail(query.id)
- }
- /**
- * 项目编辑
- * **/
- const isEditorProject = ref<boolean>(true)
- const editorProject: () => void = (): void => {
- isEditorProject.value = !isEditorProject.value
- if (isEditorProject.value) return
- //@ts-ignore
- dynamicRef.value.saveProjectHandle()
- }
- /**
- * 发起合同签订
- */
- const { mutate: startContractSignMutate } = useMutation(startContractSign, {
- onSuccess: (data) => openFlow(data)
- })
- const handleStartContractSign = () => startContractSignMutate(query.id as ProjectId)
- </script>
- <style lang="scss" scoped>
- @import './projectDetail.scss';
- </style>
|