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

<template>
  <div class="_ProjectDetail">
    <div class="detailHeader">
      <div>
        <div>
          <h2>{{ projectDetail['xmmc'] }}</h2>
          <span class="subTitle">（{{ projectDetail['xmbh'] }}）</span>
          <span class="statu">进行中</span>
        </div>
        <ul>
          <li @click="editorProject">{{ !isEditorProject ? '编辑' : '保存' }}</li>
          <li>合同签订</li>
          <li @click="addSubProject">添加子项目</li>
          <li>验收</li>
          <li>结项</li>
          <li>查看流程</li>
        </ul>
      </div>
      <div>
        <p>
          <span class="title">合同额(元):</span>
          <span class="value">{{ projectDetail['contractAmount'] }}</span>
        </p>
        <p>
          <span class="title">应收款(元):</span>
          <span class="value">11500</span>
        </p>
        <p>
          <span class="title">合同余额(元):</span>
          <span class="value">17500</span>
        </p>
      </div>
      <div>
        <ul>
          <li @click="switchComponent(XmxxComp, 0)" :class="currentIndex === 0 ? 'active' : ''"
            ><i class="icon"></i>项目信息</li
          >
          <li
            v-if="projectDetail['isSign'] === 1"
            @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>
          <p>
            <i class="icon"></i>
            <span class="title">责任部门:</span>
            <span class="value">{{ projectDetail['xmjl'] }}</span>
          </p>
          <p>
            <i class="icon"></i>
            <span class="title">项目经理:</span>
            <span class="value">{{ projectDetail['zrbm'] }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="detailContent">
      <component
        :is="currentComponent"
        :detailData="projectDetail"
        ref="dynamicRef"
        :editor="isEditorProject"
      />
    </div>
    <div class="subProjectModalBox" v-show="subProjectShow">
      <ul class="tab">
        <li @click="switchTabHandle(0)" :class="[tabIndex === 0 ? 'active' : '']">项目信息</li>
        <li @click="switchTabHandle(1)" :class="[tabIndex === 1 ? 'active' : '']">项目成员</li>
      </ul>
      <span class="close_icon" @click="subProjectShow = false"></span>
      <div class="tabContent">
        <div class="tabContentOne" v-if="tabIndex === 0">
          <div class="formBox">
            <el-form :model="projectChildForm" label-width="120px">
              <h4>基本信息</h4>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="项目名称">
                    <el-input v-model="projectChildForm.xmmc" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="项目经理">
                    <el-input v-model="projectChildForm.xmjl" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="责任部门">
                    <el-input v-model="projectChildForm.zrbm" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="项目编号">
                    <el-input v-model="projectChildForm.xmbh" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="预估工期（天）">
                    <el-input v-model="projectChildForm.yggq" />
                  </el-form-item>
                </el-col>
              </el-row>
              <h4>产值信息</h4>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="总合同额（元）">
                    <el-input v-model="projectChildForm.contractAmount" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="本项目产值（元）">
                    <el-input v-model="projectChildForm.outputValue" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="利益分成（公司/部门）">
                    <el-input v-model="projectChildForm.shareRatio" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="本项目成本（元）">
                    <el-input v-model="projectChildForm.projectCost" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="tabContentTwo" v-else>
          <ul>
            <li v-for="(item, index) in 6" :key="index">
              <div class="imgBox">
                <img src="" />
                <i class="icon"></i>
              </div>
              <div class="userInfo">
                <div class="titleBox">
                  <h4>泮道炬</h4>
                  <span class="tag">项目经理</span>
                </div>
                <p class="dept">自然资源产品部</p>
                <p class="txt">毕业院校：浙江水利水电职业技术学院</p>
                <p class="txt">学历：大专</p>
                <p class="txt">电话：15932242593</p>
              </div>
              <i class="del_icon"><Icon icon="ep:delete" /></i>
            </li>
            <li class="operation"> <i class="icon"></i>项目成员 </li>
          </ul>
        </div>
      </div>
      <div class="btnGroup">
        <el-button type="default">取消</el-button>
        <el-button type="primary" @click="submitProjectChild">提交</el-button>
      </div>
    </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 = ref<Component>()
const XmxxComp = defineAsyncComponent(() => {
  return import('./components/xmxx/index.vue')
})
const XmhtComp = defineAsyncComponent(() => {
  return import('./components/xmht/index.vue')
})
const XmcbComp = defineAsyncComponent(() => {
  return import('./components/xmcb/index.vue')
})
const FjclComp = defineAsyncComponent(() => {
  return import('./components/fjcl/index.vue')
})
const currentComponent = ref<Component>(XmxxComp)
const currentIndex = ref<number>(0)
const switchComponent: (c: Component, i: number) => void = (c: Component, i: number) => {
  currentComponent.value = c
  currentIndex.value = i
}
const subProjectShow = ref<boolean>(false)
const addSubProject: () => void = () => {
  subProjectShow.value = true
}
const tabIndex = ref<number>(0)
const switchTabHandle: (i: number) => void = (i: number) => {
  tabIndex.value = i
}

/**
 * 项目详情后台接口
 * **/
const projectDetail = ref({
  xmmc: ''
})
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 queryProjectWithChild = async (id: any): Promise<void> => {
  const urlApi = `/project-with-children`
  const sendData = {
    id: id
  }
  const result = await request.get({ url: urlApi, params: sendData }, '/business')
  console.log('result~~~~~~~~~~')
  console.log(result)
}
const route = useRoute()
const query = route.query
if (query.id) {
  queryProjectDetail(query.id)
  queryProjectWithChild(query.id)
}
/***
 * 添加子项目
 * **/
const projectChildForm = ref({
  xmmc: '',
  xmbh: '',
  xmjlId: '',
  xmjl: '',
  zrbmId: '',
  zrbm: '',
  yggq: 0,
  contractAmount: 0,
  projectCost: 0,
  outputValue: 0,
  shareRatio: 0
})
const addProjectChild = (): void => {
  const urlApi = `/project/child`
  const sendData = {
    pid: query.id,
    ...projectChildForm.value
  }
  request.post({ url: urlApi, data: sendData }, '/business')
}
/***
 * 添加项目成员
 * **/
const addWorkerRelation = (): void => {
  const urlApi = `/project-worker-relation/bind`
  const sendData = {
    projectId: '',
    workerId: ''
  }
  request.post({ url: urlApi, data: sendData }, '/business')
}
const submitProjectChild = () => {
  addProjectChild()
}
/**
 * 项目编辑
 *  **/
const isEditorProject = ref<boolean>(true)
const editorProject: () => void = (): void => {
  isEditorProject.value = !isEditorProject.value
  dynamicRef.value?.addProjectHandle()
}
</script>
<style lang="scss" scoped>
@import url(./projectDetail.scss);
</style>