结算申请(单个结算)，以及提交

src/api/cost/cost.js

@@ -55,6 +55,14 @@ export function settlementReview(query) {
   })
 }
 
+// 费用结算提交
+export function submitCosts(params){
+  return request({
+    url: '/material/slt_agreement_info/submitCosts',
+    method: 'post',
+    data: params
+  })
+}
 
 
 

src/views/material/cost/component/applyDetail.vue

@@ -28,11 +28,26 @@
         </div>
 
         <div>
+            <div class="tabelAllTop">
+                <div class="costTop">结算费用</div>
+            </div>
+            <div class="tabelAllTopUnit">
+                <div class="costTopUnit">结算单位</div>
+                <div class="costRightUnit">
+                {{ unitName }}
+                </div>
+            </div>
+            <div class="tabelAllTopUnit">
+                <div class="costTopUnit">结算工程</div>
+                <div class="costRightUnit">
+                {{ projectName }}
+                </div>
+            </div>
             <el-table :data="leaseList">
                 <el-table-column label="租赁费用明细" align="center">
                     <el-table-column label="序号" align="center" type="index" width="60"/>
-                    <el-table-column label="结算单位" align="center" prop="unitName" :show-overflow-tooltip="true"/>
+                    <!-- <el-table-column label="结算单位" align="center" prop="unitName" :show-overflow-tooltip="true"/>
-                    <el-table-column label="结算工程" align="center" prop="projectName" :show-overflow-tooltip="true"/>
+                    <el-table-column label="结算工程" align="center" prop="projectName" :show-overflow-tooltip="true"/> -->
                     <el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
                     <el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
                     <el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
@@ -42,78 +57,81 @@
                     <!-- <el-table-column label="归还数量" align="center" prop="" :show-overflow-tooltip="true" /> -->
                     <el-table-column label="归还日期 " align="center" prop="endTime" :show-overflow-tooltip="true"/>
                     <el-table-column label="租赁天数" align="center" prop="leaseDays" :show-overflow-tooltip="true"/>
-                    <el-table-column label="租赁费用" align="center" prop="costs" :show-overflow-tooltip="true"/>
+                    <el-table-column label="租赁费用（元）" align="center" prop="costs" :show-overflow-tooltip="true"/>
                 </el-table-column>
             </el-table>
-            <div style="width: 100%; text-align: right; padding: 20px 20px">租赁费用小计：{{ leaseCost }}</div>
+            
+            <div class="tabelAll">
+                <div class="columnAllNum">费用小计：</div>
+                <div class="columnAll">
+                {{ leaseCost }}
+                </div>
+            </div>
         </div>
 
         <div>
             <el-table :data="repairList">
                 <el-table-column label="维修费用明细" align="center">
                     <el-table-column label="序号" align="center" type="index" width="60"/>
-                    <el-table-column label="结算单位" align="center" prop="unitName" :show-overflow-tooltip="true"/>
-                    <el-table-column label="结算工程" align="center" prop="projectName" :show-overflow-tooltip="true"/>
                     <el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
                     <el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
                     <el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
-                    <el-table-column label="维修状态" align="center" prop="repairStatus" :show-overflow-tooltip="true">
-                        <!-- <template slot-scope="scope">
-                            <span v-if="scope.row.repairStatus == 0"
-                                >未审核</span>
-                            <span v-if="scope.row.repairStatus == 1"
-                                >已审核</span>
-                        </template> -->
-                    </el-table-column>
                     <el-table-column label="维修数量" align="center" prop="num" :show-overflow-tooltip="true"/>
-                    <el-table-column label="维修费用" align="center" prop="costs" :show-overflow-tooltip="true"/>
+                    <el-table-column label="是否收费" align="center" prop="partType" :show-overflow-tooltip="true"/>
-                    <el-table-column label="类型" align="center" prop="partType" :show-overflow-tooltip="true">
+                    <el-table-column label="维修费用（元）" align="center" prop="costs" :show-overflow-tooltip="true"/>
-                        <!-- <template slot-scope="scope">
-                            <span v-if="scope.row.partType == 0">不收费</span>
-                            <span v-if="scope.row.partType == 1">收费</span>
-                        </template> -->
-                    </el-table-column>
                 </el-table-column>
             </el-table>
-            <div style="width: 100%; text-align: right; padding: 20px 20px">维修费用小计：{{ repairCost }}</div>
+            <div class="tabelAll">
+                <div class="columnAllNum">费用小计：</div>
+                <div class="columnAll">
+                {{ repairCost }}
+                </div>
+            </div>
         </div>
 
         <div>
             <el-table :data="scrapList"> 
                 <el-table-column label="报废费用明细" align="center">
                     <el-table-column label="序号" align="center" type="index" width="60"/>
-                    <el-table-column label="结算单位" align="center" prop="unitName" :show-overflow-tooltip="true"/>
-                    <el-table-column label="结算工程" align="center" prop="projectName" :show-overflow-tooltip="true"/>
                     <el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
                     <el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
                     <el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
                     <el-table-column label="报废数量" align="center" prop="num" :show-overflow-tooltip="true"/>
-                    <el-table-column label="报废原因" align="center" prop="scrapType" :show-overflow-tooltip="true">
+                    <el-table-column label="是否收费" align="center" prop="partType" :show-overflow-tooltip="true"/>
-                        <!--   <template slot-scope="scope"> -->
+                    <el-table-column label="报废费用（元）" align="center" prop="costs" :show-overflow-tooltip="true"/>
-                        <!--   <span v-if="scope.row.scrapType == 0">自然</span> -->
-                        <!--   <span v-if="scope.row.scrapType == 1">人为</span> -->
-                        <!--   </template> -->
-                    </el-table-column>
-                    <el-table-column label="报废费用" align="center" prop="costs" :show-overflow-tooltip="true"/>
                 </el-table-column>
             </el-table>
-            <div style="width: 100%; text-align: right; padding: 20px 20px">报废费用小计：{{ scrapCost }}</div>
+            <div class="tabelAll">
+                <div class="columnAllNum">费用小计：</div>
+                <div class="columnAll">
+                {{ scrapCost }}
+                </div>
+            </div>
         </div>
 
         <div>
             <el-table :data="loseList"> 
                 <el-table-column label="丢失费用明细" align="center">
                     <el-table-column label="序号" align="center" type="index" width="60"/>
-                    <el-table-column label="结算单位" align="center" prop="unitName" :show-overflow-tooltip="true"/>
-                    <el-table-column label="结算工程" align="center" prop="projectName" :show-overflow-tooltip="true"/>
                     <el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
                     <el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
                     <el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
                     <el-table-column label="丢失数量" align="center" prop="num" :show-overflow-tooltip="true"/>
-                    <el-table-column label="丢失费用" align="center" prop="costs" :show-overflow-tooltip="true"/>
+                    <el-table-column label="丢失费用（元）" align="center" prop="costs" :show-overflow-tooltip="true"/>
                 </el-table-column>
             </el-table>
-            <div style="width: 100%; text-align: right; padding: 20px 20px">丢失费用小计：{{ loseCost }}</div>
+            <div class="tabelAllBottom">
+                <div class="columnAllNum">费用小计：</div>
+                <div class="columnAll">
+                {{ loseCost }}
+                </div>
+            </div>
+            <div class="tabelAllBottom">
+                <div class="columnAllNum">合计：</div>
+                <div class="columnAll">
+                {{ costAll }}
+                </div>
+            </div>
         </div>
 
         <!-- 审批弹窗 -->
@@ -197,7 +215,7 @@
 </template>
 
 <script> 
-import { getSltInfo, submitFee } from '@/api/cost/cost'
+import { getSltInfo, submitFee,submitCosts } from '@/api/cost/cost'
 
 export default {
     name: '',
@@ -225,6 +243,8 @@ export default {
             deptName: undefined,
             applyVisible: false,
             applyList: [],
+            projectName: undefined, //结算工程
+            unitName: undefined, //结算单位
         }
     },
     mounted() {
@@ -250,13 +270,17 @@ export default {
         getDataAll() {
             getSltInfo(this.rowData).then((response) => { 
                 this.leaseList = response.data.leaseList //租赁费用列表
+                this.projectName = response.data.projectName
+                this.unitName = response.data.unitName
                 this.leaseCost = this.countCost(this.leaseList)
 
                 this.repairList = response.data.repairList //维修费用列表
-                this.repairCost = this.countCost(this.repairList)
+                this.repairCost = response.data.repairCost.toFixed(2)
+                // this.repairCost = this.countCost(this.repairList)
 
                 this.scrapList = response.data.scrapList //报废费用列表
-                this.scrapCost = this.countCost(this.scrapList)
+                this.scrapCost = response.data.scrapCost.toFixed(2)
+                // this.scrapCost = this.countCost(this.scrapList)
 
                 this.loseList = response.data.loseList //丢失费用列表
                 this.loseCost = this.countCost(this.loseList)
@@ -301,8 +325,23 @@ export default {
         },
         //提交按钮
         handleAdd() {
-            this.getDataAll()
+            this.$modal
-            this.applyVisible = true
+                .confirm('是否确认提交？')
+                .then(() => {
+                    let params = {
+                        'agreementId': this.rowData[0].agreementId, 'agreementCode': this.rowData[0].agreementCode,'totalCostAll': this.costAll,
+                        'leaseList': this.leaseList, 'repairList': this.repairList, 'scrapList': this.scrapList,'loseList': this.loseList,
+                    }
+                    console.log('2222222222222',params)
+                    submitCosts(params).then((response) => {
+                        this.$message({
+                            type: 'success',
+                            message: '提交成功',
+                        })
+                        this.$emit('handleBack')
+                    })
+                })
+                .catch(() => {})
         },
         //el-table-合计总费用
         getSummaries(param) {
@@ -453,41 +492,53 @@ export default {
         /** 导出按钮操作 */
         //租赁
         handleExport1() {
-            this.downloadJson(
+            const params = this.rowData[0]
+            this.download(
                 'material/slt_agreement_info/exportLease',
-                JSON.stringify(this.rowData),
+                {...params,},
                 `租赁费用明细_${new Date().getTime()}.xlsx`,
             )
         },
         //丢失
         handleExport2() {
-            this.downloadJson(
+            const params = this.rowData[0]
+            this.download(
                 'material/slt_agreement_info/exportLose',
-                JSON.stringify(this.rowData),
+                {...params,},
                 `丢失费用明细_${new Date().getTime()}.xlsx`,
             )
         },
         // 维修
         handleExport3() {
-            this.downloadJson(
+            const params = this.rowData[0]
+            this.download(
                 'material/slt_agreement_info/exportRepair',
-                JSON.stringify(this.rowData),
+                {...params,},
                 `维修费用明细_${new Date().getTime()}.xlsx`,
             )
         },
         //报废
         handleExport4() {
-            this.downloadJson(
+            const params = this.rowData[0]
+            this.download(
                 'material/slt_agreement_info/exportScrap',
-                JSON.stringify(this.rowData),
+                {...params,},
                 `报废费用明细_${new Date().getTime()}.xlsx`,
             )
+            // this.downloadJson(
+            //     'material/slt_agreement_info/exportScrap',
+            //     JSON.stringify(this.rowData),
+            //     `报废费用明细_${new Date().getTime()}.xlsx`,
+            // )
         },
+        
         handleExportAll() {
-            this.handleExport1()
+            const params = this.rowData[0]
-            this.handleExport2()
+            this.download(
-            this.handleExport3()
+                'material/slt_agreement_info/exportAll',
-            this.handleExport4()
+                {...params,},
+                `全部费用明细_${new Date().getTime()}.xlsx`,
+            )
         },
     },
 }
@@ -497,4 +548,84 @@ export default {
     width: 80px !important;
     margin-bottom: 10px;
 }
+.tabelAllTop {
+  display: flex;
+  border: 1px solid #dfe6ec;
+  width:100%;
+  height:50px;
+  background-color: #f8f8f9;
+  border-left: none;
+  border-bottom: none;
+  .costTop {
+    display: flex;
+    padding: 5px;
+    border-left: 1px solid #dfe6ec;
+    align-items: center;
+    text-align: center;
+    justify-content: center; /* 将内容对齐到中间 */
+    width:100%;
+    font-weight: bold; /* 添加字体加粗样式 */
+  }
+}
+.tabelAllTopUnit {
+  display: flex;
+  border: 1px solid #dfe6ec;
+  width:100%;
+  height:50px;
+  background-color: #f8f8f9;
+  border-bottom: none;
+ .costTopUnit {
+    display: flex;
+    padding: 5px;
+    width:21.4%;
+    border-left: none;
+    align-items: center;
+    text-align: center;
+    justify-content: center; /* 将内容对齐到中间 */
+    }
+ .costRightUnit {
+    display: flex;
+    padding: 5px;
+    border-left: 1px solid #dfe6ec;
+    text-align: center;
+    align-items: center;
+    width:100%;
+    justify-content: center; /* 将内容对齐到中间 */
+    // padding-left: 20px; /* 添加左内边距 */
+    }
+}
+.tabelAll {
+  display: flex;
+  border: 1px solid #dfe6ec;
+  width:100%;
+  border-bottom: 1px solid #dfe6ec;
+  border-top: none;
+  margin-bottom: 15px;
+}
+.tabelAllBottom {
+  display: flex;
+  border: 1px solid #dfe6ec;
+  width:100%;
+  border-bottom: 1px solid #dfe6ec;
+  border-top: none;
+}
+.columnAll {
+  flex: 1;
+  padding: 5px;
+  border-left: 1px solid #dfe6ec;
+  text-align: right;
+  width:100%;
+  justify-content: flex-end; /* 将内容对齐到右侧 */
+  margin-right: 60px; /* 添加右边距 */
+}
+.columnAllNum {
+  padding: 5px;
+  text-align: center;
+  width:21.4%;
+  border-left: none;
+}
+/* 最后一列无右边框 */
+.tabelAll .column:last-child {
+  border-right: none;
+}
 </style>