From 6fbe79ad24262921c6215b3f00e6894f6b8c833f Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Thu, 22 Aug 2024 17:00:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/cost/cost.js                          |  43 +-
 .../csotSettlement/component/exportDialog.vue |  92 +++
 .../component/finishAndDetails.vue            | 414 +++++++++++++
 .../csotSettlement/component/finishTable.vue  | 420 +++++++++++++
 .../csotSettlement/component/monthRecord.vue  | 347 +++++++++++
 .../cost/csotSettlement/costApplyList.vue     | 554 +++++++++---------
 6 files changed, 1586 insertions(+), 284 deletions(-)
 create mode 100644 src/views/cost/csotSettlement/component/exportDialog.vue
 create mode 100644 src/views/cost/csotSettlement/component/finishAndDetails.vue
 create mode 100644 src/views/cost/csotSettlement/component/finishTable.vue
 create mode 100644 src/views/cost/csotSettlement/component/monthRecord.vue

diff --git a/src/api/cost/cost.js b/src/api/cost/cost.js
index e6884cc..2f5d37b 100644
--- a/src/api/cost/cost.js
+++ b/src/api/cost/cost.js
@@ -2,16 +2,16 @@ import request from '@/utils/request'
 
 // 查询费用结算申请列表
 export function getSltAgreementInfo(query) {
-    return request({
-      url: '/material/sltAgreementInfo/getSltAgreementInfo',
-      method: 'get',
-      params: query
-    })
-  }
+  return request({
+    url: '/material/sltAgreementInfo/getSltAgreementInfo',
+    method: 'get',
+    params: query
+  })
+}
 
 
 // 查询费用结算申请详情
-export function getSltInfo(params){
+export function getSltInfo(params) {
   return request({
     url: '/material/sltAgreementInfo/getSltInfo',
     method: 'post',
@@ -20,7 +20,7 @@ export function getSltInfo(params){
 }
 
 // 费用结算申请提交
-export function submitFee(params){
+export function submitFee(params) {
   return request({
     url: '/material/sltAgreementInfo/submitFee',
     method: 'post',
@@ -55,6 +55,33 @@ export function settlementReview(query) {
     params: query
   })
 }
+/**
+ * 7.29
+ */
+
+/** 完工结算查询 */
+export const getComSellQueryApi = (params) => {
+  return request.post('/material/sltAgreementInfo/getSltInfo', params)
+}
+/** 编辑后保存接口 */
+export const editSaveApi = (params) => {
+  return request.post('/material/sltAgreementInfo/updateTrimDay', params)
+}
+/** 确认结算接口 01和03费用承担方单独结算接口*/
+export const submitFeeBearApi = (params) => {
+  return request.post('/material/sltAgreementInfo/submitFeeBear', params)
+}
+/** 获取月结记录接口*/
+export const getMonthRecordApi = (params) => {
+  return request.post('/material/sltAgreementInfo/getSltInfoMonth', params)
+}
+
+/** 确认结算接口所有结算*/
+export const submitAllFeeBearApi = (params) => {
+  return request.post('/material/sltAgreementInfo/submitFee', params)
+}
+
+
 
 
 
diff --git a/src/views/cost/csotSettlement/component/exportDialog.vue b/src/views/cost/csotSettlement/component/exportDialog.vue
new file mode 100644
index 0000000..d628b3f
--- /dev/null
+++ b/src/views/cost/csotSettlement/component/exportDialog.vue
@@ -0,0 +1,92 @@
+<template>
+    <!-- 批量导出月结明细弹框 -->
+    <div>
+        <el-dialog
+            title="明细导出"
+            append-to-body
+            :visible.sync="exportDialogVisible"
+            :before-close="handleCloseDialog"
+            width="30%"
+        >
+            <el-form
+                :model="exportForm"
+                label-width="120px"
+                :rules="rules"
+                ref="formRef"
+            >
+                <!-- <el-form-item label="导出月份">
+                    <el-date-picker
+                        v-model="exportParams.dateMonth"
+                        type="month"
+                        placeholder="请选择导出月份"
+                        value-format="yyyy-MM"
+                    />
+                  
+                </el-form-item> -->
+                <el-form-item label="费用承担方" prop="costBearingParty">
+                    <el-checkbox-group v-model="exportForm.costBearingParty">
+                        <el-checkbox label="01" name="01" />
+                        <el-checkbox label="03" name="03" />
+                    </el-checkbox-group>
+                </el-form-item>
+            </el-form>
+
+            <span slot="footer" class="dialog-footer">
+                <el-button size="mini" type="primary" @click="handleSubmit"
+                    >确 定</el-button
+                >
+                <el-button size="mini" @click="handleCloseDialog"
+                    >取 消</el-button
+                >
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        // 弹框显隐
+        exportDialogVisible: {
+            type: Boolean,
+            default: () => false,
+        },
+    },
+
+    data() {
+        return {
+            exportForm: {
+                costBearingParty: ['01', '03'],
+            },
+            rules: {
+                costBearingParty: [
+                    { required: true, message: '请选择费用承担方' },
+                ],
+            },
+        }
+    },
+    methods: {
+        /** 关闭 */
+        handleCloseDialog() {
+            this.$emit('handleCloseDialog')
+        },
+        /** 确定 */
+        handleSubmit() {
+            this.$refs.formRef.validate((valid) => {
+                if (valid) {
+                    this.$emit('handleSubmit', this.exportForm.costBearingParty)
+                }
+            })
+        },
+    },
+    watch: {
+        exportDialogVisible: {
+            handler(newVla) {
+                if (!newVla) {
+                    // this.exportParams.dateMonth = ''
+                }
+            },
+        },
+    },
+}
+</script>
diff --git a/src/views/cost/csotSettlement/component/finishAndDetails.vue b/src/views/cost/csotSettlement/component/finishAndDetails.vue
new file mode 100644
index 0000000..a90ad2b
--- /dev/null
+++ b/src/views/cost/csotSettlement/component/finishAndDetails.vue
@@ -0,0 +1,414 @@
+<template>
+    <!-- 完工结算和结算明细页面 -->
+    <div>
+        <PageHeader :pageContent="pageContent" @goBack="goBack" />
+        <div class="row-header">
+            <div>领用单位：{{ currRowInfo.unitName }}</div>
+            <div>工程名称：{{ currRowInfo.projectName }}</div>
+            <div>总合计：{{ totalAmount }}元</div>
+            <div>
+                <el-button size="mini" type="primary" @click="handleExportAll()"
+                    >导出全部明细表</el-button
+                >
+            </div>
+        </div>
+        <!-- 01承担方 -->
+        <FinishTable
+            :tableColumns="settleTableColumns"
+            :tableTitle="`设备结算清单`"
+            :isCostBear="true"
+            :constBear="1"
+            :totalPrice="settleTotalPrice_01"
+            :tableData="settleTableData_01"
+            :isSettle="isSettle_01"
+            :listType="1"
+            @submitSell="submitSell"
+            @handleExport="handleExport"
+            @handelSaveSuccess="handelSaveSuccess"
+            v-if="settleTableData_01.length > 0"
+        />
+        <!-- 03承担方 -->
+        <FinishTable
+            :tableColumns="settleTableColumns"
+            :tableTitle="`设备结算清单`"
+            :isCostBear="true"
+            :constBear="3"
+            :totalPrice="settleTotalPrice_03"
+            :tableData="settleTableData_03"
+            :isSettle="isSettle_03"
+            :listType="2"
+            @submitSell="submitSell"
+            @handleExport="handleExport"
+            @handelSaveSuccess="handelSaveSuccess"
+            v-if="settleTableData_03.length > 0"
+        />
+        <FinishTable
+            :tableColumns="repairTableColumns"
+            :tableTitle="`设备维修清单`"
+            :isRepair="true"
+            :totalPrice="repairTotalPrice"
+            :tableData="repairTableData"
+            :currRowInfo="currRowInfo"
+            :listType="3"
+            @handleExport="handleExport"
+            @onChangeRepairPrice="onChangeRepairPrice"
+        />
+        <FinishTable
+            :tableColumns="noReturnTableColumns"
+            :tableTitle="`工机具未还赔偿清单`"
+            :tableData="noReturnTableData"
+            :totalPrice="noReturnTotalPrice"
+            :listType="4"
+            @handleExport="handleExport"
+        />
+        <FinishTable
+            :tableColumns="scrapTableColumns"
+            :tableTitle="`工机具报废赔偿清单`"
+            :tableData="scrapTableData"
+            :totalPrice="scrapTotalPrice"
+            :listType="5"
+            @handleExport="handleExport"
+        />
+        <FinishTable
+            :tableColumns="stayScrapTableColumns"
+            :tableTitle="`工机具待报废清单`"
+            :tableData="stayScrapTableData"
+            :listType="6"
+            @handleExport="handleExport"
+        />
+
+        <el-row class="submit-btn">
+            <el-button
+                size="mini"
+                type="primary"
+                @click="submitComSett"
+                v-if="currRowInfo.isSlt == 0"
+                >确认完工结算</el-button
+            >
+        </el-row>
+    </div>
+</template>
+
+<script>
+import PageHeader from '@/components/pageHeader'
+import FinishTable from './finishTable.vue'
+import {
+    getComSellQueryApi,
+    submitFeeBearApi,
+    submitAllFeeBearApi,
+} from '@/api/cost/cost.js'
+export default {
+    components: {
+        PageHeader,
+        FinishTable,
+    },
+    props: {
+        // 页面标题
+        pageContent: {
+            type: String,
+            default: () => '完工结算',
+        },
+        // 当前行的数据信息
+        currRowInfo: {
+            type: Object,
+            default: () => null,
+        },
+    },
+    computed: {
+        totalAmount() {
+            return (
+                this.settleTotalPrice_01 * 1 +
+                this.settleTotalPrice_03 * 1 +
+                this.repairTotalPrice * 1 +
+                this.noReturnTotalPrice * 1 +
+                this.scrapTotalPrice * 1
+            )
+        },
+    },
+    data() {
+        return {
+            // 结算清单配置项
+            settleTableColumns: [
+                { t_prop: 'typeName', t_label: '设备名称' },
+                { t_prop: 'modelName', t_label: '规格型号' },
+                { t_prop: 'nuitName', t_label: '计量单位' },
+                { t_prop: 'num', t_label: '数量' },
+                { t_prop: 'leasePrice', t_label: '台班费单价（元/天）' },
+                { t_prop: 'startTime', t_label: '起租日期' },
+                { t_prop: 'endTime', t_label: '终止日期', t_slot: 't_date' },
+                { t_prop: 'leaseDays', t_label: '应结算天数' },
+                { t_prop: 'costs', t_label: '应结算金额（元）' },
+                { t_prop: 'trimDay', t_label: '调整天数', t_slot: 't_ipt' },
+                { t_prop: 'realDays', t_label: '实际结算天数' },
+                { t_prop: 'realCosts', t_label: '实际结算金额（元）' },
+                // { t_prop: '', t_label: '已入账金额（元）' },
+                // { t_prop: '', t_label: '本次结算金额（元）' },
+            ],
+            // 维修清单配置项
+            repairTableColumns: [
+                { t_prop: 'typeName', t_label: '设备名称' },
+                { t_prop: 'modelName', t_label: '规格型号' },
+                { t_prop: 'nuitName', t_label: '计量单位' },
+                { t_prop: 'partName', t_label: '维修配件名称' },
+                { t_prop: 'partModelName', t_label: '维修配件型号' },
+                { t_prop: 'partNum', t_label: '使用数量' },
+                { t_prop: 'partPrice', t_label: '配件单价' },
+                { t_prop: 'partAllCosts', t_label: '配件总价' },
+                // { t_prop: '', t_label: '委外维修费用' },
+                // { t_prop: '', t_label: '费用总价' },
+            ],
+            // 未还赔偿清单配置项
+            noReturnTableColumns: [
+                { t_prop: 'typeName', t_label: '设备名称' },
+                { t_prop: 'modelName', t_label: '规格型号' },
+                { t_prop: 'nuitName', t_label: '计量单位' },
+                { t_prop: 'maCode', t_label: '设备编码' },
+                { t_prop: 'num', t_label: '未还数量' },
+                { t_prop: 'buyPrice', t_label: '赔偿单价' },
+                { t_prop: 'costs', t_label: '赔偿金额' },
+            ],
+            // 报废清单单配置项
+            scrapTableColumns: [
+                { t_prop: 'typeName', t_label: '设备名称' },
+                { t_prop: 'modelName', t_label: '规格型号' },
+                { t_prop: 'nuitName', t_label: '计量单位' },
+                { t_prop: 'maCode', t_label: '设备编码' },
+                { t_prop: 'num', t_label: '报废数量' },
+                { t_prop: 'costs', t_label: '赔偿单价' },
+                { t_prop: 'buyPrice', t_label: '赔偿金额' },
+            ],
+            // 待报废清单配置项
+            stayScrapTableColumns: [
+                { t_prop: 'typeName', t_label: '设备名称' },
+                { t_prop: 'modelName', t_label: '规格型号' },
+                { t_prop: 'nuitName', t_label: '计量单位' },
+                { t_prop: 'maCode', t_label: '设备编码' },
+                { t_prop: 'num', t_label: '报废数量' },
+                { t_prop: '', t_label: '状态', t_slot: 'status' },
+            ],
+            // 结算清单数据源 01承担方
+            settleTableData_01: [],
+            // 结算清单数据源 03承担方
+            settleTableData_03: [],
+            // 维修清单数据源
+            repairTableData: [],
+            // 未还赔偿清单数据源
+            noReturnTableData: [],
+            // 报废清单数据源
+            scrapTableData: [],
+            // 待报废清单数据源
+            stayScrapTableData: [],
+            // 合计金额
+            settleTotalPrice_01: 0,
+            settleTotalPrice_03: 0,
+            repairTotalPrice: 0,
+            noReturnTotalPrice: 0,
+            scrapTotalPrice: 0,
+            // 是否结算
+            isSettle_01: 0,
+            isSettle_03: 0,
+            // 选中的维修数据
+            repairSelectList: [],
+        }
+    },
+    created() {
+        this.getComSellList()
+    },
+    methods: {
+        /** 获取结算信息 */
+        async getComSellList() {
+            const { data: res } = await getComSellQueryApi([
+                { agreementId: this.currRowInfo.agreementId },
+            ])
+
+            this.settleTableData_01 = res.leaseListOne // 01承担方
+            this.settleTableData_03 = res.leaseListThree // 03承担方
+            this.repairTableData = res.repairList // 维修单
+            this.noReturnTableData = res.loseList // 未还赔偿
+            this.scrapTableData = res.scrapList // 报废单
+            this.stayScrapTableData = res.preScrapList // 报废单
+
+            this.settleTotalPrice_01 = res.relations[0].leaseCostOne
+            this.settleTotalPrice_03 = res.relations[0].leaseCostThree
+            this.scrapTotalPrice = res.relations[0].scrapCost
+            this.noReturnTotalPrice = res.relations[0].loseCost
+            this.repairTotalPrice = res.relations[0].repairCost
+            this.isSettle_01 = res.relations[0].isSltOne
+            this.isSettle_03 = res.relations[0].isSltThree
+        },
+        /** 确认结算 01或03 */
+        async submitSell(type) {
+            const sellParams = {
+                agreementId: this.currRowInfo.agreementId,
+                costBearingParty: type,
+            }
+            const res = await submitFeeBearApi(sellParams)
+
+            if (res.code == 200) {
+                this.$message.success('结算成功！')
+                this.getComSellList()
+            }
+        },
+        /** 确认完工结算 */
+        submitComSett() {
+            this.$confirm(
+                '确定后则会生成财务报表，数据将不可修改，请确认检查无误',
+                '提示',
+                {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                },
+            ).then(async () => {
+                // 1. 先判断01 03 承担方是否有数据  若有数据 先确认终结日期是否为空 若为空 提示客户修改
+                this.$message.closeAll()
+                let isFlag = false
+                try {
+                    // 1.1  先循环列表数据 判断 终结日期是否为空
+                    if (this.settleTableData_01.length > 0) {
+                        this.settleTableData_01.map((e, v) => {
+                            if (!e.endTime) {
+                                this.$message.error(
+                                    '结算清单内终止日期不能有空值！',
+                                )
+                                isFlag = true
+                                throw new Error()
+                            }
+                        })
+                    }
+
+                    if (this.settleTableData_03.length > 0) {
+                        this.settleTableData_03.map((e, v) => {
+                            if (!e.endTime) {
+                                this.$message.error(
+                                    '结算清单内终止日期不能有空值！',
+                                )
+                                isFlag = true
+                                throw new Error()
+                            }
+                        })
+                    }
+                } catch {}
+                if (isFlag) return
+                let repairIds = []
+                //  2. 处理勾选需要收费的维修数据 ids
+                if (this.repairSelectList.length > 0) {
+                    this.repairSelectList.forEach((e) => {
+                        repairIds.push(e.id)
+                    })
+                }
+
+                // 3. 组装请求参数
+                const params = {
+                    repairIds: repairIds.join(','),
+                    agreementId: this.currRowInfo.agreementId,
+                    relation: {
+                        leaseCostOne: this.settleTotalPrice_01, // 01承担方费用
+                        leaseCostThree: this.settleTotalPrice_03, // 0.承担方
+                        repairCos: this.repairTotalPrice, // 维修
+                        scrapCost: this.scrapTotalPrice, // 报废
+                        loseCost: this.noReturnTotalPrice, // 遗失
+                        cost: this.totalAmount, // 总价
+                    },
+                }
+
+                // 4. 发送请求
+                console.log(params, '参数---')
+
+                const res = await submitAllFeeBearApi(params)
+
+                if (res.code === 200) {
+                    this.$message.success('结算成功！')
+                    this.$emit('closeCurrPage', true)
+                }
+                console.log(res, '结果结果')
+            })
+        },
+        // 编辑后保存成功刷新列表
+        handelSaveSuccess() {
+            this.getComSellList()
+        },
+        /** 全部导出 */
+        handleExportAll() {
+            for (let i = 1; i < 7; i++) {
+                this.handleExport(i)
+            }
+        },
+        /** 单个导出 */
+        handleExport(type) {
+            let exportUrl = 'material/sltAgreementInfo/'
+            let exportTitle = ''
+            switch (type) {
+                case 1:
+                    exportUrl += 'exportLeaseOne'
+                    exportTitle = '设备结算清单(费用承担方01)'
+                    break
+                case 2:
+                    exportUrl += 'exportLeaseThree'
+                    exportTitle = '设备结算清单(费用承担方03)'
+                    break
+                case 3:
+                    exportUrl += 'exportRepair'
+                    exportTitle = '设备维修清单'
+                    break
+                case 4:
+                    exportUrl += 'exportLose'
+                    exportTitle = '工机具未还赔偿清单'
+                    break
+                case 5:
+                    exportUrl += 'exportScrap'
+                    exportTitle = '工机具报废赔偿清单'
+                    break
+                case 6:
+                    exportUrl += 'exportPreScrap'
+                    exportTitle = '工机具待报废清单'
+                    break
+            }
+
+            this.downloadJson(
+                exportUrl,
+                JSON.stringify([{ agreementId: this.currRowInfo.agreementId }]),
+                `${exportTitle}-${new Date().getTime()}.xlsx`,
+            )
+        },
+
+        /** 维修费用选择时 */
+        onChangeRepairPrice(val, list) {
+            this.repairTotalPrice = val
+            this.repairSelectList = list
+        },
+        /** 返回按钮 关闭当前页面 */
+        goBack() {
+            this.$emit('closeCurrPage')
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.row-header {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: bold;
+
+    div {
+        margin-right: 30px;
+    }
+
+    & div:nth-child(3) {
+        margin-right: 15px;
+        color: rgb(255, 0, 0);
+    }
+}
+
+.submit-btn {
+    margin-top: 20px;
+    text-align: right;
+
+    .el-button {
+        padding: 10px 14px;
+    }
+}
+</style>
diff --git a/src/views/cost/csotSettlement/component/finishTable.vue b/src/views/cost/csotSettlement/component/finishTable.vue
new file mode 100644
index 0000000..df04fca
--- /dev/null
+++ b/src/views/cost/csotSettlement/component/finishTable.vue
@@ -0,0 +1,420 @@
+<template>
+    <!-- 完工结算和结算明细页面的表格组件 -->
+    <div style="margin-top: 60px">
+        <el-row class="table-title" type="flex">
+            <div class="batch-system-day" v-if="isCostBear && isEdit">
+                调整天数批量设置：
+                <el-input
+                    v-model="batchNum"
+                    ref="batchNumRef"
+                    type="number"
+                    clearable
+                    style="width: 120px"
+                    @change="iptChange"
+                />
+            </div>
+            <span class="repair-tip" v-if="isRepair">
+                {{
+                    currRowInfo.isSlt == 0
+                        ? '勾选需要赔偿的维修项目'
+                        : '已选的维修赔偿项目'
+                }}</span
+            >
+            <el-col :span="5" class="cost-bear">
+                <span v-if="isCostBear">{{
+                    constBear === 1 ? '费用承担方：01' : '费用承担方：03'
+                }}</span>
+                <span v-else />
+                <span v-if="totalPrice !== -1">合计：{{ totalPrice }}元</span>
+            </el-col>
+            <el-col :span="14" class="title">{{ tableTitle }}</el-col>
+            <el-col :span="5" class="btn-item">
+                <el-button
+                    size="mini"
+                    type="warning"
+                    v-if="!isEdit"
+                    @click="handleExport"
+                    >导出</el-button
+                >
+                <el-button
+                    size="mini"
+                    type="primary"
+                    v-if="
+                        isSettle == 0 &&
+                        (isCostBear || (isRepair && currRowInfo.isSlt == 0)) &&
+                        tableData.length > 0
+                    "
+                    @click="handleEdit"
+                    >{{ isEdit ? '取消编辑' : '编辑' }}</el-button
+                >
+                <el-button
+                    size="mini"
+                    type="success"
+                    v-if="!isEdit && isCostBear && isSettle == 0"
+                    @click="submitSell"
+                    >确认结算</el-button
+                >
+                <el-button
+                    size="mini"
+                    type="success"
+                    v-if="isEdit && isCostBear && isSettle == 0"
+                    @click="handleSave"
+                    >保存</el-button
+                >
+            </el-col>
+        </el-row>
+
+        <el-table
+            border
+            :data="tableData"
+            ref="tableRef"
+            :header-cell-class-name="setClassName"
+            @selection-change="handleSelectionChange"
+        >
+            <el-table-column
+                type="selection"
+                v-if="isRepair && currRowInfo.isSlt == 0"
+                :selectable="() => !this.selDisabled"
+            />
+            <el-table-column
+                align="center"
+                width="55"
+                v-if="isRepair && currRowInfo.isSlt == 1"
+            >
+                <template slot-scope="{ row }">
+                    <el-checkbox :checked="row.isSlt == 1" disabled />
+                </template>
+            </el-table-column>
+
+            <el-table-column
+                align="center"
+                v-for="(t, index) in tableColumns"
+                :key="index"
+                :label="t.t_label"
+                :width="t.t_slot === 't_date' ? '180' : ''"
+                show-overflow-tooltip
+            >
+                <template slot-scope="scope">
+                    <template v-if="t.t_slot && isEdit">
+                        <!-- 调整天数时的输入框 -->
+                        <el-input
+                            v-if="t.t_slot === 't_ipt'"
+                            v-model.number="scope.row[t.t_prop]"
+                            style="width: 80px"
+                            type="number"
+                            :ref="`editIpt_${scope.$index}`"
+                            :class="{
+                                active: activeIndex === scope.$index,
+                            }"
+                        />
+
+                        <!-- 调整终结日期的日期选择组件 -->
+                        <el-date-picker
+                            v-model="scope.row[t.t_prop]"
+                            type="date"
+                            placeholder="选择日期"
+                            v-if="t.t_slot === 't_date'"
+                            value-format="yyyy-MM-dd"
+                            :ref="`editTime_${scope.$index}`"
+                            :class="{
+                                active: activeIndexTime === scope.$index,
+                            }"
+                            :picker-options="{
+                                disabledDate: (time) => {
+                                    const currentDate = new Date(
+                                        scope.row.startTime || new Date(),
+                                    )
+                                    currentDate.setDate(
+                                        currentDate.getDate() - 1,
+                                    )
+                                    return (
+                                        time.getTime() < currentDate.getTime()
+                                    )
+                                },
+                            }"
+                            style="width: 150px"
+                        />
+                    </template>
+                    <template v-else-if="t.t_slot && t.t_slot === 'status'">
+                        <el-tag size="mini" type="warning">待报废</el-tag>
+                    </template>
+                    <template v-else>
+                        {{ scope.row[t.t_prop] }}
+                    </template>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+import { editSaveApi } from '@/api/cost/cost.js'
+export default {
+    props: {
+        // 列表每一列配置项
+        tableColumns: {
+            type: Array,
+            default: () => [],
+        },
+        // 列表上方标题
+        tableTitle: {
+            type: String,
+            default: () => '',
+        },
+        // 是否显示费用承担方
+        isCostBear: {
+            type: Boolean,
+            default: () => false,
+        },
+        // 是否是维修单
+        isRepair: {
+            type: Boolean,
+            default: () => false,
+        },
+        // 列表数据源
+        tableData: {
+            type: Array,
+            default: () => [],
+        },
+        // 01 或者 03 承担方
+        constBear: {
+            type: Number,
+            default: () => 1,
+        },
+        // 合计金额
+        totalPrice: {
+            type: [Number, String],
+            default: () => -1,
+        },
+        // 是否结算  0是未结算 1是已结算
+        isSettle: {
+            type: [Number, String],
+            default: () => 0,
+        },
+        // 列表类型 1 01承担方 2 03承担方 3 维修 4 未还 5 报废 6 待报废
+        listType: {
+            type: Number,
+            default: () => 0,
+        },
+        // 当前行的数据信息
+        currRowInfo: {
+            type: Object,
+            default: () => null,
+        },
+    },
+
+    data() {
+        return {
+            isEdit: false, // 是否编辑数据
+            batchNum: '', // 批量调整天数的数据源
+            activeIndex: '', // 调整天数输入框不合格时的 index 用来设置动态 class 增加一个红色边框
+            activeIndexTime: '', // 调整终结日期时的 index 用来设置动态 class 增加一个红色边框
+            selDisabled: true,
+        }
+    },
+
+    methods: {
+        /** 编辑按钮 */
+        handleEdit() {
+            this.isEdit = !this.isEdit
+            if (!this.isEdit) {
+                this.batchNum = ''
+                this.$emit('handelSaveSuccess')
+            }
+
+            if (this.isRepair) {
+                this.$refs.tableRef.clearSelection()
+                this.selDisabled = !this.selDisabled
+            }
+        },
+        /** 调整天数 */
+        iptChange(val) {
+            const regex = /^-?\d+$/
+            const isNum = regex.test(val)
+            if (!isNum) {
+                this.$message.error('请输入正整数或负整数或0！')
+                return
+            }
+
+            this.tableData.map((e) => {
+                e.trimDay = val
+            })
+        },
+        /** 保存按钮 */
+        async handleSave() {
+            const regex = /^-?\d+$/
+            let isNum = false
+            try {
+                // 1. 先循环列表数据 判断调整的天数是否符合要求
+                this.tableData.map((e, v) => {
+                    console.log(e)
+                    this.$message.closeAll()
+                    if (!e.endTime) {
+                        this.$message.error('请选择终结日期！')
+                        this.activeIndexTime = v
+                        this.$refs[`editTime_${v}`][0].focus()
+                        isNum = true
+                        throw new Error()
+                    }
+                    if (!regex.test(e.trimDay)) {
+                        this.$message.error('请输入正整数或负整数或0！')
+                        this.activeIndex = v
+                        this.$refs[`editIpt_${v}`][0].focus()
+                        isNum = true
+                        throw new Error()
+                    }
+                    if (e.trimDay < 0 && Math.abs(e.trimDay) > e.leaseDays) {
+                        this.$message.error('减免天数不能大于应结算天数！')
+                        this.activeIndex = v
+                        this.$refs[`editIpt_${v}`][0].focus()
+                        isNum = true
+                        throw new Error()
+                    }
+                })
+
+                if (isNum) return
+
+                // 2. 组装保存时的参数
+                let saveParams = []
+                this.tableData.map((e) => {
+                    const item = {
+                        agreementId: e.agreementId, // 协议id
+                        id: e.id,
+                        typeId: e.typeId, // 设备id
+                        trimDay: e.trimDay, // 调整的天数
+                        maId: e.maId || '',
+                        endTime: e.endTime, // 终结时间
+                    }
+
+                    saveParams.push(item)
+                })
+
+                // 3. 请求后台接口传递更改后的数据
+                const res = await editSaveApi(saveParams)
+
+                if (res.code == 200) {
+                    this.$message.success('保存成功！')
+                    this.activeIndex = ''
+                    this.activeIndexTime = ''
+                    this.batchNum = ''
+                    this.isEdit = false
+                    this.$emit('handelSaveSuccess')
+                }
+            } catch {}
+        },
+        /** 单个列表确认结算 */
+        submitSell() {
+            let isFlag = false
+            this.$message.closeAll()
+            try {
+                // 1. 先循环列表数据 判断 终结日期是否为空
+                this.tableData.map((e, v) => {
+                    if (!e.endTime) {
+                        this.$message.error('终止日期不能有空值！')
+                        isFlag = true
+                        throw new Error()
+                    }
+                })
+                if (isFlag) return
+                // 2. 提示并通知父组件请求后台接口
+                this.$confirm(
+                    '确定后则会生成财务报表，数据将不可修改，请确认检查无误',
+                    '提示',
+                    {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning',
+                    },
+                ).then(() => {
+                    this.$emit('submitSell', `0${this.constBear}`)
+                })
+            } catch {}
+        },
+        /** 导出按钮 */
+        handleExport() {
+            this.$emit('handleExport', this.listType)
+        },
+        setClassName({ column }) {
+            // 若为选择框,且数据皆为不可选时
+            if (column.type == 'selection' && this.selDisabled) {
+                return 'all-disabled'
+            }
+        },
+        /** 列表复选框选择事件 */
+        handleSelectionChange(list) {
+            let repairPriceAmount = 0
+            console.log(list, 'list')
+            list.forEach((e) => {
+                repairPriceAmount += e.partAllCosts * 1
+            })
+            this.$emit('onChangeRepairPrice', repairPriceAmount, list)
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.table-title {
+    position: relative;
+    min-height: 48px;
+    border: 1px solid #7e7e7e;
+    background: linear-gradient(to right, #b4b3b3, #edebeb);
+    align-items: center !important;
+    justify-content: space-around;
+
+    .cost-bear {
+        display: flex;
+        padding-left: 12px;
+        font-weight: bold;
+        color: red;
+
+        span {
+            width: 50%;
+        }
+    }
+
+    .title {
+        text-align: center;
+        font-size: 20px;
+        font-weight: bold;
+        letter-spacing: 4px;
+    }
+
+    .btn-item {
+        text-align: right;
+        padding-right: 12px;
+
+        .el-button {
+            padding: 6px 10px;
+        }
+    }
+
+    // 维修单提示
+    .repair-tip {
+        position: absolute;
+        left: 2px;
+        bottom: 2px;
+        color: red;
+        font-size: 12px;
+    }
+
+    // 批量调整天数设置
+    .batch-system-day {
+        position: absolute;
+        top: -50px;
+        right: 30px;
+        height: 36px;
+        line-height: 36px;
+    }
+}
+::v-deep .active {
+    .el-input__inner:focus {
+        border-color: #f56c6c;
+    }
+}
+::v-deep .all-disabled .el-checkbox__input .el-checkbox__inner {
+    background-color: #edf2fc;
+    border-color: #dcdfe6;
+    cursor: not-allowed;
+}
+</style>
diff --git a/src/views/cost/csotSettlement/component/monthRecord.vue b/src/views/cost/csotSettlement/component/monthRecord.vue
new file mode 100644
index 0000000..0d242a3
--- /dev/null
+++ b/src/views/cost/csotSettlement/component/monthRecord.vue
@@ -0,0 +1,347 @@
+<template>
+    <!-- 月结记录弹框 -->
+    <div>
+        <el-dialog
+            title="月结记录"
+            append-to-body
+            :visible.sync="monthRecordDialogVisible"
+            :before-close="handleCloseMonthRecordDialog"
+            width="80%"
+        >
+            <el-form inline :model="monthRecordParams" ref="monthRecordFormRef">
+                <el-form-item label="结算月份" prop="dateMonth">
+                    <el-date-picker
+                        v-model="dateMonth"
+                        type="month"
+                        placeholder="请选择月份"
+                        value-format="yyyy-MM"
+                        @change="onChangeTime"
+                    />
+                </el-form-item>
+                <el-form-item label="费用承担方" prop="costBearingParty">
+                    <el-select
+                        v-model="monthRecordParams.costBearingParty"
+                        clearable
+                    >
+                        <el-option
+                            v-for="item in costBearList"
+                            :key="item.id"
+                            :value="item.value"
+                            :label="item.label"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button
+                        type="primary"
+                        icon="el-icon-search"
+                        size="mini"
+                        @click="handleQuery"
+                        >查询</el-button
+                    >
+                    <el-button
+                        icon="el-icon-refresh"
+                        size="mini"
+                        @click="resetQuery"
+                        >重置</el-button
+                    >
+                    <el-button
+                        type="primary"
+                        plain
+                        size="mini"
+                        @click="handelExport(null)"
+                        >批量导出</el-button
+                    >
+                </el-form-item>
+            </el-form>
+
+            <el-table
+                border
+                :data="monthRecordList"
+                @selection-change="handleSelectionChange"
+            >
+                <el-table-column type="selection" align="center" />
+                <el-table-column
+                    prop="unitName"
+                    align="center"
+                    label="单位名称"
+                />
+                <el-table-column
+                    prop="projectName"
+                    align="center"
+                    label="工程名称"
+                />
+                <el-table-column prop="month" align="center" label="结算月份" />
+                <el-table-column
+                    prop="costBearingParty"
+                    align="center"
+                    label="费用承担方"
+                />
+                <el-table-column prop="costs" align="center" label="结算金额" />
+                <el-table-column align="center" label="操作">
+                    <template slot-scope="{ row }">
+                        <el-button type="text" @click="previewDetails(row)"
+                            >明细</el-button
+                        >
+                        <el-button type="text" @click="handelExport(row)"
+                            >导出明细表</el-button
+                        >
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <pagination
+                :total="monthRecordTotal"
+                :page.sync="monthRecordParams.pageNum"
+                :limit.sync="monthRecordParams.pageSize"
+                @pagination="getMonthRecordList"
+            />
+
+            <!-- 内层弹框 -->
+            <el-dialog
+                width="75%"
+                title="明细"
+                :visible.sync="innerVisible"
+                append-to-body
+                :before-close="handleCloseMInnerDialog"
+            >
+                <el-row :gutter="20" class="title-row">
+                    <el-col :span="12">
+                        领用单位：{{ monthDetailsInfo.unitName || '' }}
+                    </el-col>
+                    <el-col :span="12" class="pl-col">
+                        月结月份：
+                        {{ monthDetailsInfo.month || '' }}</el-col
+                    >
+                </el-row>
+                <el-row :gutter="20" class="title-row">
+                    <el-col :span="12">
+                        工程名称：{{ monthDetailsInfo.projectName || '' }}
+                    </el-col>
+                    <el-col :span="12" class="pl-col" style="color: red">
+                        费用承担方：{{
+                            monthDetailsInfo.costBearingParty || ''
+                        }}
+
+                        {{
+                            monthDetailsInfo.costBearingParty == '01'
+                                ? '(项目)'
+                                : '(分包)'
+                        }}
+                    </el-col>
+                </el-row>
+
+                <el-table border :data="monthDetails" max-height="600">
+                    <el-table-column
+                        label="序号"
+                        align="center"
+                        type="index"
+                        width="55"
+                    />
+                    <el-table-column
+                        prop="typeName"
+                        label="设备名称"
+                        align="center"
+                    />
+                    <el-table-column
+                        prop="modelName"
+                        label="规格型号"
+                        align="center"
+                    />
+                    <el-table-column
+                        prop="nuitName"
+                        label="计量单位"
+                        align="center"
+                    />
+                    <el-table-column prop="num" label="数量" align="center" />
+                    <el-table-column
+                        prop="leasePrice"
+                        label="台班费单价 (元/天)"
+                        align="center"
+                    />
+                    <el-table-column
+                        prop="startTime"
+                        label="开始日期"
+                        align="center"
+                    />
+                    <el-table-column
+                        prop="endTime"
+                        label="结算日期"
+                        align="center"
+                    />
+                    <el-table-column
+                        prop="leaseDays"
+                        label="结算天数"
+                        align="center"
+                    />
+                    <el-table-column
+                        prop="costs"
+                        label="结算金额"
+                        align="center"
+                    />
+                    <el-table-column
+                        prop="realCosts"
+                        label="本月暂记金额(元)"
+                        align="center"
+                    />
+                </el-table>
+            </el-dialog>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { getMonthRecordApi } from '@/api/cost/cost.js'
+export default {
+    props: {
+        monthRecordDialogVisible: {
+            type: Boolean,
+            default: () => false,
+        },
+        agreementId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
+    data() {
+        return {
+            // 费用承担方
+            costBearList: [
+                { id: 1, label: '全部', value: '' },
+                { id: 2, label: '01', value: '01' },
+                { id: 3, label: '03', value: '03' },
+            ],
+            // 查询参数
+            monthRecordParams: {
+                startTime: '',
+                endTime: '',
+                agreementId: '',
+                costBearingParty: '',
+                pageNum: 1,
+                pageSize: 10,
+            },
+            // 列表数据源
+            monthRecordList: [],
+            // 复选框勾选后数据
+            selectList: [],
+            // 内测弹框
+            innerVisible: false,
+            // 列表数量
+            monthRecordTotal: 1,
+            // 筛选日期
+            dateMonth: '',
+            // 月结明细表头
+            monthDetailsInfo: {},
+            // 月结明细 列表
+            monthDetails: [],
+        }
+    },
+    created() {
+        this.getMonthRecordList()
+    },
+    methods: {
+        /** 获取月结记录列表数据 */
+        async getMonthRecordList() {
+            this.monthRecordParams.agreementId = this.agreementId
+            // 调后台 Api 获取数据
+            const res = await getMonthRecordApi([this.monthRecordParams])
+            this.monthRecordList = res.data
+        },
+        /** 查询 */
+        handleQuery() {
+            this.getMonthRecordList()
+        },
+        /** 重置 */
+        resetQuery() {
+            this.resetForm('monthRecordFormRef')
+            this.monthRecordParams.startTime = ''
+            this.monthRecordParams.endTime = ''
+            this.dateMonth = ''
+            this.getMonthRecordList()
+        },
+        /** 导出按钮 */
+        handelExport(row) {
+            // 如果 row 为null  表示批量导出
+            const { startTime, endTime, agreementId, costBearingParty } =
+                this.monthRecordParams
+            let exportList = [
+                {
+                    codeNum: '',
+                    startTime,
+                    endTime,
+                    agreementId,
+                    costBearingParty,
+                },
+            ]
+            if (!row && this.selectList.length < 1) {
+                this.$message.error('请勾选需要导出的数据！')
+                return
+            } else if (!row && this.selectList.length > 0) {
+                this.selectList.map((e) => {
+                    exportList[0].codeNum += e.codeNum + ','
+                })
+                exportList[0].codeNum = exportList[0].codeNum.slice(0, -1)
+            } else {
+                exportList[0].codeNum = row.codeNum
+            }
+
+            this.downloadJson(
+                'material/sltAgreementInfo/exportSltInfoMonth',
+                JSON.stringify(exportList),
+                `月结明细${new Date().getTime()}.xlsx`,
+            )
+        },
+        /** 列表勾选 */
+        handleSelectionChange(list) {
+            this.selectList = list
+        },
+        /** 关闭外侧弹框*/
+        handleCloseMonthRecordDialog() {
+            this.$emit('handleCloseMonthRecordDialog')
+        },
+        /** 关闭内测弹框 */
+        handleCloseMInnerDialog() {
+            this.innerVisible = false
+        },
+        /** 明细按钮 */
+        previewDetails(row) {
+            const { unitName, month, projectName, costBearingParty } = row
+            this.monthDetailsInfo = {
+                unitName,
+                month,
+                projectName,
+                costBearingParty,
+            }
+            console.log(row, '明细')
+            this.monthDetails = row.node
+            this.innerVisible = true
+        },
+        /** 时间变化 */
+        onChangeTime(val) {
+            let startTime = ''
+            if (val.split('-')[1] == 1) {
+                startTime = `${val.split('-')[0] * 1 - 1}-12-21`
+            } else {
+                startTime = `${val.split('-')[0]}-0${
+                    val.split('-')[1] * 1 - 1
+                }-21`
+            }
+            let endTime = val + '-20'
+
+            this.monthRecordParams.startTime = startTime
+            this.monthRecordParams.endTime = endTime
+        },
+    },
+}
+</script>
+
+<style scoped>
+.title-row {
+    min-height: 38px;
+    line-height: 38px;
+    font-size: 16px;
+}
+.pl-col {
+    padding-left: 180px !important;
+}
+</style>
diff --git a/src/views/cost/csotSettlement/costApplyList.vue b/src/views/cost/csotSettlement/costApplyList.vue
index 03f7a69..1cf0910 100644
--- a/src/views/cost/csotSettlement/costApplyList.vue
+++ b/src/views/cost/csotSettlement/costApplyList.vue
@@ -1,207 +1,217 @@
 <template>
+    <!-- 费用结算页面 -->
     <div class="app-container" id="costApplyList">
-        <el-form
-            :model="queryParams"
-            ref="queryForm"
-            size="small"
-            :inline="true"
-            v-show="showSearch"
-            label-width="80px"
-        >
-            <el-form-item label="结算单位" prop="unitId">
-                <el-select
-                    v-model="queryParams.unitId"
-                    placeholder="请选择往来单位"
-                    clearable
-                    filterable
-                >
-                    <el-option
-                        v-for="item in unitList"
-                        :key="item.unitId"
-                        :label="item.unitName"
-                        :value="item.unitId"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="结算工程" prop="projectId">
-                <el-select
-                    v-model="queryParams.projectId"
-                    placeholder="请选择工程名称"
-                    clearable
-                    filterable
-                >
-                    <el-option
-                        v-for="item in projectList"
-                        :key="item.projectId"
-                        :label="item.projectName"
-                        :value="item.projectId"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="结算状态" prop="sltStatus">
-                <el-select
-                    v-model="queryParams.sltStatus"
-                    placeholder="请选择结算状态"
-                    clearable
-                    filterable
-                >
-                    <el-option
-                        v-for="item in statusList"
-                        :key="item.id"
-                        :label="item.name"
-                        :value="item.id"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button
-                    type="primary"
-                    icon="el-icon-search"
-                    size="mini"
-                    @click="handleQuery"
-                    >查询</el-button
-                >
-                <el-button
-                    icon="el-icon-refresh"
-                    size="mini"
-                    @click="resetQuery"
-                    >重置</el-button
-                >
-                <el-button
-                    type="primary"
-                    plain
-                    size="mini"
-                    @click="handleApplyList"
-                    >批量结算</el-button
-                >
-            </el-form-item>
-        </el-form>
-
-        <el-table
-            v-loading="loading"
-            :data="agreementList"
-            @selection-change="handleSelectionChange"
-        >
-            <el-table-column type="selection" width="55" align="center" />
-            <!-- <el-table-column
-                label="序号"
-                align="center"
-                width="80"
-                type="index"
+        <template v-if="isHome">
+            <el-form
+                :model="queryParams"
+                ref="queryForm"
+                size="small"
+                :inline="true"
+                v-show="showSearch"
+                label-width="80px"
             >
-                <template scope="scope">
-                    <span>{{
-                        (queryParams.pageNum - 1) * 10 + scope.$index + 1
-                    }}</span>
-                </template>
-            </el-table-column> -->
-            <el-table-column
-                align="center"
-                label="序号"
-                type="index"
-                :index="
-                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
-                "
-            />
-            <el-table-column
-                label="协议编号"
-                align="center"
-                prop="agreementCode"
-                :show-overflow-tooltip="true"
-            />
-            <!-- <el-table-column label="合同编号" align="center" prop="contractCode" :show-overflow-tooltip="true" />
-      <el-table-column label="附件图片" align="center" prop="fileName" :show-overflow-tooltip="true" />
-      <el-table-column label="签订日期" align="center" prop="signTime" :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="cost"
-                :show-overflow-tooltip="true"
-            />
-            <el-table-column
-                label="结算状态"
-                align="center"
-                prop="sltStatus"
-                :show-overflow-tooltip="true"
-            >
-                <template slot-scope="scope">
-                    <span v-if="scope.row.sltStatus == '1'">未结算</span>
-                    <span v-if="scope.row.sltStatus == '2'">已结算</span>
-                    <span v-if="scope.row.sltStatus == '3'">待审核</span>
-                </template>
-            </el-table-column>
-            <!-- <el-table-column label="租赁期限(天)" align="center" prop="leaseDay" :show-overflow-tooltip="true" />
-      <el-table-column label="授权人" align="center" prop="authPerson" :show-overflow-tooltip="true" />
-      <el-table-column label="联系电话 " align="center" prop="phone" :show-overflow-tooltip="true" />
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> -->
-            <el-table-column
-                label="操作"
-                align="center"
-                width="300"
-                class-name="small-padding fixed-width"
-            >
-                <template slot-scope="scope">
-                    <el-button
-                        size="mini"
-                        type="primary"
-                        icon="el-icon-edit"
-                        @click="handleApply(scope.row)"
-                        v-if="scope.row.sltStatus != '2'"
-                        >结算申请</el-button
+                <el-form-item label="结算单位" prop="unitId">
+                    <el-select
+                        v-model="queryParams.unitId"
+                        placeholder="请选择往来单位"
+                        clearable
+                        filterable
                     >
-                    <!-- <el-button
-            size="mini"
-            type="danger" 
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >撤销申请</el-button> -->
-                </template>
-            </el-table-column>
-        </el-table>
+                        <el-option
+                            v-for="item in unitList"
+                            :key="item.unitId"
+                            :label="item.unitName"
+                            :value="item.unitId"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="结算工程" prop="projectId">
+                    <el-select
+                        v-model="queryParams.projectId"
+                        placeholder="请选择工程名称"
+                        clearable
+                        filterable
+                    >
+                        <el-option
+                            v-for="item in projectList"
+                            :key="item.projectId"
+                            :label="item.projectName"
+                            :value="item.projectId"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="结算状态" prop="sltStatus">
+                    <el-select
+                        v-model="queryParams.sltStatus"
+                        placeholder="请选择结算状态"
+                        clearable
+                        filterable
+                    >
+                        <el-option
+                            v-for="item in statusList"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button
+                        type="primary"
+                        icon="el-icon-search"
+                        size="mini"
+                        @click="handleQuery"
+                        >查询</el-button
+                    >
+                    <el-button
+                        icon="el-icon-refresh"
+                        size="mini"
+                        @click="resetQuery"
+                        >重置</el-button
+                    >
+                    <el-button
+                        type="primary"
+                        plain
+                        size="mini"
+                        @click="handleBatchExport"
+                        >批量导出月结明细表</el-button
+                    >
+                </el-form-item>
+            </el-form>
 
-        <pagination
-            v-show="total > 0"
-            :total="total"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            @pagination="getList"
-        />
+            <el-table
+                v-loading="loading"
+                :data="agreementList"
+                border
+                @selection-change="handleSelectionChange"
+                ref="tableRef"
+            >
+                <el-table-column type="selection" width="55" align="center" />
+                <el-table-column
+                    align="center"
+                    label="序号"
+                    type="index"
+                    :index="
+                        indexContinuation(
+                            queryParams.pageNum,
+                            queryParams.pageSize,
+                        )
+                    "
+                />
+                <el-table-column
+                    label="协议编号"
+                    align="center"
+                    prop="agreementCode"
+                    show-overflow-tooltipp
+                />
+
+                <el-table-column
+                    label="结算单位"
+                    align="center"
+                    prop="unitName"
+                    show-overflow-tooltip
+                />
+                <el-table-column
+                    label="结算工程"
+                    align="center"
+                    prop="projectName"
+                    show-overflow-tooltip
+                />
+                <el-table-column
+                    label="累计结算费用"
+                    align="center"
+                    prop="cost"
+                    show-overflow-tooltip
+                />
+                <el-table-column label="结算状态" align="center">
+                    <template slot-scope="{ row }">
+                        <!-- <span v-if="scope.row.sltStatus == '1'">未结算</span>
+                        <span v-if="scope.row.sltStatus == '2'">已结算</span>
+                        <span v-if="scope.row.sltStatus == '3'">待审核</span> -->
+                        <el-tag type="warning" size="mini" v-if="row.isSlt == 0"
+                            >结算中</el-tag
+                        >
+                        <el-tag type="success" size="mini" v-if="row.isSlt == 1"
+                            >已结算</el-tag
+                        >
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+                    <template slot-scope="{ row }">
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            style="padding: 5px 10px"
+                            @click="handleMonthRecord(row)"
+                            >月结记录</el-button
+                        >
+                        <el-button
+                            size="mini"
+                            :type="row.isSlt == 1 ? 'success' : 'primary'"
+                            style="padding: 5px 10px"
+                            @click="handleFinishCostAndDetails(row)"
+                            >{{
+                                row.isSlt == 1 ? '结算明细' : '完工结算'
+                            }}</el-button
+                        >
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <pagination
+                v-show="total > 0"
+                :total="total"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+                @pagination="getList"
+            />
+
+            <!-- 批量导出月结明细 -->
+            <ExportDialog
+                :exportDialogVisible="exportDialogVisible"
+                :exportParams="exportParams"
+                @handleCloseDialog="handleCloseDialog"
+                @handleSubmit="handleSubmit"
+            />
+            <!-- 月结记录弹框 -->
+            <MonthRecord
+                v-if="monthRecordDialogVisible"
+                :monthRecordDialogVisible="monthRecordDialogVisible"
+                :agreementId="agreementId"
+                @handleCloseMonthRecordDialog="handleCloseMonthRecordDialog"
+            />
+        </template>
+        <template v-else>
+            <FinishAndDetails
+                :currRowInfo="currRowInfo"
+                :pageContent="pageContent"
+                @closeCurrPage="closeCurrPage"
+            />
+        </template>
     </div>
 </template>
 
 <script>
-import {
-    getAgreementList,
-    getUnitList,
-    getProjectList,
-} from '@/api/claimAndRefund/receive'
+import { getUnitList, getProjectList } from '@/api/claimAndRefund/receive'
 import { getSltAgreementInfo } from '@/api/cost/cost'
 
+import ExportDialog from './component/exportDialog.vue'
+import MonthRecord from './component/monthRecord.vue'
+import FinishAndDetails from './component/finishAndDetails.vue'
+
 export default {
     name: 'CostApplyList',
-    dicts: ['sys_normal_disable'],
+    components: {
+        ExportDialog,
+        MonthRecord,
+        FinishAndDetails,
+    },
     data() {
         return {
             // 遮罩层
-            loading: true,
+            loading: false,
             // 选中数组
             ids: [],
-            // 非单个禁用
-            single: true,
-            // 非多个禁用
-            multiple: true,
             // 显示搜索条件
             showSearch: true,
             // 总条数
@@ -211,13 +221,16 @@ export default {
             // 工程数据
             projectList: [],
             statusList: [
-                { id: '0', name: '请选择' },
-                { id: '1', name: '未结算' },
-                { id: '2', name: '已结算' },
-                { id: '3', name: '待审核' },
+                { id: '', name: '请选择' },
+                { id: '0', name: '结算中' },
+                { id: '1', name: '已结算' },
             ], //集合
             // 表格数据
-            agreementList: [],
+            agreementList: [
+                {
+                    agreementCode: '测试',
+                },
+            ],
             // 弹出层标题
             title: '',
             // 是否显示弹出层
@@ -233,66 +246,20 @@ export default {
                 unitId: '',
                 projectId: '',
             },
-            // 表单参数
-            form: {},
-            //图片上传
-            uploadHeader: process.env.VUE_APP_BASE_API,
-            imageUrl: '',
-            imageName: '',
-            fileList: [],
-            field101fileList: [],
-            dialogImageUrl: '',
-            dialogVisible: false,
-            //上传地址
-            // uploadUrl:'http://192.168.0.14:21624/system',//线上服务器地址+system
-            // uploadUrl:'http://112.29.103.165:21626/system',//线上服务器地址+system
-            uploadUrl: process.env.VUE_APP_BASE_API + '/system', // 上传的图片服务器地址
-            // 表单校验
-            rules: {
-                contractCode: [
-                    {
-                        required: true,
-                        message: '合同编号不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-                signTime: [
-                    {
-                        required: true,
-                        message: '签订日期不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-                unitName: [
-                    {
-                        required: true,
-                        message: '往来单位不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-                projectName: [
-                    {
-                        required: true,
-                        message: '工程名称不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-            },
-            peopleOpen: false,
-            noticeOpen: false,
-            nform: {
-                notice: '',
-            },
-            nrules: {
-                notice: [
-                    {
-                        required: true,
-                        message: '通知内容不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-            },
-            deptName: undefined,
+            // 批量导出月结明细弹框
+            exportDialogVisible: false,
+            // 月结记录弹框
+            monthRecordDialogVisible: false,
+            // 是否显示主页
+            isHome: true,
+            // 当前行信息
+            currRowInfo: null,
+            // 页面标题
+            pageContent: '',
+            // 查询月结记录的参数
+            agreementId: '',
+            // 批量导出的参数
+            exportParams: [],
         }
     },
     created() {
@@ -361,35 +328,70 @@ export default {
         // 多选框选中数据
         handleSelectionChange(selection) {
             this.ids = selection.map((item) => item)
-            this.single = selection.length != 1
-            this.multiple = !selection.length
         },
 
-        /** 删除按钮操作 */
-        handleDelete(row) {
-            // const agreementId = row.agreementId;
-            // let param = {
-            //   agreementId:row.agreementId+''
-            // }
-            // this.$modal.confirm('是否确认删除该数据项？').then(function() {
-            //   return removeAgreement(param);
-            // }).then(() => {
-            //   this.getList();
-            //   this.$modal.msgSuccess("删除成功");
-            // }).catch(() => {});
+        /** 批量导出月结明细表 */
+        handleBatchExport() {
+            console.log('批量导出月结明细表')
+            this.exportParams = []
+            if (this.ids.length < 1) {
+                this.$message.error('请勾选需要导出的数据！')
+                return
+            }
+
+            //  获取选中导出的协议 id 并组装参数
+            this.ids.forEach((e) => {
+                this.exportParams.push({
+                    agreementId: e.agreementId,
+                    costBearingParty: '',
+                })
+            })
+
+            this.exportDialogVisible = true
         },
-        /** 导出按钮操作 */
-        handleExport() {
-            // this.download('material/agreementInfo/export', {
-            //   ...this.queryParams
-            // }, `协议_${new Date().getTime()}.xlsx`)
+        /** 关闭弹框 */
+        handleCloseDialog() {
+            this.exportDialogVisible = false
+        },
+        /** 确定按钮 */
+        handleSubmit(form) {
+            if (form.length === 1) {
+                this.exportParams.forEach((e) => {
+                    e.costBearingParty = form[0]
+                })
+            }
+
+            this.downloadJson(
+                'material/sltAgreementInfo/exportSltInfoMonth',
+                JSON.stringify(this.exportParams),
+                `月结明细${new Date().getTime()}.xlsx`,
+            )
+
+            this.exportDialogVisible = false
+            this.$refs.tableRef.clearSelection()
+        },
+        /** 月结记录 */
+        handleMonthRecord(row) {
+            this.agreementId = row.agreementId
+            this.monthRecordDialogVisible = true
+        },
+        /** 完工结算  结算明细*/
+        handleFinishCostAndDetails(row) {
+            this.currRowInfo = row
+            this.pageContent = '结算明细'
+            this.isHome = false
+        },
+        /** 关闭月结记录弹框 */
+        handleCloseMonthRecordDialog() {
+            this.monthRecordDialogVisible = false
+        },
+        /** 关闭完工结算或结算明细页面 */
+        closeCurrPage(isRefresh) {
+            this.isHome = true
+            if (isRefresh) {
+                this.getList()
+            }
         },
     },
 }
 </script>
-<style lang="scss" scoped>
-::v-deep.el-table .fixed-width .el-button--mini {
-    width: 80px !important;
-    margin-bottom: 10px;
-}
-</style>