财务2.1 暂存

src/assets/svg-icons/financial/info.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z" fill="#C0C4CC"/>
+<path d="M9 12V9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 6H9.0075" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/SvgIcon/index.vue

@@ -1,4 +1,4 @@
-<!-- svg图标组件 -->
+<!-- svg图标组件 使用: <svg-Icon :name="svgIcon-[dir]-[name]" size="" color="" />-->
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({

src/styles/main.scss

@@ -11,6 +11,8 @@ html{
   --themeColor:#{$themeColor};
   --dangerColor:#{$dangerColor};
   --auxiliaryColor:#{$auxiliaryColor};
+  --hitTextColorOne:#{$hitTextColorOne};
+  --secondaryTextColor:#{$secondaryTextColor};
   font-family: $regularFont;
 }
 

src/views/financialManagement/financialList.vue

@@ -262,7 +262,7 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
               </el-table-column>
               <el-table-column label="合同金额" align="center" width="100" prop="contract_amount"></el-table-column>
               <el-table-column label="约定付款时间" align="center" width="120" prop="agreed_pay_time"
-              v-if="financial.tabelColumnShowArr.includes('agreed_pay_time')"></el-table-column>
+              v-if="financial.tabelColumnShowArr.includes('agreed_pay_time')" show-overflow-tooltip ></el-table-column>
               <el-table-column label="签订日" align="center" prop="sign_date" width="110"
               v-if="financial.tabelColumnShowArr.includes('sign_date')"></el-table-column>
               <el-table-column label="合同状态" align="center" width="90" prop="contract_status">
@@ -355,17 +355,20 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
           </div>
         </div>
         <!-- 开票详情弹窗 -->
-        <el-dialog v-model="dialog.invoiceDetailShow" title="开票详情" width="500px" :close-on-click-modal="false">
+        <el-dialog v-model="dialog.invoiceDetailShow" title="开票详情" width="600px" :close-on-click-modal="false">
           <el-table :data="dialog.invoiceDetailList" border max-height="600px">
+            <el-table-column label="开票金额" prop="amount" align="center"></el-table-column>
             <el-table-column label="开票日" prop="invoice_time" align="center"></el-table-column>
-            <el-table-column label="开票金额（元）" prop="amount" align="center"></el-table-column>
+            <el-table-column label="销售" align="center">张三</el-table-column>
+            <el-table-column label="备注" align="center" show-overflow-tooltip  >备注</el-table-column>
           </el-table>
         </el-dialog>
         <!-- 到款详情弹窗 -->
         <el-dialog v-model="dialog.refundDetailShow" title="到款详情" width="500px" :close-on-click-modal="false">
           <el-table :data="dialog.refundDetailList" border max-height="600px">
+            <el-table-column label="到款金额" prop="amount" align="center"></el-table-column>
             <el-table-column label="到款日" prop="invoice_time" align="center"></el-table-column>
-            <el-table-column label="到款金额（元）" prop="amount" align="center"></el-table-column>
+            <el-table-column label="备注" align="center" show-overflow-tooltip  >备注</el-table-column>
           </el-table>
         </el-dialog>
         <!-- 更改合同状态弹窗 -->

src/views/financialManagement/invoice/invoiceList.vue

@@ -1,6 +1,7 @@
 <script setup>
 
 import getCom from '../composition/IandPList'
+import '../style/iandPList.scss'
 
 const invoice=getCom(1)
 const data = invoice.data
@@ -11,9 +12,9 @@ invoice.placementList()
 </script>
 
 <template>
-    <div id="invoice-list-container">
-      <div class="invoice-search-zone">
-        <div class="invoice-search-box">
+    <div id="iandP-list-container">
+      <div class="iandP-search-zone">
+        <div class="iandP-search-box">
           <el-input v-model="data.searchParams.contract_code" placeholder="请输入合同编号"
           style="width: 309px;margin-left: 40px;margin-bottom: 8px;" clearable @input="invoice.searchPlacement" ></el-input>
           <el-date-picker v-model="data.dateRange" start-placeholder="起始日期"
@@ -30,16 +31,49 @@ invoice.placementList()
           </div>
         </div>
       </div>
-      <div class="invoice-table-container">
-        <div class="invoice-table-top">
-          <span style="font-size:14px">已开票金额：{{ data.amountTotal }}元</span>
-          <el-button type="primary" style="width: 80px;" size="large" @click="invoice.placementExport">导出</el-button>
+      <div class="iandP-table-container">
+        <div class="iandP-table-top">
+          <div class="iandP-top-amout">
+            <div class="iandP-amout-box">
+              <div class="iandP-amout-box-text">
+                <span>已开票合计金额（换算后）</span>
+                <span>5000.00（元）</span>
+              </div>
+              <svg-Icon name="svgIcon-financial-calculation" size="40" />
+            </div>
+            <div class="iandP-amout-box">
+              <div class="iandP-amout-box-text">
+                <span>人民币</span>
+                <span>2000.00（元）</span>
+              </div>
+              <svg-Icon name="svgIcon-country-China" size="40" />
+            </div>
+            <div class="iandP-amout-box">
+              <div class="iandP-amout-box-text">
+                <span>新加坡币</span>
+                <span>2000.00（新元）</span>
+              </div>
+              <svg-Icon name="svgIcon-country-Singapore" size="40" />
+            </div>
+            <div class="iandP-amout-box">
+              <div class="iandP-amout-box-text">
+                <span>美元</span>
+                <span>5000.00（美元）</span>
+              </div>
+              <svg-Icon name="svgIcon-country-America" size="40" />
+            </div>
+          </div>
+          <el-button class="element-common-button" style="margin-bottom: 10px;" size="large" @click="invoice.placementExport">导出</el-button>
         </div>
         <!-- 表格 -->
         <el-table :data="data.tableData" border max-height="560px" size="default" style="position: sticky;"> 
           <el-table-column label="合同编号" align="center" prop="contract_code" show-overflow-tooltip></el-table-column>
           <el-table-column label="开票金额" align="center" prop="amount" show-overflow-tooltip></el-table-column>
-          <el-table-column label="开票日期" align="center" prop="invoice_time" show-overflow-tooltip></el-table-column>
+          <el-table-column label="金额单位" align="center" prop="amount">美元</el-table-column>
+          <el-table-column label="换算金额（元）" align="center" prop="amount" show-overflow-tooltip>2100.00</el-table-column>
+          <el-table-column label="开票日" align="center" prop="invoice_time" show-overflow-tooltip></el-table-column>
+          <el-table-column label="销售" align="center" prop="amount" >张三</el-table-column>
+          <el-table-column label="备注" align="center" prop="amount" show-overflow-tooltip>哈哈哈哈哈</el-table-column>
           <el-table-column label="操作" width="120" align="center">
             <template #default="{row}">
               <div class="table-options" style="justify-content: center;">
@@ -66,30 +100,5 @@ invoice.placementList()
 </template>
   
 <style lang="scss" scoped>
-  #invoice-list-container{
-    min-height: 100%;
-    .invoice-search-zone{
-      border: 1px solid #ECECEC;
-      background-color: white;
-      padding: 18px 30px 12px;
-      box-sizing: border-box;
-      .invoice-search-box{
-        margin-left: -40px;
-        display: flex;
-        flex-wrap: wrap;
-      }
-    }
-    .invoice-table-container{
-      border: 1px solid #ECECEC;
-      background-color: white;
-      margin-top: 18px;
-      padding: 18px 30px 26px;
-      .invoice-table-top{
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 18px;
-      }
-    }
-  }
+
 </style>

src/views/financialManagement/placement/placementList.vue

@@ -1,6 +1,7 @@
 <script setup>
 
 import getCom from '../composition/IandPList'
+import '../style/iandPList.scss'
 
 const placement=getCom(2)
 const data = placement.data
@@ -13,9 +14,9 @@ placement.placementList()
 </script>
 
 <template>
-    <div id="placement-list-container">
-      <div class="placement-search-zone">
-        <div class="placement-search-box">
+    <div id="iandP-list-container">
+      <div class="iandP-search-zone">
+        <div class="iandP-search-box">
           <el-input v-model="data.searchParams.contract_code" placeholder="请输入合同编号"
           style="width: 309px;margin-left: 40px;margin-bottom: 8px;" clearable @input="placement.searchPlacement" ></el-input>
           <el-date-picker v-model="data.dateRange" start-placeholder="起始日期"
@@ -32,16 +33,48 @@ placement.placementList()
           </div>
         </div>
       </div>
-      <div class="placement-table-container">
-        <div class="placement-table-top">
-          <span style="font-size:14px">已到款金额：{{ data.amountTotal }}元</span>
-          <el-button type="primary" style="width: 80px;" size="large" @click="placement.placementExport">导出</el-button>
+      <div class="iandP-table-container">
+        <div class="iandP-table-top">
+          <div class="iandP-top-amout">
+            <div class="iandP-amout-box">
+              <div class="iandP-amout-box-text">
+                <span>已开票合计金额（换算后）</span>
+                <span>5000.00（元）</span>
+              </div>
+              <svg-Icon name="svgIcon-financial-calculation" size="40" />
+            </div>
+            <div class="iandP-amout-box">
+              <div class="iandP-amout-box-text">
+                <span>人民币</span>
+                <span>2000.00（元）</span>
+              </div>
+              <svg-Icon name="svgIcon-country-China" size="40" />
+            </div>
+            <div class="iandP-amout-box">
+              <div class="iandP-amout-box-text">
+                <span>新加坡币</span>
+                <span>2000.00（新元）</span>
+              </div>
+              <svg-Icon name="svgIcon-country-Singapore" size="40" />
+            </div>
+            <div class="iandP-amout-box">
+              <div class="iandP-amout-box-text">
+                <span>美元</span>
+                <span>5000.00（美元）</span>
+              </div>
+              <svg-Icon name="svgIcon-country-America" size="40" />
+            </div>
+          </div>
+          <el-button class="element-common-button" style="margin-bottom: 10px;" size="large" @click="placement.placementExport">导出</el-button>
         </div>
         <!-- 表格 -->
         <el-table :data="data.tableData" border max-height="560px" size="default" style="position: sticky;"> 
           <el-table-column label="合同编号" align="center" prop="contract_code" show-overflow-tooltip></el-table-column>
           <el-table-column label="到款金额" align="center" prop="amount" show-overflow-tooltip></el-table-column>
-          <el-table-column label="到款日期" align="center" prop="invoice_time" show-overflow-tooltip></el-table-column>
+          <el-table-column label="金额单位" align="center" prop="amount">美元</el-table-column>
+          <el-table-column label="换算金额（元）" align="center" prop="amount" show-overflow-tooltip>2100.00</el-table-column>
+          <el-table-column label="到款日" align="center" prop="invoice_time" show-overflow-tooltip></el-table-column>
+          <el-table-column label="备注" align="center" prop="amount" show-overflow-tooltip>哈哈哈哈哈</el-table-column>
           <el-table-column label="操作" width="120" align="center">
             <template #default="{row}">
               <div class="table-options" style="justify-content: center;">
@@ -68,30 +101,5 @@ placement.placementList()
 </template>
   
 <style lang="scss" scoped>
-  #placement-list-container{
-    min-height: 100%;
-    .placement-search-zone{
-      border: 1px solid #ECECEC;
-      background-color: white;
-      padding: 18px 30px 12px;
-      box-sizing: border-box;
-      .placement-search-box{
-        margin-left: -40px;
-        display: flex;
-        flex-wrap: wrap;
-      }
-    }
-    .placement-table-container{
-      border: 1px solid #ECECEC;
-      background-color: white;
-      margin-top: 18px;
-      padding: 18px 30px 26px;
-      .placement-table-top{
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 18px;
-      }
-    }
-  }
+
 </style>

src/views/financialManagement/style/iandPList.scss

@@ -0,0 +1,66 @@
+#iandP-list-container{
+  min-height: 100%;
+  .iandP-search-zone{
+    margin-bottom: 20px;
+    .iandP-search-box{
+      margin-left: -40px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+  .iandP-table-container{
+    .iandP-table-top{
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      .iandP-top-amout{
+        display: flex;
+        flex-wrap: wrap;
+        .iandP-amout-box{
+          display: flex;
+          justify-content: space-between;
+          height: 88px;
+          width: 274px;
+          background: #FFFFFF;
+          border: 1px solid #DCDFE6;
+          box-shadow: 0px 4px 12px rgba(153, 153, 153, 0.08);
+          border-radius: 8px;
+          padding: 14px 20px 20px;
+          box-sizing: border-box;
+          margin-right: 30px;
+          margin-bottom: 10px;
+          .iandP-amout-box-text{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            span{
+              font-size: 18px;
+              font-weight: 700;
+              color: $mainTextColor;
+              &:first-child{
+                font-size: 14px;
+                font-weight: 400;
+                color: $secondaryTextColor;
+              }
+            }
+          }
+        }
+        // font-size: 14px;
+        // .iandP-top-amout-span{
+        //   color: $dangerColor;
+        // }
+        // .iandP-top-amout-box{
+        //   display: flex;
+        //   // align-items: center;
+        //   flex-wrap: nowrap;
+        //   .iandP-top-amout-row{
+        //     display: flex;
+        //     flex-wrap: wrap;
+        //     align-items: center;
+        //   }
+        // }
+      }
+    }
+  }
+}

src/views/financialStatistics/commodityPayment.vue

@@ -35,6 +35,11 @@ import dropdownText from '@/components/dropdown-text/index.vue'
     total:25,
     rowMergeArray:[]
   })
+  // 开票金额是否收起
+  let invoiceIsFold=ref(true)
+
+  // 到款金额是否收起
+  let placementIsFold=ref(true)
 
   // method
   const commodityPList=()=>{
@@ -108,6 +113,16 @@ import dropdownText from '@/components/dropdown-text/index.vue'
     }
     return ''
   }
+  // 开票到款金额展开收起
+  const foldOrUnfold=(type)=>{
+    // type: 0-开票  1-到款
+    if(type){
+      placementIsFold.value = !placementIsFold.value
+    }else{
+      invoiceIsFold.value = !invoiceIsFold.value
+    }
+    console.log(type,invoiceIsFold.value);
+  }
 
   //  -----------------------------------------------------弹窗
   // ---------------------------------编辑付款方式
@@ -310,16 +325,78 @@ import dropdownText from '@/components/dropdown-text/index.vue'
       </div>
       <div class="operation-zone">
         <div class="amount-show-zone">
-          <div class="amount-show-item" style="margin-right: 30px;">
-            开票合计金额：
-            <span>80000.00</span>
+          <div class="amount-show-item">
+            <div class="amount-item-head" @click="foldOrUnfold(0)">
+              <div class="amount-item-head-title">
+                已开票合计金额（换算后）：80000.00（元）
+              </div>
+              <span class="amount-item-head-icon">
+                {{ invoiceIsFold?'展开':'收起' }}
+              </span>
+            </div>
+            <div class="amount-item-body-package" :style="{height:invoiceIsFold?'0':'66px'}">
+              <div class="amount-item-body">
+                <div class="amount-item-body-box">
+                  <svg-Icon name="svgIcon-country-China" style="margin-right: 20px;" size="40" />
+                  <div class="amount-item-body-info">
+                    <span>人民币</span>
+                    <span>5000.00（元）</span>
+                  </div>
+                </div>
+                <div class="amount-item-body-box">
+                  <svg-Icon name="svgIcon-country-Singapore" style="margin-right: 20px;" size="40" />
+                  <div class="amount-item-body-info">
+                    <span>新加坡币</span>
+                    <span>5000.00（新元）</span>
+                  </div>
+                </div>
+                <div class="amount-item-body-box">
+                  <svg-Icon name="svgIcon-country-America" style="margin-right: 20px;" size="40" />
+                  <div class="amount-item-body-info">
+                    <span>美元</span>
+                    <span>5000.00（美元）</span>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <div class="amount-show-item">
-            到款合计金额：
-            <span>80000.00</span>
+            <div class="amount-item-head" @click="foldOrUnfold(1)">
+              <div class="amount-item-head-title">
+                已到款合计金额（换算后）：80000.00（元）
+              </div>
+              <span class="amount-item-head-icon">
+                {{ placementIsFold?'展开':'收起' }}
+              </span>
+            </div>
+            <div class="amount-item-body-package" :style="{height:placementIsFold?'0':'66px'}"> 
+              <div class="amount-item-body">
+                <div class="amount-item-body-box">
+                  <svg-Icon name="svgIcon-country-China" style="margin-right: 20px;" size="40" />
+                  <div class="amount-item-body-info">
+                    <span>人民币</span>
+                    <span>5000.00（元）</span>
+                  </div>
+                </div>
+                <div class="amount-item-body-box">
+                  <svg-Icon name="svgIcon-country-Singapore" style="margin-right: 20px;" size="40" />
+                  <div class="amount-item-body-info">
+                    <span>新加坡币</span>
+                    <span>5000.00（新元）</span>
+                  </div>
+                </div>
+                <div class="amount-item-body-box">
+                  <svg-Icon name="svgIcon-country-America" style="margin-right: 20px;" size="40" />
+                  <div class="amount-item-body-info">
+                    <span>美元</span>
+                    <span>5000.00（美元）</span>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-        <el-button @click="dataExport" size="large" class="element-common-button">导出</el-button>
+        <el-button @click="dataExport" style="margin-bottom: 10px;" size="large" class="element-common-button">导出</el-button>
       </div>
       <div class="table-zone">
         <el-table :data="commodityPData.tableData" border ref="tableRef"
@@ -433,15 +510,73 @@ import dropdownText from '@/components/dropdown-text/index.vue'
     .operation-zone{
       margin-bottom: 20px;
       display: flex;
-      align-items: center;
+      align-items: flex-end;
       justify-content: space-between;
       .amount-show-zone{
         display: flex;
-        align-items: center;
-        padding-left: 20px;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        // justify-content: space-between;        
+        // padding-left: 20px;
         .amount-show-item{
-          span{
-            color: $dangerColor;
+          margin-bottom: 10px;
+          background: #FFFFFF;
+          border: 1px solid #DCDFE6;
+          box-shadow: 0px 4px 12px rgba(153, 153, 153, 0.08);
+          border-radius: 8px;
+          // height: 132px;
+          width: 725px;
+          margin-right: 30px;
+          box-sizing: border-box;
+          // padding-bottom: 16px;
+          .amount-item-head{
+            padding: 20px 20px 20px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            cursor: pointer;
+            .amount-item-head-title{
+              font-weight: 400;
+              font-size: 18px;
+              color: #000000;
+            }
+            .amount-item-head-icon{
+              font-weight: 400;
+              font-size: 14px;
+              color: $themeColor;
+            }
+          }
+          .amount-item-body-package{
+            overflow: hidden;
+            transition: height 0.1s ease;
+            .amount-item-body{
+              padding: 6px 20px 16px;
+              box-sizing: border-box;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .amount-item-body-box{
+                display: flex;
+                align-items: center;
+                width: 220px;
+                .amount-item-body-info{
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-between;
+                  span{
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: $secondaryTextColor;
+                    margin-bottom: 2px;
+                    &:last-child{
+                      font-weight: 700;
+                      font-size: 16px;
+                      color: $mainTextColor;
+                    }
+                  }
+                }
+              }
+            }
           }
         }
       }

src/views/financialStatistics/salesStatistics.vue

@@ -122,7 +122,15 @@
               {{ groupList.find(item => row.group==item.id).group  }}
             </template>
           </el-table-column>
-          <el-table-column label="开票金额" prop="invoiceAmount" align="center" sortable ></el-table-column>
+          <el-table-column label="收入金额" prop="invoiceAmount" align="center" sortable >
+            <template #header>
+              <el-tooltip content="收入金额为开票金额换算后的人民币金额" placement="top">
+                <span style="display: inline-flex;align-items: center;">收入金额
+                  <svg-Icon name="svgIcon-financial-info" size="18" style="margin-left: 5px;color: white;" />
+                </span>
+              </el-tooltip>
+            </template>
+          </el-table-column>
           <el-table-column label="小组占比" prop="groupPercent" align="center" sortable></el-table-column>
           <el-table-column label="全员占比" prop="wholePercent" align="center" sortable v-if="tabType==2"></el-table-column>
           <template #empty>
@@ -149,6 +157,7 @@
         color: $themeColor;
         border: 1px solid $themeColor;
         width: 130px;
+        background-color: transparent;
       }
       .actice-tab{
         color: white;