projectDetail.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <div class="_ProjectDetail">
  3. <div class="detailHeader">
  4. <div>
  5. <div>
  6. <h2>
  7. {{ projectDetail['xmmc'] }}
  8. <span class="subTitle">({{ projectDetail['xmbh'] }})</span>
  9. <span class="statu">进行中</span>
  10. </h2>
  11. </div>
  12. <ul>
  13. <li @click="editorProject">{{ !isEditorProject ? '编辑' : '保存' }}</li>
  14. <li v-if="projectDetail['isSign'] === 1" @click="handleStartContractSign">合同签订</li>
  15. <li @click="addSubProject">添加子项目</li>
  16. <li>验收</li>
  17. <li>结项</li>
  18. <li>查看流程</li>
  19. </ul>
  20. </div>
  21. <div>
  22. <ul>
  23. <li @click="switchComponent(XmxxComp, 0)" :class="currentIndex === 0 ? 'active' : ''"
  24. ><i class="icon"></i>项目信息
  25. </li>
  26. <!-- v-if="projectDetail['isSign'] === 1" -->
  27. <li @click="switchComponent(XmhtComp, 1)" :class="currentIndex === 1 ? 'active' : ''"
  28. ><i class="icon"></i>项目合同
  29. </li>
  30. <li @click="switchComponent(XmcbComp, 2)" :class="currentIndex === 2 ? 'active' : ''"
  31. ><i class="icon"></i>项目成本
  32. </li>
  33. <li @click="switchComponent(FjclComp, 3)" :class="currentIndex === 3 ? 'active' : ''"
  34. ><i class="icon"></i>附件材料
  35. </li>
  36. </ul>
  37. <div class="projectInfo">
  38. <p>
  39. <span class="title">合同额(元):</span>
  40. <span class="value">{{ projectDetail['contractAmount'] }}</span>
  41. </p>
  42. <p>
  43. <span class="title">应收款(元):</span>
  44. <span class="value">{{ projectDetail['receivableAmount'] }}</span>
  45. </p>
  46. <p>
  47. <span class="title">合同余额(元):</span>
  48. <span class="value">{{ projectDetail['contractBalance'] }}</span>
  49. </p>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="detailContent">
  54. <component
  55. :is="currentComponent"
  56. :detailData="projectDetail"
  57. ref="dynamicRef"
  58. :editor="isEditorProject"
  59. />
  60. </div>
  61. </div>
  62. </template>
  63. <script setup lang="ts">
  64. import { type Component } from 'vue'
  65. import { useRoute } from 'vue-router'
  66. import request from '@/config/axios'
  67. defineOptions({ name: 'ProjectDetail' })
  68. const dynamicRef = shallowRef<Component>()
  69. const XmxxComp = defineAsyncComponent(() => {
  70. return import('./components/xmxx/index.vue')
  71. })
  72. import XmhtComp from './components/xmht/index.vue'
  73. import { startContractSign, startOutsourcing } from '@/service/contract'
  74. import { openFlow } from '@/utils/flow'
  75. import { useMutation } from '@tanstack/vue-query'
  76. import { ContractId } from '@/interface/contract'
  77. import { ProjectId } from '@/interface/project'
  78. const XmcbComp = defineAsyncComponent(() => {
  79. return import('./components/xmcb/index.vue')
  80. })
  81. const FjclComp = defineAsyncComponent(() => {
  82. return import('./components/fjcl/index.vue')
  83. })
  84. const currentComponent = shallowRef<Component>(XmxxComp)
  85. const currentIndex = shallowRef<number>(0)
  86. const switchComponent: (c: Component, i: number) => void = (c: Component, i: number) => {
  87. currentComponent.value = c
  88. currentIndex.value = i
  89. }
  90. const addSubProject: () => void = () => {
  91. //@ts-ignore
  92. dynamicRef.value?.switchSubProject()
  93. }
  94. /**
  95. * 项目详情后台接口
  96. * **/
  97. const projectDetail = shallowRef({
  98. xmmc: '',
  99. contractAmount: '',
  100. receivableAmount: '',
  101. contractBalance: ''
  102. })
  103. const queryProjectDetail = async (id: any): Promise<void> => {
  104. const urlApi = `/project`
  105. const sendData = {
  106. id: id
  107. }
  108. const result = await request.get({ url: urlApi, params: sendData }, '/business')
  109. projectDetail.value = result
  110. }
  111. const route = useRoute()
  112. const query = route.query
  113. if (query.id) {
  114. queryProjectDetail(query.id)
  115. }
  116. /**
  117. * 项目编辑
  118. * **/
  119. const isEditorProject = ref<boolean>(true)
  120. const editorProject: () => void = (): void => {
  121. isEditorProject.value = !isEditorProject.value
  122. if (isEditorProject.value) return
  123. //@ts-ignore
  124. dynamicRef.value.saveProjectHandle()
  125. }
  126. /**
  127. * 发起合同签订
  128. */
  129. const { mutate: startContractSignMutate } = useMutation(startContractSign, {
  130. onSuccess: (data) => openFlow(data)
  131. })
  132. const handleStartContractSign = () => startContractSignMutate(query.id as ProjectId)
  133. </script>
  134. <style lang="scss" scoped>
  135. @import './projectDetail.scss';
  136. </style>