项目后台接口对接

client/src/views/OaSystem/projectCenter/projectBook/projectBook.vue

@@ -109,7 +109,7 @@
           </el-table-column>
           <el-table-column prop="xmmc" label="项目名称" width="320" />
           <el-table-column prop="xmbh" label="项目编号" width="180" />
-          <el-table-column prop="xzqdm" label="行政区" width="100" />
+          <el-table-column prop="xzqmc" label="行政区" width="100" />
           <el-table-column prop="projectTypeName" label="项目类别" width="120" />
           <el-table-column prop="zrbm" label="责任部门" />
           <el-table-column prop="xmjl" label="项目经理" />

client/src/views/OaSystem/projectCenter/projectDetail/components/xmcb/index.vue

@@ -10,70 +10,97 @@
         <div>
           <p class="title">项目总成本</p>
           <p class="numberBox">
-            <span class="value">85620000</span>
+            <span class="value">{{ projectCostCalculate['cost'] }}</span>
             <span class="unit">元</span>
           </p>
         </div>
         <ul>
           <li>
-            <p class="value">2456.16</p>
+            <p class="value">{{ projectCostCalculate['travelCost'] }}</p>
             <p class="title">差旅费用（元）</p>
           </li>
           <li>
-            <p class="value">2456.16</p>
+            <p class="value">{{ projectCostCalculate['reimbursementCost'] }}</p>
             <p class="title">普通报销（元）</p>
           </li>
           <li>
-            <p class="value">2456.16</p>
+            <p class="value">{{ projectCostCalculate['subcontractCost'] }}</p>
             <p class="title">分包费用（元）</p>
           </li>
           <li>
-            <p class="value">2456.16</p>
+            <p class="value">{{ projectCostCalculate['outsourceCost'] }}</p>
             <p class="title">外包费用（元）</p>
           </li>
           <li>
-            <p class="value">2456.16</p>
+            <p class="value">{{ projectCostCalculate['laborCost'] }}</p>
             <p class="title">人力成本（元）</p>
           </li>
         </ul>
       </div>
       <div class="tableBox tableLineBox">
         <h4><i class="icon"></i>成本明细</h4>
-        <table>
-          <thead>
-            <tr>
-              <th>序号</th>
-              <th>月份</th>
-              <th>汇总</th>
-              <th>产值进度</th>
-              <th>用款成本（元）</th>
-              <th>人力成本（元）</th>
-              <th>普通报销成本（元）</th>
-              <th>出差成本（元）</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-            </tr>
-          </tbody>
-        </table>
+        <el-table
+          :data="projectCostList"
+          style="width: 100%; height: 100%"
+          :header-cell-style="{
+            background: '#F7F8FA',
+            color: '#121518',
+            height: '50px'
+          }"
+        >
+          <el-table-column label="序号" width="60">
+            <template #default="scope">{{ scope.$index + 1 }}</template>
+          </el-table-column>
+          <el-table-column prop="countDate" label="月份" />
+          <el-table-column prop="xmbh" label="汇总" />
+          <el-table-column prop="outputProgress" label="产值进度" />
+          <el-table-column prop="paymentCost" label="用款成本（元）" />
+          <el-table-column prop="laborCost" label="人力成本（元）" />
+          <el-table-column prop="reimbursementCost" label="普通报销成本（元）" />
+          <el-table-column prop="travelCost" label="出差成本（元）" />
+        </el-table>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import request from '@/config/axios'
+
 defineOptions({ name: 'XmcbComp' })
-const tableData = ref()
-onMounted(() => {})
+const route = useRoute()
+const query = route.query
+/***
+ * 查询项目成本分页和汇总
+ * **/
+const projectCostCalculate = ref({
+  cost: 0,
+  travelCost: 0,
+  reimbursementCost: 0,
+  subcontractCost: 0,
+  outsourceCost: 0,
+  laborCost: 0,
+  paymentCost: 0
+})
+const queryProjectCostByCalculate = async (): Promise<void> => {
+  const urlApi = `/project-cost/calculate`
+  const sendData = {
+    projectId: query.id
+  }
+  const result = await request.post({ url: urlApi, data: sendData }, '/business')
+  projectCostCalculate.value = result
+}
+const projectCostList = ref()
+const queryProjectCostByPage = async (): Promise<void> => {
+  const urlApi = `/project-cost/page`
+  const sendData = {
+    projectId: query.id
+  }
+  const result = await request.get({ url: urlApi, params: sendData }, '/business')
+  projectCostList.value = result
+}
+queryProjectCostByCalculate()
+queryProjectCostByPage()
 </script>
 <style lang="scss" scoped>
 @import './index.scss';

client/src/views/OaSystem/projectCenter/projectDetail/components/xmxx/index.vue

@@ -25,13 +25,13 @@
               <td class="th">销售人员：</td>
               <td>{{ detailData['xsry'] }}</td>
               <td class="th">行政区：</td>
-              <td>自然资源部</td>
+              <td>{{ detailData['xzqmc'] }}</td>
             </tr>
             <tr>
               <td class="th">项目类别：</td>
-              <td>自然资源部</td>
+              <td>{{ detailData['projectTypeName'] }}</td>
               <td class="th">行业：</td>
-              <td>自然资源部</td>
+              <td>{{ detailData['hymc'] }}</td>
             </tr>
             <tr>
               <td class="th">预估工期（天）：</td>
@@ -72,7 +72,7 @@
       </div>
       <div class="xmcyBox" v-else-if="currentIndex === 1">
         <ul>
-          <li v-for="(item, index) in 6" :key="index">
+          <li v-for="(item, index) in projectWorkerRelationList" :key="index">
             <div class="imgBox">
               <img src="" />
               <i class="icon"></i>
@@ -80,7 +80,7 @@
             <div class="userInfo">
               <div class="titleBox">
                 <h4>泮道炬</h4>
-                <span class="tag">项目经理</span>
+                <span class="tag">{{ item['responsibility'] }}</span>
               </div>
               <p class="dept">自然资源产品部</p>
               <p class="txt">毕业院校：浙江水利水电职业技术学院</p>
@@ -94,7 +94,7 @@
       </div>
       <div class="xmjdBox" v-else>
         <div class="tableBox">
-          <el-table :data="tableData" style="width: 100%">
+          <el-table :data="projectMilestoneList" style="width: 100%">
             <el-table-column type="index" label="序号" width="100" />
             <el-table-column prop="title" label="里程碑名称" />
             <el-table-column prop="creatorName" label="计划完成时间" width="120" />
@@ -110,29 +110,48 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+import { watch } from 'vue'
 import request from '@/config/axios'
 
 defineOptions({ name: 'XmxxComp' })
-const tableData = ref()
+const $props = defineProps({
+  detailData: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
+/***
+ * 根据项目ID查询项目成员
+ * **/
+const projectWorkerRelationList = ref()
+const queryProjectWorkerRelation = async (projectId: string): Promise<void> => {
+  const urlApi = `/project-worker-relation/list?projectId=${projectId}`
+  const result = await request.get({ url: urlApi }, '/business')
+  projectWorkerRelationList.value = result
+}
+/**
+ * 项目阶段/项目里程碑
+ * **/
+const projectMilestoneList = ref()
+const queryMilestoneList = async (projectId: string): Promise<void> => {
+  const urlApi = `/project-milestone/list?projectId=${projectId}`
+  const result = await request.get({ url: urlApi }, '/business')
+  projectWorkerRelationList.value = result
+}
+watch(
+  () => $props.detailData,
+  (nVal) => {
+    console.log(nVal.id)
+    queryProjectWorkerRelation(nVal.id)
+    queryMilestoneList(nVal.id)
+  }
+)
 const currentIndex = ref<number>(0)
 const switchHandle: (i: number) => void = (i: number) => {
   currentIndex.value = i
 }
-const detailData = ref<any>()
-const queryProjectDetail = async (id: any): Promise<void> => {
-  const urlApi = `/project`
-  const sendData = {
-    id: id
-  }
-  const result = await request.get({ url: urlApi, params: sendData }, '/business')
-  detailData.value = result
-}
-const route = useRoute()
-const query = route.query
-if (query.id) {
-  queryProjectDetail(query.id)
-}
 </script>
 <style lang="scss" scoped>
 @import './index.scss';

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

@@ -3,8 +3,8 @@
     <div class="detailHeader">
       <div>
         <div>
-          <h2>江山市自然资源业务数字化管理学系统</h2>
-          <span class="subTitle">（YF057020220035）</span>
+          <h2>{{ projectDetail['xmmc'] }}</h2>
+          <span class="subTitle">（{{ projectDetail['xmbh'] }}）</span>
           <span class="statu">进行中</span>
         </div>
         <ul>
@@ -19,7 +19,7 @@
       <div>
         <p>
           <span class="title">合同额(元):</span>
-          <span class="value">17500</span>
+          <span class="value">{{ projectDetail['contractAmount'] }}</span>
         </p>
         <p>
           <span class="title">应收款(元):</span>
@@ -35,7 +35,10 @@
           <li @click="switchComponent(XmxxComp, 0)" :class="currentIndex === 0 ? 'active' : ''"
             ><i class="icon"></i>项目信息</li
           >
-          <li @click="switchComponent(XmhtComp, 1)" :class="currentIndex === 1 ? 'active' : ''"
+          <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' : ''"
@@ -60,7 +63,7 @@
       </div>
     </div>
     <div class="detailContent">
-      <component :is="currentComponent" />
+      <component :is="currentComponent" :detailData="projectDetail" />
     </div>
     <div class="subProjectModalBox" v-show="subProjectShow">
       <ul class="tab">
@@ -71,36 +74,36 @@
       <div class="tabContent">
         <div class="tabContentOne" v-if="tabIndex === 0">
           <div class="formBox">
-            <el-form :model="projectForm" label-width="120px">
+            <el-form :model="projectChildForm" label-width="120px">
               <h4>基本信息</h4>
               <el-row>
                 <el-col :span="24">
                   <el-form-item label="项目名称">
-                    <el-input v-model="projectForm.xmmc" />
+                    <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="projectForm.xmmc" />
+                    <el-input v-model="projectChildForm.xmjl" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="责任部门">
-                    <el-input v-model="projectForm.xmmc" />
+                    <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="projectForm.xmmc" />
+                    <el-input v-model="projectChildForm.xmbh" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="预估工期（天）">
-                    <el-input v-model="projectForm.xmmc" />
+                    <el-input v-model="projectChildForm.yggq" />
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -108,24 +111,24 @@
               <el-row :gutter="24">
                 <el-col :span="12">
                   <el-form-item label="总合同额（元）">
-                    <el-input v-model="projectForm.xmmc" />
+                    <el-input v-model="projectChildForm.contractAmount" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="本项目产值（元）">
-                    <el-input v-model="projectForm.xmmc" />
+                    <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="projectForm.xmmc" />
+                    <el-input v-model="projectChildForm.shareRatio" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="本项目成本（元）">
-                    <el-input v-model="projectForm.xmmc" />
+                    <el-input v-model="projectChildForm.projectCost" />
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -155,11 +158,17 @@
           </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 XmxxComp = defineAsyncComponent(() => {
@@ -184,13 +193,69 @@ const subProjectShow = ref<boolean>(false)
 const addSubProject: () => void = () => {
   subProjectShow.value = true
 }
-const projectForm = ref({
-  xmmc: ''
-})
 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 route = useRoute()
+const query = route.query
+if (query.id) {
+  queryProjectDetail(query.id)
+}
+/***
+ * 添加子项目
+ * **/
+const projectChildForm = ref({
+  xmmc: '',
+  xmbh: '',
+  xmjlId: '',
+  xmjl: '',
+  zrbmId: '',
+  zrbm: '',
+  yggq: 0,
+  contractAmount: 0,
+  projectCost: 0,
+  outputValue: 0,
+  shareRatio: 0
+})
+const addProjectChild = async (): Promise<void> => {
+  const urlApi = `/project/child`
+  const sendData = {
+    pid: query.id,
+    ...projectChildForm.value
+  }
+  const result = await request.post({ url: urlApi, data: sendData }, '/business')
+}
+/***
+ * 添加项目成员
+ * **/
+const addWorkerRelation = async (): Promise<void> => {
+  const urlApi = `/project-worker-relation/bind`
+  const sendData = {
+    projectId: '',
+    workerId: ''
+  }
+  const result = await request.post({ url: urlApi, data: sendData }, '/business')
+}
+const submitProjectChild = () => {
+  addProjectChild()
+  addWorkerRelation()
+}
 </script>
 <style lang="scss" scoped>
 @import url(./projectDetail.scss);