feat: 新增 合同service与interface，详情页各模块拆分

client/src/components/TreeSelect/RegionTreeSelect.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div> </div>
+</template>
+
+<style scoped lang="scss"></style>

client/src/interface/contract.ts

@@ -0,0 +1,6 @@
+export type ContractId = string
+
+// 合同相关查询params
+export interface ContractQueryParams {
+  contractId: ContractId
+}

client/src/interface/project.ts

@@ -0,0 +1 @@
+export type ProjectId = string

client/src/service/contract.ts

@@ -0,0 +1,73 @@
+import request from '@/config/axios'
+import { ContractId } from '@/interface/contract'
+import { ProjectId } from '@/interface/project'
+
+/**
+ * 合同详情与分包合同列表
+ * @param projectId
+ */
+export const getContractsByProject = async (projectId: ProjectId) => {
+  return await request.get(
+    {
+      url: '/contract-with-children',
+      params: { projectId }
+    },
+    '/business'
+  )
+}
+
+/**
+ * 合同里程碑
+ * @param contractId
+ */
+export const getContractMilestoneList = async (contractId: ContractId) => {
+  return await request.get(
+    {
+      url: '/contract-milestone/list',
+      params: { contractId }
+    },
+    '/business'
+  )
+}
+
+/**
+ * 合同回款
+ * @param contractId
+ */
+export const getContractReturnedMoneyList = async (contractId: ContractId) => {
+  return await request.get(
+    {
+      url: '/contract-return-money/list',
+      params: { contractId }
+    },
+    '/business'
+  )
+}
+
+/**
+ * 合同付款
+ * @param contractId
+ */
+export const getContractPaymentList = async (contractId: ContractId) => {
+  return await request.get(
+    {
+      url: '/contract-payment/list',
+      params: { contractId }
+    },
+    '/business'
+  )
+}
+
+/**
+ * 合同查分包金额承担信息
+ * @param contractId
+ */
+export const getContractSharingList = async (contractId: ContractId) => {
+  return await request.get(
+    {
+      url: '/subtract-sharing/list',
+      params: { contractId }
+    },
+    '/business'
+  )
+}

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

@@ -26,13 +26,7 @@
       </div>
       <div class="form">
         <span class="formSpan">行业：</span>
-        <el-select
-          width="160px"
-          v-model="queryParams.hyId"
-          class="m-2"
-          placeholder="请选择行业"
-          size="large"
-        >
+        <el-select width="160px" v-model="queryParams.hyId" class="m-2" placeholder="请选择行业">
           <el-option
             v-for="item in industryListAll"
             :key="item.value"
@@ -198,17 +192,17 @@ const infoList: any = ref([
   {
     icon: 'xmzx/xmzcz',
     name: '项目总产值(元)',
-    num: '0'
+    num: '-'
   },
   {
     icon: 'xmzx/xmzcb',
     name: '项目总成本(元)',
-    num: '0'
+    num: '-'
   },
   {
     icon: 'xmzx/xmzlr',
     name: '项目总利润(元)',
-    num: '-100000.57'
+    num: '-'
   }
 ])
 

client/src/views/OaSystem/projectCenter/projectDetail/components/xmht/ContractMilestone.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+import { getContractMilestoneList } from '@/service/contract'
+import { ContractQueryParams } from '@/interface/contract'
+
+/**
+ * 项目合同里程碑
+ */
+const props = defineProps<ContractQueryParams>()
+const { contractId } = toRefs(props)
+
+const { data: contractMilestoneList } = useQuery(
+  [getContractMilestoneList.name, unref(contractId)],
+  async () => await getContractMilestoneList(unref(contractId))
+)
+</script>
+
+<template>
+  <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 v-for="(item, index) in contractMilestoneList" :key="index">
+          <td>{{ index }}</td>
+          <td>{{ item['name'] }}</td>
+          <td>{{ (item['actualReturnAmount'] / (item['returnAmount'] || 1)) * 100 }}</td>
+          <td>{{ item['returnAmount'] }}</td>
+          <td>{{ item['actualReturnAmount'] }}</td>
+          <td>{{ item['planReturnTime'] }}</td>
+          <td>{{ item['description'] }}</td>
+          <td>
+            <span>开票申请</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>

client/src/views/OaSystem/projectCenter/projectDetail/components/xmht/ContractPayment.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+import { ContractQueryParams } from '@/interface/contract'
+import { getContractPaymentList } from '@/service/contract'
+
+/**
+ * 项目合同付款
+ */
+const props = defineProps<ContractQueryParams>()
+const { contractId } = toRefs(props)
+
+const { data: contractPaymentList } = useQuery(
+  [getContractPaymentList.name, unref(contractId)],
+  async () => await getContractPaymentList(unref(contractId))
+)
+</script>
+
+<template>
+  <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>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>

client/src/views/OaSystem/projectCenter/projectDetail/components/xmht/ContractReturnedMoney.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+import { ContractQueryParams } from '@/interface/contract'
+import { getContractReturnedMoneyList } from '@/service/contract'
+
+/**
+ * 项目合同回款
+ */
+const props = defineProps<ContractQueryParams>()
+const { contractId } = toRefs(props)
+
+const { data: contractRMoneyList } = useQuery(
+  [getContractReturnedMoneyList.name, unref(contractId)],
+  async () => await getContractReturnedMoneyList(unref(contractId))
+)
+</script>
+
+<template>
+  <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>
+          <th>发票类型</th>
+          <th>实际到款时间</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in contractRMoneyList" :key="index">
+          <td>{{ index }}</td>
+          <td>{{ item['contractMilestoneName'] }}</td>
+          <td>{{ item['flowStatus'] }}</td>
+          <td>{{ item['invoiceAmount'] }}</td>
+          <td>{{ item['invoiceContent'] }}</td>
+          <td>{{ item['invoiceDate'] }}</td>
+          <td>{{ item['invoiceNo'] }}</td>
+          <td>{{ invoiceTypeFilter(item['invoiceType']) }}</td>
+          <td>{{ item['returnDate'] }}</td>
+          <td>
+            <span>查看流程</span>
+          </td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>

client/src/views/OaSystem/projectCenter/projectDetail/components/xmht/ContractSharing.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+import { ContractQueryParams } from '@/interface/contract'
+import { getContractSharingList } from '@/service/contract'
+
+/**
+ * 项目合同分包金额承担
+ */
+const props = defineProps<ContractQueryParams>()
+const { contractId } = toRefs(props)
+
+const { data: contractSharingList } = useQuery(
+  [getContractSharingList.name, unref(contractId)],
+  async () => await getContractSharingList(unref(contractId))
+)
+</script>
+
+<template>
+  <div class="tableBox tableLineBox">
+    <h4><i class="icon"></i>分包金额承担信息</h4>
+    <div class="table_filter_box">
+      <span>分包费用承担：</span>
+      <div>
+        <el-checkbox-group>
+          <el-checkbox label="自做" />
+          <el-checkbox label="全部由公司承担" />
+          <el-checkbox label="全部由技术部门承担" />
+          <el-checkbox label="由公司和技术部门按比例承担" />
+        </el-checkbox-group>
+      </div>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th>承担部门</th>
+          <th>项目名称</th>
+          <th>产值（元）</th>
+          <th>承担金额（元）</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>

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

@@ -6,8 +6,8 @@
           <li
             :class="{ active: contractInfoIndex === 0 }"
             @click="switchContractInfo(contractDetail, 0)"
-            >主合同</li
-          >
+            >主合同
+          </li>
           <li
             v-for="(item, index) in contractDetail['children']"
             :class="{ active: contractInfoIndex === index + 1 }"
@@ -36,21 +36,33 @@
           <table>
             <tr>
               <td class="th">合同编号：</td>
-              <td><el-input v-model="contractDetail['contractNumber']" :disabled="!editor" /></td>
+              <td>
+                <el-input v-model="contractDetail['contractNumber']" :disabled="!editor" />
+              </td>
               <td class="th">合同主类型：</td>
-              <td><el-input v-model="contractDetail['mainType']" :disabled="!editor" /></td>
+              <td>
+                <el-input v-model="contractDetail['mainType']" :disabled="!editor" />
+              </td>
             </tr>
             <tr>
               <td class="th">委托方：</td>
-              <td><el-input v-model="contractDetail['assigneeId']" :disabled="!editor" /></td>
+              <td>
+                <el-input v-model="contractDetail['assigneeId']" :disabled="!editor" />
+              </td>
               <td class="th">委托方编号：</td>
-              <td><el-input v-model="contractDetail['clientId']" :disabled="!editor" /></td>
+              <td>
+                <el-input v-model="contractDetail['clientId']" :disabled="!editor" />
+              </td>
             </tr>
             <tr>
               <td class="th">受托方：</td>
-              <td><el-input v-model="contractDetail['assigneeId']" :disabled="!editor" /></td>
+              <td>
+                <el-input v-model="contractDetail['assigneeId']" :disabled="!editor" />
+              </td>
               <td class="th">合同次类型：</td>
-              <td><el-input v-model="contractDetail['secondType']" :disabled="!editor" /></td>
+              <td>
+                <el-input v-model="contractDetail['secondType']" :disabled="!editor" />
+              </td>
             </tr>
             <tr>
               <td class="th">合同拿出日期：</td>
@@ -91,7 +103,9 @@
           <table>
             <tr>
               <td class="th">付款条件：</td>
-              <td><el-input v-model="contractDetail['zrbm']" :disabled="!editor" /></td>
+              <td>
+                <el-input v-model="contractDetail['zrbm']" :disabled="!editor" />
+              </td>
             </tr>
           </table>
         </div>
@@ -100,11 +114,13 @@
           <table>
             <tr>
               <td class="th">质保金（元）：</td>
-              <td><el-input v-model="contractDetail['qualityMoney']" :disabled="!editor" /></td>
+              <td>
+                <el-input v-model="contractDetail['qualityMoney']" :disabled="!editor" />
+              </td>
               <td class="th">质保金状态：</td>
-              <td
-                ><el-input v-model="contractDetail['qualityMoneyStatus']" :disabled="!editor"
-              /></td>
+              <td>
+                <el-input v-model="contractDetail['qualityMoneyStatus']" :disabled="!editor" />
+              </td>
             </tr>
           </table>
         </div>
@@ -126,9 +142,9 @@
                   技术开发
                 </td>
                 <td>28500</td>
-                <td rowspan="5"
-                  ><el-input v-model="contractDetail['taxHsjeJskf']" :disabled="!editor"
-                /></td>
+                <td rowspan="5">
+                  <el-input v-model="contractDetail['taxHsjeJskf']" :disabled="!editor" />
+                </td>
                 <td rowspan="5"></td>
               </tr>
               <tr>
@@ -136,97 +152,41 @@
                   <span>6%</span>
                   服务
                 </td>
-                <td><el-input v-model="contractDetail['taxHsjeFw']" :disabled="!editor" /></td>
+                <td>
+                  <el-input v-model="contractDetail['taxHsjeFw']" :disabled="!editor" />
+                </td>
               </tr>
               <tr>
                 <td class="title">
                   <span>13%</span>
                   产品软件
                 </td>
-                <td><el-input v-model="contractDetail['taxHsjeRjcp']" :disabled="!editor" /></td>
+                <td>
+                  <el-input v-model="contractDetail['taxHsjeRjcp']" :disabled="!editor" />
+                </td>
               </tr>
               <tr>
                 <td class="title">
                   <span>13%</span>
                   硬件（平板等）
                 </td>
-                <td><el-input v-model="contractDetail['taxHsjeYj']" :disabled="!editor" /></td>
-              </tr>
-              <tr class="subtotal">
-                <td> 小计 </td>
-                <td><el-input v-model="contractDetail['taxHsjeTotal']" :disabled="!editor" /></td>
-              </tr>
-            </tbody>
-          </table>
-        </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 v-for="(item, index) in contractMilestonList" :key="index">
-                <td>{{ index }}</td>
-                <td>{{ item['name'] }}</td>
-                <td>{{ (item['actualReturnAmount'] / (item['returnAmount'] || 1)) * 100 }}</td>
-                <td>{{ item['returnAmount'] }}</td>
-                <td>{{ item['actualReturnAmount'] }}</td>
-                <td>{{ item['planReturnTime'] }}</td>
-                <td>{{ item['description'] }}</td>
                 <td>
-                  <span>开票申请</span>
+                  <el-input v-model="contractDetail['taxHsjeYj']" :disabled="!editor" />
                 </td>
               </tr>
-            </tbody>
-          </table>
-        </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>
-                <th>发票类型</th>
-                <th>实际到款时间</th>
-                <th>操作</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(item, index) in contractRMoneyList" :key="index">
-                <td>{{ index }}</td>
-                <td>{{ item['contractMilestoneName'] }}</td>
-                <td>{{ item['flowStatus'] }}</td>
-                <td>{{ item['invoiceAmount'] }}</td>
-                <td>{{ item['invoiceContent'] }}</td>
-                <td>{{ item['invoiceDate'] }}</td>
-                <td>{{ item['invoiceNo'] }}</td>
-                <td>{{ invoiceTypeFilter(item['invoiceType']) }}</td>
-                <td>{{ item['returnDate'] }}</td>
+              <tr class="subtotal">
+                <td> 小计</td>
                 <td>
-                  <span>查看流程</span>
+                  <el-input v-model="contractDetail['taxHsjeTotal']" :disabled="!editor" />
                 </td>
-                <td></td>
               </tr>
             </tbody>
           </table>
         </div>
+        <!-- 合同里程碑 -->
+        <ContractMilestone :contractId="contractDetail.id" />
+        <!-- 回款 -->
+        <ContractReturnedMoney :contractId="contractDetail.id" />
       </template>
       <template v-else>
         <div class="titleBox">
@@ -303,7 +263,7 @@
                 <el-input v-model="contractDetail['subReason']" :disabled="!editor" />
               </td>
               <td class="th"></td>
-              <td> </td>
+              <td></td>
             </tr>
           </table>
         </div>
@@ -316,63 +276,7 @@
             </tr>
           </table>
         </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>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="tableBox tableLineBox">
-          <h4><i class="icon"></i>分包金额承担信息</h4>
-          <div class="table_filter_box">
-            <span>分包费用承担：</span>
-            <div>
-              <el-checkbox-group>
-                <el-checkbox label="自做" />
-                <el-checkbox label="全部由公司承担" />
-                <el-checkbox label="全部由技术部门承担" />
-                <el-checkbox label="由公司和技术部门按比例承担" />
-              </el-checkbox-group>
-            </div>
-          </div>
-          <table>
-            <thead>
-              <tr>
-                <th>承担部门</th>
-                <th>项目名称</th>
-                <th>产值（元）</th>
-                <th>承担金额（元）</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+        <ContractSharing :contractId="contractDetail.id" />
         <div class="tableBox">
           <h4><i class="icon"></i>财务信息</h4>
           <table>
@@ -384,31 +288,6 @@
             </tr>
           </table>
         </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>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
       </template>
     </div>
   </div>
@@ -416,11 +295,16 @@
 <script setup lang="ts">
 import request from '@/config/axios'
 import UserOrgTree from '@/views/OaSystem/components/UserOrgTree/index.vue'
+import ContractMilestone from '@/views/OaSystem/projectCenter/projectDetail/components/xmht/ContractMilestone.vue'
+import ContractReturnedMoney from '@/views/OaSystem/projectCenter/projectDetail/components/xmht/ContractReturnedMoney.vue'
+import ContractSharing from '@/views/OaSystem/projectCenter/projectDetail/components/xmht/ContractSharing.vue'
 
 defineOptions({ name: 'XmhtComp' })
 const _mainProjectId: any = useRoute().query.id
+// 合同id ??是否存在
 const _toContractId = useRoute().query.contractId
 const editor = ref<Boolean>(false)
+
 /**
  * 切换子项目信息
  * **/
@@ -435,6 +319,11 @@ const contractDetail = ref({
   id: '',
   children: [] as any
 })
+
+watch(contractDetail, () => {
+  console.log('contractDetail change: ', contractDetail)
+})
+
 function queryContractWithChildByList(): void {
   const urlApi = `/contract-with-children`
   const sendData = {
@@ -442,13 +331,13 @@ function queryContractWithChildByList(): void {
   }
   request.get({ url: urlApi, params: sendData }, '/business').then((resultData) => {
     // contractDetail.value = resultData
-    contractDetail.value = { id: '', children: [] }
-    contractDetail.value.children = [{}]
+    console.log('queryContractWithChildByList: ', resultData)
+    contractDetail.value = { id: resultData['id'] ?? '', children: [{}] }
     if (resultData) {
-      queryContractMilestoneByList(resultData['id'])
-      queryContractRMoneyByList(resultData['id'])
-      queryContractPaymentByList(resultData['id'])
-      queryContractSharingByList(resultData['id'])
+      // queryContractMilestoneByList(resultData['id'])
+      // queryContractRMoneyByList(resultData['id'])
+      // queryContractPaymentByList(resultData['id'])
+      // queryContractSharingByList(resultData['id'])
     }
   })
 }
@@ -460,39 +349,19 @@ function queryContract(): void {
   }
   request.get({ url: urlApi, params: sendData }, '/business').then((resultData) => {
     contractDetail.value = resultData
-    queryContractMilestoneByList(resultData['id'])
-    queryContractRMoneyByList(resultData['id'])
-    queryContractPaymentByList(resultData['id'])
-    queryContractSharingByList(resultData['id'])
+    // queryContractMilestoneByList(resultData['id'])
+    // queryContractRMoneyByList(resultData['id'])
+    // queryContractPaymentByList(resultData['id'])
+    // queryContractSharingByList(resultData['id'])
   })
 }
+
 if (_toContractId) {
   queryContract()
 } else {
   queryContractWithChildByList()
 }
-//查询合同里程碑
-const contractMilestonList = ref([])
-function queryContractMilestoneByList(contractId: string): void {
-  const urlApi = `/contract-milestone/list`
-  const sendData = {
-    contractId: contractId
-  }
-  request.get({ url: urlApi, params: sendData }, 'http://localhost').then((resultData) => {
-    contractMilestonList.value = resultData
-  })
-}
-//查询合同回款详情
-const contractRMoneyList = ref([])
-function queryContractRMoneyByList(contractId: string): void {
-  const urlApi = `/contract-return-money/list`
-  const sendData = {
-    contractId: contractId
-  }
-  request.get({ url: urlApi, params: sendData }, '/business').then((resultData) => {
-    contractRMoneyList.value = resultData
-  })
-}
+
 //@ts-ignore
 const invoiceTypeMap = {
   '1': '增值税专用发票',
@@ -518,28 +387,6 @@ const saveContractHandle = (): void => {
     }
   })
 }
-//查询分包合同付款详情
-const contractPaymentList = ref([])
-function queryContractPaymentByList(contractId: string): void {
-  const urlApi = `/contract-payment/list`
-  const sendData = {
-    contractId: contractId
-  }
-  request.get({ url: urlApi, params: sendData }, '/business').then((resultData) => {
-    contractPaymentList.value = resultData
-  })
-}
-//查询分包金额承担信息
-const contractSharingList = ref([])
-function queryContractSharingByList(contractId: string): void {
-  const urlApi = `/subtract-sharing/list`
-  const sendData = {
-    contractId: contractId
-  }
-  request.get({ url: urlApi, params: sendData }, '/business').then((resultData) => {
-    contractSharingList.value = resultData
-  })
-}
 </script>
 <style lang="scss" scoped>
 @import './index.scss';