zjugis_OA/client/src/views/OaSystem/projectCenter/projectDetail/projectDetail.vue

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